網(wǎng)頁設(shè)計(jì)與美工 省賽獲獎(jiǎng)

>>2023/6/18項(xiàng)目十一APDiv的應(yīng)用2023/6/18項(xiàng)目導(dǎo)入周揚(yáng)加入了學(xué)校的美食社團(tuán)，美食社團(tuán)準(zhǔn)備創(chuàng)建一個(gè)介紹中國八大菜系的網(wǎng)站，考慮到美味的宣傳要占用太量的頁面位置，周揚(yáng)決定使用APDiv來布局網(wǎng)頁，向同學(xué)們介紹中國八大菜系的各種美食。項(xiàng)目導(dǎo)入2023/6/18任務(wù)分析1首先，周揚(yáng)想要制作一個(gè)主頁來顯示我國八大菜系的圖片，如圖11-1-1所示。然后再分別制作介紹八大菜系的網(wǎng)頁，其中川菜網(wǎng)頁如圖11-1-2所示。最后通過主頁中的文字與相應(yīng)的菜系介紹網(wǎng)頁鏈接，網(wǎng)頁將利用APDiv進(jìn)行綜合布局，展現(xiàn)中國八大菜系的風(fēng)采和韻味。在制作的過程中，周揚(yáng)將學(xué)習(xí)到：（1）什么是APDiv；（2）繪制APDiv的方法；（3）利用APDiv布局網(wǎng)頁的方法。任務(wù)分析圖11-1-1美食團(tuán)主頁效果圖任務(wù)分析2023/6/18圖11-1-2川菜網(wǎng)頁效果圖2023/6/18相關(guān)知識11．APDiv概述網(wǎng)頁中的絕對定位元素APDiv也被稱為層，是用來精確控制瀏覽器窗口中對象位置的HTML元素，APDiv內(nèi)可以放置文本、圖像等其他可以在HTML文檔中插入的網(wǎng)頁對象。2.APDiv元素首選參數(shù)單擊菜單欄中的“編輯”→“首選參數(shù)”命令，打開“首選參數(shù)”對話框，如圖11-1-3所示。首選參數(shù)用于定義APDiv元素的顯示、寬、高、背景顏色、背景圖像、嵌套等參數(shù)。相關(guān)知識圖11-1-3APDiv首選參數(shù)3．單個(gè)APDiv元素的屬性面板，如圖11-1-4。選項(xiàng)功能如下：（1）“CSS-P元素”：為選擇的APDiv元素指定ID。每個(gè)APDiv必須有唯一的ID。（2）“左、上”：用于指定APDiv元素的位置。（3）“寬、高”：設(shè)定APDiv元素的大小。（4）“Z軸”：設(shè)置APDiv元素的疊放順序，在瀏覽器中，編號大的APDiv元素出現(xiàn)在編號小的APDiv元素前面。（5）“可見性”：指定APDiv元素是否可見，有四個(gè)選項(xiàng)可用。（6）“類”：設(shè)置APDiv元素的CSS類。相關(guān)知識2023/6/18圖11-1-4單個(gè)APDiv屬性面板4．多個(gè)APDiv屬性面板，如圖11-1-5。（1）大部分選項(xiàng)與單個(gè)APDiv屬性面板的項(xiàng)目相同。（2）“標(biāo)簽”：定義所選APDiv元素的HTML標(biāo)簽。相關(guān)知識2023/6/18圖11-1-5多個(gè)APDiv屬性面板2023/6/18任務(wù)實(shí)施1Step1.建立站點(diǎn)并新建網(wǎng)頁

Step2.創(chuàng)建菜系介紹網(wǎng)頁

任務(wù)實(shí)施2023/6/18學(xué)習(xí)評價(jià)1學(xué)習(xí)評價(jià)序號評價(jià)指標(biāo)自我評價(jià)1能夠創(chuàng)建網(wǎng)站根目錄及子文件夾，新建index.html網(wǎng)頁。（5分）

2能夠在index.html網(wǎng)頁中繪制一個(gè)APDiv元素，插入標(biāo)題圖片。（10分）

3能夠在index.html網(wǎng)頁中繪制一個(gè)APDiv元素，插入表格、圖片及文字。（15分）

4能夠在index.html網(wǎng)頁中繪制一個(gè)APDiv元素，插入底部圖片。（5分）

5能夠?qū)ndex.html網(wǎng)頁另存為cuancai.html，刪除標(biāo)題圖片，輸入文字，重新設(shè)置APDiv元素（ID為apDiv1）的屬性。（5分）

6能夠?qū)⒈砀駝h除，輸入介紹川菜的文字，重新設(shè)置APDiv元素（ID為apDiv2）的屬性。（10分）

7能夠重新設(shè)置APDiv元素（ID為apDiv3）的屬性。（5分）

8能夠繪制APDiv元素（ID為apDiv4），設(shè)置屬性，建立鏈接。（10分）

9能夠完成其余網(wǎng)頁的制作，建立與主頁文字的鏈接。（15分）

10能夠獨(dú)立完成任務(wù)（10分）

