c#網(wǎng)站的制作經(jīng)典

MacromediaVAdobeImageReadyCSoRemote*FoolsoToolsU)VisualStudiEMacromediaVAdobeImageReadyCSoRemote*FoolsoToolsU)VisualStudiEVisualStudi蚣Mic啟動MicrosoftVisualStudio2008MicrosoftVisualStudio2008第1章新聞網(wǎng)站基礎(chǔ)工作該新聞網(wǎng)站可以使用VisualStudio2008系統(tǒng)開發(fā),也可以使用VS2005系統(tǒng)開發(fā)。但建議使用VS2008來做。1.1建立網(wǎng)站文件夾1.1.1啟動VS2008AdobePhotoshopCS也IMicrosoftDeveloperNetwork*MicrosoftVisualStudio2008(國MicrosoftWindowsSDKv6.0A圖1.1-1啟動開發(fā)系統(tǒng)vs2008新建網(wǎng)站此處是從〇開始建立一個網(wǎng)站。以后就可以使用打開網(wǎng)站了。圖1.1-2選擇新建--網(wǎng)站定義網(wǎng)站所在的文件夾在位置直接輸入路徑F:\WebNews,點“確定”,即建立此文件夾‘再點’‘確定”即可建立網(wǎng)站。

新建網(wǎng)站08圖新建網(wǎng)站08圖1.1-3確定網(wǎng)站所在的路徑1.1.4網(wǎng)站開發(fā)界面圖1.1-4工作界面在網(wǎng)站的開發(fā)界面中要重點知道以下幾個命令圖標(biāo):“刷新”用于將外部復(fù)制到網(wǎng)站文件夾中文件加載顯示到網(wǎng)站資源之中。“資源管理”打開解決方案資源管理器窗口?！皩傩浴表撁嫣幱谠O(shè)計頁打開屬性窗ロ?！肮ぞ呦洹贝蜷_工具箱窗口?！霸O(shè)計”進入網(wǎng)頁的視圖設(shè)計器界面?！霸础边M入網(wǎng)頁的HTML代碼頁。解決方案資源管理器-解決.▼QX案方鹹;刷新屬性斗視圖頁

千CS代碼個項目）工具箱2屬性常袋源管理1.1-5a設(shè)計〇拆分但案方鹹;刷新屬性斗視圖頁

千CS代碼個項目）工具箱2屬性常袋源管理1.1-5a設(shè)計〇拆分但源|—視圖頁緒就體1.1.5現(xiàn)有網(wǎng)站的的打開.對已經(jīng)建立好的現(xiàn)有網(wǎng)站,且在’‘最近的項目”中己經(jīng)列出99起始頁-?icrosoftVisualStudio文件更）編輯。視圖9工具復(fù)）測試（S）窗口出）,可直接點擊網(wǎng)站名打開。如圖1.幫助出）.jn? し.*?必修??イ起始更，ヽMicrosoft*"VisualStudio2008最近的項目■SD1中文網(wǎng)站\WebNews打創(chuàng)Office應(yīng)用程序:將Thu,12Jul200703:0SharePoint中的內(nèi)容類■OSS2007I使用ShThu,12Jul200703:0AFI以及如何避免定義EC++Plus:使用VisThu,12Jul200703:0圖1.1-6打開已有網(wǎng)站的界面2.對在別的電腦上建立好的網(wǎng)站,要在本電腦上進行開發(fā)。操作過程是:第一步是先將整個網(wǎng)站文件夾直接復(fù)制過來,例如原電腦中網(wǎng)站文件夾為D:\WebNews,復(fù)制過來可變?yōu)镕:\WebNews?31注意是在根目錄之下（D:\,F:\都是根目錄,這是今后對程序調(diào)試跟蹤的要求）。第二步是點“菜單”,點“打開”，在“打開網(wǎng)站”窗口中找到并選中F:\WebNews文件夾，再點擊“打開”，即完成了從別的電腦復(fù)制網(wǎng)站的工作。如圖1.1-7.￠5起始頁ー?:￡（:ギ〇5〇￡七VisualStudio打開地） ?§項目/解決方案（￡）..Ctrl+Shift+O關(guān)閉?［ト網(wǎng)站⑥一Shift+Alt+0 1關(guān)閉解決方案建）ど文件國）...Ctrl+0文件任）!編輯更）視圖打開地） ?§項目/解決方案（￡）..Ctrl+Shift+O關(guān)閉?［ト網(wǎng)站⑥一Shift+Alt+0 1關(guān)閉解決方案建）ど文件國）...Ctrl+0文件任）!編輯更）視圖9工具建）測試⑤）窗口也）幫助〇!）VMwar新建國）D?そ選定項另存打開網(wǎng)站21xl全部保存（L）Ctrl+Shift+S導(dǎo)出模板CE）.最近的文件也）最近的項目Q）凌文件系統(tǒng)本地IISFTP站點文件系統(tǒng)選擇要打開的文件夾⑤）? 一（XB一本地磁盤（F:）■€0366X300前臺無WebNew?&WebNews.1文件夾メ）：p:\WebNews二!取消退出退取消圖1.1-7打開未列出網(wǎng)站的界面1.2網(wǎng)站數(shù)據(jù)庫建立1.2.1加入數(shù)據(jù)庫文件此處為簡化操作,且為以后的網(wǎng)站安全做好準(zhǔn)備,所以沒有自己另外建立數(shù)據(jù)庫,而直接使用的是由系統(tǒng)提供的安全數(shù)據(jù)庫Aspnetdb.mdf,這樣網(wǎng)站數(shù)據(jù)和安全數(shù)據(jù)共用ー個數(shù)據(jù)庫,這種共用完全可以應(yīng)對任何中型企業(yè)對網(wǎng)站的基本要求。安全性能也不錯。將鼠標(biāo)移動到圖標(biāo)劇之匕點擊,打開ASP.NET網(wǎng)站配置管理工具。如圖1.2-1解決方案資源管理器-▼卒X昌田國A過図ワ解決方案“WebNews”（1個項目）：\Teblevs\|ASP.MET：\Teblevs\SAppJataDefault.aspx

jj>web.config圖1.2-1啟動ASP.NET配置1.2.2配置網(wǎng)站安全在網(wǎng)站管理工具中點擊“安全”項

圖1.2-2網(wǎng)站管理工具主頁使用安全向?qū)Ш喕僮鬟^程在安全頁中點擊”使用安全設(shè)置向?qū)О床烤桶嗟嘏渲冒踩浴薄Ｈ鐖D!.2-3ー0eASP.NetVeb應(yīng)用程序答理 Q，國哥，?，頁面9，。工具地），網(wǎng)站管理工具 如何使用此工具??主頁'H女全 應(yīng)用程序 提供程序可以使用網(wǎng)站管理工具來管理應(yīng)用程序的所有安全設(shè)置?？梢栽O(shè)置用戶和密碼（身份驗證），可以創(chuàng)建角色（用戶組）,還可以創(chuàng)建權(quán)限（用于控制對應(yīng)用程序各個部分的訪問的規(guī)則）。默認情況下,用戶信息存儲MicrosoftSQLServerExpress數(shù)據(jù)庫中,該數(shù)據(jù)庫在網(wǎng)站的Data文件夾中。如果要將用戶信息存儲在其他數(shù)據(jù)庫中，請使用“提供程序’’選項卡選擇其他提供程序。使用安全設(shè)置向?qū)О床烤桶嗟嘏渲冒踩?。單擊表中的鏈接以管理?yīng)用程序的設(shè)置。用戶角色訪問規(guī)則當(dāng)前身份照證類型為Windowso因此禁用了此工具中的用戶管理。選擇身份險證類型未啟用角色啟用角色創(chuàng)建或管理角色創(chuàng)建訪問規(guī)則管理訪問規(guī)則圖1.2-3網(wǎng)站管理工具安全頁

