设计Web页面布局分析优秀PPT.ppt

《设计Web页面布局分析优秀PPT.ppt》由会员分享，可在线阅读，更多相关《设计Web页面布局分析优秀PPT.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网站规划与网页设计（第3版）9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局9.2 AP9.2 AP元素元素元素元素9.3 9.3 框架框架框架框架9.4 9.4 样式表样式表样式表样式表9.5 9.5 模板模板模板模板第第9章章 设计设计Web页面布局页面布局 创建页布局的一种常用的方法是运用创建页布局的一种常用的方法是运用创建页布局的一种常用的方法是运用创建页布局的一种常用的方法是运用HTMLHTML表格对元素进表格对元素进表格对元素进表格对元素进行定位。但是，运用表格进行布局不太便利，因为最初创建表行定位。但是，运用表格进行

2、布局不太便利，因为最初创建表行定位。但是，运用表格进行布局不太便利，因为最初创建表行定位。但是，运用表格进行布局不太便利，因为最初创建表格是为了显示表格数据，而不是用于对格是为了显示表格数据，而不是用于对格是为了显示表格数据，而不是用于对格是为了显示表格数据，而不是用于对WebWeb页进行布局。为了页进行布局。为了页进行布局。为了页进行布局。为了简化运用表格进行页面布局的过程，简化运用表格进行页面布局的过程，简化运用表格进行页面布局的过程，简化运用表格进行页面布局的过程，DreamweaverDreamweaver供应了供应了供应了供应了“布布布布局局局局”模式。模式。模式。模式。在在在在“布

3、局布局布局布局”模式中，用户可以运用表格作为基础结构来设模式中，用户可以运用表格作为基础结构来设模式中，用户可以运用表格作为基础结构来设模式中，用户可以运用表格作为基础结构来设计页，同时避开了运用传统的方法创建基于表格的设计时常常计页，同时避开了运用传统的方法创建基于表格的设计时常常计页，同时避开了运用传统的方法创建基于表格的设计时常常计页，同时避开了运用传统的方法创建基于表格的设计时常常出现的一些问题。出现的一些问题。出现的一些问题。出现的一些问题。9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局9.1.1 “9.1.1 “布局

4、布局布局布局”模式的概念模式的概念模式的概念模式的概念 在在在在“布局布局布局布局”模式中，用户可以在添加内容前运用布局单元格模式中，用户可以在添加内容前运用布局单元格模式中，用户可以在添加内容前运用布局单元格模式中，用户可以在添加内容前运用布局单元格和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制一个单元格用于放置标题图形，在页面的左边绘制另一个单元一个单元格用于放置标题图形，在页面的左边绘制另一个单元一个单元格用于放置标题图

5、形，在页面的左边绘制另一个单元一个单元格用于放置标题图形，在页面的左边绘制另一个单元格用于放置导航条，在右边绘制第三个单元格用于放置内容。格用于放置导航条，在右边绘制第三个单元格用于放置内容。格用于放置导航条，在右边绘制第三个单元格用于放置内容。格用于放置导航条，在右边绘制第三个单元格用于放置内容。添加内容时，可以按须要在其四周移动单元格，以调整布局。添加内容时，可以按须要在其四周移动单元格，以调整布局。添加内容时，可以按须要在其四周移动单元格，以调整布局。添加内容时，可以按须要在其四周移动单元格，以调整布局。页面上显示的布局表特别框为绿色，而布局单元特别框为蓝色。页面上显示的布局表特别框为绿

6、色，而布局单元特别框为蓝色。页面上显示的布局表特别框为绿色，而布局单元特别框为蓝色。页面上显示的布局表特别框为绿色，而布局单元特别框为蓝色。当用户将鼠标指针移到表格单元格上时，当用户将鼠标指针移到表格单元格上时，当用户将鼠标指针移到表格单元格上时，当用户将鼠标指针移到表格单元格上时，DreamweaverDreamweaver会高亮会高亮会高亮会高亮显示该单元格。显示该单元格。显示该单元格。显示该单元格。9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局9.1.2 “9.1.2 “标准标准标准标准”模式与模式与模式与模式与“布局布局

7、布局布局”模式的切换模式的切换模式的切换模式的切换 在绘制布局表格或布局单元格之前，必需从在绘制布局表格或布局单元格之前，必需从在绘制布局表格或布局单元格之前，必需从在绘制布局表格或布局单元格之前，必需从“标准标准标准标准”模式切模式切模式切模式切换到换到换到换到“布局布局布局布局”模式。模式。模式。模式。1 1“标准标准标准标准”模式切换到模式切换到模式切换到模式切换到“布局布局布局布局”模式模式模式模式 要切换到要切换到要切换到要切换到“布局布局布局布局”模式，可以执行以下操作之一：模式，可以执行以下操作之一：模式，可以执行以下操作之一：模式，可以执行以下操作之一：假如用户正在代码视图中工

