网页制作案例教程-清华大学出版社-第4章-网页基本元素设计

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第4章 网页基本元素设计本章学习目标（知识要点）n网页设计的基本原则n网页设计的基本流程n网页版式及色彩设计n插入网页头部信息n添加文本n添加图像n添加超链接n插入多媒体元素 本章学习导航n网页设计的基本原则和流程是读者创建突出主题、美观实用网页的关键，本章主要网页设计的基本原则和流程，以及添加网页元素。n本章内容在全书知识结构中所处位置如图所示 基础篇HTML篇CSS篇JavaScript篇提高篇网 页 设 计 与 开 发 流 程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表

2、单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护4.1网页设计的基本原则1 1）一致性）一致性2）反差效果3）重复原则4）排列原则5）分类原则6）分离性原则4.2网页设计的基本流程网页设计的基本流程4.2.1 设计主题1）主题不能过于分散，主题要小而精。因为网页主题越集中，一般情况下网页所有者在这方面投入的精力会更多，因此所提供信息的质量也会越高。2）主题要明确、突出，实现功能确定3）主题应涵盖网页的核心内容4）主题的设计要兼顾用户的注意力及搜索引擎检索的需要n4

3、.2.2 总体结构设计n1）页面设计中，既可以由外到内进行设计（用户浏览通常是由外到内的顺序），也可以由内到外进行设计，但设计中最好不要沿用先设计首页，再设计二级及三级页面的顺序，可以采用由二级页面开始，向外（二级页面到首页）向内（二级页面到三级子页）的顺序方式进行设计，向外是因为首页内容通常是所有二级页面内容的浓缩提炼和网站的目标所决定。向内是因为先前的步骤已经明确了网站的结构，这时，由外向内的设计符合思维方式。n2）尽量按照功能结构设计每个页面的结构。n3）页面的设计是一个迭代的过程，先粗略框架设计后，再逐步细化、逐步展现，是以用户的目标为中心的流动的过程。n4.2.3 网页布局设计n网页

4、的布局是指网页首页的结构形式和其他网页的结构形式，网页布局是网页设计和制作的基础，只有合理的进行网页布局，才能制作出完美的网页。为了达到统一、漂亮的视觉效果，网站中的所有网页都要围绕首页布局进行设计的。n1）页面尺寸n由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围 变得越来越小。一般分辨率在800 x600的情况下，页面的显示尺寸为：780 x428个象素；分辨率在640 x480的情况下，页面的显示尺寸 为:620 x 311个象素；分辨率在1024 x 768的情况下，页面的显示尺寸为：1007x600。

5、从以上数据可以看出，分辨率越高页面尺寸越大。n2）整体造型n你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔 和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形 为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图 形加以设计，在这其中某种图形的构图比例可

6、能占的多一些。n3）页头n页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。n4）文本n文本在页面中出现都数以行或者块（段落）出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。n5）页脚：n页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你

7、能看到，许多制作信息都是放置在页脚的。n6）图片 n图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。n7）多媒体n除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。n（2）网页布局的方法 n1）纸上布局法 n许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。n2）软件布局法 n如果你不喜欢用纸来画出你的布局

8、意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对 图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出 用纸张无法实现的布局意念。n（3）网页布局的技术n1）层叠样式表的应用 n在新的HTML4.0标准中，CSS（层叠样式表）被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是 一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CS

9、S 的介绍和使用方法。n2）表格布局n表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对 象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要所见即所得的软件），你会看到这个页面是如何利用表格的。n3）框架布局n不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，

10、把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。n4.2.4网页素材收集n4.2.5创建网页n选择“文件”|“新建”菜单命令，打开“新建文档”对话框，在“分类”栏中选择“空白页”选项，在“页面类型”栏中选择“HTML”选项，单击“创建”按钮，如图4-2-2所示，就可以设计网页了。 图4-2-2 新建文档对话框图 4.3 网页版式及色彩设计n4.3.1 网页风格定位n（1）颜色风格n颜色是冲击人的视觉第一要素，是影响一个网站给人风格感受的重要因素。所以在配色选择上要注意网站所想表现的风格概念，想给予人们什么样的心情，选择适合的颜色。n（2）版式风格n 版式通常

