第4周：第7章 使用DIV和CSS进行页面布局

1、第7章 使用DIV和CSS进行页面布局上海外国语大学 国际工商管理学院网页布局方法表格布局缺点一旦布局定义好，无法对页面的布局方式进行动态的更改当布局复杂事，表格式布局需要多层嵌套，而一般建议表格嵌套不超过3层，但当前网页一般需要嵌套5-6层过多的嵌套解析较慢布局太复杂时，会看到大量之类的标签，不利于维护网页布局方法使用DIV和CSS布局：DIV只负责内容的区域分配，CSS负责呈现效果示例打开Dreamweaver， 新建站点CSSLayout，站点内新建images文件夹和index.html双击index.html，点击设计视图下方，属性中 页面属性，外观CSS，字号设置为9pt，页边距为

2、0插入-布局对象-DIV标签，需要指定ID号，这里指定为header，注意，插入的位置在光标所在的位置，因此必须将光标置于标签之后，必须指定ID或类，以便于应用CSS布局样式按上一步，重复，插入content和footer这两个DIV元素，查看HTML代码，注意，在HTML中，层是一种块级元素，默认情况下DIV标签会占用一行，因此，三四两步类似于放了一个1列3行的表格，宽度为100%为header添加样式：指定背景图片，选中header的div标签，（首先将图片都放入CSSlayout网站上的images文件夹里），右击CSS面板中的“全部”标签中的样式区域，从弹出的快捷菜单中选择“新建”，打

3、开新建CSS规则，窗口中选择器类型为“ID选择器”，下拉框中选择或者直接输入“header”，点击确定后，新弹出的规则定义窗口，背景分类中，指定图片为topbk2.jpgHeader层中文字删除，插入-图片，插入co.jpg，查看源代码网页布局方法使用DIV和CSS布局：DIV只负责内容的区域分配，CSS负责呈现效果示例对于内容区域content部分，需要再左侧显示导航栏，右侧显示网页的内容，因此需要在这个DIV中内嵌两个DIV，分别命名为nav和rightContent，选中content区域插入DIV（看源代码），注意，由于DIV是一种块级元素，因此这两个DIV会各占一行，为了让这两行并行

4、排列，需要使用DIV浮动特性可以通过标签选中nav标签，或者通过CSS面板直接为nav窗机一个ID选择器样式，在CSS规则编辑面板中，选择“方框”，width：105，height：500，找到float选项的下拉选择left（表示从左到右浮动），nav中插入alternate_btn.jpg，图片宽度设置为105（原本就是105），刚好填满nav标签的宽度设置rightContent样式，新建CSS，也是方框，width选择%，设置为80%，float为left，padding设置为10（表示边框离页面内容的距离，而Margin表示表示外边距的距离），选择左边定位，overflow中选择sc

5、roll对footer进行样式进行设定，指定该DIV并不浮动显示，并设置文本对齐为居中，新建CSS，针对ID，输入footer，背景中background-color为#CCC，区块text-align：center；方框float为none，margin-top为20px，内容文字改为“版权归原作者所有”CSS布局基础CSS盒模型： widthHeightBorderPaddingMargin CSS盒模型属性内边距padding属性设置，查看示例代码：C:尚珊珊工作相关上课及论文指导20-21上学期动态网页设计网页制作与网站建设实战大全（光盘源文件）Chp07CSSLayout站点CSSL

6、ayout，新建paddingdemo.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）查看效果外边距margin属性设置，查看示例代码： margindemo.html站点CSSLayout，新建margindemo.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）查看效果浮动布局属性设置，查看示例代码： floatdemo.html站点CSSLayout，新建floatdemo.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）查看效果相对定位和绝对定位浮动和定位的配合使用，可以实现网站设计人员需要创建多个表格才能创建的效果CSS中用posit

7、ion这个属性，absolute、fixed、relative、static、inheritposition属性设置，查看示例代码： positiondemo.html站点CSSLayout，新建positiondemo.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）查看效果DIV和CSS常见布局结构一列宽度固定：示例代码cssLayout1.html，核心在于设置DIV的margin属性，margin的值为auto，是的左右边保持自动相等，自行动手操作：站点CSSLayout，新建csslayout1.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）一列宽度

8、自适应：示例代码cssLayout2.html，核心在于设置DIV的margin属性，margin的值为auto，宽度不再是固定值而是80%，自行动手操作：站点CSSLayout，新建csslayout2.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）二列宽度固定：示例代码cssLayout3.html，容器内的两个div元素需要设置为float，并需要计算其所占宽度，自行动手操作：站点CSSLayout，新建csslayout3.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）DIV和CSS常见布局结构二列宽度自适应：示例代码cssLayout4.html，容器内的两个div元素需要设置为float，并需要设置宽度百分比，自行动手操作：站点CSSLayout，新建csslayout4.html通过窗口界面设置/通过代码直接设置（代码直接输入更简单）三行一列固定高度：示例代码cssLayout5.html，分别包含页眉、内