焦作师专计信学院Dreamweaver网页制作网页制作焦作师专计信学院Dreamweaver工作区简介Dreamweaver网页制作系列微课主讲：刘淑芝Dreamweaver 主要功用网页制作所见即所得网站管理多站点管理其他设置HTML编辑器支持DHTML和CSS可以导入excel和access文件，flash动画可以编辑动态网页 30.3.1Dreamweaver CS3 工作区设置1了解中文 Dreamweaver CS3 工作区图 0-3-1Dw ADOBE DREAMWEAVER CS3 界面4图 0-3-2采用“设计器”风格的中文 Dreamweaver CS3 工作区2改变 Dreamweaver CS3 工作区5图 0-3-3 “编码器”风格的 Dreamweaver CS3 的工作区（2）调整工作区布局（例如，打开或关闭一些面板、工具栏，调整面板的位置等）后，单击“窗口”“工作区布局”“保存当前”命令，可弹出“保存工作区布局”对话框，在“名称”文本框内输入名称（例如，陈芳麟），如图 0-3-4 所示。再单击“确定”按钮，即可将当前工作区布局保存。6图 0-3-4 “保存工作区布局”对话框用户在以后设计的过程中只要单击“窗口”“工作区布局”命令（例如，单击“窗口”“工作区布局”“陈芳麟”命令），即可进入相应风格的工作区。0.3.2 “Dw ADOBE DREAMWEAVER CS3”界面通常，在启动 Dreamweaver CS3 后或在没有任何文档打开时，会自动调出“ADOBE DREAMWEAVER CS3”界面，如图 0-3-1 所示。该对话框由四部分组成，分别为“打开最近的项目”、“新建”、“从模板创建”、“Dreamweaver帮助”。如果选中“不再显示”复选框，则下次启动 Dreamweaver CS3 时或在没有任何文档打开时，就不会再出现此界面。1“新建”面板和“打开最近的项目”面板（1）“新建”面板：此面板中列出了大部分可以创建的文档，利用它可快速创建一个新的文档或者一个站点。例如，单击 HTML 超链接，可以进入 HTML 网页设计状态；单击“ASP VBScript”超链接，可进入 ASP VBScript7编辑状态；单击“更多”按钮 或单击“文件”“新建”命令，可弹出“新建文档”对话框，如图 0-3-5 所示。图 0-3-5 “新建文档”对话框默认选择左边栏内的“空白页”选项，在“页面类型”栏内可选择文档类型，在“布局”栏内可选择一种布局风格和进行其他设置。单击“创建”按钮，即可创建一个空页面。（2）“打开最近的项目”栏：此栏中列出了最近打开过的文档名称，单击其中的项目可以快速调出已经编辑过的文档。单击“打开”按钮 ，可以调出“打开”对话框，利用该对话框可以选择要编辑的网页文档，再单击“打开”按钮，即可打开选定的文档。82“从模板创建”栏和“Dreamweaver 帮助”栏（1）“从模板创建”栏：单击其中的图标按钮，可调出不同的“新建文档”对话框，利用该对话框可以新建一个相应的文档。在文档底部的“扩展”栏中有一个“Dreamweaver Exchange”按钮，单击该按钮后，可以链接到 Dreamweaver Exchange 网站。（2）“Dreamweaver 帮助”栏内有“快速入门”、“新增功能”和“资源”三个按钮。分别单击这三个按钮，可以进入 Adobe 的“Dreamweaver CS3”帮助网站中相应的网页。0.3.3文档窗口文档窗口用来显示和编辑当前的文档页面。当文档窗口处于还原状态时，其标题栏内显示网页的标题、网页文档所在的文件夹的名称和网页文档的名称，“文档工具”栏和“标准工具”栏在文档窗口外；文档窗口在最大化时，其标签内显示文档的名称，“文档”工具栏和“标准”工具栏在文档窗口内。文档窗口底部有状态栏，可提供多种信息。在调整网页中一些对象的位置和大小时，利用标尺和网格工具可以使操作更准确。1标尺（1）显示标尺：单击“查看”“标尺”“显示”命令，可在文档窗口内的左边和上边显示标尺。单击“查看”“标尺”命令的下一级菜单中的“像素”、“英寸”或“厘米”命令，可以更改标尺的单位。9（2）重设原点：用鼠标拖动标尺左上角处的小正方形，此时鼠标指针呈十字型。拖动鼠标到文档窗口内合适的位置后释放左键，即可改变原点位置。如果要将标尺的原点位置还原，可单击“查看”“标尺”“重设原点”命令。2网格（1）显示与不显示网格线：单击“查看”“网格”“显示网格”命令，可以在显示和不显示网格之间切换。显示网格和标尺后的“文档”窗口如图 0-3-6 所示。（2）网格的参数设置：单击“查看”“网格”“网格设置”命令，可以弹出“网格设置”对话框，如图0-3-7 所示。在该对话框中，用户可以对网格间隔、颜色、形状以及是否显示网格和是否靠齐网格等进行设置。图 0-3-6显示标尺和网格图 0-3-7 “网格设置”对话框10（3）靠齐功能：如果没选中“靠齐到网格”复选框，则在移动层或改变层的大小时，最小的单位是 1 个像素，在移动层时不容易与网格对齐；如果选中该复选框，则在移动层或改变层的大小时，最小的单位是 5 个像素，在移动层时可以自动与网格对齐。3状态栏状态栏位于文档窗口的底部（没给出左边的标签检查器），如图 0-3-8 所示。4文档的三种视图窗口图 0-3-8Dreamweaver CS3 的状态栏（1）“设计”视图窗口：单击“文档工具”栏内的“显示设计视图”按钮口中，可以进行可视化页面布局、编辑和开发的设计环境，如图 0-3-9 所示。（2）“代码”视图窗口：单击“文档工具”栏中的“显示代码视图”按钮，切换到该视图窗口，在这个窗，切换到该视图窗口。在这个窗口中，用户可以输入和修改 HTML、JavaScript、服务器语言代码（如 ASP 语言）等，如图 0-3-10 所示。单击11“查看”“刷新设计视图”命令，可刷新设计视图状态下显示的网页。按【F12】键，可以用浏览器来浏览网页。图 0-3-9 “设计”视图窗口图 0-3-10 “代码”视图窗口（3）“代码和设计”视图窗口：单击“文档工具”栏内的“显示代码视图和设计视图”按钮，切换到该视图窗口，在这个视图窗口中，可以同时看到同一文档的“代码”视图和“设计”视图，如图 0-3-11 所示。12、图 0-3-11 “代码和设计”视图窗口在单击选中“设计”窗口中的对象时，“代码”窗口中的光标也会定位在相应的代码处；如果拖动选中“设计”窗口中的内容，则“代码”窗口内也会选中相应的代码；反之也会有相应的效果。两个窗口中代码与对象之间的对应性非常好，有利于修改 HTML 代码。如果要切换文档窗口的视图，可以单击“查看”“代码”（或“设计”“代码和设计”）命令或按【Ctrl+-】组合键。0.3.4 “属性”栏和“插入”栏1“属性”栏13“属性”栏也称做属性检查器或“属性”面板。利用“属性”栏可以显示并精确调整网页中选定对象的属性。“属性”栏具有智能化的特点，当选中网页中的不同对象，其“属性”栏的内容会随之发生变化。单击“属性”栏右下角的 按钮，可以展开“属性”栏；单击“属性”栏右下角的 按钮，可收缩“属性”栏。在没有选中任何对象时，单击“属性”栏右边的 按钮，可在光标的当前位置添加 HTML 代码；在选中一个对象时，单击 按钮，可以编辑相应标签的 HTML 代码。2“插入”栏“插入”栏可以显示为制表符和菜单两种外观效果，制表符状态如图 0-3-2 所示。在菜单状态下，单击“插入”栏左边的下拉按钮，弹出下拉菜单，单击“显示为制表符”命令，可以切换到制表符状态。在制表符状态下，单击 按钮，在弹出的快捷菜单中单击“显示为菜单”命令，可切换到菜单状态，如图 0-3-12 所示。图 0-3-12Dreamweaver CS3 的“插入”栏（菜单状态）在制表符状态下，有七个标签，每个标签内有多个用于插入对象的按钮。单击标签可以切换选项，单击选项卡内的对象按钮或拖动按钮图标到文档窗口中，可将相应的对象插入到网页中。对于有些对象，会弹出一个对话框，进行设置后，单击“确定”按钮，即可插入对象。如果在插入对象的同时按住【Ctrl】键，就不会弹出对话14框，直接插入一个空对象即可。以后要给该空对象进行设置，可双击该对象或在其“属性”栏内进行设置。在菜单状态下，单击左边的下拉按钮，在弹出的下拉菜单中有七个与插入对象有关的命令。单击任一命令后，其右边会出现相关的按钮，单击按钮后即可进行相关操作。当“插入”栏为制表符状态时，可以拖动“插入”栏左边的 图标，将“插入”栏变为浮动面板，如图 0-3-12所示。150.4面板基本操作和文档基本操作0.4.1面板的基本操作1隐藏显示面板（1）方法一：当所有面板均排列在屏幕右边时，单击面板组与文档窗口间的“隐藏/显示面板”按钮，如图0-4-2 所示，可将所有面板隐藏或显示。（2）方法二：单击“查看”“隐藏面板”命令或按【F4】键，可隐藏所有打开的面板。单击“查看”“显示面板”命令或按【F4】键，又可将隐藏的面板显示出来。2面板的拆分与组合（1）面板的拆分：如果要将组合面板中的面板（例如，图 0-4-1 所示的“历史记录&框架”组合面板中的“历史记录”和“框架”面板）拆分成独立的面板，可以单击组合面板中的标签（例如，“历史记录”标签），使它成为当前面板，再单击面板右上角的图标，弹出面板下拉菜单。单击该菜单中的“将历史记录组合至”“新组合面板”命令，如图 0-4-3 所示，即可将当前面板（例如，“历史记录”面板）拆分独立出来。（2）面板的组合：单击面板（例如，“历史记录”面板组）右上角的图标，弹出面板组菜单，单击该菜单中的“将历史记录组合至”“框架”命令，可将当前面板（“历史记录”面板）与“框架”面板组合在一起。这时可以看到，组合面板内的标签左右次序对调（“框架”在左，“历史记录”在右），组合面板的名称也改变为16“框架&历史记录”。图 0-4-1浮动组合面板图 0-4-2折叠组合面板图 0-4-3面板菜单3面板的大小调整和打开与关闭（1）调整面板的大小：拖动面板的边框，达到所需的大小后释放左键即可。（2）打开面板：单击“窗口”按钮，从中单击相应的（面板名称）命令，使该命令左边出现对勾。例如，单击“窗口”“历史记录”命令，即可打开“历史记录”面板。（3）关闭面板：单击面板（组）标题栏右上角的 按钮，或右击面板标题栏，弹出其快捷菜单，再单击该菜单中的“关闭”命令，都可以关闭面板。另外，单击“窗口”按钮，再次单击相应的（面板名称）命令，使该命令左边的对勾消失，也可以关闭指定的面板。170.4.2文档基本操作1新建和打开网页文档（1）新建网页文档：单击“文件”“新建”命令，弹出“新建文档”对话框，如图 0-4-4 所示。从该对话框中可以看出，用户可以建立各种类型的文件。图 0-4-4 “新建文档”（常规）对话框（2）打开网页文档：单击“文件”“打开”命令，弹出“打开”对话框。在该对话框内选中要打开的 HTML文档，单击“打开”按钮，即可将选定的 HTML 文档打开。例如，可打开前面编写的名字为“中文 Dreamweaver CS318工作区简介.htm”的网页文档。另外，在图 0-3-1 所示的“ADOBE DREAMWEAVER CS3”对话框中，单击“打开”按钮，也可以打开“打开”对话框。2保存文档和关闭文档（1）单击“文档”“保存”命令，可以以原名称保存当前的文档。（2）单击“文档”“另存为”命令，弹出“另存为”对话框。在该对话框中，用户可以将当前的文档以其他名字保存。（3）单击“文档”“保存全部”命令，可将当前正在编辑的所有文档以原名保存。（4）单击“文档”“关闭”命令，可关闭打开的当前文档。如果当前文档在修改后没有存盘，则会弹出一个提示框，提示用户是否保存文档。（5）单击“文档”“全部关闭”命令，可关闭所有打开的文档。3页面属性设置右击文档窗口的空白处，在弹出的快捷菜单中单击“页面属性”命令，弹出“页面属性”对话框，如图 0-4-5所示。另外，单击网页文档窗口的空白处，再单击网页文档“属性”栏内的“页面属性”按钮也可以弹出“页面属性”对话框。在“页面属性”对话框，用户可以设置页面的标题文本、页面字体、页面背景色或图像、页面大19小与位置、背景图像的透明度等。图 0-4-5 “页面属性”（外观）对话框（1）背景颜色设置：单击“背景颜色”按钮 ，会弹出一个颜色面板。利用该颜色面板可以设置网页的背景颜色。（2）背景图像设置：单击“页面属性”（外观）对话框中“背景图像”文本框右边的“浏览”按钮，弹出“选择图像源文件”对话框，如图 0-4-6 所示。在该对话框中选择网页背景图像，再单击“确定”按钮，即可给网页背景填充选中的图像。如果图像文档不在本地站点的文件夹内，则在单击“确定”按钮后，会提示用户将该图像文档复制到本地站点的图像文件夹内。（3）文本颜色设置：单击“文本颜色”按钮 ，会弹出一个颜色面板，如图 0-4-7 所示。从中可以设置文本20颜色，其方法与设置背景颜色的方法一样。图 0-4-6 “选择图像源文件”对话框图 0-4-7颜色面板（4）页面四个方向的边距设置：通过四个文本框可以设置页面四个方向的边距，单位为像素。“左边距”和“右边距”的设置只对 IE 浏览器有效，“上边距”和“下边距”的设置只对 Netscape Navigator 浏览器有效。（5）页面文本的字体和大小设置：在该对话框中的“页面字体”和“大小”下拉列表框可以对页面中的文本设置字体和大小。（6）页面文字设置：选择“分类”列表框中的“标题/编码”选项，切换到“标题/编码”栏，如图 0-4-821所示（还没有输入标题文字）。利用该栏可以设置网页标题、文档类型和网页编码等，在底部还显示“站点”文件夹的位置等信息。（7）标题大小和颜色设置：选择“页面属性”对话框中“分类”列表框中的“标题”选项，切换到“标题”栏，如图 0-4-9 所示。在“标题字体”下拉列表框中选择一种标题的字体，在“标题 1”到“标题 6”栏可以设置标题的大小和颜色。图 0-4-8 “页面属性”对话框-“标题/编码”栏图 0-4-9 “页面属性”对话框-“标题”栏（8）链接字属性的设置：选择“分类”列表框中的“链接”选项，切换到“链接”栏，如图 0-4-10 所示。“链接字体”下拉列表框和“链接颜色”按钮用来设置链接字的字体、大小、风格、颜色等，“变换图像链接”按钮的作用是当图像不能显示时，将显示为该链接字体的颜色；“已访问链接”按钮用来设置单击过的链接字的颜色；“活动链接”按钮用来设置获得焦点的链接字的颜色；“下画线样式”栏用来设置链接字的下画线样式。22图 0-4-10 “页面属性”对话框-“链接”栏（9）跟踪图像（也叫描图）属性设置：选择“分类”列表框中的“跟踪图像”选项，切换到“跟踪图像”栏，如图 0-4-11 所示。用户可以在该栏中设置跟踪图像的属性，“跟踪图像”文本框用来设置在页面编辑过程中使用的描图图像的地址和名称，“透明度”栏的作用是调整描图的透明度。图 0-4-11 “页面属性”对话框“跟踪图像”栏23焦作师专计信学院THANK YOU