11、有左右、上下、居中等几个主要形式，各适合不同类型、不同用户群的网站。n（3）内容结构风格n 一个网站的风格定位，主要依据就是这个网站的内容，所以内容结构是控制网站风格方向的根基，是风格个性化的主导因素。n（4）语言风格n 世上的语言种类繁多，不同国家的网站有不同的主体语言，但在同一个网站上，不同的语言字符对网站的影响亦不尽相同。如一个网站的中英文版本，网站风格适宜英文版但就不一定适宜中文版。英文版字符较为精简，适宜做小巧精致类型的网站，中文字符雅致繁复，较适宜做端庄严肃类型的网站。n4.3.2 网页版式选择n1.“国”字形布局图4-3-1“国”字形布局n2.“匡”字形布局图4-3-2 “匡”字

12、形布局 n3.“三”字形布局图4-3-3“三”字形布局n4.“川”字形布局图4-3-4 “川”字形布局n5.海报型布局图4-3-5海报型布局n6.Flash布局图4-3-6 Flash布局n7.标题文本型布局图4-3-7 标题文本型布局n8.框架型布局图4-3-8框架型布局n9.变化型布局图4-3-9变化型布局n4.3.3网页色彩搭配n网页色彩搭配的原理 n1）色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 n2）色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。n3）色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 n4）色彩的联想性。不同色彩会产生不同

13、的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。n网页配色忌讳： n1）不要将所有颜色都用到，尽量控制在三种色彩以内。n2）背景和前文的对比尽量要大，(尽量不要用花纹繁复的图案作背景)，以便突出主要文字内容。n背景与字体的搭配经验 nBGCOLOR=“f1fafa”/做正文的背景色好，淡雅 nBGCOLOR=“E8FFE8” /做标题的背景色好，与上面的颜色搭配很协调n这两种颜色可以配黑字或FONT COLOR=“800080” nbgcolor=“E8E8FF”/做正文的背景色好，字体配黑色较好 nbgcolor=“8080C0”/上配黄色白色字体较好 n

14、bgcolor=“E8D098” /上搭配浅蓝色或蓝色字体较好nbgcolor=“EFEFDA” /上搭配浅蓝色或红色字体较好 nbgcolor=“F2F1D7”/配黑字素雅,红字醒目 nbgcolor=“336699” /配白字做标题较好 nbgcolor=“6699CC”和bgcolor=“479AC7”和bgcolor=“66CCCC”和bgcolor=“00B271”和bgcolor=“B45B3E”配白字都较好看/可做标题 nbgcolor=“FBF8EA”和bgcolor=“D5F3F4”和bgcolor=“D7FFF0”和bgcolor=“F0DAD2”和bgcolor=“DDF

15、3FF”配黑字都较好看 /一般做正文以上配色方案都比较淡雅。 n浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，较深底色配黄字有效果。4.4插入网页头部信息n如果文档没有头部信息，在HTML中可以用代码方式直接写进去，在Dreamweaver中不但可以用写代码的方式，还可以用可视化方式为文档插入头部信息，方法如下：“插入” |“HTML”|“文件头标签”选一项插入内容即可图4-4-1 插入“文件头标签”菜单图n4.4.1 插入META图4-4-2 插入Meta对话框图n4.4.2 插入关键字图4-4-3 网页头部“关键字”对话框n4.4.3 插入说明nDescrip

16、tion（页面内容的简介）用来告诉搜索引擎网站的主要内容。在设置时尽量要把简介写得清晰明白，字数不能太短也不能太长，一般保持在80200之间。图4-4-4 网页头部“说明”对话框n4.4.4定义自动刷新n在制作聊天室时，需要网页有定时刷新功能，以便从服务器上读取最新聊天信息。这种特性也是利用元数据完成的。可以将http-equiv属性设置为“refresh”，在content属性值中写入刷新的时间间隔为几秒。n例如：n图4-4-5 网页头部“刷新”对话框4.5添加文字n（1）插入普通文本 n在Dreamweaver CS5中，向网页中添加文本有以下三种方法：n1）直接在文档窗口中输入文本。n2

17、）拷贝文本。n3）从其他文档导入文本。n（2）插入特殊字符n在HTML代码中通过转义符来定义特殊字符，如“”用“>”来定义，需要记代码，比较麻烦。在Dreamweaver CS5提供了比较简单方法，插入特殊字符的操作为：n1）将光标定位在要插入特殊字符的位置。n2）在“插入”栏的“文本”类别中，选择要插入的符号，图 4-5-1 “插入”栏的“文本”类别图n3）在“插入”栏的“文本”类别中，单击“其他字符”图 4-5-2 “文本”栏n4）如果没有找到要插入的字符，还可以单击最后的“其他字符”选项，打开“插入其他字符”对话框图 4-5-3 “插入其他字符”对话框图n（3）设置文本格式n文本格

