任务教学成果申报网站的后期编辑

任务教学成果申报网站的后期编辑第一页，共三十六页，编辑于2023年，星期六1.任务解析与项目目标

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

利用Dreamweaver软件来完成对效果图导出网页的编辑，并利用Dreamweaver制作其他相关网页，最终丰富网页内容，进行链接测试。

第三页，共三十六页，编辑于2023年，星期六网页编辑基础知识

2.核心技能与概念静态网页:是纯粹HTML格式的网页l

静态网页上的页面不能互动交流，只供客户端浏览，不能即时更改文字及图片资料。不能实现客户端和服务器端的直接信息交流。l

静态网页上的内容维护人员必须手动修改。l

开发静态网站的费用极低，但如果每月或每周修改网站的话，维护成本会变高。

第四页，共三十六页，编辑于2023年，星期六网页编辑基础知识

2.核心技能与概念动态网页:采用动态技术生成的网页

“交互性”，即网页会根据网页用户的要求和选择而动态改变和响应。

“自动更新”，即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省维护工作量。

“因时因人而变”，即当不同的时间、不同的任务访问同一网址时会产生不同的效果。

使用动态页面，一般后台会链接数据库，每当数据库或其他数据源数据发生变化时，网站内容就会发生相应的变化。第五页，共三十六页，编辑于2023年，星期六网页编辑基础知识

2.核心技能与概念本地站点本地站点是指存储Web文件和文档的文件夹。定义站点就是在

Dreamweaver中设计网站的第一部，此时设计人员将指定根文件夹的位置。本地站点包含网站的文件，这些文件存储在本地磁盘上。每当需要更新网站的文件时，就可以编辑本地站点中的相应页面，然后上传到远程服务器上进行更新。必须为每个网站都定义一个本地站点。第六页，共三十六页，编辑于2023年，星期六网页编辑基础知识

2.核心技能与概念远程站点远程站点也就是网站服务器。在建立远程站点之前，必须先创建一个本地站点（本地站点将与远程站点关联）

。建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中。根文件夹

l

存储所有网站文件的本地文件夹。l

站点的本地根文件夹应该是专门为该站点创建的。

第七页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能一：认识DreamweaverCS3的工作界面

菜单插入栏文档工具栏属性检查器文档窗口面板组第八页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能一：认识DreamweaverCS3的工作界面

Dreamweaver的界面-插入栏Dreamweaver的界面-属性检查器第九页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能一：认识DreamweaverCS3的工作界面

Dreamweaver的界面-面板组a）“文件”面板b）“资源”面板第十页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能一：认识DreamweaverCS3的工作界面

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

第十一页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能一：认识DreamweaverCS3的工作界面

图中设置了文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为白色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线。

第十二页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能一：认识DreamweaverCS3的工作界面

编码为简体中文GB2312第十三页，共三十六页，编辑于2023年，星期六2.核心技能与概念编辑文本是最基本的网页制作技能，文字是人类文明的结晶，是网页传递信息的最基本的方式。编辑和设置内容丰富、格式美观的文本，既可以传达网站大量的信息，又可以激发浏览者的阅读兴趣。在Dreamweaver中可以输入普通文字，也可以输入特殊字符，设置字体大小，改变文本颜色等。

1）文本的输入2）复制和粘贴文本3）从Word文档中导入HTML，粘贴到所需位置即可比较<Enter>与<shift>+<Enter>键的区别核心技能一：认识DreamweaverCS3的工作界面

第十四页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能三：Dreamweaver插入网页图像

执行“插入”→“图像”命令，完成插入图像。第十五页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能三：Dreamweaver插入网页图像

执行“插入”→“图像”命令，完成插入图像。第十六页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能四：Dreamweaver插入超级链接

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

a）网页图像设置超级链接b）在文本属性栏设置超级链接c）tjc.doc文件第十八页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能五：Dreamweaver插入表格