定義安全驗證點“下ー步”,選中“通過Interneビ,再點“下ー步”?；ヂ?lián)網(wǎng)上的網(wǎng)站一般是采用這種格式。単位內(nèi)部的網(wǎng)站則多采用“通過局域網(wǎng)”,其安全性更好。如圖124步躲1:步躲1:歡迎步驟2:選擇訪問方法步驟3:數(shù)據(jù)存儲區(qū)步榦4:定義角色步牌5:添加新用戶步驟6:添加新訪問規(guī)則步驟7:完成保護站點的第一步是標(biāo)識用戶,即身份瞼證。用千建立用戶標(biāo)識的方法取決千用戶訪問站點的方式。請從下列方法中選擇ー種方法,以指示用戶訪間站點的方式,然后單擊“下ー步’‘。0Internet您的應(yīng)用程序是ー個任何人都可在Internet上訪問的公共站點。用戶可以通過在您創(chuàng)建的登錄頁中輸入用戶名和密碼登錄到您的應(yīng)用程序。〇通過局域網(wǎng)您的應(yīng)用程序僅在專用局域網(wǎng)(Intranet)中運行。用戶由其Windows域及用戶名標(biāo)識,無需顯式登錄到您的應(yīng)用程序。圖1.2-4網(wǎng)站訪問方式選擇“通過Internet"啟用角色角色管理使得能夠通過創(chuàng)建的類別(稱為“角色”)管理應(yīng)用程序的授權(quán)。通過在用戶上附加角色,可以通過角色控制對Web應(yīng)用程序的不同部分或功能的訪問,從而取代基于用戶名的控制,或者作為對基于用戶名的控制方式的補充。例如,員エ應(yīng)用程序可能具有諸如“經(jīng)理''(Managers)、“雇員”(Employees)、“主管”(Directors)等角色,并為每種角色指定了不同的特權(quán)。用戶可以具有多種角色。例如一個論壇中，有些用戶可能同時具有‘'成員"(Members)和??版主''(Moderators)角色。每種角色定義了在站點中擁有不同的特權(quán)，同時具有兩種角色的用戶將可同時使用兩組特權(quán)。角色是網(wǎng)站中權(quán)限的載體，一般說法是:先對角色授權(quán)，再將角色賦給用戶，用戶就具有了角色的權(quán)限，ー個角色可以賦給多個用戶,ー個用戶也可以有多個角色。勾選中“為此網(wǎng)站啟用角色”，點“下ー步”。如圖1.2-5步驟1:歡迎定義角色步驟2：選擇訪問方法您可以選擇添加角色或組,這讓您可以允許或拒絕用戶組對網(wǎng)站中特定文件夾的訪問。步驟3:數(shù)據(jù)存儲區(qū)例如,可以創(chuàng)建“經(jīng)理”、“銷售人員”或“成員”等角色,每種角色對特定文件夾都具有不同的訪問權(quán)限。然后,可以將用戶添加到角色中,這些用戶即可擁有與其角色關(guān)步驟4:定義角色聯(lián)的訪問權(quán)限。步驟5:添加新用戶步驟6：添加新訪問規(guī)則健人要創(chuàng)建的角色的名稱，然后單擊“添加角色”。步驟7:完成如果不想創(chuàng)建角色，清確保沒有選中下面的復(fù)選框,然后單擊“下ー步”跳過這一步。0為此網(wǎng)站啟用角色。 ，,一,,—(上一步］『卞二步?ラ飛麻］安全管理

創(chuàng)建角色為網(wǎng)站創(chuàng)立兩個角色,分別取名為adminR。（網(wǎng)站管理員,最高搬）,useRo（網(wǎng)站用戶,負責(zé)新聞操作）,點‘‘下ー步"。3"注意:角色名可任取,只要求見名識意。如圖1.2-6步牌1:歡迎步眺2:選擇訪問方法步牌1:歡迎步眺2:選擇訪問方法步榦3:數(shù)據(jù)存儲區(qū)步驟4:定義角色步驟5：添加新用戶步驟6:添加新訪問規(guī)則步驟7：完成安全管理已為此網(wǎng)站啟用角色。創(chuàng)建新角色新角色名稱: ,useRo 添加角色<"上一步［「下二歩>鼻|完成!步驟1:歡迎步眺2:選擇訪問方法步驟1:歡迎步眺2:選擇訪問方法步驟3:數(shù)據(jù)存儲區(qū)步驟4:定義角色步義5:添加者用戶步驟6:添加新訪問規(guī)則步驟7:完成創(chuàng)建用戶安全答案:admin@163com區(qū)）活動用戶下ー步>圖1.2-6建立兩個角色2.7創(chuàng)建用戶為網(wǎng)站創(chuàng)建兩個用戶，分別取名為admin（網(wǎng)站管理員，最高襯），use（網(wǎng)站用戶,負責(zé)日常儺）,點"下ー步"。admin用戶密碼為admin@163.com,use用戶密碼為use@163.com。如圖1.2-7。因為網(wǎng)站的架構(gòu)還未建立起來,所以對網(wǎng)站的角色和用戶設(shè)置訪問權(quán)限規(guī)則為時過早，等網(wǎng)站主體開發(fā)完成以后再來設(shè)置訪問規(guī)則比較恰當(dāng)。此處點''完成"，然后關(guān)閉網(wǎng)站配置工具。下一次ASP.NET網(wǎng)站管理工具的使用要等到網(wǎng)站網(wǎng)頁完全做好，最后的訪問權(quán)限設(shè)置工作時。さ注意:用戶密碼最少長度為7位，ロ.要含有字母,數(shù)字，符號等多種,否則系統(tǒng)不承認。通過在此頁中輸入用戶的ID、密碼和電子部件來添加用戶。還可以指定問題和回答,用戶必須給岀與此相同的回答才能重置密碼或請求忘記的密碼。注冊新帳戶

用戶名:（admin密碼:］ 確認密碼 電子郵件:admin@163com安全提示問題:admin@163com圖1.2?7網(wǎng)站中創(chuàng)建兩個用戶后即關(guān)閉此工具1.3網(wǎng)站數(shù)據(jù)表的建立3.1査看數(shù)據(jù)庫表在“解決網(wǎng)絡(luò)方案資源管理器”中先點擊匣!刷新,打開App-Data文件夾,找到ASPNETDB.MDF數(shù)據(jù)庫文件,雙擊打開,即查看數(shù)據(jù)庫中的各種對象,以及新聞數(shù)據(jù)表的建立。數(shù)據(jù)庫的查看是經(jīng)常要做的工作，可以掌握對表屮數(shù)據(jù)記錄的操作是否正確，掌握存儲過程的使用情況。如圖1.3-1。解決方案資源管理器-解▼QX?田區(qū)］?>ワ解決方案“WebNews”（1不項目）SF：\YebIevs\日クApp_DataASPNETDB.MDF+ご!Default.aspx

fitweb.config圖1.3-1數(shù)據(jù)庫文件建立用戶數(shù)據(jù)表表是一切數(shù)據(jù)操作的基礎(chǔ)，沒有表中存貯數(shù)據(jù)的支持，動態(tài)網(wǎng)頁的自動建立完全不可能。在打開的數(shù)據(jù)庫中建立數(shù)據(jù)表的方法有多種,可以手工建表，也可使用存儲過程建表。本次開發(fā)使用存儲過程建立數(shù)據(jù)表。不注意:系統(tǒng)內(nèi)部提供了很多的存儲過程,用于安全管理,在你沒有掌握之前,不要去改動,否則會導(dǎo)致系統(tǒng)不能正常運行。你目前要用的存儲過程只是你自己建立的存儲過程。本站目前只使用兩個表來進行新聞的基本操作。ー個表是“欄目表”:負責(zé)存貯欄目名，欄目排序，欄目說明等數(shù)據(jù)。欄目名用來對各新聞條分類,欄目排序用來決定欄冃的網(wǎng)頁中的排布位置。另ー個表是“新聞表”：負責(zé)存貯新聞標(biāo)題,欄目,作者,新聞發(fā)布時間,新聞內(nèi)容,新聞查看次數(shù),審核通過情況。在新聞列表中顯示新聞標(biāo)題和時間,點擊新聞標(biāo)題即可查看新聞完整內(nèi)容，作者,時間，點擊次數(shù)。建表SQL代碼.右擊存儲過程，在菜單中點擊添加新存儲過程。如圖1.3-2臼勻服務(wù)器臼歩數(shù)據(jù)臼勻服務(wù)器臼歩數(shù)據(jù)連接SQASPHETDB.MDF田口數(shù)據(jù)庫關(guān)系圖國口表土二!視圖田□*コ?コ?コs口存儲討程添加新存儲過程也）囿刷新（￡）電屬性?Default,aspx起始質(zhì)客戶議對象和事件 v<%?PageLanguage=#C##AutoEventWireup="<IDOCTYPEhtmlPUBLIC#-//W3C//DTDXHTMI□<htmlxmlns="httu://www,w3.or3/1999/xhti中くheadrunat=#server#>くtitle)無標(biāo)題頁くパitle)マ?く/head)]<body>] <formid=forml*runat=*server>] <div></div></form>-</body>-</html>

圖1.3-2新建存貯過程.將存儲過程的名由dbo.StoredProcedure1改為Crealejable,并在AS和RETURN之間輸入下列SQL代碼內(nèi)容。CREATEPROCEDURECreate_table—dbo.StoredProcedurel 一存儲過程名字在此處自己生成AS/*Createtable欄目(Imidintidentityprimarykey,一欄目編號欄目nvarchar(30),說明nvarchar(100),排序int)Createtable新聞(nwidbigintidentityprimarykey,-新聞編じImidint,-一本新聞所屬的欄目標(biāo)題nvarchar(30),作者nvarchar(10),時間datetimedefault(getdate()),--上傳的時間次數(shù)int,一文章點擊打開的次數(shù)內(nèi)容ntext,審核nvarchar(20)/constrainttblm_newsforeignkey(Imid)REFERENCES欄目(Imid)ONDELETECASCADEONUPDATECASCADE一建立外鍵約束ー層疊刪除ー層疊更新)*/RETURNさ注意:/*...*/不能少,其之間的SQL代碼為建立數(shù)據(jù)表的代碼。identity為定義自增列,讓欄目號及新聞號可以自動增加?？蓽p少工作量,并確保惟一性。使用外鍵約朿可以讓欄目表和新聞表中的數(shù)據(jù)保持一致,否則會出現(xiàn)因為欄目表中某ー欄目被刪除,而此欄目名下的新聞在新聞表依然存在,導(dǎo)致出現(xiàn)數(shù)據(jù)不一致的錯誤。使用層疊刪除,則刪除欄目表中的某ー欄目,新聞表中此欄目名下的新聞會自動被刪除。層疊更新則是自動更改。3.4運行SQL代碼建表只運行建立表的SQL代碼,先選中如下內(nèi)容,點右鍵,再點'‘運行選定內(nèi)容”。如圖1.3-3preatetable^gHHI^H^BHH(Imidintidentityprimarykey,欄目nvarchar(30),1兄明riリュ!.匚preatetable^gHHI^H^BHH(Imidintidentityprimarykey,欄目nvarchar(30),1兄明riリュ!.匚hヨ ロロ〕,排序1がCreate

(nwidbigintidentityprimarykey,ェnt,一本新聞所屬的欄目.nvarchar(30),char(10),datetimedefault(getdate()),int,一文宣點擊打開的次救駕ext,nvarchar(2ロ)，［^^^^^^^^^?constrainttblm_newsforeignkey(ONDELETECASCADEONUPDATECASCAT?1斷點國)運行到光標(biāo)處境)剪切隻)復(fù)制夏)粘貼也)設(shè)計SQL如運行選定內(nèi)容6)執(zhí)行患)單步執(zhí)行存儲過程g)大綱顯不Q-)圖1.3-3在存貯過程之中運行SQL代碼的方法1.4查看建好的用戶表建立表的SQL代碼運行如沒有報錯，則在表上右擊后選“刷新”，會出現(xiàn)下右圖，發(fā)現(xiàn)兩個表“欄目”

