1、網頁設計實訓報告題 目: 個人網站實訓報告 學 號: 0000000000 姓 名: 0000000000 一. 實訓意義:網頁設計與制作綜合實訓是教學過程中重要的實踐性教學環節.它是根據專業教學計劃的要求,在教師的指導下對學生進行網頁制作專業技能的訓練,培養學生綜合運用理論知識分析和解決實際問題的能力,實現由理論知識向操作技能的轉化,是對理論與實踐教學效果的檢驗,也是對學生綜合分析能力與獨立工作能力的培養過程.因此加強實踐教學環節,搞好實訓教學,對實現本專業的培養目標,提高學生的綜合素質有著重要的作用。二. 實訓目的:1 通過綜合實訓進一步鞏固，深化和拓展學生的理論知識與專業技能。(1)掌握

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

3、sh動畫和網頁特效等。3.培養學生運用所學的理論知識和技能解決網站開發過程中所遇到的實際問題的能力及其基本工作素質。4.培養學生理論聯系實際的工作作風,嚴肅認真的科學態度以及獨立工作的能力,樹立自信心。三實驗步驟：1、網站主題 我的網站的主旨在于從各個方面全面的介紹我自己，展示自己，包括我的個人資料、個人相片和愛好。另外，網站里還包括我的好友和好友資料，建立一個展示自我形象的平臺。同時，網站里的每一個網頁都有統一的風格，每一個網頁的主題色彩都是淺紅色，用以展示自己性格的效果。最重要的是做出自己的風格，給瀏覽者好的欣賞感受。 2、網站材料 主要在網站上搜集所要的網頁信息，包括圖片、文字、相關的新

4、聞。同時，查詢相關的書籍、百度和素材光盤等方式收集所需的文字資料,圖象資料,flash動畫和網頁特效等，用以得來更加具有說服力的頁面。要想做好自己的網站，能夠給瀏覽者好的欣賞感受，就要盡量搜集材料，搜集得材料越多，以后制作網站就越容易。精選自己收集的材料，作為自己制作網頁的素材，這樣就可以做好一個好的網站。3、網站規劃 我的網站共有7個主頁面：首頁、相冊、簡歷、圖書、好友、留言版和音樂。每一個頁面用統一的背景圖片，以保證網站統一的頁面風格。如下圖：我是用自己的姓名和學號命名網站名，用以方便存儲和轉發。網站整體色調為淺紅色，然后點綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以避免給人一

5、種雜亂的感覺。版面設計十分靈活，根據各部分內容的不同適當的自由設計。網頁布局主要用框架和表格，用框架定位內容的大體結構，再用表格具體定位。位子的設計也是重要的一個部分，根據具體內容決定字體風格，相同的風格多次調用是用css設計一個樣式，以保證隨時、準確的調用。另外，為了網頁布局的協調，我加入了適當的flash透明動態圖片，用以達到更好的瀏覽效果。4、網站的制作工具 做網頁時主要使用的是FrontPage 2003，但我還使用了Deamweaver。另外，為了處理網頁中的其他元素，還使用了Photoshop、Gif Animator等軟件。5、制作網站的網頁 素材、風格、模板都設計好以后，下一步

6、就是具體的制作網頁。制作網站時，首先要做的就是站點的規劃，建立一個本地站點“mysite”，建立的各個頁面都應該放在本地站點中，在網頁制作時所需的各個元素都進行了統一的管理，建立統一的文件夾放同一類型的文件，我在制作時建立了“tupian”文件夾來存放圖片。同時，由于“相冊”頁面中的信息太多，于是建立了一個專門的文件夾存放相冊信息，網頁中的css 樣式文件也應統一管理，做到有條不紊，我設計的網站的首頁如下圖：以導航欄為界，上面插入了兩個flash動畫，用以給瀏覽者好的視覺享受。左下方有我的個人資料、相片和相關鏈接。插入相關鏈接的菜單欄，一方面為了布局合理，彌補左下角的空缺，另一方面給瀏覽者提供

7、放表的導航，點擊其中任意一個都會連接到其他網頁，如點擊google就會連接到下面網頁：根據自己的網頁風格，在網上搜集合適的圖片，另外網頁的頁寬一般沒有超過900像素，以保證左右不出現滾動條。右下邊插入的是表格，表格中添加了淺紅色的背景圖片。用以體現網站的主題色彩，表格還定位了網頁特效、系統時間和flash動畫。網頁特效為上下滾動的字幕，當鼠標停在字幕上時，字幕停止滾動。特效代碼如下：<SCRIPT LANGUAGE="JavaScript"><!- Begin/scroller widthvar swidth=300/scroller heightvar

8、sheight=100/scroller's speed;var sspeed=2var wholemessage=''/text: change to your ownwholemessage='<div align="center"><font face=Arial size=3 color="#FF0066">歡迎光臨我的個人網站</DIV><div align="center">下面是網頁背景音樂歌詞</strong></DIV&

