第一章

网页制作基础

杨琼

教学目标 说明什么是网页 解释 Internet 的工作原理 网页设计准则 网页制作常用工具 熟悉 Dreamweaver MX 2004 的工作环境 创建本地站点并制作一个简单的网页文档

网页实例

网页应具有的特点 网页是图形化的和易于导航的 网页应与系统无关 网页是交互的 网页是动态的

认识网页 网页的学名称作 HTML 文件，是一种包

含文本、图片、声音、视频、动画等多媒体内容，可以在互联网上传输，并能被浏览器认识和翻译成页面显示出来的一种文件，网页的默认扩展名是 .htm 或 .html 。

网页制作人员的主要任务 网页制作人员的主要任务就是将文本、

图像和其他对象有效地组合在一起，即通过对图形、文字和各种媒体元素的合理运用和安排，使浏览者流畅地浏览整个网页。

企业网站的创建流程 一、总体规划企业网站 确定网站主题，规划站点的风格 二、准备网站的相关资料

企业的简介、企业的 CI 系统、企业产品的相关资料、主要联系方式、售后服务方式等。

三、规划站点结构 站点结构是整个站点的框架，站点结构的规

划直接关系到网站是否有良好的可读性以及文件管理的复杂性。

制作网页的常用工具 在实际工作中，人们往往用 Firework

s MX 处理图片、用 Flash MX 制作相关网页动画，最后用 Dreamweaver MX 来创建网站。

Dreamweaver 工作环境

创建一个简单网页 1. 启动 Dreamweaver 后，单击“文件”菜单中的“新建”命令或按

“ Ctrl+N” 快捷键，打开“新建文档”对话框的“常规”选项卡，在左侧的“类别”选项框中选择“基本页”并在右侧的列表框中选择“ HTML” 选项。

2. 单击“创建”按钮， Dreamweaver 将自动创建一个空白文档。3. 在“文档”工具栏的“标题”文本框中输入“我的第二个网页”4. 用鼠标在文档窗口的工作区中单击，将插入点置入工作区的左上角，

输入“ Hello ， world！”，按回车键后，再输入“这是一个用 Dreamweaver 生成的网页”。

5. 用鼠标拖动选中刚输入的两行文字，在“属性”面板的“大小”下拉列表中选择“ 36” ，并单击“居中对齐”按钮，将文字居中放置。

6. 单击“文件”菜单中的“保存”命令或按“ Ctrl+S” 键，打开“另存为”对话框，在“保存在”下拉列表框中选择 D盘根目录，在“文件名”列表框中输入“ firstpage.htm”,单击“保存”按钮，保存刚创建的网页。

7. 按 F12 键，启动浏览器预览网页。浏览结束后，单击窗口右上角的“关闭”按钮，关闭浏览器窗口。

创建本地站点 1. 先启动Windows 的资源管理器，在 D盘根目录下创

建“ mysite1” 文件夹，并在其中创建“ image”和“ js”子文件夹。

2. 启动 Dreamweaver 后，单击“站点”菜单中的“管理站点”命令，打开“管理站点”对话框，单击“新建”按钮，在下拉菜单中选择“站点”选项，将打开“站点定义向导”对话框。

3. 打开“基本”选项卡。在“您打算为您的站点起什么名字”文本框中输入站点名称“沈阳电缆厂石家庄办事处”。

4. 单击“下一步”按钮，打开“编辑文件，第 2部分”对话框，选择“否，我不想使用服务器技术”单选按钮。

创建本地站点5. 单击“下一个”按钮，打开“编辑文件，第 3 部分”对话框，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选按钮，在“您将把文件存储在计算机上的什么位置？”文本框中输入“ d:\mysite1\” ，

6. 单击“下一个”按钮，打开“站点定义，共享文件”对话框，在“您如何连接到远程服务器？”下拉列表框中选择“无”选项。

7. 单击“下一个”按钮，打开“站点定义，总结”对话框，可以查看到以上步骤所设置的详细信息

作业 一、填空题 1、网页制作三剑客包括 、 、

。 2 、 Dreamweaver MX 2004 中工作区布局有

和 两种模式。

作业二、选择题1﹑ 要隐藏所有面板 ,应选择“窗口”菜单中的“隐藏面板”，或按下 _________

_快捷键。 . a. Alt+F4 键　　b. Ctrl+F4 键　　 c. F4 键　　d. Ctrl+F2 键2﹑ __________是将显示在Web浏览器的菜单栏上的名称 . a. 文本 b. 标题 c. 脚本 d. HTML3、按　　　键，可以启动浏览器直接预览网页。a.F9 b.F10 c.F11 d.F124 、提供网页浏览的服务器是（　　）a.WWW b. POP3 c. NEWS d. SMTP5、 网页所使用的超文本标记语言的简写是（　　）a.HTML b. XML c. WAP d.SGML6、 Dreamweaver 的网页属性编辑视窗中，左边距是用来设置（　　　）？ A. 距顶边距离 B. 距左边距离 C. 边距高度 D. 边距宽度

第二章

创建企业宣传页面

教学目标 能够添加文本并对文本进行格式化 创建列表 了解Web中常用的图像类型 在网页中添加图像，使用图像属性修改图像 了解什么是 CSS，创建简单的 CSS并将其

应用到项目中

范例网站的企业宣传页面

新建网页文档1. 在 Dreamweaver 中创建一个新的基本页，将“标

题”栏文字改为“沈阳电缆厂石家庄销售处”，按“ Ctrl+S”快捷键，打开“另存为”对话框，在对话框中选择文档存放位置—我们在上一章中创建的本地站点文件夹“ d:\mysite1” ，并在“文件名”下拉列表框中输入文件名称—“ jianjie.htm” 。

2. 设置页面属性　针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“ Ctrl+J” 快捷键，打开“页面属性”对话框，在“外观”选项组中将“上边距”全部设为 0 像素，其它设置暂不作修改，保持默认值。

插入表格、规范网页布局单击“插入”菜单中的“表格”命令，

打开“表格”对话框，在“表格大小”一栏中，将其行数设置为 4 ，列数为 1，表格宽度设置为 770 ，单位为象素，“边框粗细”、“单元格边距”、“单元格间距”都设置为0 ，单位都是象素；页眉及辅助功能设置不用更改设置，默认即可。

插入表格、规范网页布局 单击如图状态栏左半部分标签选择器中

的 <table>标签，选中整个表格，表格的边框就变成了黑色的加粗的颜色，这时属性面板中将显示表格的相关属性。在属性面板里找到“对齐”一项，在其下拉列表中选择“居中对齐”

插入网站主题图片 在刚生成表格的第一行中插入网站主题

图片，将插入点光标移到第一行的单元格内，单击鼠标左键，然后按快捷键“ Ctrl+Alt+I” ，打开“选择图像源文件”对话框，在“选择图像源文件”对话框中选择一个图像文件 bt.jpg，单击“确定”。

制作左侧导航菜单1. 将插入点光标移到表格的第二行中，单击表格属

性面板中的“拆分”按钮，打开“拆分单元格”对话框，在“把单元格拆分”选项区中选择“列”，将单元格拆分成列；在随后显示的“列表”文本框中输入 ,“2” ，设置将指定单元格拆分成 2 列 .

2. 将插入点光标移到第二行的左单元格中，在单元格属性面板中的“背景”文本框中输入“ image/back.gif” ，即为该单元格设置背景图片，再在“垂直”列表中选择“顶端对齐”选项，将设置单元格中内容的水平对齐方式

