第2章 Dreamweaver CS5基础.docx

1、第2章 Dreamweaver CS5基础第2章Dreamweaver CS5基础在网络普及的现代，优秀的网页是一个很好的展现自我的平台。古话说得好，“工欲善其事，必先利其器”，我们在进行网页设计前，首先要选择一个优秀的网页设计工具。Dreamweaver、Flash、Fireworks最早是由Macromedia公司推出的一套网页设计软件。Flash用来生成二维动画，Fireworks用来制作矢量图像，Dreamweaver可以进行各种素材的集成和网络发布。这三款软件在国内有“网页三剑客”之称。2005年，Macromedia公司被著名影像处理软件公司Adobe收购，“网页三剑客”成为了Ad

2、obe软件家族的主要成员。2.1 Dreamweaver CS5简介Adobe Dreamweaver CS5是Adobe最新推出的网页设计制作工具，是一款集网页制作和管理网站于一身的网页编辑器，是一种专业的HTML编辑器，采用“所见即所得”的编辑方式，利用Div、行为、CSS、模板等技术对Web站点、Web页、Web应用程序进行设计、编码和开发。由于Dreamweaver CS5的可视化编辑功能，在通常情况下，用户可以不需要编写任何代码，直接在可视化环境中调整各种元素，快速地创建页面。可以直接将在Photoshop、 Fireworks或其他图形应用程序中创建和编辑的图像，以及在Flash中

3、创建的动画导入到Dreamweaver CS5中，并能够进行基于ColdFusion、ASP、JSP、PHP服务器技术的动态网站的创建。由此可见，Dreamweaver CS5为用户提供了实用方便的编辑工具，可帮助用户迅速高效地制作出功能强大的网站。2.2 Dreamweaver的工作界面2.2.1 启动Dreamweaver CS5安装好Dreamweaver CS5后，单击“开始”菜单，选择“程序”，在程序中选择“Adobe”中的“Adobe Dreamweaver CS5”命令后，即可启动Dreamweaver CS5，如图2-1所示。图2-1 启动Dreamweaver CS5启动Dr

4、eamweaver CS5后的初始界面如图2-2所示。图2-2 启动Dreamweaver CS5的初始界面2.2.2 Dreamweaver CS5窗口的组成在初始界面中，单击“新建”选项区中所列常用Web文档中的任意一种，便可以进入到Dreamweaver CS5的操作界面，同时建立相应的文档，并进行编辑，如图2-3所示。图2-3 Dreamweaver CS5的操作界面1标题栏在Adobe Dreamweaver CS5的窗口标题栏上整合了网页制作中最常用的布局、DW扩展、站点管理器和设计器按钮，这些常用的命令按钮可以从菜单栏或者工具栏中找到与之相应的选项，如图2-4所示。图2-4 标题

5、栏单击按钮，在弹出的下拉列表中可以看到Dreamweaver CS5推出的八种工作区外观模式，如图2-5所示。不同的工作区外观模式适用于不同层次的设计者选择合适的页面设计模式。图2-5 设计器下拉列表2菜单栏Dreamweaver CS5的主菜单共分10种，即文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助，如图2-6所示。图2-6 菜单栏3.“插入”面板在“设计器”布局模式下，Dreamweaver CS5将原先的插人栏默认呈现为插入面板形式。该面板包含成行的对象图标，用于创建和插入网页元素(例如表格、图像、AP Div和链接等)。这些按钮被组织在几个类别中，默认情况下，显示“常用

6、”类别选项卡，单击其右边的可以在各种类别之间进行快速切换，如图2-7所示。图2-7 插入栏如果设计者还是比较习惯使用Dreamweaver旧版本界面，可以直接在设计器按钮列表中选择“经典”布局模式，或者执行“窗口”“工作区布局” “经典”命令。在“经典”布局模式下提供两种模式的插入栏：制表符模式和菜单模式，如图2-8、2-9所示。这两个模式外观非常简洁，以选项卡的形式展现，占据主界面很小的工作区空间，每一个标签包含一套不同的相关图标，便于设计者操作。图2-8 制表符模式在上图中右击“常用”等任意一个选项卡，再在弹出的菜单中选择“显示为菜单”，即可切换到菜单模式。图2-9 菜单模式在上图中单击“

