網(wǎng)頁(yè)設(shè)計(jì)與制作（Dreamweaver CC）（第3版） 課件 模塊3、4 網(wǎng)頁(yè)布局、高級(jí)應(yīng)用

DreamweaverCC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊3課件01模塊1網(wǎng)頁(yè)基礎(chǔ)知識(shí)03模塊3網(wǎng)頁(yè)布局05模塊5網(wǎng)站的測(cè)試與發(fā)布02模塊2初級(jí)應(yīng)用04模塊4高級(jí)應(yīng)用06模塊6綜合應(yīng)用任務(wù)描述

通過(guò)布局“奮揚(yáng)青春”網(wǎng)頁(yè)，學(xué)會(huì)使用表格布局頁(yè)面的方法和技巧。任務(wù)8奮揚(yáng)青春

——表格布局頁(yè)面任務(wù)解析在本任務(wù)中，需要完成以下操作：1.掌握表格的創(chuàng)建方法和表格、單元格的屬性設(shè)置；2.掌握嵌套表格的創(chuàng)建方法和屬性的設(shè)置。3.學(xué)會(huì)使用表格布局頁(yè)面的方法和技巧。具體操作：（1）將素材中的renwu8文件夾復(fù)制到D盤(pán)根目錄。運(yùn)行DreamweaverCC，新建站點(diǎn)“奮揚(yáng)青春”，站點(diǎn)文件夾為D:\renwu8，在站點(diǎn)根目錄下新建網(wǎng)頁(yè)文件index.html；打開(kāi)“頁(yè)面屬性”對(duì)話框，在“外觀（css）”分類(lèi)選項(xiàng)卡中設(shè)置背景顏色為#ccc，左、上邊距為0；在“鏈接”分類(lèi)選項(xiàng)卡中設(shè)置鏈接顏色為黑色，變換圖像鏈接顏色為紅色，已訪問(wèn)鏈接顏色為綠色，始終無(wú)下劃線，頁(yè)面屬性設(shè)置如圖3-1所示。

圖3-1頁(yè)面屬性設(shè)置具體操作：（2）選擇“插入→表格(table)”命令，設(shè)置表格大小為1行2列，表格寬度為1200像素，其他項(xiàng)為0，如圖3-1所示，單擊“確定”按鈕插入表格。（3）單擊表格的邊框線，選中整個(gè)表格，在“表格”屬性面板中設(shè)置“對(duì)齊”為“居中對(duì)齊”，如圖3-3所示。

圖3-2“表格”對(duì)話框

圖3-3“表格”屬性面板具體操作：（4）將光標(biāo)定位到表格第1個(gè)單元格中，在屬性面板中設(shè)置寬度為1000，選擇“插入→圖像”命令，在打開(kāi)的“選擇圖像源文件”對(duì)話框中選擇“renwu8_01.gif”文件，單擊“確定”按鈕插入圖像,如圖3-4所示。

圖3-4第一個(gè)表格效果（5）將光標(biāo)定位到第2列單元格，在“代碼”視圖中為單元格添加背景圖像“renwu8_02.gif”；代碼如圖3-5所示。再次光標(biāo)定位該單元格，選擇“插入→表格”命令，設(shè)置表格大小為4行1列，表格寬度為100%，其他項(xiàng)為0，單擊“確定”按鈕插入嵌套表格tab1；分別設(shè)置嵌套單元格的第1、2、3、4行行高為38、40、40、40，如圖3-6所示。

圖3-5第2列單元格的背景圖像代碼

圖3-6第2列單元格的嵌套表格具體操作：（6）光標(biāo)定位到嵌套表格的第2行單元格，選擇輸入法“軟鍵盤(pán)”中的“特殊字符”項(xiàng)，在單元格中輸入◆，然后在單元格中輸入文字“設(shè)為首頁(yè)”；同樣的方法，在第3行和第4行輸入“◆聯(lián)系我們”和“◆加入收藏”，效果如圖3-7所示。

圖3-7表格效果1（7）將光標(biāo)定位到表格的后面或下一行，選擇“插入→表格”命令，設(shè)置表格大小為1行1列，表格寬度為1200像素，其他項(xiàng)為0，單擊“確定”按鈕，插入表格。在表格屬性面板中設(shè)置對(duì)齊為居中對(duì)齊，單元格屬性面板中設(shè)置高為41，如圖3-8所示。

圖3-8表格效果2具體操作：（7）將光標(biāo)定位到第二個(gè)表格，在“代碼”視圖中為表格添加背景圖像“renwu8_03.gif”,代碼如圖3-9所示。再次光標(biāo)定位該表格，選擇“插入→表格”命令，設(shè)置表格大小為1行9列，表格寬度為100%，其他項(xiàng)為0，單擊“確定”按鈕，插入嵌套表格tab2；分別設(shè)置嵌套表格的第1列列寬373，第9列列寬為113，第2列到第8列平均分配列寬為102，高均為41；如圖3-10所示。

圖3-9第2個(gè)表格代碼

圖3-10第2個(gè)表格的嵌套表格設(shè)置（8）在第二個(gè)表格的嵌套表格中的第2列到第8列，分別輸入文本“部門(mén)簡(jiǎn)介，規(guī)章制度，教育管理，資助工作，咨詢服務(wù)，心理服務(wù)和宿舍管理”；創(chuàng)建CSS樣式表ys01，定義ys01樣式表的字體為黑體、大小為16px、顏色為白色、加粗、居中顯示，分別為7個(gè)單元格的文本內(nèi)容套用ys01樣式，如圖3-11所示。

圖3-11第2個(gè)表格效果具體操作：（9）將光標(biāo)定位到第2個(gè)表格的后面或下一行，選擇“插入→表格”命令，設(shè)置表格大小為1行3列，表格寬度為1200像素，其他項(xiàng)為0，單擊“確定”按鈕插入表格。在表格屬性面板中設(shè)置對(duì)齊為居中對(duì)齊，單元格屬性面板中設(shè)置高為542，第三個(gè)表格的布局圖和參數(shù)如圖3-12所示。

圖3-12第3個(gè)表格的布局參數(shù)值具體操作：（10）分別設(shè)置第三個(gè)表格的第1列和第3列列寬為100，第2列列寬為1000。選擇表格切換為擴(kuò)展模式，光標(biāo)定位在第2列單元格中，插入為4行2列，表格寬度為100%，其他項(xiàng)為0的嵌套表格tab3，分別設(shè)置第1行高為207，第2行高位40，第3行高為160，第4行高為45，第1列列寬為390，第2列列寬為610，合并第1行單元格；光標(biāo)定位在tab3的第3行第1列單元格，插入1行3列，表格寬度為100%，其他項(xiàng)為0的嵌套表格tab3-1，設(shè)置tab3-1的高為160，第1列和第3列列寬分別為4%；在tab3的下方，插入1行2列，表格寬度為100%，其他項(xiàng)為0的嵌套表格tab4，設(shè)置tab4的高為90，第1列單元格寬為355；單擊“插入”面板“布局”類(lèi)別中的“標(biāo)準(zhǔn)”按鈕，切換表格為標(biāo)準(zhǔn)模式。擴(kuò)展模式如圖3-13所示，標(biāo)準(zhǔn)模式如圖3-14所示。

圖3-13第3個(gè)表格的擴(kuò)展模式圖

圖3-14第3個(gè)表格的標(biāo)準(zhǔn)模式具體操作：（11）為第3個(gè)表格部分單元格插入圖片。第三個(gè)表格第1列和第3列插入圖片“renwu8_04.gif”和“renwu8_06.gif”；第2列嵌套表格tab3的第1行插入圖片“renwu8_05.gif”，第2行第1列和第2列分別插入圖片“renwu8_07.gif”和“renwu8_08.gif”，第4行第1列和第2列分別插入圖片“renwu8_11.gif”和“renwu8_12.gif”；第5列嵌套表格tab4的第2列插入圖片“renwu8_14.gif”，如圖3-15所示。

圖3-15第三個(gè)表格插入圖片的效果具體操作：（12）在“代碼”視圖中，為第3個(gè)表格部分單元格設(shè)置背景圖像。tab3的第3行第1列單元格的背景圖像設(shè)置為renwu8_09.gif，第2列單元格的背景圖像設(shè)置為圖片“renwu8_10.gif”；tab4的第1列單元格的背景圖像設(shè)置為“renwu8_13.gif”，如圖3-16所示。

