Dreamweaver基础PPT学习教案.pptx

Dreamweaver基础PPT学习教案.pptx

《Dreamweaver基础PPT学习教案.pptx》由会员分享，可在线阅读，更多相关《Dreamweaver基础PPT学习教案.pptx（35页珍藏版）》请在冰豆网上搜索。

会计学,1,Dreamweaver基础,第2章Dreamweaver基础,Dreamweaver简介Dreamweaver工作界面使用Dreamweaver建立和管理站点（重点）,第1页/共35页,Dreamweaver是Macromedia公司出品的一款集网页制作和网站管理于一体的“所见即所得”的网页制作软件。

2.1Dreamweaver简介,第2页/共35页,Dreamweaver的主要特点及功能：

1.将“设计”和“代码”编辑器合二为一；2.使用内置的图形编辑程序节省开发时间；3.提供操作方便、功能强大的用户界面；4.提供完美的CSS支持；5.提供完整的集成开发环境；6.可与一些常见格式的外部文档/代码实现无缝结合；7.提供了较多的行为；8.通过布局视图技术将表格和层这两种排版工具结合起来；9.强大的网站管理功能；10.提供了跨浏览器兼容性检查功能。

第3页/共35页,2.2Dreamweaver8的工作界面,工作区布局的分类起始页工作区布局,第4页/共35页,1、起始页,如果选中“不再显示此对话框”选项，则以后启动Dreamweaver时将不再自动显示起始页。

第5页/共35页,2、工作区布局,当新建或打开一个Web页后，Dreamweaver会显示一个工作区窗口。

窗口由主菜单、工具栏、文档窗口、面板组、属性面板等组成。

第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使用Dreamweaver建立和管理站点,当使用Dreamweaver制作一个网站时，首先应该建立站点，以方便对整个网站的结构进行规划，并利用Dreamweaver的站点管理功能对整个网站资源进行管理。

Dreamweaver还有许多功能必须在建立站点后才能实现。

第17页/共35页,要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。

放置在本地磁盘上的网站被称为本地站点。

位于互联网web服务器里的网站被称为远程站点。

Dreamweaver8提供了对本地站点和远程站点强大的管理功能。

第18页/共35页,规划网站的整体结构（注意事项）,1、文件及文件夹的命名要规范2、不要将所有文件存放在站点根目录下3、建立子文件夹对文件进行分类存放,第19页/共35页,2.3使用Dreamweaver建立和管理站点,1）站点概述站点实质上就是一个文件夹。

设计良好的网站通常是在站点文件夹下建立不同的子文件夹，将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。

第20页/共35页,2.3使用Dreamweaver建立和管理站点,站点包括远端站点和本地站点两类。

通常将存储在Web服务器上的站点称为远端站点。

在本地计算机上建立的站点就是本地站点。

第21页/共35页,2.3使用Dreamweaver建立和管理站点,2）站点的建立和管理

（1）本地站点的建立为站点命名选择站点类型设置本地站点文件夹选择连接远程服务器的方式完成站点的创建,第22页/共35页,为站点命名,第23页/共35页,选择站点类型,第24页/共35页,设置本地站点文件夹,第25页/共35页,选择连接远程服务器的方式,初次建立站点时，可先选择“无”，表示不与远程服务器建立连接。

第26页/共35页,完成站点的创建,第27页/共35页,2.3使用Dreamweaver建立和管理站点,

（2）站点管理（【站点】|【管理站点】）,第28页/共35页,2.3使用Dreamweaver建立和管理站点,3）站点文件管理建立站点以后，可以通过文件面板对站点中的资源进行管理。

文件面板有“文件”、“资源”、“代码片断”三个选项卡。

第29页/共35页,3）站点文件管理,

（1）“文件”选项卡主要用来对站点的文件进行管理，可以完成对文件和文件夹的新建、打开、复制、粘贴、重命名等操作。

单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，再弹出菜单中选“编辑”项，即可进行相关操作。

第30页/共35页,

（1）“文件”选项卡,第31页/共35页,3）站点文件管理,

（2）“代码片段”选项卡Dreamweaver预定义了一些能实现特定功能的代码片段，在制作网页时，可以利用文件面板的“代码片断”选项卡，直接将代码片断插入到网页中。

在Dreamweave中可以创建并插入HTML、JavaScript、CFML、ASP、JSP等代码片断。

第32页/共35页,

（2）“代码片段”选项卡,第33页/共35页,作业,上机题1，2,第34页/共35页,