web開發(fā)使用教程課程設(shè)計報告web婚紗攝影網(wǎng)頁設(shè)計_第1頁
web開發(fā)使用教程課程設(shè)計報告web婚紗攝影網(wǎng)頁設(shè)計_第2頁
web開發(fā)使用教程課程設(shè)計報告web婚紗攝影網(wǎng)頁設(shè)計_第3頁
web開發(fā)使用教程課程設(shè)計報告web婚紗攝影網(wǎng)頁設(shè)計_第4頁
web開發(fā)使用教程課程設(shè)計報告web婚紗攝影網(wǎng)頁設(shè)計_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、 WEB開發(fā)使用教程課程設(shè)計報告題目：婚紗攝影目錄目錄2摘要31 需求分析42 系統(tǒng)設(shè)計42.1 系統(tǒng)目標42.2 關(guān)鍵技術(shù)53 設(shè)計與實現(xiàn)64 代碼實現(xiàn)104.1 主頁面代碼104.2 瀏覽器窗口內(nèi)漂浮的圖片代碼實現(xiàn)12注冊登錄頁面設(shè)計13圖片自動切換代碼設(shè)計135 實驗總結(jié)166 參考文獻17 摘要 隨著人們的生活水平的提高，人們對婚紗攝影的要求也越來越高，婚禮不僅是一個儀式，更是一段精神享受歷程。世界各地各有各的美妙，各有各的精彩到處都充滿著浪漫氣息，我們的婚紗攝影網(wǎng)站詳細的介紹了業(yè)務(wù)效勞地區(qū)及各色套餐。這個網(wǎng)站方便新人挑選自己心儀的婚紗拍攝地點及婚紗款式，甄選適合自己的套餐。關(guān)鍵詞：婚

2、紗攝影、web、 html、網(wǎng)站1 需求分析婚紗攝影借助互聯(lián)網(wǎng)，能夠解決傳統(tǒng)婚紗攝影實體店不能解決的信息跨地區(qū)推廣問題；同時還由于婚紗攝影也作為一個整體的商業(yè)生態(tài)鏈，涉及到旅行效勞機構(gòu)、酒店、景區(qū)、交通等等，利用互聯(lián)網(wǎng)可以將這些環(huán)節(jié)連成一個統(tǒng)一的整體，進而可以大大提高效勞的水平和業(yè)務(wù)的來源。一方面，互聯(lián)網(wǎng)為婚紗攝影宣傳提供新的機遇及提高效勞水平和運作水平的手段，另一方面，大多數(shù)沒有開展網(wǎng)上業(yè)務(wù)的中小型婚紗攝影那么面臨嚴峻的挑戰(zhàn)。網(wǎng)站系統(tǒng)解決方案提供商必須有足夠的能力和經(jīng)驗幫助廣闊中小型的婚紗攝影走上電子商務(wù)的道路，同時，其提供的解決方案還必須能夠同時滿足復(fù)雜的B2B和B2C需求，并在穩(wěn)定性、可

3、用性、可管理性等方面具有優(yōu)勢。2 系統(tǒng)設(shè)計2.1 系統(tǒng)目標 1、網(wǎng)站主要功能模塊1優(yōu)美案例：介紹網(wǎng)站婚紗攝影的成功案例，提供根底婚紗攝影資料，提高品牌知名度。2婚紗展示：展示了一些具體的婚紗款式及價格，方便用戶選購。3優(yōu)惠套餐：提供了兩種價格及其優(yōu)惠的套餐活動，方便新人選購適合自己的風(fēng)格。4關(guān)于我們：包含了網(wǎng)站建設(shè)以來的開展狀況，業(yè)務(wù)人員水平等信息。5聯(lián)系方式：公布了網(wǎng)站的聯(lián)系方式，辦公地點等根本信息，方便用戶了解公司。6攝影風(fēng)采：羅列了以往的經(jīng)典樣片，展示了攝影水平能力，有助于用戶了解公司業(yè)務(wù)能力2、站點結(jié)構(gòu)導(dǎo)航圖 2.2 關(guān)鍵技術(shù)超級文本標記語言是標準通用標記語言下的一個應(yīng)用，也是一種標準

