HTML基础实例教程_第1页
HTML基础实例教程_第2页
HTML基础实例教程_第3页
HTML基础实例教程_第4页
HTML基础实例教程_第5页
已阅读5页，还剩89页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、一、HTML部分一、实例名称：认识HTML的基本标签和属性1、 实例目标及知识点通过制作简单的HTML页面，对HTML的标签和属性有个宏观的认识，激发学生对HTML语言的兴趣。运用了body的属性：text、background、alink 、 leftmargin、 topmargin熟悉这些属性的用途和设置方法。2、 实例功能说明做出符合以下要求的网页：(1) 将网页标题设置为：欢迎来到我的个人网页；(2) 将网页背景设置为指定图片：(3) 将网页的文本颜色设置为：#660033(4) 将网页的左边距设置为：10px ,上边距设置为：400px ;(5) 将网页以文件名为：例1-2.htm

2、l保存。 实验结果参照页面美化效果，如下图：图1-13、实例操作步骤(1) 在HTML的编辑页面输入源码。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例1-2.html在d盘根目录下；(3) 将背景图片tp.jpg放到相对路径为images的文件夹下，如果图片比页面小，图片会自动重复；(4) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、实例参考源码源码1.1 <html><head><title>欢迎来到我的个人网页</title></head><body tex

3、t = #660033 background = imagestp.jpg alink = blue leftmargin = 10 topmargin = 400><center>我的第一个HTML页面</center></body></html> 5、实例思考与扩展 （1）页面的汉字“我的第一个HTML页面”在网页中居左或居右怎么设置？（2）背景如果不用图片，用一种颜色，应怎样修改源码？二、实例名称：文字的排版1、 实例目标及知识点综合练习HTML网页的设计。注意代码中对<br>、<p>、<center&g

4、t;、<hr>、<pre>、<address>等标签的运用，熟悉并掌握文字排版所涉及的所有标签。2、实例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图：图1-23、实例操作步骤(1) 在HTML的编辑页面输入代码。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-1.html在d盘根目录下；(3) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。3、 实例参考源码源码1.2 <html><head><title>欢迎来到我的个人网页</title

5、></head><body text = #660066 bgcolor = #FFFF66><p align = center>要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。</p><center><pre>这是预设(preformatted)文本.在pre这个tag里的文本 保留空格和分行。</pre></center><p align = center>用hr这个Tag可以在HTML文件

6、里加一条横线。</p><hr width = "60%" size = "3" align = center noshade><p align = center>用hr这个Tag可以在HTML文件里加一条横线。</p><!-这是代码注释-><center><p>代码注释是不会显示在网页里的。</p><address>北京&nbsp;&lt;&lt;网页设计基础&gt;&gt;&nbsp;路1000号&

7、lt;br>&amp;&nbsp;老师&nbsp;&copy;<br>邮编:100000<br></address></center></body></html> 5、实例思考与扩展 （1）页面的背景设置成图片应该如何做？（2）字体的大小、颜色等属性如何更改？三、实例名称：文字的美化1、 实例目标及知识点利用文字美化所讲到的标签，综合练习HTML网页的设计。熟悉并掌握文字美化所涉及的标签。如：<hn>、<font>、<del>、<ins>

8、、<sub>、<sup>等。2、 实例功能说明按照以下要求完成HTML页面效果的制作。(1) 将网页标题设置为：“字体设置”。(2) 将文字“标题一”样式设置为：标题一，居中对齐。(3) 将文字“具体内容一”设置为：隶书，18px，颜色为红色。(4) 将文字“具体内容二”设置为：16px，粗体，斜体。(5) 利用字体美化的标签实现删除、下划线、上标、下标等功能。 实验结果参照如下图：图1-33、实例操作步骤(1) 在HTML的编辑页面输入代码，注意此段代码中对<hn>、<font>、<del>、<ins>、<sub&

9、gt;、<sup>等标签的运用。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-2.html在d盘根目录下；(3) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、实例参考源码源码1.3<html><head><title>字体设置</title></head><body text = #660066 bgcolor = #FFFF66><h1 align="center">标题一</h1><p&g

10、t;<font face=隶书 size=18 color="#FF0000">具体内容一</font></</p><p><font size=16><b><i>具体内容二</i></b></font></</p><p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p><p><ins>想唱就唱</ins>这个词下划线插入。</p&g