制作左侧导航菜单3. 在第二行的左单元格中，插入图片“ left.gif”

4. 选中图片“ left.gif”再按键盘中向右的方向键将插入点光标移至图片的后面，再单击“ Ctrl+Alt+t” 快捷键，打开“插入表格”对话框，再设置插入一个行数为“ 6” ，列数为“ 1” ，宽度为“ 120” ，其余各项为 0 的表格

制作左侧导航菜单5. 将插入点光标移到刚插入表格的第一个单元格中，

按住鼠标左键拖动选中所有的单元格，注意是选中所有的单元格不是选中整个表格，这样属性面板才显示的单元格的相关属性，在单元格属性面板的“高”文本框中输入“ 30” ，设置单元格高度为“ 30” ，并在“垂直”下拉列表中选择“居中”，设置单元格中内容垂直居中对齐，

6. 在第一个单元格中插入图片“ an1.gif” ，设置链接为“＃”，目标为“ _blank” ，重复上述步骤，依次添加上其余 5个导航按钮，并全部设置成空链接。

制作右侧页面1. 将光标移至第二行的右单元格，选择

“属性”面板中的，将该单元格拆分成2行，定义上一行单元格高度为“ 65” ，插入图片“ gsjj.gif”.

2. 光标移至下边单元格，将垂直对齐方式定为“顶端”对齐，输入公司简介文字。

制作右侧页面3. 完成后选中所有文字，点击右方 CSS样式面板的“新建样式”按钮，新建一个名为“ .wen” 的样式，定义在“仅对该文档”，字体设置为“宋体”、大小为 12 像素，行高为 18像素。

4. 单击属性面板“样式”列表中的为“ .wen” ，将单元格中文本定义为该样式，并将单元格中文字设置为“左对齐”

制作右侧页面5. 将光标移至本单元格顶部，插入一个两行一列，宽度为 2

45像素的表格，表格相对于表格外的文字“右对齐”，即选中新建表格后单击属性面板中的“对齐”列表中的“右对齐”选项。将插入点光标移到第一个单元格中，在属性面板的“高”文本框中输入“ 185” ，将新建表格第一行高度设为“ 185” 像素，按相同方法将新建表格的第二行设为“ 25” 像素，并将两个单元格中内容的水平对齐方式设为“居中”

6. 在新建表格第一行单元格格插入图片“ jzm.jpg” ，并在第二行输入说明文字：“江泽民同志视察我厂”

制作页面底部

1. 将插入点光标移至大表格的第三行单元格，在属性面板中设置样式为“ .wen” ，单元格中内容水平“居中”对齐，单元格高度为25像素，并设置单元格背景图片为“ di.gif” ，依照相同办法，第四行也设成相同属性。

2. 并分别在单元格内输入文字，所有内容制作完毕，保存文档，按 F12预览

企业宣传页面二

1. 新建网页文档　按“ Ctrl+N” 快捷键，创建一个新的空白文档，在“文档”工具栏的“标题”文本框中输入“电子工业出版社”，为网页创建将来在标题栏中显示的标题。

2. 保存网页文档　单击“文件”菜单中的“保存”命令或按“ Ctrl+S” 快捷键，打开“另存为”对话框，在对话框中选择文档存放位置—例如：“ d:\mysite2” ，并在“文件名”下拉列表框中输入文件名称—“ intro” ，单击“保存”按钮即可。在 Dreamweaver 环境中网页文档最常用保存格式是 .HTM 和 .HTML 。

3. 设置页面属性　针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“ Ctrl+J” 快捷键，打开“页面属性”对话框，在“外观”选项组中将“上、下、左、右边距”全部设为 0 像素，其它设置暂不作修改，保持默认值。

4. 单击“插入”菜单中的“表格”命令，打开“表格”对话框，下面我们在这个对话框中初步设置所插表格的属性，如图 2.61所示，在表格大小一栏中，将其行数设置为 3，列数为 1，表格宽度设置为 602 ，（注意：由于我们当前的工作任务其实只是整个网页中的一部分，所以插入的表格宽度为 602 ，而根据目前主流显示器的分辨率 1024＊ 768。）单位为象素，“边框粗细”、“单元格边距”、“单元格间距”都设置为 0 ，单位都是象素；页眉及辅助功能设置不用更改设置。

5. 选中表格，在属性面板里找到“对齐”一项，选择“居中对齐” ，在刚生成的表格的第一行中插入一个图片 wsjj_04.gif 。

6. 将插入点光标移至第二行的单元格中，选择“插入”工具栏中的“ HTML” 选项卡，然后单击“水平线”按钮，在第二行表格中插入一条水平线，

7. 就像使用其他的文字编辑软件一样，将插入点光标移至表格的第三行，用熟悉的输入法录入文本。

8. 将插入点光标移至段落的段首。按“ Ctrl+Alt+I” 快捷键，打开“选择图像源文件”对话框。在“选择图像源文件”对话框中选择一个图像文件 D盘“素材”文件夹的子文件夹“ session2” 中的 his_prize.gif，

9. 单击图像将其选中，在图像属性面板中，单击选中“对齐”下拉列表中的“右对齐”按钮，设置图像与同一行文本之间的对齐方式，再单击“左对齐”按钮来设置图像所在文本段落相对页面的水平对齐方式。

10. 将插入点光标移到段落首行的前端。单击“插入”工具栏中“文本”选项卡中的“字符”按钮，在弹出的下拉菜单中选择“不换行空格”按钮四次，因为每插入“不换行空格”只是首行缩进半个字符，

11. 输入“企业文化”，用鼠标选中，在属性面板中设置按“居中对齐”按钮设置“居中对齐”格式，按“加粗”按钮设置“加粗”格式。用鼠标单击下一行的行首，将插入点移至下一行，这里如果用回车键实现换行就会将本行的格式设置遗传到下一行。分行录入以下文本，用鼠标手动拖动选中这些文本，单击属性面板中的“项目列表”按钮设置列表格式

12. 按上述方法输入标题“优势与策略”并设置格式，再将插入点移至新行的行首，以上文本内容分六个段落输入。选中刚录入的六段文本，单击属性面板上的“项目列表”按钮，设置整体列表格式。

第三章

企业产品介绍页面的实现

教学目标掌握在网页中建立各种超链接的方法了解网页布局的基础知识，掌握用表格规

划网页布局的方法 理解框架的基础知识，创建各种类型的框

架集并能根据需要修改框架 理解模板对于网站建设的重要性，掌握创

建和修改模板的方法，能够使用模板更新页面

企业产品页面实例

将现有文档保存为模板 打开上章实例二中制作的“ intro.htm” ，将其中公司简

介部分内容删除，效果如图所示，再将其保存为模板应执行以下操作：单击“文件”菜单中的“另存为模板”命令，在“另存为”域中为该模板输入名称“模板 1”

插入可编辑区域 定义模板后，就要指定模板的哪个部分可编辑，以便在

其中添加内容，因为默认情况下，整个模板处于锁定状态。可编辑模板区域指在创建基于模板的页面时，模板使用者可以编辑哪些区域。

1. 在“文档”窗口中，选择右侧空白单元格中的上面的一个。

2. 单击“插入”菜单中的“模板对象”命令，选择“可编辑区域”命令，打开“新建可编辑区域”对话框。

3. 在“名称”文本框中为该区域输入唯一的名称，“ EditRegion1” ，注意不要在“名称”文本框中使用特殊字符。

