第一篇：網頁設計實踐報告

中南大學

本科生課程設計(實踐)設計報告

(大學計算機基礎)

題目

學生姓名

指導教師

學院

專業班級

學生學號 孫燕姿 劉輝 李小蘭 資源與安全工程學院城市地下空間工程0701 020207011

3計算機基礎教學實驗中心

2008 年 1月21 日

《大學計算機基礎》計算機實踐任務書

班級：城地0701 時間： 19（周）2008-1-21（日期）指導教師： 李小蘭

一、計算機實踐的任務、性質與目的計算機實踐是在學完《大學計算機基礎》課程后，進行的一項綜合實踐。在實踐當中學生應綜合《大學計算機基礎》課程的思想方法和知識點，設置一個網站，并在網站上發布一個綜合內容的網頁。通過《計算機實踐》更進一步深入了解和掌握各種應用軟件的使用操作及綜合應用，重點在培養學生自學計算機應用軟件、開發應用、動手和創新能力。

二、計算機實踐的配套教材

建議選用：

1．《大學計算機基礎》，高等教育出版社，主編 蔣外文劉衛國；

2．《大學計算機基礎學習與實驗指導》，高等教育出版社，主編 施榮華 王小玲。

三、計算機實踐的內容及要求

1．學習掌握HTML語言和網頁制作軟件FrontPage 2003，制作網頁；

2．學習掌握中文演示軟件PowerPoint 2003的操作及使用，并用此軟件設計一份綜合演示報告（如：某公司的產品介紹；我校各專業介紹；學生簡歷等）掛在網頁上；

3．對于網頁和幻燈片的頁面修飾要求用自己制作的動畫、圖形、圖像；

4．對于網頁頁面要求至少3個頁面（使用超鏈接），網頁中的內容與學生所選主題相關；

5．對于PowerPoint 2003制作的幻燈片要求至少有5張，幻燈片中的內容與學生所選主題相關；

6．學習網站的設置和網頁的發布，分門別類地放置在相應的文件夾中，規范網頁文件名和素材文件名，網站的首頁應取名為index。

作品存放在一個文件夾中，以學號（學生卡上的學號）為文件夾名。

7．用Word字處理軟件撰寫出相應的計算機實踐報告論文（字數要求：2000字左右）。

四、考核方式與評分辦法

1.出勤考核成績占總成績的20%；

2.設計成果評價占總成績的 60%；

3.計算機實踐報告評價占總成績的 20%。

4.成績冊成績評定方式采用百分制。

計算機基礎教學實驗中心

2006年11月4日

孫燕姿

一、任務內容

所有內容都是圍繞孫燕姿展開,有關于孫燕姿的家庭，愛情，朋友，個人喜好，以及她出道7年來的專輯和獲獎情況。

二、設計的步驟

我的主題就是孫燕姿這一個明星，因此我只設置了四個網頁（包括一個主頁），主頁相關的三個鏈接分別有姿之歌（關于專輯），姿之畫（關于動畫）和姿采彌漫（燕姿的風采），其中姿之畫網頁中加入PPT的鏈接，在姿之畫網頁中專門放置flash，在姿之歌網頁中加入word的鏈接以詳細介紹燕姿的專輯風格，在主頁中添加背景音樂（孫燕子的歌曲），在專輯中串入一個 flash。

我的所有材料都設置在以我的學號和姓名為名的主文件夾下,以一個以index為名的文件做為主目錄，下面又分別設了七個子目錄，分別將我使用和制作的內容分為了七類：index.files，flash,powerpoint,word,聲音文件，文字及圖片。

三、采取的方法與手段

實驗過程中主要使用了Frontpage，Powerpoint，Flash三個程序，有時也使用了圖象編輯器，對于素材的來源則幾乎都是從網上下載的，另外在制作過程中覺得對孫燕姿了解不足，在圖書館借了一本關于孫燕姿的書，從中汲取了很多關于她的信息，大受裨益。具體制作過程如下：

1)在插入背景音樂時，本來是不可以插入mp3格式的音樂，但是通過研究我直接將音樂的擴展名添加到路徑中，這樣Frontpage就可以識別我所插入音樂的路徑，使得觀看網頁的同時也可以欣賞到孫燕姿動聽的音樂《我要的幸福》。

2)對網頁進行整體布局時，我先插入表格，然后調整其大小，在制作網頁的過程中，發現圖片及文字的位置總是在單元格的中間，并不如意，我就通過多次的拆分單元格以使界面上的文字和圖象以及背

