信息技术基础8--网页制作.ppt

网网 页页 制制 作作 DREAMWEAVERMX 2004 内容提要内容提要8基本网页编辑基本网页编辑8图形的插入和图形格式图形的插入和图形格式8创建超链接（超链接、书签、热点）创建超链接（超链接、书签、热点）8网页的布局（表格和框架）网页的布局（表格和框架）8创建和使用表单创建和使用表单网页与网站网页与网站网页和网站制作的基本步骤网页和网站制作的基本步骤网站创建的基本方法网站创建的基本方法认识认识DreamweaverMX2004 管理和组织网页管理和组织网页网页编辑网页编辑 内容提要（续）内容提要（续）制作导航栏制作导航栏层、时间轴、行为及其应用层、时间轴、行为及其应用样式表样式表动态动态 gif图像的制作图像的制作网页特效制作网页特效制作PhotoImpactUleadUleadGIFAnimatorGIFAnimator 网页与主页网页与主页网页网页(WebPage)主页主页(HomePage)浏览器与浏览器与Web服务器之间服务器之间是以是以页页为单位来传送信息。为单位来传送信息。http:/ 网页的制作工具网页的制作工具可利用可利用任何一种文字处理软件任何一种文字处理软件任何一种文字处理软件任何一种文字处理软件编辑编辑Web文档文档（推荐：记（推荐：记事本）事本）Web文档以纯文本格式存放，取名为文档以纯文本格式存放，取名为*.html或或*.htm。其中插入的其中插入的其中插入的其中插入的HTMLHTML语言只有用浏览器才能被解释语言只有用浏览器才能被解释语言只有用浏览器才能被解释语言只有用浏览器才能被解释翻译翻译翻译翻译，最终在浏览器窗口中呈现为图文并茂的网页。，最终在浏览器窗口中呈现为图文并茂的网页。NOTEPAD超文本标记语言超文本标记语言HTMLHyperTextMarkupLanguage欢迎光临无名的主页欢迎光临无名的主页欢迎光临无名的主页欢迎光临无名的主页样样 例例标记需要放在中标记中有很多是成对出现，一头一尾（结束标记前要加“/”）所有标记中的字母不区分大小写通常以“.html”或“htm”为文件后缀标记的书写格式如下：文件内容/HTML特点特点直接使用直接使用HTML编写网页编写网页简单的HTML例子欢迎光临无名的主页这就是我我常去的网站，Yahoo!HTML在浏览器中被解释在浏览器中被解释简单的HTML例子欢迎光临无名的主页这就是我我常去的网站，Yahoo!一个HTML文件总是由文件头文件头文件头文件头（HEAD）和文件体文件体文件体文件体（BODY）两部分组成。标记和用来说明本文件是一个HTML文件。XMLCSS脚本“所见即所得所见即所得”的网页编辑工具的网页编辑工具FrontPage易学易用，适合于网页设计的初学者；Dreamweaver强调的是更强大的网页控制、设计能力及创意的完全发挥，适合专业的制作人员使用。“所见即所得所见即所得”的网页编辑的网页编辑设计设计设计设计：“页面视图”，所见即所得的编辑环境；代码代码代码代码：“源代码视图”，直接通过修改HTML标记命令编辑网页；拆分拆分拆分拆分：代码视图和设计视图同时显示。网页与网站网页与网站WebWeb服务器服务器网页通常成组出现，并且这组网页网页通常成组出现，并且这组网页之间通过超链接相互组织成为反映之间通过超链接相互组织成为反映某个主题的网站。某个主题的网站。8提高下载速度提高下载速度8超文本地址引用方便超文本地址引用方便8Web页没有固定的长度页没有固定的长度选择主题选择主题规划网页（结构与链接关系）规划网页（结构与链接关系）组织素材组织素材选择视觉外观选择视觉外观设计有效的页面布局设计有效的页面布局制作具体网页制作具体网页发布网站信息发布网站信息 网站制作步骤网站制作步骤 网网站站基本结构基本结构网站是由网站是由网页组成的，网页之间是由超链接来连接的，其连接方网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站式有三种：线性网站、树状网站、非线性网站线性网站线性网站线性网站线性网站：一页连接一页：一页连接一页树状网树状网树状网树状网站站站站：分层排列：分层排列非非非非线性网站线性网站线性网站线性网站：上述：上述两种网站的结合两种网站的结合 网页制作步骤网页制作步骤可利用可利用任何一种文字处理软件任何一种文字处理软件任何一种文字处理软件任何一种文字处理软件编辑编辑Web文档（推荐：记事本）文档（推荐：记事本）Web文档以纯文本格式存放，取名为文档以纯文本格式存放，取名为*.html或或*.htm。其中插其中插入的入的HTML语言只有用浏览器才能被解释翻译语言只有用浏览器才能被解释翻译 在浏览器中使用在浏览器中使用文件文件文件文件菜单菜单打开打开打开打开命令，可在本地机浏览命令，可在本地机浏览Web文档，文档，完成编辑后，可利用完成编辑后，可利用FTP将文件及其将文件及其所用到的媒体素材文件传所用到的媒体素材文件传送送到某台公共到某台公共Web服务器服务器人人均可在浏览器中人人均可在浏览器中URLURL处，键入具体命令，实现异地浏览该处，键入具体命令，实现异地浏览该Web文档文档 一旦对该一旦对该Web文档内容进行更新，须文档内容进行更新，须更新更新更新更新它所在它所在Web服务器上服务器上的相关文档的相关文档 网页的基本分类网页的基本分类以以网页的角度来看网页的角度来看,一个网站中的众多网页一个网站中的众多网页主要可以分成下列两层主要可以分成下列两层:个人主页个人主页兴趣爱好兴趣爱好个人相册个人相册个人收藏个人收藏导航层导航层导航层导航层内容层内容层内容层内容层 网站创建的基本方法网站创建的基本方法将本地机中的某个文件夹定将本地机中的某个文件夹定义义为为Dreamweaver站站点，利用点，利用Dreamweaver管理这些网页管理这些网页 网站创建步骤举例（网站创建步骤举例（1 1）在本地磁盘上新建站点文件夹，如在本地磁盘上新建站点文件夹，如d:openlab执行执行“站点站点|管理站点管理站点”命令，弹出命令，弹出“管理站点管理站点”对对话框话框执行执行“新建新建|站点站点”命令命令 网站创建步骤举例（网站创建步骤举例（2 2）设置站点名称：开放实验室设置站点名称：开放实验室不使用服务器技术不使用服务器技术设置开发过程中设置开发过程中,使用文使用文件的方式和文件的存储位件的方式和文件的存储位置置设置无远端服务器连接设置无远端服务器连接 网站创建步骤举例（网站创建步骤举例（3 3）在文件面板上新建网页在文件面板上新建网页文件和图片素材文件夹文件和图片素材文件夹点“右键”建文件和文件夹 网站创建步骤举例（网站创建步骤举例（4 4）切换到切换到“站点地图站点地图”视图视图创建的站点结构创建的站点结构(表拖过去表拖过去)本地本地/远端站点远端站点 网站创建步骤举例（网站创建步骤举例（5 5）双击某个网页文件名双击某个网页文件名进入具体网页的编辑进入具体网页的编辑 认识认识Dreamweaver界面界面视图按钮视图按钮视图按钮视图按钮插入各种对象插入各种对象插入各种对象插入各种对象网页编辑窗口网页编辑窗口网页编辑窗口网页编辑窗口网页间切换标签网页间切换标签网页间切换标签网页间切换标签文件面板文件面板文件面板文件面板标签选择器标签选择器标签选择器标签选择器属性面板属性面板属性面板属性面板 基本网页编辑基本网页编辑既可以在站点中创建新网页，也可以创建独立的网页。既可以在站点中创建新网页，也可以创建独立的网页。Dreamweaver 内置的各类模板可以帮助我们创建不同类内置的各类模板可以帮助我们创建不同类型的网页。型的网页。设计视图中进行文本的录入和设计视图中进行文本的录入和word类似，也可以在网页中类似，也可以在网页中插入任何一种基于文本的文件，包括插入任何一种基于文本的文件，包括 .htm 文件、文件、.asp 文件文件、.rtf 文件和文件和 .txt 文件，以及任何文件，以及任何 Microsoft Office文档。文档。新建、打开、保存网页新建、打开、保存网页新建、打开、保存网页新建、打开、保存网页 添加文本和插入素材文件添加文本和插入素材文件添加文本和插入素材文件添加文本和插入素材文件(文件文件文件文件/新建新建新建新建),),打开有打开有打开有打开有2 2种法种法种法种法 基本网页编辑基本网页编辑在在Dreamweaver中，可以在属性面板上设置文本格式，如更改字体、中，可以在属性面板上设置文本格式，如更改字体、大小、样式、颜色等大小、样式、颜色等.Dreamweaver的插入菜单可以插入换行符、水平线、特殊字符和注的插入菜单可以插入换行符、水平线、特殊字符和注释等多种类型的特殊元素释等多种类型的特殊元素.设置文本格式设置文本格式设置文本格式设置文本格式 插入特殊网页元素插入特殊网页元素插入特殊网页元素插入特殊网页元素插入插入插入插入/HTML/HTML 基本网页编辑基本网页编辑 使用项目符号和编号使用项目符号和编号（在（在“属性属性”上）上）使用使用“页面属性页面属性（修改）（修改）”对话框设置网页标题、背景对话框设置网页标题、背景色或背景图片、文本颜色、超链接颜色和样式等。色或背景图片、文本颜色、超链接颜色和样式等。（在（在“页面属性页面属性”上）上）认识图形格式认识图形格式GIFJPEGPNG（图形交换格式）（联合图像专家组）（可移植网络图形）图形交换格式）（联合图像专家组）（可移植网络图形）可用颜色数可用颜色数1677721616777216 4294967296每幅图像的颜色每幅图像的颜色2562561677721616777216256-4294967296256-4294967296压缩压缩无损无损有损有损有损有损无损无损无损无损透明透明单色单色单色单色否否AlphaAlpha通道通道通道通道半透明半透明否否否否AlphaAlpha通道通道通道通道动画动画是是是是否否否否GRBGIF格式图像举例格式图像举例GIFGIF（GGraphics I Interchange F Format）是作为一个跨平台图形标准而开发的、与硬件无关的8位彩色图形格式，也是在因特网上使用最早、应用最广泛的图像格式，包含87A和89A两种格式。2cm2cm2K4cm3.6cm8K5cm14cm47K256色的调色板导致色滩出现，色彩层次感差。JPEG格式图像举例格式图像举例JPEGJPEG格式（简称JPGJPG）是一种流行的图像文件压缩格式，通常，JPEG可将图像文件的长度缩短成原来的50%到2%不等。在保证对图像质量的前提下，获得较高的压缩比。摄影图像通常采用JPEG格式存储和显示，大多数数字相机拍摄的图像都经过了JPEG压缩处理。高高高高压缩比 15cm20cm 43K低低低低压缩比 8cm6cm116K 图形的插入和图形的插入和简单编辑简单编辑图形的插入：图形的插入：执行执行“插入插入|图像图像”菜单命令菜单命令直接拖拽来改变图片的大小直接拖拽来改变图片的大小大图像不能通过减小该图像尺寸以达到减少大图像不能通过减小该图像尺寸以达到减少其文件大小和下载时间的目的。其文件大小和下载时间的目的。使用使用“属性属性”面板设置图片属性面板设置图片属性HTML并不能包含图像，它只是包含图像文件的名称并不能包含图像，它只是包含图像文件的名称和相应的格式代码。和相应的格式代码。IMGSRC=“重新取样图片重新取样图片 网页中图片不能正常显示问题网页中图片不能正常显示问题原因原因1：图片没有保存到网站中：图片没有保存到网站中原因原因2：图片保存到网站中，但保存的路径不正确。：图片保存到网站中，但保存的路径不正确。网页中的图像、动画等素材都有自己固定的存放位置，网页网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用只是通过路径使用HTML语言来调用它们，然后把它们显示语言来调用它们，然后把它们显示在网页中。网页中的路径有在网页中。网页中的路径有相对路径和绝对路径相对路径和绝对路径相对路径和绝对路径相对路径和绝对路径，在应该使，在应该使用相对路径的地方使用了绝对路径，或相对路径的引用不正用相对路径的地方使用了绝对路径，或相对路径的引用不正确都会导致浏览器无法在指定的位置打开指定的文件，使素确都会导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。材不能正常显示。绝对路径与相对路径绝对路径与相对路径(1)(1)绝对路径绝对路径绝对路径绝对路径：文件在硬盘上的真正路径文件在硬盘上的真正路径D:/myweb/wuming.htmlD:/myweb/images/wm.gif如果在如果在wuming.html网页中网页中插入插入wm.gif图片，使用绝对图片，使用绝对路径路径，那么在本地电脑中将一切正常，因为在那么在本地电脑中将一切正常，因为在D:/myweb/images路径下的确存在路径下的确存在wm.gif这个图片。但这个图片。但你将它们拿到另一台机器上或传到网站服务器上后，就你将它们拿到另一台机器上或传到网站服务器上后，就会出错，因为要到当前的机器的会出错，因为要到当前的机器的D:/myweb/images路径路径下找下找wm.gif文件文件。绝对路径与相对路径绝对路径与相对路径(2)(2)相对路径相对路径：当前网页相对目标文件的位置当前网页相对目标文件的位置/根目录根目录./上一级上一级././上两上两级级例例1：D:/myweb/wuming.htmlD:/myweb/images/wm.gif相对路径：相对路径：例例2：D:/myweb/web/index.htmD:/myweb/img/wm.gif相对路径：相对路径：绝对路径与相对路径绝对路径与相对路径(3)(3)例例3:D:/myweb/web/zhang/index.htmD:/myweb/img/images/wm.gif把绝对路径转化为相对路径的时候，两个文件绝对路径中把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分忽略相同的部分忽略,只考虑他们不同之处。只考虑他们不同之处。相对路径：相对路径：为了避免在制作网页时出现路径错误，我们可以使用为了避免在制作网页时出现路径错误，我们可以使用Frontpage或或dreamweaver的站点管理功能来管理站点。的站点管理功能来管理站点。站点中的网页保存时将把图片保存到站点中并自动把绝对站点中的网页保存时将把图片保存到站点中并自动把绝对路径转化为相对路径，并且当你在站点中移动文件的时候，路径转化为相对路径，并且当你在站点中移动文件的时候，与这些文件关联的连接路径都会自动更改。与这些文件关联的连接路径都会自动更改。建立超链接建立超链接超链接的实现方法：将某个文本串或某幅图像和其他超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（网页的地址（URL）联系在一起。联系在一起。AHREFSRC=“.html”单击此处单击此处可获得某某信息。可获得某某信息。创建超链接：创建超链接：其他其他Web服务器上的网页文件服务器上的网页文件 本地机器中网页文件本地机器中网页文件 同一个网页文件中（书签）同一个网页文件中（书签）图像地图图像地图图像地图是另一种形式的超链接，允许将不同的图像地图是另一种形式的超链接，允许将不同的URL指定给一幅图指定给一幅图像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，这些区域称做这些区域称做“热点热点”，每一个热点与一个超链接相对应。，每一个热点与一个超链接相对应。如下图汽车生产商的站点可以用新车的图像地图：当站点访问者单如下图汽车生产商的站点可以用新车的图像地图：当站点访问者单击击“车子车子”时，就会显示详细说明车子的网页。时，就会显示详细说明车子的网页。网页布局（表格）网页布局（表格）网页布局（表格）网页布局（表格）表格布局举例补充表格布局举例补充（点表格框看下面属性）（点表格框看下面属性）（点表格框看下面属性）（点表格框看下面属性）利用单元格的合并与拆分利用单元格的合并与拆分 ，创建不规则的表格。创建不规则的表格。单元格的不同填充色、单元格的不同填充色、边边框线颜色分割区域。框线颜色分割区域。设置单元格属性，单元格设置单元格属性，单元格内对象的排版方式。内对象的排版方式。设置表格属性，整个表格设置表格属性，整个表格的排版方式。的排版方式。表格单位的设置表格单位的设置8像素是绝对单位，不随浏览器窗口尺寸变化而变化。像素是绝对单位，不随浏览器窗口尺寸变化而变化。8%是相对单位，随着浏览器窗口尺寸变化而变化。是相对单位，随着浏览器窗口尺寸变化而变化。绝对单位范围绝对单位范围绝对单位范围绝对单位范围0-0-显示器显示器分辩率分辩率值值相对单位范围相对单位范围相对单位范围相对单位范围0%-100%0%-100%表格有两种度量单位：像素和表格有两种度量单位：像素和%表格布局补充表格布局补充要用表格来布局网页要用表格来布局网页，首先应决定表格在水平方向和首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。或多列的对象合并单元格。大多数网页布局采用了带有大多数网页布局采用了带有不可见边框不可见边框不可见边框不可见边框的表格的表格（边框）。（边框）。框架布局框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。用方法。框架集框架集框架集框架集定义每个框架的大小、位置、名称和初始定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。可以更改显示在另一个框架中的网页。框架名称框架名称框架名称框架名称 初始网页初始网页初始网页初始网页bannerbannerbannerbannerbannerbanner页头页头页头页头页头页头.html.html.html.html.html.htmlMain Main Main Main Main Main 柠檬寝室柠檬寝室柠檬寝室柠檬寝室柠檬寝室柠檬寝室.html.html.html.html.html.htmlcontents contents contents contents contents contents 菜单菜单菜单菜单菜单菜单.htmhtmhtmhtmhtmhtm框架集框架集框架集框架集vivaband.htm 认识框架集网页认识框架集网页框架集框架集框架集框架集是一种特殊的网页，该网页定义了整体的框架布局，是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。但不提供实际内容。VIVABAND 此网页使用了框架，但您的浏览器不支持框架。vivaband.htm 框架网页的创建（框架网页的创建（1 1）“文件文件文件文件|新建新建新建新建”命令命令命令命令 框架网页的创建（框架网页的创建（2 2）分别为不同的框架设定初始网页文件分别为不同的框架设定初始网页文件bannerbannerbannerbanner页头页头页头页头.html.html.html.htmlContentsContentsContentsContents菜单菜单菜单菜单.htmhtmhtmhtmMain Main Main Main 柠檬寝室柠檬寝室柠檬寝室柠檬寝室.html.html.html.html 框架网页的创建（框架网页的创建（3 3）在框架面板上选择具体的框架或框架集，在属性面板上设置框架或框架集属性。在框架面板上选择具体的框架或框架集，在属性面板上设置框架或框架集属性。框架网页的保存框架网页的保存需要分别保存每一个框架对应的网页文件，并要需要分别保存每一个框架对应的网页文件，并要保存保存“框架集框架集框架集框架集”文件本身。文件本身。执行执行“文件文件|保存全保存全部部”命令命令,保存所有保存所有的框架和框架集的框架和框架集,以以虚框突出显示的框虚框突出显示的框架就是当前需要保架就是当前需要保存的框架。存的框架。框架之间的超链接框架之间的超链接指定超链接目的网页出现在哪个框架中。指定超链接目的网页出现在哪个框架中。在框架网页中，单击某框架内网页上的超链接时，被在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个超链接所指定的网页通常在另一个框架中打开，这个框架称为框架称为目标框架目标框架目标框架目标框架。网页背景音乐处理网页背景音乐处理尽量使用尽量使用mid格式的音乐文件，避免产生慢速网页。格式的音乐文件，避免产生慢速网页。Dreamweaver本身没有提供设置背景音乐的命令，需本身没有提供设置背景音乐的命令，需要在代码视图中要在代码视图中之间直接输入代码。之间直接输入代码。网页背景音乐处理网页背景音乐处理设置开启新窗口的超链接设置开启新窗口的超链接如何让主页音乐贯穿整个网站？如何让主页音乐贯穿整个网站？如何让主页音乐贯穿整个网站？如何让主页音乐贯穿整个网站？利用框架使网页背景音乐连贯利用框架使网页背景音乐连贯1.把把index.htm重命名为重命名为index-content.htm2.新建一个新建一个“上方固定上方固定”框架网页框架网页3.下框架设置初始网页为下框架设置初始网页为index-conten.htm利用框架使网页背景音乐连贯利用框架使网页背景音乐连贯4.取消取消index-content网页的背景音乐设置网页的背景音乐设置5.保存框架集网页为保存框架集网页为index.htm,上框架网页为上框架网页为index-top.htm6.在在index-top.htm网页中设置背景音乐网页中设置背景音乐7.设置上框架属性设置上框架属性:框架高度为框架高度为1像素像素,不显示边框。不显示边框。创建和使用表单创建和使用表单表单能够向网页中添加文本框、表单能够向网页中添加文本框、单选按钮、复选框、按钮等用单选按钮、复选框、按钮等用户界面控件。户界面控件。每个网页可以包含一个或多个表每个网页可以包含一个或多个表单，每个表单占据网页中的一个单，每个表单占据网页中的一个特定区域。特定区域。表单中必须有一个元素作为表单中必须有一个元素作为“提交提交”按钮。按钮。单击单击“提交提交”按钮后，浏览器将数据传送给服务器，站点服务器按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等。文件或数据库中，也可能作为电子邮件发出等等。应用图像作网页背景应用图像作网页背景选择选择适于作背景适于作背景适于作背景适于作背景的图像文件的图像文件选择选择平铺效果具有整体感平铺效果具有整体感平铺效果具有整体感平铺效果具有整体感的的的的图像图像作背景作背景作背景作背景 使用导航条使用导航条交互式按钮交互式按钮普通状态普通状态鼠标经过状态鼠标经过状态鼠标按钮状态鼠标按钮状态在在Dreamweaver中，所有网页中使用的图像文件中，所有网页中使用的图像文件都必须保存在一个已经定义好的本地站点中。都必须保存在一个已经定义好的本地站点中。执行执行“插入插入|图像对象图像对象|导导航条航条”命令命令 创建交互式按钮创建交互式按钮PhotoImpact 导出交互式按钮图像导出交互式按钮图像 设计各种网页部件设计各种网页部件图标图标横幅横幅按钮按钮按钮栏按钮栏Rollover按钮按钮分隔条分隔条 层层的的使用使用网页中的元素，如文本、图像，都可以放置到网页中的元素，如文本、图像，都可以放置到层层层层中，层中，层不仅不仅具有具有表格的表格的平面布局网页对象的功能平面布局网页对象的功能，而且可以而且可以使网页中的使网页中的对象对象在空间垂直方向（在空间垂直方向（Z轴）上互相重叠轴）上互相重叠，再配合时间线，再配合时间线（Timeline）的应用可以做出很多效果，使网页动感十足，的应用可以做出很多效果，使网页动感十足，还可以配合行为（还可以配合行为（Behaviors），），使得网页在某种事件发生使得网页在某种事件发生时显示隐藏的指定层等。时显示隐藏的指定层等。用鼠标拖动的方法画出一用鼠标拖动的方法画出一个任意尺寸大小的层。个任意尺寸大小的层。绘制层按钮绘制层按钮 层的编辑层的编辑激活图层：激活图层：单击图层中任一位置，图层只有被激活后单击图层中任一位置，图层只有被激活后才可以插入对象。才可以插入对象。选取图层选取图层：单击图层边框或单击文档窗口状态栏左侧单击图层边框或单击文档窗口状态栏左侧层标记层标记图标图标，或单击图层图标，或单击图层图标。选中的图层四周出现选中的图层四周出现8个黑色的小方块。个黑色的小方块。图层标记图层标记闪烁插入光标闪烁插入光标黑色的图层边框黑色的图层边框 层的编辑层的编辑移动层移动层：选中层时，可用鼠标拖动层的边框移动图选中层时，可用鼠标拖动层的边框移动图层的位置，或者在层的位置，或者在“层层”属性面板中精确设置图层的属性面板中精确设置图层的新位置（左和上的值）。新位置（左和上的值）。改变图层尺寸改变图层尺寸：选中图层时，可用鼠标拖动图层选中图层时，可用鼠标拖动图层四周的小方块调整图层的尺寸，或者在四周的小方块调整图层的尺寸，或者在“层层”属性属性面板中精确设置图层的宽高尺寸（宽和高的值）。面板中精确设置图层的宽高尺寸（宽和高的值）。时间轴时间轴时间轴是一条贯穿时间的轴线时间轴是一条贯穿时间的轴线,时间轴动画是把动画对象时间轴动画是把动画对象放置在不同的层中放置在不同的层中,通过改变层的位置通过改变层的位置、大小大小、可见性和可见性和叠放顺序等属性来创建动画叠放顺序等属性来创建动画执行执行“窗口窗口|时间轴时间轴”命令，调出时间轴面板命令，调出时间轴面板 制作时间轴动画制作时间轴动画1.1.插入一个层插入一个层2.2.在层中插入对象在层中插入对象3.3.使用使用“窗口窗口|时间轴时间轴”命令打开时间轴面板命令打开时间轴面板4.4.将层拖到时间轴的第将层拖到时间轴的第1 1帧上帧上5.5.选中第选中第1 1帧帧,将图层拖到将图层拖到动画开始位置动画开始位置6.6.选中第选中第1515帧帧,将图层拖将图层拖到动画结束位置到动画结束位置7.7.选中自动播放复选框选中自动播放复选框步骤步骤:行为行为 行为是在网页中进行的一系列动作行为是在网页中进行的一系列动作,通过这些动作实现用通过这些动作实现用户与页面的交互户与页面的交互,使用使用Dreamweaver内置的行为内置的行为(实质是实质是JavaScript代码代码),用户不需编写代码用户不需编写代码,就可以实现交互和就可以实现交互和控制功能控制功能.行为由事件和动作组成行为由事件和动作组成,事件是动作被触发的条件事件是动作被触发的条件,动作动作是用于完成特定任务预先编好的是用于完成特定任务预先编好的JavaScript代码代码.使用行为使用行为步骤步骤:1.1.执行执行“窗口窗口|行为行为”命命令令,打开行为面板打开行为面板2.2.选中要添加行为的对象选中要添加行为的对象,单击加号按钮单击加号按钮3.3.在弹出的动作菜单中选在弹出的动作菜单中选择某个动作择某个动作4.4.根据所选的动作根据所选的动作,在参在参数窗口中设置参数数窗口中设置参数5.5.在事件菜单中为动作选在事件菜单中为动作选择触发事件择触发事件动动作作菜菜单单行行行行为为为为面面面面板板板板事事件件菜菜单单 利用图层实现下拉菜单（利用图层实现下拉菜单（1 1）图层默认为隐藏状态图层默认为隐藏状态步骤一：步骤一：分别为各个菜单项分别为各个菜单项创建对应的下拉菜创建对应的下拉菜单图层。单图层。利用图层实现下拉菜单（利用图层实现下拉菜单（2 2）指定行为动作：指定行为动作：当鼠标指向菜单项时，当鼠标指向菜单项时，隐藏的指定图层将被隐藏的指定图层将被显示，当鼠标移开菜单显示，当鼠标移开菜单项时，显示的指定图层项时，显示的指定图层重被隐藏。重被隐藏。同理应用于下拉菜单图层同理应用于下拉菜单图层同理应用于下拉菜单图层同理应用于下拉菜单图层步骤二：步骤二：分别为各个菜单项分别为各个菜单项和下拉菜单图层指和下拉菜单图层指定行为动作。定行为动作。让图层中的对象沿路径动起来让图层中的对象沿路径动起来“修改修改|时间轴时间轴|录录制层路径制层路径”命令命令 让图层中的内容动起来（让图层中的内容动起来（1 1）嵌套图层嵌套图层嵌套图层嵌套图层的创建：的创建：创建图层，如创建图层，如layer7选中该图层，按住选中该图层，按住Alt键的同时键的同时，在其在其中创建其中创建其嵌套嵌套图层。图层。利用利用“剪辑剪辑”选项设置选项设置layer7图层的可见区域图层的可见区域 让图层中的内容动起来（让图层中的内容动起来（2 2）起始帧起始帧结束帧结束帧选中图层选中图层Layer8，执执行行“修改修改|时间轴时间轴|录制录制层路径层路径”命令，制作命令，制作该图层从图层该图层从图层Layer7底部移动到图层底部移动到图层Layer7顶部的运顶部的运动效果动效果滚动看板滚动看板滚动看板滚动看板。调整多个图层的叠放顺序调整多个图层的叠放顺序选中图层选中图层Layer7，直接用鼠直接用鼠标将其拖拽到相应层次。标将其拖拽到相应层次。CSSCSS样式样式CSS（CascadingStyleSheet）层叠式样式层叠式样式表，是国际组织表，是国际组织W3C制定的扩展制定的扩展HTML功能的功能的标准，标准，CSS样式广泛适用于文本、图形等网页样式广泛适用于文本、图形等网页元素的格式化工作，方便网页的制作和维护，元素的格式化工作，方便网页的制作和维护，还能产生半透明图像等特殊效果。还能产生半透明图像等特殊效果。“窗口窗口窗口窗口|CSS|CSS样式样式样式样式”命令命令 CSSCSS样式样式嵌嵌入入式式样样式式表表:对对某某个个具具体体的的网网页页定定义义的的样样式式,它它的的表表现现形形式式是是直直接接将将样样式式插插入入到到网网页页的的HTML代代码码中中，定定义义的样式自动应用到网页中。的样式自动应用到网页中。外外部部样样式式表表：将将CSS样样式式保保存存为为单单独独的的一一个个文文件件(.css)，网网页页中中可可以以创创建建对对某某个个现现成成样样式式表表的的链链接接，而而且且多多个个网网页页可可以以使使用用同同一一个个样式表的样式样式表的样式.局局部部应应用用样样式式表表：也也是是对对某某个个具具体体的的网网页页定定义义的的样样式式,定定义义的的样样式式显显示示在在样样式式表表面面板板中中,可可以以选选择择某某段段文文本本或图像使用所定义的样式。或图像使用所定义的样式。去除超链接的下划线去除超链接的下划线选择新建选择新建CSS样式命令样式命令嵌入式样式表嵌入式样式表嵌入式样式表嵌入式样式表直接将样式插直接将样式插入到网页的入到网页的HTML代码中代码中 定义文字样式定义文字样式局部应用样式表局部应用样式表局部应用样式表局部应用样式表选择选择“导出导出”命令，命令，导出为外部样式表，导出为外部样式表，在其它的网页中可应在其它的网页中可应用此样式表的样式用此样式表的样式 动画原理与动画原理与制作制作动画动画动画动画的形成是由连续显示数张图片所造的视觉效果，其原理的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，与卡通影片是一样的，我们可以设定每张图片所停滞时间，从而造成不同的动画显示速度。从而造成不同的动画显示速度。当要制作一张动画时，可使用有支持当要制作一张动画时，可使用有支持GIF格式的绘图软件来格式的绘图软件来制作图像制作图像(或扫描进来的影像或扫描进来的影像)，将这些构成动画的连续数张，将这些构成动画的连续数张图像分别储存成不同档名的图像分别储存成不同档名的GIF文档，然後再使用动画制作文档，然後再使用动画制作软件，如软件，如GIFConstructionSet或或UleadUleadGIFAnimatorGIFAnimator动动画制作软件来整合这些图像，针对每张图像设定相关的属性画制作软件来整合这些图像，针对每张图像设定相关的属性(如显示的停滞时间如显示的停滞时间)，以完成一幅动画的制作，且在这些软，以完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示。件中就可以直接观看动画的显示。动态动态Gif图片的制作（图片的制作（1 1）工作窗口工作窗口对对象象管管理理器器帧窗格帧窗格UleadUlead GIF Animator GIF Animator 动态动态GifGif图片的制作（图片的制作（2 2）使用向导快速制作动画使用向导快速制作动画使用向导快速制作动画使用向导快速制作动画：在启动在启动uleadgifanimator程序时，会显示一个启程序时，会显示一个启动向导来引导我们创建动画。动向导来引导我们创建动画。使用动画向导制作动画使用动画向导制作动画(1)(1)步骤步骤1:1:设置画布尺寸设置画布尺寸步骤步骤2:2:选择文件选择文件步骤步骤3:3:设置帧延迟时间设置帧延迟时间将一系列静态图片连接生成动画将一系列静态图片连接生成动画 使用动画向导制作动画使用动画向导制作动画(2)(2)编辑模式下的显示编辑模式下的显示步骤步骤5:输出输出gif动画动画:执行执行“文件文件|另存为另存为|gif文件文件”命令命令步骤步骤4:在预览模式下在预览模式下观看动画效果观看动画效果 制作横幅文字制作横幅文字(1)(1)先创建一个空白的动画文档，然后在先创建一个空白的动画文档，然后在 “帧帧”菜单菜单中选择中选择 “添加横幅文本添加横幅文本”在文本标签中在文本标签中设置字体、字设置字体、字号、颜色、阴号、颜色、阴影等效果影等效果 制作横幅文字制作横幅文字(2)(2)设置文字动画效果设置文字动画效果设置帧画面的延迟时间设置帧画面的延迟时间添加霓虹效果添加霓虹效果最终效果最终效果 渐变动画（渐变动画（1 1）工作区（画布）工作区（画布）帧窗格帧窗格对象管理器对象管理器延时延时 渐变动画（渐变动画（2 2）添加图像添加图像改变画布大小改变画布大小选定范围工具：魔术棒选定范围工具：魔术棒自动创建自动创建手动创建手动创建 用视频片段制作用视频片段制作 GIF 动画动画1.创建一个新的空白动画。创建一个新的空白动画。2.单击标准工具栏上的单击标准工具栏上的“添加视频添加视频”按钮，打开按钮，打开“添加视频文件添加视频文件”对话框。对话框。3.找到要用的影片文件并选中后，单找到要用的影片文件并选中后，单击击Duration按钮。按钮。4.Duration对话框打开后，有两个属对话框打开后，有两个属性需要定义性需要定义:要使用的起始和结束的视要使用的起始和结束的视频段频段,Markin和和Markout。通过预览窗口和视频控件，决定起始通过预览窗口和视频控件，决定起始帧和结束帧的帧号帧和结束帧的帧号,在在Markin和和Markout中分别输入中分别输入.5.单击单击OK。Duration对话框关闭，对话框关闭，返回到返回到“添加视频文件添加视频文件”对话框。再对话框。再单击单击OK，选择的帧就被加载到选择的帧就被加载到GIFAnimator中了。中了。网页特效网页特效所谓所谓“特效特效”是指用某种编辑语言编写，或用特效软件是指用某种编辑语言编写，或用特效软件编制的，实现某种网页特殊效果的一段编程代码。编制的，实现某种网页特殊效果的一段编程代码。JavaScript是一种扩展到是一种扩展到HTML的脚本设计语言的脚本设计语言,它使它使网页开发者可以更有效地控制页面网页开发者可以更有效地控制页面,并能对用户触发事并能对用户触发事件作出即时响应件作出即时响应,诸如单击鼠标、表单操作等诸如单击鼠标、表单操作等,而且这些而且这些都不需要客户机与服务器的交互通信都不需要客户机与服务器的交互通信,既为用户提供了既为用户提供了