Section 9: Project1 - 台灣經濟歷史發展

Section 9: Project1 - 台灣經濟歷史發展 上課筆記

程式初始

一般專案開始時,所做的基本設定(此為VSCode,文字敘述內容則視專案而定)。

  • 新增 index.html, style.css 兩個檔案

  • index.html 中輸入英文半型 !,按 Enter 後即可自動產出最基本的 html code。

  • index.html 中的 <html lang="en"> 改為 <html lang="zh-Hant">

  • 修改 index.html 中的 <title>台灣近代發展簡介</title>

  • 新增 <meta name="description" content="日本建設基礎、美援與國民黨轉進台灣">

  • 存檔後之自動換行,似乎設定有問題

  • 連結 style.css<link rel="stylesheet" href="style.css">(path 路徑如不同需註明)

  • 以上程式碼皆在 <head></head> 中,大致依出現上述順序(後面著重順序處,會特別說明)


header, nav & main - I

上述程式初始是在 <head></head> 中,以下則在 <body></body>

header

    <header>
        <h1>台灣近代發展簡介</h1>
        <h3>示範幾個不同元件在網頁中之展現方式</h3>
    </header>

nav

    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="agriculture.html">農業</a></li>
        <li><a href="industrial.html">工業</a></li>
        <li><a href="economy.html">經濟</a></li>
        <li><a href="politics.html">政治</a></li>
        <li><a href="about.html">關於</a></li>
      </ul>
    </nav>

參考:ctrl + alt + 快捷鍵:複製該行程式碼於下一行。

main

    <main>
      <section class="left">
        <p>
          節錄自史明「台灣人四百年史」:直到四百年前浮現在東南亞的一個孤島:台灣,在中國人的眼中只不過是一個毫無用處的沙土堆成的島。在這四百年裏物質上有著移民與開拓、資本主義化及現代化;在精神上有反荷蘭、反唐山(中國人)、反日本帝國主義,以及,至今還有反國民黨集團的反殖民地傳統。結果,形成了在亞洲僅次於日本工業化的台灣人、台灣社會。
        </p>
      </section>
      <section class="right">
        <h4>外來勢力的殖民地統治</h4>
        <p>
          台灣在四百年的歲月裏,已經確實凝塑成一個固有的民族社會了,然而卻仍舊承受外來勢力的殖民地統治,尤其在二次大戰後高唱人權的世界潮流中,還被當做國際政治的交易品,而淪入中國法西斯、軍閥的蔣家國民黨政權手裹。
        </p>
      </section>
    </main>

VSCode 快捷鍵參考:輸入 section.left 後,按 tab 鍵,可自動轉換為 <section class="left"> </section>


style.css - I

header

header 幾項美觀處理:

  1. 背景色

  2. 邊界對齊:問題及解法在下方描述

  3. padding :設定後寬度會超過螢幕寬度,造成瀏覽器下方出現橫向滾動 bar。

header 邊界對齊

header 無法對齊邊界的原因:
一、body(header 的上一層) 預設 margin: 8px;
二、h1 預設 margin-top: 0.67em; margin-bottom: 0.67em;

參考資料一:

解決:設定 universal * 的相關預設值(下方示範程式的 padding: 0; margin: 0;)

* {
  padding: 0;  /* 解決 2 邊界對齊問題 */ 
  margin: 0;  /* 解決 2 邊界對齊問題 */ 
  box-sizing: border-box;  /* 解決 3 header + padding 寬度超過螢幕問題 */ 
  font-family: "Noto Sans TC", sans-serif;
}

adding padding 超過螢幕寬度

解決:padding 預設為 content-box,改為 border-box 即可。

nav bar - I

nav bar 幾項美觀處理

  1. 背景色

  2. 選單文字色的問題:並不是在 style.css 中的 nav 設定,因為會被預設值取代(default styling > inherited styling)

  3. 直向改為橫向:並不是在 nav 中直接設定 flex,而是要對 ul 做設定

  4. 去除各選單前的點色圓點:list-style-type: none;

  5. 加上 padding 美化

  6. 設定文字顏色,去除文字下方底線

nav {
  background-color: #3f3b3a;  /* 設定 1. 背景色 */ 
}

nav ul {
  display: flex;  /* 設定 3. 橫向顯示 */ 
  padding-left: 00.75rem;
  list-style-type: none;  /* 設定 4. 去除各選單前的點色圓點 */ 
}

