网页的布局课程学习.pptx

《网页的布局课程学习.pptx》由会员分享，可在线阅读，更多相关《网页的布局课程学习.pptx（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、会计学1网页网页(wn y)的布局的布局第一页，共30页。（二）明确知识(zh shi)技能目标（1）掌握如何描绘层和插入层、如何选择层和激活层。（2）掌握层的属性设置方法、如何调整层的大小和位置。（3）掌握在层中输入文本(wnbn)和插入图像的方法。（4）掌握嵌套层的创建。（5）了解层与表格之间的相互转换方法。第2页/共30页第二页，共30页。（三）展示网页浏览(li ln)效果利用(lyng)层布局的网页06.html浏览效果如图所示 第3页/共30页第三页，共30页。（四）分析操作(cozu)任务（1）在“长沙世界之窗”站点下创建文件夹“06 层的布局”，在“06层的布局”文件夹中创建一

2、个新的网页，该网页命名为“06.html”。（2）在网页06.html中绘制多个层，在层中输入文本(wnbn)、插入图像。（3）根据需要调整层的大小和位置，对层的属性进行设置。第4页/共30页第四页，共30页。（五）知识讲解(jingji)与操作示范（1）7.3.1认识层1层的概念 Dreamweaver 8 中的层是一种页面元素，用于控制页面中对象的精确位置，可以将它放置于页面上的任意位置。层可以包含文本、图像、表单、插件或者其他任何可在HTML文档正文放入的内容。层作为网页中的一个(y)区域，既可以显示、隐藏、重叠和嵌套。也可以使用行为来控制层的显示与隐藏，还可以使用时间轴移动层或改变层的

3、内容，层为网页制作提供了更多的选择和更快捷的途径。第5页/共30页第五页，共30页。（五）知识讲解(jingji)与操作示范（2）2应用层布局网页的特点 （1）定位精确 （2）插入灵活 （3）加速(ji s)浏览 （4）可以叠加第6页/共30页第六页，共30页。（五）知识讲解(jingji)与操作示范（3）7.3.2层的操作 在“长沙世界之窗”站点下创建文件夹“06层局”，在“06层的布局”文件夹中创建一个新的网页网命名为“06.html”。具体操作过程(guchng)如下：第7页/共30页第七页，共30页。（五）知识讲解(jingji)与操作示范（4）1新建网页 （1）在“长沙世界之窗”站点

4、下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。（2）在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。（3）设置网页标题(biot)，在文档工具栏的“标题(biot)”文本框直接输入文档标题(biot)“长沙世界之窗内广场”。（4）保存该网页。第8页/共30页第八页，共30页。（五）知识讲解(jingji)与操作示范（5）2创建层 创建第一个层，层编号为“Layer1”；创建第二个层，层编号为“Layer2”。创建一个新层通常有以下两种方法：（1）描绘层 在“插入(ch r)”工具栏上，单击按钮，在下

5、拉菜单中单击菜单项【布局】，切换到“布局”插入(ch r)工具栏，在标准模式下，【描绘层】按钮有效。第9页/共30页第九页，共30页。（五）知识(zh shi)讲解与操作示范（6）单击“布局”插入工具栏上的【描绘层】按钮，当鼠标光标在编辑(binj)窗口中变成“+”字形状时，按住鼠标左键并拖动,绘制一个大小合适的区域。释放鼠标即可完成一个新层的绘制。（2）插入层 将鼠标光标置于需要插入层的位置。Dreamweaver 8 主窗口中，单击菜单【插入】【布局对象】【层】。在文档窗口中会自动插入一个预定大小的层。第10页/共30页第十页，共30页。（五）知识(zh shi)讲解与操作示范（7）3选择

