页面布局设计

1、网页设计与制作网页设计与制作网页版面布局概述网页版面布局概述实例导入：表格排版网页实例导入：表格排版网页使用表格排版使用表格排版使用层排版使用层排版时间轴特效及行为时间轴特效及行为使用框架排版网页使用框架排版网页4.1 网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现同，所以同一个页面的分辨率可能出现800800* *600600像素，像素，1024

2、1024* *768768像素等。布局，就是以最适合浏览的方式将图片和文像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种：容的排版等。经常用到的版面布局结构主要有以下几种：v “T”T”结构布局结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条

3、的背景较深，整体效果类似右面显示内容的布局，因为菜单条的背景较深，整体效果类似英文字母英文字母“T”T”，这是网页设计中用的最广泛的一种布局方式。，这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，很容易让人很容易让人“看之无味看之无味”。v “口口”型布局型布局 这是一个象形的说法，就是页面一般上下各有一个广这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情连

4、接等，中间是主要内告条，左面是主菜单，右面是友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。页面拥挤，不够灵活。 “ “三三”型布局型布局 这种布局多用于国外站点，国内用的不多。特点是页这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。多放广告条。4.1 网页版面布局概述4.1 网页版面布局概述v POPPOP布局布局 POPPOP引自广告术语，就是指页面布局像一张宣传海报，引自广告术语，就是

5、指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如比如ELLE.comELLE.com。优点显而易见。优点显而易见: :漂亮吸引人。缺点就是速漂亮吸引人。缺点就是速度慢。度慢。 在确定好版面布局结构后，继续要做的就是根据内容在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择多大？怎样放置网页的调整页面的结构。如页面尺寸选择多大？怎样放置网页的网页元素？在网页元素？在DreamweaverDreamweaver中提供了四种主要的方法用于中提供了四种主要的方法用于规划和设计页面：表格、层、

6、框架和规划和设计页面：表格、层、框架和CSS+DIVCSS+DIV，本章只介，本章只介绍前三种方式。绍前三种方式。 4.2 实例导入：表格排版网页4.2 实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在一起，使整个网页井井网页设计的各种元素有序地组织在一起，使整个网页井井有条而不至于杂乱无章。有条而不至于杂乱无章。 【例【例4.14.1】某生物工程公司网站，在本实例中，主要】某生物工程公司网站，在本实例中，主要涉及以下知识点：涉及以下知识点：v 页面采用表格进行整体布局，表格划分为若干个单元格，页

7、面采用表格进行整体布局，表格划分为若干个单元格，在单元格内填充网页元素，实现网页的布局；在单元格内填充网页元素，实现网页的布局；v 通过定义网页的背景图片达到美化网页的效果；通过定义网页的背景图片达到美化网页的效果；v 该页的栏目导航采用该页的栏目导航采用 “ “导航条导航条”效果。效果。使用表格排版v 表格是由一些被线条分开的单元格组成。线条即表格的边表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所等网页元素均可根据需要放置在相应的单元格中。

8、如图所示。示。v 在网页中使用表格一般有两种情况：一种是在需要组织数在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。局时，需要对表格的属性进行设置。 表格在网页中通常存在两种形式：一种是独立的形式表格在网页中通常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。存在，二是以嵌套的形式存在。1 1、插入独立表格、插入独立表格v 插入表格一般有两种方法插入表格一般有两种方法 方法一：单击方法一：单击“插入插入”栏栏“常用常用”选项选项“表格表格”按钮；按钮；

9、 方法二：选择方法二：选择“插入插入”菜单菜单|“|“表格表格”命令；弹出命令；弹出“表格表格”对话框对话框 v2.2.插入嵌套表格插入嵌套表格 在网页中为了保证各部分内容之间相对独立性，而在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表格的嵌套形式不会因为编辑其它内容的同时被修改，表格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元格，然后在区域单元格中再插入按区域划分为若干单元格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。其操作步嵌套表格，这样各区域的排版即规

