第4.2章 表格和样式表及层、行为和时间线、框架、表单、布局及模板等

1、第四章Dreamweaver 8(第2部分)表格层与时间轴框架与表单布局与模板标签检查器、站点地图、导航栏站点发布与运行主要内容：2主要内容：掌握如何插入表格掌握表格和单元格的选定掌握表格的属性设置掌握如何向表格单元格添加内容31.1 插入表格在文档窗口的设计视图中，将插入点放在需要表格出现的位置。方法1：单击“插入”菜单，选择“表格”项，方法2：直接单击插入面板组中的常用面板上的“插入表格”按钮，即会出现“插入表格”对话框，按需要进行相应的参数设置 。41.2 选择整个表格方法1：单击表格的左上角或者单击右边或底部边缘的任意位置。 方法2：单击表格中任意一单元格，然后在文档窗口左下角的标签选

2、择器中选择 table 标签。方法3：单击表格单元格，然后选择“修改”菜单下“表格”子菜单下的“选择表格”。 当表格的外边框呈黑色，表示整个表格已经被选中 5选择表格的行或列方法1：将鼠标指针指向行的左边缘或列的上边缘时，鼠标指针会变为黑色选择箭头时，单击鼠标左键就可以选择行或列。方法2: 进行拖动以选择多个行或列。 6选择单个单元格单击单元格，然后在文档窗口左下角的标签选择器中选择 td 标签。单击单元格，然后选择 “table”标签，则选中表格。 修改菜单也可选择。7选择多个单元格方法1：从一个单元格拖到另一个单元格。方法2：单击一个单元格，然后按住 Shift 键单击另一个单元格。这两个

