:::

1. HTML5與CSS3入門

一、關於本課程

  1. 講義位置:https://www.tad0616.net/46

  2. 課程網站:https://www.facebook.com/groups/109xoops/

  3. 本課程是系列中的第二個學程,屬基礎部份,若有任何聽不懂的:歡迎您隨時隨地的問!

  4. 上課歡迎隨時起來走動,互相觀摩交流,盡量別保持安靜,飲食部份則請至走廊食用。

  5. 上課時間為週六9:1012:0013:4016:30,共計六次,遇國定連假則往後延期。

  6. 講師同意上課可以拍照、錄音、錄影,不需特別再詢問。

  7. 座位基本上沒有強制性,但也不建議每次都換來換去,盡量在第一週後就固定住。

  8. 本期助教:溫孝文、張瑛蘭、李佳玲

二、這學期會學到...

  1. HTML5:也就是網頁的最基礎標籤,用來建構網頁外觀架構、表單...等。

  2. CSS3:用來美化網頁外觀

  3. BootStrap4:快速導入自適應框架,讓您的網站在行動裝置上看起來也一樣美觀。

  4. SmartyPHP官方樣板引擎,開發PHP程式或XOOPS必備。

  5. XOOPS樣板機制:熟悉XOOPS佈景開發流程及其相關原理。

三、開發工具及開發環境

  1. HTML5CSS3BootStrap4部份,並不需要任何伺服器,只要有瀏覽器就可以執行。

  2. 實際開發XOOPS佈景時就需有網頁伺服器(如:Apache)和資料庫(如:MySQLMariaDB),因為XOOPS必須安裝在網頁伺服器中,資料則存在資料庫中。

  3. 瀏覽器部份,上課以FirefoxChrome為主,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/winVSCode的版本控制才會有作用。檢查版本:

    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 SnippetsBootstrap4的語法片段

    7. Chinese (Traditional) Language Pack for Visual Studio Code:中文介面

    8. colorize:將顏色視覺化

    9. Copy filename:快速複製檔名

    10. Highlight Matching Tag:自動高亮度同一組標籤

    11. HTML CSS Support:可快速套用classid等屬性

      "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時,實際指的是HTMLCSSJavaScript在內的技術組合

  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可建立含BootStrap4HTML5檔案)

  4. HTML5 只有一個簡單的文檔類型:<!DOCTYPE html>

  5. <html></html>一整個HTML頁面,請加上語言標籤:<html lang="en"><html lang="zh-Hant-TW">(語言 - 字體 - 地區 - 方言 )

    1. <head></head>是給瀏覽器看的,通常裡面至少會有metatitle等標籤。

      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 中,空標籤(如:metabrimg input )並不需要閉合標籤。

  8. 標籤會有多個屬性,如:<html lang="en">,其中lang即為屬性。

  9. HTML標籤及屬性是不分大小寫的:<HTML><html>一樣,但建議採用小寫。

  10. HTML5棄用舊標籤:centerfontframeframesetnoframessu...等。

  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(全彩、透明)、gif256色、透明背景、動畫)

  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. 標籤挑選器:即一般網頁標籤。如:bodyh1markp...等,只要是該標籤都會受影響。

    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. 顏色名稱:redtransparent(透明)

  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">

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

34人線上 (7人在瀏覽線上書籍)

會員: 0

訪客: 34

更多…