AP 元素 AP 元素 ( 絕對定位元素 ) 是已指派絕對定位的 HTML 頁面元素, 特別是指 div 標籤或其他標籤 AP 元素可以包含文字影像或任何其它可以放在 HTML 文件內文中的內容有了 Dreamweaver, 您可以使用 AP 元素來配置網頁您可以在重疊隱藏 AP 元素時顯示

Size: px

Start display at page:

Download "AP 元素 AP 元素 ( 絕對定位元素 ) 是已指派絕對定位的 HTML 頁面元素, 特別是指 div 標籤或其他標籤 AP 元素可以包含文字影像或任何其它可以放在 HTML 文件內文中的內容有了 Dreamweaver, 您可以使用 AP 元素來配置網頁您可以在重疊隱藏 AP 元素時顯示"

约凤
5 years ago
Views:

1 AP Div 元素的應用製作作品主題 Ftisland 1 插入圖片及設定導覽列 2 設定網頁背景顏色 3 插入 IFRAME 4 更改連結目標 5 更改標題 6 DIV 標籤應用 7 附加外部樣式表 8 套用 css 重點回顧學習評量

2 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 標籤也是一樣

3 插入圖片及設定導覽列 Step1. 檔案開新檔案 Step2. 選擇空白頁面點選 HTML 選擇無點選建立

4 Step3. 點選工具列插入表格, 建立表格 Step 4. 建立一個 5 列 3 欄的表格頁首方面點選無, 讓表格呈現無表格線, 設定好後點選確定

5 Sept 5. 選擇標籤 talbe 選取整個表格寬度設定為 722 像素對齊方式設定為置中對齊小幫手 table : 選取整個表格 tr : 選取一整攔 td : 選取單個表格 Step 6. 選擇第一列的三個儲存格在屬性面板中點選合併儲存格, 第一列三個儲存格以及最後一列的三個儲存格分別進行合併儲存格 Step7. 中間左右兩側的儲存格也分別進行合併儲存格

6 Step8. 完成後如下圖顯示 Step9. 點選第一列儲存格, 點選工具列插入影像 Step10. 選擇檔案 Tittle 插入點選插入的圖片屬性面板中作修改, 寬度設定為 750 高度設定為 60

7 Step11. 同上列步驟分別插入 r1 rr2 button 的圖片分別設定 r1 寬度設定為 28 高度設定為 623 rr2 寬度設定為 31 高度設定為 623 button 寬度設定為 753 高度設定為 88 Step12. 點選表格水平置中對齊插入頭的圖檔修改圖片大小寬度設定為 534 高度設定為 122

8 Step13. 點選紅色框框處, 是插入導覽列的地方 Step14. 點選上方工具列插入影像物件導覽列, 即會開啟插入導覽列設定視窗

9 導覽列項目名稱為 a1( 可自行設定 ) 一般狀態影像 : 點選瀏覽, 選擇按鈕圖片為團明介紹紐 (1).png 滑鼠經過影像 : 點選瀏覽, 選擇團明介紹紐 (2).png 按下時, 前往的 URL: In.html( 可自行設定 ) 設定結束後點選新增其他按鈕分別有團圓紐 (1) 照片 (1) mv 紐 (1) 以及意見 (1) 團員紐 (1) 連結至 People.html 滑鼠經過影像變化 : 團圓紐 (2) 意見 (1) 連結至滑鼠經過影像變化 : 意見 (2) 圖片大小更改為寬度設定為 133 高度設定為 50 網頁背景色 Step1. 將屬性面板中頁面屬性 Step2. 外觀 (css), 選擇背景顏色為黑色 (#000)

10 ( 完成後 ) 插入 IFRAME Step1. 游標點擊 td 處 ( 紅色框框 )

11 Step2. 點選工具列插入 HTML 頁框選單中點擊 IFRAME, 插入 IFRAME Step3. 點選 IFRAME 後, 點選工具列修改編輯標籤, 開啟標籤編設定輯器 iframe 視窗來源按瀏覽鈕, 設定為 In.html 名稱輸入 a1 ( 可自行設定 ) 寬度設定為 694 高度設定為 445 勾消顯示邊框項目設定結束後點選確定

12 Step4. 完成後如下面顯示

13 更改連結目標 Step1. 點選按鈕圖, 在屬性面板中更改目標為 a1 小幫手 : a1 為 IFRAME 設定名稱 Step2. 點選團員介紹按鈕設定連結目標, 設定方式同 Step1, 完成後即點選導覽列按鈕, 網頁會顯示在 a1<iframe> 中更改標題設定標題為 :FT island

14 DIV 標籤應用 Step1. 檔案開新網頁選擇空白頁面 HTML 選擇無建立, 點選工具列插入, 選擇版面物件裡面的 DIV 標籤 Step2. 在 Div 標籤, 插入 : 在插入點上 ID : Int 點選確定

15 Step3. 在 Div 標籤內插入文字內容 Step4. 點選下面屬性, 點選頁面屬性按鈕, 開啟頁面屬性視窗點選左邊分類外觀, 背景顏色設定為 #000 文字顏色設定為 #FFF Step5. 完成後儲存檔案名稱為 In.htm

16 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.

17 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 名稱可自行設定 )

18 Step11. 點選下面屬性, 點選頁面屬性按鈕, 開啟頁面屬性視窗點選左邊分類外觀, 背景顏色設定為 #000 文字顏色設定為 #FFF, 完成後如下圖

19 附加外部樣式表 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

20 Step4. 開啟 In.html 網頁, 執行視窗 css 樣式 Step5. 點選 css 樣式的編輯視窗右下方附加外部樣式表, 開啟附加外部樣式表的編輯視窗做設定設定檔案 /URL : main.css 增加成為 : 連結設定結束後點選確定 Step5. 重複以上步驟, 依序開啟

21 People.htm Music.htm Picture.htm 的網頁, 分別開啟附加外部樣式表的編輯視窗, 並設定連結外部樣編輯 CSS 式表 main.css Step1. 開啟 main.css 檔案, 執行格式 css 樣式開啟新檔, 開啟設定新增 css 規則的編輯視窗做設定選取器類型 : 複合 ( 依您的選項而定 ) 選擇器名稱 : #Lee 定義規則 : 僅此文件設定結束後點選確定後, 開啟 #Lee 的 css 規則定義的編輯視窗做設定

22 Step2. 分類 : 背景 Background-color < 背景顏色 > : #000 Step3. 分類 : 區塊 Display : inline

23 Step4. 分類 : 方框 Width : 140px Float : left Padding 勾選全部都一樣設定為 0 Margin 取消勾選全部都一樣,TOP 及 Bottom 設定為 10px Right 及 Left 設定為 5px Step5. 分類 : 定位 Position : relative Width : 140px

24 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 規則的編輯視窗做設定

25 設定選取器類型 : 複合 ( 依您選項而定 ) 選擇器名稱 : #Song 定義規則 : 僅此文件設定結束後點選確定後, 開啟 #Song 的 css 規則定義的編輯視窗做設定 Step11. 依序以上步驟設定 : #Song Step12. 開啟 main.css 檔案, 執行格式 css 樣式開啟新檔, 開設定啟新增 css 規則的編輯視窗做設定選取器類型 : 複合 ( 依您選項而定 ) 選擇器名稱 : #Min 定義規則 : 僅此文件設定結束後點選確定後, 開啟 #Min 的 css 規則定義的編輯視窗做設定 Step13. 依序以上步驟設定 : #Min

26 重點回顧 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) 修改影像

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05