第4.2章-表格和样式表及层行为和时间线框架表单布局及模板等课件.ppt

《第4.2章-表格和样式表及层行为和时间线框架表单布局及模板等课件.ppt》由会员分享，可在线阅读，更多相关《第4.2章-表格和样式表及层行为和时间线框架表单布局及模板等课件.ppt（74页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第四章第四章Dreamweaver 8(第第2部分部分)1.表格表格2.层与时间轴层与时间轴3.框架与表单框架与表单4.布局与模板布局与模板5.标签检查器、站点地图、导航栏标签检查器、站点地图、导航栏6.站点发布与运行站点发布与运行主要内容：主要内容：2 21.1.表格表格主要内容：主要内容：掌握如何掌握如何插入表格插入表格掌握表格和单元格的掌握表格和单元格的选定选定掌握表格的掌握表格的属性设置属性设置掌握如何向表格掌握如何向表格单元格添加内容单元格添加内容3 31.1 1.1 插入插入表格表格在在文文档档窗窗口口的的设设计计视视图图中中，将将插插入入点点放放在在需需要要表表格格出出现现的位置

2、。的位置。方法方法1 1：单击：单击“插入插入”菜单菜单，选择，选择“表格表格”项，项，方方法法2 2：直直接接单单击击插插入入面面板板组组中中的的常常用用面面板板上上的的“插插入入表表格格”按按钮钮，即即会会出出现现“插插入入表表格格”对对话话框框，按按需需要要进进行相应的参数设置行相应的参数设置 。4 41.2 1.2 选择选择整个表格整个表格方方法法1 1：单单击击表表格格的的左左上上角角或或者者单单击击右右边边或或底底部部边缘边缘的任意位置。的任意位置。方方法法2 2：单单击击表表格格中中任任意意一一单单元元格格，然然后后在在文文档档窗口左下角的窗口左下角的标签选择器中选择标签选择器中

3、选择 table table 标签标签。方方法法3 3：单单击击表表格格单单元元格格，然然后后选选择择“修修改改”菜菜单下单下“表格表格”子菜单下的子菜单下的“选择表格选择表格”。当当表格的外边框呈黑色表格的外边框呈黑色，表示整个表格已经被选中，表示整个表格已经被选中 5 5选择选择表格的表格的行或列行或列方方法法1 1：将将鼠鼠标标指指针针指指向向行行的的左左边边缘缘或或列列的的上上边边缘缘时时，鼠鼠标标指指针针会会变变为为黑黑色色选选择择箭箭头头时时，单击鼠标左键就可以选择行或列。单击鼠标左键就可以选择行或列。方法方法2:2:进行进行拖动以选择多个行或列。拖动以选择多个行或列。6 6选择单

4、个选择单个单元格单元格单单击击单单元元格格，然然后后在在文文档档窗窗口口左左下下角角的的标标签签选选择择器中器中选择选择 td td 标签标签。单单击击单单元元格格，然然后后选选择择 “tabletable”标标签签，则则选选中中表格。表格。修改菜单也可选择。修改菜单也可选择。7 7选择多个单元格选择多个单元格方法方法1 1：从一个单元格：从一个单元格拖到拖到另一个单元格。另一个单元格。方方法法2 2：单单击击一一个个单单元元格格，然然后后按按住住 Shift Shift 键键单单击击另另一一个个单单元元格格。这这两两个个单单元元格格定定义义的的直直线线或或矩矩形形区区域域中中的的所所有单元格

5、都将被选中。连续单元格被选中。有单元格都将被选中。连续单元格被选中。方方法法2 2：选选择择不不连连续续单单元元格格时时：按按住住 Ctrl Ctrl 键键的的同同时时单单击要选择的单元格、行或列。击要选择的单元格、行或列。8 81.3 单元格的合并与拆分单元格的合并与拆分合并单元格：合并单元格：步步1：选定要合并的单元格；：选定要合并的单元格；步步2：通过：通过属性面板左下角的合并按钮属性面板左下角的合并按钮。拆分单元格：拆分单元格：步步1：光标定位；：光标定位；步步2：通过属性面板中的拆分单元格按钮。：通过属性面板中的拆分单元格按钮。步步3：利用对话框中的提示进行设置。：利用对话框中的提示