基于模板创建新的文档 1. 在“新建文档”对话框中选择“模板”选项卡，在左侧的

“模板用于”列表中选择“沈阳电缆厂石家庄销售处”站点。

2. 从中间的模板列表中选择“模板1” ，右侧的“预览”窗口中将显示该模板。

3. 选中“当模板改变时更新页面”复选框，如果不希望在每次更改模板后 Dreamweaver 都更新基于该模板的页面，可取消选择“当模板改变时更新页面”复选框，那样该文档将不再以模板文件“ .dwt” 形式存在，而是成为一个独立的 HTML 文档。

基于模板创建新的文档4. 单击“创建”按钮，基于选定模板的新文档出现在

“文档”窗口中，如图所示。

添加产品介绍页面的内容 1. 将新建文档保存为“ chanpin.htm” ，在第一个可编辑区域

中插入“ a2.gif” ，在第二行的可编辑区域中插入一个 8行2 列，“宽度”为“ 500” ，边框为“ 0” 的表格，并在属性面板中设置其水平居中对齐，设置各单元格高度为30 。

2. 合并新建表格第二列的 8行单元格，并在左边的 8行中分别输入各种产品名称，（6-110kV交联聚乙烯绝缘电力电缆、0.6/1KV交联聚乙烯绝缘电力电缆、聚氯乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、特控电缆），选中左边的 8个单元格，应用在上一个网页中创建的样式“ .wen” ，并分别为每种产品的名称建立链接为“ chanpin1.htm”至“ chanpin8.htm”

添加产品介绍页面的内容3. 在新建表格的右单元格新建一个 2行 1列的表格，宽度为“ 200 像素”，边框线为“ 0” ，水平居中。分别在两个单元格中插入图片“ chanpin1.jpg” 和“ chanpin2.jpg” ，设计效果如图所示

创建每一种产品的介绍页面

1. 先创建基于新建模板网页文档，并将其保存为“ chanpin1.htm” 文件，在第一个可编辑区域中插入“ a2.gif” ，在第二行的可编辑区域中插入一个宽度为“ 600 像素”，3 行 1列，间距设“ 2” ，边框为“ 0” 的表格，使其水平居中。将第一行拆分成两列，再将第一行右边单元格拆分成两行，如图所示。

2. 将新建表格中第一行左边列的宽度设为“ 40%” ，并在其中插入产品图片“ chanpin01.jpg” ，右边单元格分别插入产品名称、编号及用途等内容。在第二行插入产品其他信息。

3. 在具体的产品介绍中还应有参数说明的表格，我们可以根据具体情况插入表格，比如在第二行表格中插入一个新的表格，并将表格的宽度应设为“ 600 像素”，边框可设为“ 1” ，可将表头和表体设为不同的颜色以示区别，如表头可设为“ #80BFDB”色；表体可设为“ #FFFFEE”色，设计效果如图所示。

4. 在下面再插入一个表格，表头设为“ #99CCCC”色，；表体可设为“ #FFFFEE”色，输入相应的文字。

5. 由于页面内容过多，页面过长，应在页尾加一个返回页首的链接，即在第一个可编辑区域中插入一个名为“ top” 的锚点，在第三行表格中插入图片“ top.htm” ，选中新插入的图片后，在图片的属性面板中的“链接”文本框中输入“ #top” 。

第四章

打造企业留言板

教学目标 了解并掌握在页面中插入表单对象的基本方法

熟练掌握编辑表单对象和设置其属性的方法 设计和创建用于各种用途的表单对象 在单个表单中集合各种表单对象

企业留言板实例

创建企业留言板1. 用模版文件创建一个新的 html 文件，在第一个可编辑区域中插入图片“ a6.gif” 。

2. 在第二个可编辑区域中插入一个宽度为“ 550 像素”，2行1列的表格，边框和单元格边距、间距均设为“ 0” ，使其水平居中。在新建表格第一行输入联系信息 .

3. 将光标移至表格的第二行，选择插入菜单中的“表单”命令。

4. 在表单中新建一个 10行 2 列，宽度为 400 像素的表格，边框、单元格边距、间距均为“ 0” ，单元格高度“ 30像素”，表格水平居中。第一列宽度设为“ 100 像素”，分别合并第八、九、十行的左右单元格，设置

创建企业留言板 第一至七行左边单元格背景色为“ #FDF2E3” ，在

第至七行的左单元格中分别输入“您的姓名：”、“您的性别：”、“您的出生日期”、“您所感兴趣的产品：”、“您的单位：”、“联系办法：”、“您的 E-mail：”，在第八行输入“您的意见和建议：”，完成后效果如图所示。

创建企业留言板5. 将光标移至第一行右单元格，选择“插入”菜单中

“表单”项中的“文本字段”命令，在文本字段属性面板处，修改“文本域”名称为“ y01”

6. 将光标移到第二行右单元格中，选择“插入”菜单中“表单”项中的“单选按钮组”命令，打开“单选按钮组”对话框，为单选按钮组命名为“ d1” ，两个单选按钮的标签分别为“男”、“女”，并用“换行符”布局，这将在单元格中插入两个单选按钮，在第一个单选按钮的后面按删除键使两个单选按钮，并列放置，并选中第一个单选按钮，在其属性面板上将其初始状态设为“已选中”

创建企业留言板7. 将光标移到第三行右单元格中，输入“（我们想在您生日时给您发封贺卡）”并在下一行中插入两个下拉菜单，两个下拉菜单间用空格隔开，选中第一个下拉菜单，将其命名为“ s1” ，单击属性面板中的“列表值”按钮，打开“列表值”对话框，在其中输入相应的初始值。再选中第二个列表，将其命名为“ s2” ，也照下拉菜单 1设置相应的下拉菜单2 ，设计效果如图所示。

创建企业留言板7. 将光标移到第四行右单元格中，插入四个复选框，并按设计效

果图输入相应文字，选中第一个复选框，将其命名为“ c1” ，初始状态为“未选中”，再分别选中其余三个复选框，将其命名为“ c2” 、 “ c3” “c4” ，初始状态为“未选中”。

8. 按上述步骤 5分别给 5、 6、 7 行插入“单行文本域”，需要注意的是每个文本区域的名称不可以重名，可分别起名为“ y02” 、“ y03” 和“ y04” ，由于后台程序验证会用到各文本框名称，所以文本框名称不可以随意改动。为了避免无用的信息，可提醒访问者务必留下姓名和 E-mail 以便沟通信息。完成后效果如图所示。

创建企业留言板

9. 将光标移至第 9 行，选择“插入”菜单中“表单”项中的“文本区域”命令，在属性面板处，修改“文本域”名称为“ t50”（名称必须为 t50），字符宽度设为“ 50” ，行数设为“ 3” 。

创建企业留言板10. 最后我们来做提交按钮，将光标移至第 10行，将单元格水平

对齐方式设为“居中”，选择“插入”菜单中“表单”项中的“按钮”命令，插入两个按钮。选中第一个按钮，在两个按钮间插入一个空格，方法是选择“插入”菜单“ HTML” 项中的“特殊字符”命令，选择“不换行空格”，或直接用快捷键“ CTRL+SHIFT+SPACE”插入。选中第二个按钮，在属性面板将其“动作”改为“重设表单”。

11. 完成后效果如图 4.47 所示。单击“标签选择器”上的 <form>，选中整个表单，在属性面板的动作文本框中输入以下代码：Mailto:sycable@inhe.net, 这样就可以在浏览者访问本页面后以电子邮件的方式提交反馈信息。

