html网页设计教程(推荐).ppt

1、HTML网页设计教程,HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言,Html的概念,所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。,如何创建一个HTML文档,HTML只是一个纯文本文件。 创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。 编辑：HTML编辑器是用于生成和保存HTML文档的

2、应用程序：记事本、word、Frontpage、Dreamweaver 浏览：WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。,HTML文档的基本结构, - 开始标签 一个简单的HTML示例 欢迎光临我的主页 结尾标签,如何保存和编辑html文件,在记事本里输入html文件代码 保存成*.html或*.htm为扩展名的文件。 如果要修改编辑，在菜单里打开“查看源文件”。修改完后再保存。,Meta标签,Meta:about,关于。关于文档的概要信息。 比如说作者，关键字，内容提要，编码等信息。 比如gb2312是编码信息，简体中文 Big5:繁体中文 Author,

3、password,标签,和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 HTML的标签分单标签和成对标签两种。成对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于这对标签中 的文档。, ,无标题文档 ,html的主体标签,在和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。 标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方式。,标签的属性,属性描述 Background 设定页面背景图像 bgcolor 设定页面背景颜色 leftmargin 设定页面的左边距（像素） Topmargin 设定页面的上边距 Bgprope

4、rties=“fixed” 设定页面背景图像为固定，不随页面的滚动而滚动 Text 设定页面文字的颜色 格式：,颜色的设定,两种方法： 1、颜色值的关键字：比如white, black, red，green, blue等,2、颜色是由 “red” “green” “blue ” 三原色组合而成的，用6位的十六进制值表示。#rrggbb,如： 红色： red=ff, green= 00, blue= 00, RGB值即为#ff0000 绿色： red=00, green=ff, blue= 00, RGB值即为 00ff00 蓝色： red=00, green= 00, blue= ff, RG

5、B值即为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(像素）或百分比（%）默认值为 100% Align= left, center, right 设置水平分隔线的对齐方式 默认值为 center 4、color设置水平分隔线的颜色，默认值为

7、black 5、noshade取消水平分隔线的3d阴影,文字的设置,主要内容 标题字标记 字体标记 文字的修饰标记,标题字标记, n的取值为1,2,3,4,5,6，分别表示一级、二级.六级标题。字体由大到小,Hn的对齐属性,字体标记,用.标记可以更改页面中的字体，字号和颜色。 其属性为： Face :字体 ,如“宋体”，“黑体” Size :字号，取值为1到7。1最小，7最大,默认值为3 Color:颜色 示例： .,文字的修饰标记,粗体：. . 斜体：. . . 上标：.,下标：. 大字号：. 将当前字加大一号 小字号：. 将当前字缩小一号,文字的修饰标记(2),下划线：. 删除线：. .

8、等宽字：. . .,特殊符号,空格符：,注释标记,. 或,建立列表,本节要点(list) 列表的标记 无序列表 有序列表 嵌套列表,在html页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。 列表分为两类，一是无序列表，一是有序列表。 无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。 有序条列就是指各条列之间是有顺序的，比如从1、2、3一直延伸下去。,无序列表,无序列表使用的一对标签是，无序列表指没有进行编号的列表, 每一个列表项前使用。 的属性type有三个选项：disc实心圆，默认值 circle空心圆squa

9、re小方块如果不使用其项目的属性值,即默认情况下的会加实心园。, 颜色 红色 绿色 蓝色 紫色 ,格式1: 第一项第二项第三项 格式2 第一项 第二项 第三项 ,有序列表,有序列表和无序列表的使用格式基本相同，它使用标签，每一个列表项前使用。 列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。,顺序编号的设置是由的两个属性type和start来完成的。 start=n 开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在标签中设定value“n”改变列表行项目的特定编号，例如。 type=用于编号的数字,字母等的类型，如type=a，则编号用英文

10、字母。 为了使用这些属性，把它们放在或的初始标签中。,type 类 型描 述 type=1表示列表项目用数字标号（1,2,3.）,默认值 type=A表示列表项目用大写字母标号（A,B,C.） type=a表示列表项目用小写字母标号（a,b,c.） type=I表示列表项目用大写罗马数字标号（,.） type=i表示列表项目用小写罗马数字标号（i,ii,iii.）,定义列表/,定义列表的标记也叫描述性列表，定义列表默认为两个层次，第一层为列表项标签，第二层为注释项标签。 列表 列表是*,示例,定义性列表定义性列表 WWW： WWW是(World wide web)的缩写，也可简写web; WW

11、W： WWW又叫万维网; WWW： internet提供的最常用的服务是WWW;,建立超链接,本节要点 关于超链接 链接标记 内部链接的建立 书签链接的建立 外部链接的建立,关于超链接,HTML文件中最重要的应用之一就是超链接，超链接（hyper link)是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。,超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超链接。 超链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画，通过它们我们可享受丰富多采的多媒体世界。,建立超链接的标签和,格式为： 超链接名称 说明： 标签表