8、作，则选择假如用户正在代码视图中工作，则选择假如用户正在代码视图中工作，则选择假如用户正在代码视图中工作，则选择“查看查看查看查看”“”“设计设计设计设计”菜单菜单菜单菜单吩咐或吩咐或吩咐或吩咐或“查看查看查看查看”“”“代码和设计代码和设计代码和设计代码和设计”菜单吩咐。菜单吩咐。菜单吩咐。菜单吩咐。选择选择选择选择“查看查看查看查看”“”“表格模式表格模式表格模式表格模式”“”“布局模式布局模式布局模式布局模式”菜单吩咐，在文档窗菜单吩咐，在文档窗菜单吩咐，在文档窗菜单吩咐，在文档窗口的顶部会出现标有口的顶部会出现标有口的顶部会出现标有口的顶部会出现标有“布局模式布局模式布局模式布局模式”

9、的横条。的横条。的横条。的横条。2 2“布局布局布局布局”模式切换到模式切换到模式切换到模式切换到“标准标准标准标准”模式模式模式模式 要切换出要切换出要切换出要切换出“布局布局布局布局”模式，可以执行以下操作之一：模式，可以执行以下操作之一：模式，可以执行以下操作之一：模式，可以执行以下操作之一：在文档窗口的顶部，单击在文档窗口的顶部，单击在文档窗口的顶部，单击在文档窗口的顶部，单击“布局模式布局模式布局模式布局模式”后的后的后的后的“退出退出退出退出”项，如图项，如图项，如图项，如图9-39-3所示。所示。所示。所示。选择选择选择选择“查看查看查看查看”“”“表模式表模式表模式表模式”“”

10、“标准模式标准模式标准模式标准模式”菜单吩咐。菜单吩咐。菜单吩咐。菜单吩咐。9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局9.1.3 9.1.3 在在在在“布局布局布局布局”模式下绘制布局单元格和表格模式下绘制布局单元格和表格模式下绘制布局单元格和表格模式下绘制布局单元格和表格1 1绘制布局单元格和表格绘制布局单元格和表格绘制布局单元格和表格绘制布局单元格和表格（1 1）绘制布局单元格）绘制布局单元格）绘制布局单元格）绘制布局单元格 确保设计处于确保设计处于确保设计处于确保设计处于“布局布局布局布局”模式下。模式下。模式下。模式

11、下。在插入面板的在插入面板的在插入面板的在插入面板的“布局布局布局布局”分类中单击分类中单击分类中单击分类中单击“绘制布局单元格绘制布局单元格绘制布局单元格绘制布局单元格”按钮按钮按钮按钮 ，鼠，鼠，鼠，鼠标指针变为加号（标指针变为加号（标指针变为加号（标指针变为加号（+）形态。）形态。）形态。）形态。将鼠标指针移到要起先绘制单元格的位置单击，然后按住鼠将鼠标指针移到要起先绘制单元格的位置单击，然后按住鼠将鼠标指针移到要起先绘制单元格的位置单击，然后按住鼠将鼠标指针移到要起先绘制单元格的位置单击，然后按住鼠标左键拖动以创建布局单元格。标左键拖动以创建布局单元格。标左键拖动以创建布局单元格。标左

12、键拖动以创建布局单元格。（2 2）绘制布局表格）绘制布局表格）绘制布局表格）绘制布局表格 确保设计处于确保设计处于确保设计处于确保设计处于“布局布局布局布局”模式下。模式下。模式下。模式下。在插入面板的在插入面板的在插入面板的在插入面板的“布局布局布局布局”分类中单击分类中单击分类中单击分类中单击“绘制布局表格绘制布局表格绘制布局表格绘制布局表格”按钮按钮按钮按钮 ，鼠标，鼠标，鼠标，鼠标指针变为加号（指针变为加号（指针变为加号（指针变为加号（+）形态。）形态。）形态。）形态。在页面上单击然后按住鼠标左键拖动以创建布局表格，在页在页面上单击然后按住鼠标左键拖动以创建布局表格，在页在页面上单击然

