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 相對於瀏覽器文字大小的倍數

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