Html实验指导书.doc

《Html实验指导书.doc》由会员分享，可在线阅读，更多相关《Html实验指导书.doc（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、training杰普软件科技(中国)公司Copyright Briup Corporation, 2006. All rights reserved. 外企的师资、外企的技术、外企的品质HTML网页编程基础Lab Guide1.0Briup High-End IT Training目 录第1章 概述3学习目标3学习入门3任务1-1 使用浏览器下载查看网页源代码4练习1-2 手工编写html文件8练习1-3 使用netscape查看html文档10学习小结10第2章 网页制作快速入门11学习目标11学习入门11任务2-1 给网页设置文档头12练习1-4 建立自动链接页面。13练习1-5 为网页设

2、置有效期限14任务2-2 设置页面属性15练习1-6 定制网页属性（独立练习）16任务2-3 编排段落、文本、字体17练习1-7 加入定义列表、注释、实体19任务2-4 使用内联样式表加强文本效果20学习小结21第3章 网页中使用超链接和图像23学习目标23学习入门23任务3-1 带有目录索引的文本网页24练习1-8 建立html帮助系统。（独立练习）26任务3-2 使用css修饰文字超级链接效果27学习小结28第4章 表格和页面布局29学习目标29学习入门29任务4-1 建立表格并通过table元素的属性控制表格外观30练习1-9 建立表格（独立练习）33任务4-2 建立复杂的表格34练习1

3、-10 一个产品报价表（独立练习）38练习1-11 制作网站的首页（独立练习）39学习小结39第5章 框架、表单40学习目标40学习入门40任务5-1 创建导航窗口41任务5-2 设计用户注册页面42练习1-12 个人信息调查网页（独立练习）45学习小结45第1章 概述学习目标通过本课你将学会： 使用浏览器下载网页，并观察网页源代码学习入门u web就是万维网(www即 world wide web)，确切的讲是一种服务，这种服务一般是通过互联网(internet)进行的。Web提供的服务是为全世界的人提供信息，这些信息使用一种叫做超文本的方式进行组织（组织得就像一页页的文档，所以又把这些超文

4、本形象地叫做网页或web页）和传递，html就是编写网页所使用的语言u 网络浏览器中最有名的有两个一个是微软的Internet Explore ，另一个是网景的Netscape，要提前说明的是这两个产品一直以来都存在着激烈的竞争，而且这种竞争给网页的设计者带来了直接的影响u HTML是一种标记语言，是设计web页面的基础。它的词汇-标记一些用尖括号包围起来的单词（比如,，关于它们的确切含义将在后面介绍）。这些带尖括号的单词往往成对出现，如和。HTML文档最大的特点就是整个文档要表达的内容均由这些尖括号标记进行结构化。每一对尖括号包围的部分在HTML中又叫做元素。比如由包围的部分就叫做body元

5、素。元素之中还可以嵌套其他元素。HTML文档是结构化文档，就是因为HTML文档是由一个一个元素嵌套组成的u 网页是由html语言编写而成，由网络浏览器下载并翻译成我们看到的五颜六色的页面。大多数网页允许浏览器查看它的html源代码，也可以把它们下载到本地u 手工编写html是很繁琐的工作。开发网站已经有了很好的工具，如microsoft的Frontpage和macromedia的Dreamweaver MX，它们都有编辑和维护的功能。其中macromedia的Dreamweaver MX可以算是新一代的可视化网站开发综合平台的代表，说它是一个综合平台是因为DreamweaverMX 不仅是一个

6、优秀的HTML文档编辑器，而且具有涵盖了几乎网站开发所有方面需要的功能任务1-1 使用浏览器下载查看网页源代码1 任务描述分别使用IE浏览器和NetScape浏览器下载网页，并观察网页源代码。2 基本概念与原理u 网页是有html语言编写的结构化文本，它将多种资源联接起来u 网络浏览器中最有名的有两个一个是微软的Internet Explore ，另一个是网景的Netscape，它们均可让网页访问者查看网页源代码3 环境与资源u 能够连上互联网，如果没有链接，本地准备一些HTML文档放在实验环境目录.HTML-0501下u 本实验指导书中的全部内容需要安装IE5.0和Netscape 6.0或

