14天学通Dreamweaver+Photoshop+Flash网站建设与网页设计

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第1天下午初次接触Dreamweaver CS4

本章学习流程图

知识导读

Dreamweaver CS4是Dreamweaver的最新版本，它采用了多种先进的技术，能快速高效地创建极具表现力和动感效果的网页。Dreamweaver CS4提供了更加完善的网页编辑功能，并在管理站点方面也有了很大的改善。下面我们就来学习Dreamweaver的基本知识。

完成本章内容以后，您将能够

◎ 了解Dreamweaver CS4

◎ 熟悉Dreamweaver CS4的工作界面

◎ 掌握创建站点的相关知识

◎ 掌握管理站点的相关知识

2.1 Dreamweaver CS4概述

随着网络的快速发展，互联网的应用越来越贴近生活，越来越多的人加入到了制作网页的工作中来，各式各样的网站如雨后春笋般出现在互联网上，制作网页也成了一种时尚。制作网页的工具软件很多，目前使用最广泛的就是Dreamweaver，Dreamweaver CS4是Dreamweaver的最新版本。

Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台和浏览器限制的充满动感的网页。

Dreamweaver、Flash以及在Dreamweaver之后推出的针对专业网页图像设计的Fireworks被Macromedia公司称为DreamTeam（梦之队），足见市场的反响和Macromedia公司对它们的信心。下面简单介绍一下Dreamweaver的优点。

1.最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks、FreeHand或Photoshop等文件移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于菜单、快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与读者喜爱的设计工具，如Playback Flash、Shockwave和外挂模组等搭配，无须离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Fireworks或Photoshop来进行编辑与设定图档的最佳化。

2.网站管理

使用网站地图可以快速制作网站雏形并设计、更新和重组网页。改变网页位置或文件名， Dreamweaver会自动更新所有链接。

3.无可比拟的控制能力

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧（frames）和表格的制作速度快得令读者无法想象。Dreamweaver支持精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得，Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP、Apache、BroadVision、Cold Fusion、iCAT、Tango与自行发展的应用软件。当使用Dreamweaver设计动态网页时，所见即所得的功能让读者不需要通过浏览器就能预览网页。

2.2 Dreamweaver CS4的工作界面

Dreamweaver CS4有一个简洁、高效的界面，包含了众多新增的功能。Dreamweaver CS4的界面更易于使用，极大地提高了工作效率。在Dreamweaver CS4工作界面中主要包括“菜单栏”、“文档窗口”、“属性”面板和“面板组”等，如图2-1所示。

图2-1 操作界面

2.2.1 菜单栏

标题栏下方显示的主要是菜单栏，它包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”10个菜单项，如图2-2所示。

图2-2 菜单栏

◎“文件”：用来管理文件，包括创建和保存文件、导入与导出、预览和打印文件等。

◎“编辑”：用来编辑文本，包括撤销与重做、复制与粘贴、查找与替换、首选参数设置和快捷键设置等。

◎“查看”：用来查看对象，包括代码的查看、网格线与标尺的显示、面板的隐藏以及工具栏的显示等。

◎“插入”：用来插入网页元素，包括图像、多媒体、AP Div、框架、表格、表单、电子邮件链接、日期、特殊字符及标签等。

◎“修改”：用来实现对页面元素修改的功能，包括页面元素、面板、快速标签编辑器、链接、表格、框架、导航条、对象的对齐方式、层与表格的转换、模板、库及时间轴等。

◎“格式”：用来对文本进行操作，包括字体、字形、字号、字体颜色、HTML/CSS样式、段落格式化、扩展、缩进、列表、文本的对齐方式和检查拼写等。

◎“命令”：收集了所有的附加命令项，包括应用记录、编辑命令清单、获得更多命令、插件管理器、应用源代码格式、清除HTML/word HTML、设置配色方案、格式化表格、表格排序等。

◎“站点”：用来创建与管理站点，包括站点显示方式、新建、打开与自定义站点、上传与下载、登记与验证、查看链接和查找本地/远程站点等。

◎“窗口”：用来打开与切换所有的面板和窗口，包括插入栏、属性面板、站点窗口、CSS面板等。

◎“帮助”：内含Dreamweaver联机帮助、注册服务、技术支持中心和Dreamweaver的版本说明。

2.2.2 插入面板

插入面板包含用于创建和插入对象的按钮。当鼠标移到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。单击该按钮即可插入相应的元素，如图2-3所示。

2.2.3 属性面板

