:::
1-1 css/style.cssnext
[1092] 前端技術入門

1. HTML5與CSS3入門

一、關於本課程

  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">
1-1 css/style.cssnext

友善列印 & 下載 PDF 匯出 MarkDown 格式

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D46%26tbdsn%3D1512

快速登入

Google OpenID 登入 login icon Line OpenID 登入 login icon 基隆市 OpenID 登入 login icon 新北市 OpenID 登入 login icon 新竹市 OpenID 登入 login icon 苗栗縣 OpenID 登入 login icon 彰化縣 OpenID 登入 login icon 雲林縣 OpenID 登入 login icon 嘉義縣 OpenID 登入 login icon 嘉義市 OpenID 登入 login icon 臺南市 OpenID 登入 login icon 屏東縣 OpenID 登入 login icon 澎湖縣 OpenID 登入 login icon

書籍目錄

展開 | 闔起

線上使用者

197人線上 (14人在瀏覽線上書籍)

會員: 0

訪客: 197

更多…