网页设计与制作14-网页的布局设计课件.pptx

1、第十四单元 网页的布局设计目前流行的网页布局方法包括3中：层、表格和框架。随着技术不断的发展，层布局发展成为主流(div+css)，表格作为层内的局部布局的常用方法，而框架通常会在特定的应用程序中用于布局来用，在本单元将介绍三种常用布局方式的设计方法和内容，通过本单元的学习，掌握布局的方法和使用技巧，能够完成网页的布局任务。第十四单元 网页的布局设计层布局14.1表格布局14.2框架布局14.3本章小结14.4第十四单元 网页的布局设计14.1 层布局14.1.1层的概念图层作为一种网页元素定位技术，其最大的特点是可以把HTML元素放置在不同的图层中，通过对图层的操作可以实现对图层中元素的位置

2、、显示或隐藏以及显示顺序等参数进行控制。而且它还能使网页内容重叠，甚至可以利用它轻松制作出动态效果。所以说，它是一种比表格还要好的网页定位工具。在Web页面中，图层往往是作为容器而存在的，利用图层可以非常灵活地放置内容。第十四单元 网页的布局设计14.1.2 插入图层在Dreamweaver中，可通过菜单插入图层，也可以通过插入工具中的常用子面板来插入层(div)。插入方法：1、把光标置于文档窗口中想要插入图层的位置，然后选择【插入】|【层】菜单命令，第十四单元 网页的布局设计2、用鼠标直接将“插入”面板的“常用”子面板的“div”图标按钮 拖至文档窗口上想要插入图层的地方，松开左键即可。上述

3、两种方法都可以弹出层的插入对话框如图14-1所示。第十四单元 网页的布局设计在插入div对话框中请添加层对应的id或者class。为了能够实现div+css的布局，id或者class是层的一个必要属性，若该层仅仅是一个普通层，则不需要设置属性。若未定义该层的样式信息，可点击“新建CSS规则”按钮来增加样式表，并与该层绑定。第十四单元 网页的布局设计14.1.3 实现div+css网页布局div+css布局的最大难点并不是层，而是CSS的规则的掌握，通过浮动、定位和大小的设置来改变div层的块模型，来实现对网页的布局。例题说明：网页的结构包括顶端的广告标题，广告标题下面左侧为公司的联系方式，右侧

4、为公司产品，底部为公司的地址和邮政编码，请实现对该网页的布局。从要求来看，整个网页是上中下结构，并在中部分了左右两块。第十四单元 网页的布局设计实现步骤如下：1、使用Dreamweaver新建网站，在Dreamweaver文件面板，鼠标右击，在弹出的上下文菜单中新建文件，命名为“index.html”。如图14-2所示第十四单元 网页的布局设计2、打开CSS设计器，为“index.html”文件创建新的CSS文件，如图14-3所示。在弹出的“创建新的CSS文件”对话框中保存文件名为style1.css,如图14-4所示。第十四单元 网页的布局设计3、通过菜单【窗口】|【插入】展开“插入”面板，

5、在“插入”面板中选择“常用”或者“结构”都会具有DIV的工具，如图14-5所示。点击“插入”面板的DIV按钮，在弹出的“插入div”对话框中设置ID为“header”,如图14-6所示。第十四单元 网页的布局设计点击确定完成顶端广告层的添加，在层里写入文字“这是广告”。此时切换到“拆分”视图的效果如图14-7所示。第十四单元 网页的布局设计4、继续插入图层，此次图层id属性设置为“center”。5、鼠标停在图层“center”中，再次点击插入层按钮，在图层“center”中添加2个子层，并将两个子层的class属性分别命名为：“c_left”和“c_right”。6、为了防止后面的层浮动到c

6、enter右侧，确保class为“c_right”的图层右侧不能再出现其它的内容，则插入一个图层，用于清除浮动，命名class=”clear”。第十四单元 网页的布局设计7、光标停在图层“center”图层之外，插入新图层，名设置id属性为“footer”。此时在网页中出现了四个块，相应的拆分视图如图14-8所示。第十四单元 网页的布局设计8、展开CSS设计器，进行全局配置，点击CSS设计器的选择器部分的“加号”，增加如下多个标签的全局配置。body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h

7、3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea 第十四单元 网页的布局设计设置属性值如下：margin:0;/*边界为0*/padding:0; /*填充为0*/font-weight: normal;/*设置粗度默认标准*/font-style: normal;/*字体样式默认*/font-size: 100%;/*字体大小按照默认100%比例显示*/font-family: inherit;/*字体继承父容器*/第十四单元 网页的布局

8、设计此时展开CSS文件的代码如图14-9所示。第十四单元 网页的布局设计9、依次配置其它常用的标签，全局配置的完整代码如图14-10所示。第十四单元 网页的布局设计10、点击网页的id为”header”的图层后，点击在CSS设计器选择器上的“加号”，自动会创建“#header”规则，如图14-11所示。完成属性的设置如下：#header height:68px; border:1px solid #CCCCCC; 第十四单元 网页的布局设计11、参考步骤10完成其它图层的样式规则添加，完整的CSS代码如图14-12所示。第十四单元 网页的布局设计12、点击F12来预览网页效果如图14-13所示