11學(xué)有余力，對小組內(nèi)其他同學(xué)進(jìn)行過輔導(dǎo)。（10分）

2023/6/18任務(wù)分析2完成了網(wǎng)站主頁和介紹八大菜系的網(wǎng)頁的制作后，周揚(yáng)又利用APDiv進(jìn)行綜合布局，制作了一個(gè)美食網(wǎng)的歡迎網(wǎng)頁，如圖11-2-1所示。在制作網(wǎng)頁的過程中，周揚(yáng)還利用Photoshop對圖像進(jìn)行了處理，制作了精美的素材，使網(wǎng)頁更加漂亮了。在這個(gè)過程中，周揚(yáng)將會(huì)學(xué)到：（1）APDiv的屬性設(shè)置；（2）使用APDiv布局網(wǎng)頁；（3）Photoshop圖層的應(yīng)用。任務(wù)分析圖11-2-1歡迎網(wǎng)頁效果圖任務(wù)分析2023/6/182023/6/18相關(guān)知識21．Photoshop圖層面板相關(guān)知識圖11-2-2圖層面板2．APDiv元素與表格的轉(zhuǎn)換（1）“將APDiv轉(zhuǎn)換為表格”對話框，如圖11-2-3。選項(xiàng)的作用：①“最精確”：若APDiv元素之間存在間隙，則通過插入單元格來填充這些間隙。②“最?。汉喜⒖瞻讍卧保簩⒁欢ň嚯x以內(nèi)的APDiv元素創(chuàng)建為相鄰的單元格，即融合其間的間隙。③“使用透明GIFs”：將轉(zhuǎn)換后表格的最后一行填充為透明的GIF圖像。④“置于頁面中央”：生成的表格在頁面居中位置。⑤“防止重疊”：可以防止APDiv元素重疊。⑥“顯示AP元素面板”：在轉(zhuǎn)換完成后會(huì)顯示AP元素面板。⑦“顯示網(wǎng)格”：可以在轉(zhuǎn)換后的文檔中顯示網(wǎng)格線。⑧“靠齊到網(wǎng)格”：可以將轉(zhuǎn)換后的文檔靠齊到網(wǎng)格。相關(guān)知識2023/6/18圖11-2-3將APDiv轉(zhuǎn)換為表格對話框相關(guān)知識2023/6/18（2）“將表格轉(zhuǎn)換為APDiv”對話框，如圖11-2-4。各選項(xiàng)的作用：①“防止重疊”：可以防止APDiv元素重疊。②“顯示AP元素面板”：在轉(zhuǎn)換完成后會(huì)顯示AP元素面板。③“顯示網(wǎng)格”：可以在轉(zhuǎn)換后的文檔中顯示網(wǎng)格線。④“靠齊到網(wǎng)格”：可以將轉(zhuǎn)換后的文檔靠齊到網(wǎng)格。相關(guān)知識2023/6/18圖11-2-4將表格轉(zhuǎn)換為APDiv對話框2023/6/18任務(wù)實(shí)施2Step1.使用Photoshop圖層樣式制作文字效果

Step2.利用APDiv元素布局網(wǎng)頁

任務(wù)實(shí)施2023/6/18學(xué)習(xí)評價(jià)2學(xué)習(xí)評價(jià)序號評價(jià)指標(biāo)自我評價(jià)1能夠使用Photoshop的圖層及圖層樣式編輯圖像素材。（20分）

2能夠繪制apDiv1-apDiv4，并為其設(shè)置屬性。（10分）

3能夠繪制apDiv5-apDiv12，并為其設(shè)置屬性。（15分）

4能夠在apDiv1及apDiv5-apDiv12中插入圖像。（15分）

5能夠在apDiv3中輸入文字并完成相應(yīng)的設(shè)置。（10分）

6能夠在apDiv4中插入圖像。（5分）

7能夠保存并預(yù)覽網(wǎng)頁（5）分

8能夠獨(dú)立完成任務(wù)（10分）

9學(xué)有余力，對小組內(nèi)其他同學(xué)進(jìn)行過輔導(dǎo)。（10分）

2023/6/18項(xiàng)目總結(jié)1．APDiv元素的創(chuàng)建與編輯。2．利用APDiv元素布局網(wǎng)頁。3．學(xué)習(xí)了Photoshop圖層的應(yīng)用。項(xiàng)目總結(jié)

通過學(xué)習(xí)項(xiàng)目11中周揚(yáng)制作網(wǎng)站的方法，3-5人組成一個(gè)項(xiàng)目小組，制作一個(gè)網(wǎng)站。具體要求：1．項(xiàng)目組內(nèi)要選出一名組長負(fù)責(zé)組織、協(xié)調(diào)，通過小組討論，制定出評價(jià)量規(guī)，對小組成員進(jìn)行評價(jià)，小組內(nèi)各成員要有具體明確的分工。2．網(wǎng)頁素材可以通過手機(jī)、數(shù)碼相機(jī)進(jìn)行拍攝或從網(wǎng)上下載。3．利用Photoshop對素材進(jìn)行剪切、添加文字等操作，制作網(wǎng)頁所需的素材。