13、后按住鼠标左键拖动以创建布局表格，在页在页面上单击然后按住鼠标左键拖动以创建布局表格，在页面上显示的布局表特别框为绿色。面上显示的布局表特别框为绿色。面上显示的布局表特别框为绿色。面上显示的布局表特别框为绿色。9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局9.1.3 9.1.3 在在在在“布局布局布局布局”模式下绘制布局单元格和表格模式下绘制布局单元格和表格模式下绘制布局单元格和表格模式下绘制布局单元格和表格2 2绘制嵌套布局表格绘制嵌套布局表格绘制嵌套布局表格绘制嵌套布局表格 用户可以将一个布局表格绘制在另一个布局表格中，创建

14、嵌用户可以将一个布局表格绘制在另一个布局表格中，创建嵌用户可以将一个布局表格绘制在另一个布局表格中，创建嵌用户可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元套表格。对外部表格所进行的更改不会影响嵌套表格中的单元套表格。对外部表格所进行的更改不会影响嵌套表格中的单元套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格。例如，当用户更改外部表格中行或列的大小时，内部表格格。例如，当用户更改外部表格中行或列的大小时，内部表格格。例如，当用户更改外部表格中行或列的大小时，内部表格格。例如，当用户更改外部表格中行或列的大小时，内部表格中单元格的

15、大小不发生变更。用户可以插入多级嵌套表格，但中单元格的大小不发生变更。用户可以插入多级嵌套表格，但中单元格的大小不发生变更。用户可以插入多级嵌套表格，但中单元格的大小不发生变更。用户可以插入多级嵌套表格，但要留意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套要留意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套要留意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套要留意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套布局表格的操作步骤如下。布局表格的操作步骤如下。布局表格的操作步骤如下。布局表格的操作步骤如下。确保设计处于确保设计处于确保设计处于确保设计处于“布局布局布局布局”模式下。模式下

16、。模式下。模式下。在插入面板的在插入面板的在插入面板的在插入面板的“布局布局布局布局”分类中单击分类中单击分类中单击分类中单击“绘制布局表格绘制布局表格绘制布局表格绘制布局表格”按钮按钮按钮按钮 ，鼠标，鼠标，鼠标，鼠标指针变为加号（指针变为加号（指针变为加号（指针变为加号（+）形态。）形态。）形态。）形态。在现有布局表格中的空白（灰色）区域中单击，然后按住鼠在现有布局表格中的空白（灰色）区域中单击，然后按住鼠在现有布局表格中的空白（灰色）区域中单击，然后按住鼠在现有布局表格中的空白（灰色）区域中单击，然后按住鼠标左键拖动以创建嵌套布局表格。标左键拖动以创建嵌套布局表格。标左键拖动以创建嵌套布

17、局表格。标左键拖动以创建嵌套布局表格。9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局9.1.4 9.1.4 调整布局单元格和表格的大小及位置调整布局单元格和表格的大小及位置调整布局单元格和表格的大小及位置调整布局单元格和表格的大小及位置1 1调整布局单元格的大小及位置调整布局单元格的大小及位置调整布局单元格的大小及位置调整布局单元格的大小及位置（1 1）调整布局单元格的大小）调整布局单元格的大小）调整布局单元格的大小）调整布局单元格的大小（2 2）调整布局单元格的位置）调整布局单元格的位置）调整布局单元格的位置）调整布局单元格的

18、位置2 2调整布局表格的大小及位置调整布局表格的大小及位置调整布局表格的大小及位置调整布局表格的大小及位置（1 1）调整布局表格的大小）调整布局表格的大小）调整布局表格的大小）调整布局表格的大小（2 2）移动布局表格）移动布局表格）移动布局表格）移动布局表格9.1.5 9.1.5 将内容添加到布局单元格中将内容添加到布局单元格中将内容添加到布局单元格中将内容添加到布局单元格中 在在在在“布局布局布局布局”模式下，用户可以将文本、图像和其他内容添模式下，用户可以将文本、图像和其他内容添模式下，用户可以将文本、图像和其他内容添模式下，用户可以将文本、图像和其他内容添加到布局单元格中，就像在加到布局

19、单元格中，就像在加到布局单元格中，就像在加到布局单元格中，就像在“标准标准标准标准”模式下将内容添加到表格模式下将内容添加到表格模式下将内容添加到表格模式下将内容添加到表格单元格中一样。单元格中一样。单元格中一样。单元格中一样。【案例案例案例案例9-19-1】制作世界名车展示网页。制作世界名车展示网页。制作世界名车展示网页。制作世界名车展示网页。9.1 9.1 运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局运用布局模式对页进行布局 AP AP元素（确定定位元素）是安排有确定位置的元素（确定定位元素）是安排有确定位置的元素（确定定位元素）是安排有确定位置的元素（确定定位

