网页制作基础

1、2017.4 网站的创建和管理网站的创建和管理 网站设计的基本操作网站设计的基本操作 本节学习目标本节学习目标 网页设计的基本概念网页设计的基本概念 网页设计的超级链接和多媒体应用网页设计的超级链接和多媒体应用 网站设计的布局网站设计的布局 网页中表单的应用网页中表单的应用 站点的发布与管理站点的发布与管理（*选学） 4.1 网页设计的基本概念网页设计的基本概念 1. 网页与网页与HTML 网页与网页与HTML 网页与网页与HTML 网页网页 HTML 网页网页 HTML 网页网页 HTML HTML（Hypertext Markup Language）是一种超）是一种超 文本标记语言，用来描

2、述万维网上的超文本文件。文本标记语言，用来描述万维网上的超文本文件。 从文件的角度来说，一个网页就是一个从文件的角度来说，一个网页就是一个HTML文件。文件。 设计、创建、制作与发布网页设计、创建、制作与发布网页 Dreamweaver CS4、 FrontPage、 Adobe Pagemile、 Claris Home Page 等等网页制作工具网页制作工具 42万字符的万字符的HTML文本需文本需 要我们自己编写吗？要我们自己编写吗？ 构成网页的基本元素大体相同，主要包括标题、网构成网页的基本元素大体相同，主要包括标题、网 站站Logo、导航、超链接、广告栏、文本、图片、动、导航、超链接

3、、广告栏、文本、图片、动 画、视频与音频等。画、视频与音频等。 按网页的表现形式可将网页分为按网页的表现形式可将网页分为： u静态网页静态网页 u动态网页动态网页 2. 网页设计的流程网页设计的流程 网页设计的流程网页设计的流程主要包括站点设计和网页制作两大部分。主要包括站点设计和网页制作两大部分。 网页设计的流程主要包括：网页设计的流程主要包括： 1.前期策划 2.创建站点 3.创建主页和其他网页 4.添加网页基本元素 5.创建网页超级链接 6.网页设计的版面布局 7.制作网页表单 本节课后网页制作课题本节课后网页制作课题 制作一个属于自己的兴趣主题网站： 例：自己喜爱歌手的网站 主页：歌手

4、的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该 唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、 演唱会视频等等。 4.2 网站的创建和管理网站的创建和管理 4.2 .1 Dreamweaver的界面的界面 4.2.2 站点的新建与管理站点的新建与管理 在在Dreamweaver CS4中，中，“站点站点” 是一个文件夹，用于存放网站的所有是一个文件夹，用于存放网站的所有 图像、多媒体等文件，便于用户对站图像、多媒体等文件，便于用户对站 点进行发布、维护和管理。点进行发布、维护和管理。 1. 站点的结构 要制作一个能够被公众浏览的网站，首先要要制作一个能够被公众浏览的网站，首先要 在

5、本地磁盘上制作一个网站，然后把这个网站上传在本地磁盘上制作一个网站，然后把这个网站上传 到到Web服务器上。服务器上。 放在本地磁盘上的网站称为本地站点，处于放在本地磁盘上的网站称为本地站点，处于 Internet中中Web服务器上的网站称为远程站点。服务器上的网站称为远程站点。 2. 站点的建立 本地站点是存放网站内容的集合本地站点是存放网站内容的集合 体，网站的内容都分门别类地保存在体，网站的内容都分门别类地保存在 各类文件夹中。各类文件夹中。 步骤：步骤： （1）打开打开“站点定义站点定义”对话框对话框 （2）定义站点）定义站点 例例1：建立一个本地站点：建立一个本地站点“站点站点1”，

6、站点文件夹，站点文件夹 为为C盘的盘的“计算机应用计算机应用”。 3. 3. 站点的管理站点的管理 站点建立后，站点建立后，Dreamweaver可可 以对站点及站点中的文件进行管理，以对站点及站点中的文件进行管理， 可以对所建立的站点进行移动、复制、可以对所建立的站点进行移动、复制、 删除、导入、导出等操作。删除、导入、导出等操作。 （1）打开）打开“管理站点管理站点”对话框对话框 （2）切换站点）切换站点 （3）编辑站点）编辑站点 （4）复制站点）复制站点 （5）删除站点）删除站点 （6）导入）导入/导出站点导出站点 （7）站点的查看方式）站点的查看方式 在网页创作中，网页上的信息大在网页

