網頁設計基礎，學習筆記

網頁設計筆記(5)－設定基礎網頁架構與切版

一般來說網頁會在body內被切分為六大塊，分別為：

<body>
    <header>頁首</header>
    <nav>導覽列</nav>
    <section>主要區域</section>
    <article>內容</article>
    <aside>選單</aside>
    <footer>頁尾</footer>
  </body>

一、傳統切板方法：直接用div來做部分切割，並且用css調整大小

<html>
  <head>
    <meta charset="utf-8">
    <link rel="shortcut Icon" type="image/x-icon" href="images\ico\iconfinder_car_1055099.ico">
    <title>切割網頁</title>
    <style>   

      body
      {
        font-size: 1.2cm;
        color: gray;
        font-style: 
      }
      header
      {
        background-color: #113144;
        height: 80px;
      }

      nav
      {
        background-color: #114424;
        height: 100px;
      }
      
      section
      {
        background-color: #241144;
        height: 150px;
      }
      
      article
      {
        /*background-color: #441131;*/
        height: 300px;
      }
      
      <!-- 加入left標籤讓裡面的元素都靠左 -->
      #left
      {
        width: 70% ;
        float: left;
      }

      aside
      {
        /*background-color: #442411;*/
        width: .30% ;
        float: left;
        height: 450px;
      }
      
      footer
      {
        background-color: #b4a8c8;
        height: 150px;
        clear: left;
      }   
    </style> 

 </head>
  
  <body>

    <header>頁首</header>
    <nav>導覽列</nav>
    <div id="left">
      <section>主要區域</section>
      <article>內容</article>
    </div>
    <aside>選單</aside>
    <footer>頁尾</footer>
  </body>
</html>

這樣的好處是簡單，但是不實用，現今有很多的設備都可以瀏覽網頁，當使用手機來看這個網頁的時候，就會所有東西都擠在一起，很小，通常這時候我們會用所謂的響應式網頁的寫法。

二、響應式網頁(以bootstrap為範本)

響應式網頁的意思是，當畫面隨著不同裝置大小改變的時候，就會改變網頁的排版，像是youtube在電腦螢幕看，右側會出現建議的影片欄位，但是用手機瀏覽器觀看時，會被移到影片介紹的下方。

電腦網頁長這樣：

換成手機就變這樣：

題外話，這為youtuve是胡子Huzi，個人目前最喜歡的台灣少數手作型youtube，而且已經算相當注重安全的了，蠻推薦的((笑

使用的插件來自於bootstrap(以下為網站連結)

https://getbootstrap.com/docs/5.0/getting-started/introduction/

不囉嗦直接上會需要引用到的程式碼

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

底部的javascript，原文也說了選一個使用即可

稍微筆記一下細節，因為Bootstrap主要是以標籤去達成響應式板塊的方法，所以要稍微認識一下

<!-- 以row將會用到響應式切板的部分包起來 -->
<div class="row">
   <!-- 以left_part當作左側的資訊欄，當畫面大小不夠的時候，會自動移成上下的欄位 -->
   <div id="left_part" class="col-md-9">
      <section>section</section>
      <article>article</article>
   </div>
   <!-- col-md-3 代表著切板的模式，詳細下方繼續介紹 -->
   <aside class="col-md-3">aside</aside>
 </div>

Bootstrap 切板是以12等分去劃分，

col-md-3的標籤表示：當畫面的尺寸寬小於md時(依下表查詢也就是小於768px)就會變成單攔的模式，反之，寬度大於768px時，會以3/12的版面顯示項目

所以你會在上面的程式碼中看到有對應的兩組相似的標籤，一個是col-md-9，一個是 col-md-3 ，代表這兩個div會以9:3的寬度比例去顯示，直到網頁的寬度小於768px才會變成單欄顯示。

詳細變化如下表：

完整的響應式切板程式碼：

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <!-- 響應式網站插件3-->
    <!-- 預設打開的版面大小conten 寬度  initial scale 比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- 已經設計好的美術設計 -->
    <link rel="shortcut Icon" type="image/x-icon" href="images\ico\iconfinder_car_1055099.ico">
    <title>響應式網頁切板</title>
    <style>
      
      body
      {
        background-color: Black !important;
        font-color:gold; 
      }

      header
      {
        background-color: #113144;
        height: 60px;
      }

      nav
      {
        background-color: #114424;
        height: 60px;
      }
      
      section
      {
        background-color: #241144;
        height: 150px;
      }
      
      article
      {
        background-color: #441131;
        height: 300px;
      }
      
    /*  #left_part
      {
        width: 70% ;
        float: left;
      }*/
      
      aside
      {
        background-color: #442411;
        /*width: .30% ;*/
        /*float: left;*/
        height: 450px;
        margin-left: -12px;

      }
      
      footer
      {
        background-color: #b4a8c8;
        height: 60px;
        /*clear: left;*/
      }



    </style>



    <!-- 響應式網站插件1-->
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  </head>
  

  <!-- 多了fluid保留的網頁邊界較少，可以用的頁面就比較多 -->
  <body>
    <div class='container-fluid'>
      
      <header>header</header>
      <nav>nav</nav>
      
  
      <div class="row">
        <div id="left_part" class="col-md-9">
          <section>section</section>
          <article>article</article>
        </div>
        <aside class="col-md-3">aside</aside>
      </div>

      <footer>footer</footer>

    </div>


    <!-- 響應式網站插件2-->
    <!-- 以下能維持原件互動性 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  </body>
</html>

發表留言