李名凱網(wǎng)頁設計實訓心得

電子信息學院

網(wǎng)頁電子信息學院設計實訓報告

班級：10級計算機網(wǎng)絡班學號：10303230126姓名：李名凱指導老師：周老師

實訓時間：201*.06.13201*.06.17

-1-

電子信息學院

實訓報告

一、實習目的：

通過教學實習掌握站點制作、站點測試與發(fā)布技術(shù)。會綜合利用Fireworks、Flash和Dreamweaver三個軟件進行靜態(tài)網(wǎng)站的設計。

二、實習內(nèi)容：

1.用Fireworks處理圖片。對圖片裁剪、鈍化、高斯模糊。設置圖片的GIF動畫格式，制作標題動畫。對文字應用效果。利用Fireworks制作導航條并導出格式為html。

2.用Flash制作標題動畫。首頁中的動畫不超過20M。制作按鈕來超級鏈接到其他頁面。3.使用Dreamweaver布局視圖，設置本地站點。在標準視圖和布局視圖模式相互轉(zhuǎn)換。建議使用布局視圖，在標準模式中插入層對象制作層動畫，利用行為面板添加鼠標行為，制作翻轉(zhuǎn)動畫，使用CSS樣式統(tǒng)一網(wǎng)頁中文字樣式，插入Fireworks中的GIF文件及導入Flash中的SWF文檔，設置文檔間的超級鏈接。

三、具體要求：

1、利用Dreamweaver制作一個靜態(tài)網(wǎng)站，要求網(wǎng)站有特色，整個網(wǎng)站的內(nèi)容和形式要統(tǒng)一，應能夠反映一個簡單的主題�？梢赃x擇制作《個人網(wǎng)站設計》、《企業(yè)網(wǎng)站設計》、《文化網(wǎng)站的設計》、《娛樂網(wǎng)站設計》或者其他自己認為適合的網(wǎng)站。

2、作一個主頁面，至少3個次頁面。

3、必須用到框架、表格或?qū)优虐婕夹g(shù)、Flash技術(shù)和圖像處理技術(shù)，使網(wǎng)站具有合理的外觀和功能。

4、主頁基本要求：

頁頭Logo，準確無誤地標識站點和企業(yè)標志；網(wǎng)頁標題動畫，可以制作成GIF動畫或者Flash動畫；導航條；

E-mail地址，用來接受用戶垂詢；聯(lián)系信息，如普通郵件地址或電話；5、制作一個表單頁面。6、某個頁面有滾動字幕。7、為一個頁面添加背景音樂。8、至少添加一種行為效果。

9、整個網(wǎng)站各頁面之間保持風格一致，頁面之間要有合理的超級鏈接。

電子信息學院電子信息學院

四、網(wǎng)站設計思路：

我做的大致算是一個個人主頁的小型網(wǎng)站。個人主頁，一般都會包括首頁，相冊，鏈接，一些個人喜歡的文字加圖片，我的個人主頁也不例外，包括次首頁（個人喜歡的的文章加圖片），我的作品（里面包括自己做的三個FLASH動畫），文章（一些自己喜歡的文章），相冊（平時的一些照片），關(guān)于（關(guān)于自己的文字，關(guān)于本站的一些說明），鏈接（比較有名的站點）。不同的是，我的這個個人網(wǎng)站算是自己天馬行空的想了一些故事內(nèi)容。

五、網(wǎng)站設計過程：

準備了一些基本的素材，開始主頁布局。我的網(wǎng)站素材是一邊做一邊找的，因為前期并不知道應該怎么把自己的個人網(wǎng)站應該怎么做，所以也不知道需要什么素材。

因為還沒有學動態(tài)網(wǎng)頁的制作方法，所以全部都只能做成靜態(tài)網(wǎng)頁了。找了幾個素材圖片，用PS處理過后，找了一張小圖片利用圖片的重復拼接成一張不受瀏覽器窗口大小限制的背景圖片。具體代碼是在標簽里用css控制的。

次頁面包括如下些內(nèi)容：首頁、作品、文章、相冊、關(guān)于、鏈接以及反饋表。這些頁面是用模板做的，上面的圖片，導航條以及下面的版權(quán)聯(lián)系方式是不用改變的，都保持著首頁的風格，背景圖一樣，字體與樣式一樣，圖片風格一樣。中間是兩個可編輯區(qū)域。