7、创作中，网页上的信息大 多是通过文字来表达的。文字是最基多是通过文字来表达的。文字是最基 本的元素之一，具有准确快捷地传递本的元素之一，具有准确快捷地传递 信息、存储空间小、易复制、易保存、信息、存储空间小、易复制、易保存、 易打印等优点，其优势很难被其他元易打印等优点，其优势很难被其他元 素所取代。素所取代。 （1）输入文本和空格）输入文本和空格 （2）文本换行（）文本换行（Enter与与Shift+Enter） 4.3 网站设计的基本操作网站设计的基本操作 1. 文本操作 （3）网页页面属性设置 设置网页的标题、背景图像、背景颜设置网页的标题、背景图像、背景颜 色、文本颜色、链接颜色、页边

8、距等，对色、文本颜色、链接颜色、页边距等，对 外观进行整体上的控制，以保证页面属性外观进行整体上的控制，以保证页面属性 的一致性。的一致性。 单击此按钮，单击此按钮， 打开打开 “页面属性页面属性”对话框对话框 例例2：打开打开wy1.html，将网页标题设置为，将网页标题设置为“母亲母亲 河河”，设置网页的超级链接颜色。，设置网页的超级链接颜色。 （4）文本属性设置（HTML属性） 例例3：在在wy1.html中添加日期和水平线。中添加日期和水平线。 水平线属性设置水平线属性设置 日期属性设置日期属性设置 （5 5）添加特殊字符（）添加特殊字符（“插入插入”/ /“HTMLHTML”/ /“

9、特殊特殊 字符字符”） （6 6）添加日期（）添加日期（“插入插入”/ /“日期日期”）和添加水）和添加水 平线（平线（“插入插入”/ /“HTMLHTML” / /“水平线水平线”） （7）设置列表 网页文本编排中，一些类型相同或具有序列网页文本编排中，一些类型相同或具有序列 关系的文本内容可以通过列表的方式来呈现，如关系的文本内容可以通过列表的方式来呈现，如 此可以使网页资料显得整齐规则，便于阅读。此可以使网页资料显得整齐规则，便于阅读。有有 两种列表：两种列表：编号列表编号列表和和项目列表项目列表（“格式格式/列表列表”）。）。 编号列表效果编号列表效果项目列表效果项目列表效果 例例4：

10、将将wy1-1.html中的相应段落设置编号列表。中的相应段落设置编号列表。 列表属性设置列表属性设置 列表菜单选择列表菜单选择 CSS（Cascading Style Sheet）称为）称为“层叠层叠 样式表样式表”，简称为，简称为“样式表样式表”。CSS是一组格是一组格 式设置规则，用于控制式设置规则，用于控制Web页面元素的外观布页面元素的外观布 局。局。 使用使用CSS可以灵活并更好地控制许多文本可以灵活并更好地控制许多文本 属性，包括特定字体、大小、粗体、斜体、下属性，包括特定字体、大小、粗体、斜体、下 划线等。划线等。 2. CSS样式 （1）CSS规则规则 CSS规则主要有选择器

11、规则主要有选择器 和声明两个部分组成，选择和声明两个部分组成，选择 器是表示格式元素的术语，器是表示格式元素的术语， 声明用于定义元素样式，如声明用于定义元素样式，如 右侧右侧所示的所示的.a1是选择器，是选择器， 介于介于之间的内容就是声明。之间的内容就是声明。 选择器 声明 （2）CSS定义定义 例例5：建立如建立如前页前页图所示的图所示的CSS规则规则.a1，并应用，并应用 到到wy1.html的第二段文本上。的第二段文本上。 步骤：步骤： u单击文本单击文本“属性属性”面板上的按钮面板上的按钮 ，“目标规则目标规则”中中 选择选择“” ，单击出现，单击出现 “新建新建CSS规则规则”

