第9章网页的布局综合练习.pptVIP

网页的布局综合练习 自学内容 9.1??案例1：用布局表格布局网页 9.2 案例2：用框架布局网页 9.3 案例3：利用AP Div布局网页版面 9.4 案例4：将表格转换为AP Div布局 先进行页面布局，后制作！！！ 在添加具体的网页内容之前，首先应该对网页进行合理的版面布局，确定什么地方要安放什么内容，或什么地方要实现什么效果。网页的版面布局是网页设计中需要最先考虑的步骤，同时也是最重要的步骤。只有合理进行版面布局，才能制作出美观的页面，而且便于日后的维护和修改。 9.1?? 案例1：用布局表格布局网页 【案例目的】利用表格和单元格来设计网页，效果见图9-1。 【核心知识】结合分栏方式在“布局模式”中用布局表格进行网页布局。 9.1.1 布局顶部绘制 1. 新建一个网页文档，将其保存为index.html。切换到“布局”工具栏，如图9-2所示。 2. 执行“查看”－“表格模式”－“布局模式”命令，Dreamweaver弹出一个“从布局模式开始”对话框，如图9-3所示。 3. 单击“确定”按钮，进入表格布局模式，单击“布局”工具栏上“绘制布局表格”按钮，鼠标变成“＋”形状，通过拖曳鼠标绘制出一个宽为781像素、高为120像素的布局表格，如图9-4所示。 4. 在表格左上角绘制出一个宽为652像素、高为90像素的单元格，用来放置banner，如图9-5所示。 紧靠banner单元格右边线绘制一个单元格，大小129×90像素，紧贴这一行的下边线在下面绘制出一个宽为781像素、高为30像素的单元格做导航条，效果如图9-6所示。 9.1.2 布局主体绘制 1. 单击“布局”工具栏上“绘制布局表格”按钮，按住【Ctrl】键，拖曳鼠标在图9-6部分布局表格下面绘制一个781×10像素的布局表格，做为两部分之间的分隔。再在下面绘制一个781×450像素的布局表格，用来放置网页的主要内容，如图9-7所示。 2. 在主体布局表格里靠左并列绘制两个大小分别为200×450像素和20×450像素的布局表格，把主体部分分成左中右3列，中间1列为分隔之用，左右分别用来放置相关信息和具体内容，效果如图9-8所示。 3. 在左列表格中，绘制200×25像素、200×125像素、200×25像素、200×125像素、200×25像素和200×125像素的六个布局表格，如图9-9所示。 4. 在右列表格中，单击“绘制布局表格”按钮，按住【Ctrl】键，绘制561×35像素、290×160像素的两个布局表格，在旁边出现两条白色的网格线，如图9-10所示。 5. 同样，在下半部分绘制一个561×35像素的布局表格，根据网格线再在下面绘制左右两个表格，如图9-11所示。 9.1.3 布局底部信息 1. 绘制一个781×10像素的布局表格与主体部分相分隔。 2. 紧靠下边绘制一个781×40像素的布局表格。 如图9-12所示，网页的布局基本完成。 9.1.4 美化网页 选中要操作的布局表格，表格4个边缘出现9个控制点为选中状态，执行“窗口”－“属性”命令或者按【Ctrl+F3】组合键调出“属性”对话框，单击“背景颜色”右边的小方框选择合适的颜色，如图9-13所示。 单击【退出】按钮，退出“布局模式”，添加网页内容，按F12键进行预览，效果如图9-1所示。 9.2 案例2：用框架布局网页 【案例目的】利用框架来设计网页，效果见图9-14。 【核心知识】使用上方和下方框架进行网页布局。 9.2.1 创建框架网页 1. 新建一个网页文档，切换到“布局”工具栏，单击其中的【框架】按钮，在弹出的下拉菜单中选择“上方和下方框架”，如图9-15所示。 2. Dreamweaver弹出“框架标签辅助功能属性”对话框，如图9-16所示。 在此为每一个框架指定标题，然后单击【确定】按钮，页面被分成上、中、下三个框架， 如图9-17所示。 3. 单击“窗口”－“框架”命令或按【Shift+F2】组合键调出“框架”面板。单击“框架”面板上的mainFrame框架，框架外有黑色框表示现在处于此框架内（在文档编辑窗口中，被选中的框架边框以虚线显示），如图9-18所示。 4. 再次单击“布局”工具栏上的【框架】按钮，在弹出的下拉菜单中选择“左侧框架”在mainFrame中嵌套一个框架集，如图9-19所示，框架mainFrame被分隔成左右两个部分。 5. 单击“文件”－“保存全部”命令，在弹出对话框的同时，文档窗口中出现一个粗边框，显示当前要保存的框架集或框架，首先弹出的是保存框架集页面的对话框，将其保存为index.html，如图9-20所示。 9.2.2 编辑各框架内的网页文档 1. 将光标定位在上框架，“文档”工具栏上文件名变为top.html