7、更高版本4 操作步骤(1) 点击桌面图标，运行Internet Explore。(2) 在地址览输入URL，比如,然后敲击回车键。如果机器已经连在互联网上，则浏览器将会链接到”搜狐”网。如Error! Reference source not found.图 11 进入”搜狐”网(3) 使用菜单”文件”另存为”会打开保存对话框，询问保存的地址和文件名。如Error! Reference source not found.图12 保存对话框(4) 输入保存的文件名和保存类型(这里使用默认)。在对话框资源窗口选择要保存的目录。按保存按钮，开始将该网页保存到本地。这样，以后即使不联到互联网也可以查看

8、到该页，当然，该页的内容也不会更新了。图 13正在保存(5) 找到刚才保存网页的地方，我们会发现刚才保存的html文件，另外还有一个文件夹，文件夹名和html文件相同或带有一个后缀”.files”。打开文件夹里面有很多图形文件，还有一些其他的文件。这些文件都是该网页中使用到的资源。如果删除或者给文件夹更改了名字，浏览该网页会显示不出原有的效果。(6) 回到浏览器中，还是在该网页上，选择菜单”查看”源文件”。将会打开一个记事本，如Error! Reference source not found.所示。图 14 查看源文件 (7) 记事本中的代码就是html代码。我们可以在记事本中拷贝全部的代码

9、，然后另存为html文件。也可以达到保存网页的目的，但是可能没有图片等网页中链接到的资源文件。图15 使用记事本另存为htm文档(8) 在IE中还有一个办法可以查看源文件，在网页正文窗口中文字或空白位置，单击鼠标右键，在打开的快捷菜单中选择”查看源文件” ，如Error! Reference source not found.所示。也可以打开Error! Reference source not found.所示的源代码。下面我们在netscape6.0中来重复以上工作。图16 快捷菜单查看源文件(9) 从桌面或程序中运行netscape6.0, netscape6.0的图标是。在地址栏中输入

10、url，还是，按回车。在netscape6.0中打开”搜狐”网首页。图17 使用netscape浏览网页(10) netscape中保存网页，使用菜单”file”save as”，其余过程同步骤2、3。(11) 在netscape中查看源代码，使用菜单”view”page source”,或者快捷菜单”view page source”，其过程同步骤6-8。5 问题问： 请观察保存后的文件，你认为网页中的图片是保存在网页文件(.htm)中吗，它们和html代码之间是什么关系？答：网页中用到的图片是作为单独文件存在的，不是网页文件的一部分。html代码说明如何找到它们以及在网页中显示的位置和方式

11、。练习1-2 手工编写html文件1 任务描述输入或者拷贝一下代码到一个记事本，将它存为html文档，并浏览和查看源代码。2 环境与资源u 拷贝下列代码，或者直接使用实验目录(HTML-0501)中的html.txt文件练习1-1欢迎进入网页制作天地代码 113 操作步骤(1) 用记事本程序打开html.txt文件，选择菜单”文件”另存为”，打开另存为对话框。图 18 另存为对话框(2) 保存类型选中”所有文件”，文件名该为”welcome.html”或者”welcome.htm”，点击保存。 (3) 在实验目录下双击刚保存的”welcome.html”文件，在浏览器中浏览该文档。图19 预览

12、(4) 查看该文档的源代码。4 问题问： 保存文件名为welcome.html和welcome.htm有什么区别吗，为什么要这样做？。答： 没有什么实质的区别，在有些操作系统里只允许的扩展名为3位(比如dos)的文件名。问： 如果另存为时保存类型不选择”所有文件”。结果会怎样？答： 保存的文件仍然是文本文件。问： 在浏览器中查看到源代码后，请直接试着修改一些文字比如文本中的中文字，然 后保存，在浏览器中刷新显示，结果会怎样？答： 网页内容会跟着改变。练习1-3 使用netscape查看html文档1 任务描述使用netscape6.0浏览welcome.htm和源代码。2 环境与资源u 实验目

