湖南工業(yè)職業(yè)技術(shù)學(xué)院信息工程系實(shí)訓(xùn)報(bào)告題目：______________________專 業(yè)：_____________________________ 班 級(jí)：____________

湖南工業(yè)職業(yè)技術(shù)學(xué)院

信息工程系實(shí)訓(xùn)報(bào)告

題目：______________________

專 業(yè)：_____________________________ 班 級(jí)：_____________________________ 學(xué) 號(hào)：_____________________________ 姓 名：_____________________________ 指導(dǎo)老師：_____________________________

2014-10

概 要

本文介紹了用Dreamweaver 技術(shù)、運(yùn)用HTML 語(yǔ)言編輯能力和加入CSS 與Div 樣式、使用一定的模板制作的關(guān)于大學(xué)生活文藝活動(dòng)個(gè)人網(wǎng)站。從中掌握網(wǎng)站開發(fā)從規(guī)劃到構(gòu)建、調(diào)試等技術(shù)，提高了我們綜合應(yīng)用網(wǎng)頁(yè)設(shè)計(jì)能力。

目 錄

前言....................................... ...........4

第一章 網(wǎng)站總體設(shè)計(jì)............................. .... 5

1．1 可行性分析.................................. 5

1．2 網(wǎng)站設(shè)計(jì)方案.................................6

1. 3 網(wǎng)站總體結(jié)構(gòu).................................7

第二章 網(wǎng)站詳細(xì)設(shè)計(jì)................................... 8

2．1 主要頁(yè)面功能介紹.............................8

2．2 頁(yè)面主要內(nèi)容.................................11

第三章 網(wǎng)站總結(jié)...................................... 15

3. 1 網(wǎng)站的優(yōu)點(diǎn).................................. 15

3. 2 網(wǎng)站的缺點(diǎn)與改進(jìn).............................15

3. 3 實(shí)訓(xùn)感悟與總結(jié)...............................16

致謝.............................. .......... .........18

3

前 言

本實(shí)訓(xùn)項(xiàng)目通過“網(wǎng)絡(luò)設(shè)計(jì)與JS 技術(shù)”總體方案設(shè)計(jì)、收集與整理相關(guān)的素材、網(wǎng)站的規(guī)劃與設(shè)計(jì)、網(wǎng)站的整體設(shè)計(jì)、功能模塊的設(shè)計(jì)、網(wǎng)站的調(diào)試等環(huán)節(jié)設(shè)計(jì)并利用Dreamweaver 制作一個(gè)網(wǎng)站，有首頁(yè)和輔助的鏈接頁(yè)面。在網(wǎng)站的設(shè)計(jì)中使用了表格和模板是使網(wǎng)站布局一致，更加的美觀。在頁(yè)面中加入了層、行為、css 樣式等使網(wǎng)站更加的完善。本報(bào)告正是以實(shí)訓(xùn)項(xiàng)目為載體，對(duì)實(shí)訓(xùn)項(xiàng)目中網(wǎng)站的總體設(shè)計(jì)、網(wǎng)站的詳細(xì)設(shè)計(jì)、網(wǎng)站總結(jié)進(jìn)行闡述。

4

第一章 網(wǎng)站總體設(shè)計(jì)

1．1 可行性分析

網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過程中重要的實(shí)踐性教學(xué)環(huán)節(jié). 它是根據(jù)專業(yè)教學(xué)計(jì)劃的要求. 在教師的指導(dǎo)下對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作專業(yè)技能的訓(xùn)練, 培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問題的能力, 實(shí)現(xiàn)由理論知識(shí)向操作技能的培養(yǎng)過程. 因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié), 搞好實(shí)訓(xùn)教學(xué), 對(duì)實(shí)現(xiàn)本專業(yè)的培養(yǎng)目標(biāo), 提高學(xué)生的綜合素質(zhì)有著重要的作用.

1. 通過綜合實(shí)訓(xùn)進(jìn)一步鞏固, 深化和加強(qiáng)學(xué)生的理論知識(shí)于專業(yè)技能。

(1) 掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu), 目錄結(jié)構(gòu), 鏈接結(jié)構(gòu)的方法。

(2) 熟練掌握網(wǎng)頁(yè)制作軟件Dreamweaver8和基本操作和使用技能。

