第3章HTML语言控制ppt课件

1、第第3章章 HTML言语控制言语控制 本章教学目的：本章教学目的： HTML是创建网页时运用的言语，是网页设计的根底，虽然运用Dreamweaver可以不写一句代码就能设计出美丽的网页，但了解和掌握HTML对网页设计大有裨益。本章主要引见HTML的相关知识，包括什么是HTML及其根本语法、如何定制及清理多余的HTML代码，以及在各种环境中编辑HTML代码的方法。 教学重点与难点：教学重点与难点： 1. HTML的根本语法 2. 运用代码检查器 3. 设置HTML代码参数 4. 清理多余的HTML代码 5. 编辑HTML代码 3.1 什么是什么是HTML HTMLHTML是创建网页时运用的言语。

2、是创建网页时运用的言语。 HTMLHTML并不是一种程序设计言语，而是一种页面描画性言并不是一种程序设计言语，而是一种页面描画性言语。它经过各种标签描画不同的内容，阐明段落、标题、语。它经过各种标签描画不同的内容，阐明段落、标题、图像及字体等在阅读器中的显示效果。图像及字体等在阅读器中的显示效果。 当用户运用网页阅读器当用户运用网页阅读器( (例如例如IE)IE)阅读阅读HTMLHTML文件时，阅文件时，阅读器将插入到读器将插入到HTMLHTML文本中的各种标签解释为需求显示的文本中的各种标签解释为需求显示的内容。内容。 DreamweaverDreamweaver经过经过“代码检查器面板、代

3、码检查器面板、“代码视图与代码视图与快速标签编辑器等为快速标签编辑器等为HTMLHTML提供了通道，为喜欢手写提供了通道，为喜欢手写HTMLHTML言语编辑网页的用户发明了全方位的代码编辑环境。言语编辑网页的用户发明了全方位的代码编辑环境。 前往前往3.2 HTML3.2 HTML的根本语法的根本语法 HTML HTML言语由标签和文本组成，其本质是一言语由标签和文本组成，其本质是一个基于文本的编码规范，用于指示网页阅读个基于文本的编码规范，用于指示网页阅读器以什么方式显示信息。下面简单引见器以什么方式显示信息。下面简单引见HTMLHTML的根本语法的根本语法: : 1. HTML 1. HT

4、ML标签标签 2. head 2. head标签标签 3. title 3. title标签标签 4. body 4. body标签标签 Meta标签META标签，是HTML言语HEAD区的一个辅助性标签。在几乎一切的page里，我们都可以看到类似下面这段html代码： head meta -equiv=Content-Type content=texthtml; charset=gb2312 head 这就是META标签的典型运用，标识page所采用的编码类型,指定了当前文档所运用的字符编码为gb2312，也就是中文简体字符。根据HTML言语规范注释：META标签是对网站开展非常重要的标签，

5、它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。 例例3.13.1效果图效果图 源代码：源代码：心境快递心境快递 祝天下一切人中秋节高兴祝天下一切人中秋节高兴!心怡心怡人有悲欢人有悲欢离合离合月有阴晴圆缺月有阴晴圆缺此事古难全此事古难全但愿人常久但愿人常久千里共婵娟千里共婵娟预祝朋友们中秋节高兴！预祝朋友们中秋节高兴！不论他家在何方不论他家在何方,身在何处身在何处,只需他安康高兴只需他安康高兴,就是家人的幸福和希望。就是家人的幸福和希望。愿网络连结起我们心灵的桥梁愿网络连结起我们心灵的桥梁! 前往前往3.3 3.3 运用代码检查器运用代码检查器 “代码检查器面板可以显

6、示当前文档的源代码，并且将按照HTML颜色参数中的设置显示各种标志的颜色。修正的页面内容将立刻显示在“代码检查器面板中。对于不太了解HTML语法的用户来说，“代码检查器面板是一个非常适用的HTML工具。3.3.1 认识认识“代码检查器面板窗口代码检查器面板窗口|代码代码检查器检查器 文件管理在阅读器中预览/调试刷新设计视图参考：参考面板，学习言语代码导航：为html设置或去除断点，定义作用选项菜单：选择代码显示方式3.3.2 “代码检查器面板的功能代码检查器面板的功能 “代码检查器面板的主要功能如下：代码检查器面板的主要功能如下： 1. 1. 默许情况下，重新编写某些重叠的标签，默许情况下，重

