下载掌阅APP，畅读海量书库
立即打开
制作“红色旅游”网页。
（1）掌握常用的HTML标签。
（2）掌握网页的CSS样式布局。
（3）掌握JavaScript技术。
根据智慧树平台上课程资源所给的网页样张和素材，制作“红色旅游”网页。
（1）根据对样张的分析，将网页的结构分为页头、页身、页尾三部分，如图2-22所示。
图2-22 网页框架
（2）使用<div>标签将页面分为上、中、下三部分，分别表示页头、页身、页尾。
图2-23 <div>标签代码
（3）页头使用表格分为两行。第一行分为三个单元格。第一个和第三个单元格均显示文字内容。第二个单元格展示轮播图，轮播图使用JS实现。第二行为导航栏，导航栏一般由列表实现。水平列表的实现需要将<li>标签的display值设置为inline。实现轮播图的JS代码放在<body>标签内，以确保脚本执行前页面已经完成DOM树渲染，如图2-24所示。
图2-24 JS代码
实现导航栏的代码如图2-25所示。
图2-25 导航栏代码
（4）在页身中使用<div>标签将内容区域分为左、右两个区域（见图2-26）。此时，要将<div>的float属性设置为left。左侧区域使用<div>分为4部分，每一部分都由图片和文字组成并给图片加上边框。右侧区域使用无序列表制作新闻列表，每一个新闻标题都是一个超链接。超链接要使用test－decoration去掉下画线。
图2-26 <div>标签左右区域代码
（5）页尾介绍网页的相关信息，如版权信息等，代码如图2-27所示。
图2-27 页面尾部代码