第7章 网页的设计.ppt

第七章网页设计 内容提要 7.1 HTML语言介绍 7.2 Dreamweaver概述 7.3创建网页文档 7.4网页定位技术 7.5超链接 7.6 CSS样式 7.7时间轴、事件和行为 7.8站点的建立和管理 7.1 HTML语言介绍 7.1.1HTML语言结构 7.1.2文档头 7.1.3文档主体 7.1.4在网页中加入javaScript脚本语言 7.1.1HTML语言结构 什么是HTML ？ 超文本标记语言（HTML——HyperText Markup Language）是用于设计网页源文件（网页文档）的语言。每一个页面的代码保存为一个网页源文件(.htm文件) 。 八十年代初，HTML由万维网联盟（W3C：World Wide Web Consortium）制订。 HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。 后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。 7.1.1HTML语言结构 什么是标记？ 标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如：p…/p 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等 。 7.1.1HTML语言结构 例如 整个HTML文档内容均在HTML…/HTML标记之中，HTML元素的元素体由两大部分——头元素head…/head、体元素body…/body和一些注释组成。 7.1.1HTML语言结构 HTML语言表示方法 一般来讲，HTML的元素有下列3种表示方法： 元素名文件或超文本/元素名 元素名 属性名=“属性值…”文件或超文本/元素名 元素名 7.1.1HTML语言结构 如何编写和浏览HTML网页文档 启动IE，然后使用“查看”菜单中的“源文件”菜单项，进入记事本，就可以输入网页源文件了。在输入完之后，另存为.htm文件。 或者直接进入记事本，输入网页源文件。在输入完之后，另存为.htm文件（选择保存类型为“所有文件”）。 在浏览器中输入该文件名，就能浏览HTML源文件的网页效果。 7.1.2文档头 文档头由head和/head标记之间的内容构成，通常包含一些对文档进行说明的内容。在文档头中，各标记之间没有顺序之分，无论谁放在前，谁放在后，其作用是一样的。如: title标记 meta标记 inindex标记 …… 7.1.3文档主体 文档主体由body和/body标记之间的内容组成，这是网页的主要内容，即在浏览器中所要显示的内容。 7.1.3文档主体 1．背景色彩和文字色彩 在body中可以使用很多属性参数来设定背景和文字色彩，格式如下： body bgcolor=# background=image-URL text=# link=# alink=# vlink=# bgcolor：背景色彩 background：网页的背景图片 text ：非可链接文字的色彩 link ：可链接文字的色彩 alink ：正被点击的可链接文字的色彩 vlink ：已经点击(访问)过的可链接文字的色彩 7.1.3文档主体 例如： body bgcolor=blue background=images/sun1.jpg text=#ff0000 将网页的背景颜色设为蓝色，将已经存在的图片sun1.jpg设为背景图片，将文字的颜色设为红色。 7.1.3文档主体 2．段落标记p p…/p标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。 p标记中的align属性用来控制段落的对齐方式的，，对齐方式有居中对齐（center），右对齐（right），左对齐（left） 7.1.3文档主体 3．换行标记br 换行标记br的作用就是告诉浏览器到这里要换行了。内容移到下一行，但和前面的内容仍是一个段落，并没有开始一个新的段落,它没有结束标记。 4．排版标记pre 排版标记pre用于告诉浏览器，pre和/pre之间的内容按照HTML文档中的原始格式显示，这时回车和空格都会依原样显示出来。 5．水平分割线标记hr hr标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水