IT图书：《中公版·实用Web前端开发：零基础学Dreamweaver》精彩书摘_

《中公版·实用Web前端开发：零基础学Dreamweaver》主要针对网页制作领域的初学者，从Dreamweaver工作界面开始介绍，逐步深入，以综合实例讲解结尾。具体内容包括DreamweaverCC入门、站点的创建与管理、HTML基础知识、CSS样式、DIV+CSS网页布局、文字和段落等在网页中的应用、使用表格布局网页、创建超链接、使用图片修饰网页、创建多媒体对象、表单应用、模板和库等的应用、使用行为创建网页特效、网站的发布与推广、综合实例。同时，本书每一章都配有二维码视频进行重难点讲解，力求让读者轻松掌握并学以致用。

IT图书：《中公版·实用Web前端开发：零基础学Dreamweaver》精彩书摘

第1章DreamweaverCC入门

DreamweaverCC是Adobe公司推出的一款拥有可视化编辑界面的网页制作与管理软件的最新版本，其提供了强大的可视化布局工具、应用开发功能和代码编辑支持，使设计和开发的人员能够有效地创建非常吸引人的、基于标准的网站和应用。业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。本章将带领读者认识DreamweaverCC。

1.1DreamweaverCC功能概述

DreamweaverCC使用所见即所得的接口，亦有HTML(HyperTextMarkupLanguage，超文本标记语言)编辑的功能，其目前有Mac和Windows系统的版本。

DreamweaverCC提供了功能强大的站点管理工具，通过它可以轻松实现站点名称及所在路径定义、远程服务器连接、版本控制等功能，并且可以在这个基础上实现文件管理等功能。

1.1.1主要功能

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

1.1.2新增功能

DreamweaverCC包含新增功能预览和新功能操作视频，视频讲解了新功能的操作方法。该版本也提供选项，让用户略过预览，直接开始工作。

新功能视频解说是在用户安装或更新DreamweaverCC时，或删除偏好设置并重新启动DreamweaverCC时显示，也可以通过执行“帮助”>“新增功能视频”菜单命令随时查看。

相较于以前的版本，DreamweaverCC新增了以下功能。

(1)实时视图编辑功能

用户可以直接在实时视图中编辑并查看设计，连接或退出浏览器的时间会更短。实时视图可以使用全新的基于Chromium的渲染引擎，因此在DreamweaverCC和常用浏览器中显示的内容看起来一样。实时视图编辑功能包括快速属性检查器、元素的显示方式、现场查看属性检查器等。

(2)元素快速视图

借助新的“元素快速视图”，用户可以在单个列表视图中查看HTML元素，并能轻松地重新排列、复制和删除。

(3)使用“CSS设计器”面板

用户可以使用新的“CSS设计器”面板应用和创建基于标准的CSS布局、颜色、字体、文本以及快速响应的设计。“CSS设计器”面板的边框控制项界面增强，标签控制项可帮助用户以简单而直接的方式，设置四面边框属性，可避免同时看到所有值，以减少混淆的情形。新的面板支持从一个选择器复制样式并贴入另一个选择器中，用户可以复制所有样式，也可以仅复制特定样式类别，支持快速编辑文字块。用户还可以在其中指定属性的速记代码，如边界、间距、边框和边框半径。

(4)使用jQueryWidget

用户可以使用jQueryUI将Widget从“插入”面板拖放到Web项目以制作进度条、滑块、菜单和其他有用的组件。

(5)从PSD中提取资源和CSS

用户可以复制PSD复合元素中的所有或特定CSS属性，并直接将这些样式粘贴到CSS设计器、实时视图的元素显示中，或直接粘贴到用户的代码(CSS源或HTML文档)中，然后在PSD复合中选择的元素的CSS属性会自动填充到代码提示。如果希望使用编码，则可以使用这些代码提示将CSS属性提取到代码中。Extract提供了完整独立的解决方案，可供从PSD复合中提取样式信息和资源，无须频繁地在Photoshop和DreamweaverCC之间来回切换。

(6)使用Typekit设计高品质字体

