1 / 37

CSS

CSS. 版面 設計. 尺寸的基本概念. 區塊的大小單位為像素簡寫 px 字型的大小單位為 pt 在版面及圖片大小的設定通常會參考常用的螢幕解析度 目前常用的螢幕解析度 1024x768. 結構化標籤 : DIV 及 SPAN 元素標籤. <DIV> 標籤主要提供設置區塊的功能利於在網頁中的排版 <DIV> 區塊中可以放置段落、項目符號、圖片、表格 … 等等的基本元素標籤 為區塊 (Block) 標籤的一種 <SPAN> 標籤主要用來提供段落中的文字做格式以及樣式的設定 <SPAN> 的內容僅能包含文字內容 為行內 (Inline) 標籤的一種.

denise-hayes
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

  2. 版面設計

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

  4. 結構化標籤:DIV 及 SPAN 元素標籤 • <DIV> 標籤主要提供設置區塊的功能利於在網頁中的排版 • <DIV> 區塊中可以放置段落、項目符號、圖片、表格…等等的基本元素標籤 • 為區塊(Block)標籤的一種 • <SPAN> 標籤主要用來提供段落中的文字做格式以及樣式的設定 • <SPAN> 的內容僅能包含文字內容 • 為行內(Inline)標籤的一種

  5. 區塊(Block) 與 行內(Inline) • 區塊標籤會在畫面上產生一個區塊 • 行內標籤則不會產生一個區塊 • 差異點可由以下的範例得知 • <P>aaaaaaaaa • <DIV>bbbbbbbbb</DIV> • <DIV>ccccc<P>ccccc</DIV> • 所呈現的結果如右 • 由於在 <DIV> 標籤內的內容會被一個方塊所框住所以接著的資料會被往下行移動 • 若使用行內標籤 <SPAN> 則不會有此情況

  6. DIV 及 SPAN 標籤的使用範例 • <DIV id="client-lafon" class="client"> • <P> • <SPAN class="client-title">Client information:</SPAN> • <TABLE class="client-data"> • <TR><TH>Last name:<TD>Lafon</TR> • <TR><TH>First name:<TD>Yves</TR> • <TR><TH>Tel:<TD>(617) 555-1212</TR> • <TR><TH>Email:<TD>yves@coucou.com</TR> • </TABLE> • </DIV>

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

  8. CSS • 在 HTML 4.01 中提供了樣式表的功能具有以下的優點 • 利於樣式的重複使用 • 樣式的來源可以多個 • 樣式可以快速替代 • HTML 4.01 預設所使用的樣式表為 CSS

  9. 如何在 HTML 使用樣式 • 在段落內使用樣式 • 透過 style 屬性 • 在所有的標籤中可使用 style 屬性指定內容所要呈現的樣式 • <P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?</P> • 通常用於特殊情況的樣式設定 • 一般會在 HTML 的一開始設定每個類別(CLASS)的樣式

  10. 如何在 HTML 使用樣式 (續) • 在文件的開始使用樣式 • <HEAD> • <STYLE type="text/css"> • H1 {border-width: 1; border: solid; text-align: center} • </STYLE> • </HEAD>

  11. 在 HTML 文件外使用樣式 • 樣式的設定也可以儲存於 HTML 文件之外，範例如下 • <HEAD> • <link rel="stylesheet" href=“common.css" type="text/css“ /> • </HEAD> • common.css 為指定使用的 CSS 檔 • 檔案的內容與 <STYLE> 標籤內所指定樣式的內容一樣

  12. 指定類別(CLASS)的樣式 • 在 HTML 中可以指定要使用相同樣式的元素標籤為同一個類別 • 要指定在類別內元素標籤的樣式使用以下範例 • <HEAD> • <STYLE type="text/css"> • H1.myclass {border-width: 1; border: solid; text-align: center} • </STYLE> • </HEAD> • <BODY> • <H1 class="myclass"> This H1 is affected by our style </H1> • <H1 class="myclass"> This H1 is affected by our style </H1> • <H1> This one is not affected by our style </H1> • </BODY> • H1為指定的標籤類型，可不指定 • 使用點號(.)來代表指定類別 • myclass為指定要套用樣式的類別名稱

  13. 指定 ID 的樣式 • 有特殊用途的元素標籤可以透過指定 ID 來設定樣式 • <HEAD> • <STYLE type="text/css"> • #myid {border-width: 1; border: solid; text-align: center} • </STYLE> • </HEAD> • <BODY> • <H1 class="myclass"> This H1 is not affected </H1> • <H1 id="myid"> This H1 is affected by style </H1> • <H1> This H1 is not affected </H1> • </BODY> • 使用井號(#)來代表指定 ID，無需指定標籤名稱 • myid為指定要套用樣式的 ID

  14. 參考資料 • 常用樣式範例 • http://www.w3schools.com/css/

  15. 盒狀模型(box model)

  16. 盒狀模型(Box Model) • 所有 HTML 的可視的元素標籤的呈現區塊，我們稱做盒狀模型 • 盒狀模型主要分為 • 邊界(Margin) • 填空(Padding) • 邊框(Border)

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

  18. 盒狀模型(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)

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

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

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

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

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

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

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

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

  27. 浮動區塊的範例 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> • <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>

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

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

  30. 橫幅 資訊列 內容 資訊列 註腳 課後作業 • 三欄式版型實作 • 文章排版 • 作業下載位置 http://pdc.idic.kuas.edu.tw/~idic_training • 帳密:idic_training/hellotraining

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

  32. HTML 重要標籤補充說明

  33. 表單 • 在網頁中需要使用者填寫資料儲存到網站時會使用表單的元素標籤 • 需要配合動態網頁的設計來接收資料 • 表單所使用的元素標籤為 <FORM> • <FORM action=“網址” method=“post”> • 表單的內容 • </FORM> • action為用來接收表單資料的網址 • method為資料傳送的方式分為 • POST • 使用 HTTP 協定來傳送資料 • GET • 透過網址來傳送資料 (較無隱私)

  34. 表單 (續) • 表單元件所使用的標籤為<INPUT> • <INPUT type="radio" name="sex" value="Male“> • type為表單元件的類型 • 送出按鈕(submit), 重置按鈕(reset), 單選方塊(radio), 多選方塊(checkbox), 文字方塊(text), 檔案瀏覽(file) • name 為該表單元件的欄位名稱 • 供接收資料的動態網頁判斷資料用 • value為未填寫資料時的預設值 (可不指定)

  35. Scripts • 瀏覽器所支援的簡易程式語言(腳本語言,Script) • 目前常用的 Script 為 JavaScript • 常用來撰寫表單資料檢查的程式避免資料不符規格 • 透過 JavaScript 與動態網頁做互動來即時更新網頁的內容 (即 AJAX – 非同步 JavaScript 及 XML) • 使用 <SCRIPT> 標籤 • <SCRIPT type="text/javascript"> • ...some JavaScript... • </SCRIPT> • type 用來指定 SCRIPT 的類型 • 目前有 VBScript 及 JavaScript 兩種

More Related