dreamweaver简介剖析

《dreamweaver简介剖析》由会员分享，可在线阅读，更多相关《dreamweaver简介剖析（24页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver网页制作,Dreamweaver工作区简介,Dreamweaver网页制作系列微课,主讲：刘淑芝,Dreamweaver 主要功用,网页制作 所见即所得 网站管理 多站点管理 其他 设置HTML编辑器 支持DHTML和CSS 可以导入excel和access文件，flash动画 可以编辑动态网页,0.3.1,Dreamweaver CS3 工作区设置,1了解中文 Dreamweaver CS3 工作区,图 0-3-1,Dw ADOBE DREAMWEAVER CS3 界面,图 0-3-2,采用“设计器”风格的中文 Dreamweaver CS3 工作区,2改变 Dream

2、weaver CS3 工作区,图 0-3-3 “编码器”风格的 Dreamweaver CS3 的工作区,（2）调整工作区布局（例如，打开或关闭一些面板、工具栏，调整面板的位置等）后，单击“窗口”“工,作区布局”“保存当前”命令，可弹出“保存工作区布局”对话框，在“名称”文本框内输入名称（例如，陈,芳麟），如图 0-3-4 所示。再单击“确定”按钮，即可将当前工作区布局保存。,图 0-3-4 “保存工作区布局”对话框,用户在以后设计的过程中只要单击“窗口”“工作区布局”命令（例如，单击“窗口”“工作区布局”,“陈芳麟”命令），即可进入相应风格的工作区。,0.3.2 “Dw ADOBE DREA

3、MWEAVER CS3”界面,通常，在启动 Dreamweaver CS3 后或在没有任何文档打开时，会自动调出“ADOBE DREAMWEAVER CS3”界面，,如图 0-3-1 所示。该对话框由四部分组成，分别为“打开最近的项目”、“新建”、“从模板创建”、“Dreamweaver,帮助”。如果选中“不再显示”复选框，则下次启动 Dreamweaver CS3 时或在没有任何文档打开时，就不会再出,现此界面。,1“新建”面板和“打开最近的项目”面板,（1）“新建”面板：此面板中列出了大部分可以创建的文档，利用它可快速创建一个新的文档或者一个站点。,例如，单击 HTML 超链接，可以进入

4、HTML 网页设计状态；单击“ASP VBScript”超链接，可进入 ASP VBScript,编辑状态；单击“更多”按钮 或单击“文件”“新建”命令，可弹出“新建文档”对话框，如图 0-3-5 所示。,图 0-3-5 “新建文档”对话框,默认选择左边栏内的“空白页”选项，在“页面类型”栏内可选择文档类型，在“布局”栏内可选择一种布,局风格和进行其他设置。单击“创建”按钮，即可创建一个空页面。,（2）“打开最近的项目”栏：此栏中列出了最近打开过的文档名称，单击其中的项目可以快速调出已经编辑,过的文档。单击“打开”按钮 ，可以调出“打开”对话框，利用该对话框可以选择要编辑的网页文档，再单击,“

5、打开”按钮，即可打开选定的文档。,2“从模板创建”栏和“Dreamweaver 帮助”栏 （1）“从模板创建”栏：单击其中的图标按钮，可调出不同的“新建文档”对话框，利用该对话框可以新建 一个相应的文档。在文档底部的“扩展”栏中有一个“Dreamweaver Exchange”按钮，单击该按钮后，可以链接 到 Dreamweaver Exchange 网站。 （2）“Dreamweaver 帮助”栏内有“快速入门”、“新增功能”和“资源”三个按钮。分别单击这三个按钮， 可以进入 Adobe 的“Dreamweaver CS3”帮助网站中相应的网页。,0.3.3,文档窗口,文档窗口用来显示和编辑

6、当前的文档页面。当文档窗口处于还原状态时，其标题栏内显示网页的标题、网页 文档所在的文件夹的名称和网页文档的名称，“文档工具”栏和“标准工具”栏在文档窗口外；文档窗口在最大 化时，其标签内显示文档的名称，“文档”工具栏和“标准”工具栏在文档窗口内。文档窗口底部有状态栏，可 提供多种信息。 在调整网页中一些对象的位置和大小时，利用标尺和网格工具可以使操作更准确。 1标尺 （1）显示标尺：单击“查看”“标尺”“显示”命令，可在文档窗口内的左边和上边显示标尺。单击“查 看”“标尺”命令的下一级菜单中的“像素”、“英寸”或“厘米”命令，可以更改标尺的单位。,（2）重设原点：用鼠标拖动标尺左上角处的小正

