网页设计与制作第6章-使用Dreamweaver制作网页课件.ppt

《网页设计与制作第6章-使用Dreamweaver制作网页课件.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第6章-使用Dreamweaver制作网页课件.ppt（78页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第6 6DreamweaverDreamweaver制作网页制作网页认识认识DreamweaverDreamweaver1站点的基本操作站点的基本操作 2在网页插入文本在网页插入文本 3 插入图像插入图像4 创建超级链接创建超级链接5本章导读本章导读 Dreamweaver Dreamweaver是一款专业的网页编是一款专业的网页编是一款专业的网页编是一款专业的网页编辑器，可以对辑器，可以对辑器，可以对辑器，可以对WebWeb站点、站点、站点、站点、WebWeb页面页面页面页面和和和和WebWeb应用程序进行设计、编译和应用程序进行设计、编译和应用程序进行设计、编译和应用程序进行设计、编译和

2、开发。开发。开发。开发。认识认识Dreamweaver创建站点创建站点在网页中插入文本在网页中插入文本在网页中添加图像在网页中添加图像创建超级链接创建超级链接能力目标能力目标任务任务1 1 认识认识DreamweaverDreamweaverDreamweaverDreamweaver的操作界面非常整洁。启动的操作界面非常整洁。启动DreamweaverDreamweaver后，可以在后，可以在它的操作界面最上方看到标题栏，然后往下依次为菜单栏、插入它的操作界面最上方看到标题栏，然后往下依次为菜单栏、插入栏、文档栏、文档窗口、标签栏和栏、文档栏、文档窗口、标签栏和“属性属性”面板，在操作界面的

3、面板，在操作界面的右侧是浮动面板组。右侧是浮动面板组。文件：控制文档的基本操作，包括新建、保存和打开等操作。文件：控制文档的基本操作，包括新建、保存和打开等操作。编辑：对文档进行具体的操作，包括撤消操作、复制、粘贴和编编辑：对文档进行具体的操作，包括撤消操作、复制、粘贴和编辑代码等操作。辑代码等操作。查看：调整工作界面，包括界面的缩放，标尺、风格等辅助工具查看：调整工作界面，包括界面的缩放，标尺、风格等辅助工具的设置等。的设置等。插入：插入各种对象，包括图像、媒体、表格和表单等。插入：插入各种对象，包括图像、媒体、表格和表单等。修改：修改页面属性、样式、标签以及各类文档对象。修改：修改页面属性

4、、样式、标签以及各类文档对象。文本：设置文档中的文本样式。文本：设置文档中的文本样式。命令：设置扩展功能，包括录制命令和清除多余代码等。命令：设置扩展功能，包括录制命令和清除多余代码等。站点：设置站点的操作，包括新建、管理站点等。站点：设置站点的操作，包括新建、管理站点等。窗口：管理软件界面中的各个面板。窗口：管理软件界面中的各个面板。帮助：提供软件的帮助信息。帮助：提供软件的帮助信息。2.2.插入栏插入栏DreamweaverDreamweaver的插入栏集合了常用、布局、表单、文本、的插入栏集合了常用、布局、表单、文本、HTMLHTML、应、应用程序、用程序、FlashFlash元素、收藏

5、面板，通过这些面板可以在网页中插入元素、收藏面板，通过这些面板可以在网页中插入各类网页元。各类网页元。3.3.文档栏文档栏文档提供了文档提供了“显示代码视图显示代码视图”、“显示折分视图显示折分视图”和和“显示设计显示设计视图视图”3 3种视图选择，通过选择不同的视图，可以在不同的编辑环种视图选择，通过选择不同的视图，可以在不同的编辑环境中编辑网页。在文档栏还可以快捷的设置网页的标题和进行其境中编辑网页。在文档栏还可以快捷的设置网页的标题和进行其他操作。他操作。5.“5.“属性属性”面板面板“属性属性”面板主要用于设置网页元素的属性，不同类型的面板主要用于设置网页元素的属性，不同类型的“属属性

