Tad 教材網 - 線上書籍

:::

\[1092\] 前端技術入門
===============

### 一、關於本課程

1. 講義位置：<https://www.tad0616.net/46>
2. 課程網站：<https://www.facebook.com/groups/109xoops/>
3. 本課程是系列中的第二個學程，屬基礎部份，若有任何聽不懂的：歡迎您隨時隨地的問！
4. 上課歡迎隨時起來走動，互相觀摩交流，盡量別保持安靜，飲食部份則請至走廊食用。
5. 上課時間為週六9:10～12:00及13:40～16:30，共計六次，遇國定連假則往後延期。
6. 講師同意上課可以拍照、錄音、錄影，不需特別再詢問。
7. 座位基本上沒有強制性，但也不建議每次都換來換去，盡量在第一週後就固定住。
8. 本期助教：溫孝文、張瑛蘭、李佳玲
 
### 二、這學期會學到...

1. HTML5：也就是網頁的最基礎標籤，用來建構網頁外觀架構、表單...等。
2. CSS3：用來美化網頁外觀
3. BootStrap4：快速導入自適應框架，讓您的網站在行動裝置上看起來也一樣美觀。
4. Smarty：PHP官方樣板引擎，開發PHP程式或XOOPS必備。
5. XOOPS樣板機制：熟悉XOOPS佈景開發流程及其相關原理。
 
### 三、開發工具及開發環境

1. HTML5、CSS3及BootStrap4部份，並不需要任何伺服器，只要有瀏覽器就可以執行。
2. 實際開發XOOPS佈景時就需有網頁伺服器（如：Apache）和資料庫（如：MySQL或MariaDB），因為XOOPS必須安裝在網頁伺服器中，資料則存在資料庫中。
3. 瀏覽器部份，上課以Firefox、Chrome為主，IE建議使用11版以後版本，建議安裝：
 
 
 1. Web Developer: <https://chrispederick.com/work/web-developer/>
 2. ColorZilla: <https://www.colorzilla.com/>
4. 建議先裝node.js: <https://nodejs.org/en/>，讓功能更完整（務必安裝 > 6.0 版本）。檢查版本：
 
 
 ```bash
 node -v
 ```
5. 再安裝git: <https://git-scm.com/download/win>，VSCode的版本控制才會有作用。檢查版本：
 
 
 ```bash
 git --version
 ```
6. 建議編輯器為Visual Studio Code: <https://code.visualstudio.com/>，基本設定：
 
 
 ```javascript
 // 控制字型大小 (以像素為單位)。
 "editor.fontSize": 18,
 // - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
 "editor.wordWrap": "on",
 // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
 "editor.formatOnPaste": false,
 // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
 "editor.mouseWheelZoom": true,
 // 若啟用，則會在儲存檔案時，修剪檔案末新行尾的所有新行。
 "files.trimFinalNewlines": true,
 // 若啟用，將在儲存檔案時修剪尾端空白。
 "files.trimTrailingWhitespace": true,
 // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
 "editor.formatOnSave": true,
 ```
7. 安裝以下套件
 
 
 1. Auto Close Tag : 讓標籤自動閉合的。
 2. Auto Rename Tag : 讓成對的標籤自動一起修改。
 3. AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
 4. Beautify：格式化語法
 
 
 ```javascript
 "beautify.language": {
 "js": {
 "type": [
 "javascript",
 "json"
 ],
 "filename": [
 ".jshintrc",
 ".jsbeautifyrc"
 ]
 },
 "css": [
 "css",
 "scss"
 ],
 "html": [
 "htm",
 "html",
 "tpl"
 ]
 },
 ```
 5. Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets : 插入Bootstrap 4 或 Font awesome 的語法片段。
 6. Bootstrap4 Snippets： Bootstrap4的語法片段
 7. Chinese (Traditional) Language Pack for Visual Studio Code：中文介面
 8. colorize：將顏色視覺化
 9. Copy filename：快速複製檔名
 10. Highlight Matching Tag：自動高亮度同一組標籤
 11. HTML CSS Support：可快速套用class及id等屬性
 
 
 ```javascript
 "css.fileExtensions": [
 "css",
 "scss",
 "tpl"
 ],
 "css.remoteStyleSheets": [
 "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 ],
 ```
 12. indent-rainbow：以顏色標出縮排
 13. Material Icon Theme：精美的檔案圖示
 14. vscode-goto-documentation：快速檔案搜尋
 
### 四、HTML5基本概念

1. 廣義論及HTML5時，實際指的是HTML、CSS和JavaScript在內的技術組合
2. HTML非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
3. 開發佈景、寫程式，都會用到HTML，因此，不建議依賴所見即所得軟體。
4. HTML5手冊：<http://www.w3big.com/zh-TW/html/html5-intro.html>
 