10、范又灵活。其操作步骤如下：光标放在表格的某个单元格内，再单击骤如下：光标放在表格的某个单元格内，再单击“插入插入”栏栏“常用常用”选项选项“表格表格”按钮。按钮。v . .编辑表格编辑表格 增加行与列增加行与列 删除行或列删除行或列 格式化表格格式化表格 排序表格排序表格 导入与导出表格数据导入与导出表格数据1 1、表格属性设置、表格属性设置v要对表格进行属性设置，必须首先选中表格，选中表格要对表格进行属性设置，必须首先选中表格，选中表格的常用方法有以下四种：的常用方法有以下四种：v方法一：将光标置于表格内，单击方法一：将光标置于表格内，单击“文档文档”窗口左下角窗口左下角的的标签选中整个表格

11、。标签选中整个表格。v方法二：将鼠标指针移动到表格的边框处，单击鼠标左方法二：将鼠标指针移动到表格的边框处，单击鼠标左键选中表格。键选中表格。v方法三：将光标置于表格内，选择方法三：将光标置于表格内，选择“修改修改”菜单菜单|“|“表表格格”|“|“选择表格选择表格”命令，选中表格。命令，选中表格。v 方法四：将光标置于表格内，单击鼠标右键，在弹出菜单方法四：将光标置于表格内，单击鼠标右键，在弹出菜单中，选择中，选择 “ “表格表格”|“|“选择表格选择表格”命令，选中表格。选中命令，选中表格。选中表格后，在表格后，在“属性属性”面板中设置表格的属性，如图所示。面板中设置表格的属性，如图所示。

12、2.2.单元格属性的设置单元格属性的设置v 光标放在单元格内，在光标放在单元格内，在“属性属性”面板中设置单元格属性。面板中设置单元格属性。如图所示，如图所示，“属性属性”面板分为上下两部分，上半部分是对面板分为上下两部分，上半部分是对单元格中对象的属性设置，下半部分是对单元格属性的设单元格中对象的属性设置，下半部分是对单元格属性的设置。置。v 另外对单元格还可进行拆分和合并单元格的操作。另外对单元格还可进行拆分和合并单元格的操作。 表格是能将网页元素按设计者要求的方式显示的一种表格是能将网页元素按设计者要求的方式显示的一种排版技术。通过单元格的拆分、合并以及在单元格中插入排版技术。通过单元格

13、的拆分、合并以及在单元格中插入嵌套表格等方法对网页元素进行更细致的控制。其操作步嵌套表格等方法对网页元素进行更细致的控制。其操作步骤如下：骤如下： 步骤步骤1 1插入一个表格，按照事先考虑好的版面设计插入一个表格，按照事先考虑好的版面设计将表格划分为几个大的单元格，设置合适的宽度，边框设将表格划分为几个大的单元格，设置合适的宽度，边框设置为，使边框不可见，需要时可在单元格中插入嵌套表置为，使边框不可见，需要时可在单元格中插入嵌套表格，同样将边框设为，使边框不可见。格，同样将边框设为，使边框不可见。 步骤步骤2 2向各个单元格中加入网页元素，编辑完毕后向各个单元格中加入网页元素，编辑完毕后保存文

14、档。保存文档。使用表格构造网页布局时应遵循如下原则：使用表格构造网页布局时应遵循如下原则：v 要规划好再运行，甚至要进行无数次的实验和重复运行才要规划好再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。能制作出好的页面框架。v 从外向内工作。先建立最大的表格，再在它内部创建嵌套从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。的较小表格。v 在外部使用绝计像素方法，在内部使用相对百分比方法。在外部使用绝计像素方法，在内部使用相对百分比方法。 为了简化使用表格进行页面布局的过程，在为了简化使用表格进行页面布局的过程，在DreamweaverDreamweaver提供了布

