网页设计与制作第三章

1、第第3章章 dreamweaver 8快速入门快速入门 3.1 dreamweaver 8简介简介 3.2 dreamweaver 8基本工作环境基本工作环境 3.3 用用dreamweaver 8制作网页制作网页 3.4 网页制作高级功能网页制作高级功能 3.1 dreamweaver 8简介简介 macromedia dreamweaver 8是一个可视化的网是一个可视化的网 页设计和建立页设计和建立web站点及应用程序的专业工具。它将可视布站点及应用程序的专业工具。它将可视布 局工具、应用程序开发功能和代码编辑支持组合在一起，其局工具、应用程序开发功能和代码编辑支持组合在一起，其 功能的

2、强大使得各个层次的开发人员和设计人员都能够快速功能的强大使得各个层次的开发人员和设计人员都能够快速 创建界面吸引人的基于标准的网站和应用程序。从对基于创建界面吸引人的基于标准的网站和应用程序。从对基于 css设计的领先支持到乎工编码功能，设计的领先支持到乎工编码功能，dreamweaver提提 供了专业人员在一个集成、高效的环境中所需的工具。开发供了专业人员在一个集成、高效的环境中所需的工具。开发 人员可以使用人员可以使用 dreamweaver及所选择的服务器技术来创及所选择的服务器技术来创 建功能强大的建功能强大的internet应用程序，从而使用户能链接到数应用程序，从而使用户能链接到数

3、 据库、据库、web服务和旧式系统。服务和旧式系统。 返回 3.2 dreamweaver 8基本工作环境基本工作环境 3.2.1界面介绍界面介绍 新建或打开一个文档，进入新建或打开一个文档，进入dreamweaver 8的标准的标准 工作界面。工作界面。dreamweaver 8的标准工作界面包括：标题的标准工作界面包括：标题 显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文 档窗口、状态栏、属性面板和浮动面板组，如档窗口、状态栏、属性面板和浮动面板组，如图图3-2所示。所示。 下一页 返回 3.2 dreamweaver 8基本工作环

4、境基本工作环境 3.2.2主菜单主菜单 文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打 印等。印等。 编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置 等。等。 查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。 插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级 链接等。链接等。 修改：具有

5、对页面元素修改的功能。修改：具有对页面元素修改的功能。 文本：用来对文本操作，例如设置文本格式等。文本：用来对文本操作，例如设置文本格式等。 命令：所有的附加命令项。命令：所有的附加命令项。 站点：用来创建和管理站点。站点：用来创建和管理站点。 窗口：用来显示和隐藏控制面板以及切换文档窗口。窗口：用来显示和隐藏控制面板以及切换文档窗口。 帮助：联机帮助功能。例如按帮助：联机帮助功能。例如按f1键，就会打开电子帮助文本键，就会打开电子帮助文本。 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 3.2.3工具栏工具栏 1.文档工具栏文档工具栏 “文档文档”工具栏包

6、含各种按钮，它们提供各种工具栏包含各种按钮，它们提供各种“文档文档” 窗口视图窗口视图(如如“设计设计”视图和视图和“代码代码”视图视图)的选项、各种查的选项、各种查 看选项和一些常用操作看选项和一些常用操作(如在浏览器中预览如在浏览器中预览)。 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 2.标准工具栏标准工具栏 “标准标准”工具栏包含来自工具栏包含来自“文件文件”和和“编辑编辑”菜单中的菜单中的 一般操作的按钮：一般操作的按钮： “新建新建”、 “打开打开”、“保存保存”、“保保 存全部存全部”、“剪切剪切”、“复制复制”、“粘贴粘贴”、“撤销撤销”和

7、和 “重做重做” 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 3.文档窗口文档窗口 “文档文档”窗口显示当前文档。可以选择下列任一视图：窗口显示当前文档。可以选择下列任一视图： “设计设计”视图是一个用于可视化页面布局、可视化编辑和快视图是一个用于可视化页面布局、可视化编辑和快 速应用程序开发的设计环境。在该视图中，速应用程序开发的设计环境。在该视图中， dreamweaver显示文档的完全可编辑的可视化表示形式，显示文档的完全可编辑的可视化表示形式， 类似于在浏览器中查看页面时看到的内容。类似于在浏览器中查看页面时看到的内容。“代码代码”视图是视图是 一

