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　在浏览器中预览页面

上一章目录下一章