CH09Div设定以灵活页面.pptVIP

為表頭的Div標籤加入底色及大小的設定 在設定「contentleft」及「contentright」的CSS樣式時，可在「方框」的類別中將「Float」分別設為「left」及「right」，這樣左右的兩個標籤就可以分別靠左和靠右對齊了。 設定contentright時，請選擇「rirht」，「clear」則選擇「none」 編修Div標籤的CSS樣式 2.按此鈕即可編修該樣式 範例檔：09_13ok.html 1.新增的CSS規則會顯示於此，點選要編修的規則 標籤中插入網頁元素 Dreamweaver中看到的效果 瀏覽器上看到的效果 9-8 應用範例-上頁框/左頁框的頁面設計 這部份要設計的是位於頁框架構中的「上頁框」與「左頁框」的頁框畫面，在「上頁框」中要擺放的是網頁橫幅影像，而在「左頁框」中要放置的則是具有導覽功能的連結按鈕。 左方頁框畫面設計 在「班級網站」中新建left.html網頁 以「frame_left_back.jpg」影像做為背景 加入導覽按鈕 1.點選「繪製AP Div」按鈕 2.在網頁中拖曳出AP元素 2.「插入」面板切換到「常用」標籤，按下「滑鼠變換影像」鈕 1.點選在AP元素中 ? 2.按下「確定」鈕 1.設定如畫面所示 其他導覽按鈕的設定內容如下： 完成第一個按鈕設定 依序將以上的按鈕加入後，請將按鈕排列成如圖下的效果。 上方頁框畫面設計 請新增一個空白頁面「top.htm」，並且以「frame_top_back.jpg」影像來做為背景，同時將重覆效果設定為「no-repeat」。 加入網頁橫幅 2.繪製一AP Div ? 1.按此鈕 1.按下此鈕，在AP Div中新增影像檔 2.在AP元素內插入「banner001.png」 QA討論時間 本章結束 2.瞧！在AP元素面板也一併變更 ? ? ? ? 1.由此變更為易於辨識的名稱 檢視AP元素屬性 游標移到AP元素內部，會顯示相關屬性資訊 游標移到AP元素邊框，則會顯示邊框屬性資訊 AP Div的CSS樣式設定 3.按下此鈕編輯樣式 範例檔：09_08.html 1.點選AP元素 2.開啟「CSS樣式」面板，點選元素名稱 ? 3.按下「確定」鈕 1.切換到「邊框」分類 2.設定邊框的樣式 瞧！AP元素加入了邊框 範例檔：09_08ok.html 9-5 AP元素排版技巧 尺規、格線及導引線 尺規 ? 水平尺規 ? 垂直尺規 尺規單位 格線 2.頁面上立即顯示格線 ? ? 1.執行「檢視/格線/顯示格線」指令 至於格線內容，則請執行「檢視/格線/格線設定」指令，然後從視窗中進行設定。 設定格線的外觀樣式 可設定格線顏色 設定是否顯示及貼齊格線 設定每條格線之間的距離 導引線 導引線預設的顏色是綠色，調為暗紅色是為了易於識別 繪製導引線時需藉助頁面上的尺規，當尺規顯示以後，我們可以在水平尺規上按住往下拖曳（垂直尺規則是往右拖曳），這時所看到的綠色線條就是導引線，綠色是導引線的預設顏色，另外在拖曳的過程中也會同時顯示導引線的座標位置。 由上方的水平尺規往下拖曳，就會顯示導引線及其座標資訊 至於導引線的其他功能可由「檢視/導引線」中的功能清單來選用，我們以附表為各位作個整理。 元素的對齊 只要利用「Shift」鍵先複選多個AP元素，Dreamweaver會以最後選取的元素來做為對齊的依據，當各位選取完成後，再執行功能表中的「修改/排列順序」指令，接著就可從清單中的「靠左對齊」、「靠右對齊」、「靠齊上緣」及「靠齊下緣」等擇一方式進行對齊。 另外功能清單中的「設定成同寬度」與「設定成同高度」功能，則可以同時將所選取的AP元素調整成相同的寬度或高度，但同樣是以「最後選取」的AP元素做為調整的依據。 9-6 巢狀AP元素 建立巢狀AP元素 建立2個AP元素 按住「Ctrl」鍵，將apDiv1拖曳到apDiv2上方 建立完成的巢狀AP元素 巢狀AP元素應用 1.在頁面上建立如圖的3個AP元素，並命名成如圖的名稱，於green及shadow元素內輸入英文字母 範例檔：09_09.html 2.按此鈕分別為green及shadow兩個AP元素設定字體樣式 將green及shadow兩個AP元素設為group的子AP元素 範例檔：09_09ok.html 將2個AP元素重疊，並做些許的位移，就能產生出如圖的陰影效果 當要移動陰影文字時，只需拖曳父元素(group)，整個陰影文字就會一併移動了。 移動父元素時，裡面所包含的子元素就會一併移動 9-7 以Div標籤規畫區塊 插入Div標籤 表頭(header) ? ?