设计Web页面布局分析.pptx

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

1、9.1 9.1 使用布局模式对页进行布局使用布局模式对页进行布局9 9.2 2 APAP元素元素9 9.3 3 框架框架9 9.4 4 样式表样式表9 9.5.5 模板模板第第9章章 设计设计Web页面布局页面布局第1页/共21页 创建页布局的一种常用的方法是使用创建页布局的一种常用的方法是使用HTMLHTML表格对元素进表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对格是为了显示表格数据，而不是用于对WebWeb页进行布局。为了页进行布局。为了简化使用表格进行页面布局的过程，简化使用表格

2、进行页面布局的过程，DreamweaverDreamweaver提供了提供了“布布局局”模式。模式。在在“布局布局”模式中，用户可以使用表格作为基础结构来设模式中，用户可以使用表格作为基础结构来设计页，同时避免了使用传统的方法创建基于表格的设计时经常计页，同时避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。出现的一些问题。9 9.1 .1 使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局第2页/共21页9.1.1 9.1.1 “布局布局”模式的概念模式的概念 在在“布局布局”模式中，用户可以在添加内容前使用布局单元模式中，用户可以在添

3、加内容前使用布局单元格和表格来对页面进行布局。例如，用户可以沿页面的顶部绘格和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制一个单元格用于放置标题图形，在页面的左边绘制另一个单制一个单元格用于放置标题图形，在页面的左边绘制另一个单元格用于放置导航条，在右边绘制第三个单元格用于放置内容。元格用于放置导航条，在右边绘制第三个单元格用于放置内容。添加内容时，可以按需要在其四周移动单元格，以调整布局。添加内容时，可以按需要在其四周移动单元格，以调整布局。页面上显示的布局表格外框为绿色，而布局单元格外框为蓝色。页面上显示的布局表格外框为绿色，而布局单元格外框为蓝色。当用户将鼠标指针移到表格单元格上

4、时，当用户将鼠标指针移到表格单元格上时，DreamweaverDreamweaver会高亮会高亮显示该单元格。显示该单元格。9 9.1 .1 使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局第3页/共21页9.1.2 9.1.2 “标准标准”模式与模式与“布局布局”模式的切换模式的切换 在绘制布局表格或布局单元格之前，必须从在绘制布局表格或布局单元格之前，必须从“标准标准”模式模式切换到切换到“布局布局”模式。模式。1 1“标准标准”模式切换到模式切换到“布局布局”模式模式 要切换到要切换到“布局布局”模式，可以执行以下操作之一：模式，可以执行以

5、下操作之一：如果用户正在代码视图中工作，则选择如果用户正在代码视图中工作，则选择“查看查看”“设计设计”菜单命令或菜单命令或“查看查看”“代码和设计代码和设计”菜单命令。菜单命令。选择选择“查看查看”“表格模式表格模式”“布局模式布局模式”菜单命令，在菜单命令，在文档窗口的顶部会出现标有文档窗口的顶部会出现标有“布局模式布局模式”的横条。的横条。2 2“布局布局”模式切换到模式切换到“标准标准”模式模式 要切换出要切换出“布局布局”模式，可以执行以下操作之一：模式，可以执行以下操作之一：在文档窗口的顶部，单击在文档窗口的顶部，单击“布局模式布局模式”后的后的“退出退出”项，如项，如图图9-39

6、-3所示。所示。选择选择“查看查看”“表模式表模式”“标准模式标准模式”菜单命令。菜单命令。9 9.1 .1 使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局第4页/共21页9.1.3 9.1.3 在在“布局布局”模式下绘制布局单元格和表格模式下绘制布局单元格和表格1 1绘制布局单元格和表格绘制布局单元格和表格（1 1）绘制布局单元格）绘制布局单元格 确保设计处于确保设计处于“布局布局”模式下。模式下。在插入面板的在插入面板的“布局布局”分类中单击分类中单击“绘制布局单元格绘制布局单元格”按钮按钮 ，鼠，鼠标指针变为加号（标指针变为加号（+）形状

