Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第9章.ppt

《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第9章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章网页的布局9.1案例1：用布局表格布局网页9.2案例2：用框架布局网页9.3案例3：利用APDiv布局网页版面9.4案例4：将表格转换为APDiv布局9.5案例5：在网页中使用Spry布局对象9.6习题在添加具体的网页内容之前，首先应该对网页进行合理的版面布局，确定什么地方要安放什么内容，或什么地方要实现什么效果。网页的版面布局是网页设计中需要最先考虑的步骤，同时也是最重要的步骤。只有合理进行版面布局，才能制作出美观的页面，而且便于日后的维护和修改。Dreamweaver提供了利用HTML进行网页布局的方法，比较常用的是在“布局”模式下利用

2、表格布局，或者框架布局。DreamweaverCS3还提供了一个布局对象APDiv，它相当于一个容器，包含了所有HTML文件中出现的元素，如文本、图像和Flash等。通过将APDiv拖到页面的任意位置，可以精确定位页面对象。Spry框架是DreamweaverCS3新增加的一个功能，它是一个JavaScript库，可以使用它构建更丰富的Web页面，在文档中通过创建Spry框架可以向各种页面元素中添加不同种类的效果。9.1案例1：用布局表格布局网页【案例目的】利用表格和单元格来设计网页，效果见图9-1。【核心知识】结合分栏方式在“布局模式”中用布局

3、表格进行网页布局。图9-1使用布局表格制作的网页9.1.1布局顶部绘制1.新建一个网页文档，将其保存为index.html。切换到“布局”工具栏，如图9-2所示。2.执行“查看”－“表格模式”－“布局模式”命令，Dreamweaver弹出一个“从布局模式开始”对话框，如图9-3所示。图9-2布局工具栏图9-3“从布局工具栏开始”对话框3.单击“确定”按钮，进入表格布局模式，单击“布局”工具栏上“绘制布局表格”按钮，鼠标变成“＋”形状，通过拖曳鼠标绘制出一个宽为990像素、高为120像素的布局表格，如图9-4所示。图9-4绘制表格布局4.在表格左上

4、角绘制出一个宽为652像素、高为90像素的单元格，用来放置banner，如图9-5所示。紧靠logo单元格右边线绘制一个单元格，大小129×90像素，紧贴这一行的下边线在下面绘制出一个宽为990像素、高为30像素的单元格做导航条，效果如图9-6所示。图9-5绘制布局单元格图9-6顶部表格布局效果9.1.2布局主体绘制1.单击“布局”工具栏上“绘制布局表格”按钮，按住【Ctrl】键，拖曳鼠标在图9-6部分布局表格下面绘制一个990×10像素的布局表格，做为两部分之间的分隔。再在下面绘制一个990×450像素的布局表格，用来放置网页的主要内容，如图9

5、-7所示。图9-7主体部分布局表格2.在主体布局表格里靠左并列绘制两个大小分别为200×450像素和20×450像素的布局表格，把主体部分分成左中右3列，中间1列为分隔之用，左右分别用来放置相关信息和具体内容，效果如图9-8所示。图9-8分隔后的主体部分表格3.在左列表格中，绘制200×25像素、200×125像素、200×25像素、200×125像素、200×25像素和200×125像素的六个布局表格，如图9-9所示。图9-9主体部分左列布局表格4.在右列表格中，单击“绘制布局表格”按钮，按住【Ctrl】键，绘制560×35像素、290×160

6、像素的两个布局表格，在旁边出现两条白色的网格线，如图9-10所示。图9-10出现白色网格线5.同样，在下半部分绘制一个560×35像素的布局表格，根据网格线再在下面绘制左右两个表格，如图9-11所示。图9-11主体部分右列布局表格效果9.1.3布局底部信息1.绘制一个990×10像素的布局表格与主体部分相分隔。2.紧靠下边绘制一个990×40像素的布局表格。如图9-12所示，网页的布局基本完成。图9-12底部布局表格9.1.4美化网页选中要操作的布局表格，表格4个边缘出现9个控制点为选中状态，执行“窗口”－“属性”命令或者按【Ctrl+F3】组合

7、键调出“属性”对话框，单击“背景颜色”右边的小方框选择合适的颜色，如图9-13所示。单击【退出】按钮，退出“布局模式”，添加网页内容，按F12键进行预览，效果如图9-1所示。图9-13为布局表格设置背景颜色9.2案例2：用框架布局网页【案例目的】利用框架来设计网页，效果见图9-14。【核心知识】使用上方和下方框架进行网页布局。图9-14使用框架制作的网页9.2.1创建框架网页1.新建一个网页文档，切换到“布局”工具栏，单击其中的【框架】按钮，在弹出的下拉菜单中选择“上方和下方框架”，如图9-15所示。图9-15插入框架2.Dreamweaver弹

8、出“框架标签辅助功能属性”对话框，如图9-16所示。在此为每一个框架指定标题，然后单击【确定】按钮，页面被分成上、中、下三个框架，如图9