创建企业留言板

第五章

在 Dreamweaver 中美化页面

教学目标 掌握在页面中创建和修改 Flash 文本和按钮 掌握在页面中插入 Flash影片的基本方法 掌握创建层和设置层属性的方法 了解并掌握使用时间轴制作层动画 了解简单的网页特效的实现

范例网站的首页

制作步骤1. 启动 Fireworks MX 2004 ，单击“文件”菜单中的

“新建”命令，打开“新建”对话框，新建一个宽 770 、高 480 的图片，并在色板里输入“ #1A3783”后按回车。

2. 单击右下角“层”面板中的“新建层”按钮，选择层面板下方的“新建位图图像”按钮，再选择“位图”工具面板中的“油漆桶工具”，并在“颜色”工具面板中将填充颜色设置为 #D6E3FF ，如图所示，然后填充该图层。

制作步骤3. 用窗口左端的“位图”工具面板中“选取框”工具拖出一个选区，再选择工具，按住 Shift 键，从这个矩形的上边线的中点开始，从左向右拖动，填加一个选区，如图所示。

制作步骤4. 按“ Ctrl+X” 快捷键或单击“编辑”菜单中的“剪切”命令，删除选中的区域，再按“ Ctrl+D” 快捷键或单击“选择”命令菜单中的“取消选择”命令取消选择，效果如图所示。

制作步骤5. 单击“选择”工具条上的“指针”工具按钮，选择

“窗口”菜单中的“属性”命令，就打开了属性面板，单击属性面板右侧“效果：”后面的“添加效果或选择预设” 按钮，在弹出的下拉菜单中的“阴影和光晕”再在子菜单中选择“投影”选项。

6. 回到图层 1，选择左侧“矢量”工具面板上的 “文本”工具按钮，在舞台上输入文字“ CABLE” ，将字体设置为“方正超粗黑”，字体大小选 100 ，颜色为 #000000 ，不透明度设为 10 。

7. 选择“修改”菜单中的“变形”命令，在其了菜单中选择“顺时针旋转 90度”，然后选择工具条上的“指针”工具按钮，将旋转后的文字层移至最左边

制作步骤8. 重复上述步骤，输入文字“ www.yourname.co

m”（其中“ yourname” 是网站的地址，可根据具体情况而定），字体大小设为 35，不透明度为 20 ，顺时针旋转 90度后，选择工具条上的“指针”工具按钮将它移至左边

制作步骤9. 打开扫描好的产品图片

“ chanpin01.jpg” ，单击“位图”工具面板中的“魔术棒”工具按钮，选中图片中红色区域，再单击“选择”主菜单中的“反选”命令，产品的边缘部分可以用“多边形套索”工具按钮工具加工一下，完成后得到如图所示的效果。

制作步骤10. 将选中的区域拷贝至新建的文件中，调整图片宽度为 200 ，设置图层不透明度为 15。

11. 导入扫描好的企业图标文件“ biao3.gif” ，将其放到图片左上角的适当位置，效果如图所示。

制作步骤12. 选择“文本”工具，输入文字“沈阳电缆厂石家庄销售处”，设置文字属性如图所示。

13.选择“Web” 工具面板上的工具，拉出几条切片辅助线，按照切片辅助线分割的形状，把整个图片切分，效果如图所示。这是因为背景图片过大，会严重影响下载速度，谁也不希望自己精心做好的网页，因为下载速度而被拒绝浏览。在上网浏览时只要仔细观察就可以发现只要是稍大一点的图片，都是经过切片处理的。

制作步骤

14.完成后单击“文件”菜单中的“导出”命令，把图片导出为 index.htm ，这是因为我们现在做的是一个网站的首页，保存类型选“ HTML 和图像”

制作步骤15. 用 Dreamweaver 打开我们刚在 Fireworks 中生成

的“ index.htm” 文件，单击“修改”菜单中的“页面属性”命令，设置上边距和左边距为 0 ，页面标题为“ ::: 沈阳电缆厂石家庄销售处 :::” 。

16. 单击“标签选择器”中的 <table>标签选中整个表格中的图片，再将表格设置为水平居中，拖动选中2-6 行第 2 、 3列单元格，按“ Delete” 键删除掉表格中的图片，效果如图所示，合并单元格，设置单元格背景色为“ #1A3783” 。

制作步骤

制作步骤17. 在合并后的单元格内再插入一个 3 行 1列的表格，

表格宽度为 100%，表格水平居中对齐。设置第一至第三行高度分别为 250 、 50 、 30 ，单元格水平居中对齐。

18. 在第一行中插入产品变换 FLASH ，即单击“插入”工具栏中“常用”选项卡中的“媒体”按钮，打开“选择文件”对话框，选择“ image” 文件夹中的“ 2.swf” 。

19. 在第二行插入“进入”图标“ enter.gif” ，在第三行中输入文字“版权所有：沈阳电缆厂石家庄销售处”，在属性面板中设置样式为“ .wei” 。

第六章

上传与发布

教学目标 申请域名和空间 用 dreamweaver发布和维护网站 用 FTP方式上传网页文件 其它常用的 FTP软件

申请域名 常见的国际顶级域名有：.com 表示商业机构，

.net 表示网络服务机构，

.org 表示非赢利机构，

.gov 表示政府机构，

.edu 表示教育机构，

.biz 表示商业机构，

.info 表示信息服务机构，

.tv 表示视听电影服务机构，

.name表示用于个人的顶级域名

申请域名 CN顶级域名指以 .CN为后缀的域名。 cn 是国别代码，代表中国，其它还有 jp代表日本、 uk代表英国等。我国的 CN顶级域名有 .cn 、 .com.cn 、 .net.cn 、 .org.cn 和 .gov.cn 等。

中文域名：是能用汉字命名的新一代域名，它是中国人自己的域名，使用、记忆非常方便。

申请服务器空间 服务器空间就是在网络服务器上的存储空间。服务

