線上書籍

Home

[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 版本）。檢查版本：

    node -v

     

  5. 再安裝git: https://git-scm.com/download/win，VSCode的版本控制才會有作用。檢查版本：

    git --version

     

  6. 建議編輯器為Visual Studio Code: https://code.visualstudio.com/，基本設定：

    // 控制字型大小 (以像素為單位)。 "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：格式化語法

      "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等屬性

      "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標籤通常是一對的，如：<p>內容</p>或<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>或<span>這類本身不具意義的標籤來規劃版型。用表格會缺乏彈性，表格就應該拿來當作表格用。

  2. HTML用來作為網頁結構的規劃，而非外觀的設計。外觀一律建議使用CSS來控制。

七、HTML常用基本標籤

  1. 完整標籤列表：http://www.w3big.com/zh-TW/tags/ref-byfunc.html

  2. 可隨時至 http://codepen.io/pen/ 做線上練習

  3. 常用基本標籤：

標題

 <h1></h1>

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

段落

 <p>段落</p>

 

區塊容器

 <div>區塊容器</div>

 

行內容器

 <span>行內容器</span>

 

換行

 <br>

 

輸出標籤

 <pre>輸出標籤</pre>

 

引用

 <blockquote>引用</blockquote>

 

水平線

 <hr>

 

註釋標籤

 <!--註釋-->

 

 

 
八、項目符號或清單列表

有序列表

無序列表

定義列表
<ol> <li>項目1</li> <li>項目2</li> </ol>

 

 <ul> <li>項目1</li> <li>項目2</li> </ul>

 

 <dl> <dt>項目名稱1</dt> <dd>項目說明1-1</dd> <dd>項目說明1-2</dd> <dt>項目名稱2</dt> <dd>項目說明2-1</dd> <dd>項目說明2-2</dd> </dl>

 

  1. http://www.w3big.com/zh-TW/tags/tag-ol.html

  2. 常被拿來做選單、列表、縮略圖...等用途。

九、表格標籤<table border=1> <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

  1. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀

  2. 其註解符號為 /* 這裡寫CSS的註解 */

十三、CSS樣式設定的基本結構

  1. 基本概念：挑出網頁中的元素，套上指定樣式。

  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color: blue}」

  3. 若有多個宣告，請用「;」隔開。

  4. CSS樣式屬性： http://www.w3big.com/zh-TW/cssref/css-reference.html

  5. 套用樣式的三種方法：

    行內樣式

    內部樣式

    外部樣式

    影響範圍

    優先權

    用法

     

    最小

    單一頁中

    許多頁

    1

    2

    3

    <標籤 style="CSS宣告;"></標籤>

    <style type="text/css">

    CSS宣告;

    </style>

    <link href="CSS檔.css" rel="stylesheet">

  6. 一個頁面可以同時套用好幾個css檔或設定，若裡面有挑選器重複的，則以最後讀到的為主。

  7. 下載cc0授權圖片：https://pixabay.com

  8. 下載透明圖片：https://www.cleanpng.com/

  9. 在CSS檔中，還可以用import來引入其他的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. 網頁：<p></p>

  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 <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">