网页设计与制作

1、.1 1 网站建设的一般步骤网站建设的一般步骤2 2 网站规划和设计网站规划和设计3 3 网站制作网站制作DreamweaverDreamweaver.什么是网页什么是网页WWWWWW服务是通过网页形式的链接向用户提供信息。服务是通过网页形式的链接向用户提供信息。网页又通过超链接连接到其他资源。网页中包含文网页又通过超链接连接到其他资源。网页中包含文本、图像、声音和视频等多种形式的资源，因此也本、图像、声音和视频等多种形式的资源，因此也叫超媒体。用户可以通过浏览器把信息显示出来。叫超媒体。用户可以通过浏览器把信息显示出来。所以，网页是通过许多规则把超媒体组织在一起的所以，网页是通过许多规则把超

2、媒体组织在一起的超文本文件，浏览器按照网页中的规则解释出来，超文本文件，浏览器按照网页中的规则解释出来，然后把各种超文本元素显示在页面上。然后把各种超文本元素显示在页面上。HTMLHTML语言是语言是其中一种规则集。其中一种规则集。.什么是HTML超文本标记语言（Hyper Text Markup Language，HTML）是一种程序语言，它定义了一系列规则告诉浏览器如何显示HTML的元素。含有HTML元素集合的文件，也就是网页。创建HTML网页是一件很容易的事。把HTML标签写在HTML网页结构：一般是以标签开始，以结束。之间是网页头部，用来描述网页的相关内容，如网页标题、网页语言和网页内

3、容简述等。.认识认识DreamweaverDreamweaver DreamweaverDreamweaver是是AdobeAdobe公司开发的一款公司开发的一款可视化网可视化网页设计和网站管理软件。页设计和网站管理软件。可视化编辑功能可以快速制作出精彩的网页，可视化编辑功能可以快速制作出精彩的网页，而不需要编写任何代码。而不需要编写任何代码。能与其他图形编辑软件紧密结合，协同处理编能与其他图形编辑软件紧密结合，协同处理编辑图片，使用起来非常方便。辑图片，使用起来非常方便。还支持代码编辑环境，如颜色代码、自动补全还支持代码编辑环境，如颜色代码、自动补全和代码折叠等，更方便地进行代码编写，支持和

4、代码折叠等，更方便地进行代码编写，支持最新的最新的CSSCSS可视化布局。可视化布局。 .启动启动 Dreamwear Dreamweara a) )启动界面有四个功能：启动界面有四个功能： 1 1 打开最近的项目打开最近的项目 2.2.新建新建3.3.主要功能主要功能 4.4.快速入门快速入门 b b) )勾起勾起“不再显示不再显示”，下次打开下次打开，就不再显示启动界就不再显示启动界 面了。面了。( (如如 果果 要要 显显 示示 ， 在在“编辑编辑”首选项里首选项里将将“显显示欢迎画面示欢迎画面 ”打勾打勾) ) .DreamweaverDreamweaver界面界面.一 创建 网 页

5、的 基 本 对 象 1. 1. 创建页面创建页面 在Dreamweaver CS3中创建页面同其他应用程序一样简单，并且还提供了更多更方便的方式。主要有两种方式： 一种是在菜单命令中创建，另一种是在Dreamweaver开启时出现在应用程序中的对话框中创建，其实两种方式都是一样的，第二种方式在开启应用程序时更快捷。.一 创建 网 页 的 基 本 对 象 新创建的文档有多种类型，包含空白内容文档、空白模板文档和基于范例文档。在创建时根据需要进行选择。创建空白内容文档的具体步骤如下：【新建文档】对话框【新建文档】对话框 1. 1. 创建页面创建页面.一 创建 网 页 的 基 本 对 象 2 2保存

6、页面保存页面 编辑好的网页需要保存编辑好的网页需要保存，我们可以执我们可以执 行行“文件文件保存保存 ” ,或者按下或者按下Ctrl + S 组合键组合键 , 打打 开开“另存为另存为” 对话框对话框,在保存的时候选择保存的位置在保存的时候选择保存的位置也可以直接在文档工具上也可以直接在文档工具上方方选中需要保存的网页选中需要保存的网页文档文档，然后单击鼠标右键然后单击鼠标右键，在弹出的快捷键菜单在弹出的快捷键菜单 中选择中选择“保存保存 ” 在在Dreamweaver中保存网页文档时，文件的中保存网页文档时，文件的名称最好使用英文和数字，而不要使用中文。名称最好使用英文和数字，而不要使用中文