7、显示为制表符”命令可以切换到“制表符模式”。4. 文档工具栏文档工具栏包含一系列按钮，如图2-10所示，主要用于切换编辑区视图模式、设置网页标题、在浏览器中浏览网页以及检查浏览器兼容性等，其中各个按钮图标的功能和含义如下：图2-10 文档工具栏：显示代码视图，以便在编辑窗口中直接输入HTML代码。：显示代码视图和设计视图，以便在同一窗口中同时进行代码和页面设计。：显示设计视图，以便在编辑窗口中进行页面设计。：显示浏览器用于执行该页面的实际代码，单击此按钮后，其窗口下的代码以黄色显示且不可编辑。：用来检查用户创建的网站内容是否能够兼容各种浏览器。：单击此按钮可以像在浏览器中预览一样查看设计效果，

8、显示不可编辑的、交互式的、基于浏览器的文档视图。：能让用户快速地在许多浏览器和它们不同的版本中检查代码。：在浏览器中预览和调试网页。：可以使用不同的可视化助理来设计页面。：刷新设计视图。：用于设置网页标题。：用于对站点中的文件进行管理。5. 文档窗口文档窗口用来显示当前所创建和编辑的HTML文档内容。该窗口有代码、拆分和设计3种视图模式。1）设计视图：单击文档工具栏中的按钮可以将编辑区域的视图模式切换到设计视图模式，在该模式中可以直接对网页进行编辑，如图2-11所示。图2-11 设计视图2）代码视图：单击文档工具栏中的按钮可以将编辑区域的视图模式切换到代码视图模式，在该模式中可以编写或修改网页

9、代码，如图2-12所示。图2-12 代码视图3）拆分视图：单击文档工具栏中的按钮可以将编辑区域的视图模式切换到拆分视图模式，在该模式下整个编辑区域被分为上下两个部分，上部为代码视图，下部为设计视图，如图2-13所示。此外，在Dreamweaver CS5的“拆分” 模式下，单击标题栏左边的布局按钮，在弹出的下拉菜单中选择“垂直拆分”选项，还可以垂直分隔文档窗口，如图2-14所示。这样可以在代码视图和设计视图之间进行切换，并可对照编辑。图2-13 水平拆分代码/设计视图图2-14 垂直拆分代码/设计视图6标签选择器标签选择器位于文档窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。单击

10、该层次结构中的任何标签可以选择该标签及其所包含的内容，如图2-15所示。图2-15 状态栏在标签选择器中显示了一些常用的HTML标签，灵活运用这些标签可以很方便地选择编辑区域中的某些项目，从而提高工作效率。例如需要选择表格中的某一行，可以使用鼠标指针定位到该行中的任意一个单元格中，然后再单击标签选择器中的标签，表示选中网页中表格的一行，如图2-16所示。图2-16 标签选择器7. 属性检查器（属性面板）通过属性检查器可以检查和编辑当前选定的页面对象的属性。它随着在页面上选定的对象类型而进行改变。如果选定了表格，会在属性检查器里看到表格的宽、高、标题、换行、背景颜色等相关属性，如果选定了图像，则

11、会显示图像的属性。另外，还可以在属性面板中修改被选对象的各项属性值，如图2-17所示。图2-17 属性面板属性面板分成上下两部分，单击面板右下角的按钮可以关闭属性面板的下部分。这是原来的按钮变成按钮，单击此按钮可以重新打开属性面板的下部分。8. 面板组（浮动面板组）Dreamweaver CS5通过一套面板和面板组系统来轻松地处理不同的复杂界面。这两个界面元素一起工作能帮助用户自定义工作区，因此可以快速地访问需要的面板。每一个面板组都包含了数个面板，每一个面板都被标签确定。可以单击每一个标签在面板间进行移动。面板组可以是浮动的，也可以停放在一起。面板组内的面板显示为选项卡，如图2-18所示。图