12、对话框。对话框。 u输入选择器名称输入选择器名称.a1，单击，单击“确定确定”按钮，在按钮，在“.a1的的CSS 规则定义规则定义”对话框中点开对话框中点开“Font-Family”下拉列表，选下拉列表，选 择择“编辑字体列表编辑字体列表”选项选项。 u在在“编辑字体列表编辑字体列表”对话框中，单击对话框中，单击 按钮可以将右边按钮可以将右边 “可用字体可用字体”中的中的“宋体宋体”放入左边的放入左边的“选择的字体选择的字体” 中，单击上面的中，单击上面的“+”号，可将字体上面的添加到字体号，可将字体上面的添加到字体 列表中，并可以继续添加新字体列表中，并可以继续添加新字体。 u单击单击“确定

13、确定”按钮，按钮，回到回到定义定义CSS规则规则对话框进行设置。对话框进行设置。 添加字体 定义规则 （3）CSS的应用的应用 u选择需设置属性的 文本，在属性面板 的“类” 下拉列表 框中选择.a1规则。 选择a1规则 4.4 网页设计的超级链接和多媒体应用网页设计的超级链接和多媒体应用 4.4.1.超级链接的设置超级链接的设置 练习练习：完成下面网页中各式超级链接的设置：完成下面网页中各式超级链接的设置： 超链接是指页面对象之间的链接关系，只有通超链接是指页面对象之间的链接关系，只有通 过超链接才可以实现在不同网页，乃至不同网站之过超链接才可以实现在不同网页，乃至不同网站之 间的跳转。间的

14、跳转。 超链接就是从一个网页指向一个目标的关系，超链接就是从一个网页指向一个目标的关系， 目标可以是另一个网页，可以是同一网页的不同位目标可以是另一个网页，可以是同一网页的不同位 置，还可以是一幅图像、一个文件等。置，还可以是一幅图像、一个文件等。 例例6：在在wy1.html中设置第一行中文本中设置第一行中文本“黄河黄河” 的超级链接，链接文件为的超级链接，链接文件为“huanghe.html”。 插 入 链 接 对 话 框 1. 文本链接 在在“目标目标”下拉列表中可以选择超级链接的打下拉列表中可以选择超级链接的打 开方式开方式。 u_blank：在一个新的浏览器中打开。 u_parent

15、：在父框架中打开。 u_self： 在网页所在的窗口或框架中打开， 此为默认选项。 u_top： 在浏览器窗口打开。 2. 锚记链接 Dreamweaver提供了锚记链接功能，可创 建跳转到页面的指定位置的链接。当建立一个 锚记后，会在屏幕上显示锚记标记 。 执行菜单“编辑/首选参数”命令，在“不 可见元素”中选取“命名锚记”复选框，“确 定”后即可显示锚记。 显示锚记 例例7：在在wy1.html网页尾部添加网页尾部添加“返回顶部返回顶部”四四 个字，并建立超级链接，可跳转到网页的首部。个字，并建立超级链接，可跳转到网页的首部。 步骤 ： u定义锚记名“m1” u尾部添加“返回顶部”文字 u

16、选择文字，设置链接。 注意注意：锚记前必须加上：锚记前必须加上#号，即号，即“#m1”。 3. EMAIL链接 在对象的“属性”面板的“链接”框内输入 “mailto:”并输入Email地址，如 mailto:。 4. 4. 外部链接外部链接 在“属性”面板的“链接”框内直接输入外部 链接地址，如http:/。 4.4.2.多媒体的应用多媒体的应用 练习：练习：完成如下网页中多媒体元素的添加设置：完成如下网页中多媒体元素的添加设置： 例例8：将图像将图像 huanghe.jpg 文 件 插 入 到文 件 插 入 到 wy1.html文档文档 中，并设置替中，并设置替 换文本换文本。 选择图像选

17、择图像 1. 插入图像（插入图像（“插入插入/图像图像”） 输入替换文本输入替换文本 “母亲河母亲河” 图像的属性设置图像的属性设置 插入鼠标经过图像插入鼠标经过图像 “鼠标经过图像鼠标经过图像”是指在浏览器中，是指在浏览器中， 当鼠标指针移动到图像上时，图像随当鼠标指针移动到图像上时，图像随 即变成另外一幅图像，当鼠标指针移即变成另外一幅图像，当鼠标指针移 开时，又会恢复到第一幅图像。开时，又会恢复到第一幅图像。 命令：命令：“插入插入/图像对象图像对象/鼠标经过对象鼠标经过对象” 例例9：在在wy1.html网页中插入网页中插入“鼠标经过图像鼠标经过图像”， 图像为图像为huanghe1.