景圖片完美的結合在一起。為了在布局上符合孫燕姿的獨特風韻，我在使用背景或者字幕的顏色時，都是使用了孫燕姿最喜歡的黃色。

3)在制作網頁中，我大量使用了Web組件，特別是在各個網頁之間進

行鏈接時我采用了交互式按鈕，從而使得各個網頁之間能夠連接自然，同時還設置了懸停效果，使得網頁更加好看。

4)由于沒有學會制作動態網頁，但是為了達到動態的效果，我特意設

定了一個專用于展示flash的動畫網頁（姿之畫），在這個網頁上我一共放置了四個flash，讓他們同時播放，給人一種不一樣的感覺。

5)我的整個PPT是一總分式的思路，第一頁就象一張封面，第二頁是

對所有內容的總領，列出了下面所有幻燈片的主要內容，并且設置了和相應的幻燈片的鏈接，從而使所有的幻燈片形成一個有機的整體，這就是我的PPT大致框架。

6)制作PPT時，我引入了大量的圖片，包括背景圖片，主要以圖文并

茂的形式介紹了孫燕姿的個性、愛心、家庭、男友，同時合理的搭配PPT中的各種各樣的動畫效果，讓孫燕姿自然的走入觀看者的心中。

7)我發現PPT中文本的布局相當單調，因此我很少按它的布局進行編

輯，而是在它的基礎上添加文本，來是使我的布局更加的多樣化，設計也更加靈活，自如。

8)另外，我在PPT也設置了和主頁的超鏈接，同時也穿插一些動作設

置，加強各個幻燈片之間的聯系。

9)在flash的制作中，我基本上都是在使用課堂上學的技巧，遮罩層，時間軸特效等等，其中，我將多個圖層同時使用時間軸特效，并設置時間差，形成?我愛孫燕姿?五個字交錯放大，效果很不錯。

10)另外，在使用遮罩層的時候，我通過改變一個普通圖層的屬性使得

在一個遮罩層下面有兩個被遮罩層，大大加強了圖層的靈活性。

11)出于對千千靜聽歌詞秀上的滾動效果的興趣，我用flash模仿了這

種文字滾動，并在歌唱的部分高亮顯示，盡量使其與歌詞同步。

12)最后制作了一個讓孫燕姿的照片滾動框，這種效果雖然簡單卻很好

看，我直接把flash的背景調到很小然后讓所有要滾動的圖片排列在一起，從背景那一小塊上滾過，滾過的時候由于背景小就只能看到一到兩張圖片，這樣就形成了圖片滾動效果，這個flash占據空間狹小，卻很好的增加了網頁的色彩。

四、遇到的問題與解決的辦法。

在制作網頁初期，由于對frontpage沒有很好的了解，所以在開始的時候不僅效率低，而且常常出錯，后來我通過對相關資料的研究逐漸解除了心中的疑惑，并大膽構思，大膽嘗試，初見成效。

1)剛開始最大的問題就是圖片顯示不出來，有時候把文件名改了一下，或者換了一個文件夾儲存都會導致圖片無法顯示，后來經過分析和多次實驗，才知道任何圖片的顯示都是依靠我們在保存和剛開始設計好的路徑來尋找來源，從而顯示圖片，所以在后來制作的過程中，一旦插入了圖片保存好路徑之后就再也不去更改它的任何信息（也就是讓它的屬性保持不變）。另外，我還發現，添加了主題背景了之后就不能在上面添加圖片了，所以要在設置主題之前把圖片都插好。

2)在設置背景圖片時，會發現圖片太小的話，背景就變成多張重復的圖片拼湊在一起，很不美觀，所以我使用圖片編輯器對背景大小做了調整，使得背景和網頁內容可以很好的融在一起。另外我還利用圖片剪輯得到了孫燕姿的個人簽名（一般找不到她直接簽名的圖片，所以我就從有她的簽名的照片上剪輯出來），使用孫燕姿的真實簽名比使用藝術字更具有真實感和美感。

3)雖然在制作設計PPT時可以選擇大量的效果，但有的時候還是覺得

它所提供的效果不太理想，所以常常不斷的更改效果尋找我所需要的效果，后來才發現，PPT中所提供的效果是可以自己編輯的，在自定義動畫的界面上，可以改變動作的方向，順序，動作的背景音樂以及動作次數等等屬性。