12、示一个链接的开始，表示链接的结束； 属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问,建立目标窗口的属性,target属性值描 述 _parent 在上一级窗口中打开，一般使用分帧的框架页会经常使用 _blank在新窗口打开 _self在同一个帧或窗口中打开，这项一般不用设置 _top在浏览器的整个窗口中打开，忽略任何框架,链接路径,每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resource Locator)中文名字为统一资源定位器。指的就是每一个网站都具有的

13、地址。同一个网站下的每一个网页都属于同一个地址之下. 例如：新浪网的网址：,路径可以分以下三种,绝对路径如： 相对路径如：news/index.html 根路径如：如：/web/highight/shouey.html 或 d：/web/news/index.html,1、绝对路径,绝对路径：包含了标识INTERNET上的文件所需要的所有信息。包括完整的协议名称，主机名称，文件夹名称和文件名称 ,2、相对路径,相对路径是以当前文件所在路径为起点，进行相对文件的查找。 一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名

14、和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。,相对路径分三种情形 如果链接到同一目录下，则只需输入要链接文件的名称。 要链接到下级目录中的文件。需先输入目录名，然后加“，再输入文件名。 要链接到上一级目录中文件，则先输入.，再输入文件名。,相对路径的用法,相对路径名 含 义 herf=“shouye.html“ shouye.html 是本地当前路径下的文件 herf=“web/shouye.html“ shouye.html 是本地当前路径下称做”web”子目录下的文件 herf=“./sho

15、uye.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.html 超链接元素 1-1.html sy.html 超链接元素 sy.html 2-1.html 超链接元素,3、根路径,根路径目录地址同样可用于创建内部链接，但大多数情况下，

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

17、页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，这种效果就可以通过书签链接来实现。 书签链接可以在同一页面中链接，也可以在不同页面中链接，在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置,书签链接,建立书签链接分两 步，一是建立书签；二是为书签制作链接。 建立书签 语法： 文字 制作链接 链接到同一页面 语法：文字链接 链接到其他页面 语法：文字链接,在站点内部建立链接,所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被

18、链接文件。 在前面介绍链接路径时，已经给大家介绍了内部链接概念，内部链接一般采用相对路径链接比较好。,外部链接,外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。 这种链接的URL地址一般要用绝对路径，要有完整的URL地址，包括协议名，主机名，文件所在主机上的的位置的路径以及文件名。,URL外链部接格式,服 务 URL格式 描 述 WWW http:/“” 进入万维网站点 Ftp ftp:/” 进入文件传输协议Telnet telnet:/” 启动Telnet方式Email email:/” 启动邮件 进入新浪网,链接其它站点,站点之间的页面和元素的链接是万维网交流

19、信息的关键，这种链接用HTTP协议来建立网站之间的超链接。 格式： 例如： 新浪网清 华 大 学,发送E-mail,在HTML页面中，可以建立E-mail链接。当浏览者单击链接后，系统会启动默认的本地邮件服务系统发送邮件。 基本语法：描述文字 邮件的参数 subject 电子邮件主题 Cc 抄送收件人 Body 主题内容 Bcc 暗送收件人 如果希望同时写下多个参数，则参数之间使用&分隔符。,例, 向桑桑发送邮件,图片的插入,网页中图像的插入，使得网页内容丰富多彩。 本节主要内容： 图片的格式 图片的插入 图片的超链接 图像映射,图片的格式,JPG（JPEG）：通常用来显示照片等颜色丰富的图像

20、。可以高效地压缩，并且丢失的是人眼不易觉察的部分图像，使图像文件变小的同时基本不失真。 GIF：在网页中大量用于站点图标Logo,广告条Banner和网页背景图像等。它可以图像变得非常小，也可以在网页中以透明方式显示，而且可以包含动态信息，是网页上大量使用的图片格式之一。 PNG：便携网络图像。既有GIF透明显示的特点，又具有JPEG处理精美图像的优势，且可包含图层等信息，常用于制作网页效果图，目前已逐渐成为网页图像的主要格式,插入图片标记,格式： 的属性 Src：插入图像的路径。 Alt：提示文字。提示文字有两个作用：一是当浏览该网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁会出现提示文

21、字；二是当图像没有被下载时，在图像的位置会出现提示文字。 Width、Height：图像的宽度和高度，单位为像素或百分比。 Align：图像和文字的对齐方式。,Border：默认图片无边框。可用此属性设置边框线的宽度，单位为像素。 Vspace：图像的垂直间距。指图像垂直方向上和文字的距离。 Hspace：图像的水平间距。指图像水平方向上和文字的距离。,图片的超链接,图片的超链接标记与文字超链接相同，都是 格式： ,图像映射,一张图片可以有多个超链接 一张图片被切分成不同的区域，每一个不同的区域可以链接到不同的地址，这称为图像的热区。 每一个热区可以有各自的链接地址。浏览者单击热区后，就会跳转

