(8.6)--8.6掌握CSS＋DIV进行网页布局.pdf

《(8.6)--8.6掌握CSS＋DIV进行网页布局.pdf》由会员分享，可在线阅读，更多相关《(8.6)--8.6掌握CSS＋DIV进行网页布局.pdf（20页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、任务六：掌握CSSDIV进行网页布局1分析架构CSS+DIV是网站标准(或称“Web标准”)中的常用术语之一，是一种网页布局方法，这种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式，可实现页面内容与表现相分离。利用CSS样式还可以代替表格进行网页布局，本节讲解如何利用DIV标签和CSS样式进行网页的排版，制作过程如下。2模块拆分2.模块拆分一个总的DIV标签，它包含了4个DIV标签：1)container：最大的容器，包含所有内容。2)header：网站头部图标，包含顶部广告图。3)leftnav：左侧导航条。4)content：网站的主要内容。5)footer：网

2、站底栏，包含版权信息等。定义页面属性和特定DIV标签的CSS样式。首先创建本地站点，站点中包括两个子文件夹images和css，分别用于存储图像素材和CSS样式文件。1)定义页面属性。单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，设置背景颜色为#2e4e7d、页边距均为0；定义网页标题为“西京小学”。2)创建一个CSS文件，命名为“style”，保存在css文件夹中。定义“.container”的CSS样式。在“属性”面板中，单击“CSS Designer”按钮，在弹出的“CSS设计器”对话框中，在“选择器”文本框中输入“.container”。弹出“.container的CS

3、S规则定义”对话框，单击“布局”选项卡，输入宽度(width)为1200像素，填充(padding)上、下、左、右均为0，margin上、下均为0，左、右为自动(auto)。定义DIV标签的CSS样式33)定义“.header”的CSS样式。与步骤2)相同，在“选择器”文本框中输入.header。弹出“.header的CSS规则定义”对话框，单击“布局”选项卡，输入宽度(width)为1200像素，高度(height)为300像素，单击“背景”选项卡，背景图像(background-image)为“images/header.jpg”，背景图片大小为100%。4)定义“.leftnav”的CS

4、S样式。与步骤2)相同，在“选择器”文本框中输入.leftnav，在“.leftnav的CSS规则定义”对话框中，单击“布局”选项卡，设置宽度(width)为200像素、高度(height)为650像素、浮动(float)为左对齐(left)、距离顶部填充(padding-top)为50像素，背景颜色为白色。3定义DIV标签的CSS样式5)定义“.leftnav li”的CSS样式。与步骤2)相同，在“选择器”文本框中输入.leftnav li，在“.leftnav li的CSS规则定义”对话框中，单击“文本”选项卡，设置list-style-type为none、line-height为60p

5、x、text-align为center；单击“布局”选项卡，设置width:200px。6)定义“.content”的CSS样式。与步骤2)相同，在“选择器”文本框中输入“.content”，在“.content的CSS规则定义”对话框中，单击“布局”选项卡，设置填充(padding)左侧和右侧100像素、顶部为50像素，宽度为800像素、高度为650像素，背景颜色为白色，浮动(float)为右对齐(right)。定义DIV标签的CSS样式37)定义“.content p”的CSS样式。与步骤2)相同，在“选择器”文本框中输入.content p，在“.content p的CSS规则定义”对话

6、框中，单击“文本”选项卡，设置首行缩进(text-indent)为2em。8)定义“.content img”的CSS样式。与步骤2)相同，在“选择器”文本框中输入.content img，在“.content img的CSS规则定义”对话框中，单击“布局”选项卡，设置宽度为800px、设置边距(margin)左右为auto像素、上下为0像素。3定义DIV标签的CSS样式9)定义“.footer”的CSS样式。与步骤2)相同，在“选择器”文本框中输入“.footer”，在“.footer的CSS规则定义”对话框中，单击“文本”选项卡，设置行高(line-height)为100像素、颜色(col

7、or)为白色、对齐方式(text-align)为center；单击“布局”选项卡，将“清除(clear)”设置为“两者(both)”(设置both是为了消除前面设置浮动左对齐的影响)，单击“背景”选项卡，将背景颜色设置为#F76636。定义DIV标签的CSS样式31)单击“插入”栏“常用”选项“DIV”按钮，弹出“插入DIV”对话框，如图8.24所示，在“Class”下拉列表中选择container，单击“确定”按钮。在网页中添加DIV标签42)用光标单击container容器内，与步骤1)相同，单击“DIV”按钮，弹出“插入DIV”对话框，在“Class”下拉菜单中选择header，单击“确

