《網(wǎng)頁集成開發(fā)環(huán)境.ppt》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁集成開發(fā)環(huán)境.ppt（30頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、網(wǎng)頁集成開發(fā)環(huán)境,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),本章重點,網(wǎng)頁的創(chuàng)建與運行 編寫ASPX程序代碼 協(xié)助輸入代碼 實現(xiàn)網(wǎng)站中頁面之間的導(dǎo)航 在站點中使用主題 實現(xiàn)網(wǎng)站成員管理,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),學(xué)習(xí)目標(biāo),在講述如何實現(xiàn)網(wǎng)頁的創(chuàng)建與運行、編寫ASPX程序代碼的基礎(chǔ)上，希望通過通俗的講解，使讀者能夠熟練掌握這些基本內(nèi)容和操作技巧，為自己進(jìn)行網(wǎng)站開發(fā)奠定良好的基礎(chǔ),網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.1 網(wǎng)頁的創(chuàng)建與編輯,ASP.NET2.0的發(fā)布給WEB應(yīng)用程序開發(fā)者帶來了巨大的機遇，它提供了大量的可視化控件，極大地方便了Web應(yīng)用程序的開發(fā)。Visual Studio2005集成開發(fā)環(huán)境可用于實現(xiàn)復(fù)雜的Web應(yīng)用，下面介紹如何創(chuàng)
2、建一個基本的Web頁面。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.1.1 創(chuàng)建Web頁面,創(chuàng)建頁面的步驟： 1、新建Web站點 2、通過站點管理添加新的Web頁面 3、選擇需要的模板（Web窗體） 4、添加網(wǎng)頁內(nèi)容，添加服務(wù)器運行代碼（動態(tài)網(wǎng)頁） 5、調(diào)試運行網(wǎng)頁,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.1.2 實現(xiàn)控件的添加與編程,方法：切換到設(shè)計視圖，然后從工具箱中將需要的控件拖放到視圖頁面中。 控件位置: 相對位置（流布局）：控件布局困難，但會因內(nèi)容而自己變換位置，不會出現(xiàn)蓋住別的控件的情況。 絕對位置（網(wǎng)格布局） ：控件可在其頁面上任意拖放布局，但生成頁面有可能某些控件會被其他控件蓋住。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.2 編寫ASPX
3、代碼,ASPX代碼屬于HTML語法，HTML是標(biāo)記式語法，每個標(biāo)記都有開始和結(jié)束標(biāo)記，而且采用縮進(jìn)式。 Visual Studio2005集成開發(fā)環(huán)境提供了便利的功能協(xié)助編輯HTML語法文件，可顯示縮進(jìn)、選擇標(biāo)記等輔助功能。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.2.1 顯示光標(biāo)所在標(biāo)記的層次,快速定位要編輯的網(wǎng)頁對象 1、選擇標(biāo)記 2、選擇標(biāo)記內(nèi)容,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.2.2 在代碼視圖中編輯HTML,工具-選項-HTML設(shè)計器 起始頁的位置： 1、源視圖 2、設(shè)計視圖 創(chuàng)建控件時自動顯示智能標(biāo)記。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.2.3 實現(xiàn)HTML元素間的導(dǎo)航,對于一些內(nèi)容較多，設(shè)計較復(fù)雜的頁面，如何查看和定位其中的
4、內(nèi)容就變得十分重要。通過文檔大綱和標(biāo)簽導(dǎo)航器可以實現(xiàn)網(wǎng)頁中各個HTML元素的導(dǎo)航。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.2.4 使用樣式表,樣式表簡單來說就是一組用來控制網(wǎng)頁元素外觀的屬性。 創(chuàng)建樣式表的方法： 1、直接書寫代碼 2、可視化的編程環(huán)境添加,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.3 協(xié)助輸入代碼,使用Intellisense功能編輯網(wǎng)頁：用戶可以保留上下文，查找所需的信息，直接向代碼中插入語言元素，甚至可以使用Intellisense功能完成輸入工作。 利用Snippet功能編輯網(wǎng)頁：幫助用戶輸入各種代碼的語法。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4 實現(xiàn)網(wǎng)站中頁面之間的導(dǎo)航,網(wǎng)站是由許許多多的頁面組成的，網(wǎng)站中頁面之間的導(dǎo)航
5、（即頁面之間的相互鏈接），特別是當(dāng)前網(wǎng)頁結(jié)構(gòu)發(fā)生變化，如增加新的頁面、刪除舊的頁面時，網(wǎng)站的管理將面臨巨大的挑戰(zhàn) ASP.NET2.0提供了很好的網(wǎng)站中頁面導(dǎo)航的解決方案，通過XML格式的站點地圖文件（Web.sitemap）集中定義了整個網(wǎng)站的層次結(jié)構(gòu)，而且這種層次結(jié)構(gòu)與真正的頁面存儲物理結(jié)構(gòu)無關(guān)，易于實現(xiàn)網(wǎng)站中的頁面管理與導(dǎo)航。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.1 創(chuàng)建站點地圖文件,站點地圖文件（Web.sitemap）是一個XML結(jié)構(gòu)的文件。 title：這個屬性經(jīng)常由導(dǎo)航控件用于顯示URL的標(biāo)題。 url ：顯示這個結(jié)點描述的頁面的 URL。 description ：指定關(guān)于這
6、個頁面的描述。你能使用這個描述來顯示提示內(nèi)容。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),案例, ,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.2 實現(xiàn)導(dǎo)航的TreeView控件,TreeView控件提供了一種按層次結(jié)構(gòu)顯示信息的方式。顯示的結(jié)構(gòu)剛好符合站點文件的結(jié)構(gòu)。 TreeView控件結(jié)合站點數(shù)據(jù)源控件SiteMapDataSource，數(shù)據(jù)源控件自動查找并讀取站點根目錄下的Web.sitemap文件中的內(nèi)容，綁定到TreeView控件中顯示。 可以選擇自動套用系統(tǒng)提供的樣式,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.3 顯示導(dǎo)航的SiteMapPath控件,SiteMapPath控件：用于顯示導(dǎo)航的路徑，即顯示當(dāng)前的頁
7、面以及該頁面所處的層次路徑，并顯示返回到主頁的鏈接。 主要的屬性： PathDirection:顯示路徑的方向 PathSeparator:指定網(wǎng)頁之間的分隔符 RenderCurrentNodeASLink,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.4 實現(xiàn)導(dǎo)航菜單的Menu控件,Menu控件主要用于顯示應(yīng)用程序的自定義此案單，命令子菜單和分隔符都可以包含在菜單之中，每一個創(chuàng)建的菜單至多有四級子菜單。 結(jié)合數(shù)據(jù)源控件SiteMapDataSource使用 自定義菜單 主要的屬性： Orientation:垂直或水平顯示菜單內(nèi)容,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.5 實現(xiàn)母板中的站點導(dǎo)航,在實現(xiàn)網(wǎng)站頁面導(dǎo)航的過程中，可根
8、據(jù)需要在每一個頁面中添加相應(yīng)的導(dǎo)航控件，對一些大型網(wǎng)站而言，工作量將是令人難以承受的，而一旦要修改導(dǎo)航控件的界面和位置，網(wǎng)站管理員將面臨災(zāi)難性的挑戰(zhàn)。 ASP.NET 2.0使用母版解決方案，通過定義一個或多個母版，將共同擁有的頁面外觀集中起來便于頁面的制作、修改和管理。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.5 實現(xiàn)母板中的站點導(dǎo)航,母版的使用： 1、設(shè)計網(wǎng)站的整體布局 2、添加導(dǎo)航的控件并設(shè)計外觀,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.4.5 實現(xiàn)母板中的站點導(dǎo)航,母版頁和內(nèi)容頁之間的數(shù)據(jù)通信（內(nèi)容頁的信息要顯示在母版頁上） ((Label)Master.FindControl(lblmessg)),網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.
9、5 在站點中使用主題,為了使網(wǎng)站中的頁面具有一致的外觀，ASP.NET2.0提供主題來美化和設(shè)定網(wǎng)站的頁面，允許用戶對單個頁應(yīng)用主題或整個網(wǎng)站應(yīng)用全局主題。 在網(wǎng)站中設(shè)置主題會對站點上的所有頁和控件應(yīng)用樣式和外觀，除非對個別頁重寫主題。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.5 在站點中使用主題,主題中文件： 1、樣式表：設(shè)置HTMl控件的外觀和屬性） 2、外觀文件（皮膚文件）：設(shè)置服務(wù)器控件的外觀和屬性。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.5.2 樣式主題和個性化主題,頁面相應(yīng)外觀的優(yōu)先關(guān)系 1、個性化主題：Theme Theme主題頁面中的外觀設(shè)置CSS文件 2、樣式主題：StyleSheetTheme 頁面中的外觀設(shè)置
10、 樣式主題 CSS文件,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.5.3 在站點中應(yīng)用主題,對整個網(wǎng)站應(yīng)用全局性主題，方法：通過修改Web.Config文件中的相關(guān)節(jié)點。 //個性主題 //樣式主題 ,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),動態(tài)加載頁面主題,//頁面加載前的預(yù)處理事件 protected void Page_PreInit(object sender, EventArgs e) Page.Theme = Request.QueryStringtheme; //點擊紅色按鈕，應(yīng)用紅色主題 protected void bntred_Click(object sender, EventArgs e)
11、 Response.Redirect(/default.aspx?theme=red); //點擊藍(lán)色按鈕，應(yīng)用藍(lán)色主題 protected void bntblue_Click(object sender, EventArgs e) Response.Redirect(/default.aspx?theme=blue); ,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.6 實現(xiàn)網(wǎng)站成員管理,在實際的網(wǎng)站開發(fā)過程中，往往會要求某些頁面只允許會員或被授權(quán)用戶才能瀏覽和使用，當(dāng)普通用戶瀏覽這些頁面時，將會彈出一個登陸窗口或轉(zhuǎn)到指定頁面，提示用戶輸入用戶名和密碼。只有在成功登錄之后，才可瀏覽這些頁面，否則，將不
12、能查看這些頁面。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.6 實現(xiàn)網(wǎng)站成員管理,（1）基礎(chǔ)準(zhǔn)備（創(chuàng)建網(wǎng)站和頁面） 新建一個ASP.NET 網(wǎng)站，選擇HTTP網(wǎng)站類型，命名為Membership ，完成后，VWD（Visual Web Developer）會自動建立一個Membership站點，包括一個App_Data目錄及一個空白的Default.aspx頁面。我們在Membership站點新建一個MemberPages文件夾，用于存放受保護(hù)頁面。,網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.6 實現(xiàn)網(wǎng)站成員管理,（2）使用ASP.NET 網(wǎng)站管理工具 選中“網(wǎng)站”菜單的“ASP.NET 配置”命令，打開如下所示的網(wǎng)站管理工具 。 選擇安全按鈕或選項卡進(jìn)入網(wǎng)站安全管理界面。 點擊連接地址“使用安全設(shè)置向?qū)О床烤桶嗟嘏渲冒踩浴保M(jìn)入到“安全設(shè)置向?qū)А保?網(wǎng)絡(luò)數(shù)據(jù)庫開發(fā),3.6 實現(xiàn)網(wǎng)站成員管理,（2）使用ASP.NET 網(wǎng)站管理工具 選中“網(wǎng)站”菜單的“ASP.NET 配置”命令，打開如下所示的網(wǎng)站管理工具 。 選擇安全按鈕或選項卡進(jìn)入網(wǎng)站安全管理界面。 點擊連接地址“使用安全設(shè)置向?qū)О床烤桶嗟嘏渲冒踩浴?，進(jìn)入到“安全設(shè)置向?qū)А保?
網(wǎng)頁集成開發(fā)環(huán)境.ppt
