第5章网页布局.ppt

《第5章网页布局.ppt》由会员分享，可在线阅读，更多相关《第5章网页布局.ppt（49页珍藏版）》请在三一文库上搜索。

1、第5章 网页布局,开 始,网站的设计，不仅体现在具体内容与细节的设计制作上，也需要对框架进行整体的把握。在进行网站设计时，需要对网站的版面与布局进行一个整体性的规划。,本章主要内容：,网页布局类型 用表格进行网页布局 框架 用CSS进行网页布局,5.1.1 “国”字型 5.1.2 “厂”字型 5.1.3 “框架”型 5.1.4 “封面”型,返回本章首页,5.1 网页布局类型述,在网页布局设计上，根据用户的使用习惯与设计经验，已经形成了一些常见的布局方式。网页布局方式主要从用户使用的方便性、界面大方美观、网页特色等方面考虑。,5.1.1 “国”字型,返回本节,“国”字型布局是一种常见的网页布局类

2、型。这种布局类型是在网页的上下各设计一个通幅广告条，左面是主菜单或导航条，右面是友情链接或其他链接的内容，中间是网页的主要内容。这样布局可以充分利用网页的版面，信息量大。“国”字型布局效果如图5-1所示。,图5-1 “国”字型布局,5.1.2 “厂”字型,返回本节,“厂”字型布局是在网页的上部放置Logo和Banner，在网页的左边放置导航条与其他链接，在网页的右下方放置网页的主要内容。这种布局的好处是网页的各个部分布局非常集中，可以在一个区域突出网页的重要内容。网页中的内容主次分明，很有层次感。“厂”字型布局效果如图5-2所示。,图5-2 “厂”字型布局,5.1.3 “框架”型,返回本节,“

3、框架”型布局是指以框架网页的形式实现网页的布局。框架网页的功能是将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。这样框架就可以实现网页的布局。 与其他的网页布局类型不同的是，其他的网页布局都是在一个网页上实现。而框架布局是在几个不同的网页上实现布局，然后通过框架网页集合在一起。“框架”型布局效果如图5-3所示。,图5-3 “框架”型布局,5.1.4 “封面”型,返回本节,“封面”型布局一般出现在网站的首页，页面上通常是一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”链接，甚至直接在首页的图片上设计链接。“封面”型布局的网页结构常常很简单，需要使用精美的封

4、面效果来体现网页的内容。“封面”型布局效果如图5-4所示。,图5-4 “封面”型布局,5.2.1 在页面中插入表格 5.2.2 设置表格属性 5.2.3 表格标签 5.2.4 在普通模式下用表格布局网页 5.2.5 在布局模式下用表格布局网页,返回本章首页,5.2 用表格进行网页布局,表格可以用来控制页面布局，通过在表格里放置内容，用户能够把对象放置到页面的指定位置，创建更复杂的视觉结构。表格是一种可以让设计人员初步控制站点布局的HTML元素。,5.2.1 在页面中插入表格,返回本节,新建一个HTML文档。执行【插入记录】|【表格】命令，弹出【表格】对话框，如图5-5所示。这里插入一个4行3列

5、的表格，表格宽度为500像素，边框粗细为1像素，单元格边距和间距也都为0，在“标题”文本框中输入文字“一个简单的表格”。单击【确定】按钮，页面中出现一个表格。,图5-5 【表格】对话框,5.2.1 在页面中插入表格,返回本节,1表格宽度 表格宽度有百分比和像素两种单位可进行设置。以百分比为单位进行设置在浏览网页时，按照网页浏览区的宽度为基准，而以像素为单位进行设置则是表格的实际宽度，在不同的情况下需要使用不同的单位，例如，在表格嵌套时多以百分比为单位。 2边框粗细 边框粗细是设置表格边框的大小，在插入表格时，表格边框的默认值为1像素，如果把表格边框的值设置为0，表格的边框则为虚线，如图5-7所