20、元素）是安排有确定位置的HTMLHTML页面页面页面页面元素，具体地说，就是元素，具体地说，就是元素，具体地说，就是元素，具体地说，就是DivDiv标签或其它任何标签。标签或其它任何标签。标签或其它任何标签。标签或其它任何标签。APAP元素可以元素可以元素可以元素可以包含文本、图像或其它任何可放置到包含文本、图像或其它任何可放置到包含文本、图像或其它任何可放置到包含文本、图像或其它任何可放置到HTMLHTML文档正文中的内容。文档正文中的内容。文档正文中的内容。文档正文中的内容。在设计网页时，必需对页面元素进行定位，使页面布局整在设计网页时，必需对页面元素进行定位，使页面布局整在设计网页时，必

21、需对页面元素进行定位，使页面布局整在设计网页时，必需对页面元素进行定位，使页面布局整齐、美观。齐、美观。齐、美观。齐、美观。APAP元素可以放置在页面的随意位置，运用元素可以放置在页面的随意位置，运用元素可以放置在页面的随意位置，运用元素可以放置在页面的随意位置，运用APAP元素可元素可元素可元素可以以像素为单位来精确定位页面元素。把页面元素置入以以像素为单位来精确定位页面元素。把页面元素置入以以像素为单位来精确定位页面元素。把页面元素置入以以像素为单位来精确定位页面元素。把页面元素置入APAP元素元素元素元素中，可以限制某个中，可以限制某个中，可以限制某个中，可以限制某个APAP元素显示在前

22、面还是后面，显示还是隐藏。元素显示在前面还是后面，显示还是隐藏。元素显示在前面还是后面，显示还是隐藏。元素显示在前面还是后面，显示还是隐藏。协作时间轴的运用，可同时移动一个或多个协作时间轴的运用，可同时移动一个或多个协作时间轴的运用，可同时移动一个或多个协作时间轴的运用，可同时移动一个或多个APAP元素，从而轻松元素，从而轻松元素，从而轻松元素，从而轻松制作出动态效果。制作出动态效果。制作出动态效果。制作出动态效果。9 9.2 2 AP AP元素元素元素元素9.2.1 AP9.2.1 AP元素的基本操作元素的基本操作元素的基本操作元素的基本操作 AP AP元素的基本操作包括：创建元素的基本操作

23、包括：创建元素的基本操作包括：创建元素的基本操作包括：创建APAP元素、激活元素、激活元素、激活元素、激活APAP元素、选元素、选元素、选元素、选择择择择APAP元素、移动元素、移动元素、移动元素、移动APAP元素、调整元素、调整元素、调整元素、调整APAP元素的大小、对齐元素的大小、对齐元素的大小、对齐元素的大小、对齐APAP元素和元素和元素和元素和设置设置设置设置APAP元素的背景等。元素的背景等。元素的背景等。元素的背景等。【案例【案例【案例【案例9-29-2】运用】运用】运用】运用APAP元素和表格制作显示一副对联的网页。元素和表格制作显示一副对联的网页。元素和表格制作显示一副对联的网

24、页。元素和表格制作显示一副对联的网页。9 9.2 2 AP AP元素元素元素元素 9.2.2 9.2.2 将将将将APAP元素转换为表格元素转换为表格元素转换为表格元素转换为表格 很多网页设计人员更宠爱通过很多网页设计人员更宠爱通过很多网页设计人员更宠爱通过很多网页设计人员更宠爱通过APAP元素进行页面布局设计，元素进行页面布局设计，元素进行页面布局设计，元素进行页面布局设计，而不是运用表格或布局模式创建页面布局。而不是运用表格或布局模式创建页面布局。而不是运用表格或布局模式创建页面布局。而不是运用表格或布局模式创建页面布局。DreamweaverDreamweaver支持支持支持支持用户运用

25、用户运用用户运用用户运用APAP元素创建页面布局，然后将它们转换为表格。假如元素创建页面布局，然后将它们转换为表格。假如元素创建页面布局，然后将它们转换为表格。假如元素创建页面布局，然后将它们转换为表格。假如用户须要一个运用表格的页面布局，最好运用用户须要一个运用表格的页面布局，最好运用用户须要一个运用表格的页面布局，最好运用用户须要一个运用表格的页面布局，最好运用DreamweaverDreamweaver中中中中的标准表格布局工具创建该页面布局。的标准表格布局工具创建该页面布局。的标准表格布局工具创建该页面布局。的标准表格布局工具创建该页面布局。当然，用户可以在当然，用户可以在当然，用户可

