网站开发与设计基础 表格和样式表及层行为和时间线框架表单布局及模板等.pptx

《网站开发与设计基础 表格和样式表及层行为和时间线框架表单布局及模板等.pptx》由会员分享，可在线阅读，更多相关《网站开发与设计基础 表格和样式表及层行为和时间线框架表单布局及模板等.pptx（73页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、11.1.表格表格主要内容：掌握如何插入表格掌握表格和单元格的选定掌握表格的属性设置掌握如何向表格单元格添加内容第1页/共73页21.1 1.1 插入表格在文档窗口的设计视图中，将插入点放在需要表格出现的位置。方法1：单击“插入”菜单，选择“表格”项，方法2：直接单击插入面板组中的常用面板上的“插入表格”按钮，即会出现“插入表格”对话框，按需要进行相应的参数设置。第2页/共73页31.2 1.2 选择整个表格方法1：单击表格的左上角或者单击右边或底部边缘的任意位置。方法2：单击表格中任意一单元格，然后在文档窗口左下角的标签选择器中选择 table 标签。方法3：单击表格单元格，然后选择“修改”

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

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

4、容与边框的距离），间距（单元格间的宽度），边框改变时的效果。1.1.5 5 表格的属性设置 选定表格整体，设置表格整体的属性 设置单元格属性 第9页/共73页10通过“命令”菜单中的“格式化表格”命令实现。（带有Caption的表格没办法应用）表格的格式化第10页/共73页111.1.6 6 向表格单元格添加内容 向表格中插入图片 首先定位。即设置要插入图片在表格中的位置。选择“插入”菜单的“图像”选项或点“插入图像”按钮，在弹出的对话框中选择合适的图片，点“确定”按钮即可在表格中插入指定的图片。向表格中添加文字 先定位在添加文本。第11页/共73页12上机练习 制作一个一行一列的表格，设置表

5、格的填充、间距、边框都为1 0，在表格中插入一幅图片，在浏览器中观看该页面的效果，体会填充、间距、边框的使用方法。示例效果如下页图所示。第12页/共73页13【表格的2 2种常见用途】显示和排列内容；利用表格进行网页的布局，其中要使用表格的嵌套。第13页/共73页14理解层的概念掌握层的创建、操作与属性设置理解行为与事件的概念掌握利用时间线创建动画2.层、行为和时间线 第14页/共73页152.1 2.1 层的概述 层是HTML内容的容器，是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。利用层能够精确对网页页面元素定位。（例如：左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌

6、套，则为父层）左上角的位置。）利用层浮动面版和层属性面版可以控制多个层的叠放次序（z属性）、显示或隐藏层，是否重叠等。层与时间线配合使用设计出动画效果。第15页/共73页162.2 2.2 创建层 方法1：单击布局插入栏上的“绘制层”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。或者将布局插入栏上的“绘制层”按钮直接拖动到文档中，即可在文档中放置一个预设大小的层。方法2：将插入点放入文档窗口，然后选择“插入”菜单布局对象下的“层”选项。方法3：若要连续绘制多个层，单击“插入”栏上的“绘制层”按钮。通过按住 Ctrl 键并拖动来绘制各个层。只要不松开 Ctrl，就可以继续绘制新的层。第16页

7、/共73页17激活和选中层 激活层，单击层中任意位置此时光标在层中闪耀，层的左上角出现选择柄，边框线由灰色变为黑色，可向层中添加内容。选中层的多种方法如下:(用于设置层的属性)单击层的标记，可选中相对应的层。先激活层，再单击层左上角的选择柄，可选中该层。单击层的边框，也可选中层。按住Shift键，单击每一个要选中的层，可选中多个层。第17页/共73页18改变层的默认属性 选择“编辑”菜单中“首选参数”命令，在打开如图所示的对话框中的“分类”列表框选择“层”选项，则可改变层的默认参数。第18页/共73页19利用层的属性面板设置层属性（一）【层编号】：用于指定一个名称，以便在“层”面板和 脚本代码

8、中标识该层。每个层都必须有它自己的唯一名称。第19页/共73页20设置层属性面板（二）【Z 轴】：确定层的 z 轴（即层叠顺序）。编号较大的层出现在编号较小的层的前面（上面）。【显示】：指定该层最初是否是可见的。“default默认”选项表示可见的；“inherit继承”选项表示继承了父级的可见性属性；“visible可见”选项表示显示层的内容；“hidden“隐藏”选项表示隐藏层的内容。第20页/共73页21设置层属性面板（三）【溢出】：当层的内容超过层的指定大小时，层中内容的显示情况。包含以下四种选项：“visible可见”选项表示指示在层中显示额外的内容。“hidden隐藏”选项表示不在

