進階網頁設計

Download Report

Transcript 進階網頁設計 

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