13、录(HTML-0501)中的welcome.htm文件学习小结在本课中你学习了：u 用记事本编辑和保存html文档u 在浏览器中浏览html文档及其源代码第2章 网页制作快速入门学习目标通过本课你将学会： 掌握如何使用文件头元素 掌握页面属性的设置 掌握有关HTML文本编排的元素的使用 掌握定义和使用CLASS和ID类型的样式表学习入门u HTML作为一种WEB上的出版语言，有它自己独特的语法。它的基本语法单位称为”元素”，通常由三部分组成，即开始标记、内容和结束标记u 一个HTML文档可以看成由以下三个部分构成：版本说明、文档头部、文档体u 文本是网页的主要内容，与文本编排有关的元素有：插入

14、段落：预定义格式：插入换行符；：缩进引用；：格式化块文本；：格式化内嵌文本；：建立水平线； 加强； 强调； 标题1-标题6元素； 列表元素。定义列表元素u 有三种方式来表示实体。你会发现所有的实体都是以”&”号开始，并以分号”;”结束。使用转意字符。比如©；代表版权符号。注意并不是所有实体都有相应的转意字符。使用十进制符号。在&后加上#和一个十进制的数字来表示实体，比如还是版权符号可以表示成©；。使用十六进制符号。和十进制相同，但在#后面加上的是一个十六进制的值并在值前加上小写的x表示十六进制。所以版权符号表示成十六进制为©。u CSS的全称是Cascading St

15、yle Sheets，中文翻译过来就叫做层叠样式表，又叫级联样式表，简称样式表。引入这项技术的目的，是为了更好地贯彻网页结构和显示分开的策略u 使用CSS使HTML更好维护；能简化HTML文档，减少代码量；还能提供更强大的格式化手段任务2-1 给网页设置文档头3 任务描述给网页指定标题，输入网页的作者，关键字。设置网页刷新频率。4 基本概念与原理u HEAD元素包含了与当前文档相关的信息，如文档的标题、关键字（如果该文档希望被搜索引擎搜索到，各部分信息很重要）、以及一些和文档内容无关仅对文档本身进行说明的数据信息u TITLE元素可以为网页添加上标题u 使用META元素可以完成对网页期效、刷新

16、频率的设置，还可以添加关键字、作者等。添加的信息参见Dublin核心数据集5 环境与资源u 本章有关实验文件放在实验环境目录.HTML-0502下u 本实验指导书中的全部内容需要安装IE5.0和Netscape 6.0或更高版本6 操作步骤(1) 参考代码：任务2-1文件头的设置代码 217 问题问： 你认为Meta 有什么实际意义？答： 加入作者、关键字等信息可以增加被搜索引擎发现的概率。另外，这些信息还有可能被今后发展的技术使用。练习1-4 建立自动链接页面。1 任务描述 修改head.htm文件，当head.htm装载后1秒自动链接到实验目录中的文件refresh.htm。2 环境与资源

17、u 实验目录(HTML-0502)中的HEAD.htm文件和refresh.htm 3 方法提示u 使用插入栏-文件头选项的刷新按钮，进行设置4 问题问： 刷新按钮的功能是否可以使用meta按钮来完成，如果可以该如何完成本练习？。 答： 可以，在值文本框中输入”refresh”，在”内容”文本框种输入”5”问： 你能说出网页设计中使用自动链接页面的一种情况吗？答： 但网页地址更改时，访问老网页的用户将被自动带到新的地址上来。练习1-5 为网页设置有效期限1 任务描述 通过修改head.htm文件头，设值head.htm的有效期限为一天。2 环境与资源u 实验目录(HTML-0502)中的HEA

18、D.htm文件3 方法提示u 一些常用的http-equiv的值：refresh 刷新网页expires 设置页面过期时间,过期后覆盖浏览器的缓存系统reply to 供用户回复的电子邮件地址 4 讨论(2) 结合你上网的经验，说说给网页设置有效期限的意义？任务2-2 设置页面属性5 任务描述使用页面属性对话框设置页面属性。6 基本概念与原理u 页面属性是指与网页全体可视化的内容相关的属性，由于网页中的可视化内容均包含在body元素中，所以，页面属性大多与body元素的属性设置有关。u7 环境与资源u 实验目录(HTML-0502)中的body.htm文件u 同时安装有ie4.0和netsca

