網(wǎng)站設(shè)計(jì)實(shí)訓(xùn)報告

1、網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)報告題 目: 個人網(wǎng)站實(shí)訓(xùn)報告 學(xué) 號: 姓 名: 一. 實(shí)訓(xùn)意義:網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過程中重要的實(shí)踐性教學(xué)環(huán)節(jié).它是根據(jù)專業(yè)教學(xué)計(jì)劃的要求,在教師的指導(dǎo)下對學(xué)生進(jìn)行網(wǎng)頁制作專業(yè)技能的訓(xùn)練,培養(yǎng)學(xué)生綜合運(yùn)用理論知識分析和解決實(shí)際問題的能力,實(shí)現(xiàn)由理論知識向操作技能的轉(zhuǎn)化,是對理論與實(shí)踐教學(xué)效果的檢驗(yàn),也是對學(xué)生綜合分析能力與獨(dú)立工作能力的培養(yǎng)過程.因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對實(shí)現(xiàn)本專業(yè)的培養(yǎng)目標(biāo),提高學(xué)生的綜合素質(zhì)有著重要的作用。二. 實(shí)訓(xùn)目的:1 通過綜合實(shí)訓(xùn)進(jìn)一步鞏固，深化和拓展學(xué)生的理論知識與專業(yè)技能。(1)掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)，目錄結(jié)構(gòu),鏈接結(jié)構(gòu)的方法

2、。(2)熟練掌握網(wǎng)頁制作軟件FrontPage 2003和的基本操作和使用技能。(3)掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。(4)熟練掌握網(wǎng)頁頁面布局的各種方法。(5)熟練掌握在網(wǎng)頁中輸入,設(shè)置標(biāo)題和正文文字的方法。(6) 熟練掌握在網(wǎng)頁中插入圖象,flash動畫和背景音樂的方法。(7) 熟練建立各種形式的超級鏈接的方法。(8)掌握表單網(wǎng)頁制作方法。(9) 掌握網(wǎng)頁特效制作方法。(10)掌握網(wǎng)站測試的方法。2.訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力,充分培養(yǎng)和提高學(xué)生的動手能力,學(xué)會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖象資料、flash動畫和網(wǎng)頁特效等。3.培養(yǎng)學(xué)生運(yùn)用所學(xué)的

3、理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實(shí)際問題的能力及其基本工作素質(zhì)。4.培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng),嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力,樹立自信心。三實(shí)驗(yàn)步驟：1、網(wǎng)站主題 我的網(wǎng)站的主旨在于從各個方面全面的介紹我自己，展示自己，包括我的個人資料、個人相片和愛好。另外，網(wǎng)站里還包括我的好友和好友資料，建立一個展示自我形象的平臺。同時，網(wǎng)站里的每一個網(wǎng)頁都有統(tǒng)一的風(fēng)格，每一個網(wǎng)頁的主題色彩都是淺紅色，用以展示自己性格的效果。最重要的是做出自己的風(fēng)格，給瀏覽者好的欣賞感受。 2、網(wǎng)站材料 主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞。同時，查詢相關(guān)的書籍、百度和素材光盤等方

4、式收集所需的文字資料,圖象資料,flash動畫和網(wǎng)頁特效等，用以得來更加具有說服力的頁面。要想做好自己的網(wǎng)站，能夠給瀏覽者好的欣賞感受，就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁的素材，這樣就可以做好一個好的網(wǎng)站。3、網(wǎng)站規(guī)劃 我的網(wǎng)站共有7個主頁面：首頁、相冊、簡歷、圖書、好友、留言版和音樂。每一個頁面用統(tǒng)一的背景圖片，以保證網(wǎng)站統(tǒng)一的頁面風(fēng)格。如下圖：我是用自己的姓名和學(xué)號命名網(wǎng)站名，用以方便存儲和轉(zhuǎn)發(fā)。網(wǎng)站整體色調(diào)為淺紅色，然后點(diǎn)綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以避免給人一種雜亂的感覺。版面設(shè)計(jì)十分靈活，根據(jù)各部分內(nèi)

5、容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁布局主要用框架和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位子的設(shè)計(jì)也是重要的一個部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是用css設(shè)計(jì)一個樣式，以保證隨時、準(zhǔn)確的調(diào)用。另外，為了網(wǎng)頁布局的協(xié)調(diào)，我加入了適當(dāng)?shù)膄lash透明動態(tài)圖片，用以達(dá)到更好的瀏覽效果。4、網(wǎng)站的制作工具 做網(wǎng)頁時主要使用的是FrontPage 2003，但我還使用了Deamweaver。另外，為了處理網(wǎng)頁中的其他元素，還使用了Photoshop、Gif Animator等軟件。5、制作網(wǎng)站的網(wǎng)頁 素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時，首先要做的就

