第3章DreamweaverCS6入门《网页设计与制作案例教程》（第3版）本章学习内容 3.1学习任务：认识中文版DreamweaverCS63.2学习任务：DreamweaverCS6工作区介绍3.3学习任务：规划与创建站点3.4案例创建欢迎光临网页3.5实训：制作网上家园欢迎页面《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6 本节学习任务了解DreamweaverCS6的特点和主要功能，熟悉安装DreamweaverCS6对系统软硬件的要求，掌握DreamweaverCS6的安装与卸载。
3.1.1DreamweaverCS6的特点DreamweaverCS6是最流行的Web开发工具之
一，不仅是为设计人员同时也是为开发人员而构建的。
借助AdobeDreamweaverCS6软件，用户可以快速、轻松地完成设计、开发、维护网站和Web应用程序的全过程。
《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6 DreamweaverCS6的特点主要有以下几点：
（1）集成的工作区，更加直观，使用更加方便。

（2）支持多种服务器端开发语言。

（3）提供强大的编码功能。

（4）具有良好的可扩展性，可以安装Adobe公司或第三方推出的插件。

（5）提供了更加全面的CSS渲染和设计支持，用户可以构建符合最新CSS标准的站点。

（6）可以更好地与Adobe公司的其它设计软件集成，如FlashCS6、PhotoshopCS6、FireworksCS6等，以方便对网页动画和图像的操作。
《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6 3.1.2DreamweaverCS6的新增功能与之前的版本相比，DreamweaverCS6还具有以下新功能： 新站点管理器基于流体网格的CSS布局CSS3过渡效果多CSS类选区与PhoneGapBuild集成 jQueryMobile1.0和jQueryMobile色板BusinessCatalyst集成Web字体简化的PSD优化对FTP传递的改进《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6 3.1.3DreamweaverCS6的安装与卸载
1．DreamweaverCS6的安装安装DreamweaverCS6，系统的配置需求。

（1）Windows操作系统处理器：IntelPentium4或AMDAthlon64（或兼容处理器）操作系统：MicrosoftWindowsXP及以后各版本RAM：512MB，建议使用1GB内存硬盘：1GB可用硬盘空间用于安装；安装过程中需要额外的可用空间（无法安装在基于闪存的可移动存储设备上）媒体：DVD-ROM驱动器连接或电话连接（用于激活及在线服务）《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6
（2）Macintosh操作系统 处理器：Intel多核处理器操作系统：MacOSX10.5.7或10.6版RAM：512MB硬盘：1.8GB可用硬盘空间用于安装；安装过程中需要额外的可用空间（无法安装在基于闪存的可移动存储设备上）媒体：DVD-ROM驱动器连接或电话连接（用于激活及在线服务）《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6 在保证硬件配置和软件环境符合安装要求的情况下，就可以安装DreamweaverCS6了。
在安装软件之前，议先将Dreamweaver以前的版本进行卸载。
提示：DreamweaverCS6安装程序运行后，会对计算机进行检测，可能会弹出遇到问题的对话框，重新启动计算机或者点击【忽略】按钮即可。
提示：如果所用计算机连接，那么在接受Adobe软件许可协议后，会要求输入一个“AbodeID（电子邮件地址）”和“密码”进行登录，如果没有可以创建一个。
如果所用计算机没有连接，登录操作将被忽略。
《网页设计与制作案例教程》（第3版） 3.1学习任务：认识中文版DreamweaverCS6
2．DreamweaverCS6的卸载如果用户所安装的DreamweaverCS6软件遭到破坏，出现了问题，需要先将DreamweaverCS6进行卸载，然后再重新安装。
卸载DreamweaverCS6的方法是：
（1）打开“控制面板”窗口，从中选择“添加或删除程序”图标命令，打开“添加或删除程序”对话框，选中AdobeDreamweaverCS6程序单击【删除】按钮，打开“卸载选项”界面。

（2）选择卸载的内容，单击【卸载】按钮，进入“卸载”界面，开始执行卸载程序并显示卸载进度。
经过一段时间，卸载程序执行完，显示“卸载完成”界面，单击【关闭】按钮，即完成DreamweaverCS6的卸载。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍 本节学习任务熟悉DreamweaverCS6的工作区，了解菜单栏、文档窗口、文档工具栏、编码工具栏、状态栏、“属性”面板和其他面板组的功能，掌握对面板或者面板组的基本操作。
3.2.1启动DreamweaverCS6 选择“开始→程序→AdobeDreamweaverCS6”启动程序，在运行启动界面完成后进入DreamweaverCS6的“欢迎屏幕”，即“开始页”。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍图欢迎屏幕《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍 3.2.2DreamweaverCS6工作区布局介绍《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
1．菜单栏DreamweaverCS6工作区的最上方是菜单栏，共有“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”10个菜单项，这些菜单几乎提供了DreamweaverCS6中的所有操作选项。
在菜单项的右侧还依次包含默认为“设计器”的工作区样式按钮，可以打开Adobe公司提供的在线服务的按钮，以及实现窗口最小化、最大化或还原、关闭的按钮。
若所用计算机的分辨率高于1360*768，DreamweaverCS6在该栏还提供了三个图标按钮，方便用户的操作，分别是【布局】按钮、【扩展Dreamweaver】按钮、【站点】按钮。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
2．文档窗口文档窗口是DreamweaverCS6操作环境的主体部分，是创建和编辑文档内容，设置和编排页面内所有对象的区域。
文档窗口有多种视图形式，可以通过“查看”菜单或“文档”工具栏中的按钮进行选择，主要的视图形式有以下几种：“设计”视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。
在该视图中，用户即使不懂HTML代码，也可以直接编辑网页。
默认情况下，显示“设计”视图。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍 “代码”视图：是一个用于编写和编辑HTML、CSS、JavaScript等代码的手工编码环境，熟悉HTML、CSS等代码的用户可以直接在该视图中输入代码，编辑或美化网页。
拆分视图：指当前视图被分为左右或上下两个视图，即“代码和设计”视图，这种方式比较适合用户随时在两种视图下编辑或修改网页。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍 “实时”视图：可在不离开Dreamweaver工作区的情况下，实时查看页面的外观，预览网页效果。
“实时”视图不可编辑。
“实时代码”视图：仅在实时视图中查看文档时可用。
“实时代码”视图显示浏览器用于执行该页面的实际代码，当用户在“实时”视图中与该页面进行交互时，它可以动态变化。
“实时代码”视图不可编辑。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
3．文档工具栏文档工具栏位于文档窗口的上方，提供了切换文档窗口布局、预览网页和一些常用文档操作的按钮。
提示：DreamweaverCS6的工具栏有“样式呈现”、“文档”、“标准”“三种，可以通过选择“查看→工具栏”菜单命令设置工具栏显示或隐藏。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
4．状态栏状态栏位于文档窗口的底部，提供与正在创建的文档有关的其他信息。
在状态栏最左侧是“标签选择器”，它显示了当前选定内容的标签的层次结构，单击该层次结构中的标签，可以选中编辑窗口中该标签所对应的内容，单击可以选择整个文档的全部内容。
在状态栏的右侧分别是“选取工具”、“手形工具”、“缩放工具”、“设置缩放比率”、“手机大小（480*800）”、“平板电脑大小（768*1024）”、“桌面电脑大小（1000宽）”、“窗口大小”、“下载文件大小/下载时间”与“UTF-8”编码格式。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
5．“属性”面板在DreamweaverCS6工作区的最下方是“属性”面板，也称为“属性”检查器，它是页面编辑中最常用的一个面板，主要用于检查和设置当前页面选定元素的最常用属性，需要注意的是，选定的元素不同，“属性”面板中的内容也不同。
默认的“属性”面板显示文本属性，如图所示。
图文本“属性”面板《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
6．面板组面板组是位于工作区右侧的几个面板的集合，包括各种可以折叠、移动和任意组合的功能面板，方便用户进行网页的各种编辑操作。
常用的有插入、CSS样式、AP元素、文件、资源等面板。
其中，“插入”面板包含用于将图像、表格、媒体等类型的对象插入到文档中的按钮。
这些按钮以九个类别进行组织，单击右侧带有的类别名称按钮将弹出所有类别菜单，从中选择所需类别进行切换即可。
“文件”面板类似于Windows资源管理器，用于管理文件和文件夹，也可以通过“文件”面板访问本地磁盘上的全部文件。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍用户可以自由地对面板或面板组进行显示或隐藏、移动、调整大小、折叠与展开面板图标等操作。

