第 19 课时：特效按钮的制作
教学目标：掌握特效按钮的制作方法
过程与方法：通过练习来掌握本节知识点
教学重点：按钮属性的设置
教学难点：
情感态度价值观：培养学生的审美观
教学过程：
1、打开 FrontPage，点击菜单“插入－Web 组件”。 （图 1）
图 1
2、在弹出的对话框中选择组件类型为“动态效果”，效果为“悬停按钮”。（图 2）
图 2 3、然后就可以来设置这个按钮了，输入按钮的名称、链接到的地址、按钮的效果、大小和颜色等设置，这
里就是选择的“发光”效果，完成点击“确定”按钮。（图 3）
图 3
这样一个会发光的按钮就轻松的制作出来了。（图 4）（图 5）
点击前 点击后
第 20、21 课时：动态网页制作
教学目的： 学会标题广告、悬停按钮、滚动字幕、计数器的制作方法，学会动态 HTML
效果的设定，掌握音频的插入方法
教学重点难点：掌握动态网页的制作方法
教学方法：讲解演示法，讲练法
教学过程：
[复习回顾]
在前面的学习中,我们学习了网页制作的许多方面,有的同学已经能做出不错的
网页来了,但是,我们在其他网站中看到别人的网站有一些我们所没有的东西,例如:
计数器、滚动字幕等等，今天我们来学习动态网页的制作。
[教授新课] 一、横幅广告管理器
本来，横幅广告管理器是为了制作循环显示的广告，来吸引访问者购买产品，
如 Yahoo 网站中的横幅广告。每一个横幅广告都是一个 Java 小程序，这一程序可以
实现在同一位置显示多个图象，并通过不断的旋转来分别显示这些图象。
利用 FrontPage2000 中的“标题广告管理器(Banner And Manager)”，它们的制
作过程就一点儿也不复杂了，可以在页面上使多个标题轮流显示，当然，标题广告
管理器不仅可以制作出轮换的广告，还可以制作出轮换的图像，甚至在图形变换时
使用特殊效果，产生一个幻灯片系列。
在横幅广告制作中要[注意]，所设置的广告图片出现的区域是固定的，如果其
中的图片大小不一，必须保证上述区域能放置最大一幅图片，其余小图片都居中对
齐。当然，要使横幅广告看起来更好，最好所有的图片都具有相同的尺寸。
二、悬停按钮
所谓悬停按钮(HoverButton)，是指当鼠标指针指向某按钮时，该按钮改变颜色
和形状，甚至发出声音。
采用悬停按钮可以说是为了使某些链接能引起用户的格外注意。悬停按钮的功
能是由一个 Java 小程序来实现的。
在 FrontPage2000 中可以简单的生成各种动态按钮，移动鼠标指向按钮时，按
钮的颜色或图案会按照预先的设置效果（如光晕、凸出、凹进等）发生变化，甚至
发出声音。
演示一种悬停按钮的制作方法和动态效果后，安排学生自己去摸索其它效果，
并进行按钮图案的选择、文字颜色的搭配，产生更丰富的动态效果。
三、滚动字幕(Marquee)
在页面中创建水平滚动的文字幕，可以使静止的页面活动起来。
通常在 HTML 代码中加入 JavaScript 脚本来实现滚动字幕，它的效果仅在 IE 中
可以显示出来，在其它浏览器中，将直接显示字幕内容而没有动画效果。如果通过
Java 小程序来实现，就可以在更多浏览器中看到效果。
滚动字幕有滚动、幻灯、交替三种操作方式，“滚动”可以让文字沿设置的方
向，从字幕区域的一边出现，到另一边消失；“幻灯”可以让文字沿设置的方向，
从字幕区域的一边出现，当字幕到另一边时停住并保持在屏幕上；“交替”可以让
文字在字幕区域来回移动。
[操作步骤]： （1）将插入点移到将要插入滚动字幕的位置，依次单击“插入（I）” 菜单中的“组
件“字幕”命令，打开“字幕属性”对话框。
（2）在“文本”框中输入滚动字幕内容，选择文字的移动方向。
（3）调整速度。其中“延迟”用来设置字幕每次移动的时间间隔，该参数越大，字
幕移动越慢；“数量”用来定义字幕每次移动的距离，该参数越大，字幕移动越快。
（4）定义“表现方式”。其中“滚动条”可以让文字沿设置的方向，从字幕区域的
一边出现，到另一边消失。“幻灯片”可以让文字沿设置的方向，从字幕区域的一
边出现，当文字到达字幕区域的另一边时停止滚动并保持在屏幕上。“交替” 可以
让文字在字幕区域来回移动。
（5）设置字幕区域的大小。选中“宽度”和“高度”复选框前打勾，并指定像素值
或百分比。
四、计数器
记数器用来记录访问次数或某页面被选中的次数，默认值为 0，即从 0 开始记数。
访问者每次打开页面时，记数器的数字会随之增加，因此，该数字用来表明网站的
普及程度或受欢迎程度，同时也表示出该网页不受欢迎的程度。因此，出于某种需
要，有时要将记数器的初始值定得高一些。
教学反思：
第 22、23 课时：项目符号与编号列表
教学目的：学习使用项目符号，理清条理，理解做事步骤。
过程与方法：实践——理论
教学重点：编号列表，图片项目符号列表，多级列表。
情感态度价值观：
教学过程：
一）编号列表
编号列表是在实际应用中最为常见的一种列表，编号列表的各列表项以某种形式的顺序进行排列。
下面我们以一个实例说明。其操作步骤如下：
1、新建一个空白网页，输入“我的兴趣和爱好”标题，按回车键；
2、单击“ ”工具图标，在网页中出现“1.”，在这个编号后面输入“看书”；
3、按回车键后，在“2.”后面输入 “上网”；
4、重复上述步骤，直到出现编号“5.”。在其后面输入“踢足球”，然后按 Shift+回车键，再输入
“打网球”，按回车键；
5、在编号“6.”行上按回车键，该编号就会在屏幕上消失了；
6、将网页文件保存起来，并在浏览器中浏览。另外，在编号列表中，列表符号可以是数字，也可以是其他符号，这些符号有：（1）大写罗马
数字：如Ⅰ.、Ⅱ.、Ⅲ.、Ⅳ.、…；（2）小写罗马数字：如ⅰ.、ⅱ.、ⅲ.、ⅳ.、…；（3）大写英
文字母：如 A.、B.、C.、D.、…；（4）小写英文字母：如 a.、b.、c.、d.、…。当需要改变列表
编号时，其操作过程大致如下：
1、将光标定位在一个列表所在行的任意位置。
2、然后单击鼠标右键，这时将弹出一个对话框，单击其中的【列表属性】选项，出现列表属性
对话框。（或者单击【格式】菜单，选择【项目符号和编号】菜单项亦可。）
3、此时在对话框中打开的是【编号】选项卡。
4、单击不同的选择框，然后单击【确定】按钮，就可以选择不同样式的项目编号。
二）项目符号列表
与编号列表不同，在项目符号列表中各列表项都是通过一个特殊符号引出的。下面以一个项目符
号列表的实例来说明。
其操作步骤如下：
1、新建一个空白网页，输入“我喜欢看的文学名著”，按回车键；
2、或单击“ ”工具图标，在网页中出现一个黑点列表符号，在列表符号后面输入“《三国演义》
（罗贯中）”；
3、按回车键后，在下一行又出现一个黑点列表符号，依次输入“《水浒传》（施耐庵）”，按回车
键；
4、重复上述步骤，直到把“《西游记》（吴承恩）”、“《神曲》（但丁）”全部输入计算机中；
5、在最后出现的黑点列表符号行上，再按一次回车键，该黑点就会在屏幕上消失了；
6、将网页文件保存起来，并在浏览器中浏览。
三）图片项目符号列表
图片项目符号列表是一种特殊形式的列表，列表符号均由指定的图片引出列表项。在 FrontPage
2000 中，用于列表的图片可以是软件自带的图片，也可以是你所指定的图片。
下面我们以一个图片项目符号列表的实例操作进行讲述。
具体操作过程如下：
1、新建一个空白网页，输入“21 世纪的科学技术”，按回车键。选定这段文字，并设置为 6
号字、宋体、加下划线；
2、单击【格式】菜单项，然后选择【项目符号和编号】菜单项，出现项目符号和编号方式对话
框，此时打开的是【图片项目符号】选项卡。
3、选择【指定图片】，单击【浏览】按钮，出现选择图片对话框。
4、单击对话框右下角的【剪贴画】按钮，就会弹出【剪贴画库】。选择并单击【Web 符号】选
项，从中选择一种图片（例中是“ ”），选中后单击“
”插入剪辑按钮。网页上就会出现这个图片符号。
提示：如果要指定磁盘图片文件作为项目符号，则在【选择图片】对话框中单击“
”按钮，出现一个选择文件对话框后，再选定硬盘目录上的一个图片文件，依次单击【确定】按
钮后即可。
5、在图片符号后，输入“信息科学技术”，并按回车键；
6、重复上述步骤，直到把“生物科学技术”、“材料科学技术”等全部输入计算机中；
7、在最后的图片项目符号行上按回车键，该符号就会在屏幕上消失了；
8、将网页文件保存起来，并在浏览器中浏览。
四）多级列表
前面分别介绍了几种列表方式。但在实际应用中，各种列表往往同时混合使用，有时还需要使用
多级嵌套列表。下面创建一个多级列表的实例。
其操作过程如下：
1、从【样式】下拉菜单中选择“标题 3”，输入“我最喜欢的电影”，按回车键；
2、单击“ ”工具图标，在编号“1.”后面输入“最喜欢的中国电影”，按回车键。接着再输入
“最喜欢的外国电影”；
3、以下是“最喜欢的中国电影”嵌套列表的操作：
² 把插入点移到列表项目“最喜欢的中国电影”的末尾，按回车键，新出现编号为
“2.”的空列表行；
² 连续两次单击“
”工具图标（增加缩进），或连续按 Ctrl+M 键，新出现的编号“2.”消失，后面的标号恢复正常。
光标比上一行的位置缩进了两个字符，在光标位置出现了新的标号“1.”。
² 单击鼠标右键，这时将弹出一个对话框，单击其中的【列表属性】选项，出现列
表属性对话框。此时打开的是【编号】选项卡。
²
在【编号】选项卡中选择大写罗马数字列表方式，然后单击【确定】按钮，列表符号变为
“Ⅰ.”。接着输入“开国大典”，按回车键；输入“生死抉择”，按回车键；输入“花季雨季”。
4、以下是“最喜欢的外国电影”嵌套列表的操作：
² 把插入点移到列表项目“最喜欢的外国电影”的末尾，按回车键，新出现编号为
“3.”的空列表行；
² 连续两次单击“ ”工具图标（增加缩进），或连续按 Ctrl+M 键，新出现的编号
“3.”消失。在光标位置出现了新的标号“1.”。
² 单击鼠标右键，这时将弹出一个对话框，单击其中的【列表属性】选项，出现列
表属性对话框。此时打开的是【编号】选项卡。
² 单击【无格式项目列表】选项卡，并从中选择方块符号列表方式。然后单击【确
定】按钮，列表符号变为“
”。接着输入“魂断蓝桥”，按回车键；输入“生死时速”，按回车键；输入“飘”。
5、在结尾的项目符号行上连续按回车键，直到该符号在屏幕上消失为止；
6、将网页文件保存起来，并在浏览器中浏览。
五）、上机操作：
在网页上练习项目符号与编号列表
教学反思：
第 24、25 课时：框架网页
教学目的：学习框架网页的制作方法，掌握框架网页的构成。学会先设定目标，再制作计划，最
后执行。
教学过程与方法：通过实践练习掌握本节内容
教学重点：框架网页的制作, 框架网页的属性。
情感态度价值观：培养学生的信息素养
教学过程：
一）、框架页的基本组成
框架页是一种特殊格式的网页，主要由边框、网页、滚动条组成。在框架页中，每个框架都有一
个网页相连接。当打开框架页时，则同时载入每个框架所相连的网页文件。在框架页中显示的是三个独立的网页组成的（实际下载了四个网页，还包括框架页本身这个网
页）。主体框一般用来显示正文内容的。
二）、创建框架页
FrontPage 2000 提供了 10 个框架网页向导帮助我们创建框架页。其操作步骤如下：
（1）打开【文件】菜单，选择【新建】菜单项，在子菜单中选择【网页】菜单项，出现新建对
话框。
（2）在对话框中单击【框架网页】选项卡。
（3）在选项卡中选择【目录】，此时在【预览】栏中会显示被选中的框架结构图，并在上方显示
说明情况。
（4）单击【确定】按钮后，出现框架结构图。
（5）新创建的框架结构共有 2 个网页窗口，其中一个在左边，另一个在右边。这时单击【新建
网页】按钮后，我们可以在当前框架网页中输入文字、图片等内容了。（如果这时单击【设置初
始网页】按钮后，将弹出一个“创建超链接”的对话框，可以为所在的框架超链接到指定的网页
上去。）
（6）框架的保存：单击“ ”工具按钮，出现【另存为】对话框。
²
保存左边框的网页文件。在对话框右面的框架示意图中，单击左边框后为蓝色，表示左边框中的
网页正准备保存。在“URL”中输入文件名“in1”，单击【确定】按钮后，此时左边框的网页文
件被保存起来。
²
保存右边框的网页文件。紧接着，在对话框的框架示意图中，右边框显示为蓝色。在“URL”中
输入文件名“in2”，单击【确定】按钮后，右边框的网页文件也被保存起来。
²
保存框架本身网页。在对话框中整个框架示意图的边框为蓝色，在“URL”中输入文件名
“index.htm”，单击【确定】按钮后，此时保存的是整个框架页文件。
三）、框架及框架页的属性
1、设置框架的属性
框架有很多属性，例如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。以框架页
为例说明，其具体操作方法如下：
单击要设置属性的框架，然后单击【框架】菜单，再单击【框架属性】菜单项，出现对话框。可
以在此对话框中修改框架的属性了。
2、框架页的属性
以上是设置每个框架的属性，而修改整个框架页的属性，其具体操作如下：
在【框架属性】对话框中，单击【框架网页】按钮，会出现“网页属性”对话框。
在这个对话框中的“框架”选项卡中只有两项：
² “框架间距”：指框架之间的边框的宽度，默认值为 2。
如果框架不要显示出边框时，可单击“显示边框”前面的单选框，取消“√”。
四）、框架页的编辑
在框架页中，当要拆分某一框架时，单击框架→拆分框架→选择并确定。当要删除某一框架
时，单击框架→删除框架→选择并确定。
五）、框架页的超链接
在框架页中，当单击左边的超链接时，在右边框中显示该超链接网页的内容。下面我们将以框架
页为例，说明怎样实现框架网页之间的超链接。其操作步骤如下：
（1）在左边的框架中选择要设置超链接的“ ”图片（或文字）。 （2）单击“ ”超链接工具按钮，出现【编辑超链接】对话框。这时在对话框的文件列表中选
择“jbxx.htm”。
（3）在对话框右下角“目标框架”栏，单击“ ”按钮，出现一个对话框。
在对话框中，单击框架示意图中不同的区域，也可以单击右边列表框的选项，在对话框的“目标
设置”栏中就相应显示所选定的区域名称。其中：
² 网页默认值(main)：超链接的网页将显示在右边框（即“main 主体”）。
² 相同框架：在左边框单击某个超链接时，其链接网页也将显示在左边框。
² 整页：单击某个超链接时，只显示所链接的网页，原来框架不再显示。
² 新建窗口：单击某超链接时，所链接的网页将显示在新打开的浏览器中。
² 父框架：单击某个超链接时，将返回上一级的框架。
六）、上机操作
练习设计框架网页
教学反思：
第 26、27 课时：申请空间
教学目的：掌握申请空间的基本知识及方法
过程与方法：练习
教学重点：搜索免费空间
教学难点：
教学过程：
●选择信誉较好的大公司。一般而言大公司具有较强的实力，能够保证较好的服务。
而且大网站的主机要稳定一些，不会经常出现服务器忙，连不上，甚至发生文件丢失。
●网站速度越快越好。用专业术语说好像应该是带宽越大越好。很显然，如果网站
的速度太慢，读取一页就要花两分钟，恐怕到我“家”的访客会立刻掉头就走。一般来说，
位于主节点上的主机肯定要快一些。
●网络空间，我不认为是越大越好，只要够用就行了。一般 10M 就足够了，一般 1M
的空间，可以存放图文丰富的页面大概 50 张，那么 10M 就相当于 500 张的容量。我的
家可没有那么大，等大了再说也可以。
●有的网站提供 ASP、CGI 支持，对我的小“家”来说没有多少必要。有很多地方免
费提供留言板、投票系统，甚至还可以申请到免费的论坛。我直接拿来用就行，不需要
自己来设计这些高级功能。
●是否支持 FrontPage Server Extension，这是一个 FrontPage 服务器扩展程序。如果
服务器上提供了 FrontPage 服务器扩展程序服务，那么我的“家”的发布步骤会简单一些。
否则，网页中设置的许多动态 HTML 将无法正确显示。但目前对我没有影响，因为我的
“家”没有采用 FrontPage 那些好看的特殊效果。$$$PA EP$$$ 发布
为了便于用户发布站点，FrontPage 2000 提供了一个相当方便的网页发布工具，只
需完成其中的设置，就可以成功地将自己的主页发布到 Internet 中去。 1.在 FrontPage 2000 中，打开想要发布的站点。
2.在“常用”工具栏中单击“发布站点”按钮，或者从“文件”菜单中选择“发布站点”命令。
3.出现“发布站点”对话框，在“指定发布站点的位置”文本框中输入要发布站点的位
置。如果没有站点建立提供商，可以单击“WPP”按钮，启动浏览器并打开微软提供的一
个地址，凡是在这里登记的 ISP 都可以完全支持 FrontPage 2000 提供的各种扩展工具。
4.单击“选项”按钮，可以选择发布所需的选项，如果你是第一次发布这个站点，可
以使用默认选项“只发布更改过的网页”，当下一次发布同一站点时，将只发送更改过的
网页，这样可以节省上网更新时间。
提示：SSL 是网上的一种安全协议，只有提供了这种服务的服务器才能选择此项，
对于大多数用户来说，没有必要选择这种层次的安全服务。
5.设置好发布地址，单击“发布”按钮，FrontPage 2000 开始检测 WWW 服务器的状
态。
6.FrontPage 与服务器连接成功后，就会出现“要求提供用户名和密码”对话框，要求
输入用户名和密码，这些内容都是你申请站点时 ISP 提供给你的信息。
7.设置完毕后，单击“确定”按钮。开始站点的发布过程。当网页发布成功后，在浏
览器打开站点仔细浏览一下，看看站点中每个网页是否正确地显示。
教学反思：
第 28、29 课时：用 FrontPage 2003 发布你的网站
教学目的：掌握网站发布的方法
过程与方法：实践+理论
教学重点：远程网站视图的应用
教学难点：
教学过程：
Microsoft office FrontPage 2003 中的远程网站视图可以帮助您将整个网站和单独的文件和
文件夹发布到任何位置：扩展的 Web 服务器、支持文件传输协议 (FTP) 或基于 Web 的分布
式创作和版本控制 (WebDAV) 的 Web 服务器、或文件系统中的某个位置。
远程网站视图同时显示本地网站和远程网站中的文件。图标和说明性文本会指示文件和文件
夹的状态，同步功能有助于确保不会意外地覆盖任何文件或文件夹。
连接到远程网站
通过新的远程网站对话框可以指定连接设置，并有助于您管理连接类型和协议 — 包括安全
套接字层 (SSL) 或被动 FTP。
优化 HTML
在本地网站上或将网页发布到远程网站时，可以在文件和文件夹中生成干净的 HTML 代码。
这意味着通过删除多余的格式和标记，可以减少网页的大小。Web 设计人员可以使用空白使
HTML 的外观更具吸引力，但这些空白并不是网页正确工作所必需的。您可以删除空标记、空白、
多余标记、不用的和空的样式定义以及指定的某些标记。
教学反思：
第 30、31、32 课时：Web 网站的设计、管理与维护
教学目的：掌握网站的发布注意事项
过程与方法：实践+理论
教学重点：色彩的搭配
教学难点：合理的设计风格
情感态度价值观：培养学生的信息素养
教学过程：
一、目标明确、定位正确
Web 站点的设计是网站的重要组成部分。要将网站站点作为在因特网－－这个新媒体上展示网站形象、网
站文化的信息空间，领导一定要给予足够的重视，明确设计站点的目的和用户需求，从而作出切实可行的计划。
挑选与锤炼网站的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来
进行测试，并逐步精炼这个原型，形成创意。
分析有些网站的效果不如预想的好，主要原因是对用户的需求理解有偏差，缺少用户的检验造成的。设计者
常常将网站的市场营销和商业目标放在首位，而对用户和潜在的用户的真正需求了解不多。所以，网站或机构应
清楚地了解本网站的受众群体的基本情况，如受教育程度、收入水平、需要信息的范围及深度等，从而能够有的
放矢。
二、主题鲜明、富有特色 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站
的组织结构。
Web 站点应针对所服务对象（机构或人）不同而具有不同的形式。有些站点只提供简洁文本信息；有些则
采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。最好的
Web 站点将把图形图像表现手法与有效的组织与通信结合起来。
要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站
点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些行业标志和公司的标志应充分加以利用。
调动一切手段充分表现网站的个性和情趣，突出个性，办出网站的特色。
Web 站点主页应具备的基本成分包括：
页头：准确无误地标识你的站点和网站标志；
E-mail 地址：用来接收用户垂询；
联系信息：如普通邮件地址或电话；
版权信息。
注意重复利用已有信息，如客户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到网站的 Web
站点中。
三、版式编排布局合理
网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相
近之处，应充分加以利用和借鉴。
版式设计通过文字图形的空间组合，表达出和谐与美。版式设计通过视觉要素的理性分析，和严格的形式构
成训练，培养对整体画面的把握能力和审美能力。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，
才能使整个网页生辉。
努力做到整体布局合理化、有序化、整体化。优秀之作，善于以巧妙、合理的视觉方式使一些语言无法表达
的思想得以阐述，做到丰富多样而又简洁明了。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题是页面之间和页面内的秩
序与内容的关系。为了达到最佳的视觉表现效果，应讲究整体布局的合理性。特别是关系十分紧密的有上下文关
系的页面，一定设计有向前和向后的按钮，便于浏览者仔细研读。
站点设计简单有序，主次关系分明，将零乱页面的组织过程混杂的内容依整体布局的需要进行分组归纳，经
过进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系，使浏览者有一个流畅的视觉体验。 四、色彩和谐重点突出
色调及黑、白、灰的三色空间关系不论在设计还是在绘画方面都起着重要的作用。在页面上一定得明确调性，
而其它有色或无色的内容均属黑、白、灰的三色空间关系，从而构成它们的空间层次。
色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。在网页设计中，根据和
谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。
利用色彩对人们心理的影响的成果，合理地加以运用。按照色彩的记忆性原则，一般暖色较冷色的记忆性强。
色彩还具有联想与象征的特质，如：红色象征火、血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食
的虚拟店面，应使用消极而沉静的颜色，使人心理上感觉凉爽一些。
在色彩的运用过程中，还应注意的一个问题是：由于国家和种族的不同，宗教和信仰的不同，生活的地理位
置、文化修养的差异，不同的人群对色彩的喜恶程度有着很大差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；
生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在沙漠中的人喜欢绿色。在设计中要考虑
主要读者群的背景和构成。
五、形式内容和谐统一
形式服务于内容，内容又为目的服务，形式与内容的统一是设计网页的基本原则之一。
画面的组织原则中，将丰富的意义和多样的形式组织在一个统一的结构里，形式语言必须符合页面的内容，
体现内容的丰富含义。
运用对比与调和，对称与平衡，节奏与韵律以及留白等手段，如通过空间、文字、图形之间的相互关系建立
整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一
些动感的的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。
点、线、面是视觉语言中的基本元素，使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效
果。
点是所有空间形态中最简洁的元素，也可以说是最活跃、最不安分的元素。设计中，一个点就可以包罗万象，
体现设计者的无限心思，网页中的图标，单个图片，按钮或一团文字等都可以说是点。点是灵活多变的，我们可
以将一排文字视为一个点，将一个图形视为一个点。在网页设计中的点，由于大小、形态、位置的不同而给人不
同的心理感受。
线是点移动的轨迹，线在编排设计中有强调、分割、导线，视觉线的作用。线会因方向、形态的不同而产生
不同的视觉感受，例如垂直的线给人平稳、挺立的感觉，弧线使人感到流畅、轻盈；曲线使人跳动、不安。在页
面中内容较多时，就需进行版面分割，通过线的分割保证页面良好的视觉秩序，页面在直线的分割下，产生和谐
统一的美感；通过不同比例的空间分割，有时会产生空间层次韵律感。
面的形态除了规则的几何形体外，还有其它一些不规则的形态，可以说表现形式是多种多样的。面在平面设
计中是点的扩大，线的重复形成的。面状给人以整体美感，使空间层次丰富，使单一的空间多元化，在表达较含
蓄。
网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。 六、多媒体功能的利用
最大资源优势在于多媒体功能，因而要尽一切努力挖掘它，吸引浏览者保持注意力。因而画面的内容应当有
一定的实用性，如产品的介绍甚至可以用三维动画来表现。
这里需要注意的问题是，由于网络带宽的限制，在使用多媒体的形式表现网页的内容时应考虑客户端的传输
速度，或者说将多媒体的内容控制在用户可接收的下载时间内是十分必要的。
七、相关站点引导链接
一个好的网站的基本要素是用户进入后，与本网站相关的信息都可以方便快捷地找到，其中要借助于相关的
站点，所以做好导引是一项重要的工作。超文本这种结构使全球所有联上因特网的计算机成为超大规模的信息库，
链接到其它网站轻而易举。
在设计网页的导引组织时，应该给出多个相关网站的链接，使得用户感到想得到的信息就在鼠标马上就可以
点击的地方。
八、合理地运用新技术
因特网是 IT 界发展最快的领域，其中新的网页制作技术几乎每天都会出现，如果不是介绍网络技术的专业
站点，一定要合理地运用网页制作的新技术，切忌将网站变为一个制作网页的技术展台，永远记住用户方便快捷
地得到所需要的信息是最重要的。
但对于网站设计者来说，必须学习跟踪掌握网页设计的新技术，如 Java、DHTML、XML 等，根据网站的
内容和形式的需要合理地应用到设计中。
教学反思：
微信/支付宝扫码支付