1、網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告班級：G093501姓名：孫建武學(xué)號：47指導(dǎo)老師：郭建明實(shí)訓(xùn)時(shí)間：5.95.22甘肅機(jī)電職業(yè)技術(shù)學(xué)院2011年5月20日、實(shí)訓(xùn)目的：1、進(jìn)一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技術(shù)規(guī)范；2、鞏固運(yùn)用Dreamweaver網(wǎng)頁制作軟件制作網(wǎng)頁、特別是制作復(fù)雜網(wǎng)頁的知識；3、鞏固運(yùn)用PS圖像處理軟件進(jìn)行網(wǎng)頁中圖形制作和運(yùn)用flash動畫制作軟件設(shè)計(jì)網(wǎng)頁中動畫的知識；4、鞏固綜合運(yùn)用Dreamweaver、PS、flash三個(gè)軟件完成網(wǎng)站建設(shè)任務(wù)的方法，能獨(dú)立設(shè)計(jì)一個(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)分析問題、解決

2、問題的能力，培養(yǎng)協(xié)作、交流的能力，培養(yǎng)創(chuàng)新能力和團(tuán)隊(duì)意識；7、緊緊圍繞網(wǎng)頁制作的流程：規(guī)劃、設(shè)計(jì)、開發(fā)、發(fā)布、維護(hù)來進(jìn)行網(wǎng)站的開發(fā)，制作出具有較高水準(zhǔn)的靜態(tài)網(wǎng)頁。以此作為學(xué)生學(xué)習(xí)這門課程的階段性總結(jié)，使學(xué)生復(fù)習(xí)、鞏固所學(xué)過的理論，并予以適當(dāng)?shù)纳罨?，進(jìn)一步訓(xùn)練學(xué)生的基本技能（如：搜集資料、整理數(shù)據(jù)、發(fā)現(xiàn)與分析問題、尋求解決問題的方案等），為今后從事網(wǎng)站開發(fā)、維護(hù)和管理奠定基礎(chǔ)。、二、實(shí)訓(xùn)項(xiàng)目星空間街舞俱樂部網(wǎng)站設(shè)計(jì)1、網(wǎng)站主題我的網(wǎng)站的主旨在于從各個(gè)方面全面的介紹星空間街舞俱樂部，包括它的團(tuán)隊(duì)、環(huán)境和課程。另外，網(wǎng)站里還包括我的資料，建立了一個(gè)展示自我形象的平臺。同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁都有統(tǒng)一

3、的風(fēng)格，每一個(gè)網(wǎng)頁的主題色彩都是橙色和藍(lán)色搭配，用以展示星空間街舞俱樂部個(gè)性的效果。其實(shí)最重要的是要做出自己的風(fēng)格，給瀏覽者好的欣賞感受。2、網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字。同時(shí)，查詢相關(guān)的書籍、百度等方式收集所需的文字資料，圖象資料flash動畫和網(wǎng)頁特效等，用以得來更加具有說服力的頁面。要想做好自己的網(wǎng)站，能夠給瀏覽者好的欣賞感受，就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁的素材，這樣就可以做好一個(gè)好的網(wǎng)站。3、網(wǎng)站規(guī)劃我的網(wǎng)站共有7個(gè)主頁面：首頁、介紹、團(tuán)隊(duì)、環(huán)境、課程、聯(lián)系我們和關(guān)于我。每一個(gè)頁面用統(tǒng)一的模塊，以

4、保證網(wǎng)站統(tǒng)一的頁面風(fēng)格。網(wǎng)頁布局主要用框架和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是用CSS設(shè)計(jì)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。4、網(wǎng)站的制作工具做網(wǎng)頁時(shí)主要使用的是Deamweaver。另外，為了處理網(wǎng)頁中的其他元素，還使用了Photoshop等軟件。5、制作網(wǎng)站的網(wǎng)頁素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“093501”，建立的各個(gè)頁面都應(yīng)該放在本地站點(diǎn)中，在網(wǎng)頁制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文

