Onepage Website - 第1步: Bootstrap網頁設計

第1步: Bootstrap網頁設計(30分鐘)

1. 檔案結構與新增所需檔案

Bootstrap的目錄結構:

bootstrap/
├── css/
│   ├── bootstrap.min.css
├── js/
│   └── bootstrap.min.js
└── fonts/

在根目錄新增一個index.html檔案,裡面的內容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的公司</title>
</head>
<body>
</body>
</html>

在css目錄中新增一個custom.css檔案,這是之後放自訂的css樣式表用的。內容如下:

/css/custom.css

html, body {
  height: 100%;
  width: 100%;
}

在js目錄中新增一個custom.js檔案,這是之後放自訂的javascript程式碼用的。內容如下:

/js/custom.js

$(document).ready(function (){

});

在根目錄新增一個images資料夾,把幾個範例的圖片放入:

  • joomla_logo.png

joomla_logo.png

  • home.jpg

home.jpg

  • info.jpg

info.jpg


2. 新增所需的HTML標記

在index.html檔案中加入Bootstrap所需的與剛新增的css、js檔案,以及meta標記:

這是加在<meta charset="UTF-8">下面的程式碼:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

這是加在</head>前面的程式碼:

    <!-- Bootstrap的css樣式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 自訂的css樣式 -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- jQuery函式庫 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap的js函式庫 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 自訂的js程式碼檔案 -->
    <script src="js/custom.js"></script>

3. 加入第1個區塊 - 首頁

<body>加入第1個區塊,這是訪客一進入這個網站會看到的區塊,程式碼如下:

<!-- 第1個區塊 - 首頁 -->
<div id="home" class="home">
  <div class="text-vcenter">
    <h1>歡迎!</h1>
    <h3>這是一個使用Bootstrap3設計的網站</h3>
    <a href="#about" class="btn btn-default btn-lg">關於我們</a>
  </div>
</div>
<!-- 第1個區塊 -->

在custom.css檔案中加入第一個區塊用的css樣式,把文字置中與背景圖等等的樣式:

/* 文字垂直置中 */
.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

/* 文字大小 */
.text-vcenter h1 {
  font-size: 45px;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

/* 第1個區塊用 */
#home {
  background: url(../images/home.jpg) no-repeat center center fixed;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

檢查點:文字置中、背景圖、按鈕是否有樣式出現


4. 加入第2個區塊:關於我們

在第1個區塊的後面,</body>標記之前,加入以下的程式碼:

<!-- 第2個區塊 - 關於我們 -->
<div id="about" class="top-bottom-pad">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <img src="images/joomla_logo.png" alt="" />
      </div>
      <div class="col-sm-6 text-center">
        <h2>關於我們</h2>
        <p class="lead">我們提供在Joomla!這套相當知名的內容管理系統(Content Management System, CMS),相關的專業網頁建置服務、網頁程式撰寫與網路行銷等服務。</p>
      </div>
    </div>
  </div>
</div>
<!-- 第2個區塊 -->

以及第二個區塊使用的CSS樣式,這個樣式是拉大上方和下方的間距:

/* 拉大間距 */
.top-bottom-pad {
  padding: 70px 0;
}

這區程式碼用了Bootstrap中的柵格(Grid)系統語法,稍微解說一下,以是是中文說明。

檢查點:第1個區塊的按鈕是否可以連到第2個區塊,背景圖是否有視差的特效。


5. 加入選單(導航)列

在第1區塊的上面,<body>標記的下方,加入以下的程式碼:

<nav class="navbar navbar-default navbar-fixed-top">

    <div class="container">

      <div class="navbar-header">
        <!--給手機按鈕使用的-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <!--給手機按鈕使用的-->

        <!--  網站的Logo -->
          <a class="navbar-brand" href="#">我的公司</a>
        <!--  網站的Logo -->

      </div>

      <!-- 一般用的網站選單列 -->
      <div id="navbar" class="navbar-collapse collapse ">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">首頁</a></li>
            <li><a href="#about">關於我們</a></li>
            <li><a href="#services">產品服務</a></li>
            <li><a href="#info">最新資訊</a></li>
            <li><a href="#contact">連絡我們</a></li>
        </ul>
      </div>
      <!-- 一般用的網站選單列 -->

    </div>

  </nav>

因為我們加入的是"固定式的選單/導航列",所以需要加入修正的CSS樣式在custom.css中:

/* 修正上方固定導航列 */
body {
  padding-top: 50px;
}

這段程式碼用了Bootstrap中的導航列語法,相關的解說連結如下:

檢查點:選單項目是否可以連到第1個首頁區塊和第2個區塊。縮小瀏覽器視窗,是否可以看到給手機大小使用的選單按鈕。

6. 加入第3區塊:產品服務

在第2區塊的下方,</body>標記之前,加入以下的程式碼:

<!-- 第3區塊 - 產品服務 -->
<div id="services" class="top-bottom-pad">
  <div class="container">
    <h2 class="text-center">產品服務</h2> <hr />
    <div class="row text-center">
      <div class="col-sm-3 col-xs-6">
        <i class="glyphicon glyphicon-cloud"> </i>
        <h4>購物車服務</h4>
        <p>這是一段範例的文字,裡面可以填上你想要的內容。這是一段範例的文字,裡面可以填上你想要的內容。</p>
      </div>
      <div class="col-sm-3 col-xs-6">
        <i class="glyphicon glyphicon-leaf"> </i>
        <h4>Android手機App開發</h4>
        <p>這是一段範例的文字,裡面可以填上你想要的內容。這是一段範例的文字,裡面可以填上你想要的內容。</p>
      </div>
      <div class="col-sm-3 col-xs-6">
         <i class="glyphicon glyphicon-phone-alt"> </i>
        <h4>Joomla! CMS建置</h4>
        <p>這是一段範例的文字,裡面可以填上你想要的內容。這是一段範例的文字,裡面可以填上你想要的內容。</p>
      </div>
      <div class="col-sm-3 col-xs-6">
        <i class="glyphicon glyphicon-bullhorn"> </i>
        <h4>Facebook行銷</h4>
        <p>這是一段範例的文字,裡面可以填上你想要的內容。這是一段範例的文字,裡面可以填上你想要的內容。</p>
      </div>
    </div>
  </div>
</div>
<!-- 第3區塊 -->

第3區塊使用的CSS樣式,加入到custom.css中:

/* 背景顏色與字的顏色*/
#services {
  background-color: #306d9f;
  color: #ffffff;
}

