设计Web页面布局分析课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网站规划与网页设计,（第,3,版）,网站规划与网页设计（第3版）,9.1,使用布局模式对页进行布局,9,.,2,AP,元素,9,.,3,框架,9,.,4,样式表,9,.5,模板,第,9,章,设计,Web,页面布局,9.1 使用布局模式对页进行布局第9章 设计Web页面布,创建页布局的一种常用的方法是使用,HTML,表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对,Web,页进行布局。为了简化使用表格进行页面布局的过程，,Dreamweaver,提供了,“,布局,”,模式。,在,“,布局,”,模式中，用户可以使用表格作为基础结构来设计页，同时避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。,9,.1 使用布局模式对页进行布局,创建页布局的一种常用的方法是使用HTML表格,9.1.1,“,布局,”,模式的概念,在,“,布局,”,模式中，用户可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制一个单元格用于放置标题图形，在页面的左边绘制另一个单元格用于放置导航条，在右边绘制第三个单元格用于放置内容。添加内容时，可以按需要在其四周移动单元格，以调整布局。,页面上显示的布局表格外框为绿色，而布局单元格外框为蓝色。当用户将鼠标指针移到表格单元格上时，,Dreamweaver,会高亮显示该单元格。,9,.1 使用布局模式对页进行布局,9.1.1 “布局”模式的概念9.1 使用布局模式对页进,9.1.2,“,标准,”,模式与,“,布局,”,模式的切换,在绘制布局表格或布局单元格之前，必须从,“,标准,”,模式切换到,“,布局,”,模式。,1,“,标准,”,模式切换到,“,布局,”,模式,要切换到,“,布局,”,模式，可以执行以下操作之一：,如果用户正在代码视图中工作，则选择,“,查看,”,“,设计,”,菜单命令或,“,查看,”,“,代码和设计,”,菜单命令。,选择,“,查看,”,“,表格模式,”,“,布局模式,”,菜单命令，在文档窗口的顶部会出现标有,“,布局模式,”,的横条。,2,“,布局,”,模式切换到,“,标准,”,模式,要切换出,“,布局,”,模式，可以执行以下操作之一：,在文档窗口的顶部，单击,“,布局模式,”,后的,“,退出,”,项，如图,9-3,所示。,选择,“,查看,”,“,表模式,”,“,标准模式,”,菜单命令。,9,.1 使用布局模式对页进行布局,9.1.2 “标准”模式与“布局”模式的切换9.1 使用,9.1.3 在,“,布局,”,模式下绘制布局单元格和表格,1绘制布局单元格和表格,（1）绘制布局单元格,确保设计处于,“,布局,”,模式下。,在插入面板的,“,布局,”,分类中单击,“,绘制布局单元格,”,按钮，鼠标指针变为加号（+）形状。,将鼠标指针移到要开始绘制单元格的位置单击，然后按住鼠标左键拖动以创建布局单元格。,（2）绘制布局表格,确保设计处于,“,布局,”,模式下。,在插入面板的,“,布局,”,分类中单击,“,绘制布局表格,”,按钮，鼠标指针变为加号（+）形状。,在页面上单击然后按住鼠标左键拖动以创建布局表格，在页面上显示的布局表格外框为绿色,。,9,.1 使用布局模式对页进行布局,9.1.3 在“布局”模式下绘制布局单元格和表格9.1,9.1.3 在,“,布局,”,模式下绘制布局单元格和表格,2,绘制嵌套布局表格,用户可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格。例如，当用户更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。用户可以插入多级嵌套表格，但要注意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套布局表格的操作步骤如下。,确保设计处于,“,布局,”,模式下。,在插入面板的,“,布局,”,分类中单击,“,绘制布局表格,”,按钮，鼠标指针变为加号（,+,）形状。,在现有布局表格中的空白（灰色）区域中单击，然后按住鼠标左键拖动以创建嵌套布局表格。,9,.1 使用布局模式对页进行布局,9.1.3 在“布局”模式下绘制布局单元格和表格9.1,9.1.4,调整布局单元格和表格的大小及位置,1调整布局单元格的大小及位置,（1）调整布局单元格的大小,（2）调整布局单元格的位置,2,调整布局表格的大小及位置,（,1,）调整布局表格的大小,（,2,）移动布局表格,9.1.5,将内容添加到布局单元格中,在,“,布局,”,模式下，用户可以将文本、图像和其他内容添加到布局单元格中，就像在,“,标准,”,模式下将内容添加到表格单元格中一样。,【,案例,9-1】,制作世界名车展示网页。,9,.1 使用布局模式对页进行布局,9.1.4 调整布局单元格和表格的大小及位置9.1 使用,AP,元素（绝对定位元素）是分配有绝对位置的,HTML,页面元素，具体地说，就是,Div,标签或其它任何标签。,AP,元素可以包含文本、图像或其它任何可放置到,HTML,文档正文中的内容。,在设计网页时，必须对页面元素进行定位，使页面布局整齐、美观。,AP,元素可以放置在页面的任意位置，使用,AP,元素可以以像素为单位来精确定位页面元素。把页面元素置入,AP,元素中，可以控制某个,AP,元素显示在前面还是后面，显示还是隐藏。配合时间轴的使用，可同时移动一个或多个,AP,元素，从而轻松制作出动态效果。,9,.,2,AP元素,AP元素（绝对定位元素）是分配有绝对位置的HT,9.2.1 AP,元素的基本操作,AP元素的基本操作包括：创建AP元素、激活AP元素、选择AP元素、移动AP元素、调整AP元素的大小、对齐AP元素和设置AP元素的背景等。,【案例9-2】使用AP元素和表格制作显示一副对联的网页。,9,.,2,AP元素,9.2.1 AP元素的基本操作9.2 AP元素,9.2.2 将AP元素转换为表格,许多网页设计人员更喜欢通过AP元素进行页面布局设计，而不是使用表格或布局模式创建页面布局。Dreamweaver支持用户使用AP元素创建页面布局，然后将它们转换为表格。如果用户需要一个使用表格的页面布局，最好使用Dreamweaver中的标准表格布局工具创建该页面布局。,当然，用户可以在AP元素和表格之间相互转换，以调整布局并优化网页设计。但是，需要注意的是，当用户将表格转换回AP元素时，Dreamweaver会将此表格转换回AP Div，此操作与对表格进行转换之前页面上可能已有的AP元素的类型无关。另外，用户不能转换页面上特定的表格或AP元素，必须将页面上所有的AP元素转换为表格。,9,.,2,AP元素,9.2.2 将AP元素转换为表格9.2 A,框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（Frameset）和单个框架（Frame）组成。,9.3.1,框架类型和框架面板,1框架类型,Dreamweaver预定义了多种类型的框架结构。在插入工具栏的,“,布局,”,分类中单击,“,框架,”,按钮 ，在弹出的菜单中，用户可以选择系统预定义的框架结构,。,2,框架面板,在操作框架的过程中，框架面板是非常有用的。使用框架面板可以进行选取、观察、修改框架等基本操作。因此在对框架操作时，框架面板最好一直打开。,9,.,3,框架,框架的作用就是把浏览器窗口划分为若干个区域，,9.3.2,使用框架排版,【,案例,9-3】,制作一个使用框架排版的诗词欣赏网页。,【,案例展示,】,页面分为三个区域：上边是网站主题区，左边是导航区，右边是内容区。在浏览网页时，单击左边的某个文本链接，则对应的链接内容在右边显示，而上边的网站主题和左边的导航栏目仍然保留在屏幕上，实例效果如图,9-37,所示。,9,.,3,框架,9.3.2 使用框架排版9.3 框架,9.4.1 Dreamweaver中CSS样式的类型,1,创建自定义类样式,创建自定义类样式的方法如下。,执行,“,格式,”,“,CSS,样式,”,“,新建,”,菜单命令；在,“,CSS,样式,”,面板中，单击面板右下侧的,“,新建,CSS,规则,”,按钮；在文档窗口中选择文本，从,“,属性,”,面板的,“,目标规则,”,下拉列表中选择,“,新,CSS,规则,”,，然后单击,“,编辑规则,”,按钮，如图,9-48,所示。,9.4 使用CSS对页进行布局,9.4.1 Dreamweaver中CSS样式的类型9.,9.4.1 Dreamweaver中CSS样式的类型,2,创建仅应用于一个,HTML,元素的样式,创建仅应用于一个,HTML,元素的样式的方法如下。,打开,“,新建,CSS,规则,”,对话框。,在,“,新建,CSS,规则,”,对话框中，指定要创建的,CSS,规则的,“,选择器类型,”,为,“,ID,（仅应用于一个,HTML,元素）,”,，然后在,“,选择器名称,”,框中输入,ID,名称，如,#myhead1,，如图,9-52,所示。,9.4 使用CSS对页进行布局,9.4.1 Dreamweaver中CSS样式的类型9.,9.4.1 Dreamweaver中CSS样式的类型,3创建重定义HTML标签样式,打开,“,新建,CSS,规则,”,对话框。,在,“,新建,CSS,规则,”,对话框中，指定要创建的,CSS,规则的,“,选择器类型,”,为,“,标签（重新定义,HTML,元素）,”,，然后在,“,选择器名称,”,框中输入（或选择）,HTML,元素的名称，如,h1,，如图,9-53,所示。,9.4 使用CSS对页进行布局,9.4.1 Dreamweaver中CSS样式的类型9.,9.4.1 Dreamweaver中CSS样式的类型,4创建链接样式,打开,“,新建CSS规则,”,对话框。,在,“,新建CSS规则,”,对话框中，指定要创建的CSS规则的,“,选择器类型,”,为,“,复合内容（基于选择的内容）,”,，然后在,“,选择器名称,”,框中输入（或选择）超链接状态的名称，如a:link，如图9-54所示。,9.4 使用CSS对页进行布局,9.4.1 Dreamweaver中CSS样式的类型9.,9.4.2 Dreamweaver,中使用,CSS,样式表美化页面,【,案例,9-4】,使用,CSS,样式制作一个诗集精选的网页。,9,.,4,样式表,9.4.2 Dreamweaver中使用CSS样式表美化,9.5.1,模板的基本概念,模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。如果希望站点中的网页享有某种特性，例如，相同的布局结构，相似的导航栏等内容，模板是非常有用的。,对于模板而言，新的页面可以从一个模板中创建。一旦被创建，这个新的文档将保持和原来模板的联系，除非被明确地隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该模板来改变这一组网页中的共享信息。例如，将模板中的导航栏更改后，应用该模板页面中的导航栏将被自动更新。,模板是由两类区域组成的：锁定区域和可编辑区域。当第一次创建模板时，所有的区域都是锁定的。定义模板过程的一部分就是指定和命名可编辑的区域。然后，当某个文档从某些模板中创建时，可编辑的区域则成为惟一可以被改变的地方。,当然，模板可以进行修改，以便标记附加的编辑区域，或者重新锁定可编辑区域。,9,.,5,模板,9.5.1 模板的基本概念9.5 模板,9.5.2 利用模板创建页面,【,案例,9-5】,利用模板技术制作古代诗词欣赏的系列页面。,9.5.3,用模板更新整个站点,当创建了一个模板后，并且将该模板应用于文档时，就可以通过修改一个模板来控制所有应用此模板的文档。可以执行以下操作之一更新站点：,在文档编辑窗口，执行,“,修改,”,“,模板,”,“,更新页面,”,命令，打开,“,更新页面,”,对话框。,在文件面板中切换到,“,资源,”,选项卡，在左侧的分类中选择,“,模板,”,，打开模板面板。在模板上单击鼠标右键，在弹出的菜单中选择,“,更新站点,”,命令，打开,“,更新页面,”,对话框。,在对话框的,“,查看,”,列表中选择模板更新的范围，在其后的列表中选择需要更新的站点。默认为当前站点。,9,.,5,模板和库,9.5.2 利用模板创建页面9.5 模板和库,1,使用布局视图设计页面。,2,使用框架技术制作使用框架技术制作汽车主题网页演示的框架网页。,3,使用,CSS,样式表制作一个外框虚线，内框实线的课程表。,4,使用模板技术制作学校精品课程网页，要求页面上方的广告条区域和页面左侧的导航菜单区域为锁定区域，内容区域为可编辑区域。,习题,9,1使用布局视图设计页面。习题9,