7、。 如果是主页，文件名称一般为如果是主页，文件名称一般为index.html .一 创建 网 页 的 基 本 对 象 3.3.打开和关闭页面打开和关闭页面如果要打开电脑中存有的网页文件如果要打开电脑中存有的网页文件 则执行则执行“文件文件-打开打开”命令，在弹出的对话框中命令，在弹出的对话框中选择需要打开的文件。选择需要打开的文件。 标准工具栏上的图标，也可以打开页面。标准工具栏上的图标，也可以打开页面。如果要关闭网页如果要关闭网页 单击文档窗口右上方的关闭网页按钮。单击文档窗口右上方的关闭网页按钮。 或者在文档工具条上选择你要关闭网的页，或或者在文档工具条上选择你要关闭网的页，或者执行者执行

8、“文件文件关闭关闭”。.一 创建 网 页 的 基 本 对 象 4 HTML4 HTML编辑语言编辑语言标记：在标记：在HTML中用于描述功能的符号。必须用中用于描述功能的符号。必须用括起来。括起来。 单标记：只需单独使用就能完整地表达意思的单标记：只需单独使用就能完整地表达意思的标记。如标记。如（强制换行）（强制换行） 双标记：由双标记：由“始标记始标记”和和“尾标记尾标记”两部分构成，两部分构成，必须成对使用。如必须成对使用。如.一 创建 网 页 的 基 本 对 象 4 HTML4 HTML编辑语言编辑语言标记属性标记属性 在单标记和双标记中可以包含的一些属性在单标记和双标记中可以包含的一些

9、属性 语法：语法： 如：如：具体文字具体文字 说明：各属性之间无先后次序，属性也可以省说明：各属性之间无先后次序，属性也可以省略。如省略，则取默认值。略。如省略，则取默认值。注释语句注释语句 可以放在任何地方，不会在浏览器中显示出来可以放在任何地方，不会在浏览器中显示出来 目的是方便设计人员的阅读和理解目的是方便设计人员的阅读和理解.一 创建 网 页 的 基 本 对 象 4 HTML4 HTML编辑语言编辑语言HTML基本结构基本结构HTMLHTML文件开始文件开始 文件头开始文件头开始 文件头文件头 文件头结束文件头结束 文件体开始文件体开始文件体文件体 文件体结束文件体结束HTMLHTML

10、文件结束文件结束.一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD头部内容不会显示在网页的主体里面，但对于网头部内容不会显示在网页的主体里面，但对于网页来说，有着至关重要的影响。页来说，有着至关重要的影响。网页中加载的顺序是从头部开始的。例如，网页网页中加载的顺序是从头部开始的。例如，网页的标题是浏览者得到的第一条信息，浏览者可以的标题是浏览者得到的第一条信息，浏览者可以根据标题来判断是否继续查看该网页。根据标题来判断是否继续查看该网页。网页中的脚本一般都放在网页中的脚本一般都放在之间，之间，以便在网页主体中使用脚本时已经加载完成，否以便在网页主体中使

11、用脚本时已经加载完成，否则脚本运行会出错。则脚本运行会出错。文件头部一般包含标题标签、文件头部一般包含标题标签、标签、内联标签、内联样式表及预定义脚本等样式表及预定义脚本等.一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD查看头部查看头部虽然头部的内容不会显示在网页主体内，但是虽然头部的内容不会显示在网页主体内，但是Dreamweaver CS3Dreamweaver CS3依然提供了编辑工具，下面是查依然提供了编辑工具，下面是查看头部内容的具体步骤：看头部内容的具体步骤：【文件头】窗口【文件头】窗口 【属性】面板【属性】面板 .一 创建 网 页 的

12、基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD网页标题网页标题网页标题显示在浏览器的标题栏上。当浏览者打开网页标题显示在浏览器的标题栏上。当浏览者打开网页时，从网页中得到的第一条信息便是网页标题。网页时，从网页中得到的第一条信息便是网页标题。网页标题可以简明地概括网页的内容，点明网页的网页标题可以简明地概括网页的内容，点明网页的主题。从而浏览者可以决定是否往下浏览。主题。从而浏览者可以决定是否往下浏览。网页标题也是搜索引擎网页标题也是搜索引擎robotsrobots搜索时的主要依据。搜索时的主要依据。在大量的网络信息中，浏览者如果想搜索到自己的在大量的网络信息中，浏览者如

