星期四, 5月 14, 2009

Dreamweaver 20090514 上課小記

************************20090514 徐國堂 **************************

版面製作
  • 表格
    • 內容與結構混合在一起
  • CSS
    • float
    • position
      • static
      • relative
      • fixed
      • absolute

CSS 套用方法
  • inline 行內樣式
  • embed 嵌入
  • link
    • 部落格常常使用link的方式連結外部的CSS
  • @import

練習行內樣式
開新檔案 --> 輸入一些練習文字 並選取文字

在下方的屬性畫面
--> HTML --> 段落
--> CSS --> 目標規則:新增行內樣式 --> 編輯規則
--> 字型 --> 輸入 Font-size: 13 --> Color: 選取顏色 --> 區塊標籤 --> Letter-spaceing: 3 px --> 確定


*body標籤內的就是網頁的內容及架構(沒有經過修飾)
*即時檢視 對網頁跟資料庫連接很方便

Lab:
建立一個新檔案 sample.html 複製 index.html內的 body標籤內的內容 到sample.html 檔案body標籤內
建立一個新的CSS檔案為 sample.css
於sample.html 設定外部連結 sample.css

*架構了解(自行繪製網頁的區塊) 才能編輯CSS
*一個頁面只有一個body標籤

*CSS
  • body
    • text-align: 要求文字排列方式
    • 例如 text-align: center; 就是文字都要置中
  • border:solid 1px; 邊線為實線 寬度為 1 px
  • width:550px; 寬度為550 像素
  • margin-left:auto;
  • margin-right:auto; 當左右的 margin 都設定為auto 就是置中
  • font-size: 1.25em 字型大小為瀏覽器的1.25倍
  • padding-top: 20px 向上留白(填滿) 20px
  • padding-bottom: 20px 向下留白(填滿) 20px
  • margin-top: 0px 上邊界 0 px
  • margin-bottom: 0px 下邊界 0 px

Box moudle
*padding 包含背景區域
*margin 有負邊界
*padding 沒有負邊界, 有背景及margin 才會設定padding

*CSS的大小單位
  • px 像素
  • em 相對於瀏覽器文字大小的倍數


***************************************************************

沒有留言: