《Web應(yīng)用開(kāi)發(fā)》課件-01 個(gè)人網(wǎng)頁(yè)

本章簡(jiǎn)介：個(gè)人網(wǎng)頁(yè)是許多初學(xué)網(wǎng)頁(yè)制作的讀者非常感性興趣的話題。它是各人根據(jù)自己的愛(ài)好，自由制作出來(lái)的網(wǎng)站。對(duì)網(wǎng)站設(shè)計(jì)初學(xué)者來(lái)說(shuō)，制作個(gè)人網(wǎng)站無(wú)疑是一件今人愉悅的事情。個(gè)人網(wǎng)站通常在結(jié)構(gòu)、內(nèi)容上都比較簡(jiǎn)單、隨意。本章以多個(gè)類(lèi)型的個(gè)人網(wǎng)頁(yè)為例，講解個(gè)人網(wǎng)頁(yè)的設(shè)計(jì)方法和制作技巧。第13章個(gè)人網(wǎng)頁(yè)課堂學(xué)習(xí)目標(biāo)了解個(gè)人網(wǎng)頁(yè)的特色和功能掌握個(gè)人網(wǎng)頁(yè)的設(shè)計(jì)流程掌握個(gè)人網(wǎng)頁(yè)的設(shè)計(jì)思路和布局掌握個(gè)人網(wǎng)頁(yè)的制作方法13.1個(gè)人網(wǎng)頁(yè)概述個(gè)人網(wǎng)站是指?jìng)€(gè)人或團(tuán)體因某種興趣、擁有某種專業(yè)技術(shù)、提供某種服務(wù)或把自己的作品、商品展示銷(xiāo)售而制作的具有獨(dú)立空間域名的網(wǎng)站。網(wǎng)站內(nèi)容強(qiáng)調(diào)以個(gè)人信息為中心。個(gè)人網(wǎng)站包括博客、個(gè)人論壇、個(gè)人主頁(yè)等，網(wǎng)絡(luò)的發(fā)展趨勢(shì)就是向個(gè)人網(wǎng)站發(fā)展。13.2妞妞的個(gè)人網(wǎng)頁(yè)案例分析案例設(shè)計(jì)案例制作案例分析妞妞是個(gè)快樂(lè)活潑的小女孩，她的個(gè)人網(wǎng)頁(yè)主要表現(xiàn)的是她成長(zhǎng)中的點(diǎn)點(diǎn)滴滴，這其中有生動(dòng)的個(gè)人記錄，可愛(ài)的生活照片等。通過(guò)個(gè)人網(wǎng)頁(yè)可以表現(xiàn)出妞妞的快樂(lè)童年和精彩生活。在網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程中，使用藍(lán)天、白云和星球作為背景，給人天高云闊、自然閑適的印象。懸浮在空中的頁(yè)面主體與云朵有異曲同工之妙，在突出孩子天真活潑個(gè)性的同時(shí)，體現(xiàn)出孩子無(wú)限的想象空間和天馬行空的童年生活。路標(biāo)式導(dǎo)航欄、卡通游樂(lè)園、自由活潑的人物圖像組合成一幅快樂(lè)幸福的網(wǎng)站畫(huà)面，生動(dòng)活潑且讓人印象深刻。案例設(shè)計(jì)本例將使用表格布局網(wǎng)頁(yè)，使用頁(yè)面屬性命令改變網(wǎng)頁(yè)的字體、大小、顏色、邊距和頁(yè)面標(biāo)題，使用CSS樣式命令設(shè)置單元格的背景圖像及文字的顏色大小和行距的顯示，使用屬性面板改變單元格的寬度及高度。效果圖13.3李明個(gè)人網(wǎng)站案例分析案例設(shè)計(jì)案例制作李明是個(gè)喜歡接近自然、熱愛(ài)生活的男孩，他希望自己的個(gè)人網(wǎng)頁(yè)充滿自然舒適感。網(wǎng)頁(yè)設(shè)計(jì)上要針對(duì)自己的愛(ài)好和專業(yè)特長(zhǎng)，按自己的想法來(lái)收集資料和制作網(wǎng)頁(yè)。網(wǎng)頁(yè)的風(fēng)格要現(xiàn)代時(shí)尚，能感受到自由和創(chuàng)造的力量。在網(wǎng)頁(yè)設(shè)計(jì)制作的過(guò)程中，藍(lán)灰的色調(diào)給人溫柔平和、成熟可靠的印象。不同的風(fēng)景照片和排列方式在將頁(yè)面分割的同時(shí)，簡(jiǎn)潔直觀的展現(xiàn)出李明的愛(ài)好和專業(yè)特長(zhǎng)，讓人一目了然。上方的導(dǎo)航欄簡(jiǎn)單實(shí)用，方便瀏覽。整個(gè)頁(yè)面簡(jiǎn)潔時(shí)尚、個(gè)性突出。案例分析本例將使用頁(yè)面屬性設(shè)置文檔的頁(yè)邊距和頁(yè)面標(biāo)題。使用屬性面板設(shè)置單元格和文字顏色制作導(dǎo)航效果。使用CSS樣式設(shè)置文字的顏色及行距。使用手動(dòng)輸入代碼設(shè)置圖片的間距。效果圖案例設(shè)計(jì)13.4美琪的個(gè)人網(wǎng)頁(yè)案例分析案例設(shè)計(jì)案例制作美琪是一個(gè)快樂(lè)活潑的女孩，她希望自己的個(gè)人網(wǎng)頁(yè)充滿青春和活力感。網(wǎng)頁(yè)設(shè)計(jì)上要現(xiàn)代時(shí)尚，以體現(xiàn)青年人的個(gè)性和特色。在網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程中，自然閑適的背景起到襯托的作用，突出前方的頁(yè)面主體。青春活潑的寫(xiě)真照片及簡(jiǎn)單的個(gè)人資料展示，給人直觀率真、活潑個(gè)性的印象，讓人一目了然。整個(gè)頁(yè)面表現(xiàn)出年青人追求自我的個(gè)性風(fēng)格。案例分析本例將使用頁(yè)面屬性命令修改頁(yè)面的頁(yè)邊距和頁(yè)面標(biāo)題，使用屬性面板設(shè)置單元格寬度和高度，使用CSS樣式制作表格背景和文字的行距效果。效果圖案例設(shè)計(jì)課堂練習(xí)—娟娟的個(gè)人網(wǎng)站使用“頁(yè)面屬性”命令，設(shè)置背景顏色、頁(yè)面邊距和文字顏色大??；使用“屬性”面板，改變單元格的高度和寬度；使用“CSS樣式”命令，設(shè)置單元格的背景圖像。效果圖課后習(xí)題—李梅的個(gè)人網(wǎng)頁(yè)使用“屬性”面板，設(shè)置單元