13、果想搜索到自己的网页，最好的办法是定义一个合适的标题。网页，最好的办法是定义一个合适的标题。.一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD网页标题网页标题设置设置新建基本页，网页默认的标题为新建基本页，网页默认的标题为“无标题文档无标题文档”。单击【文件】单击【文件】| |【保存】命令，保存网页，按【保存】命令，保存网页，按F12F12键键进行预览，效果如图进行预览，效果如图 。 新建页新建页 设置标题设置标题 .一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD网页标题网页标题设置设置 单击【页面属性】按钮

14、，弹出【页面属性】对话单击【页面属性】按钮，弹出【页面属性】对话框，如图所示框，如图所示 【页面属性】对话框【页面属性】对话框 .一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 标签标签标签在网页内容中不显示，但标签在网页内容中不显示，但其其作用不容作用不容忽视。忽视。标签主要用于为搜索引擎标签主要用于为搜索引擎robotsrobots定义页面定义页面主题信息，它还可以用于定义用户浏览器上的主题信息，它还可以用于定义用户浏览器上的cookiecookie、鉴别作者、设定页面格式、标注内容提、鉴别作者、设定页面格式、标注内容提要和关键字；要和关键字；还

15、可以设置页面，使其根据定义的时间间隔刷新还可以设置页面，使其根据定义的时间间隔刷新自己，以及设置自己，以及设置RASCRASC内容等级等。内容等级等。.一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 标签标签标签的功能强大，但不是可见元素，所以不能标签的功能强大，但不是可见元素，所以不能用设置可见元素的方法进行设置。用设置可见元素的方法进行设置。下面讲解如何在下面讲解如何在Dreamweaver CS3Dreamweaver CS3中插入中插入标签，标签，并对其进行设置。在新建的网页中已经包含了一个并对其进行设置。在新建的网页中已经包含了一个标签，源

16、码如下：标签，源码如下：meta http-equiv=Content-Type content=text/html; charset=gb2312 /.一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 标签标签上面源码是设置文档类型和网页字符集。如果需要添上面源码是设置文档类型和网页字符集。如果需要添加其他功能，需要插入加其他功能，需要插入标签的其他属性。例如标签的其他属性。例如添加网页描述，具体步骤如下：添加网页描述，具体步骤如下：【标签选择器】对话框【标签选择器】对话框 【标签编辑器【标签编辑器-meta-meta】对话框】对话框 .一 创建 网

17、 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 标签标签以上是通过插入标签的方法，以上是通过插入标签的方法，Dreamweaver CS3Dreamweaver CS3还提还提供了更方便的方法，具体步骤如下：供了更方便的方法，具体步骤如下： 【常用】选项卡【常用】选项卡 【文件头】下拉菜单【文件头】下拉菜单 【说明】对话框【说明】对话框 .一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 样式表与脚本样式表与脚本网页内联定义的样式表通常放在网页头部。网页内联定义的样式表通常放在网页头部。可以在网页内容加载之前先定义内容中

18、需要的样式，可以在网页内容加载之前先定义内容中需要的样式，从而防止样式的不完全载入，以及破坏网页的结构和从而防止样式的不完全载入，以及破坏网页的结构和外观等现象。外观等现象。当网页中的元素需要修改样式时，方便进行查找和修当网页中的元素需要修改样式时，方便进行查找和修改，从而使页面的结构清晰明了。改，从而使页面的结构清晰明了。.一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 样式表与脚本：样式表与脚本：设置链接文件属性设置链接文件属性linklink标签用于设置链接到的文件，从而引入外标签用于设置链接到的文件，从而引入外部文档。使用格式如下：部文档。使

19、用格式如下：link rel=stylesheet type=text/css /其中其中hrefhref设置链接文件的路径，设置链接文件的路径，relrel设置与链接文设置与链接文件的关系，件的关系，typetype是链接文件的类型，这些是常用是链接文件的类型，这些是常用的设置方式。的设置方式。 .一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 基链接属性基链接属性basebase标签设置网页的基链接。使用格式如下：标签设置网页的基链接。使用格式如下：hrefhref属性值是基链接的位置。当设置好基链接后，自属性值是基链接的位置。当设置好基链接后，

20、自动在网页中的相对路径前加上动在网页中的相对路径前加上http:/http:/。 .一 创建 网 页 的 基 本 对 象 5 HTML5 HTML头部：头部：HEADHEAD 样式表与脚本：样式表与脚本：设置链接文件属性设置链接文件属性linklink标签用于设置链接到的文件，从而引入外标签用于设置链接到的文件，从而引入外部文档。使用格式如下：部文档。使用格式如下：link rel=stylesheet type=text/css /其中其中hrefhref设置链接文件的路径，设置链接文件的路径，relrel设置与链接文设置与链接文件的关系，件的关系，typetype是链接文件的类型，这些是常

