第二章 DWCS5基本操作

第2章Dreamweaver CS5基础在网络普及的现代，优秀的网页是一个很好的展现自我的平台。

古话说得好，“工欲善其事，必先利其器”，我们在进行网页设计前，首先要选择一个优秀的网页设计工具。

Dreamweaver、Flash、Fireworks最早是由Macromedia公司推出的一套网页设计软件。

Flash 用来生成二维动画，Fireworks用来制作矢量图像，Dreamweaver可以进行各种素材的集成和网络发布。

这三款软件在国内有“网页三剑客”之称。

2005年，Macromedia公司被著名影像处理软件公司Adobe收购，“网页三剑客”成为了Adobe软件家族的主要成员。

2.1 Dreamweaver CS5简介Adobe Dreamweaver CS5是Adobe最新推出的网页设计制作工具，是一款集网页制作和管理网站于一身的网页编辑器，是一种专业的HTML编辑器，采用“所见即所得”的编辑方式，利用Div、行为、CSS、模板等技术对Web站点、Web页、Web应用程序进行设计、编码和开发。

由于Dreamweaver CS5的可视化编辑功能，在通常情况下，用户可以不需要编写任何代码，直接在可视化环境中调整各种元素，快速地创建页面。

可以直接将在Photoshop、Fireworks或其他图形应用程序中创建和编辑的图像，以及在Flash中创建的动画导入到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所示。

一、Dreamweaver MX中文版建站初步建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。

现在免费的网页空间很少了，在还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。

接下来主要介绍本地站点的建立，站点文件命名。

简明步骤：1、在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。

目标是做一个个人网站。

打开“我的电脑”，打开C盘，点鼠标右键，选择新建。

2、选择文件夹选项3、C盘下会出现一个新建文件夹图标4、输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！5、现在开始在Dreamweaver MX中把media这个文件夹定义为站点。

打开Dreamweaver，在菜单栏上，点击“站点”菜单，选择“新建站点”命令。

6、接下来需要给站点起一个名字，可以起任意一个名字。

7、这里起名为media,按下一步。

9、按“下一步”按钮，选择是否使用服务器技术。

因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。

10、按“下一步”按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。

11、按“下一步”，选择要定义的本地根文件夹。

12、这里选择media文件夹。

13、点“选择”按钮，因为没有使用远程服务器，就选择“无”。

14、按“下一步”按钮。

15、按完成按钮，一个站点就定义好了。

二、文件命名及修改默认扩展名站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择“新建文件”。

给新建的文件输入名称。

新建文件夹与新建文件类似，就不重复了。

在文件命名和站点结构方面，养成良好的习惯很重要。

网站首页默认的文件名，取决于申请的主页空间，一般是index.htm、index.html、default.htm 等。

《Dreamweaver CS5网页制作基础教程》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。

它的主要任务是培养学生规划、设计和制作网站的实际技能。

二、课程教学目标1、掌握Dreamweaver CS5界面的组成2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握添加和设置文本、图像和媒体的方法5、掌握创建和设置超级链接的方法6、掌握创建、编辑表格及其属性设置方法7、掌握使用框架创建网页的方法8、掌握使用Div和CSS样式布局网页的方法9、掌握使用模板和库创建网页的方法10、掌握使用行为的基本方法11、掌握使用表单设计网页的方法12、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章网页制作基础∙ 了解与网页有关的一些常用名词术语。

∙ 了解HTML和CSS的一些基本知识。

∙ 了解Dreamweaver CS5的工具栏和功能面板。

∙ 掌握Dreamweaver CS5设置首选参数的方法。

第2章旅游网站站点设计∙ 了解旅游网站的基本知识。

∙ 了解站点规划的基本知识。

∙ 掌握定义和管理站点的基本方法。

∙ 掌握创建文件夹和文件的基本方法。

第3章旅游网站文本设置∙ 掌握设置页面属性的方法。

∙ 掌握插入文件头标签的方法。

∙ 掌握添加文本和特殊对象的方法。

∙ 掌握设置字体属性的方法。

