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