I上机7网页制作.docVIP

上机7 网页制作 7.1 实验原理 HTML语言 1. 基本结构认识 （1）知识准备 HTML（Hypertext Marked Language）超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，即可以加入图片、声音、动画、影视等内容，也可以从一个文件跳转到另一个文件。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 HTML 　　　HEAD　　　　　　头 部 信 息　　　 /HEAD 　　　BODY　　　　　文 档 主 体， 正 文 部 分　　　 /BODY /HTML 其中HTML在最外层，表示这对标记间的内容是HTML文档。HEAD之间的内容是文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。BODY标记一般不省略，表示正文内容的开始。 超文本中的标签一般成对出现，用“”和“”括起来，用来分割和标记文本的元素，某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：标签名称，最常用的单标签是BR，它表示换行。另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠“/”即成为尾标记。 许多单标记和双标记的始标记内可以包含一些属性，各属性之间无先后次序，属性也可省略（即取默认值）其语法是：标签名字 属性1 属性2 属性3 … （2）实验步骤 第一步：单击 “开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如图12.1语句： 第三步：点击“文件—保存”保存类型为12-1.htm。 第四步：在浏览器中打开12-1.htm，如图12.2所示 注意：制作和编辑html文件可以使用记事本、写字板和其他的文本编辑软件，也可以使用网页制作工具直接生成，但生成的代码一般较为复杂，有些功能实现还需要修改源代码，所以掌握基本的html语句的结构、语法和常用的标记是必要的。 7.2实验目的 1、理解HTML超文本标记语言的结构和语法，掌握常用的标记符的设置与使用，如链接标记、字体标记、表格标记等。 2、能够制作动态网页，熟练使用软件工具编辑图像，能够在网页中使用视频和音频等元素，能够在FrontPage中插入横幅广告，在页面中应用动态Html效果，建立及应用CSS样式等。 7.3 实验内容 一、基本工具使用 1. 标题 （1）知识准备 TITLE：title文件标题/title title标明该html文件的标题，是对文件内容的概括。文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。除了标识窗口外，当将某一homepage存入书签或文件时，title还用作书签名或缺省的文件名。 HN：hn文档标题/hn 标题元素有6种，分别为h1, h2,…h6，用于表示文章中的各种标题。标题号越小，字体越大。hn有对齐属性，用align＝# #表示，属性值可以是left标题居左、center标题居中、right标题居右。 （2）实验步骤 第一步：单击 “开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如图12.3语句。 第三步：保存为htm文件，在浏览器中打开，如图12.4所示。 2. 分段P （1）知识准备 　　分段元素P用于划分段落，控制文本的位置，比较常用的属性是：align＝# #可以是left、center、right。 （2）实验步骤 第一步：单击 “开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如下语句。 htmlheadtitle段落标签/title/headbodyP ALIGN=CENTER浣溪沙/P P一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。/P P无可奈何花落去，似曾相识燕归来。小园香径几徘徊。/P /body/html 第三步：保存为htm文件，在浏览器中打开，如图12.5所示 3. 换行br：是一个单标签，用于创建回车换行。 第一步：单击“开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如下语句。 htmlheadtitle换行示例/title/head body登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。p align=“center”登鹳雀楼brbr白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。/p/body /html 第三步：保存为htm文件，在浏览器中打开，如图12.6所示 4. 表格 （1）