Adobe Dreamweaver CC 2017 中文版经典教程

版权信息

书名：Adobe Dreamweaver CC 2017 中文版经典教程

ISBN：978-7-115-47570-1

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版权

著　　　　[美] 吉姆•迈瓦尔德（Jim Maivald ）

译　　　　刘春雷　汪兰川　吴明洲

责任编辑　赵　轩

执行编辑　陈聪聪

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(76010)81055315

版权声明

Authorized translation from the English language edition, entitled Adobe Dreamweaver CC Classroom in a Book® (2017 release), 9780134664286 by Jim Maivald, published by Pearson Education, Inc., publishing as Adobe Press, Copyright © 2017 Pearson Education Inc.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.

CHINESE SIMPLIFIED language edition published by PEARSON EDUCATION ASIA LTD., and POSTS & TELECOMMUNICATIONS PRESS Copyright © 2017.

内容提要

本书由Adobe公司的专家编写，是Adobe Dreamweaver CC软件的官方指定培训教材。全书共包含14课和一个附录，每一课先给出要介绍的知识点，然后借助具体的示例进行讲解，步骤详细，重点明确，手把手教你进行实际操作。全书是一个有机的整体，涵盖了Dreamweaver CC的基础知识、HTML基础、CSS基础、创建页面布局、使用层叠样式表、使用模板、处理文本、处理图像、处理导航、创建交互式页面、使用Flash、处理表单、把创建的页面和站点发布到Web上以及为移动设备设计Web站点等内容，并在适当的地方穿插介绍了Dreamweaver CC中的功能。

前言

Adobe® Dreamweaver CC是行业领先的Web内容制作程序。无论您是为了生活还是为了自己的事业而创建Web站点，Dreamweaver都提供了您所需的所有工具，帮助您达到专业水平。

关于经典教程

本书是在Adobe产品专家的支持下开发的图像和出版软件的官方培训系列教材中的一种。

精心合理的课程设计，让您可以按自己的进度来学习。如果您是Dreamweaver的初学者，您将会学到使用这款软件的基础知识。如果您是经验丰富的用户，那么您将会发现经典教程讲解了许多高级特性，包括使用Dreamweaver最新版本的提示和技巧。

尽管每课都包括创建一个具体项目的逐步指导，但是，您仍有余地自行探索和试验。您可以按课程的设计从头到尾通读本书，也可以只阅读感兴趣或者需要的那些课程。每课最后的“复习”一节包含关于在这节课中所学习主题的问题和答案。

短URL

在书中的一些位置，引用了网络上提供的信息。这类信息的网址通常比较长，不方便使用，因此，我们提供了自定义的短URL。不过，这些短URL有时会随着时间的推移而过期，不再有效。如果您发现某个短URL失效，可以查找本书“附录”中提供的实际URL。

必备知识

在使用本书之前，您应该具备计算机及操作系统的知识。确信您知道如何使用鼠标、标准菜单和命令，以及如何打开、保存和关闭文件。如果您需要复习这些技术，可以参见Microsoft Windows或Apple Macintosh操作系统提供的印刷文档或在线文档。

本书中的语法约定

使用Dreamweaver意味着您需要用到代码。我们会在接下来的课程和练习中使用一些语法约定，使本书在学习时更容易理解和掌握。

代码字体

在许多的指示下，您将需要输入HTML代码、CSS规则和属性以及其他基于代码的标记。要将这些标记与教学内容区分开来，输入的代码将使用代码字体显示，如下所示。

查以下代码：<h1>Heading goes here</h1>

在您必须自己输入标记的情况下，条目将在计算机中用彩色字体标记，如下所示。

插入以下代码：<h1>Heading goes here</h1>

删除线

在几个练习中，您将被要求删除在网页或样式表中已经存在的标记。在这些情况下，目标内容将被以删除线标记，如删除下列值。

margin: 10px 20px 10px 20px
background-image: url(images/fern.png)，url(images/stripe.png)

注意只需要删除做了标识的内容，以便取得以下结果。

margin: 10px 10px
background-image: url(images/fern.png)

缺失的标点符号

HTML代码、CSS和JavaScript往往需要使用到不同的标点，如句号（.）、逗号（,）、和分号（；）等；而对它们的错误使用或者定位可能会造成代码损坏。因此，我对可能导致混淆或错误的句号及其他标点进行了忽略，如下面的形式所示。

输入以下代码：<h1>Heading goes here</h1>

输入以下链接：http://adobe.com

元素引用

在描述和练习说明的正文中，元素可能会通过其名称或类或id属性来引用。当元素由其标签名称标识时，它将显示为<h1>或h1。当由其类属性引用时，该名称将以前置句号（.）的形式显示，如下所示：.content或.sidebar1。当以其id属性引用时，元素将以一个前置井号（#）和代码字体显示，如下所示：#top。此方法与Dreamweaver标签选择器界面中显示这些元素的方式相匹配。

Windows VS Mac OS指引

在大多数情况下，Dreamweaver在Windows和Mac OS中的操作方法完全相同。这两个版本之间存在细微的区别，主要是由于不受软件控制的特定平台的问题。其中大多数问题仅仅只是键盘快捷键、对话框的显示方式以及按钮的命名方式之间的区别。在整本书中交替出现了这两个平台中的截屏图。在具体命令有区别的地方，正文都注明了。Windows命令列在前面，其后接着对应的是Mac OS命令，比如Ctrl+C/Cmd+C。只要有可能，就会为所有命令使用常见的缩略语，如下所示。

Windows　　　　 Mac OS

Control = Ctrl　　Command = Cmd

Alternate = Alt　 Option = Opt

假设您在前期课程掌握了基本概念，随着课程的进行，指令可能会被截断或缩短，以节省空间。例如，在早期课程您可能会被要求“按Ctrl+C/Cmd+C组合键”，之后您可能只被要求“复制”文本或代码元素。这些应该被认为是相同的指令。

如果您在任何特定练习中遇到困难，那么请复习之前的步骤或练习有关课程。

安装程序

在执行本书中的任何练习之前，先验证您的计算机系统是否满足Dreamweaver的硬件需求，配置是否正确，并且安装了所有需要的软件。

如果您没有Dreamweaver安装程序，您需要先从Creative Cloud安装。Adobe Dreamweaver必须单独购买，在本书配套的课程文件中不包括该软件。有关系统需求可以访问www.adobe.com/products/Dreamweaver/tech-specs.html。

访问https://creative.adobe.com/plans注册Adobe Creative Cloud。Dreamweaver可以与整个Creative Cloud家庭或作为一个独立的应用程序购买。Adobe还允许免费试用Creative Cloud和个人应用7天。

访问www.adobe.com/products/dreamweaver.html了解更多获得Dreamweaver的不同选择，如下图所示。

更新到最新版本

虽然Dreamweaver是下载并安装在您的计算机的硬盘驱动器上，但需要定期更新Creative Cloud，以便更新和错误修复及安全补丁，还有其他新功能和能力。

本课程是基于Dreamweaver CC（2017版），可能早期版本的程序无法正常工作。要检查您的计算机上安装了哪个版本，请在Windows选择“帮助>关于Dreamweaver或在Macintosh选择“帮助>关于Dreamweaver。窗口将显示应用程序的版本号和其他相关信息。

