Page 1

網頁設計 Web Design

Start with HTML © 2012, 明志科大視傳系/林金祥


HTML: HyperText Markup Language 使用 HTML 標籤 修改文字、文件、影像屬性 建立網頁範本 整合應用其他 Adobe CS 軟體


網頁的基礎:HTML „ HTML: HyperText Markup Language,超文字標記式 語言,是構成網頁最基本的架構。 „ HTML 的標籤分為成對標籤與獨立標籤(空標籤)。 成對標籤:有開始與結束標籤.如 <body>....</body> 獨立標籤:僅一個標籤,如 <img />, <hr />, <br /> „ 標籤的組成:< 元素 屬性 1 屬性 2 ...> 如:<img src="pic.jpg" alt="my pic" width="200" /> img 是元素,src, alt, width 是屬性,在引號裡的則是該 屬性的值。 元素與屬性間要空一格,屬性間也要空一格。

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

3


區塊元素與行間元素 區塊元素 (block-level element) „ 像容器一樣,會影響整個段落的元素,例如: h1, h2, h3....: ( 階層標題元素 ) p: 定義段落的元素 div: 定義區段 (division) 的元素 ul, ol, dl: 定義清單 (list) 的元素 table: 定義表格的元素 行間元素 (inline level element) „ 在一行裡(通常是部份字元)的內容會被影像,例如: em ( 斜體字 ),strong ( 粗體字 ),abbr ( 設定縮寫 )

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

4


清單的使用 清單的種類: „ 編號清單(有序清單,ordered list, ol) „ 項目清單(無序清單,unordered list, ul) „ 定義清單(字典清單,definition list, dl) 編號清單

使用

<ol> <li> 第一項 </li> <li> 第二項 </li> <li> 第三項 </li> </ol>

1. 第一項 2. 第二項 結果 3. 第三項

項目清單 <ul> <li> 第一項 </li> <li> 第二項 </li> <li> 第三項 </li> </ul> • 第一項 • 第二項 • 第三項

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

定義清單 <dl> <dt> 第一項 </dt> <dd> 說明一 </dd> <dt> 第二項 </dt> <dd> 說明二 </dd> </dl> 第一項 說明一 第二項 說明二

5


清單的綜合應用 <ol> <li> 第一項 </li> <li> 第二項 </li> <li> 第三項包括以下: <ul> <li> 第一點 </li> <li> 第二點 </li> <li> 第三點 </li> <li> 第四點 </li> </ul> </li> <li> 第四項 </li> <li> 第五項 </li> </ol>

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

1. 第一項 2. 第二項 3. 第三項包括以下: ● 第一點 ● 第二點 ● 第三點 ● 第四點 4. 第四項 5. 第五項

6


表格的使用 <table> <tr>

<th> 表頭 </th> <th> 表頭 </th> <th> 表頭 </th> <th> 表頭 </th>

</tr>

<tr>

<td> 資料 </td>

</tr>

<tr>

<td> 資料 </td> <td> 資料 </td> <td> 資料 </td> <td> 資料 </td>

</tr>

<td> 資料 </td> <td> 資料 </td> <td> 資料 </td>

</tr>

<td> 資料 </td> <td> 資料 </td> <td> 資料 </td>

</tr>

<td> 資料 </td> <td> 資料 </td> <td> 資料 </td>

</tr>

<tr> <tr> <tr>

<td rowspan="3"> 合併列資料 </td>

<td colspan="3"> 合併欄資料 </td>

</table>

所有改變表格的尺寸、邊框、間距、背景、顏色 ... 等,過去以 HTML 的屬性來製作,但現在均交由 CSS 來設定。

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

7


插入影像 (image) 語法:<img /> 基本屬性: „ src: source, 檔案來源 „ width: 寬度 „ height: 高度 „ alt: alternative, 替代文字 範例: „ <img src="mypic.jpg" width="200" alt=" 我的照片 " />

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

8


錨點 (anchor) 與超鏈結 (hyper-references) 語法:<a href></a> 基本屬性: „ href="http://www.website.com" 連結網址 „ href="filename.html" 連結網站內的檔案(網頁) „ href="mailto:name@email.com

連結電子郵件

„ href="#anchor" 連結文件內的目標(需配合 <a name=" 目 標 "> 使用。 開啟視窗目標之屬性: „ target="_blank" 開在新視窗(標籤頁) „ target="_self" 開在同一視窗 „ target="given_name"

開在設計師給予名稱的視窗

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

9


特殊符號的使用 需要表示某些符號(如 ©, ®),或使用 HTML 的保留文字(如 <>&)時,便需要用這個方式表達。 語法:&xxxxx; &copy; &amp; &quot; &lt; &gt; &reg;

© & " < > ®

&cent; &pound; &yen; &euro; &aelig; &trade;

¢ £ ¥ € æ ™

&nbsp; &frac12; &frac34; &#8240; &sect; &int;

強制空格  ½ ¾ ‰ § ∫

範例: <table>

&lt;table&gt;

Coke Cola®

Coke&nbsp;Cola&regi;

© 2012

&copy; 2012

© 2012, Chin-Hsiang Lin, Visual Communication Dept., Ming Chi University

10


網頁設計 Web Design

請多多練習!

Experiment  

Experiment

Read more
Read more
Similar to
Popular now
Just for you