4、，一種標準， 它通過標記符號來標記要顯示的網(wǎng)頁中的各個局部。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容如：文字如何處理，畫面如何安排，圖片如何顯示等。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果 javascript是一種輕量級的編程語言，可以嵌入到html頁面中，由來瀏覽器來解釋執(zhí)行，用來實現(xiàn)瀏覽器和用于交互。 jav

5、ascript是一種基于對象和事件驅(qū)動的客戶端腳本語言，他可以在用戶瀏覽器為網(wǎng)頁添加一些動態(tài)效果，和用戶交互，響應(yīng)用戶操作。 javascript可以用來幫助減輕效勞器的壓力，例如在客戶端完成數(shù)據(jù)校驗。 特點： (1).解釋性腳本語言，javascript不需要編譯，只需要嵌入到html代碼中，由瀏覽器逐行加載解釋執(zhí)行。 (2).javascript是一種基于對象的語言，使用已經(jīng)創(chuàng)立好的對象來，和面向?qū)ο蟮南蠕h需設(shè)計語言不同，javascript并不支持繼承和重載。 (3).語言簡單，弱類型，語法和java,C語言類似，變量不需要聲明和指定類型即可使用，是一種弱類型語言。 (4).javasc

6、ript語言相對來說比擬平安，僅由瀏覽器執(zhí)行，不允許javascript訪問本地硬盤，以及操作效勞器上的數(shù)據(jù)，只用來顯示瀏覽器的網(wǎng)頁效果和實時交互。 ( 5).動態(tài)性，使用javascript可以在前端實現(xiàn)一些和效勞器完全沒有聯(lián)系的效果，javascript采用事件驅(qū)動的方式進行，html頁面的相關(guān)控件的相關(guān)事件在處觸發(fā)的時候會自動執(zhí)行響應(yīng)的腳本或者函數(shù)。(6).運行環(huán)境一般來說是瀏覽器，只需要瀏覽器支持即可，如果不支持或者用戶禁用了javascript，瀏覽器會忽略掉這些javascript代碼。+CSS DIV+CSS是WEB設(shè)計標準，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格table布局

7、定位的方式不同，它可以實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相別離。提起DIV+CSS組合，還要從XHTML說起。XHTML是一種在HTML標準通用標記語言的子集根底上優(yōu)化和改良的新語言，目的是基于XML應(yīng)用與強大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。css是層疊樣式表Cascading Style Sheets的縮寫，用于定義HTML元素的顯示形式，是W3C推出的格式化網(wǎng)頁內(nèi)容的標準技術(shù)。網(wǎng)頁設(shè)計者必須掌握的技術(shù)之一。樣式表可分為嵌入式樣式表、外部樣式表和內(nèi)聯(lián)樣式表三種，在同一文檔內(nèi)可以同時使用三種方法。div+css結(jié)構(gòu)清晰，很容易被搜索引擎搜索到，天生就是適合優(yōu)化seo，降低網(wǎng)頁大小，讓網(wǎng)頁體積變

8、得更小。div+css結(jié)構(gòu)清晰、精簡，不意味著可以全部用div+css結(jié)構(gòu)，比方通篇HTML標簽全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整個HTML是一萬個毫不相干的內(nèi)容拼裝起來，或者通篇是<div><ul><li>結(jié)構(gòu)的，就如同這個頁面所有元素全是列表。事實上這兩種情況還相當普遍，因為曲解了“DIV+CSS的真實含義，也許根本就不應(yīng)該有這個說法，因為一個完整頁面幾乎不可能僅僅DIV+CSS就能完成。3 設(shè)計與實現(xiàn)根據(jù)上述的分析以及模塊化程序設(shè)計要求，設(shè)計出如下列圖所示的功能

9、模塊頁面圖 圖3-1 婚紗攝影首頁展示 圖3-2 婚紗銷售頁面展示 圖3-3 優(yōu)惠套餐頁面展示圖3-4 關(guān)于我們頁面展示圖3-5攝影風(fēng)采展示圖3-6優(yōu)美案例展示圖3-7聯(lián)系我們頁面4 代碼實現(xiàn) 4.1 主頁面代碼#box1width:1330px;height:280em;padding:0;border:0px solid;margin:5px atuo;#box2width:1330px;height:10em;padding:1;border:0px solid;margin-top:0px;background-image:url(./5.jpg); background-size:1

10、00% 100%; background-position:center;#box3width:1000px;height:3em;padding:1;border:0px solid;margin-top:5px;margin-left:165px;#box3 ul padding:0px; margin:0px; list-style-type:none; #box3 ul li position:relative; float:left; width:160px; height:30px; border:1px solid white; border-width:1px 1px 0 0;

