中文版+Dreamweaver+CS6网页设计教程_IT168-USB迷|专注于互联网分享

2024年2月11日发(作者：无鸿云)

第1章 Dreamweaver CS6简介

Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。

本章主要内容



Dreamweaver CS6的新增功能。

Dreamweaver CS6的安装、删除和启动。

Dreamweaver CS6的工作界面。

Dreamweaver CS6的一般操作。

本章重点



Dreamweaver CS6常用面板的使用方法。

Dreamweaver CS6的文件操作。

1.1 Dreamweaver CS6概述

Dreamweaver CS6 是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。

由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作。CS6新版本使用了自适应网格版面创建页面，在发布前可使用多屏幕预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。

1.2 Dreamweaver CS6的新增功能

相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。

1. 可响应的自适应网格版面

使用响应迅速的 CSS 自适应网格版面，可以创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。用

户可直观地创建复杂网页设计和页面版面，无须忙于编写代码。

2. 改善的FTP性能

利用重新改良的多线程 FTP 传输工具可节省上传大型文件的时间。而快速高效地上传网站文件可缩短制作时间。

3. Adobe Business Catalyst 集成

使用 Dreamweaver 中集成的 Business Catalyst 面板连接并编辑用户利用 Adobe

Business Catalyst(需另外购买)建立的网站。利用托管解决方案建立电子商务网站。

4. 增强型 jQuery 移动支持

使用更新的 jQuery 移动框架支持为 iOS 和 Android 平台建立本地应用程序。建立触及移动受众的应用程序，同时简化用户的移动开发工作流程。

5. 更新的 PhoneGap 支持

更新的 Adobe PhoneGap支持可轻松为 Android 和 iOS系统建立和封装本地应用程序。通过改编现有的 HTML 代码来创建移动应用程序，并可使用 PhoneGap 模拟器检查用户的设计。

6. CSS转换

将 CSS 属性变化制成动画转换效果，可使网页设计栩栩如生，在用户处理网页元素和创建优美效果时，能保持对网页设计的精准控制。

7. 更新的实时视图

使用更新的“实时视图”功能可在发布前测试页面。“实时视图”现已使用最新版的

WebKit 转换引擎，能够提供绝佳的 HTML5 支持。

8. 更新的多屏幕预览面板

可利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板现在能够帮助用户检查HTML5的内容呈现。

9. 浏览器兼容性检查

Dreamweaver CS6中新的浏览器兼容性检查功能可生成报告(见图1-1)，指出各种浏览器中与 CSS 相关的呈现问题。在代码视图中，这些问题以绿色下划线来标记，如图1-2所示，因此可以准确地知道产生问题的代码位置。确定问题之后，如果知道解决方案，则可以快速解决问题；如果需要了解详细信息，则可以访问 Adobe CSS Advisor。

图1-1 浏览器兼容性检查报告

第1章 Dreamweaver CS6简介

图1-2 绿色下划线标记

10. Adobe CSS Advisor

Adobe CSS Advisor 网站包含有关最新的CSS问题信息，在浏览器兼容性检查过程中可通过 Dreamweaver 用户界面直接访问该网站。CSS Advisor 不止是一个论坛、一个

WiKi页面或一个讨论组，它可以方便地为现有内容提供建议和改进意见，或者方便地添加新的问题，以使整个社区都能够从中受益。

11. CSS 布局

Dreamweaver提供了一组预先设计的 CSS 布局，可以帮助用户快速设计好页面并开始运行，并且在代码中提供了丰富的内联注释以帮助用户了解CSS页面布局，如图1-3所示。Web 上的大多数站点设计都可以被归类为一列、两列或三列式布局，而且每种布局都包含许多附加元素(例如标题和脚注)。Dreamweaver 提供了一个包含基本布局设计的综合性列表，用户可以自定义这些设计以满足自己的需要。

图1-3 CSS布局

12. 管理CSS

借助管理CSS 功能，可以轻松地在文档之间、文档标题与外部表之间、外部 CSS 文件之间以及更多位置之间移动 CSS 规则。此外，还可以将内联 CSS 转换为 CSS 规则，并且只需通过拖放操作即可将它们放置在所需位置。

13. Adobe Device Central

Adobe Device Central 与 Dreamweaver 相集成，并且存在于整个 Creative Suite 3 软件产品系列中，使用它可以快速访问每个设备的基本技术规范，还可以收缩 HTML 页面

的文本和图像，以便使显示效果与设备上出现的完全一样，从而简化了移动内容的创建过程。

14. Adobe Bridge CS6

将 Adobe Bridge CS6 与 Dreamweaver 一起使用可以轻松、一致地管理图像和资源。通过 Adobe Bridge 能够集中访问项目文件、应用程序，以及设置 XMP 元数据标记和搜索功能。

15. CSS增强功能

Dreamweaver 8具有HTML格式化功能，但没有CSS格式化功能，而Dreamweaver

CS6增加了CSS的格式化功能。

1.3 Dreamweaver CS6的安装、卸载和启动

本节主要介绍如何安装和卸载Dreamweaver CS6，以及运行Dreamweaver CS6的方法。

1.3.1 系统要求

以下硬件和软件是运行Dreamweaver CS6所必需的。

对Microsoft Windows系统的要求如下。



处理器：Intel Pentium 4 或 AMD Athlon 64(或兼容处理器)。



操作系统：Windows XP SP2 或更高版本，Windows Vista Home Premium、Business、Enterprise 或 Ultimate(仅提供对32位版本的认证支持)。



RAM：512 MB。



硬盘：1.3 GB以上可用空间。



媒体：DVD-ROM驱动器。



Internet 连接(用于激活)。

对Macintosh系统的要求如下。



处理器：G4、G5 或基于 Intel 的 Mac。



操作系统：Mac OS 10.6或10.7版。



RAM：512 MB。



硬盘：1.8 GB以上可用空间。



媒体：DVD-ROM 驱动器。



Internet 连接(用于激活)。

1.3.2 安装Dreamweaver CS6

安装Dreamweaver CS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他

Adobe 应用程序，然后执行下列操作之一。



将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动，请双击光盘根目录中的文件(Windows)或Setup文件4

第1章 Dreamweaver CS6简介

(Mac OS)。



如果用户是从网上下载的软件，请打开文件夹并双击文件(Windows)

或Setup文件(Mac OS)，然后按屏幕说明进行操作。

下面是安装过程简介。

(1) 在“Adobe软件许可协议”界面(见图 1-4)中单击“接受”按钮，进入安装位置界面。

图1-4 “Adobe软件许可协议”界面

(2) 在安装位置界面(见图 1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。

图1-5 安装位置界面

图1-6 “安装”界面

(3) 进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。

图1-7 “安装完成”界面

1.3.3 卸载Dreamweaver CS6

若要卸载Dreamweaver CS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。



在Windows XP系统中，打开 Windows“控制面板”窗口，然后双击“添加或删除程序”图标，打开“添加或删除程序”窗口。选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说明进行操作。



在 Windows Vista系统中，打开 Windows“控制面板”窗口，然后双击“程序和功能”图标，在弹出的界面中选择要卸载的产品，单击“更改/删除”按钮，然后6

第1章 Dreamweaver CS6简介



按屏幕说明进行操作。

在 Mac 系统中，请勿通过将应用程序拖入废纸篓的方式进行卸载，应安全卸载软件，即选择“应用程序”|“实用程序”|“Adobe 安装程序”命令中的产品安装程序，以管理员身份通过身份验证，选择“删除组件”命令，然后按屏幕说明进行操作。

1.3.4 启动与退出Dreamweaver CS6

Dreamweaver C6的启动与退出方式有很多种，下面详细介绍。

1. Dreamweaver CS6的启动

Dreamweaver CS6启动方式有许多种，但一般用得较多的是以下两种。

1) 从“开始”菜单中启动

单击Windows桌面左下角的“开始”按钮，在“程序”子菜单中选择 “Adobe

Dreamweaver CS6”命令进行启动。

2) 用快捷方式启动

在桌面上单击Dreamweaver CS6的快捷启动图标，即可启动。Dreamweaver CS6的启动界面如图1-8所示。

图1-8 启动界面

首次启动Dreamweaver CS6后的主窗口界面如图1-9所示。如果不想每次启动时都显示该界面，则选中“不再显示”复选框即可。

图1-9 Dreamweaver CS6主窗口界面

2. Dreamweaver CS6的退出

退出Dreamweaver CS6 的方式有很多种，但平时用得最多的不外乎如下几种。



在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。



在 Dreamweaver CS6被激活状态下，直接按 Alt+F4 组合键。



单击Dreamweaver CS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关闭”命令，或者直接双击控制菜单图标。



单击Dreamweaver CS6主窗口右上角的“关闭”按钮。

1.4 Dreamweaver CS6的工作窗口

Dreamweaver CS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等，如图1-10所示。合理使用这几个板块的相关功能，可以使设计工作成为一个高效、便捷的过程。

功能菜单

插入栏

文档工具栏

文档窗口功能面板

状态栏

属性面板

图1-10 Dreamweaver CS6的工作窗口

1.4.1 功能菜单

