网页布局.ppt

第四章 网页布局,本章目标,学习DIV+CSS布局 如何编辑DIV 学习使用表格布局 学习使用框架布局 学会一个网页布局实例,本章内容,4.4 使用框架布局,4.3 使用表格布局,4.2 编辑DIV,4.1 DIV+CSS布局,4.5 网页布局实例练习,4.1 DIV+CSS布局,DIV+CSS布局是网页新的布局方式，它的出现让网页内容和表现形式真正的分离，更好的实现了网页的后期维护。 在Dreamweaver CS3中，DIV是层的意思；负责网页内容，CSS是层叠样式表，负责内容的表现形式，也包括DIV的属性。,4.1 DIV+CSS布局,网页布局的操作： 新建一个网页，选择布局选项卡，单击绘制层按钮； 在编辑窗口任意绘制一块区域； 选择【窗口】/【层】命令，弹出窗口； 在【层】面板中修改层（AP元素）的名称。,4.1 DIV+CSS布局,单击【CSS样式】，单击 按钮，弹出“新建CSS规则”对话框，【确定】,4.1 DIV+CSS布局,在“#xx的CSS规则定义”对话框设置，单击【确定】,4.2 编辑DIV,在【层】面板中修改层（AP元素）的名称和 Z值；,4.2 编辑DIV,选择层（Div） 选择单个Div 可以在编辑区/面板中操作； 选择多个Div，按【Shift】辅助。 调整层 拖动 调整大小,4.2 编辑DIV,层的“属性”面板 层编号 层的位置：上、下、左、右 背景图像 可见性 Z值 类 溢出 背景颜色 剪辑：上、下、左、右,4.3 使用表格布局,用表格布局是最简单的方法，但是有一些局限性，在定位和后期维护方面都不如Div，但是它是动态网页的局部布局的得力助手，如插入一个表单后，在插入表单的对象。 创建表格 嵌套表格 表格编辑,4.3 使用表格布局-创建表格,定位光标； 【插入】/【表格】或【常用】/“表格”按钮或【Ctrl+Alt+T】，弹出表格对话框； 在对话框中进行设置，如行数、列数、表格宽度、边框和单元格边距等，【确定】,4.3 使用表格布局-嵌套表格,定位光标到需要插入表格的单元格内，使用前面讲的“创建表格”的命令。,4.3 使用表格布局-表格编辑,选择表格 选择整个表格：单击表格的任意边框； 选择整行：将光标停留在表格的上端，鼠标发生变化后单击列； 选择整列：将光标停留在表格的左端，鼠标发生变化后单击行； 选择单元格 选单个单元格：将鼠标移到要选择的单元格，单击； 选择相邻的多个单元格：将鼠标移到一个单元格，按住鼠标左键不放和拖动，到需要的单元格放开； 选择不相邻的多个单元格：按住【Ctrl】不放，选择单元格。,4.3 使用表格布局-表格编辑,拆分单元格 将光标定位到要拆分的单元格，单击【属性】面板左下角的“拆分”图标或鼠标右键，在弹出菜单选择“表格”“拆分单元格”命令，在对话框设置后点【确定】； 合并单元格 选择相邻的多个单元格，单击【属性】面板的“合并”图标或鼠标右键，在弹出菜单选择“表格”“合并单元格”命令。,4.4 使用框架布局,网页布局的三种方式（层、表格、框架）之一，适用于一部分发生变化，一部分不变化的情况，如后台管理。 创建框架集的两种方法：直接创建预定义框架集和在已有页面加载预定义框架集。,4.4 使用框架布局创建框架集,直接创建预定义框架集 启动工作环境，【文件】/【新建】，在弹出对话框选择【框架集】； 选择合适的预定义框架集，【确定】； 设置辅助属性，【确定】。,4.4 使用框架布局创建框架集,加载预定义框架集 新建网页，选择【布局】选项卡，单击“框架”按钮，选择合适的框架集； 设置辅助属性，【确定】。,4.4 使用框架布局编辑框架集,当创建的框架集不能满足要求时，需要编辑框架集； 选择框架 在编辑窗口选择框架：按住【Alt】，鼠标单击框架； 在框架属性面板中单击框架；,4.4 使用框架布局编辑框架集,选择框架集 在编辑窗口中选择框架集：单击框架集边框； 在属性面板中选择：单击面板中的框架集边框。 调整框架大小 鼠标移到框架边线，鼠标形状变化后，按住左键拖动； 拆分框架 鼠标移到框架边线，鼠标形状变化后，按住左键拖动；,4.4 使用框架布局保存框架和框架集,【文件】/【保存全部】命令，先命名和保存框架集，然后命名和保存框架网页文件。,4.5 网页布局实例练习,启动工作环境，新建网页； 选择“层”，绘制区域； 修改“层”名称； 参照前面方法绘制不同区域； 修改所有层的Z值为1； 在需要的地方添加表格； 保存。,本章总结,学习了DIV+CSS布局 学习了如何编辑DIV 学习了使用表格布局 学习了使用框架布局,