网页设计-第8章 CSS标准流布局.pptxVIP

网页设计案例教程案例说明 本案例主要利用结构元素完成整个新闻页面的布局，为其搭建好整体框架，以使网页中的各元素能“各就各位”。在完成本案例的过程中，读者应对div盒子模型有深刻的认识。案例步骤 从效果图可知，整个页面可以分成3部分：头部header、新闻正文content和尾部footer。定义站点和新建文件案例步骤1.在本地磁盘新建一个名为bljt的文件夹，然后在Dreamweaver中定义一个站点，将bljt文件夹设置为站点根文件夹；再将本书配套素材“第8~10章\bljt”文件夹中的“images”文件夹拷贝到站点文件夹中。步骤 02步骤 01步骤 03在站点文件夹根目录中新建一个网页，命名为xinwen.html。另外，本例使用外部样式表文件，因此还要在站点根目录中新建一个名为NewsStyle.css的CSS文件。在后面的操作中，我们将在该文件中书写CSS代码。打开新建的网页文档“xinwen.html”。为了让外部样式表能控制网页，在网页的head/head标签对之间输入如下代码。link href=NewsStyle.css rel=stylesheet type=text/css构建HTML结构案例步骤2.首先插入头部的标签header。在设计界面中将插入点置于body部分，单击“插入”面板“结构”类别中的“页眉”按钮，在弹出的“插入Header”对话框中单击“确定”按钮，插入header标签。步骤 01案例步骤插入正文部分的div（id为content），插入时在代码界面中将鼠标光标放在header标签的后面，然后插入。步骤 02 插入标签时一定要注意插入位置。当在现有的某个标签对内插入时，原标签和新插入的标签是嵌套（父子）关系；当在标签对外插入时，原标签和新插入的标签是平行关系。我们可在代码界面或设计界面中定位插入点以确定插入位置。在插入某些标签时，还可在弹出的对话框中选择插入位置。案例步骤插入尾部的footer标签。参照前面的方法，将插入点置于id为content的div标签后面，单击“插入”面板“结构”类别中的“页脚”按钮，打开“插入Footer”对话框，单击“确定”按钮插入footer。步骤 03案例步骤在footer标签对中输入版权信息。可在设计界面中输入，也可在代码界面中输入。当在设计界面中输入时，其中的版权信息符号?（HTML代码为copy;）可以利用“插入”面板“常用”类别中的“字符 换行符”下拉列表进行插入。步骤 04bodyheader此处为新 header 标签的内容/headerdiv id=content此处显示 id content 的内容/divfooter版权信息:copy;正大软件学院.软件技术系所有br 2010-2020/footer/body设置CSS样式案例步骤3.设置整个页面的样式。首先观察：页面的顶部是没有间距的。因此给整个body去掉外边距和内边距，并设置文字的默认大小和背景图像。步骤 01body{ margin: 0px; /*设置外边距*/ padding: 0px; /*设置内边距*/ font-size:14px; /*设置页面所有文字的默认大小*/ background-image: url(images/body.gif); /*设置背景图像*/}案例步骤设置header和footer标签的公共样式。本例将页面中的内容都放在header，footer和id为content的div标签中，需要为其设置宽度并居中显示。通过观察效果图，可以发现页面中最宽的元素就是顶部的banner图像，因此将主体标签的宽度设置为与该图像的宽度一致，通过查看图像属性得知其宽度是960px。步骤 02header,footer{ width: 960px; /*设置主体页面宽度*/ margin: 0 auto; /*设置主体页面左右居中显示*/ background-color: #FFFFFF; /*设置背景颜色*/}案例步骤设置页面底部footer标签的样式，包括设置行高为25px，第一行文字离该div的上边缘有20px距离等。footer{ text-align: center; /*设置文字居中对齐*/ background-color: #b2a695; /*设置背景颜色*/ line-height: 25px; /*设置行高*/ padding-top: 20px; /*设置20像素的顶部内边距*/} /*该footer块的实际高度为line-height×2+paddin