（1）显示/隐藏面板。
单击某面板的标签，或从“窗口”菜单中选择该面板，即可显示该面板；若要隐藏某面板或面板组，可以右键单击该面板标签，在快捷菜单中选择“关闭”或“关闭标签组”。
选择“窗口→隐藏面板/显示面板”菜单命令，或按〈F4〉键可以显示或者隐藏所有面板，包括“属性”面板。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍
（2）移动面板/面板组。
若要移动某面板，可以拖动其标签；若要移动某面板组，需要拖动其标题栏。
在移动某面板或面板组时，工作区中会出现蓝色突出显示的放置区域，可以将其放置在所需的蓝色突出区域内，否则所移动的面板或面板组将在工作区中自由浮动。
如果将某面板在其所在面板组中移动，只需拖动其标签到目标位置即可。
《网页设计与制作案例教程》（第3版） 3.2学习任务：DreamweaverCS6工作区介绍图移动“文件”面板到其他面板组图移动“插入”面板到新位置 3.2学习任务：DreamweaverCS6工作区介绍
（3）调整面板大小。
双击某面板标签，可以将该面板及其所在面板组最小化。
若要调整面板或面板组大小，拖动面板或面板组的边框即可。

（4）折叠/展开面板。
单击面板组顶部的双箭头按钮，可将面板折叠为图标，再次单击双箭头按钮可将折叠为图标的面板展开。
单击某个面板图标可以展开该面板，再次单击该面板图标或在文档窗口任意位置单击可以隐藏该面板。
图面板折叠为图标《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点 本节学习任务理解本地站点和远程站点的含义，掌握站点的规划原则及创建与管理站点的方法。
3.3.1站点概述在设计制作网站之前，首先需要在本地磁盘上创建本地站点，然后使用Dreamweaver制作网页，并将网页及相关的内容保存在站点文件夹中。
当将本地站点中的文件内容上传到远程服务器上时，服务器上的网页会与本地站点上的网页以相同的方式显示，并能实现同步更新。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点
1．本地站点放置在本地磁盘上的站点称为本地站点。
本地站点就是在建设网站过程中存放所有文件和资源的文件夹。
建立本地站点的目的是为了在建设网站过程中，能够统一管理、即时更新站点文件夹中的所有文件内容。
对于一个含有动态网页的网站，必须在建立站点的情况下，将数据库中的数据与网页中的内容绑定完成连接。
提示：在Dreamweaver中，网页设计都是以一个完整的Web站点为基本对象，所有资源的改变和网页的编辑都在此站点中进行，不建议脱离站点环境，初学者要养成良好的习惯。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点
2．远程站点位于互联网Web服务器里的网站被称为远程站点。
网页制作者并不需要知道远程服务器的具体位置，只要知道可以上传和下载网页文件的IP地址、用户名和密码即可。
当本地站点中所有的网页制作完成并测试无误后，就可以将本地站点文件夹中的所有文件上传到远程服务器上，供访问者随时随地浏览网页。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点 3.3.2规划站点在定义站点前首先要做好站点的规划，包括站点的目录结构、链接结构等。
网站的目录结构是网站组织和存放站内所有文档的目录设置情况。
目录结构的好坏，直接影响站点的管理、维护、扩充和移植。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点规划站点要注意以下原则:
（1）构建层次清晰的文档结构。
为站点创建一个根文件夹，在其中创建多个子文件夹，将文档分门别类存储到相应的子文件夹下。

（2）优化网站的链接结构。
网站的链接结构是指页面之间的相互链接关系。
应该用最少的链接，使浏览达到最高的效率。

