鄭州輕工業(yè)學(xué)院課 程 設(shè) 計(jì) 任 務(wù) 書題目 個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 院系 XXX XXX XXX X

鄭州輕工業(yè)學(xué)院

課 程 設(shè) 計(jì) 任 務(wù) 書

題目 個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 院系 XXX XXX XXX X 專業(yè)班級 XXX XXX XXX X 學(xué)號 XXX XXX XXX X 姓名 XXX

主要內(nèi)容：

利用所學(xué)內(nèi)容，設(shè)計(jì)個(gè)人網(wǎng)站

基本要求：

本系統(tǒng)制作一個(gè)個(gè)人網(wǎng)站，要求個(gè)人網(wǎng)站主題設(shè)計(jì)思想明確、思路清晰、顏色選擇恰當(dāng)、布局合理；多媒體（圖像、音樂、滾動(dòng)字幕）運(yùn)用適當(dāng)；Flash 、框架運(yùn)用合適；適當(dāng)使用樣式頁（CSS ）等。

主要參考資料等：

《Web 設(shè)計(jì)基礎(chǔ)》 李開榮 高等教育出版社 2008

《網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)》張兵義 電子工業(yè)出版社 2008

《Web 編程技術(shù)》歷小軍 機(jī)械工業(yè)出版社 2009

完 成 期 限： 一周

指導(dǎo)教師簽名：

課程負(fù)責(zé)人簽名：

2010年 5 月 日

1

目錄

一、引言 . .......................................................................... 錯(cuò)誤！未定義書簽。

1.1課題的背景 . ........................................................ 錯(cuò)誤！未定義書簽。

1.2可行性研究 . ........................................................ 錯(cuò)誤！未定義書簽。

二、需求分析 . .................................................................. 錯(cuò)誤！未定義書簽。

2.1系統(tǒng)概述： . ........................................................ 錯(cuò)誤！未定義書簽。

2.2功能要求： . .......................................................................................... 1

三、總體設(shè)計(jì) . .................................................................. 錯(cuò)誤！未定義書簽。

3.1功能設(shè)計(jì) . .............................................................................................. 3

3.2界面設(shè)計(jì) . .............................................................................................. 4

四．詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) . ...................................................... 錯(cuò)誤！未定義書簽。

六、結(jié)語 . .......................................................................................................... 24

1

個(gè)人網(wǎng)頁設(shè)計(jì)和實(shí)現(xiàn)

一、 引言

1.1 課題的背景 經(jīng)過本學(xué)期對web 設(shè)計(jì)基礎(chǔ)這門課程的學(xué)習(xí)，對web 的設(shè)計(jì)以及相關(guān)代碼的使用有了深入的了解，在學(xué)期末制作主題為個(gè)人主頁的網(wǎng)頁，對其設(shè)計(jì)并實(shí)現(xiàn)。

1.2 可行性研究 經(jīng)過考慮對制作工具的篩選，決定用Dreamweaver 做個(gè)人網(wǎng)頁，Photoshop 為輔助工具，設(shè)計(jì)和制作圖片、頁面及圖標(biāo)等。

本網(wǎng)站是以靜態(tài)網(wǎng)頁為基礎(chǔ)，以Dreamweaver 為制作軟件、以Photoshop 為設(shè)計(jì)軟件而成的。通過這個(gè)學(xué)期對網(wǎng)頁制作代碼相關(guān)的學(xué)習(xí)以及之前對這些軟件的了解，制作出相對簡單的個(gè)人網(wǎng)頁，展示自己相關(guān)的一些東西； 本網(wǎng)站內(nèi)容充實(shí)， 在主頁的設(shè)計(jì)上運(yùn)用了模板，框架等。分頁面上運(yùn)用了導(dǎo)航條。插入了動(dòng)態(tài)圖片以及視頻等給網(wǎng)增加了美觀度，在首頁的設(shè)計(jì)上本著簡單易懂的原則，用戶只要點(diǎn)擊鏈接就能看到自己想看到的連接內(nèi)容。網(wǎng)站的首頁設(shè)置了背景音樂，使訪問者在瀏覽的同時(shí)還能欣賞到悠揚(yáng)的旋律。

二、 需求分析

2.1 系統(tǒng)概述

一個(gè)具有個(gè)性的個(gè)人網(wǎng)站，是讓別人對你進(jìn)行了解，與別人溝通的更好途徑，本文研究的是這次個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)。能讓人通過本網(wǎng)站可以清晰地了解到我的一些信息。

運(yùn)用Windows XP Dreamweaver8 PS 的網(wǎng)站設(shè)計(jì)制作環(huán)境，設(shè)計(jì)出神秘、活力的暗色與絢麗特效的網(wǎng)頁特色。

2.2 功能要求