表和’‘新聞”表已建好。如圖1.4-1右圖中的＜’欄目”和“新聞”表,其它aspnet一打頭的是系統(tǒng)提供的用于安全操作的表,在你還沒有成為高手之前不要去動它們,否則網(wǎng)站的安全性就不能得到保證。服務(wù)器資源管理器 ▼+X道鼻毎學(xué)日串?dāng)?shù)據(jù)連接 ASHASPNETDB.MDF囹シ數(shù)據(jù)庫關(guān)系圖日口表l±i__]aspnet_Applicatioii±l_]aspnet_Membership田コaspnet_Pathsl±!コaspnet_Personaliz：l±l_]aspnet_Personaliz：1l±J3aspnet_Profile囹コaspnet_Rolesl±Jコaspnet_SchemaVers:l±Jコaspnet_Users囹ヨaspnet_UserslnRol*Iffiコaspnet_WebEvent_E'i±julE噪!!i±）二]新聞圖1.4-1查看剛建立的表小結(jié).掌握新建網(wǎng)站,打開網(wǎng)站,特別是打開復(fù)制過來的網(wǎng)站。.了解ASP.NET配置工具的使用,掌握安全驗證的含義,了解勸角色,用戶的含義。.掌握網(wǎng)站中數(shù)據(jù)庫的建立,庫內(nèi)數(shù)據(jù)表的建立,SQL代碼建立表的操作流程。掌握查看表的結(jié)構(gòu)及內(nèi)容。第2章母版頁和CSS文件使用ASP.NET母版頁可以為應(yīng)用程序屮的頁創(chuàng)建一致的布局。單個母版頁可以為應(yīng)用程序屮的所有頁（或ー組頁）定義所需的外觀和標(biāo)準(zhǔn)行為。然后可以創(chuàng)建包含要顯示的內(nèi)容的各個內(nèi)容頁。當(dāng)用戶請求內(nèi)容頁時,這些內(nèi)容頁與母版頁合并以將母版頁的布局與內(nèi)容頁的內(nèi)容組合在一起輸出。母版頁實際由兩部分組成,即母版頁本身與一個或多個內(nèi)容頁。母版頁為具有擴展名.master（如MySite.master）的ASP.NET文件，它具有可以包括靜態(tài)文本、HTML元素和服務(wù)器控件的預(yù)定義布局。母版頁提供了開發(fā)人員通過傳統(tǒng)方式創(chuàng)建的功能,這些傳統(tǒng)方式包括重復(fù)復(fù)制現(xiàn)有代碼、文本和控件元素;使用框架集;對通用元素使用包含文件;使用ASP.NET用戶控件等。母版頁具有下面的優(yōu)點:?使用母版頁可以集中處理頁的通用功能,以便可以只在ー個位置上進行更新。使用母版頁可以方便地創(chuàng)建一組控件和代碼,并將結(jié)果應(yīng)用于ー組頁。例如,可以在母版頁上使用控件來創(chuàng)建一個應(yīng)用于所有頁的菜單。通過允許控制占位符控件的呈現(xiàn)方式,母版頁使您可以在細節(jié)上控制最終頁的布局。母版頁提供ー個對象模型,使用該對象模型可以從各個內(nèi)容頁自定義母版頁。CSS（CascadingStyleSheet,可譯為“層疊樣式表”或“級聯(lián)樣式表”）是ー組格式設(shè)置規(guī)則,用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面的格式,可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另ー個文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護站點的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。

