第3章-Web页面制作基础.ppt

ASP动态网页制作教程 第3章 Web页面制作基础 本章介绍Web页面制作基础，主要内容包括HTML标记语言概述、常用的HTML标记、CSS样式表以及最新的HTML5新增的结果元素等。通过本章的学习，读者应了解什么是HTML和CSS样式表，并能掌握关于文本、超链接、表格、表单等常用的HTML标记以及如何定义和引用CSS样式表，并且能够应用HTML5新增的主体元素开发Web页面。 主要内容 3.1 HTML标记语言 在Internet上浏览的大部分网页都是用HTML语言编写的。HTML语言是制作网页的基础，可以说Web动态编程都是在HTML的基础上进行的。 3.1.1 什么是HTML 超文本标记语言（Hypertext Markup Language，HTML）是Web页面的描述性语言，是在标准通用化标记语言（Standard Generalized Markup Language，SGML）的基础上建立起来的。 根据其语法规则建立起来的文本可以运行在不同的操作系统平台和浏览器上，是所有网页制作技术的核心与基础。无论是在Web上发布信息，还是编写可供交互的程序，都离不开HTML语言。 3.1.2 HTML文件结构 使用HTML语言编写的超文本文件称为HTML文件。可以在Windows下的文本编辑器中手工直接编写HTML文件，也可以使用FrontPage、Dreamweaver等可视化编辑软件编写HTML文件。 HTML通过在文本中嵌入各种标记，使普通文本具有超文本的功能。 HTML文件的基本结构如下。 HTML HEAD 头部信息 /HEAD BODY 主体内容 /BODY /HTML HTML…/HTML：?HTML文件的开始和结束，其中包含HEAD和BODY标记的内容。 HEAD…/HEAD：HTML文件的头部标记，用于包含文件的基本信息。 BODY…/BODY：HTML文件的主体标记，在头部标记/HEAD之后。它定义了HTML文件显示的主要内容和显示格式。 这里需要注意的是，HEAD与BODY标记是两个独立的部分，不能互相嵌套。 3.1.3 HTML头部标记与主体标记 任何HTML文件都包含在HTML和/HTML标记之中。一个标准的HTML文件分为头部和主体两大部分。其中，头部标记为HEAD，主体标记为BODY。 1．头部标记HEAD HEAD标记是页面的第二层标记，用于提供与Web页面有关的各种信息。 【例3-1】在HEAD标记内设置页面信息。 2．主体标记BODY 在BODY和/BODY中放置的是页面展示的所有内容。作为网页的主体部分，BODY标记有很多的内置属性，通过这些属性可以设定网页的总体风格。例如，定义页面的背景图案、背景颜色、文字颜色、超文本链接颜色等。 （1）Background属性光焕发 （2）Bglolor属性 （3）Bgproperties属性 （4）Text属性 （5）Link属性 （6）Alink属性 （7）Vlink属性 （8）Topmargin属性 （9）Leftmargin属性 【例3-2】通过BODY标记定义页面显示风格。 3.2 设置文字风格 文字是网页的基础部分，突出的文字内容、合理的文字排版能够确切地传达出页面的主要信息。本节介绍字体标记FONT、标题字标记H、段落标记P、换行标记BR以及注释标记!--…--和COMMENT。 3.2.1 定义文字字体 1．字体标记FONT FONT标记可以设定文字的字体、大小和颜色。FONT标记的属性包括FACE（字体）、SIZE（字号）和COLOR（颜色）。 （1）FACE属性 （2）SIZE属性 （3）COLOR属性 【例3-3】使用FONT标记定义文字。 2．标题字标记H 标题文字是指以某几种固定的字号显示文字。标题标记由H1到H6，分别表示1级至6级标题，每级标题文字的字体大小依次递减。每个标题标记所标识的文字将独占一行且上下留一空白行。 【例3-4】使用标题字标记H。 3.2.2 文字的排版 一个清晰、排版整齐的Web页面更能反映其所包含的内容，让读者一目了然。使用文字的排版标记可以使文字按照定义的规则显示。下面介绍常用的段落标记P和换行标记