∙ 掌握设置段落属性的方法。

第4章旅游网站CSS样式设置∙ 了解CSS速记规则与普通规则的区别。

∙ 了解设置CSS样式首选参数的方法。

∙ 了解CSS类型等属性的基本涵义的设置技巧。

∙ 掌握创建、编辑、管理和应用CSS样式的方法。

第5章旅游网站CSS和Div布局设计∙ 了解常用的页面布局类型和技术。

∙ 掌握插入和编辑Div标签的基本方法。

∙ 掌握使用CSS+Div布局页面的基本方法。

∙ 掌握创建和设置AP Div的基本方法。

∙ 掌握使用Spry布局构件的基本方法。

第二课：制作网页的基本操作2-1 添加文本1
1、网页文本的输入方式
(1)、导入预先保存的文档
(2)、直接输入或复制粘贴
2、首页命名
3、网页的背景图
片通过下方的页
面属性来设置。

2-2 添加文本2
1、在网页中添加一个能自动更新的日期时间。

2、在网页中连续输入多个空格的设置。

在“编辑”菜单中选择“首选参数—常规--允许多个连续的空格”，确定。

3、添加水平线。

选中需要添加的位置，选择“插入—HTML—水平线”
在下放的属性面板中设置水平线
水平线的颜色需要通过代码进行设置，<hr>代码表示一条水平线，括号内加空格设置属性，保存后预览即能看见设置的效果。

4、特殊字符的插入。

2-3 编辑文本
1、网页文件中的文本输入、删除、复制和粘贴等编辑与DOC文档的操作相似。

2、搜索网页中查找或替换某一字词
搜索结果的显示点击每一项即显示精确位置替换和撤销Ctrl+Z。

Dreamweaver CS5快速入门1.定义Dreamweaver CS5站点（1）站点的定义及类型：也称网站，是一系列通过超链接而相互联系的网页集合，这些网页都具有一些共性，例如风格、布局、表现主题等。

站点根据其存储位置可分为两种：①本地站点：放置在本地磁盘上的站点，对于网页制作者来说，就是在制作网站过程中存放所有文件和资源（图像、声音等）的总文件夹；②远程站点：是本地站点的复制，存放在可以连接网络并提供广大网民浏览的远程服务器上。

（2）站点规划原则：站点是由文档和文档所在的文件夹组成，利用不同的文件夹，将不同内容的网页分门别类地保存起来，是设计网站的前提。

●将站点内容进行分类，然后把相关内容放在同一个文件夹中，以便对站点资源进行管理，文件夹的层次最好不要超过3层。

如：D:\myweb●在对文件或文件夹命名时需注意：最好使用英文或汉语拼音作为文件或文件夹的名字；命名应有一定规律，不要使用过长的名称，尽量使用意义明确的名称。

如Photo、works、iamges●合理分配各种类型的文件，对文件进行分类存放。

（3）创建站点：①在本地计算机某盘根目录下建立一个总的网站文件夹和总文件夹中的图像文件夹。

②选择【站点】—【新建站点】命令，打开【站点设置对象】对话框。

●【站点名称】：设置站点名称，可以是中文或英文，此处输入“myweb”●【本地站点文件夹】：设置本地磁盘中用来存储站点文件的总文件夹，单击文本框右侧“浏览”打开“选择根文件夹”对话框，导航到myweb文件夹。

●单击【高级设置】，设置各项参数：※【默认图像文件夹】文本框：用于输入本地站点的默认图像文件夹路径。

※【链接相对于】单选按钮组：在站点中创建指向其他资源或页面的链接时，指定Dreamweaver创建的链接类型。

※【Web URL】文本框：输入Web远程站点的URL。

※【区分大小写的链接检查】复选框：在Dreamweaver中检查链接时，将检查链接的大小写与文件名的大小写是否匹配。

Dreamweaver CS5教程第一课：网页设计基础一、网页的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站2、浏览网页的工具－浏览器浏览器：用于打开显示网页的软件。

最常用的是Windows系统自带的IE浏览器。

