Dreamweaver CS6入门课件

4、属性面板（属性检查器）
可以检查和编辑当前页面选定元素的最常用属性，它的内
容根据选定的元素的不同会有所不同。在“属性面板”中 提供了HTML和CSS两种类型的属性设置。
默认情况下，属性检查器位于工作区的底部边缘，但是可 以将其取消停靠并使其成为工作区中的浮动面板。在顶部 “属性”的右边，按下鼠标左键，即可拖动属性检查器为 浮动面板，按照同样的方法，还可以将它拖回到底部，停 靠在工作区下面。
“文件”等面板独立显示，适合对网页的调试和修改。
第 10
页
精
2 站点的搭建与管理
Dreamweaver的站点是一种管理网站中所有相关联 文件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理，还可以以使用站点管理实现 将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包 含了网站中所有用到的文件。我们通过这个文件夹 （站点），对我们的网站进行管理，有次序，一目 了然。
经典布局：与设计器布局方式基本一致，不同之处在于该 布局方式将“插入”面板还原到老版本的“插入”栏形式。
编码人员（高级）布局：主要针对习惯于通过直接编写代 码来生成网页的用户以及经常从事CSS和JS脚本编写的人 员。
双重屏幕布局：可以同时查看页面设计效果和具体代码
（通过“代码检查器”窗口），还将常用的“CSS样式”、
的不同视图之间快速切换。工具栏中还包含一些与 查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。
1 DREAMWEAVER的工作界面
精
代码：显示Html源代码视图。
拆分：同时显示Html源代码和“设计”视图。
设计：只显示“设计”视图。
提示：如果处理的是XML、JavaScript、CSS或乾其他基 于代码的文件类型，则无法在“设计”视图中查看文件， 而且“设计”和“拆分”按钮将会变暗。
精
Dreamweaver CS6 入门
第0 页
菜单栏
1 DREAMWEAVER的工作界面
文档工具栏
文档编辑窗口 属性面板
状态栏
浮动面板
第1 页
精
精
1 DREAMWEAVER的工作界面
1、菜单栏 包括“文件”、“编辑”、“查看”等10个菜单
2、文档工具栏 使用“ 文档” 窗口工具栏包含的按钮可以在文档
这些面板集中了网页编辑和站点管理中常用的工具 按钮。这些面板被集中到面板组中，每个面板都可 以展开或折叠，并且可以和其他面板一起或取消停 靠。
第6 页
精
1 DREAMWEAVER的工作界面
第7 页
1 DREAMWEAVER的工作界面
文件面板：
精
没有创建站点的状态
创建站点哟后的状态
第8 页
第 11 页
2.1 创建本地站点
精
在制作页面之前，首先要在Dreamweaver中创建站点。 一开始只需制作本地站点，这个位于本地硬盘中的文件夹 被当成一个远程站点的镜像，完成本地站点的制作后，即 可将本地站点上传至远端服务器，作为远程站点。
在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜 单中选择一个浏览器。
文件管理：显示“文件管理”弹出菜单。
W3C验证：用于验证当前文档或选定的标签。
检查浏览器兼容性：用于检查 CSS 是否对于各种浏览器均兼容。
可视化助理：可以使用各种可视化助理来设计页面。
刷新“设计”视图：在“代码”视图中对文档进行更改后刷新
窗口大小：此工具在“代码”视图中不可用。使用此工具， 可以将“文档”窗口的大小调整到预定义或自定义的尺寸。 更改设计视图或实时视图中页面的视图大小时，仅更改视 图大小的尺寸，而不更改文档大小。
下载文件大小/下载时间：显示页面(包括所有相关文件，
如：图像和其它媒体文件)的预计文档大小和预计下载时
重新执行“窗口>属性”命令或者点击属性检查器右上角， 第 5
可以关闭属性检查器。
页
精
1 DREAMWEAVER的工作界面
5、浮动面板 工作界面的右侧排列着一些浮动面板，包括“插
入”、“CSS”、“文件”、“资源”等。 “插入”面板：其中的按钮被分为９个类别。
“文件”面板：是站点管理器的缩略图，可以创建 文件夹和文件，也可以上传或下载服务器端的文件。
该文档的“设计”视图。在执行某些操作（如保存文件或单击
此按钮）之后，在“代码”视图中所做的更改才会自动显示在
“设计”视图中。
第4
文档标题：为文档输入一个标题，显示在浏览器的标题栏中。
页
1 DREAMWEAVER的工作界面
精
3、文档编辑窗口
“文档”窗口显示当前文档。若要切换到某个文档，请击 它的选项卡。
1 DREAMWEAVER的工作界面
精
6、状态栏
标签选择器：显示环绕当前选定内容的标签的层次结构。 单击该层次结构中的任何标签以选择该标签及其全部内容。
选取工具：启用和禁用手形工具。
手形工具：对于尺寸大的文档，可以用该工具任意拖动文 档的显示区域。
缩放工具、设置缩放比率：可以为文档设置缩放比率。
间。
编码格式：显示当前文档的文本编码。
第9 页
1 DREAMWEAVER的工作界面
精
7、自定义工作区布局类型
默认情况下，采用设计器布局模式。切换布局模式，单 击标题栏右侧的布局模式切换下拉按钮，在弹出的下拉菜 单中选择；或选择“窗口”/“工作区布局”下的子菜单 命令。
应用程序开发人员（高级）布局：主要针对Web应用程 序开发人员而设计，偏重于代码编写。
时代码”视图显示浏览器用于执行该页面的实际代码，当
在“实时”视图中与该页面进行交互时，它可以动态变化。 第 3
ຫໍສະໝຸດ Baidu“实时代码”视图不可编辑。
页
1 DREAMWEAVER的工作界面
精
多屏幕：借助“多屏幕预览”面板，为智能手机、平板电脑和 台式机进行设计。使用媒体查询支持,为各种不同设备设计样式 并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的 屏幕中显示。）
实时视图：类似于“设计”视图，“实时”视图更逼真地 显示文档在浏览器中的表示形式，并使您能够像在浏览器 中那样与文档进行交互。“实时”视图不可编辑。但可以 在“代码”视图中进行编辑，然后刷新“实时”视图来查 看所做的更改。（ 显示不可编辑的、交互式的、基于浏 览器的文档视图）
实时代码：仅当在“实时”视图中查看文档时可用。“实