6、示，这样，在浏览网页时就看不到表格的边框了。如果把表格边框的值设置为5，那表格的边框就变得宽了许多，如图5-8所示。,图5-7 边框大小为0,图5-8 边框大小为5,5.2.1 在页面中插入表格,返回本节,3单元格边距 单元格边距是表示单元格中的内容与边框距离的大小，如果单元格边距为默认值，其单元格中的内容与边框的距离很近，如图5-9所示。如果把单元格的边距设为8，在单元格中内容与边框之间就存在了一定的距离，如图5-10所示。,图5-9 单元格边距为默认值,图5-10 单元格边距为8,4单元格间距 单元格边距和单元格间距是两个不同的概念，单元格间距是指单元格与单元格、单元格与表格边框的距离。两

7、者的单位都是像素，在默认情况下，边距的值为1，间距的值为2。在如图5-11所示中，就是把单元格间距设置为8后的表格外观。,图5-11 单元格间距为8,5.2.1 在页面中插入表格,返回本节,5页眉设置 页眉设置其实就是为表格选择一个加粗文字的标题栏，这样对于要求标题以默认粗体显示的表格，省去了每次手工执行加粗动作，提高了工作效率。可将页眉设置为无、左部、顶部，或者左部和顶部同时设置。如图5-12和图5-13就是分别将页眉设置在左部和顶部时的效果。,图5-12 页眉设在左部,图5-13 页眉设在顶部,6辅助功能 辅助功能的作用主要是为表格和表格的内容提供一些简单的文本描述。可以在“标题”文本框中

8、为表格设置一个标题，在“对齐标题”下拉列表中可以选择一种标题的对齐方式。在“摘要”文本域中可以输入对所创建表格的简单描述信息。,5.2.2 设置表格属性,返回本节,在页面中插入表格以后，可以在“属性”面板中对表格进行设置，除了某些属性和“表格”对话框中的设置一样外，还可以设置表格的背景颜色、边框颜色和对齐方式等属性。,图5-14 表格属性面板,下面分别对表格中的属性进行说明。 （1）表格Id：指的是表格名称，可以在这个选项栏里输入一个名称来为表格命名。 （2）行和列：可以重新设置表格中行和列的数量。 （3）宽：设定表格的宽度。宽度可以在“表格”对话框中进行设置；单位都有“百分比”和“像素”两种

9、。一般情况下，不需要设置表格高度。 （4）填充：设置单元格内容与单元格边框之间的像素数。 （5）间距：设置相邻的表格单元格之间的像素数。 （6）对齐：可以设定表格的对齐方式。表格有3种对齐方式，分别为“左对齐”、“居中对齐”和“右对齐”。单击下拉菜单按钮，可以在下拉菜单中选择对齐方式。如果保持默认的话，表格会居左对齐。,5.2.2 设置表格属性,返回本节,（7）边框：指定表格边框的宽度，和在“表格”对话框中的设置一样，它的单位为像素。如果没有明确指定边框的数值，则大多数浏览器按边框设置为1像素显示表格。如果要浏览器不显示表格边框，可以将“边框”数值设置为0。 （8）清除列宽和清除行高：这两个按

10、钮可以将表格中所有明确指定的行高或列宽删除。 （9）将表格宽度转换成像素和将表格宽度转换成百分比：将表格中每列的宽度设置为以像素为单位的当前宽度，还将整个表格的宽度设置为以像素为单位的当前宽度。将表格中每列的宽度或高度设置为按占“文档”窗口宽度百分比表示的当前宽度，还将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的当前宽度。 （10）背景颜色：此选项可以设置表格的背景颜色，单击背景颜色后的按钮，可以打开调色板，使用吸管工具直接选择颜色即可，也可以直接在文本框中输入颜色代码值。 （11）边框颜色：用来设定表格边框的颜色。选中表格以后单击颜色按钮，就可以和设置背景颜色一样选择颜色了。当设定边