26、以在当然，用户可以在APAP元素和表格之间相互转换，以调整布元素和表格之间相互转换，以调整布元素和表格之间相互转换，以调整布元素和表格之间相互转换，以调整布局并优化网页设计。但是，须要留意的是，当用户将表格转换局并优化网页设计。但是，须要留意的是，当用户将表格转换局并优化网页设计。但是，须要留意的是，当用户将表格转换局并优化网页设计。但是，须要留意的是，当用户将表格转换回回回回APAP元素时，元素时，元素时，元素时，DreamweaverDreamweaver会将此表格转换回会将此表格转换回会将此表格转换回会将此表格转换回AP DivAP Div，此操作，此操作，此操作，此操作与对表格进行转换

27、之前页面上可能已有的与对表格进行转换之前页面上可能已有的与对表格进行转换之前页面上可能已有的与对表格进行转换之前页面上可能已有的APAP元素的类型无关。元素的类型无关。元素的类型无关。元素的类型无关。另外，用户不能转换页面上特定的表格或另外，用户不能转换页面上特定的表格或另外，用户不能转换页面上特定的表格或另外，用户不能转换页面上特定的表格或APAP元素，必需将页面元素，必需将页面元素，必需将页面元素，必需将页面上全部的上全部的上全部的上全部的APAP元素转换为表格。元素转换为表格。元素转换为表格。元素转换为表格。9 9.2 2 AP AP元素元素元素元素 框架的作用就是把阅读器窗口划分为若干

28、个区域，每个区框架的作用就是把阅读器窗口划分为若干个区域，每个区框架的作用就是把阅读器窗口划分为若干个区域，每个区框架的作用就是把阅读器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（域可以分别显示不同的网页。框架由框架集（域可以分别显示不同的网页。框架由框架集（域可以分别显示不同的网页。框架由框架集（FramesetFrameset）和单）和单）和单）和单个框架（个框架（个框架（个框架（FrameFrame）组成。）组成。）组成。）组成。9.3.1 9.3.1 框架类型和框架面板框架类型和框架面板框架类型和框架面板框架类型和框架面板1 1框架类型框架类型框架类型框架类型

29、Dreamweaver Dreamweaver预定义了多种类型的框架结构。在插入工具预定义了多种类型的框架结构。在插入工具预定义了多种类型的框架结构。在插入工具预定义了多种类型的框架结构。在插入工具栏的栏的栏的栏的“布局布局布局布局”分类中单击分类中单击分类中单击分类中单击“框架框架框架框架”按钮按钮按钮按钮 ，在弹出的菜单中，在弹出的菜单中，在弹出的菜单中，在弹出的菜单中，用户可以选择系统预定义的框架结构。用户可以选择系统预定义的框架结构。用户可以选择系统预定义的框架结构。用户可以选择系统预定义的框架结构。2 2框架面板框架面板框架面板框架面板 在操作框架的过程中，框架面板是特别有用的。运用

30、框架在操作框架的过程中，框架面板是特别有用的。运用框架在操作框架的过程中，框架面板是特别有用的。运用框架在操作框架的过程中，框架面板是特别有用的。运用框架面板可以进行选取、视察、修改框架等基本操作。因此在对框面板可以进行选取、视察、修改框架等基本操作。因此在对框面板可以进行选取、视察、修改框架等基本操作。因此在对框面板可以进行选取、视察、修改框架等基本操作。因此在对框架操作时，框架面板最好始终打开。架操作时，框架面板最好始终打开。架操作时，框架面板最好始终打开。架操作时，框架面板最好始终打开。9 9.3 3 框架框架框架框架9.3.2 9.3.2 运用框架排版运用框架排版运用框架排版运用框架排

31、版【案例【案例【案例【案例9-39-3】制作一个运用框架排版的诗词欣赏网页。】制作一个运用框架排版的诗词欣赏网页。】制作一个运用框架排版的诗词欣赏网页。】制作一个运用框架排版的诗词欣赏网页。【案例展示】页面分为三个区域：上边是网站主题区，左边是【案例展示】页面分为三个区域：上边是网站主题区，左边是【案例展示】页面分为三个区域：上边是网站主题区，左边是【案例展示】页面分为三个区域：上边是网站主题区，左边是导航区，右边是内容区。在阅读网页时，单击左边的某个文本导航区，右边是内容区。在阅读网页时，单击左边的某个文本导航区，右边是内容区。在阅读网页时，单击左边的某个文本导航区，右边是内容区。在阅读网页