21、用是链接文件的类型，这些是常用的设置方式。的设置方式。 .一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作1插入文本 b)粘贴其他编辑器中生成的文本，首先要将光标插入文本的位置，然后执行“编辑-粘贴”，就能完成文本的插入。也可以直接使用标准工具栏上的“粘贴”按钮。.一 创建

22、 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter

23、。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift

24、+Enter。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则

25、是Shift+Enter。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作2 调整文本 a)如果要调整文本大小，则选定文本，在属性面板的“大小”下拉列表框中选择合适的大小。 b)如果需要改变文本字体，则先选定文本，在属性面板上“字体”下拉列表中选择字体样式。 c)如果“字体”下拉列表中没有需要的字体，则执行“文本-字体-编辑字体列表”进行操作。 d)可以将字体设置为标题字体，格式：段落，Hx。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作3 插入特殊字符 a)在文档窗口中，将光标定位在需要插入特殊字符的位置。 b)执行“插入-HTML-特殊字符”，

26、在子菜单选择合适的字符命令。或者在快捷栏中选择文本，特殊字符。 c)如果在下拉菜单中没有找到需要的字符，那么可以选择“其他字符”。.一 创建 网 页 的 基 本 对 象 6 6. . 文本操作文本操作4.插入日期插入日期 a)将光标放置到要插入日期的位置。将光标放置到要插入日期的位置。 b)执行执行“插入插入日期日期”，或者在插入面板上点日期，或者在插入面板上点日期按钮，便可以。按钮，便可以。5插入文本列表插入文本列表 a)用鼠标选定要插入的项目的文本内容用鼠标选定要插入的项目的文本内容 b)切换切换成成文本面板，然后单击项目列表文本面板，然后单击项目列表ul/ol.一 创建 网 页 的 基

27、本 对 象 7 7. . 插入滚动字幕插入滚动字幕 1）单击编辑窗口上方的单击编辑窗口上方的“拆分拆分”按钮，将视图切换为按钮，将视图切换为拆分模式。拆分模式。 2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。意查看代码窗口中光标的位置。 3）将插入工具栏设置为将插入工具栏设置为“常规常规”，单击标签选择器按，单击标签选择器按钮，打开钮，打开标签选择器对话框。标签选择器对话框。 4）在标签选择器对话框左边窗口逐级选择在标签选择器对话框左边窗口逐级选择“HTML标签标签” “页页元素元素”“浏览器特定浏览器特定”

28、，然后在右边窗口中单击，然后在右边窗口中单击“marquee”，再单击下面的再单击下面的“插入插入”按钮，按钮，marquee标签被插入到代码中，按标签被插入到代码中，按“关闭关闭”按钮关闭对话框。按钮关闭对话框。 （5）在代码中出现在代码中出现，在中间的两个在中间的两个尖括号尖括号“”之间输入要滚动的文字，如之间输入要滚动的文字，如“欢迎访问欢迎访问金陵学院金陵学院的的主页！主页！” 。.一 创建 网 页 的 基 本 对 象 7 7. . 插入滚动字幕插入滚动字幕：设置相关属性：设置相关属性 =“100” directiondirection为滚动的目标方向，可选为滚动的目标方向，可选rig

29、htright、leftleft、upup、downdown。 scrollamountscrollamount 和和scrolldelayscrolldelay为滚动数量和延迟，可设置滚动速为滚动数量和延迟，可设置滚动速度和间隔时间。度和间隔时间。 looploop设置循环次数，小于设置循环次数，小于1 1为连续循环。为连续循环。 BgcolorBgcolor设置滚动区域的背景颜色。设置滚动区域的背景颜色。 width width 和和heightheight设置滚动区域的大小，沿垂直方向（设置滚动区域的大小，沿垂直方向（upup或或downdown）滚动时，必须设置一定的高度值，否则看不到

30、滚动的文字。滚动时，必须设置一定的高度值，否则看不到滚动的文字。.二 规划与创建网站 网页是网站的组成部分，很少会单独存在，网页是网站的组成部分，很少会单独存在，几乎所有的网页设计都是在网站的范围内进几乎所有的网页设计都是在网站的范围内进行的行的DreamweaverDreamweaver CS3 CS3拥有优秀的站点管理功能。拥有优秀的站点管理功能。此功能使网页设计工作更轻松合理。用户可此功能使网页设计工作更轻松合理。用户可以更合理地规划网页设计素材，并把网站的以更合理地规划网页设计素材，并把网站的各个网页有条理地组织起来，融合成一个整各个网页有条理地组织起来，融合成一个整体。体。.二 规划

