1 / 74

第九章 Div 設定以靈活頁面-「頁框」頁面設計

第九章 Div 設定以靈活頁面-「頁框」頁面設計. 課前指引 和表格比起來， AP 元素更是頁面排版的重要工具，雖然表格可讓頁面資料排列整齊，但卻無法讓我們自由移動頁面上任何資料的位置，而 AP 元素的出現，剛好可以解決這方面的問題，藉由 AP 元素可自由移動及縮放的特性，讓網頁的編排邁入了一個全新的領域，從此我們可和美工軟體一樣的來設計頁面效果。. 章節大綱. 9-1 建立 AP Div 及內容. 9-5 AP 元素排版技巧. 9-2 網頁藍圖. 9-6 巢狀 AP 元素. 9-3 以 AP 元素面板管理 AP 元素.

sanura
Download Presentation

第九章 Div 設定以靈活頁面-「頁框」頁面設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第九章 Div設定以靈活頁面-「頁框」頁面設計 課前指引 和表格比起來，AP元素更是頁面排版的重要工具，雖然表格可讓頁面資料排列整齊，但卻無法讓我們自由移動頁面上任何資料的位置，而AP元素的出現，剛好可以解決這方面的問題，藉由AP元素可自由移動及縮放的特性，讓網頁的編排邁入了一個全新的領域，從此我們可和美工軟體一樣的來設計頁面效果。

  2. 章節大綱 9-1 建立AP Div及內容 9-5 AP元素排版技巧 9-2 網頁藍圖 9-6 巢狀AP元素 9-3 以AP元素面板管理AP元素 9-7 以Div標籤規畫區塊 9-4 AP元素屬性設定 9-8 應用範例-上頁框/左頁框的 頁面設計 備註：可依進度點選小節

  3. 9-1 建立AP Div及內容 建立AP元素 1.新增空白網頁 2.「插入」面板切換到「版面」類別 3.點選此圖示

  4. 在頁面上拖曳繪製AP元素 繪製完成的AP元素

  5. 建立完成的AP元素，可以在頁面上自由的縮放及移動，不過在操作前要先點取AP元素的邊框；反之若要刪除AP元素時，只要點取AP元素後再按下「Delete」鍵即可。建立完成的AP元素，可以在頁面上自由的縮放及移動，不過在操作前要先點取AP元素的邊框；反之若要刪除AP元素時，只要點取AP元素後再按下「Delete」鍵即可。 點選AP元素邊框後，可移動AP元素、調整大小或刪除，另外，各位可以看到標籤，上面會顯示AP元素的相關資訊

  6. 如果是使用功能表指令「插入/版面物件/AP Div」來建立AP元素，則會在頁面上建立一個寬高為200×115的AP Div。 不過這個寬高預設值是可更改的，我們可以將AP元素預設的寬度及高度調整成常用的尺寸，如此可以節省調整圖層尺寸的時間。 請各位執行「編輯/偏好設定」指令，並在如下的視窗中設定AP元素的寬高。

  7. 1.先點取「AP元素」項目 2.在此重新設定新預設寬度及高度

  8. 建立AP元素內容 大部份的網頁元素（如文字、表格、圖片等）都可以放在AP元素中，同時藉由AP元素能自由移動的特性來編排頁面，各位只要先將游標放在AP元素內，此時再按照各個元素的建立方式來加入即可。 如果在AP元素建立之前，頁面上已經有其他的網頁元素存在時，我們也可以利用剪下、複製及貼上的方式將其重新放置在AP元素之中。 1.新增空白網頁

  9. 不過在設計時一般都會將所有的網頁元素搭配使用，我們可先在AP元素中建立表格，接著再對每一個儲存格內加入文字或圖片，這樣就同時具有AP元素自由移動及表格整齊排列的優點，如圖中的連結按鈕設計。不過在設計時一般都會將所有的網頁元素搭配使用，我們可先在AP元素中建立表格，接著再對每一個儲存格內加入文字或圖片，這樣就同時具有AP元素自由移動及表格整齊排列的優點，如圖中的連結按鈕設計。 1.先在AP元素內建立表格 2.再對每一個儲存格加入圖片

  10. 將表格轉換成AP Div 1.先點選整個表格 2.執行功能表上的「修改/轉換/表格到AP Div」指令

  11. 1.可以預先勾選要顯示的工具 2.按此鈕確定 表格已轉換成AP元素

  12. 9-2 網頁藍圖 開啟空白網頁，執行「修改/頁面屬性」指令

  13. 1.點選「影像藍圖」項目 2.按此鈕，選擇「layout.jpg」影像 3.設定影像的透明度50% 4.按此鈕確定

  14. 加入網頁藍圖的畫面（此影像位於最底層，所以不能進行任何的編輯）加入網頁藍圖的畫面（此影像位於最底層，所以不能進行任何的編輯） 各位可以根據藍圖影像在頁面上建立AP元素

  15. 9-3 以AP元素面板管理AP元素 顯示AP元素清單 1.先在頁面上繪製第一個AP元素 3.在面板上出現2個AP Div元素 2.再繼續繪製第二個圖層

  16. 變更AP元素的上下順序 1.先點選apDiv2元素不放 2.將他拖曳到apDiv1元素的下方 影像的上下順序也跟著對調 <範例檔：09_04ok.html>

  17. 調整Z軸索引值 Z軸索引值與圖層上下順序的關係圖

  18. 點選此AP元素，將它的Z軸數值由「2」更換成「0」點選此AP元素，將它的Z軸數值由「2」更換成「0」 瞧！影像順序跟著更換了

  19. 元素的顯示及隱藏 點取此位置可設定AP元素的顯示或隱藏狀態

  20. AP元素的顯示狀態設定

  21. 避免AP元素重疊 勾選此項後，此時AP元素無論怎麼移動，都無法產生重疊（只能沿其他元素的邊緣移動）

  22. 因此，當我們在執行「表格轉換為AP元素」功能時，其視窗畫面就會詢問是否要使用「防止AP元素重疊」，各位可以在此先勾選，或是到AP元素面板中再行啟用都是可以的。因此，當我們在執行「表格轉換為AP元素」功能時，其視窗畫面就會詢問是否要使用「防止AP元素重疊」，各位可以在此先勾選，或是到AP元素面板中再行啟用都是可以的。 勾選是否啟用「避免重疊」功能

  23. 9-4 AP元素屬性設定 設定AP元素的尺寸及位置 圖層高度 圖層寬度 利用屬性面板可進行調整

  24. 設定AP Div背景 同時指定背景影像及背景顏色時，會以背景影像為優先顯示

  25. AP Div的溢位 顯示AP元素的寬與高數值為200×100 從屬性面板的「溢位」功能進行調整 <範例檔：09_06.html>

  26. 各種溢位效果說明如下，請先設定後再使用瀏覽器來觀看設定效果。各種溢位效果說明如下，請先設定後再使用瀏覽器來觀看設定效果。 設定「隱藏」的預覽效果 設定「捲軸」的預覽效果

  27. 設定AP Div名稱 AP元素的預設名稱，點選這裡，可以變更AP元素的名稱

  28. 2.瞧！在AP元素面板也一併變更 1.由此變更為易於辨識的名稱

  29. 檢視AP元素屬性 游標移到AP元素邊框，則會顯示邊框屬性資訊 游標移到AP元素內部，會顯示相關屬性資訊

  30. AP Div的CSS樣式設定 1.點選AP元素 2.開啟「CSS樣式」面板，點選元素名稱 3.按下此鈕編輯樣式 <範例檔：09_08.html>

  31. 1.切換到「邊框」分類 2.設定邊框的樣式 3.按下「確定」鈕

  32. 瞧！AP元素加入了邊框 <範例檔：09_08ok.html>

  33. 9-5 AP元素排版技巧 尺規、格線及導引線 尺規 尺規單位 水平尺規 垂直尺規

  34. 格線 2.頁面上立即顯示格線 1.執行「檢視/格線/顯示格線」指令

  35. 至於格線內容，則請執行「檢視/格線/格線設定」指令，然後從視窗中進行設定。至於格線內容，則請執行「檢視/格線/格線設定」指令，然後從視窗中進行設定。 可設定格線顏色 設定是否顯示及貼齊格線 設定格線的外觀樣式 設定每條格線之間的距離

  36. 導引線 導引線預設的顏色是綠色，調為暗紅色是為了易於識別

  37. 繪製導引線時需藉助頁面上的尺規，當尺規顯示以後，我們可以在水平尺規上按住往下拖曳（垂直尺規則是往右拖曳），這時所看到的綠色線條就是導引線，綠色是導引線的預設顏色，另外在拖曳的過程中也會同時顯示導引線的座標位置。繪製導引線時需藉助頁面上的尺規，當尺規顯示以後，我們可以在水平尺規上按住往下拖曳（垂直尺規則是往右拖曳），這時所看到的綠色線條就是導引線，綠色是導引線的預設顏色，另外在拖曳的過程中也會同時顯示導引線的座標位置。 由上方的水平尺規往下拖曳，就會顯示導引線及其座標資訊

  38. 至於導引線的其他功能可由「檢視/導引線」中的功能清單來選用，我們以附表為各位作個整理。至於導引線的其他功能可由「檢視/導引線」中的功能清單來選用，我們以附表為各位作個整理。

  39. 元素的對齊 只要利用「Shift」鍵先複選多個AP元素，Dreamweaver會以最後選取的元素來做為對齊的依據，當各位選取完成後，再執行功能表中的「修改/排列順序」指令，接著就可從清單中的「靠左對齊」、「靠右對齊」、「靠齊上緣」及「靠齊下緣」等擇一方式進行對齊。 另外功能清單中的「設定成同寬度」與「設定成同高度」功能，則可以同時將所選取的AP元素調整成相同的寬度或高度，但同樣是以「最後選取」的AP元素做為調整的依據。

  40. 9-6 巢狀AP元素 建立巢狀AP元素 建立2個AP元素 按住「Ctrl」鍵，將apDiv1拖曳到apDiv2上方

  41. 建立完成的巢狀AP元素

  42. 巢狀AP元素應用 1.在頁面上建立如圖的3個AP元素，並命名成如圖的名稱，於green及shadow元素內輸入英文字母 2.按此鈕分別為green及shadow兩個AP元素設定字體樣式 <範例檔：09_09.html>

  43. 將green及shadow兩個AP元素設為group的子AP元素 將2個AP元素重疊，並做些許的位移，就能產生出如圖的陰影效果 <範例檔：09_09ok.html>

  44. 當要移動陰影文字時，只需拖曳父元素(group)，整個陰影文字就會一併移動了。當要移動陰影文字時，只需拖曳父元素(group)，整個陰影文字就會一併移動了。 移動父元素時，裡面所包含的子元素就會一併移動

  45. 9-7 以Div標籤規畫區塊 插入Div標籤 表頭(header) 網頁主要內容，又分成左右兩欄(contentLeft、contentRight) 頁尾(footer) 高雄市府政文化局網址：http://www.khcc.gov.tw/home01.aspx?ID=1http://www.ntch.edu.tw/

  46. 1.開啟空白網頁 2.由此按下「插入Div標籤」鈕

  47. 1.點選此項，使插入在插入點上 3.按此鈕確定 2.輸入標題區的ID名稱 由此設定CSS規則，或是稍後再做設定

  48. 1標題區的區塊已經建立，將輸入點放在區塊中1標題區的區塊已經建立，將輸入點放在區塊中 2.按此鈕再插入Div標籤 1.設定插在header標籤之後 3.按此鈕確定 2.輸入內容區的標籤名稱

  49. 1.內容區已顯示在標題區之下 2.再按此鈕 1.選擇在「content」標籤之後 3.按此鈕確定 2.輸入頁尾的標籤名稱

More Related