19、pe4.0或以上版本浏览器8 操作步骤(1) 请分别在ie和netscape中试着浏览该网页，并描述现象。请反复对边界设置不同的值，观看ie和netscape的区别。任务2-2页面设置 “用水革命”给百姓生活带来了什么 新华网银川月日电 (肖敏、曹薇薇) 银川市新实施的居民用水阶梯水价，在许多人眼中是一次打破传统城市用水机制的“用水革命”，那么它究竟能给百姓生活带来怎样的变化呢？ 有关专家认为，城市居民用水实行阶梯水价势在必行，原因主要有三：一是国家政 策要求：根据国务院五部委联合下发的关于进一步推进城市供水价格改革工作的通知精神，“全国各省辖市以上城市创造条件在年底以前对城市居民生活用水实行

20、阶梯式计量水价，其他城市也要争取在年底之前实行”。二是建立节水型社会，实现水资源可持续发展的需要：近年来连续的干旱缺水已让人们充分认识到了节水的重要性，水价的价格杠杆作用被视为是实现节水的最为有力的工具，而阶梯水价比起传统的“一刀切”的统一水价政策来说，其科学性和合理性显而易见，它既不为居民的正常范围内用水增加经济负担，又能对浪费用水、奢侈用水起到必要的约束和惩戒作用，有利于形成节水风尚。三是提升供水服务的需要：通过抄表到户、新水价政策和相关的一系列配套的服务措施的执行，将为银川市居民构筑起以“分户计量、分级计价、服务入户”为核心的新型供水服务体系，以充分满足群众日益增长的物质文化需求。在计划

21、经济年代中，水、电、气的价格变动，政府历来都是以政策的高度来慎重对待。在相当长的一段时间内，自来水的价格与其成本是背离的，水的商品性并没有被体现出来，可以说，老百姓一直吃的是“福利水”。而现在，自来水公司是企业、自来水是商品、服务有价的观念已逐渐深入人心。今后，随着新水价政策的实行，水价的另一功能价格杠杆作用将被释放，从宏观领域开始为创建节水型社会，实现水资源可持续发展发挥不可替代的功用，不仅对改善城市水资源匮乏，缺水严重的局面具有积极的作用，更为重要的是，它将在潜移默化中把节水意识变成人们自觉遵守的习惯。来源：新华网 相关新闻 体现人文关怀的“用水革命” 城市居民眼中的“阶梯水价” 代码 2

22、29 问题问： 通过页面属性对话框给body元素的属性进行设置可以设定背景色，和背景图片，但这种方法却遭到了反对，你认为可能的理由是什么？答： 这种方法在标记种加入了格式化信息，破坏了html结构和显示分离的原则。问： 从运行上例可以看出如果同时制定了背景色和背景图像，那个能显示出来？答： 背景图像优先显示。练习1-6 定制网页属性（独立练习）1 任务描述为网页设置基本属性，包括标题、作者、背景色、文本色、超级链接的颜色，边界等。2 环境与资源u 实验目录(HTML-0502)中的tangshi.txt文件u 同时安装有ie4.0和netscape4.0或以上版本浏览器3 操作步骤4 讨论(2

23、) 请参考一些诗歌网站，改进自己的设计。(3) 你对变写在各种浏览器中都适合的网页有些什么体会？任务2-3 编排段落、文本、字体5 任务描述网页中的段落、区块、文本、字体进行编排，熟悉有关元素的使用。6 基本概念与原理u 段落标记在浏览器中的效果是另起一段，两行文本之间会有一个空行u 标记的作用是与格式化，让浏览器显示的效果和设计时输入的效果保持一致u html种对文本编排有关的元素还有：插入换行符：缩进引用：格式化块文本：格式化内嵌文本：建立水平线 加强 强调 标题1-标题6元素 列表元素定义列表元素7 环境与资源u 实验目录(HTML-0502)中的news.htm文件u 同时安装有ie4

