《网页设计》课件网页设计-5.ppt

1、表格应用表格应用应用应用篇篇应用布局模式应用布局模式框架应用框架应用层层 应应 用用页面布局设计页面布局设计l 网页是在网站上显示的基本页面网页是在网站上显示的基本页面l 利用利用“页面属性页面属性”命令设置页面的整体格式命令设置页面的整体格式l 利用利用“属性属性”面板设置页面各个对象的格式面板设置页面各个对象的格式l 插入文本数据插入文本数据 普通文字输入或粘贴普通文字输入或粘贴 特殊文字利用特殊文字利用“插入插入/文本文本/字符字符”对象对象 导入外部数据（文件导入外部数据（文件/导入导入 ）l 插入多媒体数据插入多媒体数据页面布局设页面布局设计计创建网页创建网页l 定位页面元素定位页面

2、元素（如：页面分栏、文本和图像等）（如：页面分栏、文本和图像等）l 创建表格（插入创建表格（插入/表格）表格）l 利用利用“属性属性”面板设置表格对象格式面板设置表格对象格式l 在已有的表格中，单击鼠标右键，通过在已有的表格中，单击鼠标右键，通过“快快 捷捷”菜单中的菜单中的“表格表格”命令编辑表格。命令编辑表格。页面布局设页面布局设计计表格应用表格应用当前插入点当前插入点示示 例例表格提示框表格提示框间距边框 设置设置表格属性表格属性l 创建表格（插入创建表格（插入/表格）表格）l 选定表格选定表格 l 编辑表格编辑表格l 表格嵌套表格嵌套l 为表格添加内容为表格添加内容l 表格格式化表格格

3、式化l 表格排序表格排序应用示例应用示例 表格基本操作表格基本操作页面布局设页面布局设计计 Dreamweaver提供了标准视图和布局视图两种提供了标准视图和布局视图两种创建表格方式来设计页面布局，前面介绍的即是创建表格方式来设计页面布局，前面介绍的即是在标准视图下创建表格的应用。在标准视图下创建表格的应用。布局模式是指用可视化的方法在页面上绘制布局模式是指用可视化的方法在页面上绘制复杂的表格，可以在布局模式下任意地绘制表格，复杂的表格，可以在布局模式下任意地绘制表格，在表格中也可以任意地绘制单元格，给网页设计在表格中也可以任意地绘制单元格，给网页设计工作带来极大的方便，比在标准视图下使用表格

4、工作带来极大的方便，比在标准视图下使用表格更具有灵活性。更具有灵活性。应用布局模式应用布局模式在默认的情况下，文档窗口是以标准模式显示在默认的情况下，文档窗口是以标准模式显示的。要使用布局视图，必须首先从的。要使用布局视图，必须首先从Dreamweaver的的标准视图模式进入到布局视图模式。标准视图模式进入到布局视图模式。进入布局模式进入布局模式句炳插入点嵌套表格指向单元格时移动表格时应用示例应用示例 编辑表格或单元格编辑表格或单元格应用示例应用示例 在一新页面中插入一个在一新页面中插入一个3列的布局表格，其列的布局表格，其中左单元格使用固定像素，设置宽度为中左单元格使用固定像素，设置宽度为1

5、00；中；中间单元格使用百分比进行设置为间单元格使用百分比进行设置为“自动伸展自动伸展”；右端单元格也使用固定像素，设置宽度为右端单元格也使用固定像素，设置宽度为200。在左端单元格存放一幅宽度为在左端单元格存放一幅宽度为100的图片、右的图片、右端存放一幅宽度为端存放一幅宽度为200的图片，而在中间单元格的图片，而在中间单元格存放一个文本文件。存放一个文本文件。也就是说，将固定大小内也就是说，将固定大小内容的对象放置到固定宽度的容的对象放置到固定宽度的单元格中，不需要固定宽度单元格中，不需要固定宽度的内容放到中间可变的宽度的内容放到中间可变的宽度的单元格中。的单元格中。这样就可以实现不同浏览

6、这样就可以实现不同浏览器下动态调整页面内容，使器下动态调整页面内容，使页面达到最佳浏览效果。页面达到最佳浏览效果。利用自动伸展特性利用自动伸展特性l 框架可以将浏览器窗口分割成不同的区域框架可以将浏览器窗口分割成不同的区域l 创建框架（文件创建框架（文件/新建文档新建文档/常规常规-框架集）框架集）l 框架中的每一个区域都是一个独立的页面框架中的每一个区域都是一个独立的页面l 整个框架由一个主文件控制整个框架由一个主文件控制l 保存框架（主控文件和各个框架文件）保存框架（主控文件和各个框架文件）l 选中某个框架（按下选中某个框架（按下Alt+单击区域）单击区域）l 添加或删除框架（拖拽边线）添