層疊樣式表極大地提高了工作效率樣式表定義如何顯示HTML對象。樣式通常保存在外部的.css文件中。通過編輯ー個簡單的CSS文檔,外部樣式表可同時改變站點中所有頁面的布局和外觀。由于允許同時控制多重頁面的樣式和布局,CSS可稱得上WEB設(shè)計領(lǐng)域的ー個突破。作為網(wǎng)站開發(fā)者,能夠為每個HTML對象定義樣式,并應(yīng)用于任意多的頁面中。如需進行全局的更新,只需簡單地改變樣式,然后網(wǎng)站中的所有相應(yīng)對象都會自動地更新。CSS布局的優(yōu)點,采用CSS布局比對傳統(tǒng)的TABLE網(wǎng)頁布局有以下幾個顯著優(yōu)勢:表現(xiàn)和內(nèi)容相分離:將設(shè)計部分剝離出來放在ー個獨立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。提高頁面瀏覽速度:対于同一個頁面視覺效果，采用CSS布局的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長的標(biāo)簽。易于維護和改版:只要簡單的修改幾個CSS文件就可以重新設(shè)計整個網(wǎng)站的頁面。使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn)。母版頁母版頁文件及所在文件夾母版頁文件和CSS樣式文件這兩個文件組合用于網(wǎng)站的總體樣式設(shè)計,可以使整個網(wǎng)站的風(fēng)格一致，是網(wǎng)站整體布局，美觀設(shè)計最重要的方式方法。一定要為母版頁和CSS樣式文件建立文件夾,由于系統(tǒng)在開發(fā)時和運行時，其絕對路徑的不同,經(jīng)常會出現(xiàn)找不到文件的錯誤，所以在系統(tǒng)開發(fā)時對網(wǎng)頁各種文件的操作一定只能使用相對路徑，這樣可以保證在開發(fā)時和運行時文件路徑的一致性。さ注意：網(wǎng)站開發(fā)時常用的相對路徑格式為?/表示根路徑;../表示上一級路徑。.在“解決方案資源管理器”的F:\WebNews中右擊，再點新建文件夾，建立MASTER文件夾，專用于存放母版頁。如圖2.1-1。?國固3*つ解決方案“WebNews”?國固3*つ解決方案“WebNews”(1個項目ラS，r：\VebIevs\

0Appjata

國￡j_ASPHETDB.MDFmaster國添加現(xiàn)有項五)…一)新建文件夾@)添加ASP.NET文件夾⑤)圖2.1-1建立母版頁文件夾master.母版頁文件的建立在master文件夾上右擊，點選“添加新項”，在添加新項框中，選擇母版頁，將名稱中的名字改為MyMaster.master,點添加。如圖2.1-2。母版頁可以根據(jù)風(fēng)格需求變化建立多個。VisualStudio已女裝的模板園STあ因い燈。語體用戶控件VisualStudio已女裝的模板園STあ因い燈。語體用戶控件客戶端控件客戶端行為」母版負こJAJAXWeb窗體g]AJAX客戶端庫□AJAX母版頁添加新項ーF:\febNe?s\模板隻）：Web應(yīng)用程序的母版頁fflyHaster,masterIVisualC# fflyHaster,masterIVisualC# テ 舊將代碼放在單獨的文件中也）□選擇母版頁（2）圖2.1-2建立母版頁文件MyMaster.master語言S1.2母版頁的設(shè)計布局在HTML設(shè)計器中創(chuàng)建HTML頁或ASP.NET網(wǎng)頁時,對象的物理布局是從上至下。其布局形式有兩種,一是流式布局,二是兩維方式布局。默認情況下,當(dāng)在瀏覽器中呈現(xiàn)頁時,流式布局將網(wǎng)頁中的對象按照相同的從上至下順序呈現(xiàn)。兩維方式布局是對網(wǎng)頁中的對象使用水平和垂直坐標(biāo)在頁中的相應(yīng)位置定位對象。流布局:如果對象沒有任何定位樣式屬性，則它們將在頁中從上至下、從左至右或從右至左排列,具體取決于頁的dir屬性的設(shè)置、對象的容器對象或瀏覽器的語言設(shè)置。任何Web瀏覽器都可顯示使用此布局的HTML文檔。如果調(diào)整頁的大小,對象有時將被重新定位。使用流布局,可以使用table對象或使用div對象來對齊多個對象。但是，對象不能垂疊,只能包含嵌套,外觀上顯現(xiàn)為一層。當(dāng)調(diào)整頁的大小時,對象會有移動。兩維定位:應(yīng)用絕對定位選項,可將對象放置在頁中的精確位置。也可為添加到頁中的任何新對象指定定位選項。定位選項在實現(xiàn)W3CHTML4.0標(biāo)準(zhǔn)的任何瀏覽器中都有效。常用的定位選項：absolute：由left,right>top和bottom樣式屬性的任意組合定義對象在網(wǎng)頁中的位置。位置0,0基于當(dāng)前對象的父級定義，父級是具有定位信息的第一個容器對象。例如,如果當(dāng)前對象在具有定位信息的div對象內(nèi),則將基于div對象的位置來計算絕對定位信息。如果當(dāng)前對象沒有帶定位信息的容器對象,則將基于body對象計算定位信息。relative：由!eft和top樣式屬性定義對象在網(wǎng)頁中的位置。此選項與absolute的區(qū)別在于，0,0位置是根據(jù)對象在頁面流中的位置來定義的。具有相對定位并且top和left都設(shè)置為0的對象將在流中正常顯示。さ注意：使用絕對或相對定位的對象在頁中可能會不按照頁標(biāo)記聲明中的順序顯示，這可能會引起混亂。例如，在‘源’’視圖中，可能將某個按鈕定義為標(biāo)記中的第一個對象，但設(shè)置它的定位后，該按鈕可能在呈現(xiàn)的頁或“設(shè)計”視圖中顯示為最后一個對象。static：對象使用流布局呈現(xiàn);即對象不使用兩維定位。如果要對重寫設(shè)置（該設(shè)置繼承自主題或樣式表）的單個控件設(shè)置定位選項，則可選擇此選項。さ注意：以上文字在你成為布局高手時來看，就不難了。本網(wǎng)站采用流式布局，使用DIV加CSS完成，要記住的是DIV對象有嵌套包含關(guān)系，此時設(shè)計布局的DIV,是定位各個大的板塊，今后各板塊的DIV都是容器對象,要在其中包含很多其它對象。.網(wǎng)站基本布局圖示

網(wǎng)站的整體布局主要是對母版頁進行設(shè)計。本網(wǎng)站各大板塊布局及大致功能劃分如圖2.1-3所示。頁頭部頁體部國腳部圖2.19網(wǎng)站各頁面的基本布局層div頁頭部頁體部國腳部圖2.19網(wǎng)站各頁面的基本布局logodivheaddivmenudiv內(nèi)層外層bodyleft,.bodydivbodyrightbottdiv.網(wǎng)站布局的HTML代碼bottdiv上面布局圖示對應(yīng)的html代碼如下:<divclass=*divAll*><divclass=headdiv*><divclass="].ogodiv> </div><divclass="menudiv> </div></div><divclass二"bodydiv”><divclass="bodyleft"> </div><divclass二"bodyright"〉 </div></div><divclass二"bottdiv></div></div>ぽ注意:一個完整的div格式為くdiv>…</div>;看清DIV的嵌套包含關(guān)系。class二后面的類名要和CSS文件中類名一致。1.3母版頁的HTML主要代碼進入母版頁的設(shè)計界面,對母版頁MyMaster.mastei?輸入下述html代碼。如圖2.1-4

<%?MasterLanguage二"C*"AutoEventWireup=xrtrue*CodeFile=*MyMaster.master,cs*<IDOCTYPEhtmlPUBLIC"-〃W3C〃DTDXHTML1.0TransitionalZ/EN*"httr):〃www.w3<htmlxmlns="httr):〃www,w3,or￡/1999/xhtml"><headrunat=,server*>くtitle》母版頁く/title)<asp:ContentPlaceHolderID="head*runat=*server*>岫ルレ“m</asp:ContentPlaceHolder></head><body><formid="forml,runat="server><divclass=*divAll*>有綠色下劃線,說明類還沒有定義。類的定義在CSS文件中,之后要引用有綠色下劃線,說明類還沒有定義。類的定義在CSS文件中,之后要引用CSS文件,下劃線オ消失<divclass=logodiy></div><divclass二menudiv*</div></div><divclass=*bodydiv*><divclass='bodvleft><asp:ContentPlaceHolderID=*ContentPlaceHolder1*runat=server/.此代碼是母版頁的重要組成,為子頁代碼的存放地。每個母版頁一般只需要一個.此代碼是母版頁的重要組成,為子頁代碼的存放地。每個母版頁一般只需要一個即可<divclassゴbodyri&ht"></div></div><divclass=#bottdiv*></div></div>く/form)</body></html>圖2.1W布局的HTML代碼構(gòu)成3I注意:ContentPlaceHokier控件為母版頁中的內(nèi)容定義ー個相對區(qū)域,并且呈現(xiàn)在內(nèi)容頁中發(fā)現(xiàn)的相關(guān)Content控件內(nèi)的所有文本、標(biāo)記和服務(wù)器控件。ContentPlaceHolder控件在母版頁中至少要有一個?？辞鍢?biāo)記說明,查清和網(wǎng)站布局的HTML代碼的區(qū)別。如在Visual2005中開發(fā),則綠色下劃線不會出現(xiàn)。2.2CSS樣式文件2.2.1建立CSS樣式文件在“解決方案資源管理器”的F:\WebNews中右擊，再點新建文件夾，建立CSS文件夾。在CSS文件夾上右擊,點選“添加新項”。在添加新項框中添加名為MyStyle.css的樣式文件。樣式文件是用于定義html頁中各種對象的屬性值的文本,屬性值一般有:寬度，高度,顏色，字體,位置,動作等多種,是頁面美ェ的關(guān)鍵文件。如圖2.2-1。さ注意:樣式文件的路徑及引用問題。圖2.2-1建立樣式文件MyStyle.css2.2CSS文件的代碼結(jié)構(gòu)在myStyle.css頁面中,先輸入.divAll"說明:?表示類,divAll為類名,必須和html頁中各對象中的class后面指定的類名一致。｛｝中為類的樣式參數(shù)地。在｛｝中點擊,讓光標(biāo)進入其中,這時左上角工具條中的’’生成樣式”變?yōu)榭捎脿顟B(tài),點擊“生成樣式”，打開“修改樣式”，在其中可以定義樣式。最后點“確定”,就會自動生成樣式參數(shù)值。.輸入樣式類名（和母版頁中存在的類名完全ー樣,且ーー對應(yīng),母版頁中Class=后面的就是類名，CSS文件中的類名前要加上一個啟用“生成樣式”工具，如圖2.2-2。文件3）編輯魚）視圖9網(wǎng)站⑤）生成也）調(diào)試色）工具d方，目，げU3為心お 取， >De>g?生成樣式⑤）..CSS2.1 ，マ準(zhǔn)ル』dcss/iyStyle.cssmasterT^ffe^^s-aiaster?起始頁body 十 ,｛ ［生成樣式工具Jtext-align:center：｝.divAll（亠font-family:末體,Arial,Helvetica,sans-serif;font-size:14px;width:101Opx;｝圖2.2-2啟動"生成樣式”工具2.使用“生成樣式”工具。對各個類名進行反復(fù)操作,對頁面中所有各對象的樣式都用此樣式工具生成一個。CSS/iyStyle.css?master/MyMaster.master*dbo.StoredP...PHETDB.MDF)*Default.aspx起始頁body{}.divAlltext-align:center;font-family:宋體,Arial,Helvetica,sans-serif;font-size:26px;修改樣式“り“りa-1