在所有的頁面導航條下面，插入層對象制作了一個層動畫，來回移動的層，里面存放日期，利用行為面板為此層添加了鼠標行為，單擊此層，會出現(xiàn)對話框，“歡迎您訪問我的個人主頁！”，做布局大多使用表格布局，使用了少量的css樣式，字體，字號，顏色都統(tǒng)一套用相應的樣式。

*{padding:0px;margin:0px;}body{}

其中*{padding:0px;margin:0px;}是為了消除瀏覽器默認的10像素的空白邊，這為布局大大提供了方便。

background-image:url(mback.jpg);background-position:center;

電子信息學院電子信息學院

然后就是次首頁，就是進入次頁面的第一個頁面。我放了一張圖片，是一個方向指示路標，將上面的路標用PS改成自己想要的字，然后添加熱區(qū)加鏈接，成了一個“不像樣”的導航條。然后加了一個浮動頁面，并進行了相關(guān)的設置，代碼如下：

其中第二個是鏈接的頁面，第三個是讓這個浮動框架背景透明，讓人看上去就像是一個頁面。第四個隱藏了邊框，更像一個頁面了。第五個設置和第六個了這個浮動框架的寬和高，最后一個設置了不允許出現(xiàn)滾動條。為了美觀，頁面中間最好不出現(xiàn)。

也許我們有很多不同的地方，但是我們通過各方面的渠道，明白了解了一些代碼的運用，同學也借鑒了一些別人的代碼。

后面的就都是相當于分頁的東西了，比較簡單，當然也廢了不少心思就是了。六、實訓中遇到的難點及解決辦法：

其實這個網(wǎng)頁真正做完只用了一個星期中的最后兩天，前三天根本毫無頭緒。完全不知道該怎么做，該放些什么東西，而這些東西又該放在那里；想做的更加漂亮，試著用了flash，后來卻發(fā)現(xiàn)，單個頁面再怎么漂亮，與分頁不協(xié)調(diào)的話也達不到正題合格的效果。想的太多，不知道怎么開頭，定哪個主題，背景，色調(diào)，文字，布局都，后來，開始做，而且覺得越做越有頭緒了，所以我覺得，還是不要想的太多，太復雜了，不要追求完美，不要做的網(wǎng)頁太多，搞到最后，只會讓自己迷失了方向。其實，這就是一個關(guān)于“設計”的問題，主要是現(xiàn)階段還沒有經(jīng)驗。

還有就是布局的時候總是不能做到很美觀，總是這里那里出問題，不是圖片不能固定在自己想要的位置，就是滾動文本的顯示區(qū)域不知道為什么撐過了頁面。再要么最頭疼的就是，不同分辨率，不同瀏覽器，不同的版本都會對瀏覽網(wǎng)頁造成重大的影響，最后我決定不去管這么多…..就這么做了。直到現(xiàn)在，背景圖片都還是重復鋪滿的，而并不能剛好。

CSS方面，總是不太熟悉各種代碼是控制哪些東西的，不過好在我有百度。也順便學了不少東西。

七、實訓心得：

在我看來，設計網(wǎng)頁，應該先策劃，策劃很重要，加上創(chuàng)意，配色很重要，技術(shù)與鑒賞能力是最主要的。建立站點的時候，各個文件夾取名的時候，最好用相應的英語，見名知意，如圖片文件夾用image，網(wǎng)頁文件夾用html。

電子信息學院電子信息學院

在所有配色當中，不同的顏色傳達著不同的意義也有不同的象征。如白色代表著：清潔、天真、潔凈、真理、和平、冷淡、貧乏；灰色讓人聯(lián)想到灰塵、石頭、水泥、白銀，象征著中庸、平凡、溫和、謙讓，它給人以中立和高雅的感覺。太多的顏色會給人帶來視覺上的疲勞。所以，在我下載準備素材的時候，就選擇用灰色做背景顏色，灰色太貧乏，就加上亮色的鈕扣起到“中和”的作用。