31、与创建网站 1 1. . 站点规划的规则站点规划的规则一般来说，在规划站点结构时，应该遵循以下规则。一般来说，在规划站点结构时，应该遵循以下规则。文档分类保存文档分类保存 如果一个复杂站点，它有很多文件，我们必须使用分类保存如果一个复杂站点，它有很多文件，我们必须使用分类保存是它更清晰。是它更清晰。合理地命名文件名称合理地命名文件名称 为了方便管理，文件夹和文件的名称最好要有具体的含义。为了方便管理，文件夹和文件的名称最好要有具体的含义。本地站点与远程站点结构统一本地站点与远程站点结构统一 为了方便管理，在设置本地站点时，应该将本地站点与远程为了方便管理，在设置本地站点时，应该将本地站点与远程

32、站点的结构设计保一持致。站点的结构设计保一持致。 .二 规划与创建网站 1 1. . 建立本地站点建立本地站点 单击【站点】单击【站点】| |【新建站点】命令，弹出【编辑文件】【新建站点】命令，弹出【编辑文件】对话框对话框 。单击【下一步】按钮，弹出【编辑文件，第。单击【下一步】按钮，弹出【编辑文件，第2 2部分】部分】 。【编辑文件】对话框【编辑文件】对话框【编辑文件，第【编辑文件，第2 2部分】对话框部分】对话框 .二 规划与创建网站 1 1. . 建立本地站点建立本地站点 选择【否，我不想使用服务器技术】单选按钮，然后单选择【否，我不想使用服务器技术】单选按钮，然后单击【下一步】按钮，弹

33、出【编辑文件，第击【下一步】按钮，弹出【编辑文件，第3 3部分】对话部分】对话框。在【您如何连接到远程服务器】下拉列表框中，选框。在【您如何连接到远程服务器】下拉列表框中，选择【无】选项，然后单击【下一步】按钮，弹出【总结】择【无】选项，然后单击【下一步】按钮，弹出【总结】对话框，对话框， 【编辑文件，第【编辑文件，第3 3部分】对话部分】对话 【总结】对话框【总结】对话框 .二 规划与创建网站 1 1. . 建立本地站点建立本地站点 在建立站点之前，我们要知道所有的文件夹、资源在建立站点之前，我们要知道所有的文件夹、资源和特定的文件都包含在站点中。和特定的文件都包含在站点中。首先在硬盘上建立

34、一个新文件夹作为本地根文件夹，首先在硬盘上建立一个新文件夹作为本地根文件夹，用来存放相关文档。如在用来存放相关文档。如在F F盘根目录下创建一个名为盘根目录下创建一个名为MyWebMyWeb的文件夹，在的文件夹，在MyWebMyWeb文件夹里再创建一个名为文件夹里再创建一个名为imagesimages的文件夹，用来存放网站中甬道的图象文件的文件夹，用来存放网站中甬道的图象文件.二 规划与创建网站 1 1. . 建立本地站点建立本地站点 然后按照创建网站的向导逐步设置：然后按照创建网站的向导逐步设置： (1).(1).给站点起个名字，网址无所谓给站点起个名字，网址无所谓 (2).(2).不适用任

35、何服务器端技术不适用任何服务器端技术 (3).(3).选择本地的副本选择本地的副本 (4).(4).网络连接不需要网络连接不需要 (5).(5).完成站点定义完成站点定义 (6).(6).定义默认图像文件夹定义默认图像文件夹( (以后的图片均会自动以后的图片均会自动存在这里存在这里) ) .二 规划与创建网站 3 3. . 导入和导出与复制删除站点导入和导出与复制删除站点在在【站点】【站点】| |【管理管理站点】命令站点】命令中实现：中实现：a)a)站点导入、导出站点导入、导出 b)b)站点复制、删除站点复制、删除注意：不要删除了站点源副本注意：不要删除了站点源副本 .三插入图片三插入图片插入

36、图像的步骤如下插入图像的步骤如下 ：把工具栏切换到把工具栏切换到“常用常用”状态，然后单击状态，然后单击“图像：图像：图象图象”按钮按钮；或者菜单插入；或者菜单插入图象图象选择要插入的图像文件，在文件列表中单击一个选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图象文件时，图象预览区会显示这个图象的缩略图。图。单击确定按钮，如果图像文件在站点文件夹中，单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出就会直接插入到网页中，同时在编辑窗口显示出图像。图像。 1 1. . 插入图像插入图像.三插入图片三插入图片选中图像，点击属性