4)在制作flash最先遇到的問題是當我使用多個層的時候往往前一個

層的內容會影響下一個層的設計，使得多次實驗都不得成功，通過詢問同學學會了鎖定層和隱藏層，這樣一來，多個圖層的操作變得

格外地得心應手。

5)在制作‘照片滾動框’的動畫時，遇到了一個相當棘手的問題，這

個問題看似很簡單如果不知道，就無從下手，因為要造成圖片滾動，所以需要很多圖片排成一條豎線，位置又要對齊，因此在移動圖片時，如果一張一張的移，工作量非常之大，我想一次把他們都選中整體移動，但是圖片的長度卻大大超出了窗口的大小，我嘗試著使用shift鍵，結果可以成功地同時選中，但是即使這樣還是不能一次選中，也很費事，直到最后我試了一下ctrl+A，就一下子選中所有照片，快多了，移動也十分方便。

6)剛開始我構思了一個遮罩層運動的動畫，我設計的遮罩層是一個透

明圓圈，我本來想讓給這個遮罩層設置一個運動引導層，讓它按我設計的運動軌跡運動，結果不行，設置了遮罩就不能設置引導層，試了好多次還是不行，沒辦法，我只好通過設置大量的關鍵幀，形成很多很小時間段的動畫補間，形成遮罩層運動的效果，同時設計時要注意一點：要先設置好動畫補間，最后再設定為遮罩層。設定了遮罩層之后就不可以制作動畫補間了。

五、總結

? 首先，我發現我的一個錯誤，我總以為上了機再摸索就都自然

會了，實際在這次設計過程，理論的研究對我的設計達到了點石成金的效果，所以我認為在做實驗之前先要對所使用的程序有一定了解再開始，否則很盲目，自信心也很受到很大的打擊。? 其次，我覺得我們學的程序很多，但都僅僅只會使用它們很簡

單的一部分功能，沒有做深入的了解。

? 最后，我認為做計算機方面的作業，最最重要的是堅持不懈不

放棄，因為我們在完成某一項任務時，往往要經歷多次失敗才能找到捷徑，由于沒找到捷徑，做起來特別吃力，但卻只有嘗試了之后才能找到捷徑，所以越是麻煩越是不能放棄，否則就永遠找不到捷徑，就會更加的麻煩。

? 另外，感覺做計算機作業特別有成就感。

第二篇：網頁設計實踐報告

隨著個人素質的提升，我們都不可避免地要接觸到報告，報告中涉及到專業性術語要解釋清楚。其實寫報告并沒有想象中那么難，以下是小編幫大家整理的網頁設計實踐報告，歡迎閱讀，希望大家能夠喜歡。

網頁設計實踐報告1

一實驗目的

1．學習HTML語言和dreamweaver，FrontPage等工具。

2．掌握在本地環境下運用ASP技術實現一個簡單的電子商務網站。

二實驗過程

1組長分配任務，大家從網站上搜集各種關于手機的資料。

2做網頁主要用的工具便是Dremweaver、Photoshop、Flash軟件。在這些軟件我對Dremweaver、Photoshop相對比較熟悉，因為在平時上課是老師帶領我們運用過。所以我還可以正常的運用，但是出現的問題還是有很多。有很多不懂如何操作，只有通過在次去看書才能夠了解，這也體現了我學習方面的缺點，它是我平時不夠認真的具體表現。

3打開Dremweaver后第一步便是新建站點。

4設計主頁及二級頁面。

5鏈接的過程其實很簡單，主要是把要鏈接的文字選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。

6向靜太網頁插入動態效果。

在經濟迅速發展的今天，Internet顯得更為重要它是人們發布信息與傳遞信息的重要渠道，為了與社會發展同步，為了讓我們成為真正的技術性人才。學校在本周為我們安排了維持三周的網頁制作專用周是實習，讓我們把平時所學知識運用到實踐中做到真正的學以致用而不只是紙上談兵。通過本周的實習使我獲得了更多的新知識同時也使我使我認識到了自己在學習上的許多不足。

近三個星期的實訓將要結束，其中的酸甜苦辣我會在今后的日子里不斷地去咀嚼，去回味，去探索。從制作網頁過程中，我學到了新的美化網頁的方法，運用了更多以前未運用的技巧。這使我學到了更多的知識，并且為我自己在制作網頁這方面積累了一些經驗。這些將是我人生中的一次重要的經歷，將是我今后走上社會后的一筆巨大的財富。這次實習的收獲對我來說有不少，我自己感覺在知識、技能等方面都有了不少的收獲。總體來說這次是對我的綜合素質的培養，鍛煉和提高。