7、。）形状。将鼠标指针移到要开始绘制单元格的位置单击，然后按住鼠将鼠标指针移到要开始绘制单元格的位置单击，然后按住鼠标左键拖动以创建布局单元格。标左键拖动以创建布局单元格。（2 2）绘制布局表格）绘制布局表格 确保设计处于确保设计处于“布局布局”模式下。模式下。在插入面板的在插入面板的“布局布局”分类中单击分类中单击“绘制布局表格绘制布局表格”按钮按钮 ，鼠标，鼠标指针变为加号（指针变为加号（+）形状。）形状。在页面上单击然后按住鼠标左键拖动以创建布局表格，在页在页面上单击然后按住鼠标左键拖动以创建布局表格，在页面上显示的布局表格外框为绿色面上显示的布局表格外框为绿色。9 9.1 .1 使用布局

8、模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局第5页/共21页9.1.3 9.1.3 在在“布局布局”模式下绘制布局单元格和表格模式下绘制布局单元格和表格2 2绘制嵌套布局表格绘制嵌套布局表格 用户可以将一个布局表格绘制在另一个布局表格中，创建嵌用户可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格。例如，当用户更改外部表格中行或列的大小时，内部表格格。例如，当用户更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。用户可以插入多级嵌

9、套表格，但中单元格的大小不发生变化。用户可以插入多级嵌套表格，但要注意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套要注意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套布局表格的操作步骤如下。布局表格的操作步骤如下。确保设计处于确保设计处于“布局布局”模式下。模式下。在插入面板的在插入面板的“布局布局”分类中单击分类中单击“绘制布局表格绘制布局表格”按钮按钮 ，鼠标指针变为加号（鼠标指针变为加号（+）形状。）形状。在现有布局表格中的空白（灰色）区域中单击，然后按住鼠在现有布局表格中的空白（灰色）区域中单击，然后按住鼠标左键拖动以创建嵌套布局表格。标左键拖动以创建嵌套布局表格。9 9.1 .

10、1 使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局第6页/共21页9.1.4 9.1.4 调整布局单元格和表格的大小及位置调整布局单元格和表格的大小及位置1 1调整布局单元格的大小及位置调整布局单元格的大小及位置（1 1）调整布局单元格的大小）调整布局单元格的大小（2 2）调整布局单元格的位置）调整布局单元格的位置2 2调整布局表格的大小及位置调整布局表格的大小及位置（1 1）调整布局表格的大小）调整布局表格的大小（2 2）移动布局表格）移动布局表格9.1.5 9.1.5 将内容添加到布局单元格中将内容添加到布局单元格中 在在“布局布局”模式下

11、，用户可以将文本、图像和其他内容添模式下，用户可以将文本、图像和其他内容添加到布局单元格中，就像在加到布局单元格中，就像在“标准标准”模式下将内容添加到表格模式下将内容添加到表格单元格中一样。单元格中一样。【案例案例9-19-1】制作世界名车展示网页。制作世界名车展示网页。9 9.1 .1 使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局使用布局模式对页进行布局第7页/共21页 APAP元素（绝对定位元素）是分配有绝对位置的元素（绝对定位元素）是分配有绝对位置的HTMLHTML页面页面元素，具体地说，就是元素，具体地说，就是DivDiv标签或其它任何标签。标签或其它任何

12、标签。APAP元素可以元素可以包含文本、图像或其它任何可放置到包含文本、图像或其它任何可放置到HTMLHTML文档正文中的内容。文档正文中的内容。在设计网页时，必须对页面元素进行定位，使页面布局整在设计网页时，必须对页面元素进行定位，使页面布局整齐、美观。齐、美观。APAP元素可以放置在页面的任意位置，使用元素可以放置在页面的任意位置，使用APAP元素可元素可以以像素为单位来精确定位页面元素。把页面元素置入以以像素为单位来精确定位页面元素。把页面元素置入APAP元素元素中，可以控制某个中，可以控制某个APAP元素显示在前面还是后面，显示还是隐藏。元素显示在前面还是后面，显示还是隐藏。配合时间轴

