1、1第第8章章 网页设计基础网页设计基础n掌握掌握HTML文档结构。文档结构。n了解并掌握了解并掌握HTML的基本语法的基本语法n初步掌握基本标记的使用。初步掌握基本标记的使用。n能够使用能够使用FrontPage制作网页制作网页n能够将制作的网页发布到能够将制作的网页发布到Internet上上28.1 概述(1)n网页的基本概念网页的基本概念n是一个文本文件，以是一个文本文件，以html或或htm作为扩展名作为扩展名n通过通过html标记将文字、图片等信息组织在一起标记将文字、图片等信息组织在一起n在浏览器上呈现出一幅幅图片在浏览器上呈现出一幅幅图片n网页的基本组成网页的基本组成n文字文字n图
2、像图像n超级链接超级链接38.1 概述(2)n网页制作方法网页制作方法n利用利用HTML语言所定义的标记及其属性来编写语言所定义的标记及其属性来编写一个文本文件。用一个文本文件。用htm或或html作为文件的扩作为文件的扩展名。展名。n网页制作软件网页制作软件n文本编辑工具文本编辑工具(记事本、记事本、EditPlus);n专业网页制作软件，专业网页制作软件，FrontPage、Dreamweaver等等;n一些图像处理软件，如一些图像处理软件，如PhotoShop等等.48.2.1 HTML语言概述(1)nHTML（Hypertext Markup Language，超文本标，超文本标记语言
3、），专门用来编写网页。记语言），专门用来编写网页。n HTML描述文件结构格式的方法是利用一些指令符号，描述文件结构格式的方法是利用一些指令符号，来标记表示出各种文件效果，再由浏览器来解读来标记表示出各种文件效果，再由浏览器来解读HTML的指令符号，将文件格式效果展现出来，的指令符号，将文件格式效果展现出来，HTML是一种是一种标记标记式的语言。式的语言。n在在HTML里，图形、声音必须用其它软件制作，再用里，图形、声音必须用其它软件制作，再用HTML的标记的标记编排编排在网页的原始文件里，然后浏览器在网页的原始文件里，然后浏览器才能解读这些原始文件，并在屏幕上展示其效果。才能解读这些原始文件
4、，并在屏幕上展示其效果。58.2.1 HTML语言概述(2)网页标题网页标题正文部分正文部分6第一个HTML例子简单的网页制作简单的网页制作这是我的第一个网页这是我的第一个网页7第一个HTML例子浏览效果88.2.1 HTML语言概述(3)nHTML标签结构标签结构n标签是用尖括号标签是用尖括号(英文半角英文半角)括起来的控制符。括起来的控制符。一般一般HTML标签都具有开始和结束控制符，如标签都具有开始和结束控制符，如和和。也有少量没有结束。也有少量没有结束控制符的标签，如控制符的标签，如、等。等。n大多数标签都具有属性，属性写在标签的开始大多数标签都具有属性，属性写在标签的开始控制符中。如
5、：控制符中。如： n标签书写与字母大小写无关。标签书写与字母大小写无关。98.2.1 HTML语言概述(4)nHTML文件结构文件结构n一般来说，整个一般来说，整个HTML文件以文件以开头，以开头，以结束，中间分成两个部分：一部分是结束，中间分成两个部分：一部分是“标头标头区区”；一部分是；一部分是“主体区主体区”。n文件开始和结束标签文件开始和结束标签n以以开始，以开始，以标签结束，告诉浏览器这是一标签结束，告诉浏览器这是一个个HTML网页文件。网页文件。n标头区标头区n有一对有一对来定义，它紧跟在来定义，它紧跟在之后。之后。在此可以利用在此可以利用和和来定义网页的标题，以及来定义网页的标题
6、，以及其它的内容，如其它的内容，如CSS，JavaScript和和等。等。n主体区主体区n主体区使用主体区使用和和来定义，网页中的主体内容来定义，网页中的主体内容都应用写在主体区中。都应用写在主体区中。108.2.2 HTML基本标记(1)n标记标记n常用属性：常用属性：TEXT 文字的颜色文字的颜色LINK 链接文字颜色链接文字颜色VLINK 已链接过的文字颜色已链接过的文字颜色ALINK 被按下链接文字颜色被按下链接文字颜色BGCOLOR 背景颜色背景颜色BACKGROUND背景图形背景图形n颜色表示：颜色表示：n以颜色的英文名表示，如以颜色的英文名表示，如White、red、blue等等
7、n以以RRGGBB代表各种颜色。代表各种颜色。RR=Red红色，其值为红色，其值为00-FF GG=Green绿色，其值为绿色，其值为00-FF BB=Blue 蓝色，其值为蓝色，其值为00-FF利用这三种颜色值的组合，可配出各种颜色。利用这三种颜色值的组合，可配出各种颜色。118.2.2 HTML基本标记(2)n文字的编辑文字的编辑n（字体字体）n属性：属性：face=字体名字体名n属性：属性：size=字体大小字体大小(1-7)n属性：属性：color=字体颜色字体颜色n（分段分段）n属性：属性：align=对齐方式对齐方式,可以为可以为left、center、rightn (分行分行)n
8、 、 、 （字体样式字体样式）n(其中其中n=1.6)（标题）（标题）n下标下标 、 上标上标 n（水平分隔线水平分隔线）128.2.2 HTML基本标记(3)n滚动字幕滚动字幕标记标记n移动区域的大小设置移动区域的大小设置 width=? 和和height=?n移动方向属性的设置移动方向属性的设置 direction=# , #=left, right,up,down (目的方向目的方向)n移动方式属性的设置移动方式属性的设置 behavior=# , #=scroll, slide, alternaten移动速度属性的设置移动速度属性的设置 scrollamount=# ,默认值为默认值为
9、6，越大移动越快，越大移动越快n特殊符号表示特殊符号表示n 空格空格 ： n(大于号大于号) ：> (小于号小于号) ：<n版权所有版权所有 ：©n注册商标注册商标 ：®138.2.2 HTML基本标记(4)n有序列表有序列表nOL type=? Start=? n列表项列表项n列表项列表项nn其中其中type=? ， ?可以为可以为A、I、数字、数字n其中其中start=?， ?指定序列开始的序号指定序列开始的序号n无序列表无序列表nntype=? ,？可以为？可以为square、circle148.2.2 HTML基本标记(5)n使用图像使用图像n常
10、用图片格式常用图片格式nGIF格式格式 ：最多表示：最多表示256色，支持透明和动画。色，支持透明和动画。nJPEG格式格式 ：压缩率很高，颜色丰富。：压缩率很高，颜色丰富。nPNG格式：适应于任何类型、任何颜色深度的图格式：适应于任何类型、任何颜色深度的图片。片。n标记及其属性：标记及其属性：nsrc=要显示的图像的要显示的图像的URLnwidth= px或或%nheight=px或或%nalign= left或或rightnalt=？浏览器无法显示图形时，出现的替代文字？浏览器无法显示图形时，出现的替代文字158.2.2 HTML基本标记(5)n创建超级链接创建超级链接nURL的概念的概念
11、nHTML利用统一资源定位器（利用统一资源定位器（URL）定位）定位Web上的文档信上的文档信息。息。 一个一个URL包括包括3个部分：一个协议代码、一个装有所个部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址或一个新闻组需文件的计算机地址（或一个电子邮件地址或一个新闻组名称），以及包含有信息的文件地址和文件名。名称），以及包含有信息的文件地址和文件名。n相对相对url和绝对和绝对urln绝对绝对URL是指是指Internet上资源的完全地址，包括协议种类、上资源的完全地址，包括协议种类、计算机域名和包含路径的文档名。如：计算机域名和包含路径的文档名。如：http:/ HT
12、ML基本标记(6)n超级链接标记超级链接标记 及其常用属性及其常用属性nhref=超级链接的目的超级链接的目的urlntitle=提示信息（鼠标移动到超级链接上出现）提示信息（鼠标移动到超级链接上出现）n？之间是超级链在页面上的入口，可以之间是超级链在页面上的入口，可以是文字，图片等。是文字，图片等。n例如：例如：信息工程学院信息工程学院178.2.2 HTML基本标记(7)n使用表格使用表格n表格示例表格示例:n表头表头1 表头表头2表项表项1 表项表项2 n188.2.2 HTML基本标记(8)n表格标记表格标记n表格标记符表格标记符n使用使用()定义表格，表格的所有内容定义表格，表格的所
13、有内容都放在开始标记都放在开始标记和结束标记和结束标记之间。之间。n行行n用用()定义表的行定义表的行n表头表头n表头即表格的行标题或列标题。用表头即表格的行标题或列标题。用()定义表定义表格的表头，以居中对齐粗字体显示。格的表头，以居中对齐粗字体显示。n表元表元(表格的具体数据表格的具体数据)n用用()定义表格的列。定义表格的列。198.2.2 HTML基本标记(9)n框架框架n框架集框架集使用使用 定义框定义框架，框架的所有内容都放在开始标记架，框架的所有内容都放在开始标记和结束标记和结束标记之之间。间。n框架框架n框架集可也嵌套框架集可也嵌套n写在写在标记外部，标记外部，放在放在标记之前
14、标记之前208.3 使用FrontPage制作网页n本地站点的管理本地站点的管理n规划站点结构（目录）的原则规划站点结构（目录）的原则nFrontPage的管理功能规划和管理站点的管理功能规划和管理站点n网页文档的建立及页面编排网页文档的建立及页面编排n页面属性的设置页面属性的设置n文字的设置文字的设置n段落的设置段落的设置n图像的使用图像的使用n超级链接的建立超级链接的建立n表格的基本操作及用表格进行页面布局表格的基本操作及用表格进行页面布局218.4 网页信息的发布n发布的概念发布的概念n为什么要进行网页的发布为什么要进行网页的发布n发布的方法发布的方法n直接拷贝直接拷贝nFTP上传上传n利用利用FrontPage自带的功能发布自带的功能发布
