第1章AdobeDreamweaverCS3概述.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Adobe Dreamweaver CS3,第一章,Adobe Dreamweaver CS3,概述,Adobe Dreamweaver CS3,1.1 Dreamweaver,简介,1.2,安装与卸载,Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,1.4,文档窗口,1.5 Dreamweaver CS3,操作基础,1.1 Dreamweaver,简介,Dreamweaver,是由美国著名的软件开发商,Macromedia,公司（现被,Adobe,收购）推出的一个所见即所得”的可视化网站开发工具。现最新版本为,Dreamweaver CS4,。,其与,FLASH,、,FIREWORKS,三者被称为网页制作三剑客。,Fireworks,以处理网页图片为特长。,flash,以制作网上动画为特长。,1.2,安装与卸载,Dreamweaver CS3,1.2.1 Dreamweaver CS3,的安装流程,步骤,1,：将安装光盘,放,入到光盘驱动器中等待系统自动运行，即可打开,Adobe Dreamweaver CS3,的安装初始化窗口，如图所示,。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,2,：初始化完毕之后,会,出现,【,安装程序：许可协议,】,窗口，选择,“,简体中文,”,，如图所示。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,3,：,【,下一步,】,，即可打开,【,安装设置,】,，单击,【,浏览,】,，,在打开的,【,浏览,】,对话框中选择详细的安装路径如图所示,。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,4,：,【,下一步,】,，可打开,【,安装摘要,】,，如图所示。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,5,：单击,【,安装,】,，,开始安装,Adobe Dreamweaver CS3,，,如图所示。,完成安装后，将会弹出,【,安装完成,】,窗口，如图,所示。,单击,【,完成并重新启动,】,完成安装。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,1.2.2,卸载,Dreamweaver CS3,步骤,1,：选择,【,开始,】【,设置,】【,控制面板,】【,添加,/,删除程序,】,菜单项，打开,【,添加或删除程序,】,窗口，如图所示。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,3,：找到,“,Adobe Dreamweaver CS3,”,选项并单击其后的,【,更改,/,删除,】,，打开,【,管理,Adobe Dreamweaver CS3,组件,】,窗口，如图所示。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,4,：单击,【,下一步,】,，打开,【,删除已安装的组件,】,窗口，选择要删除的组件，如图所示。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,5,：单击,【,下一步,】,，打开,【,Adobe Dreamweaver CS3,安装程序：进度,】,窗口，如图所示。,Adobe Dreamweaver CS3,1.2,安装与卸载,Dreamweaver CS3,步骤,6,：完毕之后，弹出,【,删除组件完成,】,窗口，单击,【,完成并重新启动,】,按钮重新启动系统，完成对卸载，如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,Dreamweaver CS3,启动画面如图所示,：,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,1.3.1,界面布局,Adobe Dreamweaver CS3,的操作界面如图所示,：,Adobe Dreamweaver CS3,插入栏,文档工具栏,文档窗口,面板组,标签选择器,属性检查器,文件面板,1.3,熟悉,Dreamweaver CS3,的工作环境,1,代码与设计视图的拆分,在,“,文档,”,工具栏中，分别单击,【,拆分,】,、,【,代码,】,和,【,设计,】,，选择开发环境，如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,2,不同文档之间的切换,在打开的多个文档进行互相切换时，可以通过单击文档左上角的名称来实现，如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,3,标题栏,标题栏主要用来标示网页的路径和名称,、,最大化、最小化以及关闭按钮，如图所示,。,直接在工具栏的,【,标题,】,文本框中修改文档的标题，如图所示,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,1.3.2,主菜单,【,文件,】,菜单,：,主要用于文件管理。,【,编辑,】,菜单,：,用于对选定区域进行操作。,【,查看,】,菜单,：,用于设置并观察各文档视图信息,。,【,插入记录,】,菜单,：,用于将各种对象插入到文档中,。,【,修改,】,菜单,：,用于对选定文档内容或某项的属性进行更改。,【,文本,】,菜单,主要用于设置文本的格式,。,【,命令,】,菜单,：,提供对各种命令的访问,。,【,站点,】,菜单,：,提供用户管理站点以及上传和下载文件的菜单项,。,【,窗口,】,菜单,：,对所有的面板、检查器和窗口进行访问。,【,帮助,】,菜单,：,提供的,帮助。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,1.3.3,工具栏,工具栏包括,5,个部分：文档工具栏、标准工具栏、插入栏、样式呈现栏以及编码工作区。,1,文档工具栏,使用工具栏中的,【,代码,】,、,【,设计,】,以及,【,拆分,】,可以切换到不同的文档视图。如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,2,标准工具栏,右击文档工具栏，选择,【,标准,】,选项，在文档工具栏中弹出一组工具栏，即标准工具栏，如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,3,插入栏,插入栏中包含了一些用于将各种类型的对象插入到文档中的按钮。如图所示。,4,样式呈现工具栏,样式呈现工具栏中包含媒体的样式表,和,一个启用或禁用层叠式样式表,(CSS),样式的按钮。,5,编码工具栏,编码工具栏仅在,“,代码,”,视图中显示，还包含可用于执行多项标准编码操作的按钮。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,1.3.4,常用面板,各个面板在工作界面内有相对固定的位置，,也,可以用鼠标随意的拖动，需要时调用或隐藏面板。,1,属性面板,属性面板是一个比较常用的面板，用户可根据需要对其随时隐藏或调用,，如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,2,文件面板,使用,“,文件,”,面板,可查看和管理站点中的文件，,如图所示。,Adobe Dreamweaver CS3,1.3,熟悉,Dreamweaver CS3,的工作环境,3,CSS,样式面板,“,CSS,样式,”,面板可影响当前所选页面元素的,CSS,规则和属性，或整个文档的规则和属性,，如图所示。,4,面板组,面板组中选定的面板将显示为一个选项卡。,如图所示。,Adobe Dreamweaver CS3,1.4,文档窗口,1.4.1,标尺、网格和辅助线,1,标尺,标尺可测量、组织和规划布局。显示在页面的左边框和上边框中，如图所示。,Adobe Dreamweaver CS3,垂直标尺,水平标尺,1.4,文档窗口,2,网格,网格在,“,文档,”,窗口中显示一系列的水平线和垂直线，对于精确地放置对象很有用，如图所示 。,Adobe Dreamweaver CS3,1.4,文档窗口,3,辅助线,用户可以通过不同的方法来控制辅助线，从而达到将对象进行方便排列的目的。如图所示。,Adobe Dreamweaver CS3,1.4,文档窗口,1.4.2,状态栏,状态栏位于浏览器的下方，通过浏览器菜单栏上的,【,查看,】【,状态栏,】,选项将其打开或关闭。在,“,文档,”,窗口底部的状态栏中，提供了创建文档有关的其他信息，如图所示。,Adobe Dreamweaver CS3,1.5 Dreamweaver CS3,操作基础,1.5.1,自定义工作区,选择,【,窗口,】【,工作区布局,】,菜单项，即可打开,【,工作区布局,】,对话框，在其中选择不同的工作区布局。,设计器,编码器,双重屏幕,Adobe Dreamweaver CS3,1.5 Dreamweaver CS3,操作基础,1.5.2 Dreamweaver CS3,参数设置,选择,【,编辑,】【,首选参数,】,菜单项或按,“,Ctrl+U,”,组合键，即可打开,【,首选参数,】,对话框，如图所示。,Adobe Dreamweaver CS3,1.5 Dreamweaver CS3,操作基础,1.5.3,获得帮助,选择,【,帮助,】【,Dreamweaver,帮助,】,菜单项，即可打开其,【,帮助,】,面板，如图,1,所示。,Adobe Dreamweaver CS3,