《DW基础知识》PPT课件.ppt

《《DW基础知识》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《DW基础知识》PPT课件.ppt（49页珍藏版）》请在三一办公上搜索。

1、内容要点： 1. Dreamweaver 的安装、启动与工作环境介绍2. HTML基础（难点）3创建站点并组织站点的结构（重点）4在站点中创建网页（重点）,第 2章 Dreamweaver基础知识,1.Dreamweaver 的安装、启动与工作环境简介（1）演示软件安装和启动的过程 Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具;主要用于对Web站点、Web页和Web应用程序进行设计、维护、编码和开发。它以简洁的界面，强大的功能，成为众多专业网站和个人主页建站的首选软件。,（2）界面结构和工作环境,工作区设置对话框,首次启动

2、Dreamweaver 时，会出现一个工作区设置对话框，我们可以从中选择一种工作区布局。如果不熟悉编写代码，可以选择“设计者”。如果以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。,首选参数对话框,（3）dw的窗口组成（参看教材p5-p9）,插入栏：又叫插入对象面板；状态栏：提供了标签选择器（也叫做标记符选择器）、窗口尺寸、文件大小等网页信息,（4）dw菜单简介标题栏工具栏（在文档编辑窗口上部）代码视图与设计视图的切换及其他常用按钮。插入对象面板 (和以前的工具栏类似；通过操作窗口/插入或CTRL+F2 来打开该插入栏，包括常用、布局、表单、文本等) 面板组菜单“文

3、件”菜单包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。,“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。“帮助”菜单提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建其扩展功能的帮助系统，还包括各种语言的参考材料。“查看”菜单：使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。 “窗口”菜单：提供对 DW中的所有面板、检

4、查器和窗口的访问。,“修改”菜单 ：使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。“命令”菜单：提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。“站点”菜单：提供用于管理站点以及上传和下载文件的菜单项。“文本”菜单 ：使您可以轻松地设置文本的格式。 站点菜单：管理站点和（可不适用FTP软件）上传站点,文档编辑窗口：上面显示设计文档的标题，下面显示标尺和底格功能。属性面板：用于显示或修改选定对象的属性信息。状态栏标签选择器：用于显示或选定网页对象窗口大小弹出菜单：分别显示窗口和显

5、示器的尺寸下载时间显示栏：根据网页内容大致估算的下载时间,2.HTML基础（1） HTML的相关概念：HTML是网页主要的组成部分，基本上一个网页都是由HTML组成的，所以要想精通网页制作的话，必须对HTML语言有所的了解。HTML语言是利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，是一种早期的用于网页制作的主要语言；它也是纯文本类型的语言，可以使用任何的文本编辑器对它进行编辑。使用HTML编写的网页文件是标准的纯文本文件，可以用任何文本编辑器打开它。其后缀名为：.html或.htm。,web浏览器的作用就在于读取web站点上的html文档，并根据此类文档中的描述组织和显示相

6、应的网页信息。 HTML编辑器：也称网页编辑器，一般是指用于开发网页的工具软件，目前比较流行的HTML编辑器是Macromedia Dreamweaver和Microsoft FrontPage。,（2）HTML文档的基本结构开始和结束标记。在它们中间，包含你的网页里的所有内容头部：头部的内容 head是除文档标题外的不可见部分，文档标题出现在浏览器的窗口标题栏中，另外，还可以包含其他重要信息，如文档类型、语言编码、脚本程序、搜索引擎的关键字和内容指示器以及样式定义。若不需头部信息则可省略此标记。标题:标题：呈现出网页的标题，文档标题出现在浏览器的窗口标题栏中，包含在 标签内部。,主体:页面内

7、容主体部分包含文本和图像等所有可见部分。（3）HTML的基本结构： 标题正文,（4）网页中的其他常用标记:分段标记:换行标记 :是空格标记 空的标签区块字体标签表格标签文字标签可以使用这些标记在记事本中完成网页的设计。,HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表,(5)Html的重要标签和属性 头部标签,meta元素描述HTML文档的元信息，即关于文档自身的信息。定义搜索关键字、字符编码、作者、版权信息以及文档描述.这些标签可以向服务器

8、提供信息，如页面的失效日期、刷新间隔和PICC等级。 PICC是internet内容选择平台，它提供了向网页分配等级的方法。格式例：定义语言格式例：,script元素语法格式： 属性：languagestyle元素语法格式： 样式语句 ,BODY部分包含的主要元素 属性 描 述text 设置页面文字的颜色Bgcolor 设置页面的背景颜色Background 设置页面的背景图像Link 设置页面默认的连接颜色alink 设置鼠标单击时的连接颜色Vlink 设置访问后的连接颜色Script 设置网页中的程序脚本内容,主体标签,图片标签,文字标签,字体标签,表格标签,常见的列表标签,在编写代码时的

