《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元11：使用表格布局网页 一、课程引导 二、 明确知识技能目标 湖南绒道顾营政御学院 三、展示网页浏览效果 四、分析操作任务 要教学环节 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元11：使用表格布局网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 层是制作网页时经常用到的对象，在控制页面布局 线 方面，层要比表格更加的灵活，例如需要在文字上插入 一幅图像时，可以用层来实现。层体现了网页技术从二 维空间向三维空间的一种延伸，也是一种新的发展方向。 薰 Dreamweaver8中，层和表格可以互相转换。 网页设计与制作
（一）课程引导 层是制作网页时经常用到的对象，在控制页面布局 方面，层要比表格更加的灵活，例如需要在文字上插入 一幅图像时，可以用层来实现。层体现了网页技术从二 维空间向三维空间的一种延伸，也是一种新的发展方向。 Dreamweaver 8中，层和表格可以互相转换
(二)明确知识技能目标 (1)掌握如何描绘层和插入层、如何选择层和激活层。 线 (2)掌握层的属性设置方法、如何调整层的大小和位 置。 感 (3)掌握在层中输入文本和插入图像的方法。 紫城 (4)掌握嵌套层的创建。 (5)了解层与表格之间的相互转换方法。 琴 网页设计与制作
（二）明确知识技能目标 （1）掌握如何描绘层和插入层、如何选择层和激活层。 （2）掌握层的属性设置方法、如何调整层的大小和位 置。 （3）掌握在层中输入文本和插入图像的方法。 （4）掌握嵌套层的创建。 （5）了解层与表格之间的相互转换方法
(三) 展示网页浏览效果 利用层布局的网页06.html浏览效果如图所示 月长沙世界之窗内广场-icrosoft Interne8 t Explorer 回 文伸)编想正)吉看)收寝A)工且)朝助) 湖南绒道顾营政御学院 地址包)台】G.1颗材中的网站惊游网站03层的市局03，h 目转到 肉广场 壁 法国罗浮玻璃金字塔 片超器 世界八大雕脚 埃及王后 克人神的性 《中国菩径 我的电 网页设计与制作
（三）展示网页浏览效果 利用层布局的网页06.html浏览效果如图所示
(四)分析操作任务 湖南绒道 (1)在“长沙世界之窗”站点下创建文件夹“06层的 布局”，在“06层的布局”文件夹中创建一个新的网页， 该网页命名为“06.html”。 (2)在网页06.html中绘制多个层，在层中输入文本、 插入图像。 (3)根据需要调整层的大小和位置，对层的属性进行 解 设置。 克 网页设计与制作
（四）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“06层的 布局”，在“06层的布局”文件夹中创建一个新的网页， 该网页命名为“06.html”。 （2）在网页06.html中绘制多个层，在层中输入文本、 插入图像。 （3）根据需要调整层的大小和位置，对层的属性进行 设置
(五) 知识讲解与操作示范（1) 湖南绒道 7.3.1认识层 1.层的概念 Dreamweaver8中的层(Layer)是一种页面元素，用于 控制页面中对象的精确位置，可以将它放置于页面上的任意 位置。层可以包含文本、图像、表单、插件或者其他任何可 蒙 在HTML文档正文放入的内容。 层作为网页中的一个区域，可以显示、隐藏、重叠和嵌 套。也可以使用行为来控制层的显示与隐藏，还可以使用时 琴 间轴移动层或改变层的内容，层为网页制作提供了更多的选 择和更快捷的途径。 网页设计与制作
（五）知识讲解与操作示范（1） 7.3.1 认识层 1．层的概念 Dreamweaver 8中的层（Layer）是一种页面元素，用于 控制页面中对象的精确位置，可以将它放置于页面上的任意 位置。层可以包含文本、图像、表单、插件或者其他任何可 在HTML文档正文放入的内容。 层作为网页中的一个区域，可以显示、隐藏、重叠和嵌 套。也可以使用行为来控制层的显示与隐藏，还可以使用时 间轴移动层或改变层的内容，层为网页制作提供了更多的选 择和更快捷的途径
(五)知识讲解与操作示范(2) 湖南绒道 2. 应用层布局网页的特点 (1)定位精确 (2)插入灵活 (3)加速浏览 (4)可以叠加 御拳院 网页设计与制作
（五）知识讲解与操作示范（2） 2．应用层布局网页的特点 （1）定位精确 （2）插入灵活 （3）加速浏览 （4）可以叠加
(五) 知识讲解与操作示范（3) 7.3.2层的操作 南鍋道 在“长沙世界之窗”站点下创建文件夹“06层局”， 在“06层的布局”文件夹中创建一个新的网页网命名为 “06.html”。具体操作过程如下： 薰 御拳院 网页设计与制作
（五）知识讲解与操作示范（3） 7.3.2 层的操作 在“长沙世界之窗”站点下创建文件夹“06层局”， 在“06层的布局”文件夹中创建一个新的网页网命名为 “06.html”。具体操作过程如下：
(五) 知识讲解与操作示范（4) 7.3.2 层的操作 南 1.新建网页 (1)在“长沙世界之窗”站点下创建文件夹“06层 道 的布局”，在“06层的布局”文件夹中创建子文件夹 “image”,并将所需图像复制到该文件夹下。 蒸 (2)在“06层的布局”文件夹中创建一个新的网页， 该网页命名为“06.html”。 (3)设置网页标题，在文档工具栏的“标题”文本 琴 框直接输入文档标题“长沙世界之窗内广场”即可。 (4)保存该网页。 网页设计与制作
（五）知识讲解与操作示范（4） 1．新建网页 （1）在“长沙世界之窗”站点下创建文件夹“06层 的布局”，在“06层的布局”文件夹中创建子文件夹 “image”，并将所需图像复制到该文件夹下。 （2）在“06层的布局”文件夹中创建一个新的网页， 该网页命名为“06.html”。 （3）设置网页标题，在文档工具栏的“标题”文本 框直接输入文档标题“长沙世界之窗内广场”即可。 7.3.2 层的操作 （4）保存该网页