Dreamweaver基础学习教程.pptx

第第2 2章章 DreamweaverDreamweaver基础基础DreamweaverDreamweaver简介简介DreamweaverDreamweaver工作界面工作界面使用使用DreamweaverDreamweaver建立和管理站点建立和管理站点(重点重点)第1页/共35页DreamweaverDreamweaver是是MacromediaMacromedia公司出品的一款集网页制作和网站管理于一体的公司出品的一款集网页制作和网站管理于一体的“所所见即所得见即所得”的网页制作软件。的网页制作软件。2.1 Dreamweaver2.1 Dreamweaver简介简介第2页/共35页DreamweaverDreamweaver的的主要特点及功能：主要特点及功能：1.1.将将“设计设计”和和“代码代码”编辑器合二为一；编辑器合二为一；2.2.使用内置的图形编辑程序节省开发时间；使用内置的图形编辑程序节省开发时间；3.3.提供操作方便、功能强大的用户界面；提供操作方便、功能强大的用户界面；4.4.提供完美的提供完美的CSSCSS支持；支持；5.5.提供完整的集成开发环境；提供完整的集成开发环境；6.6.可与一些常见格式的外部文档可与一些常见格式的外部文档/代码实现无缝代码实现无缝结合；结合；7.7.提供了较多的行为；提供了较多的行为；8.8.通过布局视图技术将表格和层这两种排版工具通过布局视图技术将表格和层这两种排版工具结合起来；结合起来；9.9.强大的网站管理功能；强大的网站管理功能；10.10.提供了跨浏览器兼容性检查功能。提供了跨浏览器兼容性检查功能。第3页/共35页2.2 Dreamweaver 82.2 Dreamweaver 8的工作界面的工作界面 工作区布局的分类工作区布局的分类起始页起始页工作区布局工作区布局第4页/共35页1 1、起始页起始页 如果选中如果选中“不再不再显示此对话框显示此对话框”选项，则以后启选项，则以后启动动DreamweaverDreamweaver时将不再自动显时将不再自动显示起始页。示起始页。第5页/共35页2 2、工作区布局工作区布局 当新建或打开一个当新建或打开一个WebWeb页后，页后，DreamweaverDreamweaver会显示一个会显示一个工作区窗口工作区窗口。窗口由主菜单、工。窗口由主菜单、工具栏、文档窗口、面板组、属性面板等组成。具栏、文档窗口、面板组、属性面板等组成。第6页/共35页工作区窗口工作区窗口第7页/共35页1.主菜单文件：用于管理文件编辑：用于编辑操作查看：用于查看对象插入：用于插入页面元素修改：用于对页面元素的修改文本：用于对文本的操作命令：汇集了所有的附加命令项站点：用于创建和管理站点窗口：用于打开/关闭面板和窗口帮助：包含Dreamweaver的联机帮助、技术支持等。第8页/共35页2.插入工具栏插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入工具栏其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。第9页/共35页3.文档窗口当打开或创建一个项目，进入文档窗口，我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。文档窗口显示当前编辑的Web页文档。Dreamweaver提供了文档窗口的三种视图：“设计”视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，类似于在浏览器中查看页面时看到的内容。“代码”视图：是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“拆分”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。第10页/共35页（1）文档工具栏“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。第11页/共35页（2）文档编辑区文档编辑区即用户用来编辑和修改文档的区域。在“代码”视图中，可以输入Web页对应的HTML代码或脚本代码；在“设计”视图中，可以通过拖动等操作，实现网页元素的可视化添加和修改。第12页/共35页（3）状态栏状态栏在“文档”窗口底部，提供当前文档的有关信息。其包含的按钮如下：第13页/共35页4.属性面板又称属性检查器，一般出现在文档窗口的下方。属性面板用于显示所选中网页元素的属性，用户可以利用它查看和编辑属性值。第14页/共35页5.面板组在Dreamweaver窗口的右侧是面板组，通常包含“CSS”、“应用程序”、“标签检查器”、“文件”等面板。在主菜单的“窗口”子菜单中包含了所有的面板名，通过勾选或取消勾选某个面板名，可以显示或移去该面板。第15页/共35页6.其他工具栏选择“查看”“工具栏”命令，在“工具栏”子菜单中勾选或取消某个工具栏，可以在视图中显示或隐藏相应的工具栏。第16页/共35页2.3 2.3 使用使用DreamweaverDreamweaver建立和管理站建立和管理站点点 当当使用使用DreamweaverDreamweaver制作一个网站时，制作一个网站时，首先应该建立站点，以方便对首先应该建立站点，以方便对整个网站的整个网站的结构结构进行规划，并利用进行规划，并利用DreamweaverDreamweaver的站点的站点管理功能对整个网站资源进行管理。管理功能对整个网站资源进行管理。DreamweaverDreamweaver还有许多功能还有许多功能必须在建立必须在建立站点后才能实现。站点后才能实现。第17页/共35页要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点。位于互联网web服务器里的网站被称为远程站点。Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。第18页/共35页规划网站的整体结构规划网站的整体结构(注意事项注意事项)1 1、文件及文件夹的命名要规范文件及文件夹的命名要规范2 2、不要将所有文件存放在站点根目录下不要将所有文件存放在站点根目录下3 3、建立子文件夹对文件进行分类存放建立子文件夹对文件进行分类存放第19页/共35页2.3 2.3 使用使用DreamweaverDreamweaver建立和管理站建立和管理站点点 1)1)站点概述站点概述 站点站点实质上就是一个文件夹。设计实质上就是一个文件夹。设计良好的网站通常是在站点文件夹下建立不良好的网站通常是在站点文件夹下建立不同的子文件夹，将网页文档及其它资源分同的子文件夹，将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管门别类地保存在相应的文件夹中以方便管理和维护。理和维护。第20页/共35页2.3 2.3 使用使用DreamweaverDreamweaver建立和管理站建立和管理站点点 站点包括站点包括远端站点远端站点和和本地站点本地站点两类。两类。通常将存储在通常将存储在WebWeb服务器上的站点称为服务器上的站点称为远端站点远端站点。在本地计算机上建立的站点就是在本地计算机上建立的站点就是本地站点本地站点。第21页/共35页2.3 2.3 使用使用DreamweaverDreamweaver建立和管理站建立和管理站点点 2)2)站点的建立和管理站点的建立和管理(1)(1)本地站点的本地站点的建立建立 为站点命名为站点命名 选择站点类型选择站点类型 设置本地站点文件夹设置本地站点文件夹 选择连接远程服务器的方式选择连接远程服务器的方式 完成站点的创建完成站点的创建第22页/共35页 为站点命名为站点命名如果新建站如果新建站点时不知道点时不知道该该URL,URL,可以可以暂时不填暂时不填第23页/共35页 选择站点类型选择站点类型创建静态网站创建静态网站创建动态网站创建动态网站第24页/共35页 设置本地站点文件夹设置本地站点文件夹输入存放站点的文件夹路径第25页/共35页 选择连接远程服务器的方式选择连接远程服务器的方式初次建立站点初次建立站点时，可先选择时，可先选择“无无”，表示，表示不不与远程服务器与远程服务器建立连接。建立连接。第26页/共35页 完成站点的创建完成站点的创建第27页/共35页2.3 2.3 使用使用DreamweaverDreamweaver建立和管理站建立和管理站点点 (2)(2)站点管理(【站点】|【管理站点】)第28页/共35页2.3 2.3 使用使用DreamweaverDreamweaver建立和管理站建立和管理站点点 3)3)站点文件管理站点文件管理 建立站点以后，可以通过文件面板对站点中的资源进行管理。文件面板有建立站点以后，可以通过文件面板对站点中的资源进行管理。文件面板有“文件文件”、“资源资源”、“代码片断代码片断”三个选项卡。三个选项卡。第29页/共35页3)3)站点文件管理站点文件管理(1)(1)“文件文件”选项卡选项卡 主要用来对站点的文件进行管理，可以完主要用来对站点的文件进行管理，可以完成对文件和文件夹的新建、打开、复制、粘成对文件和文件夹的新建、打开、复制、粘贴、重命名等操作。贴、重命名等操作。单击鼠标左键选中需要单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，管理的文件或文件夹，然后单击鼠标右键，再弹出菜单中选再弹出菜单中选“编辑编辑”项，即可进行相关项，即可进行相关操作。操作。第30页/共35页(1)(1)“文件文件”选项卡选项卡第31页/共35页3)3)站点文件管理站点文件管理(2)(2)“代码片段代码片段”选项卡选项卡 DreamweaverDreamweaver预定义了一些能实现特定预定义了一些能实现特定功能的代码片段，在制作网页时，可以利功能的代码片段，在制作网页时，可以利用文件面板的用文件面板的“代码片断代码片断”选项卡，直接将选项卡，直接将代码片断插入到网页中。在代码片断插入到网页中。在DreamweaveDreamweave中中可以创建并插入可以创建并插入HTMLHTML、JavaScriptJavaScript、CFMLCFML、ASPASP、JSPJSP等代码片断。等代码片断。第32页/共35页(2)(2)“代码片段代码片段”选项卡选项卡第33页/共35页作业上机题1，2第34页/共35页谢谢您的观看！第35页/共35页