5、件，我在制作時(shí)建立了“img”文件夾來存放圖片。網(wǎng)頁中的CSS樣式文件也應(yīng)統(tǒng)一管理,做到有條不紊，我設(shè)計(jì)的網(wǎng)站的首頁如下圖:SHOT惡躍SHOT惡躍導(dǎo)航欄下面插入了一個(gè)flash，用以給瀏覽者好的視覺享受。左上方插入了一個(gè)圖片滾動效果，左側(cè)有關(guān)于街舞的一些教程，是相關(guān)鏈接的菜單欄，一方面為了布局合理，彌補(bǔ)右邊的空缺，另一方面給瀏覽者提供放便的導(dǎo)航。另外，右邊插入的是表格，表格中的背景是藍(lán)色的。用以體現(xiàn)網(wǎng)站的主題色彩，左邊加入了圖片滾動特效。當(dāng)鼠標(biāo)停在圖片上時(shí)，圖片停止?jié)L動。特效代碼如下：向左無縫滾動/titlebody,html,div,amargin:0;padding:0#demoback

6、ground:#FFF;overflow:hidden;border:1pxdashed#CCC;width:500px;#demoimgborder:3pxsolid#F2F2F2;#indemofloat:left;width:800%;#demo1float:left;#demo2float:left;margin-left:7px;window.onload=function()varspeed=10;/數(shù)字越大速度越慢vartab=document.getElementById(demo);vartab1=document.getElementById(demo1);vartab2=

7、document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML;functionMarquee()if(tab2.offsetWidth-tab.scrollLeft=0)tab.scrollLeft-=tab1.offsetWidthelsetab.scrollLeft+;varMyMar=setInterval(Marquee,speed);tab.onmouseover=function()clearInterval(MyMar);tab.onmouseout=function()MyMar=setInterval(Marquee

8、,speed);向左無縫滾動然后利用模板制作了關(guān)于街舞種類介紹的鏈接，它分為Breaking、Poppin、Hip-hop、Newstyle、Jazz.從而進(jìn)行了全面的介紹，當(dāng)點(diǎn)擊任意一個(gè)舞種按鈕，都會在右下版塊出現(xiàn)對應(yīng)瀏覽文字版塊。如下圖：本月繪新勰本月堆新課程TOMAS教學(xué)柔韌性SH0I齟SIY1.S將SHOW麗HEISTYLE本月繪新勰本月堆新課程TOMAS教學(xué)柔韌性SH0I齟SIY1.S將SHOW麗HEISTYLE苒蟲可逹幾歩前關(guān)懾！好的羿驀靄聲咗創(chuàng)建模板時(shí)，我在右側(cè)建立了關(guān)于街舞教程的導(dǎo)航，這樣可以讓整個(gè)界面顯得整潔、有序。與介紹街舞類型的主頁面采用了相同的背景，相同的布局。使頁面連

9、接清晰跟聲嚴(yán)叱稼可頤建棒臓體的三頭稼的膽住到煎一張箱子之上”把禰的豐敷在地上，身悻向后倏芥且莽直條的目悌樓床吊1対AI；：to.議扶汶錄置仃勺許脖中:瘀盅.HE：:厲亍人伯訐亡日；,胡盤預(yù)年扛鼻爭卜誡憫卜農(nóng)疔T1把轉(zhuǎn)的詁了的歸於瞬*、去*希稍齊直，擁的4注a怖Kff.t?*出右豐社斤賂扛t：.Bia爼2-SiftJSx現(xiàn)以11國弧的才式電起傳的換逖乍歩尊很栄饋，星宇人會發(fā)覺自己像托忌麗At翹去卷有動力問昱住注會出祀這里，傑算感覺到fl：前嶺是左甩！面不是蔽！期謬侮審會撫的謖丈的應(yīng).!：啟匸沿論卑川的仝山.啟林一起童單灼満試方祛,珂fit：劇白攻*動舛能JWX辭的A.衷fe:黑誥訴fit.曲成醴