所谓功能菜单，就是一些能够实现一定功能的菜单命令。Dreamweaver CS6拥有“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等10个菜单分类，单击这些菜单可以打开其子菜单，如图1-11所示。Dreamweaver CS6的菜单功能极其丰富，几乎涵盖了所有的功能操作。

第1章 Dreamweaver CS6简介

图1-11 “文件”菜单

1.4.2 插入栏

“插入栏”包含用于创建和插入对象(如表格、AP元素和图像)的按钮。当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。

这些按钮被组织到若干选项卡中，用户可以单击“插入栏”顶部的相应选项卡进行切换。当启动Dreamweaver CS6时，系统会默认打开用户上次使用的选项卡。

某些选项卡具有带弹出菜单的按钮。从弹出菜单中选择一个命令时，该命令将成为该按钮的默认操作。例如，如果从 “图像”按钮的弹出菜单中选择“图像占位符”命令，下次单击“图像”按钮时，Dreamweaver CS6会自插入一个图像占位符。每当从按钮的弹出菜单中选择一个新命令时，该按钮的默认操作都会改变。

“插入栏”按以下选项卡进行组织。

1. “常用”选项卡

“常用”选项卡包含了最常用的对象，最主要的功能是插入各项最常用的基本网页设计及排版组件，如图像按钮、表格按钮、插入媒体等，如图1-12所示。

图1-12 “常用”选项卡

2. “布局”选项卡

“布局”选项卡包含了表格按钮、DIV 标签等标签，如图1-13所示，可以帮助用户快速地在网页中绘制不同的表格和框架。这与以往版本的Dreamweaver 有很大的区别。

图1-13 “布局”选项卡

3. “表单”选项卡

“表单”选项卡包含了创建表单域和插入表单元素的按钮，如图1-14所示。表单是网页设计中最重要却又最难完全掌握的部分，使用表单可以收集访问者的信息，如订单、搜索接口等。

图1-14 “表单”选项卡

4. “数据”选项卡

“数据”选项卡可以插入 Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单，如图1-15所示。

图1-15 “数据”选项卡

5. Spry选项卡

Spry选项卡包含一些用于构建 Spry页面的按钮，包括 Spry数据对象和构件，如图1-16所示。

图1-16 Spry选项卡

6. jQuery Mobile选项卡

jQuery Mobile选项卡包含jQuery Mobile的页面、文本输入、按钮等元素，如图1-17所示。

图1-17 jQuery Mobile选项卡

7. InContext Editing选项卡

InContext Editing选项卡包含可编辑区域和创建重复区域的内容，如图1-18所示。

图1-18 InContext Editing选项卡

8. “文本”选项卡

第1章 Dreamweaver CS6简介

“文本”选项卡包含了多种特定的字符，如商标、引号等特殊字符，这些字符也可以以HTML的方式插入网页之中，如图1-19所示。

图1-19 “文本”选项卡

9. “收藏夹”选项卡

“收藏夹”选项卡用于将“插入栏”中最常用的按钮分组或将其组织到某一公共位置，如图1-20所示。

图1-20 “收藏夹”选项卡

1.4.3 文档工具栏

“文档工具栏”中包含一些按钮，使用这些按钮可以在“代码”视图、“设计”视图以及“拆分”视图间快速切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-21所示。

图1-21 文档工具栏



“显示代码视图”按钮：只在“文档窗口”中显示“代码”视图。

“显示代码视图和设计视图”按钮：将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时，“文档”左侧显示“代码”视图，右侧显示“设计”视图。

“显示设计视图”按钮：只在“文档窗口”中显示“设计”视图。

注意：如果处理的是 XML、JavaScript、Java、CSS或其他基于代码的文件类型，则不能在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。



“多屏幕”按钮：可以根据用户的需要选择屏幕的尺寸、大小和方向等。

“在浏览器中预览/调试”按钮：允许用户在浏览器中预览或调试文档，并可从弹出菜单中选择一个浏览器。

“文件管理”按钮：显示“文件管理”弹出菜单。

“W3C验证”按扭：包括验证当前文档、验证实时文档和设置W3C的功能，用于验证当前文档或选定的标签。

“检查浏览器兼容性”按钮：用于检查用户的 CSS是否对于各种浏览器均兼容，包括检查浏览器的兼容性、显示浏览器出现的问题、报告浏览器呈现的问题等。

“可视化助理”按钮：用户可以使用各种可视化助理来设计页面。



“刷新设计视图”按钮：在“代码”视图中对文档进行更改后，单击此按钮刷新文档的 “设计”视图，因为只有在执行某些操作(如保存文件或单击该按钮)之后，在“代码 ”视图中所作的更改才会自动显示在 “设计”视图中。

注意：刷新过程也依赖于 DOM(文档对象模型)的代码功能，如选择代码块的开始标签或结束标签的能力。



“标题”文本框：允许为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已经有标题了，则该标题将显示在该区域中。

1.4.4 文档窗口

“文档窗口”用于显示当前文档，可以选择下列任一视图。



设计视图：一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图以在处理文档时显示动态内容。



代码视图：一个用于编写和编辑 HTML、JavaScript、服务器语言代码(如 PHP或 ColdFusion标记语言(CFML))以及任何其他类型代码的手工编码环境。



拆分视图：使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。

当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果用户对文档作了更改但尚未保存，则 Dreamweaver会在文件名后显示一个星号。

当“文档窗口”在集成工作区布局(仅适用于Windows系统)中处于最大化状态时，它没有标题栏，页面标题以及文件的路径和文件名则显示在主工作区窗口的标题栏中。并且“文档窗口”顶部会出现选项卡，上面显示了所有打开文档的文件名。若要切换到某个文档，则可单击它的选项卡。

1.4.5 状态栏

“文档窗口”底部的“状态栏”提供与正在创建的文档有关的其他信息，如图1-22所示。

图1-22 状态栏



“标签选择器”图标：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。单击“标签选择器”图标可以选择文档的整个正文。若要在标签选择器中设置某个标签的 class 或 id 属性，则可右击(适用于Windows系统)或按住Ctrl键并单击(适用于Macintosh系统)该标签，然后从弹出的快捷菜单中选择一个“类”或 ID。



第1章 Dreamweaver CS6简介

“选取工具”图标：用于启用或禁用手形工具。

“手形工具”图标：用于在“文档”窗口中单击并拖动文档。

“缩放工具和设置缩放比率”下拉列表框：可以为文档设置缩放比率。

“窗口大小”图标：用于将 “文档窗口”的大小调整到预定义或自定义的尺寸。

“文档大小和下载时间”图标：显示页面(包括所有相关文件，如图像和其他媒体文件)的预计文档大小和预计下载时间。

1.4.6 功能面板

Dreamweaver CS6的功能面板位于文档窗口边缘。常见的功能面板包括“属性”面板、“CSS样式”面板、“应用程序”面板、“文件”面板等。

1. “属性”面板

“属性”面板并不是将所有的对象和属性都加载到面板上，而是根据用户选择的不同对象来动态地显示对象的属性。制作网页时，可以根据需要随时打开或关闭“属性”面板，或者通过拖动属性面板的标题栏将其移到合适的位置。

选定页面元素后系统会显示相应的“属性”面板(见图1-23)。例如，图像“属性”面板、表格“属性”面板、框架“属性”面板、Flash影片“属性”面板、表单元素“属性”面板等。

图1-23 “属性”面板

2. “CSS样式”面板

使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性(“当前”模式)，或影响整个文档的规则和属性(“全部”模式)。单击“CSS样式”面板顶部的相应按钮可以在两种模式之间切换，在“全部”和“当前”模式下还可以修改 CSS属性，如图1-24所示。

在“当前”模式下，“CSS样式”面板包括三个窗格：“所选内容的摘要”窗格，显示文档中当前所选内容的CSS属性；“规则”窗格，显示所选属性的位置(或所选标签的层叠规则)；“属性”窗格，允许用户编辑、定义所选内容的规则的 CSS属性。

在“全部”模式下， “CSS样式”面板包括两个窗格：“所有规则”窗格(顶部)和“属性”窗格(底部)。“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用“属性”窗格可以编辑“所有规则”窗格中任一所选规则的 CSS属性。

对“属性”窗格所作的任何更改都将立即应用，用户在操作的同时便可预览效果。

图1-24 “CSS样式”面板

3. “应用程序”面板

“应用程序”面板包含了数据绑定、数据库和服务器行为，是制作网页数据库时的重要面板，如图1-25所示。

4. “文件”面板

使用“文件”面板可查看和管理 Dreamweaver站点中的文件，如图1-26所示。

图1-25 “应用程序”面板

图1-26 “文件”面板

在“文件”面板中查看站点、文件或文件夹时，可以查看区域的大小，还可以展开或折叠“文件”面板。当“文件”面板折叠时，它以文件列表的形式显示本地站点、远程站点或测试服务器的内容。在展开时，它显示本地站点和远程站点或者显示本地站点和测试服务器。“文件”面板还可以显示本地站点的视觉站点地图。

对于 Dreamweaver站点来说，用户还可以通过更改折叠面板中默认显示的视图(本地站点或远程站点视图)来对“文件”面板进行自定义。

第1章 Dreamweaver CS6简介

1.5 Dreamweaver CS6的参数设置