dddt

0000

bbbb景框框位局表格塊背邊方定布列表font-family：font-size：font-weight：font-style：font-variant：text-transform：color：宋體,Arial,Helvetica,sans-serif修改樣式“り“りa-1

dddt

0000

bbbb景框框位局表格塊背邊方定布列表font-family：font-size：font-weight：font-style：font-variant：text-transform：color：宋體,Arial,Helvetica,sans-serif說明:XJtext-decoration：IIunderlineIIoverlineIIline-throughIIblinkコnone微軟卓越AaBbCctext-align：center;font-family：求體,Arial,Helvetica,sans-serif;font-size:26px圖2.2-2使用“生成樣式”工具生成樣式屬性值3.在myStyle.css樣式文件中生成的完整樣式屬性值body{text-align:center;font-size:14px;}.divAl1/?居中?//?字體大小?/font-family:宋體,width:lOlOpx;}Arial,Helvetica,sans-serif;/?字體類型?/.headdiv{width:lOlOpx;}.logodiv{border:Ipxdotted#FF9966;/?邊框?qū)挾阮伾?width:lOlOpx; /?層的寬度?/height:120px;}.menudivborder:IpxsolidttFFOOOO;width:lOlOpx;height:26px;}/?層的高度?/.bodydiv{border-style:nonesolidnonesolid;/?邊框線類型?/border-width:OpxIpxOpxIpx;/?邊框線寬度?/width:100%：border-right-color:ttFFOOOO;border-left-color:#FF0000;}.bodyleft{border-style:nonesolidnonenone;border-width:OpxIpxOpxOpx;border-color:#FFOOOO：float:left;/Afloat表示浮動,是div定位的要點,不使用folat,就不能實現(xiàn)左右定位布局?/width:760px;height:560px;}.bodyright{border-style:nonenonenonesolid;border-width:IpxOpxOpxIpx;border-color:ttFFOOOO;float:right;/*float表示浮動,是div定位的要點,不使用folat,就不能實現(xiàn)左右定位布局?/width:245px;height:560px;}.bottdiv{border:Ipxsolid#FF0000;width:lOlOpx;height:50px;}さ注意:樣式屬性的優(yōu)先級問題。優(yōu)先級規(guī)則是越內(nèi)層的越高,body是外層,divall是內(nèi)層,如果所以body設(shè)居中,divall設(shè)靠左,則body的居中只作用到divall,divall的靠左會作用丁?其內(nèi)含的對象,body的居中對divaH內(nèi)含的對象不起作用。如果diva”內(nèi)部還包含イjtws層,也設(shè)了屬性，則tws層的已設(shè)定屬性優(yōu)先起作用,tws層中未設(shè)定的屬性由外層中設(shè)定的屬性起作用，依次外推。如還有些屬性各層都未設(shè)置，則起用默認值。Divall如未設(shè)寬度，則其默認寬度為body的寬度（容器的寬度），這樣body的居中效應(yīng)在divall層上就不能看到,因為已占滿了寬度,要看到居中效果，內(nèi)層的寬度要小于容器的寬度。高度height部分以后要刪除或調(diào)整,以防止器容中的對象溢出越界造成布局破壞。刪除髙度數(shù)值則會自動脹大以適應(yīng)內(nèi)含的對象高度，達到適應(yīng)高度的目地，但此做法有時會導(dǎo)致塊與塊之間的高度不一致。.3CSS文件的應(yīng)用要用CSS文件控制母版頁中所有對象的屬性,就要將樣式文件和網(wǎng)頁文件結(jié)合起來,才能讓樣式文件中定義的樣式屬性作用到網(wǎng)頁中各個對象類。CSS文件的引用就是將樣式文件和網(wǎng)頁文件相結(jié)合，讓網(wǎng)頁文件中對象能夠引用到樣式文件中定義的樣式值，并相應(yīng)變化。此步操作必不可少。.3.1引用CSS文件點擊“源”進入母版頁的HTML代碼頁,從“解決方案資源管理器”中找到剛制作的樣式文件MyStyle.css,將其拖入到〈litle＞母版頁く/title〉至〈/head＞之,間

ュ輦對象和事件 三!比事件) 二］〈粕MasterLanゆ AutoEventYireup-*true*CodeFile=*NyMaster.Mast(^<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXKTML1.0Transitional/ZEN""http」ハ<htmlxmlns="http:〃/1999/xhtml">deadrunat="server”)くtitle泡版頁</title>Qinkhref=*../CSS/MyStyle.css"rel=*stylesheet*type="text/css"/></head> 、N<body><formid="forml"runat="server")くdivclass="divAll*>くdivclass="headdiv">くdivclass二"logodiv,〉、、a點擊拖動此文件」2拖動文件至此位置,CSS

工件只能放在此處__</div>、、a點擊拖動此文件」2拖動文件至此位置,CSS

工件只能放在此處__</div><divclass="bodydiv">圖2.3-1頁面中引用CSS文件囁團園回國s

な解決方案囁團園回國s