37、设置图象属性选中图像，点击属性设置图象属性 图文混排图文混排 垂直边距和水平边距垂直边距和水平边距 图像替代图像替代 图像边框图像边框拖动改变大小拖动改变大小 拖动图像下边、右边、右下角的三个控制点可拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。快速改变图像大小。 2 2. . 设置图象属性设置图象属性.三插入图片三插入图片当用户制作网页时，在页面某个位置需要插入一当用户制作网页时，在页面某个位置需要插入一幅图片。但一时找不到自己喜欢合的适图片，这幅图片。但一时找不到自己喜欢合的适图片，这就需要用到占位符功能。就需要用到占位符功能。图象占位符并不是在浏览器中显示的最终图象，图象占位

38、符并不是在浏览器中显示的最终图象，它它只是只是一种临时的、替补的图形。一种临时的、替补的图形。用户用户不仅可以设置图象占位符的大小和颜色，还不仅可以设置图象占位符的大小和颜色，还可以为图象占位符号提供文本标签。可以为图象占位符号提供文本标签。插入图像占位符插入图像占位符-找到替换的替换掉找到替换的替换掉3 3. . 图像占位符图像占位符.三插入图片三插入图片用于创建交互式图象的两幅图象大小必须相同。用于创建交互式图象的两幅图象大小必须相同。否则交换的图象再显示时会进行压缩或展开以适否则交换的图象再显示时会进行压缩或展开以适应原有图象的大小，这样容易造成图象的失真。应原有图象的大小，这样容易造成

39、图象的失真。在网页中使用交互式图象，是可网页更生动。在网页中使用交互式图象，是可网页更生动。插入鼠标经过图像插入鼠标经过图像-选择原始图像和经过图像选择原始图像和经过图像4 4. . 交互式图像交互式图像.三插入图片三插入图片在在DreamweaverDreamweaver中，设置网页背景有两种方法：一中，设置网页背景有两种方法：一种时设置背景颜色，另一种时设置背景图象。种时设置背景颜色，另一种时设置背景图象。修改修改-页面属性（页面属性（Ctrl+JCtrl+J）5 5. . 图像背景图像背景.四表格应用四表格应用在在DreamweaverCS4DreamweaverCS4中，创建一个表格可

40、执行以下操作：中，创建一个表格可执行以下操作：插入插入-表格表格；或常用里的表格图标或常用里的表格图标在弹出的在弹出的表格对话框中设置表格的样式表格对话框中设置表格的样式： 行数和列数文本框分别输入表格的行数和列数行数和列数文本框分别输入表格的行数和列数 表格宽度表格宽度 边框粗细边框粗细 单元格边距单元格边距 单元格间距单元格间距 页眉：无，左，顶部，两者页眉：无，左，顶部，两者 标题标题 对齐对齐 摘要摘要1.1.创建表格创建表格.四表格应用四表格应用a)a)存放文本、存放文本、图片图片等多媒体信息等多媒体信息b)b)布局布局2 2. .表格的应用表格的应用.四表格应用四表格应用在对表格元

41、素进行操作之前，必须先选定表格元素。在对表格元素进行操作之前，必须先选定表格元素。(1)(1)选定整行选定整行(2)(2)选定整列选定整列(3)(3)选定整个表格选定整个表格 修改修改-表格表格-选择表格选择表格 在表格在表格左上左上或或右下角右下角位置位置，点击选中点击选中 点击点击标签标签3 3. .选定表格、行、列、单元格元素选定表格、行、列、单元格元素.四表格应用四表格应用设置表格属性设置表格属性 表格表格IDID 行列：行列： 宽高宽高 填充填充 间距间距 对齐对齐 边框边框 背景颜色背景颜色 背景图象背景图象 边框颜色边框颜色4 4. .设置表格、行列、单元格属性设置表格、行列、单

42、元格属性.四表格应用四表格应用 在表格的操作过程中，可以很方便地添加和删除表在表格的操作过程中，可以很方便地添加和删除表格的行或列：格的行或列：在表格添加一行光标放在单元格内修改在表格添加一行光标放在单元格内修改-表格表格-插入行插入行；在表格中添加一列在表格中添加一列 同上同上 提示：按下提示：按下组合键能添加一行，按下组合键能添加一行，按下能添加一列。能添加一列。在表格添加多行或多列光标放在单元格内表格在表格添加多行或多列光标放在单元格内表格-插插入行列入行列删除行或列删除行或列5 5. .添加和删除行或列添加和删除行或列.四表格应用四表格应用在制作网页的过程中，有时需要合并或拆分单元格。