（3）规划规范、统一的网页布局。
规范的站点中网页布局基本是一致的，使用模板和库，可以在不同的文档中重用页面布局和页面元素，给网页的制作和维护带来方便。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点 3.3.3创建本地站点在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点的文件夹，那么这个文件夹就是本地站点的根目录。
如果是新建的文件夹，那么这个站点就是空的，否则这个站点就包含了已经存在的文件。
建立站点的具体步骤如下：
(1)启动DreamweaverCS6，在“欢迎屏幕”中选择“新建→Dreamweaver站点”，或者选择“站点→新建站点”菜单命令打开“站点设置对象”对话框，如图所示。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点图“站点设置对象”对话框《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点
(2)在“站点”类别中，为Dreamweaver站点选择本地站点文件夹、设置站点名称。
其中，站点名称将显示在“文件”面板中的站点下拉列表中，但不会在浏览器中显示。
本地站点文件夹的选择，可以直接在文本框中输入文件夹路径和文件夹名，也可以单击文本框右侧的【浏览文件夹】按钮，在打开的“选择根文件夹”对话框中选择一个文件夹。

(3)单击【保存】按钮，即可完成本地站点的创建。
创建的本地站点出现在“文件”面板中。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点在“站点设置对象”对话框中，还有服务器、版本控制、高级设置几个类别，它们的主要功能如下。
服务器：允许指定远程服务器和测试服务器。
这个配置是可选配置，如果不需要本地测试或编辑直接上传到Web服务器，可以忽略这一项配置。
版本控制：是可选设置，可以设置使用Subversion获取和存回文件。
高级设置：是可选设置，其中包含多个类别，默认打开“本地信息”类别。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点图“站点设置对象”的“本地信息”对话框《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点 “默认图像文件夹”用于设置默认的存储站点图像文件的文件夹；“站点范围媒体查询文件”用于设置站点的外部CSS样式表文件； “链接相对于”表示指向其它资源或页面的链接时，创建的链接类型默认为“文档”或者“站点根目录”；“WebURL”表示Dreamweaver将使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接；勾选“区分大小写的链接检查”表示在Dreamweaver检查链接时，将检查链接的大小写与文件名的大小写是否相匹配，此选项用于文件名区分大小写的UNIX系统；勾选“启用缓存”将创建本地缓存以提高链接和站点管理任务的速度。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点 3.3.4管理站点选择“站点→管理站点”菜单命令，打开“管理站点”对话框，可以对站点进行编辑、复制、删除、导入、导出等操作。

1．编辑站点创建站点后，可以对站点设置信息进行编辑修改。
编辑站点的具体方法：在“管理站点”对话框中选择要编辑的站点，单击【编辑当前选定的站点】按钮，可再次打开“站点设置对象”对话框，然后根据需要编辑站点的相关信息即可，单击【保存】按钮完成设置。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点
2．复制站点通过复制站点可以减少建立多个结构相同站点的操作步骤，提高用户的工作效率。
复制站点的具体方法：在“管理站点”对话框中选择要复制的站点，单击【复制当前选定的站点】按钮，即可复制选中的站点。
新复制的站点出现在“管理站点”对话框的站点列表中。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点
3．删除站点如果不再需要某个站点，可以将其从站点列表中删除。
删除站点的具体方法：在“管理站点”对话框的站点列表中选中需要删除的站点，单击【删除当前选定的站点】按钮，弹出删除确认对话框，询问用户是否要删除选中站点，单击【是】按钮执行删除。
提示：删除站点操作只是删除了Dreamweaver与该站点之间的关系，站点的文件夹、文档等内容仍然保存在机器相应的位置，可以重新创建指向该位置的新站点，对其进行管理。
《网页设计与制作案例教程》（第3版） 3.3学习任务：规划与创建站点
4．导出与导入站点导出和导入是一对互逆的操作，导出是将Dreamweaver中站点的定义信息记录在一个扩展名为“.ste”的文件中单独进行存储。
导入则是将含有站点定义信息的“.ste”文件重新加载到Dreamweaver中，使Dreamweaver能对站点进行识别与管理。
导出站点具体方法：在“管理站点”对话框中选择要导出的站点，单击【导出当前选定的站点】按钮，打开“导出站点”对话框，定义文件名并指定好保存的路径，单击【保存】按钮导出站点。
通常保存的路径应该在站点文件夹之外的目录下。
导入站点具体方法：在“管理站点”对话框中单击【导入站点】按钮，打开“导入站点”对话框，找到所需的“.ste”站点定义文件，单击【打开】按钮进行导入。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页 学习目标：掌握在DreamweaverCS6中创建空白网页文档的方法；掌握页面属性的设置方法；掌握保存、预览网页的方法。
知识要点：创建网页，设置页面属性，保存、预览网页操作。
案例效果如图所示。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页图欢迎光临网页效果《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页 3.4.1创建网页文档在DreamweaverCS6中可以创建空白网页文件，也可以通过DreamweaverCS6内置的模板创建具有一定内容和样式的网页文档。