### 五、建立HTML檔案及HTML5特性

1. 先建立my\_theme 資料夾，並用VSCode開啟它，新增一個文件，存為theme.html
2. HTML的檔案內容為純文字，副檔名為.html，用瀏覽器就可以讀取HTML檔。
3. 利用「!」建立一個空的HTML5檔案（!bcdn可建立含BootStrap4的HTML5檔案）
4. HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>
5. <html></html>一整個HTML頁面，請加上語言標籤：<html lang="en">或<html lang="zh-Hant-TW">（語言 - 字體 - 地區 - 方言 ）
 
 
 1. <head></head>是給瀏覽器看的，通常裡面至少會有meta及title等標籤。
 
 
 1. 重要！告知網頁要用何編碼類型：<meta charset="utf-8">
 2. <link rel=”類型” href=”位置”>大部分用來連結外部CSS檔
 3. <script src="js檔位置"></script>用來連引入JavaScript檔
 2. <body></body>主要內容區，是給人類看的部份。
6. HTML標籤通常是一對的，如：內容或<div>文字</div>
7. HTML5 中，空標籤（如：meta、br、img 和input ）並不需要閉合標籤。
8. 標籤會有多個屬性，如：<html lang="en">，其中lang即為屬性。
9. HTML標籤及屬性是不分大小寫的：<HTML>和<html>一樣，但建議採用小寫。
10. HTML5棄用舊標籤：center、font、frame、 frameset、noframes、s、u...等。
11. HTML5新增了許多語義化標籤（亦可自訂）、增強表單功能（新類型、新屬性），亦直接支援視頻和音頻、新增canvas 製圖功能以及新增本地端儲存...等許多新功能（大部分需要搭配JavaScript才能使用）
 
### 六、設計佈景的正確觀念

1. 版型不應該用Table來建立，而是應該用<div>或這類本身不具意義的標籤來規劃版型。用表格會缺乏彈性，表格就應該拿來當作表格用。
2. HTML用來作為網頁結構的規劃，而非外觀的設計。外觀一律建議使用CSS來控制。
 
### 七、HTML常用基本標籤

1. 完整標籤列表：<http://www.w3big.com/zh-TW/tags/ref-byfunc.html>
2. 可隨時至 <http://codepen.io/pen/> 做線上練習
3. 常用基本標籤：
 
 <table cellpadding="4" cellspacing="0" width="100%"> <colgroup> <col width="22*"></col> <col width="32*"></col> <col width="28*"></col> <col width="49*"></col> <col width="28*"></col> <col width="98*"></col> </colgroup> <tbody> <tr valign="top"> <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="9%">標題

</td> <td colspan="5" style="border: 1px solid #000000; padding: 0.1cm" width="91%"> 
```markup
<h1></h1>
```

（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。

</td> </tr> <tr valign="top"> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="9%">段落

</td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="11%"> </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm" width="38%"> </td> </tr> </tbody> </table>

### 八、項目符號或清單列表

<table cellpadding="4" cellspacing="0" width="100%"> <colgroup> <col width="85*"></col> <col width="85*"></col> <col width="85*"></col> </colgroup> <tbody> <tr valign="top"> <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="33%">有序列表

</td> <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="33%">無序列表

</td> <td style="border: 1px solid #000000; padding: 0.1cm" width="33%">定義列表

</td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm" width="33%"> 
```markup
<dl>
 <dt>項目名稱1</dt>
 <dd>項目說明1-1</dd>
 <dd>項目說明1-2</dd>
 <dt>項目名稱2</dt>
 <dd>項目說明2-1</dd>
 <dd>項目說明2-2</dd>
</dl>
```

</td> </tr> </tbody> </table>

1. <http://www.w3big.com/zh-TW/tags/tag-ol.html>
2. 常被拿來做選單、列表、縮略圖...等用途。
 
### 九、表格標籤<table border=1>

```markup
<table border=1>
 <tr>
 <th></th>
 <th>上表頭1</th>
 <th>上表頭2</th>
 </tr>
 <tr>
 <th>左表頭1</th>
 <td>表格1-1</td>
 <td>表格1-2</td>
 </tr>
 <tr>
 <th>左表頭2</th>
 <td>表格2-1</td>
 <td>表格2-2</td>
 </tr>
</table>
```

1. <http://www.w3big.com/zh-TW/tags/tag-table.html>
2. <table>重要屬性：border（框寬度）
3. <th>及<td>重要屬性：colspan（水平合併）、rowspan（垂直合併）
 
### 十、圖片<img src="圖片" alt="說明">

