《网页设计基础.ppt

网页设计基础 2013年3月制作 第2章 HTML网页设计基础 学习目标： 理解什么是HTML，扩展名为.htm的文件是什么文件？ 掌握HTML文件的编辑与运行方法 理解 2.1 HTML基础知识 一、HTML的编辑与运行环境： Html文档是以.htm或.html为扩展名的文本文件。 Html文档是文本文件，可用记事本、写字板进行编辑；专业的编辑软件有Microsoft FrontPage、Macromedia Dreamweaver等。 HTML文档可以直接用IE打开。 浏览存储本机HTML文档时，需在地址栏中输入文件路径或双击该文件图标即可。 二、HTML文档的基本结构及组成标签： 1、基本结构 html head title网页标题/title /head body 网页正文 /body /html HTML由一系列的标签和元素组成。 标签用来规定元素的属性及其在文档中的位置。 元素可以是文字、图形、动画、声音、表格、链接等。 三、标签 1、文档标识标签html 用来表明这是一个HTML文档。 它成对出现，首标签html位于文档的开头，尾标签/html位于文档的结尾。 2、文档头标签head 用来说明HTML文档头。作用是设置文档的标题、编码和关键词等属性及用来定义一些特殊的声明，一般不直接在Web浏览器中显示。 3、网页标题标签title 用来规定网页的标题，嵌套在head标签中。 4、文档主体标签body 显示的是网页主本内容。在body标签中可以规定整个文档的一些基础属性。 如： text(指定网页的文字颜色） Bgcolor（指定网页背景颜色） Background（指定网页背景图片） Link(指定可链接文字的颜色） Vlink（指定正被单击的超链接文字的颜色） Alink（指定已被防问过的超链接文字的颜色） Topmargin（指定页面上边距） Leftmargin（指定页面左边距） 属性的颜色值可用一个以“#”开头的十六进制数表示，也可用对应的英文单词表示。如：将网页文字的颜色设为红色，可以使用代码body text=“#ff0000”或body text=“red” 常见颜色的英文名称 Black(黑色 ）olive（橄榄绿）teal（暗蓝绿） Red （红色）blue （蓝 色）maroon（栗色） Navy （海军蓝）gray（灰色） lime （青橄榄绿） Fuchsia （紫红色）white（白色） green（绿色） Purple（紫色） silver（银色） yellow（黄色） Aqua（浅蓝色） 四、书写注意事项 1）所有HTML标签都以‘’开始，以’’结束，要成对使用。 2）大部分标签是可以相互嵌套的，如： html headtitle/title/head /html 3）HTML标签是不区分大小写的，html、Html、HTML是等价的。 4）标签前后和标签属性之间可以添加任意多个空格、制表符和回车。如： body bgcolor=“red” text=“green” hi,I’m ben! 可写为： body bgcolor=“red” text=“green” hi,I’m ben! /body 或者： body bgcolor=“red” text=“green” hi,I’m ben! /body 5）HTML文档中可以添加注释，Web浏览器不会显示注释的内容。 注释以“!--”开始，以”--”结束，中间可以换行。 如： !-- 这是注释部分，不会显示在浏览器中， -- html title标题/title /html 一个简单的HTML网页示例 !-- 这是我第一次用html做网页-- html head title个人网站/title /head body欢迎来到我的网站body /html 2.2 网页中的文字与图像编辑 本节介绍网 页的文字，包括文字的基本排版方法、字体美化和字体风格的设定； 图像的插入和显示方法 文本及版面风格控制标记 1、文本格式标签 文本控制主要是控制文本的字体、字体大小和颜色，通过font标签实现。 格式： font face=fontname size=fontsize color=#RRGGBB文本/font 功能：设置网页中普通文字的显示效果。 属性： (1)Face属性用于指定文字字体，如“楷体_GB2312”、“宋体”、“黑体”等。 在使用字体时，应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。如没指定则以默认的宋体字显示 (2)color属性用于设置字体的颜色。 在HTML中颜色通常用#RRGGBB来表达，RR、