圖3-16第三個(gè)表格插入圖片和背景圖像的效果具體操作：（13）為第3個(gè)表格部分單元格添加文字。將text文件夾下的“通知通告.doc”內(nèi)容復(fù)制到tab3-1的第2列單元格中。創(chuàng)建CSS樣式表ys02，定義ys02樣式表的字體大小為12px、行高為20px，選中通知通告文本內(nèi)容套用ys02樣式；同樣的方法復(fù)制和設(shè)置“學(xué)生動(dòng)態(tài)”的”文本內(nèi)容；在“下載專區(qū)”中手動(dòng)輸入文本內(nèi)容““困難學(xué)生補(bǔ)助申請(qǐng)書(shū)、學(xué)生會(huì)干部競(jìng)聘申請(qǐng)書(shū)、緩交學(xué)費(fèi)申請(qǐng)表”按效果圖進(jìn)行分段和縮進(jìn)，并套用ys02樣式，如圖3-17所示。

圖3-17添加文字后的第三個(gè)表格效果具體操作：（14）為“學(xué)生動(dòng)態(tài)”和“下載專區(qū)”文字設(shè)置空鏈接，創(chuàng)建滑動(dòng)文字變色效果。選中“學(xué)生動(dòng)態(tài)”中的第一行文字，在屬性面板的鏈接框中輸入“#”。同樣的辦法為其它各行文字創(chuàng)建空鏈接。（15）在第3個(gè)表格下方，插入1行1列，表格寬度為1200像素，其他項(xiàng)為0的表格，在表格屬性面板中設(shè)置對(duì)齊為居中對(duì)齊，單元格屬性面板中設(shè)置高為60，水平居中對(duì)齊;在”代碼“視圖為表格設(shè)置背景圖像為“renwu8_15.gif”，將光標(biāo)定位單元格中，輸入文本內(nèi)容“@版權(quán)所有|站點(diǎn)地圖|友情鏈接、建議使用1280*800分辨率”，并套用ys02樣式表，如圖3-18所示。

圖3-18index.html效果圖表格布局此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

網(wǎng)頁(yè)設(shè)計(jì)中，寬度不是絕對(duì)固定的。網(wǎng)頁(yè)尺寸由兩個(gè)因素決定的：一是顯示器屏幕，二是瀏覽器軟件。網(wǎng)頁(yè)的寬度約等于屏幕大小減去22px，如1024px寬的屏幕，其網(wǎng)頁(yè)寬度不大于1002px,一般設(shè)定為950px或960px。

為了使網(wǎng)頁(yè)更加美觀大方，在制作網(wǎng)頁(yè)時(shí)，需要先對(duì)網(wǎng)頁(yè)的輪廓進(jìn)行規(guī)劃，將文字、圖片等網(wǎng)頁(yè)元素進(jìn)行精確定位，這就需要用到網(wǎng)頁(yè)的布局。表格布局是目前最常見(jiàn)的網(wǎng)頁(yè)布局方式之一，它靈活方便、簡(jiǎn)單易學(xué)，熟練地使用表格布局是網(wǎng)頁(yè)制作的基本要求。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

表格由行和列組成，每行或每列又由單元格組成，如圖3-19所示，當(dāng)將某行或某列設(shè)為標(biāo)題行或標(biāo)題列后，默認(rèn)情況下，標(biāo)題單元格中的內(nèi)容將自動(dòng)加粗并居中顯示。標(biāo)號(hào)①所示的是單元格間距，指的是單元格和單元格之間的距離。標(biāo)號(hào)②所示的是單元格邊距(也稱為填充)，指的是單元格中的內(nèi)容與單元格邊框之間的距離。

圖3-19表格的結(jié)構(gòu)表格的組成圖3-20“表格”對(duì)話框此處添加你的信息此處（1）創(chuàng)建表格

①在“文檔”窗口中，將光標(biāo)定位到要插入表格的位置，執(zhí)行以下操作之一，打開(kāi)“表格”對(duì)話框，如圖3-20所示。?選擇菜單“插入→表格（table）”命令。?單擊“插入”面板“html”標(biāo)簽中的“表格（table）”按鈕。?按【Ctrl+Alt+T】組合鍵。

創(chuàng)建表格圖3-21嵌套表格此處添加你的信息此處

創(chuàng)建嵌套表格就是在已有表格的某單元格中插入新的表格，如圖3-21所示。使用表格的嵌套可以使大量的網(wǎng)頁(yè)元素進(jìn)行復(fù)雜定位，從而整齊地展示在瀏覽者面前，在一些綜合性網(wǎng)站中都會(huì)普通使用。

若要在當(dāng)前表格的單元格中插入嵌套表格，可以直接拖動(dòng)“插入”面板“常用”類(lèi)別中的“表格”按鈕到相應(yīng)的單元格中，或者將光標(biāo)定位到該單元格中，使用前面新建表格的方法插入表格。創(chuàng)建表格（1）選擇整個(gè)表格

?單擊表格的邊框線。

?將光標(biāo)定位到表格中，在標(biāo)簽選擇器中單擊<table>標(biāo)簽。

?將鼠標(biāo)指針移到表格的左上角，或邊框線附近的敏感區(qū)域，當(dāng)鼠標(biāo)指針的右下角出現(xiàn)表格的縮略圖時(shí)，單擊鼠標(biāo)左鍵。

?將光標(biāo)定位到表格中，按兩次【Ctrl+A】組合鍵。（2）選擇行

?直接用鼠標(biāo)拖動(dòng)選中該行中的所有單元格。

?將光標(biāo)定位到要選擇行的某個(gè)單元格中，在標(biāo)簽選擇器中單擊<tr>標(biāo)簽。

?將鼠標(biāo)指向要選擇行的左邊緣，當(dāng)鼠標(biāo)指針變?yōu)橛壹^“”時(shí)，單擊鼠標(biāo)左鍵。（3）選擇列

?直接用鼠標(biāo)拖動(dòng)選中該列中的所有單元格。

?將鼠標(biāo)指向要選擇列的上邊緣，當(dāng)鼠標(biāo)指針變?yōu)橄录^“”時(shí)，單擊鼠標(biāo)左鍵。

?光標(biāo)定位到單元格中，在對(duì)應(yīng)列的“列標(biāo)題”菜單中選擇“選擇列”命令。選擇表格元素（4）選擇單元格

要選擇單個(gè)單元格，可采用以下方法。

?按住【Ctrl】鍵在單元格內(nèi)單擊。

?在單元格內(nèi)單擊并向相鄰的單元格拖動(dòng)鼠標(biāo)。

?將光標(biāo)定位到單元格內(nèi)，單擊標(biāo)簽選擇器上的<td>標(biāo)簽。

?將光標(biāo)定位到單元格內(nèi)，按【Ctrl+A】組合鍵。

要選擇多個(gè)單元格，可采用以下方法。

?直接用鼠標(biāo)從第一個(gè)單元格拖到最后一個(gè)單元格。

?將光標(biāo)定位到第一個(gè)單元格內(nèi)，按住【Shift】鍵單擊最后一個(gè)單元格，可以選擇矩形區(qū)域內(nèi)的所有單元格，如圖3-27所示。

?按住【Ctrl】鍵依次單擊要選擇的單元格，可以選擇不連續(xù)的單元格，再次單擊可取消其選擇。選擇表格元素

圖3-29“表格”屬性面板“表格”：用來(lái)輸入表格的名字?！靶小焙汀傲小保河脕?lái)指定表格中行、列的數(shù)目，還可以通過(guò)修改此值，達(dá)到添加或刪除表格中行或列的目的。“寬”：以像素為單位或按百分比指定表格寬度?！疤畛?cellpad)”：指的是單元格邊距，即單元格的內(nèi)容和單元格邊框之間的像素?cái)?shù)。