11、 line-height:30px; text-align:center; background-color:#cca; #box3 ul li ul display:none; #box3 ul li:hover ul display:block; position:absolute; top:30px; left:0px; width:160px; #box3 a display:block; text-decoration:none; color:olive; background-color:#fec;#box3 a:hovercolor:red;background-color:#d

12、c8;<div id="box3"> <ul> <li>優(yōu)美案例 <ul> <li><a href="#middle1">上海外灘</a></li> <li><a href="#middle2">愛琴海</a></li> <li><a href="#middle3">巴厘島</a></li> </ul> </

13、li><li>婚紗展示 <ul> <li><a href="3.html"target="_blank">婚紗銷售</a></li> </ul></li><li>優(yōu)惠套餐 <ul> <li><a href="5.html"target="_blank">朱顏傾城</a></li> <li><a href="6.htm

14、l"target="_blank">小小新娘</a></li> </ul></li><li><a href="7.html"target="_blank">關(guān)于我們</a></li><li><a href="2.html"target="_blank">聯(lián)系方式</a></li><li><a href="4.h

15、tml"target="_blank">攝影風(fēng)采</a></li> </ul></div>4.2 瀏覽器窗口內(nèi)漂浮的圖片代碼實現(xiàn) <div id="divAd" style="position: absolute;"> <a href=""><img src="40.jpg" alt="" width=120px height=60px/></a> </div

16、> <script type="text/javascript"> var x=50,y=60; var step=1; var speed=10; var divElement=("divAd"); var moveRight=true; var leftBound=0; var rightBound=document.documentElement.clientWidth-divElement.offsetWidth; var moveDown=true; var topBound=0; varvElement.offsetHeig

17、ht; function resizeHandler() clearInterval(timerID); rightBound=document.documentElement.clientWidth-divElement.offsetWidth; bottomBound=document.documentElement.clientHeight-divElement.offsetHeight; timerID=setInterval("moveAdvertisement()",speed); function moveAdvertisement() =x+"px

18、" x=x+step*(moveRight?1:-1); if (x>rightBound) moveRight=false; else if (x<leftBound) moveRight=true; =y+"px" y=y+step*(moveDown?1:-1); if(y>bottomBound) moveDown=false; else if (y<topBound) moveDown=true; VartimerID=setInterval("moveAdvertisement()",speed); ()=f

19、unction() timerID=setInterval("moveAdvertisement()",speed); </script>注冊登錄頁面設(shè)計<script type="text/javascript">function contatenateText(thisForm)alert(alue);</script><form action="3.html"onsubmit="contatenateText(this)">登錄名：<input type=

20、"text"name="login_name"value="abc">密碼：<input type="password"name="pwd"value="123"><input type="submit"value="登錄購置"/><input type="reset"value="重置信息"/></form>圖片自動切換代碼設(shè)計<scr

21、ipt type="text/javascript"> var pictureBoxWidth=600; /圖片框?qū)挾?var pictureBoxHeight=500; /圖片框高度 var imgSrc=new Array("25.jpg","26.jpg","27.jpg","28.jpg");/圖片 var aHref="","","","",""/圖片超鏈接 var interva

22、l=2000;/每張圖片延時時間ms var pictureIndex=0;/將要顯示的圖片編號 var imgElement=("pic");/獲取插入圖片的img元素 var aElement=("linkURL");/獲取土坯昂上的超鏈接a元素 function init()/load時間處理函數(shù) /設(shè)置圖片框?qū)挾群透叨?var divElement=("pictureBox"); =pictureBoxWidth+"px" =pictureBoxHeight+"px" /設(shè)置圖片的寬度和

23、高度 =pictureBoxWidth+"px" =pictureBoxHeight+"px" function autoChangePicture(pictureID) =imgSrcpictureID;/更換圖片 =aHrefpictureID;/更換圖片超鏈接 pictureIndex=(pictureID+1)%4; autoChangePicture(pictureIndex); /每隔interval毫秒調(diào)用一次autoChangePicture函數(shù) var timerID=setInterval("autoChangePicture(pictureIndex)",interval); /鼠標滑過圖片時，暫停圖片切換 =function()clearInterval(timerID); /鼠

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論