8、个用于编写和编辑一个用于编写和编辑html， javascript、服务器语言代、服务器语言代 码以及任何其他类型代码的乎工编码环境。码以及任何其他类型代码的乎工编码环境。“代码和设计代码和设计” 视图使用户可以在单个窗口中同时看到同一文档的视图使用户可以在单个窗口中同时看到同一文档的“代码代码” 视图和视图和“设计设计”视图。视图。 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 4.状态栏状态栏 “文档文档”窗口底部的状态栏提供与用户正创建的文档有窗口底部的状态栏提供与用户正创建的文档有 关的其他信息。标签选择器显示环绕当前选定内容的标签层关的其他信息。标

9、签选择器显示环绕当前选定内容的标签层 次结构。单击该层次结构中的任何标签以选择该标签及其全次结构。单击该层次结构中的任何标签以选择该标签及其全 部内容。单击部内容。单击标签可以选择文档的整个正文。标签可以选择文档的整个正文。 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 3.2.4常用面板常用面板 1.插入面板组插入面板组 插入面板集成了所有可以在网页应用的对象包括插入面板集成了所有可以在网页应用的对象包括“插入插入” 菜单中的选项。插入面板组其实就是图像化了的插入指令，菜单中的选项。插入面板组其实就是图像化了的插入指令， 通过一个个的按钮，画、表格、图层、

10、框架、表单、通过一个个的按钮，画、表格、图层、框架、表单、flash 和和 activex可以很容易地加入图像、声音、多媒体动等网页可以很容易地加入图像、声音、多媒体动等网页 元素。元素。 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 2.属性面板属性面板 属性面板并不是将所有的属性加载在面板上，而是根据属性面板并不是将所有的属性加载在面板上，而是根据 用户选择的对象来动态显示对象的属性，属性面板的状态完用户选择的对象来动态显示对象的属性，属性面板的状态完 全是随当前在文档中选择的对象来确定的。例如，当前选择全是随当前在文档中选择的对象来确定的。例如，当前选

11、择 了一幅图像，那么属性面板上就出现该图像的相关属性；如了一幅图像，那么属性面板上就出现该图像的相关属性；如 果选择了表格，那么属性面板会相应的变化成表格的相关属果选择了表格，那么属性面板会相应的变化成表格的相关属 性。性。 上一页 下一页 返回 3.2 dreamweaver 8基本工作环境基本工作环境 3.浮动面板浮动面板 其他面板可以统称为浮动面板，这些面板都浮动于编辑其他面板可以统称为浮动面板，这些面板都浮动于编辑 窗口之外。在初次使用窗口之外。在初次使用dreamweave 8的时候，这些面板的时候，这些面板 根据功能被分成了若十组。在窗口菜单中，选择不同的命令根据功能被分成了若十组

12、。在窗口菜单中，选择不同的命令 可以打开基本面板组、设计面板组、代码面板组、应用程序可以打开基本面板组、设计面板组、代码面板组、应用程序 面板组、资源面板组和其他面板组。面板组、资源面板组和其他面板组。 上一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.3.1创建站点及网页创建站点及网页 1.规划站点结构规划站点结构 网站是多个网页的集合，其包括一个首页和若十个分页，网站是多个网页的集合，其包括一个首页和若十个分页， 这种集合不是简单的集合。为了达到最佳效果，在创建任何这种集合不是简单的集合。为了达到最佳效果，在创建任何 web站点页面之前，要对站点的结构进行设计和规划

13、。卞要站点页面之前，要对站点的结构进行设计和规划。卞要 包括决定要创建多少页，每页上显示什么内容，页面布局的包括决定要创建多少页，每页上显示什么内容，页面布局的 外观以及各页是如何互相连接起来的，等等。外观以及各页是如何互相连接起来的，等等。 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 2.创建站点创建站点 在在dreamweave 8中可以有效地建立并管理多个站点。中可以有效地建立并管理多个站点。 创建站点有两种方法：一是利用向导完成；一是利用高级设创建站点有两种方法：一是利用向导完成；一是利用高级设 定来完成。定来完成。 在创建站点前，用户可以先在自己的电脑硬盘上

14、新建一在创建站点前，用户可以先在自己的电脑硬盘上新建一 个以英文或数字命名的空文件夹作为本地站点使用。个以英文或数字命名的空文件夹作为本地站点使用。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.搭建站点结构搭建站点结构 站点是文件与文件夹的集合，下面我们根据前面对站点是文件与文件夹的集合，下面我们根据前面对 xmweb网站的设计，来新建网站的设计，来新建xmweb站点要设置的文件夹站点要设置的文件夹 和文件。和文件。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.3.2设置网页的属性设置网页的属性 1.页面的总体设置页面