18、式包括文本的字体、字号大小、颜色及及其他和字体相关的属性。图4-5-4 “属性检查器”HTML页面图图4-5-5 “属性检查器”CSS页面图n（4）段落格式的编辑n段落属性包括设置段落的对齐方式、应用段落样式、应用项目符号和列表等。n在网页中输入文本时，按下Enter键可以产生一个新段落，段落与段落之间会自动插入一个空白行。而用Shift + Enter则是换行不分段，中间不会产生空白行，系统认为是一个段落。图4-5-9 段落与换行的区别n（5）设置列表n列表在网页制作中可以使包含层次关系或并列关系的文本可以更加整齐地展示在浏览者的面前。列表包括项目列表和编号列表两种。编号列表适用于需要按序排

19、列的文本；项目列表适用于并列关系的文本。创建项目列表或编号列表的操作为：n1）选择要创建列表的文本。n2）在“属性检查器”中单击 按钮，可以创建项目列表图4-5-12 项目列表 图4-5-13 编号列表n（6）简单的CSS样式应用nCSS是Cascading Style Sheets（层叠样式表单）的简称。在这一节我们介绍利用CSS样式来设置行距，从而增加文本的可读性及美观性n使用CSS样式改变行距的操作为：n1）按组合键Shift+F11，打开CSS面板如图4-5-15所示。n2）点击CSS面板上的 按钮，打开“新建CSS规则”对话框如图4-5-16所示。n3）从“选择器类型”选项中选择“类

20、”。在“名称”后的文本框中输入新建的样式名称“.1”，“规则定义”选择“仅对该文档”。n4）单击“确定”按钮，打开“.1的CSS规则定义”对话框，如图4-5-17所示。图4-5-17 “.1的CSS规则定义”对话框图 n5）选择要应用样式的两段文本或光标定位在段落中，在“属性检查器”中“样式”下拉列表中，选择“1”，则文本的行距发生了改变，如图4-5-18所示。4.6添加图像n4.6.1 网页常用图像格式n（1）GIF格式文件n（2）JPEG图像文件n（3）PNG图像文件n4.6.2 插入图像n（1）插入图像n在文档中插入图像的操作步骤如下：n1）将光标定位于要插入图像的位置处。n2）在插入栏

21、的“常用”选项卡中单击 按钮，或者单击菜单栏中的“插入”|“图像”命令，则弹出“选择图像源文件”对话框，如图4-6-1所示。图4-6-1 “选择图像源文件”对话框图n（2）设置图像属性n当在页面中插入图像或选择已有的图像时，在属性面板中就可查看图像的所有属性，并可对其进行修改，如图4-6-2所示。n4.6.3插入鼠标经过图像n（1）在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。n（2）在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标，即显示“插入鼠标经过图像”对话框，如图4-6-3所示。n4.6.4 插入背景图像插入背景图像n背景图像的插入可以通过点击 进行，通过点击会弹

22、出页面属性对话框，如图4-6-6所示。4.7添加超链接n网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。要创建基本超链接的操作方法如下：n（1）在网页中选中要做超级链接的文字或者图片。执行下列操作之一：n（2）指向被链接文件n1）在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。选择链接文件显示链接文件图4-7-1 链接属性对话框图n2）特殊方法n创建超链接的特殊方法是在属性面板的链接域右边的“指向文件”的图标。使用它可以方便快捷地创建指向站点窗口中一个文档或图像文件，或者指向另一个打开文档中命名锚点的

23、链接。图4-7-2 “指向文件”图标指向窗口文档的链接 n4.7.2 图像热区链接n热区链接是指在图片上的超级链接，这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。n创建热区链接的操作步骤如下：n（1）首先插入图片。单击图片，如图4-7-3所示，用展开的属性面板上的绘图工具在画面上绘制热区，如图4-7-4所示图4-7-3 插入的中国地图图片图4-7-