11、t;<p>X<sub>2</sub>其中的2是下标</p><p>X<sup>2</sup>其中的2是上标</p><p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p><code>call getOrders</code><p>用code显示计算机代码，code里显示的字符是等宽字符。</p></body></html> </ht

12、ml> 5、实例思考与扩展 （1）页面的背景设置成图片应该如何做？ （2）还有哪些标签可以实现文字美化的功能，总结并综合运用它们在网页设计中。四、实例名称：HTML列表(list)实例1、 实例目标及知识点分别实现嵌套的列表和用多种类型排序的列表。利用文字美化的有关列表的标签，例如：<ul>、<li>、<ol>等标签。练习HTML网页的设计。熟悉并掌握文字美化列表所涉及的标签。2、实例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图：图1-43、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩

13、展名，保存到相应文件夹下，例如：保存为例2-3.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、 实例参考源码源码1.4<html><head><title>字体设置</title></head><body text = #660066 bgcolor = #FFFF66><h4>嵌套2层的列表：</h4><ul> <li>动物 <ul> <li>两栖动物</li> <li>哺乳动物

14、 <ul> <li>人</li> <li>猩猩</li> </ul> </li> <li>鱼类</li> </ul> </li> <li>植物</li></ul><h4>排序列表，不设Type属性：</h4><ol> <li>网页课程</li> <li>网页代码</li> <li>魔兽世界</li> </ol>

15、 <h4>排序列表，Type属性设为A：</h4><ol type="A"> <li>网页课程</li> <li>网页代码</li> <li>魔兽世界</li></ol> <h4>排序列表，Type属性设为a：</h4><ol type="a"> <li>网页课程</li> <li>网页代码</li> <li>魔兽世界</li>&

16、lt;/ol> <h4>排序列表，Type属性设为I：</h4><ol type="I"> <li>网页课程</li> <li>网页代码</li> <li>魔兽世界</li></ol> <h4>排序列表，Type属性设为i：</h4><ol type="i"> <li>网页课程</li> <li>网页代码</li> <li>魔兽世界&l

17、t;/li></ol></body></html> 5、实例思考与扩展（1）思考列表的标签在什么时候需要用到？如果改成抽屉下拉的话需要用到什么标签？要怎么做？五、实例名称：插入图像1、 实例目标及知识点综合练习HTML网页的设计。熟悉并掌握插入图片所涉及的标签，例如：src、 alt 、 border、align等。2、 实例功能说明按照以下要求完成HTML页面效果的制作。（1）将网页标题设置为：“CAI是什么？”。（2）将网页标题格式设置为：下划线。（3）将网页第一段文字格式设置为：斜体，颜色为红色。（4）将网页中的图片设置为：左对齐。（5）将网页最

18、后一段不要排在图片右边，排在图片的下面。 实验结果参照如下图：图1-53、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-4.html在d盘根目录下；(2) 将此网页所要插入的图片CAI.jpg放到相对路径为images的文件夹下；(3) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、实例参考源码源码1.5<html><head><title>插入图像</title></head><body text = #660066

19、bgcolor = #FFFF66><h1 align="center"><ins>CAI是什么？</ins></h1><img src="imagesCAI.jpg" alt = CAI原理图 border = 1 align = left><p><font color="#FF0000"><i>CAI是计算机辅助教学(Computer Assisted Instructing)的英文名称首字母缩写</i></fo

20、nt></</p><p>其含义就是把自己的教学想法，包括教学目的，内容，实现教学活动的策略，教学的顺序，控制方法等，用计算机程序进行描述，并存入计算机，经过调试成为可以运行的程序由于计算机有着存储信息，处理信息，工作自动化等功能</p><br clear =left><p>因此，CAI课件可以将大容量的信息非顺序地呈现，可以选择学习内容和掌握学习进度，实现因人施教的原则和及时反馈信息原则等特点集于一身，并因之区别于其他媒体教学</p></body></html> 5、实例思考与扩展 （1

21、）页面的背景设置成图片应该如何做？六、实例名称：几种超链接的综合应用1、 实例目标及知识点综合运用本章所讲到的关于链接的知识，进一步熟悉多种关于链接的概念。能在今后的html页面开发中熟练使用链接。涉及到的标签包括：<a href =”></a>2、 实例功能说明在同一个html页面中，做多个链接，分别符合以下要求：（1）用相对路径和绝对路径两种方法建立超链接网页；（2）运用超链接的title属性：（3）将图片作为一个超链接；（4）在新窗口打开一个链接;（5）链接到一个邮箱地址。 实验结果参照如下图：图1-6注意此实验中关于设定title属性的结果，可以让鼠标悬停在超链