器空间有两种类型：免费主页空间和付费主页空间。实例：在虎翼网 (http://51.net）的申请 20M免费空间和

二级域名 mysite2zz.51.net1. 登陆网站。在浏览器的地址栏输入“ http://51.net”

打开虎翼网的主页，点击头部导航条的“虎翼社区”按钮，打开“虎翼社区”网页，如图所示。窗口右侧的“免费型虚拟主机”就是我们要申请的类型，不过我们只能申请到 20M 的服务器空间和 ***.51.net 的二级域名，而且所要上传的网站不能有企业邮箱，也不能使用 CGI/PHP/MySQL技术。

申请服务器空间

申请服务器空间2. 点击头部导航条的“主页申请”按钮，开始申请的

第一步，阅读服务条款，这些规定是你与网站之间的协议，要仔细看一看。

3. 然后点击“同意”按钮，进入下一页面，如图 6.3 所示，输入页面上的各种信息，其中“域名／用户名”一项不可与他人重复，可以点击“检测域名”看能否使用；“密码”是你管理空间时的密码，不可丢失。

申请服务器空间4. 第五步：填好后点击“下一步”，弹出选填信息内

容，可不填，直接点击“下一步”，进入下一页面5. 最后，注册成功！但是你需要在邮箱接收激活信息

以激活空间，激活后还会收到一封确认信，你的用户信息就记录在这封信里，以后就可以在右侧的登录框内输入自己的用户名和密码以登录免费空间进行上传和管理。

用 dreamweaver发布网站 在我们有了网站空间和域名后，就可以把做好的网

页文件上传到服务器空间，世界各地的人们就可以通过域名来访问我们的网站。 Dreamweaver 提供发布网站的功能，这需要先在 DreamWeaver 中建立一个站点，比如我们在前五章创建的沈阳电缆厂石家庄销售处的本地站点，现在我们将以该站点为实例将其上传至我们在本章第一节申请的服务器空间中。

在 Dreamweaver 中设置站点信息 1. 单击“站点”菜单中的“管理站点”命令，打开如

图所示的“管理站点”对话框。2. 在“管理站点”对话框的左侧列表框中选择站点

“沈阳电缆厂石家庄销售处”，单击“编辑”按钮，打开“站点定义”对话框，在“高级”选项卡中设置“本地信息”，如图 6.4所示。“站点名称”是为了在 Dreamweaver 中标识站点的，“本地根文件夹”是存放本地站点所有文件的目录。“默认图像文件夹”是站点中存放图像的文件夹。这三个文件夹在创建本地站点时已经指定，在此页面我们只需在“ FTP地址”文本框中输入在第一节申请的域名“ http://mysite2zz.51.net”

在 Dreamweaver 中设置站点信息

在 Dreamweaver 中设置站点信息3. 在“站点定义”

对话框左侧的“分类”列表单击“远程信息”，打开如图 6.5 所示的对话框，此选项卡的作用是选择 Dreamweaver 向远程站点所在的 Web 服务器上传或下载文件时的访问方法。

在 Dreamweaver 中设置站点信息4. 站点编辑好后，单击“确定”按钮，就会弹出连接服

务器的窗口，以后就可以在“文件”面板中进行站点“本地视图”和“远程视图”的切换，显示本地或远程的文件，如图 6.6 所示。

用 Dreamweaver发布站点 在设置了本地站点和远程站点之后，远程站点这时还是

一个空文件夹，下面我们将编辑好的网页文件从本地站点上传到 Web 服务器（远程站点），或者从远程的服务器（远程站点）下载文件到本地站点。使用“文件”面板中的工具按钮，可以实现本地站点和远程站点之间文件的来回传送。

用 Dreamweaver发布站点

上传上传指将本地文件传送给远端网络上的服务器。上传后世界各地的人们就可以在互联网上看到我们的网页。凡是在网页中用到的图片、声音、 flash 动画等都要一起上传才能正常显示和播放。

方法一：首先，在本地视图选中你要上传的文件或文件夹，如果上传整个站点应选择站点根文件夹；然后单击上传文件按钮。

方法二：首先，在本地视图选中你要上传的文件或文件夹，如果上传整个站点应选择站点根文件夹；然后单击鼠标右键，在快捷菜单中选择“上传”。

下载下载指将远程站点中的文件或整个远程站点复制到本地站

点中。下载和上传一样，也有两种方法。方法一：首先，在远程视图选中要下载的文件或文件夹；然后点击下载文件按钮。

方法二：首先，在远程视图选中你要下载的文件或文件夹；然后点右键，在快捷菜单中选择“获取”。

第七章

CSS 样式应用

教学目标 了解标准化网站设计理念 熟悉 CSS网页布局的基本知识，能用 CSS规划

和布局网页 理解 CSS盒模型，了解边界距、填充距和边框等属性的含义

熟练掌握 Dreamweaver 的“ CSS样式定义”操作技能

学会在代码视图中修改简单的 CSS代码 了解 CSS的滤镜，会利用滤镜修饰文字和图片 熟悉文字、图片、表格和表单等主要元素的定位

和修饰方法

用模板创建网页实例 主体标签控制着整个网站的全局外观，根据 CSS样式

继承性原则，凡没有特别设定，其它标签的外观将由主体标签决定。具体操作下如：

1. 打开“新建 CSS样式”对话框，选择“选择器类型”为“标签”，选择“标签”为“ body”；

2. 单击“确定”，将打开“ body的 CSS样式定义”对话框；3. 在“类型”属性中，“字体”设定为“ 'lucida grande','l

ucida sans unicode','宋体 ','新宋体 ',arial,verdana,sans-serif” ，“大小”设定为“ 12 像素”，“行高”设定为“ 150%” ，“颜色”设定为“ #333”；

4. 在“背景”属性中，“背景颜色”设定为“ #c1c1c1”；5. 在“区块”属性中，“文本对齐”设定为“左对齐”；

用模板创建网页实例代码视图内容显示如下：body {font-family: 'lucida grande', 'lucida sans unicode', '宋体 ', '新宋体 ', arial, verdana, sans-serif;font-size:12px;line-height:150%;color: #333;background: #c1c1c1;text-align: left;

}

用 CSS 模板创建“公司简介”页面

1. 按“ Shift+F11” ，在“ CSS样式”视图中，单击“新建 CSS样式”按钮；

2. 选择器类型为“高级”，选择器列表框中输入“ #img-right-top” ，“定位在”选择“ mycss.css” 。

3. 单击“确定”按钮，在随后打开的“ #img-right-top CSS样式定义”对话框中设定相关属性；

4. 在“类型”属性中，“粗细”设定为“粗体”；5. 在“区块”属性中，“文本对齐”设定为“居中”；6. 在“方框”属性中，“宽”设定为“ 240 像素”，“浮

动”设定为“右对齐”，“边界”设定为“全部相同”并将值设定为“ 1像素”；

用 CSS 模板创建“公司简介”页面

mycss.css代码视图内容显示如下：#img-right-top {float: right;width: 240px;text-align: center;margin: 1px;font-weight: bold;

}

用 CSS 模板创建“公司简介”页面

7. 在“ CSS样式”视图中，选中“ #right-m” ，单击“编辑样式”按钮，打开“ #right-m CSS样式定义”对话框；

8. 在“方框”属性中，“宽”修改为“ 615像素”，去掉“边界”的“全部相同”选择，并将“右”设定为“ 10 像素”，单击“确定”按钮；

9. 返回到“公司页面”设计视图，选中图片，插入“ img-right-top”DIV标签，并在图片下放输入图片标题；

“ 产品介绍”页面 1. 用“ mydwt”模板，新建一个文档，并以“ chanp

in.htm”为文件名保存该文档；2. 在第一个可编辑区域（EditRegion1 ）中，删除“ E

ditRegion1” 字样，并插入图像文件“ a2.gif”；3. 在第二个可编辑区域（EditRegion2）中，删除“ E

ditRegion2” 字样，并插入图像文件“ chanpin1.jpg ” 和“ chanpin2.jpg”；

4. 在图像文件“ chanpin2.jpg” 后面回车，输入相关文字；

5. 新建“ #img-right-m”层，其中“宽”设定为“ 200 像素”，“浮动”设定为“右对齐”，“边界”设定为“全部相同”并将值设定为“ 1像素”，单击“确定”按钮；

“ 产品介绍”页面mycss.css代码视图内容显示如下：#img-right-m {float: right; width: 200px;margin: 1px;}

6.返回文档设计视图，选中在前面步骤 3中插入的两图片，单击“插入”菜单中的“布局对象”子菜单中的“ DIV标签”插入“ img-right-m”DIV标签；

7. 将文字设定为“项目列表”，并为每行列表文字建立相应的链接；

“ 产品介绍”页面从预览结果看，有两点不符合我们的设计要求：列表文字的行间距太近，同时也太靠左；图片应该再靠左

