《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元4：页面的整体控制 、 课程引导 二、明确知识技能目标 湖南绒道质营政御学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元4：页面的整体控制 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 本章主要学习如何设置网页的整体页面属性。 湖南城道業政饰学院 网页设计与制作
（一）课程引导 本章主要学习如何设置网页的整体页面属性
(二) 明确知识技能目标 湖南线道 (1)了解Dreamweaver8的参数设置方法 (2)掌握页面属性的设置方法 (3)掌握设置文件头内容的方法 (4)学习辅助工具的使用 紫技鄉学院 网页设计与制作
（二）明确知识技能目标 （1）了解Dreamweaver 8的参数设置方法 （2）掌握页面属性的设置方法 （3）掌握设置文件头内容的方法 （4）学习辅助工具的使用
(三) 展示网页浏览效果 1. 湖南绒道 预览网页 2. 网页01.html的页面属性整体设置效果如图所示。 01.htnl 02.htnl 回代码回拆分回设计标题：长沙世界之窗 9..C目. 右②量鱼凸￥角30n 92OP酒图Hm图孤盈A 长沙烂是立高，星虫香史旅集团深拟子：经酒装展浸和瘦 天， “与簧花国际机场及长 body>(span> k9Q100%￥586x110￥2K/1秒 ,属性 格式无 样试无 CSsB1叁皇 链接 字体宋体习 大小14习像索x习 ■扫扫丝连目标 页面屏性列表项目 网页设计与制作
（三）展示网页浏览效果 2．网页01.html的页面属性整体设置效果如图所示。 1．预览网页
(四) 分析操作任务 湖南 (1)在站点“长沙世界之窗”根目录下创建一个文件夹“01 页面控制”，在该文件夹中创建一个命名为“01.html”的网页 文档。 道 (2)设置“首选参数”，具体设置要求见4.1节。 (3)设置网页“01.html”的外观属性、链接属性、标题属 紫城 性、标题/编码属性，且在浏览器中浏览网页的设置效果。具体 设置要求见4.2节。 (4)为网页“01.htm1”插入关键字和说明。 等 网页设计与制作
（四）分析操作任务 （1）在站点“长沙世界之窗”根目录下创建一个文件夹“01 页面控制”，在该文件夹中创建一个命名为“01.html”的网页 文档。 （2）设置“首选参数”，具体设置要求见4.1节。 （3）设置网页“01.html”的外观属性、链接属性、标题属 性、标题/编码属性，且在浏览器中浏览网页的设置效果。具体 设置要求见4.2节。 （4）为网页“01.html”插入关键字和说明
(五) 知识讲解与操作示范 4.1参数设置 南 设置“首选参数”之前先在站点“长沙世界之窗”根目录 下创建一个文件夹“01页面控制”，在该文件夹中创建一个命 道 名为“01.html”的网页文档。 1.打开“首选参数”对话框 在Dreamweaver8主窗口中，单击菜单【编辑】→【首选参 薰 数】或者使用快捷键“Ctr1+U”，即可打开“首选参数”对话 框。 2.参数设置方法 “首选参数”对话框左边的“分类”列表中列出了20种不 琴 同的类别，选择一种类后，该类别中所有可用的选项将会显示 克 在对话框的右边参数设置区域。 网页设计
（五）知识讲解与操作示范 4.1 参数设置 设置“首选参数”之前先在站点“长沙世界之窗”根目录 下创建一个文件夹“01页面控制”，在该文件夹中创建一个命 名为“01.html”的网页文档。 1．打开“首选参数”对话框 在Dreamweaver 8主窗口中，单击菜单【编辑】→【首选参 数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话 框。 2．参数设置方法 “首选参数”对话框左边的“分类”列表中列出了20种不 同的类别，选择一种类后，该类别中所有可用的选项将会显示 在对话框的右边参数设置区域
五) 知识讲解与操作示范 湖 4.1参数设置 3.参数设置举例 (1)设置启动Dreamweaver8时不再显示起始页。 道 打开“首选参数”对话框后，在该对话框的左边的“分类” 列表中选择“常规”选项，在右边“文档选项”的“显示起始 页”复选框中单击，取消复选框中的选中标记，然后单击【确定】 薰 按钮。 爽 (2)设置站点属性“总是显示本地文件于右”。 打开“首选参数”对话框后，在该对话框的左边的“分类” 娄 列表中选择“站点”选项，然后在“总是显示”列表项中选择 “本地文件”和“右”即可。 网页设计与制作
（五）知识讲解与操作示范 4.1 参数设置 3．参数设置举例 （1）设置启动Dreamweaver 8时不再显示起始页。 打开“首选参数”对话框后，在该对话框的左边的“分类” 列表中选择“常规”选项，在 右边“文档选项”的“显示起始 页”复选框中单击，取消复选框中的选中标记，然后单击【确定】 按钮。 （2）设置站点属性“总是显示本地文件于右”。 打开“首选参数”对话框后，在该对话框的左边的“分类” 列表中选择“站点”选项，然后在“总是显示”列表项中选择 “本地文件”和“右”即可
五) 知识讲解与操作示范 湖 4.1参数设置 (3)创建网页文档时，设置默认文档为“HTML”文档，设置默 认扩展名为“.html”。 道 打开“首选参数”对话框后，在该对话框的左边的“分类” 感 列表中选择“新建文档”选项，然后在右边设置“默认文档”为 “HTL”,设置“默认扩展名”为“.html”即可。 戏 (4)设置复制/粘贴属性：使用“编辑>粘贴”从其他应用程 序粘贴到设计视图时，复制“带结构的文本及全部格式”。 琴 网页设计与制作
（五）知识讲解与操作示范 4.1 参数设置 （3）创建网页文档时，设置默认文档为“HTML”文档，设置默 认扩展名为“.html”。 打开“首选参数”对话框后，在该对话框的左边的“分类” 列表中选择“新建文档”选项，然后在右边设置“默认文档”为 “HTML”，设置“默认扩展名”为“.html”即可。 （4）设置复制/粘贴属性：使用“编辑>粘贴”从其他应用程 序粘贴到设计视图时，复制“带结构的文本及全部格式
(五)知识讲解与操作示范(2) 4.2设置页面属性 湖南绒道 1.打开“页面属性”对话框 在Dreamweaver8主窗口中，单击菜单【修改】→【页面 属性】或者在“属性面板”中单击【页面属性】按钮都可以打 开“页面属性”对话框。 2.设置外观属性 薰 对网页“01.html”外观属性的设置要求如下： (1)“页面字体”设置为“宋体”，“大小”设置为 “14px”。 (2)“背景颜色”设置为“#CCFFFF”。 琴 (3)“左边距”和“右边距”设置为“80px” 克 下面根据属性设置要求完成网页“01.html”外观属性的设置。 网顷设计与制作
（五）知识讲解与操作示范（2） 4.2 设置页面属性 1．打开“页面属性”对话框 在Dreamweaver 8主窗口中，单击菜单【修改】→【页面 属 性】或者在“属性面板”中单击【页面属性】按钮都可以打 开“页面属性”对话框。 2．设置外观属性 对网页“01.html”外观属性的设置要求如下： （1）“页面字体”设置为“宋体”，“大小”设置为 “14px”。 （2）“背景颜色”设置为“#CCFFFF”。 （3）“左边距”和“右边距”设置为“80px”。 下面根据属性设置要求完成网页“01.html”外观属性的设置