網頁設計實踐報告2

一、網站整體規劃，要做網頁的第一步便是做網站的整體規劃這主要包括四個方面的內容。

網站整體規劃是做網頁的第一步也是制作網頁最關鍵的一步它決定了你要表答的信息，因此我選擇了我選擇我最喜愛的服飾來為它做網頁。在平時我也對服裝的網頁比較關心，無論是淘寶網上的衣店還是各種品牌裝。這次我是為“易菲”服飾做的網頁。

定位網站的CI形象。

“易菲”植根中國文化之精髓，汲取自然稟賦之靈性，形成一個既有濃厚文化底蘊，又有現代自然人文氣息的特色品牌。“易”即是容，是包容，是寬容，是五千年中華民族的文化精髓，是厚德載物，是對人性寬度的一種拓展。“菲”通非，是生機、是個性、是春意盎然、是自強不息，是對人性深度的一種挖掘。“生活如花，自在快樂”是YIFINI易菲的設計理念，倡導一種與自然和諧相處，如花兒綻放般美好舒適、自在快樂的生活方式。這也便是我網站的CI形象。

于時間的關系在本次我準備做四張網頁：一張主頁三張二級頁面。分別設計了“時尚首頁、時尚衣秀、推薦產品、潮流信息”等四個欄目。在這四張頁面中我打算都用淡藍色做背景顏色來映襯我網頁的主打色綠色。

網站的整體風格和創意。

整個網站的創意就在于顏色的搭配，與各種圖片的搭配，它們相互輝映，相互襯托。以便達到表現其品牌的和諧之美、自然之美。我踩用淡藍色和綠色為我網站的主打色主要是因為我的產品特性。在設計上，YIEINI易菲推崇“自然美”，將帶表女性氣質的花卉和自然元素融入設計之中，充分體現設計師和顧客所追求的一種灑脫、舒適的生活氛圍，力求表現悠閑、舒暢、自然的生活情趣。因此我用天空與自然的顏色來表達這張自然之美、和諧之美。

二、網頁制作的前期策劃與準備，在本階級主要有兩方面的工作。

在做網頁我上網收集了許多方面的資料主要是有關網站的布局與服飾品牌方面的資料，我首先進它的企業網站找了一些關于“易菲”服飾的圖片主要是一些代言形象還有代表其企業形象的圖片。其次我去瀏覽了許多的網頁觀察其網頁的布局、顏色搭配、欄目、板塊等方面的內容，同時也搜集了一些對我有用的資料。在搜索資料最困難的便是動態圖片的搜集，動態圖片其gif格式的還是好保存，但是要搜集flash動態圖片就相對較難了。我用了一天的時間來搜集我的flash都不太成功，不過還搜到了可以換自己圖片的代碼。在開始時我根本就不知道flash是怎樣搜索，不過經過三次像老實詢問我終于懂得一些關于代碼的搜索。在搜集資料的過程之中我發現了自己的許多不足之處，最關鍵就是平時對知識的掌握不夠，連最基本的資料搜尋都覺得困難。也是我平時不夠認真和努力的表現。通過這次的教訓在以后我一定會做得更好，爭取不范類似錯誤。

做網頁主要用的工具便是Dremweaver、Photoshop、Flash軟件。在這些軟件我對Dremweaver、Photoshop相對比較熟悉，因為在平時上課是老師帶領我們運用過。所以我還可以正常的運用，但是出現的問題還是有很多。有很多不懂如何操作，只有通過在次去看書才能夠了解，這也體現了我學習方面的缺點，它是我平時不夠認真的具體表現。

三、網頁制作，這便進入我該次的主題了具體制作流程如下。

在我打開Dremweaver后第一步便是新建站點，我把我的站點建立在F儀下面。并將我搜集的全部資料都保存在其文件夾中，以便網頁制作時可以方便的使用。

設計主頁及二級頁面。

在主頁我設首頁制作時，時刻考慮著網頁的基本原則：統一，連貫，分割，對比及和諧的原則，內容統一，都是為了主題服務，美容美體，一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統成一體；每版內容都自成一體，顏色各異，便于瀏覽；整個網頁有動有靜，色彩呼應，搭配協調，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。而且制作過程中，不忘以下原則：