9、浏览器中显示额外的内容。“scroll滚动”选项表示滚动条永远存在。（运行时可见）“auto自动”选项表示需要时显示滚动条。第21页/共73页22“层”浮动面板及操作层（一）通过“层”浮动控制面板可以完成对层命名、选定层、修改层的可见性、设置层在堆栈中的叠放次序及设置层嵌套等操作。选择“窗口”菜单下的“层”选项，出现层控制面板。创建4个层，如图所示。层显示为按 z 轴顺序排列的名称列表；首先创建的层出现在列表的底部，最后创建的层出现列表的顶部。Z值越大层越在上面。第22页/共73页23“层”控制面板及操作层（二）利用层控制面板，可以快速修改层名称（双击层名）和层的显示与隐藏（单击，如果显示一个

10、睁眼的图标，表示显示该层；如果显示一个闭眼的图标，表示隐藏该层）改变Z索引值：单击Z列，便可修改该层的层次属性值。或者用鼠标拖曳层，也可以调整该层的叠放次序。第23页/共73页24“层”控制面板及操作层（三）创建嵌套层：按住Ctrl键，然后在层控制面板中拖曳子层到父层上，当父层上出现黑框时松开鼠标，便可创建一个嵌套层，如图所示，把Layer2拖曳到Layer3上。取消嵌套层：只需用鼠标将子层拖离父层，便可取消嵌套层。第24页/共73页25在层中插入内容在层中可以插入各种元素。元素加入后仍可以设置属性。第25页/共73页第26页/共73页272.4 2.4 利用时间轴面板创建层动画 时间线技术能

11、让网页中的元素随时间变化活动起来，从而创建出多姿多彩的网页动画。（例如：浮动小动画）网页中的动态效果其实质是在网页上依次快速连续地显示与某个图像相关联的多幅图像，因显示速度较快使人形成图像活动的感觉。时间线动画的单位是帧，每一帧是动画的一幅瞬间图。时间线动画是在特定的时间内、在指定的动画运动轨迹上，显示一系列有关联特性的静态图像的组合。时间轴只能移动层！第27页/共73页第28页/共73页第29页/共73页第30页/共73页31使用时间轴制作层的简单路径动画：1.绘制层，并添加对象。2.将层移至它在动画开始时应处于的位置。3.选择“修改”“时间轴”“添加对象到时间轴”，或者简单地将选定层拖至“

12、时间轴”面板中。4.单击位于条末端的关键帧标记。5.在页面上将层移至它在动画结束时应处于的位置。6.将出现一条线，它显示文档窗口中动画的轨迹。7.如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击(Windows)动画条中部的一个帧，从而在您单击的帧处添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。然后拖动层到其他位置，则生成曲线移动动画。8.预览页面上的动画。第31页/共73页32通过拖动路径创建复杂路径动画目的：创建复杂路径的动画。方法：步1：创建层并添加对象；步2：将层移动到起始位置；步3：选择“修改”/”时间轴”/”录制层路径”菜单 步4：

13、在页面中随意拖动层，创建想要的路径。步5：保存。预览第32页/共73页33利用显示-隐藏层制作动态网页效果功能：鼠标移动到每个对象显示层内容，鼠标移开对象层自然消失。步骤：1）添加某个对象。针对对象添加一个层和层中对象。2）设置层的开始属性为Hidden;3）选择刚才的对象，并打开行为面板。4）单击“行为”，选择“显示-隐藏层”，分别选择onMouseover()时显示层，onmouseout()时隐藏层。（注意如何使层的位置与对象的位置协调！？）第33页/共73页34利用行为面板添加状态栏的文本提示。方法：步1：选中要在状态栏显示提示信息的内容。步2：选择面板行为菜单中的设置文本/设置状态栏

14、文本。步3：添加文本信息。第34页/共73页35上机练习目的：掌握层的使用技巧，熟练运用行为，创建合适的动作与事件，增添网页的效果。要求：按步操作，制作隐藏层特效使用时间线创建动态HTML动画。第35页/共73页第36页/共73页37【课后习题】如何生成层？层属性面板包含了哪些选项？什么是行为？谈谈你对动作和事件的理解。如何设置时间轴？如何添加关键帧？第37页/共73页383 3 框架与表单主要内容（1）框架的创建（2）框架的属性设置（3）表单及包含对象的创建（4）表单及对象属性的设置第38页/共73页39框架与框架集介绍使用框架提供将一个浏览器窗口划分为多个区域。不同区域，可以显示不同 HT

15、ML 文档。框架集是框架的集合，是一个 HTML 文件。它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容，但 noframes 部分除外。第39页/共73页403.1 框架的创建与保存1）创建框架集和框架 方法1：在当前文档中使用“插入面板/布局/框架”类别。方法2：在“新建文档”对话框中使用“框架集”类别。2）保存框架和框架集 利用文件菜单中的菜单命令：（1）框架页保存和框架页另存为命令用于框架集保存；（2）框架保存、框架另存为和保存全部用于框架保存。注意：保存框架时注意通过轮廓的变化

