HTML语言控制PPT演示文稿

1、1第第3章章 html语言控制语言控制 2本章本章教学目标：教学目标： html是创建网页时使用的语言，是网页是创建网页时使用的语言，是网页设计的基础，虽然使用设计的基础，虽然使用dreamweaver可以不写可以不写一句代码就能设计出漂亮的网页，但理解和掌一句代码就能设计出漂亮的网页，但理解和掌握握html对网页设计大有裨益。本章主要介绍对网页设计大有裨益。本章主要介绍html的相关知识，包括什么是的相关知识，包括什么是html及其基及其基本语法、如何定制及清理多余的本语法、如何定制及清理多余的html代码，代码，以及在各种环境中编辑以及在各种环境中编辑html代码的方法。代码的方法。 3教

2、学重点与难点：教学重点与难点： 1. 1. htmlhtml的基本语法的基本语法 2. 2. 使用代码检查器使用代码检查器 3. 3. 设置设置htmlhtml代码参数代码参数 4. 4. 清理多余的清理多余的htmlhtml代码代码 5. 5. 编辑编辑htmlhtml代码代码 43.1 什么是什么是html htmlhtml是创建网页时使用的语言。是创建网页时使用的语言。 htmlhtml并不是一种程序设计语言，而是一种页面描述性语并不是一种程序设计语言，而是一种页面描述性语言。它通过各种标签描述不同的内容，说明段落、标题、言。它通过各种标签描述不同的内容，说明段落、标题、图像及字体等在浏

3、览器中的显示效果。图像及字体等在浏览器中的显示效果。 当用户使用网页浏览器当用户使用网页浏览器( (例如例如ie)ie)阅读阅读htmlhtml文件时，浏文件时，浏览器将插入到览器将插入到htmlhtml文本中的各种标签解释为需要显示的文本中的各种标签解释为需要显示的内容。内容。 dreamweaverdreamweaver通过通过“代码检查器代码检查器”面板、面板、“代码代码”视图视图与快速标签编辑器等为与快速标签编辑器等为htmlhtml提供了通道，为喜欢手写提供了通道，为喜欢手写htmlhtml语言编辑网页的用户创造了全方位的代码编辑环境。语言编辑网页的用户创造了全方位的代码编辑环境。

4、返回返回53.2 html3.2 html的基本语法的基本语法 html html语言由标签和文本组成，其实质是一语言由标签和文本组成，其实质是一个基于文本的编码标准，用于指示网页浏览个基于文本的编码标准，用于指示网页浏览器以什么方式显示信息。下面简单介绍器以什么方式显示信息。下面简单介绍htmlhtml的基本语法的基本语法: : 1. html 1. html标签标签 2. head2. head标签标签 3. title3. title标签标签 4. body4. body标签标签 6meta标签meta标签，是html语言head区的一个辅助性标签。在几乎所有的page里，我们都可以看到

5、类似下面这段html代码： head meta http-equiv=content-type content=texthtml; charset=gb2312 head 这就是meta标签的典型应用，标识page所采用的编码类型,指定了当前文档所使用的字符编码为gb2312，也就是中文简体字符。根据html语言标准注释：meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。7 例例3.13.1效果图效果图8 源代码：源代码：心情快递心情快递 祝天下所有人中秋节快乐祝天下所有人中秋节快乐!心怡心怡人有悲欢离人有悲欢离合合月有阴晴圆缺月

6、有阴晴圆缺此事古难全此事古难全但愿人常久但愿人常久千里共婵娟千里共婵娟预祝朋友们中秋节快乐！预祝朋友们中秋节快乐！不论你家在何方不论你家在何方,身在何处身在何处,只要你健康快乐只要你健康快乐,就是家人的幸福和希望。就是家人的幸福和希望。愿网络连结起我们心灵的桥梁愿网络连结起我们心灵的桥梁! 返回返回93.3 3.3 使用代码检查器使用代码检查器 “代码检查器代码检查器”面板可以显示当前文档的源代码，面板可以显示当前文档的源代码，并且将按照并且将按照html颜色参数中的设置显示各颜色参数中的设置显示各种标记的颜色。修改的页面内容将立即显示种标记的颜色。修改的页面内容将立即显示在在“代码检查器代码