13、的使用，可同时移动一个或多个配合时间轴的使用，可同时移动一个或多个APAP元素，从而轻松元素，从而轻松制作出动态效果。制作出动态效果。9 9.2 2 AP AP元素元素元素元素第8页/共21页9.2.1 AP9.2.1 AP元素的基本操作元素的基本操作 AP AP元素的基本操作包括：创建元素的基本操作包括：创建APAP元素、激活元素、激活APAP元素、选元素、选择择APAP元素、移动元素、移动APAP元素、调整元素、调整APAP元素的大小、对齐元素的大小、对齐APAP元素和元素和设置设置APAP元素的背景等。元素的背景等。【案例【案例9-29-2】使用】使用APAP元素和表格制作显示一副对联的

14、网页。元素和表格制作显示一副对联的网页。9 9.2 2 AP AP元素元素元素元素第9页/共21页 9.2.2 9.2.2 将将APAP元素转换为表格元素转换为表格 许多网页设计人员更喜欢通过许多网页设计人员更喜欢通过APAP元素进行页面布局设计，元素进行页面布局设计，而不是使用表格或布局模式创建页面布局。而不是使用表格或布局模式创建页面布局。DreamweaverDreamweaver支持支持用户使用用户使用APAP元素创建页面布局，然后将它们转换为表格。如果元素创建页面布局，然后将它们转换为表格。如果用户需要一个使用表格的页面布局，最好使用用户需要一个使用表格的页面布局，最好使用Dream

15、weaverDreamweaver中中的标准表格布局工具创建该页面布局。的标准表格布局工具创建该页面布局。当然，用户可以在当然，用户可以在APAP元素和表格之间相互转换，以调整布元素和表格之间相互转换，以调整布局并优化网页设计。但是，需要注意的是，当用户将表格转换局并优化网页设计。但是，需要注意的是，当用户将表格转换回回APAP元素时，元素时，DreamweaverDreamweaver会将此表格转换回会将此表格转换回AP DivAP Div，此操作，此操作与对表格进行转换之前页面上可能已有的与对表格进行转换之前页面上可能已有的APAP元素的类型无关。元素的类型无关。另外，用户不能转换页面上特

16、定的表格或另外，用户不能转换页面上特定的表格或APAP元素，必须将页面元素，必须将页面上所有的上所有的APAP元素转换为表格。元素转换为表格。9 9.2 2 AP AP元素元素元素元素第10页/共21页 框架的作用就是把浏览器窗口划分为若干个区域，每个区框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（域可以分别显示不同的网页。框架由框架集（FramesetFrameset）和单）和单个框架（个框架（FrameFrame）组成。）组成。9.3.1 9.3.1 框架类型和框架面板框架类型和框架面板1 1框架类型框架类型 Dreamweaver Dreamw

17、eaver预定义了多种类型的框架结构。在插入工具预定义了多种类型的框架结构。在插入工具栏的栏的“布局布局”分类中单击分类中单击“框架框架”按钮按钮 ，在弹出的菜单中，用户，在弹出的菜单中，用户可以选择系统预定义的框架结构可以选择系统预定义的框架结构。2 2框架面板框架面板 在操作框架的过程中，框架面板是非常有用的。使用框架在操作框架的过程中，框架面板是非常有用的。使用框架面板可以进行选取、观察、修改框架等基本操作。因此在对框面板可以进行选取、观察、修改框架等基本操作。因此在对框架操作时，框架面板最好一直打开。架操作时，框架面板最好一直打开。9 9.3 3 框架框架框架框架第11页/共21页9.

