dreamweaver基础教程

《dreamweaver基础教程》由会员分享，可在线阅读，更多相关《dreamweaver基础教程（84页珍藏版）》请在金锄头文库上搜索。

1、第五章 可视化的网页制作工具,-Dreamweaver,Dreamweaver是美国著名的软件公司Macromedia推出的一个“所见即所得”的可视化网站开发工具。也是深受国内外专业Web开发人员喜欢的一款软件。本章重点介绍Dreamweaver MX的工作界面、站点管理、组织排版、制作网页、网页发布等功能。,5.1 Dreamweaver的工作界面,Dreamweaver MX的工作界面中包括了标题栏、菜单栏、插入栏、工具栏、“属性”面板、功能面板组、状态栏和文档窗口。与Fireworks和Flash的工作界面基本一致。用户可根据需要把这面板组合在一起或折叠起来，从而构造一个方便的工作环境。

2、,5.1 Dreamweaver的工作界面,1.标题栏 2.菜单栏 3.插入栏 4.工具栏,5.1 Dreamweaver的工作界面,5.1 Dreamweaver的工作界面,5.“属性”面板 6.文档窗口 7.面板组,5.2 Dreamweaver的站点管理,5.2.1 关于Web站点 Web站点是一组具有共同属性（如共同的主题、类似的设计或共同的目的）并相互链接的网页文档的集合。使用Dreamweaver当然可以设计单张的网页，但由于网页一般都要通过超级链接互相进行关联，一些具有共同属性的网页，相互链接在一起，就构成了一个Web站点。如一个小公司的Web站点，往往由公司首页、公司概况、产品

3、介绍、联系方式等网页文档互相链接构成。,5.2 Dreamweaver的站点管理,5.2.1 关于Web站点 站点也是网页文档的在本地磁盘的组织形式，它同样是由文档和文档所在的文件夹组成的。建立站点的第一步就是要在本地硬盘上进行规划，创建一个文件夹（例如在D:盘上建立一个mysite的文件夹）作为保存一个站点所有文档的文件夹，然后再分门别类地创建子文件夹来分别存放不同类别的文档。,5.2 Dreamweaver的站点管理,5.2.1 关于Web站点 只有设置和规划好本地站点的结构，以后网站的维护、更新才能轻松地进行。设置站点就是在本地磁盘上创建一个包含站点所有文件的文件夹（也被称为本地站点），

4、然后在该文件夹中创建和编辑文档。一旦用户创建了站点结构，就必须在Dreamweaver中指定新的站点，当在Dreamweaver中建立了本地站点并设置好FTP后，就可以将站点上传到Web服务器上，并能够自动跟踪和维护链接、相互共享文件了。,5.2 Dreamweaver的站点管理,5.2.2在Dreamweaver中创建一个站点 5.2.3管理本地站点 1.向站点中添加内容 （1）添加文件夹 （2）添加主页 （3）添加普通网页,5.2 Dreamweaver的站点管理,5.2.3管理本地站点 2.管理本地站点 （1）打开站点 （2）编辑站点 （3）打开和删除网页文件,5.2 Dreamweav

5、er的站点管理,5.2.4上传和更新Web站点 1.设置远程站点属性,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 1.设置远程站点属性,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 2.连接和上传文件到远程站点 设置好远程站点的属性后，就可以连接到远程站点了。打开站点面板，切换到远程视图，通过站点工具栏，如图5.15所示，可以方便地完成连接、上传、下载文件等工作。,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 2.连接和上传文件到远程站点,5.3 处理基本网页元素,当本地站点创建完成，在站点中建立的一个个网页

6、文件还是空文档。需要在网页中插入文字、图片以及其他的多媒体对象，如动画、影像、连接到其他文件的链接以及声音，才能成为真正的网页，这个过程就是网页设计。这一切操作主要在文档窗口完成，Dreamweaver MX会自动在文件中加入相应的HTML和其他脚本程序代码。,5.3 处理基本网页元素,5.3.1页面基本属性的设定 设置页面基本属性是网页设计的第一步工作。网页的基本属性包括页面标题、背景图像和颜色、文本和链接颜色，还包括在“文件头”选项卡中定义的信息等内容。这些信息对于用户了解了解网页的基本内容、搜索查找网页都起着非常重要的作用。,5.3 处理基本网页元素,5.3.1页面基本属性的设定 1.设