12、2-18 浮动面板组注意：Dreamweaver中的浮动面板很多，如果需要使用某个浮动面板，而界面中没有显示，可以在“窗口”菜单项中选择相应的命令打开。2.3 创建和管理站点用Dreamweaver创建网页之前，应该首先创建本地站点，因为只有在本地站点范围内编辑网页，才能确保网页之间的正确链接。当本地站点通过测试且无误后，再上传到Web服务器上。在Dreamweaver中创建本地站点之前，首先需要规划站点。2.3.1规划站点站点中通常包含各种不同类型的文件。在建立一个站点时，首先要在本地磁盘上创建一个站点文件夹(例如，D:myweb）。为了便于管理网站中所包含的文件，需要将它们都放在站点文件夹

13、内。规划站点主要包括规划站点的栏目结构和资源结构。在站点根目录下可以建立多个不同的子文件夹，分别存放相关栏目中的HTML文件，如果是较为简单的网站，也可以将所有的HTML文件都存放在站点根目录下。在站点中通常还包括一些非HTML文件，如图像文件、声音文件等，它们是作为资源文件存在的，可以将其分门别类地存放在不同的子文件夹中，例如，image、audio等文件夹。这样，当要在网页中插入某一个资源文件时，能很快地在相应的文件夹中找到。规划站点时需要注意：站点文件夹下（包括站点文件夹）的所有子文件夹或文件在命名时需要遵循以下原则：见名识意；采用英文字母或数字命名，不要用汉字。2.3.2 创建本地站点

14、完成站点的规划后，接下来就可以使用Dreamweaver CS5创建站点了。操作步骤如下：第1步，单击菜单“站点”中的“管理站点”命令，弹出“管理站点”对话框，如图2-19所示。如果以前定义过站点，则其名称会在列表框中列出。图2-19 “管理站点”对话框第2步，单击“新建”按钮，弹出“站点设置对象”对话框，如图2-20所示，在“站点名称”文本框中输入您要起的站点名称，如myfirstweb, 在“本地站点文件夹”文本框中输入您已建好的本地站点文件夹的正确路径名称。图2-20 “MyFirstweb的站点定义为”对话框第3步，站点的名称和存储的文件夹设置好之后，可以对站点的“服务器”类别进行设置

15、，用户指定远程服务器和测试服务器。如果仅在Dreamweaver站点中工作，可以跳过这一项的设置，如果需要连接到远程服务器，可以单击页面左下角的加号，添加新服务器，如图2-21所示。图2-21 是否添加远程服务器这里对服务器的设置有“基本”和“高级”两个部分。“基本”设置主要是对服务器的名称、连接方法等进行设置。一般地，服务器默认的连接方法为FTP连接。其他的连接方法还有SFTP、本地/网络、WebDAV和RDS，如图2-22所示。如果需要进一步设置，可以展开“更多选项”栏进行设置。图2-22 服务器的基本设置“高级”设置是对远程服务器和测试服务器的服务器模型进行设置，如图2-23所示。图2-

16、23 服务器的高级设置第4步，设置 “版本控制” 选项，用户可以设置使用Subversion获取和存回文件，如图2-24所示。图2-24 版本控制第5步，单击“高级设置”选项卡，包含“本地信息”、“遮盖”、“设计备注”、“文件视图列”、“Contribute”、模板和“Spry”选项。“本地信息”选项包括选择默认图像文件夹、设置链接相对的对象、设置Web站点的URL、区分大小写的链接检查和缓存的启用与否。其余的几个选项可以根据用户的需求进行设置选定。如图2-25所示。图2-25 “高级设置”选项卡第6步，单击图2-25 中的“保存”按钮，返回“管理站点”对话框。此时新建的站点出现在对话框中，如

17、图2-26所示。图2-26 “管理站点”对话框第7步，单击图2-26 中的“完成”按钮，新建的站点出现在“文件”面板上，如图2-27所示。图2-27 “文件”面板2.3.3 管理本地站点根据用户的需要，可以在Dreamweaver CS5中创建多个站点。在创建完一个本地站点后，通常还需要对站点中的文件和文件夹进行管理，包括文件和文件夹的新建、移动、复制、删除或重命名等。若要对某个站点进行编辑或管理，首先需要打开该站点。1. 打开本地站点在“文件”面板上方有2个下拉列表框（如图2-28所示），左边的下拉列表框是站点名称系列，在其中选择一个站点名称，即可打开本地站点。图2-28 打开站点2. 编辑

18、站点单击菜单“站点”中的“管理站点”命令，在“管理站点”对话框（如图2-26所示）中选择已创建的站点，单击“编辑”按钮，可以对站点的相关属性进行修改。3. 新建文件或文件夹1）单击“文件”面板，打开站点管理窗口。2）右键单击“站点”或已经存在的文件夹，在弹出的快捷菜单中选择相应命令，即可在站点下或选定的文件夹下创建文件和文件夹，快捷菜单如图2-29所示。图2-29 快捷菜单示例图2-30所示的就是在D:myweb下创建的三个文件夹。在“文件”面板中创建文件和文件夹和通过“资源管理器”或“我的电脑”创建是一样的。图2-30 创建文件夹示例4. 站点文件夹和文件的移动、复制、删除或重命名用鼠标右键

19、单击需要移动、复制、删除或重命名的对象，在弹出的快捷菜单中选择“编辑”命令，在随后出现的级联菜单中选择“剪切”、“复制”、“删除”或“重命名”命令即可，如图2-31所示。 图2-31 文件的移动、复制、删除或重命名5. 编辑站点文件要编辑站点文件，可以双击“文件”面板上的该文件图标，如果是HTML文档就会载入Dreamweaver的“文档”窗口，编辑后保存文档，本地站点文件就会得到更新。如果是其他类型的文件，双击后会启动相应外部编辑器，然后可在其中进行编辑。2.4 网页的基本操作网页文件的基本操作包括：创建网页、打开与关闭网页、保存网页、预览网页及网页的页面属性设置等操作。2.4.1 新建与保

20、存网页Dreamweaver提供了多种创建网页的方法，下面分别介绍一下：1如果Dreamweaver CS5运行后显示起始页，则在起始页中直接选择“新建HTML文档”。2如果Dreamweaver CS5已运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。如图2-32所示。图2-32“新建文档”对话框在“页面类型”列表框中选择“HTML”选项，或者直接选择“空白页”选项，然后单击“创建”按钮，即创建了一个新的文档。在文档窗口中，也可以直接按Ctrl+N组合键，打开图2-32所示“新建文档”对话框。2.4.2保存网页对一个新建网页文档进行编辑后，还必须将其保存起来，以

21、便于日后使用。1新建一个文件后，选择菜单“文件”中的“保存”命令，将打开“另存为”对话框，如图2-33所示。选中保存路径，给文件命名，选择保存类型，然后单击“保存”按钮即可完成文件保存。图2-33“另存为”对话框2在文档窗口中，也可以直接按Ctrl+S组合键，打开“另存为”对话框进行网页文件的保存。3.需要将文件以不同路径或名称保存时，选择“文件”菜单中的“另保存”命令。注意：.htm既是文件的后缀，也是这个网页文件的类型说明，表示这个网页文件是属于静态的HTML文件。网页的后缀必须为htm或html，否则浏览器无法正常打开。通常，网站首页名字是index.html或index.htm。2.4

22、.3 打开网页与关闭网页如果要编辑或查看一个已有的网页文件，需要打开此文档。打开文档有多种方法。1启动Dreamweaver CS5程序，在起始页面中显示了最近编辑过的文件，点击目标文件，即可打开，如图2-34所示。图2-34 单击“打开最近项目”下面的选项可以打开文件2选择“文件”菜单中“打开”命令，出现“打开”对话框，如图2-35所示。在“查找范围”下拉列表框中选定要打开文档所在的位置，在“文件名”文本框中输入要打开的文件名或直接在上方的列表框中选中要打开的文件，单击“打开”按钮即可完成文档的打开。3在文档窗口中，也可以直接按Ctrl+O组合键，出现“打开”对话框。4通过“文件”面板打开文

23、档。在“文件”面板中找到相应的文档，双击即可打开。图2-35 “打开”对话框选择“文件”菜单中“退出”命令，或者单击Dreamweaver CS5窗口右上角上的“关闭”按钮，即可关闭网页，退出Dreamweaver CS5程序。2.4.4 页面属性的设置在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。如图2-36所示。图2-36 “页面属性”对话框“页面属性”对话框中的各选项含义如下：1外观(CSS)：在该选项中可以设置页面的一些基本属性，并且将设置的

24、页面相关属性自动生成为CSS样式表写在页面头部，如图2-36所示。在“页面字体”下拉列表中选择一种字体设置为页面字体，后面按钮分别设置字体加粗和倾斜。在“大小”下拉列表中选择页面的默认字号，还可以设置页面字体大小的单位，默认为“像素（px）”。在“背景颜色”文本框中设置页面的背景颜色。默认为白色，点击颜色选择图标可以选择其他的颜色。例如“#FFFFFF”，是以16进制形式显示的RGB色值。在“背景图像”文本框中输入网页背景图像的路径，也可点击“浏览”按钮，为网页添加背景图像。在使用图像作为背景时，可以在“重复”下拉列表中选择背景图像的重复方式，包括“不重复” 、“重复” 、“横向重复” 、“纵

25、向重复”。左右边距和上下边距是用来设置网页边距，一般都设置为“0”以方便于网页的编辑。2.外观(HTML)：该选项的设置与外观(CSS)的设置基本相同，唯一的区别是外观(HTML)设置的页面属性将会自动在页面主体标签中添加相应的属性设置代码，而不会自动生成CSS样式。如图2-37所示。图2-37“外观(HTML)”选项3.链接(CSS)：在该选项中可以设置一些与页面的链接效果有关的设置，在设置完成后，同样会将设置的页面相关属性自动生成为CSS样式表写在页面头部，如图2-38所示。在“链接字体” 下拉列表中选择页面超链接文本在默认状态下的字体。在“大小”下拉列表中选择超链接文本的字体大小。在“链

26、接颜色” 文本框中设置网页中文本超链接的颜色。在“已访问链接” 文本框中设置网页中访问过的超链接的颜色。在“活动链接” 文本框中设置网页中激活的超链接的颜色。在“变换图像链接” 文本框中设置网页中当鼠标移动到超链接文字上时超链接的颜色。在“下划线样式”下拉列表中选择网页中当鼠标移动到超链接文字上时采用何种下划线。图2-38“链接(CSS)” 选项4.标题(CSS)：在该选项中可以设置标题字体等属性，如图2-39所示。图2-39“标题(CSS)”选项标题字体：定义标题文字的字体。标题1：定义一级标题文字的字号和颜色。标题2：定义二级标题文字的字号和颜色。标题3：定义三级标题文字的字号和颜色。标题

27、4：定义四级标题文字的字号和颜色。标题5：定义五级标题文字的字号和颜色。标题6：定义六级标题文字的字号和颜色。5.标题/编码：“标题”显示在浏览器的标题栏和状态栏中，当网页被收藏时，标题显示在收藏夹中。“编码”用来设置当前网页字体采用的编码种类。中国大陆地区一般默认编码为简体中文GB2312，如图2-40所示。图2-40 “标题/编码” 选项 6.跟踪图像：进行网页制作时插入用作参考的图像文件，如网页效果图等，如图2-41所示。图2-41“跟踪图像”选项本章小结本章主要介绍了Dreamweaver CS5的工作环境和创建、管理站点的基本方法，这是利用Dreamweaver CS5进行网页设计的前提知识。网站设计者要想建设网站，可以利用Dreamweaver CS5在本地硬盘上创建一个站点，控制和管理站点的结构，包括对网页的新建、打开、保存、删除等基本操作。本章还介绍了利用“页面属性”设置页面的背景颜色和文本格式等外观，从而进行总体上的控制。习题一、简答题：1如何创建和管理站点？2. 简述Dreamweaver CS5窗口的主要组成。3. 在已建的网站中，如何新建网页文件index.htm？4. 如何为新建的网页创建标题？