一些。解决方案：对“ li” 标签进行 CSS样式设定；调整“ img-

right-m” 的位置。1. 按“ Shift+F11” ，在“ CSS样式”视图中，单击

“新建 CSS样式”按钮；2. 选择器类型为“标签”，标签列表框中选中“ li” ，

“定位在”选择“ mycss.css”；3. 单击“确定”按钮，在随后弹出的对话框中，设定

“类别”属性中的“行高”为“ 300%”；4. 在“定位”属性中，“类型”设定为“相对”，

“上”设定为“ 5%” ，“左”设定为“ 5%”；

“ 产品介绍”页面mycss.css代码视图内容显示如下：li {

line-height: 300%;position: relative;left: 5%;top: 5%;}

5. 在“样式”面板的 #img-right-m 上单击鼠标右键打开“ #img-right-m CSS样式定义”对话框；

6. 在“定位”属性中，“类型”设定为“相对”，“溢出”设定为“自动”，“上”设定为“ 10%” ，“右”设定为“ 10%” ，单击“确定”按钮；

“ 产品介绍”页面mycss.css代码视图内容显示如下：#img-right-m {float: right;width: 200px;margin: 1px;position: relative;top: 10%;right: 10%;overflow: auto;

}

“供货业绩”页面 1. 用“ mydwt”模板，新建一个文档，并以“ yeji.ht

m”为文件名，保存该文档；2. 在第一个可编辑区域（ EditRegion1 ）中，删除“ EditRegion1” 字样，并插入图像文件“ a2.gif”；

3. 在第二个可编辑区域（ EditRegion2）中，删除“ EditRegion2” 字样，输入两段文字；

4. 新建“ #img-ghyj”层，其中“宽”设定为“ 600 像素”，“浮动”设定为“无”，“清除”设定为“两者”，单击“确定”按钮；

“供货业绩”页面mycss.css代码视图内容显示如下：#img-ghyj { clear: both; float: none;

width: 600px;}5. 新建“ #img-ghyj-s”层，其中：

“ 类型”属性中的“颜色”设定为“ #000000”； “区块”属性中的“文本对齐”设定为“居中”； “ 方框”属性中的“宽”设定为“ 200 像素”，“高”设定为

“ 100” ，“浮动”设定为“左对齐”，“清除”设定为“无”； “ 定位”属性中的“类型”设定为“相对”； “ 扩展”属性中的“过滤器”设定为“ Blur(add=true,directio

n=135,strength=10)” ，单击“确定”按钮；

“供货业绩”页面mycss.css代码视图内容显示如下：#img-ghyj-s {

height: 100px;width: 200px;color: #000000;text-align: center;clear: none;float: left;position: relative;filter: Blur(add=true,direction=135,strength=10);

}

“供货业绩”页面6. 返回文档设计视图，在两个段落之间，插入“ img-ghy

j”DIV标签并回车；7. 连续插入三个“ img-ghyj-s”DIV标签，期间系统将弹出

提示对话框，单击“确定”即可；8. 删除“此处显示 id "img-ghyj" 的内容”字样；9. 在上述三个“ img-ghyj-s”层中分别插入图片文件 b1.jp

g、 b2.jpg和 b3.jpg，并输入图片标题，同时删除“此处显示 id "img-ghyj-s" 的内容”字样；

10. “img-ghyj”层下面再次插入一个“ img-ghyj”DIV标签，并在该层中，连续插入三个“ img-ghyj-s”DIV标签，三个层中分别插入图片文件 b4.jpg、 b5.jpg和 b6.jpg，并输入图片标题，同时删除“此处显示 xxxxxx 的内容”字样；

校验 CSS 样式表

CSS官方网站免费提供三种方式的 CSS样式表的校验服务：

通过 URL校验你的层叠样式表 使用滚动文本框校验你的层叠样式表 通过上载校验你的层叠样式表网址： http://jigsaw.w3.org/css-validator/

校验 CSS 样式表“ 通过上载校验你的层叠样式表”的方式，校验我们的

“ mycss.css”：1. 打开 IE浏览器，在地址栏输入：

http://jigsaw.w3.org/css-validator/并回车；2. 打开网页后，向下拉，找到“W3C CSS 校验服务”，如图 7.34所示；

校验 CSS 样式表3. 单击“通过上载……”链接，打开“校验器”网页；单击“浏览”按钮，在随后弹出的“选择文件”对话框中，选择“ mycss.css” 文件。

4. 单击“提交此样式表以校验”按钮，开始校验；校验结束，显示“ CSS校验结果”，如图 7.35所示；

校验 CSS 样式表校验完毕，根据校验报告，修正错误。由上述校验报告

可知，目前我们的 mycss.css 文件中有一个错误，即第 96 行的“ filter: Blur(add=true,direction=135,strength=10);”

错误原因： CSS滤镜不被大部分浏览器所支持！解决办法：去掉滤镜功能。

第八章

JavaScript 应用基础

教学目标 掌握 JavaScript 的基本数据结构、程序结构、函数及对象的使用方法

熟悉脚本编写格式，学会如何引入 JavaScript 程序

学会使用内置对象 了解自定义对象的创建及使用 了解浏览器对象系统，掌握主要对象的基本属性、事件和方法的使用

学会以对象的形式访问窗口及文档元素 掌握使用表单及表单域的属性、方法和事件，创

建交互式表单的方法

改造首页 对首页的改造目标为： 在首页中显示实时时间； 根据不同的时间，显示不同的欢迎信息； 在网页中显示浏览者停留在该网页的时间。

显示实时时间 1. 用 Dreamweaver 打开首页（ index.htm）；2. 在“进入”与“版权所有：沈阳电缆厂石家庄销售

处”之间，插入一行；3. 在新建行中插入一个表单的文本字段，并取名为“ ti

me”；4. 进入代码视图，复制下列代码内容到代码视图的 </h

ead>标签前：

显示实时时间<script Language="JavaScript"><!--var hour,min,secfunction showclock(){

now=new Date()hour=now.getHours()if(hour<=9) hour="0"+hourmin=now.getMinutes()if(min<=9) min="0"+minsec=now.getSeconds()if(sec<=9) sec="0"+secdocument.form1.time.value="现在时间是 "+hour+":"+min+":"+secsetTimeout("showclock()",1000)

}//--></script>

显示实时时间5. 在 <body>标签中，加入 onload="showclock()"；

6. 保存并在 IE中预览

把上述代码稍微修改一下，显示时间的时候还可以加上“上午”和“下午”。

var ampm="上午 "if(hour >=12) {

hour=hour-12ampm="下午 "

}if(hour<=9) hour="0"+hourmin=now.getMinutes()if(min<=9) min="0"+minsec=now.getSeconds()if(sec<=9) sec="0"+secdocument.form1.time.value="现在时间是 "+ampm+hour+":"+min+":"+secsetTimeout("showclock()",1000)

显示不同的欢迎信息

1. 用 Dreamweaver 打开首页（ index.htm）；2. 在“进入”与“版权所有：沈阳电缆厂石家庄销售

处”之间，插入一行并设定颜色为黄色（便于演示）；

3. 单击新建行并进入代码视图，复制下列代码内容到代码视图的新建行中：