7、置页面属性,5.3 处理基本网页元素,5.3.1页面基本属性的设定 1.设置页面属性,5.3 处理基本网页元素,5.3.1页面基本属性的设定 2.设置文档头部元素,5.3 处理基本网页元素,5.3.2文本处理 1.插入普通文本 2.插入特殊字符 3.插入日期 4.插入水平线,5.3 处理基本网页元素,5.定义文本格式 在一般情况下，插入的文本都是使用默认格式，网页中的文字显得呆板而不美观，因此，需要根据情况对网页中的文本的格式进行设定，这项工作相当于文字处理软件中的格式化文本的过程。文本的格式包括字符属性的设定和段落属性的设定等内容。 (1）设置字符属性 设定字体 示例 属性：size=“”;

8、color=“”;face=“” Face属性给出了一个用逗号分隔的字体样式列表。 设置文本的大小 Size的值是17级，默认是3级，可以在当前级的基础上增大或减小。 设置文本的颜色 设置文本样式 示例 文本样式是指文本的显示方式，如加粗、倾斜、下划线等 加粗 斜体、 下划线 删除线 下标 上标,5.3 处理基本网页元素,5.定义文本格式 （2）设置段落属性 应用段落和标题格式 设置对齐方式 设置段落缩进,5.3 处理基本网页元素,5.定义文本格式 （2）设置段落属性 使用文本列表 符号列表是各项目左边无编号，而是以特殊的符号表示。,5.3 处理基本网页元素,5.定义文本格式 （2）设置段落属

9、性 使用文本列表 标号列表就是各项目左边加上数字符号或其他有序的标号.,5.3 处理基本网页元素,5.3.3图像处理 1.插入图像 2.设置图像的属性,5.3 处理基本网页元素,5.3.4超级链接 1.创建文档链接 2.创建命名锚记链接 （1）创建命名锚记 （2）创建命名锚记链接 3.创建电子邮件链接 4.创建脚本链接 javascript:window.history.back() javascript:window.scroll(0,0),5.3 处理基本网页元素,5.3.4超级链接 5.创建空链接 空链接是指没有目标端点的链接，利用空链接，可以激活文档中链接对应的对象或文本，从而为对象或

10、文本添加一个行为。创建空链接的操作步骤如下： （1）选择需要创建空链接的文字或图片。 （2）在“属性”面板的“链接”后的文本框内输入一个“#”号。 6.创建图像地图链接 图像地图指一个图像被分割为多个链接区域（或称热点），当用户单击某个链接区域时会打开链接目标。使用图像属性面板可以通过图形方式创建或编辑图像地图链接。,5.3 处理基本网页元素,5.3.5 表格 在网页设计中，人们经常感到许多网页元素，如文字、图像等的位置难以控制。而在网页设计中，最好也是最具有兼容性的方法就是使用表格。表格是Web站点中经常使用的一种简洁有序信息的方式。在网页中合理地使用表格，能够快速便捷地处理批量数据，使网页

11、不论是在版式方面，还是在文本、图像方面，都能够呈现更好的视觉效果。,5.3 处理基本网页元素,5.3.5 表格 在网页设计中，人们经常感到许多网页元素，如文字、图像等的位置难以控制。而在网页设计中，最好也是最具有兼容性的方法就是使用表格。表格是Web站点中经常使用的一种简洁有序信息的方式。在网页中合理地使用表格，能够快速便捷地处理批量数据，使网页不论是在版式方面，还是在文本、图像方面，都能够呈现更好的视觉效果。,5.3 处理基本网页元素,5.3.5 表格 （1）布局视图 为了简化使用表格进行排版的过程，Dreamweaver MX提供了布局视图。在布局视图中，用户可以使用表格作为基础结构来设计

12、网页，避免了使用传统的方法创建基于表格的页面布局经常出现的一些难题。在布局视图中，用户可以在页面上方便地绘制布局单元格，然后将这些单元格移动到所需的位置。 （2）表格和布局表格,5.3 处理基本网页元素,5.3.5 表格 2.创建表格 （1）创建普通表格 （2）创建布局表格 3.编辑表格 （1）选择表格,5.3 处理基本网页元素,5.3.5 表格 3.编辑表格 （2）设置单元格属性 （3）拆分与合并单元格 （4）删除行或列,5.3 处理基本网页元素,5.3.6使用CSS样式 1.Dreamweaver MX中的“CSS样式”面板 2.创建和链接外部CSS样式 （1）创建CSS样式 （2）链接外

13、部CSS样式 3.管理CSS样式表 （1）应用CSS样式 （2）管理CSS样式,5.3 处理基本网页元素,5.3.7 插入其他多媒体对象 1.在网页中加入音频 （1）链接到音频文件 （2）在网页加入背景音乐 （3）在网页中嵌入音频文件 2.在网页中插入Flash动画,5.3 处理基本网页元素,5.3.7 插入其他多媒体对象 3.在网页中插入视频文件 （1）在网页中插入普通视频文件 （2）在网页中嵌入视频文件 （3）在网页中嵌入Real视频文件,5.4 Dreamweaver高级应用,5.4.1 表单 在制作动态网页的过程中，网站的设计者需要了解网络的访问者的一些情况，HTML提供了表单作为网站

14、与访问者之间交流信息的主要工具。 表单工作的基本过程如下： （1）访问者在浏览有表单的网页时，可填写必须的信息，然后按某个按钮提交信息。 （2）这些信息通过Internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 （4）当数据完整无误后，服务器反馈一个输入完成的信息。 从这个工作过程可以看出，表单的开发可以分成两个部分：一是在网页上制作必须的表单项目，这一部分称为前端，主要在Dreamweaver或其他的网页制作软件中完成；另一部分是编制如何处理访问者填入的信息的程序，这一部分称为后端，主要是用网络解释或编译程序（如ASP、PHP

15、、JSP等）制作。,5.4 Dreamweaver高级应用,5.4.1 表单 1.创建表单 对于访问者来说，大多在网上看到的是表单对象，如文本框、下拉菜单、单选框等。实际上，表单中还包括了一些访问者看不到的内容。一个表单基本包括以下几个部分： （1）表单标签：包含了处理表单数据所用的服务器端程序的URL以及数据提交到服务器的方法。 （2）表单域：包含了文本框、菜单、复选框和单选框等元素。 （3）提交按钮：提交按钮是一个特殊的表单域。单击提交按钮后，数据将被传送到服务器上，由服务器程序处理。,5.4 Dreamweaver高级应用,5.4.1 表单 2.添加表单对象 表单中用于输入信息的元素称为

16、表单对象。插入表单后，必须往表单中添加相应的表单对象。插入表单对象可以通过插入栏中的“表单”选项卡进行，也可通过菜单栏中的“插入”|“表单对象”下的子菜单命令来完成。,5.4 Dreamweaver高级应用,5.4.1 表单 3.设置表单对象属性 在表单中插入各种表单对象后，都应该根据具体的需要设置表单对象的属性。 （1）设置文本对象属性 （2）设置文件框对象属性 （3）设置隐藏域对象属性 （4）设置选择框对象属性 （5）设置菜单对象属性 （6）设置表单按钮属性,5.4 Dreamweaver高级应用,5.4.2 框架 框架主要用于将网页分割为多个HTML页面进行显示，即将一个浏览器窗口划分为多个区域，每个区域可以显示不同的文档。在Dreamweaver MX中，可以方便地创建框架集和框架。 框架实际上由两部分组成，即框架与框架集。框架集实际是一个页面，用于定义文档中框架的结构、数量、尺寸及装入框架的页面文件。框架集文件本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框