基于工作过程的网页设计与网站开发教程

1. 主编：张洪斌 刘万辉 基于工作过程的网页设计与网站开发教程 机械工业出版社

2. 第六章 网页的基本编辑 情境1：书法家庄辉个人介绍页面的制作 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:制作鼠标滑过效果 基于工作过程的 网页设计与制作教程

3. 1项目展示与项目目标 项目展示与项目目标 掌握Dreamweaver的基础知识 掌握Dreamweaver插入文本、图像、表格、超级链接的方法与技巧 掌握Dreamweaver插入特殊字符的方法 掌握Dreamweaver插入Flash动画的方法 掌握Dreamweaver插入Flash透明动画的技巧方法

4. 2. 项目资讯 网页编辑基础知识 静态网页:是纯粹HTML格式的网页 l静态网页上的页面不能互动交流，只供客户端浏览，不能即时更改文字及图片资料。不能实现客户端和服务器端的直接信息交流。 l静态网页上的内容维护人员必须手动修改。 l开发静态网站的费用极低，但如果每月或每周修改网站的话，维护成本会变高。

5. 2. 项目资讯 网页编辑基础知识 • 动态网页 :采用动态技术生成的网页 •  “交互性”，即网页会根据网页用户的要求和选择而动态改变和响应。 • “自动更新”，即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省维护工作量。 • “因时因人而变”，即当不同的时间、不同的任务访问同一网址时会产生不同的效果。 • 使用动态页面，一般后台会链接数据库，每当数据库或其他数据源数据发生变化时，网站内容就会发生相应的变化。

6. 2. 项目资讯 网页编辑基础知识 • 本地站点 • 本地站点是指存储Web文件和文档的文件夹。定义站点就是在 Dreamweaver中设计网站的第一部，此时设计人员将指定根文件夹的位置。 • 本地站点包含网站的文件，这些文件存储在本地磁盘上。每当需要更新网站的文件时，就可以编辑本地站点中的相应页面，然后上传到远程服务器上进行更新。 • 必须为每个网站都定义一个本地站点。

7. 2. 项目资讯 网页编辑基础知识 • 远程站点 • 远程站点也就是网站服务器。 • 在建立远程站点之前，必须先创建一个本地站点（本地站点将与远程站点关联）。 • 建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中。 根文件夹 l存储所有网站文件的本地文件夹。 l站点的本地根文件夹应该是专门为该站点创建的。

8. 2. 项目资讯 关键知识点一：认识Dreamweaver CS3的工作界面 菜单 插入栏 文档窗口 文档工具栏 面板组 属性检查器

9. 2. 项目资讯 关键知识点一：认识Dreamweaver CS3的工作界面 Dreamweaver的界面-插入栏 Dreamweaver的界面-属性检查器

10. 2. 项目资讯 关键知识点一：认识Dreamweaver CS3的工作界面 Dreamweaver的界面-面板组 a）“文件”面板 b）“资源”面板

11. 2. 项目资讯 关键知识点一：认识Dreamweaver CS3的工作界面 “页面属性”对话框包括页面的颜色、页面标题和背景图像等的设置选项，点击如图“分类栏”中的各个选项，可作如下设置（以外观分类为例）。 图中设置了文字大小为12pixels，文本的颜色为白色（#ffffff），背景颜色为深褐色（#6d4418），网页的上边距、下边距、左边距、右边距都设置为0pixels。

12. 2. 项目资讯 关键知识点一：认识Dreamweaver CS3的工作界面 图中设置了文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为白色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线。

13. 2. 项目资讯 关键知识点一：认识Dreamweaver CS3的工作界面 编码为简体中文GB2312

14. 2. 项目资讯 关键知识点二：调整图层的显示属性制作过渡动画 编辑文本是最基本的网页制作技能，文字是人类文明的结晶，是网页传递信息的最基本的方式。编辑和设置内容丰富、格式美观的文本，既可以传达网站大量的信息，又可以激发浏览者的阅读兴趣。在Dreamweaver中可以输入普通文字，也可以输入特殊字符，设置字体大小，改变文本颜色等。 1）文本的输入 2）复制和粘贴文本 3）从Word文档中导入HTML，粘贴到所需位置即可 比较<Enter> 与<shift>+ <Enter> 键的区别

