1、- 1 -Dreamweaver 培训教程前言随着互联网(Internet) 的家喻户晓， HTML 技术的不断发展和完善，随之而产生了众多网页编辑器。从网页编辑器基本性质上可以分为所见即所得网页编辑器和非所见即所得网页编辑器（即源代码编辑器） ，两者各有千秋。所见即所得网页编辑器的优点就是直观、使用方便、容易上手，在所见即所得网页编辑器中进行网页制作和在 Word 中进行文本编辑不会感到有什么区别，但它同时也存在难以精确达到与浏览器完全一致的显示效果的缺点。也就是说在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构
2、及精确定位）中便可体现出来。非所见即所得的网页编辑器，就不存在这个问题，因为所有的 HTML 代码都在用户的监控下产生，但是，非所见即所得编辑器的先天条件注定了它的工作效率太低。如何实现两者的完美结合，既能产生干净、准确的 HTML 代码，又具备所见即所得的高效率、直观性，这一直是网页设计师的梦想。Dreamweaver 基本上解决了以上的问题，是一个非常优秀的所见即所得网页编辑器。Dreamweaver 可以满足 Web 开发人员的各种需要。使用 Dreamweaver，在大大提高网页设计人员的生产效率的同时，还可以保持对源代码的完全控制。对于网页设计的新手，也可以快速提高他们的工作效率，因
3、为使用 Dreamweaver，可以轻松地可视化编辑加入网页的相关对象。Dreamweaver 这门课是我们软工学院 5.0 版本课程体系的新增课程之一。本门课主要是通过 Dreamweaver 来有效学习 html 标记语言、css 样式、 div 层等网页前台制作的相关知识和技能，并且能够在学习的最后阶段手写代码，并使学生在学习中提高思维能力，这是软件工程专业中的一门基础课程之一。而本书内容丰富、条理清楚、通俗易懂、即学即会。内容安排由浅入深，由易到难，包含丰富的实例。读者只要按照实例，边阅读边上机实践，再加上能够举一反三地灵活运用，即可做到理论与实践相结合，定能设置出页面美观、功能强大的
4、网页。希望我们软工学院的学员们通过对本书的学习和实际操作，都能对前台页面有很好的掌握。最后，衷心感谢在教材编写过程中帮助过我的所有同事，特别是黄理斯、胡长浩两位老师；还要感谢给予我支持的男朋友刘佳。在本书编写过程中，惟恐疏漏，已经尽量努力，但是由于本人水平有限，疏漏之处在所难免，希望广大读者批评、指正。- 2 -目录第 1 章 DREAMWEAVER 介绍 .31.1 DREAMWEAVER 新增功能简介 .31.2 DREAMWEAVER 的工作环境 .41.3 常用工具栏 .71.4 标尺和网格 .91.5 快捷键 .101.6 建立站点 .141.7 创建页面 .16第 2 章 页面制作
5、 .182.1 引例 .182.2 超链接 .212.3 滚动字幕 .252.4 列表 .302.4.1 有序列表 .302.4.2 无序列表 .362.4.3 定义列表 .402.5 表 格 .412.6 创建导航条 .472.7 表单 .492.8 框 架 .52第 3 章 CSS .563.1 什么是 CSS .563.2 引入 CSS .573.3 CSS 结构和规则 .593.4 CSS 属性 .603.4.1 字体属性 .603.4.2 颜色及背景属性 .643.4.3 文本属性 .663.4.4 方框属性 .673.4.5 单位 .733.4.6 区块 .753.4.7 列表 .
6、76- 3 -第 1 章 Dreamweaver 介绍1.1 Dreamweaver 新增功能简介Dreamweaver 是 Macromedia 公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的 DHTML 和 CSS 标准。采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。值得称道的是，Dreamweaver 不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。在学习使用 Dreamweaver 之前，我们先了解 Dreamweaver 的一些新增功能。1独特的
7、往返 HTML 功能这个功能可以同步访问设计视图（Design View）和 HTML 源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的 HTML 标记或第三方标记。这就使得Dreamweaver 自动生成的代码与手工输入的代码融为一体。2整合文本编辑器现在 Dreamweaver 增加了以代码为中心的新特性。手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。可以在使用代码视图工具栏（Code View Toolbar）的下拉列表定义的 JavaScript 函数之间轻松导航。对于使用JavaScript 编程的专业人员来说，这种代码导航无疑是一种
8、高效的导航帮助。输入代码时Dreamweaver 自动对 HTML 和 JavaScript 代码使用不同的颜色显示。3把主窗口分割为代码视图和设计试图可以把 Dreamweaver 的主窗口分割为代码视图和设计试图。能够查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同时查看代码视图和设计视图，同时编辑多个文档的代码。4JavaScript 调试器使用新增的 JavaScript 调试器，可以直接在浏览器中调试客户端 JavaScript 脚本，观察JavaScript 的执行，就像它在 Netscape 或 IE 浏览器中一样，因而能够更好地了解每种浏览器是怎样执行 JavaScr
9、ipt 的。可以设置断点调试代码，然后在逐步执行代码的过程中观察变量的变化，及时发现编程错误。5编辑非 HTML 文档- 4 -可以把 Dreamweaver 当作文本编辑器编辑非 HTML 文档，直接在代码视图（Code View）中编辑 JavaScript，XML 和其他文本文件。1.2 Dreamweaver 的工作环境Dreamweaver 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。启动 Dreamweaver 时，会出现一个工作区设置对话框（如下图）：您可以从中选择一
10、种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑“首选参数”对话框如下图：- 5 - 6 -“插入”栏（如下图）：包含用于将各种类型的“ 对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“ 插入” 栏中的 “表格”按钮插入一个表格。也可以不使用“ 插入”栏而使用“插入”菜单插入对象。“文档”窗口 显示您当前创建和编辑的文档。 “属性检查器” （如下图）： 用于查看和更改所选对象或文本的各种属性。“面板组”（如下图） 是
11、分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。“文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。 “文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。- 7 -Dreamweaver 提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。1.3 常用工具栏“插入”栏 “插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提
12、示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“ 图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。“插入”栏有以下几个类别：“常用”：使您可以创建和插入最常用的对象，例如图像和表格。 “布局”：使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准” （默认） 、 “扩展表格 ”和“布局”。当选择“ 布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制
13、布局单元格”和“绘制布局表格”。 “表单”：包含用于创建表单和插入表单元素的按钮。 - 8 -“文本”：使您可以插入各种文本格式设置标签和列表格式设置标签。“HTML”：使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “应用程序”：使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“Flash 元素”：使您可以插入 Flash 元素。“收藏”：使您可以将“ 插入”栏中最常用的按钮分组和组织到某一常用位置。文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、 “设计”视图、同时显示“ 代码 ”和“设计”视图的拆分视图。
14、 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。以下对图中的指引进行说明：代码视图： 仅在“文档” 窗口中显示“ 代码”视图。 设计视图： 仅在“文档” 窗口中显示“ 设计”视图。拆分视图： 在“文档” 窗口同时显示“ 代码”视图和“设计”视图。标 题 ： 可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。没有浏览器/检查错误： 使您可以检查跨浏览器兼容性。在浏览器中预览/调试： 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理： 显示“文件管理”弹出菜单。刷 新 ： 当您在“代码” 视图中进行更改后刷新文档的“设计”视图。视图选项： 允许
15、您为“代码”视图和“ 设计”视图设置选项。 状态栏状态栏提供与您正创建的文档有关的其它信息。- 9 -标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。窗口大小 弹出菜单（仅在“设计” 视图中可见）用来将“文档” 窗口的大小调整到预定义或自定义的尺寸。“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。1.4 标尺和网格在网页排版的过程中，如果希望对元素精确定位，则标尺和网格是非常有用的工具。1显示标尺在文档窗口中，默认状态下不显示标尺，如果需要显示标尺，以便排版，可使用以下方法：在文档窗口中，选择“
16、视图选项”命令，选中“标尺” 。如图：2显示网格在文档窗口中，默认状态下不显示网格，如果需要显示网格，以便精确布局，可使用以下方法。在文档窗口中，选择“视图选项”命令，选中“标尺” ，则在文档窗口中显示网格。显示网格之后的文档窗口如图所示：- 10 -1.5 快捷键在运用 Dreamweaver 的过程中，熟练的使用快捷键，能达到事半功倍的效果，而且是“高手”的体现在这里我把 Dreamweaver 的快捷方式整理出来，希望对学员熟练掌握Dreamweaver 有所帮助。文件菜单 新建文档 Ctrl+N 打开文件 Ctrl+O 或者将文件从 文件管理器或 站点 窗口拖动到文档窗口中 在框架中打开 Ctrl+Shift+O 关闭 Ctrl+W 保存 Ctrl+S 另存为 Ctrl+Shift+S 检查链接 Shift + F8 退出 Ctrl+Q 编辑菜单 撤消 Ctrl+Z 重复 Ctrl+Y 或 Ctrl+Shift+Z 剪切 Ctrl+X 或 Shift+Del 拷贝 Ctrl+C 或 Ctrl+Ins
