第6章网页布局new案例.ppt

《网页设计与制作》 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 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 （3）设置各Div区域的样式表 ①打开样式表文件layout.css。在“定义全局样式”的代码下方，将图6-38所示代码写入。为了便于观察，将部分Div区域设置了背景色。 ②按快捷键Ctrl + S保存样式表文件layout.css。 ③打开index.html文件，按F12键预览网页。设置结果如图6-39所示。 至此，网页的整体框架布局完毕，读者可利用已经学习过的知识继续完成网页设计。 《网页设计与制作》 6.3 应用Div+CSS布局网页 应用实例——利用Div+CSS布局网页框架 6.3.3 《网页设计与制作》 6.3 应用Div+CSS布局网页 Div知识拓展 6.3.4 1．Div+CSS布局的一般步骤 （1）设计网页效果图。规划Div区域的数量、位置与大小。 （2）插入Div区域。 （3）定位Div区域。采用相对定位与绝对定位的方法，定位Div区域。 （4）编写CSS样式表，利用CSS样式表格式化Div区域 2．绝对定位与相对定位 定位（Position）是C