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

1、 任务任务3：教学成果申报网站的后期编辑：教学成果申报网站的后期编辑情境情境1：教学成果申报网网站建设：教学成果申报网网站建设1 利用Dreamweaver软件来完成对效果图导出网页的编辑，并利用Dreamweaver制作其他相关网页，最终丰富网页内容，进行链接测试。 网页编辑基础知识网页编辑基础知识 2. 核心技能与概念核心技能与概念静态网页静态网页:是纯粹是纯粹HTML格式的网页格式的网页l l 静态网页上的页面不能互动交流，只供客户端浏览，不能即时更改文字静态网页上的页面不能互动交流，只供客户端浏览，不能即时更改文字及图片资料。不能实现客户端和服务器端的直接信息交流。及图片资料。不能实现

2、客户端和服务器端的直接信息交流。l l 静态网页上的内容维护人员必须手动修改。静态网页上的内容维护人员必须手动修改。l l 开发静态网站的费用极低，但如果每月或每周修改网站的话，维护成本开发静态网站的费用极低，但如果每月或每周修改网站的话，维护成本会会变高。变高。 网页编辑基础知识网页编辑基础知识 2. 核心技能与概念核心技能与概念动态网页动态网页 :采用动态技术生成的网页采用动态技术生成的网页l “交互性交互性”，即网页会根据网页用户的要求和选择而动态改变和响应。，即网页会根据网页用户的要求和选择而动态改变和响应。 l “自动更新自动更新”，即无须手动地更新，即无须手动地更新HTML文档，便

3、会自动生成新的页面，文档，便会自动生成新的页面，可以大大节省维护工作量。可以大大节省维护工作量。 l “因时因人而变因时因人而变”，即当不同的时间、不同的任务访问同一网址时会产，即当不同的时间、不同的任务访问同一网址时会产生不同的效果。生不同的效果。l 使用动态页面，一般后台会链接数据库，每当数据库或其他数据源数据使用动态页面，一般后台会链接数据库，每当数据库或其他数据源数据发生变化时，网站内容就会发生相应的变化。发生变化时，网站内容就会发生相应的变化。网页编辑基础知识网页编辑基础知识 2. 核心技能与概念核心技能与概念本地站点本地站点 l本地站点是指存储本地站点是指存储Web文件和文档的文件

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

5、概念远程站点远程站点 l远程站点也就是网站服务器远程站点也就是网站服务器。l在建立远程站点之前，必须先创建一个本地站点（本地站点将与远程站点在建立远程站点之前，必须先创建一个本地站点（本地站点将与远程站点关联）关联） 。l建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中。根文件夹根文件夹 l l 存储所有网站文件的本地文件夹。存储所有网站文件的本地文件夹。l l 站点的本地根文件夹应该是专门为该站点创建的。站点的本地根文件夹应该是专门为该站点创建的。 2. 核心技能与概念核心技能与概念核心技能一：认识核心技能一：认识D

6、reamweaver CS3的工作界面的工作界面 菜单插入栏文档工具栏属性检查器文档窗口面板组2. 核心技能与概念核心技能与概念核心技能一：认识核心技能一：认识Dreamweaver CS3的工作界面的工作界面 DreamweaverDreamweaver的界面的界面- -插入栏插入栏 DreamweaverDreamweaver的界面的界面- -属性检查器属性检查器 2. 核心技能与概念核心技能与概念核心技能一：认识核心技能一：认识Dreamweaver CS3的工作界面的工作界面 DreamweaverDreamweaver的界面的界面- -面板组面板组 a）“文件”面板 b）“资源”面板

7、 2. 核心技能与概念核心技能与概念核心技能一：认识核心技能一：认识Dreamweaver CS3的工作界面的工作界面 2. 核心技能与概念核心技能与概念核心技能一：认识核心技能一：认识Dreamweaver CS3的工作界面的工作界面 2. 核心技能与概念核心技能与概念核心技能一：认识核心技能一：认识Dreamweaver CS3的工作界面的工作界面 编码为简体中文GB2312 2. 核心技能与概念核心技能与概念 核心技能一：认识核心技能一：认识Dreamweaver CS3的工作界面的工作界面 2. 核心技能与概念核心技能与概念核心技能三：核心技能三：Dreamweaver插入网页图像插入

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

9、 “表格”的属性 表格单元格的属性 “插入”“HTML”“特殊字符”“其他字符”命令 核心技能六：核心技能六：Dreamweaver插入特殊字符插入特殊字符 2. 核心技能与概念核心技能与概念3. 项目计划与决策项目计划与决策首先对网页的效果如图进行分析，将网页内容设置居中，同时将设置网页的页面属性，最后制作网页的超链接和视频欣赏页面。 院标 （宽高）图片成果推荐书成果总结成果视频介绍成果展示名录电子信息工程实训基地版权信息4. 任务实施任务实施简单编辑网页简单编辑网页 1）将项目所需的文件及视频复制到网站根文件夹中，文档结构如图1-85所示。2）首先设置页面属性，设置文字大小为12pixel