簡潔實用： 這是非常重要的，網絡特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便：同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協調，布局符合形式美的要求： 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。

交互式強： 發揮網絡的優勢，是每個使用者都參與到其中來，這樣的設計才能算成功的設計。這樣的網頁才算真正的美的設計。每個子頁都設有上導航欄，便于瀏覽和跳轉。3個二級網頁制作時，使用的是表格，每一個頁面都用表格為它布局好，然后在插入圖片文字及其他，這樣有一定的規劃性，體現了連貫統一性，不同的內容根據各自的特色建立了不同的表格，突出各自的主題，增強了對比性。在做這些網頁的時候我就進行了如上所述的方法。但我所以網頁的背景顏色及主題顏色都是相同的以便突出我每一個網頁都是為凸顯我主題而服務。

實現網頁間的鏈接。

我的鏈接按鈕主要有四個“時尚首頁、時尚衣秀、推薦產品、潮流信息”它分別鏈接到我所做的四個網頁。鏈接的過程其實很簡單，主要是把要鏈接的文字選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。

向靜太網頁插入動態效果。

在這一階段我遇到了許多的問題，主要是我在主頁插入我的flash的時候，開是我將帶碼粘貼到我的網頁上可是在瀏覽網頁的時候flash卻不能夠顯示。最后我向老師的請教后終于在老師的.幫助下我成功的在我的主頁插入了flash。而在其它的二級網頁我主頁插入的是一些gif格式的動態圖片。

在做完網站才發現，怎么所有的圖片素材并不是在一個文件夾中，而有許多的子文件夾，從網上下載的網頁全都是一個網頁對應一個文件夾。制作過程中，才發現，原來自己懂的太少了，好多不知道的地方，才趕緊查書，開始的時候只是會建立模版，可不會應用。而對于動態flash的插入我更是問題多多，開始是我對代碼基本上是不懂，這就是自己學校上的問題，當真正開始運用的時候在向老師提問。

這只是在制作過程中出現一些問題，其它問題也是類似相同。現在想想，自己所會的東西太少了，現在做的網站只是一些簡單的靜態的網站，看到了一些知名的網站開發出的網頁，不僅欄目內容豐富，信息量大，而且頁面圖文并茂，五彩繽紛，使得網民贊嘆不已，流連忘返。從我做的網頁來看可以反映出學習的還不夠，缺點疏漏。需在加以刻苦鉆研及學習，不斷開拓視野，增強自己的實踐操作技能，為以后能做出出色的網頁而努力。同時我也希望能夠有更多的類似動手練習，讓我們在實踐之中來學習知識。因為我覺得實踐不僅能夠提高我們的學習興趣它更能夠提高我們的動手能力增強我們的技術性。

網頁設計實踐報告3

一、實踐目的

1．學習html語言和dream weaver，front page等工具

2．掌握在本地環境下運用asp技術實現一個簡單的電子商務網站

二、實踐的方法和原理

三、實踐過程

1、資料的搜集。

組長分配任務，大家從網站上搜集各種關于手機的資料。

2、熟悉制作軟件。

做網頁主要用的工具便是dremweaver、photoshop、flash軟件。在這些軟件我對dremweaver、photoshop相對比較熟悉，因為在平時上課是老師帶領我們運用過。所以我還可以正常的運用，但是出現的問題還是有很多。有很多不懂如何操作，只有通過在次去看書才能夠了解，這也體現了我學習方面的缺點，它是我平時不夠認真的具體表現。

3、構建站點框架。

打開dremweaver后第一步便是新建站點。

4、設計主頁及二級頁面。

5、實現網頁間的鏈接。

鏈接的過程其實很簡單，主要是把要鏈接的文字選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。

6、向靜太網頁插入動態效果。

四、實踐心得

在經濟迅速發展的今天，internet顯得更為重要它是人們發布信息與傳遞信息的重要渠道，為了與社會發展同步，為了讓我們成為真正的技術性人才。學校在本周為我們安排了維持三周的網頁制作專用周是實習，讓我們把平時所學知識運用到實踐中做到真正的學以致用而不只是紙上談兵。通過本周的實習使我獲得了更多的新知識同時也使我使我認識到了自己在學習上的許多不足。