18、3.2 9.3.2 使用框架排版使用框架排版【案例案例9-39-3】制作一个使用框架排版的诗词欣赏网页。制作一个使用框架排版的诗词欣赏网页。【案例展示案例展示】页面分为三个区域：上边是网站主题区，左边是页面分为三个区域：上边是网站主题区，左边是导航区，右边是内容区。在浏览网页时，单击左边的某个文本导航区，右边是内容区。在浏览网页时，单击左边的某个文本链接，则对应的链接内容在右边显示，而上边的网站主题和左链接，则对应的链接内容在右边显示，而上边的网站主题和左边的导航栏目仍然保留在屏幕上，实例效果如图边的导航栏目仍然保留在屏幕上，实例效果如图9-379-37所示。所示。9 9.3 3 框架框架框架

19、框架 第12页/共21页 9.4.1 Dreamweaver9.4.1 Dreamweaver中中CSSCSS样式的类型样式的类型1 1创建自定义类样式创建自定义类样式创建自定义类样式的方法如下。创建自定义类样式的方法如下。执行执行“格式格式”“CSSCSS样式样式”“新建新建”菜单命令；菜单命令；在在“CSSCSS样式样式”面板中，单击面板右下侧的面板中，单击面板右下侧的“新建新建CSSCSS规则规则”按钮按钮 ；在文档窗口中选择文本，从在文档窗口中选择文本，从“属性属性”面板的面板的“目标规则目标规则”下下拉列表中选择拉列表中选择“新新CSSCSS规则规则”，然后单击，然后单击“编辑规则编

20、辑规则”按钮，按钮，如图如图9-489-48所示。所示。9.4 9.4 使用使用使用使用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 第13页/共21页 9.4.1 Dreamweaver9.4.1 Dreamweaver中中CSSCSS样式的类型样式的类型2 2创建仅应用于一个创建仅应用于一个HTMLHTML元素的样式元素的样式创建仅应用于一个创建仅应用于一个HTMLHTML元素的样式的方法如下。元素的样式的方法如下。打开打开“新建新建CSSCSS规则规则”对话框。对话框。在在“新建新建CSSCSS规则规则”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的

21、“选择器类型选择器类型”为为“IDID（仅应用于一个（仅应用于一个HTMLHTML元素）元素）”，然后在，然后在“选择器名称选择器名称”框中输入框中输入IDID名称，如名称，如#myhead1#myhead1，如图，如图9-529-52所示。所示。9.4 9.4 使用使用使用使用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 第14页/共21页 9.4.1 Dreamweaver9.4.1 Dreamweaver中中CSSCSS样式的类型样式的类型3 3创建重定义创建重定义HTMLHTML标签样式标签样式 打开打开“新建新建CSSCSS规则规则”对话框。对话框。在在“新建新建CS

22、SCSS规则规则”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的“选择器类型选择器类型”为为“标签（重新定义标签（重新定义HTMLHTML元素）元素）”，然后在，然后在“选择器名称选择器名称”框中输入（或选择）框中输入（或选择）HTMLHTML元素的名称，如元素的名称，如h1h1，如图如图9-539-53所示。所示。9.4 9.4 使用使用使用使用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 第15页/共21页 9.4.1 Dreamweaver9.4.1 Dreamweaver中中CSSCSS样式的类型样式的类型4 4创建链接样式创建链接样式 打开打开“

23、新建新建CSSCSS规则规则”对话框。对话框。在在“新建新建CSSCSS规则规则”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的“选择选择器类型器类型”为为“复合内容（基于选择的内容）复合内容（基于选择的内容）”，然后在，然后在“选择器名选择器名称称”框中输入（或选择）超链接状态的名称，如框中输入（或选择）超链接状态的名称，如a:linka:link，如图，如图9-9-5454所示。所示。9.4 9.4 使用使用使用使用CSSCSS对页进行布局对页进行布局对页进行布局对页进行布局 第16页/共21页 9.4.2 Dreamweaver9.4.2 Dreamweaver中使

