使用APDiv元素-(网页设计与制作共11章).ppt

《使用APDiv元素-(网页设计与制作共11章).ppt》由会员分享，可在线阅读，更多相关《使用APDiv元素-(网页设计与制作共11章).ppt（61页珍藏版）》请在三一办公上搜索。

1、第7章 使用AP Div元素,7.1学习任务：AP Div元素7.2 案例1 使用AP Div元素布局网页7.3 学习任务：AP Div与表格相互转换7.4 学习任务：AP Div标签7.5 学习任务：使用Div标签7.6 实训用DIV+CSS制作企业网站主页,7.1学习任务：AP Div元素,7.1.1 AP Div概述7.1.2 创建AP Div元素7.1.3 设置AP Div元素的属性7.1.4 AP元素面板7.1.5 AP Div元素的基本操作,7.1.1 AP Div概述,AP Div是指存放用DIV标记描述的HTML内容的容器，用来控制浏览器窗口中元素的位置、层次。AP Div最主

2、要的特性就是它是浮动在网页内容之上的，也就是说，可以在网页上任意改变其位置，实现对AP Div的准确定位。在Dreamweaver CS4环境下，可以利用AP Div灵活方便的进行页面布局。层作为网页的容器元素，不仅可在其中放置图像，还可以放置文字、表单、插件等网页元素。把页面元素放在AP Div中，可以控制AP Div堆叠次序、显示或隐藏等性质。将AP Div元素和时间轴相结合，可以在网页中轻松创建动画效果。提示：在Dreamweaver中，通常创建层叠样式表AP Div。层叠样式表的特点是使用和标签定位页面内容，通过CSS样式表设置AP Div的属性。具体方法将在第7章中详细介绍。,7.1

3、.2 创建AP Div元素,创建AP Div元素有以下几种方法：使用主菜单插入AP Div元素。将光标置于文档窗口中要插入AP Div的位置，选择“插入布局对象AP Div”命令，在插入点的位置插入一个AP Div元素。绘制AP Div元素。在“插入”面板中选择“布局”标签，点击后，在文档窗口要插入AP Div的位置按下鼠标左按钮拖曳出一个AP Div元素。直接拖曳“绘制AP Div”按钮到文档窗口中插入AP Div元素。在“插入”面板的“布局”标签中，按下“绘制AP Div”按钮不放，将其拖曳到文档窗口中即可创建一个AP Div元素。,提示：在“插入”面板中选择“布局”标签，点击后，在文档窗

4、口中，按住Ctrl键的同时按住鼠标左键拖曳鼠标，可以绘制多个AP Div元素。在默认情况下，每当用户创建一个新的AP Div，都会使用DIV标志它，并将标记 显示到网页左上角的位置。创建的AP Div元素如图7-1所示。若要在网页左上角显示出AP Div标记，首先选择“查看可视化助理不可见元素”命令，使“不可见元素”命令呈被选择状态，然后再选择“编辑首选参数”命令，弹出“首选参数”对话框，选择“分类”选项框中的“不可见元素”选项，选择右侧的“AP元素的锚点”复选框，如图7-2所示，单击【确定】按钮完成设置。,图7-1 创建的AP Div元素,图7-2“首选参数”对话框,7.1.3 设置AP D

5、iv元素的属性,要正确地运用AP Div元素来设计网页，必须了解AP Div元素的属性和设置方法。设置AP Div元素的属性之前，必须选中AP Div元素。选中AP Div元素的方法一般有以下几种：在文档窗口中，单击要选择的AP Div元素左上角的AP Div元素标记。在AP Div元素的任意位置单击，激活AP Div元素，再单击AP Div左上角的矩形框标记。单击AP Div元素的边框。在AP Div元素未被选中或激活情况下，按住Shift键的同时再单击AP Div元素中的任意位置。,在“AP Div元素”面板中，直接单击AP Div元素的名称。选中AP Div元素后，其对应的“属性”面板如

6、图7-3所示。AP Div“属性”面板中各项含义：CSS-P元素：为选中的AP Div元素设置名称。名称由数字或字母组成，不能用特殊字符。每个AP Div元素的名称是唯一的。左、上：分别设置AP Div元素左边界和上边界相对于页面左边界和上边界的距离，默认单位为像素（px）。也可以指定为pc（pica）、pt（点）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。,图7-3“AP Div”的属性面板,宽、高：分别设置AP Div元素高度和宽度，单位设置同“左”、“上”属性。Z轴：设置AP Div元素的堆叠次序，该值越大，则表示其在越前端显示。可见性：设置AP Div元素的显示状态。“可

