项目三 李白代表作品页面
本项目在项目二的基础上，继续完成李白代表作品页面的HTML 部分。本次的主要任务是在其中加入图片、音频、视频、表格和超链接等元素。
【项目目标】
- 熟练运用相对路径的表示方法。
- 熟练操作锚元素进行网页内部、网页之间的链接。
- 熟练运用图片、音频、视频的插入方法，以及网页中表格的制作。
- 了解iframe 的基本使用方法。
【項目内容】
- 在个人简介页面利用锚元素设置目录。
- 利用img、audio、video 元素在网页中添加图像、视频、音频等元素。
- 利用iframe 元素在网页中添加框架。
【项目步骤】
项目三中素材文件夹中的“libai-representativeworks1.htm/”文件是项目二的结果文件，将其另存为"libai-representativeworks2.html”。“李白代表作品素材.txt”文件分为五个部分，均用注释做出编号，其中“蹉跎岁月”和“赋歌而终”又细分为三部
实现如项目图3-1所示的最终效果。
项目图3-1最终效果
1.导航部分 （1）先将images文件夹下的图片logo.png添加到<body>标签之后；再将素材“李白 代表作品素材tx文件中“<！--1主导航部分-->"文本粘贴到图片之后；作为整个网站的
主导航栏，设置其为无序列表。效果参考项目图3-2所示。
项目图3-2logo 及主导航部分 项目图 3-3导航部分
（2）将"李白代表作品素材.txt”文件中 ！--2子导航部分 ->的文字粘贴到“李白一
代表作品”与“名句赏析”之间。
- 在“李白一代表作品”之上，插入素材 images 文件夹中提供的图片 mount.png，注意使用相对路径。
- “目录”两字用<h2>标记格式化。
- 将从“李白简介”到“相关视频”6段文字，设置为无序列表，作为子导航栏。
（3）紧接着添加两个<h2>标签，效果如项目图 3-3所示。
＜h2>李白简介</h2>
＜h2>题材介绍</h2>2.“早年天才”部分
在本网页中列举了李白的三个人生阶段：早年天才、蹉跎岁月和赋歌而终。每个阶段又
分为说明、诗句和注释部分。其中早年天才的文字内容已具备，需要设置：
（1）将“注释”部分，<h3>标记的类名设置为“comments”。
（2） 将“说明”部分，<p>标记的类名设置为 “teext”。
3.“蹉跎岁月”和“赋歌而终〞部分
将素材文件中两个部分的文字内容粘贴到网页文件的相应位置，模仿“早年天才”部分 代码，根据项目图3-4所示，为“蹉跎岁月”和“赋歌而终”两个部分添加相应的HTML标
签，效果如项目图3-5所示。
项目图3-4“蹉跎岁月”部分的标记
项目图3-5“蹉跎岁月”效果图
4.相关视频
在网页文件"libai-representativeworks2.html”中＜|--5相关视频部分-->部分，文字
“相关视频”前后，添加＜h2>标签。
＜h2>相关视频</h2>
并将素材video文件夹中的视频libai.MP4插入相应的位置，设置其宽度为600px，高
度为300px，显示视频播放控件，循环播放，效果如项目图3-6所示。
项目图3-6新增“相关视频”部分
频”部分
5.锚元素设置
（1） 内部锚点的使用
- 为子导航部分“题材介绍”与标题“题材介绍”之间建立链接，实现：单击目录中的“题材介绍” 链接，即可跳转到“题材介绍” 标题的效果。
- 为子导航部分“名句赏析”与标题“名句赏析”之间建立链接，实现：单击目录中的“名句赏析”链接，即可跳转到“名句赏析”标题的效果。
后面的段落依此类推，完成后保存文件 libai-representativeworks2.html 并在浏览器中打
开，进行测试。
（2） 外部锚点的使用
①在网页的页脚部分添加<a>标签，内容为“联系我们”。为该标签设置外部链接：
http://www.ujn.edu.cn，当单击“联系我们”时则可以跳转到济南大学的网页。完成后保存并在浏览器中打开，进行测试。
② 将尾部导航的其他列表项设置为空链接。
6.表格制作
在“题材介绍”标题下方添加表格，其id设置为"themelntro”为了清晰显示，利用HTML属性将边框粗细设置为1px，如项目图3-7所示，。
项目图3-7表格样式
7.iframe的使用
在“李白简介”下方尝试用iframe框架，展示另一个网页，实现项目图3-8所示的效
果。
（1）将iframe设置宽度为700px，高度为300px，无边框。
（2）框架中展示网页文件为项目一的结果文件“introduction-libai.htm/”，该文件已在素
材文件夹中给出，注意使用相对路径。
项目图3-8irame效果
8.页面结构划分
根据项目图3-9所示，将页面划分，特别注意语义元素的使用，以及id和class的命
名！请切记按图示给id和class赋值，以便后期进行页面布局。
项目图3-9网页结构划分
到这里，李白代表作品页面的HTML部分完成了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
