周欣然《网页设计技术与应用》第7章　Div+CSS 布局 2013.pptVIP

第7章　 Div+CSS布局 7.1 应用Div+CSS布局页面　 7.2　Div标签的使用 7.3 CSS布局模型 7.1　应用Div+CSS布局页面 1 案例综述 　7.1　应用Div+CSS布局页面 2 案例分析 7.1　应用Div+CSS布局页面 区块元素Div的几何参数（CSS盒模型） 　7.1　应用Div+CSS布局页面 3　实现步骤 1）定义基本CSS样式 　 7.1　应用Div+CSS布局页面 1） 定义基本CSS样式 （具体操作） 　 7.1　应用Div+CSS布局页面 1） 定义基本CSS样式 2） 搭建布局结构 　 7.1　应用Div+CSS布局页面 1） 定义基本CSS样式 2） 搭建布局结构 3） 定义Div标签的 CSS样式 　 7.1　应用Div+CSS布局页面 1） 定义基本CSS样式 2） 搭建布局结构 3） 定义Div标签的 CSS样式 　 7.1　应用Div+CSS布局页面 1） 定义基本CSS样式 2） 搭建布局结构 3） 定义Div标签的 CSS样式 4） 页面内容制作 　7.2　Div标签的使用 (具体操作) 1　插入Div标签 　7.2　Div标签的使用 (具体操作) 　7.2　Div标签的使用 2　编辑Div标签 向 Div 标签中添加内容。 方法： 将插入点放在 Div 标签中，然后就像在页面中添加内容那样添加内容。 在 Div 标签中放置插入点以添加内容 ? 在该标签边框内的任意位置单击。 更改 Div 标签中的占位符文本 ? 选择该文本，然后在它上面键入内容或按 Delete 键。 　7.2　Div标签的使用 3　CSS布局块 7.2 Div标签的使用 4 AP Div元素 (层) 7.2 Div标签的使用 2) 激活和选中AP Div 7.2 Div标签的使用 3) 设置AP Div的属性 CSS－P元素：为选择的AP Div指定一个惟一的名称。 左和上：距页面或父AP元素的左上角相对位置 宽和高：AP元素的宽度和高度。 Z轴：AP元素的重叠顺序。 可见性：AP元素的初始显示状况（可见或隐藏） 背景图像、背景颜色： 溢出：确定当AP元素中内容超出设定大小时要采取的行动。 剪辑：定义AP元素的可见区域，并用于将该范围外的内容裁剪掉。 7.2 Div标签的使用 4) AP元素的编辑 7.2 Div标签的使用 5) AP元素面板的使用 打开AP元素面板:选择【窗口】｜【其他】｜【AP元素】命令，或按F2键，可打开【AP元素】面板 。 7.2 Div标签的使用 5.AP元素面板的使用 ① 选定某个AP元素: 在“AP元素”面板列表中单击AP元素 ② 更改AP元素名 双击AP元素名称，输入新的AP元素名称。 ③ 显示、隐藏AP元素 单击“AP元素”面板左边的显示与隐藏列，可显示或隐藏该AP元素。 7.2 Div标签的使用 6) AP元素与表格互换 ① 表格转换为AP元素 表格布局，调整起来比较麻烦。而把表格布局转换为AP元素布局，通过移动AP元素来调整布局，既方便又快捷。 方法： a) 选中要转换为AP元素的表格。 b) 选择“修改”｜“转换”｜“表格到AP元素”命令， “转换表格为AP元素”对话框。 c) 在“转换表格为AP元素”对话框中可进行如下设置。 7.2 Div标签的使用 6) AP元素与表格互换 ② 将AP元素转换为表格 问题：不是所有的浏览器都支持AP元素。 解决方法：使用AP元素创建网页布局，然后将AP元素转换为表格。 a) 打开要将AP Div转换为表格的页面。 b) 选择“修改”｜“转换”｜“将AP Div转换为表格”命令，系统将打开“将 AP Div转换为表格”对话框。 c) 在“表格布局”区域中，可以根据需要设置相关选项 7.3 CSS 布局 在CSS布局时，需要针对不同的元素使用不同的“块”元素进行包含，用CSS定义这些“块”元素的位置就能快速组合成页面画面。 通过“块”元素和CSS，设计人员在设计之初只需要考虑“块”元素中的内容，对于“块”元素的位置布局则通过CSS来获得，这使得网页的设计“内容”和“表现”的相分离。 7.3 CSS布局 1 CSS盒模型 CSS盒子模型具有高度(height)、宽度(width)、边框(border)、外边距(margin)、内边距（padding）等属性 7.3 CSS布局 1 CSS盒模型 内边距 7.3 CSS布局 1 CSS盒模型 外边距 7.3 CSS布局 1 CSS盒模型 边框 7.3 CSS布局 2