發表於 2013-02
    3,549 觀看次數
    • 00:00
      1. 網頁常用的標籤
    • 00:17
      2. 你將學會 ...
    • 00:41
      3. 學習 ~ 就從臨摹開始吧!
    • 00:56
      4. 基礎標籤
    • 01:34
      4.1 段落 <p>
    • 03:34
      4.2 換行 <br>
    • 04:25
      4.3 特別強調 <strong> 和粗體 <b>
    • 05:28
      4.4 強調文字<em>、<i>、<u>
    • 06:42
      4.5 超連結 <a>
    • 09:11
      4.6 插入圖片 <img>
    • 12:12
      4.7 網址 URL 的說明
    • 14:29
      5. 設計網頁的必備工具 ~ chrome 開發工具
    • 14:56
      5.1 觀察元素
    • 15:45
      5.2 修改屬性
    • 17:28
      5.3 學習標籤 ~ 就依樣畫葫蘆吧
    • 19:37
      5.4 設定區域 <span>、<div>
    • 21:03
      5.5 <span> 和 <div> 的差異
    • 22:03
      6. 待續 …
    常用的元素標籤 - 入門篇
    這個主題所介紹的標籤，將涵蓋大部分網頁設計的需求
    此外，還會介紹網頁的基礎結構 ~ DOM、如何處理網頁的特殊字元
    以及學會一個設計網頁必備的好工具 – chrome 開發工具
    1.
    <p> 段落、<br> 換行
    網頁會忽略多個空白和換行字元，因此段落要用標籤 <p> 來處理
    換行則可以使用 <br>
    2.
    <strong> 特別強調、<em> 強調、<u> 底線、<i> 斜體
    粗體: <strong> 或 <b> (bold)
    斜體: <em> (emphasis) 或 <i> (italic)
    底線: <u> (underline)
    3.
    <a> 超連結
    範例: <a href="http://www.camdemy.com" target="_blank">錄製學院</a>
    href: 超連結的網址
    target: 開啟網址的視窗，_blank 代表在新視窗開啟超連結的網頁
    4.
    <img> 圖片
    範例: <img src="http://www.camdemy.com/sys/res/icon/slogan.png" width="60%">
    寬度的單位可以是 px (pixel) 或百分比 %
    如果沒有設定高度，會依比例，如果寬、高都沒設，則預設是 100%
    5.
    網址的形式
    1. 完整網址: http:// 開始的網址，例如 http://www.camdemy.com/sys/.../slogan.png
    2. 絕對路徑: /sys/.../slogan.png，以斜線開始的路徑，相對於網站的根目錄
    3. 相對路徑: img/.../cover.jpg ，開始不是斜線，相對於網頁檔案的相對路徑
    6.
    chrome 開發工具
    網頁設計必備的好工具
    只要學會如何觀察、修改元素與屬性，就可以了解任何網頁的標籤、屬性和排版的設計
    7.
    <h1>、<h2>、... 標題階層
    通常應用在文章的主標題、次標題等
    使用 h1, h2 會有預設的標題樣式，但可以修改
    8.
    <span> & <div> 設定區域
    span (inline 顯示) 設定行內的區域，通常應用在行內的文字設定特別的屬性
    div (block 顯示) 設定獨立的區塊，是排版的關鍵

    範例:
    <div class="header">...</div>
<div class="content">
The <span style="color:red">lizard</span>, found in Vietnam ...
</div>
    訪客如要回應，請先 登入
      使用筆記功能，請先 登入
      發表時間 :
      2013-02-16 10:43:11 ( 2013-02)
      觀看次數 :
      3,549
      發表人 :
      Te-Chou
      QR Code :