HTML语言控制PPT演示文稿.ppt
1,第3章 HTML语言控制,2,本章教学目标：,HTML是创建网页时使用的语言，是网页设计的基础，虽然使用Dreamweaver可以不写一句代码就能设计出漂亮的网页，但理解和掌握HTML对网页设计大有裨益。本章主要介绍HTML的相关知识，包括什么是HTML及其基本语法、如何定制及清理多余的HTML代码，以及在各种环境中编辑HTML代码的方法。,3,教学重点与难点：,1. HTML的基本语法 2. 使用代码检查器 3. 设置HTML代码参数 4. 清理多余的HTML代码 5. 编辑HTML代码,4,3.1 什么是HTML,HTML是创建网页时使用的语言。 HTML并不是一种程序设计语言，而是一种页面描述性语言。它通过各种标签描述不同的内容，说明段落、标题、图像及字体等在浏览器中的显示效果。 当用户使用网页浏览器(例如IE)阅读HTML文件时，浏览器将插入到HTML文本中的各种标签解释为需要显示的内容。 Dreamweaver通过“代码检查器”面板、“代码”视图与快速标签编辑器等为HTML提供了通道，为喜欢手写HTML语言编辑网页的用户创造了全方位的代码编辑环境。,返回,5,3.2 HTML的基本语法,HTML语言由标签和文本组成，其实质是一个基于文本的编码标准，用于指示网页浏览器以什么方式显示信息。下面简单介绍HTML的基本语法: 1. HTML标签 2. head标签 3. title标签 4. body标签,6,Meta标签,META标签，是HTML语言HEAD区的一个辅助性标签。在几乎所有的page里，我们都可以看到类似下面这段html代码： head meta http-equiv=Content-Type content=texthtml; charset=gb2312 head 这就是META标签的典型应用，标识page所采用的编码类型,指定了当前文档所使用的字符编码为gb2312，也就是中文简体字符。根据HTML语言标准注释：META标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。,7,例3.1效果图,8,源代码： 心情快递 祝天下所有人中秋节快乐! 心怡 人有悲欢离合 月有阴晴圆缺 此事古难全 但愿人常久 千里共婵娟 预祝朋友们中秋节快乐！ 不论你家在何方,身在何处,只要你健康快乐,就是家人的幸福和希望。 愿网络连结起我们心灵的桥梁! ,返回,9,3.3 使用代码检查器,“代码检查器”面板可以显示当前文档的源代码，并且将按照HTML颜色参数中的设置显示各种标记的颜色。修改的页面内容将立即显示在“代码检查器”面板中。对于不太了解HTML语法的用户来说，“代码检查器”面板是一个非常实用的HTML工具。,10,3.3.1 认识“代码检查器”面板（窗口|代码检查器）,文件管理,在浏览器中预览/调试,刷新设计视图,参考：参考面板，学习语言,代码导航：为html设置或清除断点，定义作用,选项菜单：选择代码显示形式,11,3.3.2 “代码检查器”面板的功能,“代码检查器”面板的主要功能如下： 1. 默认情况下，重新编写某些重叠的标签，关闭不允许保持打开状态的标签。 2. 使用黄色标识出无效的HTML代码(即不支持的HTML)。 3. 对无法识别的标记不做任何修改(包括XML标记)，因为没有 任何标准可以判断标记是否有效。 4. 不改变ColdFusion语言(简称CFML)或Microsoft Active Server Pages (Microsoft活动服务器页，简称ASP)标记，在文档窗口中会显示图标以标识CFML与ASP的代码块。 5. 允许HTML代码编辑器编辑当前文本，它综合了HomeSite、ColdFusion(针对Windows)与BBEdit(针对Macintosh)等3种编辑器的功能和特性。,12,3.3.3 设置“代码检查器”面板,代码显示器|选项菜单 1. 设置行号、自动断行与自动缩进 2. 设置HTML代码的字体颜色 3. 设置标记错误代码,返回,13,3.4 设置HTML代码参数,在Dreamweaver中可以设置代码颜色、代码格式及代码改写等参数。代码颜色参数可以控制HTML代码在代码视图模式及代码检查器中的颜色；代码格式参数决定一般代码的格式选项，例如行长与缩进，此参数可以阻止用户改变SourceFormat.txt文件。打开HTML文档时，Dreamweaver的代码改写功能可以重新编写原有的HTML代码。,14,3.4 设置HTML代码参数（编辑|首选参数）,3.4.1 设置代码颜色 通过设置代码颜色参数可以控制背 景色、文本、标记和保留关键字等项目的颜色。 3.4.2 设置代码格式 使用“代码格式”参数，可以控制HTML代码的格式。 3.4.3 设置代码改写参数,返回,15,3.5 清理HTML代码（命令|清除HTML）,“清理HTML/XHTML”对话框,16,3.5.2 清除多余的Word代码,“清理Word生成的HTML”对话框（命令|清除word生成的HTML）,返回,17,3.6 编辑HTML代码,在Dreamweaver中虽然可以不用手工输入一句HTML代码就能制作出漂亮的网页，但HTML毕竟是网页制作的基础，熟练运用HTML更有助于用户发挥个人的潜能及创意。Dreamweaver不仅为用户创造了直观且方便的设计环境，而且提供了强大且开放的代码编辑环境。本节主要介绍在Dreamweaver中编辑HTML代码的各种方法。,18,3.6.1 在代码视图中编辑HTML,Dreamweaver提供了代码、设计和拆分3种视图模式，通过单击“文档”工具栏中的相应按钮即可在不同视图模式之间切换。 代码视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码(例如ASP或ColdFusion标记语言)及任何其他类型代码的手工编码环境。 设计视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。 拆分视图使用户可以在单个窗口中同时看到同一文档的代码视图和设计视图,19,3.6.2 在设计视图中编辑HTML,在设计视图中使用快速标记编辑器，可以快速检查和编辑单一的HTML源代码。（修改|快速标签编辑器） 1. 快速标签编辑器的3种形式 (1) “插入HTML”快速标签编辑器 (2) “编辑标签”快速标签编辑器 (3) “环绕标签”快速标签编辑器 2. 在快速标签编辑器中编辑属性值 3. 设置快速标签编辑器的参数,20,3.6.3 在外部代码编辑器中编辑HTML,编辑|首选参数|文件类型/编辑器 目前，在使用Dreamweaver设计网页的过程中，也可能会遇到使用代码编辑器来处理和编写大量HTML、JavaScript与VBScript的情况。 在运行Dreamweaver的过程中，可以启动外部代码编辑器编辑当前文档的HTML代码。Dreamweaver可以检测到外部编辑器所作的并已保存的文档，并将其重新载入。,返回,21,3.7 本章小结,本章主要介绍HTML的相关知识，包括什么是HTML及其基本语法、使用代码检查器编辑HTML代码、设置HTML代码参数、清理多余的HTML代码，如何在代码视图、设计视图和外部代码编辑器中编辑HTML代码等内容。通过本章的学习，读者应掌握基本的HTML知识，学会使用HTML语言进行简单的网页设计，并了解根据不同需要清除不必要的HTML代码，以及在Dreamweaver的不同视图模式下编辑HTML的方法。,22,3.8 上机练习与习题,
