中文+Dreamweaver+CS6网页设计教程IT168文库.docx

中文+Dreamweaver+CS6网页设计教程IT168文库第1章 Dreamweaver CS6简介 Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。 本章主要内容 l l l l Dreamweaver CS6的新增功能。 Dreamweaver CS6的安装、删除和启动。 Dreamweaver CS6的工作界面。 Dreamweaver CS6的一般操作。 本章重点 l l 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 浏览器兼容性检查报告 2 第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 页面 3 的文本和图像，以便使显示效果与设备上出现的完全一样，从而简化了移动内容的创建过程。 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系统的要求如下。 l 处理器：Intel Pentium 4 或 AMD Athlon 64(或兼容处理器)。 l 操作系统：Windows XP SP2 或更高版本，Windows Vista Home Premium、Business、Enterprise 或 Ultimate(仅提供对32位版本的认证支持)。 l RAM：512 MB。 l 硬盘：1.3 GB以上可用空间。 l 媒体：DVD-ROM驱动器。 l Internet 连接(用于激活)。 对Macintosh系统的要求如下。 l 处理器：G4、G5 或基于 Intel 的 Mac。 l 操作系统：Mac OS 10.6或10.7版。 l RAM：512 MB。 l 硬盘：1.8 GB以上可用空间。 l 媒体：DVD-ROM 驱动器。 l Internet 连接(用于激活)。 1.3.2 安装Dreamweaver CS6 安装Dreamweaver CS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。 l 将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动，请双击光盘根目录中的Setup.exe文件(Windows)或Setup文件4 第1章 Dreamweaver CS6简介 (Mac OS)。 l 如果用户是从网上下载的软件，请打开文件夹并双击Setup.exe文件(Windows) 或Setup文件(Mac OS)，然后按屏幕说明进行操作。 下面是安装过程简介。 (1) 在“Adobe软件许可协议”界面(见图 1-4)中单击“接受”按钮，进入安装位置界面。 图1-4 “Adobe软件许可协议”界面 (2) 在安装位置界面(见图 1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。 图1-5 安装位置界面 5 图1-6 “安装”界面 (3) 进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。 图1-7 “安装完成”界面 1.3.3 卸载Dreamweaver CS6 若要卸载Dreamweaver CS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。 l 在Windows XP系统中，打开 Windows“控制面板”窗口，然后双击“添加或删除程序”图标，打开“添加或删除程序”窗口。选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说明进行操作。 l 在 Windows Vista系统中，打开 Windows“控制面板”窗口，然后双击“程序和功能”图标，在弹出的界面中选择要卸载的产品，单击“更改/删除”按钮，然后6 第1章 Dreamweaver CS6简介 l 按屏幕说明进行操作。 在 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主窗口界面 7 2. Dreamweaver CS6的退出 退出Dreamweaver CS6 的方式有很多种，但平时用得最多的不外乎如下几种。 l 在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。 l 在 Dreamweaver CS6被激活状态下，直接按 Alt+F4 组合键。 l 单击Dreamweaver CS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关闭”命令，或者直接双击控制菜单图标。 l 单击Dreamweaver CS6主窗口右上角的“关闭”按钮。 1.4 Dreamweaver CS6的工作窗口 Dreamweaver CS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等，如图1-10所示。合理使用这几个板块的相关功能，可以使设计工作成为一个高效、便捷的过程。 功能菜单 插入栏 文档工具栏 文档窗口 功能面板 状态栏 属性面板 图1-10 Dreamweaver CS6的工作窗口 1.4.1 功能菜单 所谓功能菜单，就是一些能够实现一定功能的菜单命令。Dreamweaver CS6拥有“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等10个菜单分类，单击这些菜单可以打开其子菜单，如图1-11所示。Dreamweaver CS6的菜单功能极其丰富，几乎涵盖了所有的功能操作。 8 第1章 Dreamweaver CS6简介 图1-11 “文件”菜单 1.4.2 插入栏 “插入栏”包含用于创建和插入对象(如表格、AP元素和图像)的按钮。当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。 这些按钮被组织到若干选项卡中，用户可以单击“插入栏”顶部的相应选项卡进行切换。当启动Dreamweaver CS6时，系统会默认打开用户上次使用的选项卡。 某些选项卡具有带弹出菜单的按钮。从弹出菜单中选择一个命令时，该命令将成为该按钮的默认操作。例如，如果从 “图像”按钮的弹出菜单中选择“图像占位符”命令，下次单击“图像”按钮时，Dreamweaver CS6会自插入一个图像占位符。每当从按钮的弹出菜单中选择一个新命令时，该按钮的默认操作都会改变。 “插入栏”按以下选项卡进行组织。 1. “常用”选项卡 “常用”选项卡包含了最常用的对象，最主要的功能是插入各项最常用的基本网页设计及排版组件，如图像按钮、表格按钮、插入媒体等，如图1-12所示。 图1-12 “常用”选项卡 2. “布局”选项卡 “布局”选项卡包含了表格按钮、DIV 标签等标签，如图1-13所示，可以帮助用户快速地在网页中绘制不同的表格和框架。这与以往版本的Dreamweaver 有很大的区别。 9 图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选项卡 10 8. “文本”选项卡 第1章 Dreamweaver CS6简介 “文本”选项卡包含了多种特定的字符，如商标、引号等特殊字符，这些字符也可以以HTML的方式插入网页之中，如图1-19所示。 图1-19 “文本”选项卡 9. “收藏夹”选项卡 “收藏夹”选项卡用于将“插入栏”中最常用的按钮分组或将其组织到某一公共位置，如图1-20所示。 图1-20 “收藏夹”选项卡 1.4.3 文档工具栏 “文档工具栏”中包含一些按钮，使用这些按钮可以在“代码”视图、“设计”视图以及“拆分”视图间快速切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-21所示。 图1-21 文档工具栏 l l l “显示代码视图”按钮：只在“文档窗口”中显示“代码”视图。 “显示代码视图和设计视图”按钮：将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时，“文档”左侧显示“代码”视图，右侧显示“设计”视图。 “显示设计视图”按钮：只在“文档窗口”中显示“设计”视图。 注意：如果处理的是 XML、JavaScript、Java、CSS或其他基于代码的文件类型，则不能在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。 l l l l l l “多屏幕”按钮：可以根据用户的需要选择屏幕的尺寸、大小和方向等。 “在浏览器中预览/调试”按钮：允许用户在浏览器中预览或调试文档，并可从弹出菜单中选择一个浏览器。 “文件管理”按钮：显示“文件管理”弹出菜单。 “W3C验证”按扭：包括验证当前文档、验证实时文档和设置W3C的功能，用于验证当前文档或选定的标签。 “检查浏览器兼容性”按钮：用于检查用户的 CSS是否对于各种浏览器均兼容，包括检查浏览器的兼容性、显示浏览器出现的问题、报告浏览器呈现的问题等。 “可视化助理”按钮：用户可以使用各种可视化助理来设计页面。 11 l “刷新设计视图”按钮：在“代码”视图中对文档进行更改后，单击此按钮刷新文档的 “设计”视图，因为只有在执行某些操作(如保存文件或单击该按钮)之后，在“代码 ”视图中所作的更改才会自动显示在 “设计”视图中。 注意：刷新过程也依赖于 DOM(文档对象模型)的代码功能，如选择代码块的开始标签或结束标签的能力。 l “标题”文本框：允许为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已经有标题了，则该标题将显示在该区域中。 1.4.4 文档窗口 “文档窗口”用于显示当前文档，可以选择下列任一视图。 l 设计视图：一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图以在处理文档时显示动态内容。 l 代码视图：一个用于编写和编辑 HTML、JavaScript、服务器语言代码(如 PHP或 ColdFusion标记语言(CFML)以及任何其他类型代码的手工编码环境。 l 拆分视图：使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。 当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果用户对文档作了更改但尚未保存，则 Dreamweaver会在文件名后显示一个星号。 当“文档窗口”在集成工作区布局(仅适用于Windows系统)中处于最大化状态时，它没有标题栏，页面标题以及文件的路径和文件名则显示在主工作区窗口的标题栏中。并且“文档窗口”顶部会出现选项卡，上面显示了所有打开文档的文件名。若要切换到某个文档，则可单击它的选项卡。 1.4.5 状态栏 “文档窗口”底部的“状态栏”提供与正在创建的文档有关的其他信息，如图1-22所示。 图1-22 状态栏 l “标签选择器”图标：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。单击“标签选择器”图标可以选择文档的整个正文。若要在标签选择器中设置某个标签的 class 或 id 属性，则可右击(适用于Windows系统)或按住Ctrl键并单击(适用于Macintosh系统)该标签，然后从弹出的快捷菜单中选择一个“类”或 ID。 12 l l l l l 第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属性。 对“属性”窗格所作的任何更改都将立即应用，用户在操作的同时便可预览效果。 13 图1-24 “CSS样式”面板 3. “应用程序”面板 “应用程序”面板包含了数据绑定、数据库和服务器行为，是制作网页数据库时的重要面板，如图1-25所示。 4. “文件”面板 使用“文件”面板可查看和管理 Dreamweaver站点中的文件，如图1-26所示。 图1-25 “应用程序”面板 图1-26 “文件”面板 在“文件”面板中查看站点、文件或文件夹时，可以查看区域的大小，还可以展开或折叠“文件”面板。当“文件”面板折叠时，它以文件列表的形式显示本地站点、远程站点或测试服务器的内容。在展开时，它显示本地站点和远程站点或者显示本地站点和测试服务器。“文件”面板还可以显示本地站点的视觉站点地图。 对于 Dreamweaver站点来说，用户还可以通过更改折叠面板中默认显示的视图(本地站点或远程站点视图)来对“文件”面板进行自定义。 14 第1章 Dreamweaver CS6简介 1.5 Dreamweaver CS6的参数设置 本节介绍Dreamweaver CS6的参数设置。在Dreamweaver CS6中通过设置相关参数，可以改变操作环境，从而使其更加符合设计者的设计需要。常见的设置有“预览设置”、“设置外部编辑器”、“编辑快捷键”、“设置页面属性”等，其他的参数设置和这些方法相同，用户可以根据需要自行设置。 1.5.1 预览设置 在设计过程中，用户需要随时在浏览器中打开设计的文档，以便查看其设计效果和及时进行更改和完善。Dreamweaver CS6提供了在设计过程中预览的功能，用户只需使用菜单命令或快捷键就可以在浏览器中打开设计中的文档。 依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“在浏览器中预览”选项，右侧即出现相关界面，如图1-27所示。 图1-27 “首选参数”对话框 对话框中各选项的含义如下。 l ：单击该按钮，可向列表中添加新的浏览器。 l ：单击该按钮，可删除列表中选择的浏览器。 l ：单击该按钮，弹出“编辑浏览器”对话框，从中可修改选定的浏览器参数，如图1-28所示。 图1-28 “编辑浏览器”对话框 15 默认：选中“主浏览器”或“次浏览器”复选框，可设定选择的浏览器是否为主浏览器。 l 选项：选中“使用临时文件预览”复选框，可使用临时文件预览。 将Internet Explorer(简称IE)设置为默认浏览器的快捷键为F12。在设计过程中，如果想预览页面效果，可选择“文件”|“在浏览器中预览”命令或按快捷键F12。 l 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 “选择外部编辑器”对话框 16 第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 设置页面属性 对于页面的基本属性，例如标题、背景颜色和图像、文本及链接的颜色、边距等，在“页面属性”对话框中均可以设置。 17 依次选择“修改”|“页面属性”菜单命令，打开“页面属性”对话框，如图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的相关命令清除无用的标签。 19 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中的文件操作。 20 C. F12 C. 模板 D. F11 D . 行为 第1章 Dreamweaver CS6简介 第2章 站点的设计 拥有自己的网站，可以说是每个网页制作者的梦想。利用Dreamweaver CS6可以首先在本地计算机的磁盘上建立一个本地站点，控制站点结构，管理站点中的每个文件。在完成对站点文件的编辑后，可以用Dreamweaver CS6将本地站点上传到Internet上。 本章主要内容 l l l l l 规划站点。 建立站点。 定义本地与远程站点。 设置测试服务器。 编辑站点。 本章重点 l l 建立站点。 编辑站点。 2.1 站点的规划 在创建站点之前，应合理地规划站点的目标、结构、内容、导航机制以及站点的整体风格等。合理的规划，不仅有利于避免设计的盲目性，而且有利于日后管理众多的站点文件。 2.1.1 确定站点目标 一个好的站点，应该具有明确的目标。目标可谓是站点设计的灵魂与导向标，能够引导设计者成功地设计站点。站点的目标因主题而异，例如，娱乐性站点与信息类站点的目标与风格会迥然不同，因此在设计站点之前应该明确站点的目标，才能有条不紊地设计和管理好站点文件。 2.1.2 规划站点结构 所谓“良好的开端就是成功的一半”，认真地规划站点，能够避免日后出现管理文件混乱的局面。 一般的，在规划站点时应注意以下问题。 1. 本地站点和远程站点采用相同的结构 将本地站点和远程站点设置成相同的结构，能有利于站点的维护和管理。当本地站点设置完成后，再利用Dreamweaver CS6将本地站点上的文件及文件夹上传到远程服务器上。这样在本地站点的文件及文件夹上进行操作，相当于在远程站点相应的文件及文件夹21 上进行完全相同的操作。 2. 用文件夹保存文档 为了便于对站点文件进行管理，可将站点文件分门别类地保存在站点根目录下的文件夹中，以文件夹方式组织站点文件，一目了然，如图2-1所示。 图2-1 站点结构图 例如，在站点根目录下创建image文件夹，存放站点中的图像文件；用media文件夹存放站点中的Flash、Shockwave、MIDI等文件。如果图像文件较多，还可以在该文件夹中新建几个文件夹，将图像文件重新分门别类，方便存取图像文件。 2.1.3 规划站点内容 站点的内容一定要丰富。将各种不同的内容划分为几个板块，例如，生活、旅游、健康、IT等，这样既可以方便网站设计者进行设计，又能方便用户获取相关信息。 除了文本和图像等内容外，如果需要，则还可以加入多媒体元素等多姿多彩的内容，在丰富网站内容的同时，也可平添几分生趣。 此外，要注意使用合理的文件名称，尽量避免使用中文名称，因为大多数的软件平台都是基于英文的；有的Web服务器是区分大小写的，因此一般都采用小写字母命名站点中的文件。 2.1.4 规划站点的导航机制 一个优秀的站点应该具有明确的导航系统，避免用户在页面上迷失方向，找不到想要浏览的内容。 在规划站点的导航机制时应注意以下方面。 1. 建立返回首页的链接 一般在站点的每个页面上都应有返回首页的链接，这样可以方便用户回到开始的地方，寻找新的导航目标。同时，当用户在页面上迷失方向时，可以返回到首页重新开