(3) 掌握頁(yè)面的整體控制和頭部?jī)?nèi)容設(shè)置的方法。

(4) 熟練掌握網(wǎng)頁(yè)頁(yè)面布局的各種方法。

(5) 熟練掌握在網(wǎng)頁(yè)中輸入, 設(shè)置標(biāo)題和正文文字的方法。

(6) 熟練掌握在網(wǎng)頁(yè)中插入圖像,Flash 動(dòng)畫和背景音樂的方法。

(7) 熟練建立各種形式的超級(jí)鏈接的方法。

(8) 掌握表單網(wǎng)頁(yè)制作方法。

(9) 掌握網(wǎng)頁(yè)特效制作方法。

5

(10) 掌握網(wǎng)站測(cè)試的方法。

2. 訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力, 充分培養(yǎng)和提高學(xué)生的動(dòng)手能力, 學(xué)會(huì)通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash 動(dòng)畫和網(wǎng)頁(yè)特效等。

3. 培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開發(fā)過程中所遇到的實(shí)際問題的能力及基本工作素質(zhì)。

4. 培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng), 嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力, 樹立自信心。

1．2 網(wǎng)站設(shè)計(jì)方案

1. 網(wǎng)站主題

我的網(wǎng)站的主題在于從記錄我在大學(xué)期間參加的各類文藝活動(dòng)，包括每個(gè)頁(yè)面都有介紹不同的活動(dòng)資料、心得、圖片等內(nèi)容。同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都有統(tǒng)一的風(fēng)格, 每一個(gè)網(wǎng)頁(yè)的主題色彩都是淺藍(lán)色，給人帶來一種溫和舒適的感覺。最重要給瀏覽者好的欣賞感受。

2． 網(wǎng)站材料

網(wǎng)站材料主要是平時(shí)保留信息, 包括圖片、文字、相關(guān)的資料。同時(shí), 在學(xué)校的官網(wǎng)上下載了相關(guān)資料，同時(shí)查詢相關(guān)的書籍、百度和素材光盤等方式收集所需的文字資料，圖像資料，F(xiàn)lash 動(dòng)畫和網(wǎng)頁(yè)特效等，用以得來更加具有說服力的頁(yè)面。想要做好自己的網(wǎng)站，就要盡量搜集材料，搜集材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁(yè)的素材，這樣就可以做好一個(gè)好的網(wǎng)站。

3． 網(wǎng)站規(guī)劃

我的網(wǎng)站共有6個(gè)主頁(yè)面：首頁(yè)、我的檔案、最新動(dòng)態(tài)、我 6

的照片、相關(guān)視頻、留言簿。每一個(gè)頁(yè)面用統(tǒng)一的模板，以保證網(wǎng)站統(tǒng)一的頁(yè)面風(fēng)格。網(wǎng)站整體色為淺藍(lán)色，突出主題，顏色沒有過多，過雜，用以避免給人一種雜亂的感覺。版面設(shè)計(jì)十分靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁(yè)布局主要用模板和表格，用模板定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位置的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定大體結(jié)構(gòu)，相同的風(fēng)格調(diào)用CSS 設(shè)計(jì)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。另外，為了網(wǎng)頁(yè)布局的協(xié)調(diào)，我加入適當(dāng)?shù)腇lash 視頻，用以達(dá)到更好的瀏覽效果。

4．網(wǎng)站的制作工具

做網(wǎng)頁(yè)時(shí)主要使用的是Deamweaver 軟件。另外，為了處理網(wǎng)頁(yè)中的其他元素，還使用了Photoshop 、美圖秀秀等軟件。

1. 3 網(wǎng)站總體結(jié)構(gòu)

7

8

第二章 網(wǎng)站詳細(xì)設(shè)計(jì)

2．1 主要頁(yè)面功能介紹 我設(shè)計(jì)的網(wǎng)站首頁(yè)如下圖：

9

網(wǎng)站主要記錄的是我在大學(xué)期間參加校內(nèi)的各種活動(dòng)，在網(wǎng)站中我用了一些代碼，是網(wǎng)頁(yè)看起來“活躍”一些。

首頁(yè)中滾動(dòng)的時(shí)間和文字且時(shí)間會(huì)自動(dòng)更新，我在代碼中添加了