如果您有一个早期版本的安装程序，您必须更新为新版本的Dreamweaver。您可以检查您的安装状态，打开Creative Cloud管理器并登录到您的账户。

Windows　　　　　　　　　　　　　　　Mac OS

单击https://helpx.adobe.com/creative-cloud/help/download-install-trial。了解如何在计算机或笔记本电脑上下载和安装Creative Cloud；并在有效期内进行试用。

建议的课程顺序

本书中的内容旨在引领您从初级水平过渡到中级的具有Web站点设计、开发和制作技能的水平。每个新课程都构建在以前的练习之上，并且提供了您创建用于开发整个Web站点的文件和资源。建议按顺序学习每个课程，以便获得最好的效果，并且最彻底地理解Web设计的各个方面。

理想的学习方案是从第1课开始，并按顺序学习整本书。由于每一课都会为下一课构建必要的文件和内容，因此，一旦您开始这个方案，就不应该跳过任何课程，或者甚至不应该跳过每个练习。虽然这种方法是最理想的，但它对于每个用户可能并非都是实用的方案。因此，如果需要，可以使用下一节中描述的“跳跃式学习”方法来完成各个课程。

首次启动

正确安装后的首次启动，Dreamweaver CC将展出一些介绍屏幕。程序首先会问您，您是否是个新手或者是有经验的人。

当每个屏幕出现时，它都会引导您完成界面的设置。您使用Windows或Mac OS，或选择新手还是有经验者，屏幕上将显示不同的选项。您将选择您的工作区和颜色主题。这里选择了最浅颜色的主题和标准工作区作为屏幕截图。随意挑选您喜欢的主题颜色。书中的所有练习在任何颜色主题都能进行。

新手

有经验者

当您访问入门屏幕时，它们可能出现的顺序与此处显示的顺序不一样。

新手

有经验者

对于有经验的用户，介绍屏幕会预览一些添加到程序中的新特征。您可以了解新的功能或直接跳转到最后一步。

当完成设置，最后屏幕提示开始使用Dreamweaver。您可以按指示打开一个文件，选择一个文件夹或继续程序界面，取决于您是否是一个新手或有经验的用户。

一旦完成入门设置，Dreamweaver会提示您设置Creative Cloud。此功能可让您的账户在两台设备上备份和同步您的程序偏好。单击“高级”以访问优先设置的同步设置。单击“禁用同步设置”关闭同步。单击“同步设置”立即同步设置。

选择程序颜色主题

如果在安装并启动Dreamweaver之后购买了本书，则可能正在使用与本书中大多数屏幕截图中所显示的不同颜色的主题。所有练习在使用任何颜色主题下都可以正常运行，但如果要配置您的界面以匹配所显示的界面，请完成以下步骤。

1 在Windows系统中选择“编辑”>“首选项”或在Mac OS中选择“Dreamweaver CC”>
“编辑”>“首选项”。首选项对话框出现。

2 选择界面。

3 选择最浅的颜色主题。

界面改变为新主题。注意代码主题是如何更改的。但这些变化并不是永久的。如果关闭对话框，主题将恢复到原来的颜色。

4 单击“应用”按钮。主题的变化现在是永久的。

5 单击“关闭”按钮，可以随时随意更改颜色主题。通常用户选择在正常工作环境中最适合工作的主题。浅色主题工作最好在光线充足的房间，而深色主题在一些设计办公室使用的间接或控制照明环境中效果最好。所有练习在任何主题颜色中都可以正常运行。

设置工作区

Dreamweaver CC（2017版本）包括两个主要工作区，以适应各种计算机配置和单个工作流程。对于本书，建议使用标准工作区。

1 如果默认情况下不显示标准工作区，则可以从屏幕右上方的“工作区”下拉菜单中选择它。

2 如果默认的标准工作区已被修改，其中某些工具栏和面板不可见（如书中所示）。可以通过从“工作区”下拉菜单中选择重置“标准”来恢复出厂设置。

工作区布局选项也可以从窗口菜单访问。

本书中的大部分图形显示在标准工作区。当您完成本书中的课程时，请尝试其他工作区以找到您喜欢的工作区，或构建自己的配置并将其保存在自定义名称下。

有关Dreamweaver工作区更完整的描述，请参阅第1课，“自定义您的工作区”。

定义一个Dreamweaver网站

在完成以下课程的过程中，您将从头开始创建网页，并使用存储在硬盘驱动器上的现有文件和资源。生成的网页和资源构成了所谓的本地站点。当您准备好将网站上传到Internet时（请参阅第13章，“发布到Web”），将完成的文件发布到Web主机服务器，然后将其变为远程站点。通常，本地和远程站点的文件夹结构和文件一致。

第一步是定义您的本地站点。

（1）启动Adobe Dreamweaver CC（2017版）。

（2）打开“站点”菜单。“站点”菜单提供了创建和管理标准Dreamweaver站点的选项。

（3）选择新站点。

出现“站点设置对象”对话框。

警告：

　

您必须在创建网站定义之前解压缩课程文件。

要在Dreamweaver中创建标准网站，您只需要命名并选择本地站点文件夹。站点名称应与特定项目或客户端相关，并将显示在“文件”面板站点下拉菜单中。该名称仅供您自己使用，它不会被公众看到，所以您可以创建的名称没有限制。建议使用清楚描述网站目的的名称。为了本书的目的，请使用您正在完成的课程的名称，例如lesson01、lesson02、lesson03等。

（4）在“站点名称”字段中，根据需要输入“lesson1”或其他名称。

注意：

　

包含该网站的主文件夹将在整本书中引用站点根文件夹。

（5）在“本地站点文件夹”字段旁边，单击“浏览文件夹”图标。将显示“选择根文件夹”对话框。

（6）找到课程文件（如前所述）的相应文件夹，然后单击“选择”按钮。

您可以单击“保存”按钮，然后开始在新的网站上工作，但是您还要再添加一个方便的信息。

（7）单击“高级设置”类别旁边的箭头显示列出的类别。选择“本地信息”类别。

虽然不是必需的，但一个很好的网站管理策略是将不同的文件类型存储在不同的文件夹中。例如，许多网站为图像、PDF、视频等提供单独的文件夹。Dreamweaver通过为Default Images文件夹添加选项来协助此工作。

之后，当您从计算机上其他位置插入图像时，Dreamweaver将使用此设置自动将图像移动到站点结构中。

注意：

　

在定义站点之前，必须解压课程文件。

注意：

　

包含图像资源的文件夹将在整本书中引用为站点默认图像文件夹或默认图像文件夹。

（8）在“默认图像文件夹”字段旁边，单击“浏览文件夹”图标。当对话框打开时，导航到该课程或站点的相应图像文件夹，然后单击“选择”按钮。

图像文件夹的路径显示在“默认图像文件夹”字段中。下一步将是在“Web URL”字段中输入您的站点域名。

（9）输入http://green-start.org了解本书中的课程，或者在“Web URL”字段中输入您自己的网站URL。

您已输入开始新站点所需的所有信息。在随后的课程中，您将添加更多信息，使您能够将文件上传到远程和测试服务器。

（10）在“站点设置对象”对话框中，单击“保存”按钮。“站点设置对象”对话框关闭。