10、s，文本的颜色为白色（#ffffff），背景颜色为深蓝色（#003366），网页的上边距、下边距、左边距、右边距都设置为0pixels，如图1-75所示，设置链接属性为：文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为黑色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，活动链接为红色（#FFC000），如图1-75所示，设置网页的标题为：教学成果申报网效果图，编码为简体中文GB2312。 3）选择网页主体内容将其剪切，然后在网页中插入表格，具体参数为1行1列，宽为100%，高为100%，填充、间距、边框都为0像素，设置水平的

11、对其方式为“居中对齐”，垂直的对齐方式为“居中对齐”。 4）再次将网页主体内容粘贴到网页的单元格中，执行“文件”“在浏览器中预览”“iexplore”命令（快捷键）预览网页，效果如图1-85所示。 4. 任务实施任务实施简单编辑网页简单编辑网页 图 1-85 调整后的网页界面4. 任务实施任务实施简单编辑网页简单编辑网页 4）选择“成果推荐书”所在的图片default_05.gif，会发现该图片已经设置了超级链接（在Photoshop中切片属性设置时设置的），依次设置“成果总结”所在的图片default_06.gif链接“cgzj.doc”文件，设置“成果视频介绍”所在的图片default_0

12、7.gif链接“video.html”，设置“成果展示”所在的图片default_08.gif链接“cgzs.doc”文件，设置“电子信息工程实训基地”所在的图片链接网址“44:8086”。以上所有超级链接的目标都设置为“_blank”。4. 任务实施任务实施制作视频展示网页制作视频展示网页 1）将网页default.html另存为video.html，然后Gif动画default_04.gif（宽430px，高253px）删除，并设置动画所在的单元格宽设置为430px，高253px（防止网页断层），最后执行“插入”“媒体”“插件”，在“插件”对话框中选择“

13、move”文件夹中的“sp.wmv”，最后设置插件的宽为430像素，高为253像素。执行“文件”“在浏览器中预览”“iexplore”命令（快捷键）预览网页，效果如图所示。5.项目开发策略与技巧项目开发策略与技巧 策略策略1：网页切片的技巧：网页切片的技巧针对本例在任务2中的切片是存在问题的，中间导航部分的图片“成果展示”所在的图片宽度为227像素，同列的其他图片宽为228像素。这样产生了一个宽为1像素的小图片，在网页中尽量避免这种问题的发生，网页效果图在切片时可以借用辅助线进行切片，同时在进行小的切片时，可以使用放大图像来切片。策略策略2：网页的布局技巧：网页的布局技巧 在常规网页设计中，网

14、页效果图的切片与网页导出对网站只是一个参考，是网页宏观的把握，通常网页在编辑后期编辑时都会参照效果图与切片重新编辑。针对本项目，在default.html的基础上重新布局的具体步骤如下。 5.项目开发策略与技巧项目开发策略与技巧 1）将default.html另存为index.html，然后删除中间的网页内容，插入1个表格（3行3列），宽为782像素，高为434像素，填充和边框为0像素，间距为1像素，参数设置如图1-87所示。图 1-87 表格的参数设置5.项目开发策略与技巧项目开发策略与技巧 2）将第1、3行的3个单元格合并，所有单元格背景色设置为蓝色（#0757ac），并设置第1行行高96

15、像素，第2行行高位253像素，第3行行高为81像素，设置第2行中的3个单元格的宽分别为120像素、227像素、430像素，修改第2行第2列的背景色为浅灰色（#dbdbdb），效果如图1-88所示。图 1-88 表格布局的初步效果5.项目开发策略与技巧项目开发策略与技巧 3）将图片default_01.gif插入第1行单元格，将图片default_02.gif插入第2行第1列的单元格，将gif动画图片default_05.gif插入第2行第3列的单元格，在第3行中插入“版权所有：淮安信息职业技术学院”和“学院地址：江苏省淮安市高教园区枚乘东路3号 邮编：223003”两行文本，并在文字前方插入空

16、格字符（使用全角插入），效果如图1-89所示。图 1-89 表格中插入部分元素后的效果5.项目开发策略与技巧项目开发策略与技巧 4）将素材文件夹中的“图标”系列图片复制到images文件夹中并重命名，设置第2行的第2列单元格为水平居中，并在其中插入1个5行2列的表格，宽为220像素，设置表格的行高为40像素，左列宽为45像素，右列175像素，最后依次插入在第1列中插入图片，在第2列中插入文本，并对文本设置超级链接，效果如图1-90所示。图 1-90 表格布局修饰后的效果5.项目开发策略与技巧项目开发策略与技巧 策略策略3：动画区域的使用技巧：动画区域的使用技巧在网页中经常会有用到幻灯片的效果，实现幻灯效果一般采用javascript脚本实现。图 1-91 动画转换为幻灯后的效果5.项目开发策略与技巧项目开发