22、接上的时候，显示该超链接的文字注释。点击写信给新浪的链接后，结果如图：图1-73、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例3-1.html在d盘根目录下；(2) 将图片smile.jpg放到相对路径为images的文件夹下，将html0301.html文件放到相对路径为html的文件夹下；(3) 用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码源码1.6<html><body><p><a href="html

23、/html0301.html" title = "网页设计基础网页教程与代码的中文站点">这是一个相对路径的链接</a></p><p><a href="" target=_blank title = "网页设计基础网页教程与代码的中文站点">这是一个绝对路径的链接</a></p><p>你可以将一张图片作为一个链接，点击这个图片。<a href="html/html0301.html"><img sr

24、c="images/smile.jpg" ></a></p><p>这个邮箱地址链接写了to, cc, bcc, subject, body的内容：<a href="mailto:info?cc=webmaster&bcc=media&subject=I%20like%20your%20site&body=真是个好站点！">写信给新浪</a></p><p><b>注:</b>空格请用%20表示。</p><

25、/body></html> 5、实例思考与扩展 （1）对相对路径和绝对路径有清晰的认识，举例说明什么是相对路径，什么是绝对路径。（2）思考超链接的字体在点击前，点击后的颜色如何设置？七、实例名称：在HTML文件里跳转1、 实例目标及知识点在同一个html页面中，使用name属性，可以跳转到此页面的指定部位。掌握关于在同一个HTML页面里实现跳转的超链接处理方法2、实例功能说明 实验结果如下图：图1-8 点击参见第六章链接后，网页跳转的页面如下图所示： 图1-93、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文

26、件夹下，例如：保存为例3-2.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，点击链接，即可以看到此页的页面效果。4、实例参考源码源码1.7<html><head><title>站内链接示例</title></head><body><p><a href="#C6">参见第六章</a></p><p><a name="C1"><h2>第1章</h2></a><

27、p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C2"><h2>第2章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C3"><h2>第3章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C4"><h2>第4章</h2>

28、;</a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C5"><h2>第5章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C6"><h2>第6章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C7"><h2&g

29、t;第7章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C8"><h2>第8章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C9"><h2>第9章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C10&q

30、uot;><h2>第10章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C11"><h2>第11章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C12"><h2>第12章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p>&

31、lt;a name="C13"><h2>第13章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C14"><h2>第14章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C15"><h2>第15章</h2></a><p>这是网页设计基础- 网页教

32、程与代码的中文站点。</p><a name="C16"><h2>第16章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p><a name="C17"><h2>第17章</h2></a><p>这是网页设计基础- 网页教程与代码的中文站点。</p></body></html> 5、实例思考与扩展 （1）总结在同一页的跳转链接和在不同页的跳转链接的区别。八

33、、实例名称：运用border属性对表格进行修饰1、 实例目标及知识点在同一个html页面中，做多个表格，分别把表格的边框设为0、1、15，认识border属性对表格的影响，达到能够熟练运用border属性对表格进行修饰。2、实例功能说明实验结果如下图：图2-03、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例4-1.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码源码1.8<html><head><tit

34、le>运用border属性对表格进行修饰</title></head><body><h4>缺省情况下，表格没有边界。</h4><table><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr>

35、;</table><h4>表格Border设为0，也不显示边界：</h4><table border="0"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table><h

36、4>表格的边界值设为1：</h4> <table border="1"><tr> <td>第一</td> <td>行</td></tr> <tr> <td>第二</td> <td>行</td></tr></table><h4>表格的边界值设为15，边界更粗：</h4> <table border="15"><tr> <

37、td>第一</td> <td>行</td></tr> <tr> <td>第二</td> <td>行</td></tr></table></body></html>5、实例思考与扩展 （1）对表格进行修饰，做出不同边框的表格效果。 （2）边框可否设成不同的美化效果？如果可以，如何设置？九、实例名称：运用多种属性分别对多个表格进行修饰1、 实例目标及知识点学会设置表格的标题和表头，认识colpsan属性和rowspan属性对表格的影响，达

