书签分享收藏举报版权申诉 / 12

立即下载加入VIP,免费下载

当前位置：首页 > 工程科技 > 材料科学 > 添加和操纵层.docx

添加和操纵层.docx

文档编号：12458259
上传时间：2023-04-19
格式：DOCX
页数：12
大小：358.39KB

添加和操纵层.docx

《添加和操纵层.docx》由会员分享，可在线阅读，更多相关《添加和操纵层.docx（12页珍藏版）》请在冰豆网上搜索。

添加和操纵层.docx

添加和操纵层

实验16添加和操纵层

实验要求

通过实验，掌握使用层构件网页布局的方法。

利用才呢个可以显示和隐藏页面中的内容，并可以制作网页中的浮动图标。

说明层在网页中的应用很普及，利用层可以对网页整体的设计作一个合理的布局。

特别是网页中的导航菜单，利用层可以很方便地控制菜单显示侧位置。

对应知识点：

●插入层和嵌套层

●设置层参数和属性

●层的显示和隐藏设置

●拖动层

●表格和曾互相转换

对应《MacromediaDreamweaverMX2004标准教程》第12章的内容。

实验课时：

1课时

实验素材

●无

实验步骤

1.启动Dreamweaver程序，选择菜单“文件”→“新建”命令，打开“新建文档”对话框。

在对话框中“常规”标签下选择“类型”列表中的“基本页”选项，创建HTML网页。

2.保存页面名称为layer.htm,然后把光标放在页面空白处，打开属性面板单击“页面属性”按钮00000。

3.打开“页面属性”对话框，在“背景颜色”文本框中输入“#0014A7”，“左、右、上、下”各边据都输入0，完成后单击“确定”按钮。

如图16-1所示。

4.单击“布局”面板中的“描绘层”按钮000，光标在页面中变成十字符号，然后在页面中拉出一个矩形框。

如图16-2所示。

图16-1设置页面属性图16-2描绘层

说明如果“描绘层”按钮不可用，则说明当前网页编辑窗口处于布局模式状态，用户可单击“查看”→“表格模式”→“标准模式”，这样“描绘层”按钮即可用。

5.插入层的方法还可以选择菜单“插入”→“布局对象”→“层”命令。

用鼠标单击层的边框，选中层，在层的左上角显示层的手柄。

把光标放在上面变成双向箭头后，拖动层到合适位置。

如图16-3所示。

6.把光标放在层边框的控制点上，使光标表变成双向箭头，然后拉动边框，使层的宽为700px，高位300px；也可以在属性面板“宽”和“高”编辑框内直接输入700和300，这样会更加精确和快捷。

图16-3拖动层

7.再次选中层，选择菜单“修改”→“转换”→“层到表格”命令。

8.在弹出的“转化层为为表格”对话框中，“表格布局”选项中单击“最小”单选按钮，“像素宽度”文本框中输入０，下面的“使用透明GIFs”和“页面中央”复选框都选中。

如图16-4所示。

说明一些Web设计人员可能不喜欢使用表格或“布局”模式来创建自己的布局，而是喜欢通过曾来进行设计。

在Dreamweaver中，用户可以先使用层来查办关键页面布局，然后将它们转换位表格。

用户还可以在层和表格之间来回转换，以调整布局并优化网页设计。

注意：

DreamweaverMX2004不能转换页面上特定的表格或层，必须将整个页面上的层转换为表格或将表格转换为层。

9．选中转化后的表格，在属性面板上的颜色选择框中输入色标值#E4E7FF,使表格背景色为浅蓝色。

10．把光标插入到转换的1行表格中，打开属性面板，单击“拆分单元格”按钮000，再弹出的对话框中，选择“行”单选按钮，“行数”设置为2，单击“确定”按钮，如图16-5所示。

图16-4转化层为表格对话框图16-5拆分单元格

11.在第一行表格中输入文字“常用工具软件”。

然后选中文字，打开属性面板，单击“粗体”按钮000，使文字为粗体；接着单击“水平”下拉菜单中“居中”命令，使文字显示在表格中插入层。

12.单击布局面板上的“描绘层”按钮0000，在第2行表格中插入层。

13.选中层，打开层的属性面板，在“左.上.宽.高”文本框中分别输入75px.75px.700px.280px，“可见性”选择default（默认），“背景颜色”设置为白色（色标值位#FFFFFF），参数设置如图16-6所示。

图16-6层的属性设置

14.将光标停放在层中，单击“常用”面板上的“表格”按钮000，在层中插入2行2列.宽度为100%.“边框”和“单元格边距”为0，“单元格间距”为2的表格。

15.然后选中表格的第一行两个单元格，单击属性面板上的“合并所选单元格”按钮000，合并两个单元格。

如图16-7所示。

说明在层中嵌套表格是为了有效的控制层内的内容布置及图片的插入。

16．选中第1行表格，在属性中设置表格的背景颜色为“蓝色”（色标值为#BCC3F5）。

图16-7在层中嵌套表格

17.在表格中输入“常用工具软件下载”文字，然后单击属性面板上的“居中对齐”按钮

。

