项目五 李白个人生平
本项目旨在能够灵活运用整章知识点设计页面。本项目创建了“唐朝诗人群像”网站的第三个页面——即李白个人生平页面，主要完成其 HTML部分。
【项目目的】
- 灵活运用HTML 基本标记。
- 掌握在 HTML页面中嵌入多媒体对象的方法。
【项目内容】
- 利用HTML标记对网页进行结构化。
- 能够合理的划分网页结构。
【项目步骤】
本项目素材包括音频、图片和文本，新建 HTML 文件，命名为 libai-experiencel.html。
将“李白生平经历素材.txt” 文件的所有内容粘贴到<body>标记间。
1.网页总体结构化
素材“李白生平经历素材.tx”文件分为13个部分，见注释。分别是 ！--header-->、＜！-背景音乐 ->、＜！--标题李白-->、 ！--页面尾部-->、<！--1导读-->.••<！--10story故事3-->。在本部分做页面结构化是为了在后续项目中进行页面布局，参照项目图5-1所
（1） ＜header>及<nav>标签：页面头部将作为页面的主导航，因此将注释中页面头部的
"首页.•调查问卷”内容添加到指定标签内。
（2） <aside> 标签：将注释背景音乐部分，即文字〝背景音乐”，将添加到<aside>标签
内。此部分将作为背景音乐。
（3） <main>标签：此部分包括了从“1导读—10 故事3”的十个主题，将其加入到
＜main>标签中。主体 main 将划分为两个部分，分别是 content 和 aside。
- <div id="content”>：根据注释，将“标题李白—7 当涂”划分到此部分。
- <aside id="story”>：根据注释，“a 故事1—10 故事3” 划分到此部分。
- <div id="daodu”>：根据注释，“1导读”划分到此部分。
项目图5-1网页总体结构划分
2.网页细分
（1）划分<header>细分：此部分用来做主导航，所以需要用＜nav>、<ul>、<li>标签将
header部分划分为导航和列表，请参照项目图5-2所示进行结构化。
项目图5-2<header>部分细分
（2）<divid="content™>细分：参照项目图5-2所示结构化。
①<h1>：根据注释，将<I-标题李白-->中的内容用<h1>标签结构化。
<h1>李日</h1>
②<pre>：将注释<！--1导读-->部分的内容，用＜pre＞标签结构化。
項目图5-3<divid="content＞部分的添加
③从注释2一注释7，主体内容的标题使用<h2>标记，将所有段落使用<p>标记，参照
项目图5-4所示。
项目图 5-4 <div id="content”>部分细分
（3） <aside id="story”>部分细分
- 将"小故事一Storiette“设置<h3>标签，“小事一”后换行，“ Storiette“设置斜体。
- 其他段落加入<p>标签。
“小故事二”、“小故事三”参照均参照项目图5-5所示。
项目图5-5<asideid="story”>部分细分
（4）＜footer>部分细分
此部分作为页面的尾部导航，因此将使用<nav>、<ul>、<li>等标记，版权等使用
<address>标记，参照项目图5-6所示，设置超链接。
项目图 5-6 ＜footer>部分细分
3. 插入图片、音频、链接与其他效果
（1） 插入图片
注：图片位于“素材”文件夹中 “images” 文件夹中。
- 在页面头部，<nav>标签之下，添加图片 “logo.png”，如项目图5-2所示。
- 如项目图5-3所示，在“1导读”部分，插入图片 daodu.png。在“2综述”部分，插入图片libai1,jpg如项目图5-7所示。
项目图 5-7 图片插入位置
③在 “story”部分，如项目图 5-8所示，在对应位置分别添加图片 “libai2.jpg”与“libai3.jpg”。
项目图5-8图片添加位置3
（2）如项目图5-9所示，对“背景音乐”添加＜br>标签。
项目图5-9“背景音乐”部分的代码演示
（3）插入音频
音频文件位于“素材”文件夹中的“audio”文件夹内。如项目图5-10所示，在对应位
置添加音频“bgm.mp3"
项目图5-10音频添加位置
（4）添加滚动的文本字幕
用marquee标签对“背景音乐”部分添加一个自上而下滚动的文本字幕。
扫一扫
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