38、到能够熟练运用这些属性对表格进行修饰。2、 实例功能说明在同一个html页面中，做多个表格，分别实现以下要求：（1）做两个有标题的表格，要求这两个表格的表头分别是水平方向和垂直方向；（2）设置包含多列的单元格：（3）设置包含多行的单元格；实验结果如下图：图2-13、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例4-3.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码源码2.0<html><head><ti

39、tle>联系表</title></head><body><table width="535" height="142" border="1" align="center"> <caption> 联系表 </caption> <tr bgcolor="#CCFF66"> <td width="61">姓名</td> <td width="110&qu

40、ot;>&nbsp;</td> <td width="67">性别</td> <td width="95">&nbsp;</td> <td width="65">出生年月</td> <td width="97">&nbsp;</td> </tr> <tr bgcolor="#FFFF99"> <td>住址</td>

41、; <td colspan="5">&nbsp;</td> </tr> <tr bgcolor="#CCFF66"> <td height="38">籍贯</td> <td>&nbsp;</td> <td>专业</td> <td>&nbsp;</td> <td>联系电话</td> <td>&nbsp;</td> &

42、lt;/tr></table></body></html> 5、实例思考与扩展 （1）思考如何才能对表格的不同格设置颜色或者图片背景？（2）举例说明在网页设计的何种情况需要用到此种效果。十、实例名称：运用多种属性对表格进行修饰1、 实例目标及知识点达到能够灵活熟练运用多种属性对表格进行修饰。例如：width、 height、 border、cellpadding、 cellspacing等2、 实例功能说明在同一个html页面中，做一个表格，分别实现以下要求：（1）设置表格为3行3列；（2）表格宽度为：300像素；高度为：100像素；（3）设置表格的三

43、个表头：表头一，表头二，表头三；表头一跨三列，顶端对齐；（4）设置表格边距为：0；间距为：0;（5）设置表格边框为：红色。实验结果如下图：图2-23、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例4-4.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码源码2.1<html><head><title>表格</title></head><body><table

44、width="300" height="100" border="1" cellpadding="0" cellspacing="0"> <tr bordercolor="#FF0000"> <td rowspan="3" valign="top"><div align="center">表头一</div></td> <td><div

45、 align="center">表头二</div></td> <td><div align="center">表头三</div></td> </tr> <tr bordercolor="#FF0000"> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr bordercolor="#FF0000"&g

46、t; <td>&nbsp;</td> <td>&nbsp;</td> </tr></table></body></html>5、实例思考与扩展（1）如何用表格对网页布局？可以表格中嵌套表格吗？什么情况需要这么做？这种布局格式有什么优缺点呢？十一、实例名称：嵌套分割框架1、 实例目标及知识点熟练掌握框架的基本结构和分割方式，为以后网页的制作打下良好的基础。掌握框架的标签<frameset>、<frame>等2、 实例功能说明运用本章所讲到的框架的知识按照以下要求

47、制作html页面：（1）窗口水平方向上分割成两部分，分别占：30%和70%；（2）右边框架垂直方向上分别占：20%和80%；（3）左边框架的内容是嵌入的，是left.htm网页的内容；（4）在left.htm中分别插入图片1.jpg、2.jpg和3.jpg，并且要图片居中显示;（5）右边上部分框架内容嵌入的是right1.htm网页的内容；（6）right1.htm网页中“阳光总在风雨后”的文字大小为“7号”，颜色为“蓝色”，字体为“华文新魏”，加粗显示；（7）右边下部分框架内容嵌入的是right2.htm的内容；（8）right2.htm网页中文字大小为“4号”，颜色为“蓝色”，字体为“楷体

48、”。实验结果如下图：图2-33、实例操作步骤(1) 在HTML的编辑页面输入代码,将此HTML代码以left.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(2) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以right1.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(3) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以right2.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(4) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以“例5-1.htm”命名，保存到相应文件夹下，例如：保存在d盘根目录下；

49、(5) 用网页浏览器打开“例5-1.htm”页面，即可以看到此页的页面效果。4、实例参考源码源码 left.html<html><head><title>smile</title></head><body><table width="338" height="702" border="0" align="center" cellpadding="0" cellspacing="0"> <

50、tr> <td width="338" height="256"><div align="center"><img src="images/smile.jpg" width="180" height="120"></div></td> </tr> <tr> <td height="223"><div align="center"&

