第04章网页布局.ppt
《第04章网页布局.ppt》由会员分享,可在线阅读,更多相关《第04章网页布局.ppt(23页珍藏版)》请在三一文库上搜索。
1、第四章 网页布局,本章目标,学习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布局,网页布局的操作: 新建一个网页,选择布局选项卡,单击
2、绘制层按钮; 在编辑窗口任意绘制一块区域; 选择【窗口】/【层】命令,弹出窗口; 在【层】面板中修改层(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,层的“属性”面板 层编号 层的位置:上、下、左、右 背景图
3、像 可见性 Z值 类 溢出 背景颜色 剪辑:上、下、左、右,4.3 使用表格布局,用表格布局是最简单的方法,但是有一些局限性,在定位和后期维护方面都不如Div,但是它是动态网页的局部布局的得力助手,如插入一个表单后,在插入表单的对象。 创建表格 嵌套表格 表格编辑,4.3 使用表格布局-创建表格,定位光标; 【插入】/【表格】或【常用】/“表格”按钮或【Ctrl+Alt+T】,弹出表格对话框; 在对话框中进行设置,如行数、列数、表格宽度、边框和单元格边距等,【确定】,4.3 使用表格布局-嵌套表格,定位光标到需要插入表格的单元格内,使用前面讲的“创建表格”的命令。,4.3 使用表格布局-表格编
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 04 网页 布局
链接地址:https://www.31doc.com/p-2593396.html