15、局模式。在布局模式下，使用布局提供了布局模式。在布局模式下，使用布局表格作为基础结构来设计网页，在布局表格中创建布局单表格作为基础结构来设计网页，在布局表格中创建布局单元格，然后插入网页元素。元格，然后插入网页元素。 在布局模式下，使用表格进行布局具有定位简单、容在布局模式下，使用表格进行布局具有定位简单、容易调整等优点。例如：在布局模式中可以在页面上方便地易调整等优点。例如：在布局模式中可以在页面上方便地绘制布局单元格，可将这些单元格拖动到所需的位置；还绘制布局单元格，可将这些单元格拖动到所需的位置；还可以方便地创建固定宽度的布局或自动伸展为整个浏览器可以方便地创建固定宽度的布局或自动伸展为

16、整个浏览器窗口宽度的布局。窗口宽度的布局。 1 1、绘制布局表格与布局单元格、绘制布局表格与布局单元格 首先从标准模式切换到布局模式：单击首先从标准模式切换到布局模式：单击“插入插入”栏栏“布局布局”选项选项“布局模式布局模式”按钮。切换到布局模按钮。切换到布局模式后，就可以创建布局表格，并在其中添加布局单元格。式后，就可以创建布局表格，并在其中添加布局单元格。要说明的是，布局单元格不能在布局表格之外，同一个要说明的是，布局单元格不能在布局表格之外，同一个布局表格中可放置多个布局单元格，布局表格可嵌套。布局表格中可放置多个布局单元格，布局表格可嵌套。操作步骤如下：操作步骤如下： 步骤步骤1 1

17、单击单击“绘制表格绘制表格”按钮，鼠标在页面上变按钮，鼠标在页面上变为为“+”+”形，按下鼠标左键拖动可绘制布局表格。形，按下鼠标左键拖动可绘制布局表格。 步骤步骤2 2单击单击“绘制布局单元格绘制布局单元格”按钮，鼠标在页按钮，鼠标在页面上变为面上变为“+”+”形，按下鼠标左键拖动可绘制布局单形，按下鼠标左键拖动可绘制布局单元格。元格。如图所示：如图所示： 本小节讲解【例本小节讲解【例4.14.1】利用表格进行网页布局的制作】利用表格进行网页布局的制作过程。作为专业的设计者，首先利用图形制作软件如：过程。作为专业的设计者，首先利用图形制作软件如：FireworksFireworks、Phot

18、oshopPhotoshop等，绘制一张网页草图，然后根据等，绘制一张网页草图，然后根据网页草图利用表格对网页进行排版。网页草图利用表格对网页进行排版。 4.4 使用层排版v 除了表格以外，层是另外一种定位网页元素的方法。除了表格以外，层是另外一种定位网页元素的方法。本节介绍层的概念和操作，并通过一个实例说明如何利用本节介绍层的概念和操作，并通过一个实例说明如何利用层进行页面布局的设计。层进行页面布局的设计。4.4.1 实例导入：层排版网页 Dreamweaver Dreamweaver中的层是一种网页元素定位技术，它可中的层是一种网页元素定位技术，它可以包含文字、图像、表格、插件甚至其它层。

19、一个网页中以包含文字、图像、表格、插件甚至其它层。一个网页中可以含有多个层，层的特点在于各个层之间可以重叠，并可以含有多个层，层的特点在于各个层之间可以重叠，并可以决定每个层是否可见，还可以定义各个层之间的层次可以决定每个层是否可见，还可以定义各个层之间的层次关系。层可以转换成表格，通过与关系。层可以转换成表格，通过与“时间轴时间轴”及行为的结及行为的结合，能够实现动态交互效果。合，能够实现动态交互效果。4.4.1 实例导入：层排版网页【例【例4.24.2】八珍食府网站首页，本网页实例采用了层排版网】八珍食府网站首页，本网页实例采用了层排版网页，时间轴与行为结合制作了网页动态效果，如图所示。页