32、时，单击左边的某个文本链接，则对应的链接内容在右边显示，而上边的网站主题和左链接，则对应的链接内容在右边显示，而上边的网站主题和左链接，则对应的链接内容在右边显示，而上边的网站主题和左链接，则对应的链接内容在右边显示，而上边的网站主题和左边的导航栏目仍旧保留在屏幕上，实例效果如图边的导航栏目仍旧保留在屏幕上，实例效果如图边的导航栏目仍旧保留在屏幕上，实例效果如图边的导航栏目仍旧保留在屏幕上，实例效果如图9-379-37所示。所示。所示。所示。9 9.3 3 框架框架框架框架 9.4.1 Dreamweaver 9.4.1 Dreamweaver中中中中CSSCSS样式的类型样式的类型样式的类型

33、样式的类型1 1创建自定义类样式创建自定义类样式创建自定义类样式创建自定义类样式创建自定义类样式的方法如下。创建自定义类样式的方法如下。创建自定义类样式的方法如下。创建自定义类样式的方法如下。执行执行执行执行“格式格式格式格式”“CSS”“CSS样式样式样式样式”“”“新建新建新建新建”菜单吩咐；菜单吩咐；菜单吩咐；菜单吩咐；在在在在“CSS“CSS样式样式样式样式”面板中，单击面板右下侧的面板中，单击面板右下侧的面板中，单击面板右下侧的面板中，单击面板右下侧的“新建新建新建新建CSSCSS规则规则规则规则”按钮按钮按钮按钮 ；在文档窗口在文档窗口在文档窗口在文档窗口中选择文本，从中选择文本，

34、从中选择文本，从中选择文本，从“属性属性属性属性”面板的面板的面板的面板的“目标规则目标规则目标规则目标规则”下拉列表中选择下拉列表中选择下拉列表中选择下拉列表中选择“新新新新CSSCSS规则规则规则规则”，然后单击，然后单击，然后单击，然后单击“编辑规则编辑规则编辑规则编辑规则”按钮，如图按钮，如图按钮，如图按钮，如图9-489-48所示。所示。所示。所示。9.4 9.4 运用运用运用运用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 9.4.1 Dreamweaver9.4.1 Dreamweaver中中中中CSSCSS样式的类型样式的类型样式的类型样式的类型2 2创建仅应用

35、于一个创建仅应用于一个创建仅应用于一个创建仅应用于一个HTMLHTML元素的样式元素的样式元素的样式元素的样式创建仅应用于一个创建仅应用于一个创建仅应用于一个创建仅应用于一个HTMLHTML元素的样式的方法如下。元素的样式的方法如下。元素的样式的方法如下。元素的样式的方法如下。打开打开打开打开“新建新建新建新建CSSCSS规则规则规则规则”对话框。对话框。对话框。对话框。在在在在“新建新建新建新建CSSCSS规则规则规则规则”对话框中，指定要创建的对话框中，指定要创建的对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的规则的规则的“选择器类型选择器类型选择器类型选择器类型”为

36、为为为“IDID（仅应用于一个（仅应用于一个（仅应用于一个（仅应用于一个HTMLHTML元素）元素）元素）元素）”，然后在，然后在，然后在，然后在“选择器名称选择器名称选择器名称选择器名称”框中输入框中输入框中输入框中输入IDID名称，如名称，如名称，如名称，如#myhead1#myhead1，如图，如图，如图，如图9-529-52所示。所示。所示。所示。9.4 9.4 运用运用运用运用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 9.4.1 Dreamweaver9.4.1 Dreamweaver中中中中CSSCSS样式的类型样式的类型样式的类型样式的类型3 3创建重定义创建

37、重定义创建重定义创建重定义HTMLHTML标签样式标签样式标签样式标签样式 打开打开打开打开“新建新建新建新建CSSCSS规则规则规则规则”对话框。对话框。对话框。对话框。在在在在“新建新建新建新建CSSCSS规则规则规则规则”对话框中，指定要创建的对话框中，指定要创建的对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的规则的规则的“选择器类型选择器类型选择器类型选择器类型”为为为为“标签（重新定义标签（重新定义标签（重新定义标签（重新定义HTMLHTML元素）元素）元素）元素）”，然后在，然后在，然后在，然后在“选择器名称选择器名称选择器名称选择器名称”框中输入（或选择）框

