Dreamweaver简介.ppt

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