20、，时间轴与行为结合制作了网页动态效果，如图所示。在本实例中，主要涉及以下知识点：在本实例中，主要涉及以下知识点：v 以层作为页面布局的工具，设置层的背景颜色、大小及位以层作为页面布局的工具，设置层的背景颜色、大小及位置；置；v 调整层与层间的相对关系，通过调整层与层间的相对关系，通过“Z”Z”值设置层的叠放顺值设置层的叠放顺序；序；v 向层内添加图像、向层内添加图像、FLASHFLASH动画、文本、表格等网页元素；动画、文本、表格等网页元素；v 利用时间轴和行为制作网页动态效果。利用时间轴和行为制作网页动态效果。4.4.1 实例导入：层排版网页4.4.2 插入层和编辑层1 1、插入层、插入层

21、在在DreamweaverDreamweaver中，插入层的方法有多种，常用的方中，插入层的方法有多种，常用的方法有以下两种：法有以下两种：v 方法一：将光标放置在需要插入层的地方，选择方法一：将光标放置在需要插入层的地方，选择“插插入入”菜单菜单“布局对象布局对象”“层层”命令，在命令，在“文档文档”窗口窗口中插入一个空的预设大小的层。中插入一个空的预设大小的层。 v 方法二：方法二： 单击单击“插入插入”栏栏“布局布局”选项选项“描绘描绘层层”按钮，移动鼠标到按钮，移动鼠标到“文档文档”窗口，当鼠标变成窗口，当鼠标变成“”形状，单击鼠标左键并拖动，即创建了层，如图所示。形状，单击鼠标左键并

22、拖动，即创建了层，如图所示。4.4.2 插入层和编辑层2 2、层的关系、层的关系v 如果两个层有交叉，它们有两种关系：重叠与嵌套。如果两个层有交叉，它们有两种关系：重叠与嵌套。重叠就是位置上有重叠，但两个层是独立的，一个层发生重叠就是位置上有重叠，但两个层是独立的，一个层发生变化时，不影响另外一个层，而嵌套时，子层会随着父层变化时，不影响另外一个层，而嵌套时，子层会随着父层的某些属性的变化而变化，而父层不随子层发生变化。的某些属性的变化而变化，而父层不随子层发生变化。3 3、创建嵌套层、创建嵌套层v 层的嵌套和表格的嵌套有些类似，就是在层里面再建层的嵌套和表格的嵌套有些类似，就是在层里面再建立

23、一个层。创建嵌套层常用的方法有以下三种：立一个层。创建嵌套层常用的方法有以下三种： 方法一：光标放在当前层中，选择方法一：光标放在当前层中，选择“插入插入”菜单菜单“布局对象布局对象”“层层”命令。命令。 方法二：选中当前层，单击方法二：选中当前层，单击“插入插入”栏栏“布局布局”选选项项“绘制层绘制层”按钮，同时按下按钮，同时按下AltAlt键绘制层。键绘制层。 方法三：打开方法三：打开“层层”面板，按下面板，按下CtrlCtrl键，将某一层拖键，将某一层拖动到另一层位置。动到另一层位置。4.4.2 插入层和编辑层4 4、层的属性设置、层的属性设置 设置层的属性时，首先要选中层。选中层的常用

24、方法设置层的属性时，首先要选中层。选中层的常用方法有以下三种：有以下三种： 方法一：单击层边框线。方法一：单击层边框线。 方法二：单击层锚记。方法二：单击层锚记。 方法三：单击方法三：单击“层层”面板上的层名称。面板上的层名称。 当层被选中后，周围出现控制手柄，层锚记变为蓝色当层被选中后，周围出现控制手柄，层锚记变为蓝色显示。要同时选择多个层，按下显示。要同时选择多个层，按下ShiftShift键，连续单击要选择键，连续单击要选择的层。选中层后，通过的层。选中层后，通过“属性属性”面板进行属性设置，如图面板进行属性设置，如图所示。所示。4.4.2 插入层和编辑层5 5、层的操作、层的操作v （