本节介绍Dreamweaver CS6的参数设置。在Dreamweaver CS6中通过设置相关参数，可以改变操作环境，从而使其更加符合设计者的设计需要。常见的设置有“预览设置”、“设置外部编辑器”、“编辑快捷键”、“设置页面属性”等，其他的参数设置和这些方法相同，用户可以根据需要自行设置。

1.5.1 预览设置

在设计过程中，用户需要随时在浏览器中打开设计的文档，以便查看其设计效果和及时进行更改和完善。Dreamweaver CS6提供了在设计过程中预览的功能，用户只需使用菜单命令或快捷键就可以在浏览器中打开设计中的文档。

依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“在浏览器中预览”选项，右侧即出现相关界面，如图1-27所示。

图1-27 “首选参数”对话框

对话框中各选项的含义如下。



：单击该按钮，可向列表中添加新的浏览器。



：单击该按钮，可删除列表中选择的浏览器。



：单击该按钮，弹出“编辑浏览器”对话框，从中可修改选定的浏览器参数，如图1-28所示。

图1-28 “编辑浏览器”对话框

默认：选中“主浏览器”或“次浏览器”复选框，可设定选择的浏览器是否为主浏览器。



选项：选中“使用临时文件预览”复选框，可使用临时文件预览。

将Internet Explorer(简称IE)设置为默认浏览器的快捷键为F12。在设计过程中，如果想预览页面效果，可选择“文件”|“在浏览器中预览”命令或按快捷键F12。



1.5.2 设置外部编辑器

Dreamweaver CS6具有良好的外部程序接口，可以与各种页面元素相关的外部编辑器相连接，在设计过程中可以及时调用这些外部程序并编辑页面元素，完成后还可以将编辑好的元素直接应用在设计中，十分便捷。

设置外部编辑器示例：将Photoshop CS6设置为Dreamweaver CS6中.jpg、.jpe、.jpeg等文件的外部编辑器。设置外部编辑器的具体操作步骤如下。

(1) 依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，如图1-29所示。

图1-29 选择“文件类型/编辑器”选项

(2) 在“扩展名”列表框中选择.jpg .jpe .jpeg选项，然后单击“编辑器”列表框上方的按钮，打开“选择外部编辑器”对话框，如图1-30所示。

图1-30 “选择外部编辑器”对话框

第1章 Dreamweaver CS6简介

(3) 选择Photoshop程序文件，然后单击“打开”按钮退出对话框，此时在“编辑器”列表框中出现所加载的Photoshop程序。

(4) 选择Photoshop程序名称，单击“编辑器”列表框上方的“设为主要”按钮，将Photoshop设置为默认的主要编辑器。完成后，在Photoshop名称后面出现“主要”字样。

(5) 如果要删除“编辑器”列表框中没用的编辑器，则选择编辑器名称后，单击“编辑器”列表上方的按钮即可。

1.5.3 编辑快捷键

Dreamweaver CS6为菜单命令、文档编辑、代码编辑、站点管理等操作设置了易用的快捷键。如果用户需要，则可以更改或添加自己的快捷键。

编辑快捷键示例：为“查看”|“代码”菜单命令添加快捷键，即按Backspace键，将Dreamweaver切换到“代码”视图。

编辑快捷键的具体操作步骤如下。

(1) 依次选择“编辑”|“快捷键”菜单命令，打开“快捷键”对话框，如图1-31所示。

图1-31 “快捷键”对话框

(2) 在“当前设置”下拉列表框中选择默认的Dreamweaver Standard选项，然后在“命令”下拉列表框中选择“菜单命令”选项。

(3) 在列表框中展开“查看”选项，选择其中的“代码”选项。

(4) 单击“快捷键”选项右侧的按钮，然后按Backspace键。此时在“按键”文本框中出现自动加载的快捷键符号BkSp。

(5) 单击“确定”按钮退出对话框，快捷键设置完毕。

同理，可以为切换设计视图添加快捷键，以便在两种视图间进行切换。

1.5.4 设置页面属性

对于页面的基本属性，例如标题、背景颜色和图像、文本及链接的颜色、边距等，在“页面属性”对话框中均可以设置。

依次选择“修改”|“页面属性”菜单命令，打开“页面属性”对话框，如图1-32所示。

图1-32 “页面属性”对话框

在此对话框中主要可以进行以下设置。

1. 更改页面标题

在“标题/编码”选项界面中可以更改标题、文档类型、编码等。

2. 设置背景图像或颜色

如果要设置背景图像，则可单击“背景图像”文本框右侧的“浏览”按钮，查找并选择背景图像文件，或在其文本框中输入图像文件的路径及名称；如果要设置背景颜色，则可单击“背景颜色”色盘按钮中输入颜色的十六进制代码。

，在弹出的色盘中选择背景颜色，或者在其右侧的文本框提示：可以同时设置“背景颜色”和“背景图像”，当页面下载时，首先显示背景色，然后被背景图像所覆盖，背景颜色可以透过背景图像的透明像素部分显示出来。

3. 设置文本或链接颜色

在“外观”和“链接”选项界面中可分别通过使用CSS样式表定义颜色。

1.6 Dreamweaver CS6的文件操作

在Dreamweaver CS6中，用户不仅可以创建基本的HTML页面和动态的ASP、JSP页面，还可以创建模板页、CSS样式表、XSLT、库项目、JavaScript、XML以及多种专业水准的页面设计。

1.6.1 新建文档

在Dreamweaver CS6中新建文档的具体操作步骤如下。

(1) 依次选择“文件”|“新建”菜单命令，打开“新建文档”对话框，如图1-33所示。

(2) 在“空白页”选项卡内的“页面类型”列表框中选择所要创建的文档类型，然后18

第1章 Dreamweaver CS6简介

在“布局”列表框中选择想要创建的样式，然后单击“创建”按钮即可。

图1-33 “新建文档”对话框

1.6.2 保存文档

在Dreamweaver CS6中保存文档的方法大致和其他应用程序相同，如果要将设计好的文档保存为模板，则依次选择“文件”|“另存为模板”菜单命令，打开如图1-34所示的“另存模板”对话框，进行相应的设置后，单击“保存”按钮即可将模板保存在所选择的站点内。

图1-34 “另存模板”对话框

注意：模板文件应保存在站点内，因此应首先创建一个站点。

1.6.3 打开现有文档

Dreamweaver CS6可以打开HTML文件或任何支持的动态文档类型。依次选择“文件”|“打开”菜单命令，在“打开”对话框中选择想要打开的文件，然后单击“打开”按钮即可。

有些保存为HTML格式的文件类型，诸如Microsoft Word文档，则需将其导入Dreamweaver CS6中，而不是打开该文档。导入后需使用Dreamweaver的相关命令清除无用的标签。

1.7 课后习题

一、选择题

1. 下列( )是Dreamweaver CS6的新增功能。

A. 可响应的自适应网格版面 B. Adobe Business Catalyst 集成

C. 更新的 PhoneGap 支持 D. 以上都是

2. 以下( )不属于功能菜单。

A. 文件 B. 插入 C. 站点 D. 视图

3. 插入表格属于插入栏中的( )选项卡。

A. 常用 B. 布局 C. 表单 D. 文本

4. 在设计过程中，按( )键可以预览设计效果。

A. F2 B. F10

5. 下列( )不属于“资源”面板。

A. 图像 B. 颜色

二、填空题

1. 当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有________。

2. 在“文档窗口”中可以在________、________和________三种视图之间进行切换。

3. 当“文档窗口”在集成工作区布局中处于________状态时，它没有标题栏。

4. 当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的________。

5. 常见的功能面板有________、________、________和________等。

三、上机题

1. 根据书中所讲步骤安装Dreamweaver CS6。

2. 认识Dreamweaver CS6的工作窗口。

3. 熟悉Dreamweaver CS6的参数设置。

4. 熟悉Dreamweaver CS6中的文件操作。

C. F12

C. 模板

D. F11

D . 行为

第1章 Dreamweaver CS6简介

第2章站点的设计

拥有自己的网站，可以说是每个网页制作者的梦想。利用Dreamweaver CS6可以首先在本地计算机的磁盘上建立一个本地站点，控制站点结构，管理站点中的每个文件。在完成对站点文件的编辑后，可以用Dreamweaver CS6将本地站点上传到Internet上。

本章主要内容



规划站点。

建立站点。

定义本地与远程站点。

设置测试服务器。

编辑站点。

本章重点



建立站点。

编辑站点。

2.1 站点的规划

在创建站点之前，应合理地规划站点的目标、结构、内容、导航机制以及站点的整体风格等。合理的规划，不仅有利于避免设计的盲目性，而且有利于日后管理众多的站点文件。

2.1.1 确定站点目标

一个好的站点，应该具有明确的目标。目标可谓是站点设计的灵魂与导向标，能够引导设计者成功地设计站点。站点的目标因主题而异，例如，娱乐性站点与信息类站点的目标与风格会迥然不同，因此在设计站点之前应该明确站点的目标，才能有条不紊地设计和管理好站点文件。

2.1.2 规划站点结构

所谓“良好的开端就是成功的一半”，认真地规划站点，能够避免日后出现管理文件混乱的局面。

一般的，在规划站点时应注意以下问题。

