《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件 第八章 HTML》由会员分享，可在线阅读，更多相关《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件 第八章 HTML（29页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS4 网页设计与制作,第八章 HTML,HTML的语法规则 HTML标签的类型 Dreamweaver CS 3的HTML源代码功能 HTML标签,主要内容,掌握Dreamweaver CS4中的HTML源代码编辑功能 掌握常用的HTML标签含义及其应用 掌握手工修改HTML源代码,知识目标,要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读，需要一种规范化的发布语言。在万维网(WWW)上，文档的发布语言是HTML。 HTML意思是：Hypertext Marked Language，即超文本标签语言，就是该类文档有别于纯文本的单个文件的浏览形式，超文本文档中提
2、供的超级链接能够让浏览者在不同的页面之间跳转。 通过浏览器看到的网站都是由HTML构成的。HTML是一种建立网页文件的语言，它通过标签式指令，将影像、声音、图片和文字等连接起来。HTML文件可以用记事本、写字板或专用的开发工具（例如Dreamweaver）等编辑工具来编写，用HTML编写的文件的扩展名为HTML或HTM，它们是能够被浏览器解释显示的文件格式。,8.1 HTML简介,HTML是用来描述Web页面的语言，它不是编程语言，而是一种页面描述性标签语言。 通过各种标签描述不同的内容，说明标题、段落、字体、图像等网页元素在浏览器中的显示效果，浏览网页时，将根据HTML标签显示其内容。,8.
3、1.1 HTML的特点,HTML基本结构 一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入式对象，这些对象统称为HTML元素。在HTML中使用标签来分隔并描述这些元素。实际上可以说，HTML文件就是由各种HTML元素和标签组成的。 一个最基本的网页HTML代码格式如下： 文件开始标签 文件头开始的标签 网页标题 文件头的内容 文件头结束的标志 文件主体开始的标志 网页主体内容 文件主体内容 文件主体结束的标志 文件结束标志 HTML文档主要由头部内容和主体内容两部分构成，头部内容是文档的开头部分，对文件进行一些必要的定义，主体内容是HTML网页的主要部分,8.1.1 HTML的特点
4、,HTML文档应遵循以下语法规则。 HTML文档以纯文本形式存放，扩展名为“.html”或“.htm”。 HTML文档中采用标签“”作为分割符，起始标签的一般形式如下： 结束标签的一般形式如下： 包含在起始标志与结束标志之间的就是网页对象。 HTML标签及属性不区分大小写，例如，和是 相同的标签。 大多数HTML标签可以嵌套，但不能交叉，各层标签是全包容关系。例如： 欢迎光临 ，将不能正确显示。 HTML文档一行可以书写多个标志，一个标志也可以分多行书写，不用任何续行符号，显示效果相同，但是HTML标签中的一个单词不能分开两行写。 HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的
5、，浏览网页时，会自动忽略文档中的换行符、回车符、空格，所以在文档中输入的回车符，并不意味着在浏览器中看到不同的段落。当需要在网页中插入新的段落时，必须使用分段标签，它可以将标签后面的内容另起一段。换行可以使用标签，需要多个空格，可用使用多个“ ”转义字符。 网页中所有的显示内容都应该受限于一个或多个标签，不能存在游离于标签之外的文字或图像等，以免产生错误。 对于浏览器不能分辨的标签可以忽略，同时也不显示其中的对象,8.1.2 HTML的语法规则,在HTML中用于描述功能的符号称为“标签”，它是用来控制文字、图形等显示方式的符号，例如“HTML”，“HEAD”、“BODY”等。标签在使用
6、时必须用“”括起来。 在查看HTML源代码或编写网页时，经常会遇到四种格式的HTML标签。 不带属性的双标签：内容。必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标签所表示的功能，而尾标签告诉Web浏览器在这里结束该功能网页中的标题、文字的字形等都是这种形式。 带有属性的双标签： 网页对象 。这种形式的标签最常用，功能更强大，各属性之间无先后次序，属性也可以省略，取其默认值。不带属性的单标签：。单标签只有起始标签没有结束标签，它只需单独使用就能完整地表达意思。最常用的单标签是,它表示一个段落（Paragraph）的结束，并在段落后面加一空行，经常看到的还有（换行）标签。 带属性单标签
7、： ，,8.1.3 HTML标签的类型,Dreamweaver CS4也是一款专业的HTML编辑器，用于对Web站点、Web页面和Web应用程序进行设计、编码和开发。Dreamweaver CS4提供了更多功能强大的可视化设计工具、精简高效的应用开发环境及代码编辑支持，使设计师和开发人员能够创建便捷规范的代码应用程序，设计并开发代码简洁和专业规范的站点。,8.2 Dreamweaver CS 3的HTML源代码功能,Dreamweaver CS4的编辑环境提供了五种视图模式：“代码”视图、“拆分”视图、“设计”视图、 视图和“实时代码”视图，这五种视图都可以通过单击“文档”工具栏上左边的按钮进
8、行快速切换，如图所示,8.2.1 Dreamweaver CS 3的三种视图模式,8.2.2 在Dreamweaver CS4中直接编写HTML,在代码窗口中输入代码,Dreamweaver CS4使用了Roundtrip HTML技术，使用户在“设计”视图中修改网页，并且“设计”视图中的操作结果会立刻以源代码的形式显示在“代码”窗口中，同样，在“代码”视图中可以直接编辑HTML源代码，当单击“设计”视图中的任意位置时，会立刻看到相应的编辑结果。 熟练使用HTML是网页制作人员的基本要求之一，使用HTML可以对网页实现更准确的描述，尤其在和其他语言（例如JavaScript）混合编成时，更需要
9、直接操作HTML的源代码。,8.2.3 Dreamweaver CS 4的代码编辑工具,“编码”工具栏和“编码”菜单 折叠所选的代码,8.2.3 Dreamweaver CS 4的代码编辑工具,代码的注释 环绕标签的操作,8.2.3 Dreamweaver CS 4的代码编辑工具,“视图选项”下拉菜单 快速标签编辑,8.2.3 Dreamweaver CS 4的代码编辑工具,8.2.3 Dreamweaver CS 4的代码编辑工具,代码视图窗口中的快菜单 “标签选择器”对话框,8.2.3 Dreamweaver CS 4的代码编辑工具,“编辑标签”菜单 “标签编辑器”对话框,代码片断 “代码
10、片断”对话框,8.2.3 Dreamweaver CS 4的代码编辑工具,8.3.1 HTML版本信息 一般情况下,HTML文档都要在开头几行声明HTML的版本信息，以表明遵守HTML的哪一个版本，如下所示： . /html,8.3 HTML标签,HTML语言的头部标签 主要包括页面的一些基本说明语句，后面讲到的JavaScript特效、CSS一般都定义在HEAD头元素中。常用的头部标签有：、。定义在HTML语言头部的内容往往不会在网页上直接显示。 标签一般用来定义页面的信息的名称、关键字、作者等，在HTML中，meta标签不需要设置结束标志，在一个HTML头可以有多个meta元素，meta标
11、签的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找和分类。,8.3.2 HTML头部信息,网页的主体部分以标签开始，以标签结束。在网页的主体标记中有很多的属性设置，包括页面的背景、文字属性设置、链接设置、边距设置等,8.3.3HTML主体标签,1 标题文字标签 HTML定义了六级标题，每级标题的字体大小依次递减，一级标题最大，六级标题最小，标题字可以在页面中实现水平方向左对齐、居中、右对齐。例如： 欢迎光临我的博客 字体格式标签 设置页面中文字的字体、字号、颜色。 例如： 欢迎光临我的博客 Face 表示文字的字体，color表示字体的颜色。
12、3段落标签 在HTML语言中，段落通过标签来表示。在Dreamweaver CS4中视图中，按回车键后，就会自动形成一个段落，相当于添加了标签。例如： 新年都未有芳华，二月初惊见草,白雪却嫌春色晚，故穿庭树作飞花。 Align的取值有三种：“center“、“right“、“left“ 换行标签 4水平线标签 在网页中输入一个标签，就添加了一条默认样式的水平线，的常用的属性有：宽度、高度、颜色、有无阴影及对齐方式等，例如： 水平线的宽度可以是像素值，也可以是相对于窗口的百分比，默认为100%. 5 文本堆砌方式标签 对于大块的HTML段落排版，可以使用文本堆砌方式标签，这种标签的用法与十分相似
13、。例如： 书中自有黄金屋，博中自有颜如玉 6 文本缩进标签. 文本缩进标签能使文本两边缩进显示，标志为 7 列表标签 列表（list）是一种非常实用的数据排列方式，使读者能够一目了然，在HTML中有2种列表：无序列表、有序列表。,8.3.4HTML文字与段落标签,网页上可以呈现丰富的色彩及图像，插入图像的标签只有一个 标签。例如： Src属性用于指定图像源文件所在的路径，alt用于提示文字，width和height用于指定图像的显示大小，border用于为图像添加边框线，align用于设置图像与文字之间的对应方式。Vspace和 hspace用于设置图像之间的垂直间距和水平间距,8.3.5 H
14、TML图像标签,1 内部链接。是指链接的对象是在同一个网站中的资源，例如： 影片详情 Href表示超链接对象，可以使一段文本、一幅图像或其他网页元素。 2书签链接。书签可以与链接文字在同一页面，也可以在不同的页面。 （1）在同一页面，例如： 影片简介 本片纪录的是在南极大陆上生活的帝企鹅的生存和繁衍的故事。影片展示了帝企鹅这个滑稽、可爱而又坚强的物种怎样与严酷的自然环境和它们的天敌作斗争，怎样对小企鹅倾注它们的爱，从而完成他们的生命延续之旅。 （2）在不同页面 下一部影片 Href的值的格式：“链接的文件地址#书签的名称” 3外部链接。 是指跳转到当前网页之外的资源中，例如其他网站中的某个页面
15、或元素。例如： 唐诗宋词 发送邮件 ,8.3.6 HTML超链接标签,在HTML中，表格用来对页面进行排版，表格主要通过三个标签构成：表格标签、行标签和单元格标签，这几个标签是从大到小，逐层包含的关系。另外，表格中的标题单元格可以使用标签定义，标题单元格中的内容通常以黑体显示。标签和标签都必须位于标签内。,8.3.7HTML中的表格标签,框架主要包含两个部分，一个是框架集，另一个是框架文件。框架集是一个文档内定义一组框架结构的HTML网页，而框架再网页上定义一个显示区域，基本语法如下： 框架页面的标题 在使用框架的页面中，标签被框架标签代替，而对于页面中包含的每一个框架，都是通过来定义的。,8.3.8 HTML框架标签,表单是网页上的一个特定区域，使网页具有交互的功能，这个区域是由一对标签定义的，每个表单开始于form元素，可以包含所有的表单控件及伴随数据。在表单的标签中，还可以设置表单的基本属性，包括表单的名称（name）、处理程序（action）、传送方法（method）等,8.3.9 HTML表单标签,多媒体是一个网站的必备元素，使用它可以丰富网站效果，体现设计者的个性，吸引用户的注意，突出重点。 1 设置滚动文字- marquee 代码示例： 你好，欢迎光临梦幻小屋!这里有欢乐的歌声，这里