7、检查器”面板中。对于不太了解面板中。对于不太了解html语法的用户来说，语法的用户来说，“代码检查器代码检查器”面面板是一个非常实用的板是一个非常实用的html工具。工具。103.3.1 认识认识“代码检查器代码检查器”面板面板（窗口（窗口| |代码检查器）代码检查器） 文件管理在浏览器中预览/调试刷新设计视图参考：参考面板，学习语言代码导航：为html设置或清除断点，定义作用选项菜单：选择代码显示形式113.3.2 “代码检查器代码检查器”面板的功面板的功能能 “代码检查器代码检查器”面板的主要功能如下：面板的主要功能如下： 1. 默认情况下，重新编写某些重叠的标签，关闭不允许保持打默认情况

8、下，重新编写某些重叠的标签，关闭不允许保持打开状态的标签。开状态的标签。 2. 使用黄色标识出无效的使用黄色标识出无效的html代码代码(即不支持的即不支持的html)。 3. 对无法识别的标记不做任何修改对无法识别的标记不做任何修改(包括包括xml标记标记)，因为没有，因为没有 任何标准可以判断标记是否有效。任何标准可以判断标记是否有效。 4. 不改变不改变coldfusion语言语言(简称简称cfml)或或microsoft active server pages (microsoft活动服务器页，简称活动服务器页，简称asp)标记，在文档标记，在文档窗口中会显示图标以标识窗口中会显示图标

9、以标识cfml与与asp的代码块。的代码块。 5. 允许允许html代码编辑器编辑当前文本，它综合了代码编辑器编辑当前文本，它综合了homesite、coldfusion(针对针对windows)与与bbedit(针对针对macintosh)等等3种编辑器种编辑器的功能和特性。的功能和特性。 123.3.3 设置设置“代码检查器代码检查器”面面板板 代码显示器代码显示器| |选项菜单选项菜单 1. 1. 设置行号、自动断行与自动缩进设置行号、自动断行与自动缩进 2. 设置设置html代码的字体颜色代码的字体颜色 3. 设置标记错误代码设置标记错误代码 返回返回133.4 3.4 设置设置htm

10、lhtml代码参数代码参数 在在dreamweaver中可以设置代码颜色、代码中可以设置代码颜色、代码格式及代码改写等参数。代码颜色参数可以控格式及代码改写等参数。代码颜色参数可以控制制html代码在代码视图模式及代码检查器中代码在代码视图模式及代码检查器中的颜色；代码格式参数决定一般代码的格式选的颜色；代码格式参数决定一般代码的格式选项，例如行长与缩进，此参数可以阻止用户改项，例如行长与缩进，此参数可以阻止用户改变变sourceformat.txt文件。打开文件。打开html文档时，文档时，dreamweaver的代码改写功能可以重新编写原的代码改写功能可以重新编写原有的有的html代码。代

11、码。 143.4 3.4 设置设置htmlhtml代码参数代码参数（编辑（编辑|首选参数）首选参数） 3.4.1 设置代码颜色设置代码颜色 通过设置代码颜色参数可以控制背通过设置代码颜色参数可以控制背 景色、景色、文本、标记和保留关键字等项目的颜色。文本、标记和保留关键字等项目的颜色。 3.4.2 设置代码格式设置代码格式 使用使用“代码格式代码格式”参数，可以控制参数，可以控制html代代码的格式码的格式。 3.4.3 设置代码改写参数设置代码改写参数 返回返回153.5 3.5 清理清理htmlhtml代码代码（命令（命令| |清除清除htmlhtml） “ “清理清理html/xhtml

