网页制作与网站设计教学课件

1. 网页制作与网站设计教学课件 网页制作与网站设计课程组开发 淮安信息职业技术学院

2. 情境1：教学成果申报网网站建设 任务3：教学成果申报网站的后期编辑 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施——效果图的制作 5. 项目检查与评估 6. 项目开发策略与技巧 网页制作与网站设计教程

3. 1任务解析与项目目标 利用Dreamweaver软件来完成对效果图导出网页的编辑，并利用Dreamweaver制作其他相关网页，最终丰富网页内容，进行链接测试。

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 CS3的工作界面 编辑文本是最基本的网页制作技能，文字是人类文明的结晶，是网页传递信息的最基本的方式。编辑和设置内容丰富、格式美观的文本，既可以传达网站大量的信息，又可以激发浏览者的阅读兴趣。在Dreamweaver中可以输入普通文字，也可以输入特殊字符，设置字体大小，改变文本颜色等。 1）文本的输入 2）复制和粘贴文本 3）从Word文档中导入HTML，粘贴到所需位置即可 比较<Enter> 与<shift>+ <Enter> 键的区别

15. 2. 核心技能与概念 核心技能三：Dreamweaver插入网页图像 执行“插入”→“图像”命令，完成插入图像。

16. 2. 核心技能与概念 核心技能三：Dreamweaver插入网页图像 执行“插入”→“图像”命令，完成插入图像。

17. 2. 核心技能与概念 核心技能四：Dreamweaver插入超级链接 超级链接目标的四种属性 _blank：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self：在当前窗口中打开链接，同时替换该框架中的内容。 _top：在当前浏览器窗口中打开链接的文档，同时替换所有框架。

18. 2. 核心技能与概念 核心技能四：Dreamweaver插入超级链接 a）网页图像设置超级链接 b）在文本属性栏设置超级链接 c）tjc.doc文件

19. 2. 核心技能与概念 核心技能五：Dreamweaver插入表格

20. 2. 核心技能与概念 核心技能五：Dreamweaver插入表格 “表格”的属性 表格单元格的属性

21. 2. 核心技能与概念 核心技能六：Dreamweaver插入特殊字符 “插入”→“HTML”→“特殊字符”→“其他字符”命令

22. 3. 项目计划与决策 首先对网页的效果如图进行分析，将网页内容设置居中，同时将设置网页的页面属性，最后制作网页的超链接和视频欣赏页面。

23. 4. 任务实施——简单编辑网页 1）将项目所需的文件及视频复制到网站根文件夹中，文档结构如图1-85所示。 2）首先设置页面属性，设置文字大小为12pixels，文本的颜色为白色（#ffffff），背景颜色为深蓝色（#003366），网页的上边距、下边距、左边距、右边距都设置为0pixels，如图1-75所示，设置链接属性为：文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为黑色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，活动链接为红色（#FFC000），如图1-75所示，设置网页的标题为：教学成果申报网效果图，编码为简体中文GB2312。 3）选择网页主体内容将其剪切，然后在网页中插入表格，具体参数为1行1列，宽为100%，高为100%，填充、间距、边框都为0像素，设置水平的对其方式为“居中对齐”，垂直的对齐方式为“居中对齐”。 4）再次将网页主体内容粘贴到网页的单元格中，执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页，效果如图1-85所示。

24. 4. 任务实施——简单编辑网页 图 1-85 调整后的网页界面

25. 4. 任务实施——简单编辑网页 4）选择“成果推荐书”所在的图片default_05.gif，会发现该图片已经设置了超级链接（在Photoshop中切片属性设置时设置的），依次设置“成果总结”所在的图片default_06.gif链接“cgzj.doc”文件，设置“成果视频介绍”所在的图片default_07.gif链接“video.html”，设置“成果展示”所在的图片default_08.gif链接“cgzs.doc”文件，设置“电子信息工程实训基地”所在的图片链接网址“http://210.29.227.244:8086”。以上所有超级链接的目标都设置为“_blank”。

26. 4. 任务实施——制作视频展示网页 1）将网页default.html另存为video.html，然后Gif动画default_04.gif（宽430px，高253px）删除，并设置动画所在的单元格宽设置为430px，高253px（防止网页断层），最后执行“插入”→“媒体”→“插件”，在“插件”对话框中选择“move”文件夹中的“sp.wmv”，最后设置插件的宽为430像素，高为253像素。执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页，效果如图所示。

27. 5.项目开发策略与技巧 策略1：网页切片的技巧 针对本例在任务2中的切片是存在问题的，中间导航部分的图片“成果展示”所在的图片宽度为227像素，同列的其他图片宽为228像素。这样产生了一个宽为1像素的小图片，在网页中尽量避免这种问题的发生，网页效果图在切片时可以借用辅助线进行切片，同时在进行小的切片时，可以使用<Ctrl++>放大图像来切片。 策略2：网页的布局技巧 在常规网页设计中，网页效果图的切片与网页导出对网站只是一个参考，是网页宏观的把握，通常网页在编辑后期编辑时都会参照效果图与切片重新编辑。针对本项目，在default.html的基础上重新布局的具体步骤如下。

28. 5.项目开发策略与技巧 1）将default.html另存为index.html，然后删除中间的网页内容，插入1个表格（3行3列），宽为782像素，高为434像素，填充和边框为0像素，间距为1像素，参数设置如图1-87所示。 图 1-87 表格的参数设置

29. 5.项目开发策略与技巧 2）将第1、3行的3个单元格合并，所有单元格背景色设置为蓝色（##0757ac），并设置第1行行高96像素，第2行行高位253像素，第3行行高为81像素，设置第2行中的3个单元格的宽分别为120像素、227像素、430像素，修改第2行第2列的背景色为浅灰色（#dbdbdb），效果如图1-88所示。 图 1-88 表格布局的初步效果

30. 5.项目开发策略与技巧 3）将图片default_01.gif插入第1行单元格，将图片default_02.gif插入第2行第1列的单元格，将gif动画图片default_05.gif插入第2行第3列的单元格，在第3行中插入“版权所有：淮安信息职业技术学院”和“学院地址：江苏省淮安市高教园区枚乘东路3号 邮编：223003”两行文本，并在文字前方插入空格字符（使用全角插入），效果如图1-89所示。 图 1-89 表格中插入部分元素后的效果

31. 5.项目开发策略与技巧 4）将素材文件夹中的“图标”系列图片复制到images文件夹中并重命名，设置第2行的第2列单元格为水平居中，并在其中插入1个5行2列的表格，宽为220像素，设置表格的行高为40像素，左列宽为45像素，右列175像素，最后依次插入在第1列中插入图片，在第2列中插入文本，并对文本设置超级链接，效果如图1-90所示。 图 1-90 表格布局修饰后的效果

32. 5.项目开发策略与技巧 策略3：动画区域的使用技巧 在网页中经常会有用到幻灯片的效果，实现幻灯效果一般采用javascript脚本实现。 图 1-91 动画转换为幻灯后的效果

33. 5.项目开发策略与技巧 策略4：视频的插入技巧 视频的插入同样也可以通过编辑代码的形式来实现。将index.html网页另存为video.html（覆盖原来的video.html），然后删除幻灯代码，插入视频浏览代码：参考素材文件夹。 图 1-92 动画转换为幻灯后的效果

34. 情境1：教学成果申报网网站建设 教学成果申报网站的后期编辑小结 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施——效果图的制作 5. 项目检查与评估 6. 项目策略与经验 网页制作与网站设计教程

35. 谢谢大家