7、方形，此时鼠标指针呈十字型。拖动鼠标到文档窗口内合适 的位置后释放左键，即可改变原点位置。如果要将标尺的原点位置还原，可单击“查看”“标尺”“重设原 点”命令。 2网格 （1）显示与不显示网格线：单击“查看”“网格”“显示网格”命令，可以在显示和不显示网格之间切 换。显示网格和标尺后的“文档”窗口如图 0-3-6 所示。 （2）网格的参数设置：单击“查看”“网格”“网格设置”命令，可以弹出“网格设置”对话框，如图 0-3-7 所示。在该对话框中，用户可以对网格间隔、颜色、形状以及是否显示网格和是否靠齐网格等进行设置。,图 0-3-6,显示标尺和网格,图 0-3-7 “网格设置”对话框,（3）靠

8、齐功能：如果没选中“靠齐到网格”复选框，则在移动层或改变层的大小时，最小的单位是 1 个像素， 在移动层时不容易与网格对齐；如果选中该复选框，则在移动层或改变层的大小时，最小的单位是 5 个像素，在 移动层时可以自动与网格对齐。 3状态栏 状态栏位于文档窗口的底部（没给出左边的标签检查器），如图 0-3-8 所示。,4文档的三种视图窗口,图 0-3-8,Dreamweaver CS3 的状态栏,（1）“设计”视图窗口：单击“文档工具”栏内的“显示设计视图”按钮 口中，可以进行可视化页面布局、编辑和开发的设计环境，如图 0-3-9 所示。 （2）“代码”视图窗口：单击“文档工具”栏中的“显示代码

9、视图”按钮,，切换到该视图窗口，在这个窗 ，切换到该视图窗口。在这个,窗口中，用户可以输入和修改 HTML、JavaScript、服务器语言代码（如 ASP 语言）等，如图 0-3-10 所示。单击,“查看”“刷新设计视图”命令，可刷新设计视图状态下显示的网页。按【F12】键，可以用浏览器来浏览网页。,图 0-3-9 “设计”视图窗口,图 0-3-10 “代码”视图窗口,（3）“代码和设计”视图窗口：单击“文档工具”栏内的“显示代码视图和设计视图”按钮,，切换到该,视图窗口，在这个视图窗口中，可以同时看到同一文档的“代码”视图和“设计”视图，如图 0-3-11 所示。,、,图 0-3-11 “

10、代码和设计”视图窗口,在单击选中“设计”窗口中的对象时，“代码”窗口中的光标也会定位在相应的代码处；如果拖动选中“设,计”窗口中的内容，则“代码”窗口内也会选中相应的代码；反之也会有相应的效果。两个窗口中代码与对象之,间的对应性非常好，有利于修改 HTML 代码。,如果要切换文档窗口的视图，可以单击“查看”“代码”（或“设计”“代码和设计”）命令或按【Ctrl+-】,组合键。,0.3.4 “属性”栏和“插入”栏,1“属性”栏,“属性”栏也称做属性检查器或“属性”面板。利用“属性”栏可以显示并精确调整网页中选定对象的属性。 “属性”栏具有智能化的特点，当选中网页中的不同对象，其“属性”栏的内容会

11、随之发生变化。单击“属性” 栏右下角的 按钮，可以展开“属性”栏；单击“属性”栏右下角的 按钮，可收缩“属性”栏。 在没有选中任何对象时，单击“属性”栏右边的 按钮，可在光标的当前位置添加 HTML 代码；在选中一个 对象时，单击 按钮，可以编辑相应标签的 HTML 代码。 2“插入”栏 “插入”栏可以显示为制表符和菜单两种外观效果，制表符状态如图 0-3-2 所示。在菜单状态下，单击“插 入”栏左边的下拉按钮，弹出下拉菜单，单击“显示为制表符”命令，可以切换到制表符状态。在制表符状态下， 单击 按钮，在弹出的快捷菜单中单击“显示为菜单”命令，可切换到菜单状态，如图 0-3-12 所示。,图