12、”对话框对话框 163.5.2 清除多余的清除多余的word代码代码 “ “清理清理word生成的生成的html”对话框对话框（命令命令|清除清除word生成的生成的html） 返回返回173.6 3.6 编辑编辑htmlhtml代码代码 在在dreamweaverdreamweaver中虽然可以不用手工输入中虽然可以不用手工输入一句一句htmlhtml代码就能制作出漂亮的网页，但代码就能制作出漂亮的网页，但htmlhtml毕竟是网页制作的基础，熟练运用毕竟是网页制作的基础，熟练运用htmlhtml更有助更有助于用户发挥个人的潜能及创意。于用户发挥个人的潜能及创意。dreamweaverdre

13、amweaver不仅为用户创造了直观且方便的设计环境，而不仅为用户创造了直观且方便的设计环境，而且提供了强大且开放的代码编辑环境。本节主且提供了强大且开放的代码编辑环境。本节主要介绍在要介绍在dreamweaverdreamweaver中编辑中编辑htmlhtml代码的各种代码的各种方法。方法。 183.6.1 3.6.1 在代码视图中编辑在代码视图中编辑html html dreamweaver提供了代码、设计和拆分提供了代码、设计和拆分3种视图模式，种视图模式，通过单击通过单击“文档文档”工具栏中的相应按钮即可在不同视图模工具栏中的相应按钮即可在不同视图模式之间切换。式之间切换。 代码视图

14、是一个用于编写和编辑代码视图是一个用于编写和编辑html、javascript、服务器语言代码服务器语言代码(例如例如asp或或coldfusion标记语言标记语言)及任何及任何其他类型代码的手工编码环境。其他类型代码的手工编码环境。 设计视图是一个用于可视化页面布局、可视化编辑和设计视图是一个用于可视化页面布局、可视化编辑和快 速 应 用 程 序 开 发 的 设 计 环 境 。 在 该 视 图 中 ，快 速 应 用 程 序 开 发 的 设 计 环 境 。 在 该 视 图 中 ，dreamweaver显示文档的完全可编辑的可视化表示形式，显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查

15、看页面时看到的内容。类似于在浏览器中查看页面时看到的内容。 拆分视图使用户可以在单个窗口中同时看到同一文档拆分视图使用户可以在单个窗口中同时看到同一文档的代码视图和设计视图的代码视图和设计视图 193.6.2 3.6.2 在设计视图中编辑在设计视图中编辑html html 在设计视图中使用快速标记编辑器，在设计视图中使用快速标记编辑器，可以快速检查和编辑单一的可以快速检查和编辑单一的html源代源代码码。（。（修改修改| |快速标签编辑器）快速标签编辑器） 1. 快速标签编辑器的快速标签编辑器的3种形式种形式 (1) “(1) “插入插入html”html”快速标签编辑器快速标签编辑器 (2)

16、 “(2) “编辑标签编辑标签”快速标签编辑器快速标签编辑器 (3) “(3) “环绕标签环绕标签”快速标签编辑器快速标签编辑器 2. 在快速标签编辑器中编辑属性值在快速标签编辑器中编辑属性值 3. 设置快速标签编辑器的参数设置快速标签编辑器的参数203.6.3 3.6.3 在外部代码编辑器中编辑在外部代码编辑器中编辑html html 编辑编辑|首选参数首选参数|文件类型文件类型/编辑器编辑器 目前，在使用目前，在使用dreamweaver设计网页的过程设计网页的过程中，也可能会遇到使用代码编辑器来处理和编中，也可能会遇到使用代码编辑器来处理和编写大量写大量html、javascript与与vbscript的情况。的情况。 在运行在运行dreamweaver的过程中，可以启动外的过程中，可以启动外部代码编辑器编辑当前文档的部代码编辑器编辑当前文档的html代码。代码。dreamweaver可以检测到外部编辑器所作的并可以检测到外部编辑器所作的并已保存的文档，并将其重新载入。已保存的文档，并将其重新载入。返回返回213.7 本章小结本章小结 本章主要介绍本章主要介绍html的相关知识，包括什的相关知识，包括什么是么是html及其基本语法、使用代码检查器编及其基本语法、使用代码检查器编辑辑html代码、设置代码、设置html代码参数、清理多代码参数、