信息131-26-實(shí)驗(yàn)2-_第1頁
信息131-26-實(shí)驗(yàn)2-_第2頁
信息131-26-實(shí)驗(yàn)2-_第3頁
信息131-26-實(shí)驗(yàn)2-_第4頁
信息131-26-實(shí)驗(yàn)2-_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、實(shí)驗(yàn) 2 ASP.NET 4.5 網(wǎng)站開發(fā)基礎(chǔ)實(shí)驗(yàn)成績(jī)專業(yè)班級(jí) 信息131班 學(xué)號(hào)姓名 報(bào)告日期 2015.10.23 實(shí)驗(yàn)類型：驗(yàn)證性實(shí)驗(yàn) 綜合性實(shí)驗(yàn) 設(shè)計(jì)性實(shí)驗(yàn)實(shí)驗(yàn)?zāi)康模?1) 熟悉常用的XHTML5元素。(2) 掌握利用table、div和CSS實(shí)現(xiàn)頁面布局的方法。(3) 掌握CSS控制頁面樣式的方法。(4) 了解JavaScript常識(shí)。(5) 熟悉jQuery的使用方法。(6) 理解XML文件結(jié)構(gòu)，掌握XML文件建立的方法。實(shí)驗(yàn)內(nèi)容及要求：1.建立一個(gè)描述MyPetShop網(wǎng)站信息的XHTML5文件2.利用table實(shí)現(xiàn)頁面布局3.利用div實(shí)現(xiàn)頁面布局4.建立獨(dú)立的.css文件5.

2、利用JavaScript關(guān)閉當(dāng)前窗口6.利用jQuery實(shí)現(xiàn)一個(gè)時(shí)間數(shù)據(jù)來源于客戶端的時(shí)鐘7.建立能描述書籍簡(jiǎn)易信息的XML文件每小題實(shí)驗(yàn)要求詳見實(shí)驗(yàn)指導(dǎo)書實(shí)驗(yàn)2(page9-19)實(shí)驗(yàn)原理 XHTML、CSS、JavaScript、JQuery基本語法知識(shí)實(shí)驗(yàn)思考 思考并比較table和div兩種布局的異同。實(shí)驗(yàn)報(bào)告書寫要求：根據(jù)實(shí)驗(yàn)情況和結(jié)果撰寫并遞交實(shí)驗(yàn)報(bào)告。實(shí)驗(yàn)報(bào)告應(yīng)當(dāng)有設(shè)計(jì)過程及實(shí)驗(yàn)步驟的文字說明，運(yùn)行調(diào)試記錄，運(yùn)行結(jié)果截圖。實(shí)驗(yàn)總結(jié)(學(xué)會(huì)了.; 掌握了.; 訓(xùn)練了.; 發(fā)現(xiàn)了.; 今后學(xué)習(xí)中.有待提高。）電子報(bào)告word文件命名規(guī)則：專業(yè)班級(jí)-學(xué)號(hào)后兩位-實(shí)驗(yàn)X-姓名.doc, 如

3、信息123班學(xué)號(hào)為201212030315的郭海濤同學(xué)實(shí)驗(yàn)2報(bào)告word文件命名則應(yīng)是：信息123-15-實(shí)驗(yàn)2-郭海濤.doc, 其中 .doc是Word文件擴(kuò)展名。特別提醒：電子報(bào)告文件命名不規(guī)范的報(bào)告將不予接收。參考程序 實(shí)驗(yàn)內(nèi)容1. 建立一個(gè)描述MyPetShop網(wǎng)站信息的XHTML5文件先在Experiment解決方案新建一個(gè)ExSite網(wǎng)站，再在該網(wǎng)站根文件下建立一個(gè)Ex2子文件，在Ex2中添加一個(gè)HTML頁HTML5.html，在該頁中輸入?yún)⒖闯绦?，在瀏覽器上瀏覽建立的HTML5.html2. 利用table實(shí)現(xiàn)頁面布局，建立一個(gè)web窗體TableLayout.aspx。在瀏

