網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)報(bào)告_第1頁
網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)報(bào)告_第2頁
網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)報(bào)告_第3頁
網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)報(bào)告_第4頁
網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)報(bào)告_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

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

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

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

實(shí)驗(yàn)原理（算法流程）

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

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

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

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

實(shí)驗(yàn)原理（算法流程）

相關(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/"實(shí)驗(yàn)原理（算法流程）

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>實(shí)驗(yàn)原理（算法流程）<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>

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

實(shí)驗(yàn)名稱實(shí)驗(yàn)三JavaScript實(shí)驗(yàn)類型設(shè)計(jì)型綜合型創(chuàng)新型√實(shí)驗(yàn)?zāi)康幕蛞笫煜avaScript使用JavaScript制作特殊效果在前一次建立的網(wǎng)站中加入JavaScript效果實(shí)驗(yàn)原理（操作步驟）JavaScript是一種能讓你的網(wǎng)頁更加生動(dòng)活潑的程式語言，是目前網(wǎng)頁中設(shè)計(jì)中最容易學(xué)又最方便的語言?？梢岳肑avaScript輕易地做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及可顯示瀏覽器停留的時(shí)間。1、運(yùn)算符:賦值運(yùn)算符、算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、條件運(yùn)算、位操作運(yùn)符符和字符串運(yùn)算符。2、表達(dá)式:運(yùn)算符和操作數(shù)的組合稱為表達(dá)式，分為四類：賦值表達(dá)式、算術(shù)表達(dá)式、布爾表達(dá)式和字符串表達(dá)式。3、語句：Javascript程序是由若干語句組成的，語句是編寫程序的指令。Javascript提供了完整的基本編程語句：賦值語句、switch選擇語句、while循環(huán)語句、for循環(huán)語句、dowhile循環(huán)語句、break循環(huán)終止語句和continue循環(huán)中斷語句。4、函數(shù)：函數(shù)是命名的語句段，可以被當(dāng)作一個(gè)整體來引用和執(zhí)行。1）函數(shù)由關(guān)鍵字function定義；2）函數(shù)必須先定義后使用，否則將出錯(cuò)；3）函數(shù)名是調(diào)用函數(shù)時(shí)引用的名稱，它對大小寫是敏感的，調(diào)用函數(shù)時(shí)不可寫錯(cuò)函數(shù)名；4）參數(shù)是傳遞給函數(shù)使用或操作的值或?qū)ο?，它可以是常量，也可以是變量，也可以是類的對象?）return語句用于返回函數(shù)或表達(dá)式的值，當(dāng)函數(shù)返回值類型不為空時(shí)，必須有如果返回值類型為空，沒有reurn項(xiàng)。5、對象：Javascript的一個(gè)重要功能就是基于對象的功能，通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開發(fā)。一組包含數(shù)據(jù)的屬性和對屬性中包含數(shù)據(jù)進(jìn)行操作的方法，稱為對象。比如要設(shè)定網(wǎng)頁的背景顏色，所針對的對象就是document，所用的屬性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的顏色為藍(lán)色。6、事件;用戶與網(wǎng)頁交互時(shí)產(chǎn)生的操作，稱為事件。絕大部分事件都是用戶的動(dòng)作所引發(fā)，如：用戶按鼠標(biāo)的按鍵，就產(chǎn)生onclick事件，若鼠標(biāo)的指針在鏈接上移動(dòng)，就產(chǎn)生onmouseover事件等等。在Javascript中，事件與事件處理程序配套使用。7、變量：如varmyVariable="somevalue";實(shí)驗(yàn)原理（算法流程）相關(guān)代碼如下：<divid="Layer13"><SCRIPTlanguage=javascript><!--BirthDay=newDate("january06,2012");//改成你的計(jì)時(shí)日期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+"小時(shí)"+minsold+"分"+seconds+"秒");//--></SCRIPT></div></SCRIPT><SCRIPTlanguage=javascript><!--document.write("距離無路可逃賽事還有："+daysold+"天"+hrsold+"小時(shí)"+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){實(shí)驗(yàn)原理（算法流程）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>實(shí)驗(yàn)結(jié)果分析及心得體會(huì)實(shí)驗(yàn)結(jié)果截圖如下：心得體會(huì)：通過本次實(shí)驗(yàn)對JavaScript及Java的學(xué)習(xí)和使用有了更深入的了解，JavaScript語言，通過瀏覽器可以直接執(zhí)行，Java語言，須先進(jìn)行編繹和連接等動(dòng)作才可執(zhí)行；JavaScript的結(jié)構(gòu)較為自由松散，Java結(jié)構(gòu)較為嚴(yán)謹(jǐn)；Java具有讀寫檔案及網(wǎng)絡(luò)控制等功能，JavaScript在網(wǎng)頁內(nèi)容的控制和互動(dòng)性方面，比較方便快捷的。成績評定教師簽名：年月日

實(shí)驗(yàn)名稱實(shí)驗(yàn)四Web數(shù)據(jù)庫應(yīng)用實(shí)驗(yàn)類型設(shè)計(jì)型綜合型創(chuàng)新型√實(shí)驗(yàn)?zāi)康幕蛞笫煜QL、MYSQL的使用建立簡單的Web數(shù)據(jù)庫學(xué)習(xí)使用PHP編寫服務(wù)器端程序在前一次網(wǎng)站中加入表單，并建立動(dòng)態(tài)網(wǎng)站實(shí)驗(yàn)原理（操作步驟）

一、熟悉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ù)放在一個(gè)大倉庫內(nèi)。MYSQL軟件采用了GPL（GNU通用公共許可證）。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點(diǎn)，許多中小型網(wǎng)站為了降低網(wǎng)站總體擁有成本而選擇了MYSQL作為網(wǎng)站數(shù)據(jù)庫。

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

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

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

三、使用

溫馨提示

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

最新文檔

評論

0/150

提交評論