1. 本地站点和远程站点采用相同的结构

将本地站点和远程站点设置成相同的结构，能有利于站点的维护和管理。当本地站点设置完成后，再利用Dreamweaver CS6将本地站点上的文件及文件夹上传到远程服务器上。这样在本地站点的文件及文件夹上进行操作，相当于在远程站点相应的文件及文件夹

上进行完全相同的操作。

2. 用文件夹保存文档

为了便于对站点文件进行管理，可将站点文件分门别类地保存在站点根目录下的文件夹中，以文件夹方式组织站点文件，一目了然，如图2-1所示。

图2-1 站点结构图

例如，在站点根目录下创建image文件夹，存放站点中的图像文件；用media文件夹存放站点中的Flash、Shockwave、MIDI等文件。如果图像文件较多，还可以在该文件夹中新建几个文件夹，将图像文件重新分门别类，方便存取图像文件。

2.1.3 规划站点内容

站点的内容一定要丰富。将各种不同的内容划分为几个板块，例如，生活、旅游、健康、IT等，这样既可以方便网站设计者进行设计，又能方便用户获取相关信息。

除了文本和图像等内容外，如果需要，则还可以加入多媒体元素等多姿多彩的内容，在丰富网站内容的同时，也可平添几分生趣。

此外，要注意使用合理的文件名称，尽量避免使用中文名称，因为大多数的软件平台都是基于英文的；有的Web服务器是区分大小写的，因此一般都采用小写字母命名站点中的文件。

2.1.4 规划站点的导航机制

一个优秀的站点应该具有明确的导航系统，避免用户在页面上迷失方向，找不到想要浏览的内容。

在规划站点的导航机制时应注意以下方面。

1. 建立返回首页的链接

一般在站点的每个页面上都应有返回首页的链接，这样可以方便用户回到开始的地方，寻找新的导航目标。同时，当用户在页面上迷失方向时，可以返回到首页重新开始。

2. 导航标题应明确

导航标题文字或图像具有明确的导航指示作用，标题性文字一般是页面内容的概括。例如，“今日要闻”——用户一看到该标题文字，即可知道链接的内容是当日重要的22

第1章 Dreamweaver CS6简介

新闻。

相对于文字导航标题，图像标题更有其独特的一面。例如，在做一个返回搜狐首页的链接时，设计者往往是添加一个我们所熟悉的小狐狸图标，即搜狐网站的标徽。这样，既可以起到明确的导航作用，同时相对于单调的文本也要丰富得多。此外，还可以在图像上添加替代文本，这些文本可以起到辅助的指示作用。

2.1.5 规划站点的风格

站点的风格应该自然地流露出站点的主题，紧紧围绕站点主题和内容设计出页面的形象和风格。例如，以诗词歌赋为主要题材的站点，最好能够体现出书香韵味，打开该站点，对用户来说感觉就犹如捧起书卷一般亲切。

在实际创作过程中可以使用模板创建风格相同的页面，使用库调用页面中经常出现的元素，这样既可以提高设计的效率，又能使对这些文件的管理变得异常轻松。

2.2 站点的创建

本节介绍在Dreamweaver CS6中创建站点的方法。

2.2.1 站点定义向导



使用下面的方法之一可以打开站点定义向导，即打开“站点设置对象”对话框(见图2-2)。

单击“文件”面板右侧蓝色的“管理站点”链接，在“管理站点”对话框中单击“新建站点”按钮。

在菜单栏中依次选择“站点”|“新建站点”命令。

在菜单栏中依次选择“站点”|“管理站点”命令，在“管理站点”对话框中单击“新建站点”按钮。

图2-2 “站点设置对象”对话框

从图2-2所示的对话框中可以查看站点设置的三个基本任务。



站点：可以为站点选择本地文件夹和名称。

服务器：选择承载Web上页面的服务器。

版本控制：设置访问、协议、服务器地址、存储库路径、服务器端口、用户名和密码等内容。

根据站点设置的提示即可完成基本站点的创建。

2.2.2 定义本地站点

本地站点就是编辑和存放站点文件的本地场所，在本地站点中完成站点的设计，才能上传到远程服务器，供网络上其他人浏览。

选择“站点设置对象”对话框中的“高级设置”选项，在 “本地信息”选项界面中设置本地文件夹，如图2-3所示。

图2-3 设置本地文件夹



在“本地信息”选项界面中可设置本地文件夹的下列属性。

“默认图像文件夹”文本框：指定放置站点图像文件的目录。

“站点范围媒体查询文件”文本框：指定放置站点文件的本地文件夹，可单击按钮选择本地文件夹或直接在文本框中输入本地文件夹的路径，例如，D:DWBookch2。

Web URL文本框：指定站点的URL地址。

启用缓存：选中该复选框，可创建本地缓存，这样有利于提高站点的链接和站点管理任务的速度，而且可以有效地使用“资源”面板管理站点资源。

2.2.3 定义远程站点

远程站点一般位于运行Web服务器的计算机上，用户可以使用多种方案定义远程站点。

1. FTP方式

以FTP方式定义远程站点的操作步骤如下。

(1) 在“站点管理”对话框中双击已建立的站点，在弹出的“站点设置对象”对话框中选择“服务器”选项，如图2-4所示。

第1章 Dreamweaver CS6简介

图2-4 选择“服务器”选项

(2) 单击对话框左下角的“添加新服务器”按钮，出现相应界面，如图2-5所示。

图2-5 “添加新服务器”界面

在此界面的“基本”选项卡中需要设置以下信息。



服务器名称：为服务器命名。



连接方法：选择“FTP”选项。



FTP地址：输入远程的FTP主机名称，如，或者IP地址203.171.236.155。一定要输入有权访问的空间的域名地址，否则会连接不上。



端口：可以根据服务器提供商的要求来填写。



用户名：输入连接到FTP服务器的注册名。



密码：输入连接到FTP服务器的密码。



测试：单击“测试”按钮可以检查是否能够成功地连接到服务器上。如果不能，则需修改前面的选项。



Web URL：输入URL地址，如/baike369/。

设置完的效果如图2-6所示。

(3) 设置完成后，单击“保存”按钮，返回到“站点设置对象”对话框，如图2-7所示。在该对话框中显示了已经建立好的远程连接。在左下角单击相应按钮可以继续添加新服务器、删除服务器、编辑现有服务器和复制现有服务器。

图2-6 设置“基本”选项卡

图2-7 “站点设置对象”对话框

(4) 单击“保存”按钮，出现如图2-8所示的提示对话框。

图2-8 提示对话框

(5) 单击“确定”按钮，然后再单击“管理站点”中的“完成”按钮，即完成了定义远程站点的操作。

使用本地站点连接好远程服务器后，在站点面板中就可以对文件进行上传、下载操作了，一般情况下都是选择FTP连接方式。如果前面设置本地文件夹为Web服务器指定的目录，则没有必要再设置远程站点，因为Web服务器运行在本地计算机上。

在“站点设置对象”对话框中，除了一些基本的设置之外还有“高级”选项卡，如图2-9所示。

第1章 Dreamweaver CS6简介

图2-9 “高级”选项卡



其设置说明如下。

维护同步信息：保持服务器与本地信息同步。

保存时自动将文件上传到服务器：选中该复选框，保存文件时自动将其上传到服务器。

启用文件取出功能：选中此复选框，激活“打开文件之前取出”功能，可设置文件操作权限。选中该复选框后，激活其下方的参数设置框，如图2-10所示。

打开文件之前取出：在打开文件时，自动设置为取出。

取出名称：输入取出文件的人员名称，输入后在站点窗口中取出文件旁将显示该名称。

电子邮件地址：输入取出人员的电子邮件地址。

提示：文件的“取出”功能在多人联合设计的环境中特别有用，通过设置文件的只读属性，可以避免工作组中的其他人修改该文件。

图2-10 设置文件取出功能

2. 本地/网络方式

定义远程站点还可以选择“本地/网络”方式，即在图2-5所示的界面中，在“连接方法”下拉列表框中选择“本地/网络”选项，如图2-11所示。

图2-11 “本地/网络”连接方式



在“基本”和“高级”选项卡中可设置下列属性。

服务器文件夹：单击按钮选择存放站点文件的文件夹，也可以在文本框中直接输入该文件夹的路径。

Web URL：输入URL地址。

3. RDS方式

以RDS方式定义远程站点，即在“站点设置对象”对话框中的“连接方法”下拉列表框中选择RDS选项，则出现如图2-12所示的界面。从中设置相关选项，使用RDS与服务器建立连接。

图2-12 RDS访问方式

单击图2-12中的“设置”按钮，弹出的“配置RDS服务器”对话框，如图2-13所示。

图2-13 “配置RDS服务器”对话框

第1章 Dreamweaver CS6简介



在“配置RDS服务器”对话框中可设置如下属性。

主机名：输入提供Web服务的主机地址。

端口：输入主机端口号。

完整的主机目录：输入远程根文件夹。

用户名：输入RDS用户名。

密码：输入RDS密码。选中“保存”复选框，Dreamweaver即可保存该密码。

“高级”选项卡的设置内容与前述一致，不再赘述。

4. SFTP方式