7、新编写某些重叠的标签，封锁不允许坚持翻开形状的标签。封锁不允许坚持翻开形状的标签。 2. 2. 运用黄色标识出无效的运用黄色标识出无效的HTMLHTML代码代码( (即不支持即不支持的的HTML)HTML)。 3. 3. 对无法识别的标志不做任何修正对无法识别的标志不做任何修正( (包括包括XMLXML标志标志) )，由于没有，由于没有 任何规范可以判别标志能否有效。任何规范可以判别标志能否有效。 4. 4. 不改动不改动ColdFusionColdFusion言语言语( (简称简称CFML)CFML)或或Microsoft Active Server Pages (MicrosoftMicr

8、osoft Active Server Pages (Microsoft活动效活动效力器页，简称力器页，简称ASP)ASP)标志，在文档窗口中会显示图标以标志，在文档窗口中会显示图标以标识标识CFMLCFML与与ASPASP的代码块。的代码块。 5. 5. 允许允许HTMLHTML代码编辑器编辑当前文本，它综代码编辑器编辑当前文本，它综合了合了HomeSiteHomeSite、ColdFusion(ColdFusion(针对针对Windows)Windows)与与BBEdit(BBEdit(针对针对Macintosh)Macintosh)等等3 3种编辑器的功能和特性。种编辑器的功能和特性。

9、3.3.3 设置设置“代码检查器面板代码检查器面板 代码显示器代码显示器| |选项菜单选项菜单 1. 1. 设置行号、自动断行与自动缩进设置行号、自动断行与自动缩进 2. 2. 设置设置HTMLHTML代码的字体颜色代码的字体颜色 3. 3. 设置标志错误代码设置标志错误代码 前往前往3.4 3.4 设置设置HTMLHTML代码参数代码参数 在在DreamweaverDreamweaver中可以设置代码颜色、代码中可以设置代码颜色、代码格式及代码改写等参数。代码颜色参数可以控格式及代码改写等参数。代码颜色参数可以控制制HTMLHTML代码在代码视图方式及代码检查器中的代码在代码视图方式及代码检

10、查器中的颜色；代码格式参数决议普通代码的格式选项，颜色；代码格式参数决议普通代码的格式选项，例如行长与缩进，此参数可以阻止用户改动例如行长与缩进，此参数可以阻止用户改动SourceFormat.txtSourceFormat.txt文件。翻开文件。翻开HTMLHTML文档时，文档时，DreamweaverDreamweaver的代码改写功能可以重新编写原的代码改写功能可以重新编写原有的有的HTMLHTML代码。代码。 3.4 3.4 设置设置HTMLHTML代码参数编辑代码参数编辑| |首选首选参数参数 3.4.1 设置代码颜色设置代码颜色 经过设置代码颜色参数可以控制背经过设置代码颜色参数可

11、以控制背 风光、文本、标志和保管关键字等工程风光、文本、标志和保管关键字等工程的颜色。的颜色。 3.4.2 设置代码格式设置代码格式 运用运用“代码格式参数，可以控制代码格式参数，可以控制HTML代码的格式。代码的格式。 3.4.3 设置代码改写参数设置代码改写参数 前往前往3.5 3.5 清理清理HTMLHTML代码命令代码命令| |去除去除HTMLHTML “清理清理HTML/XHTMLHTML/XHTML对话框对话框 3.5.2 去除多余的去除多余的Word代码代码 “清理清理WordWord生成的生成的HTMLHTML对话框命令对话框命令| |去除去除wordword生成的生成的HTM

