网页设计与制作案例教程-电子教案第11单元
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课程引导
层是制作网页时经常用到的对象，在 控制页面布局方面，层要比表格更加的灵活， 例如需要在文字上插入一幅图像时，可以用 层来实现。层体现了网页技术从二维空间向 三维空间的一种延伸，也是一种新的发展方 向。Dreamweaver 8中，层和表格可以互相 转换。
知识技能目标
（1）掌握如何描绘层和插入层、如何选 择层和激活层。
（7）层“Layer2”的可见性设置为 “default”，背景颜色设置“#FFFFFF”。
具体设置过程如下： （1）通过“属性”面板设置层的属性 （2）通过“层”面板管理层
在Dreamweaver 8主窗口中，单击菜单 【窗口】→【层】，可以打开 “层”面板。 通过“层”面板可以管理文档中层、选择多个 层、控制层的叠放顺序、更改层的可见性。
方法之二：选定单个层，按住“Ctrl”健 的同时使用键盘上的方向键来调整层的大小。 注意：此方法只能移动层的右边框和下边框。
方法之三：选定单个层，按住 “Ctrl+Shift”组合键的同时使用键盘上的方 向键来调整层的大小，每按一次方向键可在 相应的方向上调整一个网格单元的大小。
方法之四：选定单个层，在层“属性”面 板上“宽”和“高”文本框直接输入数值，可精 确设置层的大小。
（2）掌握层的属性设置方法、如何调整 层的大小和位置。
（3）掌握在层中输入文本和插入图像的 方法。
（4）掌握嵌套层的创建。 （5）了解层与表格之间的相互转换方法。
网页浏览效果展示
利用层布局的网页06.html浏览效果如 图所示。
图7-34 利用层布局的网页浏览wk.baidu.com果
本章操作任务
（1）在“长沙世界之窗”站点下创建文件 夹“06层的布局”，在“06层的布局”文件夹中 创建一个新的网页，该网页命名为 “06.html”。
1．新建网页
（1）在“长沙世界之窗”站点下创建文件 夹“06层的布局”，在“06层的布局”文件夹中 创建子文件夹“image”，并将所需图像复制 到该文件夹下。
（2）在“06层的布局”文件夹中创建一个 新的网页，该网页命名为“06.html”。
（3）设置网页标题，在文档工具栏的“标 题”文本框直接输入文档标题“长沙世界之窗 内广场”即可。
层作为网页中的一个区域，可以显示、 隐藏、重叠和嵌套。也可以使用行为来控制 层的显示与隐藏，还可以使用时间轴移动层 或改变层的内容，层为网页制作提供了更多 的选择和更快捷的途径。
2．应用层布局网页的特点
（1）定位精确 （2）插入灵活 （3）加速浏览 （4）可以叠加
7.3.2 层的操作
在“长沙世界之窗”站点下创建文件夹 “06层的布局”，在“06层的布局”文件夹中创 建一个新的网页，该网页命名为“06.html”。 具体操作过程如下：
（1）选择层
Dreamweaver 8中可以选择一个或多个层 来进行操作或更改它们的属性。
选择一个层
将鼠标指针指向层边框，边框线变成红 色，鼠标指针变成形状，单击边框线，层的 边框将出现8个蓝色实心正方形，表示该层 已被选中。
选择多个层
按住“Shift”键，然后依次选中所需选择的 多个层，当选中多个层时，最后选定的层的 控制柄将以蓝色实心突出显示，其他层的控 制柄以蓝色空心显示。
（2）激活层 单击层中任意位置可以激活层，此时层
的左上角将显示一个正方形的选择柄。激活 一个层后，便可以向其中插入对象。
4．设置层的属性
接下来设置层的属性，对层的设置要求 如下：
（1）层“Layer1”的“宽”设置为“550px”， “高”设置为“450px”。
（2）层“Layer1”的“左”设置为“80px”， “上”设置为“9px”。
（4）保存该网页。
2．创建层
创建第一个层，层编号为“Layer1”；创 建第二个层，层编号为“Layer2”。 创建一个新层通常有以下两种方法：
（1）描绘层
在“插入”工具栏上，单击按钮，在下拉菜 单中单击菜单项【布局】，切换到“布局”插 入工具栏，在标准模式下，【描绘层】按钮 有效。
单击“布局”插入工具栏上的【描绘层】按 钮，当鼠标光标在编辑窗口中变成“+”字形 状时，按住鼠标左键并拖动，绘制一个大小 合适的区域。释放鼠标即可完成一个新层的 绘制。
5．调整层的大小和位置
（1）调整层的大小 在Dreamweaver 8中，调整层的大小的
方法有多种。 方法之一：选定需要调整大小的层，将
鼠标指针移动到控制柄上，拖动该层的边框 即可在相应的方向上改变层的大小。水平方 向的双向箭头可以改变层的宽度，垂直方向 的双向箭头可以改变层的高度，斜向的双向 箭头可以同时改变层的宽度和高度。
（2）插入层
将鼠标光标置于需要插入层的位置。
Dreamweaver 8主窗口中，单击菜单【插 入】→【布局对象】→【层】。
在文档窗口中会自动插入一个预定大小的 层。
3．选择层与激活层
设置层的属性，对层进行操作时，应先应 选择层，选择层可以对层进行对齐、定位、 移动、调节大小等操作；向层中插入对象时， 应先激活。激活层不等于选定层，两者有区 别。
（3）层“Layer1”的“背景图像”设置为 “image/bj06.jpg”。
（4）层“Layer1”的可见性设置为 “default”。
（5）层“Layer2”的“宽”设置为“205px”， “高”设置为“450px”。
（6）层“Layer2”的“左”设置为“620px”， “上”设置为“9px”。
（2）在网页06.html中绘制多个层，在层 中输入文本、插入图像。
（3）根据需要调整层的大小和位置，对 层的属性进行设置。
7.3.1 认识层
1．层的概念
Dreamweaver 8中的层（Layer）是一种 页面元素，用于控制页面中对象的精确位置， 可以将它放置于页面上的任意位置。层可以 包含文本、图像、表单、插件或者其他任何 可在HTML文档正文放入的内容。
（2）移动层 层可以在页面上任意移动，移动层的方
法有多种。 方法之一：选定单个或多个层，单击选
中层左上角的选择柄，按住鼠标左键并拖动 鼠标，当移动到合适位置时释放鼠标即可。
方法之二：将鼠标指针移动到层的边框 位置，当鼠标指针形状变为四向箭头时，按 住鼠标左键并拖动，也可以移动层。
层是制作网页时经常用到的对象，在 控制页面布局方面，层要比表格更加的灵活， 例如需要在文字上插入一幅图像时，可以用 层来实现。层体现了网页技术从二维空间向 三维空间的一种延伸，也是一种新的发展方 向。Dreamweaver 8中，层和表格可以互相 转换。
知识技能目标
（1）掌握如何描绘层和插入层、如何选 择层和激活层。
（7）层“Layer2”的可见性设置为 “default”，背景颜色设置“#FFFFFF”。
具体设置过程如下： （1）通过“属性”面板设置层的属性 （2）通过“层”面板管理层
在Dreamweaver 8主窗口中，单击菜单 【窗口】→【层】，可以打开 “层”面板。 通过“层”面板可以管理文档中层、选择多个 层、控制层的叠放顺序、更改层的可见性。
方法之二：选定单个层，按住“Ctrl”健 的同时使用键盘上的方向键来调整层的大小。 注意：此方法只能移动层的右边框和下边框。
方法之三：选定单个层，按住 “Ctrl+Shift”组合键的同时使用键盘上的方 向键来调整层的大小，每按一次方向键可在 相应的方向上调整一个网格单元的大小。
方法之四：选定单个层，在层“属性”面 板上“宽”和“高”文本框直接输入数值，可精 确设置层的大小。
（2）掌握层的属性设置方法、如何调整 层的大小和位置。
（3）掌握在层中输入文本和插入图像的 方法。
（4）掌握嵌套层的创建。 （5）了解层与表格之间的相互转换方法。
网页浏览效果展示
利用层布局的网页06.html浏览效果如 图所示。
图7-34 利用层布局的网页浏览wk.baidu.com果
本章操作任务
（1）在“长沙世界之窗”站点下创建文件 夹“06层的布局”，在“06层的布局”文件夹中 创建一个新的网页，该网页命名为 “06.html”。
1．新建网页
（1）在“长沙世界之窗”站点下创建文件 夹“06层的布局”，在“06层的布局”文件夹中 创建子文件夹“image”，并将所需图像复制 到该文件夹下。
（2）在“06层的布局”文件夹中创建一个 新的网页，该网页命名为“06.html”。
（3）设置网页标题，在文档工具栏的“标 题”文本框直接输入文档标题“长沙世界之窗 内广场”即可。
层作为网页中的一个区域，可以显示、 隐藏、重叠和嵌套。也可以使用行为来控制 层的显示与隐藏，还可以使用时间轴移动层 或改变层的内容，层为网页制作提供了更多 的选择和更快捷的途径。
2．应用层布局网页的特点
（1）定位精确 （2）插入灵活 （3）加速浏览 （4）可以叠加
7.3.2 层的操作
在“长沙世界之窗”站点下创建文件夹 “06层的布局”，在“06层的布局”文件夹中创 建一个新的网页，该网页命名为“06.html”。 具体操作过程如下：
（1）选择层
Dreamweaver 8中可以选择一个或多个层 来进行操作或更改它们的属性。
选择一个层
将鼠标指针指向层边框，边框线变成红 色，鼠标指针变成形状，单击边框线，层的 边框将出现8个蓝色实心正方形，表示该层 已被选中。
选择多个层
按住“Shift”键，然后依次选中所需选择的 多个层，当选中多个层时，最后选定的层的 控制柄将以蓝色实心突出显示，其他层的控 制柄以蓝色空心显示。
（2）激活层 单击层中任意位置可以激活层，此时层
的左上角将显示一个正方形的选择柄。激活 一个层后，便可以向其中插入对象。
4．设置层的属性
接下来设置层的属性，对层的设置要求 如下：
（1）层“Layer1”的“宽”设置为“550px”， “高”设置为“450px”。
（2）层“Layer1”的“左”设置为“80px”， “上”设置为“9px”。
（4）保存该网页。
2．创建层
创建第一个层，层编号为“Layer1”；创 建第二个层，层编号为“Layer2”。 创建一个新层通常有以下两种方法：
（1）描绘层
在“插入”工具栏上，单击按钮，在下拉菜 单中单击菜单项【布局】，切换到“布局”插 入工具栏，在标准模式下，【描绘层】按钮 有效。
单击“布局”插入工具栏上的【描绘层】按 钮，当鼠标光标在编辑窗口中变成“+”字形 状时，按住鼠标左键并拖动，绘制一个大小 合适的区域。释放鼠标即可完成一个新层的 绘制。
5．调整层的大小和位置
（1）调整层的大小 在Dreamweaver 8中，调整层的大小的
方法有多种。 方法之一：选定需要调整大小的层，将
鼠标指针移动到控制柄上，拖动该层的边框 即可在相应的方向上改变层的大小。水平方 向的双向箭头可以改变层的宽度，垂直方向 的双向箭头可以改变层的高度，斜向的双向 箭头可以同时改变层的宽度和高度。
（2）插入层
将鼠标光标置于需要插入层的位置。
Dreamweaver 8主窗口中，单击菜单【插 入】→【布局对象】→【层】。
在文档窗口中会自动插入一个预定大小的 层。
3．选择层与激活层
设置层的属性，对层进行操作时，应先应 选择层，选择层可以对层进行对齐、定位、 移动、调节大小等操作；向层中插入对象时， 应先激活。激活层不等于选定层，两者有区 别。
（3）层“Layer1”的“背景图像”设置为 “image/bj06.jpg”。
（4）层“Layer1”的可见性设置为 “default”。
（5）层“Layer2”的“宽”设置为“205px”， “高”设置为“450px”。
（6）层“Layer2”的“左”设置为“620px”， “上”设置为“9px”。
（2）在网页06.html中绘制多个层，在层 中输入文本、插入图像。
（3）根据需要调整层的大小和位置，对 层的属性进行设置。
7.3.1 认识层
1．层的概念
Dreamweaver 8中的层（Layer）是一种 页面元素，用于控制页面中对象的精确位置， 可以将它放置于页面上的任意位置。层可以 包含文本、图像、表单、插件或者其他任何 可在HTML文档正文放入的内容。
（2）移动层 层可以在页面上任意移动，移动层的方
法有多种。 方法之一：选定单个或多个层，单击选
中层左上角的选择柄，按住鼠标左键并拖动 鼠标，当移动到合适位置时释放鼠标即可。
方法之二：将鼠标指针移动到层的边框 位置，当鼠标指针形状变为四向箭头时，按 住鼠标左键并拖动，也可以移动层。