以SFTP方式定义远程站点，即在“站点设置对象”对话框中的“连接方法”下拉列表框中选择SFTP选项，则出现如图2-14所示的界面，通过设置与SFTP建立连接。

图2-14 SFTP连接方式



在“基本”选项卡中可设置下列属性。

SFTP地址：输入SFTP服务器上连接目录的完整 URL。

端口：可以根据服务器提供商的要求来填写。

用户名：输入SFTP的用户名。

密码：输入SFTP的登录密码。

“高级”选项卡的设置见前文。

5. WebDAV方式

以WebDAV方式定义远程站点，即在“站点设置对象”对话框中的“连接方法”下拉列表框中选择WebDAV选项，则出现如图2-15所示的界面，通过设置使用WebDAV协议与服务器建立连接。

图2-15 WebDAV连接方式

在“基本”选项卡中可设置下列属性。

URL：输入WebDAV服务器上连接目录的完整 URL，包括其协议、端口及目录。

用户名：输入登录服务器的用户名。

密码：输入登录服务器的密码。

保存：选中此复选框，Dreamweaver将保存登录密码。

Web URL：输入网站站点的网址。

“高级”选项卡的设置见前文。



2.3 测试服务器的设置

测试服务器用于测试动态页面，在Dreamweaver CS6中，新增了设计动态页面的功能，因此设置测试服务器是以往的Dreamweaver版本所没有的，如果要创建动态站点，那么设置测试服务器是很重要的一个步骤。

在“站点设置对象”对话框中选择“服务器”选项，打开“添加新服务器”界面，切换至“高级”选项卡，在“测试服务器”选项组的“服务器模型”下拉列表框中选择服务器，如图2-16所示。“服务器模型”下拉列表框中可供选择的服务器技术包括，ASP

JavaScript、ASP VBScript、 C#、 VB、ColdFusion、JSP、PHP

MySQL。

图2-16 设置测试服务器

2.4 其他属性的设置

在“站点设置对象”对话框的“高级设置”选项列表中还可以定义“遮盖”、“设计备注”、“文件视图列”等站点的基本属性。

2.4.1 启用遮盖功能

遮盖功能用于在站点操作中排除指定的文件夹和文件。例如，在设计网站过程中，如30

第1章 Dreamweaver CS6简介

果不想每次都上传Flash文件，则可以使用站点的“遮盖”功能遮盖包含Flash文件的文件夹，这样，在执行站点操作时就可排除Flash文件。

在“站点设置对象”对话框中的“高级设置”选项列表中选择“遮盖”选项，打开与遮盖相关的选项卡，如图2-17所示。

图2-17 “遮盖”选项卡



“遮盖”选项卡的具体设置如下。

启用遮盖：选中此复选框，可启用站点的遮盖功能。

遮盖具有以下扩展名的文件：选中该复选框后，在其下面的文本框中输入需要遮盖文件的扩展名，例如.fla。

2.4.2 设置“设计备注”功能

“设计备注”功能用于存储与文档相关联的信息，包括源文件信息、文档注释、文档的设计状态等。

在“站点设置对象”对话框的“高级设置”选项列表中选择“设计备注”选项，打开与设计备注相关的选项卡，如图2-18所示。

图2-18 “设计备注”选项卡

“设计备注”选项卡的具体设置如下。

维护设计备注：选中此复选框，可启用设计备注功能。

启用上传并共享设计备注：选中此复选框，可将“设计备注”和“文件视图列”与其他设计人员共享。



2.4.3 设置“文件视图列”功能

通过设置，可以更改“文件”面板中的文件视图列，例如新增或删除列、调整列的顺序。

在“站点设置对象”对话框中的“高级设置”选项列表中选择“文件视图列”选项，打开与文件视图列相关的选项卡，如图2-19所示。

图2-19 “文件视图列”选项卡

在“文件视图列”选项卡中，可新增或删除视图列。单击“添加新列”按钮如图2-20所示的界面。

，出现

图2-20 “添加新列”界面



具体设计如下。

列名称：在该文本框中输入新增列的名称。

与设计备注关联：在该下拉列表中选择一个值，或者输入新值。



第1章 Dreamweaver CS6简介

对齐：在该下拉列表框中确定列中文本的对齐方式。

显示：选中该复选框，可显示列。

与该站点所有用户共享：选中该复选框，可与连接到远程站点的其他用户共享该列。

注意：必须将一个新列与设计备注关联，否则，“文件”面板中不会显示数据。

“文件视图列”选项卡中的其他设置如下。

编辑按钮：编辑现有列的名称、对齐方式等内容。

调整按钮：调整列的顺序。



【边学边练2-1】建立站点

建立一个名为My Test的站点，保存位置为D:DWBookch2，具体操作步骤如下。

(1) 依次选择“站点”|“新建站点”命令，打开“站点设置对象”对话框，如图2-21所示。

图2-21 “站点设置对象”对话框

(2) 设置站点的名称为My Test，并设置本地站点文件夹，如图2-22所示。

图2-22 设置站点

(3) 单击“保存”按钮，完成本站点的创建。在“文件”面板中可显示出所创建的站点，如图2-23所示。

图2-23 “文件”面板

2.5 站点的编辑

建立好站点之后，根据需要可随时进行编辑，同时可以删除已创建的站点。下面介绍编辑站点的具体操作步骤。

(1) 在“文件”面板的下拉菜单中选择“管理站点”选项，如图2-24所示。

(2) 打开“管理站点”对话框，在站点列表中选择要编辑的站点，单击“编辑当前选定的站点”按钮，如图2-25所示。

图2-24 选择“管理站点”选项

图2-25 “管理站点”对话框

(3) 打开“站点设置对象”对话框，修改相关参数，完成后单击“保存”按钮，如图2-26所示。

(4) 单击“管理站点”对话框中的“完成”按钮，完成站点编辑。

(5) 如果要删除站点，则在“管理站点”对话框中单击“删除当前选定的站点”按钮即可。

第1章 Dreamweaver CS6简介

图2-26 修改相关参数

2.6 课后习题

一、选择题

1. 下列( )不属于设置测试服务器的访问方式。

A. FTP B. WebDAV

C. RDS D. 以上都不是

2. 打开站点定义向导的方法是( )。

A. 单击“文件”面板右侧蓝色的“管理站点”链接，在“管理站点”对话框中单击“新建站点”按钮

B. 在菜单栏中依次选择“站点”|“新建站点”命令

C. 在菜单栏中依次选择“站点”|“管理站点”命令，在“管理站点”对话框中单击“新建站点”按钮

D. 以上都可行

3. 在创建站点时启用缓存的好处是( )。

A. 有利于提高站点的链接和站点管理任务的速度，而且可以有效地使用“资源”面板管理站点资源

B. 仅有利于提高站点的链接速度

C. 仅能更有效地使用“资源”面板管理站点资源

D. 仅有利于提高站点的管理任务的速度

4. 文件的“取出”功能在多人联合设计的环境中非常有用，通过设置文件的只读属性，可避免工作组中的其他人( )。

A. 修改该文件 B. 读取该文件 C. 修改和读取该文件 D. 以上都不是

5. “设计备注”功能用于存储与文档相关联的( )等信息。

A. 源文件信息 B. 文档注释 C. 文档的设计状态 D. 文档的分类

二、填空题

1. 站点定义向导的三个基本任务包括________、________和________。

2. 在定义远程站点时的访问方式有________、________、________、________和________。

3. “服务器模型”的服务器技术包括________、________、________、________、________、________和________。

4. “遮盖”功能用于在站点操作中排除指定的________。

5. 在规划站点的导航机制时，应注意：________和________。

三、上机题

1. 规划自己个人网站的目录结构。

2. 创建一个个人站点。

3. 设置个人站点的各项属性。

2024年2月11日发(作者：无鸿云)

第1章 Dreamweaver CS6简介

本章主要内容



Dreamweaver CS6的新增功能。

Dreamweaver CS6的安装、删除和启动。

Dreamweaver CS6的工作界面。

Dreamweaver CS6的一般操作。

本章重点



Dreamweaver CS6常用面板的使用方法。

Dreamweaver CS6的文件操作。

1.1 Dreamweaver CS6概述

1.2 Dreamweaver CS6的新增功能

相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。

1. 可响应的自适应网格版面

户可直观地创建复杂网页设计和页面版面，无须忙于编写代码。

2. 改善的FTP性能

利用重新改良的多线程 FTP 传输工具可节省上传大型文件的时间。而快速高效地上传网站文件可缩短制作时间。

3. Adobe Business Catalyst 集成

使用 Dreamweaver 中集成的 Business Catalyst 面板连接并编辑用户利用 Adobe

Business Catalyst(需另外购买)建立的网站。利用托管解决方案建立电子商务网站。

4. 增强型 jQuery 移动支持

使用更新的 jQuery 移动框架支持为 iOS 和 Android 平台建立本地应用程序。建立触及移动受众的应用程序，同时简化用户的移动开发工作流程。

5. 更新的 PhoneGap 支持

6. CSS转换

将 CSS 属性变化制成动画转换效果，可使网页设计栩栩如生，在用户处理网页元素和创建优美效果时，能保持对网页设计的精准控制。

7. 更新的实时视图