15、的总体设置 2.设置页面属性设置页面属性 (1)设置外观设置外观 (2)设置链接设置链接 (3)设置标题设置标题 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.3.3输人与修饰文本输人与修饰文本 1.插入文本插入文本 要向要向dreamweaver文档添加文本，可以直接在文档添加文本，可以直接在 dreamweaver“文档文档”窗口中输入文本，也可以剪切并粘窗口中输入文本，也可以剪切并粘 贴，还可以从贴，还可以从word文档导入文本。文档导入文本。 用鼠标在文档编辑窗口的空白区域点一下，窗口中会出用鼠标在文档编辑窗口的空白区域点一下，窗口中会出 现闪动的光

16、标，提示文字的起始位置，将现闪动的光标，提示文字的起始位置，将01.rar中的文字素中的文字素 材复制材复制/粘贴进来。粘贴进来。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 2.编辑文本格式编辑文本格式 网页的文本分为段落和标题两种格式。网页的文本分为段落和标题两种格式。 在文档编辑窗口中选中一段文本，在属性面板在文档编辑窗口中选中一段文本，在属性面板“格式格式” 后的下拉列表框中选择后的下拉列表框中选择“段落段落”命令，把选中的文本设置成命令，把选中的文本设置成 段落格式。段落格式。 “标题标题1”到到“标题标题6”分别表示各级标题，应用于网页的分别表示各

17、级标题，应用于网页的 标题部分。对应的字体由大到小，同时文字全部加粗。标题部分。对应的字体由大到小，同时文字全部加粗。 另外，在属性面板中可以定义文字的字号、颜色、加粗、另外，在属性面板中可以定义文字的字号、颜色、加粗、 加斜、水平对齐等内容。加斜、水平对齐等内容。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.设置字体组合设置字体组合 dreamweaver 8预设置的可供选择的字体组合只有预设置的可供选择的字体组合只有 6项英文字体组合，要想使用中文字体，必须重新编辑新的项英文字体组合，要想使用中文字体，必须重新编辑新的 字体组合，在字体组合，在“字体字

18、体”后的下拉列表框中选择后的下拉列表框中选择“编辑字体列编辑字体列 表表”命令。命令。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 4.文字的其他设置文字的其他设置 文本换行，按文本换行，按enter键换行的行距较大键换行的行距较大(在代码区生成在代码区生成 标签标签)，按，按enter+shift组合键换行的行间距组合键换行的行间距 较小较小(在代码区生成在代码区生成标签标签)。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.3.4插入图像插入图像 1.插入图像插入图像 2.设置图像属性设置图像属性 3.插入其他图像元素插

19、入其他图像元素 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.3.5建立超链接建立超链接 1.页面之间的超级链接页面之间的超级链接 在网页中，单击某些图片或有画划线、有明示链接的文在网页中，单击某些图片或有画划线、有明示链接的文 字就会跳转到相应的网页中去。字就会跳转到相应的网页中去。 (1)在网页中选中要做超级链接的文字或者图片。在网页中选中要做超级链接的文字或者图片。 (2)在属性面板中单击黄色文件夹图标，在弹出的对话框里在属性面板中单击黄色文件夹图标，在弹出的对话框里 选中相应的网页文件就完成了。做好超级链接，在属性面板选中相应的网页文件就完成了。做好

20、超级链接，在属性面板 中会出现链接文件显示。中会出现链接文件显示。 (3)按按f12键预览网页。在浏览器里光标移到超级链接的地键预览网页。在浏览器里光标移到超级链接的地 方就会变成手型。方就会变成手型。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 2.邮件地址的超级链接邮件地址的超级链接 在网页制作中，还经常看到这样的一些超级链接。单击在网页制作中，还经常看到这样的一些超级链接。单击 了这些超级链接后，会弹出邮件发送程序，联系人的地址也了这些超级链接后，会弹出邮件发送程序，联系人的地址也 己经填写好了。这也是一种超级链接。制作方法是：在编辑己经填写好了。这也是

21、一种超级链接。制作方法是：在编辑 状态下，先选定要链接的图片或文字，再插入栏或单击状态下，先选定要链接的图片或文字，再插入栏或单击“插插 入入”菜单选择菜单选择“电子邮件链接电子邮件链接”命令，弹出对话框，填入命令，弹出对话框，填入e- mail地址即可。地址即可。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.制作图片上的超级链接制作图片上的超级链接 (1)首先插入图片。首先插入图片。 (2)属性面板改换为热点面板。属性面板改换为热点面板。 (3)保存页面。保存页面。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 3.3.6