18.在第2行左边的单元格中输入文字“办公软件类”，在右边的单元格中输入“网页制作类”，然后选中两个单元格，单击属性面板上的“垂直”下拉菜单中选择“顶端”设置，使文字靠顶端对齐。

19.将光标停放在左边的单元格中，单击“布局”面板上的“描绘层”按钮000，在“办公软件类”文字下面插入层。

如图16-8所示。

图16-8在表格中插入层

说明利用层功能可以创建嵌套层.在层中嵌套表格.表格中嵌套层，而且层与层之间可以重叠显示。

20.在插入的层中插入一个7行1列的表格，表格宽度为100%，边框.单元格边距和单元格间距均为0。

21.在插入的表格中，从上到下依次输入“网络办公系统2.0”.“公文写作系统助手1.0”.“办公之星3.0”.“WinZip”.“Office2003”.“PWS”.“合同大全1.0”等文字。

22.以同样的方法，在右边的表格中插入层，然后再在层中插入一个7行1列的表格。

23.在表格中从上到下依次输入“Photoshop8.0”.“DreamweaverMX2004”.“FlashMX2004”.“UltraDev4”.“FrontPage”.“ASPExpress.Net”.“AceHTMLPro5”等文字，输入完毕后如图16-9所示。

图16-9在层的表格中输入内容

24.选择菜单“窗口”→“层”命令，打开层面板，然后单击000栏下面的“眼睛”，使所有的层都显示。

如图16-10所示。

说明层的显示和隐藏有三种设置，一种是眼睛睁开，表示显示层；一种是眼睛闭上表示隐藏层；一种是不显示眼睛，表示默认；一般情况下，默认表示该层的可见性将继承其父层的显示属性，父层与子层的关系就是层中嵌套层的关系。

25.选择菜单“窗口”→“行为”命令，打开“行为”面板。

单击层面板上名称下的“Layer2”层，然后单击“行为”面板上的000按钮，在弹出的菜单中选择“拖动层”命令。

如图16-11所示。

说明在给层附加行为时，注意“标签”面板上会显示

标签在给层附加行为时，注意“标签”面板上会显示

标签。

如果再选中层之后，无法附加行为，则可能是因为默认的浏览器设置不支持给曾附加行为。

用户可先在弹出的菜单中选择“显示事件”，然后选择“IE4.0”或更高版本的浏览器。

这样，再次单击“行为”面板上的加号按钮打开行为列表时，“拖动层”命令就可用了。

图16-10显示层设置图16-11选择“拖动层”命令

27.在弹出的“拖动层”对话框中，单击“基本”选项，在“层”下拉列表中选择“层‘layer2’”;在“移动”下拉列表中选择“不限制”选项；在“放下目标”选项单击右边的0000按钮，使“左”和“右”的文本框中显示曾德当前位置；最后一项的“靠齐距离”为默认值，现在的默认值是50。

参数设置如图16-12所示。

图16-12拖动层的行为设置

说明拖动层就是在浏览网页的时候，利用鼠标可以自由移动层的位置。

在设置曾的行为时，必须选择要拖动的层，如果对托动的层不限自由，可以选择“不限制”选项，如果希望让层在适当的范围拖动，那么在“移动”下列菜单中选择“限制”，然后在右边出现的各个文本框中输入数值确定层的移动范围。

如图16-13所示。

图16-13设置层的移动范围

28.单击“确定”按钮，确定拖动层的设置参数后，在行为面板上出现行为动作，如图16-14所示。

29.单击行为面板中的行为动作，弹出下拉菜单，在下来菜单中选择onMouseDown选项如图16-15所示。

图16-14行为动作图16-15选择行为动作

30.以同样的方法，在层控制面板中选择Layer3，在行为面板中设置拖动层的参数，参数设置如图16-16所示。

图16-16设置Layer3行为

31.确定设置后，在行为面板中把行为的触发事件修改为onMouseDown。

32.保存页面，按下F12，浏览网页，用鼠标拖动层试一试，如图16-17所示。

图16-17拖动办公软件类下面的菜单

实验作业

⏹模仿

1．在DreamweaverMX2004编辑窗口下，创建HTML网页。

2．插入层，然后将层转换为表格。

3．建立两个菜单，在菜单下插入层。

4．设置拖动层的行为动作。

5．网页制作完成，保存页面。

⏹创作

1．启动在DreamweaverMX2004，创建HTML网页。

2．在网页中插入层，设置层的属性（颜色或背景图像等）。

3．在层中插入表格、图像、文本等元素，或在层中嵌套层。

4．设置层的拖动范围，如左限为50、右限为60、上限为100、下限为120。

5．参考本书配套光盘exp16\site16文件夹内的网页内容，使用层建立灵活的网页布局。

如图16-18~图16-20所示。

图16-19设置图层滚动轴

图16-20设置图层滚动轴

实验报告

实验名称：

姓名：

班级

分组

实验室

实验时间：

年月日

实验步骤

序号

步骤

操作要领

实验结果

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 添加操纵

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：添加和操纵层.docx
链接地址：https://www.bdocx.com/doc/12458259.html

添加和操纵层.docx

热门标签