显示不同的欢迎信息<script Language="Javascript"><!--day=new Date()hr=day.getHours()hr1=hr-12if (hr<6) document.write("夜深了！还在工作吗？现在是凌晨 "+hr+"点 ") else if (hr<12) document.write("早安！！现在是上午 "+hr+"点 ") else if (hr<13) document.write("该去吃午餐了！现在是中午 "+hr+"点 ") else if (hr<17) document.write("午安！！现在是下午 "+hr1+"点 ") else if (hr<21) document.write("吃过晚饭了吗？ 现在是晚上 "+hr1

+"点 ") else if (hr>=21) document.write("时间不早了，该上床睡觉了！现在是晚上 "+hr1+"点 ")

//--></script>

显示浏览者停留在该网页的时间

1. 用 Dreamweaver 打开首页（ index.htm）；2. 在“进入”与“版权所有：沈阳电缆厂石家庄销售

处”之间，插入一行；3. 在新建行中插入一个表单的文本字段，并取名为“ ti

me”；4. 进入代码视图，复制下列代码内容到代码视图的 </h

ead>标签前：

显示浏览者停留在该网页的时间<script Language=javascript><!--var hour=0var minute=0var second=0function staytime() {

second+=1if (second==60) {

minute+=1second=0

}if (minute==60) {

hour+=1minute=0

}document.form1.time.value="您已停留了 "+hour+"小时 "+minute+"分 "+second+"秒 "setTimeout("staytime()",1000)

}//--></script>

第九章

网页制作工具的综合应用

教学目标 了解 Fireworks 的工作环境 能够使用 Fireworks独立完成范例站标的制作 了解 Flash 的工作环境 能够使用 Fireworks独立完成范例 Banner 的制

作 了解网页制作工具综合应用的方法

Fireworks 的操作界面

简介 LOGO LOGO即网页中的站点标志是非常重要的。一个制

作精良的 LOGO，不仅可以很好地树立公司形象，还可以传达丰富的产品信息。

LOGO的设计，重在传达一定的形象与信息，一般要求简单醒目，在少量的方寸之地，除了表达出一定的形象与信息外，还得兼顾美观与协调。

制作 LOGO时，很多东西都是难于用语言表达出来的，有时候是种灵感，有时候是种仿效，而更多的时候是通过繁琐的工作与多次的尝试完成的。

制作二职专网站站标

制作二职专网站站标 1. 在 Fireworks 中，单击

“文件”菜单中的“新建”命令，在新建文件对话框中设置宽为500像素，高为500 像素，底色为透明的文件。

2. 用“矢量”工具面板中的钢笔工具绘制“ 2”的路径，并用钢笔工具和部分选择工具加以修改，效果如图 9.10所示。

制作二职专网站站标 3. 选中刚创建的路径，在属

性设置栏中为绘制好的路径设置颜色，颜色值为“ #003366” ，并在旁边的线型设置中选择书法线型中的基本线型，线型粗细为 24 。然后，单击属性设置栏中的效果右侧的 按钮，从弹出的效果列表中选择“阴影和光晕”一项中的“投影”，为文字添加阴影效果，如图 9.11 所示。

制作二职专网站站标 4. 绘制显示器：选择“矢量”工

具面板中的“矩形”工具，将填充色设为无，边线色设为绿色，在工作区文字“ 2” 的右方绘制一个矩形。按“ Ctrl+Shift+G” 将所绘制的矩形取消组合，用工具面板中的部分选择工具选择矩形左下角的锚点，按住 Shift 键将其拖动到合适位置。再选择矩形右下角的锚点执行相应的操作，使矩形产生透视效果，以模仿显示器的屏幕，如图 9.11 所示。

制作二职专网站站标 5. 仍然选择工具面板中的矩形

工具，在刚才绘制的显示屏幕下方绘制一个矩形，按照第 3 步中的做法将这个矩形倾斜，作为显示器和底座之间的连接物；然后绘制显示器的底座，选择工具面板中的椭圆工具，绘制一个椭圆作为显示器的底座，再选择工具面板中的放缩工具，将椭圆压扁，使其更加美观，效果如图 9.12所示。

制作二职专网站站标 6. 绘制键盘：在工具面板中选择矩形工具，按照第 3 步的方法对矩形加以修改，制成电脑键盘，效果如图 9.13 所示。

制作二职专网站站标 7. 选择工具面板中的

文字工具，在属性设置栏中设置文字颜色为“ #003366” ，字体为“黑体”，输入“职专”二字，并选择工具面板中的放缩工具，将文字变形，效果如图 9.14所示。

制作二职专网站站标 8. 单击“文件”菜单下

的“导出预览”命令，选择 GIF 格式，并在透明下拉选项中选择Alpha透明，单击确定。如图 9.15 所示。单击“文件”菜单下的“导出”命令，选择导出文件所在目录，并输入文件名后确定。

Flash 的操作界面

简介 Banner Banner广告横幅 (一个表现广告内容的图片 )，是

互联网广告中最基本的广告形式，一般是使用 GIF 格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。除普通 GIF 格式外，我们还经常用到 FLASH 制作的 SWF 格式 Banner ，使之更为生动丰富。

制作二职专网页 Banner 1. 在 Flash 中，新建一个空白 Flash 文件。单击“修改”菜单下的“文档”命令，在弹出的对话框中将舞台大小设为 790X90 ，并将背景色改为 #0064b2 。双击图层一将其名字改为“幕”，沿舞台的上下边缘各绘制一个黑色的长方形，如图 9.39 所示，这主要是为了输出以后在观看时遮挡住舞台之外的物体。

制作二职专网页 Banner2. 新建一个图层，命名为底图，选择工具面板的钢笔

工具在舞台左侧绘制一个填充色为 #B30074 的梯形。在“底图”图层之下再新建一个图层，命名为“大楼”。从库里将“大楼”元件拖动到此图层上。如图 9.40所示。

制作二职专网页 Banner3. 选择箭头工具单击舞台中的大楼，在软件界面下方

的属性设置栏中（注：如果软件的下方没有属性设置栏，单击“窗口”菜单，勾选其中的属性即可），单击“颜色”右边的下拉列表框，选择其中的高级选项，然后单击其右侧的“设置”按钮，弹出“高级效果”对话框，将其中的 R、 G、 B三项后面的数值设为 80%，以降低大楼的亮度，同时将下面的ALPHA数值设为 65%，降低图像的透明度，使之与背景更好的融合在一起。

制作二职专网页 Banner4. 单击“插入”菜单下的“新建元件”，新建一个名

字为“ computer” 的元件，使用文字工具，选择 _san 字体，输入 computer这几个英文字母，字体颜色为 # 017ac3。完成后选择箭头工具，选中这个单词，按 Ctrl+B或者单击“修改”菜单下的“打散”命令，将文字由一个整体变成以每个字母为单位单个字母，适当改变其字体大小及字母位置，得到如图 9.42所示效果。

制作二职专网页 Banner5. 切换回主场景，从库中将此元件拖出放置在“底

图”图层的左侧。在时间轴上第 75帧的位置拖动鼠标全部选中，右击打开右键菜单，单击其中的插入帧，这样我们就将动画时间延长至 75帧了。在“底图”图层之上再增加 4 个图层，由上至下分别命名为“专”、“职”、“显示器”、“ 2”如图图 9.43 所示。

制作二职专网页 Banner6. 选择图层“ 2” ，在第 5帧上右击，在弹出菜单中

