任务1.2 用Dreamweaver CC创建站点_网页设计与制作项目化教程-QQ阅读男生玄幻网

书名：网页设计与制作项目化教程
作者名：何芳谭冬平姜东洋主编
本章字数：6872字
更新时间：2021-03-26 05:33:27

任务1.2 用Dreamweaver CC创建站点

了解了网站的基本概念和开发流程后，还需要了解和熟悉网站的开发工具。本节主要介绍Dreamweaver CC的基本知识，读者通过本节内容的学习，将掌握使用Dreamweaver CC创建本地站点、管理站点以及文档的基本操作。

任务内容分析

Dreamweaver是一种非常方便的所见即所得式的页面开发工具，通过本任务我们主要掌握Dreamweaver的操作界面，站点、文件的基本操作方法，常用环境参数的设置方法。本任务主要解决以下问题：

① 熟悉Dreamweaver的操作界面；

② 使用Dreamweaver进行站点管理；

③ 页面的基本操作；

④ 设置页面属性。

任务知识学习

1.2.1 Dreamweaver CC概述

在网页制作领域，Dreamweaver是目前最流行的网页设计与开发工具之一。Dreamweaver CC是Dreamweaver当前最新的一个版本，Dreamweaver CC是一套针对专业网页设计师的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台和浏览器限制的充满动感的网页。

1. Dreamweaver CC的新增功能

Dreamweaver CC 提供了众多功能强大和可视化设计工具、应用开发环境和代码编辑支持功能，使开发人员和设计师能够快捷创建代码规范的应用程序，其集成程度非常高，开发环境精简而高效，开发人员能够运用Dreamweaver CC与服务器技术，构建功能强大的网络应用程序，并且衔接到用户的数据、网络服务体系中。

Dreamweaver CC同以前的Dreamweaver CS6 版本相比，增加了一些新的功能，并且还增强了很多原有的功能。下面就对Dreamweaver CC的新增功能进行简单的介绍。

（1）全新简化的用户界面。Dreamweaver CC对工作界面进行了全面的精简，减少了对话框的数量和很多不必要的操作按钮，如对文档工具栏和状态栏都进行了精简，使得整个工作界面更加直观、简洁。

（2）新增HTML 5画布插入按钮。HTML 5 中的画布元素是在网页中动态创建图形的容器，这些图形是在网页运行过程中通过JavaScript脚本创建的。在Dreamweaver CC 的“插入”面板中，新增了“画布”插入按钮，单击“插入”面板“常用”选项卡中的“画布”按钮，即可快速地在网页中插入HTML 5 画布元素。

（3）新增网页结构元素。在Dreamweaver CC 中新增了HTML 5 结构语义元素的插入操作按钮，它们位于“插入”面板的“结构”选项卡中，包括“页眉”、“标题”、Navigation、“侧边”、“文章”、“章节”和“页脚”等。通过这些按钮，可以快速地在网页中插入HTML 5 语义标签。

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

（5）新建HTML 5音频和视频插入按钮。虽然在Dreamweaver CS5.5 和CS6版本中，已经可以支持HTML 5的相关标签，但是只能是通过代码视图直接编写HTML 5代码。在Dreamweaver CC 中提供了对HTML 5更全面、更便捷的支持，用户可以通过新增的HTML 5音频和视频插入按钮。在网页中轻松插入HTML 5音频和视频，而不需要编写HTML 5代码。

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

（7）新增HTML 5 表单输入类型。在Dreamweaver CC 中，为了能够对HTML 5 提供更好的支持和更便捷的操作，新增了许多HTML 5 表单输入类型，这些HTML 5 表单输入类型，位于“插入”面板的“表单”选项卡中，包括“数字”、“范围”、“颜色”、“月”、“周”、“日期”、“时间”、“日期时间”和“日期时间（当地）”。单击相应的按钮，即可在页面中插入相应的HTML 5 表单输入类型。

2. Dreamweaver CC的界面

在Dreamweaver CC的程序界面中，将一系列窗口和选项面板组合起来，操作很方便，使用者的工作效率可以明显提升。

Dreamweaver CC应用程序窗口包括菜单栏、文档工具栏、文档窗口、工作区切换器、面板组合、标签选择器、“属性”检查器等几个部分，如图1-5所示。

图1-5 Dreamweaver CC应用程序操作界面

