CSS – 進階 IDIC
版型設計 css 排版
尺寸的基本概念 區塊的大小單位為像素簡寫 px 字型的大小單位為 pt 在版面及圖片大小的設定通常會參考常用的螢幕解 析度 目前常用的螢幕解析度 1024x768 通常設定版面會依據常用的解析度來設計。每個網頁都有他自已最佳的瀏覽解析度
結構化的 HTML tags DIV 及 SPAN 為區塊(Block tag)的一種，被DIV包住的 HTML tags 會變成一 個區塊物件，自行獨立成一行。 搭配 CSS 使用可做為網頁排版用途 用途：可將文件內容分不同區塊 <SPAN> 為行內(Inline tag) 的一種，被 SPAN 包住的 HTML tag 會變成 一個行內的物件，不會獨立成一行。 用途：標示網頁中某些特別資料的顯示格式。例如：將網頁中 含有「王小明」的字都用紅色字表示。 HTML 模組功能連結區 DIV DIV 基本資料顯示區 詳細資料顯示區 搜尋區 DIV DIV 版型設計最常用的標千
區塊(Block) 效果– 以 DIV 為例 <!DOCTYPE html> <html> <body> <p>My mother has<DIV style="color:blue;font-weight:bold">blue</DIV> eyes and my father has <DIV style="color:green;font-weight:bold">green</DIV> eyes.</p> </body> </html> 由於在 <DIV> 標籤內的內容會被一個方塊所框住所以接著的資料會被往下行移動
行內(Inline) 效果 – 以SPAN為例 <!DOCTYPE html> <html> <body> <p>My mother has <SPAN style="color:blue;fontweight:bold">blue</SPAN> eyes and my father has <SPAN style="color:green;font-weight:bold">green</SPAN> eyes.</p> </body> </html> 行內標籤 <SPAN> 只會顯示在同一行
使用 DIV 的版面設計 透過 <DIV> 配合樣式的設定可以配置一個網頁的版 面雛形 透過事先定義好版面的主要區塊 配合 CSS 的樣式設計 橫幅 註腳 資訊列 內容
盒狀模型(box model)
盒狀模型(Box Model) 我們都可以把每個 HTML tag 視為一個盒子 設定範圍主要分為 邊界(Margin) 填空(Padding) 邊框(Border) 文章排版的一個重要模型 填空=> 內距
盒狀模型(Box Model) 範例：黃色小鴨圖片放在 DIV 內 你可以把每個標籤
盒狀模型(Box Model) 範例：黃色小鴨圖片放在 DIV 內 Box Model 可設定 HTML tag 的邊框 屬性： border(邊框) 你可以把每個標籤
盒狀模型(Box Model) 範例：黃色小鴨圖片放在 DIV 內 Box Model 可設定 HTML tag 的邊界 你可以把每個標籤
盒狀模型(Box Model) 範例：黃色小鴨圖片放在 DIV 內 Box Model 可讓 HTML tag 與內容之間留白 你可以把每個標籤 屬性：Padding (留白)
盒狀模型的樣式設定 盒狀模型的樣式皆可針對四個方向設定 可設定的屬性主要分為 上(top), 左(right), 下(bottom), 右(left) 可設定的屬性主要分為 邊界的大小(margin) 指定邊界方向可使用(margin-方向) 例: 上方邊界 margin-top: 5px 填空的大小(padding) 指定邊界方向可使用(padding-方向) 例: 下方填空 3px padding-bottom: 3px 邊框(border)
盒狀模型(Box Model) – 續 邊框的設定可分為三種 寬度(border-width) 色彩(border-color) 例: border-top-width: 5px 色彩(border-color) 指定邊界方向可使用 border-方向-color 例: border-left-color: red 樣式(border-style) 指定邊界方向可使用 border-方向-style 樣式的屬性值有: 點虛線(dotted), 虛線(dashed), 實線(solid), 雙實線(double) 槽狀(groove),脊狀(ridge) 凹陷(inset), 凸出(outset)
盒狀模型(Box Model) – 續 同時指定邊框的寬度, 色彩, 樣式 border-方向: <寬> <樣式> <色彩> 設定下方邊框為 2px 點虛線綠色 border-bottom: 2px dotted green; 或不指定方向，即四周 設定四週邊框為 1px 實線黑色 border: 1px solid black;
練習 利用 DIV, SPAN 搭配 CSS 的 box Model 調整圖片 與文字的間距。 圖片四周的外距 10 px
視覺格式模型 (Visual formatting model)
區塊的大小 區塊大小的設定方式，可指定固定大小或者比例 在區塊中可以指定文章段落行高(line-height) 寬度(width) width: 100px width: 80% 高度(height) height: 100px height: 90%; 在區塊中可以指定文章段落行高(line-height) 1.2 倍行高的範例 line-height: 1.2
區塊位置的設定 區塊位置的顯示方式(position) 位置的指定 相對位置(relative) 決對位置(absolute) DIV P 區塊位置的顯示方式(position) 相對位置(relative) 設定標籤與標籤在呈現上的相對位置 如右圖 決對位置(absolute) 存在於 網頁 上的決對位置 (即使拉動卷軸也不會移動) 固定位置(fixed) 存在於 營幕 上的固定位置 (卷軸下拉會隨著改變位置) 位置的指定 上(top), 下(bottom), 左(left), 右(right) top: 100px; relative: 相對位置以此圖來看就是設定 P 在 DIV 的位置為何 畫面是指全部的頁面：即使拉動卷軸區塊也不會移動 頁面是指目前顯示的頁面：卷軸下拉會隨著改變區塊位置
區塊的順序 重疊的區塊有上下順序之分 可以使用 z-index 屬性設定 若無設定 z-index 則會顯示於最下方 必需先設定 區塊位置 (position ) 才能設定順序。 可以使用 z-index 屬性設定 數值越大越上方，數值越小越下面 z-index: <數字> 若無設定 z-index 則會顯示於最下方 z-index: 1 z-index: 2
浮動區塊 浮動 (float) 可以令圖片或者區塊(DIV)置於文字之中 可設定置左(left)或罝右(right)
浮動區塊– 續 浮動圖片可能會介於兩個段落之間 若不想要延續浮動的效果可以在下個段落使用 clear 屬 性
浮動區塊– 續 clear 屬性的方向可以選擇左邊(left), 右邊(right)或者 兩邊(both)
浮動區塊的範例 illustrate 呈現 <!DOCTYPE html> <HTML> <BODY> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } </STYLE> </HEAD> <BODY> <P><IMG src=“img.png” alt="This image will illustrate floats"> Some sample text that has no other... </P> <P style="clear: left">This paragraph is ‘clear’ proper set to ‘left’ so that it will be forced to be below any left floating images… </P> </BODY> </HTML> illustrate 呈現
當內容超出區塊 當內容超出區塊如右圖 可以使用 overflow 屬性來控制超出內容的顯示方式 隱藏超出的內容(hidden) 使用卷軸顯示超出的內容(scroll) 自動判斷大小顯示卷軸(auto)
練習 文章排版 文章下載位置： http://203.64.105.131/download/training/css Homework.zip
注意事項 版型上的間隔空間使用 CSS 盒狀模型設定 使用 CSS float 之後一定要加 clear 不要使用 <p> 或 <br /> (嚴重錯誤) 使用 CSS float 之後一定要加 clear
課後作業-我的網路商店 網站的版形如左：三欄式版型 中間內容請排列商品資訊。 橫幅 註腳 資訊列 內容
課後作業-我的網路商店 瀏覽器的檢視效果
作業的評分標準 適當的應用課堂所教的標籤 (30%) HTML 及 CSS 語法的正確性及閱讀性 (40%) 主題、美觀及實用性 (30%) 不一定要全部使用，但也不可過少 HTML 及 CSS 語法的正確性及閱讀性 (40%) 標籤有頭有尾 (20%) 要適當縮排 (20%) 主題、美觀及實用性 (30%) 是否考慮畫面解析度 文章排版