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

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

信息工程系實訓(xùn)報告

題目：______________________

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

2014-10

概 要

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

目 錄

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

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

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

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

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

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

2．1 主要頁面功能介紹.............................8

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

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

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

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

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

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

3

前 言

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

4

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

1．1 可行性分析

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

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

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

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

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

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

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

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

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

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

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

5

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

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

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

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

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

1. 網(wǎng)站主題

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

2． 網(wǎng)站材料

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

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

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

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

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

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

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

7

8

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

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

9

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

首頁中滾動的時間和文字且時間會自動更新，我在代碼中添加了