25、1 1） 层的移动层的移动 操作步骤如下：选中层，拖动到合适的位置。操作步骤如下：选中层，拖动到合适的位置。v （2 2）层的对齐）层的对齐 选中多个层，选择选中多个层，选择“修改修改”菜单菜单|“|“排列顺序排列顺序”某某项项“对齐方式对齐方式”命令。对齐方式：左对齐、右对齐、对齐命令。对齐方式：左对齐、右对齐、对齐上缘、对齐下缘等，如图上缘、对齐下缘等，如图4.284.28所示，设定层的对齐方式时，所示，设定层的对齐方式时，以最后一个选中的层的上、下、左、右边界为对齐参考点。以最后一个选中的层的上、下、左、右边界为对齐参考点。4.4.2 插入层和编辑层v （3 3）改变层的顺序）改变层的顺

26、序 当网页中出现多个层时，就会出现重叠现象。那么层当网页中出现多个层时，就会出现重叠现象。那么层的叠放顺序会影响其显示效果。改变层顺序的常用方法有的叠放顺序会影响其显示效果。改变层顺序的常用方法有以下两种：以下两种： 方法一：选中层，在方法一：选中层，在“属性属性”面板中，面板中，Z Z轴文本框中轴文本框中输入数值来决定层的叠放顺序。其值越大越靠上，如果其输入数值来决定层的叠放顺序。其值越大越靠上，如果其为负值，表示层位于页面之下，页面中的内容将会覆盖层为负值，表示层位于页面之下，页面中的内容将会覆盖层中的内容。中的内容。 方法二：在方法二：在“层层”面板中双击面板中双击Z Z轴的值，修改此值

27、；轴的值，修改此值；或是直接拖动层，改变它们的上下位置，或是直接拖动层，改变它们的上下位置，Z Z轴值会自动变轴值会自动变化。化。4.4.2 插入层和编辑层v （4 4）显示和隐藏层）显示和隐藏层 选中层，选择选中层，选择“窗口窗口”菜单菜单“层层”命令，打开命令，打开“层层”面板，单击面板，单击“层层”面板上的眼睛图标，眼睛睁开为显示层，面板上的眼睛图标，眼睛睁开为显示层，眼眼闭上为隐藏层，无眼睛图标表示可见性为默认，眼眼闭上为隐藏层，无眼睛图标表示可见性为默认， v （5 5）层与表格的相互转换）层与表格的相互转换 由于层所具有的灵活性是表格所无法比拟的，因此可由于层所具有的灵活性是表格所

28、无法比拟的，因此可以通过在层中添加内容，使其布局在页面中任何位置，而以通过在层中添加内容，使其布局在页面中任何位置，而且不会使其它页面元素受到影响。但由于它缺乏紧凑性，且不会使其它页面元素受到影响。但由于它缺乏紧凑性，在不同浏览器显示，可能会发生层的位置偏移，因此在不同浏览器显示，可能会发生层的位置偏移，因此DreamweaverDreamweaver提供了层与表格互相转换功能，以结合各自提供了层与表格互相转换功能，以结合各自的优点更好地进行网页设计操作。的优点更好地进行网页设计操作。 本小节讲解【例本小节讲解【例4.24.2】利用层技术进行网页布局的制作】利用层技术进行网页布局的制作过程，分

29、辨率设置为过程，分辨率设置为10241024* *768768，此网页共创建了，此网页共创建了5 5个层相互个层相互重叠重叠 。v 时间轴是一条贯穿时间的线，用于表示网页存活时间时间轴是一条贯穿时间的线，用于表示网页存活时间中发生的各种状态。通过在这条时间轴上的不同时间放置中发生的各种状态。通过在这条时间轴上的不同时间放置的不同内容，就可以实现网页元素的动态效果。的不同内容，就可以实现网页元素的动态效果。v Dreamweaver Dreamweaver提供了一种简洁而且快捷的方式，无须提供了一种简洁而且快捷的方式，无须编写任何代码便可以快速在编写任何代码便可以快速在HTMLHTML代码中嵌入