1. <http://www.w3big.com/zh-TW/tags/tag-img.html>
2. 重要屬性：src（圖片位置）、alt（取代文字）、width（寬）、height（高）
3. 網頁圖片支援三種規格jpg（全彩、壓縮、相片）、png（全彩、透明）、gif（256色、透明背景、動畫）
4. 相對路徑（相對於自身html檔）較常用，絕對路徑通常為：http://網址/圖檔.jpg
5. 可至 <https://logomakr.com/> 建立簡易Logo，並存至images底下
 
### 十一、連結標籤<a href="連結位置">顯示文字</a>

1. <http://www.w3big.com/zh-TW/tags/tag-a.html>
2. 連結位置可以是網頁、圖片、網站、文件、檔案、FTP站、Email...等。
3. 屬性：連結位置href、錨點名稱name、框架位置target（\_blank開新視窗、\_parent上個框架、\_self原視窗、\_top跳出框架）。
4. 錨點名稱用法
 
 
 1. 先命名：<a id="top">某元素</a>
 2. 連結：<a href="#top">回頂端</a>或<a href="xx.html#top">回頂端</a>
 
### 十二、關於CSS

5. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
6. 其註解符號為 /\* 這裡寫CSS的註解 \*/
 
### 十三、CSS樣式設定的基本結構

1. 基本概念：挑出網頁中的元素，套上指定樣式。
2. 一組CSS宣告的組成為「**挑選器** {樣式屬性 : 值;}」，如：「**h1** {color: blue}」
3. 若有多個宣告，請用「;」隔開。
4. CSS樣式屬性： <http://www.w3big.com/zh-TW/cssref/css-reference.html>
5. 套用樣式的三種方法：
 
 <table cellpadding="4" cellspacing="0" width="100%"> <colgroup> <col width="28*"></col> <col width="61*"></col> <col width="90*"></col> <col width="77*"></col> </colgroup> <tbody> <tr valign="top"> <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="11%"> </td> <th style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="24%">行內樣式
 
 </th> <th style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="35%">內部樣式
 
 </th> <th style="border: 1px solid #000000; padding: 0.1cm" width="30%">外部樣式
 
 </th> </tr> <tr valign="top"> <th style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="11%">影響範圍
 
 </th> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="24%">最小
 
 </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="35%">單一頁中
 
 </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm" width="30%">許多頁
 
 </td> </tr> <tr valign="top"> <th style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="11%">優先權
 
 </th> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="24%">1
 
 </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="35%">2
 
 </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm" width="30%">3
 
 </td> </tr> <tr valign="top"> <th style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="11%">用法
 
 </th> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="24%"><標籤 style="CSS宣告;"></標籤>
 
 </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm" width="35%"><style type="text/css">
 
 CSS宣告;
 
 </style>
 
 </td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm" width="30%"><link href="CSS檔.css" rel="stylesheet">
 
 </td> </tr> </tbody> </table>
6. 一個頁面可以同時套用好幾個css檔或設定，若裡面有挑選器重複的，則以最後讀到的為主。
7. 下載cc0授權圖片：<https://pixabay.com>
8. 下載透明圖片：<https://www.cleanpng.com/>
9. 在CSS檔中，還可以用import來引入其他的CSS檔：如：
 
 
 ```css
 @import url("https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css");
 ```
 
### 十四、CSS最基本的三種挑選器

1. <http://www.w3big.com/zh-TW/cssref/css-selectors.html>
2. 標籤挑選器：即一般網頁標籤。如：body、h1、mark、p...等，只要是該標籤都會受影響。
 
 
 1. 樣式表：p {CSS屬性: 值;}
 2. 網頁：
3. ID挑選器：樣式表以「\#名稱」宣告，網頁則需使用id屬性，如：
 
 
 1. 樣式表：\#web\_title{CSS屬性: 值;}
 2. 網頁：<div id="web\_title"></div>
4. 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如：
 
 
 1. 樣式表：.keyword {CSS屬性: 值;}
 2. 網頁：<div class="keyword"></div>
 
### 十五、CSS3長度單位

1. <http://www.w3big.com/zh-TW/cssref/css-units.html>
2. 數字與單位之間不能出現空格
3. 常用的相對單位：em（相對父元素）、rem（相對根元素CSS3才有）、%
4. 常用的絕對單位：px（像素）、pt（點）、cm（公分）、mm（公釐）
5. 預設情況下，根元素的字型大小1em=16px =12pt
 
### 十六、CSS3的顏色碼

1. <http://www.w3big.com/zh-TW/cssref/css-colors.html>
2. 顏色名稱：red、transparent（透明）
3. RGB十六進位（00~FF）：\#FF0000
4. RGB十進位（0~255）：rgb(255,0,0)
5. RGBA十進位（含透明度設定，0完全透明～1不透明）：rgba(255,0,0,0.5) 
 
### 十七、網頁加入favicon圖示

1. <http://tw.faviconico.org/favicon> 
 ```markup
 <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
 ```

:::