な解決方案“WebNews”(，F(xiàn)：\YebBe?s\國-t￡jApp_Code+し^App_Data団□!ascx0口BinBけcssAj|linkStyle.css=****-A|MyStyle.css+一］CuteSoft_ClientSコfilm?Uimages?LJjpgflash?しjpgswf?ロjpgswfVpSコLrnloSつmaster點擊“設(shè)計”,進入設(shè)計頁面后即可看到布局結(jié)果。彳注意:此處為了結(jié)果的美觀,對DIV對象的Height定義了值,以后在各個板塊中加入了其它對象后,要考慮刪除Height的值,或修改Height的值。如未定義Height的值,則DIV容器的Height會自動脹大,這很常用。圖2.3-2布局最終的效果2.4網(wǎng)頁上加載圖片或flash圖片或flash對網(wǎng)站的美工程度有極重要的作用,離開了圖片或flash,網(wǎng)站就會單調(diào)無味,沒有生機。

2.4.1準(zhǔn)備圖片及flash文件.在網(wǎng)站所在的文件夾之中新建一個名為Images的文件夾，再在其中復(fù)制ー些圖片及flash文件。地址(D)［〇FハWebNewsゝimages三］目轉(zhuǎn)到2.4.1準(zhǔn)備圖片及flash文件.在網(wǎng)站所在的文件夾之中新建一個名為Images的文件夾，再在其中復(fù)制ー些圖片及flash文件。地址(D)［〇FハWebNewsゝimages三］目轉(zhuǎn)到圖片任務(wù)作為幻燈片查看聯(lián)機訂購照片打印圖片head,swficon.gifHndex.swf文件和文件夾任務(wù)づ創(chuàng)建一個新文件夾0將這個文件夾發(fā)布到ビ共享此文件夾SOI.jpg S02.jpgS03.jpg圖2.4-1復(fù)制到網(wǎng)站屮的圖形文件.打開“解決方案資源管理器”,點擊“刷新”圖標(biāo),即可看到Images的文件夾及其中剛オ加入的圖片解決方案資源首理器-F:\We..▼QX嚼田解決方案資源首理器-F:\We..▼QX嚼田西國曲》F：\VebIe>s\【士.—cssi-ンimages團SOI.jpg國S02.jpgJjjS03,jpgQS04.jpg3S05.jpg鉱index,swf國index一bg.gif圖2.4-2刷新看到新加入的圖形文件4.2加載圖片.加入圖片控件,設(shè)置其寬高屬性?？杉尤攵鄠€圖片控件在bodyright層中從“工具箱”中拖入ー個Image圖像控件（自動命名為!mage1）,再打開其屬性窗口，設(shè)置其Height為!OOpx,Width為100%。さ注意:100%表示占容器的比例，Imagel圖像控件的容器為bodyright層（DIV）,Image1對象的Width為100%是指bodyright層有多寬，Imagel就有多寬。

屈性laagelSystemWeb.UIWebControls▼:ノ1ユHeightlOOpxAImageAlignNotSetImageUrlSkinlDTablndex0ToolTipVisibleTrue■WidthI1001 V,ヨ5P屈性laagelSystemWeb.UIWebControls▼:ノ1ユHeightlOOpxAImageAlignNotSetImageUrlSkinlDTablndex0ToolTipVisibleTrue■WidthI1001 V,ヨ5P:i「n,呼#I「n,呼1圖2.4-3在頁面上加入圖形顯示控件2.進入Imagel屬性窗口,找到ImageUrl屬性（圖片路徑）,點擊國,彈出選擇圖像框ImageUrllaagelSystem.Web.UI.,▼HeightlOOpxへImageAlignNotSet.□SkinlDTablndex03.圖2.4-3圖形顯示控件加載圖片文件點擊images文件夾，從中選擇所要的圖像文件,點“確定”。選擇圖像 |T|[x||項目文件夾國）: 文件夾內(nèi)容0:WtbNewsx,App_DataICSSBimagesmasterJ理川J理JI文件類型任圖像文件(*.gif；*,jpg；*,jpeg；*,bmp;*.wmf;*.png)取消ImageAlignImageUrlNotSet ▲^/iBages/S03.jpg…|laageUrl要顯示的圖像的URL?

圖2.4-4圖形顯示控件加載圖片文件4.最簡單的圖片加載方法是,在網(wǎng)頁處于設(shè)計視圖時,將選中的圖片文件直接拖到網(wǎng)頁之中,然后用鼠標(biāo)調(diào)整大小。オ注意:此操作使用為工具箱內(nèi)HTML項中的img對象。2.4.2加載flash文件加載方法有多種，但最常用的是使用下列代碼進行加載。1,點葡!設(shè)計コ0拆分回源<Ltml>並,中的源回源進入HTML代碼頁中，在logodiv層中輸入下列代碼。<divclass=*divAir><divclass=*headdiv*><divclass=*logodiv*><objectclassid=*clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase=*h11p://down1oad.macromedia,com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29?0“style="width:lOlOpx;height:100px;">くparamname="movievalue=*../images/head.swf"/><paramname="WMODE"value="Transparent"/><%一<embedsrc="../images/head.swf*width=*1010px*height=*100px*></embed>--%></object></div><divclass=menudiv></div></div>團注意:這是格式代碼,不能改動?？辞鍁alue=*../images/head.swf”及embedsrc=”../images/head.swf"的值是ー樣的。Width及height可以調(diào)整,但也要一致。彳注意:有時。mbed可以不用,flash文件同樣會顯示。但考慮兼容性不同瀏覽器及版本,--般保留embed〇小結(jié)母版頁是網(wǎng)站中非常重要的頁面,可以決定整個網(wǎng)站或ー類頁面的一致性,必須掌握。CSS樣式可減小網(wǎng)站布局和美化的工作量,在網(wǎng)站布局及美化中至關(guān)重要，必須學(xué)會，深入了解。Flash,圖片，音樂等是網(wǎng)站之中不缺少的元件,如何使用應(yīng)該掌握。第3章欄目頁操作欄目是一個新聞網(wǎng)站的基礎(chǔ),所有新聞最終都歸類到相應(yīng)的欄目之中。欄目名應(yīng)該是動態(tài)的可以隨時增加或修改調(diào)整的。甚至各欄目在網(wǎng)站中排布的位置也是可調(diào)整的。這樣的新聞網(wǎng)站オ具有適應(yīng)性。欄目頁的主要功能是對欄目進行以下操作:增加欄目項,修改欄目名，刪除欄目項,變動欄目項所在位置。建立欄目文件夾及欄目管理頁不同功能的操作放在不同的文件夾中，非常有利于網(wǎng)站的權(quán)限管理。分離的權(quán)限管理可以使得網(wǎng)站權(quán)限清晰,層次分明,同時減少權(quán)限管理的工作量。建立欄目及新聞文件夾在“解決方案資源管理器”的F:\WebNews中右擊，再點新建文件夾，分別建立LMIO和NEWIO文件夾,用于存放欄目操作頁和新聞操作頁,如圖3.1-1。建立不同文件夾的目地是方便進行“權(quán)限管理”。

ュ解決方案umynewsn~-レiibnBTRRFRRFniIュ解決方案umynewsn~-レiibnBTRRFRRFniI用生成網(wǎng)站包）發(fā)布網(wǎng)站也）解決方案資源管 ▼QX,,(1,解決方案資源管 ▼QX國添加新項型）...因添加現(xiàn)有項⑥）...j新建文件夾也）添加ASP.NET文件夾（S）輪固區(qū)|西＞二?解決方案“mynews”(1イ□まF：\Bynevs\日App_Data日(JDatabase,mdfセ】Database_□LMIOiNEtflO+ _2]Default,aspxi2web.config圖3.1-1建立欄目文件夾和新聞文件夾新建欄目管理頁為統(tǒng)ー網(wǎng)站樣式布局,此頁是建立在母版頁的基礎(chǔ)之上,由母版頁決定了其基本的布局格式。這是本網(wǎng)站建立的第一個頁面,步驟非常詳細，之后的網(wǎng)頁新建過程就會略過。1.在LMIO文件夾上右擊，點擊’‘添加新項"。如圖3.1-2。解決方案資源管 ▼QX目解決方案資源管 ▼QX目團固過#二?解決方案“mynews”(11□bナF：，?yiie's\SApp_DataSJDatabase.mdf治Database.LMIO三J添加新項（S）...三J添加現(xiàn)有項⑥）...一（新建文件夾@）

圖3.1-3新建有母版頁的欄目操作頁Lmlo.aspx圖3.1-2圖3.1-2新建欄目操作頁2.選中“WEB窗體”，在名稱欄中改名為“Imio.aspx"，勾選中“選擇母版頁’‘，點’‘添加"。如圖3.1-3.選擇母版頁,點’‘確定"。如圖3.14圖3.1-4選中母版頁.在hnio.aspx頁的HTML代碼頁中改Title="無標(biāo)題頁”,如圖3.『5。為Title="欄目操作”,如圖3.1-6,此為網(wǎng)頁的標(biāo)題名。要養(yǎng)成修改頁面標(biāo)題的好習(xí)慣。LbIo/LbIo.aspx*master/MyMaster.master 起始頁三］碌爭件）く%@PageLanguage二"C#"MasterPageF11e= aster/MyMaster.master"AutoEventWireup="true"CodeFile二"Lmlo.aspx.cs"Inherits="Lmlo_LmIo"Title二"無標(biāo)題頁"%>^asp：Contentid="Content1“ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server")0&sp：Content)圖3.1-5修改前的代碼Lalo/I^Io.aspx* master/MyMaster,master 起始頁客尸裝對象和事件 三)|疣爭件)〈照PageLanguage="C#"MasterPageFileゴ?/master/MyMaster.master*AutoEventWireup="true"CodeFileゴしml。.aspx.cs"Inherits="LmI。ーLml。"Titieプ欄目慄作頁.%><asp：Contentid="Contentl"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">I"asp：Content〉圖3.1-6修改以后的代碼欄目頁設(shè)計制作準(zhǔn)備點Imio.aspx頁的“設(shè)計”進入設(shè)計視圖,點圖標(biāo)太打開工具箱。圖3.2-1左邊為存放所有控件對象的工具箱，右邊為設(shè)計視圖。工具箱中的控件對象要加入到網(wǎng)頁中才能發(fā)揮作用。頁面中加入工具箱對象的方法有多種,可以在工具箱中用鼠標(biāo)點住控件對象將其拖入到頁面,也可以宜接在工具箱中鼠標(biāo)雙擊要加入的控件對象到光標(biāo)所在點。

+標(biāo)碓

Iー數(shù)圏、指針GridView+標(biāo)碓

Iー數(shù)圏、指針GridViewGridViewDetai11,., FormViewListViewRepeaterDataPagerSqlDataSourceIJIIO/lBio.aspx?Default,aspx起始頁圖3.2T工具箱屮控件對象加入頁面操作欄目頁中GridViewIJIIO/lBio.aspx?Default,aspx起始頁圖3.2T工具箱屮控件對象加入頁面操作3.1加入GridViewl對象顯示表格數(shù)據(jù)是軟件開發(fā)中的一個基本任務(wù)。ASP.NET提供了許多工具來在網(wǎng)格中顯示表格數(shù)據(jù),GridView控件是其中最常用的ー種,功能非常強大。通過使用GridView控件,可以顯示、編輯和刪除多種不同的數(shù)據(jù)源中的數(shù)據(jù)。要做好網(wǎng)站必須學(xué)精GridView的使用。使用GridView可以執(zhí)行以下操作:通過數(shù)據(jù)源控件自動綁定和顯示數(shù)據(jù)。通過數(shù)據(jù)源控件對數(shù)據(jù)進行選擇、排序、分頁、編輯和刪除。還可以通過執(zhí)行以下操作來自定義GridView控件的外觀和行為:指定自定義列和樣式。利用模板創(chuàng)建自定義用戶界面（UI）元素。通過處理事件將自己的代碼添加到GridView控件的功能中。LllO/laio.aspx?Default,aspx 起始頁進入Imio.aspx的設(shè)計視圖，在DIV框中點一下，讓光標(biāo)進入之中（目地是將以后加入的對象放入此DIV層中），然后雙擊“工具箱”中的GridView,將其加入到網(wǎng)頁中成GridViewl對象（此舉為加入網(wǎng)格,用于顯示數(shù)據(jù)庫中的數(shù)據(jù)）。如圖3.3-1為加入網(wǎng)頁后GridViewl對象的初始狀態(tài)。LllO/laio.aspx?Default,aspx 起始頁圖3.3-1GridView對象3.3.2GriaViewl的任務(wù)GriaView是專門用于顯示及操作表格數(shù)據(jù)的對象。要讓GriaView顯示及操作數(shù)據(jù),就必須將GriaView和數(shù)據(jù)庫中的表或抽取數(shù)據(jù)的SQL命令進行綁定。"GriaView任務(wù)”就是進行數(shù)據(jù)綁定的工具。如圖3.3-2。.啟動GriaView任務(wù)

將鼠標(biāo)的箭頭移入GriaViewl對象之中,并點擊GriaViewl對象右上角的叵し出現(xiàn)GriaView任務(wù)。LBIO/laio.aspx?Default,aspx起始頁Iasp:gridview#GridView1|ColunmOColunuilColumnZGridview任務(wù) ：abc abc abc 選擇數(shù)據(jù)源:優(yōu)） ▼6abc abc abc 編輯列..abc abc abc 添加新列~~tbc 〇 〇圖3.3-2GridViewl對象的任務(wù).新建GriaViewl對象的數(shù)據(jù)源點“選擇數(shù)據(jù)源”的下拉按鈕,點“新建數(shù)據(jù)源”,再點“數(shù)據(jù)庫”,點“確定”。如圖3.3-3。圖3.3-3數(shù)據(jù)源的ID值さ注意:此處対數(shù)據(jù)源沒有重新取名，使用得是系統(tǒng)提供的默認名SqlDataSourceU以后要養(yǎng)成改名的好習(xí)慣,因為取ー個見名識意的名字能讓以后的維護工作少走彎路。3.3.3配置GriaView!對象的數(shù)據(jù)源1.點下拉框,選中ASPNETDB.MDF數(shù)據(jù)庫,點“下ー步”，如圖3.3-4。

圖3.3Y選擇網(wǎng)站中的數(shù)據(jù)庫連接と注意:第一次進行數(shù)據(jù)連接時會出現(xiàn)ASPNETDB.MDF數(shù)據(jù)庫名,以后不會出現(xiàn)。如果數(shù)據(jù)庫名沒有出現(xiàn),最簡單可靠的方法是將VS系統(tǒng)關(guān)掉,重新再打開,即可,還否則是未建數(shù)據(jù)庫。2.改Connectionstring為Conn,如圖3.3-5。點’‘下ー步"。圖3.3-5修改連接字串名さ注意:以后本網(wǎng)站對數(shù)據(jù)庫的聯(lián)接就使用Conn,再也不會出現(xiàn)ASPNETDB.MDF了。3.3.4GriaViewl對象數(shù)據(jù)源中表配置.選中“指定來自表或視圖的列”,在名稱下拉框中選中“欄目”表,并如下勾選欄目表的列（自動生成SQL代碼:SELECT［Imid］,［欄目名］,［說明］,［排序］FROM［欄目］）。圖3.3-6指定在頁面上顯示的字段。勾選中的字段會在頁面中顯示表中的數(shù)據(jù)記錄,未勾選的則不會。圖3.3-6欄目表數(shù)據(jù)要顯示的列ー勾選.點“ORDERBY（R）”，此為對從數(shù)據(jù)庫欄目表中選擇出來的數(shù)據(jù)進行排序，在排序方式中,選中排序（排序列）,即使用欄目號進行從小到大的排序。自動生成SQL代碼:SELECT［Imid］,［欄目］,［說明］,［排序］FROM［欄目］ORDERBY［排序］,如圖3.3-7。點“確定”,回到上一頁。配置數(shù)據(jù)源-SqlDataSourcel圖3.3-7配置數(shù)據(jù)記錄的排序3.3.5數(shù)據(jù)源中生成SQL代碼在“高級SQL生成選項”框,勾中“生成INSERT、UPDATE和DELETE”(止匕時會自動在頁面中生成SQL的插入、更新和刪除等命令代碼),如圖3.3-8。點“確定”。回到上一頁,點“下ー步”,再點“完成”。要對數(shù)據(jù)進行操作就必須在頁面生成INSERT、UPDATE和DELETE代碼。以后用存貯過程代替。高級SQL生或選項 保は|可以生成附加的INSERT、UPDATE和DELETE語句來更新數(shù)據(jù)源.回帶成“訳豆蝦、.一誡就建..利?旋值注一備句.基于SELECT語句生成INSERT、UPDATE和DELETE語句.必須選定所有主鍵字段オ能啟用此選項.口使用開放式并發(fā)(0)修改UPDATE和DELETE語句以檢測自該記錄加載到DataSet中以來數(shù)據(jù)庫是否更改?這有助于防止并發(fā)沖突.! タ定取消圖3.3-8勾選生成INSERT、UPDATE和DELETE,生成SQL操作代碼オ注意:不能勾選“使用開放式并發(fā)”項,這是高級用法，等水平較高時再去掌握。3.4GriaView對象的列操作3.4.1編輯GriaViewl對象中列將鼠標(biāo)的箭頭移入GriaViewl對象之中,點擊GriaViewl對象右上角的國,出現(xiàn)GriaView任務(wù)，勾中“啟用編輯”，“啟用刪除”項,再去點擊“編輯列”。如圖3.4-1

lmid欄目名說明排序編輯刪除0abcabc0編輯刪除1abcabc1編輯刪除2abcabc2lmid欄目名說明排序編輯刪除0abcabc0編輯刪除1abcabc1編輯刪除2abcabc2編輯刪除3abcabc3編輯刪除4abcabc4LllO/laio.aspx*Default,aspx起始頁(asp:gridview#GridViewl|SqlDataSource-SqlDataSourcelGridViev任務(wù)自動套用格式…圖3.4-1操作GriaViewl對象的命令按鈕列1.選中CommandField歹リ,點日,將其移到最下面,如圖1.選中CommandField歹リ,點日,將其移到最下面,如圖3.4-2。字段 組區(qū)］可用字段。）:與密有字段）B崖］del_名riid目明序乖1m欄說排M可用字段。）:與密有字段）B崖］del_名riid目明序乖1m欄說排Mn歲歲1]A?商CheckBoxField添加也）選定的字段⑤）：SE%CommandField圉!midI］欄目名日說明I!排序?qū)⒋俗侄无D(zhuǎn)換為TemplateFieldCommandField屬性任):ロ自動生成字段G）刷新架構(gòu)確定］I取消圖3.4-2調(diào)整GriaViewl中顯示列的順序2.刪除“Imid”歹IJ,如圖3.4-2。再點"確定''。Lmid為欄目編號,由系統(tǒng)生成,用戶管不到,所以不要顯示出來。

BoundField屬性比）：,Z例有字段）日國BoundFieldid目明序1m欄說排iilii]圉J]_晅!CheckBoxField選定的字段せ）:ZJBoundField屬性比）：,Z例有字段）日國BoundFieldid目明序1m欄說排iilii]圉J]_晅!CheckBoxField選定的字段せ）:ZJ豊1]國Footer!extHeaderlmagellrlHeader!ext 欄目名日行為ApplyFormatlnEditModeFalseHeaderText此字段的標(biāo)頭內(nèi)的文本?DataField欄目名DataFormatString：.；IE可訪問勝AccessibleHeaderTextE數(shù)據(jù)E外觀ロ自動生成字段?將此字段轉(zhuǎn)換為TemplateField圖3.4-2刪除GriaViewl中不想顯示的列將鼠標(biāo)的箭頭移入GriaViewl對象之中,右擊鼠標(biāo),在菜單中點擊“屬性”,打開屬性窗口,在屬性窗中找到“Width”,輸入將鼠標(biāo)的箭頭移入GriaViewl對象之中,右擊鼠標(biāo),在菜單中點擊“屬性”,打開屬性窗口,在屬性窗中找到“Width”,輸入96%作為GriaViewl對象的寬度。如圖3.4-3圖3.4-3設(shè)置GriaViewl對象的寬度3.5欄目頁中FormView對象FormView控件用于一次顯示數(shù)據(jù)源中的一個記錄。在使用FormView控件時，可創(chuàng)建模板來顯示和編輯綁定值。這些模板包含用于定義窗體的外觀和功能的控件、綁定表達式和格式設(shè)置。FormView控件通常與GridView控件一起用于主控/詳細信息方案。FormView控件通常用于更新和插入新記錄。該控件通常用于主/從方案，在此方案中，主控件的選定記錄決定要在FormView控件中顯示的記錄。FormView控件依賴于數(shù)據(jù)源控件的功能執(zhí)行諸如更新、插入和刪除記錄的任務(wù)。即使FormView控件的數(shù)據(jù)源有多條記錄,該控件一次也僅顯示一條數(shù)據(jù)記錄。FormView是數(shù)據(jù)錄入操作的好幫手。