11、框颜色以后，在表格内所有单元格的边框都会变为所设定的颜色。 （12）背景图像：设置表格背景图像，可以将一张图片平铺到表格中。单击“背景图像”栏后边的黄色文件夹图标，在弹出的“选择图像源文件”窗口中找到图片即可。,5.2.3 表格标签,返回本节,表格的相关标签有、等，分别表示表格、行、列。 1标签 标签表示一个表格的开始。每一个标签需要一个标签关闭。相关的属性如下所述。 width：表格的宽度。 height：表格的高度。 border：表格边框的线宽。 cellpaddinf：表格边框之间的填充宽度。 cellspacing：表格边框之间的间距。 bordercolor：边框的颜色。 back

12、ground：表格背景的图片。 bgcolor：表格背景的颜色。 align：表格的对齐方式，可以是left、center、right等值。 例如，下面是一个表格的代码： 这些代码表示开始一个表格，宽高像素为500200像素，边框宽度为2像素，边框之间的填充为1像素，外边框和内边框的间距为2像素，边框颜色为红色，背景颜色为蓝色，居中对齐。 专家点拨：表格的宽度值和高度值如果是一个数字，比如，则尺寸单位为像素。如果是一个百分比，比如，则尺寸单位为百分比，表示宽度或高度占上一级元素的百分比。,5.2.4 在普通模式下用表格布局网页,返回本节,表格是最常用的网页布局实现方式。在表格中，很容易实现表格

13、行和列的大小操作，从而方便地实现网页布局。本节通过实例介绍利用表格进行网页布局的方法。 网页布局实例效果如图5-20。这个页面是由4个表格组成的，某些单元格中又嵌套有表格。布局示意图如图5-21示。表1为网页的顶部，包括网站的Logo及Banner；表2是网站导航条；表3是页面的主体区，包括左侧的文章列表，右侧的其他链接和下部的搜索条，其中分别嵌套有小表格；表4是网站的底部，是网站的版权栏。,图5-20格布局实例效果,5.2.4 在普通模式下用表格布局网页,返回本节,图5-21布局示意图,制作步骤： 1创建第一个表格 2创建第二个表格 3创建第三个表格 4创建第四个表格,5.2.5 在布局模式

14、下用表格布局网页,返回本节,为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。“布局”模式的工作方式是，用户可以在页面上绘制表格，然后把文本或图形放置在表格里。在布局模式下创建表格具有更大的灵活性。可以根据实现规划好的网页排版方式，画出需要的表格和单元格。然后再根据具体内容进行适当的编辑和调整，这样大大提高了网页布局的效率。 下面通过一个网页布局实例介绍在“布局”模式下布局网页的方法。实例效果如图5-27示。网页分成3部分来完成布局，第一部分是上面的顶部信息，包括搜索条、Banner、导航栏等；第二部分是网页的主体部分；第三部分是底部信息。,制作步骤: 1切换到表格

15、布局模式 2布局顶部部分 3布局主体部分 4布局网页底部,图5-27布局表格布局的网页,5.3.1 用框架布局页面 5.3.2 创建框架和框架集 5.3.3 设置框架及框架集属性 5.3.4 保存框架和框架集 5.3.5 控制带有链接的框架内容,返回本章首页,5.3 框架,框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，通过导航条的链接更改主要内容框架的内容，从而达到网页布局的相对统一。一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。,5.3.1 用框架

16、布局页面,返回本节,要制作框架网页，就要建立框架集。框架集是组织页面内容的常见方法，通过框架集可以将网页的内容组织到相互独立的HTML页面内，相对固定的内容（比如导航栏、标题栏）和经常变动的内容分别以不同的文件保存将会大大提高网页设计和维护的效率。 本节制作一个简单的框架网页，先对框架集和框架等概念有一个概括的认识。 1建立框架集 2保存框架和框架集 3理解框架集HTML代码,5.3.1 用框架布局页面,返回本节,打开文件5.3.1.html，切换到代码视图，如图5-49所示。为了便于阅读，图中的代码进行了折叠。定义框架集的HTML标签是，含有这对标签的源代码存放在框架集文件中。,图5-49