30、代码中嵌入JavaScriptJavaScript脚脚本语言实现特效，这就是行为。本语言实现特效，这就是行为。 在【例在【例4.24.2】中利用层、时间轴、行为相结合实现动】中利用层、时间轴、行为相结合实现动态交互效果。态交互效果。 当浏览网页时，有一幅卡通图像在页面上动态飘动，当浏览网页时，有一幅卡通图像在页面上动态飘动，当单击了该图像后，则出现了当单击了该图像后，则出现了“欢迎光临八珍美食欢迎光临八珍美食”的提的提示信息，当用户单击示信息，当用户单击“确定确定”按钮后，卡通图像继续飘动。按钮后，卡通图像继续飘动。该网页特效实例主要涉及了以下几个知识点：该网页特效实例主要涉及了以下几个知识点

31、： 层与时间轴配合制作动画；层与时间轴配合制作动画； 为网页元素定义为网页元素定义“行为行为”特效。特效。v 1. 1. 创建时间轴创建时间轴 “ “时间轴时间轴”面板显示层与图像随时间变化的属性。选面板显示层与图像随时间变化的属性。选择择“窗口窗口”菜单菜单“时间轴时间轴”，或者按下组合快捷键，或者按下组合快捷键ALT+F9ALT+F9键，打开键，打开“时间轴时间轴”面板。用鼠标拖动网页元素面板。用鼠标拖动网页元素放在放在“时间轴时间轴”面板的相应帧上，就把该元素加入到面板的相应帧上，就把该元素加入到“时时间轴间轴”中。中。 “ “时间轴时间轴”面板中出现了一段蓝色的时间轴，第一个面板中出现

32、了一段蓝色的时间轴，第一个圆圈代表时间轴的开始，最后一个圆圈代表时间轴的结束，圆圈代表时间轴的开始，最后一个圆圈代表时间轴的结束，圆圈代表关键帧。圆圈代表关键帧。v 2. 2. 什么是关键帧？什么是关键帧？ 关键帧是动画效果中的标志点，在这个标志点上可以关键帧是动画效果中的标志点，在这个标志点上可以对网页元素的状态进行调整和编辑。关键帧之间的帧称为对网页元素的状态进行调整和编辑。关键帧之间的帧称为过渡帧，这些帧是不可编辑的。确定了关键帧上的网页元过渡帧，这些帧是不可编辑的。确定了关键帧上的网页元素的状态后，素的状态后，DreamweaverDreamweaver会自动计算过渡帧中网页元素会自动

33、计算过渡帧中网页元素的状态，从而实现动态效果。的状态，从而实现动态效果。v 3. 3. 修改关键帧修改关键帧 改变网页元素的属性：选择关键帧，在改变网页元素的属性：选择关键帧，在“属性属性”面板中改变网页元素的属性。面板中改变网页元素的属性。 延长时间轴的长度：在延长时间轴的长度：在“时间轴时间轴”上单击关键帧上单击关键帧向右移动，可延长向右移动，可延长“时间轴时间轴”的长度。的长度。 增加关键帧：单击增加关键帧：单击“时间轴时间轴”，单击鼠标右键，单击鼠标右键，在弹出菜单中选择在弹出菜单中选择“增加关键帧增加关键帧”命令。命令。 删除关键帧：选中已有的关键帧，单击鼠标右键，删除关键帧：选中已

34、有的关键帧，单击鼠标右键，在弹出菜单中选择在弹出菜单中选择“移除关键帧移除关键帧”命令。命令。 单击单击“时间轴时间轴”面板中的面板中的“前进前进”和和“后退后退”按钮预按钮预览动画效果。选中览动画效果。选中“自动播放自动播放”复选框或复选框或“循环循环”复选框，复选框，在浏览器中自动循环播放动画在浏览器中自动循环播放动画 。v 4. 4. 拖动路径创建时间轴拖动路径创建时间轴 DreamweaverDreamweaver可以将拖动层的轨迹记录下来，利用层可以将拖动层的轨迹记录下来，利用层的拖动创建图像随时间轴飘动的动态效果。其操作步骤如的拖动创建图像随时间轴飘动的动态效果。其操作步骤如下：下