15. 2. 项目资讯 关键知识点三：Dreamweaver插入网页图像 执行“插入”→“图像”命令，完成插入图像。

16. 2. 项目资讯 关键知识点四：Dreamweaver插入超级链接 超级链接目标的四种属性 _blank：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self：在当前窗口中打开链接，同时替换该框架中的内容。 _top：在当前浏览器窗口中打开链接的文档，同时替换所有框架。

17. 2. 项目资讯 关键知识点四：Dreamweaver插入超级链接

18. 2. 项目资讯 关键知识点五：Dreamweaver插入表格

19. 2. 项目资讯 关键知识点五：Dreamweaver插入表格 “表格”的属性 表格单元格的属性

20. 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 执行“插入”→“媒体”→“Flash”命令

21. 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 1）启动Dreamweaver软件，创建一个空网页并与“flash”文件夹保存在同一目录中命名为“transparentflash.html”，设置页面属性设置标题为“透明动画测试”，设置“页面背景”上下左右边距为0。 2）在网页中插入一行一列的表格，设置表格的宽高、填充、间距、边框、背景颜色等。参数如图6-19所示，设置后的效果如图6-20所示。

22. 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 3）将光标置于表格中，然后执行“插入”→“媒体”→“Flash”命令，在弹出的“选择文件”对话框中选择flash文件夹中的“banner.swf”（第五章5.2.1节中制作的动画如图5-12）动画。

23. 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 4）选择动画在“属性”面板中点击“参数”按钮，设置“参数”选项为wmode，值为transparent，具体如图6-21所示。

24. 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 5）执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页如图6-18所示（本例与上例效果相同）。 如果在第3步中，选中“bird.swf”文件的话，效果如图6-22所示。

25. 2. 项目资讯 关键知识点七：Dreamweaver插入特殊字符 “插入”→“HTML”→“特殊字符”→“其他字符”命令

26. 3. 项目计划与决策 书法家庄辉个人介绍页面主要是在书法家庄辉个人网站效果图切片后导出的图片的基础上实现新的网页编辑。遵循最初网站设计的思路，适当的做出调整。本页面的表格结构如图6-24所示：

27. 4. 项目实施 1）新建一个文件夹，命名为“庄辉个人简介网页”，然后打开文件夹，分别创建“flash”（存放动画）、“images”（存放网页基本文件）、“pic”（存放作者的书法作品）3个文件夹。然后将素材文件夹中的所需的素材分类存放到各自文件夹中。 2）启动Dreamweaver软件，执行 “文件”→“新建”命令或按快捷键<Ctrl+N>，弹出“新建文档”对话框。从“类别”列表中选择“基本页”，然后从右侧的列表中选择“HTML”再单击“创建”按钮创建一个新的HTML网页，执行“文件”→“另存为”命令，保存网页到“庄辉个人简介网页”文件夹中，命名为“grjj.html”。 3) 按<Ctl+J>组合键调出“页面属性”对话框，设置“外观”分类为：字体大小12pixels，文本颜色FFFFFF，背景颜色6d4418，上、下、左、右边距都为0pixels。

28. 4. 项目实施 4）设置“页面属性”对话框中的“链接”分类，参数为：字体大小12pixels，链接颜色#FFFFFF，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，详细如图6-8所示。同时设置“标题”分类，网页的标题为：庄辉个人简介页面，编码为简体中文GB2312。 5）执行“插入”→“表格”命令，在弹出的“表格”对话框中，设置行数为4，列数为2，宽为996像素，边框粗细：0像素，单元格边距0像素，单元格间距1像素，详细的参数也可以通过表格的参数设置来完成，表格的背景色为#edd15e，设置完成后选中所有单元格设置单元格的背景色为6D4418（网页的背景色。