6、进行设置。9 91.4 表格中行和列的编辑表格中行和列的编辑利用利用“修改修改”菜单下菜单下“表格表格”菜单项菜单项下的下的级连菜单级连菜单项实项实现：现：表格中插入行；表格中插入行；表格中删除行；表格中删除行；(也可也可先选定行，利用先选定行，利用delete键键）表格中插入列；表格中插入列；表格中删除列；表格中删除列；(也可也可先选定列，利用先选定列，利用delete键键）1010观察：填充（单元格中内容与边框的距离），间距（单元格间的宽度），边框改变时的效果。1.1.5 5 表格的属性设置表格的属性设置 选定表格整体，设置选定表格整体，设置表格表格整体的属性整体的属性 设置设置单元格属性

7、单元格属性 1111通过通过“命令命令”菜单中的菜单中的“格式化表格格式化表格”命令实现。命令实现。（带有（带有Caption的表格没办法应用）的表格没办法应用）表格的格式化表格的格式化12121.1.6 6 向表格单元格向表格单元格添加内容添加内容 向表格中向表格中插入图片插入图片 首先定位首先定位。即设置要插入图片在表格中的位置。即设置要插入图片在表格中的位置。选选择择“插插入入”菜菜单单的的“图图像像”选选项项或或点点“插插入入图图像像”按按钮钮，在在弹弹出出的的对对话话框框中中选选择择合合适适的的图图片片，点点“确定确定”按钮即可在表格中插入指定的图片。按钮即可在表格中插入指定的图片。

8、向表格中向表格中添加文字添加文字 先定位在添加文本。先定位在添加文本。1313上机练习上机练习 制作一个一行一列的表格，设置表格的填充、间距、边填充、间距、边框都为框都为1 0，在表格中插入一幅图片，在浏览器中观看该页面的效果，体会填充、间距、边框的使用方法。示例效果如下页图所示。1414【表格的【表格的2 2种常见用途种常见用途】显示和排列内容；显示和排列内容；利利用用表表格格进进行行网网页页的的布布局局，其其中中要要使使用用表表格的嵌套。格的嵌套。1515理解理解层的概念层的概念掌握掌握层的创建、操作与属性设置层的创建、操作与属性设置理解理解行为行为与事件的概念与事件的概念掌握掌握利用利用

9、时间线创建动画时间线创建动画2.2.层、行为和时间线层、行为和时间线 16162.1 2.1 层层的概述的概述 层层是是HTMLHTML内内容容的的容容器器，是是网网页页中中用用来来放放置置文文本本、图图像、动画、表单、插件等网页元素的载体。像、动画、表单、插件等网页元素的载体。利利用用层层能能够够精精确确对对网网页页页页面面元元素素定定位位。（例例如如：左左和和上上（左左侧侧和和顶顶部部）指指定定层层的的左左上上角角相相对对于于页页面面（如如果果嵌嵌套套，则则为为父父层层）左左上上角的位置。角的位置。）利利用用层层浮浮动动面面版版和和层层属属性性面面版版可可以以控控制制多多个个层层的的叠叠放

10、放次序（次序（z z属性）属性）、显示显示或或隐藏隐藏层层，是否重叠是否重叠等。等。层与时间线配合使用层与时间线配合使用设计出动画效果设计出动画效果。17172.2 2.2 创建层创建层 方方法法1 1：单单击击布布局局插插入入栏栏上上的的“绘绘制制层层”按按钮钮，然然后后在在文文档档窗窗口口的的设设计计视视图图中中通通过过拖拖动动来来绘绘制制层层。或或者者将将布布局局插插入入栏栏上上的的“绘绘制制层层”按按钮钮直直接接拖拖动动到到文文档档中中，即即可可在在文文档档中中放置一个预设大小的层。放置一个预设大小的层。方方法法2 2：将将插插入入点点放放入入文文档档窗窗口口，然然后后选选择择“插插入

11、入”菜菜单单布局对象布局对象下的下的“层层”选项。选项。方方法法3 3：若若要要连连续续绘绘制制多多个个层层，单单击击“插插入入”栏栏上上的的“绘绘制制层层”按按钮钮。通通过过按按住住 Ctrl Ctrl 键键并并拖拖动动来来绘绘制制各各个个层层。只只要不松开要不松开 CtrlCtrl，就可以继续绘制新的层。就可以继续绘制新的层。1818激活和选中层激活和选中层 激激活活层层，单单击击层层中中任任意意位位置置此此时时光光标标在在层层中中闪闪耀耀，层层的的左左上上角角出出现现选选择择柄柄，边边框框线线由由灰灰色色变变为为黑黑色色 ，可可向向层层中中添加内容添加内容。选中层选中层的多种方法如下的多

12、种方法如下:(用于设置层的属性用于设置层的属性)单击层的标记单击层的标记 div，可选中相对应的层。可选中相对应的层。先激活层，再单击层左上角的选择柄，可选中该层。先激活层，再单击层左上角的选择柄，可选中该层。单击层的边框，也可选中层。单击层的边框，也可选中层。按按住住ShiftShift键键，单单击击每每一一个个要要选选中中的的层层，可可选选中中多多个个层。层。1919改变层的改变层的默认属性默认属性 选选择择“编编辑辑”菜菜单单中中 “首首选选参参数数”命命令令，在在打打开开如如图图所所示示的的对对话话框框中中的的“分分类类”列列表表框框选选择择“层层”选选项项，则可改变层的默认参数。则可

13、改变层的默认参数。2020利用层的属性面板设置层属性（一）利用层的属性面板设置层属性（一）【层层编编号号】：用用于于指指定定一一个个名名称称，以以便便在在“层层”面面板板和和 脚脚本本代代码码中中标标识识该该层层。每每个个层层都都必须有它自己的唯一名称必须有它自己的唯一名称。2121设置层属性面板（二）设置层属性面板（二）【Z Z 轴轴】：确确定定层层的的 z z 轴轴（即即层层叠叠顺顺序序）。编编号号较大的层出现在编号较小的层的前面（上面）较大的层出现在编号较小的层的前面（上面）。【显示显示】：指定该层最初是否是可见的指定该层最初是否是可见的。“defaultdefault默认默认”选项表示

14、可见的；选项表示可见的；“inheritinherit继承继承”选项表示继承了父级的可见性属性；选项表示继承了父级的可见性属性；“visiblevisible可见可见”选项表示显示层的内容；选项表示显示层的内容；“hiddenhidden“隐藏隐藏”选项表示隐藏层的内容。选项表示隐藏层的内容。2222设置层属性面板（三）设置层属性面板（三）【溢溢出出】：当当层层的的内内容容超超过过层层的的指指定定大大小小时时，层层中中内内容的显示情况。包含以下四种选项：容的显示情况。包含以下四种选项：“visiblevisible可见可见”选项表示指示在层中显示额外的内容。选项表示指示在层中显示额外的内容。“

15、hiddenhidden隐藏隐藏”选项表示不在浏览器中显示额外的内容。选项表示不在浏览器中显示额外的内容。“scrollscroll滚动滚动”选项表示滚动条永远存在。选项表示滚动条永远存在。（运行时可见）（运行时可见）“autoauto自动自动”选项表示需要时显示滚动条。选项表示需要时显示滚动条。2323“层层”浮动面板浮动面板及操作层（一）及操作层（一）通通过过 “层层”浮浮动动控控制制面面板板可可以以完完成成对对层层命命名名、选选定定层层、修修改改层层的的可可见见性性、设设置置层层在在堆堆栈栈中中的的叠叠放次序及设置层嵌套等操作。放次序及设置层嵌套等操作。选选择择“窗窗口口”菜菜单单下下的

16、的 “层层”选项选项，出现层控，出现层控制面板。制面板。创创建建4 4个个层层，如如图图所所示示。层层显显示示为为按按 z z 轴轴顺顺序序排排列列的的名名称称列列表表；首首先先创创建建的的层层出出现现在在列列表表的的底底部部，最最后后创创建建的的层层出出现现列列表表的的顶顶部部。Z Z值值越越大大层越在上面。层越在上面。2424“层层”控制面板及操作层（二）控制面板及操作层（二）利利用用层层控控制制面面板板，可可以以快快速速修修改改层层名名称称（双双击击层层名名）和和层层的的显显示示与与隐隐藏藏（单单击击，如如果果显显示示一一个个睁睁眼眼的的图图标标，表表示示显显示示该该层层；如如果果显显示

17、示一一个个闭闭眼眼的的图图标标，表表示示隐隐藏藏该该层）层）改改变变Z Z索索引引值值：单单击击Z Z列列，便便可可修修改改该该层层的的层层次次属属性性值值。或或者者用用鼠鼠标标拖拖曳曳层层，也也可可以以调调整整该该层层的的叠放次序。叠放次序。2525“层层”控制面板及操作层（三）控制面板及操作层（三）创创建建嵌嵌套套层层：按按住住CtrlCtrl键键，然然后后在在层层控控制制面面板板中中拖拖曳曳子子层层到到父父层层上上，当当父父层层上上出出现现黑黑框框时时松松开开鼠鼠标标，便便可可创创建建一一个个嵌嵌套套层层，如如图图所所示示，把把Layer2Layer2拖曳到拖曳到Layer3Layer3

18、上。上。取取消消嵌嵌套套层层：只只需需用用鼠鼠标标将将子子层层拖拖离离父父层层，便可取消嵌套层。便可取消嵌套层。2626在层中插入内容在层中插入内容在层中可以插入各种元素。在层中可以插入各种元素。元素加入后仍可以设置属性。元素加入后仍可以设置属性。27272.3 2.3 事件与行为事件与行为事事件件：即即，浏浏览览器器生生成成的的消消息息，表表示示访访问问者者执执行行了了某某种种操操作作(例如鼠标的经过、单击等各种操作例如鼠标的经过、单击等各种操作)。行行为为：事事件件和和由由该该事事件件触触发发的的响响应应动动作作。DreamweaverDreamweaver中中是是由由JavaScript

19、JavaScript代代码码实实现现的的，完完成成特特定定的的任任务务。利利用用行行为为面面板板设置。设置。使使用用行行为为控控制制面面板板添添加加或或删删除除事事件件和和相相应应行行为为。“+”和和“-”按钮。按钮。必须先选中对象，再添加相应的行为必须先选中对象，再添加相应的行为。例例如如：利利用用行行为为面面板板添添加加鼠鼠标标经经过过图图像像效效果果。先先添添加加“交交换换图图像像”行行为为，再添加再添加“恢复交换图像恢复交换图像”行为。行为。28282.4 2.4 利用利用时间轴面板时间轴面板创建层动画创建层动画 时时间间线线技技术术能能让让网网页页中中的的元元素素随随时时间间变变化化

20、活活动动起起来来，从从而创建出多姿多彩的网页动画而创建出多姿多彩的网页动画。（例如：浮动小动画）（例如：浮动小动画）网网页页中中的的动动态态效效果果其其实实质质是是在在网网页页上上依依次次快快速速连连续续地地显显示示与与某某个个图图像像相相关关联联的的多多幅幅图图像像，因因显显示示速速度度较较快快使使人人形形成图像活动的感觉。成图像活动的感觉。时间线动画的单位是时间线动画的单位是帧帧，每一帧是动画的一幅，每一帧是动画的一幅瞬间图瞬间图。时时间间线线动动画画是是在在特特定定的的时时间间内内、在在指指定定的的动动画画运运动动轨轨迹迹上上，显示一系列有关联特性的，显示一系列有关联特性的静态图像的组合

21、静态图像的组合。时间轴只能移动层！时间轴只能移动层！2929时间轴时间轴面板面板（一）（一）通过通过窗口菜单窗口菜单/时间轴时间轴可以打开时间轴面板。可以打开时间轴面板。“时时间间轴轴”弹出式菜单：指定当前在“时间轴”面板中显示文档的哪些时间轴。“帧帧编编号号”：指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。通过设置帧的总数和每秒帧数(fps)来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率。3030时间轴面板（二）时间轴面板（二）行为通道行为通道B B：在时间轴中特定帧特定帧处添加执行的行为的通道。即，在某时刻通过行为面板可以添加特定行为。“播放栏播放栏”：

22、显示当前在文档窗口中显示时间线的哪一帧。播播放放栏栏行为通道行为通道“时时间间轴轴”弹弹出出式式菜菜单单动画通道动画通道帧编号帧编号动画条动画条关键帧关键帧3131时间轴面板（三）时间轴面板（三）“关键帧关键帧”：是动画条中已经为对象指定属性（如位置）的帧。小圆标记表示关键帧。“动画条动画条”：显示每个对象动画的持续时间。“动画动画”通道：通道：显示用于制作层和图像动画的条。“自动播放自动播放”：浏览器加载页面时自动播放时间轴。“循环循环”：循环播放时间轴。最常见的时间轴动画都涉及到沿着一条轨迹移动层。时间轴只能移动层时间轴只能移动层！3232使用时间轴制作使用时间轴制作层的简单路径层的简单路

23、径动画：动画：1.绘制层，并添加对象。绘制层，并添加对象。2.将层移至它在动画将层移至它在动画开始时应处于的位置开始时应处于的位置。3.选择选择“修改修改”“时间轴时间轴”“添加对象到时间轴添加对象到时间轴”，或，或者简单地将者简单地将选定层拖至选定层拖至“时间轴时间轴”面板面板中。中。4.单击位于条末端的关键帧标记单击位于条末端的关键帧标记。5.在页面上将层移至它在动画结束时应处于的位置。在页面上将层移至它在动画结束时应处于的位置。6.将出现一条线，它显示文档窗口中动画的轨迹。将出现一条线，它显示文档窗口中动画的轨迹。7.如果要让层沿如果要让层沿曲线移动曲线移动，请选择其动画条，然后按住，请

24、选择其动画条，然后按住 Ctrl 键并单击键并单击(Windows)动画条中部的一个帧，从而在动画条中部的一个帧，从而在您单击的帧处您单击的帧处添加一个关键帧添加一个关键帧，或者单击动画条中部的，或者单击动画条中部的一个帧并从一个帧并从上下文菜单中选择上下文菜单中选择“添加关键帧添加关键帧”。然后拖。然后拖动层到其他位置，则生成曲线移动动画。动层到其他位置，则生成曲线移动动画。8.预览页面上的动画。预览页面上的动画。3333通过通过拖动路径拖动路径创建创建复杂路径复杂路径动画动画目的：创建复杂路径的动画。目的：创建复杂路径的动画。方法：方法：步步1：创建层并添加对象创建层并添加对象；步步2：将

25、层移动到起始位置；：将层移动到起始位置；步步3：选择：选择“修改修改”/”时间轴时间轴”/”录制层路径录制层路径”菜单菜单 步步4：在页面中随意拖动层，创建想要的路径。：在页面中随意拖动层，创建想要的路径。步步5：保存。预览：保存。预览3434利用利用显示显示-隐藏层隐藏层制作动态网页效果制作动态网页效果功能：功能：鼠标移动到每个对象显示层内容，鼠标移开对象层自然消失。步骤：步骤：1）添加某个对象。针对对象添加一个层和层中对象。2）设置层的开始属性为设置层的开始属性为Hidden;3）选择刚才的对象，并打开行为面板。4）单击“行为”，选择“显示-隐藏层”，分别选择onMouseover()时显

26、示层，onmouseout()时隐藏层。（注意如何使层的位置与对象的位置协调！？（注意如何使层的位置与对象的位置协调！？）3535利用行为面板添加状态栏的文本提示。利用行为面板添加状态栏的文本提示。方法：步1：选中要在状态栏显示提示信息的内容。步2：选择面板行为菜单中的设置文本/设置状态栏文本。步3：添加文本信息。3636上机练习上机练习目的：掌握层的使用技巧，熟练运目的：掌握层的使用技巧，熟练运用行为，创建合适的动作与事件，用行为，创建合适的动作与事件，增添网页的效果。增添网页的效果。要求：要求：按步操作，制作隐藏层特效使用时间线创建动态HTML动画。37373838【课后习题】【课后习题】

27、如如何何生生成成层层？层层属属性性面面板板包包含含了了哪哪些些选项？选项？什什么么是是行行为为？谈谈谈谈你你对对动动作作和和事事件件的的理解。理解。如何设置时间轴？如何添加关键帧？如何设置时间轴？如何添加关键帧？39393 3 框架与表单框架与表单主要内容主要内容（1）框架的创建）框架的创建（2）框架的属性设置）框架的属性设置（3）表单及包含对象的创建）表单及包含对象的创建（4）表单及对象属性的设置）表单及对象属性的设置4040框架与框架集介绍框架与框架集介绍框架与框架集介绍框架与框架集介绍使用框架使用框架提供将一个浏览器窗口划分为多个区域。不同区域，可以显示不同 HTML 文档。框架集框架集

28、是框架的集合，是一个 HTML 文件。它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容，但 noframes 部分除外。41413.1 3.1 框架的创建与保存框架的创建与保存框架的创建与保存框架的创建与保存1）创建）创建框架集和框架框架集和框架 方法方法1：在：在当前文档中当前文档中使用使用“插入面板插入面板/布局布局/框架框架”类别。类别。方法方法2：在在“新建文档新建文档”对话框中使用对话框中使用“框架集框架集”类别。类别。2）保存框架和框架集）保存框架和框架集 利用文件菜单中的菜

29、单命令：利用文件菜单中的菜单命令：（1）框架框架页页保存保存和和框架框架页页另存为另存为命令用于命令用于框架集保存框架集保存；（2）框架保存框架保存、框架另存为框架另存为和和保存全部保存全部用于用于框架保存框架保存。注意：注意：保存框架时注意通过轮廓的变化确定保存对象。保存框架时注意通过轮廓的变化确定保存对象。保存后的框架集和各框架分别对应一个文件。保存后的框架集和各框架分别对应一个文件。4242框架的编辑框架的编辑框架的编辑框架的编辑1）框架的）框架的拆分拆分方法1：利用ALT+鼠标脱动边界,进行分割。方法2:利用插入工具栏或插入菜单/html/框架。2）框架的）框架的删除删除 将边框框架拖

30、离页面或拖到父框架的边框上。将边框框架拖离页面或拖到父框架的边框上。3）框架集框架集删除删除 先关闭显示它的先关闭显示它的“文档文档”窗口。如果该框架窗口。如果该框架集文件已保存，则集文件已保存，则删除框架集所对应的文件删除框架集所对应的文件。43431）框架中）框架中打开已有文件打开已有文件将插入点放置在框架中。选择“文件”“在框架中打开”。2）框架中文件的保存）框架中文件的保存首先在框架中单击，然后选择“文件”“保存框架”或“框架另存为”。向每个框架中添加对象内容的方法与单个页向每个框架中添加对象内容的方法与单个页面添加方法相同。面添加方法相同。框架中文件的打开和保存框架中文件的打开和保存

31、44443.2 3.2 框架的属性设置框架的属性设置框架的属性设置框架的属性设置步一：步一：首先选择您要更改的框架或框架集。首先选择您要更改的框架或框架集。（方法（方法1）框架框架的选择利用的选择利用ALT健健+单击某个框架；单击某个框架；框架集框架集的选择利用的选择利用单击框架的边框单击框架的边框；（方法（方法2）通过）通过“框架框架”面板面板进行选择。进行选择。步二：步二：通过属性检查器设置所有框架和框架通过属性检查器设置所有框架和框架集的格式。集的格式。4545该设置针对不支持框架的浏览器。该设置针对不支持框架的浏览器。方法：选择方法：选择“修改修改”菜单菜单“框架页框架页”“编编辑无框

32、架内容辑无框架内容”。处理不能显示框架的浏览器处理不能显示框架的浏览器4646框架之间设置超链框架之间设置超链在一个在一个框架中使用链接框架中使用链接实现在另一个框架中实现在另一个框架中打开某文档，必须设置打开某文档，必须设置链接目标（链接目标（target）。链接的链接的 targettarget 属性属性指定打开链接的内容地指定打开链接的内容地点位置（即点位置（即框架名框架名或窗口）或窗口）。47473.3 表单及对象的创建表单及对象的创建通过选择通过选择“插入插入”“表单对象表单对象”来插入表来插入表单对象单对象，或者通过从下图显示的，或者通过从下图显示的“插入插入”栏栏的的“表单表单”

33、面板面板访问表单对象来插入表单对访问表单对象来插入表单对象。象。（任何其他表单对象，如文本域、按钮等，都必须插入到（任何其他表单对象，如文本域、按钮等，都必须插入到两个两个 formform 标签之中，这样所有浏览器才能正确处理这些标签之中，这样所有浏览器才能正确处理这些数据。）数据。）4848“文本域文本域”在表单中插入文本域。可以显示为在表单中插入文本域。可以显示为单行单行、多行多行或者显示为项目符号或星号（用于保护或者显示为项目符号或星号（用于保护密码密码）。）。“复选框复选框”在表单中插入复选框。在表单中插入复选框。“单选按钮单选按钮”单选按钮代表互相排斥的选择。单选按钮代表互相排斥的

34、选择。“单选按钮组单选按钮组”插入插入共享同一名称共享同一名称的单选按钮的集的单选按钮的集合。合。“列表列表/菜单菜单”可以在列表中创建用户选项。可以在列表中创建用户选项。“列表列表”选项在滚动列表中显示选项值，并选项在滚动列表中显示选项值，并允许用户允许用户在列表中选择多个选项在列表中选择多个选项。“菜单菜单”选项在弹出式菜单中显示选项值，而且选项在弹出式菜单中显示选项值，而且只允只允许用户选择一个选项。许用户选择一个选项。表单中包含的对象：表单中包含的对象：4949“图像域图像域”在表单中插入图像。在表单中插入图像。利用行为面板添加给图像域的图形按钮添加行为。例如：利用行为面版的“弹出消息

35、”添加行为。“文件域文件域”在文档中插入空白文本域和在文档中插入空白文本域和“浏浏览览”按钮。按钮。“按钮按钮”在表单中插入文本按钮。按钮在单在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。击时执行任务，如提交或重置表单。5050隐藏域隐藏域的添加；的添加；不显示，但可以实现网页之间传递信息。不显示，但可以实现网页之间传递信息。隐藏域中的隐藏域中的值值(value)被传递到服务器端。被传递到服务器端。跳转菜单跳转菜单的添加的添加 跳转菜单可以建立跳转菜单可以建立URL与下拉式菜单与下拉式菜单列表中列表中的选项的选项之间的联系。之间的联系。51513.4 表单及对象属性的设置表单及

36、对象属性的设置选中表单或对象。选中表单或对象。通过属性面板进行相应的设置。通过属性面板进行相应的设置。52524 布局与模板布局与模板主要内容主要内容（1）布局模式及其应用）布局模式及其应用（2）模板的创建与使用）模板的创建与使用53534.1 4.1 布局模式及其应用布局模式及其应用布局模式及其应用布局模式及其应用常用的创建网页布局的方法是（常用的创建网页布局的方法是（1）使用）使用 表格表格对元素进行定位。对元素进行定位。（繁琐）（繁琐）（2）布局视布局视图下制作图下制作布局表格布局表格。（灵活）（灵活）Dreamweaver 8的页面布局有三种工作模式，的页面布局有三种工作模式，分别是分

37、别是标准视图标准视图、扩展视图和、扩展视图和布局视图布局视图。5454在布局视图中，不能使用在在布局视图中，不能使用在“标准标准”视图中可视图中可以使用的以使用的“插入表格插入表格”和和“绘制层绘制层”工具。工具。布局模式的三种情况：布局模式的三种情况：（1）一个布局表格中使用多个布局单元格。）一个布局表格中使用多个布局单元格。（2）多个独立的布局表格。相互之间修改不影响。）多个独立的布局表格。相互之间修改不影响。（3）布局表格可以嵌套。）布局表格可以嵌套。5555布局的创建布局的创建步骤步骤1：从标准视图：从标准视图切换到布局视图切换到布局视图。步骤步骤2：在布局视图中，：在布局视图中，绘制

38、布局表格，并调整大小。绘制布局表格，并调整大小。步骤步骤3：在布局表格中：在布局表格中，绘制多个布局单元格，绘制多个布局单元格。布局布局单元格不能存在于布局表格之外单元格不能存在于布局表格之外。注意：注意：布局表格布局表格不能互相重叠不能互相重叠，但布局表格，但布局表格可嵌套可嵌套。布局单元格不能相互重叠和嵌套。布局单元格不能相互重叠和嵌套。5656布局中添加对象布局中添加对象在在布局视图中布局视图中可以将文本、图像和其他内可以将文本、图像和其他内容容添加到添加到布局单元格布局单元格中中。也可以布局设置也可以布局设置好后切换到标准视图下添加对象。好后切换到标准视图下添加对象。当添加宽度大于布局

39、单元格的内容时，该当添加宽度大于布局单元格的内容时，该单元格将自动扩展。单元格将自动扩展。（事先做好素材的大小）（事先做好素材的大小）。5757设置布局视图样式参数设置布局视图样式参数通过通过首选参数首选参数对话框可以设置布局视图的相关参对话框可以设置布局视图的相关参数。数。58584.2 模板简介模板简介模板模板是一种特殊类型的文档，用来产生具是一种特殊类型的文档，用来产生具有有固定特征和共同格式固定特征和共同格式的文档基础。（模的文档基础。（模版版文件后缀文件后缀.dwt）改变模版就可以改变所改变模版就可以改变所有基于该模版的页面。有基于该模版的页面。模板文档中包含模板文档中包含可编辑区域

40、可编辑区域和和固定区域固定区域。5959方法方法1：在新建文档中在新建文档中“常规常规/模版页模版页/html模版模版”创建模版。创建模版。在设计视图中设定可编辑区域和固定区域在设计视图中设定可编辑区域和固定区域。方法方法2：利用已有文档利用已有文档另存为模版另存为模版：文档另存为模板另存为模板时，Dreamweaver 自动锁定文档的大部分区域。在模板中插入可编辑区域在模板中插入可编辑区域。将插入点放在要插入可编辑区域的地方。选择选择“插入插入”“模板对象模板对象”“可编辑区域可编辑区域”。这样可以给基于该模版的页面添加用户自己的信息。创建模板时创建模板时，可编辑区域和锁定区域都可以更改。，

41、可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，但是，在基于模板的文档中，模板用户模板用户只能在可编辑区只能在可编辑区域中进行更改；无法修改锁定区域。域中进行更改；无法修改锁定区域。模版的创建模版的创建6060模版的保存模版的保存Dreamweaver 用文件扩展名用文件扩展名.dwt 来保存模板。模来保存模板。模板被保存板被保存在站点的本地根文件夹在站点的本地根文件夹中的一个中的一个特殊特殊 Templates 文件夹文件夹中。如果该中。如果该 Templates 文件夹在文件夹在站点中尚不存在，站点中尚不存在，Dreamweaver 将在保存新建模板将在保存新建模板时时自动创建该

42、文件夹自动创建该文件夹。不要将不要将 Templates 文件夹移动到本地根文件夹之外文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。这样做将在模板中的路径中引起错误。不要将模板移动到不要将模板移动到 Templates 文件夹之外文件夹之外或者将任或者将任何非模板文件放在何非模板文件放在 Templates 文件夹中。文件夹中。6161模版编辑模版编辑1.首先打开首先打开模版文件模版文件;2.创建创建可编辑区域可编辑区域：利用插入面板中模版标签页。利用插入面板中模版标签页。可以将整个表格或单独行、单元格内设置为可编辑的。层和层内容是单独的元素；使层可编辑时可以更改层的位置及其

43、内容，而使层的内容可编辑时只能更改层的内容而不是位置。3.删除删除可编辑区域：可编辑区域：将模板文件的一个区域标记为可编辑，而现在想要再次将模板文件的一个区域标记为可编辑，而现在想要再次锁定它（使其不可编辑），请使用锁定它（使其不可编辑），请使用“删除模板标记删除模板标记”命令。命令。选择“修改”“模板”“删除模板标记”。4.根据需要添加其他信息。根据需要添加其他信息。6262模版的应用模版的应用（基于模板创建新文档）基于模板创建新文档）基于模板创建新文档）基于模板创建新文档）方法方法1：在：在“新建文档新建文档”对话框中创建基于模板的文档对话框中创建基于模板的文档：1.选择选择“文件文件”“

44、新建新建”打开打开“新建文档新建文档”对话框。对话框。2.在在“新建文档新建文档”对话框中选择对话框中选择“模板模板”选项卡。选项卡。3.在在“模板用于模板用于”列表中选择包含要使用的模板的站点。列表中选择包含要使用的模板的站点。4.对话框右边显示所选站点中的模板。对话框右边显示所选站点中的模板。5.在该列表中选择想要使用的模板。在该列表中选择想要使用的模板。6.单击单击“创建创建”新建一个基于模板的页面。新建一个基于模板的页面。7.文档在文档在“文档文档”窗口中打开。窗口中打开。6363方法方法2：从：从“文件文件”面板面板/“资源资源”标签页中的模板创建新文档标签页中的模板创建新文档：1.

45、如果如果“资源资源”面板尚未打开，请将其打开面板尚未打开，请将其打开(F11)。2.在在“资源资源”模板中，单击模板中，单击“模板模板”图标查看站点模板。图标查看站点模板。提示：提示：如果刚刚创建了要应用的模板，可能需要单击如果刚刚创建了要应用的模板，可能需要单击“刷新刷新”按钮才能看到。按钮才能看到。3.右击应用的模板右击应用的模板，然后在上下文菜单中选择，然后在上下文菜单中选择“从模板新建从模板新建”。4.在在“文档文档”窗口中打开文档。窗口中打开文档。6464更新基于模板的文档更新基于模板的文档方法方法1：保存更新后的模板时，：保存更新后的模板时，Dreamweaver 会会自动询问自动

46、询问是否是否应该更新所有附着到该模板的文档。应该更新所有附着到该模板的文档。如果方法如果方法1时选择不更新，则可以采用下面的步骤：时选择不更新，则可以采用下面的步骤：方法方法2：首先打开文档，然后首先打开文档，然后选择选择“修改修改”“模板模板”“更新当前页”。更新整个站点或所有使用附着模板的文档更新整个站点或所有使用附着模板的文档:1.选择“修改”“模板”“更新页面更新页面”。出现“更新页面”对话框.2.在“查看”弹出式菜单选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。这将把所选站点中的所有页面更新到相应的模板。6565若要更改基于模板的文档的锁定区域，必须若要更改基于模板的文档的

47、锁定区域，必须将该文档从模板分离。将该文档从模板分离。将文档分离之后，整将文档分离之后，整个文档都将变为可编辑的。个文档都将变为可编辑的。从模板分离文档步骤从模板分离文档步骤：1.打开想要分离的基于模板的文档。2.选择“修改”“模板”“从模板中分离”。3.文档被从模板分离后，所有模板代码标记都被删除。从模板分离文档从模板分离文档 66665 标签检查器、网站相册、导航栏标签检查器、网站相册、导航栏使用使用“标签选择器器”插入各种插入各种标签，并且使用，并且使用“标签检查器器”设置置标签的属性的属性值，它的功能，它的功能类似于属性面板，但是似于属性面板，但是比属性面板更比属性面板更强大。大。步骤

48、：步骤：1.把光标插入点插入点放在需要插入滚动字幕的地方。2.点击插入插入菜单菜单“标签标签.”菜单命令菜单命令打开“标签选择器”。3.选择 marquee标签，点击“插入”按钮。4.转换到代码视图。把光标插入点放在 marquee标签内添加滚动文本。5.选择marquee标签，设置其属性。标签检查器使用：例如标签检查器使用：例如标签检查器使用：例如标签检查器使用：例如滚动字幕的制作滚动字幕的制作滚动字幕的制作滚动字幕的制作6767网站相册网站相册的创建的创建目的：快速创建以图片浏览为主的页面，每张图目的：快速创建以图片浏览为主的页面，每张图片可打开单独预览。（但片可打开单独预览。（但要求装载

49、要求装载Fireworks图像图像处理软件处理软件）步骤：步骤：步1：选择“命令”菜单/”创建网站相册”菜单项。步2：对话框中，选择图片所在的原始位置，设置生成后的页面存放位置。步3：可对生成的页面进一步编辑6868制作制作导航栏导航栏作用：引导浏览者游历站点。在用户页面之间进行切换作用：引导浏览者游历站点。在用户页面之间进行切换每个页面都可以显示，一般在顶端或一侧。每个页面都可以显示，一般在顶端或一侧。6969制作过程举例：制作过程举例：步一：步一：准备必要的图象资源。例如：通常状态图片，鼠标经过状态图片，鼠标按下状态图片。步二步二：在页面上制作一个3行1列的表格，宽度850像素；其他属性为

50、0。表格第一行放banner条图片（高100px）；第二行高度设为30像素放导航条；第三行放置页面主要内容。然后 将表格居中显示。步三步三：鼠标定位到第二行，利用插入栏中的利用插入栏中的“导航栏导航栏”添添加导航项加导航项。注意对话框中各属性的设置。步四：复制首页文档，分别制作其他页面的文档。步四：复制首页文档，分别制作其他页面的文档。注意设注意设置相应菜单项为激活状态。置相应菜单项为激活状态。步五：完成各导航项的超链，并预览。步五：完成各导航项的超链，并预览。70706.6.站点发布与运行（本地发布）站点发布与运行（本地发布）站点发布与运行（本地发布）站点发布与运行（本地发布）首先利用测试服