24、.0和netscape4.0或以上版本浏览器8 操作步骤(1) 参考代码如下：文本 2004年引起人们生活改变的10项新技术      最新一期德国经济周刊对2004年实用技术领域有可能引起人们生活发生重大 改变的新技术进行了 预测，位居前十位的是： 无线上网技术 平面电视技术 表面洁净技术 发光二极管技术 导航技术 燃料电池 生物芯片 生物燃料 LINUX技术 职能商品标签代码 23图 21 预览9 问题问： 段落元素和换行元素在效果上有什么区别，请调整浏览器窗口的大小再看看？答： 段落在行之间插入一个空行，换行元素没有这个空行。并且换行元素无论窗口是

25、否能显示得下这一行，也会使后面的文字另起一行显示。问： 在参数选择器中取消”使和代替和”选项，进行步骤6后和原来有什么不同？答： 插入的不是而是，它们在现有的浏览器中效果是一样的，但标记是可以被其他的浏览器理解为其它的显示方式。练习1-7 加入定义列表、注释、实体1 任务描述为网页添加一个定义列表来说明各种符号的含义，并为网页添加相关注释，和实体。2 环境与资源u 实验目录(HTML-0502)下的define.htm文件u 同时安装有ie4.0和netscape4.0或以上版本浏览器3 操作步骤4 讨论(2) 请分别写出版权符号、注册符号、商标符号的实体名。_。(3) 请在代码模式中手动在网

26、页其他地方加入一些注释。任务2-4 使用内联样式表加强文本效果1 任务描述创建几个class类型的内联样式表。并为p，body标签制定新的样式。利用样式表来给文本加强效果。2 基本概念与原理u 样式表可以增强网页的效果，定义class类型的样式表可以让某类class属性相同的元素按照样式表的要求显示。本任务使用了样式表中的font-weight、font-size、color、background、cursor属性。对文本的效果进行修饰3 环境与资源u 实验目录(HTML-0502)中的csstext.htm文件u 同时安装有ie4.0和netscape4.0或以上版本浏览器4 操作步骤 (1

27、) 参考代码如下：任务2-4 css与文本效果 文字的尺寸加大150% 文字加上黑色的背景色 文字鼠标的形状变成手形 代码 245 问题问： 使用样式表指定网页背景图片和直接在body的background中指定有什么区别？答： 使用样式表可以给背景图片指定重复的样式，比如横向、纵向，而使用background属性无法做到，样式表在网页格式化上要比html中元素直接提供的格式化能力要强大。问： 使用样式表有些什么好处？答： 使HTML更好维护； 简化HTML文档，减少代码量； 提供更强大的格式手段。学习小结在本课中你学习了： 设置网页属性 在网页中插入段落，设置字体。插入有序列表 使用定义列表

28、、在网页中插入实体(特殊字符) 使用CLASS类型的样式表格式化网页第3章 网页中使用超链接和图像学习目标通过本课你将学会： 理解URL的概念。 理解什么是相对路径和绝对路径 掌握超级链接元素A和文档中锚点的用法 掌握CSS来修改文字超级链接的格式 了解图像文件的格式 掌握图像元素IMG的用法学习入门u URL(Uniform Resource Locator)统一资源定位，是互联网上表达资源位置的方法。它有四个部分组成，即协议、域名、路径名、文件名。u 协议的作用是告诉浏览器信息在哪里，和如何和信息的拥有者交互。常用的协议有：http:/ 超文本传输协议，用于在传递web文档，这种协议表明信

29、息是保存在web服务器上的，是目前互联网上最常用的协议。File:/ 用于访问本地磁盘上的文档。ftp:/ 文件传输协议，用于在ftp服务器上上传下载文件。mailto: 后面跟着一个邮件地址，可以调用默认的邮件程序来发送邮件(比如outlook express或者foxmail)。u 主机名(域名)说明的是资源保存在那台机器上，一般对于http:/协议来说，主机名就是服务器名，它往往对应着一个ip地址，由于ip地址不好记，所以使用了一些好记的域名，由域名服务器来翻译进行ip地址和域名之间的转换u 路径名表示要访问的文件在主机的什么目录里，还要注意的是和我们在操作系统中表示目录不同，路径的分隔