間距(cellspace)”：指的是單元格間距，即相鄰單元格之間的像素?cái)?shù)?！皩?duì)齊(align)”：用于設(shè)置表格相對(duì)于同一段落中其他元素（例如文本和圖像）的顯示位置?！斑吙?border)”：指定表格邊框的寬度（單位為像素），若表格僅用于頁(yè)面布局可將值設(shè)為0。“清除列寬”按鈕：從表格中刪除所有明確指定的列寬。“清除行高”按鈕：從表格中刪除所有明確指定的行高。“將表格寬度轉(zhuǎn)換成像素”按鈕：將表格中每列的寬度和整個(gè)表格的寬度設(shè)置為以像素為單位的當(dāng)前寬度。“將表格寬度轉(zhuǎn)換成百分比”按鈕：將表格中每列的寬度和整個(gè)表格的寬度設(shè)置為按百分比表示的寬度。設(shè)置表格屬性

圖3-30“單元格”屬性面板“合并單元格”：將所選的單元格、行或列合并為一個(gè)單元格?！安鸱謫卧瘛保簩⒁粋€(gè)單元格拆分成多個(gè)單元格。“水平”和“垂直”：設(shè)置單元格中的內(nèi)容在水平和垂直方向上的對(duì)齊方式?！皩挕焙汀案摺保河脕?lái)設(shè)置所選單元格的寬度和高度，可以在文本框中輸入以像素為單位的數(shù)字，也可以輸入按表格寬度或高度的百分比指定的以百分號(hào)“%”結(jié)尾的數(shù)字。“不換行”復(fù)選框：如果選中了該復(fù)選框，當(dāng)單元格中的文本超過(guò)單元格的寬度時(shí)，單元格會(huì)自動(dòng)加寬以容納所有文本；如果沒(méi)有選中該復(fù)選框，當(dāng)單元格內(nèi)的數(shù)據(jù)超過(guò)單元格的寬度時(shí)，會(huì)自動(dòng)換行。“標(biāo)題”復(fù)選框：如果選中該復(fù)選框，則選擇的單元格被設(shè)置為表格標(biāo)題單元格。“背景顏色”：設(shè)置所選單元格的背景顏色。設(shè)置單元格屬性（1）調(diào)整表格的大小

?選中表格后，表格邊框會(huì)出現(xiàn)3個(gè)控制柄，鼠標(biāo)指向控制柄呈雙向箭頭時(shí)拖動(dòng)鼠標(biāo)，可調(diào)整整個(gè)表格的大小。

?選中表格后，在表格屬性面板的“寬”文本框中輸入數(shù)值以精確指定表格的寬度。當(dāng)調(diào)整整個(gè)表格的大小時(shí)，表格中所有單元格將按比例更改大小。如果表格的某單元格指定了明確的寬度或高度，則調(diào)整表格大小時(shí)不會(huì)更改這些單元格指定的寬度或高度。（2）調(diào)整行高和列寬用鼠標(biāo)拖動(dòng)要更改行或列的邊框線。改變行高，可上下拖動(dòng)該行的下邊框線，如圖3-33所示；改變列寬，可左右拖動(dòng)該列的右邊框線，如圖3-34所示。表格的基本操作

圖3-33改變行高及效果圖

圖3-34改變列寬及效果圖（3）插入行或列

?選中行或列，右鍵選擇菜單“表格-插入行（插入列）”命令，如圖3-35所示，可在所選行的上方插入一新行或所選列的左方插入一新列。

?選中行或列，右鍵選擇菜單“表格→插入行或列”命令，彈出“插入行或列”對(duì)話框，如圖3-36所示，設(shè)置插入的行（列）數(shù)及位置，單擊“確定”按鈕，可以插入多行或多列。

?打開(kāi)某列的“列標(biāo)題”菜單，選擇“左側(cè)插入列”或“右側(cè)插入列”，可在當(dāng)前列的左側(cè)或右側(cè)插入一新列，如圖3-37所示。表格的基本操作

圖3-35插入行或列

圖3-36

“插入行或列”對(duì)話框（4）刪除行或列

?選中要?jiǎng)h除的行或列，右鍵選擇菜單“表格-刪除行（刪除列）命令。

?選中要?jiǎng)h除的行或列，直接按【Del】鍵。（5）合并和拆分單元格

①選擇要進(jìn)行合并的單元格，具體操作步驟如下。

?右鍵菜單中選擇“表格→合并單元格”命令。

?單擊屬性面板上的“合并單元格”按鈕。

?按【Ctrl+Alt+M】組合鍵。

②拆分單元格是將一個(gè)單元格分成多個(gè)單元格，具體操作步驟如下。

?右鍵菜單中選擇“表格→拆分單元格”命令。

?單擊屬性面板上的“拆分單元格”按鈕。

?按【Ctrl+Alt+S】組合鍵。表格的基本操作圖3-37“列標(biāo)題”右鍵菜單圖3-38“拆分單元格”對(duì)話框

Dreamweaver中有兩種表格模式，分別為標(biāo)準(zhǔn)模式和擴(kuò)展表格模式，如圖3-40所示。標(biāo)準(zhǔn)模式是表格默認(rèn)的視圖模式，表格及其內(nèi)容的絕大部分操作適合在該模式下進(jìn)行。在擴(kuò)展表格模式下，Dreamweaver會(huì)臨時(shí)向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框，可使編輯操作更加直觀。使用這種模式，可以方便選擇表格中的內(nèi)容或精確的定位插入點(diǎn)。擴(kuò)展表格模式圖3-40標(biāo)準(zhǔn)模式和擴(kuò)展表格模式提醒：要進(jìn)入擴(kuò)展表格模式，可以右鍵選擇菜單“表格→擴(kuò)展表格模式”命令。

在擴(kuò)展表格模式下，選擇內(nèi)容或定位插入點(diǎn)后，可使用以下方法返回標(biāo)準(zhǔn)模式。

?直接單擊“文檔”窗口上方的“退出”。

?選擇再次單擊右鍵選擇菜單“表格→表格擴(kuò)展模式”命令。?任務(wù)描述

通過(guò)布局“架構(gòu)夢(mèng)想”網(wǎng)頁(yè)，學(xué)會(huì)使用CSS+Div布局和美化網(wǎng)頁(yè)。任務(wù)9

架構(gòu)夢(mèng)想——

CSS+Div布局頁(yè)面任務(wù)解析

在本任務(wù)中，需要完成以下操作：

?學(xué)會(huì)Div的創(chuàng)建和屬性設(shè)置；

?學(xué)會(huì)使用CSS+Div布局和美化網(wǎng)頁(yè)。具體操作：（1）頁(yè)面布局圖和各Div（塊）的關(guān)系，如圖3-41所示。

圖3-41網(wǎng)頁(yè)布局圖及各Div（塊）的關(guān)系（2）將素材中的renwu9文件夾復(fù)制到D盤(pán)根目錄。運(yùn)行DreamweaverCC，新建站點(diǎn)“架構(gòu)夢(mèng)想”，站點(diǎn)文件夾為D:\renwu9。打開(kāi)站點(diǎn)根目錄新建空白文檔index.htm，修改標(biāo)題為“CSS+Div布局網(wǎng)頁(yè)”,打開(kāi)“頁(yè)面屬性”對(duì)話框，在“外觀（css）”分類(lèi)選項(xiàng)卡中設(shè)置背景顏色為#CCC,“左、右、上、下”邊距均為0px。具體操作：（3）創(chuàng)建嵌套Div。打開(kāi)index.html，“插入→Div”,在DOM面板中輸入Div的名字“#container”；光標(biāo)定位在“#container”層中，再次選擇“插入→Div”，選擇“嵌套”，如圖3-42，插入嵌套Div,在DOM面板中輸入名稱“#banner”；同樣的方法創(chuàng)建“#content”、“#footer”嵌套Div，DOM面板如圖3-43所示。

圖3-42Div插入模式

圖3-43DOM面板具體操作：(4)定義container層的樣式。在CSS設(shè)計(jì)器中，創(chuàng)建#container樣式，并設(shè)置屬性，如圖3-44所示。

圖3-44#container的屬性設(shè)置

圖3-45#banner的屬性設(shè)置具體操作：（4）在banner層中插入圖片并編輯CSS樣式。光標(biāo)定位在banner層中，選擇“插入→圖像（image）”命令，打開(kāi)“選擇圖像源文件”對(duì)話框，選擇“images”文件夾中的01.gif，單擊“確定”按鈕。

在CSS設(shè)計(jì)器中，創(chuàng)建#banner樣式并設(shè)置屬性，如圖3-45所示；完善banner層后的“拆分”視圖如圖3-46所示。

