上机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 … “开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如图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文件标题/titletitle标明该html文件的标题，是对文件内容的概括。文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。除了标识窗口外，当将某一homepage存入书签或文件时，title还用作书签名或缺省的文件名。hn文标题/ 标题元素有6种，分别为h1, h2,…h6，用于表示文章中的各种标题。标题号越小，字体越大。hn有对齐属性，align＝# #表示left标题居左center标题居中right标题居右“开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如图12.3语句。 第三步：保存为htm文件，在浏览器中打开，如图12.4所示。 2. 分段P　　分段元素P比较常用的属性是：alig＝# #可以是leftcenter、right。 （2）实验步骤 第一步：单击 “开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如下语句。 htmlheadtitle段落标签/title/headbodyP ALIGN=CENTER浣溪沙/PP一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。/PP无可奈何花落去，似曾相识燕归来。小园香径几徘徊。/P/body/html 第三步：保存为htm文件，在浏览器中打开，如图12.5所示 3. 换行br“开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如下语句。 htmlheadtitle换行示例/title/head body登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。“center”登鹳雀楼br白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。/body /html 第三步：保存为htm文件，在浏览器中打开，如图12.6所示 4. 表格 （1）知识准备 基本格式为：table.../table 用来定义表格tr定义表行td定义表table border width=# height=#定义表格尺寸colspan定义跨多列的表元rowspan定义跨多行的表元“开始—程序—附件—记事本”，打开记事本窗口。 第二步：在记事本中，输入如下语句。 html head title表格练习/title /head