9、注意事项：在书写标签属性值的时候尽量将属性值用引号（英文标点符号）括起来。在书写html语言的时候不区分大小写。代码优化：清理html/xhtml和清理word 生成的html代码。 可以使用代码片段面板插入dw中预定义的代码片段（javascript、内容表、导航、文本、表单元素、页眉和页脚等）。,课堂实例创建和测试第一个html网页,在“记事本”窗口或者Dreamweaver网页中输入以下内容：欢迎光临我的第一个网页这是第一个简单网页!选择【文件】|【保存】命令，在弹出的“另存为”对话框中选择要保存的路径，在【文件名】文本框中输入文件名myweb001.html。,3、创建站点并组织站点的

10、结构（参看教材p14-p16）（1）站点的概念站点：是一组具有相关主题、类似的设计、链接文档和资源。该术语可指网站，也可以指属于网站的文档的本地存储位置。 站点上传到服务器上供浏览者点击查看，一般称之为网站。Dw站点是一种组织所有与网站关联的文档的方法，也可将它看作一个项目；需要为所开发的每个网站设置一个站点。,说明： Dreamweaver可以创建单独的文档，还可以创建完整的Web站点。在使用Dreamweaver制作网页时，首先要定义一个本地站点。 定义本地站点就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。在本地机器上创建并且做好本地网站后，在本地

11、机上对网站进行测试完成后，再通过专用的软件把文件上传到网上的虚拟空间，即Internet服务器。,（2）站点在文件面板中的显示,“文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。,（3）站点的组成 站点由以下个部分组成：本地文件夹，即本地站点，它是工作目录，是dw站点所处理的文件的存储位置，要先建立本地文件夹才可以定义dw站点。可位于本地计算机，也可以位于网络服务器。远端文件夹，即远端站点，是用户存储用于进行测试、协作、生产和部署等的文件的位

12、置，一般位于运行web服务器的计算机上。 本地文件夹和远端文件夹使用户能够在本地磁盘和web服务器之间传输文件。测试服务器文件夹，是dw处理动态网页的文件夹。,（4）本地和远端文件夹的结构 设置站点远端文件夹的访问权限时，必须确定远端文件夹的主机目录，指定的主机目录应该对应于（或者匹配）本地文件夹的根文件夹下面主要介绍本地站点的建立、站点结构的组织，其他到第十一章再讲。（5）创建本地站点的步骤（6个步骤）A、执行“站点/管理站点”命令，也可以使用快捷键F8打开站点面板来建立一个站点，然后单击“管理站点”按钮。执行命令后出现“管理站点”对话框，单击“新建”按钮，在弹出的菜单中选择“站点”。,B、

13、设置站点名称：接着出现了一个建立站点的向导，设置好站点的名字后单击“下一步”按钮。（输入你想要的站点名称，这里输入home，其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！）C、选择使用服务器技术：接着询问是否使用服务器技术，根据实际需要作出选择，然后单击“下一步”按钮。静态网站不需要使用服务器技术，动态网站选择使用。 在制作asp动态网页时，通常选择ASP JavaScript或 ASP VBScript,D、选择站点在本地计算机上的保存位置。这是很关键的一步。尽量选择英文命名的文件夹E、选择服务器连接方式：接下来询问服务器连接方式，目前最常用的是FTP。选择

14、FTP ，这里要求输入FTP服务器的信息和登陆帐号及密码。F、系统总结出所有选项：完成FTP设置后，还会询问是否允许多人同时编辑同一文件。设置好后，系统总结出所有选项复查。复查无误后站点建设完成。,（6）组织站点的文件结构。站点的文件结构主要包括站点的文件类型，如网页（文档）文件、图像文件、多媒体文件（动画、视频）、声音文件、脚本文件等，通常把这些文件放到各自类别的文件夹中。站点的层次结构：层次结构反映了站点的一个链接关系，即网页之间的链接关系。,站点创建成功后接下来要组织站点的结构，即创建一个按字母顺序、包含站点所有文件的分类文件夹，最好用“见名知意的”英文或中文拼音，不要用中文。Dw中文件

15、和文件夹的命名规则：用英文或数字且不能数字开头；不能使用空格、标点符号或特殊字符。 DW8.0建议使用applet、 html、 common、images、 javascript、library、media、software、sound、templates定义文件夹,具体含义在下页applet:存放java小程序 html：存放html文档页面 common：存放css样式表文件images：存放网站的图像文件 javascript：存放java脚本library：存放库项目media：存放多媒体文件software：存放可下载的软件sound：存放声音文件templates：存放模板文件,