还有火狐Firefox、360安全浏览器、遨游、腾讯、TT等等。

1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式/nba.shtm12) 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。

二、初识Dreamweaver1、制作网站的流程规划网站类型及主题－搜集资料－使用软件进行网页制作－测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。

Dreamweaver：梦想编辑者。

通过这个工具，实现编辑网页的梦。

Dream：梦想Weaver：织布者，织工早期的Macromedia公司推出的“网页三剑客”之一。

“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中专用利器。

它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DM CS5是最新推出的版本。

三、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具，通过站点可以对网站的相关页面及各类素材进行统一管理，还可以使用站点管理实现将文件上传到网页服务器，测试网站简单的说就是一个文件夹，在这个文件夹里包含了网站中所有用到的文件，我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。

2、创建站点。

实验二一、实验项目名称：Dreamweaver CS5基础二、实验目的和要求：1.掌握新建网页文档、保存与打开网页、设置网页属性的方法；2.熟悉建立本地站点、设置首选参数的基本方法；3.熟悉编辑、复制和删除站点的基本方法；4.熟悉创建站点文件夹和文件、重命名站点文件与文件夹、删除站点文件与文件夹的方法。

三、实验原理和图例1.建立目录结构的要求：(1)不要将所有文件都存放在根目录下，会造成文件管理混乱。

(2)按栏目内容建立子目录。

(3)在每个栏目目录下都建立独立的images、music和flash目录，保存图像、音乐、视频和flash资源。

(4)目录的层次不要太深，建议不要超过3层。

(5)目录使用意义明确的英文名称，不要使用中文名称。

(6)不要使用过长的目录名称。

2.网页命名的规则：网页文件名通常使用小写英文，不能使用空格，最好不要使用特殊字符，不用中文。

3.“幽幽我心的个人网站”目录结构四、实验基本描述本实验将通过一个“幽幽我心的个人网站”的创建，学习网站从规划到建立的流程，自己动手，打造属于自己的站点。

五、实验步骤：1.创建站点操作一启动软件Dreamweaver CS5单击“开始”|“程序”|“Macromedia”|“Macromedia Dreamweaver CS5”菜单项。

操作二创建网站站点在Dreamweaver CS5中，选择“站点”|“新建站点”菜单。

2.管理站点在Dreamweaver CS5中，选择“站点”|“管理站点”菜单。

操作一导出站点操作二导入站点操作三复制、删除与编辑站点3.创建网站目录结构操作一启动Dreamweaver，打开“幽幽我心的个人网站”操作二使用文件面板创建网站首页在文件面板中，选择“幽幽我心的个人网站”右键单击，新建一个网页文件，命名为index.html。

操作三在文件面板双击打开首页文件、设置其页面属性在首页文件index.html的页面属性中，设置左边距和上边距为0像素。

第1章 Dreamweaver CS5网页设计基础133. 预览网页。

(1) 按+组合键保存文档。

(2)在文档工具栏中单击按钮，在弹出的下拉菜单中选择【预览在IExplore 】选项，即可在IE 中预览网页的设计效果，如图1-23所示。

1.3 Dreamweaver CS5网页设计基础Dreamweaver 与Flash 、Fireworks 合在一起被称为网页制作三剑客，这3款软件相辅相承，是制作网页的最佳选择。

Dreamweaver CS5是设计Web 站点和应用程序的专业工具，它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的标准网站和应用程序。

1.3.1 Dreamweaver CS5的操作基础工欲善其事，必先利其器，下面先认识一下Dreamweaver 的发展史及其工作界面。

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

其先后经历了Dreamweaver 4.0、Dreamweaver MX 、Dreamweaver MX 2004、Dreamweaver 8.0、Dreamweaver CS3、Dreamweaver CS4和Dreamweaver CS5。

图1-32所示为Dreamweaver 4.0版本。

图1-32 Dreamweaver 4.0的操作界面二、 Dreamweaver CS5界面介绍(1) 起始界面启动Dreamweaver CS5，即可进入起始界面，如图1-33所示。