6、层与激活层设置层的属性，对层进行操作时，应先应选择层，选择层可以对层进行对齐、定位、移动、调节大小等操作；向层中插入(ch r)对象时，应先激活。激活层不等于选定层，两者有区别。第11页/共30页第十一页，共30页。（五）知识(zh shi)讲解与操作示范（8）（1）选择层 Dreamweaver 8中可以选择一个或多个层来进行操作或更改它们的属性 选择一个层 将鼠标指针指向层边框，边框线变成红色，鼠标指针变成 形状，单击边框线，层的边框将出现(chxin)8个蓝色实心正方形，表示该层已被选中。第12页/共30页第十二页，共30页。（五）知识讲解与操作(cozu)示范（9）选择多个层 按住“S

7、hift”键，然后(rnhu)依次选中所需选择的多个层，当选中多个层时，最后选定的层的控制柄将以蓝色实心突出显示，其他层的控制柄以蓝色空心显示。（2）激活层 单击层中任意位置可以激活层，此时层的左上角将显示一个正方形的选择柄。激活一个层后，便可以向其中插入对象。第13页/共30页第十三页，共30页。（五）知识讲解与操作(cozu)示范（10）4设置层的属性 接下来设置层的属性，对层的设置要求如下：（1）层“Layer1”的“宽”设置为“550px”，“高”设置为“450px”。（2）层“Layer1”的“左”设置为“80px”，“上”设置为“9px”。（3）层“Layer1”的“背景(bijn

8、g)图像”设置为“image/bj06.jpg”。第14页/共30页第十四页，共30页。（五）知识讲解(jingji)与操作示范（11）（4）层“Layer1”的可见(kjin)性设置为“default”。（5）层“Layer2”的“宽”设置为“205px”，“高”设置为“450px”。（6）层“Layer2”的“左”设置为“620px”，“上”设置为“9px”。（7）层“Layer2”的可见(kjin)性设置为“default”，背景颜色设置“#FFFFFF”。第15页/共30页第十五页，共30页。（五）知识讲解(jingji)与操作示范（12）具体设置过程如下：（1）通过“属性”面板设置层

9、的属性（2）通过“层”面板管理层 在Dreamweaver 8主窗口中，单击菜单【窗口】【层】，可以打开“层”面板。通过“层”面板可以管理文档中层、选择多个层、控制层的叠放顺序、更改(gnggi)层的可见性。第16页/共30页第十六页，共30页。（五）知识讲解(jingji)与操作示范（13）5调整层的大小和位置（1）调整层的大小 在Dreamweaver 8中，调整层的大小的方法有多种。方法之一：选定(xun dn)需要调整大小的层，将鼠标指针移动到控制柄上，拖动该层的边框即可在相应的方向上改变层的大小。水平方向的双向箭头可以改变层的宽度，垂直方向的双向箭头可以改变层的高度，斜向的双向箭头可

10、以同时改变层的宽度和高度。第17页/共30页第十七页，共30页。（五）知识讲解(jingji)与操作示范（14）方法之二：选定单个层，按住“Ctrl”健的同时使用键盘上的方向键来调整层的大小。注意：此方法只能移动(ydng)层的右边框和下边框。方法之三：选定单个层，按住“Ctrl+Shift”组合键的同时使用键盘上的方向键来调整层的大小，每按一次方向键可在相应的方向上调整一个网格单元的大小。方法之四：选定单个层，在层“属性”面板上“宽”和“高”文本框直接输入数值，可精确设置层的大小。第18页/共30页第十八页，共30页。（五）知识讲解(jingji)与操作示范（15）（2）移动层 层可以(ky

11、)在页面上任意移动，移动层的方法有多种。方法之一：选定单个或多个层，单击选中层左上角的选择柄，按住鼠标左键并拖动鼠标，当移动到合适位置时释放鼠标即可。方法之二：将鼠标指针移动到层的边框位置，当鼠标指针形状变为四向箭头时，按住鼠标左键并拖动，也可以(ky)移动层。第19页/共30页第十九页，共30页。（五）知识讲解与操作(cozu)示范（16）方法之三：选定单个或多个层，使用键盘上的方向键也能移动图层，每按下一次则移动一像素的距离。方法之四：在层“属性”面板中，通过设置“左”和“上”的坐标值能精确定位层的位置。如果需要将页面中的某个(mu)对象贴合在窗口的左边框或上边框，只需要将该对象放置在层中