22、应用表格应用表格 1.插入并编辑表格插入并编辑表格 (1)插入表格。插入表格。 (2)选择单元格对象。选择单元格对象。 (3)设置表格属性。设置表格属性。 (4)单元格属性。单元格属性。 (5)表格的行和列。表格的行和列。 (6)拆分与合并单元格。拆分与合并单元格。 上一页 下一页 返回 3.3 用用dreamweaver 8制作网页制作网页 2.嵌套表格嵌套表格 表格之中还有表格即是嵌套表格。表格之中还有表格即是嵌套表格。 网页的排版有时会很复杂，首先，在外部需要一个表格网页的排版有时会很复杂，首先，在外部需要一个表格 来控制总体布局，如果内部排版的细节也通过总表格来实现，来控制总体布局，如

23、果内部排版的细节也通过总表格来实现， 容易引起行高列宽等的冲突，给表格的制作带来困难。其次，容易引起行高列宽等的冲突，给表格的制作带来困难。其次， 浏览器在解析网页的时候，是将整个网页的结构下载完毕之浏览器在解析网页的时候，是将整个网页的结构下载完毕之 后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要 等待很长时间才能看到网页内容。等待很长时间才能看到网页内容。 上一页 返回 3.4 网页制作高级功能网页制作高级功能 3.4.1插入和使用层插入和使用层 1.创建层创建层 (1)创建普通层创建普通层 1)插入层插入层 2)拖放层拖放层 3)

24、绘制层绘制层 (2)创建嵌套层创建嵌套层 下一页 返回 3.4 网页制作高级功能网页制作高级功能 2.设置层的属性设置层的属性 “层编号层编号”下拉列表框：给层命名，以便在下拉列表框：给层命名，以便在“层层”面板和面板和 javascript代码中标识该层。代码中标识该层。 “左、上左、上”文本框：指定层的左上角相对于页面文本框：指定层的左上角相对于页面(如果嵌套，如果嵌套， 则为父层则为父层)左上角的位置。左上角的位置。 “宽、高宽、高”文本框：指定层的宽度和高度。如果层的内容超文本框：指定层的宽度和高度。如果层的内容超 过指定大小，层的底边缘会延仲以容纳这些内容。过指定大小，层的底边缘会延

25、仲以容纳这些内容。 “z轴轴”文本框：设置层的层次属性。在浏览器中，编号较文本框：设置层的层次属性。在浏览器中，编号较 大的层出现在编号较小的层的前面。大的层出现在编号较小的层的前面。 “可见性可见性”下拉列表框：在下拉列表框：在“可见性可见性”下拉列表中，设置层下拉列表中，设置层 的可见性。的可见性。 上一页 下一页 返回 3.4 网页制作高级功能网页制作高级功能 3.4.2表单的使用表单的使用 1.关于表单关于表单 使用表单，可以帮助使用表单，可以帮助internet服务器从用户那单收集信服务器从用户那单收集信 息，是网站管理者与浏览者之间沟通的桥梁。通常应用表单息，是网站管理者与浏览者之

26、间沟通的桥梁。通常应用表单 的是调查表、订单和搜索界面等。例如收集用户资料、获取的是调查表、订单和搜索界面等。例如收集用户资料、获取 用户订单，在用户订单，在internet上也同样存在大量的表单，让用户上也同样存在大量的表单，让用户 输入文字进行选择。输入文字进行选择。 一个完整的表单包含两个部分：一个完整的表单包含两个部分： 一是在网页中进行描述的表单对象；一是在网页中进行描述的表单对象； 一是应用程序，它可以是服务器端的，也可以是客户端的，一是应用程序，它可以是服务器端的，也可以是客户端的， 用于对客户信息进行分析处理。用于对客户信息进行分析处理。 上一页 下一页 返回 3.4 网页制作

27、高级功能网页制作高级功能 2.认识表单对象认识表单对象 (1)表单：在文档中插入表单。任何其他表单对象，如文本表单：在文档中插入表单。任何其他表单对象，如文本 域、按钮等，都必须插入表单之中，这样所有浏览器才能准域、按钮等，都必须插入表单之中，这样所有浏览器才能准 确处理这些数据。确处理这些数据。 (2)文本域：在表单中插入文本域。文本域可接受任何类型文本域：在表单中插入文本域。文本域可接受任何类型 的字母数字项。输入的文本可以显示为单行、多行或者显示的字母数字项。输入的文本可以显示为单行、多行或者显示 为项目符号或星号为项目符号或星号(用于保护密码用于保护密码)。 (3)复选框：在表单中插入

