《Dreamweaver应用与网页设计案例教程 普通高等教育十一五 国家级规划教材 教学课件 PPT 作者 杨长安 沈大林 孟昭勇 第2章Dreamweaver 8工作区和》由会员分享，可在线阅读，更多相关《Dreamweaver应用与网页设计案例教程 普通高等教育十一五 国家级规划教材 教学课件 PPT 作者 杨长安 沈大林 孟昭勇 第2章Dreamweaver 8工作区和（80页珍藏版）》请在金锄头文库上搜索。
1、 40 第 2 2 章 Dreamweaver 8 工作区和插入文字与图像 2.1 中文 Dreamweaver 8 工作区和文件的基本操作 【相关知识】中文 Dreamweaver 8 工作区简介 1工作界面 第一次运行 Dreamweaver 8 时，会调出“工作区设置”对话框，如图 2-1-1 所示。可以看出， Dreamweaver 8 提供了两种工作区布局（即工作界面） 。选中某一种工作区名称的单选按钮，再单击“确 定”按钮，即可进入相应的工作区。这里选中“设计器”单选按钮，再单击“确定”按钮，即可进入 Dreamweaver 8 启动界面，如图 2-1-2 所示。 41 图 2-1
2、-1 的“工作区设置”对话框 图 2-1-2 Dreamweaver 8 启动界面 42 单击“创建新项目”栏中的“HTML”链接文字，即可进入采用“设计器”风格的 Dreamweaver 8 工作 区，如图 2-1-3 所示。 由图 2-1-3 可以看出，Dreamweaver 8 的工作区主要由标题栏、菜单栏、 “文档”窗口、状态栏、 “插 入”栏（ “对象”栏或“对象”面板） 、 “标准”工具栏、 “文档”工具栏、 “属性”栏（ “属性”面板或属 性检查器）和“隐藏面板”按钮等组成。单击“查看”“工具栏”“”菜单命令，可以打开或 关闭“插入”工具栏、 “标准”工具栏、 “文档”工具栏和“
3、样式呈现”工具栏；单击“窗口”“属性” 菜单命令，可打开或关闭“属性”栏；单击“窗口”“插入”菜单命令，可打开或关闭“插入”栏； 单击“查看”“隐藏面板”按钮，可隐藏面板组和“属性”栏；单击“查看”“显示面板”按钮， 可显示面板组和“属性”栏。 43 图 2-1-3 采用“设计器”风格的 Dreamweaver 8 工作区 44 2工作区布局 （1） 单击 “窗口” “工作区布局” “编码器” 菜单命令， 即可进入采用 “编码器” 风格的 Dreamweaver 8 工作区，如图 2-1-4 所示。单击“窗口”“工作区布局”“设计器”菜单命令，又可进入采用“设 计器”风格的 Dreamweav
4、er 8 工作区，如图 2-1-3 所示。 （2）调整工作区布局后，单击“窗口”“工作区布局”“保存当前”菜单命令，调出“保存工 作区布局”对话框，在“名称”文本框内输入名称，如图 2-1-5 所示，再单击“确定”按钮，可将当前 工作区布局保存。以后只要单击“窗口”“工作区布局”“” （此例中为“fengjinlan” ） 菜单命令，即可进入相应风格的 Dreamweaver 8 工作区。 45 图 2-1-4 “编码器”风格的 Dreamweaver 8 工作区 图 2-1-5 “保存工作区布局”对话框 46 3设置默认文档类型 单击“编辑”“首选参数”菜单命令，调出“首选参数”对话框（Dr
5、eamweaver 8 的许多设置需 要使用该对话框，以后将陆续介绍该对话框的使用方法） ，单击“分类”栏中的“新建文档”选项，此 时的“首选参数”对话框如图 2-1-6 所示。在“默认文档类型”下拉列表框内可以选择默认的文档类型。 图 2-1-6 “首选参数”对话框 47 4Dreamweaver 8 启动界面 启动 Dreamweaver 8 时，如果没有任何文档打开，软件会自动弹出 Dreamweaver 8 启动界面，如图 2-1-2 所示。 该界面由 4 部分组成， 分别为 “打开最近项目” 、 “创建新项目” 、 “从范例创建” 和 “Dreamweaver 帮助” 。另外，如果选
6、中“不再显示此对话框”复选框，则下次启动 Dreamweaver 时就不会再出现此界 面了。 （1） “打开最近项目”栏：此栏中列出了 Dreamweaver 最近打开过的文档名称，单击其中的项目可 以快速调出已经编辑过的文档。单击“打开”按钮，可以调出“打开”对话框，利用该对话框可以选择 要编辑的网页文档，再单击“打开”按钮，即可打开选定的文档。 （2） “创建新项目”栏：此栏中列出了“新建文档”对话框中的大部分可以创建的项目，利用它可 以快速创建一个新文档或者一个站点。例如，单击“HTML”链接文字，可以进入 HTML 网页设计状态； 48 单击“ASP VBScript”链接文字，可以进
7、入 ASP VBScript 编辑状态。 （3） “从范例创建”栏：单击其中的文件夹按钮，可调出不同的“新建文档”对话框，利用该对话 框可以新建一个相应的文档。 （4） “Dreamweaver 帮助”栏内有“进入 Dreamweaver 快速指南” 、 “了解 Dreamweaver 文档资源” 和“查找授权培训”3 个链接文字。单击这 3 个链接文字，可以进入 A 网站中相应的站点，利 用网站查找相关信息。 【相关知识】文档窗口 文档窗口用来显示和编辑当前的文档页面。 在文档窗口最大化时， 其标签顶部显示文档的名称， “文 档”工具栏和“标准”工具栏在文档窗口内；如果文档窗口处于还原状态，
8、则“文档”工具栏和“标准” 工具栏在文档窗口外，其标题栏内显示网页的标题、网页文档所在的文件夹名称和网页文档的名称。文 49 档窗口的底部有状态栏，可以提供多种信息。 在调整网页中一些对象的位置和大小时， 利用 Dreamweaver 提供的标尺和网格工具可以使操作更准 确。标尺和网格只在网页文档窗口内显示，在浏览器中不会显示出来。 1标尺 （1）显示标尺：单击“查看”“标尺”“显示”菜单命令，可在文档窗口内的左边和上边显示 标尺。单击“查看”“标尺”“像素”/“英寸”/“厘米”菜单命令，可以更改标尺的单位。 （2）重设原点：用鼠标拖曳标尺左上角处的小正方形，此时鼠标指针呈十字线状。拖曳鼠标到
9、文档 窗口内合适的位置后松开左键，即可改变原点位置。如果要将标尺的原点位置还原，可单击“查看” “标尺”“重设原点”菜单命令。 2网格 50 （1）显示与不显示网格线：单击“查看”“网格”“显示网格”菜单命令，可以在显示网格（选 中，其菜单命令左边有对勾）和不显示网格（没选中，其菜单命令左边没有对勾）之间切换。显示网格 和标尺后的文档窗口如图 2-1-7 所示。 （2）靠齐功能：如果没选中“查看”“网格”“靠齐到网格”菜单命令，移动层或改变层的大 小时，最小的单位是 1 像素，移动层时不容易与网格对齐。如果选中“查看”“网格”“靠齐到网 格”菜单命令，移动层或改变层的大小时，最小的单位是 5
10、像素，移动层时可以自动与网格对齐。 （3）网格的参数设置：单击“查看”“网格”“网格设置”菜单命令，可以调出“网格设置” 对话框，如图 2-1-8 所示。利用该对话框，可以进行网格间隔、颜色、形状以及是否显示网格和是否靠 齐网格等设置。 51 图 2-1-7 标尺和网格 图 2-1-8 “设置网格”对话框 3状态栏 Dreamweaver 8 的状态栏位于文档窗口的底部，如图 2-1-9 所示。 图 2-1-9 Dreamweaver 8 的状态栏（没给出左边的标签检查器） 52 （1）标签选择器：标签选择器也叫 HTML 标签选择器，它以 HTML 标记的显示方式来表示光标当前位 置处的网页
11、对象信息。如果光标当前位置处有多种信息，则可显示出多个 HTML 标记。不同的 HTML 标记 表示不同的 HTML 元素信息。例如，表示文档主体，表示图像，表示表格， 表示字体，表示行，表示插入对象等。 单击某个 HTML 标记，会自动选取与该标记相对应的网页对象，用户可对该对象进行编辑。 （2）选取工具：用来选取文档窗口内的对象。 （3）手形工具：在对象大于文档窗口时，用来移动窗口的位置。 （4）缩放工具：使用该工具后，单击文档窗口可以增加窗口的显示比例；按住 Alt 键的同时单击文 档窗口（此时放大镜内显示的“+”号会自动变为“-”号） ，可减小窗口的显示比例。 （5） “设置缩放比例”
12、下拉列表框：用来选择文档窗口的显示比例。 53 （6） “窗口大小”下拉列表框：用来显示与调整窗口大小。单击它会调出一个快捷菜单，在还原状 态下，单击该菜单上边一栏中的一个菜单命令，可立刻按照选定的大小改变窗口大小。 （7）文档大小/估计的下载时间：它给出了文档的字节数和网页预计下载的时间。 4文档的 3 种视图窗口 文档窗口有“设计” 、 “代码”和“代码和设计”3 种视图窗口，它们适用于不同的网页编辑要求。 单击 Dreamweaver 8 启动界面中的“打开”链接文字，调出“打开”对话框，利用该对话框打开第 1 章 中制作的第一个 HTML 网页（名称为“Internet 简介 1.ht
13、m” ） 。下面利用该网页简要介绍 3 种视图窗口 的特点和使用方法。 （1） “设计”视图窗口：单击“文档”工具栏内的“显示设计视图”按钮 ，即可进入“设计” 视图窗口。 “设计”视图窗口是一种用于可视化页面布局、编辑和开发的设计环境。在该视图中显示的 54 效果与在网络浏览器中浏览的效果相似，可直接进行编辑，如图 2-1-10 所示。 （2） “代码”视图窗口：单击“文档”工具栏中的“显示代码视图”按钮 ，切换到“代码”视图 窗口，如图 2-1-11 所示。 “代码”视图窗口是一种用于编写 HTML、JavaScript、服务器语言代码（例 如 ASP 语言）以及任何其他类型代码的手动编码
14、环境。 图 2-1-10 “设计”视图窗口 55 图 2-1-11 “代码”视图窗口 读者也可以在“代码”视图窗口内输入用 HTML 编写的网页，再保存该网页，然后按 F12 键浏览它 的内容，还可以在“代码”视图窗口内修改源代码，同时观察页面的变化。在修改代码后，单击“查看” “刷新设计视图”菜单命令，可以刷新“设计”视图状态下显示的网页效果。 （3） “代码和设计”视图窗口：单击“文档”工具栏内的“显示代码和设计视图”按钮 ，即可 56 进入“代码和设计”视图窗口。 “代码和设计”视图窗口可以使用户在单个窗口中同时看到同一文档的“代码”视图和“设计”视 图，如图 2-1-12 所示。选中“
15、设计”窗口中的对象时， “代码”窗口内的光标也会定位在相应的代码处； 如果在设计窗口内移动光标位置，则“代码”窗口内的光标也会随之变化；如果用鼠标单击或拖曳选中 “设计”窗口内的内容，则“代码”窗口内也会选中相应的代码。反之也会获得相应的效果。总之，这 两个窗口内代码与设计对象之间的对应性非常好，非常有利于修改 HTML 代码。 图 2-1-12 “代码和设计”视图窗口 57 如果要切换文档窗口的视图，可单击“查看”“代码”/“设计”/“代码和设计”菜单命令或按 下 Ctrl+组合键进行切换。 【相关知识】 “属性”栏和“插入”栏 1 “属性”栏 “属性”栏也称为属性检查器或“属性”面板。利用
16、“属性”栏可以显示并精确调整网页中选定对 象的属性。 “属性”栏具有智能化的特点，选中网页中的不同对象，其“属性”栏的内容会随之发生变 化。单击“属性”栏右下角的 按钮，可以展开“属性”栏；单击“属性”栏右下角的 按钮，可收缩 “属性”栏。 在没有选中任何对象时，单击“属性”栏右边的 按钮，可在光标当前位置添加 HTML 代码；在选 中一个对象时，单击 按钮可以编辑相应标签的 HTML 代码。 58 2 “插入”栏 在 Dreamweaver 8 中， “插入”栏可以显示为制表符和菜单两种外观效果，制表符状态如图 2-1-3 所示，菜单状态如图 2-1-13 所示。如果要将“插入”栏由菜单状态切换到制表符状态，可以单击“插 入”栏左边的黑色箭头，调出它的快捷菜单，再单击该菜单中的“显示为制表符”菜单命令。 如果要将“插入”栏