第十九页，共三十六页，编辑于2023年，星期六2.核心技能与概念核心技能五：Dreamweaver插入表格

“表格”的属性表格单元格的属性第二十页，共三十六页，编辑于2023年，星期六

“插入”→“HTML”→“特殊字符”→“其他字符”命令核心技能六：Dreamweaver插入特殊字符

2.核心技能与概念第二十一页，共三十六页，编辑于2023年，星期六3.项目计划与决策首先对网页的效果如图进行分析，将网页内容设置居中，同时将设置网页的页面属性，最后制作网页的超链接和视频欣赏页面。院标（宽高）图片成果推荐书成果总结成果视频介绍成果展示名录电子信息工程实训基地版权信息第二十二页，共三十六页，编辑于2023年，星期六4.任务实施——简单编辑网页

1）在根文件夹中创建相应的素材文件夹，然后将项目所需的文件及视频复制到不同的文件夹中。2）首先设置页面属性，设置文字大小为12pixels，文本的颜色为白色（#ffffff），背景颜色为深蓝色（#003366），网页的上边距、下边距、左边距、右边距都设置为0pixels，如图1-75所示，设置链接属性为：文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为黑色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，活动链接为红色（#FFC000），如图1-75所示，设置网页的标题为：教学成果申报网效果图，编码为简体中文GB2312。第二十三页，共三十六页，编辑于2023年，星期六4.任务实施——简单编辑网页

3）选择网页主体内容将其剪切，然后在网页中插入表格，具体参数为1行1列，宽为100%，高为100%，填充、间距、边框都为0像素，设置水平的对其方式为“居中对齐”，垂直的对齐方式为“居中对齐”。4）再次将网页主体内容粘贴到网页的单元格中，执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页，效果如图1-85所示。第二十四页，共三十六页，编辑于2023年，星期六4.任务实施——简单编辑网页

图1-85调整后的网页界面第二十五页，共三十六页，编辑于2023年，星期六4.任务实施——简单编辑网页

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

5）将网页default.html另存为video.html，然后Gif动画default_04.gif（宽430px，高253px）删除，并设置动画所在的单元格宽设置为430px，高253px（防止网页断层），最后执行“插入”→“媒体”→“插件”，在“插件”对话框中选择“move”文件夹中的“sp.wmv”，最后设置插件的宽为430像素，高为253像素。执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页，效果如图所示。第二十七页，共三十六页，编辑于2023年，星期六5.项目开发策略与技巧

策略1：网页切片的技巧针对本例在任务2中的切片是存在问题的，中间导航部分的图片“成果展示”所在的图片宽度为227像素，同列的其他图片宽为228像素。这样产生了一个宽为1像素的小图片，在网页中尽量避免这种问题的发生，网页效果图在切片时可以借用辅助线进行切片，同时在进行小的切片时，可以使用<Ctrl++>放大图像来切片。策略2：网页的布局技巧

在常规网页设计中，网页效果图的切片与网页导出对网站只是一个参考，是网页宏观的把握，通常网页在编辑后期编辑时都会参照效果图与切片重新编辑。针对本项目，在default.html的基础上重新布局的具体步骤如下。第二十八页，共三十六页，编辑于2023年，星期六5.项目开发策略与技巧

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

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

3）将图片default_01.gif插入第1行单元格，将图片default_02.gif插入第2行第1列的单元格，将gif动画图片default_05.gif插入第2行第3列的单元格，在第3行中插入“版权所有：淮安高校联合体”和“地址：江苏省淮安市高教园区枚乘东路3号邮编：223003”两行文本，并在文字前方插入空格字符（使用全角插入），效果如图1-89所示。图1-89表格中插入部分元素后的效果第三十一页，共三十六页，编辑于2023年，星期六5.项目开发策略与技巧

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

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

策略4：视频的插入技巧

视频的插入同样也可以通过编辑代码的形式来实