在网页中能够使用的默认字体并不多，如果需要使用特殊的字体效果，通常都是将特殊文字制作成图片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能，在网页中可以加载Adobe提供的EdgeWeb字体，从而在网页中实现特殊字体效果。执行“修改”>“管理字体”命令，在弹出的“管理字体”对话框中选择AdobeEdgeWebFonts选项卡，即可使用Adobe提供的EdgeWeb字体。

(7)新增EdgeAnimate插入动画

在全新的DreamweaverCC中可以插入AdobeEdgeAnimate动画(OAM文件)，默认情况下，用户在DreamweaverCC中插入AdobeEdgeAnimate动画后，会自动在当前站点的根目录中生成一个名为edgeanimate_assets的文件夹，将AdobeEdgeAnimate动画的提取内容放入该文件夹中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate动画，可以单击“插入”面板“媒体”选项卡中的“EdgeAnimate作品”按钮。

(8)在Behance上分享作品

用户可以在Behance上分享项目，并得到来自世界各地的即时反馈。

(9)使用CreativeCloud存储作品

用户可以通过CreativeCloud随时随地保存并访问自己的作品，也可以使用AdobeCreativeCloud，检查并安装DreamweaverCC扩展功能。

1.2DreamweaverCC的工作界面

DreamweaverCC的工作界面主要由菜单栏、自定义快捷键、工具栏、文档窗口、属性面板、面板组、文档状态栏等构成，如图1-1所示。

图1-1

1.2.1菜单栏

菜单栏包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单，如图1-2所示。菜单栏上的每个菜单选项下面都有多个子菜单，每一个菜单命令都可以进行一些相关的命令执行或属性的设置。

图1-2

1.2.2工具栏

工具栏中包含一些按钮，用来在“代码”视图、“拆分”视图以及“设计”视图、“实时视图”间进行切换。此外，工具栏还包含一些与文档操作有关的常用命令和选项，如图1-3所示。

图1-3

●“代码”视图的按钮为，用于只在文档窗口中显示“代码”视图。

●同时显示“代码”视图和“设计”视图的按钮为，选中后文档窗口将拆分为“代码视图”和“设计视图”。其中文档窗口中左侧为“代码”视图，右侧为“设计”视图。

●“设计”视图的按钮为，用于只在文档窗口中显示“设计”视图。

●“实时视图”的按钮为，其中显示的内容与用户在浏览器中预览的效果一样。

●“在浏览器中预览/调试”按钮为，可根据用户需求，在用户选择的浏览器中进行预览或调试文档。

●“标题文本框”图标为，用于为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已有标题，则该标题将显示于该区域中。

●“文件管理”按钮为，用于对文件进行管理，如对文件进行获取、取出、上传、存回等操作。

1.2.3文档窗口

文档窗口用于显示当前的文档，包括“设计”视图、“代码”视图、“拆分”视图、“实时视图”。

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

●“代码”视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。

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

●实时视图：该视图使用户可以直接在文档窗口预览设计效果。

1.2.4“属性”面板

“属性”面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。在“属性”面板中包括两种选项，一种是“HTML”选项，将默认显示文本的格式、样式和对齐方式等属性。另一种是“CSS”选项，单击属性面板中的“CSS”选项，可以在“CSS”选项中设置各种属性。“属性”面板显示当前选定的对象或文本的属性，也可以在这里直接修改属性。如图1-4所示。

图1-4

1.2.5面板组

DreamweaverCC中的面板可以自由组合成面板组。每个面板组都可以展开和折叠，并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板，而不会使工作区变得混乱，如图1-5所示。

图1-5

1.2.6文档状态栏

文档状态栏可以提供与正在创建的文档有关的其他信息，如图1-6所示。

图1-6

●“标签选择器”图标为，单击图标可以选择文档中属于该标签的整个正文。图标为“元素快速视图”，用于显示环绕当前选定内容的标签的层次结构。通过单击该层次结构中的标签，可以选择该标签及其全部内容。

●“窗口大小”图标为，可以调整文档窗口的大小，使其达到预定义或自定义的尺寸。

1.3自定义工作区

DreamweaverCC包括两个主要的工作区，用于适应多种不同的计算机配置和各种工作流程。用户可以根据自己的喜好，调整DreamweaverCC中的编码环境，使之适合自己的习惯。如果任何预设的工作区都不能完全满足用户需要，则可以自定义工作区。

1.3.1浏览工作区