22、到相应的地址，这 就是图像映射。,图像映射标记,图像映射由定义 影像地图（Image Map）标签的使用格式： 可根据需要定义多少个热点区域,图像映射例子, ,图像映射标记,标记属性 Shape :定义图像映射区的形状。有三种：rect(矩形 )、circle(圆)、poly(多边形)。 Href：链接地址。 Coords：设定区域坐标。,图像映射标记,coords - 定义区域点的坐标 a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例： c.任意图形（多边形）：将图形之每一转折点座标依序

23、填入 例：,TABLE表格,表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.,本节主要内容,制作表格 表格的标题和表头 行标记属性 单元格属性,制作表格,表格的三个标记 表格标记 行标记 . 单元格标记 . Border=n ,n为像素值，表示表格边框的粗细，默认 n为0,基本语法, ,标签的属性,属 性 描 述 Width 表格的宽度，像素值或百分比 Height 表格的高度，像素值或百分比 Align 表格在页面的水平摆放位置，取值left, center , right Background

24、表格的背景图片 Bgcolor 表格的背景颜色 Border 表格边框的宽度（以像素为单位） Bordercolor 表格边框颜色,标签的属性,Cellpadding Cellspacing,行标签的属性,Align 行内容的水平对齐，取值left, center , right Valign行内容的垂直对齐，取值top, bottom Background 行的背景图片 Bgcolor 行的背景颜色 Bordercolor 行的边框颜色,单元格标签（)的属性,Width 单元格的宽度，像素值或百分比 height 单元格的高度，像素值或百分比 Align 单元格内容的水平对齐，取值left,

25、 center , right Valign 单元格内容的垂直对齐，取值top, middle, bottom Background 单元格的背景图片 Bgcolor 单元格的背景颜色 Bordercolor 单元格的边框颜色 Rowspan 跨行属性 Colspan 跨列属性,表格标题和表头标签,表格标题标签： .,它要放在中 表格标题的属性 水平对齐属性 align=left, center, right 垂直对齐属性 valign=top, bottom,表头标签,表头标签：. 它与的用法一样，唯一区别是标记的内容居中加粗显示。 它的属性也与一样。,Rowspan和Colspan的用法,

26、基本语法 其中n为要跨的行数或列数。,表格实例,表单的设计,表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。 表单的处理过程是：当用户填写完信息后做提交(submit)操作，表单中输入的信息就从客户端的浏览器传送到服务器上，然后 经过服务器上的处理程序处理，或者将用户提交的信息储存在服务器端的数据库中，或者将用户所需信息传送回客户端的浏览器上。 一般表单由两个部分组成：一是描述表单元素的HTML源代码；二是客户端的脚本（或者服务器端用来处理用户所填信息的程序）。,本节主要内容,表单的概念 表单标记 输入标记 菜单和列表标记 文字域标记,表单(FORM)标记,

27、邮箱登录表单,用户注册表单,表单标记,表单是网页中的一个特定区域，这个区域是由一对 .标记定义的。 该标记有两个方面的重要作用： 一是限定表单的范围。其他的表单对象，都要插入到表单中，单击提交按钮时，提交的也是表单范围内的内容。 二是携带表单的相关信息，比如处理表单的脚本程序的位置、提交表单的方法等。这些信息对浏览者是不可见的，但对于 处理表单却有着决定性的作用。,基本语法, . Name:表单的名称 Method:定义表单结果从浏览器传送到服务器的方法，一般有两种：Get和Post. Action:用来定义表单处理程序的位置（相对地址或绝对地址）,Method方法,Get方法是将表单内容附加

28、在URL地址后面，所以对提交信息的长度进行了限制，最多不可以超过8K个字符。若信息太长，将被截去，从而导致意想不到的结果。同时Get方法不具有保密性，不适合处理如信用卡卡号等要求保密的内容，而且不能传送非ASCII码字符。 Post方法是将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器上的处理程序中，该方法没有字符的限制。在浏览器的地址栏不显示提交的信息，传送的数据也没有限制。,内的标记,：表单输入标记 ：菜单和列表标记 ：菜单和列表项目标记 ：文字域标记 如下代码： . . . ,写入标记,标志用来定义一个用户输入区，用户可在其中输入信息。 该标记是单个标记，没有结束标记。必须放

