進階網頁設計 - cc.hust.edu.t“¡工e化... · • css是cascading style sheet...
TRANSCRIPT
電算中心 – 何建義
進階網頁設計
• HTML– HTML簡介– HTML文件架構– HTML標籤簡介– 常用標籤介紹– 了解及維護原始碼之必要性?
– 常見網頁錯誤問題
• CSS– CSS簡介– CSS基本語法– CSS套用方式– CSS選擇器– 使用FrontPage設計樣式– 建立預設樣式
課程大綱
• 超文件標示語言（英文：HyperText Markup
Language，簡稱為HTML）是為網頁創造和其它可在網頁瀏覽器中看到的訊息設計的一種標示語言。
• 藉由HTML標籤來標示內容，以告知瀏覽器該如何顯示此網頁。
HTML簡介
• <html>…</html>：標示HTML頁面的開始及結束• <head>…</head>：標示此網頁的相關標頭資訊• <title></title>：標示此網頁的標題• <body>…</body>：標示將在瀏覽器中顯示之內容
HTML文件架構
• 標籤之用途為”標示”此內容的”類型”及”如何處理”，讓瀏覽器可以正確的顯示網頁
• 標籤之特性：– 標籤通常成對出現”<標籤>”表示開始”</標籤>”表示結束– 標籤為單一出現者則以”<標籤 />”標示(標準作法)
– 標籤不分大小寫(標準為小寫)
– 標籤內可包含其它標籤
HTML標籤簡介
• <h1~6></h1~6>用來表示頁面中的”標題”預設為較大的字體
• 預設由<h1></h1>最大到<h6></h6>最小
HTML常用標籤<h1~6>
• 由<p></p>構成，用來表示段落，在其中的文字皆會被視為同一段落
HTML常用標籤<p>
• <b></b>： 表示此段文字為”粗體”顯示• <strong></strong>：表示此段文字為”粗體”顯示• <i></i>：表示此段文字以”斜體”顯示• <br>：表示文字到此換行(仍在同段落)
• <u></u>：在此段文字加上底線
HTML常用標籤<b><strong><i><br><u>
• <a></a>：表示此段文字為”超連結”，需配合下列屬性– href=“目標網址”：表示欲連結的目標網址– target=“目標視窗”：連結開啟之目標(選用)
– title=“標題名稱”：連結之說明(選用)
HTML常用標籤<a>
• <font></font>：用於標示文字的樣式，如顏色、大小等。
HTML常用標籤<font>
• <img>：表示圖片之標籤
HTML常用標籤<img>
• <table></table>：標示此區域之內容為”表格”
• <tr></tr>：標示表格的”行”
• <th></th>：標示表格的”標題”欄位• <td></td>：標示一”行”內有幾個”欄位”
HTML常用標籤<table><tr><th><td>
• <ol></ol>：表示此為”有序”列表• <ul></ul>：表示此為”無序”列表• <li></li>：表示此為列表項目
HTML常用標籤<ol><ul><li>
• <div></div>：標示”區塊”範圍• <span></span>：標示一段文字
HTML常用標籤<div><span>
•避免因無謂的標籤增加複雜度•增加頁面設計彈性•便於修正頁面之問題
了解及維護原始碼之必要性?
•標籤關閉不完全•超連結錯誤•錯誤的標籤屬性
常見網頁錯誤問題
• CSS是Cascading Style Sheet 的縮寫。用於（增強）控制網頁樣式並允許將樣式訊息與網頁內容分離的一種標記性語言。
• 其優點為：– 便於管理網站整體之樣式– 讓”內容”與”樣式”分離，維護更容易– 控制網頁樣式更容易
CSS簡介
選擇器1 {
/*註解*/
屬性1: 值;
屬性2: 值;
…
}
• 選擇器：為套用此樣式的對象(對象可為多數)
• 屬性：欲套用的樣式• 值：此屬性的值
CSS基本語法
• CSS的套用方式有三種：1. 外部檔案連結型式(針對全部網頁)
2. 在<head>…</head>中宣告(整個頁面)
3. 在標籤中宣告
• 套用順序為：3 > 2 = 1
CSS套用方式
• 選擇器的方式有三種：– 標籤的類別(Class)(相同類別標籤)
• class=“類別名稱”
– 標籤名稱(所有相同標籤)
– 標籤的ID(單一標籤)
• id=“識別ID”
CSS選擇器
使用FrontPage設計樣式
• 將各網頁之共通設定存成獨立之CSS檔
建立預設樣式
• 在各網頁間插入CSS檔之連結
建立預設樣式(續)
• CSS2.0中文手冊– http://adw.tw/sir/service/css20/
• CSS 語法教學– http://css.1keydata.com/tw/
• DOB 網站建置百寶箱– http://dob.tnc.edu.tw/
• W3Schools Online Web Tutorials(英)– http://www.w3schools.com/
• w3school在線教程(簡體)– http://www.w3school.com.cn/
相關網路資源