认识HTML5与CSS302利用Div标签划分网页区块.PPT

實用的知識 1. 插入 Div 標籤後, 發現位置不對時該怎麼辦？ * 實用的知識 * 實用的知識 * 實用的知識 * 實用的知識 * 實用的知識 2. 已經寫在網頁中的 CSS 樣式可以轉存成外部樣式表檔嗎？ * 建立層層包覆的區塊 * 建立層層包覆的區塊 * 建立層層包覆的區塊 * 3-3 利用 CSS 美化 Div 標籤 設定 Div 標籤的背景及寬高 利用「float」屬性讓 Div 標籤左右並排 利用「clear」屬性清除「float」屬性的影響 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 設定 Div 標籤的背景及寬高 * 利用「float」屬性讓 Div 標籤左右並排 * 利用「float」屬性讓 Div 標籤左右並排 * 利用「float」屬性讓 Div 標籤左右並排 * 利用「float」屬性讓 Div 標籤左右並排 * 利用「float」屬性讓 Div 標籤左右並排 * 利用「clear」屬性清除「float」屬性的影響 * * 利用「clear」屬性清除「float」屬性的影響 * 利用「clear」屬性清除「float」屬性的影響 * 利用「clear」屬性清除「float」屬性的影響 * 利用「clear」屬性清除「float」屬性的影響 * 利用「clear」屬性清除「float」屬性的影響 重點整理 1. HTML (Hyper Text Markup Language) 是一種用來描述網頁結構的語法, 其結構是由一組組由 “” 與 組成的「標籤」；CSS (Cascading Style Sheets) 中譯為串接樣式表, 是一種用來改變網頁外觀樣式的語法。簡單來說, 「HTML」的作用是構成網頁架構, 「CSS」的作用是美化網頁外觀。 * 重點整理 2. 要建立網頁版面時, 通常會先依設計好的網頁版型劃分出多個區塊, 並替每個區塊命名, 接著用 Div 標籤在網頁中加入區塊, 然後利用 CSS 控制個別的區塊屬性, 例如設定寬、高、背景、位置、…等。大致的製作流程可參考下圖： * 重點整理 3. CSS 樣式表可區分為內部樣式表與外部樣式表, 下表供你對照它們的特性： * 重點整理 4. Div 標籤具有自成一排的特性, 若想讓區塊並排, 必須替區塊設定 float (浮動) 屬性；不過當區塊設有 float 屬性後, 其他的區塊也可能產生浮動作用, 若想讓浮動的區塊恢復自成一排的特性, 則必須替區塊設定 clear (清除浮動) 屬性, 以下用示意圖幫你釐清觀念。假設利用 Div 標籤建立了 A、B、C 三個區塊, 因此 A、B、C 會以上下並列的方式存在： * 重點整理 * 重點整理 * * 本堂課學習提要 認識 HTML 與 CSS 區分內部樣式表與外部樣式表 利用 Div 標籤規劃網頁區塊 製作層層包覆的 Div 標籤 利用 CSS 改變 Div 標籤的外觀及大小、位置 3-1 認識 HTML 與 CSS 認識 HTML 認識 CSS HTML 與 CSS 的版本選擇：認識 HTML 5 與 CSS 3.0 * 認識 HTML * 認識 HTML * 認識 HTML * 認識 HTML * 認識 HTML * 認識 HTML * 認識 CSS * HTML 與 CSS 的版本選擇：認識 HTML 5 與 CSS 3.0 * * HTML 與 CSS 的版本選擇：認識 HTML 5 與 CSS 3.0 * HTML 與 CSS 的版本選擇：認識 HTML 5 與 CSS 3.0 * HTML 與 CSS 的版本選擇：認識 HTML 5 與 CSS 3.0 3-2 利用 Div 標籤劃分網頁區塊 * 利用 Div 標籤劃分網頁區塊 初步規劃網頁架構 插入 Div 標籤 * 初步規劃網頁架構 * 初步規劃網頁架構 命名的第 1 個字元務必使用英文字, 第 2 個字元之後用英文或數字皆可。 區塊名稱不可包含空格與特殊符號, 當然也不可使用中文。 命名時盡量取個容易辨識的名稱, 例如表頭區域通常會命名為 “header”、放置內容的區域命名為“content”、頁尾區域則命名為 “footer”、…等, 這樣在設定 CSS 樣式時較容易辨識。 * 初步規劃網頁架構 * 插入 Div 標籤 由上而下依序定義區塊 建立層層包覆的區塊 * 由上而