使用更新的“实时视图”功能可在发布前测试页面。“实时视图”现已使用最新版的

WebKit 转换引擎，能够提供绝佳的 HTML5 支持。

8. 更新的多屏幕预览面板

可利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板现在能够帮助用户检查HTML5的内容呈现。

9. 浏览器兼容性检查

图1-1 浏览器兼容性检查报告

第1章 Dreamweaver CS6简介

图1-2 绿色下划线标记

10. Adobe CSS Advisor

Adobe CSS Advisor 网站包含有关最新的CSS问题信息，在浏览器兼容性检查过程中可通过 Dreamweaver 用户界面直接访问该网站。CSS Advisor 不止是一个论坛、一个

WiKi页面或一个讨论组，它可以方便地为现有内容提供建议和改进意见，或者方便地添加新的问题，以使整个社区都能够从中受益。

11. CSS 布局

图1-3 CSS布局

12. 管理CSS

13. Adobe Device Central

的文本和图像，以便使显示效果与设备上出现的完全一样，从而简化了移动内容的创建过程。

14. Adobe Bridge CS6

15. CSS增强功能

Dreamweaver 8具有HTML格式化功能，但没有CSS格式化功能，而Dreamweaver

CS6增加了CSS的格式化功能。

1.3 Dreamweaver CS6的安装、卸载和启动

本节主要介绍如何安装和卸载Dreamweaver CS6，以及运行Dreamweaver CS6的方法。

1.3.1 系统要求

以下硬件和软件是运行Dreamweaver CS6所必需的。

对Microsoft Windows系统的要求如下。



处理器：Intel Pentium 4 或 AMD Athlon 64(或兼容处理器)。



操作系统：Windows XP SP2 或更高版本，Windows Vista Home Premium、Business、Enterprise 或 Ultimate(仅提供对32位版本的认证支持)。



RAM：512 MB。



硬盘：1.3 GB以上可用空间。



媒体：DVD-ROM驱动器。



Internet 连接(用于激活)。

对Macintosh系统的要求如下。



处理器：G4、G5 或基于 Intel 的 Mac。



操作系统：Mac OS 10.6或10.7版。



RAM：512 MB。



硬盘：1.8 GB以上可用空间。



媒体：DVD-ROM 驱动器。



Internet 连接(用于激活)。

1.3.2 安装Dreamweaver CS6

安装Dreamweaver CS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他

Adobe 应用程序，然后执行下列操作之一。



将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动，请双击光盘根目录中的文件(Windows)或Setup文件4

第1章 Dreamweaver CS6简介

(Mac OS)。



如果用户是从网上下载的软件，请打开文件夹并双击文件(Windows)

或Setup文件(Mac OS)，然后按屏幕说明进行操作。

下面是安装过程简介。

(1) 在“Adobe软件许可协议”界面(见图 1-4)中单击“接受”按钮，进入安装位置界面。

图1-4 “Adobe软件许可协议”界面

(2) 在安装位置界面(见图 1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。

图1-5 安装位置界面

图1-6 “安装”界面

(3) 进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。

图1-7 “安装完成”界面

1.3.3 卸载Dreamweaver CS6

若要卸载Dreamweaver CS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。



第1章 Dreamweaver CS6简介



按屏幕说明进行操作。

1.3.4 启动与退出Dreamweaver CS6

Dreamweaver C6的启动与退出方式有很多种，下面详细介绍。

1. Dreamweaver CS6的启动

Dreamweaver CS6启动方式有许多种，但一般用得较多的是以下两种。

1) 从“开始”菜单中启动

单击Windows桌面左下角的“开始”按钮，在“程序”子菜单中选择 “Adobe

Dreamweaver CS6”命令进行启动。

2) 用快捷方式启动

在桌面上单击Dreamweaver CS6的快捷启动图标，即可启动。Dreamweaver CS6的启动界面如图1-8所示。

图1-8 启动界面

首次启动Dreamweaver CS6后的主窗口界面如图1-9所示。如果不想每次启动时都显示该界面，则选中“不再显示”复选框即可。

图1-9 Dreamweaver CS6主窗口界面

2. Dreamweaver CS6的退出

退出Dreamweaver CS6 的方式有很多种，但平时用得最多的不外乎如下几种。



在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。



在 Dreamweaver CS6被激活状态下，直接按 Alt+F4 组合键。



单击Dreamweaver CS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关闭”命令，或者直接双击控制菜单图标。



单击Dreamweaver CS6主窗口右上角的“关闭”按钮。

1.4 Dreamweaver CS6的工作窗口

功能菜单

插入栏

文档工具栏

文档窗口功能面板

状态栏

属性面板

图1-10 Dreamweaver CS6的工作窗口

1.4.1 功能菜单

第1章 Dreamweaver CS6简介

图1-11 “文件”菜单

1.4.2 插入栏

“插入栏”包含用于创建和插入对象(如表格、AP元素和图像)的按钮。当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。

“插入栏”按以下选项卡进行组织。

1. “常用”选项卡

图1-12 “常用”选项卡

2. “布局”选项卡

图1-13 “布局”选项卡

3. “表单”选项卡

图1-14 “表单”选项卡

4. “数据”选项卡

“数据”选项卡可以插入 Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单，如图1-15所示。

图1-15 “数据”选项卡

5. Spry选项卡

Spry选项卡包含一些用于构建 Spry页面的按钮，包括 Spry数据对象和构件，如图1-16所示。

图1-16 Spry选项卡

6. jQuery Mobile选项卡

jQuery Mobile选项卡包含jQuery Mobile的页面、文本输入、按钮等元素，如图1-17所示。

图1-17 jQuery Mobile选项卡

7. InContext Editing选项卡

InContext Editing选项卡包含可编辑区域和创建重复区域的内容，如图1-18所示。

图1-18 InContext Editing选项卡

8. “文本”选项卡

第1章 Dreamweaver CS6简介

“文本”选项卡包含了多种特定的字符，如商标、引号等特殊字符，这些字符也可以以HTML的方式插入网页之中，如图1-19所示。

图1-19 “文本”选项卡

9. “收藏夹”选项卡

“收藏夹”选项卡用于将“插入栏”中最常用的按钮分组或将其组织到某一公共位置，如图1-20所示。

图1-20 “收藏夹”选项卡

1.4.3 文档工具栏

图1-21 文档工具栏



“显示代码视图”按钮：只在“文档窗口”中显示“代码”视图。

“显示设计视图”按钮：只在“文档窗口”中显示“设计”视图。

注意：如果处理的是 XML、JavaScript、Java、CSS或其他基于代码的文件类型，则不能在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。



“多屏幕”按钮：可以根据用户的需要选择屏幕的尺寸、大小和方向等。

“在浏览器中预览/调试”按钮：允许用户在浏览器中预览或调试文档，并可从弹出菜单中选择一个浏览器。

“文件管理”按钮：显示“文件管理”弹出菜单。

“W3C验证”按扭：包括验证当前文档、验证实时文档和设置W3C的功能，用于验证当前文档或选定的标签。

“可视化助理”按钮：用户可以使用各种可视化助理来设计页面。



注意：刷新过程也依赖于 DOM(文档对象模型)的代码功能，如选择代码块的开始标签或结束标签的能力。



“标题”文本框：允许为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已经有标题了，则该标题将显示在该区域中。

1.4.4 文档窗口

“文档窗口”用于显示当前文档，可以选择下列任一视图。



代码视图：一个用于编写和编辑 HTML、JavaScript、服务器语言代码(如 PHP或 ColdFusion标记语言(CFML))以及任何其他类型代码的手工编码环境。



拆分视图：使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。

1.4.5 状态栏

“文档窗口”底部的“状态栏”提供与正在创建的文档有关的其他信息，如图1-22所示。

图1-22 状态栏



第1章 Dreamweaver CS6简介

“选取工具”图标：用于启用或禁用手形工具。

“手形工具”图标：用于在“文档”窗口中单击并拖动文档。

“缩放工具和设置缩放比率”下拉列表框：可以为文档设置缩放比率。

“窗口大小”图标：用于将 “文档窗口”的大小调整到预定义或自定义的尺寸。

“文档大小和下载时间”图标：显示页面(包括所有相关文件，如图像和其他媒体文件)的预计文档大小和预计下载时间。

1.4.6 功能面板

Dreamweaver CS6的功能面板位于文档窗口边缘。常见的功能面板包括“属性”面板、“CSS样式”面板、“应用程序”面板、“文件”面板等。

1. “属性”面板

图1-23 “属性”面板

2. “CSS样式”面板

对“属性”窗格所作的任何更改都将立即应用，用户在操作的同时便可预览效果。

图1-24 “CSS样式”面板

3. “应用程序”面板

“应用程序”面板包含了数据绑定、数据库和服务器行为，是制作网页数据库时的重要面板，如图1-25所示。

4. “文件”面板

使用“文件”面板可查看和管理 Dreamweaver站点中的文件，如图1-26所示。

图1-25 “应用程序”面板

图1-26 “文件”面板

对于 Dreamweaver站点来说，用户还可以通过更改折叠面板中默认显示的视图(本地站点或远程站点视图)来对“文件”面板进行自定义。

第1章 Dreamweaver CS6简介