29. 4. 项目实施 6）使用鼠标选中第1行的两个单元格，然后执行“修改”→“表格”→“合并单元格”命令（也可以点击属性栏中的“合并单元格”按钮），将其合并，同样的方法合并第2行，第4行，合并后效果如图所示。 7）使用鼠标选择第1行的单元格，然后设置单元格高为：65像素，选择“插入”工具栏中的“常用”分类，然后点击“图像”按钮，插入“images”文件夹中的“logo.gif”图片。如图所示。

30. 4. 项目实施 8）使用鼠标选择第2行的单元格，然后设置单元格高为：185像素，选择“插入”工具栏中的“常用”分类，然后点击“媒体：flash”按钮，插入“flash”文件夹中的“banner4.swf”动画。如上图所示。点击“属性”栏中的“播放”按钮，效果如下图所示。

31. 4. 项目实施 9）设置第3行的左侧单元格宽为160像素，右侧单元格为833像素（833+160+3=996像素，总宽度等于水平显示的各个元素宽之和，要保证网页界面精细就要减少误差），同时设置两个单元格的垂直对齐方式为：顶端，然后在左侧单元格中插入一个宽120像素，11行，2列，居中对齐，填充、间距、边框都为0像素的表格，详细参数如6-30所示。

32. 4. 项目实施 10）选中插入的22个单元格，点击“居中对齐”按钮设置单元格为居中对齐，然后选择左侧11个单元格，设置宽为30像素，选中右侧的11个单元格，设置宽为90像素。最后分别给左侧从第2行开始的10个单元格中插入“dot.jpg”图片，分别在右侧的第2行开始的10个单元格中插入“网站首页”、“个人简介”、“书法作品”、“国画作品”、“楷书作品”、“篆书作品”等文本。插入后效果如图6-31所示。

33. 4. 项目实施 11）在右侧的表格中插入1个表格6行，2列，宽为95%，居中对齐。然后合并第1、2、3行的表格，设置第2行高为30像素，在第2行中嵌套1个表格1行3列，居中对齐，填充、间距、边框都为0像素，3列宽度分别为1%，3%，96%，第1列的背景颜色为#FF3300，在第3列中输入“个人介绍”（颜色为：#FFFF00），效果如图所示。 12）鼠标选中第3行，然后设置背景色为#FFFF00，插入“images”文件夹中的“space.gif”图片，最后设置行高为1像素，可以得到一条高为1像素的红线，如图所示。

34. 4. 项目实施 13）鼠标选中第4行的2个单元格，设置两个单元格的垂直对齐方式为：顶端，然后修改左侧的单元格宽为360像素，插入“grjj.jpg”图片插入到左侧单元格中，打开“素材”文件夹中的“庄辉介绍.txt”文件，将其中的内容复制到第4行右侧的单元格中，对文本进行段落调整，如果觉得文本过于密集，可以利用<Shift+Enter>键进行调整。 14）鼠标选中最后1行，然后设置单元格属性为高100像素，水平居中对齐，最后在表格中输入“版权所有：淮安书画院书法家庄辉”、“建议分辨率：800×600以上分辨率 IE4.0以上版本浏览器”、“联系人:庄辉 电话:0517-83930880”等文本，最后通过整体调整，按键盘上的<F12>键进行预览，如图6-34所示。

35. 4. 项目实施 15）同样的方式制作“书法作品”的网页sfzp.html，然后分别给两个页面的导航栏设置超级链接，个人简介链接grjj.html，书法作品链接sfzp.html。如图所示。

36. 4. 项目实施 16）采用同样的方式制作其他的网页，如主页、草书作品、行草作品等。

37. 5.项目检查与评估

38. 6.强化拓展实训：掌握制作简单的网页能制作简单的网页6.强化拓展实训：掌握制作简单的网页能制作简单的网页 图 6-42 原始状态下（服务指南模块）的导航效果 图 6-43 鼠标经过图像（服务指南模块）的导航效果

39. 第六章 网页的基本编辑 课程小结 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:制作鼠标滑过效果 基于工作过程的 网页设计与制作教程

40. 谢谢大家