網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告.doc

湖北輕工職業(yè)技術(shù)學(xué)院網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)設(shè)計(jì)報(bào)告姓 名：張莉玲班 級(jí)：A09市場(chǎng)營(yíng)銷(xiāo)（3）班學(xué) 號(hào)：0903041342指 導(dǎo) 教 師：吳瑞設(shè) 計(jì) 時(shí) 間：2010.12.132010.12.18湖北輕工職業(yè)技術(shù)學(xué)院信息工程系目 錄一.實(shí)訓(xùn)設(shè)計(jì)目的2二.實(shí)訓(xùn)設(shè)計(jì)題目描述和要求3三.實(shí)訓(xùn)設(shè)計(jì)報(bào)告內(nèi)容33.1 設(shè)計(jì)方案33.2 設(shè)計(jì)過(guò)程43.3 設(shè)計(jì)結(jié)果4四.結(jié)論與心得4一、實(shí)訓(xùn)目的1.進(jìn)一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技術(shù)規(guī)范；2.鞏固運(yùn)用Dreamweaver網(wǎng)頁(yè)制作軟件制作網(wǎng)頁(yè)的知識(shí)3.鞏固綜合運(yùn)用Dreamweaver軟件完成網(wǎng)站建設(shè)任務(wù)的方法，能獨(dú)立設(shè)計(jì)一4.個(gè)內(nèi)容完整、圖文并茂、技術(shù)運(yùn)用得當(dāng)?shù)木W(wǎng)站；5.具備獨(dú)立撰寫(xiě)實(shí)訓(xùn)報(bào)告等科技文件的基本能力；6.在網(wǎng)頁(yè)設(shè)計(jì)的實(shí)踐中培養(yǎng)分析問(wèn)題、解決問(wèn)題的能力，培養(yǎng)協(xié)作、交流的能力，7.培養(yǎng)創(chuàng)新能力和團(tuán)隊(duì)意識(shí)； 8.為今后從事網(wǎng)站開(kāi)發(fā)、維護(hù)和管理奠定基礎(chǔ)。 二、實(shí)訓(xùn)設(shè)計(jì)題目描述和要求 此次的實(shí)訓(xùn)題目是制作一個(gè)小型購(gòu)物網(wǎng)站，模仿淘寶店鋪選擇一類(lèi)商品制作一個(gè)銷(xiāo)售網(wǎng)站。1站點(diǎn)規(guī)劃，搜集資料。確定網(wǎng)站主題內(nèi)容，規(guī)劃站點(diǎn)結(jié)構(gòu)，從網(wǎng)上搜索相關(guān)資料（圖片、文字等）。2.進(jìn)行主頁(yè)設(shè)計(jì)。構(gòu)思主頁(yè)布局，進(jìn)行主頁(yè)標(biāo)題圖片的設(shè)計(jì)，進(jìn)行主頁(yè)其余圖片的設(shè)計(jì)和頁(yè)面內(nèi)容的錄入，最后進(jìn)行主頁(yè)的整體優(yōu)化設(shè)計(jì)。3.網(wǎng)頁(yè)設(shè)計(jì)。除主頁(yè)以外的網(wǎng)頁(yè)設(shè)計(jì)，首先設(shè)計(jì)網(wǎng)頁(yè)模版，一部分網(wǎng)頁(yè)由模版生成，一部分為單獨(dú)設(shè)計(jì)。包括版面設(shè)計(jì)和圖形設(shè)計(jì)、內(nèi)容錄入等。4.綜合優(yōu)化。在瀏覽器中對(duì)完成的網(wǎng)站逐頁(yè)打開(kāi)測(cè)試，包括鏈接正確與否，頁(yè)面打開(kāi)時(shí)間，圖片和動(dòng)畫(huà)是否丟失等。 此次實(shí)訓(xùn)要求是：1站點(diǎn)結(jié)構(gòu)與命名。站點(diǎn)文件夾為班級(jí)學(xué)號(hào)姓名；站點(diǎn)文件夾中所包含文件夾：Images （存放圖片文件），Templates（存放模版文件），pages（存放網(wǎng)頁(yè)文件）； 站點(diǎn)文件夾中所包含文件： index （首頁(yè)）。2網(wǎng)站題材選擇。內(nèi)容，題材不限，可以選擇自己所感興趣的商品，內(nèi)容充實(shí)、健康。網(wǎng)站標(biāo)題自擬。3網(wǎng)站技術(shù)要求。頁(yè)面布局合理，色彩和諧，鏈接正確，圖文并茂并茂。網(wǎng)站頁(yè)面大小應(yīng)該滿足800*600分辨率的客戶，兼顧1024*768分辨率。4.站點(diǎn)中網(wǎng)頁(yè)總數(shù)不少于20頁(yè)。主頁(yè)所陳列的商品不得少于15個(gè)，商品分類(lèi)不得少于5類(lèi)，要有清晰的網(wǎng)站結(jié)構(gòu)。網(wǎng)站結(jié)構(gòu)圖：主 頁(yè)導(dǎo) 航 品 種好 評(píng)品 牌保 養(yǎng)禮 品首 頁(yè)貴賓新品到達(dá)戀愛(ài)紀(jì)念?lèi)?ài)意表白生日祝?；槎Y慶祝十五種產(chǎn)品產(chǎn)品介紹三.實(shí)訓(xùn)設(shè)計(jì)報(bào)告內(nèi)容 3.1 設(shè)計(jì)方案 本網(wǎng)站應(yīng)該算是一個(gè)淘寶購(gòu)物的小型網(wǎng)站。本站站名是I 1ove me飾品店，關(guān)于本站站名的來(lái)源：自己愛(ài)自己。因?yàn)槲矣X(jué)得現(xiàn)在這個(gè)社會(huì)，是需要溫暖，是需要愛(ài)的。特別是如今工作壓力的大增，年輕男女開(kāi)始不愛(ài)惜自己的身體，經(jīng)常加班工作。所以我希望通過(guò)這個(gè)網(wǎng)站，讓年輕男女不能在精神上給予自己愛(ài)，那么物質(zhì)上就滿足自己愛(ài)自己的理念。網(wǎng)站里面的所有東西都是銀質(zhì)飾品，好看但不貴。適合工作男女的消費(fèi)水平。本來(lái)是想在這個(gè)網(wǎng)站上插一段溫馨的背景音樂(lè)是，但由于時(shí)間關(guān)系，所以放棄了。個(gè)人淘寶主頁(yè)，一般都會(huì)包括首頁(yè)，導(dǎo)航，鏈接和一些產(chǎn)品介紹圖片。我的個(gè)人主頁(yè)也不例外，包括次首頁(yè)，導(dǎo)航（關(guān)于個(gè)人淘寶網(wǎng)站的活動(dòng)、產(chǎn)品類(lèi)別等），銀質(zhì)飾品（個(gè)人認(rèn)為最好看的銀質(zhì)飾品），鏈接（所有飾品的有關(guān)鏈接）。3.2 設(shè)計(jì)過(guò)程剛開(kāi)始我已經(jīng)把所有的素材都整理好（圖片，模版，相片），開(kāi)始布局。此站大多數(shù)用的是層來(lái)制作的，而表格只用了兩到三次。其中網(wǎng)站主頁(yè)像三字型，因?yàn)樽铋_(kāi)頭是一張帶有導(dǎo)航條的圖片，中間分為兩塊，2/3用于放產(chǎn)品圖片，1/3用于放產(chǎn)品分類(lèi)，像被分開(kāi)的三個(gè)部分這種布局方式看起來(lái)比較整齊、簡(jiǎn)潔和美觀。我的網(wǎng)站共有1個(gè)主頁(yè)面，26個(gè)次頁(yè)面，1個(gè)登陸頁(yè)面，1個(gè)注冊(cè)頁(yè)面。產(chǎn)品介紹統(tǒng)一用的是模版來(lái)制作的網(wǎng)頁(yè)，以保證網(wǎng)站統(tǒng)一的頁(yè)面風(fēng)格。我是用自己的姓名和學(xué)號(hào)命名網(wǎng)站名，用以方便存儲(chǔ)和轉(zhuǎn)發(fā)。網(wǎng)站整體背景圖片用的是白底雪花，用來(lái)突出冬天、圣誕即將來(lái)臨的歡慶場(chǎng)面（如圖一）。突出主題，顏色沒(méi)有過(guò)多、過(guò)雜，用以避免給人一種雜亂的感覺(jué)。圖一我的產(chǎn)品分類(lèi)是用表格做的，大部分的產(chǎn)品圖片是用層來(lái)定位的。因?yàn)閷泳哂徐`活移動(dòng)性，所以很少用表格，大部分用的是層。文子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格。素材、風(fēng)格、模版都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁(yè)。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“09營(yíng)銷(xiāo)(3)班張莉玲”（如圖二），建立的各個(gè)頁(yè)面都放在本地站點(diǎn)中，在網(wǎng)頁(yè)制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放統(tǒng)一類(lèi)型的文件，我在制作時(shí)建立了“image”文件夾用來(lái)存放圖片，“Templates”文件夾用來(lái)存放模版文件，“pages”文件夾用來(lái)存放網(wǎng)頁(yè)文件，這樣可以做到有條不紊，我設(shè)計(jì)的網(wǎng)站首頁(yè)如圖三。以水平線為界，上面是歡迎用語(yǔ)、用戶登錄（如圖四）和免費(fèi)注冊(cè)（如圖五），用以給瀏覽者方便快捷的登陸與注冊(cè)。左下方是淘寶主人的信息，右下方是產(chǎn)品的樣式。圖二圖三 圖四圖五附錄：鼠標(biāo)跟隨代碼第一步：把下面代碼添加到標(biāo)簽中。.spanstyle COLOR: red; FONT-FAMILY: 宋體; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visiblevar x,yvar step=18var flag=0/ Your snappy message. Important: the space at the end of the sentence!var message=歡迎光臨I 1ove me飾品店!message=message.split()var xpos=new Array()for (i=0;i=message.length-1;i+) xposi=-50var ypos=new Array()for (i=0;i=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; i=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; imessage.length-1; i+) var thisspan = eval(document.span+i)thisspan.left=xposithisspan.top=yposivar timer=setTimeout(makesnake(),30)第二步:把如下代碼加入?yún)^(qū)域中!- Beginning of JavaScript -for (i=0;i=message.length-1;i+) document.write()document.write(messagei)document.write()if (document.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;/ - End of JavaScript - -第三步:把改為3.3 設(shè)計(jì)結(jié)果在我看來(lái)，設(shè)計(jì)網(wǎng)頁(yè)，應(yīng)該先策劃，策劃很重要，加上創(chuàng)意，配色很重要，技術(shù)與鑒賞能力是最主要的。建立站點(diǎn)的時(shí)候，各個(gè)文件夾取名的時(shí)候，最好用相應(yīng)的英語(yǔ)，見(jiàn)名知意?？粗詈笞约鹤龀鰜?lái)的網(wǎng)頁(yè)，使我自己非常有成就感。讓我更加了解到，生活中有許多色彩，搭配顏色的時(shí)候，聯(lián)想到生活中的東西會(huì)做的更漂亮，給人一種親切感，現(xiàn)在看到什么東西，我就會(huì)聯(lián)想到做網(wǎng)頁(yè)的時(shí)候，還有怎么布局。反正此次實(shí)訓(xùn)收獲很多。最后，我想，如果此次實(shí)訓(xùn)老師是要我們分組來(lái)做的話，也許，我們可以做得更好，因?yàn)?，一個(gè)想的畢竟不全面，而且，一個(gè)人的申美有限，我們可以分工合作，一個(gè)人做一個(gè)方面的東西，也可以根據(jù)他所善長(zhǎng)的方面來(lái)分工，善長(zhǎng)動(dòng)畫(huà)制作的人做動(dòng)畫(huà)，善長(zhǎng)圖片處理的人做圖片，善長(zhǎng)文字與布局的就來(lái)布局。但是，也許那樣，有些同學(xué)會(huì)懶的動(dòng)手，推著給別人做。四.結(jié)論與心得此次的網(wǎng)頁(yè)實(shí)訓(xùn)讓我嘗到了親自動(dòng)手設(shè)計(jì)網(wǎng)頁(yè)，實(shí)現(xiàn)網(wǎng)上家園的一種成就感。從中我將課堂上的知識(shí)在現(xiàn)實(shí)中得到了一次實(shí)踐，加深了我對(duì)網(wǎng)絡(luò)相關(guān)知識(shí)和網(wǎng)站相關(guān)知識(shí)的理解，熟悉了網(wǎng)絡(luò)的基礎(chǔ)知識(shí)，網(wǎng)站的基礎(chǔ)知識(shí)，尤其是網(wǎng)站的基本原理，和網(wǎng)站設(shè)計(jì)的基本過(guò)程和方法，以及用于設(shè)計(jì)網(wǎng)頁(yè)的基本工具。對(duì)于這次的網(wǎng)頁(yè)設(shè)計(jì)，我對(duì)自己的作品還是感覺(jué)很有成就感，很不錯(cuò)的。但是，在放置背景圖片中，我沒(méi)有做好，背景圖片在網(wǎng)頁(yè)瀏覽中