38、中输入（或选择）框中输入（或选择）框中输入（或选择）HTMLHTML元素的名称，如元素的名称，如元素的名称，如元素的名称，如h1h1，如图如图如图如图9-539-53所示。所示。所示。所示。9.4 9.4 运用运用运用运用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 9.4.1 Dreamweaver9.4.1 Dreamweaver中中中中CSSCSS样式的类型样式的类型样式的类型样式的类型4 4创建链接样式创建链接样式创建链接样式创建链接样式 打开打开打开打开“新建新建新建新建CSSCSS规则规则规则规则”对话框。对话框。对话框。对话框。在在在在“新建新建新建新建CSSCS

39、S规则规则规则规则”对话框中，指定要创建的对话框中，指定要创建的对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的规则的规则的“选择选择选择选择器类型器类型器类型器类型”为为为为“复合内容（基于选择的内容）复合内容（基于选择的内容）复合内容（基于选择的内容）复合内容（基于选择的内容）”，然后在，然后在，然后在，然后在“选择器名选择器名选择器名选择器名称称称称”框中输入（或选择）超链接状态的名称，如框中输入（或选择）超链接状态的名称，如框中输入（或选择）超链接状态的名称，如框中输入（或选择）超链接状态的名称，如a:linka:link，如图，如图，如图，如图9-9-5454所示

40、。所示。所示。所示。9.4 9.4 运用运用运用运用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 9.4.2 Dreamweaver 9.4.2 Dreamweaver中运用中运用中运用中运用CSSCSS样式表美化页面样式表美化页面样式表美化页面样式表美化页面【案例【案例【案例【案例9-49-4】运用】运用】运用】运用CSSCSS样式制作一个诗集精选的网页。样式制作一个诗集精选的网页。样式制作一个诗集精选的网页。样式制作一个诗集精选的网页。9 9.4 4 样式表样式表样式表样式表 9.5.1 9.5.1 模板的基本概念模板的基本概念模板的基本概念模板的基本概念 模板是网页编辑软

41、件生成具有相像结构和外观的一种网页制模板是网页编辑软件生成具有相像结构和外观的一种网页制模板是网页编辑软件生成具有相像结构和外观的一种网页制模板是网页编辑软件生成具有相像结构和外观的一种网页制作功能。假如希望站点中的网页享有某种特性，例如，相同的作功能。假如希望站点中的网页享有某种特性，例如，相同的作功能。假如希望站点中的网页享有某种特性，例如，相同的作功能。假如希望站点中的网页享有某种特性，例如，相同的布局结构，相像的导航栏等内容，模板是特别有用的。布局结构，相像的导航栏等内容，模板是特别有用的。布局结构，相像的导航栏等内容，模板是特别有用的。布局结构，相像的导航栏等内容，模板是特别有用的。

42、对于模板而言，新的页面可以从一个模板中创建。一旦被对于模板而言，新的页面可以从一个模板中创建。一旦被对于模板而言，新的页面可以从一个模板中创建。一旦被对于模板而言，新的页面可以从一个模板中创建。一旦被创建，这个新的文档将保持和原来模板的联系，除非被明确地创建，这个新的文档将保持和原来模板的联系，除非被明确地创建，这个新的文档将保持和原来模板的联系，除非被明确地创建，这个新的文档将保持和原来模板的联系，除非被明确地隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该隔离或分开。一旦把模板

43、应用于一组网页，就可以通过编辑该模板来变更这一组网页中的共享信息。例如，将模板中的导航模板来变更这一组网页中的共享信息。例如，将模板中的导航模板来变更这一组网页中的共享信息。例如，将模板中的导航模板来变更这一组网页中的共享信息。例如，将模板中的导航栏更改后，应用该模板页面中的导航栏将被自动更新。栏更改后，应用该模板页面中的导航栏将被自动更新。栏更改后，应用该模板页面中的导航栏将被自动更新。栏更改后，应用该模板页面中的导航栏将被自动更新。模板是由两类区域组成的：锁定区域和可编辑区域。当第模板是由两类区域组成的：锁定区域和可编辑区域。当第模板是由两类区域组成的：锁定区域和可编辑区域。当第模板是由两

44、类区域组成的：锁定区域和可编辑区域。当第一次创建模板时，全部的区域都是锁定的。定义模板过程的一一次创建模板时，全部的区域都是锁定的。定义模板过程的一一次创建模板时，全部的区域都是锁定的。定义模板过程的一一次创建模板时，全部的区域都是锁定的。定义模板过程的一部分就是指定和命名可编辑的区域。然后，当某个文档从某些部分就是指定和命名可编辑的区域。然后，当某个文档从某些部分就是指定和命名可编辑的区域。然后，当某个文档从某些部分就是指定和命名可编辑的区域。然后，当某个文档从某些模板中创建时，可编辑的区域则成为惟一可以被变更的地方。模板中创建时，可编辑的区域则成为惟一可以被变更的地方。模板中创建时，可编辑