4、覽器中瀏覽。圖2 TableLayout.aspx瀏覽效果截圖3. 利用div實(shí)現(xiàn)頁面布局，建立一個(gè)web窗體DivLayout.aspx。在瀏覽器中打開效果如圖。4. 建立兩個(gè)獨(dú)立的.css文件（TableDiv.aspx和DivCss.aspx），在ExSite網(wǎng)站根文件夾下建立一個(gè)Style文件夾，再在Style文件夾中添加一個(gè)樣式表文件TableDiv.aspx,在實(shí)驗(yàn)內(nèi)容1中的Ex2中建立一個(gè)web窗體DivCss.aspx。在瀏覽器中瀏覽效果如圖。5.利用JavaScript關(guān)閉當(dāng)前窗口，在Ex2中添加一個(gè)web窗體CloseWindow.aspx,在瀏覽器中瀏覽效果如圖。6. 利

5、用jQuery實(shí)現(xiàn)一個(gè)時(shí)間數(shù)據(jù)來源于客戶端的時(shí)鐘，選擇ExSite網(wǎng)站，在選擇“網(wǎng)站”-“管理NuGet程序包”命令，在呈現(xiàn)的窗口中選擇jQuery并安裝。安裝完成后，在ExSite網(wǎng)站跟文件夾下的Script文件夾中將自動(dòng)添加由jQuery提供的最新的JavaScript庫，再在Ex2中添加一個(gè)web窗體Timer.aspx，在瀏覽器中瀏覽效果如圖。7. 建立描述書籍簡(jiǎn)易信息的XML文件Book.xml，在瀏覽器中瀏覽效果如圖。實(shí)驗(yàn)總結(jié)： 通過這次試驗(yàn)，我學(xué)會(huì)了div和CSS實(shí)現(xiàn)頁面布局方法，掌握XML文件建立的方法，訓(xùn)練了網(wǎng)站的建立及運(yùn)行的能力，發(fā)現(xiàn)了自己在學(xué)習(xí)實(shí)際操作過程中有很多不足之處

6、，在今后的學(xué)習(xí)中一定會(huì)加倍努力，提高自己，編程能力有待提高。參考程序1. Web窗體XHTML5.html程序<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="keywords" content="MyPetShop,X

7、HTML5"/> <title>認(rèn)識(shí)常用XHTML5元素</title> <style type="text/css"> aside float: left; width: 15%; section float: right; width: 85%; footer clear: both; </style></head><body><header> <img alt="MyPetShop" src="./Images/logo.gif&qu

8、ot;/></header><aside> <nav style="background-color:#C0C0C0"> <a href="HTML5.html">介紹</a><br /> <a href="HTML5.html">數(shù)據(jù)庫設(shè)計(jì)</a> </nav></aside><section> <h3>MyPetShop</h3> <article> MyPe

9、tShop是本書提供的一個(gè)綜合實(shí)例，用于展示ASP.NET 4.5網(wǎng)站開發(fā)技術(shù)。 </article> <article> <h4>功能模板</h4> MyPetShop包括前臺(tái)商品瀏覽、用戶管理、購(gòu)物車、訂單結(jié)算和后臺(tái)管理等模塊。 </article></section> <footer style="background-color:#C0C0C0">Copyright 2014 MyPetShop</footer></body></html>2.we

10、b窗體TableLayout.aspx程序<% Page Language="C#" AutoEventWireup="true" CodeFile="TableLayout.aspx.cs" Inherits="Ex2_TableLayout" %><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"> <meta ht

11、tp-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .auto-style1 width: 100%; .auto-style2 height: 20px; .auto-style3 width: 149px; </style></head><body> <form id="form1&quo

12、t; runat="server"> <div> <table class="auto-style1" style="width: 100%"> <tr> <td rowspan="2" class="auto-style3"> <asp:Image ID="imgLogo" ImageUrl="/logo.gif" runat="server" Width="150

13、px" Height="54px" /> </td> <td style="text-align: center; background-color: #f00" class="auto-style2"> <asp:LinkButton ID="lnkbtnDefault" runat="server">首頁</asp:LinkButton> </td> <td style="text-align: ce

14、nter; background-color: #0ff" class="auto-style2"> <asp:LinkButton ID="lnkbtnReset" runat="server">個(gè)性重置</asp:LinkButton> </td> <td style="text-align: center; background-color: #ffd800" class="auto-style2"> <asp:Link

15、Button ID="lnkbtnRegister" runat="server">注冊(cè)</asp:LinkButton> </td> </tr> <tr> <td style="background-color: #808080" colspan="3">登錄狀態(tài)</td> </tr> <tr> <td style="background-color: #b200ff" colspan=

