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

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