網(wǎng)站設(shè)計實訓(xùn)報告

1、網(wǎng)頁設(shè)計實訓(xùn)報告題目:個人網(wǎng)站實訓(xùn)報告姓名:一.實訓(xùn)意義:網(wǎng)頁設(shè)計與制作綜合實訓(xùn)是教學(xué)過程中重要的實踐性教學(xué)環(huán)節(jié).它是根據(jù)專業(yè)教學(xué)計劃的要求，在教師的指導(dǎo)下對學(xué)生進(jìn)行網(wǎng)頁制作專業(yè)技能的訓(xùn)練，培養(yǎng)學(xué) 生綜合運用理論知識分析和解決實際問題的能力，實現(xiàn)由理論知識向操作技能的 轉(zhuǎn)化，是對理論與實踐教學(xué)效果的檢驗，也是對學(xué)生綜合分析能力與獨立工作能力 的培養(yǎng)過程.因此加強實踐教學(xué)環(huán)節(jié)，搞好實訓(xùn)教學(xué)，對實現(xiàn)本專業(yè)的培養(yǎng)目標(biāo)，提 高學(xué)生的綜合素質(zhì)有著重要的作用。實訓(xùn)目的:1. 通過綜合實訓(xùn)進(jìn)一步鞏固，深化和拓展學(xué)生的理論知識與專業(yè)技能(1) 掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)，目錄結(jié)構(gòu)，鏈接結(jié)構(gòu)的方法。(2) 熟練掌握

2、網(wǎng)頁制作軟件 FrontPage 2003和的基本操作和使用技能。(3) 掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。(4) 熟練掌握網(wǎng)頁頁面布局的各種方法。(5) 熟練掌握在網(wǎng)頁中輸入 ,設(shè)置標(biāo)題和正文文字的方法。(6) 熟練掌握在網(wǎng)頁中插入圖象 ,flash 動畫和背景音樂的方法。(7) 熟練建立各種形式的超級鏈接的方法。(8) 掌握表單網(wǎng)頁制作方法。(9) 掌握網(wǎng)頁特效制作方法。(10) 掌握網(wǎng)站測試的方法。2. 訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力 ,充分培養(yǎng)和提高學(xué)生的動手能力 , 學(xué)會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖象資料、 flash 動畫和網(wǎng)頁特效等。3. 培

3、養(yǎng)學(xué)生運用所學(xué)的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題 的能力及其基本工作素質(zhì)。4. 培養(yǎng)學(xué)生理論聯(lián)系實際的工作作風(fēng) ,嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨立工作的能力 , 樹立自信心。網(wǎng)站是什么？要知道什么是網(wǎng)站首先要弄清楚什么是網(wǎng)頁？網(wǎng)頁(英文：Web page是一個文件，他存放在世界某個角落的某一部計算機(jī)中，而這部計算 機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址( URL )來識別與存取，當(dāng)我們在瀏 覽器輸入網(wǎng)址后， 經(jīng)過一段復(fù)雜而又快速的程序， 網(wǎng)頁文件會被傳送到你的計算 機(jī)，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展示到你的眼前。是萬維網(wǎng)中的一“頁”，通常是HTML格式(文件擴(kuò)展名為.html或.

4、htm)。網(wǎng)頁通常用圖像檔來 提供圖畫。 網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素， 是承載各種網(wǎng)站應(yīng)用的平臺。 所謂站網(wǎng) 站(Website就是指在網(wǎng)際網(wǎng)路(因特網(wǎng))上，根據(jù)一定的規(guī)則，使用 HTML等 工具制作的用於展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合是由網(wǎng)頁組成的。 如果您只有域 名和虛擬主機(jī)而沒有制作任何網(wǎng)頁的話，您的客戶仍舊無法訪問您的網(wǎng)站。構(gòu)成網(wǎng)頁的元素有文字、圖像、動畫、音樂和程序等。文字與圖片是構(gòu)成一 個網(wǎng)頁的兩個最基本的元素。我們可以簡單的理解為：文字，就是網(wǎng)頁的內(nèi)容， 圖片，就是網(wǎng)頁的美觀。三實驗步驟：1、網(wǎng)站主題我的網(wǎng)站的主旨在于從各個方面全面的介紹我自己，展示自己，包括我的個 人資料、個人相片

5、和愛好。另外，網(wǎng)站里還包括我的好友和好友資料，建立一個 展示自我形象的平臺。 同時，網(wǎng)站里的每一個網(wǎng)頁都有統(tǒng)一的風(fēng)格， 每一個網(wǎng)頁 的主題色彩都是淺紅色， 用以展示自己性格的效果。 最重要的是做出自己的風(fēng)格， 給瀏覽者好的欣賞感受。2、網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞。同時， 查詢相關(guān)的書籍、百度和素材光盤等方式收集所需的文字資料 ,圖象資料 ,flash 動 畫和網(wǎng)頁特效等， 用以得來更加具有說服力的頁面。 要想做好自己的網(wǎng)站， 能夠 給瀏覽者好的欣賞感受， 就要盡量搜集材料， 搜集得材料越多， 以后制作網(wǎng)站就 越容易。 精選自己收集的材料， 作為自己制作網(wǎng)

6、頁的素材， 這樣就可以做好一個 好的網(wǎng)站。3、網(wǎng)站規(guī)劃我的網(wǎng)站共有7個主頁面：首頁、相冊、簡歷、圖書、好友、留言版和音樂。 每一個頁面用統(tǒng)一 的背景圖片，以保證網(wǎng)站統(tǒng)一的頁面風(fēng)格。如下 圖:我是用自己的姓名和學(xué)號命名網(wǎng)站名，用以方便存儲和轉(zhuǎn)發(fā)。網(wǎng)站整體色調(diào)為淺 紅色，然后點綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以避 免給人一種雜亂的感覺。版面設(shè)計十分靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂?設(shè)計。網(wǎng)頁布局主要用框架和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體 定位。位子的設(shè)計也是重要的一個部分， 根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng) 格多次調(diào)用是用css設(shè)計一個樣式，以保證隨時、準(zhǔn)

7、確的調(diào)用。另外，為了網(wǎng)頁 布局的協(xié)調(diào)，我加入了適當(dāng)?shù)膄lash透明動態(tài)圖片，用以達(dá)到更好的瀏覽效果。4、網(wǎng)站的制作工具做網(wǎng)頁時主要使用的是 FrontPage 2003但我還使用了 Deamweave。另外，為了處理網(wǎng)頁中的其他元素，還使用了 Photoshop Gif Animator等軟件。5、制作網(wǎng)站的網(wǎng)頁素材、風(fēng)格、模板都設(shè)計好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時， 首先要做的就是站點的規(guī)劃，建立一個本地站點“mysite”，建立的各個頁面都應(yīng)該放在本地站點中，在網(wǎng)頁制作時所需的各個元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時建立了“tupia n”文件夾