12、0-3-12,Dreamweaver CS3 的“插入”栏（菜单状态）,在制表符状态下，有七个标签，每个标签内有多个用于插入对象的按钮。单击标签可以切换选项，单击选项 卡内的对象按钮或拖动按钮图标到文档窗口中，可将相应的对象插入到网页中。对于有些对象，会弹出一个对话 框，进行设置后，单击“确定”按钮，即可插入对象。如果在插入对象的同时按住【Ctrl】键，就不会弹出对话,框，直接插入一个空对象即可。以后要给该空对象进行设置，可双击该对象或在其“属性”栏内进行设置。,在菜单状态下，单击左边的下拉按钮，在弹出的下拉菜单中有七个与插入对象有关的命令。单击任一命令后，,其右边会出现相关的按钮，单击按钮后

13、即可进行相关操作。,当“插入”栏为制表符状态时，可以拖动“插入”栏左边的 图标，将“插入”栏变为浮动面板，如图 0-3-12,所示。,0.4,面板基本操作和文档基本操作,0.4.1,面板的基本操作,1隐藏显示面板 （1）方法一：当所有面板均排列在屏幕右边时，单击面板组与文档窗口间的“隐藏/显示面板”按钮，如图 0-4-2 所示，可将所有面板隐藏或显示。 （2）方法二：单击“查看”“隐藏面板”命令或按【F4】键，可隐藏所有打开的面板。单击“查看”“显 示面板”命令或按【F4】键，又可将隐藏的面板显示出来。 2面板的拆分与组合 （1）面板的拆分：如果要将组合面板中的面板（例如，图 0-4-1 所示

14、的“历史记录&框架”组合面板中的“历 史记录”和“框架”面板）拆分成独立的面板，可以单击组合面板中的标签（例如，“历史记录”标签），使它成,为当前面板，再单击面板右上角的,图标，弹出面板下拉菜单。单击该菜单中的“将历史记录组合至”“新,组合面板”命令，如图 0-4-3 所示，即可将当前面板（例如，“历史记录”面板）拆分独立出来。,（2）面板的组合：单击面板（例如，“历史记录”面板组）右上角的,图标，弹出面板组菜单，单击该菜单,中的“将历史记录组合至”“框架”命令，可将当前面板（“历史记录”面板）与“框架”面板组合在一起。 这时可以看到，组合面板内的标签左右次序对调（“框架”在左，“历史记录”在

15、右），组合面板的名称也改变为,“框架&历史记录”。,图 0-4-1,浮动组合面板,图 0-4-2,折叠组合面板,图 0-4-3,面板菜单,3面板的大小调整和打开与关闭 （1）调整面板的大小：拖动面板的边框，达到所需的大小后释放左键即可。 （2）打开面板：单击“窗口”按钮，从中单击相应的（面板名称）命令，使该命令左边出现对勾。例如，单 击“窗口”“历史记录”命令，即可打开“历史记录”面板。 （3）关闭面板：单击面板（组）标题栏右上角的 按钮，或右击面板标题栏，弹出其快捷菜单，再单击该菜 单中的“关闭”命令，都可以关闭面板。另外，单击“窗口”按钮，再次单击相应的（面板名称）命令，使该命 令左边的对

16、勾消失，也可以关闭指定的面板。,0.4.2,文档基本操作,1新建和打开网页文档 （1）新建网页文档：单击“文件”“新建”命令，弹出“新建文档”对话框，如图 0-4-4 所示。从该对话 框中可以看出，用户可以建立各种类型的文件。 图 0-4-4 “新建文档”（常规）对话框 （2）打开网页文档：单击“文件”“打开”命令，弹出“打开”对话框。在该对话框内选中要打开的 HTML 文档，单击“打开”按钮，即可将选定的 HTML 文档打开。例如，可打开前面编写的名字为“中文 Dreamweaver CS3,工作区简介.htm”的网页文档。,另外，在图 0-3-1 所示的“ADOBE DREAMWEAVER CS3”对话框中，单击“打开”按钮,，也可以打开“打,开”对话框。 2保存文档和关闭文档 （1）单击“文档”“保存”命令，可以以原名称保存当前的文档。 （2）单击“文档”“另存为”命令，弹出“另存为”对话框。在该对话框中，用户可以将当前的文档以其 他名字保存。 （3）单击“文档”“保存全部”命令，