下载掌阅APP，畅读海量书库
立即打开
本实训任务是制作“党史学习教育专题网”页面。使用图像元素、列表元素和超链接元素制作首页及其子页面，主要包含“党史学习教育专题网”首页、“习近平同志《论中国共产党历史》”子页面和“中国共产党简史”子页面。页面效果如图4-2、图4-3、图4-4所示。
图4-2 “党史学习教育专题网”首页效果
图4-3 “习近平同志《论中国共产党历史》”子页面
图4-4 “中国共产党简史”子页面
整个站点共有三个页面，每个页面的具体设计思路如下。
“党史学习教育专题网”首页布局一共分为三个部分：头部、主体和版权页脚，页面设计如下。
头部主要分为两个部分：图片和导航，其中导航使用超链接完成，页面设计如图4-5所示。
图4-5 头部布局结构图
页面主体主要分为上下两部分结构，其中，上面为四张图片链接，下面为四个文本链接，页面主体设计如图4-6所示。
图4-6 页面主体设计
设计包含了一个p元素和font元素，设计如图4-7所示。
图4-7 页脚部分的设计
“习近平同志《论中国共产党历史》”子页面布局一共分为三个部分：头部、主体和版权页脚，页面设计如下。
在p元素中嵌套一个img元素，如图4-8所示。
图4-8 “习近平同志《论中国共产党历史》”子页面布局——头部
页面主体部分设计，如图4-9所示。
图4-9 “习近平同志《论中国共产党历史》”子页面布局——主体
页脚部分的设计包含一个p元素和font元素，如图4-10所示。
图4-10 “习近平同志《论中国共产党历史》”子页面布局——页脚
“中国共产党简史”子页面布局一共分为三个部分：头部、主体和版权页脚，页面设计如下。
在p元素中嵌套一个img元素，如图4-11所示。
图4-11 “中国共产党简史”子页面布局——头部
通过ol列表完成主体部分的创建，如图4-12所示。
图4-12 “中国共产党简史”子页面布局——主体部分
设计包含了一个p元素和font元素，如图4-13所示。
图4-13 “中国共产党简史”子页面布局——页脚
在项目chapter04 内新建“党史学习教育专题网”页面，并将它命名为“lesson4.html”，如图 4-14 所示。
图4-14 创建页面
首先设置页面标题为“党史学习教育专题网”，在第一个<p>标记中插入<img>标记，给页面添加头部图片，并设置图片居中显示；然后在第二个<p>标记中添加<font>标记；接着在<font>标记中添加<b>标记，实现文本大小的设置及加粗设置；最后在<b>标记中添加四个<a>标记，完成导航链接。
在p元素中添加四个<a>标记，接着在<a>标记中添加<img>标记实现图片链接，设置图片宽度为300 px，添加<img>标记的alt属性。
在<p>标记中添加<font>标记，接着在<font>标记中添加<b>标记实现文本大小的设置及加粗设置，最后在<b>标记中添加四个<a>标记完成文本链接。
在<p>标记中添加<font>标记，输入相应内容，对文本“12345678@××.com”添加邮件链接，设置页脚部分文本居中，并设置背景颜色为“red”。
在项目chapter04 内新建“习近平同志《论中国共产党历史》”页面，将它命名为“ls.html”，如图4-15所示。
设置页面标题为“习近平同志《论中国共产党历史》”，在<p>标记中插入<img>标记给页面添加头部图片，设置图片居中显示。
图4-15 新建子页面1
首先使用<ol>标记添加有序列表，在每个<li>标记中添加<a>标记；其次在有序列表后添加每个列表项对应的标题和段落内容，为每个段落添加锚点标记，最后在<a>标记中设置属性href=“#+id”定义锚点链接。
在p元素中添加<font>标记，输入相应的内容，对文本“12345678@××.com”添加邮件链接，设置页脚部分文本居中，并设置背景颜色为“red”。
在项目chapter04内新建“中国共产党简史”页面，将它命名为“js.html”，如图4-16所示。
图4-16 创建子页面2
设置页面标题为“中国共产党简史”，在<p>标记中插入<img>标记给页面添加头部图片，设置图片居中显示。
首先使用<ol>标记添加有序列表，然后在每个<li>标记中添加<a>标记设置超链接。
在<p>标记中添加<font>标记元素，输入相应内容，对文本“12345678@××.com”添加邮件链接，设置页脚部分文本居中，并设置背景颜色为“red”。
