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

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

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

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

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

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

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

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

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

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

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

圖1.3-2新建存貯過(guò)程.將存儲(chǔ)過(guò)程的名由dbo.StoredProcedure1改為Crealejable,并在AS和RETURN之間輸入下列SQL代碼內(nèi)容。CREATEPROCEDURECreate_table—dbo.StoredProcedurel 一存儲(chǔ)過(guò)程名字在此處自己生成AS/*Createtable欄目(Imidintidentityprimarykey,一欄目編號(hào)欄目nvarchar(30),說(shuō)明nvarchar(100),排序int)Createtable新聞(nwidbigintidentityprimarykey,-新聞編じImidint,-一本新聞所屬的欄目標(biāo)題nvarchar(30),作者nvarchar(10),時(shí)間datetimedefault(getdate()),--上傳的時(shí)間次數(shù)int,一文章點(diǎn)擊打開(kāi)的次數(shù)內(nèi)容ntext,審核nvarchar(20)/constrainttblm_newsforeignkey(Imid)REFERENCES欄目(Imid)ONDELETECASCADEONUPDATECASCADE一建立外鍵約束ー層疊刪除ー層疊更新)*/RETURNさ注意:/*...*/不能少,其之間的SQL代碼為建立數(shù)據(jù)表的代碼。identity為定義自增列,讓欄目號(hào)及新聞號(hào)可以自動(dòng)增加。可減少工作量,并確保惟一性。使用外鍵約朿可以讓欄目表和新聞表中的數(shù)據(jù)保持一致,否則會(huì)出現(xiàn)因?yàn)闄谀勘碇心畅`欄目被刪除,而此欄目名下的新聞在新聞表依然存在,導(dǎo)致出現(xiàn)數(shù)據(jù)不一致的錯(cuò)誤。使用層疊刪除,則刪除欄目表中的某ー欄目,新聞表中此欄目名下的新聞會(huì)自動(dòng)被刪除。層疊更新則是自動(dòng)更改。3.4運(yùn)行SQL代碼建表只運(yùn)行建立表的SQL代碼,先選中如下內(nèi)容,點(diǎn)右鍵,再點(diǎn)'‘運(yùn)行選定內(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,一文宣點(diǎn)擊打開(kāi)的次救駕ext,nvarchar(2ロ)，［^^^^^^^^^?constrainttblm_newsforeignkey(ONDELETECASCADEONUPDATECASCAT?1斷點(diǎn)國(guó))運(yùn)行到光標(biāo)處境)剪切隻)復(fù)制夏)粘貼也)設(shè)計(jì)SQL如運(yùn)行選定內(nèi)容6)執(zhí)行患)單步執(zhí)行存儲(chǔ)過(guò)程g)大綱顯不Q-)圖1.3-3在存貯過(guò)程之中運(yùn)行SQL代碼的方法1.4查看建好的用戶表建立表的SQL代碼運(yùn)行如沒(méi)有報(bào)錯(cuò)，則在表上右擊后選“刷新”，會(huì)出現(xiàn)下右圖，發(fā)現(xiàn)兩個(gè)表“欄目”

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

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

0Appjata

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

網(wǎng)站的整體布局主要是對(duì)母版頁(yè)進(jìn)行設(shè)計(jì)。本網(wǎng)站各大板塊布局及大致功能劃分如圖2.1-3所示。頁(yè)頭部頁(yè)體部國(guó)腳部圖2.19網(wǎng)站各頁(yè)面的基本布局層div頁(yè)頭部頁(yè)體部國(guó)腳部圖2.19網(wǎng)站各頁(yè)面的基本布局logodivheaddivmenudiv內(nèi)層外層bodyleft,.bodydivbodyrightbottdiv.網(wǎng)站布局的HTML代碼bottdiv上面布局圖示對(duì)應(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>ぽ注意:一個(gè)完整的div格式為くdiv>…</div>;看清DIV的嵌套包含關(guān)系。class二后面的類名要和CSS文件中類名一致。1.3母版頁(yè)的HTML主要代碼進(jìn)入母版頁(yè)的設(shè)計(jì)界面,對(duì)母版頁(yè)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》母版頁(yè)く/title)<asp:ContentPlaceHolderID="head*runat=*server*>岫ルレ“m</asp:ContentPlaceHolder></head><body><formid="forml,runat="server><divclass=*divAll*>有綠色下劃線,說(shuō)明類還沒(méi)有定義。類的定義在CSS文件中,之后要引用有綠色下劃線,說(shuō)明類還沒(méi)有定義。類的定義在CSS文件中,之后要引用CSS文件,下劃線オ消失<divclass=logodiy></div><divclass二menudiv*</div></div><divclass=*bodydiv*><divclass='bodvleft><asp:ContentPlaceHolderID=*ContentPlaceHolder1*runat=server/.此代碼是母版頁(yè)的重要組成,為子頁(yè)代碼的存放地。每個(gè)母版頁(yè)一般只需要一個(gè).此代碼是母版頁(yè)的重要組成,為子頁(yè)代碼的存放地。每個(gè)母版頁(yè)一般只需要一個(gè)即可<divclassゴbodyri&ht"></div></div><divclass=#bottdiv*></div></div>く/form)</body></html>圖2.1W布局的HTML代碼構(gòu)成3I注意:ContentPlaceHokier控件為母版頁(yè)中的內(nèi)容定義ー個(gè)相對(duì)區(qū)域,并且呈現(xiàn)在內(nèi)容頁(yè)中發(fā)現(xiàn)的相關(guān)Content控件內(nèi)的所有文本、標(biāo)記和服務(wù)器控件。ContentPlaceHolder控件在母版頁(yè)中至少要有一個(gè)?？辞鍢?biāo)記說(shuō)明,查清和網(wǎng)站布局的HTML代碼的區(qū)別。如在Visual2005中開(kāi)發(fā),則綠色下劃線不會(huì)出現(xiàn)。2.2CSS樣式文件2.2.1建立CSS樣式文件在“解決方案資源管理器”的F:\WebNews中右擊，再點(diǎn)新建文件夾，建立CSS文件夾。在CSS文件夾上右擊,點(diǎn)選“添加新項(xiàng)”。在添加新項(xiàng)框中添加名為MyStyle.css的樣式文件。樣式文件是用于定義html頁(yè)中各種對(duì)象的屬性值的文本,屬性值一般有:寬度，高度,顏色，字體,位置,動(dòng)作等多種,是頁(yè)面美ェ的關(guān)鍵文件。如圖2.2-1。さ注意:樣式文件的路徑及引用問(wèn)題。圖2.2-1建立樣式文件MyStyle.css2.2CSS文件的代碼結(jié)構(gòu)在myStyle.css頁(yè)面中,先輸入.divAll"說(shuō)明:?表示類,divAll為類名,必須和html頁(yè)中各對(duì)象中的class后面指定的類名一致。｛｝中為類的樣式參數(shù)地。在｛｝中點(diǎn)擊,讓光標(biāo)進(jìn)入其中,這時(shí)左上角工具條中的’’生成樣式”變?yōu)榭捎脿顟B(tài),點(diǎn)擊“生成樣式”，打開(kāi)“修改樣式”，在其中可以定義樣式。最后點(diǎn)“確定”,就會(huì)自動(dòng)生成樣式參數(shù)值。.輸入樣式類名（和母版頁(yè)中存在的類名完全ー樣,且ーー對(duì)應(yīng),母版頁(yè)中Class=后面的就是類名，CSS文件中的類名前要加上一個(gè)啟用“生成樣式”工具，如圖2.2-2。文件3）編輯魚）視圖9網(wǎng)站⑤）生成也）調(diào)試色）工具d方，目，げU3為心お 取， >De>g?生成樣式⑤）..CSS2.1 ，マ準(zhǔn)ル』dcss/iyStyle.cssmasterT^ffe^^s-aiaster?起始頁(yè)body 十 ,｛ ［生成樣式工具Jtext-align:center：｝.divAll（亠font-family:末體,Arial,Helvetica,sans-serif;font-size:14px;width:101Opx;｝圖2.2-2啟動(dòng)"生成樣式”工具2.使用“生成樣式”工具。對(duì)各個(gè)類名進(jìn)行反復(fù)操作,對(duì)頁(yè)面中所有各對(duì)象的樣式都用此樣式工具生成一個(gè)。CSS/iyStyle.css?master/MyMaster.master*dbo.StoredP...PHETDB.MDF)*Default.aspx起始頁(yè)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說(shuō)明: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表示浮動(dòng),是div定位的要點(diǎn),不使用folat,就不能實(shí)現(xiàn)左右定位布局?/width:760px;height:560px;}.bodyright{border-style:nonenonenonesolid;border-width:IpxOpxOpxIpx;border-color:ttFFOOOO;float:right;/*float表示浮動(dòng),是div定位的要點(diǎn),不使用folat,就不能實(shí)現(xiàn)左右定位布局?/width:245px;height:560px;}.bottdiv{border:Ipxsolid#FF0000;width:lOlOpx;height:50px;}さ注意:樣式屬性的優(yōu)先級(jí)問(wèn)題。優(yōu)先級(jí)規(guī)則是越內(nèi)層的越高,body是外層,divall是內(nèi)層,如果所以body設(shè)居中,divall設(shè)靠左,則body的居中只作用到divall,divall的靠左會(huì)作用丁?其內(nèi)含的對(duì)象,body的居中對(duì)divaH內(nèi)含的對(duì)象不起作用。如果diva”內(nèi)部還包含イjtws層,也設(shè)了屬性，則tws層的已設(shè)定屬性優(yōu)先起作用,tws層中未設(shè)定的屬性由外層中設(shè)定的屬性起作用，依次外推。如還有些屬性各層都未設(shè)置，則起用默認(rèn)值。Divall如未設(shè)寬度，則其默認(rèn)寬度為body的寬度（容器的寬度），這樣body的居中效應(yīng)在divall層上就不能看到,因?yàn)橐颜紳M了寬度,要看到居中效果，內(nèi)層的寬度要小于容器的寬度。高度height部分以后要?jiǎng)h除或調(diào)整,以防止器容中的對(duì)象溢出越界造成布局破壞。刪除髙度數(shù)值則會(huì)自動(dòng)脹大以適應(yīng)內(nèi)含的對(duì)象高度，達(dá)到適應(yīng)高度的目地，但此做法有時(shí)會(huì)導(dǎo)致塊與塊之間的高度不一致。.3CSS文件的應(yīng)用要用CSS文件控制母版頁(yè)中所有對(duì)象的屬性,就要將樣式文件和網(wǎng)頁(yè)文件結(jié)合起來(lái),才能讓樣式文件中定義的樣式屬性作用到網(wǎng)頁(yè)中各個(gè)對(duì)象類。CSS文件的引用就是將樣式文件和網(wǎng)頁(yè)文件相結(jié)合，讓網(wǎng)頁(yè)文件中對(duì)象能夠引用到樣式文件中定義的樣式值，并相應(yīng)變化。此步操作必不可少。.3.1引用CSS文件點(diǎn)擊“源”進(jìn)入母版頁(yè)的HTML代碼頁(yè),從“解決方案資源管理器”中找到剛制作的樣式文件MyStyle.css,將其拖入到〈litle＞母版頁(yè)く/title〉至〈/head＞之,間

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

工件只能放在此處__</div>、、a點(diǎn)擊拖動(dòng)此文件」2拖動(dòng)文件至此位置,CSS

工件只能放在此處__</div><divclass="bodydiv">圖2.3-1頁(yè)面中引用CSS文件囁團(tuán)園回國(guó)s

な解決方案囁團(tuán)園回國(guó)s

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

2.4.1準(zhǔn)備圖片及flash文件.在網(wǎng)站所在的文件夾之中新建一個(gè)名為Images的文件夾，再在其中復(fù)制ー些圖片及flash文件。地址(D)［〇FハWebNewsゝimages三］目轉(zhuǎn)到2.4.1準(zhǔn)備圖片及flash文件.在網(wǎng)站所在的文件夾之中新建一個(gè)名為Images的文件夾，再在其中復(fù)制ー些圖片及flash文件。地址(D)［〇FハWebNewsゝimages三］目轉(zhuǎn)到圖片任務(wù)作為幻燈片查看聯(lián)機(jī)訂購(gòu)照片打印圖片head,swficon.gifHndex.swf文件和文件夾任務(wù)づ創(chuàng)建一個(gè)新文件夾0將這個(gè)文件夾發(fā)布到ビ共享此文件夾SOI.jpg S02.jpgS03.jpg圖2.4-1復(fù)制到網(wǎng)站屮的圖形文件.打開(kāi)“解決方案資源管理器”,點(diǎn)擊“刷新”圖標(biāo),即可看到Images的文件夾及其中剛オ加入的圖片解決方案資源首理器-F:\We..▼QX嚼田解決方案資源首理器-F:\We..▼QX嚼田西國(guó)曲》F：\VebIe>s\【士.—cssi-ンimages團(tuán)SOI.jpg國(guó)S02.jpgJjjS03,jpgQS04.jpg3S05.jpg鉱index,swf國(guó)index一bg.gif圖2.4-2刷新看到新加入的圖形文件4.2加載圖片.加入圖片控件,設(shè)置其寬高屬性。可加入多個(gè)圖片控件在bodyright層中從“工具箱”中拖入ー個(gè)Image圖像控件（自動(dòng)命名為!mage1）,再打開(kāi)其屬性窗口，設(shè)置其Height為!OOpx,Width為100%。さ注意:100%表示占容器的比例，Imagel圖像控件的容器為bodyright層（DIV）,Image1對(duì)象的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在頁(yè)面上加入圖形顯示控件2.進(jìn)入Imagel屬性窗口,找到ImageUrl屬性（圖片路徑）,點(diǎn)擊國(guó),彈出選擇圖像框ImageUrllaagelSystem.Web.UI.,▼HeightlOOpxへImageAlignNotSet.□SkinlDTablndex03.圖2.4-3圖形顯示控件加載圖片文件點(diǎn)擊images文件夾，從中選擇所要的圖像文件,點(diǎn)“確定”。選擇圖像 |T|[x||項(xiàng)目文件夾國(guó)）: 文件夾內(nèi)容0:WtbNewsx,App_DataICSSBimagesmasterJ理川J理JI文件類型任圖像文件(*.gif；*,jpg；*,jpeg；*,bmp;*.wmf;*.png)取消ImageAlignImageUrlNotSet ▲^/iBages/S03.jpg…|laageUrl要顯示的圖像的URL?

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

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

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

+標(biāo)碓

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

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

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

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

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

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

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

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

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

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