第1章 dreamweaer的基本操作第1章 dreamweaver的基本操作第1章 dreamweaver的基本操作第1章 dreamweaver的基本操作.ppt

机械工业出版社同名教材 配套电子教案 一 Dreamweaver概述 二 Dreamweaver的工作环境 三 Dreamweaver创建网页的工作流程 四 站点管理 五 实训 第1章 Dreamweaver的基本操作 Dreamweaver是Adobe公司开发的著名网站开发工具，利用Dreamweaver的可视化编辑功能，用户可以轻松地完成设计、开发和维护网站的全过程。Dreamweaver不仅提供了直观的可视布局界面，而且具备强大的编码工具。用户可以使用服务器语言（例如，ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序，使用Ajax的Spry框架进行动态用户界面的可视化设计、开发和部署。 使用Dreamweaver的网站地图，用户可以快速地制作网站雏形。在设计过程中，用户如果改变了网页的位置，Dreamweaver会自动更新所有链接。Dreamweaver提供一组预先设计的CSS布局，可以帮助用户快速地设计出美观的页面。Dreamweaver成功地整合了所见即所得的编辑方式和动态网站开发功能。 1.1 Dreamweaver概述 1.2.1 Dreamweaver的启动 安装好Dreamweaver后，选择“开始”→“程序”→“Adobe Dreamweaver CS3”命令。Dreamweaver经过一系列初始化过程后，首先显示“工作区设置”对话框，如图1-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。 接下来显示起始页对话框，如图1-2所示，在其中可以在“打开最近的项目”、“新建”或“从模板创建”栏中进行选择。 1.2 Dreamweaver的工作环境 1.2.2 Dreamweaver的主工作区 Dreamweaver的主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成，如图1-3所示。 1.2 Dreamweaver的工作环境 Dreamweaver为处理各种Web设计和开发文档提供了灵活的环境。除了HTML文档以外，用户还可以创建和打开各种基于文本的文档，如ASP、JavaScript和CSS。Dreamweaver还支持源代码文件，如PHP、C#和Java。 Dreamweaver为创建新文档提供了若干选项，用户可以创建以下任意文档： ? 新的空白文档或模板； ? 基于Dreamweaver附带的预设计页面布局文档； ? 基于现有模板的文档。 1.3 Dreamweaver创建网页的工作流程 1．创建新文档 用户可以用下列方法创建新文档。 创建新的空白文档 创建新的空白文档，操作步骤如下。 ① 选择“文件”→“新建”，即出现“新建文档”对话框，默认选中“空白页”选项。 ② 从“页面类型”列表框中选择类型，对于基本页，可选择“HTML”；如果有页面布局的需要，可以从右侧的“布局”列表框中选择需要的布局。 ③ 单击“创建”按钮，在文档窗口中创建新文档。 1.3 Dreamweaver创建网页的工作流程 2．保存新文档 要保存新文档，操作步骤如下。 ① 选择“文件”→“保存”。 ② 在出现的对话框中，定位到要用来保存文件的文件夹。 ③ 在“文件名称”文本框中，输入文件名。不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。例如，为新建的网页命名为“example.html”。 ④ 单击“保存”按钮。 1.3 Dreamweaver创建网页的工作流程 1.4.1 Dreamweaver的网站定义 严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。 利用Dreamweaver可以对位于Internet服务器上的站点文档直接进行编辑和管理，但有时非常不便，且影响的因素很多，例如，网络速度和网络的不稳定性等都会对管理和编辑操作带来影响。另一个更重要的原因是，如果直接对位于Internet服务器中的文档和站点进行操作，则必须始终保持同Internet的连接，这意味着会花费不必要的上网费用。 1.4 站点管理 1.4.2 建立本地站点 【案例1-1】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。 【案例展示】站点的设置如图1-17所示，站点结构如图1-18所示。 1.4 站点管理 1.4.3 管理本地