7、加或删除框架（拖拽边线）l 在框架中打开文档（文件在框架中打开文档（文件/在框架中打开）在框架中打开）页面布局设页面布局设计计框架应用框架应用 创建创建框架框架示示 例例框架边框分割线框架边框分割线topFramemainFrameleftFrame具有一个上方固定、左侧嵌套的具有一个上方固定、左侧嵌套的3个框架结构的框架集。个框架结构的框架集。由于在框架集中的每个框架都是一个独立的页面，由于在框架集中的每个框架都是一个独立的页面，所以一个框架集可以包含若干个文档文件，创建好所以一个框架集可以包含若干个文档文件，创建好框架集后需要将每个框架保存成一个个独立的框架集后需要将每个框架保存成一个个独

8、立的HTML文件和一个框架集文件（通常为文件和一个框架集文件（通常为index.html或或index.htm）。然后就可以在这些独立的文件中）。然后就可以在这些独立的文件中创建页面内容了。创建页面内容了。Dreamweaver提供了多种保存框架页面的相关命提供了多种保存框架页面的相关命令，随着用户当前的状态不同，给出的保存命令也令，随着用户当前的状态不同，给出的保存命令也有所不同。在执行保存命令之前，首先要选中要保有所不同。在执行保存命令之前，首先要选中要保存的对象。存的对象。通常，一个框架集具有通常，一个框架集具有 n+1个文件。个文件。保存保存框架框架输入框架文件名输入框架文件名提示保存

9、的框架提示保存的框架示示 例例 框架集建立后，就可以往各个框架的区域存框架集建立后，就可以往各个框架的区域存放内容了。放内容了。只要在文档窗口中的任意一个框架里单击一只要在文档窗口中的任意一个框架里单击一下就可置当前插入点为该框架内，然后就可以下就可置当前插入点为该框架内，然后就可以象编辑一般的页面一样，插入各种各样的文本、象编辑一般的页面一样，插入各种各样的文本、图片等网页元素。图片等网页元素。当然，也可以直接打开某个框架文件独立进当然，也可以直接打开某个框架文件独立进行页面编辑制作。行页面编辑制作。添加内容添加内容 设置设置框架或框架集属性框架或框架集属性层应用层应用 层是网页制作特色功能

10、之一，提供了强大的网页控层是网页制作特色功能之一，提供了强大的网页控制能力，可以精确定位制能力，可以精确定位Web页面的各个元素。页面的各个元素。层是网页中的一个区域，一个网页中可以有多个层，层是网页中的一个区域，一个网页中可以有多个层，其特点是各个层之间可以重叠，并可以决定每个层其特点是各个层之间可以重叠，并可以决定每个层是否可见，也可以定义各层之间的层次关系。是否可见，也可以定义各层之间的层次关系。层的运用使创作者在处理图像时能够在多个层的运用使创作者在处理图像时能够在多个“画布画布”上进行，从而大大提高创作者的工作效率，同时使上进行，从而大大提高创作者的工作效率，同时使创作出的作品效果更

11、加丰富。创作出的作品效果更加丰富。层技术属于动态层技术属于动态HTML范畴，只有范畴，只有4.0版本以上的浏版本以上的浏览器才支持。览器才支持。页面布局设页面布局设计计l 页面对象按顺序一张张叠放在一起，以垂直方向页面对象按顺序一张张叠放在一起，以垂直方向 组合起来形成页面的最终效果即为层。组合起来形成页面的最终效果即为层。l 创建图层（插入创建图层（插入/布局对象布局对象/层）层）l 典型应用（在对象上叠放典型应用（在对象上叠放flash动画）动画）基本知识基本知识200115 创建层创建层 设置层属性设置层属性 层创建好后，就可以在层中添加对象，如文层创建好后，就可以在层中添加对象，如文字

12、、图像等，其操作方法与插入对象相同。字、图像等，其操作方法与插入对象相同。单击层单击层边框边框，可以选中层；当鼠标指针，可以选中层；当鼠标指针放到层边框线上指针变为十字时，按住鼠标左放到层边框线上指针变为十字时，按住鼠标左键可以拖动层，将其放置页面任何位置。键可以拖动层，将其放置页面任何位置。拖动层四周的小方块，调整层的大小。拖动层四周的小方块，调整层的大小。添加对象添加对象示示 例例层应用示例：层应用示例：创建对象透明效果创建对象透明效果 题目：题目：在标题图片文字上添加动画效果在标题图片文字上添加动画效果 创建一新页面，保存为创建一新页面，保存为“ex-1.htm”；在文档中插入标题图片；在文档中插入标题图片；在文档中插入一个图层；在文档中插入一个图层；在图层中插入在图层中插入“星星闪烁星星闪烁”动画；动画；设置层对象透明效果；设置层对象透明效果；预览即可看到实际效果。预览即可看到实际效果。步骤一：插入图片步骤一：插入图片步骤二：插入图层步骤二：插入图层步骤三：插入动画步骤三：插入动画移动图层到图片合适位置移动图层到图片合适位置 步骤四：设置动画透明效果步骤四：设置动画透明效果预预览览效效果果教学实践：教学实践：掌握页面布局设计掌握页面布局设计 利用表格、框架制作网页利用表格、框架制作网页 熟悉层的应用熟悉层的应用 习题五习题五