html网页设计教程(推荐)课件

《html网页设计教程(推荐)课件》由会员分享，可在线阅读，更多相关《html网页设计教程(推荐)课件（127页珍藏版）》请在金锄头文库上搜索。

1、HTML网页设计教程,HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页,Html的概念,所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。,如何创建一个HTML文档

2、,HTML只是一个纯文本文件。 创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。 编辑：HTML编辑器是用于生成和保存HTML文档的应用程序：记事本、word、submit、Dreamweaver,notepad+ 浏览：WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。,HTML文档的基本结构, - 开始标签 一个简单的HTML示例 欢迎光临我的主页 结尾标签,如何保存和编辑html文件,在记事本里输入html文件代码 保存成*.html或*.htm为扩展名的文件。 如果要修改编辑，在菜单里打开“查看源文件”。修改完后再保存。,Meta

3、标签,Meta:about,关于。关于文档的概要信息。 比如说作者，关键字，内容提要，编码等信息。 比如gb3212是编码信息，简体中文 Big5:繁体中文 Author, password,标签,和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 HTML的标签分单标签和成对标签两种。成对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于这对标签中 的文档。, ,无标题文档 ,html的主体标签,在和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。 标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方式。,标签的属性,属性描述

4、Background 设定页面背景图像 bgcolor 设定页面背景颜色 leftmargin 设定页面的左边距（像素） Topmargin 设定页面的上边距 Bgproperties=“fixed” 设定页面背景图像为固定，不随页面的滚动而滚动 Text 设定页面文字的颜色 格式：,颜色的设定,两种方法： 1、颜色值的关键字：比如white, black, red，green, blue等,2、颜色是由 “red” “green” “blue ” 三原色组合而成的，用6位的十六进制值表示。#rrggbb,如： 红色： red=ff, green= 00, blue= 00, RGB值即为#f

5、f0000 绿色： red=00, green=ff, blue= 00, RGB值即为 00ff00 蓝色： red=00, green= 00, blue= ff, RGB值即为0000ff,颜色的设定（2）,黑色： red=00, green=00, blue=00, RGB 值即为 000000 例如： 白色： red=ff, green=ff, blue= ff,RGB 值即为ffffff 应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor=#336699 用英文名字表示颜色时直接写名字。如 bgcolor=“green “,文字版面的编辑,换行标签 换行标签是个