7、见性”右侧下拉列表框包括四个可选项：“default（缺省）”，选中该项，则不明确指定其可见性属性，在大多数浏览器中，该AP Div会继承其父级AP Div的可见性。“inherit（继承）”，选择该项，则继承其父级AP Div的可见性。“visible（可见）”，选择该项，则显示AP Div及其中内容，而不管其父级AP Div是否可见。“hidden（隐藏）”，选择该项，则隐藏AP Div及其中内容，而不管其父级AP Div是否可见。背景图像：设置AP Div元素的背景图像。可以通过单击“文件夹”按钮选择本地文件，也可以在文本框中直接输入背景图像文件的路径确定其位置。背景颜色：设置AP Di

8、v的背景颜色，值为空表示背景为透明。,类：可以将CSS样式表应用于AP Div。溢出：设置AP Div中的内容超过其大小时的处理方法。“溢出”右侧下拉列表框中包括四个可选项：“visible（可见）”，选择该项，当AP Div中内容超过其大小时，AP Div会自动向右或者向下扩展。“hidden（隐藏）”，选择该项，当AP Div中内容超过其大小时，AP Div的大小不变，也不会出现滚动条，超出AP Div内容不被显示。“scroll（滚动）”，选择该项，无论AP Div中的内容是否超出AP Div的大小，AP Div右端和下端都会显示滚动条。“auto（自动）”，选择该项，当AP Div内容

9、超过其大小时，AP Div保持不变，在AP Div右端和下端都出现滚动条，以使其中的内容能通过拖动滚动条显示。剪辑：设置AP Div可见区域大小。在“上”、“下”、“左”、“右”文本框中，可以指定AP Div可见区域上、下、左、右端相对于AP Div边界距离。AP Div经过剪辑后，只有指定的矩形区域才是可见的。,7.1.4 AP元素面板,通过“AP元素”面板可以方便地管理网页文档中AP Div元素。在Dreamweaver中，选择“窗口AP元素”菜单命令或按F2键，均可打开“AP元素”面板，如图7-4所示。“AP元素”面板各选项含义如下：防止重叠：选中此选项，可以防止AP Div元素之间发生

10、重叠。不选中此复选框，AP元素则可以相互重叠。该选项主要用在AP Div和表格相互转换时，当将AP Div转换为表格，为防止浏览器不兼容，选中该选项，以防止AP元素相互重叠。,图7-4“AP元素”面板,图标：如果某一个AP 元素左侧有该图标，表示该AP 元素可见，如果图标变成，则不可见。如果没有该图标，表示该层继承其父级AP Div元素的可见性。如果没有父级AP Div元素，则父级AP Div元素可以看成其本身，通常情况下，这意味着是可见的。可以通过单击图标控制该AP Div的可见属性。ID：该属性用来显示和更改AP Div元素的名称。通过双击ID下面对应的AP元素默认名称来更改AP元素的名称

11、。Z：该属性见“属性”面板相关设置。可以通过双击AP Div元素的Z值属性来更改其值。,7.1.5 AP Div元素的基本操作,1调整AP Div的大小调整AP Div时，既可以单独调整一个AP Div，也可以同时调整多个AP Div。（1）调整一个AP Div的大小选中一个AP Div后，执行下列操作之一，可调整一个AP Div的大小：应用鼠标拖曳方式。选中AP Div，拖动四周的任何调整手柄。应用键盘方式。选中AP Div，按住Ctrl+方向键，每次调整一个像素大小。应用网络靠齐方式。选中AP Div，同时按住Ctrl+Shift+方向键，可按网格靠齐增量来调整大小。,应用修改属性值方式。

12、在“属性”面板中，修改“宽”和“高”选项值来调整AP Div的大小（2）同时调整多个AP Div的大小在“文档”窗口中按住Shift键，依次选中两个或多个AP Div，执行以下操作之一，可同时调整多个AP Div的大小：应用菜单命令。选择“修改排列顺序设成宽度（或高度）相同”命令。应用快捷键。按下组合键Ctrl+Shift+7或者Ctrl+Shift+9，则以当前AP Div为标准同时调整多个层的宽度或高度。2更改AP Div的堆叠顺序对网页进行排版时，常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果。使用AP元素“属性”面板或“AP”面板可以改变AP元素的堆叠顺序。AP元素的显