近三個星期的實訓將要結束，其中的酸甜苦辣我會在今后的日子里不斷地去咀嚼，去回味，去探索。從制作網頁過程中，我學到了新的美化網頁的方法，運用了更多以前未運用的技巧。這使我學到了更多的知識，并且為我自己在制作網頁這方面積累了一些經驗。這些將是我人生中的一次重要的經歷，將是我今后走上社會后的一筆巨大的財富。這次實習的收獲對我來說有不少，我自己感覺在知識、技能等方面都有了不少的收獲。總體來說這次是對我的綜合素質的培養，鍛煉和提高。

第三篇：網頁設計實踐報告

中南大學

本科生課程設計(實踐)設計報告

(大學計算機基礎)

題目

學生姓名 指導教師 學院

專業班級

學生學號 梔子花開xxx xxx xxx學院xx工程xxx班 xxx

計算機基礎教學實驗中心

xx年xx 月xx日

目錄

一、任務內容.............3二、設計的步驟................3三、采取的方法與手段...............5四、遇到的問題與解決的辦法............6

五、總結...............7

一、任務內容

原計劃打算以“植物”為主題，在設計過程中發現范圍過于寬泛，無法完成主題的設計。因自己十分喜愛梔子花且有所種植經歷，經考慮后重新確定了以“梔子花”為主題的網頁設計內容。主要分為

一、梔子花的文化，二、梔子花的種類和生長特性以及

三、我的梔子花三個模塊。

其中，模塊一使用幻燈片進行演示，主要分為關于梔子花的詩句、梔子花的傳說以及梔子花的蘊涵三個部分。模塊二采用網頁模板進行展示，主要介紹了大葉梔子和雀舌梔子兩種梔子。模塊三主要展示了自己拍攝的梔子花圖片。希望通過我的展示，讓他人對梔子花有所了解。

二、設計步驟

一、構思

首先，對梔子花的種類進行簡單的介紹；其次，對梔子花的文化內涵進行簡要描述；最后，展示自己種植的梔子花成果。因此，此次作業共由三部分網頁【

一、主頁、二、梔子花的種類和生長特性、以及

三、自己種植的梔子花的圖片三個模塊。】和一組幻燈片【梔子花的文化】構成。其中模塊二【梔子花的種類和生長特性】采用網頁模版組成，主要介紹了兩類梔子花——大葉梔子和雀舌梔子，更加便于了解。

二、取材

主要從網絡上獲取所需的圖片、音樂等關于梔子花的素材，其中部分照片從個人相冊中獲取。

三、設計

（一）網頁設計

模塊

一、梔子花的文化以及模塊

三、我的梔子花采用網頁設計。

在首頁添加表格，在表格內增添標題欄以及字幕，增添了圖片、背景圖片、背景音樂、文字、藝術字對首頁進行豐富和充實。在部分文字以及圖片上增加超鏈接，與三個模塊進行連接，便于翻閱。

在模塊二中采用網頁模板進行展示，主要介紹了大葉梔子和雀舌梔子兩種梔子。在模板內采用表格對網頁進行劃分，對梔子花進行概述和分類描述。插入圖片，便于直觀的了解各個種類的梔子花。其中，各個種類的梔子花展示位于網頁模板的右方，在左方進行總說，并通過超鏈接與梔子花的分類說明建立聯系。

在模塊三中，通過繪制表格對網頁進行大小不同的劃分，插入梔子花的圖片拼接成整個網頁。

（二）幻燈片設計

此組幻燈片主要用來介紹梔子花的文化。在幻燈片上主要增添了背景圖片、背景音樂以及大量的文字說明，未對幻燈片進行大量的美化和修飾，主要目的是為了讓他人關注了解梔子花的豐富的內涵和文化。

（三）flash設計

此次flash設計主要用于美化模塊二中對大葉梔子以及雀舌梔子的介紹過程。

四、美化

（一）添加背景音樂

在主頁以及各個模塊中均插入了背景音樂。

（二）設計網頁過渡

（三）添加超鏈接

三、采用的方法與手段

（一）使用Frontpage制作網頁

單擊新建網頁可選擇新建空白網頁或其他網頁模版。

單擊表格，選定繪制表格或布局表格或單元格即可繪制單元格。

選定單元格，單擊鼠標右鍵選定背景即可插入背景圖片。

選定網頁，單擊鼠標右鍵，選定網頁屬性，瀏覽格式即可添加網頁背景。選定單元格，即可輸入文字。

