网页制作基础知识-习题.ppt

第一章第一章 网页制作基础知识网页制作基础知识 网页是构成网站的基本元素，也是网站信息发布的一种最常见的表现形式。网页主要由文字、图片、动画、音频、视频等信息组成。HTML超文本标记语言是网页制作的基础，在美化网页的过程中，CSS级联样式表可以方便、快捷的控制网页总体风格。教学目标教学目标 通过本章的学习，了解HTML在网页制作中的重要作用和意义，掌握一些主要标记的含义、用法及属性设置。能够灵活的配合CSS有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。教学重点与难点教学重点与难点 HTML文档的组成和基本标记的作用、属性设置。利用HTML标记创建网页中的基本元素。CSS规则和内、外部CSS的用法。利用CSS文件对网页的总体风格进行控制。通过修改HTML文档中代码的方法编辑并变化网页。1.1 案例案例 网页制作学习园地网页网页制作学习园地网页 网页主要由HTML语言中起着各种作用的标记和对网页风格起控制作用的CSS样式表编写而成，本章将介绍“网页制作学习园地”网站的制作。“网页制作学习园地”主页“index.htm”，网页效果如下所示。1.1案例：网页制作学习园地网页案例：网页制作学习园地网页 点击网页中的超链接“第一章 网页制作基础知识”字样，在新窗口中打开一个框架网页“Frameset.htm”，点击“HTML主要标记”，在主框架中打开相关网页。网页效果如下所示。1.1.1 1.1.1 功能要求功能要求1整个网站主要以HTML代码编写的方式完成。页面风格以简单、清晰为 主，网页基本元素由文本和图像组成；2在主页中，访问者可以获得网站中的主题信息和学习内容列表。点击链 接文本，可以打开介绍相关知识点的页面；3在页面中设置电子邮件链接，如“联系我们”，提供一个与用户互交的平台；4为网页设置背景音乐和欢迎字幕。打开网页，有声音传出。当鼠标指针移动到滚动的欢迎字幕上时，文字停止滚动，移下鼠标后继续；5点击页面中的链接字，在新的浏览器窗口打开一个由上框架、左框架和主框架构成的框架网页。1.1.2 1.1.2 详细设计详细设计网页设计的步骤如下：1网页总体规划 首先考虑和设计网页的框架结构和艺术风格。可以先画出网站的草图，确定网站中各网页之间的链接关系，这样在创建每个网页时都会有清晰的思路，以免迷失方向，而且以后需要进行重组的可能性较小。“网页制作学习园地网页制作学习园地”网站的链接结构如下图：网站的链接结构如下图：在本地计算机的硬盘中建一个名为“mysite”的文件夹（此文件夹为空）做为站点，即网站根目录。在制作的过程中将所有创建和编辑的文档，以及用到的网页素材都保存在该文件夹中。本案例中共需要创建三个网页，“index.htm”为网站首页，单击页面中的超链接：“第一章 网页制作基础知识”，在新的浏览器窗口中打开一个框架网页，此框架网页的文件名为“Frameset.htm”。框架网页中包括上框架（链接网页是topframe.htm）、左框架（链接网页是leftframe.htm）和主框架（链接网页是mainframe.htm）。单击左框架中的超链接：“HTML主要标记”，在主框架中打开介绍HTML文档结构标记的网页“html_tag.htm”。index.htmFrameset.htmtopframe.htmleftframe.htmmainframe.htmhtml_tag.htmm 在组织站点结构时，应注意以下几个问题：在组织站点结构时，应注意以下几个问题：归类站点资源归类站点资源 在同一个文件夹中放置相关的网页，并在需要的时候使用子文件夹。这样的组织方式可以使网站层次清晰，更容易更新、维护。确定网页素材存放的位置确定网页素材存放的位置 站点中通常包含图像、声音、动画等多种素材，为了更好的存储资源，一般应在站点根目录下创建多个子文件夹，将用到的网页素材分门别类地存储到相应的文件夹下。必要时，可以创建多级子文件夹。本案例中将站点命名为“mysite”，根据网站的实际需要，其中建立了“HTML”、“image”、“sound”、“style”四个文件夹，分别用来放置网页、图像、声音和样式表文件。网页及网页元素的命名网页及网页元素的命名 为页面、图像和其他外部文件设计一个简单且一致的命名系统。根据一般原则，主页命名为“index.htm”，其他页面及相关的网页元素能望名知意。很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持，故在构建的站点中，建议全部使用英文字母组成文件名。2网页的主题定位网页的主题定位 确定为什么要创建这个网页及希望展示的内容。创建此页面的目的是让访问者一打开网页就能发掘学习的内容，同时显示友好的标语欢迎访问者。3图片、声音等媒体文件的使用图片、声音等媒体文件的使用 要让网页更加美观，更具人性化，可在网页中适当添加图片、动画、音/视频等多媒体文件。为了保证网页的传输速度，选择网络上常见的媒体格式，并将它们放置在相应的文件夹中。4制作工具的选择制作工具的选择 可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用DreamWeaver MX进行“网页制作学习园地”网站的创建。1.2 理论知识理论知识1.2.1 HTML1.2.1 HTML语言语言 在Web的发展历史中，HTML技术是优秀而核心的Web技术之一。目前计算机上包含互联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。1 1、HTMLHTML简述简述 HTML（HyperText Markup Language）即超文本标记语言，是WWW描述语言及制作网页的基础，也是一种用于文档布局和超文本链接规范的语言。它定义了特殊的、嵌入式指令的语法和放置方法，浏览器中不会显示这些指令，但是可以告诉浏览器该如何显示文档的内容，如文本、图像以及其他支持的媒体等。HTML基于SGML，即标准通用标记语言（Standard Generalized Markup Language）。由HTML标记（或标签、标记）组成的描述性文本，可说明文字、图形、动画、声音、表格、链接等内容。2HTML标记的表示标记的表示 HTML标记的格式：文件内容 HTML标记必须写在一对尖括号“”中，通常情况下成对出现。结束标记在标记前添加斜杠“/”。根据HTML标准，标记和属性名不区分大小写。如、之间没有任何区别，它们的作用都是一样的。标记可包含自身的一个或多个属性，标记与属性之间以空格隔开。各属性的排列顺序不做要求，属性值可由用户设置，否则将采用默认的设置值，属性值要用双引号或单引号括起来。其格式如下：元素-标识标记属性-描述标记值-分配给属性的具体内容 HTML结构包括头部（Head）、主体（Body）两大部分。头部放置文档标题，也可以指明浏览器在显示文档时可能会用到的其他参数；主体放置文档的实际内容，包括要显示的文本和文档的控制标记（标签），这些标记将告诉浏览器该如何显示文本。标签还可以引用特殊效果的文件，包括图像、图形、声音和动画，并指出将文档链接到其他文档的热点。3HTML文档结构文档结构1.2.1.1 HTML文档结构标记文档结构标记1HTML文档结构标记及作用如下表所示。文档结构标记及作用如下表所示。标 记说 明.文档是用html超文本标记语言编写的，所有的网页文件都放置在此标记中。.包含并不显示在浏览器窗口中但指明有关文档信息的头部标记.标题标记，放置在中，定义网页标题（在标题栏显示）。一般情况下标题长度不超过64个字符。描述HTML文档的属性，如作者、日期、网页描述、关键词、页面刷新等,位于和之间，提供用户不可见的信息。.主体标记，包含了所有显示在浏览器窗口中的网页元素。标记标记例：指明文档类型为文本类型，网页内容用标准简体中文显示，代码如下：代码解释：content:提供页面内容的相关信息 charset:字符集。提供网页的编码信息，浏览器根据这行代码选择正确的语言编码。标 记说 明http-equiv 回应给浏览器一些有用的信息，以帮助正确地显示网页内容 name 描述网页的相关内容 标记的常用属性如下表：标记的常用属性如下表：meta HTTP-EQUIV=“content-type”CONTENT=“text/html;charset=GB2312”标记标记标记的常用属性如下表：标记的常用属性如下表：属 性说 明设置文本颜色设置链接链接文本的颜色设置活动链接的颜色，即按下鼠标左键时链接文本所显示的颜色设置已访问过的链接文本的颜色设置网页的背景颜色设置网页的背景图像1.2.1.2 文本标记文本标记1 1文字标记文字标记标记用于设置网页中文字的字号、字体、颜色等属性。标记的常用属性如下表：标记的常用属性如下表：属 性说 明设置字号。（最小）、（最大）、（比预设字大一级）、（比预设字小一级）。设置字体。如设置文字的颜色2.文本样式标记文本样式标记文本样式标记用于设置网页中文字格式化为特殊的形式，如加粗、倾斜等。文本样式标记如下表：文本样式标记如下表：标记说 明.定义标题级别，黑体字显示。#=16。显示的字号最大、最小。.设置粗体字.设置斜体字.设置下划线.设置文本为上标格式.设置文本为下标格式.设置打字机风格字体的文本.以引用或参考的形式格式化文本，通常显示为斜体。.以强调形式格式化文本，通常显示为斜体+粗体。.格式化地址信息，将文本设置为斜体字。.格式化需强调显示效果的文本，通常显示为斜体+粗体。.将文字排版按原格式显示，即把原文件中的空格、回车、换行等表现出来。3文本分隔标记文本分隔标记HTML不识别Enter键和空格键，在文档中需要定义相应的文本分隔标记。分隔标记如下表：分隔标记如下表：标 记说 明hr产生一条横向水平线（单标记）br强制换行符（单标记）.段落标记4常用块级标记常用块级标记（1）标记标记 标记之间的所有文本从常规文本中分离出来，并在左、右两边进行缩进，即块引用拥有自己的页面空间。（2）标记标记 标记可将同一个段落中的文本格式化为不同的样式。（3）标记标记 DIV标记可用来为HTML文档内大块的内容提供结构和背景。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标记的属性来控制，或是通过使用样式表格式化这个块来进行控制。5滚动文本标记滚动文本标记 滚动文本标记滚动文本标记常用属性如下表：常用属性如下表：属 性说 明设置文字滚动区域的背景颜色设置文字滚动区域的高度设置文字滚动区域的宽度设置文字滚动区域和文本的对齐方式，可取值为left、right、top、middle、bottom等。以像素为单位设置文本和文字滚动区域左右两边的空白大小以像素为单位设置文本和文字滚动区域上下的空白大小确定文本的滚动形式，可取值为“alternate（文本在相反两个方向滚动）、scroll（文本向同一个方向滚动）、slide（文本接触到滚动区域的边框时停止滚动）”。设置文字滚动的方向，可取值为left、right、up、down。设置文本滚动的速度，默认单位为像素(px)。取值越大，速度越快。设置文本滚动时停顿的时间，单位为毫秒。取值越小，文本滚动越流畅。1.2.1.3 图像标记图像标记 制作网页时，图像是必不可少的网页元素，在HTML语言中使用标记在网页中插入图像，并运用相应的HTML标记设置图像的显示尺寸和对齐方式等属性。HTML常采用的图像格式有gif、jpg和png等。图像标记图像标记的常用属性如下表：的常用属性如下表：属 性说 明说明图像路径和图像文件名设置图像的高度，默认单位是像素(px)。设置图像的宽度，默认单位是像素(px)。设置图像边框的粗细，默认单位是像素(px)。设置图像相对于文字的对齐方式，可取值为left、right、top、middle、bottom等，默认值为“bottom”。设置当鼠标移入图片时显示的说明文字1.2.1.4 超级链接标记超级链接标记.1相关概念相关概念 （1）超级链接）超级链接 超级链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页或相同网页中的不同位置，也可以是一个图片、一个电子邮件地址、一个文件、甚至是一个应用程序。当浏览者单击链接后，链接目标将根据打开位置的设置显示在浏览器上。默认情况下，链接文本为蓝色，文字下有一条下划线。当移动鼠标指针到该链接上时，鼠标指针变成一只小手的形状，这时用鼠标左键单击，就可以直接跳到与这个超链接相连接的内容上去。若用户已经浏览过某个超链接，这个超链接的文本颜色会发生改变。（2）URL URL(Uniform Resource Locator)即统一资源定位系统，指出了文件在Internet中的位置，即通常所说的网址。可见，URL在Internet的WWW服务程序上用于指定信息位置的表示方法，服务器可根据它找到网络资源，并传送给客户机。URL可分为绝对地址和相对地址。其中，绝对地址，即一个完整的URL地址，通常由通信协议（如http）、WEB服务器地址、文件在服务器中的路径、文件名四部分组成；相对地址，即相对于同一网站中不同网页之间的链接。2 2创建超级链接的基本语法创建超级链接的基本语法代码解释：代码解释：（1）“href”属性：指明被链接文件的路径及文件名。（2）“target”属性：指明显示被链接文本的窗口。target=_blank：将被链接文件在新的浏览器窗口打开。target=“_self”：将被链接文件在当前浏览器窗口打开。3网页中超级链接的使用网页中超级链接的使用（1）按照链接路径的不同，网页中的超链接可分为外部链接和内部链接。外部链接外部链接 当本网站中的某个链接目标存在于网站之外时使用外部链接。如在网站中设置的友情链接,通常都是站点外部的链接。在外部链接中，URL地址中的路径是绝对路径。内部链接内部链接 当本网站中的某个链接目标存在于网站之内时使用内部链接，可用于同一网站中不同网页之间的链接，内部链接可使用相对路径。（2）按照使用对象的不同，网页中的链接可分为E-mail链接、文本超链接、图像超链、锚点链接等。1）E-mail链接链接 当点击网页中的E-mail链接后，自动启动outlook express电子邮件收发软件。基本语法：2）图像超链接）图像超链接3）热点超链接）热点超链接 图像热点标记.利用标记可在图像文件中创建多个热点区域，即在一张图像上创建多个链接。热点工具的形状可分为矩形（按住“shift”键可绘制出正方形）、椭圆形（按住“shift”键可绘制出圆形）和多边形。4）锚点链接）锚点链接 锚点链接是指在同一个文档或页面的内部创建超链接，常用于实现阅读中的跳转。创建一个位于文档内部的锚点，语法如下：其中：“name”属性定义锚点名称。利用“href”属性创建一个指向文档内部锚点的链接，语法如下：1.2.1.5 列表标记列表标记 网页中的列表可分为：“有序列表”、“无序列表”和“定义列表”。1有序列表（有序列表（.）各项目之间有先后顺序，利用标记.创建列表中的各个项目。有序列表常用属性如下表：有序列表常用属性如下表：属 性说 明TYPE属性可改变序列号类型：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。指定序列起始的数目2无序列表（无序列表（）各项目间无顺序关系，只是用条列式方法显示出来，各项目前均有一符号。利用标记.创建列表中的各个项目。无序列表常用属性如下表：无序列表常用属性如下表：属 性说 明TYPE属性可改变项目符号的形状：DISK（实心圆）、SQUARE（正方形）、CIRCLE（空心圆），默认情况下为圆形。1.2.1.5 列表标记列表标记3定义列表定义列表 一种既无表项符号，又无项目序号的列表。它由两部分组成，分别称为“定义术语”和“定义内容”。定义列表标记如下表：定义列表标记如下表：标.记说 明.在网页中创建一个定义列表，以缩进文本格式显示。.在定义列表中表示需定义的条目，定义条目一般顶格显示。.在定义列表中表示条目的说明内容，一般比定义条目缩进两字符的距离。1.2.1.6 网页布局网页布局 网页布局是指在一个限定的页面范围内，科学、合理的安排文字、图像、图形和动画等网页元素的位置,网页布局是决定网页整体布局结构的主要技术。1创建表格创建表格 表格是安排网页布局的一种很常用的技术，可用于组织和显示大量信息和条理性信息，固定文本和图像等网页元素的输出。（1）表格标记）表格标记.标记的常用属性如下表：标记的常用属性如下表：属 性说 明设置表格的高度，默认单位为像素。设置表格的宽度，默认单位为像素，也可使用百分比。如，表示表格宽度占整个屏幕的80%。设置表格边框的粗细，默认单位为像素。设置表格边框的颜色设置表格的背景图像设置表格的背景颜色使用三维边框时，设置暗边框的颜色。使用三维边框时，设置亮边框的颜色。设置表格单元格中填充内容距边框线的间隔，默认单位为像素。设置表格中单元格与单元格之间的间隔，默认单位为像素。（2 2）表格行标记）表格行标记.在定义表格的代码中，出现几对.，即代表表格有几行。标记的常用属性如下表：标记的常用属性如下表：属 性说 明设置表格行边框的粗细，默认单位为像素。设置表格行边框的颜色使用三维边框时，设置表格行暗边框的颜色。使用三维边框时，设置表格行亮边框的颜色。设置表格中某一行内容的水平对齐方式，可取值为：（左对齐）；（居中对齐）；（右对齐）。设置表格中某一行内容的垂直对齐方式，可取值为：（上对齐）；（居中对齐）；（下对齐）。（3）单元格标记）单元格标记中的常用属性如下表：中的常用属性如下表：属 性说 明设置该单元格所占用行的数目设置该单元格所占用列的数目设置单元格中内容的水平对齐方式：如（左对齐）；（居中对齐）；（右对齐）。设置单元格中内容的垂直对方式：如（上对齐）；（居中对齐）；（下对齐）2创建框架网页创建框架网页 框架技术可以将网页分成几个单独的显示区域，就像一个独立的网页，不同的区域可用来载入不同类型的对象。框架集：几个框架的组合。一个框架集是一个HTML文件，用来定义框架结构，即一组框架的布局和属性，如框架的数目、大小和位置等。一个框架对应一个HTML文件，框架集中的每个框架可以显示不同的HTML文件内容。故框架网页是一个HTML集，对于一个有n个区域的框架网页来说，有n+1个HTML文件。在框架网页中被标记取代。（1）框架集标记）框架集标记.标记的常用属性如下表：标记的常用属性如下表：属 性说 明以像素为单位设置框架间的距离设置该框架集是否具有边框，可取值为yes和no。设置框架集边界的颜色设置框架网页的列划分形式。如，可将浏览器窗口纵向分成三个框架，第一个框架为30px的宽度,是绝对分割；第二个框架占整个页面40%的宽度，是相对分割；第三个框架是分配完前两个框架后剩下的空间。设置框架网页的行划分形式。如，可将浏览器窗口横向划分成三个框架。第一个框架占整个浏览器窗口的50%，剩下的空间平均分配给另外两个框架。（2）框架标记）框架标记标记的常用属性如下表：标记的常用属性如下表：属 性说 明设置此框架要显示的网页文件名设置各框架的名称，通过框架的名称可设置链接目标在整个框架集网页中的打开位置，其名称区分大小写。设置该框架是否具有边框，可取值为yes和no。设置该框架边框的颜色以像素为单位设置框架边界的宽度以像素为单位设置框架边界的高度设置该框架的内容能否滚动显示，可取值为yes、no、auto。固定框架的结构大小，即不允许用户在浏览网页时以拖动的方式改变该框架的大小。确定目标框架网页的代码如下：确定目标框架网页的代码如下：代码解释：代码解释：“href”属性：设置该框架内链接的具体文件。“target”属性：设置链接目标在框架集网页中的打开目标。常用属性值为：black：点击链接文本后，在一个新的浏览器窗口中打开被链接文件。self：点击链接文本后，被链接文件在链接文本所在的框架中打开。parent：将链接指向父框架网页。若没有父框架网页，则指向自己。父框架、子框架网页是根据网页的结构关系设置的。top：指向整个浏览器窗口本身，网页显示效果如非框架网页中的“self”。1.2.1.7 创建表单创建表单1 1表单概述表单概述 表单是用来实现网页浏览者与服务器之间信息交互的一种页面元素，是网站管理者与浏览者之间沟通的桥梁，在WWW中被广泛用于各种信息的搜集和反馈。如采集访问者的名字、Email、调查表、留言簿等。（1）HTML源代码用于描述表单（例如：按钮、复选框、下拉菜单等）；（2）脚本或应用程序用于处理提交的信息（如CGI脚本），不使用处理脚本就不能搜集表单数据。表单中包含的数据将被提交到服务器或电子邮件。表单不同于表格、图像等页面元素，它不仅需要使用HTML语言在网页中显示，而且需要服务器端特定程序的支持。2表单标记表单标记.创建表单的基本语法：创建表单的基本语法：.代码解释：代码解释：（）.称为表单域，是放置表单对象（让用户输入信息的地方）的区域，只有表单域中的表单对象（除了跳转菜单外），才可以将它的信息传送到服务器，或接受外来的信息。（）action=url,指定提交表单的格式，可以是一个URL地址或电子邮件地址。（）method=get/post,指明提交表单的HTTP方法。（）enctype=.,指明用来把表单提交给服务器时(当method值为post)的编码类型。缺省值为“application/x-www-form-urlencoded”。（）TARGET=.,指定提交的结果文档所显示的目标位置。3 3标记的常用属性标记的常用属性标记的常用属性如下表：标记的常用属性如下表：属 性说 明设置表单的名称设置向服务器发送此表单内容的方法，可取值为post、get。设置用于处理该表单服务器端程序的地址，它可以是一个URL地址或电子邮件地址。设置显示表单递送结果的目标窗口，可取值为“blank、parent、self”等。设置把表单提交给服务器时的编码类型，若要使文件上载按钮工作正常，必须将此属性值设置为multipart/form-data。4创建表单元素标记创建表单元素标记创建表单元素标记如下表：创建表单元素标记如下表：标 记说 明创建表单元素，用户可在其中输入数据.创建一个能够接受多行文本的输入框.创建下拉式列表或菜单.创建下拉式菜单或滚动列表框中的具体项目值代码解释：代码解释：在表单中创建一个单行文本框的代码如下：其中：“name”属性：设置该单行文本框的名称。“value”属性：设置赋给该单行文本框的初始值。表单中各元素的创建如下表：表单中各元素的创建如下表：属 性说 明创建一个文字字段，即单行文本框创建一个单选按钮，如，表示该按钮为已选中状态。创建一个复选框，如，表示该复选框为已选中状态。创建文件域，可通过点击浏览按钮选择需要上传的文件。创建一个表单提交按钮创建一个表单重设按钮创建一个普通按钮创建图像域，使用图像来代替“submit”按钮。创建密码域，用户输入的内容将以“”显示。创建隐藏域。用于收集或发送信息的不可见元素，并将信息用设置时定义的名称和值发送给服务器。1.2.2 1.2.2 级联样式表（级联样式表（CSSCSS）CSS概述概述 CSS（Cascading Style Sheets）是级联或层叠样式表的简称，或称为风格样式单（Style Sheet），是万维网协会制定的一种标准。它规定了一系列格式设置规则，是对HTML标记的一种扩展。通过将样式表信息插入到页面中，可以对网页的显示风格进行整体控制。可见，如果一个网站中多个网页的显示风格相同，若逐个页面的进行如网页布局、文本等属性设置，这无疑要做许多重复性的工作。同时也使网页的HTML代码庞大，造成网页传输和下载的速度变慢。为了解决该问题，可以对页面中经常出现的相同或相近属性的对象进行整体属性的设置，即建立样式表。它可以对网页布局、背景、文字、颜色、表格、超链接等属性进行统一的设置，然后再作用到页面的各个相应的对象中去。CSS的基本特点的基本特点 CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。CSS的用途主要是帮助页面的HTML源代码和样式表现分离开，这样可使代码结构清晰，提高网页的载入速度。在标准网页设计中，CSS控制网页内容在浏览器中的显示。可通过更改CSS文件，改变网页的整体表现形式。CSS文件是一种文本文件，它包含了一些CSS标记。CSS文件必须使用”.css”为文件扩展名。CSS的用法的用法CSS的基本语法：备注：备注：STYLE元素应插入HTML文档的部分。浏览页面时，只有嵌入了STYLE元素的文档会受到影响。text/css指示了文本CSS样式表类型。4.CSS在在HTML中的引用中的引用 可通过使用内联样式表、内嵌样式表和外部样式表的方法将样式表作用到网页中。（1）内联样式表）内联样式表 内联样式表是在网页对象的标记内使用style属性定义适用其的样式表属性，即直接在HTML标记里设置style参数（CSS的属性和属性值）。内联样式表的style属性作用于单个标记，能够对特定标记的显示样式进行精确设定。但因需要对每一种标记进行反复设定，所以网页修改时的工作量较大。（）内嵌样式表（）内嵌样式表 内嵌样式表将样式表文件放置在HTML文档的头部标记之间，利用HTML标记对各种网页元素的样式规则进行定义，具体的属性设置放置在之间。内嵌样式表能够使整个页面的显示风格达到统一，而不需要对单个标记的属性进行重复设置。（）外部样式表（）外部样式表 外部样式表是把样式表保存为一个文件扩展名为“.css”的样式表文件，此文件与HTML文档相分离。要使用外部样式表，需将其链接到网页中。调用外部样式表的两种方法：调用外部样式表的两种方法：导入外部样式表导入外部样式表 调用导入外部CSS的基本语法：import url(“样式表文件路径/样式表文件名”)链入外部样式表链入外部样式表 调用链入外部CSS的基本语法：5、CSS选择器选择器 CSS选择器可分为标记选择器、类选择器和ID选择器和特殊选择器。（1）标记选择器）标记选择器 标记选择器仅描述HTML标记，不考虑该标记在文档结构中的位置。（2）类选择器）类选择器 类选择器必须以英文半角的“.”和选择器名构成。选择器名以字母开头，后可跟数字。class属性用于指定标记属于何种样式的类。（3）ID选择器选择器 ID属性用于定义一个标记的独特样式。一个ID选择符的指定要有指示符#在名字前面，其值必须是以字母开头，后可接数字或连字符。（4）特殊选择器（）特殊选择器（CSS伪类）伪类）CSS伪类用来指定一个或与其相关的选择符的状态，是CSS已经定义好的，不能像类选择器一样随意定义类名称。最常用的是关于超级链接标记（a）的伪类，可对链接在不同状态下设置不同的样式效果。链接链接CSS伪类的用法如下表伪类的用法如下表：CSS伪 类说 明a:linkcolor:#0000FF;text-decoration:underline;设置未被访问的链接文本颜色为蓝色，且加下划线。a:visitedcolor:#00FF00设置已被访问过的链接文本为绿色a:hovercolor:#FFCC00设置鼠标悬停在链接文本上时的文本颜色为橙色a:activecolor:#FF0000设置激活链接文本的颜色为红色7.CSS7.CSS常用属性常用属性（1 1）字体常用属性如下表：）字体常用属性如下表：属 性属 性 值font-family设置字体（arial、serif、宋体.）font-size设置文字大小（small、medium、large.）font-style设置文字样式（normal、italic.）font-weight设置文字的粗细（normal、bold、lighter、100、200.）（2）文本常用属性如下表：）文本常用属性如下表：属 性属 性 值word-spacing单词缩进（取值）letter-spacing字母缩进（取值）line-height设置行高，即两行文字之间的距离（正常、取值）text-decoration设置文字的修饰（none、underline、overline、line-through.）text-indent设置文本的缩进（取值）text-align设置文字的水平对齐方式（left、center、right、justify.）vertical-align设置文字的垂直对齐方式（top、bottom、baseline.）display设置文本的显示方式（block、table.）（3）背景常用属性如下表：）背景常用属性如下表：属 性属 性 值background-color设置背景颜色（#RRGGBB、颜色英文名称）background-image设置背景图像（url）background-repeat设置背景图像是否重复：repeat：既横向重复，又竖向重复repeat-x：横向重复repeat-y：坚向重复no-repeat：不重复background-attachment设置背景图像是否跟随网页内容的滚动而滚动：scroll：跟随网页内容一起滚动fixed：当网页内容滚动时，背景图像固定不动。background-position设置背景在网页中的位置（left、top、right、bottom.）（4）CSS盒子模式盒子模式 CSS盒子模式所具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)。盒子里由外至里依次是：盒子里由外至里依次是：Margin：即边距，用来设置一个元素所占空间的边缘到相邻元素之间的距离。Border：即边框，用来设置一个网页元素边界线的粗细。Padding：即填充，用来设置元素内容到元素边框之间的距离。Content：即网页内容，如文本，图片等。边距（边距（Margin）Margin常用属性如下表：属 性说 明margin-top设置上边距的宽度margin-right设置右边距的宽度margin-bottom设置下边距的宽度margin-left设置左边距的宽度设样式名称为“.style”，边距属性语法：设置上边距宽度为1cm：.stylemargin-top:1cm设置上、下、左、右边距的宽度均为1cm：.stylemargin:1cm 边框（边框（Border）边框属性包含边框风格（border-style）、边框宽度（border-width）和边框颜色（border-color）。边框风格(border-style)边框风格属性如下表：边框风格属性如下表：属 性 值说 明none没有边框dotted点线式边框dashed破折线式边框solid直线式边框double双线式边框groove槽线式边框ridge脊线式边框inset内嵌效果的边框outset突起效果的边框边框宽度边框宽度(border-width)(border-width)边框宽度属性用来设定上、下、左、右边框的宽度。宽度用长度单位定值，可用绝对长度单位(cm,mm,in,pt)，或用相对长度单位(em,ex,px)。边框宽度属性如下表：边框宽度属性如下表：属 性 值说 明medium缺省值thin比medium细thick比medium粗 填充（填充（Padding）填充属性设置元素内容到元素边界的距离。填充属性的基本语法：填充属性的基本语法：设样式名称为“.style”，上、下、左、右边距的填充值都为1cm。代码如下：.stylepadding:1cm设置不同的宽度值，顺序为上填充为1cm、右填充为2cm，下填充为3cm，左填充为4cm。代码如下：.stylepadding:1cm 2cm 3cm 4cm填充常用属性如下表填充常用属性如下表：属 性说 明padding-top设置上间隙的宽度padding-bottom设置下间隙的宽度padding-left设置左间隙的宽度padding-right设置右间隙的宽度1.3 总结总结 HTML超文本标记语言已成为各种浏览器的通用标准，并独立于操作系统平台。HTML不是程序语言，它只是一种标记语言，或文本语言。HTML是所有浏览器都能识别的语言，是浏览器生成网页的基础。无论采用哪种技术、哪种语言，最终都以HTML的形式输出。CSS（Cascading Style Sheet）级联样式单主要是用来进行网页风格设计的。通过编写样式表，可以统一地控制HMTL中各标志的显示属性，从而对网页的风格、显示、排版等进行方便、快捷的控制。通过本章的学习，学生应掌握HTML语言中常见标记的使用，对它们进行相应的属性设置，并能够按照页面设计要求编写HTML文档。学会在HTML网页中引用CSS样式表的几种方法，并能熟练的使用它格式化页面外观。同时，也为后续章节的学习打下良好的基础。1.4 习题习题一、填空题二、单项选择题三、简答题四、HTML文档编写与分析。一、填空题一、填空题1标签中的bgcolor属性用于指定HTML文档的设置网页的背设置网页的背景颜色景颜色，text属性用于指定HTML文档中文本文本的颜色，backgroundbackground属性用于指定HTML文档的背景文件。2图像标记图像标记用于将图象插入到HTML网页中。3图像标签中的align属性的参数值为toptop、middlemiddle或bottombottom，分别表示与图像相邻的文字位于图像的上方、中间和下方上方、中间和下方。4HTML中，文本样式标记文本样式标记用于将文本显示为强调格式。5单元格标记单元格标记用于定义表格单元格。6在HTML文档中URL标记是指定义目标网址定义目标网址。二、单项选择题二、单项选择题1下列语句中，（B B）将HTML页面的标题设置为“HTML练习”。(A)HTML练习 (B)HTML练习(C)HTML练习 (D)HTML练习2（C C）属性指定向服务器发送表单数据的方法。(A)accept (B)action(C)method (D)form3（A A）标记可将外部样式表链接到当前html文档中。(A)link (B)import(C)href (D)src4要在网页中显示下列内容：网页制作基础知识。要求将“基础”两个字用25号字体显示。下面语句正确的是（C C）(A)网页制作基础知识(B)网页制作基础知识(C)网页制作基础知识(D)网页制作基础知识5（A A）标记用于指定在当鼠标移动到图像上时，显示替代文字。(A)ALT (B)IMG(C)HR (D)SRC6要设置以访问过链接的颜色为红色，下列选项正确的是（C C）(A)A:linkcolor:red (B)A:activecolor:red(C)A:visitedcolor:red (D)A:visitecolor:red7（B B）是指在一张图片上创建多个热区链接。(A)图形映射 (B)超链接(C)锚点 (D)焦点8下面哪一项不属于HTML文档的三个基本组成部分（D D）(A)html部分 (B)head部分(C)body部分 (D)注释部分三、简答题三、简答题1描述创建一个站点的基本步骤和需要注意的要点。2描述一个HTML文档的基本结构，并写出其代码。3描述框架网页中框架集和框架的特点。4描述CSS样式表的几种常用选择器及特点。1描述创建一个站点的基本步骤和需要注意的要点。网页总体规划网页总体规划首先考虑和设计网页的框架结构和艺术风格。可以先画出网站的草图，确定网站中各网页之间的链接关系，这样在创建每个网页时都会有清晰的思路，以免迷失方向，而且以后需要进行重组的可能性较小。网页的主题定位网页的主题定位确定为什么要创建这个网页及希望展示的内容。创建此页面的目的是让访问者一打开网页就能发掘学习的内容，同时显示友好的标语欢迎访问者图片、声音等媒体文件的使用图片、声音等媒体文件的使用要让网页更加美观，更具人性化，可在网页中适当添加图片、动画、音/视频等多媒体文件。为了保证网页的传输速度，选择网络上常见的媒体格式，并将它们