Dreamweaver CS6网页设计案例教程 第2版 教学课件 ppt 作者 主编 王春红 王瑾瑜 模块7使用DIV CSS布局并美化网页

1、 十二五职业教育国家规划教材认识CSS的基础概念如何用CSS布局纵向导航菜单及二级弹出菜单 十二五职业教育国家规划教材模块介绍： DIV+CSS的标准叫法应是XHTML+CSS，是一种网页布局方法，通过它可以实现网页页面内容与表现相分离，即CSS在网页制作开始时，可以先设定一些常用标签，如颜色、字体大小、框线粗细等，从而不用反复写入同样的标签。 本模块通过对DIV+CSS的基本概念的学习，结合实例的讲解，来掌握其使用方法。 十二五职业教育国家规划教材模块介绍： CSS是层叠样式表，用于定义HTML元素的显示形式。 由divCSS布局的且结构良好的网页可以通过CSS定义成任何外观，在任何网络设备

2、上以任何外观形式表现出来，而且用divCSS布局构建的网页能够简化代码，加快显示速度。 所以学好divCSS，首先要摒弃传统意义的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现网页页面的外观。从而使网站浏览者有更好的体验。 十二五职业教育国家规划教材加载CSS样式有以下四种： 外部样式：把CSS单独写到一个CSS文件内，然后 在源代码中以link方式链接。 内部样式：以开头，结尾，写在源代码的head标签内。 h1 color:#000; 十二五职业教育国家规划教材 行内样式：是在标签内以style标记的，且只针对于标签内的元素，因其没有和内容相分离，所以

3、不建议使用。 导入样式：是以import url标记所链接的外部样式表，它一般常用在另一个样式表内部。 十二五职业教育国家规划教材 CSS优先级：是指CSS样式在浏览器中被解析的优先顺序。 id优先级高于class 后面的样式覆盖前面的样式 指定的样式高于继承的样式 行内样式高于内部样式或外部样式 十二五职业教育国家规划教材 十二五职业教育国家规划教材模块介绍： 使用CSS进行布局时，要忘掉行和列（运用表格时的一种重要的观念）。但是，可以把一个标签当成一个表格单元。而标签就是把所需内容定位在网页区域上的一个逻辑位置。此外，CSS设计经常把一个div嵌套在另一个div里面，就像把表格嵌套在表格里

4、面而获得特定的效果一样。 十二五职业教育国家规划教材 1.插入DIV标签步骤 执行【文件】【新建】命令，新建网页文件。步骤 选择菜单栏【插入】【布局对象】【DIV标签】命令，如图7-1所示。图7-1 十二五职业教育国家规划教材 步骤 在打开的对话框中，在ID项中给div建一个名，叫TEST7-1（可根据需要命名）。2.新建CSS规则步骤 选择要建CSS规则的DIV步骤 在“CSS样式”面板上，单击 “新建CSS规则”按钮，如图7-2所示。图7-2 十二五职业教育国家规划教材 单击后出现“新建CSS规则”面板，如图7-3所示。图7-3 十二五职业教育国家规划教材 步骤3 单击确定按钮，出现“#t

5、est7-1的CSS规则定义”面板。在“#test7-1的CSS规则定义”面板中选择“分类”列表中“方框”选项，并设定宽为300、高为200。再在“分类”列表中选择“背景”，设定背景颜色为#F90（该值可任选），单击“确定”按钮。步骤4 执行【文件】【保存】命令，保存文件。单击“预览”按钮，查看在浏览器中的显示效果，这就是一列限定宽度。 十二五职业教育国家规划教材 1.两列自适应宽度的网页步骤 执行【文件】【新建】命令，新建网页文件。步骤 插入一个DIV标签，ID项命名left-div。再插入一个DIV标签，ID项命名right-main。插入DIV标签后，在设计视图中显示如图7-4所示。图7

6、-4 十二五职业教育国家规划教材 步骤3 选择“left-div”，单击“新建CSS规则” 。在“新建CSS规则”窗口中， 单击“确定”按钮后，在出现的“# left-div的CSS规则定义”窗口中选择“方框”，键入宽（Width）值为150px，高（Height）值为300px，浮动（float）为左对齐。上述数值改变后，在设计视图中显示如图7-5所示。图7-5 十二五职业教育国家规划教材 步骤4 选择“right-main”，单击“新建CSS规则”。在“新建CSS规则”窗口中，单击“确定”按钮后，在出现的“# right-main的CSS规则定义”窗口中选择“方框”，键入宽（Width）值

7、为70%，高（Height）值为300px，外边距（Margin）里左（Left）值为150px，此步骤同步骤3。上述数值改变后，在设计视图中显示如图7-6所示。图7-6 十二五职业教育国家规划教材 步骤5 为了便于查看， 还可以设置背景色。选择“left-div”，在“属性”面板中选择“编辑规则”，如图7-7所示。在出现的“# left-div的CSS规则定义”窗口中选择“背景”，在背景色（Background-color）中选择任意颜色，这里键入#F60。图7-7 十二五职业教育国家规划教材 同上，在“# right-main的CSS规则定义”中修改背景颜色为#FC6。执行【文件】【保存】