選定插入，選擇插入圖片或藝術字即可插入圖片或藝術字。

選定插入，選擇交互式按鈕，即可插入字幕。

選定格式，選擇網頁過渡，即可設計網頁過渡效果。

（二）使用Powerpoint制作幻燈片

單擊鼠標右鍵，選定背景，選定其他填充效果，瀏覽選定圖片即可添加背景圖片。

單擊插入，選擇圖片，即可添加圖片或者藝術字。

選定文字，單擊鼠標右鍵，選擇自定義動畫即可添加自定義動畫。選定幻燈片，單擊鼠標右鍵，選擇自定義動畫即可添加自定義動畫。選定藝術字，單擊鼠標右鍵，選擇自定義動畫即可添加自定義動畫。、（三）使用Flash制作動畫

單擊插入新建元件，即可進行元件的編輯。

單擊15幀或30幀，單擊鼠標右鍵，選擇插入空白關鍵幀。

單擊第一幀或第15幀，選擇補間，選擇形狀或動畫即可。

（四）其他

單擊鼠標右鍵，選定背景，選定背景音樂，即可插入背景音樂。

選定圖片、藝術字或文字，單擊鼠標右鍵，選定超鏈接，即可設置超鏈接。

四、遇到的問題與解決的辦法

（一）、網頁制作中遇到的問題與解決方法

①、繪制表格完成后，因部分表格過小，難以選定——先在表格內輸入部分字符，即可方便的選定單元格。

②、獲取的圖片素材或大或小，在設計背景圖片時，使背景圖片看起來過于混亂——事先將圖片放大或縮小到一定尺寸，然后設定為背景圖片即可。

③、在添加背景音樂時，無法添加mp3文件——單擊鼠標右鍵，選定網頁屬性，單擊背景音樂，手動輸入背景音樂的mp3文件名即可。

④、添加背景音樂完成后，在瀏覽網頁過程中出現多首背景音樂同時播放的情況——原因是因為在網頁模板設計時，在標題欄網頁也添加了背景音樂，造成了背景音樂的播放的混亂。刪除即可。

⑤、在模塊二，希望能夠添加彈出窗口便于介紹各個梔子花的特性——通過添加網頁模板實現了在一個網頁的部分區域實現不同網頁的展示。

⑥、在網頁模板上返回主頁時，無法返回整頁的主頁網頁——單擊鼠標右鍵，選擇超鏈接，選擇目標框架，選擇整頁框架。

⑦、在打開網頁上后，發現網頁未能顯示圖片——未將網頁與圖片同步保存，導致無法顯示圖片。同步保存即可。

⑧、瀏覽圖片時，發現無法打開超鏈接——原來在設置超鏈接時將路徑設置成了絕對路徑，改為相對路徑即可。

⑨、無法插入Flash文件——事先應將制作好的Flash文件發布，單擊插入，單擊圖片，單擊Flash文件即可插入Flash文件。

（二）、幻燈片制作中遇到的問題與解決方法

①、設置背景音樂完成后，播放幻燈片時，單擊鼠標后音樂才播放，再次單

擊鼠標時，音樂就停止播放——單擊鼠標右鍵，單擊背景，單擊音樂播放，單擊選擇為第一張幻燈片前開始，第四張幻燈片（最后一張幻燈片）結束后結束即可。

（三）、Flash制作中遇到的問題與解決方法

①、在場景中即設計元件，無法單獨設計元件——單擊插入，單擊新建元件即可。

②、無法插入圖片——單擊文件，單擊導入，選擇圖片導入到舞臺即可。③、無法循環播放Flash——單擊控制，選擇循環播放即可。

④、設計完成后發現是無效幀——需設置空白關鍵幀而不是關鍵幀。

五、總結

通過三周的網頁設計，深深體會到了動手實踐操作的重要性，在以往的課堂上，單單只是聽老師講解制作要點，看老師制作過程，但只有通過自己的實踐操作并從中發現問題、解決問題，才能真正了解和掌握學習的內容。

在網頁設計中出現問題是免不了的，但是出現問題后一定需要自己想辦法解決，通過詢問同學，查找書籍或者在網頁上搜索都可以，但一定要自己主動地去尋找答案才能解決問題。

在網頁設計過程中，很多問題的出現都是因為在細微之處出現了錯誤，要想較為順利的完成網頁制作，按照程序一步步來是十分重要的。同時也要細心，不能憑主觀臆斷來進行制作。切不可急功近利，應根據自己的能力進行網頁設計，否則，畫虎不成反類犬。