18、jpg和和huanghe2.jpg文件。文件。 原始图像原始图像鼠标经过图像鼠标经过图像 插入插入“鼠标经过图像鼠标经过图像”对话框对话框 2 . 插入插入Flash动画动画 Flash动画以其文档容量小、效果动画以其文档容量小、效果 丰富等特点深受网页制作者的钟爱丰富等特点深受网页制作者的钟爱。 例例10：将将Flash文件文件001.swf插入到新建的网页插入到新建的网页 wy2.html中。中。 “插入/媒体/SWF”菜单命令 选择Flash 文件 3. 添加音频（添加音频（“插入插入/媒体媒体/插件插件”） 例例11：将将声音声音文件文件ex2.wav添加到添加到网页网页wy2.htm

19、l中中。 插入音频后，打开“窗口”菜单中的“标签编辑器 ”，可以对音频进行属性设置。 打开标签编辑打开标签编辑 器器 音频属性设置音频属性设置 4. 添加视频添加视频(“插入插入/媒体媒体/FLV”） 例例12：将将视频视频文件文件Musicvedio.flv添加到添加到网页网页 wy2.html中。中。 FLV视频标签FLV预览效果 插入FLV对话框 设置视频的宽 度和高度 设置自动播放 设置循环播放 网页是网站构成的基本元素。 一个网站是否精彩有什么影响因素呢？ 色彩的搭配、文字的变化、图片的处理 还有一个非常重要的因素网页布局。 什么是网页布局？ 网页布局是指网页内容在页面上所处位置的设

20、计。 4.3 网页布局网页布局 常见的网页布局结构 1“国字”型布局 因布局结构与汉字“国”相似而得名。页面的最上部 分一般放置网站的标志和导航栏或Banner广告，页面中 间主要放置网站的主要内容，最下部分一般放置网站 的版权信息和联系方式等。 2T型布局 T型布局结构因与英文大写字母T相似而得名。其页面的顶 部一般放置横网站的标志或Banner广告，下方左侧是导航 栏菜单，下方右侧则用于放置网页正文等主要内容。 3标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻 页面和一些注册页面等。 4左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一 种布局结构。其布局结

21、构主要分为左右两侧的页面。左侧 一般主要为导航栏链接，右侧则放置网站的主要内容 5上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅 在于是一种上下分为两页的框架。 6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局 的页面布局技术 7POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页 面设计通常以一张精美的海报画面为布局的主体。 8FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体 的布局方式。在这种布局中，大部分甚至整个页面都是 Flash。 网页布局的方法 在网页制作中，网页布局的重要性是显而易见的。布局有很多方法，但

22、 最基本的方法有两种： 表格 框架（*选学*） 1. 利用表格布局网页 右图为利用表格进行 网页布局的页面，表 格为9行5列，采用 创建后合并单元格方 式，表格无边框线。 布局后的表格可以插 入文字、图像、超级 链接、Email链接和 所有网页元素，且整 齐美观。 2. 表格的基本操作 表格是网页制作的一个重要组成部分， 是最常用的网页布局元素之一。利用表格 可以在页面上整齐地显示各种数据资料， 以及对文本和图像进行定位，利用表格的 背景、边框线等属性可以使网页更加美观。 表格的组成元素主要是：行、列、单 元格。 例例14：新建一网页文件新建一网页文件wy3-1.html，在网页中插入一个，在

23、网页中插入一个4行行3 列表格，合并第一行单元格，并设置对齐方式居中。列表格，合并第一行单元格，并设置对齐方式居中。 （1）表格的创建（）表格的创建（“插入插入/表格表格”） 插入表格对话框， 确定行数、列数。 表格宽度可以为绝对 像素单位，或为浏览 器宽度的百分比 “修改修改/表格表格/合并单元格合并单元格” 在属性面 板中，打 开“对齐” 下拉列表， 设置居中 对齐方式 百合并单元格操作 单元格单元格“填充填充”和和“间距间距”： u“填充填充”指单元格边框与单元格内容之间指单元格边框与单元格内容之间 的距离，单位为像素的距离，单位为像素 u“间距间距”指单元格边框与单元格边框之间指单元格

24、边框与单元格边框之间 的距离，单位为像素的距离，单位为像素 （2）表格的属性设置）表格的属性设置 表格建立好以后，选择菜单表格建立好以后，选择菜单“修改修改/表格表格”命命 令，可以对表格的行、列、单元格等进行编辑。令，可以对表格的行、列、单元格等进行编辑。 （3）表格的编辑）表格的编辑 u“插入行”和“插入列”：在光标所处行或列上插入一空 行或一空列，原来的行或列相应地往下移或往右移。 u“插入行或列”：从光标开始处可一次插入多行或多列。 u“删除行”和“删除列”：可一次删除选取的多行或多列。 如未选取行或列，则删除光标所在行或列。 u“拆分单元格”：将一个单元格拆分为多行或多列。 u “合

25、并单元格”：将选取的多个单元格合并为一个单元格。 单元格是表格的最基本单位，单元格属性单元格是表格的最基本单位，单元格属性 与表格的属性稍有不同与表格的属性稍有不同。 （4）单元格的属性设置）单元格的属性设置 u“水平”和“垂直”：指单元格内容的对齐方式。“水 平”为左对齐、右对齐、居中对齐等水平对齐方式， “垂直”为“顶端”、“居中”、“底部”等垂直对齐 方式。 u“宽”和“高”：表示单元格的宽度和高度，单位 像素。 若要指定百分比，可在数值后使用百分比符号%。 u“背景颜色”：设置单元格的背景颜色。 u“标题”：单元格中的内容为粗体并居中。 u“不换行”：防止换行，当单元格内容宽于原单元格

26、宽 度时，单元格会加宽宽度来容纳所有内容。 框架集由一组框架构成，框架集把浏览器框架集由一组框架构成，框架集把浏览器 窗口划分为若干个区域，每个区域定义为一个框窗口划分为若干个区域，每个区域定义为一个框 架，在此框架中可以显示不同的网页，从而实现架，在此框架中可以显示不同的网页，从而实现 在同一页面中显示多个网页文档内容。在同一页面中显示多个网页文档内容。 3. 框架的创建及使用（*选学） （1）创建和保存框架）创建和保存框架（*选学） 例例15：新建一框架集文件新建一框架集文件wy3.html，框架为，框架为“对齐上缘对齐上缘”，两两 个框架文件分别保存为个框架文件分别保存为wy3-1.ht

27、ml、和和wy3-2.html。 上框架wy3-1.html 主框架wy3-2.html 插入框架集操作：插入框架集操作： “对齐上缘”框架集包含顶 框架“topFrame”和主框架 “mainFrame” 步骤：步骤： 新建网页文件（未命名）新建网页文件（未命名） 插入框架集插入框架集 光标置于上框架内，执行光标置于上框架内，执行“文件文件/在框架中打开在框架中打开 ”命令，命令， 选择选择wy3-1.html文件，单击文件，单击“确定确定”。 光标置于下框架内，执行光标置于下框架内，执行“文件文件/在框架中打开在框架中打开 ”命令，命令， 选择选择wy3-2.html文件，单击文件，单击“

28、确定确定”。 执行执行“文件文件/保存全部保存全部”命令，输入文件名命令，输入文件名 wy3.html，单击，单击“保存保存”。 注意注意：执行：执行“在框架中打开在框架中打开”命令，命令，wy3-1.html 和和wy3-2.html网页文件必须事先已存在于站点中。网页文件必须事先已存在于站点中。 可以发现，当把光标定位在不同框架时，可以发现，当把光标定位在不同框架时， 在窗口标题上显示的是在此框架中打开的网页文在窗口标题上显示的是在此框架中打开的网页文 件名。而选取整个框架集外框时，窗口显示框架件名。而选取整个框架集外框时，窗口显示框架 集文件名。集文件名。 如果创建的框架不是所需的，可以

29、直接拖如果创建的框架不是所需的，可以直接拖 动框架分割线到窗口顶部或底部，清除框架。动框架分割线到窗口顶部或底部，清除框架。 （2）设置超级链接）设置超级链接（*选学） 例例16：在：在wy3-1.html（即上框架）中设置文本的超级链接。选（即上框架）中设置文本的超级链接。选 择择“黄河游黄河游”文本，设置超级链接到文本，设置超级链接到wy1.html网页，目标为网页，目标为 mainFrame。 注意注意：框架中的超级链接，目标可以设置为某个框架：框架中的超级链接，目标可以设置为某个框架 （mainFrame、topFrame、leftFrame、rightFrame、 bottomFra

30、me等）等）。 框架超链接目标 （3）框架面板）框架面板（*选学） 利用框架面板可以灵活地选取某个框架，对框架进行 属性设置。选择菜单“窗口/”框架可打开框架面板。 框架面板 （4）框架与框架集属性设置）框架与框架集属性设置（*选学） 框架的属性分为框架集属性和框架属 性两部分。 “框架集” 属性面板 “框架”属 性面板 在一个网站注册时，首先填写注册表，然后点击“提交”或“确定”按钮后， 注册表的信息提交到网站。这个操作就是通过表单实现的。 什么是表单： 表单在网页中主要负责数据采集功能。 表单是服务者与用户进行交互的通道。 通过表单，用户可以在表单对象中输入或选择相关的信息，然后提交到站点

31、服务 器的数据库，而服务器脚本或应用程序即对这些信息进行处理，最后服务器回应 请求，将信息发送回用户或客户端页面，从而达到人站交流的目的。 4.4 表单的使用表单的使用 表单组成 一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方 法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉 选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的 脚本或者取消输入，还可以用表单按钮来控制其他数据处理工作。 “调查问卷”表单 单行文本 单选按钮 复选框 菜单/列表 文件域 命令按钮 在网

32、页中添加表单对象，必须先创建表单 （或称表单域），在编辑状态下，表单以虚线框 出现，同一表单中的各种表单元素应集中在表单 中才会有效。表单对象可通过“插入”面板的 “表单”选项卡来插入。 表单域，表单中需提交的内容都 必须放置在红色虚线框内。 表单选项卡 1. 表单及表单属性 （1）表单）表单 u“表单ID”：用来设置表单的名称，当同一页面中有多 个表单时，需要有不同名称来区分。 u“动作”：用来制定处理该表单的动态页或脚本的路径。 例如需要通过Email发送，则可以输入 mailto: u“方法”：设置将表单数据发送到服务器的方法，其中 POST表示用标准输入方式发送数据到服务器，GET表示

33、 把表单数据附加到请求URL后发送到服务器。 u“目标”：设置表单数据被处理后，反馈网页的打开方 式。 u“编码类型”：设置发送数据的编码类型。 （2）表单属性）表单属性 插入表单（表单域）后，可以在其中插入各 种表单对象。 2. 表单对象 （1）文本框）文本框 例例17：在：在wy4.html网页中网页中插入表单域插入表单域，插入文本插入文本域域并设置属性。并设置属性。 单行文本域属性设置 密码设置 可输入的最多字符数 可显示的最多字符数 （2）文本区域）文本区域 显示行数 （3）单选按钮和复选框）单选按钮和复选框 例例18：在：在wy4.html网页中添加单选按钮网页中添加单选按钮。 单选

34、按钮 单选按钮属性 多行文本域属性设置 复选框属性 例例18：在：在wy4.html网页中添加复选框网页中添加复选框。 复选框 （4）列表）列表/菜单菜单 插入菜单项，单击属性面板上的插入菜单项，单击属性面板上的“列表值列表值”按钮，按钮， 添加菜单内容。添加菜单内容。 例例19：在：在wy4.html网页中添加菜单网页中添加菜单。 单击此按钮可 添加菜单内容 单击“+”号可添加内容 “菜单”属性 “列表”设置 菜单预览列表预览 列表允许多选 （5）文件域）文件域 利用文件域可以将选择的文件作为表单数据提利用文件域可以将选择的文件作为表单数据提 交到服务器上。交到服务器上。 例例20：在：在w

35、y4.html网页中添加文件域网页中添加文件域。 （6）按钮）按钮 按钮按钮是控制表单是控制表单提交提交或或重重设设的操作的操作。 按钮 “提交表单”表示将 数据提交到服务器 “重设表单”表示将表 单数据重设为原始值 （7）图像域）图像域 可以使用图像作为按钮来提交表单可以使用图像作为按钮来提交表单。 （8）跳转菜单）跳转菜单 在表单中使用跳转菜单，用户可以从菜单中选在表单中使用跳转菜单，用户可以从菜单中选 择需要打开的相应的网页或文件。择需要打开的相应的网页或文件。 例例22：在：在wy4.html网页中添加跳转菜单，内容是网页中添加跳转菜单，内容是“上海热线上海热线”和和 “新浪网新浪网”

36、。 插入跳转菜单对话框 单击“+”号可添加菜 单项 选择此项，可插入 “前往”按钮 4.5.1 站点的发布 4.5.2 站点的管理 4.5 站点的发布与管理站点的发布与管理（*选学） 4.5.1 站点的发布（*选学） “站点的发布站点的发布”是指利用是指利用DreamweaverDreamweaver 将本地站点的网站内容传输到远程站点将本地站点的网站内容传输到远程站点 这一过程。这一过程。 远程站点通常位于一台已经开启远程站点通常位于一台已经开启WebWeb服服 务器的计算机上。务器的计算机上。 1. 远程站点的建立（*选学） 一般而言，远程站点和本地站点位于两台不同一般而言，远程站点和本地

37、站点位于两台不同 的计算机上。的计算机上。 在建立远程站点之前必须先搞清楚三个问题：在建立远程站点之前必须先搞清楚三个问题： 远程站点位于哪一台计算机上远程站点位于哪一台计算机上 本地站点以什么通信方式访问远程站点本地站点以什么通信方式访问远程站点 根据特定的通信方式，本地站点访问远程站点时根据特定的通信方式，本地站点访问远程站点时 需要设置哪些参数需要设置哪些参数 远程文件夹一般指远程文件夹一般指Web服务器上存储文件的位服务器上存储文件的位 置，这些文件可以用来向互联网用户发布。置，这些文件可以用来向互联网用户发布。 如果计划开发动态网页，如果计划开发动态网页，Dreamweaver 需要

38、测需要测 试服务器的服务以便生成和显示动态内容。在测试试服务器的服务以便生成和显示动态内容。在测试 服务器上存放站点内容的文件夹就是测试服务器文服务器上存放站点内容的文件夹就是测试服务器文 件夹。件夹。 （1）远程文件夹和测试服务器文件夹 Dreamweaver CS4提供的在本地和远程文件夹提供的在本地和远程文件夹 之间传输文件时可以使用的访问方法之间传输文件时可以使用的访问方法： （2）远程文件夹的访问方法 uFTP： 如果使用 FTP 能够连接到 Web 服务器，可使用此设置。 u本地/ 网络： 如果远程文件夹位于网络文件夹或在本地计算 机上时可使用此设置。 uRDS （远程开发服务）：

39、对于这种访问方法，远程文件夹必 须位于运行 Adobe ColdFusion 的计算机上。 注意注意：上述不同的访问方法对应着不同的配置参数。只有正确配上述不同的访问方法对应着不同的配置参数。只有正确配 置参数才能确保本地站点与远程站点之间能正常传输文件置参数才能确保本地站点与远程站点之间能正常传输文件。 u选择菜单选择菜单“站站 点点/ 管理站点管理站点 ”命令命令，进入，进入 “站点定义站点定义” 对话框对话框。 u在在“站点定义站点定义 ”对话框中，对话框中， 输入相应内容输入相应内容 并进行属性设并进行属性设 置。置。 （3）定义远程文件夹（以FTP方式访问） 定义远程文件夹 选择FTP方式 选择远程信息 主机名称 远程文件夹一旦创建远程文件夹一旦创建 成功，就可以从本地站点向成功，就可以从本地站点向 远程站点上传文件了。在远程站点上传文件了。在 Dreamweaver中，上传文件中，上传文件 的操作主要通过的操作主要通过“文件文件”面面 板来执行。板来执行。 2. 远程站点的发布（*选学） 上传文件按钮 4.5.2 站点的管理（*选学） 随着站点的发布和站点内容的不断更新，新增、删除和随着站点的发布和站点内容的不断更新，