29、在 标志对之间。 标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定,标记,基本语法 Name:域的名字。此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的。服务器就是通过调用某一输入区域的名字的value值来获得该区域的数据的。而value属性是另一个公共属性，它可用来指定输入区域的缺省值。 type:域的类型。,Type属性值,Text 文字域 Password 密码域 Radio 单选框 Checkbox 复选框 Button 普通按钮 Submit 提交按钮 Reset 重置按钮 File 文件域 Image 图像域,文字域Text,Text属性值用来设

30、定在表单的文本域中，输入任何类型的文本、数字或字母。输入的内容以单行显示。 文字域的属性 Name 文字域的名称 Maxlength 文字域的最大输入字符数 Size 文字域的宽度（以字符为单位） Value 文字域的默认值,密码域Password,在表单中还有一种文本域的形式为密码域，输入到文本域的文字均以“*”表示。 密码域的属性 Name密码域的名称 Maxlength密码域的最大输入字符数 Size密码域的宽度（以字符为单位）,文件域File,文件域可以让用户在域的内部填写自己硬盘中的文件路径，然后通过表单上传，这是文件域的基本功能。 文件域的外观是一个文本框加一个浏览按钮，用户可以直

31、接将要上传给网站的文件的路径填写在文本框中，也可以单击浏览按钮，在自己的按钮中找到要上传的文件。,复选框Checkbox,复选框能够进行项目的多项选择，以一个方框表示。 基本语法 说明： checked表示此项被默认选中， name值不同 value表示选中项目后传送到服务器端的值。,单选框Radio,单选框能进行项目的单项选择，以一个圆框表示。 基本语法 说明： checked表示此项被默认选中 Name必须有，且必须相同。 value表示选中项目后传送到服务器端的值。,普通按钮Button,表单中的按钮起着重要的作用，可以激发提交表单的动作，可以在用户需要修改表单的时候，将表单恢复到初始的

32、状态，还可以依照程序的需要，发挥其它的作用。 普通按钮主要是配合javascript脚本来进行表单的处理。 基本语法： 说明： value表示显示在按钮上的文字,提交按钮Submit,单击提交按钮后，可以实现表单内容的提交。 基本语法： ,重置按钮Reset,单击重置按钮后，可以清除表单的内容，恢复默认的表单内容设定。 基本语法： ,图像域Image,图像域是指可以用在提交按钮位置上的图片，此图片具有按钮的功能。 使用默认的按钮形式往往会让人觉得单调，使用图像域可以增加网页美观。 基本语法： ,隐藏域Hidden,对于用户来说，隐藏域是看不见的。 在表单中插入隐藏域的目的在于收集或发送信息，以

33、便于被处理表单的程序所使用。浏览者在单击提交按钮发送表单时，隐藏域的信息也被一起发送到服务器。 基本语法： ,菜单和列表标记,菜单和列表是为了节省网页空间而产生的。 菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。 列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。,菜单和列表标记,通过和 标记可以设计页面中的菜单和列表项。 基本语法： 选项 选项 . ,说明： Size:显示的选项数目 Multiple:列表中的项目多选 Value:选项值 Selected:默认选项。,例1, 下拉列表框 请

34、选择最喜欢的颜色: 绿色 蓝色 白色 红色 ,文字域标记Textarea,用此标记可以制作多行的文字域，可以在其中输入更多的文本。 基本语法： 说明： Rows: 行数 Cols: 列数,综合练习,表单制作实例,网页与多媒体,在网页中插入多媒体，可以使网页内容更丰富多彩 本节主要内容 滚动的文字 多媒体内容的嵌入 背景音乐,滚动文字,滚动文字标记 意思： 走马灯 格式： 滚动的文字,属性参数： Direction:滚动方向，其值有：up,down,left,right Behavior:滚动方式，其值有：scroll(循环往复)、slide(单次)、alternate(交替) Scrollam

35、ount：滚动速度，整数值。 Scrolldelay：每一次滚动的时间延迟。单位为ms. Loop:循环次数。 Width、Height：滚动的区域。单位为像素。 Bgcolor：滚动文字的背景色。,滚动字幕啦啦啦我会跑了啦啦啦我会往上跑了啦啦啦我会往上跑了啦啦啦我会往右跑了啦啦啦我会往下跑了啦啦啦我来回地跑啦啦啦我跑到目的地就该休息了啦啦啦我累了，要慢慢地溜达啦啦啦我累了，我要走走停停哈哈都没有我跑得快啦啦啦图片也可以啊,多媒体内容的嵌入,在网页中可以放置MP3、电影，SWF动画等。 格式： Width, height:设定播放控件面板的大小 Hidden:隐藏播放控件面板 Autostart：是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。,背景音乐,在网页中可以嵌入背景音乐，多以MIDI文件为主，它的优点是占的数据量小。 格式： Loop:n表示重复次数；Infinite 表示重复多次，直到网页关闭为止。,框架,定义： 框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。 使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便地完成导航