圖3-46完善banner層后的“拆分”視圖具體操作：（5）在content層中插入圖片并編輯CSS樣式表。光標(biāo)定位在#content層中，選擇“插入→圖像（image）”命令，打開(kāi)“選擇圖像源文件”對(duì)話框，選擇“images”文件夾中的2.gif，單擊“確定”按鈕。在CSS設(shè)計(jì)器中，創(chuàng)建#content樣式并設(shè)置屬性，如圖3-47所示；完善content層后的“拆分”視圖如圖3-48所示。

圖3-47#content的屬性設(shè)置

圖3-48完善content層后的“拆分”視圖具體操作：（6）在footer層中設(shè)置背景圖像和文本，并編輯CSS樣式表。在CSS設(shè)計(jì)器中，創(chuàng)建#footer樣式并設(shè)置屬性，如圖3-49所示。

圖3-49#footer的屬性設(shè)置

圖3-50完善footer層后的“拆分”視圖具體操作：（7）光標(biāo)定位在footer層中，將text文件夾下的“精益求精.doc”文本內(nèi)容復(fù)制到footer層中。在CSS設(shè)計(jì)器中，創(chuàng)建#footerp樣式并設(shè)置屬性，如圖3-51所示。

圖3-51#footerp的屬性設(shè)置

圖3-52完善“footerp”的“拆分”視圖(8)保存文件，按F12預(yù)覽網(wǎng)頁(yè)效果。具體操作：(8)保存文件，按F12預(yù)覽網(wǎng)頁(yè)效果。CSS定位與Div布局此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

CSS+Div是網(wǎng)站標(biāo)準(zhǔn)（或簡(jiǎn)稱web標(biāo)準(zhǔn)）中常用的術(shù)語(yǔ)之一。Div只是HTML語(yǔ)言中的一個(gè)標(biāo)簽，而CSS是一種語(yǔ)言，通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中表格（table）定位方式的區(qū)別。因?yàn)樵赬HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用CSS+Div的方式實(shí)現(xiàn)各種定位。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處Div元素是一個(gè)塊級(jí)元素，也是用來(lái)插入各種網(wǎng)頁(yè)元素并能夠自由精確定位和容易控制的容器。（1）創(chuàng)建Div，有以下2種方法：?選擇菜單“插入-Div”，彈出“插入Div”對(duì)話框，插入位置可選擇在“在插入點(diǎn)”、“在標(biāo)簽選擇之前”和“在標(biāo)簽選擇之后”，如圖3-54所示。?選擇“插入”面板中的“html→Div”，同樣也會(huì)彈出如圖3-54所示的插入面板。如果不是新創(chuàng)建的Div，插入面板會(huì)如圖3-55所示。

圖3-54插入Div對(duì)話框

圖3-55插入Div對(duì)話框DIV-基本操作此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（2）選擇Div的方法?單擊Div的邊框線。?在“DOM”面板中單擊Div。?按下Shift鍵，分別單擊要選擇的各個(gè)Div的內(nèi)部或邊框線，可以選中多個(gè)Div。在“DOM”面板中還可以為Div命名并調(diào)整順序。

DIV-基本操作此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

在css設(shè)計(jì)器中的屬性面板中，可以為Div設(shè)置布局、文本、邊框和背景等屬性值，如圖3-56、圖3-57、圖3-58和圖3-59所示。圖3-56布局屬性設(shè)置

圖3-57文本屬性設(shè)置

圖3-58邊框?qū)傩栽O(shè)置

圖3-59背景屬性設(shè)置

DIV-屬性設(shè)置此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

一個(gè)盒子模型由content(內(nèi)容)、boder(邊框)、padding(間隙)和margin（間隔）等4個(gè)部分組成，如3-60所示。

一個(gè)盒子的實(shí)際寬度（或高度）是由content+boder+padding+margin組成的。在CSS中可以通過(guò)設(shè)定width和height的值來(lái)控制content的大小，并且對(duì)于任何一個(gè)盒子，都可以分別設(shè)定各自的boder、padding和margin。

圖3-60盒子模型

盒子模型此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）float定位：是CSS排版中非常重要的手段。屬性float的值很簡(jiǎn)單，可以設(shè)置為left、right或者默認(rèn)值none.當(dāng)設(shè)置了元素向左或者向右浮動(dòng)時(shí)，元素會(huì)向其父元素的左側(cè)或右側(cè)靠緊。（2）position定位：塊的位置，即塊相對(duì)于其父塊的位置和相對(duì)于它自身應(yīng)該在的位置。

position屬性共有6個(gè)值:

absolute:生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。

fixed:生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

relative:生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

static:默認(rèn)值。

inherit:規(guī)定應(yīng)該從父元素繼承position屬性的值。（3）z-index空間位置：用于調(diào)整定位時(shí)重疊塊的上下位置，與它的名稱一樣，想象頁(yè)面為x-y軸。垂直于頁(yè)面的方向?yàn)閦軸，z-index值打的頁(yè)面位于其值小的上方。

盒子模型此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）使用Div對(duì)頁(yè)面整體規(guī)劃

使用Div可以將頁(yè)面首先在整體上進(jìn)行<div>標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。這樣進(jìn)行<div>標(biāo)記過(guò)的頁(yè)面更新起來(lái)會(huì)十分容易，同時(shí)也可以通過(guò)修改CSS的屬性來(lái)重新定位。

CSS布局要求設(shè)計(jì)者首先對(duì)頁(yè)面有一個(gè)整體的框架規(guī)劃，包括整個(gè)頁(yè)面分為哪些模塊、各個(gè)模塊之間的父子關(guān)系如何等。以最簡(jiǎn)單的框架為例，頁(yè)面是由Banner、主題內(nèi)容（content）、菜單導(dǎo)航（links）和腳注（footer）等幾個(gè)部分組成，各個(gè)部分分別用自己的id來(lái)標(biāo)識(shí)，整體規(guī)劃如圖3-61所示。圖中的每個(gè)塊都是一個(gè)<div>,頁(yè)面中的所有Div塊都屬于塊#container,一般的Div布局都會(huì)在最外邊加上這么一個(gè)父Div,以便對(duì)頁(yè)面的整體進(jìn)行調(diào)整。對(duì)于每個(gè)Div塊，還可以再加入各種元素或者行內(nèi)元素。（2）設(shè)計(jì)各塊的位置當(dāng)頁(yè)面的內(nèi)容已經(jīng)確定后，則需要根據(jù)內(nèi)容本身來(lái)考慮整體的頁(yè)面版型，例如單欄、雙欄或左中右等。考慮到導(dǎo)航的易用性，我們用雙欄模式，如圖3-62所示。CSS+Div布局的常用方法任務(wù)描述

通過(guò)布局“數(shù)字未來(lái)”網(wǎng)頁(yè)，學(xué)會(huì)使用Flex布局頁(yè)面的方法和技巧。任務(wù)10數(shù)字未來(lái)

——Flex布局任務(wù)解析

在本任務(wù)中，需要完成以下操作：

?鞏固CSS+Div布局和美化網(wǎng)頁(yè)的方法和技巧。

?學(xué)會(huì)使用Flex布局和美化網(wǎng)頁(yè)的方法和技巧。具體操作：（1）頁(yè)面布局圖和各Div（塊）的關(guān)系，如圖3-62所示。

圖3-62頁(yè)面版型具體操作：（2）將素材中的renwu10文件夾復(fù)制到D盤(pán)根目錄。運(yùn)行DreamweaverCC，新建站點(diǎn)“數(shù)字未來(lái)”，站點(diǎn)文件夾為D:\renwu10，在站點(diǎn)根目錄下新建網(wǎng)頁(yè)文件index.html；打開(kāi)“頁(yè)面屬性”對(duì)話框，在“外觀（css）”分類(lèi)選項(xiàng)卡中設(shè)置背景顏色為#000，文本顏色為#FFF；頁(yè)面屬性設(shè)置如圖3-63所示。

圖3-63頁(yè)面屬性設(shè)置具體操作：（3）創(chuàng)建嵌套Div。打開(kāi)index.html，“插入→Div”,在DOM面板中輸入Div的名字“#wrapper”；光標(biāo)定位在“#wrapper”層中，再次選擇“插入→Div”，分別插入嵌套Div,“#banner”和“#main”；同樣的方法創(chuàng)建“#content”、“#img-list”嵌套Div，DOM面板如圖3-64所示。

