当前位置:编程学习 > 网站相关 >>

网页设计教程3——网页的构成元素:文字和图片

答案:作者:lain      发布时间:2002年6月27日   更新时间:2002年6月27日


写网页制作教程也不是一件容易的事情。在网上这样的教程已经相当多了,有的只是讲解某个网页软件的操作,比如把菜单命令啊讲一遍,有的虽然在某个具体问题上讲得非常详细,却缺少系统性,过于分散。
我想我还是从总体的网页建设上来讨论以下的问题。在以后的章节里,我不会针对某个软件做操作上的具体说明,我想传达给大家的是网页设计的一种理念。(说得自己好像很伟大的样子?!呵呵……)

我们知道,网页是由文字、图片和多媒体(如flash,视频等)构建而成的,这些我们称之为“网页元素”。其实最主要的就是文字和图片。嗯?怎么?太简单了?没什么值得讨论的?其实不是这样的,这里面大有文章可做~


本篇的主要内容是:
·文字
 定位和排版 文字大小的固定
·图片



·文字


在所有的页面中,文字,绝对是不可缺少的。涉及到文字方面的问题,主要是文字的定位和排版和固定大小的问题。

{定位和排版}

现在我们使用的可视化网页编辑软件,都不是所见即所得的。在编辑状态下看起来不错,一到浏览器里很可能走了样。文字的定位我们要用表格来实现。其实不止是文字,网页中所有元素的定位都要依靠表格。不是有这样的说法嘛,会用表格排版的才是网页设计高手~~呵呵~
关于表格的排版,很难说有什么固定的模式在里面,还是要靠大家实际操作练习的。在我刚学用表格排版时,一个页面要花上整整一夜的时间才能排出预想的效果……想起来我那时真是有精力啊……

我们可以举一个简单的用表格排版的例子,分析下面这个页面,我们可以把它分为三部分(见图中的红线划分)。左边是一张图片,中间是点击的链接项目,右边是说明文字。

点击在新窗口中浏览此图片
【图3.1】

分析清楚页面的机构之后,我们可以在Dreamweaver或者Frontpage中画出一个一行三列的表格。记住把表格的边线设置为0,这样在浏览器中才看不见表格线。

然后把相应的图片和文字放入对应的位置内,就这么简单啦~:)当然看起来容易,你实际排排看就知道了,软件不是这么听话的>_<~
在做页面之前,最好先在纸上简单得画画页面的构图,然后想想怎么用表格来分割。这样做起页面来就容易得多了。
还有很重要的一点要说明一下,网页中的字体最好全部使用“宋体”,如果用黑体、仿宋之类的字会很难看的(个人以为比较难看,而且看起来特别累)。常常看到一些网站的字体是不常见的字体,比如文鼎的字体,可是如果浏览者的机器中没有安装这类字体,那么他们看起来还是宋体(宋体是系统的默认字体)。所以,用一些不常见的字体时,就把它们做成图片使用,那就没问题了。

{文字大小的固定}

在我刚开始做主页的时候,我用的是FP,至于页面的字体,我理所当然用了里面的2号字(10磅)。可是这样的文字,在浏览器里看得时候就有问题了。浏览时我们可以改变字体的大小,如果用“较小”字体查看,页面看起来正好。但是如果浏览者设置了“最大”字体呢?这时候就可以看到页面是体无完肤了。。。。当然啦,我不说大家也猜到了,用CSS固定嘛,相当简单的!……可是我明白怎么用CSS已经是在我做主页相当久之后了……汗……
CSS,就是层叠样式表,在固定整个网页的风格方面有着不可替代的作用。DW内置的CSS编辑器是很好用的,它不止可以固定文字,还可以设置超链接风格和各种滤镜效果。我想CSS的问题,以后要专门写一章来讨论,现在我们只是讨论文字大小的固定问题,就先说一个最简单的方法~
在和之间加入以下代码:




font-size=12px就是表示文字大小是12px,也有人使用9pt的。这两种字体大小在800和1024的浏览器里都比较好看。boby标签是指页面的主题部分,table是指表格内的文字。因为我们的文字基本上都是在表格中的,所以需要定义表格内的文字大小。


· 图片

在网络上,浏览器支持的图片格式一般是GIF或者JPG。GIF最多支持256色,在图片颜色较少的时候我们一般采用GIF格式,能够减少图片的大小。动态的图片也是GIF格式的。JPG一般适用于颜色较多的图片,特别是有过渡色的图片。网页中图片的使用原则是在保持图片质量的前提下尽量减少图片的K数,一般单张图片不要超过20K(当然专门用于下载的壁纸什么的除外),整个页面的图片总和不要超过80K。页面的图片太多会严重影响下载的速度。
在网页编辑软件里,我们可以通过拖拽来拉伸图片达到自己想要的大小。但是这样只是改变了图片的尺寸,其实图片的K数并没有缩小。所以,在事先就要考虑好图片的大小而不是到了编辑器里再去变。
图片的处理,推荐使用photoshop,photoshop6.0有一项就是输出为网页格式图片,极大地方便了网页图形的制作。

在『文件』菜单下有一个『保存为网页格式』选项,选择后跳出这样的对话框:
点击在新窗口中浏览此图片

【图3.2】

对于JPG图片,我们一般选择60的质量输出就可以达到不错的效果了,看起来和100%的图片没有多少区别的。对于GIF图片,可以设置为128色、64色、32色甚至16色都可以。其中,选择“透明度”选项可以输出透明的GIF。

/upload/2007/10/18/20071018181330854.gif
【图3.3】  

点击在新窗口中浏览此图片
【图3.4】  

photoshop和firework都提供了切割图片的功能,这个功能能够让我们把一张大图片切割成好几张小图片,然后输出为网页格式,在浏览器里看起来还是一整张图片。一般我做制作页面,都是在PS里把整张页面做成一张图片,然后再切割输出,再编辑的。这样就消除了网页编辑器对一些排版的限制,非常随心所欲:)

比如我们做好了这样一张图:(原图大小为774×447,正好能在800×600的分辨率下满屏显示,直接保存为高质量的JPG图片为40K)

点击在新窗口中浏览此图片
【图3.5】

这个页面是我的主页某一版的首页部分,左边是链接选项,右边的空白部分是打算用来写更新的。好了,现在我们来切割页面。我们用工具箱的切割工具对这张图做以下的切割,经过切割,这张图被分割成了28张小图片。(之所以把左边的导航一个个分隔开,是为了方便在网页编辑软件中加入超链接。)

点击在新窗口中浏览此图片
【图3.6】


然后我们按先前说过的方法输出为网页格式,采用60压缩率,可以看到图片已经缩小为27K了。

GIF动画图片能在页面中起到点缀作用,能使页面充满动感。但是一定要记住GIF动画图片用得太多,因为不管怎么说,网站是以文字内容为主的,图片只是辅助品,不能喧宾夺主。
要是你打开一个网站,上面到处是动来动去的图片,还不时有张图片在屏幕里上窜下跳,会不会觉得头疼?你要是真想做一个动感十足的网站,还不如去学flash,多用用flash的交互功能,就不要在gif图片上大费周章了。
一般来说,GIF适用于做网站的banner和logo。点到即止。我不是很喜欢ulead cool3D做的立体字,那些效果虽然华丽却不适合用在网页上。当然这是个人意见,因为我比较喜欢简洁的东西。


嗯,这章就讲到这里吧。下章我们开始讲表格的超级用法,嘿嘿……

上一个:网页设计教程2——网页制作软件的选择和素材收集
下一个:强刺激调及形式美手法

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,