8、來存放圖片。同時，由于“相冊”頁面中的信息太多，于是建立了一個專門的文件夾存放 相冊信息，網(wǎng)頁中的css樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊，我設(shè)計的網(wǎng)站 的首頁如下圖：以導(dǎo)航欄為界，上面插入了兩個 flash動畫，用以給瀏覽者好的視覺享受。左下 方有我的個人資料、相片和相關(guān)鏈接。插入相關(guān)鏈接的菜單欄，一方面為了布局 合理，彌補左下角的空缺，另一方面給瀏覽者提供放表的導(dǎo)航，點擊其中任意一個都會連接到其他網(wǎng)頁，如點擊 google就會連接到下面網(wǎng)頁：Goopte就素豐氣不皆1所有可衛(wèi)0中文啊頁3間聲中文網(wǎng)頁肓樂根據(jù)自己的網(wǎng)頁風(fēng)格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁的頁寬一般沒有超過900像素，以保證左

9、右不出現(xiàn)滾動條。右下邊插入的是表格，表格中添加了淺紅 色的背景圖片。用以體現(xiàn)網(wǎng)站的主題色彩，表格還定位了網(wǎng)頁特效、系統(tǒng)時間和 flash動畫。網(wǎng)頁特效為上下滾動的字幕，當(dāng)鼠標(biāo)停在字幕上時，字幕停止?jié)L動。取系統(tǒng)時間代碼如下：今天是：主頁中還插入了背景音樂，音樂名為“渡情”，這首音樂為midi音樂，占用內(nèi)存 小，音樂清脆悅耳，十分適合做背景音樂。另外，網(wǎng)頁特效滾動字幕就是歌詞。插入過程如下圖：為了使頁面連接清晰，相冊中插入了五個交互式按鈕，分別是個人相片、好友相 片、風(fēng)景相片、明星相片和古董相片，當(dāng)點擊任一按鈕都會在右下版塊出現(xiàn)對應(yīng) 瀏覽圖片版塊。交互式按鈕的制做：在設(shè)計窗口中插入一個五行一列的表

10、格，表 格的間距為0,顏色為黑色，居中對齊，然后插入背景圖片，就做成了表格的背 景。在表格的一個單元格內(nèi)點擊菜單中的插入，再點擊交互式按鈕，修改按鈕的相應(yīng)屬性就可以了 。簡歷中包含我的姓名、年齡、職業(yè)、理想和興趣愛好等。簡歷的右下方插入了漂 亮的flash動畫，動畫為游動的金魚，為了達(dá)到亮眼的效果，加入了透明flash,既與主網(wǎng)頁相同，又有新意。插入這個動畫是為了使頁面的整體布局合理，既突 出網(wǎng)站的主色調(diào)，又給人以凝重的感覺，同時增加頁面的可看性。第四個主頁面是圖書，如下圖：它與第二個主頁面采用了相同的背景，相同的布局。為了使頁面連接清晰，圖書 中也插入了五個交互式按鈕，分別是唐詩、宋詞、元曲