圖3-64DOM面板具體操作：(4)在CSS設(shè)計(jì)器中分別定義wrapper層的樣式,設(shè)置寬為865px,左、右邊界為auto，如圖3-65、圖3-66所示。

圖3-65wrapper的寬度設(shè)置圖3-66wrapper的邊界設(shè)置具體操作：(5)在CSS設(shè)計(jì)器中定義banner層的樣式,并插入“images”文件夾中的圖像“1.jpg”，如圖3-67、圖3-68所示。

圖3-67banner的屬性設(shè)置

圖3-68設(shè)置好banner層后的“拆分”視圖具體操作：(6)在content層中輸入“數(shù)字未來(lái).doc”中的文本并編輯CSS樣式表,如圖3-69、圖3-70、圖3-71和圖3-72所示。

圖3-69content的布局屬性圖3-70content的文本屬性圖3-71content的邊框?qū)傩跃唧w操作：

圖3-72content的文本內(nèi)容及圓角設(shè)置具體操作：（7）在img-list層插入圖像及Flex布局樣式。光標(biāo)定位在img-list層中，插入“images”文件夾中的“2.jpg”、“3.jpg”、“4.png”和“5.jpg”四幅圖像，并設(shè)置四個(gè)圖像間隔平均分配的flex布局樣式，如圖3-73、圖3-74和圖3-75所示。

圖3-73content的flex布局屬性

圖3-74content的padding屬性圖

3-75content的flex布局屬性-兩端對(duì)齊，圖像之間間隔相等具體操作：

圖3-76img-list層的Flex布局樣式具體操作：(7)保存文件，按F12預(yù)覽網(wǎng)頁(yè)效果。

圖3-77index.html效果圖Flex布局此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

Flex是FlexibleBox的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。.box{display:flex;}行內(nèi)元素也可以使用Flex布局。.box{display:inline-flex;}注意：設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

采用Flex布局的元素，稱為Flex容器（flexcontainer），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flexitem），簡(jiǎn)稱"項(xiàng)目"。

圖3-78Flex容器

基本概念圖3-78Flex容器此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

（1）flex-direction屬性：決定主軸的方向（即項(xiàng)目的排列方向）。.box{flex-direction:column-reverse|column|row|row-reverse；}圖3-79flex-direction效果·column-reverse：主軸為垂直方向，起點(diǎn)在下沿?！olumn：主軸為垂直方向，起點(diǎn)在上沿?！ow（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端?！ow-reverse：主軸為水平方向，起點(diǎn)在右端。

容器的常用屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（2）flex-wrap屬性:默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上,flex-wrap屬性定義，如果一條軸線排不下，如何換行。.box{flex-wrap:nowrap|wrap|wrap-reverse;}

·nowrap（默認(rèn)）：不換行?！rap：換行，第一行在上方。

·wrap-reverse：換行，第一行在下方。

容器的常用屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（3）justify-content屬性：定義項(xiàng)目在主軸上的對(duì)齊方式。.box{justify-content:flex-start|flex-end|center|space-between|space-around；}具體對(duì)齊方式與軸的方向有關(guān),下面假設(shè)主軸為從左到右。

·flex-start（默認(rèn)值）：左對(duì)齊?！lex-end：右對(duì)齊。

·center：居中。

·space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等·space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

容器的常用屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（4）align-content屬性：定義多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch；}

·flex-start：與交叉軸的起點(diǎn)對(duì)齊·flex-end：與交叉軸的終點(diǎn)對(duì)齊

·center：與交叉軸的中點(diǎn)對(duì)齊·space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布·space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線·stretch（默認(rèn)值）：軸線占滿整個(gè)與邊框的間隔大一倍交叉軸

容器的常用屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）常用的圓角設(shè)計(jì)案例有以下兩種，如圖3-94、圖3-95所示。

圖3-94指定背景顏色的元素圓角圖3-95指定邊框的元素圓角

CSS圓角矩形此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（2）使用border-radius屬性，可以給任何元素制作“圓角”,CSS設(shè)計(jì)器屬性設(shè)置如圖3-96所示。

圖3-96border-radius屬性border-radius屬性中只指定一個(gè)值，將生成4個(gè)圓角；在四個(gè)角上一一指定，可以使用以下規(guī)則：·四個(gè)值:第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。·三個(gè)值:第一個(gè)值為左上角,第二個(gè)值為右上角和左下角，第三個(gè)值為右下角·兩個(gè)值:第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角·一個(gè)值：四個(gè)圓角值相同

CSS圓角矩形此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處①四個(gè)值border-radius:15px50px30px5px；②三個(gè)值border-radius:15px50px30px；③兩個(gè)值border-radius:15px50px；

CSS圓角矩形-三個(gè)實(shí)例模塊三結(jié)束DreamweaverCC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊4課件01模塊1網(wǎng)頁(yè)基礎(chǔ)知識(shí)03模塊3網(wǎng)頁(yè)布局05模塊5網(wǎng)站的測(cè)試與發(fā)布02模塊2初級(jí)應(yīng)用04模塊4高級(jí)應(yīng)用06模塊6綜合應(yīng)用任務(wù)描述

通過(guò)使用jQueryMobile技術(shù)建立一個(gè)jQueryMobile頁(yè)面，學(xué)會(huì)jQueryMobile元素的插入方法及屬性設(shè)置。任務(wù)11我的家鄉(xiāng)——建立jQueryMobile頁(yè)面任務(wù)解析

?創(chuàng)建jQueryMobile頁(yè)面；

?學(xué)會(huì)jQueryMobile列表視圖的插入方法及屬性設(shè)置；

?學(xué)會(huì)jQueryMobile滑塊的插入方法及屬性設(shè)置；

任務(wù)11效果圖具體操作：（1）啟動(dòng)DreamweaverCC，新建站點(diǎn)“我的家鄉(xiāng)”，網(wǎng)站文件夾為素材庫(kù)chapter4中的renwu11文件夾。（2）新建文件jq.html，在狀態(tài)欄中頁(yè)面大小處選擇移動(dòng)端頁(yè)面大小“iphone7plus”，如圖4-1所示。（3）創(chuàng)建jQueryMobile頁(yè)面。選擇“插入-jQueryMobile-頁(yè)面”命令插入jQueryMobile頁(yè)面，如圖4-2所示。

圖4-1選擇頁(yè)面大小圖4-2插入jQueryMobile頁(yè)面（4）在彈出的“jQueryMobile”對(duì)話框，如圖4-3所示，選擇連接類(lèi)型和CSS類(lèi)型，本任務(wù)以Dreamweaver自帶庫(kù)源為例，單擊確定后，系統(tǒng)彈出“頁(yè)面”對(duì)話框，如圖4-4所示，單擊“確定”按鈕。（5）“jQueryMobile”的安裝。可以從“jQueryMobile文件”對(duì)話框中更新jQueryMobile庫(kù)，也可以從CDN中載入jQueryMobile。（6）插入“jQueryMobile”頁(yè)面后，如圖4-5所示。

圖4-3“jQueryMobile文件”對(duì)話框

圖4-4“頁(yè)面”對(duì)話框

圖4-5jQueryMobile頁(yè)面（7）修改“jQueryMobile”頁(yè)面信息。①修改頭部。單擊jQueryMobile頭部，編輯標(biāo)題內(nèi)容為“我的家鄉(xiāng)”，如圖4-6所示。②修改內(nèi)容。單擊jQueryMobile內(nèi)容欄，單擊“插入-jQueryMobile-列表視圖”命令，“列表視圖”對(duì)話框如圖4-7所示，對(duì)列表選項(xiàng)進(jìn)行編輯，分別輸入文本：“地域文化、地方美食、過(guò)去未來(lái)和濃情親人”，如圖4-8所示。③修改底部。單擊jQueryMobile底部，單擊“插入-jQueryMobile-滑塊”命令，并編輯滑塊元素，如圖4-9所示。（8）按F12鍵保存并瀏覽網(wǎng)頁(yè)，在瀏覽器窗口顯示網(wǎng)頁(yè)jq.html，如圖4-10所示。