13、示顺序与Z轴值的顺序一致。Z值越大，AP元素的位置越靠上。在“AP元素”控制面板中按照堆叠顺序排列AP元素的名称，如图7-5所示。,图7-5 AP AP元素的显示顺序与Z轴值的顺序一致,（1）使用“AP”面板改变层的堆叠顺序打开“AP”面板，在“AP”面板中执行下列操作之一，改变AP元素的堆叠顺序。选中指定的AP元素名，将其拖动到所需的堆叠顺序处，然后释放鼠标。在“Z”列中单击需要修改的AP元素编号，如果要上移则输入一个比当前值更大的数值，如果要下移则输入一个比当前值更小的数值。（2）使用AP元素“属性”面板改变层的堆叠顺序。在“AP元素”面板或文档窗口中选择一个AP元素，在其“属性”面板的“

14、Z轴”文本框中输入一个更高或更低的编号，使当前AP元素沿着堆叠顺序向上或向下移动。3嵌套AP元素所谓嵌套AP Div，是指在一个AP Div元素中创建子AP Div元素。使用嵌套AP Div的好处是能确保子AP Div永远定位于父级AP Div上方。嵌套通常用于将AP元素组织在一起。,（1）创建嵌套AP元素使用下列方法之一，创建嵌套AP元素：应用菜单命令。将插入点放在现有AP元素中，选择“插入布局对象AP Div”命令。应用按钮拖曳。拖曳“插入”面板“布局”选项卡中的“绘制AP Div”按钮，然后将其放在现有AP元素中。应用按钮绘制。选择“编辑首选参数”命令，启用“首选参数”对话框，在“分类”

15、选项列表中选择“AP元素”选项，在右侧选择“在AP Div中创建以后嵌套”复选框，单击【确定】按钮。单击“插入”面板“布局”标签中的“绘制AP Div”按钮，在现有AP元素中，按住Ctrl键的同时拖曳鼠标绘制一个嵌套AP元素。创建的嵌套AP元素如图7-6所示。（2）将现有AP元素嵌套在另一个AP元素中使用“AP元素”控制面板，将现有AP元素嵌套在另一个AP元,素中的具体操作步骤如下：1）选择“窗口AP元素”命令，启用“AP元素”控制面板。2）在“AP元素”控制面板中选择一个AP元素，然后按住Ctrl键的同时拖曳鼠标，将其移动到“AP元素”控制面板的目标AP元素上，当目标AP元素的名称突出显示时

16、，松开鼠标左健，即可完成操作。本例将apDiv1拖曳到目标apDiv2中，效果如图7-7所示。提示：如果已启用“AP元素”控制面板中的“防止重叠”选项，那么在移动AP元素时将无法使AP元素相互重叠。,图7-6 创建嵌套的AP元素 图7-7将apDiv1嵌套在apDiv2中,4对齐AP元素使用AP元素对齐操作可将一个或多个AP元素与最后一个被选中AP元素的边界对齐。当对选定AP元素进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移动。为了避免出现这种情况，不要用嵌套层。对齐两个或更多个AP元素有以下几种方法。（1）应用菜单命令对齐AP元素在文档窗口中，按住Shift键，依次选中需要对齐

17、的多个AP元素，然后选择“修改排列顺序”命令，在其子菜单中选择一种对齐方式：左对齐：以最后一个被选中AP元素的左侧为基准对齐。右对齐：以最后一个被选中AP元素的右侧为基准对齐。上对齐：以最后一个被选中AP元素的顶部为基准对齐。对齐下缘：以最后一个被选中AP元素的底部为基准对齐。,（2）应用“属性”面板对齐层选中需要对齐的多个AP元素，在“属性”面板的“上”或“左”选项中输入具体数据，则以多个层的上边线或左边线相对于页面顶部或左侧的位置来对齐。提示：在移动网页元素时，可以让其自动靠齐到网格，还可以通过指定网格设置来更改网格或控制靠齐行为。将AP元素靠齐到网格的具体方法：选择“查看网格设置显示网格

