




版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
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)頁
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 創(chuàng)新型人才引領鄉(xiāng)村振興的路徑探索
- 重慶市開州區(qū)鎮(zhèn)東初級中學2025屆化學九上期末達標檢測模擬試題含解析
- 江蘇省無錫市第一女子中學2025屆九上化學期末預測試題含解析
- 山西財經(jīng)大學華商學院《內(nèi)部控制制度》2023-2024學年第一學期期末試卷
- 商業(yè)停車場車位租賃與廣告合作合同
- 文化教育設施設計與施工方案研究
- 2025至2030中國狗肉行業(yè)發(fā)展趨勢分析與未來投資戰(zhàn)略咨詢研究報告
- 2025至2030中國月子中心行業(yè)產(chǎn)業(yè)運行態(tài)勢及投資規(guī)劃深度研究報告
- 石油化工行業(yè)發(fā)展現(xiàn)狀與未來趨勢分析預測報告
- 2025至2030中國自助點菜亭行業(yè)市場深度研究及發(fā)展前景投資可行性分析報告
- 常年法律顧問勞動法專項法律服務工作方案
- 輸液泵操作并發(fā)癥的預防及處理流程
- T-CASME 1665-2024 水利工程混凝土結構表層裂縫環(huán)氧樹脂修復材料應用技術規(guī)程
- 2025年上半年寧波市公安局協(xié)輔警招考易考易錯模擬試題(共500題)試卷后附參考答案
- 北師大版四年級下冊數(shù)學計算題每日一練帶答案(共30天)
- 《不銹鋼培訓知識》課件
- 定額〔2025〕1號文-關于發(fā)布2018版電力建設工程概預算定額2024年度價格水平調(diào)整的通知
- 《AIB審核基礎》課件
- KCA試題庫完整版
- 國家電網(wǎng)安規(guī)線路培訓
- 【高分復習筆記】吳于廑《世界史·近代史編(上下卷)》(第2版)筆記和典型題(含考研真題)詳解
評論
0/150
提交評論