6、性”面板所显示的内容也不一样。在进行设置的时候需要区别面板所显示的内容也不一样。在进行设置的时候需要区别对待。对待。6.6.浮动面板组浮动面板组在在DreamweaverDreamweaver软件窗口的右侧集合了一些功能面板。单击面板上软件窗口的右侧集合了一些功能面板。单击面板上的的 按钮，可以展开面板，此时按钮图标变为按钮，可以展开面板，此时按钮图标变为 ，单击此图标即，单击此图标即可关闭面板。另外，还可以通过点击可关闭面板。另外，还可以通过点击“捕捉器捕捉器”按钮按钮 ，将面板，将面板拖动到软件窗口的任意位置。拖动到软件窗口的任意位置。1.1.新建文档新建文档（1 1）选择）选择“文件文件

7、”“”“新建新建”命令命令(左图）左图）,打开打开“新建文档新建文档”对话对话框，在框，在“类别类别”列表框中选择列表框中选择“基本页基本页”选项（右图）。选项（右图）。2.2.保存文档保存文档（1 1）在）在DreamweaverDreamweaver中对文档进行编辑后，选择中对文档进行编辑后，选择“文件文件”“”“保存保存”命命令。令。（2 2）在打开的）在打开的“另存为另存为”对话框中，在对话框中，在“保存在保存在”下拉框中选择要下拉框中选择要保存的目的路径。在保存的目的路径。在“文件名文件名”文本框中设置要保存的文件名，文本框中设置要保存的文件名，在在“保存类型保存类型”下拉列表中选择

8、要保存的文件类型。下拉列表中选择要保存的文件类型。设设置置保保存存的的路路径径和和名称名称3.3.打开文档打开文档(1)(1)选择选择“文件文件”“”“打开打开”命令（左图），打开命令（左图），打开“打开打开”对话框（右对话框（右图）。图）。（2 2）在）在“查找范围查找范围”下拉列表框中选择要打开文件所在目录。在打下拉列表框中选择要打开文件所在目录。在打开的文件夹中找到要打开的文件并选中它，单击开的文件夹中找到要打开的文件并选中它，单击“打开打开”按钮即按钮即可。可。打开的文档打开的文档任务任务2 2 站点的基本操作站点的基本操作创建站点之前应当规划站点，这是设计创建站点之前应当规划站点，这

9、是设计网页的第一步，之后才能通过网页的第一步，之后才能通过Dreamweaver进行站点的创建和管理。进行站点的创建和管理。阶段阶段1 1 站点的规划站点的规划一个站点通常由多个互相关联的网页组一个站点通常由多个互相关联的网页组成，这些网页之间是可以通过超级链接成，这些网页之间是可以通过超级链接互相访问的。要创建一个站点，首先需互相访问的。要创建一个站点，首先需要规划站点，确定网站的目标用户群、要规划站点，确定网站的目标用户群、内容和文件结构等。内容和文件结构等。1.1.确定目标群体确定目标群体确定目标群体是指确定网站的用户群体，网站是做给哪些人浏览确定目标群体是指确定网站的用户群体，网站是做

10、给哪些人浏览的，以确定网站的内容、风格以及色彩效果等。如化妆品网站的的，以确定网站的内容、风格以及色彩效果等。如化妆品网站的目标群体为年轻、时尚的女性，所以网站的风格应充满时尚感，目标群体为年轻、时尚的女性，所以网站的风格应充满时尚感，而色彩则以紫色为主。而色彩则以紫色为主。3.3.安排站点结构安排站点结构安排好站点的结构，可以为之后的网站创建节安排好站点的结构，可以为之后的网站创建节省时间，减少麻烦。在安排站点结构时，要考省时间，减少麻烦。在安排站点结构时，要考虑文件夹的层次、分类问题。虑文件夹的层次、分类问题。不同的文件要分类存放，如果网站中的文件比不同的文件要分类存放，如果网站中的文件比

11、较多，还应当分层分级的放入文件夹中，使站较多，还应当分层分级的放入文件夹中，使站点目录结构变得清晰明了，方便后期管理和修点目录结构变得清晰明了，方便后期管理和修改。改。阶段阶段2 2 创建本地站点创建本地站点Dreamweaver可以使用站点向导和高级可以使用站点向导和高级设置两种方式来建立站点。下面以使用设置两种方式来建立站点。下面以使用站点向导方式创建站点为例，介绍创建站点向导方式创建站点为例，介绍创建站点的方法。站点的方法。1.1.使用向导建立站点使用向导建立站点（1 1）启动）启动DreamweaverDreamweaver，选择，选择“站点站点”“”“新建站点新建站点”命令（左图）命

12、令（左图），打开，打开“站点定义站点定义”对话框，默认显示对话框，默认显示“基本基本”标签项界面（右标签项界面（右图）。图）。（3 3）在打开的对话框界面中，选择）在打开的对话框界面中，选择“否，我不想使用服务器技术否，我不想使用服务器技术”单选按钮，然后单击单选按钮，然后单击“下一步下一步”按钮。按钮。（4 4）在打开的对话框界面中，选择）在打开的对话框界面中，选择“编辑我的计算机上的本地副本，编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）完成后再上传到服务器（推荐）”单选按钮，然后单击单选按钮，然后单击“下一步下一步”按钮。按钮。（6 6）在打开折站点定义总结对话框界面中，显示出

13、已经定义的内容，）在打开折站点定义总结对话框界面中，显示出已经定义的内容，以供用户查看和确定，确认无误后，单击以供用户查看和确定，确认无误后，单击“完成完成”按钮。按钮。（7 7）完成站点的创建后，选择）完成站点的创建后，选择“窗口窗口”“”“文件文件”命令，打开命令，打开“文文件件”面板，在其中可以看到新创建的站点。面板，在其中可以看到新创建的站点。阶段阶段3 3 管理站点管理站点1.1.切换站点切换站点在在DreamweaverDreamweaver中可以定义多个站点，有时候中可以定义多个站点，有时候会需要同时在多个站点间进行切换操作，会需要同时在多个站点间进行切换操作，这这时可以使用时可

14、以使用DreamweaverDreamweaver的切换站点功能来实的切换站点功能来实现。现。（1 1）启动）启动DreamweaverDreamweaver后，打开后，打开“文件文件”面板，可以看到上次使用面板，可以看到上次使用DreamweaverDreamweaver时最后操作的站点。时最后操作的站点。（2 2）单击）单击“文件文件”面板上的目录选择框后面的下拉按钮（左图），面板上的目录选择框后面的下拉按钮（左图），可以看到所有的站点目录，在目录列表中选择当前要进行操作的可以看到所有的站点目录，在目录列表中选择当前要进行操作的站点（右图），即可完成站点的切换。站点（右图），即可完成站点的

15、切换。2.2.复制本地站点复制本地站点（1 1）在）在DreamweaverDreamweaver中选择中选择“站点站点”“”“管理站点管理站点”命令（左图），命令（左图），打开打开“管理站点管理站点”对话框（右图）。对话框（右图）。（2 2）在站点列表框中选择要复制的站点（左图），单击对话框内的）在站点列表框中选择要复制的站点（左图），单击对话框内的“复制复制”按钮，然后单击按钮，然后单击“完成完成”按钮，即可在按钮，即可在“文件文件”面板中面板中看到复制的站点（右图）。看到复制的站点（右图）。3.3.删除本地站点删除本地站点（1 1）在）在DreamweaverDreamweaver中选择

16、中选择“站点站点”“”“管理站点管理站点”命令，打开命令，打开“管理站点管理站点”对话框。对话框。（2 2）在站点列表框中选择要删除的站点，然后单击对话框内的）在站点列表框中选择要删除的站点，然后单击对话框内的“删删除除”按钮，弹出一个对话框提示该操作不能撤消，是否继续删除。按钮，弹出一个对话框提示该操作不能撤消，是否继续删除。（3 3）单击）单击“是是”按钮，被选中的站点就会按钮，被选中的站点就会从站点列表框中删除。从站点列表框中删除。任务任务3 3 在网页中插入文本在网页中插入文本在在DreamweaverDreamweaver中添加文本的方法有如下两种中添加文本的方法有如下两种Y在文档中

17、直接输入文本。在文档中直接输入文本。Y复制其他文档中的文本内容，然后在文档中将复制的复制其他文档中的文本内容，然后在文档中将复制的文本粘贴进来。文本粘贴进来。阶段阶段1 1 插入文本插入文本在文档中直接输入文本的操作，只需要将光标插入要输入文本的位置，在文档中直接输入文本的操作，只需要将光标插入要输入文本的位置，然后输入文本内容即。然后输入文本内容即。使用复制粘贴的方式添加文本也很简单，只需要复制好内容，然后使用复制粘贴的方式添加文本也很简单，只需要复制好内容，然后将光标插入到将光标插入到DreamweaverDreamweaver中要添加文本的位置中要添加文本的位置(左图左图)，单击鼠标，单

18、击鼠标右键，在弹出的快捷菜单中选择右键，在弹出的快捷菜单中选择“粘贴粘贴”命令即可（右图）。命令即可（右图）。阶段阶段2 2 设置文本属性设置文本属性在在DreamweaverDreamweaver中选择一段文字后，选择中选择一段文字后，选择“窗口窗口”“”“属性属性”命令命令打开文本打开文本“属性属性”面板。在文本面板。在文本“属性属性”面板中，可以设置文本面板中，可以设置文本的格式、字体、样式、字号大小、颜色、以及链接等属性。的格式、字体、样式、字号大小、颜色、以及链接等属性。格式：在格式：在“格式格式”后面的下拉列表框中，可以设置多后面的下拉列表框中，可以设置多种文本格式，包括无、段落和

19、标题种文本格式，包括无、段落和标题1-61-6共共3 3类选项。类选项。字体：设置文本的字体样式。字体：设置文本的字体样式。样式：选择一个预定义样式。样式：选择一个预定义样式。大小：设置文本的字号大小。大小：设置文本的字号大小。：单击该按钮打开：单击该按钮打开CSSCSS面板，在其中编辑面板，在其中编辑CSSCSS样式。样式。：分别为文字设置加粗和斜体效果。：分别为文字设置加粗和斜体效果。：分别将文本对齐方式分别设置为左对齐、居：分别将文本对齐方式分别设置为左对齐、居中对齐、右对齐和两端对齐。中对齐、右对齐和两端对齐。：文本颜色框，单击打开颜色拾取面板，为选：文本颜色框，单击打开颜色拾取面板，

20、为选中的文本设置颜色。中的文本设置颜色。：这几个按钮分别是项目列表、编号列表、文：这几个按钮分别是项目列表、编号列表、文本凸出和文本缩进按钮。主要用于控制文本样式。本凸出和文本缩进按钮。主要用于控制文本样式。：选择一段文本后，在该文本框中输入一个：选择一段文本后，在该文本框中输入一个链接地址则可以为文本创建一个超级链接。链接地址则可以为文本创建一个超级链接。：指向文件按钮，主要用于快速创建链接。：指向文件按钮，主要用于快速创建链接。：浏览文件按钮，可以打开一个对话框，在其中选：浏览文件按钮，可以打开一个对话框，在其中选择一个文件作为链接目标。择一个文件作为链接目标。目标：当为文本创建一个链接后

21、，即可在目标：当为文本创建一个链接后，即可在“目标目标”下下拉列表中选择一个打开链接的方式，有拉列表中选择一个打开链接的方式，有“_blank”_blank”、“_parent”_parent”、“_self”_self”、“_top”_top”四个选项。四个选项。任务任务4 4 插入图像插入图像在在DreamweaverDreamweaver中，用户可以便捷地插入图像中，用户可以便捷地插入图像到网页中，并对插入的图像进行修改或其他更到网页中，并对插入的图像进行修改或其他更多的编辑操作。多的编辑操作。图像的格式种类繁多，但目前只有图像的格式种类繁多，但目前只有GIFGIF、JPEGJPEG和和

22、PNGPNG格式能在网页中显示。格式能在网页中显示。GIFGIF格式的图像通格式的图像通常用于网页中的小图标、常用于网页中的小图标、LogoLogo图标和背景图像图标和背景图像等，等，JPEGJPEG格式的图像则多用于大幅的图像展示，格式的图像则多用于大幅的图像展示，PNGPNG格式的图像则能够很好的用于这两种情况。格式的图像则能够很好的用于这两种情况。阶段阶段1 1 插入图像插入图像（1 1）将光标插入到要插入图像的位置，然后选择）将光标插入到要插入图像的位置，然后选择“插入插入图像图像”命令。命令。（2 2）在打开的）在打开的“选择图像源文件选择图像源文件”对话框中选择要插入的图像文件，对

23、话框中选择要插入的图像文件，可以看到在对话框的右边会出现该图像文件的预览图和属性介绍。可以看到在对话框的右边会出现该图像文件的预览图和属性介绍。（3 3）单击）单击“确定确定”按钮，完成插入图像操作。按钮，完成插入图像操作。如如如如果果果果在在在在建建建建立立立立站站站站点点点点时时时时，没没没没有有有有设设设设置置置置站站站站点点点点图图图图像像像像的的的的默默默默认认认认保保保保存存存存文文文文件件件件夹夹夹夹，则则则则会会会会提提提提示示示示是是是是否否否否将将将将图图图图像像像像复复复复制制制制到到到到站站站站点点点点文文文文件件件件夹夹夹夹中中中中；如如如如果果果果选选选选择择择择否

24、否否否，则则则则不不不不能能能能将将将将文文文文件件件件拖拖拖拖动动动动到到到到文档中。文档中。文档中。文档中。阶段阶段2 2 设置图像属性设置图像属性选中文档中的图像，然后选择选中文档中的图像，然后选择“窗口窗口”“属性属性”命令，即可打命令，即可打开图像开图像“属性属性”面板进行图像的属性设置。面板进行图像的属性设置。Z宽、高：设置图像的宽度与高度，以像素为单位。宽、高：设置图像的宽度与高度，以像素为单位。Z源文件：显示图像的目录路径，可以修改路径来更换源文件：显示图像的目录路径，可以修改路径来更换图像。图像。Z链接：设置图像的超链接。链接：设置图像的超链接。Z替换：设置当鼠标移放到图像上

25、时显示的提示文字。替换：设置当鼠标移放到图像上时显示的提示文字。Z编辑编辑 ：单击该按钮，启动：单击该按钮，启动FireworksFireworks对图像进行编辑对图像进行编辑（需要安装（需要安装FireworksFireworks）。）。Z使用使用FireworksFireworks最优化最优化 ：单击该按钮，启动：单击该按钮，启动FireworksFireworks的优化输出程序，对选取的图像进行优化的优化输出程序，对选取的图像进行优化处理并保存。处理并保存。Z裁剪裁剪 ：单击该按钮，所选图形边缘将出现裁切框，可以对图像进：单击该按钮，所选图形边缘将出现裁切框，可以对图像进行裁剪。行裁剪。

26、Z重新取样重新取样 ：单击该按钮，对已经被调整大小的图像重新取样，提：单击该按钮，对已经被调整大小的图像重新取样，提高图像品质。高图像品质。Z亮度和对比度亮度和对比度 ：单击该按钮打开的：单击该按钮打开的“亮度亮度/对比度对比度”对话框，可对话框，可以调整图像的亮度和对比度。以调整图像的亮度和对比度。锐化锐化 ：单击该按钮打开：单击该按钮打开“锐化锐化”对话框，可以调整图像的锐化度。对话框，可以调整图像的锐化度。Z类：为图形应用类：为图形应用CSSCSS样式。样式。Z垂直边距：为图像上下边缘添加边距，单位为垂直边距：为图像上下边缘添加边距，单位为像素。像素。Z水平边距：为图像左右边缘添加边距，

27、单位为水平边距：为图像左右边缘添加边距，单位为像素。像素。Z低解析度源：指定预加载的图像，使网页快速低解析度源：指定预加载的图像，使网页快速显示图像的大致内容，然后再显示最终图像。显示图像的大致内容，然后再显示最终图像。这种图像多使用黑白版本。这种图像多使用黑白版本。Z目标：设置所链接的目标页面在浏览器中的打目标：设置所链接的目标页面在浏览器中的打开方式，共有开方式，共有“_blank”_blank”、“_parent”_parent”、“_self”_self”和和“_top”4_top”4个选项，默认选项为个选项，默认选项为“_self”_self”。(1)_blank(1)_blank：

28、在新的浏览器窗口中打开。：在新的浏览器窗口中打开。(2)_parent(2)_parent：在含有该链接的框架的父框架集或父窗口：在含有该链接的框架的父框架集或父窗口中打开。中打开。(3)_self(3)_self：在当前框架或窗口中打开。：在当前框架或窗口中打开。(4)_top(4)_top：在整个浏览器窗口中打开，会删除所有框架。：在整个浏览器窗口中打开，会删除所有框架。Z边框：给图像加上一个边框，单位为像素。默边框：给图像加上一个边框，单位为像素。默认情况下没有边框。认情况下没有边框。Z对齐：对齐图像和文字。对齐：对齐图像和文字。Z重设图像大小：单击该按钮，将图像大小还原重设图像大小：单

29、击该按钮，将图像大小还原为原始大小。只有在对图像进行了大小调整后，为原始大小。只有在对图像进行了大小调整后，这个按钮才会在这个按钮才会在“宽宽”和和“高高”的文本框右侧的文本框右侧出现。出现。任务任务5 5 创建超级链接创建超级链接阶段阶段1 1 创建内部创建内部/外部链接外部链接阶段阶段2 2 创建锚点链接创建锚点链接阶段阶段3 3 创建电子邮件链接创建电子邮件链接阶段阶段4 4 创建空链接创建空链接阶段阶段5 5 创建脚本链接创建脚本链接阶段阶段6 6 创建下载链接创建下载链接阶段阶段1 1 创建内部创建内部/外部链接外部链接（1 1）在文档中选择要添加链接的文字或是其他元素，单击）在文档

30、中选择要添加链接的文字或是其他元素，单击“属性属性”面板中面板中“链接链接”文本框后面的文本框后面的“浏览文件浏览文件”按钮。按钮。（2 2）在）在“选择文件选择文件”对话框中的对话框中的“查找范围查找范围”下拉列表中，找到链下拉列表中，找到链接目标文件的所在位置，并选中目标文件，然后单击接目标文件的所在位置，并选中目标文件，然后单击“确定确定”按按扭。扭。（3 3）完成对步骤（）完成对步骤（1 1）中所选择对象的内部链接添加后，在）中所选择对象的内部链接添加后，在“属性属性”面板中的面板中的“目标目标”下拉列表框中，选择链接文件在窗口中的下拉列表框中，选择链接文件在窗口中的打开方式。打开方式

31、。如果知道链接文件的路径，可以直接在链接文本框中输入。另外，如果知道链接文件的路径，可以直接在链接文本框中输入。另外，在选中文本后，按住在选中文本后，按住“属性属性”面板中的面板中的“指向文件指向文件”按钮按钮，直接，直接拖向拖向“文件文件”面板中的要链接的文件，同样能够快速地创建超链面板中的要链接的文件，同样能够快速地创建超链接。接。直直接接在在链链接接文文本本框框中输入中输入阶段阶段2 2 创建锚点链接创建锚点链接（1 1）在文档中要创建链接的目标端点位置插入光标，然后选择菜单）在文档中要创建链接的目标端点位置插入光标，然后选择菜单栏上的栏上的“插入插入”“”“命名锚记命名锚记”命令。命令

32、。（2 2）在打开的）在打开的“命名锚记命名锚记”对话框中输入锚记名称对话框中输入锚记名称“top”top”，然后，然后单击单击“确定确定”按钮。按钮。（3 3）在网页中开始插入光标的位置出现一个锚记图标，表示命名锚）在网页中开始插入光标的位置出现一个锚记图标，表示命名锚记已经创建成功。记已经创建成功。如果在输入了锚记名称后对名称不满意，还可以选择锚记图标，如果在输入了锚记名称后对名称不满意，还可以选择锚记图标，在在“属性属性”面板中对命名锚记的名称进行修改。面板中对命名锚记的名称进行修改。（4 4）链接命名锚记。确定了锚记点后，就可以选择要添）链接命名锚记。确定了锚记点后，就可以选择要添加链

33、接的文字或是其他的元素，然后在加链接的文字或是其他的元素，然后在“属性属性”面面板中添加链接，以便链接到命名锚记。板中添加链接，以便链接到命名锚记。链接命名锚记的链接输入方法与普通的链接格式有链接命名锚记的链接输入方法与普通的链接格式有所区别，它分为两种情况：所区别，它分为两种情况：命名锚记在同一页面中：输入格式为命名锚记在同一页面中：输入格式为“#命名锚记名称命名锚记名称”，例如，例如“#top”。命名锚记在同一文件夹不同页面中：输入格式为命名锚记在同一文件夹不同页面中：输入格式为“文件名文件名#命名命名锚记名称锚记名称”，例如，例如“about.html#top”。阶段阶段3 3 创建电子

34、邮件链接创建电子邮件链接（1 1）在文档中选中要创建链接的文字，然后打开）在文档中选中要创建链接的文字，然后打开“属性属性”面板。面板。（2 2）在）在“属性属性”面板中的面板中的“链接链接”文本框中输入文本框中输入“mailtomailto：电子邮：电子邮箱地址箱地址”，例如，例如，mailtomailto：，即可创建一个电子邮件链接。：，即可创建一个电子邮件链接。（3 3）按下）按下“F12”F12”键在浏览器中预览网页，键在浏览器中预览网页，单击刚刚添加的电子邮单击刚刚添加的电子邮件链接，即可启动件链接，即可启动Outlook电子邮件程序。电子邮件程序。阶段阶段4 4 创建空链接创建空链

35、接（1 1）在文档中选择要添加链接的文字或其他对象后，打开）在文档中选择要添加链接的文字或其他对象后，打开“属性属性”面板。面板。（2 2）在）在“属性属性”面板中的面板中的“链接链接”文本框中输入文本框中输入“JavaScriptJavaScript：；：；”（JavaScriptJavaScript一词后面依次输入一个冒号和一个分号）即可。一词后面依次输入一个冒号和一个分号）即可。阶段阶段5 5 创建脚本链接创建脚本链接（1 1）在文档中选择要添加链接的文字或其他对象。）在文档中选择要添加链接的文字或其他对象。（2 2）在）在“属性属性”面板中的面板中的“链接链接”文本框中输入文本框中输入

36、“JavaScript:;JavaScript:;JavaScriptJavaScript代码代码”，例如，在，例如，在“链接链接”文本框中输入文本框中输入“JavaScript:;alertJavaScript:;alert（这是一个脚本链接这是一个脚本链接）。）。（3 3）按）按“F12”F12”键在浏览器中预览网页，单击开始设置的脚本链接，键在浏览器中预览网页，单击开始设置的脚本链接，即可打开一个提示信息框。即可打开一个提示信息框。阶段阶段6 6 创建下载链接创建下载链接（1 1）选择文档中要添加下载链接的文本内容，然后打开）选择文档中要添加下载链接的文本内容，然后打开“属性属性”面板。

37、面板。（2 2）在）在“属性属性”面板的面板的“链接链接”文本框中输入要链接的对象存放地文本框中输入要链接的对象存放地址和文件名称。址和文件名称。（3 3）保存文档后，按下）保存文档后，按下“F12”F12”键在浏览器中预览效果（左图），键在浏览器中预览效果（左图），单击该链接，打开单击该链接，打开“另存为另存为”对话框（右图）。对话框（右图）。（4 4）在选择好保存的位置和保存文件名后，单击）在选择好保存的位置和保存文件名后，单击“保存保存”按钮，即按钮，即可开始下载。可开始下载。本章小结本章小结 本章主要学习了网页制作软件本章主要学习了网页制作软件Dreamweaver的使用，学习本章后，同的使用，学习本章后，同学们可以使用学们可以使用Dreamweaver软件创建站软件创建站点、管理站点，可以在网页中插入文本、点、管理站点，可以在网页中插入文本、图像、并且创建链接。图像、并且创建链接。