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

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