9、。第十四单元 网页的布局设计查看网页运行的效果发现“header”和“footer”层都是100%显示，“center”的两个子层则按照宽度设置来显示。13、改进代码，请将#header ,#centers ,#footer选择器的width设置为740px,后检查运行效果如图14-14所示。修改的代码如下：第十四单元 网页的布局设计#header ,#centers ,#footer width:740px; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;第十四单元 网页的布局设计14

10、.2 表格布局14.2.1 创建表格表格包括三部分：行：表格的横向部分。列：表格的纵向部分。单元格：表格的行列交叉部分。在单元格中，单元格的内容和边框之间的距离叫做单元格填充。单元格和单元格之间的距离叫做单元格间距。整张表格四周边缘叫做表格边框。第十四单元 网页的布局设计插入表格的方法如下：选择【插入】|【表格】菜单命令，出现如图14-15所示的“表格”对话框。第十四单元 网页的布局设计创建完空表格后，可以像在表格外部添加文本和图像那样在表格单元格中添加文本和图像。将鼠标指针移入需要插入文本或图像的单元格，插入内容，效果如图14-16所示。第十四单元 网页的布局设计14.2.2选定表格创建表格

11、后，通过选定来完成设置属性、移动、复制及删除等操作。可以一次选定整个表格、一行、一列或几个连续的单元格，还可以选择表格中多个不连续的单元格并修改这些单元格的属性，但不能对它们进行移动、复制或删除等操作。1、若要选定整个表格，单击要选定表格的单元格，然后选择【修改】|【表格】|【选择表格】菜单命令。被选定的表格的下边缘和右边缘将出现选择控制点，如图14-17所示，也可通过鼠标右键的菜单操作实现第十四单元 网页的布局设计2、若要选择行或列，将鼠标指针指向一行的左边框上，或者一列的上边框。当鼠标指针变为选定箭头时 ，单击以选择行或列，如图14-18所示。第十四单元 网页的布局设计3、若要选择连续的单

12、元格，单击一个单元格，然后按住 Shift 键单击另一个单元格，效果如图14-19所示。若要选择不相邻的单元格，按住Ctrl键的同时，单击要选择的单元格，如图14-20所示。第十四单元 网页的布局设计14.2.3 设置表格属性将表格插入到网页中，为了使所创建的表格更加美观、醒目，需要对表格的属性进行设置。在“文档”窗口中对表格进行格式设置时，可以设置整个表格或表格中所选定的行、列或者某几个单元格的属性。在表格中多次设置同一种属性时（如背景颜色），则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。 第十四单元 网页的布局设计当选定了表格后，“属性”面板允许查看和更改表格属性，如图

13、14-21所示。如果“属性”面板未展开，则单击右下角的扩展箭头查看所有属性。第十四单元 网页的布局设计表格的主要属性：l行和cols：是指表格中行和列的数目。l宽和高：是指表格的宽度和高度。在设定表格的宽度和高度时，有两种单位：一种为百分比；一种为像素。当选择百分比时，指定的为相对的宽度和高度。会随着浏览器窗口的宽度和高度，来自动调整大小；当选择单位为像素时，指定的为绝对的宽度和高度，大小不随着浏览器窗口的宽度和高度而变化。第十四单元 网页的布局设计l Cellpadding(边距)：是单元格内容和单元格边界之间的空白距离。 lCellSpace(间距)：是相邻的表格单元格之间的像素距离。 A

14、lign(对齐)：确定表格相对于同一段落中其他元素（例如文本或图像）的显示位置。lBorder(边框)：指定表格边框的宽度，以像素为单位。 lClass：设置表格样式表第十四单元 网页的布局设计14.2.4设置行、列与单元格属性当选择了一个或一组单元格时，属性面板允许查看和更改单元格属性，如图14-22所示。第十四单元 网页的布局设计下面介绍一下表格的单元格主要属性：l水平：指定单元格、行或列内容的水平对齐方式。l垂直：指定单元格、行或列内容的垂直对齐方式。 l宽和高：是以像素为单位或按占整个表格宽度或高度百分比计算的所选单元格的宽度和高度。若要指定百分比，请在值后面使用百分比符号%。l背景颜

15、色：是使用颜色选择器来选择单元格、列或行的背景颜色。 第十四单元 网页的布局设计除属性面板列出的单元格属性外，其它的表格操作都集中在表格的右键菜单当中，当选中表格单元格或者若干单元格后，鼠标右击，在弹出的上下文菜单选择【表格】，将展开表格的常用操作菜单，如图14-23所示。第十四单元 网页的布局设计在菜单所示的项中可以实现选中表格、合并拆分单元格，以及插入行、列等多种操作命令。第十四单元 网页的布局设计14.3 框架布局14.3.1 框架的作用框架的作用是把浏览器划分成几个区域，每个区域内可以分别载入不同的文件内容。使用框架可以使页面的结构更加合理、清晰而丰富多采。基于框架的页面用作于单一页面