A：文档工具栏。文档工具栏包含一些按钮，它们提供各种文档窗口视图，如“设计”视图和“代码”视图等的选项，以及各种查看选项和一些常用操作。

B：菜单栏。菜单栏包含所有可执行命令的菜单，可以利用浮动面板组合来操作命令，以减少操作时间，但当浮动面板被关闭时，就需要通过菜单栏来执行相关命令。

C：文档窗口。文档窗口显示当前正在创建和编辑的文档。

D：工作区切换器。工作区切换器用于切换不同操作界面，以适应不同等级设计者的操作需求。

E：面板组合。Dreamweaver CC的面板组合包含文件、行为、层、CSS等常用面板，面板组合是可自定义的，用户可根据自身设计需求组合面板，以最大限度地方便操作。

F：“文件”面板。用于管理文件和文件夹。使用“文件”面板，还可以访问本地磁盘上的所有文件。

G：“属性”检查器。“属性”检查器用于查看和更改所选对象或文本的各种属性。每个对象都具有不同的属性。在编码器工作区布局中，“属性”检查器默认是不展开的。

H：标签选择器。标签选择器位于文档窗口底部的状态栏中，显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签，都可以选择该标签及其全部内容。

3. Dreamweaver的工作流程

（1）规划和设置站点。确定将在哪里发布文件，检查站点要求、访问者情况以及站点目标。此外，还应考虑诸如用户访问，以及浏览器、插件和下载限制等技术要求。在组织好信息并确定结构后，您就可以开始创建站点。

（2）组织和管理站点文件。在“文件”面板中，可以方便地添加、删除和重命名文件及文件夹，以便根据需要更改组织结构。在“文件”面板中还有许多工具，可使用它们管理站点，向/从远程服务器传输文件，设置“存回/取出”过程来防止文件被覆盖，以及同步本地和远程站点上的文件。使用“资源”面板可方便地组织站点中的资源，然后可以将大多数资源直接从“资源”面板拖到 Dreamweaver 文档中。此外，还可以使用 Dreamweaver来管理Adobe Contribute 站点的各个方面。

（3）设计网页布局。选择要使用的布局技术，或将Dreamweaver布局选项与布局技术结合使用来创建站点外观。可以使用 Dreamweaver AP元素、CSS 定位样式或预设计的CSS布局来创建网页的布局。利用表格工具，可以通过绘制并重新安排页面结构来快速地设计页面。如果希望同时在浏览器中显示多个元素，可以使用框架来设计文档的布局。最后，可以基于 Dreamweaver模板创建新的页面，然后在模板更改时自动更新这些页面的布局。

（4）向页面添加内容。添加资源和设计元素，如文本、图像、鼠标，以及图像、图像地图、颜色、影片、声音、HTML 链接、跳转菜单等。可以对标题和背景等元素使用内置的页面创建功能，在页面中直接输入，或者从其他文档中导入内容。Dreamweaver 还提供相应的行为，以便为响应特定的事件而执行任务，例如，在访问者单击“提交”按钮时验证表单，或者在主页加载完毕时打开另一个浏览器窗口。最后，Dreamweaver 还提供了专用工具，以便最大限度地提高Web站点的性能，并测试页面，以确保能够兼容不同的 Web 浏览器。

（5）通过手动编码创建页面。手动编写网页的代码是创建页面的另一种方法。Dreamweaver提供了易于使用的可视化编辑工具，但同时提供了高级的编码环境；使用者可以采用任一种方法（或同时采用这两种方法）来创建和编辑页面。

（6）针对动态内容设置Web应用程序。许多Web站点都包含了动态页，动态页使访问者能够查看存储在数据库中的信息，并且一般会允许某些访问者在数据库中添加新信息或编辑信息。若要创建此类页面，则必须先设置Web服务器和应用程序服务器，创建或修改Dreamweaver站点，然后连接到数据库。

（7）创建动态页。在Dreamweaver中，使用可以定义动态内容的多种来源，其中包括从数据库提取的记录集、表单参数和JavaBeans组件。若要在页面上添加动态内容，只需要将该内容拖动到页面上即可。

（8）测试和发布。测试页面是在整个开发周期中进行的一个持续的过程，在这一工作流程的最后，可以在服务器上发布该站点。许多开发人员还会安排定期的维护，以确保站点保持最新并且工作正常。

使用者可以使用多种方法来创建Web站点，上面介绍的只是其中的一种方法。