35、： 步骤步骤1 1单击单击“插入插入”栏栏“布局布局”选项选项“绘制层绘制层”按钮，在动画开始位置绘制一个层，单击层内，插入一幅按钮，在动画开始位置绘制一个层，单击层内，插入一幅图像。图像。 步骤步骤2 2选中层，选择选中层，选择“修改修改”菜单菜单“时间轴时间轴”“录制层路径录制层路径”命令，按命令，按F4F4快捷键，隐藏所有的面板，在快捷键，隐藏所有的面板，在“文档文档”窗口中随心所欲地拖动层，最后与起点重合，放窗口中随心所欲地拖动层，最后与起点重合，放开鼠标。此时，开鼠标。此时，DreamweaverDreamweaver将层所经过的路径记录下来。将层所经过的路径记录下来。步骤步骤3 3

36、打开打开“时间轴时间轴”面板，选中面板，选中“自动播放自动播放”和和“循环循环”两个复选框，如图所示。两个复选框，如图所示。v 1. 1. 行为的概念行为的概念 行为主要有行为主要有3 3部分组成：对象、事件和动作。对象是部分组成：对象、事件和动作。对象是行为的主体，在网页中的对象主要有文本、图像、窗口等。行为的主体，在网页中的对象主要有文本、图像、窗口等。 事件是针对某一对象所执行的特定的操作。如当鼠标事件是针对某一对象所执行的特定的操作。如当鼠标指针指向超链接时，会生成一个指针指向超链接时，会生成一个OnMouseOverOnMouseOver事件；当单事件；当单击超链接时，会生成一个击超

37、链接时，会生成一个OnClickOnClick事件。不同的对象通常事件。不同的对象通常会产生不同的事件。会产生不同的事件。 动作主要是由动作主要是由JavaScriptJavaScript编写的实现特定功能的代码编写的实现特定功能的代码组成。一旦动作与某一特定事件关联，则当产生事件的同组成。一旦动作与某一特定事件关联，则当产生事件的同时会触发相应的动作，以实现特定的功能。比如要在窗口时会触发相应的动作，以实现特定的功能。比如要在窗口载入（载入（OnLoadOnLoad）的过程中打开新的窗口，则可以将）的过程中打开新的窗口，则可以将OnLoadOnLoad事件与打开新窗口的动作相关联。事件与打开

38、新窗口的动作相关联。v 2. Dreamweaver2. Dreamweaver内部的行内部的行为为 DreamweaverDreamweaver内置的行内置的行为有多种，通过为有多种，通过“行为行为”面板查看。选择面板查看。选择“窗口窗口”菜单菜单“行为行为”命令，打命令，打开开“行为行为”面板，如图所面板，如图所示。示。 框架可以把一个浏览器窗口划分多个区域，每框架可以把一个浏览器窗口划分多个区域，每个区域显示不同的网页，它的这个特性使其成为一种常用个区域显示不同的网页，它的这个特性使其成为一种常用的页面排版技术。的页面排版技术。 【例【例4.44.4】框架排版网页：某某电子公司网站，如图

39、】框架排版网页：某某电子公司网站，如图所示。所示。 本实例所涉及到的主要知识点包括以下几点：本实例所涉及到的主要知识点包括以下几点：v 使用框架技术布局和制作网页；使用框架技术布局和制作网页；v 该网页的布局是一个包括三个框架该网页的布局是一个包括三个框架（topframe,leftframe,mainframetopframe,leftframe,mainframe）的框架集）的框架集framesetframeset，上框架始保持不动，当浏览者单击左边的导航栏时，相应上框架始保持不动，当浏览者单击左边的导航栏时，相应的内容显示在右边区域；的内容显示在右边区域；v 使用框架技术的关键是：在使用

