Dreamweaver CS6网页设计与制作标准教程 (2)
《Dreamweaver CS6网页设计与制作》第2章 Dreamweaver基础知识 刘敏娜 主编PPT课件
3、查看面板组的“选项”菜单：单击面板 或面板组右上方的选项按钮，在列表中可 以对网页进行设置，比如有新建和打开文 件等操作。
4、重命名面板组：可以为面板组命名，操 作方法：单击面板组的选项列表，选择重 命名面板组，输入新名称就可以了。
2.2.4自定义快捷键
Dreamweaver为用户定制了一些常用 命令的快捷键，当然用户也可以自己设置 快捷键。方法是：点击“编辑”菜单-〉“快 捷键”，选择需要更改的命令，如“新建” 命令，单击右上角的“复制副本”按钮复 制为副本（可以为副本重命名），在副本 设置中继续选择“新建”，在“按钮”输 入框按下新设置的快捷键（在键盘上直接 输入组合键，要求必须是包含ctrl键）,单击 “确定”即可生效。
窗口的各组成要素
面板组
组合在一个标题下面的多个相关的面板的集合。可以通过 单击组名称左侧的展开箭头将这多个面板在折叠或展开之 间切换。
文件面板
这个面板组非常重要，用来管理文件和文件夹，还可以对 站点进行操作，查看站点中的资源。
标签选择器
处于文档底部的状态栏中，用来显示当前选定html对象标 签的层次结构，单击其中的任何标签，就可以选中该标签 及其内容。
窗口的各组成要素
文档工具栏
文档工具栏上有视图切换的按钮，另外还包含文件管理功 能，上传下载，浏览器预览等功能按钮。
文档窗口
显示用户正在编辑的网页文档。
属性浮动面板
可以查看和编辑当前选定的网页元素的属性，此面板中的 内容会随着选中对象的不同而变化，比如当前选中了文字， 面板中就会显示文字相关的属性，如字体，大小，样式等。
单击文档工具栏左边的3个按钮，可以在“代
码视图”，“设计视图”和“拆分”视图之间切
换。另外在工具栏中还有添加网页标题，文件管理，Βιβλιοθήκη 本地和远程站点间传送文档等命令。如下
Dreamweaver-CS6网页制作第2章
后退
定义在新建样式表文件
结束
2.2使用CSS规则美化文本
（2）单击“确定”按钮，弹出如下图所示的对话框
，定义样式文件名称为“mycss”保存在站点目录
“D:\mysite”文件夹中。
目录
前进
后退
保存新样式表文件“mycss”
结束
2.2使用CSS规则美化文本
（3）单击“保存”按钮，弹出“CSS规则定义”对 话框，保持默认值，单击“确定”按钮。在“属性 ”面板中，定义“title2”样式，大小为“16px”、 目录 颜色为“#960”、“粗体”，效果如下图所示：
中选择“D:\mysite\images\flying.gif”图像文件，
单击“确认”按钮，图像插入后通过标签编辑器将
“对齐”属性设置为“右”。
调整大小：宽度 为215像素，高 度为160像素
前进
后退
设置图像大小
结束
2.3添加图像
（4）使用快捷键插入图象：将插入光标移动到“立
志飞翔”部分的第五段文字“但我”前，使用组合 目录
对话框中选择“D:\mysite\images\flying.gif”图像
文件，单击“确认”按钮，图像插入后通过标签编
辑器将“对齐”属性设置为“左”。
前进
调整大小：宽度 为285像素，高 度为213像素
设置图像大小
后退 结束
2.3添加图像
（3）使用“插入”菜单插入图象：将插入光标移动
到“立志飞翔”部分的第三段文字“听着”前，选 择“插入”栏“常用” 类别中的 按钮，在对话框 目录
达到如图所示的效果，还要对“自我介绍”的内容
后退
制作列表，要在文档中添加水平线，编辑网页的外
新媒体网页设计与制作—Dreamweaver CS6基础、案例、技巧实用教程课件第2章
2.5 网页文件的基本操作
2.5.2 保存网页
在Dreamweaver CS6中对文档进行编辑后，需要对 文档进行保存以备浏览和修改。选择【文件】/【保存】 命令，弹出【另存为】对话框，在【保存在】下拉列表 框中选择文档的保存位置，并在【文件名】下拉列表框 中输入网页名称，单击【保存】按钮，完成网页的保存。
预览网页
第2章 认识Dreamweaver CS6
本章学习要点： 1．Dreamweaver CS6的工作区 2．Dreamweaver CS6文档视图 3．网页的构成 4．网页设计方法
2.1 Dreamweaver CS6工作界面
2.1.1 界面布局
2.1.2 认识Dreamweaver CS6工作面板
2.2.2 简捷而高效的操作
• 改良的FTP 性能 • Business Catalyst 集成 • CSS3过渡效果 • Adobe BrowserLab集成 • 站点特定的代码提示
2.3 创建本地站点
Dreamweaver CS6对同一网站中的文件是以“站点” 为单位来进行有效组织和管理的，因此在创建网站之 前，首先需要创建一个本地站点，用于存储和管理网 站中的各种网页文档以及相关的资源等数据，使网站 设计者对网站的结构有一个整体的把握。
2.5.3 预览网页
对网页进行编辑后，如果想查看网页在浏览器中的 显示效果，可以通过以下方法实现预览： 1．选择【文件】/【在浏览器中预览】/【IExplore】。 2．单击文档工具栏的按钮。 3．按F12快捷键。
2.5.4 设置页面属性
选择【修改】/【页面属性】命令或单击【属性】面 板上的【页面属性】按钮，弹出【页面属性】对话框， 在窗口左侧的【分类】列表中选择相应类别后，在右侧 窗口对各属性进行详细设置，如下图所示：
网页设计与制作第2章 Dreamweaver基础
2.4.2 复制站点
复制站点的方法是，在【管理站点】对话框中选中要复制的站点，然后 单击 按钮复制选定的站点，并显示在【您的站点】列表框中，此时再对复 制的站点进行编辑即可。
2.4.3
删除站点
在【管理站点】对话框中删除站点仅仅是删除了在 Dreamweaver CS6中 定义的站点信息，存在磁盘上的相对应的文件夹及其文件是仍然存在的。
2.3.1 教学案例━━创建站点“梦想”
创建一个本地站点，站点名称为“梦想”，指向本地文件夹 “D:\mengxiang”，然后在站点中创建文件夹“images”，在根文件夹下 创建网页文件，并保存为“index.htm”。
2.3.2 定义Dreamweaver站点
在Dreamweaver CS6中，新建Dreamweaver站点的方法是：选择 菜单命令【站点】/【新建站点】，在打开的对话框中，输入站点名 称，并设置好本地站点文件夹即可。如果现在不需要创建动态网页文 件或不需要将网页文件发布到远程站点上，可以暂时不设置【服务器】 选项，在需要时再行设置即可。
2.4.4
导出站点
导出站点的方法是，在【管理站点】对话框中选中要导出的站点，然后 单击【导出站点】按钮打开【导出站点】对话框进行设置即可。
2.4.5
导入站点
导入站点的方法是，在【管理站点】对话框中单击【导入站点】按钮， 打开【导入站点】对话框，选中要导入的站点文件，单击【打开】按钮导入 即可。
2.4.6
新建站点
在【管理站点】对话框中单击】/【新建站点】按钮可以打开对话框新建 站点，这与菜单命令【站点】/【新建站点】的作用是相同的。
2.5 插入文件头标签
2.5.1 2.5.2 2.5.3 2.5.4
网页设计与制作(Dreamweaver CS6)教案(第2版 杨杰版)
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
Dreamweaver CS6网页设计与制作标准教程 (2)
（ 1 ）在“管理站点”对话框左下方的按钮选项组中，单击
“删除当前选定的站点”按钮 进行删除。 即可删除选择的 （2）单击“删除当前选定的站点”按钮
站点。
2.4.5 导入和导出站点
如果在计算机之间移动站点，或者与其他用户共同设计站点，
可通过Dreamweaver CS6的导入和导出站点功能实现。导出站点 功能是将站点导出为“.ste”格式文件，然后在其他计算机上将其
“刷新”对话框
2.5.4 设置描述信息
搜索引擎也可通过读取<meta> 标签的说明内容来查找信息，
但说明信息主要是设计者对网页内容的详细说明，而关键字可以让 搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。 （ 1 ）选中文档窗口中的“代码”视图，将鼠标指针放在 <head>标签中，选择“插入 > Head（H） > 说明”命令，弹出 “说明”对话框。 （2）在“说明”对话框中设置说明信息。
入作者名称和版权信息，完成后单击“确定”按钮。
“META”对话框
2.5.3 设置刷新时间
选择“插入 > Head （ H ） > Meta （ M ）”命令，弹出 “META”对话框。在“属性”选项的下拉列表中选择“ HTTPequivalent”选项，在“值”选项的文本框中输入“refresh”， 在“内容”选项的文本框中输入需要的时间值，如图2-39所示， 完成后单击“确定”按钮。
空白网页。 网页设计完成后，选择“文件 > 保存”命令，弹出“另存为”
对话框，设置后单击“保存”按钮，将该文档保存在站点文件夹中。
“新建文档”对话框 新建空白文档
2.3 管理站点文件和文件夹
重命名文件和文件夹 移动文件和文件夹 删除文件或文件夹
Dreamweaver-CS6网页制作第2章
结束
“立志飞翔”应用样式“title2”
2.2使用CSS规则美化文本
4、编辑正文文本样式 利用前面介绍的方法，按照表2-1的样式，编辑“青 春寄语”正文文本和“立志飞翔”正文文本，完成后 如下图所示：
应用范围 “青春寄语”正文 “立志飞翔”正文 样式名称 Normal Poem 设置内容 大小：14像素，斜体， 颜色：“#06C” 大小：14像素，斜体， 颜色：“#690”，居 中 后退
目录
前进
后退
结束 设置标题文本的大小
2.2使用CSS规则美化文本
（6）设置文本的颜色为“#09F”，如下图所示：
“#09F”是所选颜 色代码 该选项代表将颜色还 原为默认值 目录
系统颜色拾取器 前进
附加功能
后退
结束 设置文本颜色
2.2使用CSS规则美化文本
（7）将所选文本设置为粗体，并将其对齐方式调整 为“居中对齐”，完成“title1”样式CSS规则的定 义，如下图所示：
目录
前进
后退
结束
网页中所需要的图像资源
2.3添加图像
（1）使用“文件”面板插入图象：如下图所示，选 中“top.jpg”图像，将其拖拽到“自我介绍”标题 前，在弹出的对话框中单击“确定”按钮，插入 “top.jpg”图像完毕。
（2）将所选图 像文件拖拽到准 确的插入位置
目录
前进
后退
结束 使用“文件”面板插入图象
结束
2.2使用CSS规则美化文本
步骤一：需求分析 需求：将首页中的文本设置为不同的样式，编辑页面 外观。 分析：设置文本样式，可以直接通过“属性”面板为 指定内容新建CSS规则，也可以在文本的其他位置应 用该规则。CSS规划可以在“CSS样式”面板中修改 ，也可以在“属性”面板中修改。要是文档达到如图 所示的效果，还要对“自我介绍”的内容制作列表， 要在文档中添加水平线，编辑网页的外观。
网页设计与制作Dreamweaver CS6标准教-ppt课件-02
编辑站点可以重新设置站点的一些属性，操作 步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要编辑的站点名称，如 webtest，单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经 过对各种设置修改后，单击【保存】按钮，返 回【管理站点】对话框。
Dreamweaver CS6提供了多文档的编辑界面，将多 个文档集中到一个窗口中，用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档，还可以按 住鼠标左键拖动选项卡改变文档的顺序。
站点是存放一个网站所有文件的场所，由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点，便于组织和管理网站文件。
在Dreamweaver中删除站点，只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件，仍然保存在硬盘原来 的位置上，没有被删除，也没有任何改变。 删除站点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要删除的站点名称，单 击【删除】按钮。 在打开的【Dreamweaver】对话框中单击 【是】按钮，选中的站点就被删除，
建立站点以后，可以对站点进行打开、编辑、 复制和删除等各种操作。
2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点
Dreamweaver允许建立多个站点，并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。 选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板，单击左边的下拉框，在下拉 列表中选择要打开的站点。 打开站点后，在【本地文件】下显示该站点 内的所有文件和文件夹。
网页设计与制作(Dreamweaver CS6)教案(第2版 杨杰版)
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
网页设计与制作Dreamweaver CS6标准教-ppt课件-09
选择菜单【窗口】|【框架】，在【框架】面板中选 择框架后，在框架【属性】面板中设置框架的属性。
通常采用以下两种方法。 1．利用【文件】菜单 2．利用框架【属性】面板
利用框架将网页划分若干区域后，还要设置各个区 域中网页之间的链接关系。 在Dreamweaver中，为框架网页内的文本或其他 元素指定一个链接，不仅要指定一个链接文件，还 要设置链接目标以指明链接文习框架的基本操作。 案例知识要点：选择菜单【文件】|【新建】创建框 架，在【框架】面板中指定框架，并利用框架集 【属性】面板进行属性设置。 素材所在位置：光盘/案例素材/ch09/课堂案例婴幼儿健康网。 框架布局要求如图9-2所示，案例效果如图9-3所 示。
选择菜单【插入】|【HTML】|【框架】，在级联 子菜单中选择框架类型后，自动打开【框架标签辅 助功能属性】对话框，如图9-17所示，在该对话 框中可为各个框架命名，通常采用系统缺省的命名。
框架中的内容是网页文档，保存框架实际上就是保 存框架中的网页文档。在框架中完成页面制作后， 需要分别保存每个框架文档，还要保存框架集文档。
1. 保存框架文档 2. 保存框架集文档 3 .保存框架集中所有文档
1．利用【框架】面板选择 2．在【文档】窗口中选择框架集
修改框架大小通常采用以下两种方法。 （1）通过拖曳鼠标调整框架。 （2）在框架集【属性】面板中设置框架大小。
拆分框架通常采用以下两种方法。 （1）单击要拆分的框架内部，将光标置于 该框架中。选择菜单【修改】|【框架集】， 然后选择【拆分左框架】、【拆分右框架】、 【拆分上框架】、【拆分下框架】四个命令 完成框架的拆分。 （2）按住<Alt>键，利用鼠标拖曳边框线， 拆分框架。
DreamweaverCS6网页设计与制作课程设计 (2)
Dreamweaver CS6 网页设计与制作课程设计一、课程简介本课程旨在为学生提供一些基本的网页设计和制作工具。
通过学习Dreamweaver CS6的使用，学生可以了解并掌握网页设计的基本原理，布局和制作过程，能够设计出简单且符合规范的网页。
二、教学目标1.学习和掌握Dreamweaver CS6的使用，能够熟练操作软件工具；2.了解网页设计规范，掌握网页设计的基本原理和技巧；3.掌握简单网页的布局、设计与制作；4.学会如何使用CSS加强网页设计与布局。
三、教学内容教学内容学时Dreamweaver CS6的介绍2学时开始一个新网页2学时使用Dreamweaver CS6编辑器和面板2学时创建页面布局2学时插入文本和图像2学时链接和导航2学时使用CSS进行样式设计4学时教学内容学时在网页中添加多媒体元素2学时向网页添加表单4学时网页的测试和发布2学时四、教学方法本课程采用通过讲解、演示、实践等教学内容进行讲解的方式。
除此之外，还会按照学生的实际情况安排考试、小组讨论等形式活动。
五、教学材料1.Dreamweaver CS6软件；2.学习网站和视频；3.教师PPT课件；4.参考书籍。
六、教学评估1.在学期末，将会进行期末考试；2.定期进行小组讨论和学生报告，评估学生掌握情况；3.考虑学生作业的完成状况；4.对于学生的实践项目进行评估。
七、总结本课程旨在为学生提供基本的网页设计和制作工具和技能。
在学习的过程中，学生将能够了解并掌握网站设计须知，布局，网页内容，如何添加复杂元素。
通过课程的学习，学生将充分认识到网页设计的重要性，并掌握如何使用工具来构建网页。
Dreamweaver CS6的主界面_网页设计与制作（附微课视频 第2版）_[共2页]
![Dreamweaver CS6的主界面_网页设计与制作（附微课视频 第2版）_[共2页]](https://img.taocdn.com/s3/m/c0f04a128bd63186bdebbc08.png)
8学习网页制作是一个循序渐进的过程，除了勤学多练外，还需要在美学方面有一定的悟性。
以下是一些好的学习方法。
●在学习网页制作时，应先从最简单的网页入手，由易到难。
学习过程中应注重理论联系实际，这样可增强学习兴趣。
●制作网页不能闭门造车，需对优秀的网页进行分析和借鉴，对某些可用的元素可直接调用，同时也要不断创新，大胆尝试各种制作方法。
●在网页制作学习的初期阶段不必关心太多的网页设计语言，在有一定网页设计基础后，再学习一些编程语言（如HTML、JavaScript和CSS等）。
1.2 Dreamweaver CS6概述在诸多的“所见即所得”的网页设计软件中，Dreamweaver是使用最广泛，也是最优秀的一款软件。
Macromedia公司（后被Adobe公司收购）推出的Dreamweaver系列软件经过几代的发展，目前较成熟的版本是Dreamweaver CS6。
Dreamweaver CS6一经推出，就以其强大的网页设计功能吸引了大量关注，得到用户的广泛好评。
1.2.1 启动与退出Dreamweaver CS6启动Dreamweaver CS6进入软件界面，如图1-10所示。
图1-10 Dreamweaver CS6界面若要退出Dreamweaver CS6程序，可以在菜单栏中选择“开始”→“退出”命令，或者使用Ctrl+Q组合键。
1.2.2 Dreamweaver CS6的主界面启动Dreamweaver CS6软件，在软件主界面中会首先显示一个起始页，在这个页面中包括“打开最近的项目”“新建”和“主要功能”3个项目栏，很多项目在初学时经常会用到，建议大家保留。
在熟练之后可以在窗口底部选中“不再显示”复选框来隐藏它。
可以用新建或打开一个网页的方式进入Dreamweaver CS6的标准工作界面，如图1-11所示。
下面重点介绍界面中的文档工具栏、“属性”面板和浮动面板组。
Dreamweaver CS6介绍。
新建子页面模板_网页设计与制作Dreamweaver CS6标准教程（第2版）_[共3页]
![新建子页面模板_网页设计与制作Dreamweaver CS6标准教程（第2版）_[共3页]](https://img.taocdn.com/s3/m/756512750029bd64793e2c8b.png)
第15章 综合实训 307
选择菜单【文件】|【存储为Web所用格式】，在【存储为Web所用格式】对话框中选
中切片，在右侧【预设】下拉列表中选择“JPEG高”，如图15-59所示，单击【存储】按钮，
打开【将优化结果存储为】对话框，如图15-60所示，设置【保存在】为本地站点文件夹，在
【保存类型】下拉列表中选择“仅限图像”，在【切片】下拉列表中选择“所有用户切片”。
图15-59
在Dreamweaver的【文件】面板中可以看到切出的图片已经存在images文件夹内，
如图15-61所示。
图15-60 图15-61
15.4.2 新建子页面模板
在站点【文件】面板中，复制主页文件index.html生成一个名为index - 拷贝.html文件，
如图15-62所示。
◆双击打开index - 拷贝.html文件，在【CSS样式】面板中双击#container样式，打开
【#container的CSS规则定义（在layout.css中）】对话框，如图15-63所示，选择【分类】栏
中【方框】，将【Height】下拉文本框中的值清空。
然后将页面中的banner图像和全部内容
部分删除，效果如图15-64所示。
选择菜单【插入】|【布局对象】|【Div标签】，打开【插入Div标签】对话框，在【插
入】项后选择“在标签之后”，在后面下拉列表中选择“<div id=”banner”>”，在【ID】的下
拉文本框中输入“subcontentleft”，单击【新建CSS规则】按钮，打开【新建CSS规则】对。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
框中取消选择“显示欢迎屏幕”复选框。单击“确定”按钮完成设
置。当用户再次启动Dreamweaver CS6后，将不再显示开始页面。
开始页面
2.1.2 不同风格的界面
Dreamweaver CS6的操作界面新颖淡雅，布局紧凑，为用户 提供了一个轻松、愉悦的开发环境。 若用户想修改操作界面的风格，切换到自己熟悉的开发环境， 可选择“窗口 > 工作区布局”命令，弹出其子菜单，在子菜单中 选择“编码器”或“设计器”命令。选择其中一种界面风格，页面 会发生相应的改变。
复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多， 语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的
CSS源代码，并适时地提供辅助说明。Dreamweaver CS6就提供
了这样方便有效的CSS功能。
“属性”面板
2.2 创建网站框架
站点管理器
创建文件夹
定义新站点 创建和保存网页
Dreamweaver CS6提供了多文档的编辑界面，将多个文档整
合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑 窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，
用户可以同时编辑多个文档。
多文档编辑界面
2.1.5 新颖的“插入”面板
Dreamweaver CS6的“插入”面板在菜单栏的下方。 “插 入”面板包括“常用”“布局”“表单”“数
空白网页。 网页设计完成后，选择“文件 > 保存”命令，弹出“另存为”
对话框，设置后单击“保存”按钮，将该文档保存在站点文件夹中。
“新建文档”对话框 新建空白文档
2.3 管理站点文件和文件夹
重命名文件和文件夹 移动文件和文件夹 删除文件或文件夹
2.3.1 重命名文件和文件夹
修改文件名或文件夹名称的具体操作步骤如下。
2.1.3 伸缩自如的功能面板
在浮动面板的右上方单击按钮 ，可以隐藏或展开面板。
如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑
窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标， 调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。
鼠标呈双箭头显示
浮动面板按钮 缩放工作区
2.1.4 多文档的编辑界面
（2）通过以下几种方法新建文件夹。
选择“文件 > 新建文件夹”命令。 用鼠标右键单击站点，在弹出的菜单中选择“新建文件夹”
命令。
（3）输入新文件夹的名称。
2.2.3 定义新站点
建立好站点文件夹后用户就可定义新站点了。在
Dreamweaver CS6中，站点通常包含两部分，即本地站点和远程
站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文件发布到网络
第2章 初识Dreamweaver CS6
本章简介：
网页是网站最基本的组成部分，网 站之间并不是杂乱无章的，它 们通过各种链接相互关联，从 而描述相关的主题或实现相同 的目的。本章讲述了网站的建 设基础，包括 IP 地址与域名、 动 态 数 据 库 开 发 以 及 Dreamweaver CS6 的工作界面， 最后重点讲述了管理站点的方 式。
移动文件名或文件夹名称的具体操作步骤如下。
（1）选择“窗口 > 文件”命令，弹出“文件”面板，在其 中选择要移动的文件或文件夹。 （2） 通过以下几种方法移动文件或文件夹。 复制该文件或文件夹，然后粘贴在新位置。 将该文件或文件夹直接拖曳到新位置。
（3）“文件”面板会自动刷新，这样就可以看到该文件或文
（1）选择“窗口 > 文件”命令，弹出“文件”面板，在其 中选择要重命名的文件或文件夹。 可以通过以下几种方法激活文件或文件夹的名称。 单击文件名，稍停片刻，再次单击文件名。 （2）用鼠标右键单击文件或文件夹图标，在弹出的快捷菜单
中选择“编辑 > 重命名”命令。
（3） 输入新名称，按Enter键。
2.3.2 移动文件和文件夹
删除站点
导入和导出站点
2.4.1 打开站点
当要修改某个网站的内容时，首先要打开站点。打开站点就
件夹在新位置上。
2.3.3 删除文件或文件夹
删除文件或文件夹有以下几种方法。
选择“窗口 > 文件”命令，弹出“文件”面板，在其中选择 要删除的文件或文件夹，按Delete键进行删除。
用鼠标右键单击要删除的文件或文件夹，在弹出的快捷菜单
中选择“编辑 > 删除”命令。
2.4 管理站点
打开站点
编辑站点 复制站点
课堂学习目标
掌握软件的工作界面和创建网站框架 掌握管理站点文件和文件夹的方法 掌握管理站点和网页文件头设置
2.1 Dreamweaver CS6的工作界面
友善的开始页面 不同风格的界面 伸缩自如的功能面板 多文档的编辑界面 新颖的“插入”面板 更完整的CSS功能
2.1.1 友善的开始页面
启动Dreamweaver CS6后，首先看到的画面就是开始页面，
2.2.1 站点管理器
站点管理器的主要功能包括新建站点、编辑站点、复制站点、 删除站点以及导入或导出站点。若要管理站点，必须打开“管理站
点”对话框。
“文件”面板 板
“管理站点”面
2.2.2 创建文件夹
建立站点前，要先在站点管理器中规划站点文件夹。
新建文件夹的具体操作步骤如下。 （1）在站点管理器的右侧窗口中单击选择站点。
据”“Spry”“jQuery Mobile”“InContext Editing”“文本”
和“收藏夹”9个选项卡，将不同功能的按钮分门别类地放在不同 的选项卡中。在Dreamweaver CS6中，“插入”面板可用菜单和 选项卡两种方式显示。
新颖的“插入”面板
2.1.6 更完整的CSS功能
传统的HTML所提供的样式及排版功能非常有限，因此，现在
上的远程站点，使公众可以访问它们。在Dreamweaver CS6中创
建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程 站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公 众可以访问它们。
创建本地站点的步骤
各选项的作用
2.2.4 创建和保存网页
选择“文件 > 新建”命令，启用“新建文档”对话框，创建