1.2.2 使用Dreamweaver CC创建本地站点

1. 创建新站点

设置Dreamweaver站点是一种组织所有与Web站点相关联文档的方法。用户可在“站点设置”对话框中，为Dreamweaver站点指定设置。

若要创建新的本地站点，可在Dreamweaver主界面中执行“站点”→“新建站点”命令，弹出如图1-6所示的对话框，在其中可以进行站点的相关设置。

图1-6 “站点设置对象未命名站点2”对话框

（1）“站点”选项。仅需设置“站点”选项，即可开始创建Dreamweaver站点。在“站点”类别中，为Dreamweaver 站点设置站点名、选择本地站点文件夹。本地站点文件夹的设置，可以直接在文本框中输入文件夹路径和文件夹名，也可以点击【浏览文件夹】按钮，在打开的“选择根文件夹”对话框中选择一个文件夹。

设定站点类别后，可以继续设置其他选项。例如，用户可以在“服务器”选项中指定远程服务器上的远程文件夹。

注意：若本地根文件夹位于运行Web服务器的系统中，则无需指定远程文件夹。这意味着该Web服务器正在本地计算机上运行。

站点名称为显示在“文件”面板和“管理站点”对话框中的名称，不会在浏览器中显示。

本地站点文件夹为本地磁盘上存储站点文件、模板和库项目的文件夹。当Dreamweaver解析站点根目录的相对链接时，是相对于该文件夹来解析的。

（2）“服务器”选项。用户在“服务器”选项界面中，可以指定远程服务器和测试服务器，如图1-7所示。

图1-7 “服务器”选项

远程服务器用于指定远程文件夹的位置，该文件夹可以存储生产、协作、部署或许多其他方案的文件。远程文件夹通常位于运行Web服务器的计算机上。

远程文件夹被称为远程站点。在设置远程文件夹时，必须为Dreamweaver选择连接方式，以便将文件上传到Web服务器或从Web服务器下载。

注意：Dreamweaver可以连接到支持IPv6的服务器上，所支持的连接类型包括FTP、SFTP、WebDav和RDS。

（3）“版本控制”选项。该选项是可选项，在“版本控制”选项界面中，可以使用Subversion获取和存回文件，如图1-8所示。

图1-8 “版本控制”选项

（3）“高级设置”选项。该选项是可选项，在“高级设置”选项界面中，可以设定“遮盖”、“设计备注”、“文件视图列”等多项内容，如图1-9所示，本书不做详细介绍，用户可以通过帮助功能进行了解。

图1-9 “高级设置”选项

2. 管理站点

成功创建站点后，“文件”面板中会显示本地站点中的文件和文件夹。对于一个已经创建的站点，可以在“管理站点”对话框中，查看站点、编辑站点、复制站点、删除站点、导入或导出站点等。

（1）查看站点。如果在Dreamweaver中创建了多个站点，那么可以在“文件”面板的站点列表中选择某个站点，以便切换到该站点，如图1-10所示。

（2）编辑站点。对于一个已经创建的站点，可以在“管理站点”对话框中编辑站点。

在Dreamweaver主界面中，执行“站点”→“管理站点”命令，在弹出的“管理站点”对话框的列表框中选择一个站点，单击“编辑”按钮相应按钮进行相关设置和编辑，如图1-11所示。设置和编辑完成后，单击“完成”按钮。

（3）复制站点。在“管理站点”对话框中，选择要复制的站点，单击【复制当前选定的站点】按钮，即可复制选中的站点，新复制的站点在“管理站点”对话框的站点列表中显示，如图1-12所示。

图1-12 “复制站点”对话框

（4）删除站点。在“管理站点”对话框中选择要删除的站点，单击【删除当前选定的站点】按钮执行删除，在弹出的“删除确认”对话框中点击【是】，确认删除后，即可将选中的站点删除，如图1-13所示。

图1-13 “删除站点”对话框

（5）导入和导出站点。导出是将Dreamweaver中站点的定义信息记录，在一个扩展名为“.ste”的文件中单独进行存储。导入是将含有站点定义信息的“.ste”文件重新加载到Dreamweaver中，使Dreamweaver能对站点进行识别与管理。

导出站点方法：在“管理站点”对话框中选择要导出的站点，单击【导出当前选定的站点】按钮，在“导出站点”对话框中定义文件名，并制定保存的路径，单击【保存】按钮，即可导出站点。