6、是站點(diǎn)的規(guī)劃，建立一個本地站點(diǎn)“mysite”，建立的各個頁面都應(yīng)該放在本地站點(diǎn)中，在網(wǎng)頁制作時所需的各個元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時建立了“tupian”文件夾來存放圖片。同時，由于“相冊”頁面中的信息太多，于是建立了一個專門的文件夾存放相冊信息，網(wǎng)頁中的css 樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊，我設(shè)計(jì)的網(wǎng)站的首頁如下圖： 以導(dǎo)航欄為界，上面插入了兩個flash動畫，用以給瀏覽者好的視覺享受。左下方有我的個人資料、相片和相關(guān)鏈接。插入相關(guān)鏈接的菜單欄，一方面為了布局合理，彌補(bǔ)左下角的空缺，另一方面給瀏覽者提供放表的導(dǎo)航，點(diǎn)擊其中任意一個都會連接到其他

7、網(wǎng)頁，如點(diǎn)擊google就會連接到下面網(wǎng)頁：根據(jù)自己的網(wǎng)頁風(fēng)格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁的頁寬一般沒有超過900像素，以保證左右不出現(xiàn)滾動條。右下邊插入的是表格，表格中添加了淺紅色的背景圖片。用以體現(xiàn)網(wǎng)站的主題色彩，表格還定位了網(wǎng)頁特效、系統(tǒng)時間和flash動畫。網(wǎng)頁特效為上下滾動的字幕，當(dāng)鼠標(biāo)停在字幕上時，字幕停止?jié)L動。特效代碼如下：!- Begin/scroller widthvar swidth=300/scroller heightvar sheight=100/scrollers speed;var sspeed=2var wholemessage=/text: change

