使用adobedreamweavercc进行web创作 - adobeaca.cn...
TRANSCRIPT
使用Adobe Dreamweaver CC进行Web创作
© 2017 Adobe Systems Incorporated. All rights reserved.
亲爱的候选人，
为了准备Web Authoring使用Adobe Dreamweaver CC认证考试，我们整理了一套练习材料和示例考试项
目供您查看。 你会在这个包中找到的是：
• 考试主题领Domain和目标概述。
• 练习教程和文件的链接
• 练习考试项目。
我们汇编了Dreamweaver学习和支持网站的摘录材料，以突出显示考试中涵盖的一些更具挑战性的技
巧。 您可以使用提供的文件（单独提供）处理这些技术指南。 此外，我们还包括了认证目标，以便您
了解考试中涵盖的要素。 最后，我们已经包含了练习考试项目，让您对某些项目有所了解。
这些材料旨在帮助您熟悉考试领Domain，因此并未涵盖所有目标。
谢谢,
Adobe教育
使用Adobe Dreamweaver CC进行Web创作
2© 2017 Adobe Systems Incorporated. All rights reserved.
Adobe国际认证
使用Adobe Dreamweaver进行Web创作
考试和目标
参加考试后，您的分数将以电子方式报告。 从考试通过之日起2-4周内，您可以获得ACA欢迎套件。
考试结构以下列出了考试的主题领Domain：
1. 设定项目要求
2. 了解Web创作
3. 了解Adobe Dreamweaver
4. 使用Adobe Dreamweaver进行Web创作
5. 使用Adobe Dreamweaver测试，发布和维护Web内容的问题和时间
◻ 41问题
◻ 50 分钟
考试目标
Domain1.0设置项目要求
1.1 确定Web创作项目的目的，受众和受众需求。
1.2 总结设计师如何决定要包含在Web创作项目中的内容类型，包括版权，项目适合性，权限和许可等注意事项。
1.3 展示项目管理任务和责任的知识。
1.4 与其他人（如同事和客户）就设计计划进行沟通。
Domain 2.0了解Web创作
2.1 展示基本Web创作术语的知识。
2.2 展示对Web创作行业中使用的基本设计原则和最佳实践的了解，例如可用性，可访问性，一致性和
可视化层次结构。
使用Adobe Dreamweaver CC进行Web创作
3© 2017 Adobe Systems Incorporated. All rights reserved.
2.3 展示超文本标记语言（HTML）的知识和基本HTML标记的行为。
2.4 展示层叠样式表（CSS）的知识和基本CSS标签的行为。
2.5 展示如何编写在各种操作系统，浏览器版本/配置和设备中同样有效的Web内容的知识。
2.6 展示与网络创作相关的数字图像，文本，交互元素，动画以及视频和音频内容的知识。
Domain3.0了解Adobe Dreamweaver
3.1 识别Adobe Dreamweaver CC界面的元素并演示其功能的知识。
3.2 识别和定义常用面板的功能，包括“插入”面板，“属性”检查器，“资源”面板和“文件”面板。
3.3 导航，组织和自定义工作区。
使用Adobe Dreamweaver进行Domain4.0 Web创作
4.1 定义新的Dreamweaver站点。
4.2 创建网页并使用HTML，CSS和结构HTML元素定义页面布局。
4.3 添加和修改文本。
4.4 插入和操作图像，视频，声音，交互元素和动画。
4.5 使用超链接，电子邮件链接和命名锚点链接Web内容。
4.6 在Web创作项目中创建和管理特殊内容类型，包括表格和表单。
使用Adobe Dreamweaver进行Domain5.0测试，发布和维护Web内容
5.1 进行技术和可用性测试。
5.2 管理站点的资产，链接和文件。
5.3 将站点文件发布和更新到远程服务器。
5.4 展示如何优化Web内容以使其对搜索引擎可见的知识。
使用Adobe Dreamweaver CC进行Web创作
4© 2017 Adobe Systems Incorporated. All rights reserved.
了解网站的剖析
资料来源: 网站建设剖析
了解大多数网页是如何使用HTML和CSS制作的。
当您查看网页时，您可能想知道它是如何制作的。 要显示网页，Internet浏览器会读取并解释一
组特殊说明。 这些说明主要使用两种语言编写：HTML和CSS。
万维网联盟（W3C）定义了这些语言的Web标准或规范。 了解Web标准以确保不同的Web浏览
器准确显示您的页面非常重要。 Dreamweaver包含的功能允许您根据最新的Web标准构建网页。
让我们看看HTML和CSS如何协同工作来制作网页。
什么是HTML？
网页显示内容并具有由HTML定义的底层结构。 内容可以包括文本，图像，链接，甚至音频和视频。 大多数
HTML元素都是使用的
打开<element>和关闭</ element>标签，告诉浏览器要显示的内容类型。 标签按特定顺序编写，以定义页
面结构。 下面的示例显示了三个常见的HTML标记。
<h1>指定标题文本，适用于页面标题
<p>指定段落文本，适用于正文
<img>显示由src指定的图像（源文件）
注意：此示例中的HTML以大写形式显示，以更清楚地说明概念。 但是，最好在编写自己的
页面时以小写形式编写HTML标记。
使用Adobe Dreamweaver CC进行Web创作
5© 2017 Adobe Systems Incorporated. All rights reserved.
什么是CSS？
使用HTML，您已经为网页提供了基本结构，但对样式或布局的定制并不多。 最终，您需要添加颜色，格式化文本
和图像，以及重新定位元素
你的页面。 CSS是一种与HTML一起使用的语言，可以将此样式和格式应用于您的网页。 使用CSS查找一
个或多个HTML元素，然后提供有关如何处理该元素的其他说明（例如更改其颜色或将其置于页面中心）。
下面的示例显示了如何使用CSS更改三个HTML元素的外观。
h1标题文本居中对齐。
p段落文本为红色，粗体和居中对齐。
img图像大小调整为150px×100px。
HTML简介
在了解层叠样式表（CSS）之前，您应该对HTML（用于创建网页的编程语言）有基本的了解。
网页的结构和外观由其底层代码控制。 用于为网页编写此代码的编程语言是超文本标记语言或HTML。
如果您查看大多数网页的代码，您将看到一行一行的普通文本，并被称为HTML标记的短命令所包围。 这些标记
放在文本块的开头和结尾的括号中，并告诉Web浏览器如何显示标签之间的信息或与之交互。 标签由尖括号
（<>）括起来，通常与开始（或开始）和结束（或结束）标签成对出现。 HTML标记本身不会显示在浏览器中。
• <p>这是一段文字。</p>
• <p> =开始标记
• </p> =结束标记
使用Adobe Dreamweaver CC进行Web创作
6© 2017 Adobe Systems Incorporated. All rights reserved.
在“设计”视图中使用Dreamweaver创建网页时，将自动创建HTML代码。 这些是在
Dreamweaver中工作时常见的标记：
• <html></html>描述了网页
• <head></head>描述了网页的标题
• <body></body>描述可见的页面内容
• <h1></h1> 显示标题，范围从1（最大）到6（最小）
• <p></p>将文本格式化为段落
• <strong></strong> 大胆的文字
• <em></em>强调文本，显示为斜体
• <br>创建一个换行符
• <ahref="http://www.example.com"></a>creates a link to awebpage
注意：Dreamweaver使用代码着色来帮助您在“代码”视图中标识标记和代码元素的常规类别。
虽然HTML包含用于显示文本，图像，表格和其他页面元素的标签，但它在页面布局和格式方面的精确度有限
- 这对许多设计师来说是一种挫败感。
按照网页设计的各个阶段
资源: 网页设计的阶段
无论是设计自己的网站，还是以团队形式工作，将网站带入网络的过程都可以解构为可管理的阶段。
1. 计划您的内容
规划好的内容可以说是网页设计中最重要的阶段。 这也是可能花费最长时间的阶段，但值得做好。 一个好的内容计
划将增加您的网站的存在和可用性，以及加快Web开发。、要记住的一些要点是了解您的受众，简短通常
更好，考虑其他人如何搜索您的网站，以及逻辑地组织内容。
使用Adobe Dreamweaver CC进行Web创作
7© 2017 Adobe Systems Incorporated. All rights reserved.
2. 线框化您的设计
线框是网站的蓝图或抽象的可视化表示，使您和您的团队在设计和规划阶段更容易协作。 线框可以很简单
手动绘制的图表可以快速获取想法，无论您身在何处，或者它们可以是对网站导航和功能的更复杂的定义。
您可以使用各种线框图工具，包括笔和纸，免费或商业线框软件应用程序，甚至其他Creative
Cloud应用程序，如Photoshop，Illustrator或XD。 选择最适合您和您的团队的方法和详细程度。
3. 创建网页
现在是时候把伟大的设计和计划付诸行动了。 要将概念性计划付诸实践，了解网页设计的语言非常
重要。 本系列的主要重点是HTML和CSS，以及对JavaScript的一瞥。
HTML或超文本标记语言用于创建网站中页面的整体结构和内容。 CSS，即Cascading Style
Sheets，用于设置网站内容的视觉属性并自定义布局。 JavaScript是一种流行语言，可用于向
网页添加功能和交互性。
使用Adobe Dreamweaver CC进行Web创作
8© 2017 Adobe Systems Incorporated. All rights reserved.
4. 发布您的网站
一旦您准备好发布您的网站供全世界观看，您将需要一些东西。 首先，您必须获得Domain名或网址。 您还
需要Web服务器上的专用空间和连接详细信息 - FTP是连接到Web服务器的常用方法。 如果你正在创建一
个
您公司的网站，您可以从您的IT网站管理员处获取此信息。 如果要发布自己的站点，则可以从Web主机提供
商处获取此信息。
然后，您可以使用“站点”功能连接到Web服务器并直接从Dreamweaver发布站点。
使用Dreamweaver进行Web开发 - 概述
资源： 使用Dreamweaver进行Web开发
本文将帮助您了解如何使用Dreamweaver完成Web开发的各个阶段或阶段。
注意：本文假设您具有对WebDomain，HTML，CSS和JavaScript的中级理解的初学者。
1.分析受众需求，技术和营销要求。 您还可以收集设计和发布网站所需的必要信息，并获得以下问题的答案：
我选择哪家服务提供商来托管网站？ 我是否可以访问上传文件到发布服务器？
该网站使用什么Domain名？
如果要将现有网站迁移到Dreamweaver，当前存储的文件和资产在哪里？ 我是否可以访问存储
此信息的服务器？
如果您想要一个动态网站，我可以使用哪个服务器来测试数据是否动态显示？ 我是否具有要用于
加载动态数据的Web应用程序服务器的详细信息？
使用Adobe Dreamweaver CC进行Web创作
9© 2017 Adobe Systems Incorporated. All rights reserved.
网站需要哪些资产？
这些资产是从头开始设计的吗？ 如果资产已经可用，我可以访问它们吗？
我想用什么应用程序来设计资产？
我是否计划创建响应式网站？
假设您清楚地了解要开发的网站以及您希望如何以及在何处托管它，并为Web开发过程选择了
Dreamweaver和Creative Cloud，请继续执行下一步。
2. 检查您是否拥有网站所需的所有资产.在本地文件夹或Adobe的Creative Cloud Libraries中收集和组织它们。
3. 3.使用以下命令在Dreamweaver中创建新文档：
一个新的空白文件，
与Dreamweaver一起打包的入门模板，或
其他人创建的模板文件（* .dwt）
注意：如果您不熟悉Dreamweaver或只是学习Web开发，那么入门模板对于帮助您开始设计网页非
常有帮助。 即使您计划从头开始，也可以在这些页面中查看一下，以了解良好网页设计的元素。
4. 花几分钟时间熟悉Dreamweaver工作区。
找到您感觉舒适的工作区，并设置颜色主题。 以适合您的方式重新组织不同的面板。
5. 在Dreamweaver中设置您的站点。
设置创建包含文件和资产的文件夹结构。 在组织信息并确定结构后，您可以开始创建网站。
（请参阅关于Dreamweaver站点。）在此阶段，最好还要设置与远程服务器的连接，并设
置测试服务器（如果您有动态内容）。
6. 在“代码”视图中开始编码网页，或在“设计/实时”视图中进行设计。
如果您打算使用Photoshop comps，则可以将它们提取到Dreamweaver中并对其进行处理。
有关使用Photoshop comps的更多信息，请参阅Dreamweaver CC中的Extract。
添加设计元素，如文本，图像，翻转图像，图像映射，颜色，电影，声音，HTML链接，表格
等。
7. 使用CSS设置网页外观的样式。
您可以在Dreamweaver中以不同方式使用CSS：
您可以手动编写CSS代码。 有关Dreamweaver编码功能的信息，可帮助您手动编
写CSS代码，请参阅Dreamweaver中的编码环境。
使用Adobe Dreamweaver CC进行Web创作
10© 2017 Adobe Systems Incorporated. All rights reserved.
如果您不熟悉创建CSS页面，可以使用CSS Designer面板来帮助构建CSS。 有关更多
信息，请参阅使用CSS Designer布置页面。
8. Dreamweaver然后自动编译它们（或者您可以选择手动编译它们）并实时查看CSS更改的结果。
有关在Dreamweaver中使用Sass和Less文件的信息，请参阅CSS预处理器。设置用于创建动态内
容的Web应用程序。
许多网站都包含动态页面，允许访问者查看存储在数据库中的信息，并且通常允许一些访问者
在数据库中添加新信息和编辑信息。 要创建此类页面，必须首先设置Web服务器和应用程序服
务器，创建或修改Dreamweaver站点，然后连接到数据库。 欲获得更多信息，
请参阅动态网站，网页和网络表单。
9. 创建动态页面。
在Dreamweaver中，您可以定义各种动态内容源，包括从数据库中提取的记录集，表单参数
和JavaBeans组件。 要将动态内容添加到页面，只需将其拖到页面上即可。
您可以将页面设置为一次显示一条记录或多条记录，显示多页记录，添加特殊链接以从一页记
录移动到下一页（并返回），并创建记录计数器以帮助用户保持 跟踪记录。 欲获得更多信息，
请参阅动态网站，网页和网络表单。
10. 测试，预览和发布您的网站。
在您创建页面时，您需要预览它们以查看您的网站是否根据设计进展。 您可以在拆分视图中进行编
码，并保持您的代码和实时视图并排。
您还可以在设备上实时预览网页（如果您要创建响应式网页），或者在浏览器上预览网页。 如果您
不需要实时预览体验，则可以使用浏览器体验中的常规预览。
如果您已经定义了与远程服务器的连接，那么要发布您的网站，您需要将您的文件放在远程服务器中
以使其生效。
Adobe Dreamweaver概述
入门Dreamweaver
安装Dreamweaver后，首次启动应用程序时，屏幕上会出现一个QuickStart菜单，询问您有三个问题可帮助您
根据需要个性化Dreamweaver工作区。
使用Adobe Dreamweaver CC进行Web创作
11© 2017 Adobe Systems Incorporated. All rights reserved.
根据您对这些问题的回答，Dreamweaver将在Developer工作区（最小的代码聚焦布局）或标准工作区（带有
可视化工具的分割布局和编码时的应用内预览）中打开。
选择工作区后，您可以选择自己喜欢的颜色主题。 然后你就可以开始了。
工作区概述
Dreamweaver工作区允许您查看文档和对象属性。 工作区还将许多最常见的操作放在工具栏中，以便您可
以快速更改文档。
A. 应用栏B.文档工具栏C.文档窗口D.工作区切换器E.面板F.代码视图G.状态栏H.标签
选择器I.实时视图J.工具栏
工作区元素概述
工作区包含以下元素：
应用程序栏：位于应用程序窗口的顶部，包含工作区切换器，菜单（仅限Windows）和其他应用程
序控件。
“文档”工具栏：包含为“文档”窗口的不同视图提供选项的按钮（例如“设计”视图，“实时”视图和“代
码”视图）。
标准工具栏：要显示标准工具栏，请选择窗口>工具栏>标准。
工具栏包含常用操作的按钮
文件和编辑菜单：新建，打开，保存，全部保存，打印代码，剪切，复制，粘贴，撤消和重做。
工具栏：位于应用程序窗口的左侧，包含特定于视图的按钮。
“文档”窗口：在创建和编辑时显示当前文档。
使用Adobe Dreamweaver CC进行Web创作
12© 2017 Adobe Systems Incorporated. All rights reserved.
属性检查器：允许您查看和更改所选对象或文本的各种属性。每个对象都有不同的属性。
标记选择器：位于“文档”窗口底部的“状态”栏中。显示当前选择周围的标记层次结构。单击层次结构
中的任何标记以选择该标记及其所有内容。
面板：帮助您监控和修改您的工作。示例包括“插入”面板，“CSS设计器”面板和“文件”面板。要展
开面板，请双击其选项卡。
“提取”面板：允许您在Creative Cloud上载和查看PSD文件。使用此面板，您可以将PSD组合中
的CSS，文本，图像，字体，颜色，渐变和测量值提取到文档中。
“插入”面板：包含用于将各种类型的对象（如图像，表格和媒体元素）插入文档的按钮。每个对象都
是一段HTML代码，可让您在插入时设置各种属性。例如，您可以通过单击插入表
“插入”面板中的“表格”按钮。 如果您愿意，可以使用“插入”菜单而不是“插入”面板插入对
象。
“文件”面板：允许您管理文件和文件夹，无论它们是Dreamweaver站点还是远程服务器
的一部分。 “文件”面板还允许您访问本地磁盘上的所有文件。 有关更多信息，请参阅管理
文件和文件夹。
Snippets面板：允许您跨不同的Web页面，不同的站点和Dreamweaver的不同安装（使用同
步设置）保存和重用代码片段。 有关更多信息，请参阅使用代码段重用代码。
CSS Designer面板：一个CSS Property Inspector，可让您“直观地”创建CSS样式，文件和
设置属性，以及媒体查询。
有关每个特定Dreamweaver工作空间元素的最新信息，请参阅“用户指南”的“Dreamweaver工作空间
和视图”部分。
设置网站
了解如何在Dreamweaver中设置站点，连接到远程和测试服务器以及执行其他站点管理操作。
关于Dreamweaver站点 : 了解网站在Dreamweaver中的工作方式，并了解为什么在
Dreamweaver中创建网站对您的工作流程非常重要。
设置您网站的本地版本 : 了解如何将本地版本的网站设置为Dreamweaver站点，并使用
“管理站点”对话框设置多个站点并对其进行管理。
连接到发布服务器 :设置FTP，SFTP，WebDav或RDS连接以从发布Web服务器上载或下载文件。
使用Adobe Dreamweaver CC进行Web创作
13© 2017 Adobe Systems Incorporated. All rights reserved.
Dreamweaver中的辅助功能:了解如何使用Dreamweaver使网站和网络产品可供视觉，听觉，运动
和其他残障人士使用。
有关站点管理的其他信息，请参阅“Dreamweaver用户指南”中的“设置站点”文档。
管理文件
以下资源列表将帮助您了解如何在Dreamweaver中管理网站中的文件。 创建和打开不同的文件类型，管理
文件和文件夹，签入和签出，将它们传输到远程站点，以及执行其他此类文件操作。
• 创建和打开文件 : 在Dreamweaver中创建，打开，编辑，保存和还原文件。 创建模板并打
开相关文件。
• 管理文件和文件夹 :了解如何使用“文件”面板在Dreamweaver中管理，传输和同步本地站点和
远程站点之间的文件和文件夹。 还了解自动恢复功能在Dreamweaver中的工作原理。
从服务器获取和放置文件 :学习如何获取和拉出文件您的服务器，并使用Dreamweaver管理文
件传输。
若要了解有关如何使用Dreamweaver管理文件的详细信息，包括如何同步文件，比较本地和远程文件等，请
访问“Dreamweaver用户指南”的“管理文件”部分。
布局和设计
在本节中，您将了解有关如何使用CSS，表格和Dreamweaver的可视化辅助工具来布局和设计网页的更多信息。
此外，您将学习使用Bootstrap进行响应式设计。
• 使用视觉辅助工具进行布局 :了解如何在Dreamweaver中使用可视化辅助工具进行布局，包括设置
标尺，设置布局指南，使用带模板的指南以及使用布局网格。 （请注意，考试中不包括“使用跟踪图
像”功能）。
• 使用Bootstrap设计响应式网站 对于移动优先的响应式网站，请使用Bootstrap入门模板并在
Dreamweaver中拖放Bootstrap组件。
• 使用流体网格布局的响应式设计: 学习如何使用流体网格为移动设备和桌面设计网站。
• 使用表格显示内容: 了解如何使用表格在网站中显示内容。 另外，学习如何拆分和合并表格单元格，以
及导入和导出表格数据。
• 采摘颜色:了解Web安全颜色以及如何使用颜色选择器为Dreamweaver站点选择颜色。
Dreamweaver中的CSS
使用Adobe Dreamweaver CC进行Web创作
14© 2017 Adobe Systems Incorporated. All rights reserved.
层叠样式表（CSS）是一种样式表语言，可用于描述网站的表示。 阅读这组文章，了解如何使用CSS在
Dreamweaver中布局和设计网页。
• 了解层叠样式表（CSS）:学习CSS的基本概念，如CSS规则，选择器，继承等。 另外，了解如何在
Dreamweaver中将CSS与您的网页相关联。
• 关于使用CSS布置页面:了解CSS布局的基本结构以及如何在Dreamweaver中使用CSS设计页面
和内容。
• 使用CSS Designer布置页面:了解如何使用CSS Designer面板创建或附加样式表，媒体查询，选择
器和设置CSS属性。
• 如何在Dreamweaver中设置CSS样式首选项: 了解如何使用CSS样式首选项来控制Dreamweaver如何编写定义CSS样式的代码。
• 在Dreamweaver中移动CSS规则:将CSS规则移动，导出或重新排列到新样式表或Dreamweaver中的
现有样式表。
• 将内联CSS转换为Dreamweaver中的CSS规则:通过在Dreamweaver中将内联样式转换为CSS规则，了解如何使CSS更清晰，更有条理。
页面内容和资产
学习如何管理Dreamweaver中的页面内容和资源 - 文本以及图像和媒体对象等资源。
• 设置页面属性 : 了解如何为Dreamweaver页面设置HTML页面属性和CSS属性，例如字体，背景颜色
和背景图像属性。
• 设置CSS标题属性和CSS链接属性 :了解如何设置CSS标题属性和CSS链接属性，并将其应用于页面上
的所有标题和链接。
• 处理文本 : 了解如何在实时视图，代码视图中添加和格式化文本，或者从PSD文件中提取文本和相关属性。
• 处理资产: 了解如何使用“资产”面板管理当前站点中的资产。
• DOM面板: 通过在实时视图中映射元素或在CSS Designer中应用选择器及其HTML标记，了
解如何使用DOM面板编辑HTML结构。
• 插入和编辑图像: 了解如何在网页中插入，编辑，替换和调整图像和图像占位符的大小。
• 添加媒体对象 : 了解如何在Dreamweaver网页中插入和编辑媒体对象，使用设计备注等。
• 在实时视图中编辑 :了解如何在实时视图中设计，编辑和预览网页。 重新排列或插入元素，应用选
择器，编辑图像属性，插入，编辑和格式化文本，而无需切换到“代码视图”。
在“Dreamweaver用户指南”的“页面内容和资源”部分中了解有关管理页面内容和资产的详细信息。
链接和导航
使用以下资源了解如何管理网站中的导航（以及解决链接问题）。
使用Adobe Dreamweaver CC进行Web创作
15© 2017 Adobe Systems Incorporated. All rights reserved.
• 关于链接和导航 : 了解Dreamweaver中的链接和导航以及绝对，文档相对和站点根目录相对路
径。
• 链接 :了解如何在网页之间设置导航并链接到文件和文档。 另外，了解如何更新，更改和测试
链接。
• 图像映射 : 了解如何在Dreamweaver中使用图像映射为您的网站创建交互式热点。
• 排除链接故障 : 在Dreamweaver中查找并修复损坏的，外部的和孤立的链接。
在Dreamweaver中编码网站
Dreamweaver提供了各种编码工具，使编写网站的任务变得更加容易。 查看下面的资源，了解Dreamweaver的编码功能 - 例如代码提示，代码着色，代码崩溃，代码段重用，多光标，代码linting等。
• 关于Dreamweaver中的编码:了解Dreamweaver如何支持用于构建网站的不同编码语言。
• Dreamweaver中的编码环境 : 了解如何在Dreamweaver中使用编码环境来加快编写代码的过程。
• 设置编码首选项 : 了解如何在Dreamweaver中设置编码首选项，代码主题，格式和代码重写首选项。
• 自定义代码着色 : 了解如何自定义代码元素的颜色（代码着色），例如Dreamweaver中的代码注
释。
• 编写和编辑代码 : 了解如何在代码视图中工作并充分利用Dreamweaver的编码功能。
• 代码提示和代码完成 :使用Dreamweaver代码提示和代码完成功能来最小化编码时间。
如果您有兴趣了解有关Dreamweaver中编码工具的更多信息，请访问用户指南中的Coding
Websites文档。
移动和多屏幕
了解如何在Dreamweaver中设计移动和多屏幕。
• 创建媒体查询 :了解如何使用媒体查询在Dreamweaver中创建自适应网站。 为平板电脑，手机
或任何其他屏幕尺寸设置媒体查询，并在样式表中使用它们。
• 使用Dreamweaver为移动设备创建Web应用程序 : 使用Dreamweaver设计适用于移动设备
的Web应用程序，同时适应设备的尺寸。
• 更改移动设备的页面方向 : 了解在移动设备中查看时如何在横向或纵向中查看Dreamweaver网页。
使用Dreamweaver创建和发布网站
以下是Adobe Education Exchange和Dreamweaver学习与支持页面中的教程和资源列表，您可以在
课堂中使用这些教程和资源来帮助学生准备ACA考试。
使用Adobe Dreamweaver CC进行Web创作
16© 2017 Adobe Systems Incorporated. All rights reserved.
分析网站（课程）
与Domain1和2相关
分析网站以告知设计决策是专业设计师的常见做法。 在现实世界中，设计师会相互评估哪些有效，哪些
无效，以及密切关注新的行业标准和趋势。 使用此活动可以教您的学生如何分析网站以确定他们的受众，
目的，有效性，可用性和可访问性，以帮助他们了解未来的设计决策。
设计原则（课程）
与Domain2相关
设计师使用设计原则来评估和告知其设计的一致性和可视化层次。 然后，可以使用实施，设计和印刷原
则来确保设计达到预期的目标受众和/或实现公司或个人的目标。 使用此活动介绍如何使用设计原则和
排版，以便学生可以评估和通知他们的设计。
定义一个站点
与Domain2和4相关
从一开始，让Adobe Dreamweaver帮助您整理文件和链接，以便您的网站易于管理并且运行良好。
使用HTML定义页面结构
与Domain2,3和4相关
定义明确的网页结构为您的布局和样式提供了基础。 了解如何使用超文本标记语言（HTML）在AdobeDreamweaver中构建页面。
使用CSS的布局和样式页面
与Domain2,3和4相关
使用层叠样式表（CSS）在网页上定位元素并在Adobe Dreamweaver中应用颜色。
将内容添加到您的网页
与Domain2,3和4相关
使用Adobe Dreamweaver中的HTML将页面标题，标题，段落，列表和图像添加到网页。
在Dreamweaver中插入内容
与Domain3和4相关
文本，链接和图形是Web项目的组成部分。 在处理任何Web项目时，他们需要知道如何添加和设置文
本样式，添加图像和图形以及创建链接。 使用此活动可以使用Adobe Dreamweaver向学生介绍如何
使用链接，文本以及图像和图形。
如何创建Web表单
使用Adobe Dreamweaver CC进行Web创作
17© 2017 Adobe Systems Incorporated. All rights reserved.
与Domain3和4相关
创建Web表单是从网站的查看者收集信息的重要工具。 表格在网络上的任何地方使用，联系公司中的某
人，订阅邮件列表，注册活动，收集付款信息，提交调查等等。
创建项目符号和编号列表
与Domain3和4相关
了解如何在Dreamweaver中创建项目符号列表和编号列表。
快速编写HTML，CSS和JavaScript代码 : 了解Dreamweaver如何在您键入时完成HTML，CSS和JavaScript代码。 您还可以在工作时预览颜色和图像，快速浏览代码，并在不离开应用程序的情况下学
习编码定义。
发布和管理网站
与Domain5相关
当您准备好与全世界共享您的网站时，请参阅Adobe Dreamweaver如何帮助您首次发布并管理更新。
如何在Dreamweaver中创建网站
与Domain2,3和4相关
这个由八部分组成的教程系列旨在帮助您指导您在Dreamweaver CC 2015中构建一个简单而优雅的
网站。本系列将带您从站点设置到发布。
创建一个响应式菜单
相关目标：Domain1，Domain w
数字设计课程
数字设计是一个为期一年的基于项目的课程，使用Adobe工具开发关键的数字通信技能，如设计，项目管理，研究
和沟通，以及网络规划，设计和开发技术技能。
ACA TestPrep：使用Dreamweaver CC 2015进行Web创作
需要付费订阅。 涵盖所有Domain名。 与Domain 1相关的三个免费视频
本教程系列专门用于涵盖最新的ACA考试标准，因为它们在新的Creative Cloud版本的考试中得到了解
决。 特别关注新的Dreamweaver CC界面元素，这个49系列视频是学生学习创建HTML和CSS基础知
识的完美方式。
使用Adobe Dreamweaver CC进行Web创作
19© 2017 Adobe Systems Incorporated. All rights reserved.
示例问题Dreamweaver CC2015
所有样本问题均由GMetrix提供。 有关完整的练习考试和其他考试准备材料的信息，请访问GMetrix.com.
选定的回答问题
1. 无论显示尺寸不同，以下哪项用于锁定表的
比例？
a. 百分比
b. 锁表
c. 固定像素
d. 相对的
2. 以下哪一项是收集网站反馈的有效方法（选
择3）？
a. 通过电子邮件发送请求反馈的链接
b. 形式
c. 网站可用性测试
d. 个人访谈
3. 由于越来越多的人通过移动设备访问网站，
因此确保您的网站在移动设备上正确显示
非常重要。 以下哪项是构建智能手机优化
网页的选项？ （选择三个）
a. 响应式网页设计
b. 特定于设备的HTML
c. 设计单独的移动和
桌面网站
d. 混合站点设计（HSD）
4. 经过一些研究后，您了解到有一些工具
需要用来创建您的网站。 以下哪个描述
了一个远程文件夹？
a. 最终文件版本的密码保护位置
b. 存储所有多媒体类型文件的位置
c. Dreamweaver处理动态页面的文
件夹
d. 它将您的文件存储在线以进行测试，
生产和协作
5. 当您的网站上有多个页面时，将相同的样式
应用于所有页面可能会非常繁琐。 哪种方法
适用于将一种样式应用于多个页面？
a. 重复造型
b. 内部样式表
c. 内联样式
d. 外部样式表
使用Adobe Dreamweaver CC进行Web创作
20© 2017 Adobe Systems Incorporated. All rights reserved.
模拟问题在参加实际考试时，您将以模拟方式用鼠标完成每项任务，但对于本学习指南，我们建议您通过写出步骤来
练习。 在提供的空间。
1. 在Assets面板中将文件Logo.png添加为收藏夹。
使用Adobe Dreamweaver CC进行Web创作
21© 2017 Adobe Systems Incorporated. All rights reserved.
2. 将替代文本Glacier添加到图像。
使用Adobe Dreamweaver CC进行Web创作
22© 2017 Adobe Systems Incorporated. All rights reserved.
3. 使用“插入”面板将联系人一词添加到[email protected]。
使用Adobe Dreamweaver CC进行Web创作
23© 2017 Adobe Systems Incorporated. All rights reserved.
4. 在网页上设置实际文本样式是整个网站设计的重要部分。 使用“属性”面板，将文本
Creative Intelligence设置为h4标题样式。
使用Adobe Dreamweaver CC进行Web创作
24© 2017 Adobe Systems Incorporated. All rights reserved.
5. 您想要在您的网站上添加背景图片，以赋予其更多手工制作，狡猾的感觉。 将图像
seamlessWoodPattern.jpg设置为网页的重复背景图像。
使用Adobe Dreamweaver CC进行Web创作
25© 2017 Adobe Systems Incorporated. All rights reserved.
答案
选定的回答问题
1. c
2. a, b, c
3. a, b, c
4. d
5. d
回答模拟问题的关键（下面的答案概述了完成
每个模拟的步骤）
模拟 1
1. 单击“资源”面板的选项卡以展开它
2. 右键单击Logo.png并选择添加到收藏夹
3. 单击“确定”
模拟2
1. 单击选择图像
2. 在底部的属性面板中，单击alt旁边的文本
输入框内部
3. 键入Glacier
模拟3
1. 使用光标突出显示“联系”一词
2. 单击页面顶部的“插入”，然后单击“电子邮件链
接”按钮
3. 在文本部分中键入Contact
4. 在“电子邮件”部分中，键入 [email protected]
5. 单击“确定”
模拟4
1. 单击并拖动以选择文本Creative Intelligence
2. 在“属性”面板中，单击“删除” -格式的下一级菜
单，然后选择Heading 4
或者
1. 在菜单中，选择“格式”>“段落格式”>“标题4”
模拟5
1. 单击“属性”面板中的“页面属性”按钮
2. 选择外观（CSS）类别
3. 在背景图像旁边，单击“浏览”
4. 选择seamlessWoodPattern.jpg并单击“确
定”
5. 在重复旁边的下拉菜单中，选择重复
6. 单击“确定”