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

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

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

3、料、圖象資料、flash動(dòng)畫和網(wǎng)頁(yè)特效等。3.培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開發(fā)過(guò)程中所遇到的實(shí)際問(wèn)題的能力及其基本工作素質(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)站的主旨在于從各個(gè)方面全面的介紹我自己，展示自己，包括我的個(gè)人資料、個(gè)人相片和愛(ài)好。另外，網(wǎng)站里還包括我的好友和好友資料，建立一個(gè)展示自我形象的平臺(tái)。 同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都有統(tǒng)一的風(fēng)格，每一個(gè)網(wǎng)頁(yè)的主題色彩都是淺紅色， 用以展示自己性格的效果。 最重要的是做出自己的風(fēng)格，給瀏覽者好的欣賞感受。2、網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁(yè)信息，包括

4、圖片、文字、相關(guān)的新聞。同時(shí)，查詢相關(guān)的書籍、百度和素材光盤等方式收集所需的文字資料,圖象資料 ,flash 動(dòng)畫和網(wǎng)頁(yè)特效等， 用以得來(lái)更加具有說(shuō)服力的頁(yè)面。要想做好自己的網(wǎng)站， 能夠給瀏覽者好的欣賞感受， 就要盡量搜集材料， 搜集得材料越多， 以后制作網(wǎng)站就越容易。精選自己收集的材料， 作為自己制作網(wǎng)頁(yè)的素材， 這樣就可以做好一個(gè)好的網(wǎng)站。3、網(wǎng)站規(guī)劃3 我的網(wǎng)站共有 7 個(gè)主頁(yè)面：首頁(yè)、相冊(cè)、簡(jiǎn)歷、圖書、好友、留言版和音樂(lè)。每一個(gè)頁(yè)面用統(tǒng)一的 背景圖 片 ，以保 證網(wǎng)站統(tǒng)一的頁(yè)面 風(fēng)格。如下圖：我是用自己的姓名和學(xué)號(hào)命名網(wǎng)站名，用以方便存儲(chǔ)和轉(zhuǎn)發(fā)。 網(wǎng)站整體色調(diào)為淺紅色，然后點(diǎn)綴其他不同

5、的顏色相配，突出主題，顏色沒(méi)有過(guò)多，過(guò)雜，用以避免給人一種雜亂的感覺(jué)。 版面設(shè)計(jì)十分靈活， 根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁(yè)布局主要用框架和表格，用框架定位內(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)用。另外，為了網(wǎng)頁(yè)布局的協(xié)調(diào)，我加入了適當(dāng)?shù)膄lash透明動(dòng)態(tài)圖片，用以達(dá)到更好的瀏覽效果。4、網(wǎng)站的制作工具做網(wǎng)頁(yè)時(shí)主要使用的是frontpage 2003 ，但我還使用了deamweaver 。另外，為了處理網(wǎng)頁(yè)中的其他元素，還使用了photoshop 、gif animat

6、or 等軟件。5、制作網(wǎng)站的網(wǎng)頁(yè)素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁(yè)。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“mysite” ，建立的各個(gè)頁(yè)面都應(yīng)該放在本地站點(diǎn)中， 在網(wǎng)頁(yè)制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時(shí)建立了“tupian”文件夾來(lái)存放圖片。同時(shí)，由于“相冊(cè)”頁(yè)面中的信息太多，于是建立了一個(gè)專門的文件夾存放相冊(cè)信息，網(wǎng)頁(yè)中的 css 樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊，我設(shè)計(jì)的網(wǎng)站的首頁(yè)如下圖：以導(dǎo)航欄為界，上面插入了兩個(gè)flash 動(dòng)畫，用以給瀏覽者好的視覺(jué)享受。左下方有我的個(gè)人資料、 相片和相關(guān)鏈接。

