網頁制作基礎教程 （Dreamweaver CC）（第3版）課件 第3章 網頁布局

職業(yè)教育教學用書網頁制作基礎教程（DreamweaverCC）網站制作前的準備1網頁布局與規(guī)劃2網頁的編輯3網頁的多媒體效果4網站的管理與上傳5模塊目錄網頁布局網站的風格網頁布局實例網頁布局的注意事項繪制網頁布局草圖項目一網頁布局的相關知識子項目1網站的風格在對網頁插入各種對象和修飾效果前，一定要先確定網站風格和網頁布局。也就是說，要先確定網站的總體風格，并對網頁布局進行規(guī)劃，這樣才能保證網站中各個網頁的統(tǒng)一。網上書店的網頁內容豐富、色彩鮮艷，并且有大幅廣告和浮動的“客服”懸停圖片鏈接。網站的風格

網絡在線學習平臺內容比較單一，但是非常有條理且欄目突出，使瀏覽者可以很容易地搜索到自己關心的內容。網站的風格旅行網站功能比較單一，看起來也比較簡單，采用一幅圖片作為主頁的主要內容，僅有幾個打開其他網頁的超鏈接文字，感覺非常清新。網站的風格網站的風格網站風格，沒有優(yōu)劣之分，只是網站的性質與風格有著根本的區(qū)別?！熬W上書店”采用鮮艷的色彩吸引瀏覽者的注意，具有一定的商業(yè)目的，所以有廣告?！熬W絡在線學習平臺”是一個服務性質的網站，主要為用戶提供學習或培訓服務等，所以它無須借助各種手段吸引瀏覽者，需要服務的用戶自然會來?！奥眯芯W站”顯然更具有個性色彩，網頁中的文字很少，也沒有廣告，卻留有大量的空白，給人以想象的空間，該網站提供的專一且專業(yè)的服務，是吸引瀏覽者的關鍵。子項目2網頁布局實例所謂網頁布局，通俗地說，就是確定網頁上的網站標志、導航欄和菜單等元素的位置。不同網頁上各種網頁元素所處的地位不同，其位置也會不同。在通常情況下，重要的元素都放在突出位置。子項目2網頁布局實例1.“同”字形結構。經常變形為“回”字形結構、“匡”字形結構等，甚至有更加自由的結構。無論如何變形，其特點都是網站的頂部是徽標和圖片（廣告）欄；下面分為3列或多列，兩邊的兩列區(qū)域比較小，一般是導航超鏈接和小型圖片廣告等；中間是網站的主要內容；底部是網站的版權信息等。子項目2網頁布局實例2.標題正文形結構：這種結構頂部是網站標識和標題，下面是網頁正文，內容非常簡單。子項目2網頁布局實例3.分欄形結構：一般分為左、右（或上、下）兩欄，也可能分為多欄。通常將導航鏈接與正文放在不同的欄中，這樣在打開新的網頁時，導航鏈接欄的內容不會發(fā)生變化。子項目2網頁布局實例4.網格形結構網頁：使用不同大小的網格來表達內容，給人一種整齊的秩序感。使用這種結構可以讓不同的網格表達不同的內容，從而減少了文字，保持了內容的有序，提升了整個網頁的整齊性。子項目2網頁布局實例4.網格形結構網頁：使用不同大小的網格來表達內容，給人一種整齊的秩序感。使用這種結構可以讓不同的網格表達不同的內容，從而減少了文字，保持了內容的有序，提升了整個網頁的整齊性。子項目2網頁布局實例5.封面形結構：先看到的是一幅圖片或動畫，在圖片或動畫的下方有一個進入下一級網頁的超鏈接提示文字。子項目3網頁布局的注意事項165432網頁布局的注意事項疏密度網頁布局要做到疏密有度，不要讓整個網頁布滿密集的文字信息或圖片，適當留白反而可以強調整個畫面的重點部分。反復性反復就是不斷地出現。例如，利用幾個有規(guī)律的小色塊在網頁中上、下、左、右延伸排列，這就是反復之美；利用大小相同的圖片進行反復排版，這也是反復之美。韻律感具有相同特性的對象，如點、圓、線條等在沿曲線反復排列時，就會產生韻律感，使畫面顯得輕盈且富有靈氣。平衡性一個好的網頁布局應該給人一種安定、平穩(wěn)的感覺，它不僅表現在文字、圖像等元素的空間占用上分布均勻，還表現在色彩的平衡，要給人一種協(xié)調的感覺。對稱性對稱是一種美，而我們生活中有許多事物都是對稱的。對比性讓不同的形態(tài)、色彩等元素相互對比，可以產生鮮明的視覺效果，如色彩對比、圖形對比等，往往能創(chuàng)造出富有變化的效果。子項目3網頁布局的注意事項7.顏色搭配網頁中的顏色搭配也非常重要，一般不要用對比強烈的顏色搭配作主色，主色的顏色也盡量控制在3種以內，背景和內容的對比要明顯，盡可能少地使用花紋復雜的圖片，以便突出文字。網頁的排版布局是決定網站美觀與否的一個重要方面，通過合理的、有創(chuàng)意的布局才可以把文字和圖像等內容完美地展現在瀏覽者面前。子項目4繪制網頁布局草圖這樣確定網頁布局：網站LOGO放置在左上角；右側為Banner區(qū)域，可以存放圖片或動畫；下方為鏈接文字區(qū)；中間為主要內容區(qū)，用于輸入文字或圖片；底部為網頁版權文字區(qū)。做一做：在網頁中插入表格制作不規(guī)則表格設置表格和單元格屬性表格的嵌套項目二使用表格規(guī)劃網頁布局完成網頁布局子項目1在網頁中插入表格網頁中表格的作用1：讓網頁中的內容變得整齊有序，通過設置表格的行數、列數，以及合并單元格等操作來改變框線、背景色等，從而使網頁中的各種元素合理、有序地整合在一起；網頁中表格的作用2：利用表格把大的圖像拆分為幾個小的圖像，并按順序插入表格中，再將表格框線隱藏，達到快速顯示圖像的目的網頁中表格的作用3：利用表格實現網頁布局，先將網頁元素放置在不同的單元格中，再隱藏框線，從而使瀏覽者察覺不到表格的存在。子項目1在網頁中插入表格做一做選擇菜單欄中的“插入”→“Table”命令，在“Table”對話框中設置“行數”為“4”，“列”為“2”，“表格寬度”為“200像素”，“邊框粗細”為“1”像素，單擊“確定”按鈕，插入表格。子項目1在網頁中插入表格做一做：在默認情況下，表格的行高和列寬都是相等的。如果想要表格左側一列比右側一列窄一些，并且各行的高度也略有不同。將鼠標指針移動到表格框線上，當鼠標指針變形狀時，移動鼠標指針到合適的位置后，釋放鼠標左鍵。子項目2制作不規(guī)則表格做一做：添加新行或新列在選中行上右擊，在彈出的快捷菜單中選擇“表格”→“插入行或列”命令，彈出“插入行或列”對話框。在“插入行或列”對話框中選中“行”單選按鈕，在“行數”數值框中輸入“1”，選中“所選之上”單選按鈕，單擊“確定”按鈕，就可以在光標所在行的上方插入一行。子項目2制作不規(guī)則表格做一做：刪除行或列使光標出現在被刪除的行中，然后右擊，在彈出的快捷菜單中選擇“表格”→“刪除行”命令。子項目2制作不規(guī)則表格做一做：合并單元格選中兩個相鄰單元格，將鼠標指針移動到屬性檢查器上，單擊“合并單元格，使用跨度”按鈕，被選中的單元格被合并。子項目2制作不規(guī)則表格做一做：完成網頁布局圖參照網頁布局草圖，對表格中的一些單元格進行合并操作，其最終效果如圖所示。子項目2制作不規(guī)則表格做一做：拆分單元格使光標出現在被拆分單元格中，然后右擊，在彈出的快捷菜單中選擇“表格”→“拆分單元格”命令。在“拆分單元格”對話框中選中“列”單選按鈕，在“列數”數值框中輸入“5”，單擊“確定”按鈕。子項目3設置表格和單元格屬性做一做：拆分單元格將鼠標指針移動到表格左上方的外框線上，當鼠標指針變形狀時單擊，選中整個表格。在屬性檢查器中可以設置表格寬度以及框線寬度。讀一讀：要選中表格或者選中表格中的某部分1．選中表格的方法方法一：將鼠標指針移動到表格左上方的外框線上，當鼠標指針變?yōu)樾螤顣r單擊，可以選中整個表格。方法二：先單擊任意一個單元格，再單擊Dreamweaver窗口底部的“<table>”標簽，可以選中整個表格。方法三：按住Shift鍵的同時單擊表格中的任意一個單元格，可以選中整個表格。方法四：先單擊任意一個單元格，再選擇菜單欄中的“編輯”→“表格”→“選擇表格”命令，可以選中整個表格。讀一讀：要選中表格或者選中表格中的某部分2．選中行或列的方法方法一：將鼠標指針移動到表格上框線位置，當鼠標指針變形狀時單擊，可以選中一列。方法二：將鼠標指針移動到表格左框線位置，當鼠標指針變形狀時單擊，可以選中一行。方法三：在表格的行或列中移動鼠標指針，可以選中一行或者一列。讀一讀：要選中表格或者選中表格中的某部分3．選中單元格的方法方法一：先在單元格中單擊，再單擊Dreamweaver窗口底部的“<td>”標簽，可以選中該單元格。方法二：先在單元格中單擊，再按Ctrl+A組合鍵，可以選中該單元格。方法三：先在單元格中單擊，再選擇菜單欄中的“編輯”→“全選”命令，可以選中該單元格。讀一讀：要選中表格或者選中表格中的某部分4．選中多個單元格的方法方法一：在單元格中移動鼠標指針，可以選中多個相鄰的單元格。方法二：在單元格中單擊，按住Shift鍵的同時單擊另一個單元格，可以選中以這兩個單元格為矩形的多個相鄰單元格。方法三：按住Ctrl鍵，依次單擊多個單元格，可以選中多個不連續(xù)的單元格。子項目4表格的嵌套做一做：在表格中插入表格確定光標的位置，選擇菜單欄中的“插入”→“Table”命令。在“Table”對話框中，設置“行數”為“1”，“列”為“5”，“表格寬度”為“100”，并在后面的下拉列表中選擇“百分比”選項，“邊框粗細”為“0”像素，單擊“確定”按鈕。子項目4表格的嵌套做一做：移動嵌套表格的框線，可以調整各個單元格的寬度，但整個表格的寬度不變。子項目5完成網頁布局做一做：將表格中的所有框線粗細都設置為0，調整表格的高度和寬度，就可以初步看到一個規(guī)劃后的網頁布局。在表格中輸入文字和插入圖片，并設置背景。子項目5完成網頁布局做一做：選中整個表格，將屬性檢查器中的“CellPad”（填充值）設置為“10”，此時表格中的文字與表格框線的距離變?yōu)?0像素；將“CellSpace”（間距值）設置為“10”，此時各個單元格之間的距離變?yōu)?0像素。Div概述插入Div設置Div完成網頁布局項目三使用Div規(guī)劃網頁布局子項目1Div概述Div又被稱為Div標簽，是一種區(qū)隔標記。它的主要作用是將頁面分割為不同的區(qū)域，并設定文字、圖像和表格的排列方式，通過移動或指定坐標的位置等方式，對文字、圖像等元素進行精確定位。絕對定位的Div又被稱為APDiv。它是通過設置與窗口邊框的距離來定位的，因為它可以包含文字、圖像等其他內容，所以這使得組成網頁的各種元素可以精確定位在網頁的某個位置。相對定位可以使Div以當前位置為基準來確定具體的位置，當前位置改變后，具體位置也會發(fā)生相應的變化。子項目2插入Div選擇菜單欄中的“插入”→“Div”命令，“插入Div”對話框中的“插入”下拉列表用于選擇Div區(qū)域的插入位置；“Class”下拉列表用于選擇Div的樣式，“ID”下拉列表用于輸入Div的名稱。單擊“確定”按鈕，會在網頁中插入一個Div。做一做：插入Div子項目2插入Div做一做：將Div改為CSS-P元素單擊“拆分”按鈕，切換到“代碼”視圖和“設計”視圖。在“代碼”視圖中找到Div的語句，將“<div>此處顯示新Div標簽的內容</div>”改為“<divstyle="position:absolute">此處顯示新Div標簽的內容</div>”。設置完成，Div區(qū)域出現了藍框。子項目2插入Div做一做：將Div改為CSS-P元素在屬性檢查器中可以改變CSS-P元素的寬度和高度，以及背景顏色和背景圖像等。子項目3設置Div做一做：移動該CSS-P元素的位置選中一個CSS-P元素，將鼠標指針移動到該CSS-P元素的左上角，移動鼠標指針即可移動該CSS-P元素的位置。子項目3設置Div做一做：移動該CSS-P元素的位置選中CSS-P元素，單擊該CSS-P元素的框線，將鼠標指針移動到該框線右下角，當鼠標指針變化時，移動鼠標指針，更改CSS-P元素的大小。子項目3設置Div讀一讀：CSS-P元素屬性檢查器CSS-P元素屬性檢查器中的主要參數含義如下：（