18、”命令，启用网格显示。选择“查看网格设置靠齐到网格”命令，选中AP元素并拖动，当AP元素靠近网格线一定距离时，该AP元素将自动靠齐到最近的网格。,7.2 案例1 使用AP Div元素布局网页,利用AP Div制作的图文混排网页效果如图7-8所示。,图7-8 用AP Div元素布局网页效果图,本实例在文档中创建四个AP Div元素，为其中的一个元素添加图像，为其他三个元素添加文字。通过对两个嵌套的AP Div元素属性设置，实现文字的阴影特效。具体步骤如下：1）在Dreamweaver CS4中新建一个空白HTML文档，并将其以“7-1.html”为文件名保存。2）创建AP Div元素。在“布局”

19、选项卡下单击“绘制AP Div”按钮，在文档中绘制一个AP Div，选中绘制的AP Div，在其“属性”面板将其命名为image,设置其“左”、“上”、“宽”、“高”各为50px、10px、800px、600px，“背景颜色”为#CCFFCC。3）根据步骤2）插入新的AP Div元素，并将其命名为bottom。设置其“上”、“宽”、“高”各为610px、800px、50px，“背景颜色”为#FF9966。4）对齐AP元素。选中插入的两个AP元素，选择“修改排列顺序”命令，在其子菜单中选择“左对齐”，将两个AP元素左边缘对齐。,5）创建嵌套AP元素。打开“AP元素”面板，在“防止重叠”复选框未被

20、选中状态下，选中image元素，确保光标处于激活状态，选择“插入布局对象AP Div”命令，在image元素左上角插入一个嵌套AP Div，并将其命名为smallbox，其“宽”、“高”分别设置为200px和60px。6）用同样的方法，在image元素中创建嵌套的AP Div元素bgsmallbox，设置和smallbox元素相同的“宽”、“高”属性，并将其调整到合适位置。在“AP属性”面板中，将smallbox元素和bgsmallbox的“Z”轴属性分别设置为3和2。此时“AP元素”面板如图7-9所示。7）按住Shift键，同时选中被嵌套的两个元素，选择“修改排列顺序右对齐”命令，将这两个A

21、P Div元素按照后选择的元素进行右对齐。设置后的4个AP Div元素布局如图7-10所示。,8）激活image元素，将光标置于该元素的左上角，在该元素内部插入一幅图片。9）激活bottom元素，在bottom元素中输入文本，并设置文字的“字体”属性为宋体，“大小”为18px。,图7-9“AP元素”面板 图7-10 四个AP Div元素的布局,10）依次在smallbox、bgsmallbox中输入“我爱我家”文字，并分别设置文字的“字体”属性为华文新魏，“大小”为36px，“颜色”分别为#FFBB00和#000000。效果如图7-11所示。11）调整smallbox和bgsmallbox元素

22、到适当位置，使其产生阴影效果。12）保存网页文档。按下F12键打开浏览器预览效果。提示：在文档中有多个AP Div元素，在操作时，为避免其相互影响，可在“AP 面板”中将目前没有激活的元素设置为隐藏。,图7-11 在AP Div元素中添加文字和图片,7.3 学习任务：AP Div与表格相互转换,7.3.1 将AP Div元素转换为表格7.3.2 将表格转换为AP Div元素,7.3.1 将AP Div元素转换为表格,使用AP Div可以方便的定位网页中的元素，从而实现网页的布局。与前面学过的表格相比，AP Div元素操作更加方便、实现更为灵活、功能更加强大。考虑到浏览器兼容性问题，有时候需要将

23、AP Div转换为表格，以防止版本过低的浏览器（IE 3.0及其以下版本浏览器）不支持AP Div。另外，可以通过AP Div和表格相互转换来充分发挥两种不同布局方式的优点，方便地布局页面。在Dreamweaver中打开已有的网页文件，如图7-12所示。该页面由两个AP Div元素构成。将页面中的AP Div元素转化为表格的具体操作如下：,1）选择“修改转换将AP Div转换为表格”菜单命令，弹出“将AP Div转换为表格”对话框中，如图7-13所示。“将AP Div转换为表格”对话框各选项含义如下：“最精确”单选按钮：将所有AP Div转换为表格。若AP Div元素之间存在间隙，则通过插入单