16、时，每个框架都包含单一的HTML文档，该文档包含完全独立的内容和独立的滚动条。框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示页面的 URL。框架集文件不在浏览器中显示，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。框架最常见的用法就是实现页面导航第十四单元 网页的布局设计例如，一个框架布局可能由 3 个框架组成：一个框架横放在顶部，其中包含 Web 站点的徽标和标题；一个较窄的框架位于左侧，其中包含导航条；一个大框架占据了页面的右侧其余部分，其中包含主要内容。这些框架中的每一个都是一个独立的 HTML页面

17、。在该示例中，当访问者浏览站点时，在顶部框架中显示的文档永远不更改。左侧框架导航条包含链接；单击其中某一链接会更改主要内容框架的内容，但左侧框架本身的内容保持静态。无论访问者在左侧单击了哪一个链接，右侧主要内容框架都会显示适当的文档。 第十四单元 网页的布局设计但是，框架的设计可能比较复杂；并且在许多情况下，可以创建没有框架的网页，它可以达到使用一组框架所能达到的许多同样效果。例如，如果想让导航条显示在页面的左侧，则既可以用一组框架代替页面，也可以只是在站点中的每一页上包含该导航条。第十四单元 网页的布局设计使用框架具有以下优点： l访问者的浏览器不需要为每个页面重新加载与导航相关的图形。l每

18、个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。（例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。）第十四单元 网页的布局设计使用框架具有以下缺点： l可能难以实现不同框架中各元素的精确图形对齐。l对导航进行测试可能很耗时间。l各个带有框架的页面的 URL 不显示在浏览器中，因此访问者可能难以将特定页面设为书签（除非提供了服务器代码，允许访问者加载特定页面的带框架版本。）第十四单元 网页的布局设计14.3.2 框架集实现在Dreamweaver CC实现框架已经无法使用图形化

19、方式进行创建，建议使用HTML方式创建。制作框架页面的步骤：1、编写所有子框架页面2、编写主框架页面3、在主框架页面中设定子框架名称4、如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含标签的第十四单元 网页的布局设计框架集基本代码格式如下：您的浏览器不支持框架，请考虑升级您的浏览器！第十四单元 网页的布局设计框架集定义使用标签，包括2个重要属性：rows和colsRows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可以使用相对大小或以百分比为单位。第十四单元 网页的布局设计当框架代码为： 表示将浏览器划分为纵向3块区域，第一块占

20、20%，第二块占60%，第三块占其它剩余空间，框架如图14-24所示。第十四单元 网页的布局设计若代码改为： 则浏览器将分成左右2部分，如图14-25 所示。第十四单元 网页的布局设计若混合行列进行框架划分可参考如下代码：FRAMESET COLS=20%,* 代码功能：首先将浏览器分为左右2部分，左部分占20%，右部占80%,划分后又将原右部空间继续纵向划分成2部分，上部分占20%，下部分占80%，框架布局如图14-26所示。第十四单元 网页的布局设计其它在框架集中的属性如下：1、bordercolor：边框颜色2、frameborder：是否显示边框，可设置yes,no或者1，03、fra

21、mespacing：框架宽度第十四单元 网页的布局设计14.3.3 框架的实现Frame标签代表框架集中的一个框架，可以指向任何一个独立的网页文件，设置src属性可指向某一个网页，name属性则为了标识该框架的区域，以便超链接可以连接到该位置。其它重要属性：Frameborder：是否显示框架边框。0不显示，1显示。Scrolling：是否显示滚动条。yes, no, autoNoresize：框架在浏览器里不可以被调整大小。MarginWidth：框架的左右边缘宽度。MarginHeight：框架上下边缘宽度。第十四单元 网页的布局设计例题：实现框架的布局。实现效果如图14-27所示。第十四

22、单元 网页的布局设计当点击左侧的链接文字，在右侧框架内将打开对应的超链接文件，例如点击photoshop cc则打开对应的页面效果如图14-28所示。第十四单元 网页的布局设计实现步骤如下：1、创建网站，并新建4个文件，分别是frameset.html、left.html、right1.html、right2.html、right3.html，并在right1.html、right2.html、right3.html中分别插入标题和文字，如图14-29所示。第十四单元 网页的布局设计2、打开frameset.html文件，并切换至代码视图， 删除掉body标签，并添加如下代码： 第十四单元 网

23、页的布局设计3、打开left.html,并添加三行文字，如图14-30所示第十四单元 网页的布局设计4、选中Dreamweaver CC文本，在属性面板的HTML子面板中选择超链接到right1.html,目标手写为”right”,与在frameset.html填写的右侧框架name属性一致。如图14-31所示。第十四单元 网页的布局设计5、依次将另外2行文字分别链接到right2.html和right3.html。保存。6、打开frameset.html按F12运行查看框架的最终效果，如图14-27所示。第十四单元 网页的布局设计14.4 章后总结本单元主要介绍了三种流行的布局方式的实现过程，在布局设计时通常以DIV和CSS来实现，表格和框架已经逐渐不适合当前网页设计的布局要求，但在某些地方仍然使用，所以三种布局的方式都要熟练掌握，灵活机动的运用不同的方式解决不同的设计要求。