8、定”按钮。3)与步骤1)相同，依次插入leftnav、content、footer的DIV标签，如图8.25所示。最外层DIV的ID为container，其他的DIV标签均包含在containter中，除了container外，其他都是并列关系，顺序为header、leftnav、content、footer。操作方法是首先插入containter，然后切换到代码视图，将光标放在之间，然后单击“插入DIV标签”按钮，分别插入其他的DIV标签。4在网页中添加DIV标签1)单击leftnav区域，插入图像images/logo.png，使用ul和li标签输入文字内容。3)单击“content”区域

9、，输入文字内容，插入图片。4)单击“footer”内，输入版权所有信息和联系方式信息。保存网页，按下F12键浏览网页效果。5在DIV中填充网页内容本单元主要介绍了CSS样式表的创建与应用，通过CSS样式的使用，使得网页样式更加丰富多彩。1)CSS的概念：CSS样式、样式的分类、CSS的语法结构等。2)CSS样式的创建。3)CSS样式的应用。小结1.什么是CSS样式表？2.定义CSS样式表有什么好处？3.如何调用外部CSS样式表文件？有什么好处？练习题1.背景知识根据本单元所学CSS+DIV网页布局技术，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。2.实验准备工

10、作实验素材、网页元素及网页样图，发送到学生的主机，以供学生参考使用。3.实验要求利用CSS样式表制作大理旅游集团网站网站。如图所示。要求：根据给定的素材，首先设置页面属性。其次定义特定ID的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入网页元素，最后通过定义类，设置图像的CSS样式。上机实验4.课时安排 上机实验课时安排为2课时。5.实验指导(1)新建一个本地站点，在站点内新建两个子文件夹images和css，将图像素材保存到images文件夹。新建一个网页，保存为index.html。(2)在“CSS设计器”面板中，单击左上角的“源”按钮，单击“创建新的CSS文件”按钮，创建CS

11、S文件，命名为style.css，接下来在CSS设计中设置CSS样式。(3)重定义body：在style.css中新建一个“body”选择器样式，设置如下属性。margin:0;width:100%;background-image:url(./images/background.jpg);background-position:center center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;上机实验(4)设置整体外框架：新建一个“.container”选择器样式，设置如下属

12、性。width:1200px;height:800px;margin:0 auto;(5)设置导航条：新建一个“.nav”选择器样式，设置如下属性。width:1200px;height:90px;(6)设置导航条列表：新建一个“.nav li”选择器样式，设置如下属性。display:inline;list-style-type:none;color:#fff;font-size:20px;margin:0 20px;line-height:90px;上机实验(7)设置导航条图片：新建一个“.nav img”选择器样式，设置如下属性。vertical-align:middle;(8)设置宣传

13、标语：新建一个“.sologn”选择器样式，设置如下属性。width:1000px;margin:150px auto 0 auto;(9)设置景点按钮：新建一个“.sologn button”选择器样式，设置如下属性。background-color:#00a3ee;opacity:.9;border-radius:8px;height:40px;width:120px;font-size:18px;color:#fff;border-color:#00a3ee;margin:0 20px 0 20px;上机实验(10)设置底部菜单：在style.css中新建一个“.footer”选择器样式

14、，设置如下属性。width:100%;height:165px;color:#fff;text-align:center;line-height:10px;padding-top:220px;(11)按照网页层级关系和顺序分别插入DIV标签到网页正文中，并根据如下HTML代码分别插入网页所需图片和文本内容。其中导航条采用ul和li标签完成，旅游导航按钮用button完成。上机实验 网站首页关于我们旅游景点特色项目新闻动态联系我们 大理古城大理花甸坝大理苍山大理洱海大理喜洲大理双廊镇 主办：大理白族自治州人民政府办公室 承办：大理白族自治州电子政务管理中心滇ICP备05001542号 政府网站标识码：5329000057滇公网安备 53290102000345号上机实验THANKS