选择“插入关键帧”命令，新建一个关键帧。保持第5帧为选中状态，将库里的元件“ logo-2”拖至图层，放在舞台左侧。适当调整其大小。选中第 17帧，按 F6键插入一个新的关键帧，选择第 5帧右击，在弹出菜单中选择“创建补间动画”，保持第 5帧为选中状态，单击图层“ 2” 中的元件，在软件界面下方的属性设置栏中，单击“颜色”右边的下拉列表框，选择其中的“透明度”，将其设为 65%，这样就创建了一个物体淡入效果。然后分别在“显示器”、“职”、“专”图层的第 6帧、第 16帧、第 17帧也执行同上操作。具体设置如图图 9.44所示。

制作二职专网页 Banner

制作二职专网页 Banner7. 在图层“ 2”之下再新建两个图层分别命名为“ P” 、

“ UTER” 。选择“底图图层”的第 23帧 ,按 F6键插入一个新的关键帧，选中第 23帧，按 Ctrl+B或者单击“修改”菜单下的“打散”命令，将元件打散，选择字母“ P” 按“ Ctrl+X” 将其剪切。选择图层“ P” 的 23帧，按“ Ctrl+Shift+V” 或“编辑”菜单下的“粘贴到当前位置”命令。选择图层“ P” 的 31帧，按 F6新增一个关键帧。在第 23帧与 31帧之间创建补间动画，将第 31帧的“ P” 字变换大小放置在如图 9.46 所示位置。注意比较一下它们的变化。“ UTER” 图层的做法同上。

制作二职专网页 Banner

制作二职专网页 Banner8. 在图层“专”之上新建一个图层命名为“省级”，

在 40帧的位置上插入关键帧，将库里“省级”元件拖进来放置在舞台中间偏右的位置。在 45帧的位置上插入关键帧，并在 40-45帧之间创建补间动画，按照前面讲过的方法将 40帧的图像透明度设为 65%，并略向右移动一点，做“省级重点职业中专”的淡入效果。同理，在本图层的第 50-54帧之间创建文字的淡出效果，和刚才相反，这时需要在第 54帧设定其透明度为 30%。如图 9.47。

制作二职专网页 Banner

制作二职专网页 Banner9. 在图层“省级”之上，再新建一个图层命名为“专

业”，为 56帧设定关键帧，将库里的元件“专业”拖放进来。设定第 60 帧为关键帧，在 56-60帧之间创建补间动画，将 56帧的透明度设为 30%，做淡入效果。最后在图层“专业”之上，新建一个图层命名为“走近二职”，将 67帧设为关键帧，将库里的元件“走近二职”拖放进来。至此，本例制作完成，最终效果及各图层名称、位置如图 9.48 所示。

第十章

网页制作综合实例

教学目标 网站设计流程 设计网页布局 根据网页布局准备素材 各级页面的制作 网站推广

项目介绍 交通银行石家庄分行

是一个金融企业，企业网站的主要目的是向民众介绍银行的各项业务，提高企业知名度。由于宣传的目的仅为石家庄市市民，所以仅需中文版即可。在设计的时候应该注意首页应有较大的信息量，如图10.1 所示，让市民通过首页即可了解该行的主体业务，且页面要美观大方。

创建流程1. 创建本地站点 2. 设计网页布局 3. 准备素材4. 制作页面 5. 网站推广和制作心得

创建本地站点 网站中有各种格式的文件，为了有组织地管理，就要

在站点根目录下创建各种类别的文件夹。通常把网站首页放在站点根目录下，文件名一般为 index.htm ， index.html ， index.asp， index.php， default.htm 等等。 Images 或 image 文件夹是用来存放网站中使用到的图像文件，这些文件通常由Photoshop或 Fireworks 制作，另外， flash 文件、 CSS样式表文件和 JS文件也可以放在这个文件夹中。

设计网页布局 所谓第一屏，是指浏览一个网站时不拖动滚动条能够看到的部分。一般来讲，在目前最常用的 800*600的屏幕显示模式下，在 IE安装后默认的状态 (即工具栏地址栏等没有改变 )下， IE 窗口内能看到的部分为778px*435px。

导航栏能让浏览者在浏览时快捷到达不同的页面，是网页元素中非常重要的部分，所以导航栏一定要清晰、醒目，导航栏一定要在“第一屏”中显示出来，因此横向放置的导航栏要优于纵向的导航栏考虑。

设计网页布局 采用什么样的布局，要具体情况具体分析：如果信息量大，可以考虑用“国字型”或“拐角型”；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选； Flash型更灵活一些，好的 Flash大大丰富了网页，但是它不能表达过多的文字信息。

设计网页布局 目前网页的布局有很多种，而哪一种更容易被客户

和网民所接受呢？首先要从客户的角度来分析，企业制作网站的主要目的就是宣传企业和其产品，因此“开门见山”型的网站布局通常更容易被接受，这样网民只需点击首页就可以了解到企业的主要产品，方便快捷，因此本实例设计首页采用“开门见山”型网页布局，并为首页设置如下栏目：分行简介、交行动态、主要金融业务、客服中心、营业网点和意见反馈。其中交行动态、主要金融业务为二级页面，其他几个栏目既是二级页面，又是最终正文页面。栏目定下来后，开始画出页面的结构图，页面的结构图很重要，它可以帮助我们确定网页的风格以及所需准备的相关素材。

设计网页布局 首页结构图

设计网页布局 二级页面及正文页面结构图

准备素材 1. 扫描录入基本资料 在准备素材时要尽可能地多准备，但也要掌握一定

的原则，总体来说所需素材分两部分，一部分是文字资料；一部分是图片资料。文字部分包括企业简介、企业文化、企业动态、相关产品介绍、联系方式等内容；图片部分包括企业标志、企业外景图、相关产品图片等，可以通过扫描原有的图片来准备，这时扫描的分辨率最好大一些，以便于以后的修改。

准备素材 2. 制作 logo

3. 制作导航菜单的按钮 4. 制作首页中部的企业形象广告条

5. 制作首页产品宣传 flash

准备素材 6. 制作首页各栏栏头图标

7. 制作首页左下角广告图标

8. 制作首页下部主要金融业务图标 9. 制作二级页面所需素材

制作页面 1. 制作站点首页 2. 制作站点正文页面 3. 制作二级页面 4. 制作“网站地图”和“联系我们”页面

网站推广 常用的几种推广方式有：1、搜索引擎注册 在各大搜索引擎上注册你制作的站点，当然有些地方是需要收费的，如新浪、搜狐等。但也有一些搜索引擎可以通过自身的搜索程序找到你的网页，如Google 等。另外还可以去具有“自动登录搜索引擎”服务的网站注册自己的网站。

2 、互换链接 互换链接是每个网站必不可少的，常用的做法是与和自己业务相关的网站

互换链接，这种做法通常称为“友情链接”，双方互不收费，彼此链接。3、其他方法 还有一些看起来很不起眼的办法，而且影响力可能也不会很大，但有时却也会收到意想不到的效果。这些办法有：去相关网站论坛及 BBS上发布自己网站的消息，在各种企业网、商务网（如中国企业网、阿里巴巴等）注册，介绍网站的产品等等。

制作心得 许多新手会及不可待地将收集到的各种资料填到各

个页面，转眼间首页就做出来了，好象很有成就感，但要修改一些页面元素时，却发现一页一页改起来很麻烦。所以建议先制作一个有代表性的页面，将页面的结构布局、配色方案、链接样式考虑周全，然后将其存成模版，再做其他页的时候，只要打开模版文件，像“填空”似的，把内容添到页面中，这样制作页面，速度快，整体性强，如果再结合 JAVA程序的使用，会大大提高工作效率。