30、是(/)而不是()u 标记定义了一个超级链接，它有一个属性herf用来说明链接资源的URLu 使用甚至可以可以让链接精确地链到一个文档的某个部分，这需要定义一个锚点u 相对路径指文件的位置是相对于当前文件的位置。它包括目录名，或指向一个可以从当前目录出发找到该文件的路径。例如，一个路径名可能包含从当前目录向上走两级，再向下走两级的指令。上一级目录用（.）表示u 绝对路径指的是文件从最高级目录下开始的完整的路径，无论当前路径是什么，使用绝对路径总是能找到要链接的文件u HTML支持三种格式的图像文件作为嵌入时图形图像。即JPEG(图形图像联合专家组， Joint Photopraphic Exp

31、erts Group);GIF(图形接口格式,Graphics Interface Format);PNG(可移植网络图形, Portable Network Graphic) u IMG元素最重要的属性是src ， src定义了图像文件从哪里来。我们应该了解的是在网页中加入图像其实只不过是将图像文件的路径加入到网页中，浏览器根据这个路径能找到图像文件并正确得显示u 尽管图像本身可以加上超级链接，但是有时候我们希望一幅图像的不同部分能够有不同的超级链接,可以使用map元素和area元素来完成u 在图像编辑软件如(photoshop)里，经常会有滤镜功能来为图像创造特殊的效果，比如将一个图像变模

32、糊、改变图像的亮度等。使用CSS样式表的滤镜有可以完成一些类似的功能。滤镜不仅可以用在图像上，还可以用在文字上，很多情况下和脚本语言配合使用生成动态滤镜任务3-1 带有目录索引的文本网页1 任务描述给网页中一长段文字添加目录索引(超级链接)，点击目录索引时浏览器自动转到文档相应的位置。设置从其他文档链接到该文档的某一部分的超级链接。2 基本概念与原理u 使用甚至可以可以让链接精确地链到一个文档的某个部分(行)，这需要定义一个锚点。定义锚点的方法如下：锚点一u 假如这句话包含在一个web文档中，那么从其他地方（可以从文档外也可以从文档内部）就可以链接到这个锚点。Name属性的值就是锚点的名称。这

33、个功能对一些比较长的文档来说比较有用，比如FAQ(Frequently Answered Question)页面3 环境与资源u 本章有关实验文件放在实验环境目录.HTML-0503下link.htm和target.htm4 操作步骤(1) 参考代码如下。任务3-1 超级链接锚点2003年出国留学申请有关问题解答 2003年国家公派出留学申请表如何下载？ 申请表下载后显示不全或有乱码？ 申请时所交体检表是普通还是留学体检表？ 新出台的政策是否适用于已录取人员 WSK外语总成绩是否包括笔试和口试成绩？ 二级学科代码如何查找？ 重点资助学科、专业指南如何查找？ 1、 2003年国家公派出

34、留学申请表如何下载？ 由于申请表为PDF格式，需先安装ACROBAT READER5.1.0简体中文版软件，然后点击下载申请表即可。注：如原机器中装有低版本的ACROBAT READER软件，请先将原有软件卸载后，重新安装5.1.0版本软件。申请表须打印或用钢笔/签字笔认真填写。详细内容请看填表说明  代码 31(2) 新建文件target.htm， 链接生效。5 问题问： 链接到锚记和链接到一个网页，在语法上有什么区别？答： 链接到锚记必须在锚记前加上”#”，如果从其它的文件链到锚记，在文件名后面加上”#”+锚记名。答： 告诉浏览器打开一个新窗口开浏览。练习1-8 建立html帮助系统。（独立练习）1 任务描述 在实验目录下建立一个自己的目录，然后编辑若干html页面，用来说明某件事物。要求各页面之中的内容互相参照，参照部分添加锚记，在不同的页面可以直接链接到参照的部分。2 环境与资源u 实验目录(HTML-0502)3 讨论如果要使用相对路径，该如何操作，使用绝对路径呢 ，举例并写出步骤？。_