7、插入相關(guān)鏈接的菜單欄， 一方面為了布局合理，彌補(bǔ)左下角的空缺， 另一方面給瀏覽者提供放表的導(dǎo)航，點(diǎn)擊其中任意一4 個(gè)都會(huì)連接到其他網(wǎng)頁(yè)，如點(diǎn)擊google就會(huì)連接到下面網(wǎng)頁(yè)：根據(jù)自己的網(wǎng)頁(yè)風(fēng)格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁(yè)的頁(yè)寬一般沒(méi)有超過(guò)900 像素，以保證左右不出現(xiàn)滾動(dòng)條。右下邊插入的是表格，表格中添加了淺紅色的背景圖片。 用以體現(xiàn)網(wǎng)站的主題色彩， 表格還定位了網(wǎng)頁(yè)特效、 系統(tǒng)時(shí)間和flash 動(dòng)畫。網(wǎng)頁(yè)特效為上下滾動(dòng)的字幕，當(dāng)鼠標(biāo)停在字幕上時(shí)，字幕停止?jié)L動(dòng)。特效代碼如下： !- begin /scroller width var swidth=300 /scroller height

8、var sheight=100 /scrollers speed; var sspeed=2 var wholemessage= /text: change to your own wholemessage=歡迎光 臨 我 的 個(gè) 人 網(wǎng) 站 下 面 是 網(wǎng) 頁(yè) 背 景 音 樂(lè) 歌 詞渡情西湖美景三月天勒春雨如酒柳如煙勒有緣千里來(lái)相會(huì) 無(wú)緣對(duì)面手難牽十年修得同般渡 百年修得 共 枕 眠 若 是 千 呀 年 呀 有 造 化 白首同心在眼前若是千呀年呀有造化 白 首 同 心 在 眼 前 啦 新 白 娘 子 傳 奇 片 尾 曲 高勝美渡情 歡迎光臨我的個(gè)人網(wǎng)站 function start() if

