搜索
网页制作案例教程毋建军郑宝昆郭锐编著清华大学出版社第4章网页基本元素设计本章学习目标（知识要点）网页设计的基本原则网页设计的基本流程网页版式及色彩设计插入网页头部信息添加文本添加图像添加超链接插入多媒体元素本章学习导航网页设计的基本原则和流程是读者创建突出主题、美观实用网页的关键，本章主要网页设计的基本原则和流程，以及添加网页元素。本章内容在全书知识结构中所处位置如图所示基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护4.1网页设计的基本原则1）一致性2）反差效果3）重复原则4）排列原则5）分类原则6）分离性原则4.2网页设计的基本流程4.2.1设计主题1）主题不能过于分散，主题要小而精。因为网页主题越集中，一般情况下网页所有者在这方面投入的精力会更多，因此所提供信息的质量也会越高。2）主题要明确、突出，实现功能确定3）主题应涵盖网页的核心内容4）主题的设计要兼顾用户的注意力及搜索引擎检索的需要4.2.2总体结构设计1）页面设计中，既可以由外到内进行设计（用户浏览通常是由外到内的顺序），也可以由内到外进行设计，但设计中最好不要沿用先设计首页，再设计二级及三级页面的顺序，可以采用由二级页面开始，向外（二级页面到首页）向内（二级页面到三级子页）的顺序方式进行设计，向外是因为首页内容通常是所有二级页面内容的浓缩提炼和网站的目标所决定。向内是因为先前的步骤已经明确了网站的结构，这时，由外向内的设计符合思维方式。2）尽量按照功能结构设计每个页面的结构。3）页面的设计是一个迭代的过程，先粗略框架设计后，再逐步细化、逐步展现，是以用户的目标为中心的流动的过程。4.2.3网页布局设计网页的布局是指网页首页的结构形式和其他网页的结构形式，网页布局是网页设计和制作的基础，只有合理的进行网页布局，才能制作出完美的网页。为了达到统一、漂亮的视觉效果，网站中的所有网页都要围绕首页布局进行设计的。1）页面尺寸由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620x311个象素；分辨率在1024x768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。2）整体造型你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。3）页头页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。4）文本文本在页面中出现都数以行或者块（段落）出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。5）页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。6）图片图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。7）多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。（2）网页布局的方法1）纸上布局法许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。2）软件布局法如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。（3）网页布局的技术1）层叠样式表的应用在新的HTML4.0标准中，CSS（层叠样式表）被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。2）表格布局表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要所见即所得的软件），你会看到这个页面是如何利用表格的。3）框架布局不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。4.2.4网页素材收集4.2.5创建网页选择“文件”|“新建”菜单命令，打开“新建文档”对话框，在“分类”栏中选择“空白页”选项，在“页面类型”栏中选择“HTML”选项，单击“创建”按钮，如图4-2-2所示，就可以设计网页了。图4-2-2新建文档对话框图4.3网页版式及色彩设计4.3.1网页风格定位（1）颜色风格颜色是冲击人的视觉第一要素，是影响一个网站给人风格感受的重要因素。所以在配色选择上要注意网站所想表现的风格概念，想给予人们什么样的心情，选择适合的颜色。（2）版式风格版式通常有左右、上下、居中等几个主要形式，各适合不同类型、不同用户群的网站。（3）内容结构风格一个网站的风格定位，主要依据就是这个网站的内容，所以内容结构是控制网站风格方向的根基，是风格个性化的主导因素。（4）语言风格世上的语言种类繁多，不同国家的网站有不同的主体语言，但在同一个网站上，不同的语言字符对网站的影响亦不尽相同。如一个网站的中英文版本，网站风格适宜英文版但就不一定适宜中文版。英文版字符较为精简，适宜做小巧精致类型的网站，中文字符雅致繁复，较适宜做端庄严肃类型的网站。4.3.2网页版式选择1.“国”字形布局图4-3-1“国”字形布局2.“匡”字形布局图4-3-2“匡”字形布局3.“三”字形布局图4-3-3“三”字形布局4.“川”字形布局图4-3-4“川”字形布局5.海报型布局图4-3-5海报型布局6.Flash布局图4-3-6Flash布局7.标题文本型布局图4-3-7标题文本型布局8.框架型布局图4-3-8框架型布局9.变化型布局图4-3-9变化型布局4.3.3网页色彩搭配网页色彩搭配的原理1）色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2）色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。3）色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。4）色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。网页配色忌讳：1）不要将所有颜色都用到，尽量控制在三种色彩以内。2）背景和前文的对比尽量要大，(尽量不要用花纹繁复的图案作背景)，以便突出主要文字内容。背景与字体的搭配经验BGCOLOR=“＃f1fafa”//做正文的背景色好，淡雅BGCOLOR=“＃E8FFE8”//做标题的背景色好，与上面的颜色搭配很协调这两种颜色可以配黑字或FONTCOLOR=“＃800080”bgcolor=“＃E8E8FF”//做正文的背景色好，字体配黑色较好bgcolor=“＃8080C0”//上配黄色白色字体较好bgcolor=“＃E8D098”//上搭配浅蓝色或蓝色字体较好bgcolor=“＃EFEFDA”//上搭配浅蓝色或红色字体较好bgcolor=“＃F2F1D7”//配黑字素雅,红字醒目bgcolor=“＃336699”//配白字做标题较好bgcolor=“＃6699CC”和bgcolor=“＃479AC7”和bgcolor=“＃66CCCC”和bgcolor=“＃00B271”和bgcolor=“＃B45B3E”配白字都较好看//可做标题bgcolor=“＃FBF8EA”和bgcolor=“＃D5F3F4”和bgcolor=“＃D7FFF0”和bgcolor=“＃F0DAD2”和bgcolor=“＃DDF3FF”配黑字都较好看//一般做正文以上配色方案都比较淡雅。浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，较深底色配黄字有效果。4.4插入网页头部信息如果文档没有头部信息，在HTML中可以用代码方式直接写进去，在Dreamweaver中不但可以用写代码的方式，还可以用可视化方式为文档插入头部信息，方法如下：“插入”|“HTML”|“文件头标签”选一项插入内容即可图4-4-1插入“文件头标签”菜单图4.4.1插入META图4-4-2插入Meta对话框图4.4.2插入关键字图4-4-3网页头部“关键字”对话框4.4.3插入说明Description（页面内容的简介）用来告诉搜索引擎网站的主要内容。在设置时尽量要把简介写得清晰明白，字数不能太短也不能太长，一般保持在80~200之间。图4-4-4网页头部“说明”对话框4.4.4定义自动刷新在制作聊天室时，需要网页有定时刷新功能，以便从服务器上读取最新聊天信息。这种特性也是利用元数据完成的。可以将http-equiv属性设置为“refresh”，在content属性值中写入刷新的时间间隔为几秒。例如：metahttp-equiv=refreshcontent=3图4-4-5网页头部“刷新”对话框4.5添加文字（1）插入普通文本在DreamweaverCS5中，向网页中添加文本有以下三种方法：1）直接在文档窗口中输入文本。2）拷贝文本。3）从其他文档导入文本。（2）插入特殊字符在HTML代码中通过转义符来定义特殊字符，如“”用“>”来定义，需要记代码，比较麻烦。在DreamweaverCS5提供了比较简单方法，插入特殊字符的操作为：1）将光标定位在要插入特殊字符的位置。2）在“插入”栏的“文本”类别中，选择要插入的符号，图4-5-1“插入”栏的“文本”类别图3）在“插入”栏的“文本”类别中，单击“其他字符”图4-5-2“文本”栏4）如果没有找到要插入的字符，还