静态网页制作第1章精选.ppt

目 录 第1章 HTML基础 第2章 列表、图像及超链接 第3章 表格、表单及框架 第4章 CSS 第5章 用 Dreamweaver MX 制作网页 第6章 网站开发简介 第1章 HTML基础 * 第 * 页 * 节 课件下载 1.1 HTML 概述 1.2 页面颜色控制 1.3 文本段落控制 1.4 文字格式控制 如今，公司、企业和个人都在建设自己的Web站点，编写自己的Web网页，HTML正是创建网页的基础语言。 HTML是英文Hyper Text Markup Language的缩写，意为超文 本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写超 文本文档称为HTML文档，它用于描述网页内容的排版、显示方式，最后要 通过WWW浏览器显示出来，就是我们看到的网页。所谓超文本是指文档中 还可以有图片、声音、动画、影视等内容。 HTML带来了超链接的技术，即浏览网页时通过单击鼠标可以从一个主 题跳转到另一个主题，从一个页面跳转到另一个页面，从而可以与世界各地 主机文件链接，直接获取相关主题。 HTML的具体功能： 1．格式化文本。如设置文本的对齐方式、字体、颜色等。 2．建立超链接。鼠标点击获得指定的目标；设置超链接样式等。 3．建立列表。以列表方式显示信息，方便阅读。 4．插入图形。如设置图像的样式（如大小、边框、布局等）。 5．建立表格。 6．加入表单、控键等。这是客户与网页交互的主要渠道。 7．加入多媒体。如声音、视频、动画。 1.1.1 HTML的功能 1.1 HTML概述 1.1.2 创建一个简单的HTML页面 创建HTML文档可以使用熟悉的文本编辑器(如记事本或写字板)，浏览HTML页面需要使用Web浏览器，如IE (Internet Explorer)、Firefox等。 【例1-1】创建一个简单网页，网页文件名为Cha1-1.htm。 (1) 用记事本编辑HTML文档 ① 单击“开始”→“所有程序” →“附件”→“记事本”， 在其中输入HTML文档内容， 如右图所示。 ② 保存HTML页面文件：在记事本菜单栏中单击“文件”→“保存”，在弹出的“另存为”对话框中选择存放的文件夹“第1章”，文件名栏中输入“Cha1-1.htm”，选择保存类型为“所有文件”，如下图所示。 ③ 最后单击【保存】，则一个文件名为“Cha1-1.htm”的HTML网页文件创建完毕。下图所示就是保存在第1章文件夹下的HTML网页文件“Cha1-1.htm”。 HTML文件的后缀名为.htm或.html。 (2) 浏览HTML页面 找到“Cha3-1.htm”文件，双击它，或右键单击后再单击“打开”，显示结果如图所示。 ? Cha1-1.htm文档说明 head到/head称为头部 “title简单网页示例/title”定义页面标题； “!--”和“--”之间的内容构成注释部分。注释可以有多行，注释的内容不会在浏览器上显示。 body到/body是内容部分 “p 进入/p”是定义一段文字“进入”； “hr”是设置一条水平线； “h1 Web世界! /h1”是以“h1”字号(最大号)定义一个标题“Web世界!”。 1.1.3 HTML文档中的标签 HTML文档是纯文本文件，由如 html、/html 、P、/P、h1 这样一些标签组成。标签用来标记文档中的元素，以设置文档的布局、文字的格式、图象的位置等等。 标签结构： 标签名字 属性1 属性2 … 说明： 标签中的标签名字不可少，但属性可选, 如html就是没包含属性。 标签中的字母不区分大小写，如html可写成HTML。 “”与标签名字之间不能有空格，标签名字中也不能加入空格(尾标签中也，同样)。 标签有双标签和单标签之分。 双标签是由…和/…组成的成对标签。 如 html 和 /html 是一对双标签。单标签就是只有始标签而没有尾标签的，控制的内容跟随其后。 如hr就是个单标签。 1.1.4 HTML文档的基本结构 1. HTML文档的基本结构 html /html head 头部信息 /head body 文档主体(正文) /body 文档开始 头部 主体 文档结束 2. HTML文档的头部 HTML文档的头部在head、/head双标签中，但头标签对head、