課程名稱：網頁設計
設計題目：我的家鄉
院系：建築信息工程系
專業班級：計算機0901
學生姓名：
學號：200913190
指導教師:徐美霞
起止日期：2010年12月20到2010年12月24日
第 1 頁 *** 13 頁
我的家鄉網頁制作過程
壹、 網站開發目的和功能簡介
隨著網絡技術的發展與互聯網的普及，網站建設與網頁制作越來越成為各行各業以及個人宣傳自己的有利工具，、網站在當今時代被越來越多的人用來宣傳，通過網站的制作可以讓老師、同學以及朋友更好的了解自己以及別人想要知道的事情，我現在做的是關於我的家鄉，為別人提供了壹個更深入了解自己的壹個平臺，本網站主要功能是讓更多的人去了解我了解我的家鄉
二、 網站的設計
2.1 網站的名稱：我的家鄉
2.2 網站欄目劃分
根據本網站的內容和功能劃分為：我的心語、導航鏈接、各地方的簡介、體現家鄉的圖片、版權聲明等。
（1）我的心語——對我們宿舍的六個簡介，提示對照網站的主題體現我們的家鄉；（2）導航鏈接——鏈接到各自設置的網頁各自的家鄉；（3）各地方的簡介——簡單介紹了我們各自的家鄉，了解了家鄉的知識文化；（4）圖片——列舉了每個地方的代表圖片，用另壹種方式展現出不同的風采；（5）版權聲明——聲明了網站的建設者
具體如圖所示:
2.3網站導航應用於所有頁面提高網站的操作友好性。
2.4網站的風格與色彩選擇：頁面以淺綠和淺黃色為主。淺綠色體現了活力，字體實用淺棕色和淡淡的灰色給人壹種清析、穩重的感覺。所有頁面色調統壹，布局相似。
2.5網站目錄結構設計合理：不同素材采用不同學文件夾分開存放。如圖片放在image
文件夾、flash放在flash文件夾內、完成作業放在以自己名字命名的文件夾內等
三、 聊城首頁的制作過程
3.1首頁版圖：
首頁、導航鏈接、內容、個網頁鏈接
3-1
整個頁面分為四部分，第壹部分是以壹個flash文件顯示動態的圖片，主要是網站的突出顯示；第二部分是導航欄；第三部分是詳細內容，其中網頁中的文字排得整齊緊湊，這樣能給人壹種舒服的感覺。在網頁適當的地方加壹些圖片，每張畫面再加壹些不同的文字說明，使得網頁顯得更加的精美；第四部分是各網頁鏈接。采用這種布局，主要是給瀏覽者壹種簡單、清晰、明了的感覺，使網站整齊劃壹。
具體的布局顯示如下所示：
3-2
3.2制作過程：：本網頁制作分為三個部分：頂部是用flash制作的頁頭。中部又分為左右兩個部分，左邊為家鄉簡單的介紹和鏈接，制作的動態圖片使用時間軸讓圖片自動播放，還有從頂部滑下的圖片自動循環播放；右邊為家鄉的各景點的見解。我還為網頁設置了背景圖片，在最後利用spry選項卡添加的圖片。
四、聊城首頁制作過程
4.1新建壹個頁面，命名為聊城首頁（index）
4.2在頁面屬性的外觀中設置四邊邊距為0，文本顏色設為：#9900CC，大小設為18像素；在鏈接中設置下劃線樣式為：有下劃線；鏈接顏色為：#0000FF。
4.3（1）首頁（index）制作
利用樣式定義各個部分的高寬，將./image/195911NM-10.gif設為背景圖片。頁頭圖片為水城明珠.jpg設置flash動畫為左右橘色.swf代碼如下：
頁頭圖片的設計代碼：（圖如上3-2）
<div id="Layer3" style="left: 30px; top: 34px; width: 186px; height: 175px;"><span class="STYLE3"><a href="liaocheng.html"><img src="../image/201042717165.jpg" name="Image1" width="186" height="174" /></a></span></div>
<a name="dingbu" id="dingbu"></a>
<table width="967" height="817" border="1" align="center" bordercolor="#000000">
<tr>
<td height="190" colspan="2" valign="top" bgcolor="#FFFFFF"><img src="../image/水城明珠.jpg" width="956" height="202" /></td>
</tr>
Flash動畫設置代碼如下：
<div id="Layer2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','957','height','210','src','../FLASH/左右橘色','quality','high','pluginspage','/go/getflashplayer','wmode','transparent','movie','../FLASH/左右橘色' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="957" height="210">
<param name="movie" value="../FLASH/左右橘色.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/左右橘色.swf" width="957" height="210" quality="high" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
（2）景陽岡（jyg）頁設計
此網頁運用了壹些代碼實現了文字的滾動代碼：<td width="213" <td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p><span class="STYLE21">景陽岡其址在陽谷城東18公裏處，沙岡頂部正中，建有壹座民族形式的廟宇，俗稱“武松廟”，據傳始建於明代中期,後被毀。現存古廟為1958年修建。廟前方有壹幢刻有“景陽岡”三個大字的石碑，系我國當代著名書法家舒同所題。廟東二、三百米處，有壹刻有“武松打虎處”的墨玉色石碑。 1973年以來，經省考古隊多次試掘，認定景陽岡為“龍山文化”遺址國家首批AAA級景區，水滸旅遊線上重要景點，武松打虎人人皆知，武松打虎的地方不是人人都去過景陽岡景區總占地面積33.3公頃。景區內沙丘起伏，莽草叢生，林蔭蔽日，主要景點：已有200余年歷史的山神廟廟的左前方立有原中***山東省委書記舒同題寫的“景陽岡”石碑，右前方立有著名書法家楊萱庭書寫的高3米的“虎”字碑；南宋時期所立“武松打虎處”石碑；趙樸初所書寫門匾的“武松廟”；由徐悲鴻的夫人、書法家廖靜文題名的六角單檐的虎嘯亭；由著名畫家劉繼卣創作的“武松打虎”浮雕石像；有傳為武松打死的那只老虎的化身——“天下第壹虎”石，三碗不過岡酒店……</span><br />
</p>
</marquee>
頁頭圖片為聊城.jpg設置flash動畫穿越星空.swf、煙花綻放.swf代碼如下：
<tr>
<td height="186" colspan="3" valign="top"><img src="../image/聊城.jpg" width="1016" height="224" /></td>
</tr>
Flash文件代碼：
<div id="apDiv1">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','991','height','217','src','../FLASH/穿越星空','quality','high','pluginspage','/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/穿越星空' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="991" height="217">
<param name="movie" value="../FLASH/穿越星空.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/穿越星空.swf" width="991" height="217" quality="high" pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="apDiv2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','390','height','211','src','../FLASH/煙花綻放','quality','high','pluginspage','/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/煙花綻放' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="390" height="211">
<param name="movie" value="../FLASH/煙花綻放.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/煙花綻放.swf" width="390" height="211" quality="high" pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
完成效果如下
3-3
（3）鳳凰苑（fhy）網頁設計
鳳凰苑網頁設計為突出鳳凰苑的特色頁頭采用鳳凰園內比較突出的產品來體現鳳凰苑的科技（仙人掌、日本無花果等……）頁頭采用flash是左右5.swf、蝴蝶飛飛.swf，此網頁插入的是壹個由flash做的圖片實現圖片的從右向左的滾動，使用了上面網頁中文字滾動的方法，使用的代碼
（<div id="apDiv7">
<td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="1020" height="150" scrollamount="10" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p><span class="STYLE29">聊城市鳳凰苑農業科技園，引種國內外名優稀特果樹品種100余個，綠化和國家造紙工業用樹毛白楊品種20幾個，並繁育了600余萬株苗木，以滿足本市及周邊地區農業種植結構調整和發展農村高效經濟的需要。
主要品種如下：
（1）日本仙桃王： 該桃有如下顯著特點：個頭特大，平均單果重500克，最大可達1350克；品質極佳，外觀全紅，脆肉型、香甜、爽口，含糖量可達23％；極耐貯運，常溫下可存20天，恒溫庫可存3至4個月，實為中秋、元旦，待客之佳品；樹上掛果期長，8月下旬至9月下旬，可陸續面市，這是其他任何桃品種所不能比擬的。
（2）韓國早熟有名桃： 在鳳凰苑區，6月底成熟，全紅，鮮艷極為漂亮，單果重可達300克，脆肉型濃甜，多汁，極為豐產，與其他早熟桃相比，風味極佳，市場開發前景看好。
（3）韓國有名桃：韓國農家實生育成，九月下旬成熟，平均單果重350克，清香味濃，汁多味極甜，半溶質，耐貯運，外觀紅色鮮艷，是韓國晚熟主栽品種。
（4）美國扁桃： 86－1、86－2、86－9是從美國扁桃中選育出的幾個優系，86－1、86－4出仁率均在45％以上，86－9又是其最好授粉品種。美國扁桃又稱美國大杏仁，具抗旱耐瘠薄，適應性強，耐粗放管理等特點，壹般栽後三年結果，五年形成規模產量，豐產期畝產大杏仁500公斤，國內市場現行價56元／公斤，效益極為可觀。美國扁桃是荒灘、四旁發展的理想樹種，也是農家致富的理想樹種。
（5）六月雪梨： 是我國研究開發的最早品種梨，比綠寶石早熟20天，平均單果重180克，果肉細白，石細胞無，脆甜多汁，通過我園區高接觀察，此品種座果率高，極豐產，抗黑星病。
（6）脫毒草莓系列：鳳凰苑從國家果樹所引進脫毒草莓系列品種：美香莎 荷蘭引進，是當今壟斷歐美早春市場的王牌草莓品種，極早熟，果堅硬，風味佳。果肉紅色，最大單果重可達118克，芳香，濃郁，適促成半促成栽培和落地栽培，將是農業高效開發的理想品種。其他草莓品種，鬼怒甘、酒心糖、新哈尼、全明星等18個。</span><br />
</p>
</marquee>
</div>）
改變字母的滾動方向向左（left）實現不同於上壹網頁的滾動，頁頭flash的設置，同與上壹網頁。
完成效果圖如下
（4）光嶽樓（gyl）、東昌湖（dch）采用同樣的設計完成。
五、設計技術總結
為了使我們的網站更加實用、內容豐富，我們在網站裏用了很多的技術，包括flash photoshop 等圖片處理和動畫，運用dreamweaver中相關知識制作各種特效比如圖層運用、時間軸運用等。
5.1在素材收集和處理上本人花費了大量時間處理網站動畫、真實照片收集、個人信息。如應用PHOTOSHOP對相片進行整體處理。利用flash制作了滾動動畫。
5.2文字滾動效果，代碼如下：
<td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="up" width="179" height="150" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p>內容 <br />
</p>
</marquee>
六、實習心得
本次網站主要是運用本學期學過的知識來布局應用、制作動畫效果，通過本次的網站設計，運用了本學期所學到的知識這樣不僅復習了本學期學過的壹些知識，同時也加深所學知識的內容，這次的網頁制作使我學會了很多，有關怎麽收集資料，怎樣用最快的方法收集資料，怎樣收集有效的資料，怎樣整理資料，怎樣使自己的下載的資料便於查找，也學會了網頁的制作，學會了運用網頁特效，怎樣的特效才能凸現網頁主題。在制作網站的過程中，也碰到了不少的不明白的地方通過老師同學的幫助也解決了不少問題，通過循序漸進的學習慢慢地完成了本次的網站建設，這次做的網頁雖不是很好看，有不足之處，比如動態頁面的制作、腳本的運用、壹些效果的運用等運用的不夠靈活，同時網頁布局也不是很完善，可是我花了很多時間來完成它，所以呢，它對我以後做網頁有很大的幫助。在此次做網頁的過程中也讓我學到了很多東西，所以呢從我內心來說我是很滿意我的這次經歷，同時也要謝謝老師安排這樣的實習周，為什麽呢？因為在制作過程中我不僅學到了書上沒有的東西，也培養了我獨立思考問題的能力，同時還增強了同學之間的團結互助的友誼。因此，不論從哪個角度來說，老師此次布置的任務是上大學以來唯壹把知識用於實踐的第壹回，再壹次謝謝妳老師。總之這次設計就是在不斷的“發現問題——>解決問題——>再發現問題——>再解決問題——>”這個學習過程中完成的。今後我將繼續努力，把