24、元格来填充这些间隙。,图7-12 用AP Div元素布局的网页,图7-13“将AP Div元素转换为表格”对话框,“最小：合并空白单元”单选按钮：将一定距离以内的AP Div元素创建为相邻的单元格，即融合其间的间隙。选中该单选按钮，可在其下方的文本框中输入最小距离值。“使用透明GIFs”复选框：将转换后表格的最后一行中填充为透明的GIF图像，这样可以确保在所有的浏览器中表格显示结果一致。如果取消此选项，则表格中不再放置透明GIF图像，这样的表格可能在不同浏览器中显示稍有差异。“置于页面中央”复选框：选中此复选框，则生成的表格在页面居中位置；若取消此复选框，则生成的表格在页面中左对齐。“防止重叠

25、”复选框：选中此复选框，可以防止AP Div重叠。“显示AP元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。,“显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。“靠齐到网格”复选框：选中此复选框，可以将转换后的文档靠齐到网格。保持默认设置。单击【确定】按钮，将文档中的AP Div元素转换为表格。提示：如果文档有嵌套的AP Div元素，或者AP Div之间发生重叠，则无法将该文档的AP Div布局转换为表格布局。,7.3.2 将表格转换为AP Div元素,网页中的表格元素，也可以转换为AP Div元素。具体操作如下：1）打开一个用表格布局的网页文件，选择“修改

26、转换将表格转换为AP Div”菜单命令，弹出“将表格转换为AP Div”对话框，如图7-14所示。“将表格转换为AP Div”对话框各选项含义如下：“防止重叠”复选框：选中此复选框，可以在操作AP Div元素时，防止AP Div元素之间相互重叠。,图7-14“将表格转换为AP Div”对话框,“显示AP Div元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。“显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。“靠齐到网格”复选框：选中此复选框，可以将转换后的文档同网格靠齐。选中“防止重叠”复选框和“显示AP Div元素面板”复选框，单击【确定】按钮，即可将文档

27、中的表格转换为AP Div元素。提示：在将表格转换为AP Div元素过程中，表格之外的内容也会被置于AP Div之中，但文档中空的表格不会被转换为AP Div元素。,7.4 学习任务：AP Div标签,本节学习任务：理解AP Div标签及其属性，掌握AP Div标签的基本格式。AP Div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。AP Div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由AP Div标签的属性来控制，或者通过使用CSS样式表来控制。AP Div标签的基本格式为：content其中，property是AP

28、Div标签的属性，value是该属性的值。AP Div标签的属性及含义如表7-1所示。,表7-1 AP Div标签属性及其含义,表7-1 AP Div标签属性及其含义（续）,7.5 学习任务：使用Div标签,7.5.1 CSS与Div标签7.5.2 插入Div标签7.5.3 设置Div属性,7.5.1 CSS与Div标签,div（division）标签简单来说就是一个区块容器标签，即与之间相当于一个容器，可以容纳段落、标题、表格、图片等各种HTML元素。因此，可以把与中的内容视为一个独立的对象，用于CSS的控制。使用CSS可以控制Web页面中块级别元素的格式和定位。例如，标签、标签、标签、标签

29、、标签和标签都在网页上生成块级元素。CSS布局最常用的块级元素是div标签，标签早在HTML3.0中就已经出现，但那时并不常用，直到CSS的出现，才逐渐发挥出它的优势。CSS对块级元素执行以下操作：为它们设置边距和边框、将它们放置在Web页面的特定位置、向它们添加背景颜色、在它们周围设置浮动文本等。,7.5.2 插入Div标签,在网页中插入Div标签，最常用的方法是单击“插入”面板“常用”标签中的按钮，弹出“插入Div标签”对话框，如图7-15所示。“插入Div标签”对话框各选项含义：,图7-15“插入Div标签”对话框,插入：用于选择Div标签的插入位置。其中：“在插入点”选项是指在当前鼠标

30、所在位置插入Div标签，此选项仅在没有选中任何内容时可用；“在开始标签之后”选项是指在一对标签的开始标签之后，此标签所引用的内容之前插入Div标签，新创建的Div标签嵌套在此标签中；“在标签之后”选项是指在一对标签的结束标签之后插入Div标签，新创建的Div标签与前面的标签是并列关系。该对话框会列出当前文档中所有已创建的Div标签供用户确定新创Div标签的插入位置。ID：为新插入的Div标签创建唯一的ID号。类：为新插入的Div标签附加已有的类样式。提示：插入的Div标签以虚框的形式出现在文档中，并带有占位符文本。当鼠标移到该框的边缘上时，框的外围边界会出现一个红框。选中Div标签时，红框将被

