網(wǎng)頁設計與制作實訓報告

1、網(wǎng)頁設計與制作實訓報告班級：G093501姓名：孫建武學號：47指導老師：郭建明實訓時間：5.95.22甘肅機電職業(yè)技術學院2011年5月20日、實訓目的：1、進一步熟悉和掌握網(wǎng)站建設的基本流程和技術規(guī)范；2、鞏固運用Dreamweaver網(wǎng)頁制作軟件制作網(wǎng)頁、特別是制作復雜網(wǎng)頁的知識；3、鞏固運用PS圖像處理軟件進行網(wǎng)頁中圖形制作和運用flash動畫制作軟件設計網(wǎng)頁中動畫的知識；4、鞏固綜合運用Dreamweaver、PS、flash三個軟件完成網(wǎng)站建設任務的方法，能獨立設計一個內(nèi)容完整、圖文并茂、技術運用得當?shù)木W(wǎng)站；5、具備獨立撰寫實訓報告基本能力；6、在網(wǎng)頁設計的實踐中培養(yǎng)分析問題、解決

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

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

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

5、件，我在制作時建立了“img”文件夾來存放圖片。網(wǎng)頁中的CSS樣式文件也應統(tǒng)一管理,做到有條不紊，我設計的網(wǎng)站的首頁如下圖:SHOT惡躍SHOT惡躍導航欄下面插入了一個flash，用以給瀏覽者好的視覺享受。左上方插入了一個圖片滾動效果，左側(cè)有關于街舞的一些教程，是相關鏈接的菜單欄，一方面為了布局合理，彌補右邊的空缺，另一方面給瀏覽者提供放便的導航。另外，右邊插入的是表格，表格中的背景是藍色的。用以體現(xiàn)網(wǎng)站的主題色彩，左邊加入了圖片滾動特效。當鼠標停在圖片上時，圖片停止?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);向左無縫滾動然后利用模板制作了關于街舞種類介紹的鏈接，它分為Breaking、Poppin、Hip-hop、Newstyle、Jazz.從而進行了全面的介紹，當點擊任意一個舞種按鈕，都會在右下版塊出現(xiàn)對應瀏覽文字版塊。如下圖：本月繪新勰本月堆新課程TOMAS教學柔韌性SH0I齟SIY1.S將SHOW麗HEISTYLE本月繪新勰本月堆新課程TOMAS教學柔韌性SH0I齟SIY1.S將SHOW麗HEISTYLE苒蟲可逹幾歩前關懾！好的羿驀靄聲咗創(chuàng)建模板時，我在右側(cè)建立了關于街舞教程的導航，這樣可以讓整個界面顯得整潔、有序。與介紹街舞類型的主頁面采用了相同的背景，相同的布局。使頁面連

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

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

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

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