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

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