31、深蓝色框代替。,插入Div的具体操作：1）新建一个空白网页文档，并以“7-5.html”为文件名保存。选用“拆分”视图方式，以便查看操作对应的代码变化。2）单击“插入”面板“常用”标签中的“插入Div标签”按钮，弹出“插入Div标签”对话框，在“插入”下拉列表中选择“在插入点”，在ID输入框中输入“Div1”。3）单击【新建CSS规则】按钮，弹出“新建CSS规则”对话框，选择器类型自动设为“ID”，选择器名称自动设为“#Div1”，选择规则定义为“（仅限该文档）”。4）单击【确定】按钮，打开“#Div1的CSS规则定义”对话框，此时暂不设置CSS规则，连续单击【确定】按钮完成Div1的创建。5

32、）用同样的方法创建Div1-1和Div1-2。不同的是，创建Div1-1时，在“插入Div标签”对话框中，在“插入”下拉列表中选择“在开始标签之后”，在其后面的下拉列表框中选择“Div1”，在ID输入框中输入“Div1-1”，单击【确定】按钮。,创建Div1-2时，在“插入Div标签”对话框中，在“插入”列表中选择“在标签之后”，并选中后面下拉列表框中的“Div1-1”，在ID输入框中输入“Div1-2”。为了显示清晰此处删掉了Div1的占位符文本。代码和显示效果如图7-16所示。,图7-16 Div代码和显示效果,7.5.3 设置Div属性,Div属性的定义需要在“CSS规则”对话框中进行。

33、下面介绍几种与布局相关的属性。1设置Div的浮动属性Float属性在CSS页面布局中非常重要，Float可设置为left、right和默认值none。当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧。对上面创建的3个Div进行设置，具体操作：1）打开“CSS样式”面板，单击“全部”标签，找到选择器“#Div1”，双击“#Div1”，弹出“#Div1的CSS规则定义”对话框，选择“方框”分类，设置Width（宽）为“300px”，Height（高）为“240px”，Float（浮动）暂时使用默认值（none），如图7-17所示。单击【确定】按钮完成设置。,图7-17“#Div1的C

34、SS规则定义”对话框,2）选中Div1-1标签，单击鼠标右键，在打开的快捷菜单中选择“CSS样式新建”命令，打开“新建CSS规则”对话框，从中进行设置，设置情况如图7-18所示。3）单击【确定】按钮，选择器“#Div1-1”出现在“CSS样式”面板中。4）用同样的方法为Div1-2标签创建选择器“#Div1-2”。5）在“CSS样式”面板中，找到选择器“#Div1-1”并双击，弹出“#Div1-1的CSS规则定义”对话框，选择“方框”分类，并设置Width为“100px”、Height为“100px”、Float使用默认值，单击【确定】按钮完成设置。6）用同样的方法，对Div1-2进行设置：W

35、idth为“100px”、Height为“100px”、Float使用默认值，单击【确定】按钮完成设置。效果如图7-19所示。7）分别修改Div1-1和Div1-2的Float值为“left”，显示效果如图7-20所示。8）修改Div1-2的Float值为“right”，显示效果如图7-21所示。,图7-18“新建CSS规则”对话框,图7-19默认浮动方式 图7-20“left”浮动方式 图7-21“right”浮动方式,设置Div的边界、填充和边框具体操作：1）在“CSS样式”面板中双击选择器“#Div1-1”，弹出“#Div1-1的CSS规则定义”对话框，选择“方框”分类，设置Margin

36、的Top为“50px”，Left为“50px”，Rihgt和Bottom分别为“auto”，单击【确定】按钮，设置效果如图7-22所示。,2）在“#Div1-1的CSS规则定义”对话框中，选择“方框”分类，设置Padding四周的填充值均为“12px”，单击【确定】按钮，设置效果如图7-23所示。此时的“#Div1-1的CSS规则定义”对话框如图7-24所示。,图7-22 设置Margin后效果 图7-23 设置Padding后效果,图7-24 Div1-1的“方框”设置,3）在“#Div1-1的CSS规则定义”对话框中，选择“边框”分类，设置Style（边框类型）均为“dashed”，四条边

