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

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

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

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

主要內(nèi)容：

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

基本要求：

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

主要參考資料等：

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

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

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

完 成 期 限： 一周

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

課程負責人簽名：

2010年 5 月 日

1

目錄

一、引言 . .......................................................................... 錯誤！未定義書簽。

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

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

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

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

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

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

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

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

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

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

1

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

一、 引言

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

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

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

二、 需求分析

2.1 系統(tǒng)概述

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

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

2.2 功能要求

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

三、 總體設(shè)計

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

1

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

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

3.2 界面設(shè)計：

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

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

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

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

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

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

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

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

（1）新建站點：

1

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

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

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

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

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

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

圖1：

1

圖2：

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

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

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

我的檔案

我的日志

我的班級

我的寵物

視頻欣賞

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;