網(wǎng)站設(shè)計實驗報告_第1頁
網(wǎng)站設(shè)計實驗報告_第2頁
網(wǎng)站設(shè)計實驗報告_第3頁
網(wǎng)站設(shè)計實驗報告_第4頁
網(wǎng)站設(shè)計實驗報告_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

PAGEPAGE2院系：計算機科學學院專業(yè)：年級：課程名稱：網(wǎng)站管理與設(shè)計學號：姓名：指導教師：2012年5月實驗名稱實驗一Web服務(wù)器的配置實驗二HTML、Dreamweaver、CSS+DIV簡單網(wǎng)頁制作實驗類型設(shè)計型綜合型創(chuàng)新型√實驗目的或要求熟悉Web的工作原理學習Web服務(wù)器的配置（Xampp或者Wamp的配置）熟悉HTML、CSS、DIV練習使用Dreamweaver8制作網(wǎng)頁掌握簡單網(wǎng)頁設(shè)計與制作的方法實驗原理（操作步驟）實驗一：Web服務(wù)器的配置Web的工作原理：1.在瀏覽器上用URL查詢DNS，其將返回服務(wù)器的IP地址；2.在瀏覽器上用這個IP建立

一個TCP/IP連接；3.在瀏覽器上通過該連接向服務(wù)器HTTP請求；4.應(yīng)于請求的內(nèi)容，服務(wù)器找到對應(yīng)的文件，根據(jù)文件的擴展名，形成一個MIME類型的HTTP應(yīng)答，發(fā)送給瀏覽器，然后關(guān)閉連接；5.根據(jù)消息的頭，瀏覽器按照某種方式顯示該文件的內(nèi)容。Web服務(wù)器的配置步驟：第一步：在網(wǎng)上下載xampp服務(wù)器；第二步：安裝xampp；第三步：使用XAMPP控制面板來啟動/停止所有服務(wù)或安裝/卸載所有服務(wù)，如下截圖：實驗原理（算法流程）第四步：在Apache服務(wù)啟動后，在瀏覽器中輸入地址http://localhost或，并檢測所有的XAMPP樣例和工具，如下截圖：

第五步：檢測Apache服務(wù)是否正常工作，可以通過左側(cè)的導航條上的“狀態(tài)”功能來查看，如下截圖：

實驗原理（算法流程）

實驗二：HTML、Dreamweaver、CSS+DIV簡單網(wǎng)頁制作

HTML的特點：1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便；2、可擴展性，HTML語言帶來了加強功能，增加標識符等要求，并采取子類元素的方式，為系統(tǒng)擴展帶來保證；3、平臺無關(guān)性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上。

CSS:創(chuàng)建和編輯css常用的是AdobeDreamweaver系列軟件，用于針對多種瀏覽器測試css的兼容性。FrontPage2000有能為站點創(chuàng)建外部樣式表的模板，可以用空白模板或已包含樣式的模板來創(chuàng)建，保存樣式表FrontPage會以css作為文件擴展名。創(chuàng)建或修改網(wǎng)頁樣式時，可使用位于“格式”菜單的“樣式”命令，F(xiàn)rontPage會自動創(chuàng)建嵌入的樣式表，并在嵌入的樣式表內(nèi)將此樣式保存為類選擇器。在網(wǎng)頁上使用外部樣式表的樣式，可將該網(wǎng)頁鏈接到樣式表，方法是使用位于“格式”菜單上的“樣式表連接”命令。刪除外部樣式表中的樣式，可在頁面視圖下打開樣式文件，格式/樣式命令，從打開的對話框中選擇要刪除的樣式，單擊“刪除”。

DIV:因為<div>是一個塊級元素，所以它的內(nèi)容會自動地開始一個新行。<div>固有的唯一格式表現(xiàn)就是換行?？梢酝ㄟ^<div>的class或id應(yīng)用額外的樣式。可以對同一個<div>元素同時應(yīng)用class和id屬性，但更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，class用于元素組，而id用于標識單獨的唯一的元素。

實驗原理（算法流程）

相關(guān)代碼如下：

</style></head><body><divid="Layer1"></div><divid="Layer2"><imgsrc="3XHL2B`_MY05QG@63~JBX1R.jpg"width="1092"height="49"/></div><divid="Layer3"><imgsrc="Gucn_76887_200992515144460CheckCurioPic3.jpg"width="347"height="370"/></div><divid="Layer4"><imgsrc="file:///C|/Users/ausu/Pictures/ASUS壁紙/WWE/024.jpg"width="749"height="370"/></div><divid="Layer5"><imgsrc="file:///C|/Users/ausu/Desktop/WWE美摔100分-WWE美國職業(yè)摔角在線觀看_files/logo.png"width="362"height="121"/></div><divid="Layer6"><tablewidth="1090"height="117"border="1"><tr><tdwidth="175"><imgsrc="20120501011439312.jpg"width="175"height="235"/></td>