37、的Width（边宽）均为“10px”，四条边的Color（边框颜色）均为“#0FF”，如图7-25所示。4)单击【确定】按钮完成设置，显示效果如图7-26所示。提示：盒子模型是CSS布局页面时一个非常重要的概念，可以将所有页面中的元素都看成是一个盒子，它们占据了一定的页面空间。一个盒子由content（内容）、border（边框）、padding（填充也叫间隙）、margin（边界也叫边距）4个部分组成，一个盒子的实际宽度和高度是由content+border+padding+margin组成的。,图7-25 Div1-1的“方框”设置 图7-26 设置边框后效果,7.6 实训用DIV+CSS

38、制作企业网站主页,1实训要求练习插入Div标签的方法练习通过CSS定位Div标签进行网页布局的方法练习通过CSS设置文本、列表的方法2实训指导本网页整体结构是用11个Div标签布局而成，各Div的位置关系及插入的内容见下面的代码。/*logo.jpg*/*banner.jpg*/,/*导航栏列表*/*lmdh.jpg*/*公司简介二级菜单列表*/*gsjj.jpg*/*公司简介文本*/*footer.jpg*/企业网站主页参考效果如图7-27所示。,图7-27 企业网站主页参考效果,制作过程参考如下：1)制作网页前的准备工作。创建网点及存放图片等素材的images文件夹。新建外部样式表firm

39、.css，新建index.html空白网页，单击“CSS样式”面板中的附加样式表按钮，将该CSS文件链接到当前网页。2)插入logo Div标签。单击“插入”工具栏“常用”选项卡中【插入Div标签】按钮，弹出“插入Div标签”对话框，在“插入”下拉列表中选择“在插入点”，在ID输入框中输入“logo”，单击【新建CSS规则】按钮，弹出“新建CSS规则”对话框，选择器类型自动设为“ID”，选择器名称自动设为“#logo”，选择规则定义为“firm.css”，单击【确定】按钮后，将打开“CSS规则定义”对话框，选择“方框”分类，设置Width为“780px”，Height为“67px”，Float

40、使用默认值，单击【确定】按钮完成设置。类似操作，执行10次，插入10个Div标签，每次设置的参数为：,“在标签之后”，“logo”，ID：“banner”；Width“780px”，Height“160px”，Float：默认。“在标签之后”，“banner”，ID：“nav”；Width“780px”，Height“42px”，Float：默认。“在标签之后”，“nav”，ID：“main”；Width“780px”，Height“420px”，Float：默认。“在开始标签之后”，“main”，ID：“left”；Width“400px”，Height“220px”，Float：left。

41、“在标签之后”，“left”，ID：“right”；Width“550px”，Height“400px”，Float：right。“在开始标签之后”，“left”，ID：“left-title”；Width“220px”，Height“35px”，Float：默认。“在标签之后”，“left-title”，ID：“left-con”；Width“220px”，Height“auto”，Float：默认。“在开始标签之后”，“right”，ID：“right-title”；Width“550px”，Height“35px”，Float：默认。,“在标签之后”，“right-title”，ID：“

42、right-con”；Width“auto”，Height“auto”，Float：默认。“在标签之后”，“main”，ID：“footer”；Width“780px”，Height“51px”，Float：默认。至此，网页整体布局已经完成。3）设置背景属性。在“CSS样式”面板中，找到“#logo”双击，弹出CSS规则定义对话框，在“背景”类型中，Background-image（背景图像）设为“logo_bj.jpg”,Background-repeat（背景图像重复方式）设为“repeat-x”，单击【确定】按钮完成设置。类似操作设置其他Div标签的背景属性：#nav：Backgroun

43、d-image设为“nav_bj.jpg”,Background-repeat设为“repeat-x”。#left：Background-color（背景颜色）设为“#EFEFEF”。,#footer：Background-image设为“footer_bj.jpg”,Background-repeat设为“repeat-x”。4）在Div区块中插入内容。选中文档中的logo Div区块，删除占位符文本，插入“logo.jpg”图像。类似操作，删除其他Div区块中的占位符文本，在相应Div区块中插入前面列出的文本、列表或图像等内容。5）将栏目导航区域的项目列表符号改为自定义图像。用鼠标选中文档

