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