28、复选框。复选框允许在一组选项复选框：在表单中插入复选框。复选框允许在一组选项 中选择多项，用户可以选择任意多个适用的选项。中选择多项，用户可以选择任意多个适用的选项。 上一页 下一页 返回 3.4 网页制作高级功能网页制作高级功能 (4)单选按钮：在表单中插入单选按钮。单选按钮代表互相单选按钮：在表单中插入单选按钮。单选按钮代表互相 排斥的选择。选择一组中的某个按钮，就会取消选择该组中排斥的选择。选择一组中的某个按钮，就会取消选择该组中 的所有其他按钮。例如，用户可以选择的所有其他按钮。例如，用户可以选择“是是”或或“否否”。 (5)单选按钮组：插入共亨同一名称的单选按钮的集合。单选按钮组：插

29、入共亨同一名称的单选按钮的集合。 (6)列表列表/菜单：使用户可以在列表中创建用户选项。菜单：使用户可以在列表中创建用户选项。“列表列表” 选项在滚动列表中显示选项值，并允许用户在列表中选择多选项在滚动列表中显示选项值，并允许用户在列表中选择多 个选项。个选项。“菜单菜单”选项在弹出式菜单中显示选项值，而且只选项在弹出式菜单中显示选项值，而且只 允许用户选择一个选项。允许用户选择一个选项。 上一页 下一页 返回 3.4 网页制作高级功能网页制作高级功能 (7)跳转菜单：插入可导航的列表或弹出式菜单。跳转菜单允跳转菜单：插入可导航的列表或弹出式菜单。跳转菜单允 许用户插入一种菜单，在这种菜单中的

30、每个选项都链接到文许用户插入一种菜单，在这种菜单中的每个选项都链接到文 档或文件。请参见创建跳转菜单。档或文件。请参见创建跳转菜单。 (8)图像域：使用户可以在表单中插入图像。可以使用图像域图像域：使用户可以在表单中插入图像。可以使用图像域 替换替换“提交提交”按钮，以牛成图形化按钮。按钮，以牛成图形化按钮。 (9)文件域：在文档中插入空白文本域和文件域：在文档中插入空白文本域和“浏览浏览”按钮。文件按钮。文件 域使用户可以浏览到其硬盘上的文件，并将这些文件作为表域使用户可以浏览到其硬盘上的文件，并将这些文件作为表 单数据上传。单数据上传。 上一页 下一页 返回 3.4 网页制作高级功能网页制

31、作高级功能 (10)按钮：在表单中插入文本按钮。按钮在单击时执行任务，按钮：在表单中插入文本按钮。按钮在单击时执行任务， 如提交或重置表单。可以为按钮添加自定义名称或标签，或如提交或重置表单。可以为按钮添加自定义名称或标签，或 者使用预定义的者使用预定义的“提交提交”或或“重置重置”标签之一。标签之一。 (11)标签：在文档中给表单加上标签，以标签：在文档中给表单加上标签，以， 形式开头和结尾。形式开头和结尾。 (12)字段集：在文本中设置文本标签。字段集：在文本中设置文本标签。 上一页 下一页 返回 3.4 网页制作高级功能网页制作高级功能 3.创建表单创建表单 (1)插入表单。插入表单。

32、(2)给表单添加对象。给表单添加对象。 (3)表单对象的属性设置。表单对象的属性设置。 4.表单的应用表单的应用 一个简单的提交留言页面。新建一网页文件，选择表单一个简单的提交留言页面。新建一网页文件，选择表单 插入栏，插入表单，将光标放置在表单内，插入一个插入栏，插入表单，将光标放置在表单内，插入一个5行行2列列 的表格，将第的表格，将第1， 5行合并。分别在第行合并。分别在第2， 3行插入文本字段，行插入文本字段， 在第在第4行插入文本区域，在第行插入文本区域，在第5行插入两个按钮。行插入两个按钮。 上一页 下一页 返回 3.4 网页制作高级功能网页制作高级功能 3.4.3行为行为 1.什么是行为什么是行为 “行为行为”可以创建网页动态效果，实现用户与页面的交可以创建网页动态效果，实现用户与页面