17、框架集源代码,中含有标签，每个标签定义一个框架，并为框架设置名称、源文件等属性，如图5-50所示。,图5-50 标签,5.3.2 创建框架和框架集,返回本节,每一个框架都是一个独立的 HTML 页面，它是浏览器窗口中的一个区域，可以显示与浏览器窗口的其余部分中所显示内容无关的HTML 文档。通过框架集的使用，这些框架能够很好的在一起运作。所谓框架集就是指定义网页结构与属性的HTML页面，这其中包含了显示在页面中框架的数目，框架的尺寸，装入框架的页面的来源，以及其他一些可定义的属性的相关信息。框架集页面不会在浏览器中显示（noframes 部分除外），它只是向浏览器提供如何显示一组框架以及在这些

18、框架中应显示哪些文档的有关信息。 在 Dreamweaver 中有两种创建框架集的方法：既可以从若干预定义的框架集中选择，也可以自己设计框架集。 1使用预定义的框架集 1）创建新的空预定义框架集 2）在现在有文档中创建预定义的框架集 2自己设计框架集 3拆分或删除框架 4创建嵌套框架,5.3.3 设置框架及框架集属性,返回本节,框架和框架集是一些独立的HTML 文档。可以通过设置某些框架或框架集的属性来对框架或框架集进行修改。 1选取要进行更改的框架和框架集 2设置框架属性 选取框架，打开框架的【属性】面板。如图5-55所示。,图5-55 框架属性面板,框架名称：为当前框架命名（为了便于确定超

19、链接应给框架命名）。 源文件：确定框架的源文档。可以直接在文本框中输入文件路径，也可以单击文件夹图标查找并选取文件。还可以通过将插入点放在框架内并执行【文件】|【在框架中打开】命令来打开文件,5.3.3 设置框架及框架集属性,返回本节,边框：用来控制当前框架有无边框。选项有“是”（显示边框）、“否”（隐藏边框）和“默认值”。大多数浏览器默认为显示边框，除非父框架集已将“边框”设置为“否”。只有当共享该边框的所有框架都将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否”并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏的。 滚动：确定当框架内的内容显示不下的时候是否出

20、现滚动条。选项有“是”、“否”、“自动”和“默认”。“是”表示显示滚动条，“否”表示不显示滚动条，“自动”则是自动显示，也就是当该框架内的内容超过当前屏幕上下或左右边界时，滚动条才会显示，否则不显示。“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。 不能调整大小：限定框架尺寸，令访问者无法通过拖动框架边框在浏览器中调整框架大小。在 Dreamweaver 中始终可以调整边框大小，该选项仅适用于在浏览器中查看框架的访问者。 边框颜色：为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。 边界宽度：设置以像素为单位的框架边框和内容之间左右边距。

21、 边界高度：设置以像素为单位的框架边框和内容之间上下边距。,5.3.3 设置框架及框架集属性,返回本节,3设置框架集属性 选取框架集，打开框架集的【属性】面板。如图5-56所示。,边框：在边框下拉列表中选择在浏览器中查看时是否显示框架边框。 边框颜色：设置边框的颜色。 边框宽度：指定框架集中所有边框的宽度。 框架大小：单击【行列选择范围】区域左侧或顶部的选项卡；然后在“值”文本框中，输入高度或宽度。 单位：包括“像素”、“百分比”和“相对”。“像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架（例如导航条）而言，此选项是最佳选择。“百分比”指定选定列或行应相当于其框架集的总

22、宽度或总高度的百分比。“相对”指定在为“像素”和“百分比”框架分配空间后，为选定列或行分配其余可用空间。,图5-56 框架集属性面板,5.3.4 保存框架和框架集,返回本节,框架集文件和与之相关的框架文件必须先保存，然后才可以在浏览器中预览该页面。当使用 Dreamweaver来创建框架文档时，每个新的框架文档都会被赋予一个临时的文件名。例如，UntitledFrameset-1.html是代表框架集页面，UntitledFrame-1.html、UntitledFrame-2.html等这种文件名是代表框架页面，一般主框架页面的文件名如Untitled-1-html等。 1保存框架集内所有的