實(shí)現(xiàn)鏈接、滾動(dòng)字幕或圖片、插入音頻、視頻等插件的功能；

三、 總體設(shè)計(jì)

運(yùn)用Dreamweaver 的框架功能；圍繞關(guān)于我自己的一些相關(guān)信息進(jìn)行分類，實(shí)現(xiàn)分類的鏈接進(jìn)行制作；并且要注重網(wǎng)頁的一體化，美感，還有色彩的搭配，音樂的選取等；

1

3.1 功能設(shè)計(jì)： 利用框架（選取了左右下的框架結(jié)構(gòu)）設(shè)置基本模樣。左邊框架作為導(dǎo)航欄，下邊的部分作為滾動(dòng)圖片欄；右上方一大部分作為各個(gè)子網(wǎng)頁的瀏覽區(qū)；在導(dǎo)航欄插入了音樂，以便放入的音樂不會(huì)隨著鏈接的進(jìn)入而消失，增添了網(wǎng)頁的趣味性；

導(dǎo)航欄包括共：我的檔案，我的日志，我的班級，我的寵物，視頻欣賞五項(xiàng)，分別鏈接到各個(gè)子頁面；在導(dǎo)航區(qū)的最下方還設(shè)置有返回歡迎頁面的鏈接；并且設(shè)置導(dǎo)航區(qū)的背景、顏色、插入動(dòng)態(tài)圖片等。

3.2 界面設(shè)計(jì)：

本網(wǎng)頁頁面風(fēng)格為暗色系，以黑色為主色其他色系進(jìn)行搭配進(jìn)行制作。 index_my web：主模塊（右上層模塊）添加制作的動(dòng)態(tài)歡迎圖片：歡迎來到小小寒的主頁（動(dòng)態(tài)）；左側(cè)導(dǎo)航欄目分布了各個(gè)子頁面的鏈接，點(diǎn)擊即可進(jìn)入各個(gè)子頁面；右下方的模塊放置我的圖片，并且運(yùn)動(dòng)代碼實(shí)現(xiàn)滾動(dòng)功能；

由導(dǎo)航欄分別可以進(jìn)入以下子頁面：

我的檔案：主要介紹了我的一些基本情況，愛好及性格特征等等； 我的日志：選了一篇自己喜歡的寫過的文章供大家閱讀；

我的寵物：展示了我的寵物小狗貝貝的一些東西，我養(yǎng)狗的一些感受等； 我的班級：介紹了我的班級的基本情況；

視頻欣賞：摘選了一個(gè)搞笑flash 給大家娛樂；

以上五個(gè)分頁面風(fēng)格與整體保持一致，莊重而不失色彩；

四、 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

1、創(chuàng)建網(wǎng)頁頁面：

（1）新建站點(diǎn)：

1

如圖建立新站點(diǎn)，設(shè)置好各個(gè)選項(xiàng)，一般靜態(tài)網(wǎng)頁不用連接到網(wǎng)絡(luò)，設(shè)置不用做太多修改，只需要設(shè)定好名稱及文件夾位置即可。

（2）新建網(wǎng)頁：

如圖，選擇創(chuàng)建新項(xiàng)目的HTML ，或者選擇模板建立；創(chuàng)建好六個(gè)頁面，分別保存名稱為：index ，我的檔案，我的日志，我的班級，我的寵物，視頻欣賞；

2、打開頁面，選擇布局模式，使用左右下模板，保存主頁面標(biāo)題為index.html, 標(biāo)題改為“我的主頁”；試運(yùn)行，保存兩個(gè)框架；

在左層模塊添加插件音樂，并縮小插件；（如圖1）

設(shè)置導(dǎo)航欄，為每個(gè)分類的文字添加鏈接，將文字添加鏈接到“我的檔案”等各個(gè)子分頁，并且分頁鏈接目標(biāo)選擇mainframe （如圖2）：

圖1：

1

圖2：

在mainframe 中插入自己在Photoshop 中制作的動(dòng)態(tài)歡迎圖片，添加到layer1中可以調(diào)試位置；

在下方框架中插入各種照片，運(yùn)動(dòng)滾動(dòng)效果的代碼實(shí)現(xiàn)其功能；

為了美化在各個(gè)模塊中背景插入了相框，條紋等動(dòng)態(tài)閃動(dòng)圖片；讓視覺效果更震撼； 圖一頁面代碼如下：

我的檔案

我的日志

我的班級

我的寵物

視頻欣賞

1 text-decoration: none; color: #F4F4F4; text-decoration: none; color: #66FFFF;

┭ 返回主頁

1 position:absolute; width:1097px; height:115px; z-index:2; left: 12px; top: 57px; position:absolute; width:200px; height:115px; z-index:1; left: 73px; top: 36px;