圖4-6修改jQueryMobile頭部圖4-7“列表視圖”對(duì)話框

圖4-8編輯“列表視圖”

圖4-9編輯“滑塊”元素圖4-10瀏覽試圖任務(wù)描述

通過(guò)使用jQueryMobile技術(shù)建立一個(gè)jQueryMobile頁(yè)面，學(xué)會(huì)jQueryMobile元素的插入方法及屬性設(shè)置。任務(wù)11我的家鄉(xiāng)——建立jQueryMobile頁(yè)面任務(wù)解析

?創(chuàng)建jQueryMobile頁(yè)面；

?學(xué)會(huì)jQueryMobile列表視圖的插入方法及屬性設(shè)置；

?學(xué)會(huì)jQueryMobile滑塊的插入方法及屬性設(shè)置；

任務(wù)11效果圖jQueryMobile此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

jQuery是DreamweaverCC制作手機(jī)瀏覽界面的主力插件。在DreamweaverCC中有兩個(gè)基于jQuery的子項(xiàng)目，分別是jQueryMobile和jQueryUI。其中jQueryMobile主要用于主題的設(shè)計(jì)、網(wǎng)頁(yè)的設(shè)計(jì)以及網(wǎng)頁(yè)中的換頁(yè)實(shí)踐等功能的設(shè)計(jì)，并為所有的主流移動(dòng)操作平臺(tái)提供了高度統(tǒng)一的接口。而jQueryUI主要用做制作用戶界面，如拖放、對(duì)話框、標(biāo)簽等功能的實(shí)現(xiàn)。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

頁(yè)面即移動(dòng)設(shè)備屏幕上看到的畫(huà)面，執(zhí)行“插入-jQueryMobile-頁(yè)面”命令，彈出“頁(yè)面”對(duì)話框，如圖4-11所示。

圖4-11“頁(yè)面”對(duì)話框頁(yè)面設(shè)置必須設(shè)置ID，默認(rèn)情況下包括三部分：頭部欄、內(nèi)容欄和底部欄，其中頭部欄和底部欄為可選項(xiàng)。頭部欄：一般包括頁(yè)面標(biāo)題或一兩個(gè)按鈕。內(nèi)容欄：定義頁(yè)面的內(nèi)容，如文本、圖像、表單和按鈕等。底部欄：比頭部欄靈活，樣式也與頭部欄不同，可以包含多個(gè)按鈕。

圖3-19表格的結(jié)構(gòu)

頁(yè)面jQueryMobile中的列表是標(biāo)準(zhǔn)的HTML列表，可以設(shè)定有序列表和無(wú)序列表。執(zhí)行“插入-jQueryMobile-列表視圖”命令，彈出“列表視圖”對(duì)話框，如圖4-12所示。

列表類(lèi)型：可以選擇有序列表和無(wú)序列表。項(xiàng)目：表示序列中添加幾個(gè)列表項(xiàng)。①凹入：表示項(xiàng)目四周自動(dòng)增加外邊距，樣式為圓角等。②文本說(shuō)明：添加一些對(duì)列表內(nèi)容的說(shuō)明性文字，使其更加豐富，顯示在左側(cè)。③文本氣泡：氣泡數(shù)字是用來(lái)顯示列表項(xiàng)相關(guān)的數(shù)字，有計(jì)數(shù)功能如郵箱的郵件的個(gè)數(shù)。④側(cè)邊：作為主要內(nèi)容的附屬信息部分，顯示在右上角。⑤拆分按鈕：在jQueryMobile的列表中,當(dāng)選項(xiàng)內(nèi)容需要做出兩種不同操作時(shí),會(huì)用到該選項(xiàng),其作用是對(duì)鏈接按鈕進(jìn)行分割。實(shí)現(xiàn)分割的方法是在<1i>元素中再增加一個(gè)<a>元素。分割后jQueryMobile會(huì)自動(dòng)設(shè)置第二個(gè)鏈接為藍(lán)色箭頭圖標(biāo),圖標(biāo)的鏈接文字將在用戶將鼠標(biāo)懸停在圖標(biāo)上時(shí)顯示。拆分按鈕圖標(biāo):當(dāng)“拆分按鈕”被選擇后,“拆分按鈕圖標(biāo)”才可選用,其作用是加按鈕的可視性。

列表視圖3.布局網(wǎng)格:jQueryMobile提供了一套樣式分列布局。但由于手機(jī)的屏幕寬度限制,一般不建議使用分欄分列布局。如果將較小的元素(如按鈕或?qū)Ш綐?biāo)簽)并列排序,則可以使用分列布局。4.可折疊塊:可折疊塊的作用是隱藏或顯示內(nèi)容,應(yīng)用于存儲(chǔ)部分信息。5.復(fù)選框:執(zhí)行“插入-jQueryMobile-復(fù)選框”命令,彈出“復(fù)選框”對(duì)話框,如圖4-13所示,有名稱、復(fù)選框個(gè)數(shù)及布局等選項(xiàng)。6.單選按鈕:執(zhí)行“插入-jQueryMobile-單選按鈕”命令,彈出“單選按鈕”對(duì)話框,圖4-14所示。

圖4-13“復(fù)選框”對(duì)話框

圖4-14“單選按鈕”對(duì)話框布局網(wǎng)格、可折疊塊、復(fù)選框和單選按鈕執(zhí)行“插入-jQueryMobile-按鈕”命令,彈出“按鈕”對(duì)話框,如圖4-15所示。①按鈕:添加按鈕的個(gè)數(shù)。②按鈕類(lèi)型：jQueryMobile中的按鈕可以通過(guò)以下3種辦法創(chuàng)建，如圖4-16所示。鏈接:<a>元素按鈕:<button>元素輸入:<input>元素jQueryMobile中的按鈕會(huì)自動(dòng)獲得樣式，而<input>或<button>元素用于表單提交。③輸人類(lèi)型：當(dāng)按鈕類(lèi)型為輸入時(shí)，輸入類(lèi)型被激活。jQueryMobile提供了4種類(lèi)型,如圖4-17所示。④位置:當(dāng)按鈕的個(gè)數(shù)大于1時(shí),位置按鈕被激活。默認(rèn)情況下,以“組”的形式垂直排列,因?yàn)閖QueryMobile按鈕都是塊級(jí)元素,所以個(gè)按鈕都填補(bǔ)了屏幕的寬度。如果位置選擇“組”,布局選“水平排列”時(shí),按鈕會(huì)橫向一個(gè)挨著一個(gè)地水平排列并設(shè)置按鈕的排列適應(yīng)內(nèi)容的寬度。位置選擇“內(nèi)聯(lián)”時(shí),布局不可選,多個(gè)按鈕會(huì)并列在同一行。⑤圖標(biāo):為按鈕添加圖標(biāo)。⑥圖標(biāo)位置:圖標(biāo)在按鈕中的位置。

圖4-16“按鈕”類(lèi)型

4-17輸入類(lèi)型按鈕圖4-15“按鈕”對(duì)話框8.滑塊從一定范圍的數(shù)字中選取值,滑塊樣式如圖4-18所示。9.翻轉(zhuǎn)切換開(kāi)關(guān)翻轉(zhuǎn)切換開(kāi)關(guān)常用于開(kāi)/關(guān)或?qū)?錯(cuò)按鈕。翻轉(zhuǎn)切換開(kāi)關(guān)樣式如圖4-19所示。

圖4-18滑塊樣式

圖4-19翻轉(zhuǎn)切換開(kāi)關(guān)滑塊、翻轉(zhuǎn)切換開(kāi)關(guān)任務(wù)描述

通過(guò)為“美麗中國(guó)”網(wǎng)站添加行為，實(shí)現(xiàn)網(wǎng)頁(yè)特效，了解行為的概念、組成及作用，學(xué)會(huì)彈出信息、交換圖像、打開(kāi)瀏覽器窗口、顯示/隱藏元素等行為的使用。任務(wù)12“美麗中國(guó)”

——行為的使用任務(wù)解析

?添加“彈出信息”行為；

?添加“交換圖像”行為；

?添加“顯示/漸隱”行為。具體操作：

