第7章网页布局.ppt

本章习题上机练习 练习1 使用布局表格排版网站首页 在布局模式下，通过使用布局表格设计一个网站首页的版式，效果如图所示。 练习2 使用CSS布局网页 表格＋CSS布局和DIV＋CSS布局是目前最常用的CSS布局方法，请尝试利用CSS布局一个两栏的网站首页。 第7章 网页布局 当遨游Internet时，一幅幅漂亮的网页令人流连忘返，网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切，除此之外，还有一个非常重要的因素——网页的布局。 本章介绍用Dreamweaver进行网页布局的方法和技巧，主要内容有： 利用层进行布局 利用表格＋CSS进行布局 利用DIV＋CSS进行布局 7.1 应用层布局网页 层（Layer）是一种 HTML 页面元素，它的功能强大，可以创建复杂的页面布局。层提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整层的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。 一、层的概念与作用 层是被分配了绝对位置的HTML页面元素（具体地说，是div标签或任何其他标签）。层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容，它为网页设计者提供了强大的网页控制能力。 层主要功能包括排版布局和制作动态效果。在Dreamweaver中，通过层可以对文档内容实现精确的绝对定位。因为层相当于网页内的一种容器，凡是可以放到网页上的对象几乎都可以放在层中，如：文本、图像、表格、表单等；除此之外，层中还可以包含层。因为层允许重叠，可以控制隐藏或显示其中的任何一个，通过设置行为可以使其交替出现产生动态效果。 7.1.1 层的应用 二、创建层 1.创建普通层 在设计视图中单击“插入”工具栏上的分类名称按钮，从弹出的下拉菜单中选择“布局”选项，切换到“布局”分类工具栏。然后单击“描绘层”按钮 ，在文档窗口中通过拖动来绘制一个层。 若要在文档中的特定位置插入层的代码，将插入点放入文档窗口，然后选择“插入”|“布局对象”|“层”命令。 默认状态下创建的多个层是允许重叠的，如果用户 要创建平铺式层（各个层间没有重叠之处），可选 择“层”面板中的“防止重叠”复选框。 2. 创建嵌入式层 嵌套层是指在层内部的子层，当移动层的时候，其内部的嵌套层也会随之移动。制作嵌套层有两种方式，一种是在层内部新建嵌套层，另外一种是将已经存在的层添加为另外一个层的嵌套层。  添加嵌套层方法： 1、先创建父层，将光标放在父层中，然后，选择“插入”|“布局对象”|“层”命令插入子层;或是直接拖动“常用”工具栏“布局”类中的“绘制层”按钮至已创建的层中。 2、在“层”面板中选中作为子层的层，按住【ctrl】键，将选中的层拖动到要作为父层的层上; 设置层之间的嵌套关系 在“层”面板中，可以看到子层位于父层的下方。 单击父层前的展开/折叠按钮，可以展开/折叠子层。 三、设置层参数 使用“首选参数”对话框中的“层”类别可指定新建层的默认设置。要设置层参数，应选择“编辑”|“首选参数”命令，打开“首选参数”对话框。在“分类”列表框中选择“层”选项，显示相应的选项页，然后进行所需设置。 四、 层HTML代码 当在网页文档中创建层时，Dreamweaver 将在代码视图中自动插入该层对应的HTML代码。当在 Dreamweaver 中使用工具栏上的【绘制层】按钮 绘制一个层时，在设计视图中，该层会显示在绘制它的当前位置；但在代码视图中，Dreamweaver将在页开头且紧接在body标签之后插入该层的div标签代码，在head部位，插入层的样式代码，如图所示。 层CSS样式 层标签 图 　用绘制层的方法时层HTML代码的位置 五、设置层的属性 1.设置单个层属性 当选择一个层后，可以在属性面板中查看和设置层的各种属性。选择一个层后，文档窗口的底部会显示单个层的属性面板。更改属性后的属效果。 左和上（左侧和顶部）：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 z轴：当层重叠时，用以设置层之间的前后排列顺序。值越大，显示越靠前。 可见性：指定该层最初是否是可见的。 　　　default(默认)：不指定可见性属性，大多浏览器都会默认为“继承”。 　　　inherit(继承)：表示使用该层父级的可见性属性。 　　　visible(可见)：表示显示该层的内容，而不管父级的值是什么。 　　　hidden(隐藏)：表示隐藏层的内容，而不管父级的值是什么。 溢出:当层的内容超过层的指定大小时，设定如何在浏览器中显示层。 　　　 visible(可见)：指定在层中显示额外的内容，实际上，该层会通过延伸来容纳额外的内容。 　　　hidden(隐