12、LHTML 前往前往3.6 3.6 编辑编辑HTMLHTML代码代码 在在DreamweaverDreamweaver中虽然可以不用手工输入中虽然可以不用手工输入一句一句HTMLHTML代码就能制造出美丽的网页，但代码就能制造出美丽的网页，但HTMLHTML毕竟是网页制造的根底，熟练运用毕竟是网页制造的根底，熟练运用HTMLHTML更有助更有助于用户发扬个人的潜能及创意。于用户发扬个人的潜能及创意。DreamweaverDreamweaver不仅为用户发明了直观且方便的设计环境，而不仅为用户发明了直观且方便的设计环境，而且提供了强大且开放的代码编辑环境。本节主且提供了强大且开放的代码编辑环境。

13、本节主要引见在要引见在DreamweaverDreamweaver中编辑中编辑HTMLHTML代码的各种代码的各种方法。方法。 3.6.1 3.6.1 在代码视图中编辑在代码视图中编辑HTML HTML Dreamweaver提供了代码、设计和拆分提供了代码、设计和拆分3种视图方式，种视图方式，经过单击经过单击“文档工具栏中的相应按钮即可在不同视图方文档工具栏中的相应按钮即可在不同视图方式之间切换。式之间切换。 代码视图是一个用于编写和编辑代码视图是一个用于编写和编辑HTML、JavaScript、效力器言语代码效力器言语代码(例如例如ASP或或ColdFusion标志言语标志言语)及任何及任

14、何其他类型代码的手工编码环境。其他类型代码的手工编码环境。 设计视图是一个用于可视化页面规划、可视化编辑和设计视图是一个用于可视化页面规划、可视化编辑和快 速 运 用 程 序 开 发 的 设 计 环 境 。 在 该 视 图 中 ，快 速 运 用 程 序 开 发 的 设 计 环 境 。 在 该 视 图 中 ，Dreamweaver显示文档的完全可编辑的可视化表示方式，显示文档的完全可编辑的可视化表示方式，类似于在阅读器中查看页面时看到的内容。类似于在阅读器中查看页面时看到的内容。 拆分视图运用户可以在单个窗口中同时看到同一文档拆分视图运用户可以在单个窗口中同时看到同一文档的代码视图和设计视图的代

15、码视图和设计视图 3.6.2 3.6.2 在设计视图中编辑在设计视图中编辑HTML HTML 在设计视图中运用快速标志编辑器，在设计视图中运用快速标志编辑器，可以快速检查和编辑单一的可以快速检查和编辑单一的HTMLHTML源代码。源代码。修正修正| |快速标签编辑器快速标签编辑器 1. 1. 快速标签编辑器的快速标签编辑器的3 3种方式种方式 (1) (1) “插入插入HTMLHTML快速标签编辑器快速标签编辑器 (2) (2) “编辑标签快速标签编辑器编辑标签快速标签编辑器 (3) (3) “环绕标签快速标签编辑器环绕标签快速标签编辑器 2. 2. 在快速标签编辑器中编辑在快速标签编辑器中编

16、辑属性值属性值 3. 3. 设置快速标签编辑器的参设置快速标签编辑器的参数数3.6.3 3.6.3 在外部代码编辑器中编辑在外部代码编辑器中编辑HTML HTML 编辑编辑|首选参数首选参数|文件类型文件类型/编辑器编辑器 目前，在运用目前，在运用Dreamweaver设计网页的过程设计网页的过程中，也能够会遇到运用代码编辑器来处置和编中，也能够会遇到运用代码编辑器来处置和编写大量写大量HTML、JavaScript与与VBScript的情况。的情况。 在运转在运转Dreamweaver的过程中，可以启动外的过程中，可以启动外部代码编辑器编辑当前文档的部代码编辑器编辑当前文档的HTML代码。代码。Dreamweaver可以检测到外部编辑器所作的并可以检测到外部编辑器所作的并已保管的文档，并将其重新载入。已保管的文档，并将其重新载入。前往前往3.7 本章小结本章小结 本章主要引见本章主要引见HTMLHTML的相关知识，包括什么的相关知识，包括什么是是HTMLHTML及其根本语法、运用代码检查器编辑及其根本语法、运用代码检查器编辑HTMLHTML代码、设置代码、设置HTMLHTML代码参数、清理多余的代码参数、清理多余的HTMLHTML代码，如何在代码视图、设计视图和外部代代