1 / 31

CSS – 進階

CSS – 進階. IDIC. 版型設計. 尺寸的基本概念. 區塊的大小單位為像素簡寫 px 字型的大小單位為 pt 在版面及圖片大小的設定通常會參考常用的螢幕解析度 目前常用的螢幕解析度 1024x768. 結構化的 HTML tags DIV 及 SPAN. <DIV> 為區塊 (Block tag )的 一種，被DIV包住 的 HTML tags 會 變成一個區塊物件，自行獨立成一行。 搭配 CSS 使用可做為網頁排版用途 用途： 可將文件內容分不同區 塊 < SPAN>

moeshe
Download Presentation

CSS – 進階

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS – 進階 IDIC

  2. 版型設計

  3. 尺寸的基本概念 • 區塊的大小單位為像素簡寫 px • 字型的大小單位為 pt • 在版面及圖片大小的設定通常會參考常用的螢幕解析度 • 目前常用的螢幕解析度 • 1024x768

  4. 結構化的 HTML tagsDIV 及 SPAN • <DIV> • 為區塊(Block tag)的一種，被DIV包住的 HTML tags 會變成一個區塊物件，自行獨立成一行。 • 搭配 CSS 使用可做為網頁排版用途 • 用途：可將文件內容分不同區塊 • <SPAN> • 為行內(Inline tag) 的一種，被 SPAN 包住的 HTML tag 會變成一個行內的物件，不會獨立成一行。 • 用途：標示網頁中某些特別資料的顯示格式。例如：將網頁中含有「王小明」的字都用紅色字表示。 HTML DIV DIV 模組功能連結區 基本資料顯示區 詳細資料顯示區 DIV 搜尋區 DIV

  5. 區塊(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> 標籤內的內容會被一個方塊所框住所以接著的資料會被往下行移動

  6. 行內(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> 只會顯示在同一行

  7. 橫幅 資訊列 內容 資訊列 註腳 使用 DIV 的版面設計 • 透過 <DIV> 配合樣式的設定可以配置一個網頁的版面雛形 • 透過事先定義好版面的主要區塊 • 配合 CSS 的樣式設計

  8. 盒狀模型(box model)

  9. 盒狀模型(Box Model) • 我們都可以把每個 HTML tag 視為一個盒子 • 透過 Box Model 來可設定 HTML tag (盒子) 的內外距 • 設定範圍主要分為 • 邊界(Margin) • 填空(Padding) • 邊框(Border)

  10. 盒狀模型(Box Model) • 範例：黃色小鴨圖片放在 DIV 內

  11. 盒狀模型(Box Model) • 範例：黃色小鴨圖片放在 DIV 內 • Box Model 可設定 HTML tag 的邊框 屬性： border(邊框)

  12. 盒狀模型(Box Model) • 範例：黃色小鴨圖片放在 DIV 內 • Box Model 可設定 HTML tag 的邊界

  13. 盒狀模型(Box Model) • 範例：黃色小鴨圖片放在 DIV 內 • Box Model 可讓 HTML tag 與內容之間留白 屬性：Padding (留白)

  14. 盒狀模型的樣式設定 • 盒狀模型的樣式皆可針對四個方向設定 • 上(top), 左(right), 下(bottom), 右(left) • 可設定的屬性主要分為 • 邊界的大小(margin) • 指定邊界方向可使用(margin-方向) • 例: 上方邊界 • margin-top: 5px • 填空的大小(padding) • 指定邊界方向可使用(padding-方向) • 例: 下方填空 3px • padding-bottom: 3px • 邊框(border)

  15. 盒狀模型(Box Model) – 續 • 邊框的設定可分為三種 • 寬度(border-width) • 指定邊界方向可使用 border-方向-width • 例: border-top-width: 5px • 色彩(border-color) • 指定邊界方向可使用 border-方向-color • 例: border-left-color: red • 樣式(border-style) • 指定邊界方向可使用 border-方向-style • 樣式的屬性值有: • 點虛線(dotted), 虛線(dashed), 實線(solid), 雙實線(double) • 槽狀(groove),脊狀(ridge) • 凹陷(inset), 凸出(outset)

  16. 盒狀模型(Box Model) – 續 • 同時指定邊框的寬度, 色彩, 樣式 • border-方向: <寬><樣式> <色彩> • 設定下方邊框為 2px 點虛線綠色 • border-bottom: 2px dotted green; • 或不指定方向，即四周 • 設定四週邊框為 1px 實線黑色 • border: 1px solid black;

  17. 練習 • 利用 DIV, SPAN 搭配 CSS 的 box Model 調整圖片與文字的間距。 • 圖片四周的外距 10 px • 價格四周內距 5px • 描述下方的外距 5px

  18. 視覺格式模型(Visual formatting model)

  19. 區塊的大小 • 區塊大小的設定方式，可指定固定大小或者比例 • 寬度(width) • width: 100px • width: 80% • 高度(height) • height: 100px • height: 90%; • 在區塊中可以指定文章段落行高(line-height) • 1.2 倍行高的範例 • line-height: 1.2

  20. 區塊位置的設定 DIV P • 區塊位置的顯示方式(position) • 相對位置(relative) • 設定標籤與標籤在呈現上的相對位置 • 如右圖 • 決對位置(absolute) • 存在於 網頁上的決對位置 (即使拉動卷軸也不會移動) • 固定位置(fixed) • 存在於 營幕上的固定位置 (卷軸下拉會隨著改變位置) • 位置的指定 • 上(top), 下(bottom), 左(left), 右(right) • top: 100px;

  21. 區塊的順序 • 重疊的區塊有上下順序之分 • 必需先設定 區塊位置 (position ) 才能設定順序。 • 可以使用 z-index 屬性設定 • 數值越大越上方，數值越小越下面 • z-index: <數字> • 若無設定 z-index 則會顯示於最下方 z-index: 1 z-index: 2

  22. 浮動區塊 • 浮動 (float) • 可以令圖片或者區塊(DIV)置於文字之中 • 可設定置左(left)或罝右(right)

  23. 浮動區塊– 續 • 浮動圖片可能會介於兩個段落之間 • 若不想要延續浮動的效果可以在下個段落使用 clear 屬性

  24. 浮動區塊– 續 • clear 屬性的方向可以選擇左邊(left), 右邊(right)或者兩邊(both)

  25. 浮動區塊的範例 <!DOCTYPE html> <HTML> <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>

  26. 當內容超出區塊 • 當內容超出區塊如右圖 • 可以使用 overflow 屬性來控制超出內容的顯示方式 • 隱藏超出的內容(hidden) • 使用卷軸顯示超出的內容(scroll) • 自動判斷大小顯示卷軸(auto)

  27. 練習 • 文章排版 • 文章下載位置： • http://203.64.105.131/download/training/cssHomework.zip

  28. 注意事項 • 版型上的間隔空間使用 CSS 盒狀模型設定 • 不要使用 <p> 或 <br /> (嚴重錯誤) • 使用 CSS float 之後一定要加 clear

  29. 橫幅 資訊列 內容 資訊列 註腳 課後作業-我的網路商店 • 網站的版形如左：三欄式版型 • 中間內容請排列商品資訊。

  30. 課後作業-我的網路商店瀏覽器的檢視效果

  31. 作業的評分標準 • 適當的應用課堂所教的標籤 (30%) • 不一定要全部使用，但也不可過少 • HTML 及 CSS 語法的正確性及閱讀性 (40%) • 標籤有頭有尾 (20%) • 要適當縮排 (20%) • 主題、美觀及實用性 (30%) • 是否考慮畫面解析度 • 文章排版

More Related