---
# System prepended metadata

title: 挑戰簡易切版+學習在Github上建立 proejcts 專案
tags: [HTML, Github, CSS]

---

# 挑戰簡易切版+學習在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，提示已經造訪過連結。