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

湖北輕工職業(yè)技術(shù)學(xué)院網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)設(shè)計(jì)報(bào)告姓 名：張莉玲班 級(jí)：A09市場(chǎng)營銷（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ì)過程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)頁制作軟件制作網(wǎng)頁的知識(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ú)立撰寫實(shí)訓(xùn)報(bào)告等科技文件的基本能力；6.在網(wǎng)頁設(shè)計(jì)的實(shí)踐中培養(yǎng)分析問題、解決問題的能力，培養(yǎng)協(xié)作、交流的能力，7.培養(yǎng)創(chuàng)新能力和團(tuán)隊(duì)意識(shí)； 8.為今后從事網(wǎng)站開發(fā)、維護(hù)和管理奠定基礎(chǔ)。 二、實(shí)訓(xùn)設(shè)計(jì)題目描述和要求 此次的實(shí)訓(xùn)題目是制作一個(gè)小型購物網(wǎng)站，模仿淘寶店鋪選擇一類商品制作一個(gè)銷售網(wǎng)站。1站點(diǎn)規(guī)劃，搜集資料。確定網(wǎng)站主題內(nèi)容，規(guī)劃站點(diǎn)結(jié)構(gòu)，從網(wǎng)上搜索相關(guān)資料（圖片、文字等）。2.進(jìn)行主頁設(shè)計(jì)。構(gòu)思主頁布局，進(jìn)行主頁標(biāo)題圖片的設(shè)計(jì)，進(jìn)行主頁其余圖片的設(shè)計(jì)和頁面內(nèi)容的錄入，最后進(jìn)行主頁的整體優(yōu)化設(shè)計(jì)。3.網(wǎng)頁設(shè)計(jì)。除主頁以外的網(wǎng)頁設(shè)計(jì)，首先設(shè)計(jì)網(wǎng)頁模版，一部分網(wǎng)頁由模版生成，一部分為單獨(dú)設(shè)計(jì)。包括版面設(shè)計(jì)和圖形設(shè)計(jì)、內(nèi)容錄入等。4.綜合優(yōu)化。在瀏覽器中對(duì)完成的網(wǎng)站逐頁打開測(cè)試，包括鏈接正確與否，頁面打開時(shí)間，圖片和動(dòng)畫是否丟失等。 此次實(shí)訓(xùn)要求是：1站點(diǎn)結(jié)構(gòu)與命名。站點(diǎn)文件夾為班級(jí)學(xué)號(hào)姓名；站點(diǎn)文件夾中所包含文件夾：Images （存放圖片文件），Templates（存放模版文件），pages（存放網(wǎng)頁文件）； 站點(diǎn)文件夾中所包含文件： index （首頁）。2網(wǎng)站題材選擇。內(nèi)容，題材不限，可以選擇自己所感興趣的商品，內(nèi)容充實(shí)、健康。網(wǎng)站標(biāo)題自擬。3網(wǎng)站技術(shù)要求。頁面布局合理，色彩和諧，鏈接正確，圖文并茂并茂。網(wǎng)站頁面大小應(yīng)該滿足800*600分辨率的客戶，兼顧1024*768分辨率。4.站點(diǎn)中網(wǎng)頁總數(shù)不少于20頁。主頁所陳列的商品不得少于15個(gè)，商品分類不得少于5類，要有清晰的網(wǎng)站結(jié)構(gòu)。網(wǎng)站結(jié)構(gòu)圖：主 頁導(dǎo) 航 品 種好 評(píng)品 牌保 養(yǎng)禮 品首 頁貴賓新品到達(dá)戀愛紀(jì)念愛意表白生日祝?；槎Y慶祝十五種產(chǎn)品產(chǎn)品介紹三.實(shí)訓(xùn)設(shè)計(jì)報(bào)告內(nèi)容 3.1 設(shè)計(jì)方案 本網(wǎng)站應(yīng)該算是一個(gè)淘寶購物的小型網(wǎng)站。本站站名是I 1ove me飾品店，關(guān)于本站站名的來源：自己愛自己。因?yàn)槲矣X得現(xiàn)在這個(gè)社會(huì)，是需要溫暖，是需要愛的。特別是如今工作壓力的大增，年輕男女開始不愛惜自己的身體，經(jīng)常加班工作。所以我希望通過這個(gè)網(wǎng)站，讓年輕男女不能在精神上給予自己愛，那么物質(zhì)上就滿足自己愛自己的理念。網(wǎng)站里面的所有東西都是銀質(zhì)飾品，好看但不貴。適合工作男女的消費(fèi)水平。本來是想在這個(gè)網(wǎng)站上插一段溫馨的背景音樂是，但由于時(shí)間關(guān)系，所以放棄了。個(gè)人淘寶主頁，一般都會(huì)包括首頁，導(dǎo)航，鏈接和一些產(chǎn)品介紹圖片。我的個(gè)人主頁也不例外，包括次首頁，導(dǎo)航（關(guān)于個(gè)人淘寶網(wǎng)站的活動(dòng)、產(chǎn)品類別等），銀質(zhì)飾品（個(gè)人認(rèn)為最好看的銀質(zhì)飾品），鏈接（所有飾品的有關(guān)鏈接）。3.2 設(shè)計(jì)過程剛開始我已經(jīng)把所有的素材都整理好（圖片，模版，相片），開始布局。此站大多數(shù)用的是層來制作的，而表格只用了兩到三次。其中網(wǎng)站主頁像三字型，因?yàn)樽铋_頭是一張帶有導(dǎo)航條的圖片，中間分為兩塊，2/3用于放產(chǎn)品圖片，1/3用于放產(chǎn)品分類，像被分開的三個(gè)部分這種布局方式看起來比較整齊、簡(jiǎn)潔和美觀。我的網(wǎng)站共有1個(gè)主頁面，26個(gè)次頁面，1個(gè)登陸頁面，1個(gè)注冊(cè)頁面。產(chǎn)品介紹統(tǒng)一用的是模版來制作的網(wǎng)頁，以保證網(wǎng)站統(tǒng)一的頁面風(fēng)格。我是用自己的姓名和學(xué)號(hào)命名網(wǎng)站名，用以方便存儲(chǔ)和轉(zhuǎn)發(fā)。網(wǎng)站整體背景圖片用的是白底雪花，用來突出冬天、圣誕即將來臨的歡慶場(chǎng)面（如圖一）。突出主題，顏色沒有過多、過雜，用以避免給人一種雜亂的感覺。圖一我的產(chǎn)品分類是用表格做的，大部分的產(chǎn)品圖片是用層來定位的。因?yàn)閷泳哂徐`活移動(dòng)性，所以很少用表格，大部分用的是層。文子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格。素材、風(fēng)格、模版都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“09營銷(3)班張莉玲”（如圖二），建立的各個(gè)頁面都放在本地站點(diǎn)中，在網(wǎng)頁制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放統(tǒng)一類型的文件，我在制作時(shí)建立了“image”文件夾用來存放圖片，“Templates”文件夾用來存放模版文件，“pages”文件夾用來存放網(wǎng)頁文件，這樣可以做到有條不紊，我設(shè)計(jì)的網(wǎng)站首頁如圖三。以水平線為界，上面是歡迎用語、用戶登錄（如圖四）和免費(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é)果在我看來，設(shè)計(jì)網(wǎng)頁，應(yīng)該先策劃，策劃很重要，加上創(chuàng)意，配色很重要，技術(shù)與鑒賞能力是最主要的。建立站點(diǎn)的時(shí)候，各個(gè)文件夾取名的時(shí)候，最好用相應(yīng)的英語，見名知意。看著最后自己做出來的網(wǎng)頁，使我自己非常有成就感。讓我更加了解到，生活中有許多色彩，搭配顏色的時(shí)候，聯(lián)想到生活中的東西會(huì)做的更漂亮，給人一種親切感，現(xiàn)在看到什么東西，我就會(huì)聯(lián)想到做網(wǎng)頁的時(shí)候，還有怎么布局。反正此次實(shí)訓(xùn)收獲很多。最后，我想，如果此次實(shí)訓(xùn)老師是要我們分組來做的話，也許，我們可以做得更好，因?yàn)?，一個(gè)想的畢竟不全面，而且，一個(gè)人的申美有限，我們可以分工合作，一個(gè)人做一個(gè)方面的東西，也可以根據(jù)他所善長(zhǎng)的方面來分工，善長(zhǎng)動(dòng)畫制作的人做動(dòng)畫，善長(zhǎng)圖片處理的人做圖片，善長(zhǎng)文字與布局的就來布局。但是，也許那樣，有些同學(xué)會(huì)懶的動(dòng)手，推著給別人做。四.結(jié)論與心得此次的網(wǎng)頁實(shí)訓(xùn)讓我嘗到了親自動(dòng)手設(shè)計(jì)網(wǎng)頁，實(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ì)的基本過程和方法，以及用于設(shè)計(jì)網(wǎng)頁的基本工具。對(duì)于這次的網(wǎng)頁設(shè)計(jì)，我對(duì)自己的作品還是感覺很有成就感，很不錯(cuò)的。但是，在放置背景圖片中，我沒有做好，背景圖片在網(wǎng)頁瀏覽中