24、4 图像属性面板图n（2）属性面板改换为热点面板如图4-7-5所示：链接输入框：填入相应的链接。替换框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。 图4-7-5 热点面板图n4.7.3电子邮件链接n1.在编辑状态下，先选定要链接的图片或文字（比如：欢迎您为我们的网站提意见），在插入栏点 或点插入菜单选“电子邮件链接”弹出如下对话框。n2填入E-Mail地址即可，如图4-7-6所示。图4-7-6 “电子邮件链接”对话框图n另外，还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”，如图4-7-7所示。图4-7-7 超级链接属性面板图n4.7.4 脚本

25、链接n创建脚本链接的操作步骤如下：n（1）在文档窗口中选择要创建脚本链接的文字或图像，这里选择文本“关闭窗口”。n（2）在“属性”面板的“链接”文本框中输入“javascript:”，并在其后输入javascript代码或函数调用，这里输入的是“javascript:window.close();”，即关闭窗口，如图4-7-8所示。图4-7-8 属性面板输入脚本图n4.7.5锚点链接n在Dreamweaver CS5中，可以创建一种指向文档特定位置的链接，这种链接被称为命名锚记链接。命名锚记是表示一个文档中特定位置的标记。创建命名锚记链接，首先需要在目标文档中插入命名锚记，然后再创建链接。n（

26、1）创建命名锚记n创建命名锚记的操作步骤如下：n1）将光标定位在要创建命名锚记的位置。n2）在“插入”面板中的“常用”标签中，单击“命名锚记”按钮，或者单击菜单栏中的“插入”|“命名锚记”命令，则弹出“命令锚记对话框，如图4-7-9和4-7-10所示。图4-7-9 单击“命名锚记”按钮图图4-7-10 命名锚记”对话框n（2）创建命名锚记链接n在插入命名锚记后，就可以创建命名锚记链接了。n1）在文档窗口中选择要创建链接的文本或图像。n2）在“属性”面板中的“链接”文本框中输入“#”和锚记名称，如“#top”，然后按Enter确认，这样就创建了一个到当前文档的锚记名称“anchor1”的位置链接

27、。4.8插入Flashn（1）新建并保存网页，定位光标在要插入Flash动画的位置。n（2）执行以下操作之一：n1）单击菜单栏中“插入”|“媒体”|“SWF”命令。n2）在“插入”栏的“常用”类别中，选择“媒体”，单击“SWF”，如图4-8-1所示。 图4-8-1 插入Flash工具栏图n3）打开选择文件对话框，如图4-8-2所示。n4）选择要插入的Flash文件。n5）单击“确定”按钮，则Flash动画插入了网页中，如图4-8-3所示。 图4-8-3 网页插入flash的效果图n6）选中插入的Flash动画，单击属性检查器上的 按钮，播放动画观看效果，也可以在浏览器中观看效果。4.9添加背景

28、音乐n（1）打开要加入背景音乐的网页，定位光标在网页起始位置，如图4-9-1所示。光标定位在页面起始位置图4-9-1 光标定位示意图n（2）单击菜单栏中“插入”|“媒体”|“插件”命令，打开选择文件对话框。n（3）在“选择文件”对话框，选择要插入的音频文件，单击“确定”，网页中插入了音频插件。n（4）选择音频插件，单击“属性检查器”中的 按钮，打开参数对话框，如图4-9-2所示。图4-9-2 音频参数设置对话框图4.10插入视频n适合在网页中播放的视频格式有很多，如.rm 、.mpeg、.mov 以及.avi等n（1）链接到视频文件n链接到视频文件与链接到音频文件是一样的，是一种超链接，链接的

29、目标是一个视频文件，即在选择文件时，选择视频文件就可以了。n（2）在网页中嵌入视频文件n嵌入视频是将视频直接插入到页面中，页面带有播放器，浏览者可以控制播放。但只有在访问者具有所嵌入视频文件的播放器时，才可以播放。嵌入音频文件的操作与嵌入音频文件的操作相同，在“选择文件”对话框，选择要嵌入的视频文件就可以了。4.11 项目案例项目案例学习目标学习目标 案例描述案例描述 学习和使用网页基本元素制作网页。根据网页设计的基本理念，综合利用网页的基本元素，使用Dreamweaver CS5制作医药商务系统网站。案例要点案例要点 网页元素添加到网页中的方法、各种网页元素配合使用的美观协调设计。案例实施案例实施 （1）选择