在文件面板中，新站点名称将显示在“站点列表”下拉菜单中。

在添加更多网站定义时，您可以通过从此菜单中选择适当的名称来在站点之间进行切换。

注意：

　

图片和其他资源的资源文件夹应始终包含在主站点根文件夹中。

注意：

　

大多数静态HTML站点不需要Web URL，但是使用动态应用程序的站点或连接到数据库和测试服务器是必需的。

每当选择或修改站点时，Dreamweaver将构建或重建文件夹中每个文件的缓存。缓存标识网页之间的关系以及站点内的资源之间的关系，并且可以在文件被移动、重命名或删除时以帮助您更新链接或其他引用的信息。

（11）如有必要，单击“确定”按钮构建缓存。

设置站点是开始Dreamweaver中任何项目关键的第一步。了解站点根文件夹位于何处有助于Dreamweaver确定链接路径，并启用许多全站点适用的选项，如孤立文件检查和查找与替换。

检查更新

Adobe定期提供软件更新。检查的程序更新，选择“帮助”>“更新Dreamweaver”。更新通知也可能出现在Creative Cloud更新桌面管理器。

有关本书的更新和补充资料，请访问Peachpit.com上的“账户”页面，并选择“课程和更新文件”选项卡。

其他资源

本书不能取代程序附带的文档，或者是对每个功能的全面参考。本书只介绍课程中使用的命令和选项。有关程序功能和教程的全面信息，请参阅以下资源。

Adobe Dreamweaver学习与支持：访问helpx.adobe.com/dreamweaver（在Dreamweaver中选择“帮助”>“帮助和支持”> “Dreamweaver支持中心”）来在Adobe.com上找到并浏览教程，获得帮助和支持。

Dreamweaver帮助：helpx.adobe.com/support/dreamweaver.html是应用程序功能、命令和工具的参考（按F1键或选择帮助>帮助和支持> Dreamweaver在线帮助）。您也可以通过helpx.adobe.com/pdf/dreamweaver_reference.pdf下载帮助文档。

Adobe论坛：forums.adobe.com可让您进行一对一讨论和获得Adobe产品的问题和答案。

教育者资源：www.adobe.com/education和edex.adobe.com为在Adobe软件上教授课程的教师提供了宝贵的信息。您将找到所有级别的教育解决方案，包括使用综合方法来教授Adobe软件的免费课程，并可用于准备Adobe Certified Associate考试。

还可以查看这些有用的链接：

Adobe附加组件：creative.adobe.com/addons是查找工具、服务、扩展、代码示例等的重要资源，可以用于补充和扩展您的Adobe产品。

Adobe Dreamweaver CC产品主页：www.adobe.com/products/dreamweaver有关该产品的更多信息。

Adobe授权培训中心：提供给讲师的Adobe产品课程和培训。AATC目录可在training.adobe.com/trainingpartners上获取。

资源与支持

本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。

配套资源

本书提供如下资源：

本书配套资源请到异步社区的本书购买页面中下载。

要获得以上配套资源，请在异步社区本书页面中点击，跳转到下载界面，按提示进行操作即可。注意：为保证购书读者的权益，该操作会给出相关提示，要求输入提取码进行验证。

提交勘误

作者和编辑尽最大努力来确保书中内容的准确性，但难免还会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。

当您发现错误时，请登录异步社区，搜索到本书页面，点击“提交勘误”，输入相关信息，单击“提交”按钮即可。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券，或者用于兑换样书或奖品。

与我们联系

我们的联系邮箱是contact@epubit.com.cn。

如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们，或者到异步社区在线提交投稿（直接访问www.epubit.com/selfpublish/submission即可）。

如果您是学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。

如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权利的保护，也是我们持续为您提供有价值的内容的动力之源。

关于异步社区和异步图书

“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT技术图书和相关学习产品，为作译者提供优质出版服务。社区创办于2015年8月，提供超过1000种图书、近千种电子书，以及众多技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。

“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社近30年的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、AI、测试、前端、网络技术等。

异步社区

微信服务号

第1课 定制您的工作空间

课程概述

在这一课中，您将熟悉Dreamweaver CC（2017版）程序界面，并将学习如何执行以下操作：

• 使用欢迎屏幕

• 切换文档视图

• 使用面板

• 选择工作区布局

• 调整工具栏

• 个性化首选项

• 创建自定义的键盘快捷键

• 使用“属性”检查器

• 使用Extract工作流

　完成本课程大约需要1小时的时间。

您可能需要10多种程序才能完成的任务，Dreamweaver可以单独完成所有任务，但是它们使用起来都不像Dreamweaver那样有趣。

1.1　浏览工作区

Dreamweaver是行业领先的HTML（Hypertext Markup Language，超文本标记语言）编辑器，它非常普及。该软件提供了一批令人难以置信的设计和代码编辑工具。Dreamweaver对于每一个人都是有价值的。

编码员喜欢构建到“代码”视图环境中的多种增强特性；开发人员则非常享受该软件对多种程序设计语言的支持；设计人员则惊异于在他们工作时看到他们的文本和图形出现在精确的所见即所得（What You See Is What You Get，WYSIWYG）环境中，从而节省在浏览器中预览页面的时间；初学者欣赏该软件功能强大并且易于使用的界面。不管您是哪种类型的用户，如果您使用Dreamweaver，都会爱上这款软件，Dreamweaver界面具有一大批用户可配置的面板和工具箱，如下图所示。

您可能认为要提供这么多功能的软件将显得十分臃肿，但是您错了。Dreamweaver通过可停靠的面板和工具栏提供它的大部分功能，您可以显示或隐藏它们以及以无数种组合排列它们，从而创建理想的工作区。在大多数情况下，如果没有看到想要的工具或面板，都可以在“窗口”菜单中找到它们。

本课程介绍了Dreamweaver界面，并且介绍了一些隐藏在底下的能力。接下来的课程我们不会花费太多的时间来教您如何来对这些界面的基本活动进行操作，这是本节课的内容。因此，花些时间来完成下面的描述和练习，以便熟悉程序界面的基本操作。假如后面您需要了解程序中许多对话框或者面板的功能，您可以随时回过头来在本章中查阅。

注意：

　

开始本课程前，请下载本课的文件并为lesson1建立一个新的站点，如“前言”中所述。

1.2　使用“开始”屏幕

一旦程序安装和初始设置完成后，您会看到新的Dreamweaver开始屏幕。这个屏幕可以快速访问最近的网页，建立一系列简易类型的页面和直接访问几个关键的帮助主题。当您第一次启动程序或没有其他文档打开时，开始屏幕就会出现。开始屏幕在这里较以前已经焕然一新，并值得您快速回顾一下它所提供的内容。例如，它现在有4个主要选项：“最近的文件”“CC文件”“快速启动”和“启动模板”。单击每个选项的名称分别使用这些功能。

1.2.1　最近的文件

当您选择最近的文件选项，Dreamweaver将为您提供您最近制作的文件列表。列表是动态的。要重新打开文件，只需单击其名称。

1.2.2　CC文件

CC文件选项列表显示您复制到您的Creative Cloud文件夹，并且可以在Dreamweaver中编辑的文件。这将包括HTML、CSS、JavaScript和文本文件等。Dreamweaver会在视图中隐藏不兼容的文件，如下图所示。