12、，然后在层的“属性”面板中设置“左”或“上”为0即可。第20页/共30页第二十页，共30页。（五）知识(zh shi)讲解与操作示范（17）（3）多个层的对齐 按住“Shift”键选定需要对齐的多个层，在Dreamweaver 8主窗口，单击【修改】【排列(pili)顺序】，在弹出的级联菜单中选择一个对齐命令。第21页/共30页第二十一页，共30页。（五）知识(zh shi)讲解与操作示范（18）6层的嵌套 在“Layer1”层中插入(ch r)嵌套层“Layer3”，嵌套层“Layer3”的属性设置要求如下：（1）层“Layer3”的“宽”设置为“420px”“高”设置为“340px”。（2

13、）层“Layer3”的“左”设置为“60px”“上”设置为“100px”。（3）层“Layer3”的可见性设置为“default”。第22页/共30页第二十二页，共30页。（五）知识讲解(jingji)与操作示范（19）插入嵌套层且设置其属性的操作过程如下：（1）选择层“Layer1”。（2）在Dreamweaver 8主窗口中，单击菜单【插入】【布局对象】【层】。（3）在层“Layer1”中会自动插入一个的层，该层命名为“Layer3”。（4）选择层“Layer3”，利用(lyng)层的“属性”面板设置层Layer3的属性。第23页/共30页第二十三页，共30页。（五）知识讲解与操作(coz

14、u)示范（20）创建嵌套层的方法：方法之一：先创建父层，然后将光标(un bio)置于父层中，在Dreamweaver 8主窗口中，单击菜单【插入】【布局对象】【层】，即可创建嵌套层。方法之二：利用“层”面板创建嵌套层，在“层”面板选中作为子层的层，按住“Ctrl”键，将选中的子层拖动到要作为父层的层上，释放鼠标即可创建嵌套层。第24页/共30页第二十四页，共30页。（五）知识(zh shi)讲解与操作示范（21）7在层中输入文本和插入对象 先用鼠标指针在层内的任何地方单击，激活层，此时光标(un bio)位于层内，然后在激活的层中输入文本或插入图像即可。第25页/共30页第二十五页，共30页

15、。（六）课堂模仿(mfng)实践 1操作要求（1）打开“课堂实践”网站文件夹“06层的布局”中的网页文档“06.html”。（2）利用(lyng)层布局网页06.html的页面。（3）绘制一个较大的层Layer0，然后在层Layer0中再绘制5个子层Layer1、Layer2、Layer3、Layer4。（4）分别层Layer1、Layer2、Layer3、Layer4中输入文字或插入图像。2效果展示 课堂实践网页06.html的浏览效果如图所示。第26页/共30页第二十六页，共30页。（六）课堂(ktng)模仿实践 3制作要点提示（1）如果要移动层，必须选择层；如果需要(xyo)在层中插入图像或输入文字，则必须激活该层，层选择状态和激活状态外观上有一定的区别。（2）层既可设置背景图像，也可以在层中插入图像。第27页/共30页第二十七页，共30页。（八）归纳(gun)总结 运用层技术来对网页进行排版，可以很方便地制作(zhzu)出精美的网页。第28页/共30页第二十八页，共30页。（九）布置(bzh)习题1 选择题2 课外拓展实践1在“学院网站”站点文件夹“06层的布局(bj)”中创建网页文档“06.html”。2利用“普通表格”和“层”相结合的方式布局(bj)网页。第29页/共30页第二十九页，共30页。感谢您的观看(gunkn)！第30页/共30页第三十页，共30页。