網(wǎng)頁實訓報告

1、網(wǎng)頁設計與制作實訓報告實訓題目: 武功山旅游網(wǎng)制作 專 業(yè)： 軟件工程技術(shù) 班 級： 10軟件 3 班 姓 名： 指導教師： 二0一一年 十二 月 二十三 日目 錄1、實訓目的32、實訓題目描述和要求43、實訓報告內(nèi)容53.1.網(wǎng)站框架53.2.網(wǎng)站主體的代碼63.2.1.首頁113.2.2.景區(qū)概況143.2.3.旅游路線153.2.4.溫泉山莊163.2.5.旅游常識173.2.6酒店住宿184、總結(jié)19參考書目：20實訓指導教師評語211、實訓目的通過本次實訓，讓同學們對本學期的網(wǎng)頁設計與制作這門課程有一個系統(tǒng)的認識，加強和鞏固已有的知識，訓練和培養(yǎng)學生獲取信息和處理信息的能力，充分培養(yǎng)

2、和提高學生的動手能力，學會通過網(wǎng)絡、書籍、素材光盤等方式收集索需的文字資料、圖像資料、flash動畫和網(wǎng)頁特效。能夠運用所學的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題，同時也能夠體現(xiàn)自己的工作作風，認真學習的態(tài)度。主要是希望同學們能夠熟練的掌握利用我們所學的知識來制作一個主題鮮明的網(wǎng)站。(1) 掌握創(chuàng)建Dreamweavercs3本地站點的方法,利用表格和層規(guī)劃網(wǎng)頁布局。(2) 掌握在網(wǎng)頁中添加文本、圖像、flash動畫和音樂等頁面元素。(3) 掌握制作AP Div和超級鏈接的的能力。(4) 掌握在創(chuàng)建網(wǎng)頁中各種連接方式。(5) 掌握整合與發(fā)布網(wǎng)站的技術(shù)。(6) 綜合運用所學軟件進行網(wǎng)

3、頁材料準備。2、實訓題目描述和要求同學們根據(jù)自己的興趣，設計一個個人站點或介紹一個集體的站點，圍繞一個主題并能夠體現(xiàn)出自己的個性，有整體框架結(jié)構(gòu)，表格布局，層次定位等。布局合理，色彩搭配協(xié)調(diào)統(tǒng)一，內(nèi)容豐富多彩，頁面風格獨特。掌握網(wǎng)頁設計基本概念和HTML的基本結(jié)構(gòu)，了解網(wǎng)頁技術(shù)要問、HTML的編輯和運行環(huán)境。掌握文字版面的編輯，掌握網(wǎng)頁的超鏈接技術(shù)的應用。了解列表的各種使用，了解表格的基本語法，掌握整合與發(fā)布網(wǎng)站的技術(shù)，掌握表格的定義、控制、分組、標題等的應用，了解表單在網(wǎng)頁中的應用，了解網(wǎng)頁中CSS的基礎知識，掌握CSS的各種屬性應用，了解一個整體網(wǎng)站建立的過程。綜合運用Photoshop、

4、fierworks 8、flash等多媒體制作軟件創(chuàng)作出多媒體作品，為網(wǎng)頁制作充分準備材料下功夫。3、實訓報告內(nèi)容3.1.網(wǎng)站框架首頁景區(qū)概況旅游路線溫泉山莊旅游常識酒店住宿這是我做的整個武功山風景網(wǎng)站的主題結(jié)構(gòu)可以看到下面的五個子頁1、 頂端的是用動畫logo.gif安放在上面的動畫，是在一張底圖上面加（武功山歡迎您）六個字分別閃出，這個我是用fireworks 8手動制作出來的。2、 在這張動畫上面同學們可以看得到有鳥在飛，沒錯這就是我插個AP Div后，在這個Div中插入 flash動畫02.swf，當然做這個我就不會親自做咯，這個是我們以前學習中我在光盤中發(fā)現(xiàn)的，就拿來用了，我們要做到