（1）选择“文件→新建”菜单命令，或者使用组合键打开“新建文档”对话框。
选择左侧的“空白页”，在中间的“页面类型”栏中选择“HTML”，在“布局”栏中选择“<无>”，单击【创建】按钮即可创建一个空白网页文档。
文档窗口的上方显示该文件的默认名称为Untitled-
1。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
（2）在文档窗口中输入文字“欢迎光临”，按下键，准备在文字下面插入一幅图片。

（3）选择“插入→图像”菜单命令，或者单击“插入”面板“常用”类别中的【图像】按钮，打开“选择图像源文件”对话框，在“查找范围”下拉列表中，选择图像文件所在的目录并选中图像文件，单击【确定】按钮插入图像。

（4）选中文档中“欢迎光临”文字，单击“属性”面板中的按钮，在“属性”面板“CSS”类别中单击【居中对齐】按钮，这时将打开“新建CSS规则”对话框，设置选择器类型为“标签（重新定义HTML元素）”，并输入选择器名称“p”，单击【确定】按钮即可使文字和图像居中对齐。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页 3.4.2设置页面属性页面属性用于设置当前被编辑网页文档的整体属性，包括网页的标题、背景图像、正文中各种元素的颜色等内容。
选择“修改→页面属性”菜单命令，或按快捷键，或单击文本“属性”面板上的【页面属性】按钮均能打开“页面属性”对话框。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页图页面属性对话框《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
1.外观（CSS）：可以使用CSS设置网页的一些基本属性。
页面字体：指定页面中为文本使用的默认字体系列。
粗体按钮：用于指定页面中的文本默认显示为粗体。
斜体按钮：用于指定页面中的文本默认显示为斜体。
大小：指定页面中为文本使用的默认大小。
文本颜色：指定页面中为文本使用的默认颜色。
背景颜色：指定页面的背景颜色。
背景图像：指定页面的背景图像。
重复：用于指定背景图像的显示方式。
左边距/右边距/上边距/下边距：用于设置页面元素与页面边框的距离。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
2.外观（HTML）《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
2.外观（HTML）可以通过HTML方式设置网页的背景图像、背景颜色、文本颜色、左边距和上边距，除此之外，其他可以设置的属性如下。
链接：指定页面中链接文本在链接前显示的颜色。
默认为蓝色。
已访问链接：指定页面中链接文本被访问过后显示的颜色。
默认为紫色。
活动链接：指定当鼠标在链接上单击时，链接文本显示的颜色。
默认为红色。
边距宽度/边距高度：指定页面边距的宽度和高度，以像素为单位，仅适用于NetscapeNavigator浏览器。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
3.链接（CSS）《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
3.链接（CSS）：可以用CSS设置超链接的属性。
链接字体：指定超链接文本的字体系列。
默认与“外观（CSS）”中的“页面字体”相同。
粗体按钮：用于指定页面中的链接文本默认显示为粗体。
斜体按钮：用于指定页面中的链接文本默认显示为斜体。
大小：指定页面中为链接文本使用的默认大小。
链接颜色：指定用于链接文本的颜色。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页 变换图像链接：指定当鼠标位于链接文本上方时，文本的颜色。
已访问超链接：指定用于已访问过的超链接文本的颜色。
活动链接：指定当鼠标在链接上单击时，链接文本显示的颜色。
下划线样式：指定应用于链接的下划线样式。
《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
4.标题（CSS）《网页设计与制作案例教程》（第3版） 3.4案例创建欢迎光临网页
4.标题（CSS）可以用CSS设置标题的属性。
标题字体：指定标题使用的字体系列。
默认与“外观（CSS）”中的“页面字体”相同。
标题1～标题6：分别指定