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

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