23、文件 2保存框架中显示的文档 3要保存框架集文件,5.3.5 控制带有链接的框架内容,返回本节,要在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。链接的target属性指定在其中打开链接的内容的框架或窗口。 例如，如果导航条位于左框架，并且希望链接的材料显示在右侧的主要内容框架中，必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时，将在主框架中打开指定的内容。 设置链接的目标框架的方法如下所述。 （1）在文档中选择需要链接的文本或者对象。 （2）执行【窗口】|【属性】命令，在“属性”面板【链接】后的文本框中选择或输入要链接到的文件。 （3）在“属性”面板

24、的【目标】字段的下拉菜单中选择链接文档显示的窗口或框架。,5.3.5 控制带有链接的框架内容,返回本节,_blank：在新的窗口中打开链接文档，保留当前窗口。 _parent：在链接的父框架内显示链接文档。 _self：在当前框架打开链接文档，替换当前框架中的内容。 _top：在当前文档的最外边的框架集内打开链接文档，替换所有框架。 框架名称也出现在该菜单中：选择一个命名框架以打开该框架中链接的文档。只有在框架集内编辑文档时才显示框架名称。如果是单独打开文档窗口编辑链接时，框架名称不显示在“目标”弹出式菜单中，此时可以将目标框架的名称直接键入“目标”文本框中。,5.4.1 表格CSS布局 5.

25、4.2 DIVCSS布局,返回本章首页,5.4 用CSS进行网页布局,随着Web2.0的广泛流行，越来越多的网站工程师采用符合W3C（World Wide Web Consortium）标准的技术开发网页，这是今后网页设计的发展方向。CSS页面布局使用层叠样式表格式（而不是传统的HTML表格或框架），用于组织网页上的内容。CSS布局的基本构造块是div标签，它是一个HTML标签，在大多数情况下用作文本、图像或其它页面元素的容器。,5.4.1 表格CSS布局,返回本节,表格CSS布局是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。本节介绍表格CSS布局的方法。 传统的网页设计

26、，往往都是利用表格进行网页布局，其实标签本意并不是用来布局网页的技术，它的本意是创建表格数据，用来表现网页中具有二维关系的数据。传统网页设计时，采用大量嵌套的表格进行布局，容易将网页内容、结构和表现混杂在一起，这样设计出来的网页不利于维护和搜索引擎的搜索。 如图5-58所示，是传统布局方式的一个网页源文件代码片断。可以看出来这个网页利用了大量的嵌套表格进行布局，代码十分复杂，不利用维护和管理。,图5-58 传统的表格布局代码,5.4.1 表格CSS布局,返回本节,符合Web2.0标准的网页设计是将网页内容、结构与表现分开，做到“表现和结构相分离”。表格CSS布局可以使设计的网页结构更加合理，更

27、便于维护和更改网页的样式，但是从本质上讲，这种布局网页的方式只是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。 如图5-59所示，这是在网站首页布局中经常会看到的局部布局效果，位置一般在网页的两侧。,图5-59 布局效果,5.4.1 表格CSS布局,返回本节,针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制，示意图如图5-60所示。,图5-60 CSS样式控制表格示意图,这里定义了4个CSS类选择符：.left_tdbga

28、ll、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。,5.4.1 表格CSS布局,返回本节,下面详细介绍这个网页布局实例的制作方法。 1创建CSS文件 （1）新建一个CSS文档，保存为5.4.1.css。单击“CSS样式”面板中的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在其中进行设置，具体情况如图5-61所示。,图5-61 新建.left_tdbgall样式,单击“确定”按钮进入“.left_tdbgall的CSS规则定义”对话框，在其中选择“分类”列表框中的“背景”，设置“背景颜色”为#666666（灰色）；然后选择“