1.2.3　快速启动

如果您熟悉快速启动，那是因为它已经以不同形式在多个Dreamweaver版本中存在。如往常一样它提供了一个立即访问一系列基本的Web兼容文件格式（如HTML、CSS、JS、PHP等）的途径。只需单击文件类型即可启动新文档。

1.2.4　入门模板

“入门模板”选项使您能够访问预定义的起始模板，包括提供响应式样来支持智能手机和移动设备，以及基于流行的Bootstrap框架的起始布局，如下图所示。

1.2.5　新建和打开

新建和打开选项可以分别访问“新建文档”和“打开”对话框。Dreamweaver以前的用户使用这些选项可能会更舒适，因为这些选项打开了他们熟悉的界面来创建新的或打开现有文档。您也可以使用键盘快捷键Ctrl+N/Cmd+N和Ctrl+O/Cmd+O。

1.2.6　显示所有

当您在“开始”屏幕中选择“全部显示”选项时，您将看到一个帮助主题列表，其中提供了整个程序的导览和视频概述，以及您可以查看的一些新的工具和工作流程。随着功能添加到Dreamweaver或功能改进，此选项将动态更新。

如果您不想再看到“开始”屏幕，可以通过访问“Dreamweaver首选项”＞“常规”设置中的选项并取消选中该复选框来禁用它。

1.3　探索新功能指南

在Dreamweaver CC中，随着您访问各种工具、功能或界面选项，新功能指南将不时弹出。弹出窗口将引起您对已添加到程序中的新功能或工作流程的注意，并提供便利的技巧，以帮助您充分利用它们。

当提示出现时，可以按照弹出窗口中的提示来获得更广泛的信息，或者提示您可以访问的教程。完成后，您可以单击每个提示右上角的关闭图标来关闭弹出窗口。关闭提示后，它将不会再显示。如果需要，您可以通过选择“帮助”>“重置上下文功能”提示来再次显示提示。

1.4　使用工具栏

一些程序功能非常方便，您可能希望它们始终以工具栏的形式出现。两个工具栏——“文档”和“标准”——水平显示在文档窗口的顶部。然而，“常用”工具栏垂直显示在屏幕的左侧。您可以通过从窗口菜单中选择所需工具栏来显示所需的工具栏。

注意：

　

“常用”工具栏始终可见。要访问其他工具栏，您必须打开一个文件。从lesson1文件夹打开index.html。

1.4.1　文档工具栏

文档工具栏显示在程序界面的顶部，并提供用于从实时、设计、代码和拆分视图切换的屏幕命令。

1.4.2　标准工具栏

标准工具栏出现在相关文件界面和文档窗口之间，并为各种文档和编辑任务提供了方便的命令，如创建、保存、打开文件；复制、剪切、粘贴内容等。您可以通过“窗口”>“工具栏”>“标准选择”显示它。

1.4.3　常用工具栏

常用工具栏在以前版本的Dreamweaver中称为编码工具栏。在旧版本中，它只出现在“代码”视图窗口中，但现在它全时段出现在界面的左侧。它现在提供了各种工具，用于在所有文档视图模式下处理代码和HTML元素。默认情况下，工具栏将在Live和Design视图中显示6个工具。将光标插入代码窗口，您可能还会看到更多。

该工具栏是可自定义的。您可以通过单击自定义工具栏中的图标来添加和删除工具。请注意，仅当代码视图窗口中的光标处于活动状态时，某些工具才会显示并处于活动状态。

1.5　切换和拆分视图

Dreamweaver为程序员和设计师分别提供了专用的环境。

1.5.1　代码视图

代码视图在Dreamweaver工作区中只着重显示HTML代码以及各种提高代码编辑效率的工具。要访问代码视图，可以单击“文档”工具栏中的“代码”按钮。

1.5.2　设计视图

设计视图与实时视图共享文档窗口，并将Dreamweaver工作区重点放在所见即所得（WYSIWYG）的编辑器中。随着CSS和HTML技术的进步，设计视图已经不再像以前一样不方便使用了。您会发现Dreamweaver提供了一个界面，可以加快内容的创建和编辑速度。而且，这也是访问某些Dreamweaver工具或工作流程的唯一方法，正如您将在即将到来的课程中所看到的那样。

要激活设计视图，请从“文档”工具栏的“设计/实时视图”下拉菜单中选择“设计”选项。大多数HTML元素和CSS的格式化效果都能正确的呈现，而动态和交互性则有重大差别，比如链接行为、视频、音频、jQuery插件以及一些表单元素。

1.5.3　实时视图

实时视图是Dreamweaver CC的默认工作区。它可以通过允许您以类似浏览器的环境直观地创建和编辑网页及网页内容，从而加快开发现代网站的流程，实时视图支持和可预览大多数动态效果和交互性。

要使用实时视图，请从“文档”工具栏中的“实时视图”下拉菜单中进行选择。当实时视图被激活时，大多数HTML内容将像在实际的浏览器中一样运行，从而允许您预览和测试大多数动态应用程序和行为。

在Dreamweaver的以前版本中，实时视图中的内容不可编辑。Dreamweaver CC让这一切都改变了。您可以在同一窗口中编辑文本，添加和删除元素，创建类和id，甚至样式元素。这就像在Dreamweaver里面的实时网页上工作。

实时视图与CSS设计器完全连接，允许您创建和编辑高级CSS样式并构建完全响应的网页，而无需在浏览器中切换视图或浪费时间预览页面。

注意：

　

拆分视图可以将代码视图与设计视图或实时视图配对。

1.5.4　拆分视图

拆分视图提供了一个复合工作空间，可让您同时访问设计和代码视图。在任一窗口中进行的更改将在另一个视图实时更新。

要访问拆分视图，请单击“文档”工具栏中的“拆分视图”按钮。Dreamweaver默认将分割工作区。使用拆分视图时，可以使用实时或设计视图显示代码视图。

如果需要，还可以通过选择“视图”>“拆分”>“垂直拆分”命令来垂直拆分屏幕。当窗口被拆分显示时，Dreamweaver还可以提供两个窗口的显示方式。您可以将代码窗口放在顶部、底部、左侧或右侧。您甚至可以同时设置两个代码窗口。您可以在“查看”菜单中找到所有这些选项。书中显示的大多数拆分视图的屏幕截图将设计或实时视图显示在顶部或右侧。

1.5.5　实时源代码

实时源代码（Live Source Code）是一种HTML代码故障排除显示模式，只要激活实时视图即可出现。要访问实时源代码，请激活实时视图，然后单击文档窗口左侧“通用”工具箱中的“实时源代码”图标,“活动源代码”将显示HTML代码，并显示在互联网上的实时浏览器中，并让您了解访问者与页面的各个部分交互时代码如何更改。

单击“Green Start”菜单项打开下拉菜单，可以直接看到这种交互作用。在代码视图中，您将看到打开的类属性以交互方式添加到菜单中。关闭菜单后，类将被移除。没有实时源代码，您将无法看到这种交互和行为。

要知道当实时源代码被激活时，您将不能编辑HTML代码，但仍然可以修改外部文件，如链接样式表。禁用实时源代码，可以单击实时源代码的图标，再次单击则切换为关闭状态。

