网页设计与制作项目五 层的布局

2. 单击“插入”面板中“布局”选项卡中的“绘制AP Div” 按钮， 在页面中拖曳鼠标指针绘制出一个矩形层，如图所示。
3.将光标置入层中，输入红色文字，并在“属性”面板中设置字体和 大小，效果如图所示。选择“窗口>AP元素”命令，弹出“AP元素” 面板，在面板中选中“apDiv1”，如图左下图所示：选择“编辑>拷贝” 命令，拷贝选中的层，在页面的空白处单击鼠标，选择“编辑>粘贴” 命令，粘贴拷贝的层，面板中如右下图所示。
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活ห้องสมุดไป่ตู้五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
知识大串联：
6. 剪辑(设置层的可视区域)
层
1
可视区
2
左 上 右 下
: : : :
点1至层左边框的距离 点1至层上边框的距离 点2至层左边框的距离 点3至层上边框的距离 下-上=可视区高
3
右-左=可视区宽
返回
（四）任务拓展
【代码解析】： 有时候在做dw 的时候，其中在里面加了层，但是在浏览的时候，加的那个层就 会跑到一边了。那个位置并不理想，有什么办法能让层不乱“跑”呢？ 方法： 手动建立div。也就是说不要用dw自带的插入层，那会生成很多无用代码。用 css控制要固定的div的外层元素的position为relative;(相对定位)，然后设置要固 定div的自身的position为absolute;(绝对定位) 。这样就实现了 这个div在外层元 素里的绝对位置。只要外层位置不变，里面的div层位置也不会变。 举例说明： 1.在背景图所在的div中加入属性position:relative(相对定位) 2.logo所在div的style中加入属性position:absolute;(绝对定位) 就可以实现logo相 对于背景绝对定位，然后设置left 和 top 属性就可以控制相对于背景的位置。 例如：下面两个div实现了 logo白色div永远在背景黑色div的left:20px;top:20px; 位置。 <div style="position:relative; background-color:#000000; width:500px; height:500px;"> <div id="logo" style="position:absolute; left:20px; top:20px; background-color:#FFFFFF; width:120px; height:120px;"> </div></div> 返回
4. 在面板中选中第一个层，按方向键的向右键，个按3次，移动层的位 置，是文字产生阴影效果，如图所示。
使用相同的方法制作其他文字，效果如图所示。
5. 保存文档，按<F12>键预览效果。如图所示：
知识大串联：
1.层的创建 1）图层标签 <div>
<span>
<layer>
<ilayer>
IE和Navigator支持 Navigator支持 2）建立新层 方法一：插入/层 方法二：单击插入工具栏/常用/描绘层按钮,在编辑区中拖拉(按 下Ctrl键可连续画层) 方法三：直接拖动描绘层按钮到编辑区
知识大串联：
2、属性的设置： 1） 层的定位
绝对:浏览器左上角为坐标原点 相对:相对于其它网页元素定位 2）层的命名(英文字母开头,且不能使用特殊字符和空格) 3）Z轴(Z值越大,位置越靠上.可以是任意整数) 4）显示 visible 可见 hidden 隐藏 inherit 继承(继承父层的可视性) 注意: 配合层面板使用(F2) 5） 溢出(当层中内容超过层的大小) visible : 溢出的内容可见 hidden :溢出的内容不可见 scroll : 层周围出现滚动条 auto : 当有溢出时层周围出现滚动条
1 主 要 教 学 环 节 2 3 4 5
项目背景） 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
返回
（二）项目分析
项目活动目标：学会在网页中插入层，对层进行基 本的操作；对层的属性进行设置；对层在布局网页中进 行充分的利用。
重点：在网页中插入层，对层进行基本操作； 难点：对层的属性进行设置，利用层布局网页。
返回
（三）任务实施
为红玫瑰化妆品网页添加文字
【操作步骤】： 1.选择“文件>打开”命令，在弹出的对话框中选择图片，如图所示：
项目背景） 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
（一）项目背景
如果用户想在网页上实现多个元素重叠的效果，可 以使用层。层是网页中的一个区域，并且游离在文档之 上。利用层可精确定位和重叠网页元素。通过设置不同 层的显示或隐藏，实现特殊的效果。因此，在掌握层技 术之后，就可以给网页制作提供强大的页面控制能力。 本项目将层的建立，层的应用以及时间轴动画逐一 得进行了讲解和练习，通过本项目的学习，将会使您做 的网页更加完美。
项目活动五 层的布局
复习提问：
一、选择题： 1．以下代码代表整个表格的是 。 A．table B．td C．tr D.body 2.以下代码代表单元格的是 。 A．Row B．Column C．Cell D．Border 二、简答题： 1、一般来说首页设计的过程是怎样的？ 2、常见的网页布局类型有哪些？