8网页制作ch2.ppt

/106,1,第2章Dreamweaver8网页制作,本章主要内容文档的编辑(重点)图像操作(重点)超级链接(重点)表格与图层(重点)网页表单(重点、难点)插入其他对象本章理论授课16学时，上机操作8学时。,/106,2,21文档的创建与编辑MacromediaDreamweaver8为处理各种Web设计和开发文档提供了灵活的环境。除了HTML文档以外，还可以创建和打开各种基于文本的文档，如CFML、ASP、JavaScript和CSS。Dreamweaver还支持源代码文件，如VisualBasic、.NET、C#和Java。Dreamweaver为创建文档提供了若干选项。可以创建以下文档：新的空白文档或模板基于Dreamweaver附带的某预定义页面布局的文档基于某现有模板的文档文档的创建包括创建空白文档和打开现有文档；文档的编辑包括文档页面属性的设置、插入换行标签、文字属性的设置、段落属性的设置、列表的使用及文档的保存等。,/106,3,Dreamweaver8启动首页中各栏的作用：,最近打开的文档列表，点击项目名或点击“打开”按钮打开已有文档,创建新文档或站点,链接到DreamweaverExchange网站,/106,4,2.1.1创建一个空白文档要创建一个空白文档，可以按照如下方法进行操作：选择【文件】/【新建】菜单命令，弹出新建文档界面，如下图所示,选择相应的文档类别，单击“创建”按钮。,/106,5,2.1.2打开现有文档打开现有文档，可以按如下方法进行：方法一：选择【文件】/【打开】菜单命令，弹出“打开”对话框。如下图,在该对话框内选中要打开的文档，单击“打开”按钮即可。,/106,6,方法二：在Windows的“资源管理器”（或者“我的电脑”）中选中要打开的文档的图标，单击右键，然后从快捷菜单中选择“使用Dreamweaver编辑”选项。,/106,7,2.1.3文件页面属性设置新的文档建好后，先对文档的属性进行设置，包括指定页面的默认字体和字体大小、背景颜色、边距、链接样式等，也可以修改现有页面的属性。操作：打开【修改】菜单/【页面属性】项，或在文档窗口右击，从快捷菜单中选择【页面属性】选项，或点击页面空白处，在下面的“属性”面板中点击“页面属性”按钮，均可打开下图所示的对话框。,/106,8,页面属性分类说明：1外观：设定页面默认布局选项，其中包括：(1)页面字体：指定在Web页的默认字体。DW将使用指定字体(宋体)，除非已为某一文本元素专门指定另一种字体。(2)大小：指定在Web页的默认字体大小。DW将使用指定的字体大小（13号/中），除非已为某一文本元素专门指定了另一种字体大小。(3)文本颜色：指定显示字体的默认颜色(黑色)。(4)背景着色：指定文档的背景颜色。(5)背景图像：指定文档的背景图像。(6)重复：如果背景图像没有填满整个窗口，DW8对图像的处理有四种:重复（即平铺，默认）、不重复、横向重复（单行）和纵向重复（单列）。,/106,9,2链接：设定与链接有关的文本属性，其中包括：(1)链接字体：指定链接文本使用的默认字体。(2)大小：指定链接文本使用的默认的字体大小。(3)链接颜色：指定链接文本的颜色。(4)变换图像链接：指定当鼠标指向链接文本时的颜色。(5)已访问链接：指定访问过的链接的颜色。(6)活动链接：指定当鼠标在链接上单击时文本的颜色。(7)下划线样式：指定应用于链接的下划线样式。,/106,10,3标题：设定文档页中的标题使用的字体、字号和颜色。(1)标题字体：指定Web页中标题的字体。DW默认使用页面的字体。(2)标题n：标题1至标题6指定最多六种标题标签使用的字体大小和颜色。,/106,11,4标题/编码：指定制作Web页面时所用语言的文档编码类型，以及指定该编码类型的Unicode标准化表单。其中包括：(1）标题：指定在浏览器标题栏出现的页面标题(默认为无标题文档)。(2）文档类型(DTD)：指定文档类型，即所用的HTML版本(默认为XHTML1.0Transitional)。(3）编码：指定文档中字符所用的编码(默认简体中文)。5跟踪图像：“跟踪图像”是DW非常有效的功能，它允许用户在设计网页时将平面设计稿作为辅助的背景。这样，用户就可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。在浏览器中显示时不会出现“跟踪图像”。(1）跟踪图像：指定作为背景参考的图像。(2）透明度：确定跟踪图像的不透明度(默认100%)。,/106,12,2.1.4插入换行标签一般来说，文本的换行是自动进行的，它由浏览器窗口大小来决定。在浏览文本时，不同的窗口大小，可能导致文本中换行位置发生变化，同样在文档窗口中，窗口的大小也会影响段落的显示。有时候希望将一组文字设置为一个段落，但是又希望在其中某个位置强行换行，这时可以使用换行标签。它用于在段落中将文字换行，但是上下两块文字仍属于同一个段落。操作方法如下：1光标移到要强制换行处2.单击【插入】/【标签】菜单，打开“标签选择器”对话框，在左边选择“HTML标签”，在右边选择“br”标记，单击“插入”按钮，再单击“关闭”按钮。,/106,13,2.1.5设置文字属性文字是文档的基础和灵魂，任何一个文档都离不开文字。在DW8中，可以对文字的格式、字体、字号、颜色以及对齐格式等属性进行设置。选中【窗口】/【属性】菜单项，在下方显示如下图所示的“属性”面板，在其中进行相关设置。,/106,14,2.1.6段落属性良好的段落格式可以使文档清晰易读，便于理解。一般来说，每在文档窗口中输入文字，然后按下回车键，即可将之定义为一个段落。有时候也可以手工将文档窗口中的文字行定义为段落，方法如下：（1）将插入点放置在要定义为段落的文字行中。（2）选择【文本】【段落格式】【段落】项，这时插入点所在的文字行就被定义为一个段落。（3）如果希望取消对段落的指定，可以选择【无】项。使用属性面板同样可以定义段落，如下图所示。,段落对齐方式,指定段落,/106,15,2.1.7列表的使用使用“列表属性”对话框可以设置整个列表或个别列表项的外观。可以设置编号样式，重置计数或设置个别列表项目或整个列表的项目符号样式选项。1.设置项目列表（1）设置无序列表（项目列表）和有序列表（编号列表）：选中要排列的文字段，再选择“属性”面板内的相应按钮（或者点击【文本】/【列表】/【项目列表】菜单项，可设置无序列表；点击【文本】/【列表】/【编号列表】菜单项，可设置有序列表)。如下图所示。,设置项目列表,/106,16,（2）定义列表方式：选中要排列的文字段，再单击【文本】/【列表】/【定义列表】菜单项。采用这种列表方式的效果是：奇数行靠左，偶数行向右缩进，如下图所示。2.修改项目列表属性首先将列表的文字按照无序或有序列表方式进行列表，然后将光标移到列表文字中。单击【文本】/【列表】/【属性】菜单项，弹出“列表属性”对话框进行设置，如下图所示。,/106,17,2.1.8文档的保存文档的保存有多种方法，目的不同，保存的方法也不相同。1.保存文档（1）选择【文件】【保存】项，或按【Ctrl+S】组合键。（2）如果文档尚未保存过，则会出现“另存为”对话框。选择路径并输入文件名，单击”保存”按钮，即可存储文档。（3）如果文档已经保存过，则会直接在原处存储文档。2.另存文档如果希望将文档以另外的名称保存，可以按如下方法操作：（1）选择【文件】【另存为】项。（2）出现“另存为”对话框。选择路径并输入文件名，单击”保存”按钮，即可将文档以另外的名称保存。3.存储所有文档在实际创作过程中，可能同时打开多个窗口，编辑了多个DW文档，如希望保存所有文档，可按如下方法操作：（1）在任意一个DW窗口中，选择【文件】【保存全部】项，即可将所有打开的DW窗口中正在编辑的文档保存。（2）如某些窗口中的文档尚未保存过，则会出现“另存为”对话框,提示输入路径和文件名称，输入相应信息，单击”保存”按钮，即可将之保存。,/106,18,22图像操作图像和文字都是网页的基本元素。图像具有生动、直观的特点，且能够表达一些文字无法表达的东西，可使网页更加美观。图片还能创建超级链接。不过图像占用的空间较大，过多地使用图像也会使网页的下载时间增加。所以应该根据需要进行取舍。221图像格式GIF、JPG和PNG格式是网页中使用的主要图像格式，它们各有特点，用户只有了解每种格式的长短，才能在DW中成功地运用它们。,/106,19,1JPG文件格式JPG是一种十分流行的图像文件格式，特点如下：(1)使用有损压缩方案，图像在压缩后会损失一些细节或像质。(2)支持真彩，能很好地再现摄影图像，如色彩丰富的大自然景像。(3)JPG格式不适于表现包含鲜明对比色彩的图像。JPG使用了压缩技术，压缩比越大，图像质量就越差。用户可以根据需要，在保存JPG图像文件时，在压缩比例（文件大小）和图像品质之间取得平衡。,80%,9KB,50%,6KB,/106,20,2GIF图像文件格式GIF也是网页中常用的图像格式之一，它最适合显示色调不连续或具有大面积单一颜色块的图像。这些图像一般用作插图、按钮、图标、徽标或其他具有统一色彩和色调的图像。GIF有GIF87a及GIF89a（增强版本）两种类型，现在普遍使用的是GIF89a。它经过了几次修改和扩充，具有许多重要的特性：(1)使用无损压缩方案，图像压缩后不会有细节的损失。(2)是一种交织文件格式，在浏览器完成下载全部图像之前，就能通过隔行扫描来显示图像。(3)可以将数张图片（多帧）存储在一个文件中，即所谓的GIF动画。(4)最多可以显示256种颜色。(5)可以创建带有透明区域的图像。,具有10帧的GIF动画,/106,21,3PNG文件格式PNG格式结合了前两者的优点，如无损压缩，拥有百万种颜色等。而且，PNG的隔行扫描特性比其他格式都快，它还提供对索引色、灰度、真彩以及alpha通道透明的支持。PNG格式是Fireworks（网页三剑客之一）的默认文档格式，其中具有可编辑的Web页属性，被认为将是GIF图像的替代版本。4.三种格式的比较JPG对于表现照片级质量和连续色调的图像是比较优秀的格式，而GIF在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色；PNG在对索引颜色、灰度和真彩色的支持等方面都较GIF有所提高，且具有网页图像交互行为能力较强。,/106,22,2.2.2插入图像对象(普通图像、图像占位符、鼠标经过图像、导航条)1插入普通图像在常用工具栏中，单击“图像”图标，或选择【插入】菜单/【图像】命令，出现如下图所示的【选择图像源文件】对话框。,/106,23,当我们将图像插入DW8文档时，DW会自动在HTML源代码中生成相应代码。打开代码视图可以发现标记被添加，如下图所示。,/106,24,2插入图像占位符图像占位符是将最终图像添加到Web页之前使用的图像对象。用户不必让插入到页面中的图像文件立即可用，可以先插入一个占位符来代替空的图像。我们同样可以定义图像占位符的某些属性，如占位符的大小和颜色，以及为占位符提供文本标签等。将光标置于页面中要插入占位符的位置，点击常用工具栏中的“图像占位符”图标，或选择【插入】菜单/【图像对象】/【图像占位符】命令，会出现下图所示的【图像占位符】对话框。,/106,25,【名称】输入图像占位符的标签文字（编辑时可见）。这是可选项。【宽度和高度】输入以像素为单位的占位符宽与高。【颜色】占位符的颜色。【替换文本】运行时显示的文本（或运行时鼠标指向）。设置完后单击“确定”按钮，页面文档中即出现图像占位符，在HTML代码视图中将自动插入一个包含空src属性的图像(img)标签，如下图所示。当在DW的设计窗口中查看图像占位符时，将显示图像占位符的颜色、大小和标签文字。当在浏览器中查看时，会显示出替换文本。,/106,26,3插入鼠标经过图像鼠标经过图像是Web页效果中的一种。即当鼠标经过一个图像时，它会显示另一幅图像。而当鼠标从图像上移走的时候，图像又恢复为原状。这种轮换图像实际上是由两幅图像组成的，即初始图像(页面首次装载时显示的图像)和替换图像(当鼠标指向时显示的图像)。插入鼠标经过图像前先将图片复制到与当前网页相同的目录，再在文档中确定光标位置，点击常用工具栏中的“鼠标经过图像”图标，或选择【插入】菜单/【图像对象】/【鼠标经过图像】命令，会出现下面的对话框。,/106,27,【图像名称】图像名称，或不输入让DW自动生成（Image1,）。【原始图像】鼠标经过前显示的图像的路径和名称，点击“浏览”按钮可以选择文件。【鼠标经过图像】鼠标经过时显示的图像的路径和名称。【预载鼠标经过图像】如希望鼠标经过图像预先载入浏览器的缓存中，以便用户将鼠标指针滑过图像时不发生延迟的快速显示，将该复选框打勾。【替换文本】运行时鼠标指向图像时显示的文本。【按下时，前往的URL】点击图像时要链接到的网址或文件。设置结束后单击“确定”按钮。注：鼠标经过图像中的两个图像应大小相等，否则DW自动调整第二幅图像的大小与第一幅图像匹配。,/106,28,4插入导航条导航条由图像或具有相同外观的图像组构成，导航条与轮替图像的效果非常相似，操作也大致相同。导航条能够组合互动图像或更多的对象，一个导航条元素可由四种不同的图像(平时状态、鼠标指向状态、鼠标按下状态、按下时鼠标经过状态)组成，每种图像反映不同的用户动作。1）创建一系列的图像在使用DW8的导航条对象之前，应该为每一个按钮创建一组（通常4个）图像。这些图像对应按钮触发事件的不同显示状态，各个按钮被碰触的感觉以及外观上要具有一致性。2）插入一个导航条在文档窗口中，将插入点置于要显示导航条的位置，然后选择常用工具栏中的“图像”“导航条”图标，或选择【插入】/【图像对象】/【导航条】命令，会出现下图所示的【插入导航条】对话框。,/106,29,/106,30,【项目名称】导航条元件的名称。每一个元件对应一个按钮，该按钮具有一组状态图像，最多四个。【状态图像】元件在浏览器中默认显示的图像文件名，此项为必填项，其他图像状态选项为可选项。【鼠标经过图像】鼠标指针滑过按钮所显示的图像。【按下图像】单击按钮时显示的图像。【按下时鼠标经过图像】鼠标指针按下时滑过图像所显示的图像。【替换文本】运行时，当鼠标滑过导航条项目时显示的文本。【按下时，前往的URL】点击导航图像时要链接到的目标。【预先载入图像】选中此项，则用户鼠标滑过项目时图像出现较快。【页面载入时就显示“鼠标按下图像”】选中此项，在导航条元件列表框中的当前按钮旁边会显示一个星形号。【插入】设置导航条的方向，有“水平”和“垂直”两个方向。【使用表格】选中该复选框，可以表格的形式插入导航条项目。,/106,31,3）添加其他的导航条图标单击“+”按钮可向导航条添加另一个项目，重复前面的步骤定义该项目；再次单击“+”按钮可以添加多个项目，单击“-”按钮可以删除选中的项目。要重新排序导航条中的元件，在导航条元件列表框中选定一个元件，使用向上或向下按钮来重新调整该元件在元件列表中的位置。每一页只能有一个内置的导航条。否则会弹出提示框，单击“确定”按钮将打开【修改导航条】对话框（或点“修改”“导航条”）。如下图所示。,/106,32,该对话框与插入导航条对话框中的设置完全一样，只是不包括改变导航条方向和表格设置的内容。设置结束后单击“确定”按钮，在代码视图中就添加了用于鼠标事件的代码，如下图所示。运行时的效果如下图所示。,/106,33,22.3设置图像属性图像属性检查器用于显示或修改图像的属性。在设计视图中选择一幅图像，属性检查器显示出常用的图像属性。如下图所示。【文件名称】当用户首次插入一个图像时，图像属性检查器中在缩略图和文件大小旁边的文本框是空白的。用户应在这个框中为图像填入一个用于JavaScript和其他应用程序可以引用该图像的名称。【宽】和【高】以像素为单位指定图像的宽度和高度。当您在页中插入图像时，Dreamweaver自动用图像的原始尺寸更新这些域。【源文件】指定图像的源文件。【链接】指定图像的超链接。将指向文件图标拖到文件面板中的某个文件，或单击文件夹图标浏览站点上的文档，或手动键入URL。,/106,34,【替代】指定显示在图像位置上的可选文字。当浏览器无法显示图像时显示这些文字。【编辑】单击此按钮，将调出与该图像对应的编辑器对图像进行编辑。【地图名称和热点工具】允许您标注和创建客户端图像地图，具体使用将在后面的章节中详细介绍。【垂直边距】和【水平边距】设置沿图像边缘的边距(以像素为单位)。垂直边距沿图像的顶部和底部添加边距。水平边距沿图像左侧和右侧添加边距。【目标】指定链接页面应该载入的目标框架或窗口。如果图像上没有链接则本选项无效。如果文档中使用了框架和框架集，则文档内的所有框架名都显示在列表中供选择。如果当前文档在浏览器中打开时指定的框架不存在，则链接页面被载入新窗口中。还可以选择以下目标名：blank：将链接文档载入到新的未命名浏览器窗口中。parent：将链接文档载入到父框架集或包含该链接的框架窗口中。如果包含该链接的框架是非嵌套框架，则链接文档将载入到整个浏览器窗口中。self：将链接文档载入与该链接相同的框架或窗口中（默认）。top：在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。【低解析度源】指定在载入主图像之前应该载入的图像。许多设计人员使用主图像的2位(黑和白)版本，因为它可以迅速载入并使访问者对他们等待看到的内容有所了解。【边框】以像素为单位的图像边框的宽度。默认为无边框。【对齐】对齐同一行上的图像和文本，后面将介绍。,/106,35,1调整图像大小使用Dreamweaver8调整图像大小时，有些操作会更改磁盘上的源图像文件，因此，您可能需要备份图像文件，以在需要时可以回复到原始图像。在设计视图中选定图像，图像四周会出现控制点，我们也可以单击标签选择器中的图像标签，选定该图像，如下图所示。,/106,36,拖动右边的手柄，调整图像的宽度；拖动底边的手柄，调整图像的高度；拖动右下角的手柄，可同时调整元素的宽度和高度。如果按住Shift键拖动右下角的手柄，可保持元素的宽高比不变，如下图所示。当你调整元素大小后，属性检查器的宽和高域中将显示图像新的宽度和高度，并且在其旁边会出现一个重设大小按钮。如果在调整大小后不满意，可单击重设大小按钮恢复图像大小。,/106,37,2对齐方式图像与文本一样，可以向左、向右、居中对齐。除了水平的对齐外，还可以9种方式进行垂直对齐。还可以将图片转变为浮动的图像类型，允许文本围绕等。1）水平对齐当改变一行的水平对齐方式后，整个段落以及段落中的任何内置图像也会随着移动。在DW8中水平对齐图像同对齐文本的方法一样，使用属性检查器中的对齐按钮。这些按钮包括左对齐、居中对齐和右对齐，但不包括文本中的两端对齐按钮。左对齐如下左图，右对齐如下右图所示。,/106,38,2）垂直对齐可以把文本放置在图像旁边，在同一行对齐文本和图像。图像属性检查器对齐下拉列表中包含了很多种指定如何排列文本和图像的选项，从中选择任一选项，如下图所示。DW8会将用户的选择写入标签里的align属性中。【默认值】通常指定基线对齐，在标签中不包含对齐属性。根据站点访问者的浏览器的不同，默认值也会有所不同。【基线】围绕文本的基线与选定图像的底部对齐。【顶端】图像顶端与当前行中最高项(图像或文本)的顶端对齐。【居中】图像中部与当前行的基线对齐。【底部】围绕文本的底部与选定图像的底部对齐。【文本上方】图像顶端与文本行中最高字符的顶端对齐。,/106,39,【绝对居中】图像中部与当前行中文本的中部对齐。【绝对底部】图像底部与文本行底部对齐。(包括字母下部，如y、g)【左对齐】所选图像放置在左边，文本在图像的右侧换行。【右对齐】图像放置在右边，文本在对象的左侧换行。选择一种样式后，就可以看到对齐的效果了，“文本上方”如下图左，“绝对居中”如下图右。,/106,40,22.4使用图像地图利用文字和图像作为超级链接的触发点，是网页上创建链接的主要方式。DW8可以使用图像地图来创建超级链接，图像地图是指已被分为多个热点的图像。当单击某个热点时，会执行相应命令，就像平时使用的地图一样，我们可以把它划分为若干个区域，每个区域对应于不同的URL。DW8直接支持客户端图像地图。一旦在网页中插入了一个图像，它就能成为一个图像地图。选择一幅图像，打开属性检查器，图像地图工具如下图所示。,/106,41,1创建图像地图使用图像属性检查器，可以以图像方式创建图像地图，创建图像地图的工具和绘图程序中的工具相似。在选择了图像之后，可以单击一个工具来描绘矩形、椭圆形或多边形。操作步骤：(1)选择图像；(2)在图像属性检查器的“地图”文本框中输入图像地图名称。DW8会在“地图”文本框内显示占位名称。如果在同一文档中使用多个影像地图，务必给每个地图起一个唯一的名称。(3)定义影像地图区域，选择合适的绘图工具(矩形、圆形或者多边形)来绘制热点。选择多边形工具时，在选定图像上，每个角点单击一次，定义一个不规则形状的热区。单击箭头工具，结束多边形热区定义，如下图所示。,/106,42,(4)点击某个热区，DW8会在屏幕上显示热点属性检查器，【链接】文本框中会自动添加一个空链接，如下图所示。(5)在【链接】文本框中键入此图像地图的URL，或者单击文件夹图标或选择指向图标选择URL文件。如需要，在目标下拉列表中选择链接目标的打开方式。(6)在【替换】文本框中，可以输入提示文本在鼠标移动到这个区域时显示。使用属性检查器中的绘图工具绘制图像地图既直观又容易使用。绘制后在代码视图中会自动生成相应的HTML代码。,/106,43,2修改图像地图图像地图创建后，可进行编辑修改。可移动热点，调整热点大小，或者在层之间向上或向下移动热点。还可将含有热点的图像从一个文档复制到其他文档，或者复制某图像中的一个或多个热点，然后将其粘贴到其他图像上。(1)移动图像地图位置直接点击定义的热区，将图像地图拖动至一个新的位置。如果要做精确的以像素为单位的移动，选择区域然后使用移动光标键移动即可。(2)调整图像地图大小选择图像地图后，图像地图上都有几个控点，可用来改变热点的大小及形状。矩形和圆形图形有四个控点，拖拉任意一个控点可以改变图形大小及形状。拖动箭头时按住Shift键，将保持纵横比。多边形热点的角上有多个控点，按住某个控点将它拖至新的位置，多边形的形状就会发生变化。,/106,44,(3)对齐图像地图一个图像地图还能与其他图像地图对齐，或改变大小以适应其他热点的尺寸。选择两个或多个热区，选择【修改】菜单【排列顺序】命令，在下级菜单中选择左对齐、右对齐、对齐上缘、对齐下缘、设成宽度相同、设成高度相同等项中的一个选项，效果见下两图所示。(4)删除图像地图选中图像地图，按下Delete键即可删除图像地图。,/106,45,2.2.5使用外部图像编辑器DW8是极好的网页编辑软件，但并不是一个图像编辑软件。有时候当我们将图像插入Web页后，发现图片在某些方面需要做些更改。例如，要对图像添加阴影，或者要将背景设置为透明等。此时可借助其他图像编辑软件。下章的Fireworks是Macromedia公司开发的网页图像处理软件，它与DW紧密集成。我们可以利用Fireworks设计网页图像，然后把它插入到网页中。让DW与Fireworks联合作战，快速、高效地设计出美观的网页。下面介绍设置外部图像编辑器首选参数的方法。通过首选参数中的外部编辑器面板，DW8允许用户指定自己的图像编辑器。我们可以设置编辑器打开哪些文件类型；为该文件类型选择多个图像编辑器。,/106,46,(1)选择【编辑】菜单【使用外部编辑器编辑】命令，弹出“首选参数”对话框，从左侧的【分类】列表中选择【文件类型编辑器】项。如下图所示。,/106,47,(2)在【扩展名】列表中，选择您要为其设置外部编辑器的文件扩展名。单击【扩展名】列表上方的按钮，可以添加自定义的文件扩展名。(3)在右边【编辑器】列表中，会出现相应的编辑器启动应用程序。单击【编辑器】列表上方的按钮，会出现【选择外部编辑器】对话框，可以添加自定义的外部编辑器应用程序。(4)编辑器列表中可以有多个外部编辑器应用程序，如果您希望该编辑器成为此文件类型的主编辑器，选择该编辑器名称后单击“设为主要”按钮。(5)一旦用户为一种格式选定了一个图像编辑器，就可以单击属性检查器上的“编辑”中的某个应用程序按钮，DW8将启动该文件类型的默认编辑器。用户做完修改之后，将文件保存在图像编辑器中然后跳转回DW8。这时用户会发现新的、修改过的图像已经出现在Web页中。上机操作(2学时):1、文档的创建与编辑2、图像操作3、习题1,/106,48,2.3超级链接超级链接是网页的灵魂,它合理、协调地把网站中的众多页面通过链接构成一个有机整体，使访问者能够在各个页面之间跳转，还能够使不同站点之间建立联系。超级链接可以是一段文本、一幅图像或其他网页元素，当在浏览器中用鼠标单击这些对象时，浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。2.3.1创建链接在绝大多数情况下，创建链接都是在属性面板中的链接框中完成的。使用属性设置面板可以把当前文档中的文本或图像链接到另一个文档。,/106,49,创建链接执行下列操作：1.在文档窗口中选中想作为链接的文本或图片。2.选择【窗口】菜单“属性”选项，在属性面板“链接”框填入链接的路径，或单击图标，在“选择文件”对话框中选定要链接的文档及采用哪种方式表达路径。如下图示。3.选择被链接文档的载入方式。默认情况下，被链接文档打开在当前窗口或框架中，要使被链接的文档显示在其他地方，需要从属性面板的目标下拉列表框选择一个选项。操作完成后，看到被选择的文本为带下划线的蓝色文本(默认)。,/106,50,2.3.2链接的种类浏览网页时，单击带有链接的文字或图片，会跳转到链接指明的文件或网站。我们把带有链接的文字或图片称为“链接源端点”，而把跳转的地方称为是“链接目标端点”，根据后者不同，超链接可分为以下几种：内部链接。链接的目标端点是本站中的其他文档。外部链接。链接的目标端点是本站点之外的站点或文档。利用这种链接，可以跳转到其他的网站。Email链接。可启动电子邮件程序书写邮件，并发送到指定地址。锚点链接。链接的目标端点是文档中的命名锚，利用这种链接，可以跳转到当前文档中某指定位置，也可跳转到其他文档中的某一指定位置上。空链接和脚本链接。此类链接能够在对象上附加行为，或者创建执行JavaScript代码的链接。下载链接。,/106,51,1链接路径不能正确理解路径，可能会出现所设置的链接在本地正确执行，但在别的计算机和上传到互联网中却不能使用，网页中的部分图片也不能正确显示出来，这大多是由于在链接的过程中使用了错误的路径所造成。每个网页都有一个惟一的地址，称的统一资源定位符（URL）。但当创建内部链接时，一般不会指定被链接文档的完整URL，而是指定一个相对于当前文档或站点根文件夹的相对路径。一般来说，链接的路径有以下三种表达方式。(1)绝对路径：即在链接中使用完整URL地址。如。绝对路径的特点是，路径同链接的源端点无关。只要目标网站的地址不变，无论源文档在站点中如何移动，都可以正确实现跳转而不会发生错误。但是这种方式的链接不利于测试和站点的移植。,/106,52,(2)相对路径：相对路径可表述源端点同目标端点间的相互位置，它同源端点的位置有关，通常用于本地链接。如dreamweaver/index.htm就是一个文档的相对路径。同一站点中，如果源端点和目标端点不在同一个目录，则将目录的相对关系表达出来就可以了。如果位于同一个目录，则只需要指明目标端点的文档名称就可以了。利用相对目录的好处在于，如果站点的结构和文档的位置不变，那么链接就不会出错。你可以将整个网站移植到另一个地址的网站中，而不需要修改文档中的链接路径。(3)根相对路径：根相对路径可以看作是绝对路径和相对路径之间的一种折衷，在这种路径表达方式中，所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录。如/support/就是站点路径文件夹下的子文件夹的一个根相对路径。与绝对路径相比，基于根目录的路径只是省去了绝对路径中带有协议的地址的部分。它既具有绝对路径的源端点位置无关性，同时又解决了绝对路径上的麻烦。,/106,53,2.链接目标的显示方式设置超链接的打开方式。当前文档中已命名框架的名称都显示在”属性”面板的【目标】列表框中。它有五种选择：_blank：将链接的文件载入一个未命名的新浏览器窗口中。_parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。_self：将链接的文件载入该链接所在的同一框架或窗口中。(默认)_top：将链接的文件载入整个浏览器窗口中，因而会删除所有框架。框架窗口名称：在框架网页中使用。3.创建E-mail链接许多网站为了从浏览者那里获得各种反馈信息，在网站上都创建了E-mail链接。当浏览者单击电子邮件链接时，可打开浏览器默认的电子邮件处理程序，收件人邮件地址被电子邮件链接中指定的地址自动更新，无需浏览者手工输入。,/106,54,创建电子邮件链接操作步骤：（1）在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。（2）执行下列操作之一，插入该链接：a）选择【插入】菜单/【电子邮件链接】。b）在“常用”工具栏中，单击“插入电子邮件链接”按钮。（3）在“电子邮件链接”对话框的“文本”域中，输入作为电子邮件链接所显示在文档中的文本。（4）在E-Mail域中，输入邮件应该送达的E-Mail地址。如下图所示。注：在“属性”面板的“链接”框中输入格式为“mailto:电子邮件地址”的形式也可定义电子邮件链接。,/106,55,4创建锚点链接所谓锚点链接，是指同一页面中的不同位置链接。例如，一个很长的页面，在页面的最下方有一个“返回页首”的文字，单击链接后，可以跳转到这个页面最顶端。创建到命名锚记的链接的过程分为两步。先创建命名锚记，然后创建到该命名锚记的链接。创建命名锚记的操作：（1）将光标定位在要设置标记的位置。（2）执行下列操作之一：a）选择【插入】菜单/【命名锚记】。b）按下Ctrl+Alt+A。c）在“常用”工具栏中，单击“命名锚记”按钮。（3）在“插入命名锚记”对话框的“锚记名称”域处输入锚记名，如：top（注意：锚记名称区分大小写），单击“确定”钮。如下图所示。,注：如果锚记标记没有出现在插入点，可选择【查看】菜单/【可视化助理】/【不可见元素】或“显示全部”命令,/106,56,若要链接到命名锚记，执行以下操作：（1）选择链接文本或图像。（2）在属性检查器的“链接”文本框中，键入一个#号和锚记名称。如#top。5创建空链接和脚本链接空链接一般跳转到当前页的页首。创建空链接后，可向空链接附加行为，以便当鼠标指针滑过该链接时，交换图像或显示层。一般站点首页的导航栏中的“首页”链接没有必要设置带有目标的链接，但为了能看到链接的效果，就可以是一个空链接。脚本链接一般用于提供给浏览者有关某个方面的额外信息，而不用离开当前页面。脚本链接具有执行JavaScript代码的功能，例如一般的校验表单等。,/106,57,（2）如果创建脚本链接，选择欲作为脚本链接的对象，然后打开属性设置面板。在属性面板的链接文本框中输入JavaScript脚本。如：JavaScript:alert(你好！欢迎访问三峡学院的主页)在浏览器中浏览时，单击脚本链接时会弹出一个如下图所示的对话框。,（1）如果创建空链接，选择欲作为空链接的对象，然后打开属性设置面板。在属性面板的“链接”文本框中输入“#”即可。如下图所示。,/106,58,6创建下载链接链接到下载文件的方法和链接到网页的方法完全一样。当被链接的文件是浏览器无法识别的文件，例如exe文件或zip文件时这些文件会被下载。创建链接下载的方法如下：（1）将制作好的文件复制到创建好的网站中。例如将压缩后的xiazai.zip文件复制到站点文件夹内。（2）在文档中输入要链接的文本。例如“下载文件”，在属性面板中设定链接的文件为刚才复制到站点中的xiazai.zip文件。（3）单击“下载文件”时，会弹出文件下载对话框，可以选择将链接的文件打开或保存的位置。下载链接在网站中非常实用，一般用于教程、软件或一些文件的下载。,/106,59,2.4表格的使用在网页的设计制作中，表格是一种重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，表格还可对网页进行排版。通过表格，可以实现很多用一般手段很难实现的排版效果，达到对页面排版布局的完全控制。我们在上网浏览时虽然没有看到多少表格，但许多网页设计的排版实际上都是采用隐藏了边框的表格来实现的。DW8提供了强大的制表功能，使得在制作网页的过程中插入表格的操作变得简便、快捷，并可以在表格中插入图片、文字、Flash等各种元素。表格还可以转换成层，当作层来使用。对已经建立好的表格，可以很容易地修改表格的外观，改变表格中行、列的数量，对表格添加颜色，改变表格对齐方式等。,/106,60,2.4.1表格的创建与属性设置1创建表格在文档窗口确定插入表格的位置后，可用下列三种方法之一创建表格：(1)打开【插入】菜单，选择【表格】命令。(2)单击“常用工具栏”中按钮。(3)用快捷键Ctrl+Alt+T创建。弹出“表格”对话框，如下图左所示。按照如下图左所示进行参数设定，单击“确定”按钮生成如下图右所示的表格。,/106,61,2设置表格属性（1）表格整体属性设置选择“修改”菜单“表格”“选择表格”选中表格，表格“属性”面板如下图所示。,表格Id：给表格对象命名，在脚本编程中可以使用。填充：表格周围和其他元素之间的间距。间距：单元格之间的间距。对齐：表格的对齐方式，有默认、左对齐、居中对齐和右对齐4种。边框：表格边框的宽度，若设为0，则在浏览网页时看不到表格边框。背景颜色：设置表格的背景颜色，通过颜色拾取器按钮选择颜色。边框颜色：设置表格边框的颜色。背景图像：设置表格整体的背景图像。,/106,62,(2)行、列和单元格属性设置选中行、列或单元格，表格“属性”面板的设置与整个表格的设置基本一致，不过应用范围不同。“属性”面板分为上、下两个区域，上面是单元格中的文字属性，可以设置文字的格式、字体、字号、颜色、字形、对齐方式、超链接等；下面是行、列和单元格的属性设置。在“属性”面板的左下方有一个示例图形，可以看出当前选择的是行、列还是单元格，如下图所示选择的是单元格。,合并和拆分单元格,/106,63,2.4.2表格的基本操作1选定整个表格可以使用以下五种方法之一：(1)鼠标移到表格右边界外侧，按下鼠标往左拖。(2)光标定位在表格的任一单元格，选择【修改】菜单【表格】【选择表格】命令。(3)右击任一单元格，在快捷菜单中选择【表格】【选择表格】命令。(4)左击任一单元格，连续按两下快捷键Ctrl+A。(5)左击任一单元格，点选对象选择器中的。2表格的缩放使用以下三种方法之一：（1）移动鼠标到表格的水平或垂直边框上，当鼠标指针变为或形状后，上下或左右拖动鼠标，可调整表格大小。（2）选中整个表格，在表格边框右下方出现三个控制点，将鼠标移到控制点上，当鼠标指针变为或或形状时，拖动鼠标调整表格大小。（3）在表格“属性”面板中的“宽”、“高”文本框中输入数值，精确调整表格大小。,/106,64,3.删除行、列和整个表格选中行、列和表格，再按Del键。4.插入行、列选中行、列，右击，选择“表格”“插入行列”。5.合并、拆分单元格选中单元格，右击，选择“表格”“合并单元格”或“拆分单元格”。6.复制表格选中表格，CTRL+C复制，CTRL+X剪切，CTRL+V粘帖。7.表格的嵌套嵌套表格是Dreamweaver的一大特色，决定插入表格的位置后，创建嵌套表格的步骤跟创建表格方法一样。嵌套表格的大小受到所在单元格的影响，需要改变宽度时，可直接用鼠标拖放，也可在表格的属性调板内定义。,/106,65,8.表格的排序Dreamweaver中可实现按数字的排序和按字母的排序，具体操作如下：单击表格中的任一单元格，执行【命令】菜单【排序表格】，打开如下图所示的“排序表格”对话框,进行相应设置后点“确定”。,/106,66,9快速格式化表格套用Dreamweaver中预置的表格格式，可以更快的制定表格的格式。这和word的自动套用表格功能十分相似。选择【命令】菜单【格式化表格】，弹出如下图所示的“格式化表格”对话框。,/106,67,2.4.3利用表格进行页面布局网页中的表格除了具备传统表格存放和规划数据的功能外，还可以用来定位网页元素，也就是说可用于网页元素的排版。由于使用普通表格进行排版操作有些不方便，Dreamweaver为此提供了一种新的网页排版模式-布局模式，在这种模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。Dreamweaver8为设计制作表格提供了三种模式：标准模式、扩展表格模式和布局模式。前面介绍的表格创建及编辑过程都是在标准模式下进行的。要切换到布局模式，可执行【查看】菜单【表格模式】【布局模式】命令，也可选择“布局”工具栏，再单击按钮，按钮处于被按下状态，如下图所示。,上机操作:1、例2.3.3超级链接实例2、表格的应用,/106,68,2.5层的使用2.5.1层的概念层是一种网页元素定位技术，使用层可以以像素为单位定位页面元素。层可以放置在网页文档内的任何一个位置，层好比是页面中可以容纳各种网页元素的一种容器，可以包含文本、图像、表单、插件等，甚至层内还可以包含其他的层。层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。用户可以把一个层叠在另一个层上方，控制哪个层显示，哪个层隐藏，或通过时间轴让层在屏幕中移动，制作出动画效果。2.5.2创建新层创建层有多种方法，如插入法、拖放法、绘制法等。一旦层被创建，就可以使用“层”控制面板、“层”属性面板来对它进行编辑。,/106,69,1.插入法将光标置于要插入层的位置，再选择【插入】菜单【布局对象】【层】命令，在编辑窗口中光标位置处会出现一个层。此时在网页编辑区窗口中出现一个层和一个层的标记，如右图所示。在光标所在位置上创建了一个默认属性的层。,2.绘制法在“布局”工具栏中单击“绘制层”按钮，到文档窗口中用鼠标拖出一个矩形区域，然后释放鼠标，这时层就会出现在页面中了。如下图所示。,/106,70,2.5.3设置层格式点击一个层左上角的双矩形，出现层属性面板，如下图所示。,层“属性”面板中各项参数意义如下：1.“层编号”设置当前层的名称。层名称中不能带有标点符号，也不能以数字开头，只能是英文字母和数字。2.“左”和“上”设置当前层相对于页面或父层的左上角距离。3.“宽”和“高”指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在Dreamweaver设计视图中的显示）会延伸以容纳这些内容。如果“溢出”属性没有设置为“visible”，那么当层在浏览器中出现时，底边缘将不会延伸。4.“Z轴”设置当前层的层次属性值。可以把整个网页的页面看成X-Y平面，把网页上层的Z轴值看成Z轴的坐标值。这个值决定了当前层放置在哪个层面上。Z轴值大的层放在上面，Z轴值小的层放在下面。,/106,71,5.“显示”设置层的可见性。下拉列表框中的4个选项分别是:Default不指明层的可见性。Inherit可以继承父层的可见性。Visible可以显示层及其包含的内容，无论其父级层是否可见。Hidden可以隐藏层及其包含的内容，无论其父级层是否可见。6.“背景图像”和“背景颜色”设置层的背景图片和背景颜色。7.“标签”选择层的标记。8.“溢出”确定当层的内容超出层范围时处理的方式。其中溢出部分的处理的4个选项分别为：Visible（显示）：当层内容超出层的范围时，可自动增加层尺寸。hidden（隐藏）:当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。scroll（滚动条）:层内容无论是否超出层的范围，都增加滚动条。auto（自动）:选择该选项，当层内容超出层的范围时，自动增加滚动条（默认）。9“剪辑”设置层的可视区域，在“左”、“上”、“右”、“下”文本框中，输入的数值表示层可视区域与层左、上边界之间的距离。层经过“剪辑”后，只有指定的矩形区域才是可见的。,/106,72,2.5.6层的应用例1.使图片沿任意轨迹运动。例如蝴蝶从左边移动到右边。(执行效果)1、插入一个层，移动该层到动画起始处；2、选择“插入”菜单“图像”，在层中插入一幅图片；3、选择“修改”菜单“时间轴”“录制层路径”，然后在页面上按住层的选择手柄拖动层，随意画出一条路径来，运行时图片将沿着该路径运动。注：点选时间轴窗口中的“自动播放”和“循环”复选框。,/106,73,例2、应用层制作动态导航菜单，效果如下图所示。,该页面上有一个导航菜单，有六个菜单项：办公应用、图像处理、网站建设、编程技术、电脑常识和操作系统。当鼠标移动到导航菜单项上时，对应的子栏目就会显示出来。,/106,74,制作步骤如下：1确定网站菜单条名称及各子栏目的内容。2插入一个1行、6列，宽度为750像素，边框设为1，背景色为灰色，边框颜色为白色的表格。在6个单元格中分别输入：办公应用、图像处理、网站建设、编程技术、电脑常识和操作系统。3从“布局”工具栏单击“绘制层”按钮，在对应的菜单项“办公应用”下面画出一个层（层号为Layer1）。在属性窗口中把该层的高和宽别设为165像素和105像素，向层中插入一个6行、1列的表格，输入对应的栏目名称。如下图所示。,/106,75,4再分别添加层号为Layer2、Layer3、Layer4、Layer5和Layer6的层及表格，再分别向这5个层中的表格中添加相应的栏目名称。完成后如下图所示。,5单击【窗口】菜单【行为】命令，打开“行为”面板。6选中表格中的“办公应用”这一单元格。具体的方法是将光标置于该单元格，然后单击状态栏中的标签。,/106,76,7单击“行为”面板上的“+”按钮，选择“显示和隐藏层”菜单项。8在出现的“显示和隐藏层”对话框中进行设置。选中“Layer1”，然后单击“显示”按钮，选中其余的层，单击“隐藏”按钮。如下图所示。,9.单击”确定”按钮，将事件设置为onMouseOver。如下图所示。,/106,77,10.模仿步骤67给其他单元格添加“显示-隐藏层”动作。11为了打开页面时，这几个栏目不显示，把所有层默认为隐藏。在层面板选中Layer1Layer