9、gt;<div align="center"><strong>渡情</strong></DIV><div align="center">西湖美景三月天勒</div><div align="center">春雨如酒柳如煙勒</div><div align="center">有緣千里來相會</div><div align="center">無緣對面手難牽</div

10、><div align="center">十年修得同般渡</div><div align="center">百年修得共枕眠</div><div align="center">若是千呀年呀有造化</div><div align="center">白首同心在眼前</div><div align="center">若是千呀年呀有造化</div><div align=&qu

11、ot;center">白首同心在眼前</div><div align="center">啦</div><div align="center">新白娘子傳奇片尾曲</div><div align="center">高勝美 渡情</div><div align="center">歡迎光臨我的個人網站</div><div align="center"></div

12、></font>'function start()if (document.all) returnif (document.getElementById)document.getElementById("slider").style.visibility="show"ns6marquee(document.getElementById('slider')else if(document.layers)document.slider1.visibility="show"ns4marquee(do

13、cument.slider1.document.slider2)function ns4marquee(whichlayer)ns4layer=eval(whichlayer)ns4layer.document.write(wholemessage)ns4layer.document.close()ns4layer.top-=sizeupns4slide()function ns4slide()if (ns4layer.top>=sizeup*(-1)ns4layer.top-=sspeedsetTimeout("ns4slide()",100)elsens4laye

14、r.top=sheightns4slide()function ns6marquee(whichdiv)ns6div=eval(whichdiv)ns6div.innerHTML=wholemessagens6div.style.top=sheightsizeup=sheightns6slide()function ns6slide()if (parseInt(ns6div.style.top)>=sizeup*(-1)ns6div.style.top=parseInt(ns6div.style.top)-sspeedsetTimeout("ns6slide()",1

15、00)elsens6div.style.top=sheightns6slide()/ End -></script><span style="borderWidth:1; borderColor:red; width:300; height:100;"><p><ilayer width=300 height=100 name="slider1" bgcolor="black" visibility=hide></p><layer name="slider

16、2" onMouseover="sspeed=0;" onMouseout="sspeed=2"></layer></ilayer><script language="JavaScript">if (document.all)document.writeln('<marquee id="ieslider" scrollAmount=2 width=300 height=130 direction=down style="border:0 s

17、olid red;background-color:">')document.writeln(wholemessage)ieslider.onmouseover=new Function("ieslider.scrollAmount=0")ieslider.onmouseout=new Function("if (document.readyState='complete') ieslider.scrollAmount=2")document.write('</marquee>')if

18、(document.getElementById&&!document.all)document.write('<divstyle="position:relative;overflow:hidden;width:300;height:100;clip:rect(0 302 102 0); background-color:black;border:1px solid red;" onMouseover="sspeed=0;" onMouseout="sspeed=2">')document

19、.write('<div id="slider" style="position:relative;width:&swidth;">')document.write('</div></div>')</script></span>取系統時間代碼如下：今天是：<!-webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%Y年%m月%d日" -

20、>主頁中還插入了背景音樂，音樂名為“渡情”，這首音樂為midi音樂，占用內存小，音樂清脆悅耳，十分適合做背景音樂。另外，網頁特效滾動字幕就是歌詞。插入過程如下圖：第二個主頁面是相冊，如下圖：為了使頁面連接清晰，相冊中插入了五個交互式按鈕，分別是個人相片、好友相片、風景相片、明星相片和古董相片，當點擊任一按鈕都會在右下版塊出現對應瀏覽圖片版塊。交互式按鈕的制做：在設計窗口中插入一個五行一列的表格，表格的間距為0，顏色為黑色，居中對齊，然后插入背景圖片，就做成了表格的背景。在表格的一個單元格內點擊菜單中的插入，再點擊交互式按鈕，修改按鈕的相應屬性就可以了 。第三個主頁面是簡歷，如下圖： 簡歷

21、中包含我的姓名、年齡、職業、理想和興趣愛好等。簡歷的右下方插入了漂亮的flash動畫，動畫為游動的金魚，為了達到亮眼的效果，加入了透明flash,既與主網頁相同，又有新意。插入這個動畫是為了使頁面的整體布局合理，既突出網站的主色調，又給人以凝重的感覺，同時增加頁面的可看性。第四個主頁面是圖書，如下圖：它與第二個主頁面采用了相同的背景，相同的布局。為了使頁面連接清晰，圖書中也插入了五個交互式按鈕，分別是唐詩、宋詞、元曲、明清傳奇和現代小說五個子頁。在唐詩子頁中的右邊網頁中所有的詩人名都有超鏈接，如單擊“駱賓王”，就會出現如下頁面：另外，導航右下版塊是一段美麗文字欣賞，用相同的色彩布局，明快而又有

22、緊促感，而且使整個頁面色調平衡。單擊任一交互式按鈕都會在右下版塊出現對應網頁版塊，如單擊元曲按鈕，頁面結果見下圖：第五個主頁面是好友，如下圖：這個主頁面和上面的一樣，都插入了交互式按鈕，既突出網站的主色調，又給人以凝重的感覺，目的都是增加網頁的可看性。另外右邊的相片下面人名設立了超鏈接，如單擊馬媛媛后鏈接到如下頁面：第六個主頁面是留言版，如下圖：上面使用表單同瀏覽者進行信息交流，方便瀏覽者留言。在導航的下面是一個滾動字幕，用層進行定位。上面跑馬燈效果代碼為：<marquee bgcolor="#FFFFFF" height="23">如果您對

23、我的網站、本人、老師或其他方面有任何想法，請告知我們。歡迎提出寶貴意見和建議。</marquee>該網頁中還插入了時鐘，顯示當前時間，給瀏覽者提供方便。圖片如下：時鐘代碼如下：<SCRIPT language=javascript><!-pX=400;pY=200obs = new Array(13)function ob () for (i=0; i<13; i+) if (document.all) obsi=new Array (eval('ob'+i).style,-100,-100) else obsi = new Array (e

24、val('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'+

25、a+'.left='+(pX+(b)if (document.all) c0.style.pixelLeft=26function runClock() for (i=0; i<13; 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

26、hr =Math.PI*(time.getHours()*60)+time.getMinutes()/360 for (i=1;i<6;i+) 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;i<10;i+) obsi1 = Math.sin(min) * (40 - (i-6)*10)-16; if (document.layers)obsi1+=10; obsi2 = -

27、Math.cos(min) * (40 - (i-6)*10)-27; for (i=10;i<13;i+) obsi1 = Math.sin(hr) * (37 - (i-10)*11)-16; if (document.layers)obsi1+=10; obsi2 = -Math.cos(hr) * (37 - (i-10)*11)-27; function setNum()cl (0,-67,-65)；cl (1,10,-51);cl (2,28,-33);cl (3,35,-8);cl (4,28,17);cl (5,10,35);cl (6,-15,42);cl (7,-40

28、,35);cl (8,-58,17);cl (9,-65,-8);cl (10,-58,-33);cl (11,-40,-51);cl (12,-16,-56);/-></SCRIPT> <div id="c0" style="position:absolute;right:6;top:33px; z-index:2; left: 24px"> </div> <div id="c1" style="position:absolute;left:20;top:-20; z-ind

29、ex:5;font-size:11px;"><b>1</b></div><div id="c2" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>2</b></div> <div id="c3" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px

30、;"><b>3</b></div> <div id="c4" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>4</b></div> <div id="c5" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b&g

31、t;5</b></div> <div id="c6" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>6</b></div> <div id="c7" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>7</b></

32、div> <div id="c8" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>8</b></div> <div id="c9" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>9</b></div> <div id

33、="c10" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>10</b></div> <div id="c11" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>11</b></div> <div id="c12&quo

34、t; style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>12</b></div> <div id="ob0" style="position:absolute;left:-20;top:-20;z-index:1"> </div> <div id="ob1" style="position:absolute;left:-20;top:-20;

35、z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div> <div id="ob2" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b><

36、/font></div> <div id="ob3" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div> <div id="ob4" style="position:absolute;left:-20;top:-20;z-inde

37、x:8"> <font size="+3" color="#0000FF"><b>.</b></font></div><div id="ob5" style="position:absolute;left:-19px;top:31px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></fon

38、t></div> <div id="ob6" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div> <div id="ob7" style="position:absolute;left:-20;top:-20;z-index:7&

39、quot;> <font size="+3" color="#00FFFF"><b>.</b></font></div> <div id="ob8" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font>&

40、lt;/div> <div id="ob9" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div> <div id="ob10" style="position:absolute;left:-20;top:-20;z-index:6"

41、> <font size="+3" color="#F30000"><b>.</b></font></div> <div id="ob11" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></

42、div> <div id="ob12" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>“onLoad="ob(),setNum(),setInterval('timer()',100);setInterval('runClock()'

43、;,100)"” <body 下面是表單的下部分，用以提交留言到服務器。上圖的最下面是版權信息，盡量用簡潔的語言和穩重的色彩，給人留下清新，簡練的感覺。版權信息標名了作者和版權用以提高內容的可讀性和使內容充實，既突出網站的主色調，又給人以凝重的感覺。提交留言代碼如下：<form method="POST" action="wenzhang.asp"><p>姓名:<input type="text" name="nam1" size="14">&

44、lt;font color="#FF0000">*</font> 郵箱地址:<input type="text" name="nam2" size="20"><font color="#FF0000">*</font></p> <p>文章標題:<input type="text" name="nam3" size="46"><font col

45、or="#FF0000">*</font></p><p>文章內容:<textarea rows="5" name="nam4" cols="80" style="vertical-align: text-top"></textarea><font color="#FF0000">*</font></p><p>您的留言:<textarea rows="

46、;2" name="nam6" cols="80" style="vertical-align: text-top"></textarea></p><p align="center"><input type="submit" value="提交" name="nam5"> <input type="reset" value="重置" name="name6"></p></form><%Function MyData(MyFile)Dim objFSO,objTSA