（1）啟動(dòng)DreamweaverCC，新建站點(diǎn)“美麗中國(guó)”，網(wǎng)站文件夾為素材庫(kù)chapter4的renwu12文件夾，打開(kāi)網(wǎng)頁(yè)文件index.html。（2）選擇“窗口→行為”命令或按Shift+F4快捷鍵，打開(kāi)“行為”面板，如圖4-21所示。選中網(wǎng)頁(yè)中的圖像“發(fā)現(xiàn)雙創(chuàng)之星走進(jìn)上?！?，單擊“行為”面板上的“添加行為”按鈕，在彈出的菜單中選擇“彈出信息”命令，打開(kāi)“彈出信息”對(duì)話框，輸入文本“該圖片不能被下載！”，如圖4-22所示，單擊“確定”按鈕。

圖4-21“行為”面板圖4-22“彈出信息”對(duì)話框

（3）在“事件”列表中單擊默認(rèn)的事件，出現(xiàn)一個(gè)按鈕，單擊按鈕，在彈出的“事件”列表中選擇“OnClick”，如圖4-23所示。按Ctrl+S保存文件，按F12鍵瀏覽網(wǎng)頁(yè)，鼠標(biāo)單擊“發(fā)現(xiàn)雙創(chuàng)之星走進(jìn)上海”圖片時(shí)，彈出如圖4-24所示的消息框。

圖4-23選擇事件列表

圖4-24彈出消息框（4）選中圖片推薦欄下的圖像“美麗中國(guó)”，單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中選擇“交換圖像”命令，在彈出的“交換圖像”對(duì)話框中將images/19.jpg設(shè)置為交換圖像，勾選“鼠標(biāo)滑開(kāi)時(shí)恢復(fù)圖像”復(fù)選框，如圖4-25所示，單擊“確定”按鈕，系統(tǒng)將自動(dòng)生成“交換圖像”和“恢復(fù)交換圖像”2個(gè)行為，默認(rèn)的事件分別為“onMouseOver”和“onMouseOut”，如圖4-26所示。

圖4-25“交換圖像”對(duì)話框圖4-26交換圖像行為面板

（5）按F12鍵保存并瀏覽網(wǎng)頁(yè)，當(dāng)鼠標(biāo)指向圖片“美麗中國(guó)”時(shí)，圖像變換為19.jpg，如圖4-27和4-28所示，鼠標(biāo)離開(kāi)時(shí)又恢復(fù)到原來(lái)的圖像。

圖4-27交換前圖像效果

圖4-28交換后圖像效果圖

（6）選擇網(wǎng)頁(yè)上的banner圖片，單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中選擇“效果→blind”命令，打開(kāi)“blind”對(duì)話框，如圖4-29所示，通設(shè)置效果持續(xù)時(shí)間為5000毫秒，可見(jiàn)性為“hide”，方向?yàn)椤皍p”,單擊“確定”按鈕，設(shè)置“事件”為“Onclick”，按F12鍵保存并瀏覽網(wǎng)頁(yè)時(shí)，單擊banner圖片查看效果。

圖4-29“blind”對(duì)話框

圖4-30“scale”對(duì)話框（7）選擇網(wǎng)頁(yè)上的文字“城市展播”，單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中選擇“效果→scale”命令，打開(kāi)“scale”對(duì)話框，如圖4-30所示，通設(shè)置效果持續(xù)時(shí)間為5000毫秒，可見(jiàn)性為“hide”，方向?yàn)椤皍p”,單擊“確定”按鈕，設(shè)置“事件”為“Onclick”，按F12鍵保存并瀏覽網(wǎng)頁(yè)時(shí)，實(shí)現(xiàn)放大文字效果。添加行為此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

行為是Dreamweaver預(yù)置的JavaScript程序庫(kù)。每個(gè)行為包括一個(gè)動(dòng)作和一個(gè)事件，其中，事件是指引發(fā)動(dòng)作產(chǎn)生的條件，即觸發(fā)動(dòng)態(tài)效果的原因，例如鼠標(biāo)移到某對(duì)象上、單擊某對(duì)象等。動(dòng)作是指事件發(fā)生后計(jì)算機(jī)系統(tǒng)執(zhí)行的一個(gè)動(dòng)作，即最終完成的動(dòng)態(tài)效果，例如打開(kāi)瀏覽器窗口、彈出信息、播放聲音等。

Dreamweaver采用了“行為”面板來(lái)完成行為中動(dòng)作和事件的設(shè)置，從而實(shí)現(xiàn)動(dòng)態(tài)效果。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處單擊“窗口→行為”命令或按Shift+F4快捷鍵，可打開(kāi)“行為”面板，如圖4-31所示。?“顯示設(shè)置事件”按鈕：僅顯示附加到當(dāng)前文檔的那些事件?！帮@示設(shè)置事件”是默認(rèn)的視圖。?“顯示所有事件”按鈕：按字母順序顯示屬于特定類(lèi)別的所有事件，也包括網(wǎng)頁(yè)中已設(shè)置的事件，如圖4-33所示。

圖4-31“行為”面板

圖4-32顯示已設(shè)置事件圖4-33顯示所有事件?“添加行為”按鈕：?jiǎn)螕粼摪粹o，打開(kāi)動(dòng)作菜單，其中包括可附加到當(dāng)前所選元素的所有行為，當(dāng)從該菜單中選擇一個(gè)動(dòng)作時(shí)，將出現(xiàn)一個(gè)對(duì)話框，可指定附加動(dòng)作的相關(guān)參數(shù)。?“刪除事件”按鈕：?jiǎn)螕粼摪粹o，可從行為列表中刪除所選事件和動(dòng)作。?“增加/降低事件值”按鈕：可將特定事件的所選動(dòng)作在行為列表中向上或向下移動(dòng)。行為面板此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

要?jiǎng)?chuàng)建一個(gè)行為，首先要確定添加行為的對(duì)象，可以是圖像、熱點(diǎn)、超級(jí)鏈接文本、多媒體文件或者網(wǎng)頁(yè)本身等，然后指定一個(gè)動(dòng)作，最后再確定觸發(fā)該動(dòng)作的事件。（1）在頁(yè)面上選擇一個(gè)元素，例如一個(gè)圖像或一個(gè)鏈接。若要將行為附加到整個(gè)頁(yè)面，在“文檔”窗口左下角的標(biāo)簽選擇器中單擊<body>標(biāo)簽選中整個(gè)網(wǎng)頁(yè)。（2）選擇“窗口→行為”命令打開(kāi)“行為”面板，單擊“行為”面板上的“添加行為”按鈕，彈出動(dòng)作菜單，如圖4-34所示，從動(dòng)作菜單中選擇一種動(dòng)作，彈出相應(yīng)的參數(shù)設(shè)置對(duì)話框，進(jìn)行參數(shù)設(shè)置后，單擊“確定”按鈕。

圖4-34動(dòng)作菜單圖4-35事件列表（3）在“事件”列表中顯示動(dòng)作的默認(rèn)事件，單擊該事件名稱旁邊的按鈕，彈出一個(gè)下拉菜單，如圖4-35所示，其中包含可以觸發(fā)該動(dòng)作的所有事件，從該菜單中選擇一種事件。

添加行為此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

3．更改或刪除行為附加了行為之后，可以更改觸發(fā)動(dòng)作的事件、添加或刪除動(dòng)作以及更改動(dòng)作的參數(shù)。（1）選擇一個(gè)附加有行為的對(duì)象。（2）選擇“窗口→行為”命令，打開(kāi)“行為”面板。（3）可進(jìn)行以下更改操作：·若要編輯動(dòng)作的參數(shù)，雙擊動(dòng)作的名稱或?qū)⑵溥x中并按Enter，彈出參數(shù)設(shè)置對(duì)話框，進(jìn)行參數(shù)更改后，單擊“確定”按鈕。·若要更改給定事件的多個(gè)動(dòng)作順序，選擇某個(gè)動(dòng)作然后單擊“增加/降低事件值”按鈕或，或者選擇該動(dòng)作，將其剪切并粘貼到其它動(dòng)作之間的合適位置?！と粢?jiǎng)h除某個(gè)行為，將其選中然后單擊“刪除事件”按鈕或按Delete鍵。

更改或刪除行為此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