注意：

　

如果没有看到实时源代码图标，您可能需要激活它。在“常用”工具栏，中选择“自定义”工具栏图标并激活实时源代码工具。

1.5.6　检查模式

检查模式是只要激活了实时视图就可用的CSS查错显示模式。它与CSS设计器集成在一起，可以通过把鼠标光标移到Web页面内的元素上，识别应用于页面中的内容的CSS样式。

实时视图窗口将高亮显示目标元素，并会显示应用于该元素或者被它继承的相关CSS规则。无论何时打开一个HTML文件，都可以单击“实时”按钮，然后单击文档窗口顶部的按钮，随时访问“检查”模式。

1.6　选择工作区布局

自定义软件环境的一种快捷的方式是直接使用Dreamweaver中某一个预建的工作区。这些工作区已经被专家进行了优化，您所需的工具唾手可得。

Dreamweaver CC（2017）包括两种预建的工作区：“标准”和“开发人员”。要访问这些工作区，可以从位于应用程序栏中的工作区菜单中选择它们。

1.6.1　标准工作区

标准工作区将可用的屏幕空间集中在“设计”和“实时”视图窗口中。标准工作区是本书中屏幕截图的默认工作区。

1.6.2　开发人员工作区

大多数使用代码的用户都希望使用开发人员工作区，因为它优化了面板和窗口，为代码提供了有效的工作空间。

1.7　使用面板

尽管可以从菜单访问大多数命令，Dreamweaver还是把它的大量功能散布在用户可选择的面板和工具栏中。您可以在屏幕四周随意显示、隐藏、排列和停靠面板。如果您愿意，甚至可以把它们移到第二个或第三个视频显示界面上。

窗口菜单列出了所有可用的面板。如果您在屏幕上没有看到特定的面板，可以从“窗口”菜单中选择它。菜单中出现的勾号指示面板是打开的。偶尔，一个面板可能在屏幕上位于另一个面板后面，并且难以定位。在这些情况下，只需在“窗口”菜单中简单地选择想要的面板，它将提升到面板组的顶部。

1.7.1　最小化面板

要为其他面板创造空间或者访问工作区的隐藏区域，可以最小化或者在适当的位置展开各个面板。要最小化一个面板，可以双击包含面板名称的标签。要展开面板，可以再次单击该标签。

也可以通过双击一个面板的标签，单独最小化面板组内的一个面板。要打开那个面板，可再次单击该标签。

要恢复更多的屏幕空间，可以通过双击标题栏把面板组最小化为图标，也可以通过单击面板标题栏中的双箭头图标把面板最小化为图标。当把面板最小化为图标时，可以通过单击面板的图标或按钮来访问任何一个面板。在空间允许的情况下，所选的面板将出现在布局的左边或右边。

1.7.2　关闭面板和面板组

每个面板或面板组可以随时关闭。您可以通过多种方式关闭面板或面板组，该方法通常取决于面板是否浮动、对接或与另一个面板分组。

要关闭对接的单个面板，请右键单击面板选项卡，然后从快捷菜单中选择“关闭”。要关闭整组面板，请右键单击组中的任意选项卡，然后选择“关闭选项卡组”。这两个命令也可从面板菜单中获得。

要关闭浮动面板或面板组，请单击面板或面板组标题栏左下角的关闭图标。要重新打开面板，请从“窗口”菜单中选择面板名称。重新开放的面板有时会脱落。随意按需将其对准。

1.7.3　拖曳

可以通过拖曳面板的标签在面板组内把面板标签重新排列到想要的位置。

1.7.4　浮动

与其他面板组合在一起的面板可以单独浮动。要浮动一个面板，可以通过其标签从面板组中单击并拖曳它。

要在工作区中重新定位浮动面板、组和堆栈，只需将其拖动到标题栏。在对接时要拉出一个单一的面板组，通过标签栏抓住它。

1.7.5　组合、堆叠和停靠

可以通过把一个面板拖到另一个面板中来创建自定义的面板组。在把面板移到正确的位置时，Dreamweaver将以蓝色突出显示一个区域，称为释放区。释放鼠标即可创建新的面板组。

在一些情况下，您可能希望同时保持两个面板可见。要堆叠面板，可以把想要的标签拖到另一个面板的顶部或底部。在看到蓝色释放区出现时，即可释放鼠标。

可以把浮动的面板停靠到Dreamweaver工作区的右边、左边或底部。要停靠一个面板、面板组或面板堆，可以把它的标题栏拖到您希望停靠的边缘。当看到蓝色释放区出现时，即可释放鼠标。

1.8　个性化您的Dreamweaver

在继续使用Dreamweaver时，您将为每种活动设计自己最佳的面板和工具栏的工作区。您可以在自己命名的自定义的工作区中存储这些配置。

保存自定义工作区

要保存自定义工作区，首先创建所需的面板配置，从“工作区”菜单中选择“新建工作区”命令，然后给它一个自定义名称。

1.9　使用Extract功能

Extract是一个工作流程，允许您从基于Photoshop的模型创建CSS样式和图像资源。您可以使用文本和链接或嵌入的图像层创建您的网页设计，并将文件发布到Creative Cloud，Dreamweaver可以在上面访问样式、颜色和图像，以帮助您构建基本的网站设计。选择“窗口”>“Extract”命令打开Extract对话框。

将文件发布到Dreamweaver内的Creative Cloud联机文件夹。

从Dreamweaver中的Extract面板访问各个层，复制样式和文字，甚至下载图像资源。

通过将lesson01资源文件夹中的Green Start_mockup.psd上传到Creative Cloud账户的在线文件夹，自己尝试这些功能。访问helpx.adobe.com/creative-cloud/help/sync-files.html了解如何将文件上传到Creative Cloud账户。

1.10　创建自定义的快捷键

Dreamweaver的另一个强大特性是创建您自己的快捷键以及更改现有的快捷键的能力。快捷键是独立于自定义的工作区加载和保存的。

如果您必须通过快捷键使用某个命令，而该命令又没有快捷键，就可以自己创建它。试试下面的操作。

1 选择“编辑”>“快捷键”（Windows）或Dreamweaver >“快捷键”（Mac）。

您不能修改默认快捷键。所以，您必须创建一个您自己的列表。

2 单击“复制副本”（）按钮，创建一组新的快捷键。

3 在“复制副本名称”框中输入一个名称，然后单击“确定”按钮。

4 从“命令”弹出式菜单中选择“菜单命令”。

5 在“命令”窗口中，从“文件”命令列表中选择“保存全部”。

注意：

　

“保存全部”命令没有现成的快捷键，尽管您将在Dreamweaver中频繁使用该命令。

6 在“按键”框中插入光标，然后按下Ctrl+Alt+S/Cmd+Option+S组合键。

注意：

　

将出现一条错误消息，指示您所选的键盘组合键已分配给一个命令。尽管我们可以重新分配该组合键，还是让我们选择一个不同的组合键。

7 按下Ctrl+Alt+Shift+S/Ctrl+Cmd+S组合键。

这个组合键当前未使用，因此让我们把它分配给“保存全部”命令。

8 单击“更改”按钮。将把新的快捷键分配给“保存全部”命令。

9 单击“确定”按钮，保存所做的更改。