43、在制作网页的过程中，有时需要合并或拆分单元格。单元格的合并表格单元格的合并表格-合并单元格合并单元格 拖动选中要合并的单元格，单击属性面板上的合拖动选中要合并的单元格，单击属性面板上的合并单元格按钮并单元格按钮单元格的拆分表格单元格的拆分表格-拆分单元格拆分单元格 在要拆分的单元格中单击，在单击属性面板上的在要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮拆分单元格按钮 6 6. .单元格的合并及拆分单元格的合并及拆分.五超级链接五超级链接URLURL中文翻译为统一资源定位器。中文翻译为统一资源定位器。URLURL是是InternetInternet上用来描述信息资源的字符串。上用来描述

44、信息资源的字符串。一个一个URLURL分为分为3 3个部分：协议代码，装由所需文件个部分：协议代码，装由所需文件的计算机地址和主机资源的具体位置。的计算机地址和主机资源的具体位置。 scheme:/host:post/path/scheme:/host:post/path/ schemescheme指的是指的是http,http,七种七种 hosthost指的是指的是IPIP地址或计算机名称地址或计算机名称 postpost指的是服务器端口指的是服务器端口 pathpath指的是文件路径指的是文件路径 指的是文件名指的是文件名1 1. .什么是什么是URLURL.五超级链接五超级链接 创建超级

45、链接时必须了解链接与被链接的路径。创建超级链接时必须了解链接与被链接的路径。在一个网站中，路径通常由在一个网站中，路径通常由3 3种表达方式：绝对路种表达方式：绝对路径，根目录相对路径，文档目录相对路径。径，根目录相对路径，文档目录相对路径。绝对路径绝对路径: : 根根目录相对路径：目录相对路径： /web/index.htm/web/index.htm文档目录相对路径：文档目录相对路径： index.htmindex.htm2 2. .路径路径.五超级链接五超级链接3 3. .创建创建文本文本超链接超链接1 1）使用属性面板设置超级链接使用属性面板设置超级链接2 2）使用工具按钮使用工具按钮

46、 a) a)插入超级链接插入超级链接：单击工具栏上的超级链接按钮单击工具栏上的超级链接按钮 b b）插入邮件链接）插入邮件链接链接目标是电子邮件地址时，单击工具栏上的电子链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮邮件链接按钮 .五超级链接五超级链接5 5. .创建创建文本文本超链接超链接3 3) )设置下载文件的超级链接设置下载文件的超级链接4)4)创建空链接创建空链接：# #4 4) )创建外部链接创建外部链接 5 5) )链接文字颜色的设置链接文字颜色的设置 通过页面属性来设置的。通过页面属性来设置的。.五超级链接五超级链接设置锚记设置锚记 使用锚记使用锚记：#+#+锚记锚记

47、名称名称4 4. .使用锚记使用锚记.五超级链接五超级链接4 4. .图片超级链接和图像地图图片超级链接和图像地图 1 1）图片超级链接图片超级链接 2 2）图像地图图像地图 如果想在一个图像的不同位置上点击，就跳如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。转到相应的目标网页，就需要使用图象地图。 设置矩形热区设置矩形热区设置圆形热区设置圆形热区设置多边形热区设置多边形热区.六插入媒体元素六插入媒体元素动态元素是一种重要的网页元素。这里我们将学动态元素是一种重要的网页元素。这里我们将学习在网页中插入动态元素，如习在网页中插入动态元素，如FlashFlash影片

48、、影片、FlashFlash按钮、按钮、FlashFlash文本等，此外还将学习其他一些动态文本等，此外还将学习其他一些动态元素的插入方法。元素的插入方法。.六插入媒体元素六插入媒体元素RealVideo的.rm、.rmvb视频影像格式和.ra的音频格式Microsoft Media technology的.asf格式QuickTim的.mov格式Flash的.swf格式Metastream 的.mts格式Authorware的.aam多媒体教学课件格式1 1. .媒体文件的类型媒体文件的类型.六插入媒体元素六插入媒体元素2 2. .插入插入FlashFlash1 1）插入插入FlashFla

