作者：赵增敏,陈祥,等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Dreamweaver CS5网页设计教程试读：
前言
。赵增敏 主编陈祥 主编郑宝昆 主编吴洁 副主编姜红梅 副主编卢捷 副主编彭辉 副主编郝黎明 责任编辑施玉新 其他贡献者前言Dreamweaver CS5是美国Adobe公司开发的一款专业的网页设计与制作软件，可以用于设计、开发和维护基于标准的网站和Web应用程序。它提供了众多功能强大的可视化工具和预建模板，也提供了对领先技术和框架的智能编码协助和支持。通过使用Dreamweaver CS5软件，设计人员和开发人员既能以可视方式设计页面，也能高效地编写代码，可以充满自信地构建基于标准的网站。
本书共分为10章。第1章介绍使用Dreamweaver CS5所需要的一些基础知识，主要包括认识Dreamweaver CS5工作区、设置Dreamweaver站点以及创建和管理站点文件等；第2章介绍如何在页面中添加内容，首先讲述HTML语言基础，然后讨论如何在页面中添加文本并设置文本格式，最后介绍如何使用表格来显示内容；第3章介绍图像和各种媒体在网页设计中的应用，首先讲述如何添加图像并设置其格式，然后讨论如何在页面中添加各种媒体元素；第4章首先介绍如何为网页添加链接功能，然后讨论如何通过框架来实现页面布局；第5章首先介绍如何创建和应用CSS样式表，然后分门别类地讲解各种CSS样式属性的应用；第6章讨论如何使用CSS+DIV来进行网页排版，首先介绍div标签与AP元素在网页设计中的应用，然后讲解如何结合CSS样式表和div布局块来创建各种常用的页面布局；第7章首先介绍JavaScript基础知识，然后讲述如何在网页中添加JavaScript行为，最后讨论Dreamweaver提供的一些JavaScript行为的应用；第8章Spry框架在网页设计中的应用，首先讲述如何在页面上添加Spry效果，然后讨论如何在页面上创建Spry Widget；第9章讲述如何创建表单并对表单数据进行验证，主要内容包括创建HTML表单、添加表单对象以及Spry表单验证；第10章讨论如何使用Dreamweaver CS5进行ASP动态网页设计，主要内容包括配置ASP运行环境、VBScript基础、ASP内置对象以及ADO数据访问等。
在编写过程中，作者力求使本书体现以下特色。
1.结构合理、内容翔实。本书详细介绍了Dreamweaver CS5在网页设计中的应用，不仅介绍静态网页设计，也讲述ASP动态网页制作，还介绍用可视化方式快速生成Spry页面。
2.实例丰富、步骤清晰。本书通过大量的实战演练来讲述网页制作的过程和相应的知识点。对于每个实例，都给出了详细的操作步骤，并且配有相应的效果图。
3.将手工编码与可视化操作相结合。本书在介绍Dreamweaver网页设计时以可视化操作为主，同时结合手写编码，这样不仅可以提高工作效率，也可以对网页外观及程序逻辑进行精细的控制。
4.内容新颖、技术先进。除了讲述传统网页设计方面的内容外，本书还介绍了当今流行的CSS+DIV页面布局技术以及Spry框架在网页设计中的的应用，具有很强的实用性。
本书由赵增敏、陈祥、郑宝昆担任主编，吴洁、姜红梅、卢捷、彭辉担任副主编。参加本书编写、代码测试和文字录入的还有赵玉霞、郭宏等，在此一并致谢。
由于作者水平所限，书中疏漏和错误之处在所难免，欢迎广大读者提出宝贵意见。
为了方便教师教学，本书还配有教学指南、电子教案、习题答案以及网页源文件（电子版）。请有此需要的教师登录华信教育网（www.huaxin.edu.cn或www.hxedu.com.cn）免费注册后进行下载，有问题时请在网站留言板留言或与电子工业出版社联系（E-mail：hxedu＠phei.com.cn）。
编者
2013年8月第1章 Dreamweaver CS5使用基础
Dreamweaver CS5是美国Adobe公司推出的一款专业的网页设计与制作软件，可以用于设计、开发和维护基于标准的网站和Web应用程序。Dreamweaver CS5提供了众多功能强大的可视化工具和预建模板，也提供了对领先技术和框架的智能编码协助和支持。通过使用Dreamweaver CS5软件，设计人员和开发人员既能以可视方式设计页面，也能高效地编写代码，可以充满自信地构建基于标准的网站。在本章中将介绍使用Dreamweaver CS5所需要的一些基础知识，主要包括认识Dreamweaver CS5工作区、设置Dreamweaver站点以及创建和管理站点文件等。1.1 认识Dreamweaver CS5工作区“工欲善其事，必先利其器”。要想使用Dreamweaver CS5来设计网页和管理网站，首先需要了解这个软件的工作区布局，并熟悉它所提供的各种工具。1.1.1 启动Dreamweaver CS5
在Windows操作系统中，要启动Dreamweaver CS5，可执行“开始”→“所有程序”→“Adobe Dreamweaver CS5”，如图1.1所示。
在Windows 7中，为了便于快速启动Dreamweaver CS5，可以考虑在“开始”菜单或任务栏中为这个软件添加一个快捷方式，操作方法如下。
● 若要在“开始”菜单中为Dreamweaver CS5创建一个快捷方式，可执行“开始”→“所有程序”，右键单击“Adobe Dreamweaver CS5”，然后执行“附到‘开始’菜单”命令。
● 若要在任务栏上添加Dreamweaver CS5的快捷方式，可执行“开始”→“所有程序”，右键单击“Adobe Dreamweaver CS5”，然后单击“锁定到任务栏”。图1.1 启动Dreamweaver CS51.1.2 工作区布局概述
启动Dreamweaver CS5之后，便可看到其工作区布局效果，如图1.2所示。图1.2 Dreamweaver CS5工作区布局
Dreamweaver CS5提供了一个集成布局，可将全部元素置于一个窗口内。在这个集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。在Dreamweaver中，可通过工作区查看文档和对象属性，也可以使用各种工具栏快速更改文档。
工作区中主要包括以下元素。（1）欢迎屏幕：用于打开最近使用过的文档或创建新文档，还可以通过产品介绍或教程了解关于Dreamweaver的更多信息，如图1.3所示。图1.3 欢迎屏幕（2）应用程序栏：位于应用程序窗口顶部，其中包含一个工作区切换器、几个菜单以及其他应用程序控件。（3）文档工具栏：包含一些按钮，它们提供各种文档窗口视图（如“设计”视图、“代码”视图和“拆分”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。（4）标准工具栏：包含一些按钮，可用于执行“文件”和“编辑”菜单中的常见操作，例如“新建”、“打开”、“在Bridge中浏览”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”。在默认工作区布局中，是不显示标准工具栏的。若要显示标准工具栏，可执行“查看”→“工具栏”→“标准”命令。（5）编码工具栏：仅在代码视图中显示，包含可用于执行多项标准编码操作的按钮。（6）样式呈现工具栏：包含一些按钮，如果使用依赖于媒体的样式表，则可使用这些按钮查看页面设计在不同媒体类型中的呈现效果。它还包含一个允许启用或禁用层叠式样式表（CSS）样式的按钮。样式呈现工具栏默认为隐藏状态。若要显示样式呈现工具栏，可选择“查看”→“工具栏”→“样式呈现”。（7）文档窗口：显示当前创建和编辑的文档。（8）属性检查器：用于查看和更改所选对象或文本的各种属性。不同对象具有不同的属性。在“编码器”工作区布局中，属性检查器默认是不展开的。（9）标签选择器：位于文档窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。（10）面板组：帮助设计者监控和修改文档。例如，插入面板、CSS样式面板和文件面板等。若要展开某个面板，可双击其选项卡。下面对两个常用的面板加以介绍。
● 插入面板：包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。每个对象实际上都是一段HTML代码，可在插入它时设置不同的属性。例如，可以在插入面板中单击“表格”按钮，以插入一个表格。也可以不使用插入面板，而使用“插入”菜单来插入对象。
● 文件面板：用于管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。文件面板还可用于访问本地磁盘上的全部文件，非常类似于Windows资源管理器。
注意：Dreamweaver另外还提供了许多面板、检查器和窗口。若要打开某个面板、检查器和窗口，可使用“窗口”菜单中的相应命令。1.1.3 文档窗口
文档窗口用于显示当前文档。在使用文档窗口时，根据设计需要可选择下列视图。（1）设计视图：这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。若要切换到设计视图，可选择“查看”→“设计”，或者在文档工具栏中单击“显示设计视图”按钮（2）代码视图：这是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如ASP、PHP或JSP）以及任何其他类型代码的手工编码环境。若要切换到代码视图，可选择“查看”→“代码”，或者在文档工具栏中单击“显示代码视图”按钮（3）拆分代码视图：这是代码视图的一种拆分版本，可以通过滚动以同时对文档的不同部分进行操作。拆分代码视图将文档拆分为两部分，以便同时对代码的这两部分进行操作。若要切换到代码拆分视图，可选择“查看”→“拆分代码”。（4）代码和设计视图：可在一个窗口中同时看到同一文档的代码视图和设计视图。若要显示代码视图和设计视图，可执行“查看”→“代码和设计”命令，或者在文档工具栏中单击“显示代码视图和设计视图”按钮。（5）实时视图：与设计视图类似，但实时视图更逼真地显示文档在浏览器中的表示形式，并能够像在浏览器中那样与文档交互。实时视图不可编辑。不过，可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。若要切换到实时视图，可执行“查看”→“实时视图”命令，或者在文档工具栏中单击“将设计视图切换到实时视图”按钮（6）实时代码视图：仅当在实时视图中查看文档时可用。实时代码视图显示浏览器用于执行该页面的实际代码，当在实时视图中与该页面进行交互时，它可以动态变化。实时代码视图不可编辑。若要切换到实时代码视图，可执行“查看”→“实时代码”命令，或者在文档工具栏中单击“在代码视图中显示实时视图源”按钮
当文档窗口处于最大化状态（默认值）时，文档窗口顶部会显示选项卡，上面显示了所有打开文档的文件名。如果尚未保存已做的更改，则Dreamweaver会在文件名后显示一个星号（*）。若要切换到某个文档，单击它的选项卡即可。
Dreamweaver还会在文档的选项卡下显示相关文件工具栏，如图1.4所示。如果在单独窗口中查看文档，则相关文件工具栏将显示在文档标题栏下。相关文档是指与当前文件关联的文档，例如CSS文件或JavaScript文件。若要在文档窗口中打开这些相关文件之一，可在相关文件工具栏中单击其文件名。图1.4 相关文件工具栏
在文档窗口中工作时，经常要在文档窗口中的不同视图之间切换。在文档窗口中，可以通过代码视图、拆分视图、设计视图、实时视图和实时代码视图来查看文档，还可以选择水平或垂直拆分代码视图或代码和设计视图（默认是水平显示）。
默认情况下，当选择代码和设计视图（拆分视图）时，代码视图将显示在文档窗口的顶部，设计视图则显示在底部。若要使设计视图显示在顶部，可执行“查看”→“顶部的设计视图”命令。
使用拆分代码视图和代码和设计视图（拆分视图）时，可以沿不同方向来放置两个视图，操作方法如下。（1）确保处于拆分代码视图或代码和设计视图。（2）执行“查看”→“垂直拆分”命令。若此命令处在选中状态，则左右放置两个视图；若此命令处在取消状态，则上下放置两个视图。（3）如果处于代码和设计视图中，则可以执行“查看”→“左侧的设计视图”命令，以便在左侧显示设计视图。
如果一次打开了多个文档，则可以采用层叠方式或平铺方式放置这些文档。
● 若要以层叠方式放置文档窗口，可执行“窗口”→“层叠”命令。
● 若要以平铺方式放置文档窗口，可执行“窗口”→“水平平铺”命令，或者执行“窗口”→“垂直平铺”命令。1.1.4 工具栏
为了快速访问常用操作命令，Dreamweaver CS5提供了多个工具栏，包括文档工具栏、标签工具栏、样式呈现工具栏、浏览器导航工具栏以及编码工具栏。
1.文档工具栏
文档工具栏如图1.5所示，使用此工具栏包含的按钮可在文档的不同视图之间快速切换。图1.5 文档工具栏
工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。文档工具栏中包含以下选项。（1）显示代码视图：只在文档窗口中显示代码视图。（2）显示代码视图和设计视图：将文档窗口拆分为代码视图和设计视图。（3）显示设计视图：只在文档窗口中显示设计视图。如果处理的是XML、JavaScript、Java、CSS或其他基于代码的文件类型，则不能在设计视图中查看文件，而且“设计”和“拆分”按钮将会变暗。（4）实时代码视图：显示浏览器用于执行该页面的实际代码。（5）检查浏览器兼容性：检查CSS是否对于各种浏览器均兼容。（6）实时视图：显示不可编辑的、交互式的、基于浏览器的文档视图。（7）CSS检查模式，打开CSS检查模式，验证当前文档或选定的标签。（8）在浏览器中预览/调试：用于在浏览器中预览或调试文档，可从弹出菜单中选择所需的浏览器。（9）可视化助理：可以使用各种可视化助理来设计页面。（10）刷新设计视图：在代码视图中对文档进行更改后刷新文档的设计视图，快捷键为F5。在执行某些操作（如保存文件或单击该按钮）后，在代码视图中所做的更改才会自动显示在设计视图中。（11）文档标题：用于为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。（12）文件管理：显示“文件管理”弹出菜单。
2.标准工具栏
标准工具栏如图1.6所示。此工具栏包含一些按钮，可用来执行“文件”和“编辑”菜单中的常见操作：“新建”、“打开”、“在Bridge中浏览”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤销”以及“重做”。可以像使用等效的菜单命令一样来使用这些按钮。图1.6 标准工具栏
默认情况下，是不显示标准工具栏的。若要显示标准工具栏，可选择“查看”→“工具栏”→“标准”。
3.样式呈现工具栏
默认情况下，Dreamweaver CS5会显示屏幕媒体类型的设计，该类型显示页面在计算机屏幕上的呈现方式。若要查看各种媒体类型的呈现方式，可以在样式呈现工具栏中单击相应的按钮，如图1.7所示。图1.7 样式呈现工具栏
样式呈现工具栏包含一些按钮，如果使用依赖于媒体的样式表，则可使用这些按钮查看设计在不同媒体类型中的呈现方式。它还包含一个允许启用或禁用CSS样式的按钮。样式呈现工具栏默认情况下不显示。若要显示该工具栏，可选择“查看”→“工具栏”→“样式呈现”。只有在文档使用依赖于媒体的样式表时，此工具栏才有用。例如，样式表可能会为打印媒体指定某种正文规则，而为手持设备指定另一种正文规则。（1）呈现屏幕媒体类型：显示页面在计算机屏幕上的显示方式。（2）呈现打印媒体类型：显示页面在打印纸张上的显示方式。（3）呈现手持型媒体类型：显示页面在手持设备（如手机）上的显示方式。（4）呈现投影媒体类型：显示页面在投影设备上的显示方式。（5）呈现TTY媒体类型：显示页面在电传打字机上的显示方式。（6）呈现TV媒体类型：显示页面在电视屏幕上的显示方式。（7）切换CSS样式的显示：用于启用或禁用CSS样式。此按钮可独立于其他媒体按钮之外工作。（8）设计时样式表：可用于指定设计时样式表。（9）显示伪类的样式：可用于显示：link、：visited、：hover、：active和：focus伪类的样式。
4.浏览器导航工具栏
浏览器导航工具栏如图1.8所示。此工具栏可在实时视图中激活，用于显示正在文档窗口中查看的页面的地址。从Dreamweaver CS5起，实时视图的作用类似于一个常规的浏览器，即使浏览到本地站点以外的站点（例如http：//www.phei.com.cn），Dreamweaver也将在文档窗口中加载该页面。图1.8 浏览器导航工具栏
默认情况下，不激活实时视图中的链接。在不激活链接的情况下，可选择或单击文档窗口中的链接文本而不进入另一个页面。
若要在实时视图中测试链接，可以通过从地址框右侧的“视图选项”菜单中选择“跟踪链接”或“持续跟踪链接”，以启用一次性单击或连续单击。
5.编码工具栏
编码工具栏如图1.9所示。此工具栏包含可用于执行多种标准编码操作的按钮，例如折叠和展开所选代码、高亮显示无效代码、应用和删除注释、缩进代码、插入最近使用过的代码片断等等。编码工具栏垂直显示在文档窗口的左侧，仅当显示代码视图时才可见。
不能取消停靠或移动编码工具栏，但可以将此工具栏隐藏起来，操作方法是执行“视图”→“工具栏”→“编码”命令。还可以通过编辑编码工具栏，来显示更多按钮（例如“自动换行”、“隐藏字符”和“自动缩进”），或者隐藏不想使用的按钮。
6.状态栏图1.9 编码工具栏
除了上述工具栏之外，在文档窗口底部还有一个状态栏，它用来提供与正在处理的文档有关的其他信息，如图1.10所示。图1.10 状态栏（1）标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 在Dreamweaver CS5工作区中有一些检查器和面板，使用它们可以完成各种常见任务，例如创建和管理文件、插入对象并设置其属性。 1.文件面板 文件面板如图1.11所示，此面板可用于查看和管理Dreamweaver站点中的文件。 当在文件面板中查看站点、文件或文件夹时，可以更改查看区域的大小，还可以展开或折叠文件面板。当折叠文件面板时，它以文件列表的形式显示本地站点、远程站点或测试服务器的内容。在展开时，它会显示本地站点、远程站点或测试服务器中的一个。图1.11 文件面板 对于Dreamweaver站点，还可以通过更改折叠面板中默认显示的视图（本地站点视图或远程站点视图）来对文件面板进行自定义。 2.插入面板 插入面板如图1.12所示。此面板包含的按钮可用于创建和插入对象，例如表格、图像、链接以及表单等。这些按钮按几个类别进行组织，可以通过从“类别”弹出菜单中选择所需类别来进行切换，如图1.13所示。如果当前文档包含服务器代码，还会显示其他类别（例如ASP或PHP等）。图1.12 插入面板图1.13 切换类别 某些类别具有带弹出菜单的按钮。当从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，则下次单击“图像”按钮时，Dreamweaver会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会发生变化。 插入面板按下列类别进行组织。（1）常用类别：用于创建和插入最常用的对象，例如图像和表格。（2）布局类别：用于插入表格、表格元素、div标签、框架和Spry Widget。还可以选择表格的两种视图：标准（默认）表格和扩展表格。（3）表单类别：包含一些按钮，用于创建表单和插入表单元素（包括Spry验证Widget）。（4）数据类别：用于插入Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单。（5）Spry类别：包含一些用于构建Spry页面的按钮，包括Spry数据对象和Widget。（6）InContext Editing类别：包含供生成InContext编辑页面的按钮，包括用于可编辑区域、重复区域和管理CSS类的按钮。（7）文本类别：用于插入各种文本格式和列表格式的标签，如b、em、p、h1和ul。（8）收藏夹类别：用于将插入面板中最常用的按钮分组和组织到某一公共位置。（9）服务器代码类别：仅适用于使用特定服务器语言的页面，这些服务器语言包括ASP、CFML Basic、CFML Flow、CFML Advanced和PHP。这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入代码视图中。 与Dreamweaver中的其他面板不同，可以将插入面板从其默认停靠位置拖出并放置在文档窗口顶部的水平位置。这样做后，它会从面板更改为工具栏（尽管无法像其他工具栏一样隐藏和显示）。 3.属性检查器 属性检查器可以用于检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。属性检查器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则属性检查器将改为显示该图像的属性，例如图像的文件路径、图像的宽度和高度等，如图1.14所示。图1.14 属性检查器 若要访问特定属性检查器的帮助，可单击属性检查器右上角的帮助按钮，或者从属性检查器的“选项”菜单中选择“帮助”，如图1.15所示。图1.15 访问特定属性检查器的帮助 若要显示或隐藏属性检查器，可执行“窗口”→“属性”命令。 若要展开或折叠属性检查器，单击属性检查器右下角的展开箭头或折叠箭头。 若要查看并更改页面元素的属性，可执行以下操作。（1）在文档窗口中选择一个页面元素。如果需要，可展开属性检查器，以查看选定元素的所有属性。（2）在属性检查器中，对该元素的任意属性进行更改。（3）如果所做的更改没有立即体现在文档窗口中，可按【Enter】键。 4.标签检查器 标签检查器如图1.16所示。它与其他集成开发环境（IDE）中提供的属性表类似，可以用来查看和编辑与给定的页面元素关联的每个属性。
试读结束[说明：试读内容隐藏了图片]