您已经创建了自己的快捷键，并将在后面的课程中使用这个快捷键。

1.11　使用“属性”检查器

属性检查器对您的工作流程至关重要。属性检查器不再显示在任一默认工作区的底部。如果在程序界面中不可见，可以通过选择“窗口”>“属性”命令来显示它，然后如前所述将其停靠在文档窗口的底部。属性检查器是上下文驱动的，并适应您选择的元素的类型。

1.11.1　使用HTML选项卡

将光标插入页面上的任何文本内容中，“属性”检查器将提供一种快速分配一些基本的HTML代码和格式化效果的方式。当选择HTML按钮时，可以应用标题或段落标签，以及粗体、斜体、项目列表、编号列表和缩进及其他格式化效果和属性。文档标题元数据字段也可以在所有视图中的“属性”检查器中使用。在此字段中输入所需的文档标题，Dreamweaver会自动将其添加到文档<head>部分。

1.11.2　使用CSS选项卡

单击“CSS（层叠样式表）”按钮，可以快速访问用于分配或编辑CSS格式化效果的命令。

1.11.3　图像属性

在Web页面中选取一幅图像，可以访问“属性”检查器中的基于图像的属性和格式化控制。

1.11.4　表格属性

要访问表格属性，可以把光标插入到表格中，然后单击文档窗口底部的“表格”标签选择器。

1.12　使用相关文件接口

网页通常使用多个用于提供样式和编程帮助的外部文件所构建。通过在文档窗口顶部的“相关文件”界面中显示文件名，Dreamweaver让您可以查看链接到当前文档或引用的所有文件。此界面显示任何外部文件的名称，并将实际显示每个文件的内容（如果可用），而您只需要选择所显示的文件名。

1.12.1　相关文件接口列出了链接到文档的所有外部文件

要查看引用文件的内容，请单击名称。如果您处于“活动”或“设计”视图中，Dreamweaver将分割文档窗口，并在“代码”视图窗口中显示所选文件的内容。如果文件存储在本地，您甚至可以在选择文件时编辑文件的内容。

1.12.2　使用相关文件界面编辑本地存储的文件

要查看主文档中包含的HTML代码，请单击界面中的“源代码”选项。选择源代码选项以查看主文档的内容。

1.13　使用标签选择器

Dreamweaver最重要的功能之一是标签选择器界面，它显示在文档窗口的底部。该界面显示与光标的插入点或由光标选择相关的任何HTML文件中的标签和元素结构。标签的显示是分级的，从显示器左侧的文档根部开始，并且基于页面的结构和所选择的元素按顺序列出每个标签或元素。

标签选择器界面中的显示会根据您的选择模拟HTML代码的结构。

标签选择器还使您能够通过单击标签来选择显示的任何元素。当选择标签时，还会选择该标签中包含的所有内容和子元素。

使用标签选择器来选择元素，标签选择器界面与CSS设计器面板紧密集成。您可以使用标签选择器来帮助您创建样式内容或剪切、复制、粘贴和删除元素。

1.14　使用CSS设计器

CSS设计器是用于创建，编辑和排除CSS样式错误的强大的可视化工具。它允许您创建样式表，媒体查询和CSS规则。它提供了选择器创建的提示，并允许您通过向上或向下箭头来简化或增加新选择器的特征性。CSS设计器还使您能够识别网页中任何现有元素的样式。您只需选择布局中的元素，然后单击面板顶部的“当前”按钮即可。

将样式从一个规则复制并粘贴到另一个规则（左图）。使用箭头键来决定选择的多或少（右）。

CSS设计器面板由4个窗口组成：源、@媒体、选择器和属性。面板是响应式的。当您充分扩大面板时，它会分解成两列。

1.14.1　源

“源”窗口允许您创建、附加、定义和删除内部嵌入和外部链接的样式表。

1.14.2　@媒体

@媒体窗口用于定义媒体查询以支持各种类型的媒体和设备。

1.14.3　选择器

“选择器”窗口用于创建和编辑格式化页面组件和内容的CSS规则。创建选择器或规则后，您可以在“属性”窗口中定义要应用的格式。

CSS设计器除了允许您创建和编辑CSS样式外，还可以用于识别已经定义和应用的样式，并排除与这些样式有关的问题或冲突。

1.14.4　属性

属性窗口具有两种基本模式。默认情况下，“属性”窗口将在列表中显示所有可用的CSS属性，分为5个类别：布局、文本、边框、背景、更多。您可以向下滚动列表，并根据需要应用样式。

可以通过选择面板右上角的“显示集”来访问第二种模式。在此模式下，“属性”窗格内列表显示仅实际应用于“选择器”窗口中选择的规则的属性。在任一模式下，您可以添加、编辑或删除样式表、媒体查询、规则和属性。

选择“显示集”选项将属性显示限制为“仅限于样式的属性”。

“属性”窗格还具有“COMPUTED”选项，显示应用于所选元素样式的聚合列表。任何时候在页面上选择元素或组件时，“COMPUTED”选项将会出现。当您创建任何类型的样式时，Dreamweaver创建的代码均符合行业标准和最佳做法。

“COMPUTED”选项将应用于选择的所有样式一次性列出。

1.14.5　全部和当前模式

在Dreamweaver CC（2015.1发行版）中，CSS设计器获得了两个额外的模式：“全部”和“当前”，可以在面板中启用特定的功能和工作流程。

选择“全部”按钮后，面板允许您创建和编辑CSS样式表、媒体查询、规则和属性。当选择“当前”按钮时，则启用了CSS故障排除功能，允许您检查各个元素并评估应用于所选元素的现有样式属性。

在此模式下，您可以编辑现有属性，但不允许添加新的样式表，媒体查询或规则。此交互在所有文档视图中的工作方式相同。除了使用CSS设计器，您还可以在“代码”视图中手动创建和编辑CSS样式，同时利用许多生产力增强功能（如代码提示和自动完成）。

当选择“当前”按钮时，CSS设计器将显示与所选元素相关联的所有样式。

1.15　使用可视化媒体查询界面（VMQ）

可视化媒体查询（VMQ）界面出现在文档窗口的上方。VMQ界面允许您直观地检查并与现有媒体查询进行交互，并使用简单的单击界面即时创建新的查询。

打开由具有一个或多个媒体查询的样式表格式化的任何网页时，VMQ界面将显示在文档窗口上方，并以颜色条形栏的形式显示特定的已定义的媒体查询类型。仅使用最大宽度规格的媒体查询将以绿色显示。仅使用最小宽度规格的媒体查询将以紫色显示。使用两者的对象将显示为蓝色。单击“常用”工具栏中的“切换可视化媒体查询”图标可打开和关闭VMQ显示。

VMQ界面中的最大宽度媒体查询

VMQ界面中的最小宽度媒体查询

同时使用最大宽度和最小宽度规格的媒体查询

1.16　使用DOM查看器

Dreamweaver CC（2017版）的DOM查看器已经大大改进。它允许您查看文档对象模型（DOM）以快速检查网页的结构，并且现在可以与其进行交互，以选择、编辑和移动现有元素以及插入新的元素。

1.17　使用平视（HUD）显示