49、sh动画动画将插入工具栏切换到将插入工具栏切换到“常用常用”模式，单击模式，单击“媒体：媒体：Flash”Flash”按钮按钮 2 2）插入插入FlashFlash按钮按钮将插入工具栏切换到将插入工具栏切换到“常用常用”模式，单击模式，单击“媒体：媒体：Flash”Flash”按钮旁边的三角形，在菜单中选择按钮旁边的三角形，在菜单中选择“媒体：媒体：FlashFlash按钮按钮”按钮按钮 3 3）插入插入FlashFlash文本文本将插入工具栏切换到将插入工具栏切换到“常用常用”模式，单击模式，单击“媒体：媒体：Flash”Flash”按钮旁边的三角形，在菜单中选择按钮旁边的三角形，在菜单中选

50、择“媒体：媒体：FlashFlash文本文本”按钮按钮 .六插入媒体元素六插入媒体元素3 3. .制作播电影、声音的页面制作播电影、声音的页面1 1）插入插件插入插件 （1 1）将插入工具栏切换到）将插入工具栏切换到“常用常用”模式，单击模式，单击“媒体：媒体：Flash”Flash”按钮旁边的三角形，在菜单中选择按钮旁边的三角形，在菜单中选择“媒体：媒体：插件插件”按钮按钮 （2 2）选择一个要插入网页的电影格式的文件）选择一个要插入网页的电影格式的文件 （3 3）在编辑窗口中看到插入了一个灰色矩形插件）在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小。标志

51、，调整其大小可调整网页中的播放窗口的大小。（4 4）单击属性面板上的）单击属性面板上的“参数参数”按钮，可设置各种播放参数。按钮，可设置各种播放参数。.六插入媒体元素六插入媒体元素3 3. .制作播电影、声音的页面制作播电影、声音的页面2 2）插入背景声音插入背景声音（1 1）将插入工具栏设置为）将插入工具栏设置为“常规常规”，单击标签选择器按钮，单击标签选择器按钮 （2 2）在标签选择器对话框左边窗口逐级选择）在标签选择器对话框左边窗口逐级选择“HTMLHTML标标签签” “ “页元素页元素”“浏览器特定浏览器特定”，然后在右边窗口，然后在右边窗口中单击中单击“bgsound”bgsound

52、”，再单击下面的，再单击下面的“插入插入”按钮，打开按钮，打开“标签编辑器标签编辑器-bgsound”-bgsound”对话框。对话框。（3 3）在）在“源源”中指定背景音乐文件，可以是中指定背景音乐文件，可以是.wav.wav、.mid.mid或或.mp3.mp3格式的音频文件。格式的音频文件。.六插入媒体元素六插入媒体元素3 3. .制作播电影、声音的页面制作播电影、声音的页面2 2）插入背景声音插入背景声音 （4 4）在）在“循环循环”栏指定网页调入时背景音乐的播栏指定网页调入时背景音乐的播放次数，选择放次数，选择“无限（无限（-1-1）”循环播放。其他选项根循环播放。其他选项根据需要设

53、置。据需要设置。（5 5）单击）单击“确定确定”，背景音乐就插入到网页中。关闭，背景音乐就插入到网页中。关闭标签选择器对话框。标签选择器对话框。.七插入表单七插入表单表单由两个重要组成部分组成：一时描述表单的表单由两个重要组成部分组成：一时描述表单的HTMLHTML源代码；二时用于处理用户在表单中输入信源代码；二时用于处理用户在表单中输入信息的服务器应用程序客户端脚本，如息的服务器应用程序客户端脚本，如ASPASP，ASP.netASP.net等。等。在网上浏览时常会遇到要求填写资料或提供信息在网上浏览时常会遇到要求填写资料或提供信息的页面，如申请的页面，如申请QQQQ号码时填写个人信息的页面

54、，号码时填写个人信息的页面，网上购物时填写的购物单等，这些页面即是表单网上购物时填写的购物单等，这些页面即是表单页面。页面。表单通常由多个表单对象组成，如单选按钮、复表单通常由多个表单对象组成，如单选按钮、复选框、文本字段以及按钮等，网站管理员可以通选框、文本字段以及按钮等，网站管理员可以通过表单从浏览者处收集需要的信息，从而实现信过表单从浏览者处收集需要的信息，从而实现信息的传递。息的传递。.七插入表单七插入表单表单支持客户端表单支持客户端-服务器关系中的客户端。服务器关系中的客户端。当访问者在当访问者在Web浏览器中显示的表单中输入信息，浏览器中显示的表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务然后单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息器，服务器端脚本或应用程序在该处对这些信息进行处理。进行处理。用于处理表单数据的常用服务器端技术包括用于