10、f.就帶動牛乂M然不快.忸卻手-tHffia：hr末才肉曲pj動怕麻*WF呈近年耒岀現(xiàn)的“-杞新前U鳳和它傑呈-種購黑侯用隹耳-因?yàn)閎rEEkirtfi*pippin,Itpckin幫幣建威neastyle,建也察對stjledancer矗B菠高的要牝什電禹西舉野衆(zhòng)至?xí)?A.市就主銀苦舊印象中的醪K“1它里鹿工包會rt-WHlk,harLnushaSte,krizipirLbeoir吐吐芒浮淳的如汩輝穆+其矣哦疋昭?-wa血harlensticks,knmfliihZmit創(chuàng)址聽這尋未畫而G它們證不配成綢抽:町B擇沖.灼狀是一糞很有特直刖功悴而己”ALordAL1c：】忙諾崔冊可取看如已*苗玄

11、就是一ff；忖縉前技術(shù)丁蛛.韶迪咒猱也可風(fēng)著出MTPfflP莊殺匪萎比護(hù)前末畫爭些-因Aber耳磔證蹩建立在hiphcp的基稠上的+陣牛入時(shí)有樂的理卿啊目己鬲殊出轄克氐郡不一樣出如PI-首逬抵可薛:言歡用麹扎可謨鳧poppjjia忸康出來的末圍稱uNheistjle.u.學(xué)攪：ti誦機(jī)電哄業(yè)技術(shù)學(xué)舉田Ml學(xué)號：學(xué)攪：ti誦機(jī)電哄業(yè)技術(shù)學(xué)舉田Ml學(xué)號：。知?甘肅備估譙賓北去帶金滎花制最后就是制作個(gè)人簡介，也就是導(dǎo)航欄中的關(guān)于我，包含我的姓名、性別、年齡、愛好、學(xué)校、班級、學(xué)號和家庭住址等。簡歷的左側(cè)，插入了一張代表中國街舞愛好者的標(biāo)志圖，為達(dá)到亮眼的效果。加入了滾動圖片特效。增加頁面的可看性。C

12、hineseHiphopUndersnundIfEli儷6、上傳測試網(wǎng)站網(wǎng)頁制作完畢以后，要進(jìn)行反復(fù)的測試，保存后在IE瀏覽器上反復(fù)運(yùn)行自己的網(wǎng)站，用以發(fā)現(xiàn)設(shè)計(jì)中的缺陷并及時(shí)改正。三、實(shí)訓(xùn)中遇到的問題和解決方法1、在制作網(wǎng)頁的過程中，經(jīng)常遇到css樣式的運(yùn)用和網(wǎng)頁特效的添加，由于對CSS樣式的不熟悉和網(wǎng)頁特效代碼的不了解，導(dǎo)致在做網(wǎng)頁時(shí)遇到很多的麻煩，但是最后經(jīng)過老師和同學(xué)們的幫助，最終解決了CSS樣式和網(wǎng)頁特效添加的問題。2、創(chuàng)建了模板，但是運(yùn)用模板制作網(wǎng)頁時(shí)，發(fā)現(xiàn)全部不可編輯，這就需要在模板中添加可編輯區(qū)域。這樣就可以利用模板制作其它的網(wǎng)頁。3、表格的應(yīng)用，當(dāng)每次插入表格，對其插入內(nèi)容，就會影響到整個(gè)頁面的大小，經(jīng)過再三的思考，發(fā)現(xiàn)要在表格里插入圖片，就要先插入表格再插入圖片，這樣就不會影響到整個(gè)網(wǎng)站的布局。我非常感謝學(xué)校給了我這次制作網(wǎng)頁的機(jī)會，通過這次實(shí)訓(xùn)，我學(xué)到了很多有價(jià)值的東西。獨(dú)立的完成了網(wǎng)站設(shè)計(jì)的全過程，把設(shè)計(jì)中散亂的網(wǎng)頁鏈接成框架體系，使平時(shí)學(xué)到的知識點(diǎn)有了很高的提高，并且合理的在試驗(yàn)中進(jìn)行了實(shí)踐。在這次實(shí)訓(xùn)的過程中，搜集了大量的素材和網(wǎng)頁設(shè)計(jì)的技術(shù)，擴(kuò)大了知識面，給我在以后的設(shè)計(jì)過程中能博采眾長，制作出好的網(wǎng)頁