网页制作与网站设计_03DreamweaverCS3基础

1、项目三项目三Dreamweaver CS3 基础 内容摘要内容摘要 Dreamweaver CS3的优势特点和新特性 创建Web站点工作流程 。 如何启动Dreamweaver CS3应用程序 。 Dreamweaver CS3主工作区 创建和打开文档的方法 创建本地站点的方法 学习目标学习目标 了解Dreamweaver CS3其特点 了解创建Web站点的工作流程 掌握启动Dreamweaver CS3应用程序的几种方法，了解主工作区 掌握创建、打开文档的方法 学会建立本地站点Dreamweaver CS3 基础 任务一描述：任务一描述：了解了解Dreamweaver CS3 前面小刚已经学

2、习了网页制作的基础，了解了网站的类型。但选择那种软件来之制作网页呢？目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一行行的源代码那样，老师向小刚推荐了Dreamweaver CS3，现在我们就先来了解CS3软件。解决方案解决方案 Dreamweaver CS3是集网页制作和网站管理与一身的“所见即所得” 的网页编辑软件，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它以强大的功能和友好的界面备受广大网页设计者的欢迎，已成为网页制作的首选软件。 通过对Dreamweaver CS3特点的分析和功能的介绍对其有

3、个初步的了解。Dreamweaver CS3基础 知识讲解及操作步骤知识讲解及操作步骤1. Dreamweaver特点：2. 灵活编写网页的特点3. 可视化编辑界面4. 强大的Web站点管理功能 业界领先的网页设计工具 集成的工作流 整的CSS支持 轻松的SpryDreamweaver CS3基础 任务二描述：任务二描述：了解了解Dreamweaver CS3创建创建Web站点的工作流程站点的工作流程 经过对Dreamweaver CS3特点、新特性的了解，小刚已经对Dreamweaver CS3有了基本的认识，下面我们来学习如何利用Dreamweaver CS3创建Web站点的流程。解决方案

4、解决方案 制作网站上的网页，对于熟练网页制作的使用者来说，通常是先建立本站站点，然后在本地站点中创建网站文件夹，把制作网页的相关文件、图像复制到相应的文件夹内，接着再利用相关文件和素材，制作网站上的网页。最后，在完成网页制作以后，利用本地站点和远程站点的链接，发布网页，完成真正的网页制作过程。因此，在制作网页之前，本小节将简单地介绍站点建设。Dreamweaver CS3基础 知识讲解及操作步骤知识讲解及操作步骤1. 站点的规划2. 管理站点文件3. 设计web页面布局4. 向页面添加内容5. 手工编码6. 设置web应用程序7. 创建动态页8. 快速开发应用程序Dreamweaver CS3

5、基础 任务三描述：任务三描述：了解了解Dreamweaver CS3的启动和主工作区的启动和主工作区 小刚在了解了Dreamweaver CS3创建网站的工作流程之后，已经迫不及待地要制作自己的网站了，但老师告诉他在使用之前你还需要学会如何启动它，了解Dreamweaver CS3的主工作区。解决方案解决方案 使用Dreamweaver CS3之前，应该先启动它。根据软件安装的不同情况，启动Dreamweaver CS3的方法有通过快速启动栏启动、通过桌面快捷方式图标启动、通过选择命令启动及通过“运行”对话框启动。Dreamweaver CS3基础 知识讲解及操作步骤知识讲解及操作步骤 成功安

6、装好后，它会自动出现在“开始”菜单的程序组中，选择“开始”|“所有程序”|“Adobe Dreamweaver CS3”命令，即可启动Dreamweaver CS3。如下图Dreamweaver CS3基础 其他启动方法：其他启动方法：l 通过快速启动栏启动：，单击快速启动栏中启动 Dreamweaver CS3的快捷方式图标。l 通过桌面快捷方式图标启动：双击Dreamweaver CS3快捷方式图 标即可打开应用程序。l 通过“运行”对话框启动 选择“开始”|“运行”命令，在打开的对话框中输入“dreamweaver”,单击确定即可。Dreamweaver CS3基础 Dreamweave

7、r CS3的工作区主要包括以下几个部分 ，如图所示：Dreamweaver CS3基础 知识讲解及操作步骤知识讲解及操作步骤单击“保存”按钮，保存网页为HTML文档，保存后，网页的名称、路径、类型都显示在Dreamweaver上的标题栏上 如果要将网页另存为其他文件，可以选择菜单“文件”|“另存为”命令，打开的“另存为”对话框，然后在“文件名”文本框中输入其他网页名称即可，默认情况下，保存的网页类型是HTML文档。使用另存网页的方法主要是方便使用者制作结构、样式、属性等相同的页面。如果要打开网页文件，可以选择菜单“文件”|“打开”命令，在“打开”对话框中选择需要打开的网页文件 Dreamwea

8、ver CS3基础 任务五描述：任务五描述：建立站点建立站点 站点是建立和管理网站文件的一种方式和方法，因此，建立站点是创建网站的一个重要前提之一。Dreamweaver CS3是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的站点。解决方案解决方案 在使用Dreamweaver CS3制作网页前，最好先定义一个新站点，这是为了更好地利用站点对文件进行管理，尽可能减少错误，如路径出错、链接出错等。我们可以使用【站点定义向导】按照提示快速创建本地站点 Dreamweaver CS3基础 操作步骤操作步骤1. 选择【站点】|【管理站点】命令，弹出【管理站点】对话框，在对话框中

9、单击【新建】按钮，在弹出菜单中选择【站点】选项 。2. 弹出【站点定义为】对话框，在对话框中选择【基本】选项卡，弹出【站点定义向导】的第一个界面，在该界面中可以根据网站的需要给网站起一个名字 。3. 单击【下一步】按钮，出现向导的下一个界面，询问是否要使用服务器技术，如果建立一个静态站点，选择【否，我不想使用服务器技术】选项，如果建立的是一个动态站点，选择【是，我想使用服务器技术】选项，我们要创建静态站点，所以选择【否，我不想使用服务器技术】选项。 Dreamweaver CS3基础 操作步骤操作步骤4. 单击【下一步】按钮，弹出如图3-21所示对话框，在该对话框中选择要定义的本地根文件夹，并指定站点位置。 5. 单击【下一步】按钮，询问是否使用服务器，因为没有使用远程服务器，这里选择【无】，将整个站点制作完成以后再上传 6. 单击【下一步】按钮，将显示站点概要 7. 单击【完成】按钮，出现【管理站点】对话框，其中显示了新建站点 8. 单击【完成】按钮，此时在【文件】面板中可以看见创建的站点文件 Dreamweaver CS3基础 上机操作上机操作 ：用Dreamweaver CS3 新建一个网页文档 通过本章学习我们初步了解了Dreamweaver CS3功能，基本操作。下面我们将在新建的站点中通过模板新