“属性”面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。未选中任何对象时，“属性”面板将默认HTML的样式属性。单击“属性”面板右上角的折叠按钮，可以折叠“属性”面板使之仅显示最常用的属性，如图2-4所示。

图2-3 插入面板

图2-4 “属性”面板

2.2.4 面板组

浮动面板组是浮动面板的集合，位于编辑窗口的右侧，如图2-5所示。双击所需面板即可展开该面板，将鼠标指针移动到浮动面板的顶部，可拖动该面板到窗口中的任意位置。

图2-5 面板组

2.2.5 文档窗口

文档窗口显示当前创建和编辑的文档，可以在“设计”视图、“代码”视图、“拆分”视图中分别查看文档，如图2-6所示。

图2-6 文档窗口

2.3 创建站点

在使用Dreamweaver制作网页前，最好先定义一个站点，这是为了更好地利用站点对文件进行管理，尽量减少错误，如路径出错、链接出错。新手制作网页时的条理性、结构性需要加强，往往一个文件放这里，另一个文件放那里，或所有文件都放在同一个文件夹内，这样显得很乱。建议建立一个文件夹用于存放网站的所有文件，再建立几个文件夹，将文件分类，如图片文件放在images文件夹内，HTML文件放在根目录下，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再进行分类。

2.3.1 使用向导创建站点

创建本地站点的具体操作步骤如下。

1 执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“新建”按钮，在弹出的菜单中选择“站点”选项，如图2-7所示。

图2-7 “管理站点”对话框

2 弹出“站点定义为”对话框，切换到“基本”选项卡，在“您打算为您的站点起什么名字？”文本框中输入新建站点的名字，如图2-8所示。

图2-8 “站点定义为”对话框

提示

执行“窗口”|“文件”命令，打开“文件”面板，单击“管理站点”超链接也可以弹出“管理站点”对话框。

3 单击“下一步”按钮，勾选“否，我不想使用服务器技术”单选按钮，如图2-9所示。

图2-9 选择是否使用服务器技术

提示

因为本例建立的是一个静态站点，所以勾选“否，我不想使用服务器技术”单选按钮。

4 单击“下一步”按钮，单击按钮，在弹出的对话框中选择要定义本地根文件夹的位置，如图2-10所示。

图2-10 选择要定义本地根文件夹的位置

5 单击“下一步”按钮，设置连接远程服务器的方式，这里选择“无”选项，如图2-11所示。

图2-11 选择“无”选项

6 单击“下一步”按钮，显示创建站点的总结，如图2-12所示。

图2-12 显示创建站点总结

7 单击“完成”按钮，返回到“管理站点”对话框，在对话框中显示新建的站点，如图2-13所示。

图2-13 “管理站点”对话框

8 单击“完成”按钮，在“文件”面板中显示创建的站点。

2.3.2 通过高级选项卡设置站点

前面讲述的是用“基本”的方式来创建站点，它适用于刚刚接触Dreamweaver的初学者。除此之外，还有一种“高级”的方式也可以用来创建站点，在新建站点的窗口中单击左上角的标签即可进行切换，这种方式适用于对Dreamweaver已经有一定了解的用户，通过高级选项卡设置站点的具体操作步骤如下。

1 执行“站点”|“管理站点”命令，弹出“管理站点”对话框，单击“编辑”按钮，在弹出的“站点定义为”对话框中切换到“高级”选项卡，在“分类”列表框中选择“本地信息”选项，如图2-14所示。

图2-14 “本地信息”选项

2 在“分类”列表中选择“远程信息”选项，这里主要设置访问远程文件夹的方法，主要有“无”、“FTP”、“本地/网络”、“WebDAV”、“RDS”和“Microsoft Visual SourceSafe (R)”几种方法。其中最常用的是FTP访问远程方法，如图2-15所示。

图2-15 “远程信息”选项

3 在“分类”列表中选择“测试服务器”选项，指定Dreamweaver CS4处理动态页以进行网页创作的测试服务器，如图2-16所示。

图2-16 “测试服务器”选项

4 在“分类”列表中选择“版本控制”选项，Dreamweaver可以连接到使用Subversion （SVN）的服务器，Subversion是一种版本控制系统，它使用户能够协作编辑和管理远程Web服务器上的文件。Dreamweaver不是一个完整的SVN客户端，但却可以使用户获取文件的最新版本并更改和提交文件。与服务器建立连接后，可在“文件”面板中查看SVN存储库。若要查看SVN存储库，可以从“视图”菜单中选择“存储库视图”，或在展开的“文件”面板中，单击“存储库文件”按钮，如图2-17所示。