51、gt;<img src="images/smile.jpg" width="180" height="120"></div></td> </tr> <tr> <td height="223"><div align="center"><img src="images/smile.jpg" width="180" height="120"><

52、;/div></td> </tr></table></body></html>源码 right1.html<html><head><title>阳光总在风雨后</title></head><body><div align="center"> <font face = 华文新魏 size = 7 color = "#0000FF"><b>阳光总在风雨后</b></fo

53、nt> </div></body></html>源码 right2.html<html><head><title>歌词</title></head><body><font face = 楷体 size = 4 color = "blue">人生路上甜苦和喜忧愿意与你分担所有难免曾经跌到和等候要勇敢的抬头谁愿藏躲在避风的港口宁有波涛汹涌的自由愿是你心中灯塔的守候在迷雾中让你看透阳光总在风雨后乌云上有晴空珍惜所有的感动每一份希望在你手中阳光总在风雨后请相

54、信有彩虹风风雨雨都接受我一直会在你的左右</font> </body></html>源码 例5-1.htm<html><head><title>嵌套框架</title></head><frameset rows="*" cols="30%,*"> <frame src="left.htm" name="leftFrame" scrolling="NO" noresize> &l

55、t;frameset rows="20%,*"> <frame src="right1.htm" name="topFrame" scrolling="NO" noresize> <frame src="right2.htm" name="mainFrame"> </frameset></frameset> </html>5、实例思考与扩展 （1）对比用框架对网页布局，和用表格对网页布局有什么不同。 （2）可以

56、实现点击一个框架里的链接，对另一个框架里的页面影响吗？怎么实现？十二、实例名称：用框架导航1、 实例目标及知识点熟练掌握框架的基本结构和分割方式，能够运用框架实现导航的功能。2、 实例功能说明运用框架的知识按照以下要求制作含有框架的html页面：（1）窗口水平方向上分割成两部分，分别占：20%和80%；（2）上部分框架的内容是嵌入的是top.htm网页的内容；（3）top.htm网页中“精彩呈现”文字的大小为7，字体为“华文行楷”，颜色为“绿色”；（4）下部分框架在垂直方向分割成两部分，分别占30%和70%，其中右边部分框架的名称命名为right;（5）下部分框架的左边部分嵌入的是left.h

57、tm网页的内容；（6）left.htm网页中文字的字体为“华文新魏”，大小为5，颜色为“绿色”；并且这些文字均要分别进行超链接；其中“走进科学”超级链接到right2-1.htm，“音乐赏析”超级链接到right2-2.htm,它们链接后的内容均显示在下部分框架的右边部分框架中。（7）right2-1.htm和right2-2.htm网页中标题文字居中显示，字体为“楷体”，大小为，颜色为“绿色”，加粗显示；正文字体也为“楷体”，大小为，颜色为“绿色”；实验结果如下图：图2-4点击框架左边的链接可以使框架右边变换相应内容。3、实例操作步骤(1) 在HTML的编辑页面输入代码,将此HTML代码以t

58、op.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(2) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以left_5-2.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(3) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以right_5-2-1.html命名，保存到相应文件夹下，例如：保存在d盘根目录下；(4) 依照文件right_5-2-1.html的标准，做多个文件分别为文件left_5-2.html文件中目录所对应的链接。(5) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以“例5-2.html”命名，保存到

59、相应文件夹下，例如：保存在d盘根目录下；(6) 用网页浏览器打开“例5-2.html”页面，即可以看到此页的页面效果。4、实例参考源码源码 top.htm<html><head><title>精彩呈现</title></head><body><div align="center"> <font face = 华文行楷 size = 7 color = "#00FF00">精彩呈现</font> </div></body>&l

60、t;/html>源码 left_5-2.htm<html><head><title>目录</title></head><body><table width="300" height="310" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="80"

61、><div align="center"><a href = "right_5-2-1.html" target = "mainFrame"><font face = 华文行楷 size = 5 color = "#00FF00">走进科学</font></a></div></td> </tr> <tr> <td height="80"><div align=&qu

62、ot;center"><a href = "right_5-2-2.html" target = "mainFrame"><font face = 华文行楷 size = 5 color = "#00FF00">音乐赏析</font></a></div></td> </tr> <tr> <td height="80"><div align="center">&l

63、t;a href = "right_5-2-3.html" target = "mainFrame"><font face = 华文行楷 size = 5 color = "#00FF00">电脑天地</font></a></div></td> </tr> <tr> <td height="80"><div align="center"><a href = "righ