导入站点方法：在“管理站点”对话框中单击【导入站点】按钮，打开“导入站点”对话框，找到对应的“.ste”站点定义文件，单击【打开】按钮，即可完成导入。

提示：若要一次导出或导入多个站点，可以同时选中要导入的“.ste”文件，或者同时选中要导出的多个站点，然后执行相应操作即可。

1.2.3 站点文件管理

1. 创建新文件夹或文件

（1）新建文件夹。在“文件”面板中右击站点根文件夹，在弹出的快捷菜单中选择“新建文件夹”命令，新建一个名为untitled的文件夹，可以修改该文件夹的名称，按Enter键或单击任意处确定修改。

（2）新建网页文件。在Dreamweaver CC中新建文件有很多方法，常用的有以下3种。

① 使用“文件”面板创建新文件。右击站点根文件夹或站点文件夹，在弹出的快捷菜单中选择“新建文件”命令，在该文件夹中创建一个名为untitled.html的文件，如图1-14所示，可以将其重命名为需要的文件名。

② 使用欢迎界面。启动Dreamweaver CC时，系统会自动打开欢迎界面，如图1-15所示。

图1-14 使用“文件”面板新建文件

图1-15 使用欢迎界面新建文件

使用该界面可以快速执行一些常用操作。例如，打开最近的项目、新建文件或站点、从模板创建文件等。

单击“新建”选项区中的HTML选项，即可创建一个空白网页文档。

③ 使用“新建文档”对话框。执行“文件”→“新建”命令，弹出“新建文档”对话框，如图1-16所示。

图1-16　使用“新建文档”对话框创建新文件

在左侧选项区中选择“空白页”选项，然后在“页面类型”列表框中选择HTML选项，在“布局”列表框中选择“无”选项，然后单击“创建”按钮，创建一个空白网页文档。

（3）文件命名规则。在网站开发过程中，文件和文件夹的命名是一个需要特别注意的事项。符合规则的命名既能保证网站正常工作，又能简化维护工作。网站中的文件命名规则如下。

① 最好使用小写英文名称（或汉语拼音），如index.html、start.jpg等。

② 尽量不要大小写混用，因为某些系统区分大小写，而另一些不区分，大小写混用容易引起混乱。

③ 不要使用中文文件名，因为部分系统无法显示具有中文文件名的网页或文件。

④ 可以使用数字、下划线或分割线，如summer.jpg、bg-1.jpg、about1.htm等。

⑤ 不允许使用特殊字符，如，、！、？、/、\、*、#、@、$等，尤其不能使用空格，即名称中应该只包含字母、数字、-或者_。

⑥ 网页的扩展名既可以是.htm，也可以是.html，但一定要选定其中一种，而不要两种交叉使用，否则很容易造成混乱。

⑦ 需要特别强调的是，不论是文件、文件夹，还是其他网站文件的命名，一定要让其名称具有清楚明确的含义，而不要用一些无法理解其含义的字符序列。例如，文件名soft.html很容易被理解为与软件相关的网页，而a.html则是个抽象的命名，无法判断该文件的内容。另外，文件的扩展名是由相应软件自动生成的，通常不需要手动修改。

2. 利用“文件”面板处理文件

在“文件”面板中，可以方便地利用鼠标右键快捷菜单进行文件相关操作，如剪切、复制、删除、重命名等。

在文件列表中右击要处理的文件（或文件夹），在弹出的快捷菜单中，选择“编辑”命令下相应的子命令，就可以实现对文件的管理，如图1-17所示。

也可以使用鼠标拖动文件的方式来实现文件夹的移动，在站点文件列表中，选择要移动的文件或文件夹，用鼠标将其拖动到目标文件夹中，然后释放鼠标即可，如图1-18所示。

图1-17 对文件进行管理

图1-18 文件的移动

3. 预览网页文档

（1）在Dreamweaver中预览网页。在Dreamweaver CC中可以使用“实时”视图预览当前页面。“实时”视图与传统 Dreamweaver“设计”视图的不同之处，在于它提供页面在某一浏览器中非可编辑的、更逼真的呈现外观。“实时”视图不替换“在浏览器中预览”命令，而是在不必离开 Dreamweaver 工作区的情况下，提供另一种“实时”查看页面外观的方式。

在“设计”视图或“代码和设计”视图中，单击“实时视图”按钮，即可在Dreamweaver中预览网页，如图1-19所示。