9、 (document.all) return if (document.getelementbyid) 5 document.getelementbyid(slider).style.visibility=show ns6marquee(document.getelementbyid(slider) else if(document.layers)document.slider1.visibility=show ns4marquee(document.slider1.document.slider2) function ns4marquee(whichlayer) ns4layer=eval(

10、whichlayer) ns4layer.document.write(wholemessage) ns4layer.document.close() sizeup=ns4layer.document.height ns4layer.top-=sizeup ns4slide() function ns4slide()if (ns4layer.top=sizeup*(-1)ns4layer.top-=sspeed settimeout(ns4slide(),100) elsens4layer.top=sheight ns4slide()function ns6marquee(whichdiv)

11、ns6div=eval(whichdiv) ns6div.innerhtml=wholemessage ns6div.style.top=sheight sizeup=sheightns6slide() function ns6slide()if (parseint(ns6div.style.top)=sizeup*(-1) ns6div.style.top=parseint(ns6div.style.top)-sspeed settimeout(ns6slide(),100) elsens6div.style.top=sheight ns6slide()/ end - if (documen

12、t.all) document.writeln() document.writeln(wholemessage) ieslider.onmouseover=new function(ieslider.scrollamount=0) ieslider.onmouseout=new function(if (document.readystate=complete) ieslider.scrollamount=2) document.write() if (document.getelementbyid&!document.all) document.write() document.wr

13、ite() 6 document.write() 取系統(tǒng)時(shí)間代碼如下：今天是： 主頁(yè)中還插入了背景音樂(lè)，音樂(lè)名為“渡情”，這首音樂(lè)為 midi 音樂(lè)，占用內(nèi)存小，音樂(lè)清脆悅耳，十分適合做背景音樂(lè)。另外，網(wǎng)頁(yè)特效滾動(dòng)字幕就是歌詞。插入過(guò)程如下圖：第二個(gè)主頁(yè)面是相冊(cè)，如下圖：7 為了使頁(yè)面連接清晰， 相冊(cè)中插入了五個(gè)交互式按鈕，分別是個(gè)人相片、 好友相片、風(fēng)景相片、 明星相片和古董相片， 當(dāng)點(diǎn)擊任一按鈕都會(huì)在右下版塊出現(xiàn)對(duì)應(yīng)瀏覽圖片版塊。 交互式按鈕的制做： 在設(shè)計(jì)窗口中插入一個(gè)五行一列的表格，表格的間距為 0，顏色為黑色，居中對(duì)齊，然后插入背景圖片，就做成了表格的背景。在表格的一個(gè)單元格內(nèi)點(diǎn)擊菜

14、單中的插入，再點(diǎn)擊交互式按鈕， 修改按鈕的相應(yīng)屬性就可以了。第三個(gè)主頁(yè)面是簡(jiǎn)歷，如下圖：簡(jiǎn)歷中包含我的姓名、年齡、職業(yè)、理想和興趣愛(ài)好等。簡(jiǎn)歷的右下方插入了漂亮的 flash動(dòng)畫，動(dòng)畫為游動(dòng)的金魚，為了達(dá)到亮眼的效果，加入了透明flash,既與主網(wǎng)頁(yè)相同， 又有新意。 插入這個(gè)動(dòng)畫是為了使頁(yè)面的整體布局合理，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺(jué)，同時(shí)增加頁(yè)面的可看性。第四個(gè)主頁(yè)面是圖書，如下圖：它與第二個(gè)主頁(yè)面采用了相同的背景，相同的布局。 為了使頁(yè)面連接清晰， 圖書中也插入了五個(gè)交互式按鈕，分別是唐詩(shī)、宋詞、元曲、明清傳奇和現(xiàn)代小說(shuō)五個(gè)子頁(yè)。 在唐詩(shī)子頁(yè)中的右邊網(wǎng)頁(yè)中所有的詩(shī)人名都有超鏈接

15、，如單擊 “駱賓王”，就會(huì)出現(xiàn)如下頁(yè)面：另外，導(dǎo)航右下版塊是一段美麗文字欣賞，用相同的色彩布局， 明快而又有緊促感，而且使整個(gè)頁(yè)面色調(diào)平衡。 單擊任一交互式按鈕都會(huì)在右下版塊出現(xiàn)對(duì)應(yīng)網(wǎng)頁(yè)版塊，如單擊元曲按鈕，頁(yè)面結(jié)果見(jiàn)下圖：8 第五個(gè)主頁(yè)面是好友，如下圖：這個(gè)主頁(yè)面和上面的一樣， 都插入了交互式按鈕， 既突出網(wǎng)站的主色調(diào)， 又給人以凝重的感覺(jué)， 目的都是增加網(wǎng)頁(yè)的可看性。 另外右邊的相片下面人名設(shè)立了超鏈接，如單擊馬媛媛后鏈接到如下頁(yè)面：第六個(gè)主頁(yè)面是留言版，如下圖：9 上面使用表單同瀏覽者進(jìn)行信息交流，方便瀏覽者留言。在導(dǎo)航的下面是一個(gè)滾動(dòng)字幕，用層進(jìn)行定位。上面跑馬燈效果代碼為：如果您對(duì)我

16、的網(wǎng)站、本人、老師或其他方面有任何想法，請(qǐng)告知我們。歡迎提出寶貴意見(jiàn)和建議。 該網(wǎng)頁(yè)中還插入了時(shí)鐘，顯示當(dāng)前時(shí)間，給瀏覽者提供方便。圖片如下：時(shí)鐘代碼如下： !-px=400;py=200 obs = new array(13) function ob () for (i=0; i13; i+) if (document.all) obsi=new array (eval(ob+i).style,-100,-100) else obsi = new array (eval(document.ob+i),-100,-100) function cl(a,b,c) if (document.all

17、) if (a!=0) b+=-1 eval(c+a+.style.pixeltop=+(py+(c) 10 ) 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=26 function runclock() for (i=0; i13; i+) obsi0.left=obsi1+px obsi0.top=obsi2+pyvar

18、 lastsec function 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+) obsi1 = math.sin(sec) * (44 - (i-1)*11)-16; if (document.layers)obsi1+=10;

19、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 11 12 3 4 5 6 7 8 9 10 11 12 . . . . . . . . . 12 . . . “ onload=ob(),setnum(),setinterval(timer(),100);se

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