3、单元格定义的直线或矩形区域中的所有单元格都将被选中。连续单元格被选中。 方法2：选择不连续单元格时：按住 Ctrl 键的同时单击要选择的单元格、行或列。 81.3 单元格的合并与拆分合并单元格：步1：选定要合并的单元格；步2：通过属性面板左下角的合并按钮。拆分单元格：步1：光标定位；步2：通过属性面板中的拆分单元格按钮。步3：利用对话框中的提示进行设置。91.4 表格中行和列的编辑利用 “修改”菜单下 “表格”菜单项下的级连菜单项实现：表格中插入行；表格中删除行；(也可先选定行，利用delete键）表格中插入列；表格中删除列； (也可先选定列，利用delete键）10观察：填充（单元格中内容与

4、边框的距离），间距（单元格间的宽度），边框改变时的效果。1.5 表格的属性设置 选定表格整体，设置表格整体的属性 设置单元格属性 11通过“命令”菜单中的“格式化表格”命令实现。 （带有Caption的表格没办法应用）表格的格式化121.6 向表格单元格添加内容 向表格中插入图片 首先定位。 即设置要插入图片在表格中的位置。选择“插入”菜单的“图像”选项或点“插入图像”按钮，在弹出的对话框中选择合适的图片，点“确定”按钮即可在表格中插入指定的图片。向表格中添加文字 先定位在添加文本。13上机练习 制作一个一行一列的表格，设置表格的填充、间距、边框都为1 0，在表格中插入一幅图片，在浏览器中观看

5、该页面的效果，体会填充、间距、边框的使用方法。示例效果如下页图所示。14【表格的2种常见用途】显示和排列内容；利用表格进行网页的布局，其中要使用表格的嵌套。15理解层的概念掌握层的创建、操作与属性设置理解行为与事件的概念掌握利用时间线创建动画2. 层、行为和时间线 162.1 层的概述 层是HTML内容的容器，是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。利用层能够精确对网页页面元素定位。（例如：左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 ）利用层浮动面版和层属性面版可以控制多个层的叠放次序（z属性）、显示或隐藏层，是否重叠等。 层与时间线

6、配合使用设计出动画效果。172.2 创建层 方法1：单击布局插入栏上的“绘制层”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。或者将布局插入栏上的“绘制层”按钮直接拖动到文档中，即可在文档中放置一个预设大小的层。方法2：将插入点放入文档窗口，然后选择“插入”菜单布局对象下的“层”选项。方法3：若要连续绘制多个层，单击“插入”栏上的“绘制层”按钮。通过按住 Ctrl 键并拖动来绘制各个层。只要不松开 Ctrl，就可以继续绘制新的层。 18激活和选中层 激活层，单击层中任意位置此时光标在层中闪耀，层的左上角出现选择柄，边框线由灰色变为黑色 ，可向层中添加内容。选中层的多种方法如下: (用于设置

7、层的属性)单击层的标记，可选中相对应的层。先激活层，再单击层左上角的选择柄，可选中该层。单击层的边框，也可选中层。按住Shift键，单击每一个要选中的层，可选中多个层。 19改变层的默认属性 选择“编辑”菜单中 “首选参数”命令，在打开如图所示的对话框中的“分类”列表框选择“层”选项，则可改变层的默认参数。 20利用层的属性面板设置层属性（一） 【层编号】：用于指定一个名称，以便在“层”面板和 脚本代码中标识该层。每个层都必须有它自己的唯一名称。 21设置层属性面板（二） 【Z 轴】：确定层的 z 轴（即层叠顺序）。编号较大的层出现在编号较小的层的前面（上面）。【显示】：指定该层最初是否是可见

8、的。 “default默认” 选项表示可见的； “inherit继承” 选项表示继承了父级的可见性属性； “visible可见” 选项表示显示层的内容； “hidden“隐藏” 选项表示隐藏层的内容。 22设置层属性面板（三） 【溢出】：当层的内容超过层的指定大小时，层中内容的显示情况。包含以下四种选项： “visible可见”选项表示指示在层中显示额外的内容。 “hidden隐藏” 选项表示不在浏览器中显示额外的内容。 “scroll滚动” 选项表示滚动条永远存在。（运行时可见） “auto自动” 选项表示需要时显示滚动条。23“层”浮动面板及操作层（一） 通过 “层” 浮动控制面板可以完成

9、对层命名、选定层、修改层的可见性、设置层在堆栈中的叠放次序及设置层嵌套等操作。选择“窗口”菜单下的 “层”选项，出现层控制面板。 创建4个层，如图所示。层显示为按 z 轴顺序排列的名称列表；首先创建的层出现在列表的底部，最后创建的层出现列表的顶部。Z值越大层越在上面。24“层”控制面板及操作层（二） 利用层控制面板，可以快速修改层名称（双击层名）和层的显示与隐藏（单击，如果显示一个睁眼的图标，表示显示该层；如果显示一个闭眼的图标，表示隐藏该层）改变Z索引值：单击Z列，便可修改该层的层次属性值。或者用鼠标拖曳层，也可以调整该层的叠放次序。25“层”控制面板及操作层（三） 创建嵌套层：按住Ctrl

10、键，然后在层控制面板中拖曳子层到父层上，当父层上出现黑框时松开鼠标，便可创建一个嵌套层，如图所示，把Layer2拖曳到Layer3上。取消嵌套层：只需用鼠标将子层拖离父层，便可取消嵌套层。26在层中插入内容在层中可以插入各种元素。元素加入后仍可以设置属性。272.3 事件与行为事件：即，浏览器生成的消息，表示访问者执行了某种操作(例如鼠标的经过、单击等各种操作)。行为：事件和由该事件触发的响应动作。Dreamweaver中是由JavaScript代码实现的，完成特定的任务。利用行为面板设置。使用行为控制面板添加或删除事件和相应行为。“+”和“-”按钮。必须先选中对象，再添加相应的行为。 例如：

11、利用行为面板添加鼠标经过图像效果。先添加“交换图像”行为，再添加“恢复交换图像”行为。282.4 利用时间轴面板创建层动画 时间线技术能让网页中的元素随时间变化活动起来，从而创建出多姿多彩的网页动画。（例如：浮动小动画）网页中的动态效果其实质是在网页上依次快速连续地显示与某个图像相关联的多幅图像，因显示速度较快使人形成图像活动的感觉。 时间线动画的单位是帧，每一帧是动画的一幅瞬间图。时间线动画是在特定的时间内、在指定的动画运动轨迹上，显示一系列有关联特性的静态图像的组合。时间轴只能移动层！29时间轴面板（一） 通过窗口菜单/时间轴可以打开时间轴面板。“时间轴”弹出式菜单：指定当前在“时间轴”面

12、板中显示文档的哪些时间轴。“帧编号”：指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率。30时间轴面板（二） 行为通道B：在时间轴中特定帧处添加执行的行为的通道。 即，在某时刻通过行为面板可以添加特定行为。“播放栏”：显示当前在文档窗口中显示时间线的哪一帧。播放栏行为通道“时间轴”弹出式菜单动画通道帧编号动画条关键帧31时间轴面板（三） “关键帧”：是动画条中已经为对象指定属性（如位置）的帧。小圆标记表示关键帧。“动画条”：显示每个对象动画的持续时间。“动画”通道：显示用于制

13、作层和图像动画的条。“自动播放”：浏览器加载页面时自动播放时间轴。“循环”：循环播放时间轴。最常见的时间轴动画都涉及到沿着一条轨迹移动层。时间轴只能移动层！32使用时间轴制作层的简单路径动画：绘制层，并添加对象。将层移至它在动画开始时应处于的位置。选择“修改”“时间轴”“添加对象到时间轴”，或者简单地将选定层拖至“时间轴”面板中。单击位于条末端的关键帧标记。在页面上将层移至它在动画结束时应处于的位置。 将出现一条线，它显示文档窗口中动画的轨迹。如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击 (Windows) 动画条中部的一个帧，从而在您单击的帧处添加一个关键帧，或者单击动

14、画条中部的一个帧并从上下文菜单中选择“添加关键帧”。然后拖动层到其他位置，则生成曲线移动动画。预览页面上的动画。 33通过拖动路径创建复杂路径动画目的：创建复杂路径的动画。方法： 步1：创建层并添加对象； 步2：将层移动到起始位置； 步3：选择“修改”/”时间轴”/”录制层路径”菜单 步4：在页面中随意拖动层，创建想要的路径。 步5：保存。预览34利用显示-隐藏层制作动态网页效果功能：鼠标移动到每个对象显示层内容，鼠标移开对象层自然消失。步骤：1）添加某个对象。针对对象添加一个层和层中对象。2）设置层的开始属性为Hidden;3）选择刚才的对象，并打开行为面板。4）单击“行为”，选择 “显示-

15、隐藏层” ，分别选择onMouseover()时显示层，onmouseout()时隐藏层。（注意如何使层的位置与对象的位置协调！？ ） 35利用行为面板添加状态栏的文本提示。 方法： 步1：选中要在状态栏显示提示信息的内容。 步2：选择面板行为菜单中的设置文本/设置状态栏文本。 步3：添加文本信息。 36上机练习目的：掌握层的使用技巧，熟练运用行为，创建合适的动作与事件，增添网页的效果。要求：按步操作，制作隐藏层特效使用时间线创建动态HTML动画。3738【课后习题】如何生成层？层属性面板包含了哪些选项？什么是行为？谈谈你对动作和事件的理解。如何设置时间轴？如何添加关键帧？393 框架与表单主

16、要内容（1）框架的创建（2）框架的属性设置（3）表单及包含对象的创建（4）表单及对象属性的设置40框架与框架集介绍使用框架提供将一个浏览器窗口划分为多个区域。不同区域，可以显示不同 HTML 文档。 框架集是框架的集合，是一个 HTML 文件。它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容，但 noframes 部分除外。413 .1 框架的创建与保存1）创建框架集和框架 方法1：在当前文档中使用“插入面板/布局/框架”类别。 方法2： 在“新建文档”对话框中使用“框架集”类别。2）保

17、存框架和框架集 利用文件菜单中的菜单命令： （1）框架页保存和框架页另存为命令用于框架集保存； （2）框架保存、框架另存为和保存全部用于框架保存。注意：保存框架时注意通过轮廓的变化确定保存对象。 保存后的框架集和各框架分别对应一个文件。42框架的编辑1）框架的拆分方法1：利用ALT+鼠标脱动边界,进行分割。方法2: 利用插入工具栏或插入菜单/html/框架。2）框架的删除 将边框框架拖离页面或拖到父框架的边框上。3）框架集删除 先关闭显示它的“文档”窗口。如果该框架集文件已保存，则删除框架集所对应的文件。431）框架中打开已有文件将插入点放置在框架中。选择“文件”“在框架中打开”。2）框架中文

18、件的保存首先在框架中单击，然后选择“文件”“保存框架”或“框架另存为”。 向每个框架中添加对象内容的方法与单个页面添加方法相同。框架中文件的打开和保存443.2 框架的属性设置步一：首先选择您要更改的框架或框架集。（方法1） 框架的选择利用ALT健+单击某个框架； 框架集的选择利用单击框架的边框；（方法2）通过“框架”面板进行选择。步二：通过属性检查器设置所有框架和框架集的格式。45该设置针对不支持框架的浏览器。方法：选择“修改”菜单“框架页”“编辑无框架内容”。处理不能显示框架的浏览器46框架之间设置超链在一个框架中使用链接实现在另一个框架中打开某文档，必须设置链接目标（target）。链接

19、的 target 属性指定打开链接的内容地点位置（即框架名或窗口）。473.3 表单及对象的创建通过选择“插入”“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。 （任何其他表单对象，如文本域、按钮等，都必须插入到两个 form 标签之中，这样所有浏览器才能正确处理这些数据。） 48“文本域”在表单中插入文本域。可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。“复选框”在表单中插入复选框。“单选按钮” 单选按钮代表互相排斥的选择。 “单选按钮组”插入共享同一名称的单选按钮的集合。 “列表/菜单” 可以在列表中创建用户选项。 “列表

20、”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。 “菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。表单中包含的对象：49“图像域” 在表单中插入图像。 利用行为面板添加给图像域的图形按钮添加行为。 例如：利用行为面版的“弹出消息”添加行为。 “文件域”在文档中插入空白文本域和“浏览”按钮。“按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。50隐藏域的添加； 不显示，但可以实现网页之间传递信息。 隐藏域中的值(value)被传递到服务器端。跳转菜单的添加 跳转菜单可以建立URL与下拉式菜单列表中的选项之间的联系。513.4 表单及对象属性的设置

21、选中表单或对象。通过属性面板进行相应的设置。524 布局与模板主要内容（1）布局模式及其应用（2）模板的创建与使用534.1 布局模式及其应用常用的创建网页布局的方法是（1）使用 表格对元素进行定位。（繁琐）（2）布局视图下制作布局表格。（灵活）Dreamweaver 8的页面布局有三种工作模式，分别是标准视图、扩展视图和布局视图。54在布局视图中，不能使用在“标准”视图中可以使用的“插入表格”和“绘制层”工具。布局模式的三种情况：（1）一个布局表格中使用多个布局单元格。（2）多个独立的布局表格。相互之间修改不影响。（3）布局表格可以嵌套。55布局的创建步骤1：从标准视图切换到布局视图。步骤2

22、：在布局视图中，绘制布局表格，并调整大小。步骤3：在布局表格中，绘制多个布局单元格。布局单元格不能存在于布局表格之外。注意： 布局表格不能互相重叠，但布局表格可嵌套。 布局单元格不能相互重叠和嵌套。56布局中添加对象在布局视图中可以将文本、图像和其他内容添加到布局单元格中。也可以布局设置好后切换到标准视图下添加对象。当添加宽度大于布局单元格的内容时，该单元格将自动扩展。（事先做好素材的大小）。57设置布局视图样式参数通过首选参数对话框可以设置布局视图的相关参数。584.2 模板简介模板是一种特殊类型的文档，用来产生具有固定特征和共同格式的文档基础。（模版文件后缀.dwt）改变模版就可以改变所有

23、基于该模版的页面。模板文档中包含可编辑区域和固定区域。59方法1：在新建文档中“常规/模版页/html模版”创建模版。在设计视图中设定可编辑区域和固定区域。方法2：利用已有文档另存为模版：文档另存为模板时，Dreamweaver 自动锁定文档的大部分区域。在模板中插入可编辑区域。将插入点放在要插入可编辑区域的地方。选择“插入”“模板对象”“可编辑区域”。这样可以给基于该模版的页面添加用户自己的信息。 创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。模版的创建60模版的保存Dreamweaver 用文件扩展名 .dwt

24、来保存模板。模板被保存在站点的本地根文件夹中的一个特殊 Templates 文件夹中。如果该 Templates 文件夹在站点中尚不存在，Dreamweaver 将在保存新建模板时自动创建该文件夹。 不要将 Templates 文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。61模版编辑首先打开模版文件;创建可编辑区域：利用插入面板中模版标签页。可以将整个表格或单独行、单元格内设置为可编辑的。 层和层内容是单独的元素；使层可编辑时可以更改层的位置及其内容，而使层的内容可编辑时

25、只能更改层的内容而不是位置。3. 删除可编辑区域： 将模板文件的一个区域标记为可编辑，而现在想要再次锁定它（使其不可编辑），请使用“删除模板标记”命令。选择“修改”“模板”“删除模板标记”。4. 根据需要添加其他信息。62模版的应用（基于模板创建新文档）方法1：在“新建文档”对话框中创建基于模板的文档：选择“文件”“新建”打开“新建文档”对话框。在“新建文档”对话框中选择“模板”选项卡。在“模板用于”列表中选择包含要使用的模板的站点。对话框右边显示所选站点中的模板。 在该列表中选择想要使用的模板。单击“创建”新建一个基于模板的页面。文档在“文档”窗口中打开。63方法2：从“文件”面板/“资源”

26、标签页中的模板创建新文档： 如果“资源”面板尚未打开，请将其打开 (F11)。在“资源”模板中，单击“模板”图标查看站点模板。 提示： 如果刚刚创建了要应用的模板，可能需要单击“刷新”按钮才能看到。3. 右击应用的模板，然后在上下文菜单中选择“从模板新建”。4. 在“文档”窗口中打开文档。 64更新基于模板的文档方法1：保存更新后的模板时，Dreamweaver 会自动询问是否应该更新所有附着到该模板的文档。 如果方法1时选择不更新，则可以采用下面的步骤：方法2： 首先打开文档，然后选择“修改”“模板”“更新当前页”。 更新整个站点或所有使用附着模板的文档:选择“修改”“模板”“更新页面”。出

27、现“更新页面”对话框.在“查看”弹出式菜单选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。这将把所选站点中的所有页面更新到相应的模板。65若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。 从模板分离文档步骤： 打开想要分离的基于模板的文档。选择“修改”“模板”“从模板中分离”。文档被从模板分离后，所有模板代码标记都被删除。从模板分离文档 665 标签检查器、网站相册、导航栏使用“标签选择器”插入各种标签，并且使用“标签检查器”设置标签的属性值，它的功能类似于属性面板，但是比属性面板更强大。步骤：插入点放在需要插入滚动字幕的地方。插入菜单“标签.”菜单命令打开“标签选择器 ”。3.选择 marquee标签，点击“插入”按钮。代码视图。把光标插入点放在 marquee标签内添加滚动文本。5. 选择marquee标签，设置其属性。标签检查器使用：例如滚动字幕的制作67网站相册的创建目的：快速创建以图片浏览为主的页面，每张图片可打开单独预览。（但要求装载Fireworks图像处理软件）步骤：步1：选择“命令”菜单/”创建网站相册”菜单项。步2：对话框中，选择图片所在的原始位置，设置生成后的页面存放位置。步3：可对生成的页面进一步编辑68制作导航栏作用：引导浏览者游历站点。在用