16、"4">您的位置</td> </tr> </table> </div> </form></body></html>3.web窗體DivLayout.aspx程序<% Page Language="C#" AutoEventWireup="true" CodeFile="DivLayout.aspx.cs" Inherits="Ex2_DivLayout" %><!DOCTYPE html&

17、gt;<html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <form id="form1" runat="server"

18、> <div id="top"> <div id="logo_navi_stat"> <div id="logo"><img alt=""style="float:left;width:17%; height: 60px;" src="/logo.gif" /></div> <div id="navigation" style="background-color: #99cc

19、ff; height: 30px"> <asp:LinkButton ID="lnkbtnDefault" runat="server">首頁</asp:LinkButton> &nbsp|&nbsp<asp:LinkButton ID="lnkbtnReset" runat="server">個(gè)性重置</asp:LinkButton> &nbsp|&nbsp<asp:LinkButton ID="lnk

20、btnRegister" runat="server">注冊(cè)</asp:LinkButton> </div> <div id="status" style="background-color: #00FF00; height: 30px">登錄狀態(tài)</div> </div> <div id="position" style="background-color: #00FFFF;">您的位置:</div&

21、gt; </div> </form></body></html> 4. web窗體TableCss.aspx程序<% Page Language="C#" AutoEventWireup="true" CodeFile="TableCss.aspx.cs" Inherits="Ex2_TableCss" %><!DOCTYPE html><html xmlns="/1999/xhtml"

22、><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>結(jié)合Table和.css文件進(jìn)行頁面布局</title> <style type="text/css"> .auto-style1 width: 35%; .auto-style2 width: 103px; </style> <link

23、href="style/TableDiv.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <table class="auto-style1"> <tr> <td rowspan="2" class="auto-style2"> <

24、;asp:Image ID="imgLogo" ImageUrl="/logo.gif" runat="server" /> </td> <td class="navigation"> <asp:LinkButton ID="lnkbtnDefault" runat="server" >首頁</asp:LinkButton> </td> <td class="navigation"&g

25、t; <asp:LinkButton ID="lnkbtnReset" runat="server">個(gè)性重置</asp:LinkButton> </td> <td class="navigation"> <asp:LinkButton ID="lnkbtnRegister" runat="server">注冊(cè)</asp:LinkButton> </td> </tr> <tr> <t

26、d colspan="3"style="background-color:#0026ff">登錄狀態(tài)</td> </tr> <tr> <td colspan="4"style="background-color:#00ff21" >您的位置：</td> </tr> </table> </form></body></html> 5. Web窗體DivCss.aspx程序<% Page L

27、anguage="C#" AutoEventWireup="true" CodeFile="DivCss.aspx.cs" Inherits="Ex2_DivCss" %><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content=&q

28、uot;text/html; charset=utf-8"/> <title></title></head><body> <form id="form1" runat="server"> <div id="top"> <div id="logo_navi_stat"> <div id="logo" style="float: left; width: 11%"> &

29、lt;asp:Image ID="imgLogo" ImageUrl="/logo.gif" runat="server" Height="59px" Width="95px" /></div> <div id="navigation" style="background-color: #00FFFF; height: 30px"> <asp:LinkButton ID="lnkbtnDefault"

30、 runat="server">首頁</asp:LinkButton> &nbsp|&nbsp <asp:LinkButton ID="lnkbtnReset" runat="server">個(gè)性重置</asp:LinkButton> &nbsp|&nbsp<asp:LinkButton ID="lnkbtnRegister" runat="server">注冊(cè)</asp:LinkButton> &

31、lt;/div> </div> <div id="status" style="background-color: #FF00FF; height: 30px">登錄狀態(tài)</div> <div id="position" style="background-color: #00CC66; height: 30px">您的位置：</div> </div> </form></body></html>6. w

32、eb窗體CloseWindow.aspx程序<% Page Language="C#" AutoEventWireup="true" CodeFile="CloseWindows.aspx.cs" Inherits="Ex2_CloseWindows" %><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta

33、http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <form id="form1" runat="server"> <div> <asp:Button ID="btnClose" runat="server" Text="Button" On

34、ClientClick="javascript:Window.close();return false" /> <a href="/" onclick="javascript:Window.close();return false;"> 關(guān)閉</a> </div> </form></body></html>7. web窗體Timer.aspx程序<% Page Language="C#" AutoEventWireup="

35、true" CodeFile="Timer.aspx.cs" Inherits="Ex2_Timer" %><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="/Scripts/jquery-2.1.4.mi

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論