网页设计与制作案例教程第9章.pptVIP

9.4 案例4：将表格转换为AP Div布局 1. 在网页中制作2行1列的表格，分别插入图片和文字，如图9-37所示。 2.　选择“修改”?“转换”?“将表格转换为AP Div”命令，在弹出的“将表格转换为AP Div”对话框中根据需要进行相应的设置即可，如图9-38所示。 图9-37 选择表格 图9-38 “将表格转换为AP Div”对话框 3. 单击“确定”，即可将表格转换为AP Div布局，如图9-39所示。其中两个单元分别转换为两个AP Div元素，这样在拖动时就比较方便。 图9-39 将表格转换为AP Div 9.5 案例5：在网页中使用Spry布局对象 【案例目的】在网页布局中使用Spry各个控件，效果见图9-40。 【核心知识】Spry各个控件的插入和编辑。 图9-40 在网页中使用Spry控件进行布局 9.5.1 插入Spry菜单栏 1. 新建一个网页文档，将其保存为index.html。插入一个5行１列的表格，在表格的第1行插入图像，如图9-41所示。 图9-41 在表格中插入图像 2. 将光标定位在第2行，插入Spry菜单栏，如图9-42所示。或者单击“布局”工具栏中的“Spry菜单栏”按钮，Dreamweaver弹出一个“Spry菜单栏”对话框，如图9-43所示。 图9-42 在表格中插入Spry菜单栏 图9-43 Spry菜单栏对话框 3. 直接单击“确定”按钮，在页面中添加了一个横向水平的放置的“Spry菜单栏”控件，如图9-44所示。 图9-44插入水平放置的Spry菜单栏 第9章 网页的布局 9.1?? 案例1：用布局表格布局网页 9.2 案例2：用框架布局网页 9.3 案例3：利用AP Div布局网页版面 9.4 案例4：将表格转换为AP Div布局 9.5 案例5：在网页中使用Spry布局对象 9.6 习题 在添加具体的网页内容之前，首先应该对网页进行合理的版面布局，确定什么地方要安放什么内容，或什么地方要实现什么效果。网页的版面布局是网页设计中需要最先考虑的步骤，同时也是最重要的步骤。只有合理进行版面布局，才能制作出美观的页面，而且便于日后的维护和修改。 Dreamweaver提供了利用HTML进行网页布局的方法，比较常用的是在“布局”模式下利用表格布局，或者框架布局。Dreamweaver CS3还提供了一个布局对象AP Div，它相当于一个容器，包含了所有HTML文件中出现的元素，如文本、图像和Flash等。通过将AP Div拖到页面的任意位置，可以精确定位页面对象。Spry框架是Dreamweaver CS3新增加的一个功能，它是一个JavaScript库，可以使用它构建更丰富的Web页面，在文档中通过创建Spry框架可以向各种页面元素中添加不同种类的效果。 9.1?? 案例1：用布局表格布局网页 【案例目的】利用表格和单元格来设计网页，效果见图9-1。 【核心知识】结合分栏方式在“布局模式”中用布局表格进行网页布局。 图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. 在表格左上角绘制出一个宽为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-7所示。 图9-7 主体部分布局表格 2. 在主体布局表格里靠左并列绘制两个大小分别为200×450像素和20×450像素的布局表格，把主体部分分成左中右3列，中间1列为分隔之用，左右分别用来放置相关信息和具体内容，效果如图9-8所示。 图9-8 分隔后的主体部分表格 3. 在左列表格中，绘制200