12. 入口網站

一、搬站

在網站根目錄建立「web」資料夾
把網站搬進「web」

二、建立bootstrap4 框架

下載Bootstrap至我們的專案並解壓縮：https://github.com/twbs/bootstrap/releases/download/v4.1.0/bootstrap-4.1.0-dist.zip
下載JQuery：https://code.jquery.com/jquery-3.3.1.min.js
下載Popper：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

套用
將專案開啟至編輯器
新增一個檔案：index.html
注意js的順序

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <title>Bootstrap 離線版</title>
  </head>
  <body>
 
  </body>
</html>

三、使用table建立入口網站

程式碼


    <div class="container my-5">
      <h1 class="text-center">入口網站</h1>
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th class="text-center" scope="col" style="width:10%">#</th>
            <th class="text-center" scope="col" style="width:20%">網站名稱</th>
            <th class="text-center" scope="col">網站</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="text-center align-middle" scope="row">0</th>
            <td class="text-center align-middle" >育將電腦工作室</td>
            <td class="text-center align-middle" >
              <a href="web/index.html" target="_blank">
                <img src="....">
              </a>
            </td>
          </tr> 
        </tbody>
      </table>
    </div>

建立qrcode：http://www.quickmark.com.tw/cht/qrcode-datamatrix-generator/default.asp?qrLink

11. 修改網站內容

13. 圖片處理

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

12. 入口網站

一、搬站

二、建立bootstrap4 框架

三、使用table建立入口網站