16、4在站点中创建网页 组织好站点结构，并把已经准备好的资料放到各自的文件夹中，接下来就可以在站点中创建网页了。网页制作的基本原则：内容第一，网页大小第二，页面美观第三。Dreamweave制作网页的基本流程：新建网页-编辑网页-保存网页-预览网页-继续编辑网页-再次保存并预览网页,（1）网页的几个基本操作 新建： 打开：打开现有html或动态的dw创建的文档打开有word创建的html文档（这种情况下需要清理microsoft word的html 文件p69） 【先执行“文件导入”，切换到代码视图再执行：“命令清理word的html” 】 关闭文档：单击文档编辑窗口的关闭按钮。保存文档：设计的过

17、程需要随时保存所做的修改。设置新文档：编辑首选参数新建文档,（2）用dreamweaver的设计视图制作一个简单页面，详细步骤是：第一步：建立页面。点击“文件-新建-常规”，然后选所需类别及文档类型（类型如图）即可创建一个新文档，则会在代码视图相应地产生包含html的八个基本标签的html代码。 第二步：保存网页（或文档）。点击“文件保存/另存为”命令，给页面起一个名字（“index.htm”）保存即可。最好保存到 dw站点本地根目录文件夹。保存的文件后自动加上扩展名 .htm，表示这个网页文件是属于静态的HTML文件。,第三步：修改页面属性，包括更改文档标题、设置css链接的下划线样式、设置

18、背景图象或颜色、文字的颜色、链接、标题/编码、跟踪图像等。还有标尺，网格，临摹图像辅助元素设计。跟踪图像就是设计网页的草图。 a修改页面属性 b单击文本属性检查器中的“页面属性”按钮第四步：布局网页。用表格、层、布局表格、框架来简单布局网页。第五步：添加内容。可以设置标题、导航、版权等，在网页中插入Flash动画、图片、文字等基本信息。第六步：再次保存网页，并预览网页效果。,网页预览的效果,综合实例：现代教育技术,（3）用dreamweaver的代码视图制作一个简单页面 代码提示工具：使用户在代码视图中迅速插入标记名称、属性和值，输入部分即可显示可选列表。当将插入点放在紧跟标记名称后面的位置，

19、并按空格键时，会出现一个属性的项目列表，可以上下移动后双击以插入该标记的属性；结束标记也可以通过设置完成。 具体的提示信息可以在“编辑首选参数代码提示”对话框中设置。（参看教材p20-p22）,标记选择器：在状态栏左侧，利用它可以快速准确地选定所需的代码，也可选定相应的设计视图中的元素，使之属性出现在属性面板中，然后可以修改该元素的属性。标签选择器：可以将标签库中的标签插入到页面中。具体操作是：单击要插入代码的位置，右击鼠标，然后在弹出的快捷菜单中选择“插入标签”，即显示“标签选择器”对话框 。（参看教材p20-p22）,编码工具栏：包含多种标准编码操作的按钮，可参看p35-36。快速标签编辑

20、器：可在设计视图直接对html标签进行编写和修改，在设计视图中右击鼠标，选择快速标签编辑器即可打开了。代码片段：在代码片段面板中选择所需的代码片段，双击鼠标即可以快速地将选中的代码片段插入到文档中。这样可以节省部分设计的时间。,（4）页面的总体设置设置文件头信息，具体包括标题、META信息、关键字、说明/描述、刷新、基础网页/首页（申请的域名空间或网址）、链接等；刷新就是在网址发生变化或网页经常更新时，规定在几秒钟内更新当前网页的内容。 操作方法：插入html基础/刷新/说明等。,设置页面属性具体包括外观、链接、标题、标题/编码、跟踪图像等。文档的标题将出现在文档标题栏中，即打开该网页是显示在IE浏览器的标题栏中。 保存时的文件名将出现在站点结构中html文件夹中。,（5）页面的使用的技巧：a在文档窗口中选择元素：单击或拖动元素b显示和隐藏不可见元素：查看可视化助理不可见元素c可更改不可见元素的首选参数：编辑首选参数d放大（选择缩放图标单击或者ctrl+等号），只在设计视图中可用e缩小（选择缩放图标按alt键单击ctrl+减号）文档，只在设计视图中可用。,课堂练习编写HTML代码：在Dreamweaver中利用标签选择器创建HTML文档，网页效果如下图所示。,作业布置：课后作业第一题的3和第二题本章到此结束，谢谢合作！,