靜態網頁設計課程 任務書 A-個人主頁設計

一、任務目的 

該課程使學生熟練掌握網頁編輯過程,綜合應用所學的知識,熟練使用 HTML 標記和 HTML5 新增元素，進行網頁制作。

二、任務要求 

網頁制作要合理布局頁面，使用相應的頁面標記添加頁面內容，使頁面內容豐富，結構合理，布局美觀。

三、任務內容 

設計個人主頁，頁面中結構要完整，布局合理，具體要求如下：

1.頁面布局

使用表格對頁面進行整體布局。本網站包括：“我的主頁(index.html)”、“我的愛好(favorite.html)”、“我的相冊(photo.html)”、“我的資料(information.html)”，共 4 個頁面。

2.四個頁面的頭部、導航及底部樣式相同，網頁頭部放置自己的頭像，文字添加“某某某的個人主頁”（某某某為自己的姓名），表頭右側寫自己喜歡的格言或個性簽名。導航欄放置在頁面的左側，當前是哪個頁面對應導航欄有背景及文字顏色的變化。每個頁面的導航需正確鏈接到相應的頁面。網頁的正文部分設置背景圖片。網頁底部書寫版權信息，文字為“班級+學號+姓名”。

3.“我的主頁”(index.html)網頁正文部分要求添加文字，包括專業、班級、姓名。要求：最少寫兩個自然段介紹自己的個人主頁，首行空兩個文字距離。網頁效果如下圖所示。

4.“我的愛好”(favorite.html)網頁中書寫自己的至少三個愛好，并對自己的每個愛好用一個段落進行介紹。段落首行空兩個文字距離。愛好需與“我的資料”頁面中我的愛好的選項一致。網頁效果如下圖所示。

5.“我的相冊”(photo.html)頁面中至少添加三張自己的照片，合理設置照片的尺寸及間距，實現鼠標放到照片上顯示照片信息。網頁效果如下圖所示。

6.“我的資料”(information.html)頁面中的核心是一個表單，用于填寫個人信息。表單包含單選按鈕、復選框、菜單、文件域、提交按鈕等控件。實現對姓名、性別、我的愛好、我的家鄉、上傳頭像的信息收集。表單的發送地址為郵箱：abc@163.com。網頁效果如下圖所示。

7.其他要求

首先創建站點文件夾，然后再創建每一個網頁。站點中用的所有文件，包括網頁、圖像、音樂、動畫等都必須放置在站點文件夾中。

網站的首頁文件名應保存為“index.html”或“index.htm”，這是一般服務器默認搜索的站點首頁文件名。

所給網頁效果圖僅為范例，網頁中除以上具體要求外，所有的文字內容、背景顏色、背景圖片、文字顏色、字體、按鈕樣式等自己任意指定。

要求整體結構布局合理，顏色統一美觀，超鏈接能正確實現各個頁面之間的跳轉。

網頁作業制作成品可參考 http://www.longluwan.com/html/geren/515.html