Dreamweaver 20090512 上課小記

************************20090512 徐國堂 **************************

設計網頁主要的區域

• Logo
• banner
• main navigation
• sub navigation
• 內容
• 廣告

• copyright

顯示器的設定一定要設定為 1280x1024 導引線比較好拉

*開啟尺規 好建立導引線

• 檢視 --> 尺規 --> 顯示

做網頁

1. 先規劃網頁的區塊
2. 建立導引線
3. 繪製AP Div 填入背景
   

繪製AP Div(插入 --> 版面物件 --> AP Div)

• AP 是絕對位置
  

F12 預覽網頁
建議使用 巢狀AP Div (編輯 --> 偏好設定 --> AP 元素 --> 勾選 如果在AP Div 中則使用巢狀)

sans-serif 為系統的無襯邊字型

HTML 類型

• block: 要求左右兩邊不允許有其他的東西存在
• inline: 左右兩邊允許有其他的東西存在

將網頁置中

• 將檢視模式切換到分割
  
• 選取body標籤內部的內容(不含body標籤)
• 插入 --> 版面物件 --> Div 標籤
• ID: main --> 新增CSS規則 --> 確定
  
• 方框 --> Width: 900 Margin 內 Right:auto Left:auto
  
• 定位 --> Position:relative
• 點選確定 使其生效, 目前看起來網頁 有上下邊界距離
• 點選工具列上面的 修改 --> 頁面屬性 (Ctrl + J)
• 在外觀(CSS) 將上下左右邊界 設定為0 --> 確定
• 這個時候網頁就已經置中 然後邊界是貼著網頁
  
• 將CSS 變成連結外部CSS(所以新建立一個新的CSS檔案讓這個網頁連結)
• 點選工具列上面的 檔案 --> 開新檔案 Ctrl + N --> 選取CSS --> 建立
• 點選工具列上面的 檔案 --> 儲存檔案(建議css建立一個資料夾獨立儲存)
• 切換回來原來的index.html 在原來的CSS樣式 點選 附加外部樣式表(長相像鎖鏈的圖示)
  
• 點選瀏覽 --> 選取 剛剛建立的新的CSS檔案 --> 確定 --> 確定
• 將原來CSS樣式內的style 標籤的所有東西選取起來(利用shift按鍵) 使用滑鼠左鍵 拖曳到 sample.css(剛剛建立的css)
• 這個時候在程式碼內 會觀察到有 link href="css/sample.css" rel="stylesheet" type="text/css" 連結到外部的css
• 儲存所有檔案 使用F12 檢視網頁 --> Finish
  

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