6、单标签，也叫空标签，不包含任何内容 . 不换行标签 预排版标签 缩排标签. ,段落标签及属性,由标签所标识的文字，代表同一个段落的文字。 它可以单独使用，也可以成对使用。 两种格式： . 显示一个空行,标签的属性,其中,Align是标签的属性，参数的取值为： Left 左对齐 Center 居中对齐 Right 右对齐.,居中对齐标签center,格式： ,水平分隔线标签,标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。,标签的属性,size设置水平分隔线的粗细 pixel(像素）2 width设置水平分隔线的宽度pixel(像素）或百分比

7、（%）默认值为 100% Align= left, center, right 设置水平分隔线的对齐方式 默认值为 center 4、color设置水平分隔线的颜色，默认值为black 5、noshade取消水平分隔线的3d阴影,文字的设置,主要内容 标题字标记 字体标记 文字的修饰标记,标题字标记, n的取值为1,2,3,4,5,6，分别表示一级、二级.六级标题。字体由大到小,Hn的对齐属性,字体标记,用.标记可以更改页面中的字体，字号和颜色。 其属性为： Face :字体 ,如“宋体”，“黑体” Size :字号，取值为1到7。1最小，7最大,默认值为3 Color:颜色 示例： .,文字

8、的修饰标记,粗体：. . 斜体：. . . 上标：.,下标：. 大字号：. 将当前字加大一号 小字号：. 将当前字缩小一号,文字的修饰标记(2),下划线：. 删除线：. . 等宽字：. . .,特殊符号,空格符：,注释标记,. 或,建立列表,本节要点(list) 列表的标记 无序列表 有序列表 嵌套列表,在html页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。 列表分为两类，一是无序列表，一是有序列表。 无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。 有序条列就是指各条列之间是有顺序的，比如从1、2、3一直延伸

9、下去。,无序列表,无序列表使用的一对标签是，无序列表指没有进行编号的列表, 每一个列表项前使用。 的属性type有三个选项：disc实心圆，默认值 circle空心圆square小方块如果不使用其项目的属性值,即默认情况下的会加实心园。, 颜色 红色 绿色 蓝色 紫色 ,格式1: 第一项第二项第三项 格式2 第一项 第二项 第三项 ,有序列表,有序列表和无序列表的使用格式基本相同，它使用标签，每一个列表项前使用。 列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。,顺序编号的设置是由的两个属性type和start来完成的。 start=n 开始的数字，如start=

10、2则编号从2开始，如果从1开始可以省略，或是在标签中设定value“n”改变列表行项目的特定编号，例如。 type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。 为了使用这些属性，把它们放在或的初始标签中。,type 类 型描 述 type=1表示列表项目用数字标号（1,2,3.）,默认值 type=A表示列表项目用大写字母标号（A,B,C.） type=a表示列表项目用小写字母标号（a,b,c.） type=I表示列表项目用大写罗马数字标号（,.） type=i表示列表项目用小写罗马数字标号（i,ii,iii.）,定义列表/,定义列表的标记也叫描述性列表，定义列表默认为两

11、个层次，第一层为列表项标签，第二层为注释项标签。 列表 列表是*,示例,定义性列表定义性列表 WWW： WWW是(World wide web)的缩写，也可简写web; WWW： WWW又叫万维网; WWW： internet提供的最常用的服务是WWW;,建立超链接,本节要点 关于超链接 链接标记 内部链接的建立 书签链接的建立 外部链接的建立,关于超链接,HTML文件中最重要的应用之一就是超链接，超链接（hyper link)是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。,超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即

12、称为超链接。 超链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画，通过它们我们可享受丰富多采的多媒体世界。,建立超链接的标签和,格式为： 超链接名称 说明： 标签表示一个链接的开始，表示链接的结束； 属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问,建立目标窗口的属性,target属性值描 述 _parent 在上一级窗口中打开，一般使用分帧的框架页会经常使用 _blank在新窗口打开 _self在同一个帧或窗口中打开，这项一般不用设置 _top在浏览器的整个窗口中打开，忽略任何框架,链接路径,每一个文件都有自己的存放位置和路径，

13、理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resource Locator)中文名字为统一资源定位器。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下. 例如：新浪网的网址：,路径可以分以下三种,绝对路径如： 相对路径如：news/index.html 根路径如：如：/web/highight/shouey.html 或 d：/web/news/index.html,1、绝对路径,绝对路径：包含了标识INTERNET上的文件所需要的所有信息。包括完整的协议名称，主机名称，文件夹名称和文件名称 ,2、相对路径,相对路径是以

14、当前文件所在路径为起点，进行相对文件的查找。 一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。,相对路径分三种情形 如果链接到同一目录下，则只需输入要链接文件的名称。 要链接到下级目录中的文件。需先输入目录名，然后加“，再输入文件名。 要链接到上一级目录中文件，则先输入.，再输入文件名。,相对路径的用法,相对路径名 含 义 herf=“shouye.html“ shouye

15、.html 是本地当前路径下的文件 herf=“web/shouye.html“ shouye.html 是本地当前路径下称做”web”子目录下的文件 herf=“./shouye.html“ shouey.html 是本地当前目录的上一级子目录下的文件 herf=././shouye.html“ shouye.html 是本地当前目录的上两级子目录下的文件,相对路径的具体的链接方法,如图示:,当前页面 被链接页面 超链接 2-1.html 3-1.html 超链接元素 3-1.html 1-1.html 超链接元素 sy.html 1-1.html 超链接元素 2-1.html sy.htm

16、l 超链接元素 1-1.html sy.html 超链接元素 sy.html 2-1.html 超链接元素,3、根路径,根路径目录地址同样可用于创建内部链接，但大多数情况下，不建议使用此种链接形式。 根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。,链接本地机器上的文件时，应该使用相对路径还是根路径？,在绝大多数情况下使用相对路径比较好，例如，用绝对路径定义了链接，当把文件夹改名或者移动之后，那么所有的链接都要失败，这样就必须对你的所有html文件的链接进行重新编排，而一旦将此文夹件移到网络服务器上时，需要重新改动的地方就更多了，那是一件很麻烦的事情。而使用相对路径，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。,超链接的应用-书签链接,链接文档中的特定位置也叫书签链接 在浏览页