5、會利用東西。1、分別設置了兩個地方可以鏈接；2、各個頁面可以自由鏈接首頁可以鏈接到其他五個，其他五個的子頁也可以鏈接任意個網(wǎng)頁中去。1、 1、以上的就是我做到網(wǎng)站的主體結(jié)構(gòu)介紹，其他的五張子頁就是根據(jù)這個然后在中間插入不同的東西一改變幾張子頁的不同內(nèi)容，2、友情鏈接里面都鏈接了各個網(wǎng)站的網(wǎng)址，只要連接了英特網(wǎng)就可以登入去網(wǎng)頁看見其他網(wǎng)頁的內(nèi)容這是模版的主樣：3.2.網(wǎng)站主體的代碼武功山欣賞 AC_FL_RunContent( codebase,/pub/shockwave/cabs/flash/swflash.cab#version=9

6、,0,28,0,width,983,height,202,src,./flash/02,quality,high,pluginspage,/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash,wmode,transparent,movie,./flash/02 ); /end AC code 首 頁 景區(qū)概況道路指引旅游路線特色風景溫泉山莊旅游常識酒店住宿      !- var today , hour ; today = new Date(

7、),hour = today.getHours() ; if(hour 12)document.write( 上午好!) ; else if (hour 14)document.write( 中午好!) ; else if (hour    友情鏈接        首 頁 | 景區(qū)概況 | 道路指引 | 旅游路線 | 特色風景 | 溫泉山莊 | 旅游常識&n

8、bsp;| 酒店住宿        吉安市武功山風景名勝區(qū)管理委員會 郵箱： 贛ICP備05007532        Copyright2011-2016      版權(quán)所有  10軟件3班 楊波 3.2.1.首頁這是首頁的重點部分我做了個截圖，做個簡要的解釋1、我放了兩個表格在里面其

9、他的就是分隔單元格，嵌套表格等等；2、右側(cè)圖片是靜圖工具十四張，分兩排每排七張，都做了大圖鏈接；3、側(cè)圖的左邊是一個動畫的圖片；4、中間是兩個賓館和武功山的特產(chǎn)臘肉，肥而不膩；5、下面這張底圖是武功山介于三市之間的詳細底圖，滑動鼠標可以放大此圖片。自動切換圖片的代碼： !- function objSP_Article() this.ImgUrl=; this.LinkUrl=; this.Title=; function SlidePic_Article(_id) this.ID=_id; this.Width=0;this.Height=0; this.TimeOut=5000; this

10、.Effect=23; this.TitleLen=0; this.PicNum=-1; this.Img=null; this.Url=null; this.Title=null; this.AllPic=new Array(); this.Add=SlidePic_Article_Add; this.Show=SlidePic_Article_Show; this.LoopShow=SlidePic_Article_LoopShow; function SlidePic_Article_Add(_SP) this.AllPicthis.AllPic.length = _SP; functi

11、on SlidePic_Article_Show() if(this.AllPic0 = null) return false; document.write(); if(this.TitleLen != 0) document.write(); elsedocument.write(); this.Img = document.getElementById(Img_ + this.ID); this.Url = document.getElementById(Url_ + this.ID); this.Title = document.getElementById(Title_ + this

12、.ID); this.LoopShow(); function SlidePic_Article_LoopShow() if(this.PicNumthis.AllPic.length-1) this.PicNum+ ; else this.PicNum=0; this.Img.filters.revealTrans.Transition=this.Effect; this.Img.filters.revealTrans.apply(); this.Img.src=this.AllPicthis.PicNum.ImgUrl; this.Img.filters.revealTrans.play(

13、); this.Url.href=this.AllPicthis.PicNum.LinkUrl; if(this.Title) this.Title.innerHTML= +this.AllPicthis.PicNum.Title+; this.Img.timer=setTimeout(this.ID+.LoopShow(),this.TimeOut); var SlidePic1= new SlidePic_Article(SlidePic1); SlidePic1.Width = 492; SlidePic1.Height = 310; SlidePic1.TimeOut = 5000;

14、SlidePic1.Effect = 23; SlidePic1.TitleLen = 40; var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/01.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/02.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); var oSP = new objSP_Arti

15、cle(); oSP.ImgUrl = images/wugongshan/images/03.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/04.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP);var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/05.jpg; oSP.LinkUrl = #; Sli

16、dePic1.Add(oSP);var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/06.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP);var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/07.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); SlidePic1.Show(); /-  3.2.2.景區(qū)概況這是景區(qū)概述的重點部分我做了個截圖，做個

17、簡要的解釋1、插入一個一行一列的表格，居中；2、左側(cè)是插入一個四行一列的嵌套的表格，表格寬度是0，然后將找好的材料對應插入就可以了；3、右側(cè)是各個地方的索引，圖片，文字都做了相應的鏈接，當然圖片是看大圖鏈接，而文字是網(wǎng)站鏈接。3.2.3.旅游路線這是旅游路線的重點部分我做了個截圖，做個簡要的解釋1、這里插入了一個一行一列的表格，具體做法和景區(qū)概述類是；2、右側(cè)是插入一個二行一列的嵌套的表格，表格寬度是0，然后將找好的材料對應插入就可以了，其中地圖是可以滑動鼠標放大的，也可以點擊觀看大圖；3、左側(cè)是各個地方的索引，圖片，文字都做了相應的鏈接，當然圖片是看大圖鏈接，而文字是網(wǎng)站鏈接。地圖滑動鼠標放

18、大的代碼： function change_imageSize(e, img) var zoom = parseInt(img.style.zoom, 10) | 100; zoom += event.wheelDelta / 12; if (zoom 0) img.style.zoom = zoom + %; return false; 660) this.width=330 onmousewheel=return change_imageSize(event,this)3.2.4.溫泉山莊這是溫泉山莊的重點部分我做了個截圖，做個簡要的解釋1、這里插入了一個兩行兩列的表格；2、上左插入了一段

19、武功山溫泉山莊的具體介紹；3、上右插入了一張溫泉的圖片，在圖片上面再插入了一個AP Div，然后在這個Div中插入一個動畫03.swf，出現(xiàn)以上效果；4、下左和下右是一樣的功能，只是一個向左一個向右從中間一起向兩邊運動，當鼠標停留在該區(qū)域圖片則就不運動了，還做了鏈接，點擊圖片可以進入一個專門的可以看得見圖片動的網(wǎng)頁；動圖的代碼： 3.2.5.旅游常識這是旅游常識的重點部分我做了個截圖，做個簡要的解釋1、這里插入了一個一行兩列的表格；2、左側(cè)是插入了一張背景圖片，然后在上面放置了一些文字；3、右側(cè)和景區(qū)概述的右側(cè)，旅游路線的左側(cè)我就不做介紹了；3.2.6酒店住宿這是酒店住宿的重點部分我做了個截圖，做個簡要的解釋1、這理主要是介紹了五個大小不等的酒店共旅客住宿，這里我是插入了一個一行兩列的表格；2、左側(cè)插入了一個五行一列的嵌套表格，插入了五張酒店的圖片；3、右側(cè)也插入了一個五行一列的嵌套表格，在這五行里又插入了一個一行兩列的嵌套表格，然后對應這左邊的酒店的圖片對應的插入這五個酒店的簡介；4、總結(jié)一個禮拜的實訓課程這么快就結(jié)束了，此次實訓檢驗了通過一學期的學習對知識進行了匯