29、分类”列表框中的“方框”，设置宽和高分别为190像素和250像素，如图5-62所示。,图5-62 设置方框属性,5.4.1 表格CSS布局,返回本节,选择“分类”列表框中的“边框”，设置如图5-63所示。这样定义整个表格的边框为1个像素的绿色细实线。,图5-63 设置边框属性,完成CSS规则定义以后，单击“确定”按钮。这时文档窗口增加如下代码： /* 表格样式定义 */ .left_tdbgall height: 250px;/*定义表格宽度*/ width: 190px;/*定义单元格高度*/ background-color: #666666;/*定义背景颜色为灰色*/ border: 1

30、px solid #99CC00;/*定义表格边框为1像素绿色细线*/ ,5.4.1 表格CSS布局,返回本节,（2）按照同样的方法定义一个.left_top类选择符，这个CSS样式用来控制第一个单元格（顶部单元格）。代码如下： /* 顶部单元格背景、文字、段落格式等定义 */ .left_top color: #FFFFFF; /*定义文字颜色*/ height: 30px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ text-align: left; /*定义段落对齐方式为左对齐*/ background-image: url(img/head.png);

31、 /*定义单元格背景图像*/ background-position: center; /*定义背景图像居中*/ background-repeat: no-repeat; /*定义背景图像不重复*/ padding-left:35px; /*设置方框中填充对象的左边距为20像素*/ font-size: 12px; /*定义文字大小*/ vertical-align: middle; /*定义文字在单元格垂直方向居中对齐*/ ,5.4.1 表格CSS布局,返回本节,（3）按照同样的方法定义一个.left_mid类选择符，这个CSS样式用来控制第二个单元格（中部单元格）。代码如下： /* 中部

32、单元格背景、文字、段落格式等定义 */ .left_mid padding: 5px; /*定义填充内容的边距*/ height: 200px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ font-size: 12px; /*定义文字大小*/ background-color: #CCCCCC; /*定义背景颜色为浅灰色*/ color: #000000; /*定义文字颜色*/ list-style-position: inside; /*定义列表位置为内部*/ list-style-image: url(img/s_left.gif); /*定义列表项前面的

33、图标*/ ,5.4.1 表格CSS布局,返回本节,（4）按照同样的方法定义一个.left_end类选择符，这个CSS样式用来控制第三个单元格（底部单元格）。代码如下所示。 .left_end height:20px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ font-size: 12px; /*定义文字大小*/ color: #FFFFFF; /*定义文字颜色*/ text-align: right; /*定义段落对齐方式为左对齐*/ background-color: #99CC00; /*定义背景颜色为绿色*/ 专家点拨：Dreamweaver提供了可视

34、化的CSS定义工具，十分适合初学者使用。但是如果你对CSS已经有了相当的理解，也可以直接在代码视图中输入需要的CSS代码。利用手工输入的方式可以创建更加简洁的CSS代码。,5.4.1 表格CSS布局,返回本节,2创建网页文档 （1）新建一个网页文档，保存为5.4.1.html。在“CSS样式”面板中单击“附加样式表”按钮，弹出“链接外部样式表”对话框，设置情况如图5-64所示。,图5-64 链接外部样式表,设置完成后，单击“确定”按钮。这样“CSS样式”面板中就出现了定义好的样式，如图5-65所示。,图5-65 “CSS样式”面板,5.4.1 表格CSS布局,返回本节,（2）在“设计”视图下，

35、插入一个3行1列的表格。切换到“代码”视图，重新编辑标签内的代码，最终标签内的代码如下所示。 站内资讯 资讯列表1 资讯列表2 资讯列表3 资讯列表4 资讯列表5 更多资讯 代码编辑完成后保存文档就完成了本实例的制作。按F12键预览，网页效果如图5-59所示。 以上创建的网页文件结构合理，代码比较简洁， 网页内容和内容的表现（外观）基本是分开的，各自独立创建在不同的文件中。如果想改变网页外观，可以直接编辑5.4.1.css文件，重新设定相应的样式即可，这样也比较易于网站的维护。,5.4.2 DIVCSS布局,返回本节,利用DIVCSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小