1.5 Dreamweaver CS6的参数设置

1.5.1 预览设置

图1-27 “首选参数”对话框

对话框中各选项的含义如下。



：单击该按钮，可向列表中添加新的浏览器。



：单击该按钮，可删除列表中选择的浏览器。



：单击该按钮，弹出“编辑浏览器”对话框，从中可修改选定的浏览器参数，如图1-28所示。

图1-28 “编辑浏览器”对话框

默认：选中“主浏览器”或“次浏览器”复选框，可设定选择的浏览器是否为主浏览器。



选项：选中“使用临时文件预览”复选框，可使用临时文件预览。



1.5.2 设置外部编辑器

设置外部编辑器示例：将Photoshop CS6设置为Dreamweaver CS6中.jpg、.jpe、.jpeg等文件的外部编辑器。设置外部编辑器的具体操作步骤如下。

(1) 依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，如图1-29所示。

图1-29 选择“文件类型/编辑器”选项

(2) 在“扩展名”列表框中选择.jpg .jpe .jpeg选项，然后单击“编辑器”列表框上方的按钮，打开“选择外部编辑器”对话框，如图1-30所示。

图1-30 “选择外部编辑器”对话框

第1章 Dreamweaver CS6简介

(3) 选择Photoshop程序文件，然后单击“打开”按钮退出对话框，此时在“编辑器”列表框中出现所加载的Photoshop程序。

(5) 如果要删除“编辑器”列表框中没用的编辑器，则选择编辑器名称后，单击“编辑器”列表上方的按钮即可。

1.5.3 编辑快捷键

Dreamweaver CS6为菜单命令、文档编辑、代码编辑、站点管理等操作设置了易用的快捷键。如果用户需要，则可以更改或添加自己的快捷键。

编辑快捷键示例：为“查看”|“代码”菜单命令添加快捷键，即按Backspace键，将Dreamweaver切换到“代码”视图。

编辑快捷键的具体操作步骤如下。

(1) 依次选择“编辑”|“快捷键”菜单命令，打开“快捷键”对话框，如图1-31所示。

图1-31 “快捷键”对话框

(2) 在“当前设置”下拉列表框中选择默认的Dreamweaver Standard选项，然后在“命令”下拉列表框中选择“菜单命令”选项。

(3) 在列表框中展开“查看”选项，选择其中的“代码”选项。

(4) 单击“快捷键”选项右侧的按钮，然后按Backspace键。此时在“按键”文本框中出现自动加载的快捷键符号BkSp。

(5) 单击“确定”按钮退出对话框，快捷键设置完毕。

同理，可以为切换设计视图添加快捷键，以便在两种视图间进行切换。

1.5.4 设置页面属性

对于页面的基本属性，例如标题、背景颜色和图像、文本及链接的颜色、边距等，在“页面属性”对话框中均可以设置。

依次选择“修改”|“页面属性”菜单命令，打开“页面属性”对话框，如图1-32所示。

图1-32 “页面属性”对话框

在此对话框中主要可以进行以下设置。

1. 更改页面标题

在“标题/编码”选项界面中可以更改标题、文档类型、编码等。

2. 设置背景图像或颜色

3. 设置文本或链接颜色

在“外观”和“链接”选项界面中可分别通过使用CSS样式表定义颜色。

1.6 Dreamweaver CS6的文件操作

1.6.1 新建文档

在Dreamweaver CS6中新建文档的具体操作步骤如下。

(1) 依次选择“文件”|“新建”菜单命令，打开“新建文档”对话框，如图1-33所示。

(2) 在“空白页”选项卡内的“页面类型”列表框中选择所要创建的文档类型，然后18

第1章 Dreamweaver CS6简介

在“布局”列表框中选择想要创建的样式，然后单击“创建”按钮即可。

图1-33 “新建文档”对话框

1.6.2 保存文档

图1-34 “另存模板”对话框

注意：模板文件应保存在站点内，因此应首先创建一个站点。

1.6.3 打开现有文档

1.7 课后习题

一、选择题

1. 下列( )是Dreamweaver CS6的新增功能。

A. 可响应的自适应网格版面 B. Adobe Business Catalyst 集成

C. 更新的 PhoneGap 支持 D. 以上都是

2. 以下( )不属于功能菜单。

A. 文件 B. 插入 C. 站点 D. 视图

3. 插入表格属于插入栏中的( )选项卡。

A. 常用 B. 布局 C. 表单 D. 文本

4. 在设计过程中，按( )键可以预览设计效果。

A. F2 B. F10

5. 下列( )不属于“资源”面板。

A. 图像 B. 颜色

二、填空题

1. 当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有________。

2. 在“文档窗口”中可以在________、________和________三种视图之间进行切换。

3. 当“文档窗口”在集成工作区布局中处于________状态时，它没有标题栏。

4. 当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的________。

5. 常见的功能面板有________、________、________和________等。

三、上机题

1. 根据书中所讲步骤安装Dreamweaver CS6。

2. 认识Dreamweaver CS6的工作窗口。

3. 熟悉Dreamweaver CS6的参数设置。

4. 熟悉Dreamweaver CS6中的文件操作。

C. F12

C. 模板

D. F11

D . 行为

第1章 Dreamweaver CS6简介

第2章站点的设计

本章主要内容



规划站点。

建立站点。

定义本地与远程站点。

设置测试服务器。

编辑站点。

本章重点



建立站点。

编辑站点。

2.1 站点的规划

2.1.1 确定站点目标

2.1.2 规划站点结构

所谓“良好的开端就是成功的一半”，认真地规划站点，能够避免日后出现管理文件混乱的局面。

一般的，在规划站点时应注意以下问题。

1. 本地站点和远程站点采用相同的结构

上进行完全相同的操作。

2. 用文件夹保存文档

为了便于对站点文件进行管理，可将站点文件分门别类地保存在站点根目录下的文件夹中，以文件夹方式组织站点文件，一目了然，如图2-1所示。

图2-1 站点结构图

2.1.3 规划站点内容

除了文本和图像等内容外，如果需要，则还可以加入多媒体元素等多姿多彩的内容，在丰富网站内容的同时，也可平添几分生趣。

2.1.4 规划站点的导航机制

一个优秀的站点应该具有明确的导航系统，避免用户在页面上迷失方向，找不到想要浏览的内容。

在规划站点的导航机制时应注意以下方面。

1. 建立返回首页的链接

2. 导航标题应明确

第1章 Dreamweaver CS6简介

新闻。

2.1.5 规划站点的风格

2.2 站点的创建

本节介绍在Dreamweaver CS6中创建站点的方法。

2.2.1 站点定义向导



使用下面的方法之一可以打开站点定义向导，即打开“站点设置对象”对话框(见图2-2)。

单击“文件”面板右侧蓝色的“管理站点”链接，在“管理站点”对话框中单击“新建站点”按钮。

在菜单栏中依次选择“站点”|“新建站点”命令。

在菜单栏中依次选择“站点”|“管理站点”命令，在“管理站点”对话框中单击“新建站点”按钮。

图2-2 “站点设置对象”对话框

从图2-2所示的对话框中可以查看站点设置的三个基本任务。



站点：可以为站点选择本地文件夹和名称。

服务器：选择承载Web上页面的服务器。

版本控制：设置访问、协议、服务器地址、存储库路径、服务器端口、用户名和密码等内容。

根据站点设置的提示即可完成基本站点的创建。

2.2.2 定义本地站点

本地站点就是编辑和存放站点文件的本地场所，在本地站点中完成站点的设计，才能上传到远程服务器，供网络上其他人浏览。

选择“站点设置对象”对话框中的“高级设置”选项，在 “本地信息”选项界面中设置本地文件夹，如图2-3所示。

图2-3 设置本地文件夹



在“本地信息”选项界面中可设置本地文件夹的下列属性。

“默认图像文件夹”文本框：指定放置站点图像文件的目录。

Web URL文本框：指定站点的URL地址。

启用缓存：选中该复选框，可创建本地缓存，这样有利于提高站点的链接和站点管理任务的速度，而且可以有效地使用“资源”面板管理站点资源。

2.2.3 定义远程站点

远程站点一般位于运行Web服务器的计算机上，用户可以使用多种方案定义远程站点。

1. FTP方式

以FTP方式定义远程站点的操作步骤如下。

(1) 在“站点管理”对话框中双击已建立的站点，在弹出的“站点设置对象”对话框中选择“服务器”选项，如图2-4所示。

第1章 Dreamweaver CS6简介

图2-4 选择“服务器”选项

(2) 单击对话框左下角的“添加新服务器”按钮，出现相应界面，如图2-5所示。

图2-5 “添加新服务器”界面

在此界面的“基本”选项卡中需要设置以下信息。



服务器名称：为服务器命名。



连接方法：选择“FTP”选项。



FTP地址：输入远程的FTP主机名称，如，或者IP地址203.171.236.155。一定要输入有权访问的空间的域名地址，否则会连接不上。



端口：可以根据服务器提供商的要求来填写。



用户名：输入连接到FTP服务器的注册名。



密码：输入连接到FTP服务器的密码。



测试：单击“测试”按钮可以检查是否能够成功地连接到服务器上。如果不能，则需修改前面的选项。