5.1加入FormView!對象FormView!對象在此只是用于ー個數(shù)據(jù)行的新增操作,即用于ー個欄目項的新增。在DIV框中點一下,讓光標(biāo)進入之中,雙擊工具箱中的“FormView”，丿J[K一個FormViewl對象,用回車鍵ド移FormView!對象，和GriaView!對象隔開一點。圖3.5-1?ContentPlaceHolderlF自疋欄目說明拄序abcabc0編輯刪除abcabc1編輯刪除abcabc2編輯刪除abcabc3編輯刪除abcabc4編輯刪除SqlDal'?Scnrrp-SclTlataゝ1asp:formview#FormVieImid：0欄目:abc說明:abcc排序:0編輯則除新建W1]r圖3.5-!加入FormView!對象5.2為FormView!對象配置數(shù)據(jù)源點擊FormViewl點擊FormViewl對象的叵!按鈕,在“選擇數(shù)據(jù)源”下拉框中選中"SqlDataSourcel 即可。刷新架構(gòu)r啟用分頁編相模板

圖3.5-2配置FormViewl對象的數(shù)據(jù)源二注意:FormViewl對象和GriaViewl對象共用數(shù)據(jù)源SqlDataSourcel,可簡化很多操作，如數(shù)據(jù)刷新。5.3刪除FormView!多余的模板FormView對象中有三個常用模板:ItemTemplate模板，EditltemTemplate模板,InsertltemTemplate模板。ItemTemplate模板作用為顯示數(shù)據(jù)，EditltemTemplate模板的作用為編輯數(shù)據(jù),InsertltemTemplate模板的作用為插入數(shù)據(jù)。本頁中只使用Insedtemtemplate模板以加入數(shù)據(jù)。其他兩個模塊中的內(nèi)容可刪除。.刪除ItemTemplate模板：點FormViewl對象的目按鈕,點“編輯模板"，選擇ItemTemplate模板，在ItemTemplate模板中用鼠標(biāo)拖曳選中全部對象，按Delete健刪除。如圖3.5-3,圖3.54IFor?View任務(wù)?模板編輯模式[IFor?View任務(wù)?模板編輯模式FormViewl-ItemTemplateItemTemplate一ナ結(jié)束模板編輯 ItemTemplate一ナ結(jié)束模板編輯 ー此為ItemTemplate模板,將其全部刪空。再選擇EditltemTemplate模板,將其也全部刪空Imid：[imidLabel]欄目:[欄目Label]說明:[說B月Label! ，排序:由好[嬴 ]庫歯亜

圖3.5-3進入ItemTemplate模板SnlDdtaSoiihce_SallataSourcelIasp:formview#FormView1| 顯示:圖3.5-3進入ItemTemplate模板SnlDdtaSoiihce_SallataSourcelIasp:formview#FormView1| 顯示:ForaViev任務(wù)模板編輯模式iltemTemplate結(jié)束模尸"エ"”1“。IFooterTeaplateEditlteaTeaplateInsertlteaTeaplateHeaderTeaplateEaptyDataTeaplatePagerTeaplate.刪除EditltemTemplate模板:點FormView1對象的叵!按鈕,點“編輯模板”,選擇EditltemTemplate模板,在EditltemTemplate模板中用鼠標(biāo)拖曳選中全部對象,按Delete健刪除。如圖3.5-5FormViewl-EditltemTemplatEdititemTemplatJasp:FormView#FormViewlj圖3.5?5刪空Jasp:FormView#FormViewlj圖3.5?5刪空EditltemTemplate模板網(wǎng)頁中大的布局目前最常用的是使用DIV+CSS完成,小的局部布局使用表格（Table）,方便快捷,極大減少代碼量。此處是為FormViewl中一個模板的布局，屬局部小塊,所以使用Table來進行布局。6.1對InsertItemTemplate模板用Table美化布局Jasp;formview#FormView1|*顯示:結(jié)束模板編輯ForaView任務(wù)模板編輯模式InsertltemTemplate.Jasp;formview#FormView1|*顯示:結(jié)束模板編輯ForaView任務(wù)模板編輯模式InsertltemTemplate圖3.6-!進入InsertltemTemplate模板.點擊將光標(biāo)移到“取消”按鈕后,回車鍵使其下移，點“菜單”中表（A）,點“插入表”。圖3.6-2讓出加入表（Table）的空間。

（￡）視圖9 網(wǎng)站⑤）生成色）調(diào)試國）格式@）速?工具@）測試⑤）窗口電）幫助出）VMwareQ0 .」通り，?區(qū), ?Debs插入表1） j▼漕jpglp-js!!??■一?卜?平ユ插入く） ?XHTML1.0Transit!oi，。7祥疣） ?宋體,，刪除也） ?選擇⑤） ?b/n倉必事，三u?PX*css/MyStyle.css master/MyMaster,master j修改通）