8、命令，保存文件。最后在浏览器中预览如图7-8所示。图7-8 十二五职业教育国家规划教材 2.两列固定宽度的网页通过对两列自适应宽度网页的设置方法的学习，可以清楚的明白如何设置两列固定宽度的网页，只需要对#right-main的宽度进行调整，由百分比改为固定值。图7-9 十二五职业教育国家规划教材 3.两列固定宽度且居中的网页设置两列固定宽度居中，则是在两列固定宽度的基础上，给这两个固定宽度的DIV加一个父DIV。图7-9步骤 在源代码里选中这两个固定宽度的DIV的代码后，点击“插入DIV标签”图标，如图7-9所示，填写ID为parent后，点击“确定”按钮。 十二五职业教育国家规划教材 步骤2

9、 设置#parent的样式，通过对块结构的理解，可知#parent 的宽度是#left-div的宽度150px和#right-main宽度300px之和，这样就可以设置#parent居中了，主要设置外边距（Margin）的左（left）、右（Right）为自动（auto）。步骤3 执行【文件】【保存】命令，保存文件图7-9 十二五职业教育国家规划教材 4.块级元素(div)与内联元素(span)块级元素：顾名思义就是一个方块，类似于段落，默认情况下是占据一行出现。诸如段落、标题.、列表, 、表格、表单、DIV和BODY等元素。 内联元素：又名行内元素，只能放在行内，类似于单词，不会造成前后换行

10、，起辅助作用。如: 表单元素、超级链接、图像、 等。 十二五职业教育国家规划教材 块级元素的最显著特点就是：每个块级元素都是从新的一行开始显示，而且它后面的其他元素也需另起一行进行显示，因为块级元素已经占据了这一整行，其他元素没有足够的空间显示。 CSS的作用，是使块级元素不会顺序地以每次另起一行的方式一直往下排。而是可以把块级元素摆放到用户想要的任意位置上。 十二五职业教育国家规划教材 5.浮动(float)属性在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素，都要指明一定的宽度，否则它会尽可能地窄。此外当浮动的空间小于浮动元素的宽度时，它会下移，直到拥有足够

11、空间。 十二五职业教育国家规划教材 6.设置三列自适应宽度的网页三列自适应宽度，较为常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。步骤 执行【文件】【新建】命令，新建网页文件。步骤 分别插入三个DIV标签，ID项命名A、B、C。步骤 分别对三个块级元素进行新建CSS规则，对#A、#B进行宽高100px的设定，#A的背景颜色为#96C，#B的背景颜色为#C9C ，另处，#A的浮动为左对齐，#B的浮动为右对齐。 十二五职业教育国家规划教材 步骤4 对块C新建CSS规则，选择“分类”中的“方框” ，设定左边距、右边距分别为100px，高为100 px。再对背景色进行设置 ，这里背景颜色设为

12、#F96。 如图7-10所示。步骤5 执行【文件】【保存】命令，在浏览器中的显示如图7-10所示。图7-10 十二五职业教育国家规划教材 步骤6 因为默认的body是有外边距的，所以要设置body的外边距为0。才能达到块无限接近浏览器的边框。点击CSS面板上的新建按钮，然后在新建面板中选择：标签（重新定义HTML元素） ，然后选择body，如图7-11所示。图7-11 十二五职业教育国家规划教材 设置body的边界为0即可，如图7-12所示。图7-12 十二五职业教育国家规划教材模块介绍： 纵向导航菜单又称为纵向列表，如常用的邮箱的左侧。二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单

13、，移去鼠标后自动消失。 十二五职业教育国家规划教材 1.创建简单的一级纵向菜单步骤 执行【文件】【新建】命令，新建网页文件。步骤 插入一个ID为“菜单”的DIV。然后在设计视图中选中文字，如图7-13所示。图7-13 十二五职业教育国家规划教材 选择菜单栏【格式】【列表】【项目列表】命令，如图7-14所示。图7-14步骤3 执行【文件】【保存】命令，保存文件。标签的默认样式为每一行前面有一个点，且四周有空隙。 十二五职业教育国家规划教材 步骤4 为了改变这种单一的标签样式，需要另创建样式表把标签的默认样式给清除掉，选择项目列表，点击“新建CSS规则”，如图7-15所示。图7-15 十二五职业教

14、育国家规划教材 在弹出的窗体中再单击“确定”按钮，在出现的“#菜单 ul的CSS规则”窗体选择“分类”中的“列表”，选列表风格样式（list-style-type）为无，如图7-16所示。再选择“方框”，把填充（padding）的top和边框（margin）的top都键入0值。图7-16 十二五职业教育国家规划教材 在弹出的窗体中再单击“确定”按钮，在出现的“#菜单 ul的CSS规则”窗体选择“分类”中的“列表”，选列表风格样式（list-style-type）为无，如图7-16所示。再选择“方框”，把填充（padding）的top和边框（margin）的top都键入0值。图7-16 十二五职

