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

地址：地址：淮安市高教园区枚乘路3号邮编：223003网页制作与网站设计教学课件淮安信息职业技术学院网页制作与网站设计课程组开发地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院任务实施——效果图的制作5.项目检查与评估6.项目开发策略与技巧任务3：教学成果申报网站的后期编辑网页制作与网站设计教程情境1：教学成果申报网网站建设地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院软件来完成对效果图导出网页的编辑，并利用Dreamweaver制作其他相关网页，最终丰富网页内容，进行链接测试。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念静态网页:是纯粹HTML格式的网页l静态网页上的页面不能互动交流，只供客户端浏览，不能即时更改文字及图片资料。不能实现客户端和服务器端的直接信息交流。l静态网页上的内容维护人员必须手动修改。l开发静态网站的费用极低，但如果每月或每周修改网站的话，维护成本会变高。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念动态网页:采用动态技术生成的网页l“交互性”，即网页会根据网页用户的要求和选择而动态改变和响应。l“自动更新”，即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省维护工作量。l“因时因人而变”，即当不同的时间、不同的任务访问同一网址时会产生不同的效果。l使用动态页面，一般后台会链接数据库，每当数据库或其他数据源数据发生变化时，网站内容就会发生相应的变化。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院文件和文档的文件夹。定义站点就是在Dreamweaver中设计网站的第一部，此时设计人员将指定根文件夹的位置。l本地站点包含网站的文件，这些文件存储在本地磁盘上。每当需要更新网站的文件时，就可以编辑本地站点中的相应页面，然后上传到远程服务器上进行更新。l必须为每个网站都定义一个本地站点。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院远程站点也就是网站服务器。l在建立远程站点之前，必须先创建一个本地站点（本地站点将与远程站点关联）。l建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中。根文件夹l存储所有网站文件的本地文件夹。l站点的本地根文件夹应该是专门为该站点创建的。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能一：认识DreamweaverCS3的工作界面菜单插入栏文档工具栏属性检查器文档窗口面板组地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能一：认识DreamweaverCS3的工作界面Dreamweaver的界面-插入栏Dreamweaver的界面-属性检查器地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能一：认识DreamweaverCS3的工作界面Dreamweaver的界面-面板组a）“文件”面板b）“资源”面板地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能一：认识DreamweaverCS3的工作界面“页面属性”对话框包括页面的颜色、页面标题和背景图像等的设置选项，点击如图“分类栏”中的各个选项，可作如下设置（以外观分类为例）。图中设置了文字大小为12pixels，文本的颜色为白色（#ffffff），背景颜色为深褐色（#6d4418），网页的上边距、下边距、左边距、右边距都设置为0pixels。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能一：认识DreamweaverCS3的工作界面图中设置了文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为白色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能一：认识DreamweaverCS3的工作界面编码为简体中文GB2312地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念编辑文本是最基本的网页制作技能，文字是人类文明的结晶，是网页传递信息的最基本的方式。编辑和设置内容丰富、格式美观的文本，既可以传达网站大量的信息，又可以激发浏览者的阅读兴趣。在Dreamweaver中可以输入普通文字，也可以输入特殊字符，设置字体大小，改变文本颜色等。1）文本的输入2）复制和粘贴文本3）从Word文档中导入HTML，粘贴到所需位置即可比较Enter与shift+Enter键的区别核心技能一：认识DreamweaverCS3的工作界面地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能三：Dreamweaver插入网页图像执行“插入”→“图像”命令，完成插入图像。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能三：Dreamweaver插入网页图像执行“插入”→“图像”命令，完成插入图像。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能四：Dreamweaver插入超级链接超级链接目标的四种属性_blank：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。_parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。_self：在当前窗口中打开链接，同时替换该框架中的内容。_top：在当前浏览器窗口中打开链接的文档，同时替换所有框架。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能四：Dreamweaver插入超级链接a）网页图像设置超级链接b）在文本属性栏设置超级链接c）tjc.doc文件地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能五：Dreamweaver插入表格地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院核心技能与概念核心技能五：Dreamweaver插入表格“表格”的属性表格单元格的属性地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院“插入”→“HTML”→“特殊字符”→“其他字符”命令核心技能六：Dreamweaver插入特殊字符2.核心技能与概念地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院项目计划与决策首先对网页的效果如图进行分析，将网页内容设置居中，同时将设置网页的页面属性，最后制作网页的超链接和视频欣赏页面。院标（宽高）图片成果推荐书成果总结成果视频介绍成果展示名录电子信息工程实训基地版权信息地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院任务实施——简单编辑网页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所示。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院任务实施——简单编辑网页图1-85调整后的网页界面地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院任务实施——简单编辑网页4）选择“成果推荐书”所在的图片default_05.gif，会发现该图片已经设置了超级链接（在Photoshop中切片属性设置时设置的），依次设置“成果总结”所在的图片default_06.gif链接“cgzj.doc”文件，设置“成果视频介绍”所在的图片default_07.gif链接“video.html”，设置“成果展示”所在的图片default_08.gif链接“cgzs.doc”文件，设置“电子信息工程实训基地”所在的图片链接网址“”。以上所有超级链接的目标都设置为“_blank”。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院任务实施——制作视频展示网页1）将网页default.html另存为video.html，然后Gif动画default_04.gif（宽430px，高253px）删除，并设置动画所在的单元格宽设置为430px，高253px（防止网页断层），最后执行“插入”→“媒体”→“插件”，在“插件”对话框中选择“move”文件夹中的“sp.wmv”，最后设置插件的宽为430像素，高为253像素。执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键F12）预览网页，效果如图所示。地址：淮安市高教园区枚乘路3号邮编：223003淮安信息职业技术学院：网页切片的技巧针对本例在任务2中的切片是存在问题的，中间导航部分的图片“成果展示”所在的图片宽度为227像素，同列的其他图片宽为228像素。这样产生了一个宽为1像素的小图片，在网页中尽量避免这种问题的发生，网页效果图在切片时可以借用辅助线进行切片，同时在进行小的切片时，可以使用Ctrl++放大图像来切片。策略2：网页的布局