# 挑戰簡易切版+學習在Github上建立 proejcts 專案 ###### tags: `HTML` `CSS`, `Github` 練習實作網址：https://judyyutong.github.io/my-projects/tribute.html ## 新增Github專案 * 在github上新建Repository，命名為：my-projects * 在本機上新增一個空資料夾，命名為：projects * 使用git指令初始化「projects」資料夾，Github上的遠端「my-projects」認識本機。「projects」 * 之後本機資料夾「projects」變成為工作目錄，在此內新增的檔案如「tribute.index」就能push到Github上成為公開的專案與網頁被瀏覽。 ## 觀察範例版面結構 ### HTML架構與語意標籤 ``body``是網頁內所有能被看到的範圍。 可以想像illustrator中的工作區域/畫布，只有放在畫布上(像是被打上舞台聚光燈)的元件才會在輸出後被呈現。 #### ==``<div>``總容器開頭：== 在``body``內建立一個最大的容器``<div>``把所有之後要呈現的元素都包在這裡面。分上下半部。 #### 網頁上半部 - ``<h1>``大標題文字 - ``<p>``副標文字 - ``<figure>`` 主圖像區塊，其中再包含以下2區 - - ``<img>``照片本身 - - ``<figcaption>``照片解說文字 #### 網頁下半部 - **``section``事蹟年表區塊** - - ``<ul><li>``年表無序清單 - **``<blockquote>``引言區塊**其中再包含以下2區 - - ``<p>``引言文字段落 - - ``<cite>``引言作者 - **``<h3>``結尾備註** - - ``<a>``超連結至Wiki網址頁面 #### ==``</div>``總容器結尾== <br> ### CSS視覺排版影響力 之所以要特地在``<body>``之內先建立一個總容器``<div>``，是因為這樣可以透過``margin``和``padding``等去控制整體資訊在網頁上呈現的位置。``body``是一個空白的畫布，透過多層的「容器包裹」與「CSS指定屬性」，就能對所有元素在空白基底上的視覺陳列進行細微設置。 CSS的操作概念是「選擇對象」(css selector)並「指定樣式屬性」(properties)。所以需要給予HTML標籤容器加上個別命名方便選擇，假如現有兩個``<div>``標籤，給予兩者不同的``id``命名： ``<div id="cover-block">`` ``<div id="banner">`` 這樣就能針對``#cover-block``和``#banner``兩個``<div>``做不同的畫面編排設定，例如外距、內距、對齊與顏色等等......。 --- #### 此次切版所設置的CSS 1. ##### ``<body>`` ``` body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto'; line-height: 1.5; text-align: center; } ``` > 先對整體網頁進行基礎設定，包含字型、1.5行距與文字置中對齊。 ``` #cover-block{ margin: 30px 8px; padding: 15px; border-radius: 5px; background: #eee; } ``` > 設定最大總容器相對於``<body>``的外距margin與內距padding，且導入5px的圓角，並設定底色為#eee暖灰色。 --- ``` h1{ text-align: center; font-size: 2.5em; } ``` > 設定大標「Dr. Norman Borlaug」文字置中與文字大小。 --- ``` p{ display: block; margin: 1em 0; } ``` > 設定副標「The man who saved a billion lives」區塊顯示，上下撐出外距，左右自動找出相對於容器中的置中位置。 --- ``` #cover-block img{ width: 100%; } ``` > 讓圖片不要超出容器，是在容器內撐滿100% ``` #img-div{ background: white; padding: 10px; margin: 0; } ``` > 讓圖片本身所屬容器底色為白色，且內推內距10px，讓圖片看起來有白色的裝飾框邊。 --- ``` figcaption{ display: block; } ``` > 讓圖說文字``<figcaption>``整體以區塊式顯示。 --- ``` #img-caption{ margin: 15px 0 5px 0; text-align: center; } ``` > 圖說文字``<figcaption id="img-caption">``位於裝圖片的容器``<figure>``之內，讓圖說文字向外撐出左右各50px外距邊界。 ------ ``` section{ display: block; margin: 0 50px; } ``` > 設定下半部整個年表的基本設定，區塊顯示，設定左右外距為50px，讓年表資訊聚焦在畫面中間。 ``` #headline{ margin: 50px 0; text-align: center; } ``` ``` > 設定「年表標題」``<h3 id="headline">Here's a time line of Dr. Borlaug's life:<h3>``的上下外距為50px，並讓文字置中對齊。 ``` ``` ul{ max-width: 550px; line-height: 1.6; margin: 0 auto 50px auto; } ``` > 設定年表無序清單本身寬度不超過550px，且行距1.6，左右自動相對置中於所處容器，下距外撐50px。 --- ``` li{ margin: 16px 0; text-align: left; } ``` > 年表列點每一年節點文字都上下撐出16px外距，且文字在清單中是齊左。 ``` blockquote{ display: block; font-style: italic; max-width: 545px; margin: 0 auto 50px auto; text-align: left; } ``` > 整個引用文字區塊顯示，斜體，設定最大寬度是545px，且相對於所屬容器左右自動置中，下方外撐50px，文字齊左。 --- ``` h3 { font-size: 1.17em; font-weight: bold; } ``` > 最底部的備註設定文字大小與粗體。 ``` a{ color: #477ca7; } ``` > 針對底下備註文字中的超連結設定初始顏色為#477ca7（尚未被滑鼠點擊過） ``` a:visited { color: #74638f; } ``` > 超連結一旦被滑鼠點擊過則轉換顏色為#74638f，提示已經造訪過連結。