24、用中使用CSSCSS样式表美化页面样式表美化页面【案例案例9-49-4】使用使用CSSCSS样式制作一个诗集精选的网页。样式制作一个诗集精选的网页。9 9.4 4 样式表样式表样式表样式表 第17页/共21页 9.5.1 9.5.1 模板的基本概念模板的基本概念 模板是网页编辑软件生成具有相似结构和外观的一种网页制模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。如果希望站点中的网页享有某种特性，例如，相同的作功能。如果希望站点中的网页享有某种特性，例如，相同的布局结构，相似的导航栏等内容，模板是非常有用的。布局结构，相似的导航栏等内容，模板是非常有用的。对于模板而言，新的页面可以从

25、一个模板中创建。一旦被对于模板而言，新的页面可以从一个模板中创建。一旦被创建，这个新的文档将保持和原来模板的联系，除非被明确地创建，这个新的文档将保持和原来模板的联系，除非被明确地隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该模板来改变这一组网页中的共享信息。例如，将模板中的导航模板来改变这一组网页中的共享信息。例如，将模板中的导航栏更改后，应用该模板页面中的导航栏将被自动更新。栏更改后，应用该模板页面中的导航栏将被自动更新。模板是由两类区域组成的：锁定区域和可编辑区域。当第模板是由两类区域组成的：锁定区域和可编辑区域。当第一次创建

26、模板时，所有的区域都是锁定的。定义模板过程的一一次创建模板时，所有的区域都是锁定的。定义模板过程的一部分就是指定和命名可编辑的区域。然后，当某个文档从某些部分就是指定和命名可编辑的区域。然后，当某个文档从某些模板中创建时，可编辑的区域则成为惟一可以被改变的地方。模板中创建时，可编辑的区域则成为惟一可以被改变的地方。当然，模板可以进行修改，以便标记附加的编辑区域，或者重当然，模板可以进行修改，以便标记附加的编辑区域，或者重新锁定可编辑区域。新锁定可编辑区域。9 9.5 5 模板模板模板模板第18页/共21页 9.5.2 9.5.2 利用模板创建页面利用模板创建页面【案例案例9-59-5】利用模板

27、技术制作古代诗词欣赏的系列页面。利用模板技术制作古代诗词欣赏的系列页面。9.5.3 9.5.3 用模板更新整个站点用模板更新整个站点 当创建了一个模板后，并且将该模板应用于文档时，就可以当创建了一个模板后，并且将该模板应用于文档时，就可以通过修改一个模板来控制所有应用此模板的文档。可以执行以通过修改一个模板来控制所有应用此模板的文档。可以执行以下操作之一更新站点：下操作之一更新站点：在文档编辑窗口，执行在文档编辑窗口，执行“修改修改”“模板模板”“更新页面更新页面”命令，打开命令，打开“更新页面更新页面”对话框。对话框。在文件面板中切换到在文件面板中切换到“资源资源”选项卡，在左侧的分类中选择

28、选项卡，在左侧的分类中选择“模板模板”，打开模板面板。在模板上单击鼠标右键，在弹出的，打开模板面板。在模板上单击鼠标右键，在弹出的菜单中选择菜单中选择“更新站点更新站点”命令，打开命令，打开“更新页面更新页面”对话框。对话框。在对话框的在对话框的“查看查看”列表中选择模板更新的范围，在其后的列表中选择模板更新的范围，在其后的列表中选择需要更新的站点。默认为当前站点。列表中选择需要更新的站点。默认为当前站点。9 9.5 5 模板和库模板和库模板和库模板和库第19页/共21页1使用布局视图设计页面。2使用框架技术制作使用框架技术制作汽车主题网页演示的框架网页。3使用CSS样式表制作一个外框虚线，内框实线的课程表。4使用模板技术制作学校精品课程网页，要求页面上方的广告条区域和页面左侧的导航菜单区域为锁定区域，内容区域为可编辑区域。习题习题习题习题9 9 第20页/共21页感谢您的观看！第21页/共21页