第6章网页布局new研究.ppt

《网页设计与制作》 6.3 应用Div+CSS布局网页 Div的定义 6.3.2 Div是一个标识（标签），作用是标识网页上的一个区域。一个网页的布局，可以通过若干个div标识区域组成。 可以认为Div是XHTML语言中的一个块定义，相当于一个容器，由起始标签Div和结束标签/Div之间的所有内容构成。块内可以内嵌表格（table）、文本（text）等其他XHTML元素（代码）。但是，Div只负责整体区域（块）的表现属性设置，不包含对诸如表格等内部元素属性的设置。 一般通过样式表CSS格式化的方式设置Div标识区域的整体表现属性。 Div代码有以下两种使用形式： div id=”id 名称”内容/div div class=”class 名称”内容/div 使用id属性，可为当前Div指定一个id名称，以便在CSS中使用id选择符进行样式编写。同理，使用class属性，也是为了在CSS中使用class选择符进行样式编写。 Div与CSS的关系可以归纳为：首先使用Div标记区域，然后为这个Div编写需要的CSS样式，最后使用CSS样式格式化Div标记区域。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 利用Div+CSS布局网页，首先需要设计页面的效果图，然后对页面结构进行分析。从图6-30所示的网页效果图可以看出，整个页面分为导航区域、头部区域、主体部分和底部区域。其中主体部分又分为左、中、右三列，整个页面居中显示。如图6-31所示。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 操作实例6-14 利用Div+CSS布局图6-31所示的网页框架 操作步骤： （1）搭建html框架代码 ①在站点窗口，新建网页文件index.html。将页面标题设置为“利用Div+CSS布局网页”。 ②设置Div插入点。在“代码”视图中，将光标定位在标签body与/body中间。 ③插入“导航区域”的Div标签“nav”。单击“布局”工具栏的“插入Div标签”按钮，打开“插入Div标签”对话框。设置“ID”为“nav”。如图6-32所示。 ·“插入”：下拉列表中的内容将根据插入点所在位置而发生变化，通过在下拉列表中选择不同选项，可以更精确地定位插入点的位置。 ·“类”：选择要应用于Div标签的类样式，如果要新建针对该Div标签的类样式，可以在“类”文本框输入样式名，然后单击“新建CSS规则”按钮定义类样式。 ·“ID”：如果要新建针对该Div标签的ID样式，可在“ID”文本框输入样式名，然后单击“新建CSS规则”按钮定义ID样式。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 ④设置各项参数后，单击“确定”按钮，完成Div标签的插入。 ⑤将光定位在“nav”的div标签之后，重复步骤②-④，依次插入“ID”为“head”（头部区域）、“main”（内容区域）、“foot”（尾部区域）的div。 ⑥在“ID”为“main”的div中间，插入“left”（左）、“center”（中）、“right”（右）三个div。插入完成后的代码及设计效果如图6-33所示。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 ⑦设置网页整体的居中显示效果。 方法一：将nav、header、main、foot分别设置为居中。 方法二：为上述标签增加设置一个父标签“contain”。通过设置父标签的居中，完成网页整体的居中设置。增加后的代码如图6-34所示。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 （2）设置CSS样式表 ①选择“文件”菜单的“新建”选项，进入“新建文档”对话框，在“空白页”的“页面类型”中，选择“css”，单击“创建”按钮。 ②在“文件”菜单选择“保存”选项，以文件名“layout.css”，存入CSS文件夹。 ③设置全局的样式。将图6-35所示的代码写入layout.css中。按Ctrl+S键保存。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 ④将样式表与网页关联。回到“index.html”文档窗口，在“CSS样式”面板，单击“附加样式表”按钮 。如图6-36所示。在打开的“链接外部样式表”对话框，单击“浏览”按钮，选中CSS文件夹下的文件“layout.css”，单击“确定”按钮。如图6-37所示。 《网页设计与制作》 6.3