36、不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以越来越受到网页开发者的欢迎。 1CSS布局简介 网页中的表格或者其他区块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也都具备这些属性。如图5-66所示是一个CSS盒子的示意图。,图5-66 CSS盒子模型,图5-67 CSS布局示意图,在利用DIVCSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图5-67所示是一个网站首页的CSS盒子布局示意图。,5.4.2 DIVC

37、SS布局,返回本节,从图5-67可以看出，这个网页一共设计了7个盒子。最大的盒子是body，这是一个HTML元素，是HTML网页的主体标签。在body盒子中嵌套一个#container盒子（这里的#container是一个CSS样式定义，是一个标识选择符），可以称这个盒子为页面容器。在#container盒子中有嵌套3个盒子#header、#main、#bottom，这3个盒子分别是网页的头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#main盒子中嵌套两个盒子#left、#right，这是一个两栏的页面布局，这两个盒子分别用来容纳左栏和右栏的内容。,5

38、.4.2 DIVCSS布局,返回本节,2利用DIVCSS布局 XHTML是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。 在网页文档中，利用DIV标签定义XHTML代码进行网页布局。在Dreamweaver中将“插入”工具栏切换到“布局”工具栏，可以看到一个“插入Div标签”按钮，如图5-68所示。,图5-68 “插入Div标签”按钮,5.4.2 DIVCSS布局,返回本节,下面利用DIVCSS具体创建一个盒子。 （1）新建一个网页文档，切换到“代码”视图下。可以看到标签前的几行代码是用来

39、定义网页文档XHTML类型的。当我们使用DIVCSS布局页面时，这几行代码是不能缺少的。如图5-69所示。,图5-69 新建网页文档的代码视图,5.4.2 DIVCSS布局,返回本节,（2）将光标定位在标签下面一行，单击“布局”工具栏上的“插入Div标签”按钮 ，弹出“插入Div标签”对话框，如图5-70所示。,图5-70 “插入Div标签”对话框,5.4.2 DIVCSS布局,返回本节,在这个对话框中可以选择插入div标签的位置已经控制这个div标签的CSS样式。这里不做选择，直接单击“确定”按钮。此时在body标签中间就新增了一对div标签，如图5-71所示。,图5-71 新增一对div标

40、签,这一对div标签就定义了一个盒子结构，此时切换到“设计”视频，可以看到一个虚线框。下面定义一个CSS样式，用这个CSS样式控制这个盒子的外观。,5.4.2 DIVCSS布局,返回本节,（3）在“CSS样式”面板中单击“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行如图5-72所示的设置。,图5-72 “新建CSS规则”对话框,设置完成以后单击“确定”按钮，在弹出的“#divcss1的CSS规则定义”对话框中，选择“分类”列表框中的“背景”，设置背景颜色为灰色；然后选择“分类”列表框中的“方框”，设置宽和高分别为700像素和300像素，如图5-73所示。,图5-73 设置方框,

41、5.4.2 DIVCSS布局,返回本节,选择“分类”列表框中的“边框”，设置样式为实线，宽度为1像素，颜色为红色，并设置全部相同，如图5-74所示。,图5-74 设置边框,5.4.2 DIVCSS布局,返回本节,设置完成后，单击“确定”按钮。这时的代码视图中新增了一些CSS样式定义代码，如图5-75所示。,图5-75 CSS样式代码,5.4.2 DIVCSS布局,返回本节,（4）将光标定位在div标签代码行，在标签选择器上选择标签右击，在弹出的快捷菜单中选择“设置ID”|“divcss1”，这样就将样式divcss1应用到div标签上了，这时的div标签代码行变为： 此处显示新 Div 标签的内容 切换到“设计”视图，可以看到用DIVCSS定义的一个盒子的外观，这个盒子的背景色为灰色，宽为700像素，高为300像素，边框为红色1个像素的细线。,Thank you very much !,本章到此结束， 谢谢您的光临！,结束放映,返回本章首页,