/* 圖示字型的大小與外觀 */
#services .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}

第3區塊用了之前說的柵格系統來排版,以及Bootstrap內附的圖示字型(icon font),相關的說明如下:

圖示字型因為就像一般的文字一般,所以文字的顏色在CSS定義時(例如這裡是定義為白色),也會跟著一起變為白色,字體大小之類的CSS定義也是相同的道理。以下這套是另一套很常見的圖示字型:

7. 第4個區塊:最新資訊

在第3區塊的下方,</body>標記之前,加入以下的程式碼:

<!-- 第4個區塊:最新資訊 -->
<div id="info" class="top-bottom-pad">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h2 class="panel-title">寒流報到注意保暖</h2>
          </div>
          <div class="panel-body lead">
            氣象局表示,今天持續受寒流影響,清晨本島平地最低溫在淡水九點七度,北部及東北部氣溫仍然偏低,氣象局也發布低溫特報,今天到明天清晨,台南以北及宜蘭沿海空曠地區、金、馬等地,都將出現攝氏十度左右的低溫,民眾要注意保暖,農、漁業要嚴防寒害。(中廣新聞網)
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h2 class="panel-title">2016年新北市平溪天燈節</h2>
          </div>
          <div class="panel-body lead">
            情人節到平溪放天燈! 「2016年新北市平溪天燈節」第二場活動「心心相印 情定平溪」祈福燈會今(14)日在平溪國中浪漫登場。繼2月11日第一場活動「童趣天燈 指在菁桐」得到熱烈迴響之後,今日重頭戲高達6公尺、約兩層樓高的20呎「心心相印天燈」,由馬英九總統及新北市侯友宜副市長共同施放。(新北市政府觀光旅遊局新聞稿)
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 第4個區塊 -->

第4區塊使用的CSS樣式,加入到custom.css中:

/* 第4個區塊用 */
#info {
  background: url(../images/info.jpg) no-repeat center center fixed;
  display: table;
  height: 800px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* 第4個區塊中的新聞用 */
#info .panel {
  opacity: 0.85;
}

第4個區塊使用了如第1個區塊中的視差特效(Parallax),另外使用了以及Bootstrap內附的面版(panel)元件,相關的說明如下:

8. 第5個區塊:連絡我們

在第4區塊的下方,</body>標記之前,加入以下的程式碼:

<!-- 第5個區塊:連絡我們 -->
<div id="contact">
  <div id="gmap">
    <img src="images/gmap.jpg" height="498">
  </div>
</div>
<!-- 第5個區塊 -->

圖片下載:

  • gmap

第5區塊使用的CSS樣式,加入到custom.css中:

/* 第5個區塊中使用 */
#gmap{
   height:500px;
}

這個區塊只是一張地圖的圖片,你可以加入連至Google地圖的連結,或是參考回家作業的方式嵌入Google地圖。

9. 加入頁腳(footer)和回到上方的連結

在第5區塊的下方,</body>標記之前,加入以下的程式碼:

<!-- 頁腳(footer) -->
<footer>
  <div class="container">
    <p>電話:(06)12345678 電子郵件:service@test.com</p>
    <p class="text-right">版權所有 &copy; 我的公司 2016</p>
  </div>
</footer>
<!-- 頁腳(footer) -->

<!-- 回到上方的連結 -->
<ul class="nav pull-right scroll-top">
  <li><a href="#home" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
</ul>
<!-- 回到上方的連結 -->

頁腳(footer)和回到上方的連結使用的CSS樣式,加入到custom.css中:

/*頁腳使用的樣式*/
footer {
    background-color:#494949;
    color:#ddd;
    min-height:100px;
    padding-top:20px;
    padding-bottom:40px;
}

/*回到上方區塊使用的樣式*/
.scroll-top {
   position:fixed;
   bottom:0;
   right:15px;
   z-index:100;
   font-size:24px;
   margin-bottom:20px;
   margin-right:10px;
   background-color: #8f8f8f;
}
.scroll-top a:link, .scroll-top a:visited {
   color:#777;
}

回到上方連結,使用了Bootstrap內附的導航列樣式與圖示字型(icon font),另外也用了固定住位置的CSS。相關的說明如下:

檢查點:點按所有的連結,看是不是都能正確的移動到每個位置上。