AP Div 元素的應用製作 作品主題 Ftisland 1 插入圖片及設定導覽列 2 設定網頁背景顏色 3 插入 IFRAME 4 更改連結目標 5 更改標題 6 DIV 標籤應用 7 附加外部樣式表 8 套用 css 重點回顧 學習評量
AP 元素 AP 元素 ( 絕對定位元素 ) 是已指派絕對定位的 HTML 頁面元素, 特別是指 div 標籤或其他標籤 AP 元素可以包含文字 影像或任何其它可以放在 HTML 文件內文中的內容 有了 Dreamweaver, 您可以使用 AP 元素來配置網頁 您可以在重疊 隱藏 AP 元素時顯示其它 AP 元素, 以及將 AP 元素橫越整個螢幕 您可以在一個 AP 元素中放入背景影像, 然後在上面加上第二個含有文字而背景透明的 AP 元素 AP 元素一般來說都是絕對定位的 Div 標籤 ( 這些都是 Dreamweaver 預設會插入的 AP 元素種類 ) 然而, 請記住, 您可以為任何 HTML 元素指定一個絕對位置, 以將 HTML 元素 ( 例如, 影像 ) 分類為 AP 元素 所有的 AP 元素 ( 而不是只有對定位的 Div 標籤 ) 都會出現在 AP 元素 面板中 div 標籤 您可以手動插入 div 標籤並將 CSS 定位樣式套用到這些標籤, 建立頁面版面 div 標籤, 指的就是可定義網頁內容中邏輯分區的標籤 您可以使用 div 標籤來置中處理內容區塊 在欄位上建立效果 建立不同的顏色區域等等 如果您不熟悉使用 div 標籤與串接樣式表 (CSS) 來建立網頁的方式, 可以依據 Dreamweaver 隨附的其中一個預先設計的版面來建立 CSS 版面 如果您不熟悉使用 CSS 的方式, 但是熟悉使用表格的方式, 也可以嘗試使用表格 備註 : Dreamweaver 會將所有具有絕對位置的 Div 標籤視為 AP 元素 ( 絕對定位元素 ), 就算您並未使用 AP Div 繪製 工具來建立這些 Div 標籤也是一樣
插入圖片及設定導覽列 Step1. 檔案 開新檔案 Step2. 選擇 空白頁面 點選 HTML 選擇 無 點選 建立
Step3. 點選工具列 插入 表格, 建立表格 Step 4. 建立一個 5 列 3 欄 的表格 頁首方面點選 無, 讓表格呈現無表格線, 設定好後點選確定
Sept 5. 選擇標籤 talbe 選取整個表格 寬度設定為 722 像素 對齊方式 設定為 置中對齊 小幫手 table : 選取整個表格 tr : 選取一整攔 td : 選取單個表格 Step 6. 選擇第一列的三個儲存格 在 屬性 面板中點選 合併儲存格, 第一列三個儲存格以及最後一列的三個儲存格分別進行 合併儲存格 Step7. 中間左右兩側的儲存格也分別進行 合併儲存格
Step8. 完成後如下圖顯示 Step9. 點選第一列儲存格, 點選工具列 插入 影像 Step10. 選擇檔案 Tittle 插入 點選插入的圖片 屬性 面板中作修改, 寬度設定為 750 高度設定為 60
Step11. 同上列步驟分別插入 r1 rr2 button 的圖片 分別設定 r1 寬度設定為 28 高度設定為 623 rr2 寬度設定為 31 高度設定為 623 button 寬度設定為 753 高度設定為 88 Step12. 點選 表格 水平置中對齊 插入 頭 的圖檔 修改圖片大小 寬度設定為 534 高度設定為 122
Step13. 點選紅色框框處, 是插入導覽列的地方 Step14. 點選上方工具列 插入 影像物件 導覽列, 即會開啟插入導 覽列設定視窗
導覽列項目名稱為 a1( 可自行設定 ) 一般狀態影像 : 點選 瀏覽, 選擇按鈕圖片為團明介紹紐 (1).png 滑鼠經過影像 : 點選 瀏覽, 選擇團明介紹紐 (2).png 按下時, 前往的 URL: In.html( 可自行設定 ) 設定結束後點選新增其他按鈕分別有團圓紐 (1) 照片 (1) mv 紐 (1) 以及意見 (1) 團員紐 (1) 連結至 People.html 滑鼠經過影像變化 : 團圓紐 (2) 意見 (1) 連結至 E-mail 滑鼠經過影像變化 : 意見 (2) 圖片大小更改為寬度設定為 133 高度設定為 50 網頁背景色 Step1. 將 屬性 面板中 頁面屬性 Step2. 外觀 (css), 選擇 背景顏色 為 黑色 (#000)
( 完成後 ) 插入 IFRAME Step1. 游標點擊 td 處 ( 紅色框框 )
Step2. 點選工具列 插入 HTML 頁框 選單中點擊 IFRAME, 插入 IFRAME Step3. 點選 IFRAME 後, 點選工具列 修改 編輯標籤, 開啟 標籤編 設定 輯器 iframe 視窗 來源按瀏覽鈕, 設定為 In.html 名稱輸入 a1 ( 可自行設定 ) 寬度設定為 694 高度設定為 445 勾消 顯示邊框 項目 設定結束後點選確定
Step4. 完成後如下面顯示
更改連結目標 Step1. 點選按鈕圖, 在屬性面板中更改目標為 a1 小幫手 : a1 為 IFRAME 設定名稱 Step2. 點選 團員介紹 按鈕設定連結目標, 設定方式同 Step1, 完成後即點選導覽列 按鈕, 網頁會顯示在 a1<iframe> 中 更改標題 設定標題為 :FT island
DIV 標籤應用 Step1. 檔案 開新網頁 選擇 空白頁面 HTML 選擇 無 建立, 點選工具列 插入, 選擇 版面物件 裡面的 DIV 標籤 Step2. 在 Div 標籤, 插入 : 在插入點上 ID : Int 點選確定
Step3. 在 Div 標籤內插入文字內容 Step4. 點選下面 屬性, 點選 頁面屬性 按鈕, 開啟 頁面屬性視窗 點選 左邊分類 外觀, 背景顏色設定為 #000 文字顏色設定為 #FFF Step5. 完成後儲存檔案名稱為 In.htm
Step6. 檔案 開新網頁 選擇 空白頁面 HTML 選擇 無 建立 開啟新網頁, 建立一個 People.html 頁面 Step7. 插入 DIV 標籤設定, 插入 : 在插入點上 ID : Int, 設定結束後點選 確定 (ID 名稱可自行設定 ) Step8. 插入 DIV 標籤, 插入 : 在標籤結尾前 div id = Int,ID : Lee(ID 名稱 可自行設定 )
Step9. 更改 Lee<DIV 標籤 > 裡面的內容, 插入圖片 98sztg.jpg, 點選 圖片 在選擇下面 屬性 視窗設定圖片大小 : 寬度設定為 148 高度設定為 152 Step10. 根據以上步驟分別建立 ID: Choi Jae Song Min DIV 標籤 (ID 名稱可自行設定 ) Choi 插入圖片為 149bfa7bf535d7.jpg, 圖片大小 : 寬度設定為 148 高度設定為 199 插入 : 在標籤結尾前 div id = Lee, ID : Choi(ID 名稱可自行設定 ) Jae 插入圖片為 149bfa7c2ab774.jpg, 圖片大小 : 寬度設定為 148 高度設定為 199 插入 : 在標籤結尾前 div id = Choi, ID : Jae (ID 名稱可自行設定 ) Song 插入圖片為 149bfa7c904b29.jpg, 圖片大小 : 寬度設定為 148 高度設定為 199 插入 : 在標籤結尾前 div id = Jae, ID : Song (ID 名稱可自行設定 ) Min 插入圖片為 149bfa7bdb680c.jpg, 圖片大小 : 寬度設定為 148 高度設定為 199 插入 : 在標籤結尾前 div id = Song, ID : Min (ID 名稱可自行設定 )
Step11. 點選下面 屬性, 點選 頁面屬性 按鈕, 開啟 頁面屬性視窗 點 選左邊分類 外觀, 背景顏色設定為 #000 文字顏色設定為 #FFF, 完 成後如下圖
附加外部樣式表 Step1. 檔案 開新檔案 選擇 空白頁面 點選 css 後點選 建 立 Step2. 複製以下文字並貼到程式碼裡面 body { font-family: Arial, 標楷體, sans-serif; font-size: 14px; color: #fff; margin-left: 0px; margin-top: 0px; } #Int { margin: 20px auto; width:600px; line-height: 1.8em; text-align: left; }.clear { background: none; clear: both; } img{ border: 1px solid #000066; margin-bottom: 20px;} Step3. 檔案名稱儲存為 main.css
Step4. 開啟 In.html 網頁, 執行 視窗 css 樣式 Step5. 點選 css 樣式 的編輯視窗右下方 附加外部樣式表, 開啟 附加 外部樣式表 的編輯視窗做設定 設定 檔案 /URL : main.css 增加成為 : 連結 設定結束後點選 確定 Step5. 重複以上步驟, 依序開啟
People.htm Music.htm Picture.htm 的網 頁, 分別開啟 附加外部樣式表 的編輯視窗, 並設定 連結 外部樣 編輯 CSS 式表 main.css Step1. 開啟 main.css 檔案, 執行 格式 css 樣式 開啟新檔, 開啟 設定 新增 css 規則 的編輯視窗做設定 選取器類型 : 複合 ( 依您的選項而定 ) 選擇器名稱 : #Lee 定義規則 : 僅此文件 設定結束後點選 確定 後, 開啟 #Lee 的 css 規則定義 的編輯視窗做設定
Step2. 分類 : 背景 Background-color < 背景顏色 > : #000 Step3. 分類 : 區塊 Display : inline
Step4. 分類 : 方框 Width : 140px Float : left Padding 勾選全部都一樣設定為 0 Margin 取消勾選全部都一樣,TOP 及 Bottom 設定為 10px Right 及 Left 設定為 5px Step5. 分類 : 定位 Position : relative Width : 140px
Step6. 開啟 main.css 檔案, 執行 格式 css 樣式 開啟新檔, 開啟 設定 新增 css 規則 的編輯視窗做設定 選取器類型 : 複合 ( 依您的選項而定 ) 選擇器名稱 : #Choi 定義規則 : 僅此文件 設定結束後點選確定後, 開啟 #Choi 的 css 規則定義 的編輯視窗設定 Step7. 依序以上步驟設定 #Choi Step8. 開啟 main.css 檔案, 執行 格式 css 樣式 開啟新檔, 開啟 新增 css 規則 的編輯視窗做設定 設定 選取器類型 : 複合 ( 依您選項而定 ) 選擇器名稱 : #Jae 定義規則 : 僅此文件 設定結束後點選確定後, 開啟 #Jae 的 css 規則定義 的編輯視窗做設定 Step9. 依序以上步驟設定 #Jae Step10. 開啟 main.css 檔案, 執行 格式 css 樣式 開啟新檔, 並 開啟 新增 css 規則 的編輯視窗做設定
設定 選取器類型 : 複合 ( 依您選項而定 ) 選擇器名稱 : #Song 定義規則 : 僅此文件 設定結束後點選 確定 後, 開啟 #Song 的 css 規則定義 的編輯視窗做設定 Step11. 依序以上步驟設定 : #Song Step12. 開啟 main.css 檔案, 執行 格式 css 樣式 開啟新檔, 開 設定 啟 新增 css 規則 的編輯視窗做設定 選取器類型 : 複合 ( 依您選項而定 ) 選擇器名稱 : #Min 定義規則 : 僅此文件 設定結束後點選確定後, 開啟 #Min 的 css 規則定義 的編輯視窗做設定 Step13. 依序以上步驟設定 : #Min
重點回顧 1. 新增 css 規則, 可透過 [ 字型 ] 類別定義 css 樣式的基本字體 2. 在 [ 插入導覽列 ] 視窗中可以為導覽列項目增加一般狀態影像 滑鼠經過影像 滑鼠 按下影像 3. 在 [ 插入導覽列 ] 斥窗中, 透過 [ 新增項目 ] 功能, 增加導覽列項目, 然後再為導覽列 項目設定相關影像 4. 透過工具列 [ 插入 ] [HTML] [ 頁框 ] [IFrame], 可以在頁面中插入 IFrame 5. 利用 [ 修改 ] [ 標籤編輯器 ], 可以編輯 IFrame 內的設定 學習評量 1. (D) 若想使網頁中的影像可以隨著導覽者的游標動作而變化, 透過下列哪些功能 可以達成?(A) 插入導覽列 (B) 插入影像 (C) 插入 Flash 按鈕 (D) 插入影像檢視器 2. (C) 如果插入的表格不符合內容要求的欄列數目, 怎麼做能一是添加這些欄列? (A) 插入新表格 (B) 手繪表格 (C) 分割表格 (D) 合併表格 3. (C)IFrame 在哪一個工具列裡?(A) 檔案 (B) 修改 (C) 插入 (D) 檢視 4. (B) 若想在程式碼視窗中新增 CSS 規則定義, 需透過下列哪項工具列? (A) 插入 (B) 格式 (C) 修改 (D) 檔案 5.(A) 若想變更網頁的背景顏色, 須透過下列哪個選項設定? (A) 頁面屬性 (B) 編輯 CSS(C) 修改影像