<tdwidth="174"><imgsrc="20120518115353403.jpg"width="174"height="234"/></td><tdwidth="170"><imgsrc="20120519102549623.jpg"width="170"height="234"/></td><tdwidth="175"><imgsrc="20120522101738617.jpg"width="175"height="234"/></td><tdwidth="177"><imgsrc="17-11061611455Y30.jpg"width="174"height="237"/></td><tdwidth="179"><imgsrc="17-111010215629156.jpg"width="184"height="234"/></td></tr></table></div><divid="Layer7"></div><divid="Layer8"><tablewidth="342"height="365"border="1"><tr><td><divalign="center"class="STYLE2"><pclass="STYLE14">WWE摔角最新賽事</p></div></td></tr><tr><td><divalign="center"class="STYLE3"><ahref="/SD/2308/"實驗原理（算法流程）

class="STYLE4">2012.05.18SD</a></div></td>

</tr><tr><td><divalign="center"class="STYLE3"><ahref="/RAW/2320/"class="STYLE4">2012.05.22RAW</a></div></td></tr><tr><td><divalign="center"class="STYLE3"><ahref="/SD/2328/"class="STYLE4">2012.05.25SmackDown</a></div></td></tr><tr><td><divalign="center"class="STYLE5"><ahref="/PPV/2281/"class="STYLE4">2012《超越極限》</a></div></td></tr><tr><td><divalign="center"class="STYLE5"><ahref="/PPV/2329/"class="STYLE4">2012《無路可逃》</a></div></td></tr></table></div><divid="Layer9"><tablewidth="1094"height="54"border="1"><tr><tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/news/"class="STYLE12">新聞</a></span></div></td><tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/shows/"class="STYLE12">賽事</a></span></div></td><tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/shows/"class="STYLE12">選手</a></span></div></td><tdwidth="131"><divalign="center"><spanclass="STYLE12"><ahref="/shows/"class="STYLE12">圖片</a></span></div></td><tdwidth="131"><divalign="center"class="STYLE12"><ahref="/shows/"class="STYLE12">音樂</a></div></td><tdwidth="130"><divalign="center"class="STYLE12"><ahref="/films/"class="STYLE12">影輯</a></div></td>實驗原理（算法流程）<tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/wwesm?ref=http%3A%2F%2F%2Ffilms%2F"class

="STYLE12">微博</a></span></div></td>

</tr></table></div><divid="Layer10"><tablewidth="726"height="129"border="1"><tr><tdwidth="171"><imgsrc="punk100.jpg"width="171"height="116"/></td><tdwidth="173"><imgsrc="sheamus.jpg"width="173"height="118"/></td><tdwidth="177"><imgsrc="cc100.jpg"width="177"height="118"/></td><tdwidth="177"><imgsrc="nvzi100.jpg"width="177"height="123"/></td></tr></table></div></body></html>

實驗結(jié)果分析及心得體會實驗結(jié)果截圖如下：心得體會：通過本次實驗初步掌握HTML、CSS、DIV的應(yīng)用，實驗技巧欠佳還需更加努力。成績評定教師簽名：年月日

實驗名稱實驗三JavaScript實驗類型設(shè)計型綜合型創(chuàng)新型√實驗目的或要求熟悉JavaScript使用JavaScript制作特殊效果在前一次建立的網(wǎng)站中加入JavaScript效果實驗原理（操作步驟）JavaScript是一種能讓你的網(wǎng)頁更加生動活潑的程式語言，是目前網(wǎng)頁中設(shè)計中最容易學又最方便的語言?？梢岳肑avaScript輕易地做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及可顯示瀏覽器停留的時間。1、運算符:賦值運算符、算術(shù)運算符、比較運算符、邏輯運算符、條件運算、位操作運符符和字符串運算符。2、表達式:運算符和操作數(shù)的組合稱為表達式，分為四類：賦值表達式、算術(shù)表達式、布爾表達式和字符串表達式。3、語句：Javascript程序是由若干語句組成的，語句是編寫程序的指令。Javascript提供了完整的基本編程語句：賦值語句、switch選擇語句、while循環(huán)語句、for循環(huán)語句、dowhile循環(huán)語句、break循環(huán)終止語句和continue循環(huán)中斷語句。4、函數(shù)：函數(shù)是命名的語句段，可以被當作一個整體來引用和執(zhí)行。1）函數(shù)由關(guān)鍵字function定義；2）函數(shù)必須先定義后使用，否則將出錯；3）函數(shù)名是調(diào)用函數(shù)時引用的名稱，它對大小寫是敏感的，調(diào)用函數(shù)時不可寫錯函數(shù)名；4）參數(shù)是傳遞給函數(shù)使用或操作的值或?qū)ο?，它可以是常量，也可以是變量，也可以是類的對象?）return語句用于返回函數(shù)或表達式的值，當函數(shù)返回值類型不為空時，必須有如果返回值類型為空，沒有reurn項。5、對象：Javascript的一個重要功能就是基于對象的功能，通過基于對象的程序設(shè)計，可以用更直觀、模塊化和可重復使用的方式進行程序開發(fā)。一組包含數(shù)據(jù)的屬性和對屬性中包含數(shù)據(jù)進行操作的方法，稱為對象。比如要設(shè)定網(wǎng)頁的背景顏色，所針對的對象就是document，所用的屬性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的顏色為藍色。6、事件;用戶與網(wǎng)頁交互時產(chǎn)生的操作，稱為事件。絕大部分事件都是用戶的動作所引發(fā)，如：用戶按鼠標的按鍵，就產(chǎn)生onclick事件，若鼠標的指針在鏈接上移動，就產(chǎn)生onmouseover事件等等。在Javascript中，事件與事件處理程序配套使用。7、變量：如varmyVariable="somevalue";實驗原理（算法流程）相關(guān)代碼如下：<divid="Layer13"><SCRIPTlanguage=javascript><!--BirthDay=newDate("january06,2012");//改成你的計時日期today=newDate();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDay

daysold=Math.floor(e_daysold);e_hrsold=(e_daysold-daysold)*24;seconds=Math.floor((e_minsold-minsold)*60);hrsold=Math.floor(e_hrsold);e_minsold=(e_hrsold-hrsold)*60;minsold=Math.floor((e_hrsold-hrsold)*60);//--></SCRIPT><SCRIPTlanguage=javascript><!--document.write("距離無路可逃賽事還有："+daysold+"天"+hrsold+"小時"+minsold+"分"+seconds+"秒");//--></SCRIPT></div></SCRIPT><SCRIPTlanguage=javascript><!--document.write("距離無路可逃賽事還有："+daysold+"天"+hrsold+"小時"+minsold+"分"+seconds+"秒");//--></SCRIPT></div><divid="Layer14"><imgsrc="u=81650954,1861109275&fm=52&gp=0.jpg"name="u"border="0"><scriptlanguage="JavaScript">varb=1;varc=true;functionfade(){if(document.all);if(c==true){實驗原理（算法流程）b++;}if(b==100){b--;c=false}if(b==10){b++;c=true;c=false}if(b==10){b++;c=true;}if(c==false){b--;}u.width=150+b;u.height=125-b;setTimeout("fade()",50);}</script></div>實驗結(jié)果分析及心得體會實驗結(jié)果截圖如下：心得體會：通過本次實驗對JavaScript及Java的學習和使用有了更深入的了解，JavaScript語言，通過瀏覽器可以直接執(zhí)行，Java語言，須先進行編繹和連接等動作才可執(zhí)行；JavaScript的結(jié)構(gòu)較為自由松散，Java結(jié)構(gòu)較為嚴謹；Java具有讀寫檔案及網(wǎng)絡(luò)控制等功能，JavaScript在網(wǎng)頁內(nèi)容的控制和互動性方面，比較方便快捷的。成績評定教師簽名：年月日

實驗名稱實驗四Web數(shù)據(jù)庫應(yīng)用實驗類型設(shè)計型綜合型創(chuàng)新型√實驗目的或要求熟悉SQL、MYSQL的使用建立簡單的Web數(shù)據(jù)庫學習使用PHP編寫服務(wù)器端程序在前一次網(wǎng)站中加入表單，并建立動態(tài)網(wǎng)站實驗原理（操作步驟）

一、熟悉SQL、MYSQL

SQL(StructuredQueryLanguage)是結(jié)構(gòu)化查詢語言。SQL語句可以執(zhí)行各種各樣的操作，如：更新數(shù)據(jù)庫中的數(shù)據(jù)，從數(shù)據(jù)庫中提取數(shù)據(jù)等。MYSQL是一種關(guān)聯(lián)數(shù)據(jù)庫管理系統(tǒng)，關(guān)聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)。MYSQL軟件采用了GPL（GNU通用公共許可證）。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，許多中小型網(wǎng)站為了降低網(wǎng)站總體擁有成本而選擇了MYSQL作為網(wǎng)站數(shù)據(jù)庫。

二、建立Web數(shù)據(jù)庫

步驟如下：（1）、打開XamppWeb服務(wù)器，在Xampp頁面的右下角的“工具”欄下選擇phpAdmin點擊進入；（2）、將localhost進行常規(guī)設(shè)置和外觀設(shè)置如下：

（3）、創(chuàng)建數(shù)據(jù)庫點擊“創(chuàng)建”，出現(xiàn)提示“創(chuàng)建數(shù)據(jù)庫成功”即：說明創(chuàng)建數(shù)據(jù)庫成功。實驗原理（算法流程）（4）、建表，如建立一張名為“WWE”摔角表，表中有2個字段分別為：姓名、冠軍次數(shù)，具體插入操作如下：（5）、WWE摔角數(shù)據(jù)表創(chuàng)建完成如下圖所示：實驗原理（算法流程）

三、使用

溫馨提示

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

評論

0/150

提交評論