Web URL：输入URL地址，如/baike369/。

设置完的效果如图2-6所示。

图2-6 设置“基本”选项卡

图2-7 “站点设置对象”对话框

(4) 单击“保存”按钮，出现如图2-8所示的提示对话框。

图2-8 提示对话框

(5) 单击“确定”按钮，然后再单击“管理站点”中的“完成”按钮，即完成了定义远程站点的操作。

在“站点设置对象”对话框中，除了一些基本的设置之外还有“高级”选项卡，如图2-9所示。

第1章 Dreamweaver CS6简介

图2-9 “高级”选项卡



其设置说明如下。

维护同步信息：保持服务器与本地信息同步。

保存时自动将文件上传到服务器：选中该复选框，保存文件时自动将其上传到服务器。

打开文件之前取出：在打开文件时，自动设置为取出。

取出名称：输入取出文件的人员名称，输入后在站点窗口中取出文件旁将显示该名称。

电子邮件地址：输入取出人员的电子邮件地址。

提示：文件的“取出”功能在多人联合设计的环境中特别有用，通过设置文件的只读属性，可以避免工作组中的其他人修改该文件。

图2-10 设置文件取出功能

2. 本地/网络方式

定义远程站点还可以选择“本地/网络”方式，即在图2-5所示的界面中，在“连接方法”下拉列表框中选择“本地/网络”选项，如图2-11所示。

图2-11 “本地/网络”连接方式



在“基本”和“高级”选项卡中可设置下列属性。

服务器文件夹：单击按钮选择存放站点文件的文件夹，也可以在文本框中直接输入该文件夹的路径。

Web URL：输入URL地址。

3. RDS方式

图2-12 RDS访问方式

单击图2-12中的“设置”按钮，弹出的“配置RDS服务器”对话框，如图2-13所示。

图2-13 “配置RDS服务器”对话框

第1章 Dreamweaver CS6简介



在“配置RDS服务器”对话框中可设置如下属性。

主机名：输入提供Web服务的主机地址。

端口：输入主机端口号。

完整的主机目录：输入远程根文件夹。

用户名：输入RDS用户名。

密码：输入RDS密码。选中“保存”复选框，Dreamweaver即可保存该密码。

“高级”选项卡的设置内容与前述一致，不再赘述。

4. SFTP方式

图2-14 SFTP连接方式



在“基本”选项卡中可设置下列属性。

SFTP地址：输入SFTP服务器上连接目录的完整 URL。

端口：可以根据服务器提供商的要求来填写。

用户名：输入SFTP的用户名。

密码：输入SFTP的登录密码。

“高级”选项卡的设置见前文。

5. WebDAV方式

图2-15 WebDAV连接方式

在“基本”选项卡中可设置下列属性。

URL：输入WebDAV服务器上连接目录的完整 URL，包括其协议、端口及目录。

用户名：输入登录服务器的用户名。

密码：输入登录服务器的密码。

保存：选中此复选框，Dreamweaver将保存登录密码。

Web URL：输入网站站点的网址。

“高级”选项卡的设置见前文。



2.3 测试服务器的设置

JavaScript、ASP VBScript、 C#、 VB、ColdFusion、JSP、PHP

MySQL。

图2-16 设置测试服务器

2.4 其他属性的设置

在“站点设置对象”对话框的“高级设置”选项列表中还可以定义“遮盖”、“设计备注”、“文件视图列”等站点的基本属性。

2.4.1 启用遮盖功能

遮盖功能用于在站点操作中排除指定的文件夹和文件。例如，在设计网站过程中，如30

第1章 Dreamweaver CS6简介

果不想每次都上传Flash文件，则可以使用站点的“遮盖”功能遮盖包含Flash文件的文件夹，这样，在执行站点操作时就可排除Flash文件。

在“站点设置对象”对话框中的“高级设置”选项列表中选择“遮盖”选项，打开与遮盖相关的选项卡，如图2-17所示。

图2-17 “遮盖”选项卡



“遮盖”选项卡的具体设置如下。

启用遮盖：选中此复选框，可启用站点的遮盖功能。

遮盖具有以下扩展名的文件：选中该复选框后，在其下面的文本框中输入需要遮盖文件的扩展名，例如.fla。

2.4.2 设置“设计备注”功能

“设计备注”功能用于存储与文档相关联的信息，包括源文件信息、文档注释、文档的设计状态等。

在“站点设置对象”对话框的“高级设置”选项列表中选择“设计备注”选项，打开与设计备注相关的选项卡，如图2-18所示。

图2-18 “设计备注”选项卡

“设计备注”选项卡的具体设置如下。

维护设计备注：选中此复选框，可启用设计备注功能。

启用上传并共享设计备注：选中此复选框，可将“设计备注”和“文件视图列”与其他设计人员共享。



2.4.3 设置“文件视图列”功能

通过设置，可以更改“文件”面板中的文件视图列，例如新增或删除列、调整列的顺序。

在“站点设置对象”对话框中的“高级设置”选项列表中选择“文件视图列”选项，打开与文件视图列相关的选项卡，如图2-19所示。

图2-19 “文件视图列”选项卡

在“文件视图列”选项卡中，可新增或删除视图列。单击“添加新列”按钮如图2-20所示的界面。

，出现

图2-20 “添加新列”界面



具体设计如下。

列名称：在该文本框中输入新增列的名称。

与设计备注关联：在该下拉列表中选择一个值，或者输入新值。



第1章 Dreamweaver CS6简介

对齐：在该下拉列表框中确定列中文本的对齐方式。

显示：选中该复选框，可显示列。

与该站点所有用户共享：选中该复选框，可与连接到远程站点的其他用户共享该列。

注意：必须将一个新列与设计备注关联，否则，“文件”面板中不会显示数据。

“文件视图列”选项卡中的其他设置如下。

编辑按钮：编辑现有列的名称、对齐方式等内容。

调整按钮：调整列的顺序。



【边学边练2-1】建立站点

建立一个名为My Test的站点，保存位置为D:DWBookch2，具体操作步骤如下。

(1) 依次选择“站点”|“新建站点”命令，打开“站点设置对象”对话框，如图2-21所示。

图2-21 “站点设置对象”对话框

(2) 设置站点的名称为My Test，并设置本地站点文件夹，如图2-22所示。

图2-22 设置站点

(3) 单击“保存”按钮，完成本站点的创建。在“文件”面板中可显示出所创建的站点，如图2-23所示。

图2-23 “文件”面板

2.5 站点的编辑

建立好站点之后，根据需要可随时进行编辑，同时可以删除已创建的站点。下面介绍编辑站点的具体操作步骤。

(1) 在“文件”面板的下拉菜单中选择“管理站点”选项，如图2-24所示。

(2) 打开“管理站点”对话框，在站点列表中选择要编辑的站点，单击“编辑当前选定的站点”按钮，如图2-25所示。

图2-24 选择“管理站点”选项

图2-25 “管理站点”对话框

(3) 打开“站点设置对象”对话框，修改相关参数，完成后单击“保存”按钮，如图2-26所示。

(4) 单击“管理站点”对话框中的“完成”按钮，完成站点编辑。

(5) 如果要删除站点，则在“管理站点”对话框中单击“删除当前选定的站点”按钮即可。

第1章 Dreamweaver CS6简介

图2-26 修改相关参数

2.6 课后习题

一、选择题

1. 下列( )不属于设置测试服务器的访问方式。

A. FTP B. WebDAV

C. RDS D. 以上都不是

2. 打开站点定义向导的方法是( )。

A. 单击“文件”面板右侧蓝色的“管理站点”链接，在“管理站点”对话框中单击“新建站点”按钮

B. 在菜单栏中依次选择“站点”|“新建站点”命令

C. 在菜单栏中依次选择“站点”|“管理站点”命令，在“管理站点”对话框中单击“新建站点”按钮

D. 以上都可行

3. 在创建站点时启用缓存的好处是( )。

A. 有利于提高站点的链接和站点管理任务的速度，而且可以有效地使用“资源”面板管理站点资源

B. 仅有利于提高站点的链接速度

C. 仅能更有效地使用“资源”面板管理站点资源

D. 仅有利于提高站点的管理任务的速度

4. 文件的“取出”功能在多人联合设计的环境中非常有用，通过设置文件的只读属性，可避免工作组中的其他人( )。

A. 修改该文件 B. 读取该文件 C. 修改和读取该文件 D. 以上都不是

5. “设计备注”功能用于存储与文档相关联的( )等信息。

A. 源文件信息 B. 文档注释 C. 文档的设计状态 D. 文档的分类

二、填空题

1. 站点定义向导的三个基本任务包括________、________和________。

2. 在定义远程站点时的访问方式有________、________、________、________和________。

3. “服务器模型”的服务器技术包括________、________、________、________、________、________和________。

4. “遮盖”功能用于在站点操作中排除指定的________。

5. 在规划站点的导航机制时，应注意：________和________。

三、上机题

1. 规划自己个人网站的目录结构。

2. 创建一个个人站点。

3. 设置个人站点的各项属性。

USB迷 | 专注于互联网分享

中文版+Dreamweaver+CS6网页设计教程_IT168

与本文相关的文章

评论列表 (0)