通過此次實訓,我覺得平面設計的創(chuàng)意思維、版面設計、色彩配置、圖形創(chuàng)意等方面都有很重要，對于網(wǎng)頁制作來說，我覺得是一個以多學科設計為基礎，受到包括視覺藝術(shù)、技術(shù)、內(nèi)容的多種影響。網(wǎng)頁設計的技術(shù)不算什么困難，真正困難的是網(wǎng)頁的設計創(chuàng)意，文字我覺得也很重要，有些人瀏覽你的網(wǎng)頁不是喜歡上你的艷麗漂亮的圖片，也許是喜歡上你的文字，那種感動人心的，唯美的文字。文字與圖片要搭得上調(diào)，不可能用一張美女圖做背景，上面卻寫有關(guān)于親情的文章。也就是整體的搭配問題。

通過此次實訓，使我對于網(wǎng)頁制作的三大軟件有了進一步的了解，各功能都能夠?qū)崿F(xiàn)。提高了自己的鑒賞能力，綜合搭配能力，也對以前學過的內(nèi)容進行了綜合的復習。

通過此次實訓，我更了解到，生活中有許多色彩，搭配顏色的時候，聯(lián)想到生活中的東西會做的更漂亮，給人一種親切感，現(xiàn)在看到什么東西，我就會聯(lián)想到做網(wǎng)頁的時候，還有怎么布局。反正此次實訓收獲很多。

李名凱

二O一一年六月十六日

電子信息學院

擴展閱讀：工作總結(jié)

工作總結(jié)

兩個月的磨刀練陣，按理說，自己到底是寶刀還是銹鐵應該可以從這些日子的點滴表現(xiàn)中露出應有的光澤了，然而直至目前，我卻對自己這些許的光澤沒有信心雖然我堅信自己不是銹鐵！

兩個月來，我一直堅守在技術(shù)組崗位上練兵。在技術(shù)組兩個月的工作生活，我感觸最深的就是，這里是我的第二個家，技術(shù)工作可以在快樂中完成。作為一個技術(shù)員，我很自豪，只因為這是我夢寐以求的事業(yè)。我將它視為我的夢想，我的生活。我很慶幸我抓住了這份工作，更感謝學校給了我們這樣的機會。讓我們不斷充實自己，也讓我們更能展現(xiàn)自己。由于在此之前我都不是很自信，也不敢獨自去面對一些繁瑣的事。但現(xiàn)在我不怕了，我有信心和勇氣獨自去面對、去挑戰(zhàn)。

我一直盼望著自己能早點去感受工作的境地，本以為只會在畢業(yè)后才可能去工作，沒想到現(xiàn)在就能實現(xiàn)了。參加這份工作后，我有很多感悟：“有得必有失�！�

我在工作中收獲了很多：在這里我學會了如何去和別人一起和睦相處，更學會了如何去與別人一起合作；我學會了如何運用自所學的知識去解決問題，發(fā)現(xiàn)這些知識對我們真的很有用，很多都是我們平時不知道的，但學了卻對我們百利而無一害，同時也讓我覺得上大學花錢值。我還從中提高了自己的動手能力。我為此而感到欣慰。但美中不足的是，我為了這份工作，我也失去了很多。比如我的自由時間縮短了，我更多的時間都花在了工作上，我的生活開始變得有規(guī)律了，變得約束了，我并不覺得這對我有多大的影響。我至少還能合理安排自己的時間去學習去工作。它讓我變得很充實，沒有了以往的空虛感。我每天的時間都很緊迫，幾乎沒有喘氣的機會，但人生不就該如此嗎?我想，作為學生的我們就應該要有這樣的吃苦精神。俗話說的好：“吃得苦中苦，方為人上人�！�

我們的工作崗位是一個特殊的崗位，我們沒有工資但我們還是一樣的快樂。因為我們有了更大的收獲，它吸引著我們?yōu)樗�奉獻，為它奮斗。我們的領導就是我們的老師，本以為這種人際關(guān)系的距離感、層次感只可能加強，但在網(wǎng)店工作讓我驚喜地發(fā)現(xiàn)自己原先的判斷錯了。我們的聶書記、韓老師、劉輔導員三位領導都對我們這些新人加學生親切有加，他們十分看重我們，也完全相信我們，把它完全交托給我們。特別是劉輔導員，在工作之余，以朋友的姿態(tài)經(jīng)常和我們一起打球，坦懷聊天，非但不擺領導的架子，而且還以慈母的關(guān)愛之心在引導我們做好工作，讓我真切感受到了久違的母愛溫情。在工作中，只要你需要，他們隨時給予熱情地指導；工作之余，大家開懷談笑，不分彼此。正因為如此，在網(wǎng)店工作，讓我體會了在愉快中完成工作的歡欣。

我在工作上的收獲主要有：１、基本學會使用和維護網(wǎng)站；２、基本掌握使用Photoshop處理圖片；３、基本學會了如何去創(chuàng)建一個網(wǎng)店和經(jīng)營一個網(wǎng)店；４、基本學會一些計劃書等公文的一些寫作方法和技巧等。在這期間我不僅可以較好地配合其他成員一同完成各項工作任務，還可以自己獨立完成一些事務。兩個月的時間，我配合其他成員一起完成了達三千多的銷售額，我為我們的業(yè)績感到無比的欣慰。

在這期間，工作上最大的不足主要有：1、工作質(zhì)量不夠高，沒達到廣大網(wǎng)名的青睞；2、網(wǎng)頁設計版面不夠新穎，缺乏新意；3、產(chǎn)品信息不夠直觀全面，主次不突出；4、缺乏基本的工作知識，在開展具體工作中，常常表現(xiàn)生澀，甚至有時還覺得不知所措；5、對我們的工作情況缺乏全面具體的了解，從而影響到相關(guān)工作的進程；6、對電腦知識的掌握度較低，這直接影響到相應的工作質(zhì)量；7、工作細心度不夠，經(jīng)常在小問題上出現(xiàn)錯漏；8、辦事效率不夠快，對領導的意圖領會不夠到位等。

經(jīng)過兩個月的工作學習，我做出了一定的成績：1、獨立完成了成批套的圖標；2、配合其他同事開展日常接待、后勤服務和衛(wèi)生清理工作；3、負責做好美工這一塊；4、完成每個月的工作總結(jié)及每次例會的分析和觀點；5、配合其他成員完成了網(wǎng)店宣傳和策劃。

就總體的工作感受來說，我覺得這里的工作環(huán)境是比較令我滿意的。首先是領導的關(guān)愛以及工作條件在不斷改善給了我工作的動力；其次是同事間的友情關(guān)懷以及協(xié)作互助給了我工作的舒暢感和踏實感；第三就是目前正在營造形成我們網(wǎng)店特有的“企業(yè)文化”氛圍給了我工作的信心。

我知道，上面的工作表現(xiàn)也許不能讓領導感到滿意，如果完全依據(jù)這些表現(xiàn)來決定是否可以繼續(xù)留在這里工作學習，坦白說，我自己并沒有太大的信心。但我堅信自己能夠在今后的工作中會表現(xiàn)得更好。在此，我想借這次機會提兩點想法：

第一點：我希望有專業(yè)型人才給予我們更多的指導，這樣我們的成績才會更趨于成熟和完美。理由主要是：（1）、我們都是學生，沒有足夠的經(jīng)驗和商場戰(zhàn)略；（2）、我們的網(wǎng)店本來就不夠完善，很多東西我們都是力所不能及；（3）、我們對應急性問題欠缺思考，需要鞏固。第二點：我希望我們的工作制度應該嚴謹，不要像菜園子，想進就進，想出就出。

上面兩點想法懇請領導給予我理解、信任與支持。謝謝。我的目標：我永遠堅信,天上那顆最靚的星星一定是為我而閃爍的！

Ialwaysbelievethatheaventheheartofthemostdesirablestarswillbeformeflashing.

201*.7.

友情提示：本文中關(guān)于《李名凱網(wǎng)頁設計實訓心得》給出的范例僅供您參考拓展思維使用，李名凱網(wǎng)頁設計實訓心得：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《李名凱網(wǎng)頁設計實訓心得》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.7334dd.com/gongwen/585512.html

• 上一篇：網(wǎng)頁設計實訓心得
• 下一篇：JAVA實訓心得體會