所謂動(dòng)作就是設(shè)定播放聲音、更換圖片、彈出警告消息框等特殊的JavaScript效果，在設(shè)定的事件發(fā)生時(shí)運(yùn)行該動(dòng)作。Dreamweaver中預(yù)設(shè)了二十多種動(dòng)作，下面介紹幾種常用的動(dòng)作。?交換圖像：通過(guò)更改“img”標(biāo)簽的“src”屬性將一個(gè)圖像和另一個(gè)圖像進(jìn)行交換。?恢復(fù)交換圖像：將最后一組交換的圖像恢復(fù)為它們以前的源文件。每次將“交換圖像”動(dòng)作附加到某個(gè)對(duì)象時(shí)都會(huì)自動(dòng)添加該動(dòng)作；如果在附加“交換圖像”時(shí)選擇了“恢復(fù)”選項(xiàng)，就不再需要手動(dòng)選擇“恢復(fù)交換圖像”動(dòng)作。?效果：為選中的對(duì)象添加增大/收縮、擠壓、顯示/隱藏、晃動(dòng)、滑動(dòng)、遮簾等效果。?彈出信息：可顯示一個(gè)帶有用戶指定信息的JavaScript警告框和一個(gè)“確定”按鈕，使用此動(dòng)作只能提供信息，而不能為用戶提供選擇。?打開(kāi)瀏覽器窗口：可在一個(gè)新的窗口中打開(kāi)URL，可指定新窗口的大小、特性和名稱。?改變屬性：可通過(guò)改變圖像、APDiv、表單等的某個(gè)屬性來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果，例如，層的背景顏色或圖像的寬或高。具體可更改哪個(gè)屬性由當(dāng)前選用的瀏覽器來(lái)決定。?設(shè)置文本：可用于設(shè)置框架文本、狀態(tài)欄文本和表單元素中的文本域文本。?預(yù)先載入圖像：用于將不立即顯示在網(wǎng)頁(yè)中的圖像預(yù)先載入瀏覽器緩存中，防止當(dāng)圖像顯示時(shí)由于下載而導(dǎo)致延遲。?檢查表單：可以為表單中各元素設(shè)置有效性規(guī)則，并檢查指定文本域的內(nèi)容以確保用戶輸入正確的數(shù)據(jù)類(lèi)型，防止表單提交到服務(wù)器后，文本域中包含無(wú)效的數(shù)據(jù)。?顯示/隱藏元素：顯示、隱藏或恢復(fù)一個(gè)或多個(gè)AP元素的默認(rèn)可見(jiàn)性。?調(diào)用JavaScript：發(fā)生事件時(shí)，調(diào)用特定的JavaScript函數(shù)。

動(dòng)作名稱及作用此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

事件用于指定選定的行為在何種情況下發(fā)生。例如想打開(kāi)網(wǎng)頁(yè)后立即播放音樂(lè)文件，則需要把事件指定為onLoad。下面介紹幾種常見(jiàn)的事件?！nLoad：載入對(duì)象時(shí)觸發(fā)?！nClick：鼠標(biāo)單擊時(shí)觸發(fā)?！nDblClick：鼠標(biāo)雙擊時(shí)觸發(fā)。·onMouseDown：按下鼠標(biāo)左鍵時(shí)觸發(fā)?！nMouseUp：鼠標(biāo)左鍵按下后釋放時(shí)觸發(fā)。·onMouseOver：鼠標(biāo)指針移到某對(duì)象時(shí)觸發(fā)?！nMouseMove：鼠標(biāo)移動(dòng)時(shí)觸發(fā)?！nMouseOut：鼠標(biāo)離開(kāi)某對(duì)象時(shí)觸發(fā)。·onKeyPress：當(dāng)鍵盤(pán)上某個(gè)鍵按下并且放開(kāi)時(shí)觸發(fā)?！nKeyDown：當(dāng)鍵盤(pán)上某個(gè)鍵按下時(shí)觸發(fā)?！nKeyUp：當(dāng)鍵盤(pán)上某個(gè)鍵松開(kāi)時(shí)觸發(fā)。

事件名稱及作用任務(wù)描述

通過(guò)使用模板快速布局“傳工匠精神，筑職業(yè)夢(mèng)想”網(wǎng)站，了解模板的概念及作用，學(xué)會(huì)模板文件的創(chuàng)建、可編輯區(qū)域的創(chuàng)建、模板的應(yīng)用、分離與更新等操作。任務(wù)13“傳工匠精神，筑職業(yè)夢(mèng)想”

——模板的應(yīng)用任務(wù)解析

?創(chuàng)建模板文檔；

?在模板中插入可編輯區(qū)域；

?使用模板新建網(wǎng)頁(yè)文件；

?將模板應(yīng)用于已有的網(wǎng)頁(yè)文件；

?使用模板快速更新網(wǎng)站。具體操作：（1）將素材庫(kù)chapter4中的renwu13文件夾復(fù)制到D盤(pán)根目錄下。啟動(dòng)DreamweaverCC，新建站點(diǎn)“傳工匠精神，筑職業(yè)夢(mèng)想”，站點(diǎn)文件夾為D:\renwu13。在“文件”面板中雙擊打開(kāi)站點(diǎn)文件夾中的index.html網(wǎng)頁(yè)文件，如圖4-36所示。（2）選擇“文件→另存為模板”命令，彈出“另存模板”對(duì)話框，如圖4-37所示，在“站點(diǎn)”框中選擇“傳工匠精神，筑職業(yè)夢(mèng)想”，在“另存為”框中輸入名稱index，單擊“保存”按鈕。系統(tǒng)將在站點(diǎn)根目錄中自動(dòng)創(chuàng)建名為templates的文件夾，并將模板文檔ymsh.dwt保存到該文件夾中，“文件”面板如圖4-38所示。

圖4-36index.html網(wǎng)頁(yè)文件

圖4-37“另存模板”對(duì)話框圖4-38“文件”面板具體操作：（3）打開(kāi)index.dwt模板文檔，將表格中第三行中的嵌套表格刪除，將光標(biāo)定位在第三行單元格中，選擇“插入→模板對(duì)象→可編輯區(qū)域”，彈出“新建可編輯區(qū)域”對(duì)話框，如圖4-39所示，采用默認(rèn)名稱框EditRegion3，單擊“確定”按鈕，即可在模板中插入一個(gè)可編輯區(qū)域，如圖4-40所示，保存并關(guān)閉模板文檔index.dwt。（4）選擇“文件→新建”命令，打開(kāi)“新建文檔”對(duì)話框，如圖4-41所示，在左邊欄中選擇“網(wǎng)站模板”，“站點(diǎn)”列表中選擇“傳工匠精神，筑職業(yè)夢(mèng)想”，“模板”列表中選中index模板，單擊“創(chuàng)建”按鈕，即可創(chuàng)建一個(gè)基于該模板的新文檔。

圖4-39“新建可編輯區(qū)域”對(duì)話框圖4-40插入可編輯區(qū)域的模板

圖4-41“新建文檔”對(duì)話框具體操作：（5）將光標(biāo)定位到可編輯區(qū)域中，刪除其中的區(qū)域名稱，選擇“插入→圖像”命令，在彈出的“選擇圖像源文件”對(duì)話框中選擇images/2.jpg，單擊“確定”按鈕，結(jié)果如圖4-42所示，以wy1.html為名進(jìn)行保存并關(guān)閉文檔。（6）以同樣的方式創(chuàng)建wy2.html和wy3.html文件，在可編輯區(qū)域中分別插入images文件夾中的3.jpg和4.jpg，如圖4-43、4-44所示。

圖4-42wy1.html文檔

圖4-43wy2.html文檔

圖4-44wy3.html文檔具體操作：（7）打開(kāi)wy4.html，選擇“工具→模板→應(yīng)用模板到頁(yè)”命令，彈出“選擇模板”對(duì)話框，如圖4-45所示，在“站點(diǎn)”下拉列表中選擇“傳工匠精神，筑職業(yè)夢(mèng)想”，在“模板”列表中選擇index，單擊“選定”按鈕，彈出“不一致的區(qū)域名稱”對(duì)話框，如圖4-46示。選擇“Documentbody<未解析>”，在“將內(nèi)容移到新區(qū)域”列表中選擇可編輯區(qū)域，選擇“Documenthead<未解析>”，在“將內(nèi)容移到新區(qū)域”列表中選擇“head”，單擊“確定”按鈕。（8）此時(shí)模板文檔index