第四篇：網頁設計報告

心得體會之網頁設計

網頁設計報告

網頁設計伴隨著網絡的快速發展而快速興起，作為上網的主要依托，由于人們使用網絡的頻繁而變得非常重要。生活中我每天上網都要接觸到網頁，原來沒有留意過網頁的設計，但是經過這段時間的學習了解，現在我打開一個網頁都會習慣性的先看看排版、布局和色彩運用。

通過老師的講解和對課本的翻閱，我學習到了一些關于建設網站和制作網頁的知識，對網頁制作的基礎知識也有了一定的掌握。通過Dreamweaver制作網頁，我用到了一些基本的功能：圖片插入和對齊設置；文字的格式、顏色、背景顏色的設置等。但是在自己嘗試著做的時候，總是出現這里那里的問題。不是圖片不能固定在自己想要的位置，就是滾動文本的顯示區域不知道為什么撐過了頁面，還有就是不同分辨率、不同瀏覽器都會對瀏覽網頁產生影響。而且在CSS方面，我總是不太熟悉各種代碼是控制哪些東西的。除了查找解決問題我還總結了經驗。例如：

1、命名站點或者文件夾的的時候一定要注意，最好用相應的英語或者漢語拼音，要見名知意，如圖片文件夾用image或者tu，這樣可以避免頁面調用時不正確的現象發生。

2、調用Style時可以單擊鼠標右鍵選擇Custon Style來調用Style標準，也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。在這個過程中，我同樣認識到網頁設計不是一門學科的獨秀，而是多種課程的綜合，它是Flash、Photoshop等網頁軟件的綜合應用。例如Flash提供了功能齊全的繪圖和編輯圖形工具。可以直接在編輯區里繪畫，編輯修改非常靈活，它的另一大特點是“交互性”強。在動畫播放時，可以用鼠標或鍵盤對動畫的播放進行控制，可以很直觀的反映出效果。

頁面設計應以美觀、大方、簡潔為原則，保持一致的風格。為了達到最佳的視覺表現效果，應講究整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。網頁最主要的功能就是給每個上網者提供一種形式，讓他們能夠了解網站提供的信息。要研究網頁設計，就需要站在用戶的角度來看。用戶是一個網站成敗的關鍵。如果用戶要花很多時間進入網站，很有可能他會立即關掉網站，或者網站操作很不方便用戶也會馬上離開，這種網站是很失敗的設計，只會讓用戶失望的離去。所以網頁容量即包括圖像在內的網頁字節數最好不要超過50K。

心得體會之網頁設計

理提交的信息（如CGI腳本）。不使用處理腳本就不能搜集表單數據。表單通常是交由CGI（公共網關接口）腳本處理。CGI是一種在服務器和處理腳本之間傳送信息的標準化方式。CGI腳本比較典型的是使用Perl語言編寫，當然也有其他語言如C++，Java，VBScript或JavaScript。在創建交互表單之前，接洽您的ISP或服務器管理員以確認CGI腳本可以在您的服務器上運行。表單由文本域、復選框、單選框、菜單、文件地址域、按鈕等表單對象組成，所有的部分都包含在一個由標識符標志起來的表單結構中。表單的種類有注冊表、留言薄、站點導航條、搜索引擎等。而一個站點（site）是一個存儲區，它存儲了一個網站包含的所有文件。Dreamweaver的使用是以站點為基礎的，必須為每一個要處理的網站建立一個本地站點。相對路徑-以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對。絕對路徑-以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。其實絕對路徑與相對路徑的不同處，只在于描述目錄路徑時，所采用的參考點不同。由于對網站上所有文件而言，根目錄這個參考點對所有文件都是一樣的，因此，運用以根目錄為參考點的路徑描述方式才會被稱之為絕對路徑。

針對我所學的平面設計方向，那么這次應用到了創意思維，版面設計，色彩配置。圖形創意等方面都很重要，對于網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處，版式設計通過文字圖形的空間組合，表達出和諧與美。不積跬步，無以至千里。我已經在老師的指引下邁入了網頁設計的大門，在今后的閑余時間繼續認真學習制作網頁的更多知識以實現自身技能的提高。

第五篇：網頁設計報告

電商2班201341440222李彪

網 頁 設 計 報 告

電商2班201341440222李彪