8、to your ownwholemessage=歡迎光臨我的個人網(wǎng)站下面是網(wǎng)頁背景音樂歌詞渡情西湖美景三月天勒春雨如酒柳如煙勒有緣千里來相會無緣對面手難牽十年修得同般渡百年修得共枕眠若是千呀年呀有造化白首同心在眼前若是千呀年呀有造化白首同心在眼前啦新白娘子傳奇片尾曲高勝美 渡情歡迎光臨我的個人網(wǎng)站function start()if (document.all) returnif (document.getElementById)document.getElementById(slider).style.visibility=showns6marquee(document.getElement

9、ById(slider)else if(document.layers)document.slider1.visibility=showns4marquee(document.slider1.document.slider2)function ns4marquee(whichlayer)ns4layer=eval(whichlayer)ns4layer.document.write(wholemessage)ns4layer.document.close()sizeup=ns4layer.document.heightns4layer.top-=sizeupns4slide()function

10、 ns4slide()if (ns4layer.top=sizeup*(-1)ns4layer.top-=sspeedsetTimeout(ns4slide(),100)elsens4layer.top=sheightns4slide()function ns6marquee(whichdiv)ns6div=eval(whichdiv)ns6div.innerHTML=wholemessagens6div.style.top=sheightsizeup=sheightns6slide()function ns6slide()if (parseInt(ns6div.style.top)=size

11、up*(-1)ns6div.style.top=parseInt(ns6div.style.top)-sspeedsetTimeout(ns6slide(),100)elsens6div.style.top=sheightns6slide()/ End -if (document.all)document.writeln()document.writeln(wholemessage)ieslider.onmouseover=new Function(ieslider.scrollAmount=0)ieslider.onmouseout=new Function(if (document.rea

12、dyState=complete) ieslider.scrollAmount=2)document.write()if (document.getElementById&!document.all)document.write()document.write()document.write()取系統(tǒng)時間代碼如下：今天是：主頁中還插入了背景音樂，音樂名為“渡情”，這首音樂為midi音樂，占用內(nèi)存小，音樂清脆悅耳，十分適合做背景音樂。另外，網(wǎng)頁特效滾動字幕就是歌詞。插入過程如下圖：第二個主頁面是相冊，如下圖：為了使頁面連接清晰，相冊中插入了五個交互式按鈕，分別是個人相片、好友相片、風(fēng)景相片、明星

13、相片和古董相片，當(dāng)點(diǎn)擊任一按鈕都會在右下版塊出現(xiàn)對應(yīng)瀏覽圖片版塊。交互式按鈕的制做：在設(shè)計(jì)窗口中插入一個五行一列的表格，表格的間距為0，顏色為黑色，居中對齊，然后插入背景圖片，就做成了表格的背景。在表格的一個單元格內(nèi)點(diǎn)擊菜單中的插入，再點(diǎn)擊交互式按鈕，修改按鈕的相應(yīng)屬性就可以了 。第三個主頁面是簡歷，如下圖： 簡歷中包含我的姓名、年齡、職業(yè)、理想和興趣愛好等。簡歷的右下方插入了漂亮的flash動畫，動畫為游動的金魚，為了達(dá)到亮眼的效果，加入了透明flash,既與主網(wǎng)頁相同，又有新意。插入這個動畫是為了使頁面的整體布局合理，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺，同時增加頁面的可看性。第四個主頁

14、面是圖書，如下圖：它與第二個主頁面采用了相同的背景，相同的布局。為了使頁面連接清晰，圖書中也插入了五個交互式按鈕，分別是唐詩、宋詞、元曲、明清傳奇和現(xiàn)代小說五個子頁。在唐詩子頁中的右邊網(wǎng)頁中所有的詩人名都有超鏈接，如單擊“駱賓王”，就會出現(xiàn)如下頁面：另外，導(dǎo)航右下版塊是一段美麗文字欣賞，用相同的色彩布局，明快而又有緊促感，而且使整個頁面色調(diào)平衡。單擊任一交互式按鈕都會在右下版塊出現(xiàn)對應(yīng)網(wǎng)頁版塊，如單擊元曲按鈕，頁面結(jié)果見下圖： 第五個主頁面是好友，如下圖：這個主頁面和上面的一樣，都插入了交互式按鈕，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺，目的都是增加網(wǎng)頁的可看性。另外右邊的相片下面人名設(shè)立了超

15、鏈接，如單擊馬媛媛后鏈接到如下頁面：第六個主頁面是留言版，如下圖：上面使用表單同瀏覽者進(jìn)行信息交流，方便瀏覽者留言。在導(dǎo)航的下面是一個滾動字幕，用層進(jìn)行定位。上面跑馬燈效果代碼為：如果您對我的網(wǎng)站、本人、老師或其他方面有任何想法，請告知我們。歡迎提出寶貴意見和建議。該網(wǎng)頁中還插入了時鐘，顯示當(dāng)前時間，給瀏覽者提供方便。圖片如下：時鐘代碼如下：!-pX=400;pY=200obs = new Array(13)function ob () for (i=0; i13; i+) if (document.all) obsi=new Array (eval(ob+i).style,-100,-100

16、) else obsi = new Array (eval(document.ob+i),-100,-100)function cl(a,b,c) if (document.all) if (a!=0) b+=-1 eval(c+a+.style.pixelTop=+(pY+(c) eval(c+a+.style.pixelLeft=+(pX+(b) else if (a!=0) b+=10 eval(document.c+a+.top=+(pY+(c) eval(document.c+a+.left=+(pX+(b)if (document.all) c0.style.pixelLeft=2

17、6function runClock() for (i=0; i13; i+) obsi0.left=obsi1+pX obsi0.top=obsi2+pYvar lastsecfunction timer() time = new Date ()sec = time.getSeconds() if (sec!=lastsec) lastsec = sec sec=Math.PI*sec/30 min=Math.PI*time.getMinutes()/30 hr =Math.PI*(time.getHours()*60)+time.getMinutes()/360 for (i=1;i6;i

18、+) obsi1 = Math.sin(sec) * (44 - (i-1)*11)-16; if (document.layers)obsi1+=10; obsi2 = -Math.cos(sec) * (44 - (i-1)*11)-27; for (i=6;i10;i+) obsi1 = Math.sin(min) * (40 - (i-6)*10)-16; if (document.layers)obsi1+=10; obsi2 = -Math.cos(min) * (40 - (i-6)*10)-27; for (i=10;i 12 3 4 5 6 7 8 9 10 11 12 .

19、. . . . . . . . . . .“onLoad=ob(),setNum(),setInterval(timer(),100);setInterval(runClock(),100)” body 下面是表單的下部分，用以提交留言到服務(wù)器。上圖的最下面是版權(quán)信息，盡量用簡潔的語言和穩(wěn)重的色彩，給人留下清新，簡練的感覺。版權(quán)信息標(biāo)名了作者和版權(quán)用以提高內(nèi)容的可讀性和使內(nèi)容充實(shí)，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺。提交留言代碼如下：姓名:* 郵箱地址:* 文章標(biāo)題:*文章內(nèi)容:*您的留言: 數(shù)據(jù)寫入您的姓名是:,您的文章已經(jīng)上傳!感謝您的參與!這樣，用戶在提交完后，內(nèi)容就會儲存進(jìn)wu.txt中。表單的制作過程：首先打開FronrPage 2003,再新建網(wǎng)頁，單擊插入按鈕，在插入按鈕中選擇表單，最后插入表單的各個屬性就可以完成表單的插入了。第七個主頁面是音樂，如下圖：為了達(dá)到亮眼的效果，我在導(dǎo)航欄下的表格背景圖片上加入了透明flash,既與主網(wǎng)頁相同，又有新意。上面的紅色文字都插入了超鏈接，單擊費(fèi)玉清連接到如下頁面：上面的頁面是網(wǎng)絡(luò)上的頁面，鏈接到網(wǎng)絡(luò)上的可以節(jié)省制作網(wǎng)