随着实时视图成为Dreamweaver的默认工作区，它驱动了用于编辑和管理HTML元素的新方法的产生。每当您选择一个元素或一系列文本以便访问重要的属性和规格时，Dreamweaver CC都会提供一些平视显示（HUD）功能。

1.17.1　位置辅助HUD

当在实时视图中使用“插入”菜单或“插入”面板插入新的元素时，会显示位置辅助HUD。通常情况下，位置辅助HUD将提供“之前”“之后”“换行”和“嵌套”的选项。根据所选择的元素类型和光标定位的项目，一个或多个选项可能会变灰。

位置辅助HUD允许您控制元素和组件在实时视图中的插入方式。

1.17.2　元素HUD

每当您在实时视图中选择元素时，将显示元素HUD。它允许您添加类和id属性，并通过单击按钮，访问“快速属性检查器”，使您能够更改格式、添加超链接、应用粗体或斜体或其他样式。

元素HUD使您能够快速应用类，id和链接以及基本格式。

1.17.3　图像HUD

当您在实时视图中选择图像并提供对“快速属性检查器”的访问权限时，会显示图像HUD，该g工具可让您访问图像源、替代文本、宽度和高度属性、以及添加超链接的字段。

图像HUD让您快速访问基本图像属性，并允许您添加超链接。

1.17.4　文本HUD

每当您在实时视图中选择文本的一部分时，就会显示文本HUD。文本HUD允许您将粗体<strong>、斜体<em>和超链接<a>标记应用于所选文本。双击文本打开橙色编辑框。当您选择一些文本时，文本HUD将会出现。完成编辑文本后，单击橙色框外部以完成更改。按Esc取消更改，并将文本返回到之前的状态。

文本HUD允许您将粗体，斜体和超链接标记应用于所选文本。

1.18　探索、试验和学习

多年来，Dreamweaver界面经过了精心设计，使Web页面设计和开发的工作变得快速和容易。这是一个正在不断发展的设计工具，它总是在变化和演变。如果您认为您已经了解了这个工具，那您错了。安装最新版本并好好检查。您可以随心所欲地探索和试验不同的菜单、面板和选项，创建理想的工作区，根据自己的需要创建最高效的环境。您将发现这款软件具有无止境的适应能力，可以处理任何任务。享受它吧！

复习题

1 您可以在哪里访问命令来显示或隐藏任何面板？

2 在哪里可以找到代码，拆分，设计和实时查看按钮？

3 工作区可以保存什么？

4 工作区还加载键盘快捷键吗？

5 当您将光标插入网页上的各种元素时，“属性”检查器会发生什么？

6 CSS设计器中的什么功能可以轻松地从现有的规则中构建新的规则？

7 DOM查看器的作用是什么？

8 元素HUD是否出现在“设计”或“代码”视图中？

复习题答案

1 所有面板都列在窗口菜单中。

2 代码，拆分，设计和实时视图按钮是文档工具栏的组件。

3 工作区可以保存文档窗口的配置，打开的面板以及面板的尺寸和位置。

4 不。键盘快捷键与工作区独立地加载和保存。

5 属性检查器适应所选元素，显示相关信息和格式化命令。

6 CSS设计器允许您将样式从一个规则复制并粘贴到另一个规则。

7 DOM查看器允许您直观地检查文档对象模型，选择并插入新元素并编辑现有元素。

8 不。HUD仅在实时视图中可见。

第2课　HTML基础

课程概述

在这一课中，您将熟悉HTML，并将学习如何执行以下任务：

• 什么是HTML以及他从何而来

• 常用的HTML标签

• 如何插入特定字符

• 手工编写HTML代码

• 什么是语义网页设计以及为什么它很重要

• HTML中的新特性和功能

　完成本课大约需要25分钟的时间。本课没有支持文件。

HTML是Web的支柱，也是Web页面的骨架。像您身体里的骨骼一样，它是Internet的结构组织和实质内容，尽管除了Web设计师之外其他人通常看不到它。如果没有它，Web将不会存在。Dreamweaver具有许多特性，可以帮助您快速、有效地访问、创建和编辑HTML代码。

2.1　什么是HTML

“其他软件可以打开Dreamweaver文件吗？”

在Dreamweaver课堂上，一个学生问到这个问题；尽管这个问题的答案对于经验丰富的开发人员来说可能是显而易见的，但它阐释了讲授和学习Web设计时的一个基本问题。大多数人都会把软件与技术混为一谈。他们认为扩展名.htm或.html属于Dreamweaver或Adobe。设计师习惯于处理以.ai、.psd、.indd等为扩展名的文件。这些扩展名是由具有特定能力和局限性的软件创建的专有文件格式。大多数情况下的目标是创建最终的打印部分。创建文件的软件提供了解释用于产生打印页面的代码的能力。随着时间的推移，设计师认识到在不同的软件中打开这些格式的文件可能产生无法接受的结果。另一方面，Web设计师的目标是创建用于在浏览器中显示的Web页面。原始软件的能力和/或功能几乎不会对得到的浏览器显示效果产生任何影响，因为显示效果完全与HTML代码以及浏览器解释它的方式相关。尽管软件可能编写良好或糟糕的代码，但是浏览器会做所有困难的工作。

Web基于HTML（Hypertext Markup Language，超文本标记语言）。该语言和文件格式不属于任何单独的软件或公司。事实上，它是非专有的纯文本语言，可以在任何计算机上的任何操作系统中的任何文本编辑器中编辑它。Dreamweaver的一部分是一种HTML编辑器，尽管它远远超越了这一点。但是为了最大化Dreamweaver的潜力，首先需要很好地理解HTML是什么，它可以做什么，以及它不可以做什么。本课程打算简要介绍HTML的基础知识及其能力，以此作为理解Dreamweaver的基础。

2.2　HTML起源于何处

HTML和第一种浏览器是由在瑞士日内瓦的CERN（Conseil Européen pour la Recherche Nucléaire，它是European Council for Nuclear Research，即欧洲核物理研究委员会的法语形式）粒子物理实验室工作的科学家Tim Berners-Lee于20世纪90年代早期发明的。他原本打算使用该技术通过当时刚刚问世的Internet共享技术论文和信息。他公开地共享他的HTML和浏览器发明，尝试使整个科学团体及其他人采用它们，并使他们自身参与开发它们。他没有申请版权保护或者尝试出售他的发明创造的事实开启了Web上的开放性和友好关系的趋势，并且一直延续至今。

Berners-Lee在20多年前创建的语言比我们现在使用的语言的构造要简单得多，但是HTML仍然极其容易学习和掌握。在编写本书时，HTML的版本是5，它是在2014年10月由官方采用的。实质上，HTML由120个左右的标签（tag）组成，比如html、head、body、h1、p等。

标签写在尖括号（<>）之间，比如<p>、<h1>和<table>。这些标签用于封闭或标记（markup）文本和段落，以便使浏览器可以用特定的方式显示它们。当标签同时具有开始标签和封闭标签时，就认为HTML代码被正确地平衡（balanced），比如<h1>…</h1>。

当两个匹配的标记以这种方式出现时，它们被称为元素（element）；元素包括两个标记中包含的任何内容。空的或void的元素(如水平线)只能使用一个标记以缩写的方式编写，如<hr/>，实质上同时是开始和结束标记。在HTML5中，空元素也可以有效地表达，而不需要关闭斜线，如<hr>。有些web应用程序需要关闭斜线，所以最好在使用一个表单之前进行检查。