15、业教育国家规划教材 步骤5 执行【文件】【保存】命令，保存文件。在浏览器中的显示如图7-17所示。图7-17 十二五职业教育国家规划教材 2.美化完善一级纵向菜单步骤 为了能够整体修改列表中的文字显示情况，需要对body新建CSS规则，点击“新建CSS规则”按钮，在“选择器类型”中选择“标签（重新定义HTML元素）”，“选择器名称”中则键入body，如图7-18所示。图7-18 十二五职业教育国家规划教材 步骤 对body中的文字样式进行修改，如图7-19所示，在字体系列（font-family）中选择 “Verdana, Geneva, sans-serif”，字号选择18px，字体加粗，字

16、的颜色为#0e6964，行高键入24px。图7-19 十二五职业教育国家规划教材 步骤3 为“#菜单”建立CSS规则。在“分类”列表中选择“边框”，设定为上下有边，样式（Style）为实心，宽度（width）为3px，颜色（color）为#83C691，如图7-20所示。设置“#菜单”的宽度为100px，如图7-21所示。这样纵向菜单的边框就有了。图7-20图7-21 十二五职业教育国家规划教材 步骤4 框选一个li，单击“新建CSS规则”，单击确定。分别选择“分类”列表中的选项，在“背景”栏中选择背景色#CAF1F8。在“方框”中输入li的高度为35px，填充的左右为8px，上下为0px。在

17、“类型”中设定行高为35px。在“边框”中选择下边框，创建一个下边沿。 十二五职业教育国家规划教材 步骤5 通过上述设置，一个简单的纵向导航菜单就创建完成了。接下来我们为这个导航菜单创建链接。选择要添加链接的文字，如“各大新闻”，然后在其属性页面链接上输入要链接的页面网址，这里输入个#，表示为虚拟链接，不指向任何页面。如图7-22。图7-22 十二五职业教育国家规划教材 步骤6 创建一个交互方式，当鼠标划过有链接的文字时，文字显示黑色。这时需要用到:hover这个伪类。首先定义一个新标签，选择“新建CSS规则”，在“选择器类型”中选择“标签（重新定义HTML标签）”，在“选择器名称”中输入a，

18、单击“确定”后，在出现的“a的CSS规则定义”窗体的“类型”一栏中，在“Text-decoration”中选无下划线，颜色为原来的颜色#0E6964，如图7-23所示，单击“确定”后，菜单没有变化。图7-23 十二五职业教育国家规划教材 步骤7 当鼠标划过有链接的文字时，文字显示黑色。首先定义一个新标签，选择“新建CSS规则”，在“选择器类型”中选择“复合内容（基于选择的内容）”，在“选择器名称”中选择a:hover，单击“确定”后， “确定”后。 在出现的“a:hover的CSS规则定义”窗体的“类型”一栏中，在“Text-decoration”中选无下划线，颜色为#000，如图7-24所示

19、，单击“确定”。图7-24 十二五职业教育国家规划教材 步骤8 执行【文件】【保存】命令，保存文件。当鼠标划过有链接的文字时，文字显示黑色,在浏览器中的显示如图7-25所示。图7-25 十二五职业教育国家规划教材 1.创建二级纵向菜单步骤1 为“各大新闻”创建二级菜单。在代码区输入如下代码：各大新闻 国际新闻 国内新闻 体育新闻 十二五职业教育国家规划教材 步骤2 修改#菜单 ul li，给其增加一个相对定位position:relative ;属性。选择规则中的#菜单 ul li，然后选择“编辑样式”按钮，在出现的“#菜单 ul li 的CSS规则定义”中选择“定位”，设定Position为

20、relative（相对定位）。步骤3 为二级列表建立CSS规则。选择“新建CSS规则”，在“选择器类型”中选择“复合内容（基于选择的内容）”，在“选择器名称”中选择#菜单 ul li ul，单击“确定”后，在出现的“#菜单 ul li ul的CSS规则定义”窗体的“区块”一栏中，在“Display”中选无，默认状态下将隐藏。 十二五职业教育国家规划教材 步骤4 为二级菜单画框。在出现的“#菜单 ul li ul的CSS规则定义”窗体的“边框”一栏中，创建一个全框，边宽为1px，颜色为#83c691的边框，方框宽度为100px 。步骤5 为二级菜单定位。在出现的“#菜单 ul li ul的CSS规则定义”窗体的“定位”一栏中，“Position”为绝对定位，“Placement”上为0px，左为100px，单击“确定”。 十二五职业教育国家规划教材 步骤6 设置当鼠标划过后显示下级菜单的样式。选择“新建CSS规则”按钮，在“选择器类型”中选择“复合内容（基于选择的内容）”，在“