40、链接时，必须指定链接的使用框架技术的关键是：在使用链接时，必须指定链接的目标位置。目标位置。4.6.2 创建与编辑框架结构1. 1. 框架构成及设置框架构成及设置 一个框架实际上是由多个一个框架实际上是由多个HTMLHTML文档所构成的，其中一文档所构成的，其中一个页面专门负责框架的集成，比如是分行型还是分列型，个页面专门负责框架的集成，比如是分行型还是分列型，或者是混合型；行和列的尺寸如何等，一般被称为框架集或者是混合型；行和列的尺寸如何等，一般被称为框架集页面，其它的是普通的页面，其它的是普通的HTMLHTML文档，分别被放置到框架结构文档，分别被放置到框架结构中，被称为框架页，当链接到设

41、置框架的中，被称为框架页，当链接到设置框架的HTMLHTML文档时，整文档时，整个框架以及各个框架以及各HTMLHTML文档就会一起显示在浏览器中。文档就会一起显示在浏览器中。2.2.创建框架创建框架 启动启动DreamweaverDreamweaver后，单击启动界面后，单击启动界面“从范例创从范例创建建”“框架集框架集”，弹出，弹出 “新建文档新建文档”的对话框，单击的对话框，单击“常规常规”选项卡，选择选项卡，选择“框架集框架集”及右侧列表框中的框架及右侧列表框中的框架样式，如图所示。样式，如图所示。 4.6.2 创建与编辑框架结构4.6.2 创建与编辑框架结构3 3、编辑框架、编辑框架

42、 用户可对已经创建好的框架集进行编辑和修改，例用户可对已经创建好的框架集进行编辑和修改，例如将一个框架拆分成几个更小的框架，或是移动框架的如将一个框架拆分成几个更小的框架，或是移动框架的边框来改变框架显示的范围大小。边框来改变框架显示的范围大小。v拆分框架拆分框架v删除框架删除框架v改变框架的行高和列宽改变框架的行高和列宽4.6.2 创建与编辑框架结构v 4. 4. 选择框架选择框架 选择选择“窗口窗口”菜单菜单“框架框架”命令，打开命令，打开“框架框架”面面板，如图所示。板，如图所示。框架外框框架内嵌外框框架内部4.6.2 创建与编辑框架结构4.6.2 创建与编辑框架结构（2 2）设置框架的

43、属性）设置框架的属性 选中某个框架，在选中某个框架，在“属性属性”面板可以定义框架属性，面板可以定义框架属性，如图所示。如图所示。4.6.2 创建与编辑框架结构v 6 6、设置超链接目标框架、设置超链接目标框架 所谓超链接目标框架，所谓超链接目标框架，是指当单击超链接时，超是指当单击超链接时，超链接的目标网页文件在哪链接的目标网页文件在哪个框架中显示。例如：对个框架中显示。例如：对于一般左窄右宽的列式框于一般左窄右宽的列式框架结构，一般是在左边框架结构，一般是在左边框架的网页中包含超链接的架的网页中包含超链接的导航信息，而在右边的框导航信息，而在右边的框架中显示超链接的目标网架中显示超链接的目

44、标网页文件。在页文件。在“目标目标”下拉下拉列表中，选择目标框架名，列表中，选择目标框架名，如图所示。如图所示。4.6.2 创建与编辑框架结构 在在“目标目标”下拉列表中，选择目标框架名，如图所示。下拉列表中，选择目标框架名，如图所示。 链接目标的含义：链接目标的含义：v _blank_blank：在一个新窗口显示超链接的目标文件，：在一个新窗口显示超链接的目标文件，同时保持同时保持当前窗口不变。当前窗口不变。v _parent_parent：在上一级框架中打开链接文件。：在上一级框架中打开链接文件。v _self_self：在当前框架中打开链接，同时替换该框架中的内在当前框架中打开链接，同时替换该框架中的内容。为网页超链接的默认目标窗口。