3.4 制作文章页面
HTML5中新增的文档结构元素非常适合制作文章或博客类的网站页面。通过使用HTML5的结构元素，比大量使用<div>标签的HTML文档结构清晰、明确。本节将综合使用前面所介绍的HTML5结构元素制作一个简单的设计网站首页面。
实战 制作设计网站首页面
最终文件：最终文件\第3章\3-4.html 视频：视频\第3章\3-4.mp4
01 执行“新建>新建”命令，将会弹出“新建文档”对话框，如图3-1所示，将该页面保存为“源文件\第3章\3-4.html”。新建外部CSS样式表文件，将其保存为“源文件\第3章\style\3-4.css”，如图3-2所示。
图3-1 新建HTML页面
图3-2 新建CSS样式表文件
02 在外部CSS样式表文件中创建名为*的通配符CSS样式和名为body的标签CSS样式，如图3-3所示。返回HTML页面中，在<head>与</head>标签之间添加<link>标签链接外部CSS样式表文件，如图3-4所示。
图3-3 CSS样式代码
图3-4 链接外部CSS样式表文件
03 首先制作页面的头部，在<body>与</body>标签之间编写如下的HTML代码。
<body> <header> <div id="top-main"> <div id="logo"><img src="images/3402.png" width="128" height="90" alt=""/></div> <nav> <ul> <li>网站首页</li> <li>关于我们</li> <li>我们的服务</li> <li>我们的作品</li> <li>联系我们</li> </ul> </nav> </div> </header> </body>
提示
通过编写的HTML代码可以看出，使用<header>标签标识出页面的头部区域，在头部区域中放置网站的logo图像，并使用<nav>标签标识出网页的导航内容。默认情况下，HTML代码中的标签仅用于表现文档的结构，并不会在页面中显示出特殊的表现效果。
04 接下来，需要通过CSS样式对页面头部的显示效果进行设置。切换到外部CSS样式表文件中，创建名为.header01和名为#top-main的CSS样式，如图3-5所示。返回网页HTML代码中，在<header>标签中添加class属性应用名为.header01的类CSS样式，如图3-6所示。
图3-5 CSS样式代码
图3-6 应用类CSS样式
提示
HTML代码中的结构标签仅仅是在HTML文档中提供一种良好的文档内容表现结构，本身并没有任何的外观样式，还需要通过CSS样式对其外观的显示效果进行控制。
05 切换到外部CSS样式表文件中，创建名为#logo的CSS样式和名为.nav01的类CSS样式，如图3-7所示。返回网页HTML代码中，在<nav>标签中添加class属性应用名为.nav01的类CSS样式，如图3-8所示。
图3-7 CSS样式代码
图3-8 应用类CSS样式
06 切换到外部CSS样式表文件中，创建名为.nav01 li的CSS样式，如图3-9所示。完成使用CSS样式对页面头部外观效果的设置，返回网页设计视图中，可以看到页面头部的显示效果，如图3-10所示。
图3-9 CSS样式代码
图3-10 页面头部的显示效果
07 接下来制作页面的主体内容部分，切换到网页的HTML代码中，在页面头部的<header>标签的结束标签之后编写如下的HTML代码。
<div id="banner"> <article> <img src="images/3403.png" width="678" height="393" alt=" "/> <hgroup> <h1>完美的设计解决方案</h1> <h2>兼容全媒体</h2> </hgroup> <p>基于对市场和客群的分析，我们只生产解决问题的创意。</p> <p>追求动人的设计，我们追求完美的体验，我们关注设计情感，为客户提供商业和视觉完美融合的设计方案，让我们的工作更加实用，更加具有商业价值！</p> </article> </div>
提示
在页面内容部分，首先使用<div>标签来划分页面区域，接着在该<div>标签中添加文章标签<article>标识出标题部分，该文章的标题有主标题和副标题，可以使用<hgroup>标签来包含主标题和副标题，使其成为一个标题组结构。
08 切换到外部CSS样式表文件中，创建名为#banner的CSS样式，如图3-11所示。返回网页设计视图中，可以看到该部分内容的效果，如图3-12所示。
图3-11 CSS样式代码
图3-12 页面效果
09 切换到外部CSS样式表文件中，创建名为.article01和名为.article01 img的CSS样式，如图3-13所示。返回网页HTML代码中，在<article>标签中添加class属性应用名为.article01的类CSS样式，如图3-14所示。
图3-13 CSS样式代码
图3-14 应用类CSS样式
10 返回网页设计视图中，可以看到该部分内容的效果，如图3-15所示。切换到外部CSS样式表文件中，创建名为.article01 h1和名为.article01 h2的CSS样式，如图3-16所示。
图3-15 页面效果
图3-16 CSS样式代码
11 切换到外部CSS样式表文件中，创建名为.article01 p的CSS样式，如图3-17所示。返回网页设计视图中，可以看到该部分内容的效果，如图3-18所示。
图3-17 CSS样式代码
图3-18 页面效果
12 接下来，制作页面的版底信息内容部分，切换到网页的HTML代码中，在页面中id名为banner的div结束标签之后编写如下的HTML代码。
<footer> Copyright © 2017 SLIDOR.by:未来设计<br> <address> 联系电话：010-xxxxxxxx E-Mail:xxxxx@163.com </address> </footer>
13 切换到外部CSS样式表文件中，创建名为.footer01的类CSS样式，如图3-19所示。返回网页HTML代码中，在<footer>标签中添加class属性应用名为.footer01的类CSS样式，如图3-20所示。
图3-19 CSS样式代码
图3-20 应用类CSS样式
14 完成该页面的制作，完整的页面HTML代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作设计网站首页面</title>
<link href="style/3-4.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="header01">
<div id="top-main">
<div id="logo"><img src="images/3402.png" width="128" height="90" alt=""/></div>
<nav class="nav01">
<ul>
<li>网站首页</li>
<li>关于我们</li>
<li>我们的服务</li>
<li>我们的作品</li>
<li>联系我们</li>
</ul>
</nav>
</div>
</header>
<div id="banner">
<article class="article01">
<img src="images/3403.png" width="678" height="393" alt=" "/>
<hgroup>
<h1>完美的设计解决方案</h1>
<h2>兼容全媒体</h2>
</hgroup>
<p>基于对市场和客群的分析，我们只生产解决问题的创意。</p>
<p>追求动人的设计，我们追求完美的体验，我们关注设计情感，为客户提供商业和视觉完美融合的设计方
案，让我们的工作更加实用，更加具有商业价值！</p>
</article>
</div>
<footer class="footer01">
Copyright © 2017 SLIDOR.by:未来设计<br>
<address>
联系电话：010-xxxxxxxx E-Mail:xxxxx@163.com
</address>
</footer>
</body>
</html>
15 返回网页设计视图中，可以看到版底信息的显示效果，如图3-21所示。保存页面，并保存外部CSS样式表文件，在浏览器中预览页面，可以看到页面的效果，如图3-22所示。
图3-21 页面效果
图3-22 在浏览器中预览页面