超声波捕鱼机的原理

書名： HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
作者名：新視角文化行
本章字數： 1816字
更新時間： 2019-10-23 16:45:14

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　在瀏覽器中預覽頁面

官术网_书友最值得收藏!

HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通

3.4 制作文章頁面