slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CSS – 進階 PowerPoint Presentation
Download Presentation
CSS – 進階

Loading in 2 Seconds...

play fullscreen
1 / 31

CSS – 進階 - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CSS – 進階' - moeshe


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide3
尺寸的基本概念
  • 區塊的大小單位為像素簡寫 px
  • 字型的大小單位為 pt
  • 在版面及圖片大小的設定通常會參考常用的螢幕解析度
  • 目前常用的螢幕解析度
    • 1024x768
html tags div span
結構化的 HTML tagsDIV 及 SPAN
  • <DIV>
    • 為區塊(Block tag)的一種,被DIV包住的 HTML tags 會變成一個區塊物件,自行獨立成一行。
    • 搭配 CSS 使用可做為網頁排版用途
    • 用途:可將文件內容分不同區塊
  • <SPAN>
    • 為行內(Inline tag) 的一種,被 SPAN 包住的 HTML tag 會變成一個行內的物件,不會獨立成一行。
    • 用途:標示網頁中某些特別資料的顯示格式。例如:將網頁中含有「王小明」的字都用紅色字表示。

HTML

DIV

DIV

模組功能連結區

基本資料顯示區

詳細資料顯示區

DIV

搜尋區

DIV

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

slide7

橫幅

資訊列

內容

資訊列

註腳

使用 DIV 的版面設計
  • 透過 <DIV> 配合樣式的設定可以配置一個網頁的版面雛形
  • 透過事先定義好版面的主要區塊
  • 配合 CSS 的樣式設計
box model1
盒狀模型(Box Model)
  • 我們都可以把每個 HTML tag 視為一個盒子
  • 透過 Box Model 來可設定 HTML tag (盒子) 的內外距
  • 設定範圍主要分為
    • 邊界(Margin)
    • 填空(Padding)
    • 邊框(Border)
box model2
盒狀模型(Box Model)
  • 範例:黃色小鴨圖片放在 DIV 內
box model3
盒狀模型(Box Model)
  • 範例:黃色小鴨圖片放在 DIV 內
  • Box Model 可設定 HTML tag 的邊框

屬性: border(邊框)

box model4
盒狀模型(Box Model)
  • 範例:黃色小鴨圖片放在 DIV 內
  • Box Model 可設定 HTML tag 的邊界
box model5
盒狀模型(Box Model)
  • 範例:黃色小鴨圖片放在 DIV 內
  • Box Model 可讓 HTML tag 與內容之間留白

屬性:Padding (留白)

slide14
盒狀模型的樣式設定
  • 盒狀模型的樣式皆可針對四個方向設定
    • 上(top), 左(right), 下(bottom), 右(left)
  • 可設定的屬性主要分為
    • 邊界的大小(margin)
      • 指定邊界方向可使用(margin-方向)
      • 例: 上方邊界
        • margin-top: 5px
    • 填空的大小(padding)
      • 指定邊界方向可使用(padding-方向)
      • 例: 下方填空 3px
        • padding-bottom: 3px
    • 邊框(border)
box model6
盒狀模型(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)
box model7
盒狀模型(Box Model) – 續
  • 同時指定邊框的寬度, 色彩, 樣式
    • border-方向: <寬><樣式> <色彩>
      • 設定下方邊框為 2px 點虛線綠色
        • border-bottom: 2px dotted green;
    • 或不指定方向,即四周
      • 設定四週邊框為 1px 實線黑色
        • border: 1px solid black;
slide17
練習
  • 利用 DIV, SPAN 搭配 CSS 的 box Model 調整圖片與文字的間距。
    • 圖片四周的外距 10 px
    • 價格四周內距 5px
    • 描述下方的外距 5px
slide19
區塊的大小
  • 區塊大小的設定方式,可指定固定大小或者比例
    • 寬度(width)
      • width: 100px
      • width: 80%
    • 高度(height)
      • height: 100px
      • height: 90%;
  • 在區塊中可以指定文章段落行高(line-height)
    • 1.2 倍行高的範例
      • line-height: 1.2
slide20
區塊位置的設定

DIV

P

  • 區塊位置的顯示方式(position)
    • 相對位置(relative)
      • 設定標籤與標籤在呈現上的相對位置
        • 如右圖
    • 決對位置(absolute)
      • 存在於 網頁上的決對位置 (即使拉動卷軸也不會移動)
    • 固定位置(fixed)
      • 存在於 營幕上的固定位置 (卷軸下拉會隨著改變位置)
  • 位置的指定
    • 上(top), 下(bottom), 左(left), 右(right)
      • top: 100px;
slide21
區塊的順序
  • 重疊的區塊有上下順序之分
    • 必需先設定 區塊位置 (position ) 才能設定順序。
  • 可以使用 z-index 屬性設定
    • 數值越大越上方,數值越小越下面
      • z-index: <數字>
  • 若無設定 z-index 則會顯示於最下方

z-index: 1

z-index: 2

slide22
浮動區塊
  • 浮動 (float)
    • 可以令圖片或者區塊(DIV)置於文字之中
    • 可設定置左(left)或罝右(right)
slide23
浮動區塊– 續
  • 浮動圖片可能會介於兩個段落之間
    • 若不想要延續浮動的效果可以在下個段落使用 clear 屬性
slide24
浮動區塊– 續
  • clear 屬性的方向可以選擇左邊(left), 右邊(right)或者兩邊(both)
slide25
浮動區塊的範例

<!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>

slide26
當內容超出區塊
  • 當內容超出區塊如右圖
  • 可以使用 overflow 屬性來控制超出內容的顯示方式
    • 隱藏超出的內容(hidden)
    • 使用卷軸顯示超出的內容(scroll)
    • 自動判斷大小顯示卷軸(auto)
slide27
練習
  • 文章排版
  • 文章下載位置:
    • http://203.64.105.131/download/training/cssHomework.zip
slide28
注意事項
  • 版型上的間隔空間使用 CSS 盒狀模型設定
    • 不要使用 <p> 或 <br /> (嚴重錯誤)
  • 使用 CSS float 之後一定要加 clear
slide29

橫幅

資訊列

內容

資訊列

註腳

課後作業-我的網路商店
  • 網站的版形如左:三欄式版型
  • 中間內容請排列商品資訊。
slide31
作業的評分標準
  • 適當的應用課堂所教的標籤 (30%)
    • 不一定要全部使用,但也不可過少
  • HTML 及 CSS 語法的正確性及閱讀性 (40%)
    • 標籤有頭有尾 (20%)
    • 要適當縮排 (20%)
  • 主題、美觀及實用性 (30%)
    • 是否考慮畫面解析度
    • 文章排版