有些元素用于创建页面结构，另一些用于结构和格式化文本，还有一些则允许交互和可编程性。尽管Dreamweaver省却需要手动编写大部分代码，但对于任何新兴的Web设计人员来说，读取和解释html代码的能力仍然是推荐的技能。有时这是在网页中查找错误的唯一方法。随着通过移动设备和基于internet的资源创建和传播更多信息和内容，理解和读取代码的能力也可能成为其他领域的一项重要技能。

注意：

　

如果您非常抵触学习如何阅读和编写良好的HTML，就应该检查Adobe Muse。这个软件允许在与Adobe InDesign类似的图形用户界面中使用指向和单击技术创建具有专业外观效果的Web页面，同时永远也不会把您暴露在幕后运行的代码面前。

基本的HTML代码结构

下面将看到Web页面的基本结构。

正确结构化或平衡的HTML标记由一个开始标签和一个结束标签组成。标签封闭在尖括号（<>）内。

通过重复输入原始标签并在开始尖括号后面输入一个斜杠（/）来创建封闭标签。可以用简写形式书写空标签（如水平标线）。

您可能会感到奇怪，这段代码只在Web浏览器中显示文本“Welcome to my first webpage”。代码的余下部分用于创建页面结构和文本格式化效果。像冰山一样，实际Web页面的大部分内容都是看不到的。

2.3　常用的HTML元素

HTML代码元素用于特定目的。标签可以创建不同的对象，应用格式化，识别逻辑内容或生成交互性。在屏幕上独立空间的标签被称为块元素；在另一个标签的流程中执行其职责的那些称为内联元素。一些元素也可用于在页面中创建结构关系，例如垂直列中的堆叠内容或在逻辑分组中收集多个元素。结构元素可以像块或内联元素一样表现，或者在完全不可见的情况下进行工作。

2.3.1　HTML标签

下表中显示了一些最常用的HTML标签。为了充分利用Dreamweaver和您的网页，它有助于了解这些元素的性质以及它们的使用方式。请记住，某些标签可以提供多种用途。

2.3.2　HTML字符实体

文本内容通常通过电脑键盘输入。但是，许多字符不会出现在典型的101键输入设备上。如果不能直接从键盘输入符号，则可以通过键入名称或称为实体的数值将其插入到HTML代码中。存在可以显示的每个字母和字符的实体。下表列出了一些流行的实体。

注意：

　

一些实体（比如版权符号）可以使用名称或数字创建，但是命名的实体也许不能在所有的浏览器或应用程序中工作。因此，要么坚持使用实体数字，要么对您想使用的特定的命名实体进行测试。

请访问www.w3schools.com/html/html_entities.asp查看具有说明的实体的完整列表。

2.4　HTML5简介

HTML的每个新版本都对构成语言的元素的数量和用途做了改变。HTML 4.01包含大约90个元素。其中一些元素被完全删除了，并且采纳或提议了一些新元素。

对列表的改变通常涉及支持新技术或不同类型的内容模型，以及删除那些想法糟糕或者很少用到的特性。一些改变只是简单地反映了随着时间的推移在开发人员社区内流行的习俗或技术。其他一些改变，用以简化创建代码的方式，以使之更容易编写并能更快地传播。

2.4.1　HTML5标记

下表显示了HTML5中的一些重要的新标签。目前，差不多30个旧标签被删除了，同时具有将近50个新元素。在本书的练习中，我们适时地使用了许多新的HTML5元素，并且解释了它们打算在Web上所起的作用。花一点时间使自己熟悉这些标签以及它们的说明。

2.4.2　语义Web设计

目前已经执行了对HTML的许多改变，以支持语义Web设计（semantic web design）的概念。这个运动会对HTML的未来、它的有用性以及Internet上的Web站点的互操作性产生重要的影响。目前，每个Web页面在Web上独立存在。内容可能链接到其他页面和站点，但是确实无法以一种清晰的方式把多个页面或多个站点上可用的信息结合或收集起来。搜索引擎会尽其所能对出现在每个站点上的内容建立索引，但是由于旧的HTML代码的性质和结构，大多数内容都会丢失。

HTML最初被设计为一种表示语言。换句话说，它旨在以一种可读和可预测的方式在浏览器中显示技术文档。如果仔细查看HTML的原始规范，它基本上看起来像您将放入大学研究论文中的项目列表：标题、段落、引用的材料、表格、编号列表和项目符号列表等。

HTML之前的Internet看起来更像是MS DOS或OS X Terminal应用程序——没有格式化、没有图形并且没有颜色。HTML第一个版本中的元素列表基本上确定了内容将如何显示。这些标签没有传达任何内在的含义或意义。例如，使用标题标签以粗体显示特定的文本行，但是它没有指出标题与下面的文本或者整个故事之间具有什么关系。它是一个标题（title），或者只是一个子标题（subheading）？

HTML5添加了许多重要的新标签，以帮助给标记（markup）添加含义。诸如<header>、<footer>、<article>和<section>之类的标签允许从一开始就确定特定的内容，而不必求助于额外的属性。最终的结果是更简单的代码，并且会减少代码量。但是，最重要的是，给代码添加语义含义将允许您和其他开发人员以令人兴奋的新方式把一个页面中的内容连接到另一个页面中，其中许多新方式还没有发明出来，它确实是一项正在进行中的工作。

2.4.3　新技巧和新技术

HTML5还重新研究了语言的基本性质，收回了一些以前需要第三方插件应用程序和外部编程的功能。如果您是Web设计新手，将不会感到痛苦，因为不需要重新学习任何知识或者打破什么坏习惯。如果您已经具有构建Web页面和应用程序的经验，本书将指导您安全地涉水，并且以合乎逻辑的、直观的方式介绍了新的技术和技巧。但是，最重要的是，语义Web设计并不意味着抛弃所有的旧站点，并从头开始重新构建所有的一切。有效的HTML 4代码在可预见的将来仍将保持有效。

HTML5旨在使您能够更轻松地完成任务，它允许利用较少的工作做更多的事情。那么就让我们开始吧！

请访问www.w3.org/TR/2014/WD-html5-20140617了解有关HTML5的更多信息。

请访问www.w3.org了解有关HTML的更多信息。

复习题

1 什么程序可以打开HTML文件？

2 标记语言是做什么的？

3 HTML由多少个代码元素组成？

4 大多数网页的三个主要部分是什么？

5 块和内联元素有什么区别？

6 什么是当前版本的HTML？

复习题答案

1 HTML是一种纯文本语言，可以在任何文本编辑器中打开和编辑，并在任何Web浏览器中查看。

2 标记语言将标签包含在括号内，如<>中，围绕明文内容传递有关从一个应用程序到另一个应用程序的结构和格式的信息。

3 HTML5包含超过100个标签。

4 大多数网页由三个主要部分组成：根，头和身体。

5 块元素创建一个独立元素。内联元素可以存在于另一个元素中。

6 HTML5已于2014年底正式通过，但完全支持可能需要几年时间。而且，与HTML 4一样，一些浏览器和设备可能以不同的方式支持规范。