nav ul li {
  padding: 0.5rem 0.75rem;  /* 設定 5. 加上 padding 美化 */ 
}

nav ul li a {
  color: white;  /* 設定 6. 文字顏色 */ 
  text-decoration: none;  /* 設定 6. 去除文字下方底線 */ 
}

nav bar - II

不同的選單表現方式

提示:將 nav ul li 設為 fliex(container),就可以單獨設定其 padding 值

  1. 有空再回來補充

nav bar - III

選單顏色調整:目前所在選單、hover 延遲色違

  1. 所有選單:預設灰色(#c0c0c0);目前所在選單 active class
<li><a class="active" href="#">首頁</a></li>
.active {
  color: white;
}
  1. hover 延遲色違
nav ul li a {
  color: #c0c0c0;
  text-decoration: none;
  transition: all 0.25s ease;  /* 解決 2 hover 延遲色違 */ 
}

nav ul li a:hover {
  color: white; /* 解決 2 hover 延遲色違 */ 
}

調整 h1~h6

將通用 h1~h6 改為normal,並針對要處理的 h1~h6,設定 class 調整其值。

    <header>
      <h1 class="headerTitle">台灣近代發展簡介</h1>
      <h3 class="headerSubtitle">示範幾個不同元件在網頁中之展現方式</h3>
    </header>
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

header, nav & main - II

main

這部分是在將 main 中的 p,拆分成左右兩側,並美化其外觀

main {
  width: 100%;
  display: flex;
}

幾項元件

nav bar - IV

目標:選單文字前(或其他地方),加上 twicon

  1. HTML <head> 中加上: <link rel="stylesheet" href="twicon/twicon.css">

  2. 要放 icon 的地方,加上該 icon 的程式碼,例如:<i class="twicon-main-island"></i>

google font

  1. 選擇想使用的字型(本例為 Noto Sans Traditional Chinese)

  2. 選擇想使用的 style(本例為 Regular 400)

  3. 將以下程式碼,放到 html 的 <head> 中(在 style.css 前,這樣 style.css 執行時才知道這是什麼)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
  1. 將以下程式碼,放到 style.css universal selector (*) 中
font-family: 'Noto Sans TC', sans-serif;

google map

在 google map 中輸片地點(本例為:台北),找到該地點後,點擊「分享」,然後選擇「嵌入地圖」,選擇尺寸(大、中、小、自訂大小),最後按「複製 HTML」。( iframe 嵌入碼)

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d231262.63820761105!2d121.42141232611715!3d25.08565130797771!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442ac6b61dbbd8b%3A0xbcd1baad5c06a482!2z5Y-w5YyX5biC!5e0!3m2!1szh-TW!2stw!4v1658308335564!5m2!1szh-TW!2stw" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

然後順道調整 section.right (但其實設定前看起來就是縱向排序)

section.right {
  display: flex;
  flex-direction: column;
  align-content: center;
}

YouTube

在想分享的影片,點擊「分享」,接著選「嵌入」,最後複製其 iframe code 即可。

google chart

在 google chart 首頁點選「Get started」,進入頁面後,選擇畫面左側的「Chart Gallery」。

然後就可以看到各式圖表的示意圖,本例所要使用的是「Line Chart」。

即使在 Line Chart,一樣還是有好幾項不同的曲線圖,本例使用的是「Curving the Lines」。

  1. 示範程式碼中,我們需要第一部分是 <script>...</script>(如圖)。

然後把這段程式,複製到 HTML 的 <head> 中。

一樣放在 <link rel="stylesheet" href="style.css" /> 前面

  1. 記得把 Title 和實例的值,一樣改掉

資料來源:

  1. 然後把 <body> </body> 中的程式,複製到我們想要放圖的地方(section.left)。

<div id="curve_chart" style="width: 900px; height: 500px"></div>

google chart 官網


完成品程式碼

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>台灣近代發展簡介</title>
    <meta name="description" content="日本建設基礎、美援與國民黨轉進台灣" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
    <script type="text/javascript">
      google.charts.load("current", { packages: ["corechart"] });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ["Year", "GDP"],
          ["1960", 34394],
          ["1965", 114762],
          ["1970", 231397],
          ["1975", 601778],
          ["1980", 1522459],
          ["1980", 2535056],
          ["1990", 4474288],
          ["1995", 7391062],
          ["2000", 10328549],
          ["2005", 12036675],
          ["2010", 14060345],
          ["2015", 17055080],
          ["2020", 19798597],
        ]);

        var options = {
          title: "1960~2010 台灣 GDP(單位:新台幣百萬元)",
          curveType: "function",
          legend: { position: "bottom" },
        };

        var chart = new google.visualization.LineChart(
          document.getElementById("curve_chart")
        );

        chart.draw(data, options);
      }
    </script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1 class="headerTitle">台灣近代發展簡介</h1>
      <h3 class="headerSubtitle">示範幾個不同元件在網頁中之展現方式</h3>
    </header>
    <nav>
      <ul>
        <li><a class="active" href="#">首頁</a></li>
        <li><a href="agriculture.html">農業</a></li>
        <li><a href="industrial.html">工業</a></li>
        <li><a href="economy.html">經濟</a></li>
        <li><a href="politics.html">政治</a></li>
        <li><a href="about.html">關於</a></li>
      </ul>
    </nav>
    <main>
      <section class="left">
        <p>
          節錄自史明「台灣人四百年史」:直到四百年前浮現在東南亞的一個孤島:台灣,在中國人的眼中只不過是一個毫無用處的沙土堆成的島。在這四百年裏物質上有著移民與開拓、資本主義化及現代化;在精神上有反荷蘭、反唐山(中國人)、反日本帝國主義,以及,至今還有反國民黨集團的反殖民地傳統。結果,形成了在亞洲僅次於日本工業化的台灣人、台灣社會。
          從這四百年歷史的、社會的發展來看,台灣人已經形成為一個和中華民族不同的台灣民族的社會。截至目前為止的殖民地愚民政策,使得台灣人自己完全無法理解台灣社會發展的歷史。更悲慘的是,我們只知道一個接一個換來換去的外來殖民地統治者的台灣歷史。二次大戰後,眼看同樣是同種的漢人殘酷地統治台灣,史明才開始反省什麼是種族?什麼是血統?什麼是民族?而重新來研究歷史。
        </p>
        <br />
        <p>
          儘管在日本統治時代,連雅堂是第一個台灣人寫台灣史,但遺憾的是,他是站在中國人的立場來寫台灣史的。史明研究台灣歷史,就注意到這件事情,而開始以台灣人立場出發,以一個被殖民、被剝削、被壓迫、被屠殺的台灣人立場來寫台灣史。一九六二年日文版的《台灣人四百年史》出版,歷經二十年的歲月。一九八○年更補充資料出版漢文版,一九八六年又以英文版:”Taiwan’s
          400 Year History”在美國出版。
        </p>
        <div id="curve_chart" style="width: 750px; height: 450px"></div>
      </section>
      <section class="right">
        <h4>外來勢力的殖民地統治</h4>
        <p>
          台灣在四百年的歲月裏,已經確實凝塑成一個固有的民族社會了,然而卻仍舊承受外來勢力的殖民地統治,尤其在二次大戰後高唱人權的世界潮流中,還被當做國際政治的交易品,而淪入中國法西斯、軍閥的蔣家國民黨政權手裹。
        </p>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d231262.63820761105!2d121.42141232611715!3d25.08565130797771!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442ac6b61dbbd8b%3A0xbcd1baad5c06a482!2z5Y-w5YyX5biC!5e0!3m2!1szh-TW!2stw!4v1658308335564!5m2!1szh-TW!2stw"
          width="400"
          height="300"
          style="border: 0"
          allowfullscreen=""
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
      </section>
    </main>
  </body>
</html>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

header {
  background-color: #f4f5f6;
  width: 100%;
  padding: 1rem;
}

nav {
  background-color: #3f3b3a;
}

nav ul {
  display: flex;
  padding-left: 0.75rem;
  list-style-type: none;
}

nav ul li {
  padding: 0.5rem 0.75rem;
}

nav ul li a {
  color: #c0c0c0;
  text-decoration: none;
  transition: all 0.25s ease;
}

nav ul li a:hover {
  color: white;
}

.headerTitle {
  font-size: 2.5rem;
}

.headerSubtitle {
  font-size: 1.15rem;
  padding-left: 0.25rem;
}

main {
  width: 100%;
  display: flex;
}

section.left,
section.right {
  padding: 1.5rem;
}

section.right h4 {
  font-size: 1.25rem;
  text-align: center;
}

section.right p {
  margin: 1rem 0rem;
}

section.right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.active {
  color: white;
}