45、的区域则成为惟一可以被变更的地方。模板中创建时，可编辑的区域则成为惟一可以被变更的地方。当然，模板可以进行修改，以便标记附加的编辑区域，或者重当然，模板可以进行修改，以便标记附加的编辑区域，或者重当然，模板可以进行修改，以便标记附加的编辑区域，或者重当然，模板可以进行修改，以便标记附加的编辑区域，或者重新锁定可编辑区域。新锁定可编辑区域。新锁定可编辑区域。新锁定可编辑区域。9 9.5 5 模板模板模板模板 9.5.2 9.5.2 利用模板创建页面利用模板创建页面利用模板创建页面利用模板创建页面【案例【案例【案例【案例9-59-5】利用模板技术制作古代诗词欣赏的系列页面。】利用模板技术制作古代诗

46、词欣赏的系列页面。】利用模板技术制作古代诗词欣赏的系列页面。】利用模板技术制作古代诗词欣赏的系列页面。9.5.3 9.5.3 用模板更新整个站点用模板更新整个站点用模板更新整个站点用模板更新整个站点 当创建了一个模板后，并且将该模板应用于文档时，就可以当创建了一个模板后，并且将该模板应用于文档时，就可以当创建了一个模板后，并且将该模板应用于文档时，就可以当创建了一个模板后，并且将该模板应用于文档时，就可以通过修改一个模板来限制全部应用此模板的文档。可以执行以通过修改一个模板来限制全部应用此模板的文档。可以执行以通过修改一个模板来限制全部应用此模板的文档。可以执行以通过修改一个模板来限制全部应用

47、此模板的文档。可以执行以下操作之一更新站点：下操作之一更新站点：下操作之一更新站点：下操作之一更新站点：在文档编辑窗口，执行在文档编辑窗口，执行在文档编辑窗口，执行在文档编辑窗口，执行“修改修改修改修改”“”“模板模板模板模板”“”“更新页面更新页面更新页面更新页面”吩咐，吩咐，吩咐，吩咐，打开打开打开打开“更新页面更新页面更新页面更新页面”对话框。对话框。对话框。对话框。在文件面板中切换到在文件面板中切换到在文件面板中切换到在文件面板中切换到“资源资源资源资源”选项卡，在左侧的分类中选择选项卡，在左侧的分类中选择选项卡，在左侧的分类中选择选项卡，在左侧的分类中选择“模模模模板板板板”，打开模

48、板面板。在模板上单击鼠标右键，在弹出的菜单中，打开模板面板。在模板上单击鼠标右键，在弹出的菜单中，打开模板面板。在模板上单击鼠标右键，在弹出的菜单中，打开模板面板。在模板上单击鼠标右键，在弹出的菜单中选择选择选择选择“更新站点更新站点更新站点更新站点”吩咐，打开吩咐，打开吩咐，打开吩咐，打开“更新页面更新页面更新页面更新页面”对话框。对话框。对话框。对话框。在对话框的在对话框的在对话框的在对话框的“查看查看查看查看”列表中选择模板更新的范围，在其后的列列表中选择模板更新的范围，在其后的列列表中选择模板更新的范围，在其后的列列表中选择模板更新的范围，在其后的列表中选择须要更新的站点。默认为当前站

49、点。表中选择须要更新的站点。默认为当前站点。表中选择须要更新的站点。默认为当前站点。表中选择须要更新的站点。默认为当前站点。9 9.5 5 模板和库模板和库模板和库模板和库1运用布局运用布局视图设计页视图设计页面。面。2运用框架技运用框架技术术制作运用框架技制作运用框架技术术制作汽制作汽车车主主题题网网页页演示的演示的框架网框架网页页。3运用运用CSS样样式表制作一个外框虚式表制作一个外框虚线线，内框，内框实线实线的的课课程表。程表。4运用模板技运用模板技术术制作学校精品制作学校精品课课程网程网页页，要求，要求页页面上方的广面上方的广告条区域和告条区域和页页面左面左侧侧的的导导航菜航菜单单区域区域为锁为锁定区域，内容区域定区域，内容区域为为可可编辑编辑区域。区域。习题习题习题习题9 9