李名凱網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)心得

電子信息學(xué)院

網(wǎng)頁(yè)電子信息學(xué)院設(shè)計(jì)實(shí)訓(xùn)報(bào)告

班級(jí)：10級(jí)計(jì)算機(jī)網(wǎng)絡(luò)班學(xué)號(hào)：10303230126姓名：李名凱指導(dǎo)老師：周老師

實(shí)訓(xùn)時(shí)間：201*.06.13201*.06.17

-1-

電子信息學(xué)院

實(shí)訓(xùn)報(bào)告

一、實(shí)習(xí)目的：

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

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

1.用Fireworks處理圖片。對(duì)圖片裁剪、鈍化、高斯模糊。設(shè)置圖片的GIF動(dòng)畫格式，制作標(biāo)題動(dòng)畫。對(duì)文字應(yīng)用效果。利用Fireworks制作導(dǎo)航條并導(dǎo)出格式為html。

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

三、具體要求：

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

2、作一個(gè)主頁(yè)面，至少3個(gè)次頁(yè)面。

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

4、主頁(yè)基本要求：

頁(yè)頭Logo，準(zhǔn)確無(wú)誤地標(biāo)識(shí)站點(diǎn)和企業(yè)標(biāo)志；網(wǎng)頁(yè)標(biāo)題動(dòng)畫，可以制作成GIF動(dòng)畫或者Flash動(dòng)畫；導(dǎo)航條；

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

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

電子信息學(xué)院電子信息學(xué)院

四、網(wǎng)站設(shè)計(jì)思路：

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

五、網(wǎng)站設(shè)計(jì)過程：

準(zhǔn)備了一些基本的素材，開始主頁(yè)布局。我的網(wǎng)站素材是一邊做一邊找的，因?yàn)榍捌诓⒉恢�道�?yīng)該怎么把自己的個(gè)人網(wǎng)站應(yīng)該怎么做，所以也不知道需要什么素材。

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

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

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

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

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

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

電子信息學(xué)院電子信息學(xué)院

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

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

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

后面的就都是相當(dāng)于分頁(yè)的東西了，比較簡(jiǎn)單，當(dāng)然也廢了不少心思就是了。六、實(shí)訓(xùn)中遇到的難點(diǎn)及解決辦法：

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

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

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

七、實(shí)訓(xùn)心得：

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

電子信息學(xué)院電子信息學(xué)院

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

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

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

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

李名凱

二O一一年六月十六日

電子信息學(xué)院

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

工作總結(jié)

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

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

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

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

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

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

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

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

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

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

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

上面兩點(diǎn)想法懇請(qǐng)領(lǐng)導(dǎo)給予我理解、信任與支持。謝謝。我的目標(biāo)：我永遠(yuǎn)堅(jiān)信,天上那顆最靚的星星一定是為我而閃爍的！

Ialwaysbelievethatheaventheheartofthemostdesirablestarswillbeformeflashing.

201*.7.

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

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請(qǐng)聯(lián)系我們及時(shí)刪除。

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

• 上一篇：網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)心得
• 下一篇：JAVA實(shí)訓(xùn)心得體會(huì)