44、中的“公司简介二级菜单列表”全部段落或在位于“文档”窗口左下角的标签选择器中点击标签；在CSS属性面板的目标规则下拉列表框中选择“新CSS规则”，单击【编辑规则】按钮，弹出“新建CSS规则”对话框；选择器类型自动设为“复合类型”，选择器名称自动设为“#left-con ul”，规则定义自动设为“firm.css”，单击【确定】按钮后，将打开“CSS规则定义”对话框；在“列表”类型中List-style-type设为none，List-style-image设为自定义图像“list_icon.gif”，连续单击【确定】按钮完成设置。,6）去掉导航栏项目列表符号。操作步骤与上一步相同。用鼠标选中文

45、档中的“导航栏列表”全部段落或在位于“文档”窗口左下角的标签选择器中点击标签；在CSS属性面板的目标规则下拉列表框中选择“新CSS规则”，单击【编辑规则】按钮，弹出“新建CSS规则”对话框；选择器类型自动设为“复合类型”，选择器名称自动设为“#nav ul”，规则定义自动设为“firm.css”，单击【确定】按钮后，将打开“CSS规则定义”对话框；在“列表”类型中List-style-type设为none，连续单击【确定】按钮完成设置。7）将导航栏项目列表改为一横行显示。用鼠标选中文档中的“导航栏列表”的任一段落或在位于“文档”窗口左下角的标签选择器中点击标签；在CSS属性面板的目标规则下拉列

46、表框中选择“新CSS规则”，单击【编辑规则】按钮，弹出“新建CSS规则”对话框；选择器类型自动设为“复合类型”，选择器名称自动设为“#nav ul li”，规则定义自动设为“firm.css”，单击【确定】按钮后，将打开“CSS规则定义”对话框；在“方框”类型中Float设为left；为使各列表项前后保持相同间距，设置padding-left为20px，padding-right为20px，连续单击【确定】按钮完成设置。,8）为导航栏项目列表加上背景，制造出自定义项目列表符号的效果。在CSS样式面板中，找到“#nav ul li”双击，弹出CSS规则定义对话框，在“背景”类型中Backgrou

47、nd-image设为“nav_icon.jpg”,Background-Repeat设为“no-repeat”，Background-position(X)设为“left”，和 Background-position(Y)设为“center”，单击【确定】按钮完成设置。标签在CSS布局中的应用较为广泛，通过58步的操作，读者会对标签在CSS布局中的用法有一个全新的认识。9）创建文本的CSS类规则。在CSS样式面板中，鼠标单击【新建CSS规则】按钮，弹出“新建CSS规则”对话框；选择器类型设为“类”，选择器名称设为“t1”，规则定义设为“firm.css”，单击【确定】按钮后，将打开“CSS规则

48、定义”对话框；在“类型”分类中Font-size设为14px，Line-height设为22px，Color设为“#3F6081”，Font-weight设为“bold”，连续单击【确定】按钮完成设置。类似操作，创建“.t2”类，Font-size设为12px，Line-height设为22px，Color设为“#333”，Font-weight设为“normal”。,10）应用文本CSS类规则。在企业简介内容区（#right-con）输入文本，选中“历史沿革”在HTML属性面板“类”下拉列表中选择“.t1”类样式，或在CSS属性面板中从“目标规则”下拉列表中选择“.t1”类样式。类似操作，在

49、企业简介内容区选中“本公司始建于1958年”文本，在HTML属性面板“类”下拉列表中选择“.t2”类样式，或在CSS属性面板中从“目标规则”下拉列表中选择“.t2”类样式。11）创建超链接CSS规则。在CSS样式面板中，鼠标单击【新建CSS规则】按钮，弹出“新建CSS规则”对话框；选择器类型设为“复合内容”，选择器名称设为“a:link”，规则定义设为“firm.css”，单击【确定】按钮后，将打开“CSS规则定义”对话框；在“类型”分类中Color设为“#666”，Text-decoration设为none，连续单击【确定】按钮完成设置。类似操作，创建“a:visited”，Text-dec

50、oration设为none；创建“a:hover”，Color设为“#F60”，Text-decoration设为none。,12）创建超链接。依次为导航栏和栏目导航列表的各个列表项创建指向index.html的超链接，为保证显示的一致性设置各个列表项文本的字体大小为12px。13）完善网页微调文本外观。让页脚的文本水平/垂直居中显示，设置#footer的text-align为 center，line-height为30px，vertical-align为 middle。为企业简介文本四周增加填充以保持一定间隔，#right-con的padding设为10px。14）完善网页设置网页的背景。在