64、t_5-2-4.html" target = "mainFrame"><font face = 华文行楷 size = 5 color = "#00FF00">健康指南</font></a></div></td> </tr> <tr> <td height="80"><div align="center"><a href = "right_5-2-5.html" ta

65、rget = "mainFrame"><font face = 华文行楷 size = 5 color = "#00FF00">体育世界</font></a></div></td> </tr> <tr> <td height="80"><div align="center"><a href = "right_5-2-6.html" target = "mainFram

66、e"><font face = 华文行楷 size = 5 color = "#00FF00">心情有约</font></a></div></td> </tr></table></body></html>源码 right_5-2-1.html<html><head><title>走进科学</title></head><body><h1 align="center&q

67、uot;><strong><font color="#00FF00" size = 4 face="楷体_GB2312">走进科学</font></strong></h1><font face = 楷体_GB2312 size = 3 color = "#00FF00">主持人：现在我们看到的，这是一条体长超过四米的一条网蟒，它是所有蟒类当中体型最大的，在野外甚至能与鳄鱼、鹿等大动物搏斗，并且把它们顺利给吞下去变成自己的腹中大餐。但是，我们看如此凶猛的一个动

68、物，过一会，一场灭顶之灾就在等着它了.宁环是武汉动物园的蟒蛇饲养员，这天她像往常一样打开熟悉的两栖馆蟒蛇展厅的大门，开始一天的工作。她忽然觉得有些异样：往常一开门就盘踞在树梢咝咝做响的最大的一条蟒蛇，却突然不见了踪影。四处寻找之下，宁环发现了蜷缩在角落里的巨蟒。她小心翼翼的靠近巨蟒，想把它放回树上。就在这个时候，巨蟒的一个动作让她大吃一惊。饲养员宁环：那个蟒蛇吐痰的时候，就像我们人吐痰一样，猛地一咳，咯！蟒蛇竟然会吐痰？这种以前听都没听过的事情，今天竟然发生在眼前。可是巨蟒又为什么会吐痰呢？难道是它生病了么？</font> </body></html>源码

69、例5-2.htm<html><head><title>框架导航</title></head><frameset rows="20%,*" cols="*"> <frame src="top.htm" name="topFrame"> <frameset cols="30%,*"> <frame src="left_5-2.html" name="leftFrame&

70、quot;> <frame src="right_5-2-2.html" name="mainFrame"> </frameset></frameset></html>5、实例思考与扩展 （1）如果把布局变换成上下两部分，上部分是菜单链接，怎么做？ （2）是否可以框架布局内再嵌套框架布局？十三、实例名称：设计用户登记表单1、 实例目标及知识点熟练掌握基本表单的设计，为以后网页的制作打下良好的基础。表单设计到的标签主要有<form></form>2、 实例功能说明运用表单的知识按

71、照以下要求制作html页面：(1) 表单包含于一个一行一列的表格之中，表格的边框为3，宽度为1000,高度为600,边框颜色为“#336699”,表格居中显示；(2) “用户登记”居中显示，字体大小为7，颜色为“绿色”，字体为“幼圆”；(3) “亲爱的用户便于我们及时与你联系。”居中显示；(4) 性别后的下拉菜单选项依次为“男”、“女”;(5) 文化程度后的下拉菜单选项依次为“小学”、“初中”、“高中”、“大学”、“研究生”；(6) 职业后的下拉菜单选项依次为“教育业”、“商业”、“公务员”、“医疗”、“法律”、“军人”、“在读学生”；实验结果如下图：图2-53、实例操作步骤(1) 在HTML

72、的编辑页面输入代码，将此HTML代码以后缀html或者htm命名，保存到相应文件夹下，例如：命名为 例6-1.htm保存在d盘根目录下；(2) 用网页浏览器打开“例6-1.htm”页面，即可以看到此页的页面效果。4、实例参考源码源码2.4 <html><head><title>用户登记</title></head><body><form><table width="1000" height="600" border="3" align="

73、;center" cellpadding="0" cellspacing="0" bordercolor="#336699"> <tr> <td bordercolor="#336699"><div align="center"><font face = 幼圆 size = 7 color = "#00FF00"> <p>用户登记</p></font> <p>亲爱的用户，欢迎您访问我们的网站，请填写您的个人信息，便于我们及时与您联系</p> <p align="le

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论