11、、明清傳奇和現(xiàn)代小說五 個子頁。在唐詩子頁中的右邊網(wǎng)頁中所有的詩人名都有超鏈接，如單擊“駱賓王”， 就會出現(xiàn)如下頁面：另外，導(dǎo)航右下版塊是一段美麗文字欣賞， 用相同的色彩布局，明快而又有緊促 感，而且使整個頁面色調(diào)平衡。單擊任一交互式按鈕都會在右下版塊出現(xiàn)對應(yīng)網(wǎng) 頁版塊，如單擊元曲按鈕，頁面結(jié)果見下圖：第五個主頁面是好友，如下圖：這個主頁面和上面的一樣，都插入了交互式按鈕，既突出網(wǎng)站的主色調(diào)，又給人 以凝重的感覺，目的都是增加網(wǎng)頁的可看性。另外右邊的相片下面人名設(shè)立了超 鏈接 第六個主頁面是留言版，如下圖： 上面使用表單同瀏覽者進(jìn)行信息交流，方便瀏覽者留言。 在導(dǎo)航的下面是一個滾動字幕，用層進(jìn)

12、行定位。上面跑馬燈效果代碼為： vmarquee bgcolor=#FFFFFF height=23如果您對我的網(wǎng)站、本人、老師或其 他方面有任何想法，請告知我們。歡迎提出寶貴意見和建議。 該網(wǎng)頁中還插入了時鐘，顯示當(dāng)前時間，給瀏覽者提供方便。圖片如下： 下面是表單的下部分，用以提交留言到服務(wù)器。上圖的最下面是版權(quán)信息， 盡量用簡潔的語言和穩(wěn)重的色彩， 給人留下清新， 簡 練的感覺。版權(quán)信息標(biāo)名了作者和版權(quán)用以提高內(nèi)容的可讀性和使內(nèi)容充實， 既 突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺。這樣，用戶在提交完后，內(nèi)容就會儲存進(jìn) wu.txt 中。表單的制作過程：首先打開 FronrPage 2003再

13、, 新建網(wǎng)頁，單擊插入按鈕，在插入按鈕中選擇表單，最后插入 表單的各個屬性就可以完成表單的插入了。第七個主頁面是音樂，如下圖：為了達(dá)到亮眼的效果，我在導(dǎo)航欄下的表格背景圖片上加入了透明flash,既與主網(wǎng)頁相同， 又有新意。 上面的紅色文字都插入了超鏈接， 單擊費玉清連接到如下 頁面： 上面的頁面是網(wǎng)絡(luò)上的頁面，鏈接到網(wǎng)絡(luò)上的可以節(jié)省制作網(wǎng)站的周期。而且， 還可以使內(nèi)容更加簡潔。單擊“一剪梅”鏈接到如下頁面： 上面的頁面整體美觀漂亮，如果出現(xiàn)上面頁面就可以傾聽動人的音樂了。最后， 還要制作各個頁面的鏈接， 把整個網(wǎng)頁鏈接起來， 形成一個統(tǒng)一的整體， 方便瀏 覽者進(jìn)行各個頁面間的跳轉(zhuǎn)。6、上傳測

14、試網(wǎng)站網(wǎng)頁制作完畢以后， 要進(jìn)行反復(fù)的測試， 保存后在 IE 瀏覽器上反復(fù)運行自己 的網(wǎng)站，用以發(fā)現(xiàn)設(shè)計中的缺陷并及時改正。四設(shè)計特色我覺得我的網(wǎng)頁設(shè)計的最大特點就是色彩淡雅， 布局協(xié)調(diào)， 結(jié)構(gòu)清晰。 觀之， 給人以清麗，純樸的感覺。另外，設(shè)計過程中使用了大量的網(wǎng)頁特效，如：跑馬 燈效果、上下滾動字幕和時鐘等。五心得體會第一：我非常感謝學(xué)校給了我這次制作網(wǎng)頁的機(jī)會，通過這次實訓(xùn)，我學(xué)到 了很多有價值的東西。 我獨立的完成了網(wǎng)站設(shè)計的全過程， 把設(shè)計中散亂的網(wǎng)頁 鏈接成框架體系， 使平時學(xué)到的知識點有了很高的提高， 并且合理的在試驗中進(jìn) 行了實踐。 第二：在這次實驗的過程中， 我搜集了大量的素材和網(wǎng)頁設(shè)計的技術(shù) 技巧方面的書， 擴(kuò)大了知識面， 給我在以后的設(shè)計過程中能博采眾長， 制