html5-img
1 / 55

第 6 章 网页制作

第 6 章 网页制作. 知识点： • HTML 语言的基本结构 • HTML 语言的基本标签 • HTML 文本的超文本链接 • HTML 语言的列表 • HTML 语言的图像 • 制作表格、框架和表单 难点： • 表格的定制 • 框架的使用 • 表单的制作. 要求： 熟练掌握以下知识： • HTMNL 文本的基本结构 • HTML 文本的头标签及常用属性、文档体标签及常用属性 • HTML 文本的文档体标签及常用属性 • HTML 语言的超文本链接标签及其常用属性 • HTML 语言的列表标签及其常用属性

jola
Télécharger la présentation

第 6 章 网页制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第6章 网页制作 知识点： • HTML语言的基本结构 • HTML语言的基本标签 • HTML文本的超文本链接 • HTML语言的列表 • HTML语言的图像 •制作表格、框架和表单 难点： •表格的定制 •框架的使用 •表单的制作

  2. 要求： 熟练掌握以下知识： • HTMNL文本的基本结构 • HTML文本的头标签及常用属性、文档体标签及常用属性 • HTML文本的文档体标签及常用属性 • HTML语言的超文本链接标签及其常用属性 • HTML语言的列表标签及其常用属性 • HTML语言的图像标签及其常用属性 了解以下知识： •表格的制作 •框架的制作 •表单的制作

  3. 6.1.1 HTML的基本结构 1. HTML（HyperText Marked Language）是WWW网页的编 程语言。 2．HTML基本结构是由标签来标识的，每个标签表示对文 挡的一种处理。 3．HTML文档可以分成头、体两部分。 头是用<head>和</head>括起来的部分。 体是用<body>和</body>括起来的部分。 用标签<html></html>作为HTML文档的整体标识。

  4. 【例】HTML文件基本结构示例。 <html> <head> <title>html的基本结构</title> </head> <body> <h1>第一个标题</h1> <p>这是一个html文件范例，应当注意的是<title></title>间的文字不会显示在主文本区，而由<h1></h1>定义的标题会显示在主文本区。

  5. HTML文件基本结构示图

  6. <title></title>所描述的“html的基本结构”文字将显示<title></title>所描述的“html的基本结构”文字将显示 在视窗的顶部。 <p>这是另一个段落。在段落內或主文本区的文字可以 象普通的文本编辑那样采用斜体或黑体等修饰。如<I>This sentence of the paragraph is in italics.</I> </body> </html> 6.1.2 HTML语言的基本标签 1．头标签 ⑴ 标题 语法格式：<title> … </title> ⑵ 文档基础URL

  7. 语法格式：<base> 常用属性： Href属性：如<base href=http://www.edu.cn/fea/1.htm> target属性，属性值有：_blank _self _parent _top ⑶ 元数据 语法格式：<meta> 常用属性：name content http-equiv charset 【例】 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0">

  8. <meta name="ProgId" content="FrontPage.Editor.Document"> ⑷ 样式表 语法格式为：<style> … </style> 常用属性：type media。 例如： <style type="text/css">a:link { text-decoration: none } a:visited { text-decoration: none } </style>

  9. 2．文档体标签 ⑴ 用标签对<body></body>来定义文档体。 在<body>标签中，可以定义整个文件的背景色、前景色 等的基本属性。 语法格式 <BODY [BGCOLOR |TEXT |LINK |ALINK |VLINK |BACKGROUND]> ┈┈ </BODY> 其中各标签属性的含义分别是： BGCOLOR：HTML的背景色 TEXT：HTML文件中的默认文字颜色 LINK：HTML文件中可链接对象的文字颜色

  10. ALINK：HTML文件中连接中超连接对象的颜色，即正被点ALINK：HTML文件中连接中超连接对象的颜色，即正被点 击的可链接文字的颜色 VLINK：HTML文件中已经链接过的超链接对象的颜色 BAKGROUND： HTML的背景图象 例如： <BODY BGCOLOR="FFFFFF" TEXT="#000000" LINK="0000FF" BACKGROUND="BACK.GIF"> ┈┈ </BODY> 各颜色属性的参数值可以是：“RED”、“BLUE”、“YELLOW”、 “BLACK”等，也可以用16进制的红、绿、蓝（RGB）值来 表示。

  11. 16进制的数码有16个：0123456789abcdef，字母不区分16进制的数码有16个：0123456789abcdef，字母不区分 大小写。表示方法用“#”开头，后面跟6位的16进制数值。 即#rrggbb。其中rr代表红色的值，gg代表绿色的值，bb 代表蓝色的值。如红色可以表示为“ff0000”，蓝色可以 表示为"0000ff"等。 ⑵ 段落 语法格式为：<p>…</p>标签<p>中可以用属性align定义 该段落在文档中的对齐方式，其属性值有left、right、 center。默认值为left。 一般情况下，我们在进行编辑时所看到的文件样式和浏 览器中显示的样式是不一样的，比如我们在编辑时事业 回车符号，但在浏览时并没有换行，因此需要我们主动

  12. 使用标签<BR>进行换行或者使用标签<p>更换段落，或者使用标签<BR>进行换行或者使用标签<p>更换段落，或者 使用预定义标签<pre></pre>。 ⑶ 预定义 语法格式：<pre>…</pre> 在标签<pre></pre>内的文字，当WEB浏览器进行解析时， 会保留编辑时所用的各种符号，如空白区域、组合字体 等，标签</pre>禁止自动单词换行。 标签<p>和标签<pre>在浏览器显示时其结果是不一样的。 【例】文挡体标签应用示例。 <HTML> <TITLE> pre标签示例 </TITLE> <BODY>

  13. <p> 渠间草如风中柳， 头上鹭似天边云。 池畔梨树花开， 点点滴滴， 洁若童心。 <pre> 渠间草如风中柳， 头上鹭似天边云。 池畔梨树花开， 点点滴滴， 洁若童心。

  14. </pre> </BODY> </HTML> 显示结果如图所示： 文挡体标签应用示图

  15. ⑷ 标题字体设置 用标签<hn></hn>标识超文本的标题。 语法格式：<hn>…</hn>，n为一整数值，取值在1—6之 间。 常用属性：align属性，属性值可以是left、right、 center、justify。 【例】使用标题的六种样式示例。 <HTML> <TITLE> 标题式样 </TITLE> <BODY> <h1>hello!</h1> <h2>hello!</h2>

  16. <h3>hello!</h3> <h4>hello!</h4> <h5>hello!</h5> <h6>hello!</h6> </BODY> </HTML> 其显示结果如图所示： 标题式样示图

  17. ⑸ 字体设置 用标签<font></font>来设置文本字体的样式。 语法格式：<font>…</font> 常用属性：size属性 face属性 Color属性 【例】标签<font></font>属性的使用示例。 <HTML> <HEAD> <TITLE> 字体标识 </TITLE> </HEAD> <BODY> <p style="line-height:200%;"> <font size="4" COLOR="#000099" >渠间草如风中柳，

  18. <BR>头上鹭似天边云。<BR> <font size="6" color="red" face="华文行楷,隶书">池畔梨树花开，<BR>点点滴滴。</font><BR> <font size="-1" color="#009900" face="隶书,华文行楷">清雨啄其于溪，<BR>落花流水。</font> </font> <br> </BODY> </HTML>

  19. 显示结果如下： 标签<font></font>属性使用示图

  20. 字体的控制还可以使用标签<b></b>、<i></i>、<tt> </tt>等进行文字的修饰 其他控制字体的标签还有<u></u>、<sup></sup>、 <sub></sub>、<s></s>等 【例】文字修饰标签应用示例。 <HTML> <TITLE> UNTITLED </TITLE> <BODY> <pre> 黑体 <b>abc</b> 下划线 <u>abc</u> 斜体 <i>abc</i> 印刷体 <tt>abc</tt>

  21. 上标 <sup>abc</sup>自由 删除线<s>abc</s>报告 下标 <sub>abc</sub>自由 </pre> </BODY> </HTML> 显示效果如右图所示： ⑹ 特殊字符 在HTML中有四个ASCII字符( > , < , & , “ ) 具有特殊 意义。

  22. 6.2 HTML的常用标签 6.2.1 超文本链接标签 所谓的URL是指文档在Web上的具体地址，有四个部分 组成，即协议、主机名、路径和文件名。如： http://www.tuu.edu.cn/movie/2.html 常用的几种协议有： http file gopher wais news telnet ftp mailto 1. 文件的链接 语法格式： <A HREF=“scheme://host[:port]/dir/filename”>anchor name</A> 其中<a></a>是超链接标签，HREF是一个标签属性。

  23. 【例】超链接标签应用示例。 <HTML> <TITLE>超链接示例</TITLE> <BODY> 登记前请参阅<a href="kaoyan.html">研究生考试简章</a> </BODY> </HTML> 浏览效果如下页图所示

  24. 超文本接标签应用示图

  25. ⑵ 与文件的章节作连接 定位锚(Anchors) 也可以被用来指定到某文件中的某一 章节。 如下语句定义了一个定位锚“boy”：he is a <A NAME=" boys">boy </A> 。 当我们在文件中建立一个锚连接时, HREF的值需要 同时包含定位锚所在的文件名以及该定位锚的名称, 并 且用‘＃’符号作为分隔。例如在文件A中有这样的文字： This is my <A HREF=“doc.html#boys”>link</a> to summary of document B. 你只要在文件A 中的‘link’这 个字上用鼠标按一下, 就可以连接到在文件B 中的该段 章节了。

  26. 6.2.2 列表(Lists) 1．有序号列表 语法格式：<OL>…</OL> 常用属性： type属性：属性值可以为1,a,A,i,I。 start属性：如type=1，start=5表示列表符号是从5 开始的阿拉伯数字。 【例】有序号列表应用示例。 <HTML> <TITLE>有序号列表 </TITLE> <BODY> <OL> <LI> 理工学院

  27. <LI> 医学院 <LI> 音乐学院 </OL> </BODY> </HTML> 输出结果如图所示 有序号列表示图

  28. 2．无序号列表 语法格式：<UL>…</UL>。 type属性：属性值是disc,square,circle。 【例】无序号列表应用示例。 <HTML> <TITLE>无序号列表 </TITLE> <BODY> <UL> <LI> 理工学院 <LI> 医学院 <LI> 音乐学院 </UL> </BODY> </HTML>

  29. 输出结果如图所示 无序号列表示图 列表可以放在<body>…</body>內的任一位置，也允许嵌 套。

  30. 3．定义性列表 语法格式：<DL>…</DL> 【例】定义性列表示例。 <HTML> <TITLE>定义性列表 </TITLE> <BODY> <DL> <DD> a 理工学院 <DD> b 医学院 <DD> c 音乐学院 </DL> </BODY> </HTML>

  31. 浏览效果如图所示 定义性列表示图

  32. 6.2.3 图像（Inline Images） 语法格式： <img src=’file’ height= width=> 常用属性： src height width Alt warning align属性：其对应的属性值为bottom 、middle和top。 【例】图像标签应用示例。 <HTML> <HEAD> <TITLE> 插入图片 </TITLE> </HEAD> <BODY> This is a dog.

  33. <IMG SRC="dog.gif" BORDER="0" WIDTH="32" HEIGHT="32" > </BODY> </HTML> 显示结果如图所示 图像标签应用示图

  34. 6.3 HTML网页制作提高 6.3.1 表格 语法格式：<TABLE>…</TABLE> 常用属性： width height border background bgcolor align cellspacing cellpadding frame rules hspace vspace cols 【例】用标签<TABLE></TABLE>定义表格示例。 <HTML> <TITLE> 简单表格 </TITLE> <BODY>

  35. <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0"> <CAPTION>课程表</CAPTION> <TR> <TH BGCOLOR="#FFFFFF"> </TH><TH BGCOLOR="#FFFFFF">星期一 </TH><TH BGCOLOR="#FFFFFF">星期二 </TH><TH BGCOLOR="#FFFFFF">星期三 </TH></TR> <TR> <TH BGCOLOR="#FFFFFF">上午 </TH><TD BGCOLOR="#FFFFFF">数学

  36. </TD><TD BGCOLOR="#FFFFFF">语文 </TD><TD BGCOLOR="#FFFFFF">英语 </TD></TR> <TR> <TH BGCOLOR="#FFFFFF">下午 </TH><TD BGCOLOR="#FFFFFF">语文 </TD><TD BGCOLOR="#FFFFFF">英语 </TD><TD BGCOLOR="#FFFFFF">数学 </TD></TR> </TABLE> </BODY> </HTML>

  37. 显示效果如图所示 定义表格示图

  38. 【例】调整表格中数据内容的位置示例。 <HTML> <TITLE> 简单表格 </TITLE> <BODY> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0"> <CAPTION>课程表</CAPTION> <TR> <TH BGCOLOR="#FFFFFF" WIDTH="10%" HEIGHT=38> </TH> <TH BGCOLOR=“#FFFFFF” ALIGN=LEFT VALIGN=TOP WIDTH=“30%”>星期一 </TH>

  39. <TH BGCOLOR="#FFFFFF" ALIGN=LEFT VALIGN=TOP WIDTH="30%">星期二 </TH><TH BGCOLOR="#FFFFFF" ALIGN=LEFT VALIGN=TOP WIDTH="30%">星期三 </TH></TR> <TR> <TH BGCOLOR="#FFFFFF" WIDTH="10%" HEIGHT=38>上午 </TH><TD BGCOLOR="#FFFFFF" ALIGN=CENTER VALIGN=CENTER WIDTH="30%">数学 </TD><TD BGCOLOR="#FFFFFF" ALIGN=CENTER VALIGN=CENTER WIDTH="30%">语文 </TD><TD BGCOLOR="#FFFFFF" ALIGN=CENTER VALIGN=CENTER WIDTH="30%">英语 </TD></TR>

  40. <TR> <TH BGCOLOR="#FFFFFF" WIDTH="10%" HEIGHT=38>下午 </TH> <TD BGCOLOR="#FFFFFF" ALIGN=RIGHT VALIGN=BOTTOM WIDTH="30%">语文 </TD> <TD BGCOLOR="#FFFFFF" ALIGN=RIGHT VALIGN=BOTTOM WIDTH="30%">英语 </TD> <TD BGCOLOR="#FFFFFF" ALIGN=RIGHT VALIGN=BOTTOM WIDTH="30%">数学</TD> </TR> </TABLE> </BODY> </HTML>

  41. 显示效果如图所示 调整表格内容位置示图

  42. 6.3.2 框架 语法格式：<FRAMESET>…</FRAMESET> 用<FRAME>来标识需要在框架中链接的文档。 常用属性：rows cols <frame>标签常用的属性有： src name frameborder marginwidth marginheight noresize scrolling属性：属性值为yes、no和auto 【例】<FRAMESET>…</FRAMESET>标签加载框架示例。 <HTML> <TITLE>框架的简单设置 </TITLE> <FRAMESET COLS="35%,*">

  43. <FRAME SRC="6-5.htm"> <FRAME SRC="6-8.htm" NAME="main"> </FRAMESET> <NOFRAME> <BODY> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0"> <CAPTION>课程表</CAPTION> <TR> <TH BGCOLOR="#FFFFFF"> </TH><TH BGCOLOR="#FFFFFF">星期一 </TH><TH BGCOLOR="#FFFFFF">星期二

  44. </TH><TH BGCOLOR="#FFFFFF">星期三 </TH> </TR> <TR> <TH BGCOLOR="#FFFFFF">上午 </TH><TD BGCOLOR="#FFFFFF">数学 </TD><TD BGCOLOR="#FFFFFF">语文 </TD><TD BGCOLOR="#FFFFFF">英语 </TD> </TR> <TR>

  45. <TH BGCOLOR="#FFFFFF">下午 </TH><TD BGCOLOR="#FFFFFF">语文 </TD><TD BGCOLOR="#FFFFFF">英语 </TD><TD BGCOLOR="#FFFFFF">数学 </TD></TR> </TABLE> </BODY> </NOFRAME> </HTML>

  46. 浏览效果如图所示 框架结构示图

  47. 6.3.3 表单 1．按钮标签<button> 语法格式： 属性：type name value tabindex 2．输入域标签<input> 语法格式： 常用属性：value name checked readonly size maxlength alt type属性：定义输入域的类型，可以有下列属性值： text password checkbox radio submit reset file hidden image botton

  48. 3．文本域 语法格式：<textarea>…</textarea> 常用属性：name rows cols disabled readonly tabindex 4．单项选择域 语法格式：<select>…</select> 常用属性：name multiple size disabled tabindex 【例】制作表单示例。 <HTML> <TITLE> 制作简单表单 </TITLE>

  49. <BODY> <form action="/cgi-bin/signup" method="post"> <input type="hidden" name="o" value="030110"> <table border="0" align="center" bgcolor="#F9F9FF" height="200"> <tr> <td valign="middle" align="left">　用户名</td> <td><input type="text" name="FirstName" size="20" maxlength="48" ></td> </tr> <tr><td valign="middle" align="left">密码</td> <td><input type="password" name="Password" size="14" maxlength="30"></td> </tr> <tr><td valign="middle" align="left">　证件类型</td>

  50. <td><select name="idtype" size="1"> <option value="0"> 身份证 </option> <option value="1"> 军官证 </option> <option value="2"> 护照 </option> <option>其他</option> </select></td></tr> <tr><td valign="middle" align="left">　证件号码</td> <td><input type="text" name="idnum" size="30" maxlength="30"></td></tr> <tr><td valign="middle" align="left">　性别</td> <td><input type="radio" name="gender" checked value="03">保密 <input type="radio" name="gender" value="1">男 <input type=“radio” name=“gender” value=“2”>女 </td></tr>

More Related