16、确定保存对象。保存后的框架集和各框架分别对应一个文件。第40页/共73页41框架的编辑1）框架的拆分方法1：利用ALT+鼠标脱动边界,进行分割。方法2:利用插入工具栏或插入菜单/html/框架。2）框架的删除 将边框框架拖离页面或拖到父框架的边框上。3）框架集删除 先关闭显示它的“文档”窗口。如果该框架集文件已保存，则删除框架集所对应的文件。第41页/共73页421）框架中打开已有文件将插入点放置在框架中。选择“文件”“在框架中打开”。2）框架中文件的保存首先在框架中单击，然后选择“文件”“保存框架”或“框架另存为”。向每个框架中添加对象内容的方法与单个页面添加方法相同。框架中文件的打开和保存

17、第42页/共73页433.2 框架的属性设置步一：首先选择您要更改的框架或框架集。（方法1）框架的选择利用ALT健+单击某个框架；框架集的选择利用单击框架的边框；（方法2）通过“框架”面板进行选择。步二：通过属性检查器设置所有框架和框架集的格式。第43页/共73页44该设置针对不支持框架的浏览器。方法：选择“修改”菜单“框架页”“编辑无框架内容”。处理不能显示框架的浏览器第44页/共73页45框架之间设置超链在一个框架中使用链接实现在另一个框架中打开某文档，必须设置链接目标（target）。链接的 target 属性指定打开链接的内容地点位置（即框架名或窗口）。第45页/共73页463.3 表

18、单及对象的创建通过选择“插入”“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。（任何其他表单对象，如文本域、按钮等，都必须插入到两个 form 标签之中，这样所有浏览器才能正确处理这些数据。）第46页/共73页47“文本域”在表单中插入文本域。可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。“复选框”在表单中插入复选框。“单选按钮”单选按钮代表互相排斥的选择。“单选按钮组”插入共享同一名称的单选按钮的集合。“列表/菜单”可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹

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

20、设置。第50页/共73页514 布局与模板主要内容（1）布局模式及其应用（2）模板的创建与使用第51页/共73页524.1 布局模式及其应用常用的创建网页布局的方法是（1）使用 表格对元素进行定位。（繁琐）（2）布局视图下制作布局表格。（灵活）Dreamweaver 8的页面布局有三种工作模式，分别是标准视图、扩展视图和布局视图。第52页/共73页53在布局视图中，不能使用在“标准”视图中可以使用的“插入表格”和“绘制层”工具。布局模式的三种情况：（1）一个布局表格中使用多个布局单元格。（2）多个独立的布局表格。相互之间修改不影响。（3）布局表格可以嵌套。第53页/共73页54布局的创建步骤1

21、：从标准视图切换到布局视图。步骤2：在布局视图中，绘制布局表格，并调整大小。步骤3：在布局表格中，绘制多个布局单元格。布局单元格不能存在于布局表格之外。注意：布局表格不能互相重叠，但布局表格可嵌套。布局单元格不能相互重叠和嵌套。第54页/共73页55布局中添加对象在布局视图中可以将文本、图像和其他内容添加到布局单元格布局单元格中。也可以布局设置好后切换到标准视图下添加对象。当添加宽度大于布局单元格的内容时，该单元格将自动扩展。（事先做好素材的大小）。第55页/共73页56设置布局视图样式参数通过首选参数对话框可以设置布局视图的相关参数。第56页/共73页574.2 模板简介模板是一种特殊类型的

22、文档，用来产生具有固定特征和共同格式的文档基础。（模版文件后缀.dwt）改变模版就可以改变所有基于该模版的页面。模板文档中包含可编辑区域和固定区域。第57页/共73页58方法1：在新建文档中“常规/模版页/html模版”创建模版。在设计视图中设定可编辑区域和固定区域。方法2：利用已有文档另存为模版：文档另存为模板时，Dreamweaver 自动锁定文档的大部分区域。在模板中插入可编辑区域。将插入点放在要插入可编辑区域的地方。选择“插入”“模板对象”“可编辑区域”。这样可以给基于该模版的页面添加用户自己的信息。创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可

23、编辑区域中进行更改；无法修改锁定区域。模版的创建第58页/共73页59模版的保存Dreamweaver 用文件扩展名.dwt 来保存模板。模板被保存在站点的本地根文件夹中的一个特殊 Templates 文件夹中。如果该 Templates 文件夹在站点中尚不存在，Dreamweaver 将在保存新建模板时自动创建该文件夹。不要将 Templates 文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。第59页/共73页60模版编辑1.首先打开模版文件;2.创建可编辑区域：利用插入

