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

湖南工業(yè)職業(yè)技術學院

信息工程系實訓報告

題目：______________________

專 業(yè)：_____________________________ 班 級：_____________________________ 學 號：_____________________________ 姓 名：_____________________________ 指導老師：_____________________________

2014-10

概 要

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

目 錄

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

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

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

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

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

第二章 網(wǎng)站詳細設計................................... 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 實訓感悟與總結(jié)...............................16

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

3

前 言

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

4

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

1．1 可行性分析

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

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

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

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

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

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

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

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

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

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

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

5

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

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

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

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

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

1. 網(wǎng)站主題

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

2． 網(wǎng)站材料

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

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

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

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

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

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

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

7

8

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

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

9

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

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