24、面板中模版标签页。可以将整个表格或单独行、单元格内设置为可编辑的。层和层内容是单独的元素；使层可编辑时可以更改层的位置及其内容，而使层的内容可编辑时只能更改层的内容而不是位置。3.删除可编辑区域：将模板文件的一个区域标记为可编辑，而现在想要再次锁定它（使其不可编辑），请使用“删除模板标记”命令。选择“修改”“模板”“删除模板标记”。4.根据需要添加其他信息。第60页/共73页61模版的应用（基于模板创建新文档）方法1：在“新建文档”对话框中创建基于模板的文档：1.选择“文件”“新建”打开“新建文档”对话框。2.在“新建文档”对话框中选择“模板”选项卡。3.在“模板用于”列表中选择包含要使用的模

25、板的站点。4.对话框右边显示所选站点中的模板。5.在该列表中选择想要使用的模板。6.单击“创建”新建一个基于模板的页面。7.文档在“文档”窗口中打开。第61页/共73页62方法2：从“文件”面板/“资源”标签页中的模板创建新文档：1.如果“资源”面板尚未打开，请将其打开(F11)。2.在“资源”模板中，单击“模板”图标查看站点模板。提示：如果刚刚创建了要应用的模板，可能需要单击“刷新”按钮才能看到。3.右击应用的模板，然后在上下文菜单中选择“从模板新建”。4.在“文档”窗口中打开文档。第62页/共73页63更新基于模板的文档方法1：保存更新后的模板时，Dreamweaver 会自动询问是否应该

26、更新所有附着到该模板的文档。如果方法1时选择不更新，则可以采用下面的步骤：方法2：首先打开文档，然后选择“修改”“模板”“更新当前页”。更新整个站点或所有使用附着模板的文档:1.选择“修改”“模板”“更新页面”。出现“更新页面”对话框.2.在“查看”弹出式菜单选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。这将把所选站点中的所有页面更新到相应的模板。第63页/共73页64若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。从模板分离文档步骤：1.打开想要分离的基于模板的文档。2.选择“修改”“模板”“从模板中分离”。3.文档被从模板分离后

27、，所有模板代码标记都被删除。从模板分离文档 第64页/共73页655 标签检查器、网站相册、导航栏使用“标签选择器”插入各种标签，并且使用“标签检查器”设置标签的属性值，它的功能类似于属性面板，但是比属性面板更强大。步骤：1.把光标插入点插入点放在需要插入滚动字幕的地方。2.点击插入插入菜单菜单“标签标签.”菜单命令菜单命令打开“标签选择器”。3.选择 marquee标签，点击“插入”按钮。4.转换到代码视图。把光标插入点放在 marquee标签内添加滚动文本。5.选择marquee标签，设置其属性。标签检查器使用：例如标签检查器使用：例如滚动字幕的制作滚动字幕的制作第65页/共73页66网站

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

29、高100px）；第二行高度设为30像素放导航条；第三行放置页面主要内容。然后 将表格居中显示。步三：鼠标定位到第二行，利用插入栏中的“导航栏”添加导航项。注意对话框中各属性的设置。步四：复制首页文档，分别制作其他页面的文档。注意设置相应菜单项为激活状态。步五：完成各导航项的超链，并预览。第68页/共73页696.站点发布与运行（本地发布）首先利用测试服务器测试。定义远程站点并发布：所有网页的集合被称为网站。要想让别人看到的页面，就必须对网站进行发布。您必须把网站拷贝到一台 web 服务器，才能完成对网站的发布。如果您的 PC 连入网络的话，您也可以把它当作一台 web 服务器。大多数的情况是使

30、用由 ISP 提供的 web 主机。在本地定义远程站点（即另外一个web目录）模拟，利用远程站点的上传按钮上传整个站点。发布的方式：web方式、ftp方式。测试网站打开浏览器在地址栏中输入url.第69页/共73页70什么是 ISP？ISP 指的是 Internet 服务提供商。ISP 可提供 Internet 服务。最常见的 Internet 服务是网站主机。网站主机服务可把您的网站存放到一个公共的服务器上。网站主机服务通常包括了域名注册服务。第70页/共73页71小结制作网站的三个步骤：申请空间和域名选择服务器提供者（用户、ISP），选择服务器类型(免费虚拟服务器、专用、托管)、申请域名、邦定空间和域名制作网页规划网站、收集资料、制作网页发布网站借用工具上传网页到远程服务器第71页/共73页72 结合前面4章内容，设计一个网站。要求：（1）网站内容自定，但要求有文字行的网站建设简单描述。不少于5个页面，每个页面的布局自己设计，各页必须包括文本、图像、超链、导航栏等元素。各页面可实现切换。（2）第12周周六前将网页源文件以及本地测试描述文件的压缩文件一起传到主题为文件名。压缩文件名为班级姓名：通信0502_张民勇。完成大作业:The End!第72页/共73页73感谢您的观看！第73页/共73页