visual studio c# 網(wǎng)頁制作完全手冊.doc

新聞網(wǎng)站制作詳解第0章 系統(tǒng)特點(diǎn)實(shí)用的新聞內(nèi)容網(wǎng)站管理系統(tǒng)，可通過后臺(tái)管理系統(tǒng)創(chuàng)建各種類型的文章欄目，靈活設(shè)置頁面顯示版塊；可自定義會(huì)員類型，針對不同會(huì)員類型授權(quán)不同操作管理權(quán)限；具有豐富的廣告發(fā)布形式和多項(xiàng)輔助功能，適合創(chuàng)建新聞內(nèi)容網(wǎng)站、大型文章網(wǎng)站。1、自由創(chuàng)建新聞中心欄目可自由創(chuàng)建一個(gè)或多個(gè)新聞中心型欄目，新聞中心型欄目前臺(tái)具有新聞首頁、檢索頁、搜索頁、內(nèi)容頁，各頁面均可自由設(shè)置頁面布局，可自由輸出新聞文章列表、圖文新聞等版塊?？梢杂脕斫⒏挥袑哟蔚男侣勎恼聶谀?。創(chuàng)建多個(gè)新聞中心欄目，可以構(gòu)建大型文章網(wǎng)站。2、自由創(chuàng)建多種類型的文章內(nèi)容欄目，適合不同規(guī)模網(wǎng)站的需要1) 分類文章型欄目：訪問欄目直達(dá)檢索頁、適合建立小型文章欄目。2) 章節(jié)文章型欄目：用于大篇幅的手冊、論文、作品、法律法規(guī)等，按章節(jié)分頁顯示。3) 模版單頁型欄目：用于建立只有一個(gè)網(wǎng)頁的欄目，可自由設(shè)置頁面布局3、任意的首頁排版布局通過修改模版可任意調(diào)整首頁版塊布局，支持多個(gè)首頁版塊，每個(gè)版塊可自由編輯或選擇插入網(wǎng)站中的動(dòng)態(tài)內(nèi)容。4、靈活的內(nèi)頁排版布局每個(gè)欄目的功能網(wǎng)頁都可以自由選擇使用通欄、左欄、右欄、三欄模版頁，自由增減版塊，自由編輯版塊內(nèi)容或插入顯示模塊。5、文章動(dòng)態(tài)輸出1)可生成動(dòng)態(tài)文章插件，將新聞文章動(dòng)態(tài)顯示在網(wǎng)站任何頁面或內(nèi)容中2)可生成JS代碼插件，將新聞文章內(nèi)容插入任何外部網(wǎng)站 6、可自由控制會(huì)員操作權(quán)限可以將不同欄目分別授權(quán)，并授權(quán)給不同會(huì)員7、獨(dú)立會(huì)員系統(tǒng)，自由設(shè)定會(huì)員類型系統(tǒng)自帶功能強(qiáng)大的會(huì)員系統(tǒng)，可以自由設(shè)定會(huì)員類型，自由分配每一類、每一位會(huì)員的權(quán)限。8、強(qiáng)大的網(wǎng)站廣告管理系統(tǒng)支持彈出窗口、旗幟廣告、通欄廣告、浮動(dòng)廣告、對聯(lián)廣告、掛角廣告等廣告類型。9、功能強(qiáng)大的在線網(wǎng)頁編輯器可任意編輯圖文內(nèi)容，插入多幅圖片、FLASH、媒體，圖文混排，還具有查找替換等功能。10、網(wǎng)站輔助功能豐富，具有以下輔助功能1) 動(dòng)態(tài)緩存系統(tǒng)：針對不同欄目設(shè)置緩存，提高訪問速度2) 統(tǒng)計(jì)分析系統(tǒng)：網(wǎng)站訪問統(tǒng)計(jì)、計(jì)數(shù)功能，特有的顧客興趣分析功能3) 投票調(diào)查系統(tǒng)：可創(chuàng)建多個(gè)投票組，插入到網(wǎng)站的任何位置4) 友情鏈接系統(tǒng)：發(fā)布圖片或文字友情鏈接，插入到網(wǎng)站任何位置5) 數(shù)據(jù)備份系統(tǒng)：實(shí)時(shí)倒出網(wǎng)站數(shù)據(jù)庫進(jìn)行數(shù)據(jù)備份注意：以上描述是對一個(gè)標(biāo)準(zhǔn)新聞網(wǎng)站的全功能定義，本書建立的新聞網(wǎng)站沒有做全這些功能。讀者可以自己添加。第1章 新聞網(wǎng)站基礎(chǔ)工作該新聞網(wǎng)站可以使用Visual Studio 2008系統(tǒng)開發(fā)，也可以使用VS2005系統(tǒng)開發(fā)。但建議使用VS2008來做。1.1 建立網(wǎng)站文件夾1.1.1 啟動(dòng)VS2008圖1.1-1 啟動(dòng)開發(fā)系統(tǒng)vs20081.1.2 新建網(wǎng)站此處是從0開始建立一個(gè)網(wǎng)站。以后就可以使用打開網(wǎng)站了。圖1.1-2 選擇新建-網(wǎng)站1.1.3 定義網(wǎng)站所在的文件夾在位置直接輸入路徑F:WebNews，點(diǎn)“確定”，即建立此文件夾，再點(diǎn)“確定”即可建立網(wǎng)站。圖1.1-3 確定網(wǎng)站所在的路徑1.1.4 網(wǎng)站開發(fā)界面圖1.1-4 工作界面在網(wǎng)站的開發(fā)界面中要重點(diǎn)知道以下幾個(gè)命令圖標(biāo)：“刷新”用于將外部復(fù)制到網(wǎng)站文件夾中文件加載顯示到網(wǎng)站資源之中?！百Y源管理”打開解決方案資源管理器窗口?！皩傩浴表撁嫣幱谠O(shè)計(jì)頁打開屬性窗口?！肮ぞ呦洹贝蜷_工具箱窗口?！霸O(shè)計(jì)”進(jìn)入網(wǎng)頁的視圖設(shè)計(jì)器界面。“源”進(jìn)入網(wǎng)頁的HTML代碼頁。如圖1.1-5。圖1.1-5 常用的命令圖標(biāo)1.1.5 現(xiàn)有網(wǎng)站的的打開1對已經(jīng)建立好的現(xiàn)有網(wǎng)站，且在“最近的項(xiàng)目”中已經(jīng)列出，可直接點(diǎn)擊網(wǎng)站名打開。如圖1.1-6圖1.1-6 打開已有網(wǎng)站的界面2對在別的電腦上建立好的網(wǎng)站，要在本電腦上進(jìn)行開發(fā)。操作過程是：第一步是先將整個(gè)網(wǎng)站文件夾直接復(fù)制過來，例如原電腦中網(wǎng)站文件夾為D:WebNews，復(fù)制過來可變?yōu)镕:WebNews。注意是在根目錄之下（D:，F(xiàn):都是根目錄，這是今后對程序調(diào)試跟蹤的要求）。第二步是點(diǎn)“菜單”，點(diǎn)“打開”，在“打開網(wǎng)站”窗口中找到并選中F:WebNews文件夾，再點(diǎn)擊“打開”，即完成了從別的電腦復(fù)制網(wǎng)站的工作。如圖1.1-7。圖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ù)共用一個(gè)數(shù)據(jù)庫，這種共用完全可以應(yīng)對任何中型企業(yè)對網(wǎng)站的基本要求。安全性能也不錯(cuò)。將鼠標(biāo)移動(dòng)到圖標(biāo)之上，點(diǎn)擊，打開ASP.NET網(wǎng)站配置管理工具。如圖1.2-1圖1.2-1 啟動(dòng)ASP.NET配置1.2.2 配置網(wǎng)站安全在網(wǎng)站管理工具中點(diǎn)擊“安全”項(xiàng)圖1.2-2 網(wǎng)站管理工具主頁1.2.3 使用安全向?qū)Ш喕僮鬟^程在安全頁中點(diǎn)擊“使用安全設(shè)置向?qū)О床烤桶嗟嘏渲冒踩浴?。如圖1.2-3圖1.2-3網(wǎng)站管理工具安全頁1.2.4 定義安全驗(yàn)證點(diǎn)“下一步”，選中“通過Internet”， 再點(diǎn)“下一步”。互聯(lián)網(wǎng)上的網(wǎng)站一般是采用這種格式。單位內(nèi)部的網(wǎng)站則多采用“通過局域網(wǎng)”，其安全性更好。如圖1.2-4圖1.2-4 網(wǎng)站訪問方式選擇“通過Internet”1.2.5 啟用角色角色管理使得能夠通過創(chuàng)建的類別（稱為“角色”）管理應(yīng)用程序的授權(quán)。通過在用戶上附加角色，可以通過角色控制對 Web 應(yīng)用程序的不同部分或功能的訪問，從而取代基于用戶名的控制，或者作為對基于用戶名的控制方式的補(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)限的載體，一般說法是：先對角色授權(quán)，再將角色賦給用戶，用戶就具有了角色的權(quán)限，一個(gè)角色可以賦給多個(gè)用戶，一個(gè)用戶也可以有多個(gè)角色。勾選中“為此網(wǎng)站啟用角色”， 點(diǎn)“下一步”。如圖1.2-5圖1.2-5 啟用角色1.2.6 創(chuàng)建角色為網(wǎng)站創(chuàng)立兩個(gè)角色，分別取名為adminRo（網(wǎng)站管理員，最高權(quán)限），useRo（網(wǎng)站用戶，負(fù)責(zé)新聞操作），點(diǎn)“下一步”。注意：角色名可任取，只要求見名識(shí)意。如圖1.2-6圖1.2-6 建立兩個(gè)角色1.2.7 創(chuàng)建用戶為網(wǎng)站創(chuàng)建兩個(gè)用戶，分別取名為admin（網(wǎng)站管理員，最高權(quán)限），use（網(wǎng)站用戶，負(fù)責(zé)日常操作），點(diǎn)“下一步”。 admin用戶密碼為，use用戶密碼為。如圖1.2-7。因?yàn)榫W(wǎng)站的架構(gòu)還未建立起來，所以對網(wǎng)站的角色和用戶設(shè)置訪問權(quán)限規(guī)則為時(shí)過早，等網(wǎng)站主體開發(fā)完成以后再來設(shè)置訪問規(guī)則比較恰當(dāng)。此處點(diǎn)“完成”，然后關(guān)閉網(wǎng)站配置工具。下一次ASP.NET網(wǎng)站管理工具的使用要等到網(wǎng)站網(wǎng)頁完全做好，最后的訪問權(quán)限設(shè)置工作時(shí)。注意：用戶密碼最少長度為7位，且要含有字母，數(shù)字，符號(hào)等多種，否則系統(tǒng)不承認(rèn)。圖1.2-7 網(wǎng)站中創(chuàng)建兩個(gè)用戶后即關(guān)閉此工具1.3 網(wǎng)站數(shù)據(jù)表的建立1.3.1查看數(shù)據(jù)庫表在“解決網(wǎng)絡(luò)方案資源管理器”中先點(diǎn)擊刷新，打開App_Data文件夾，找到ASPNETDB.MDF數(shù)據(jù)庫文件，雙擊打開，即查看數(shù)據(jù)庫中的各種對象，以及新聞數(shù)據(jù)表的建立。數(shù)據(jù)庫的查看是經(jīng)常要做的工作，可以掌握對表中數(shù)據(jù)記錄的操作是否正確，掌握存儲(chǔ)過程的使用情況。如圖1.3-1。圖1.3-1 數(shù)據(jù)庫文件1.3.2 建立用戶數(shù)據(jù)表表是一切數(shù)據(jù)操作的基礎(chǔ)，沒有表中存貯數(shù)據(jù)的支持，動(dòng)態(tài)網(wǎng)頁的自動(dòng)建立完全不可能。在打開的數(shù)據(jù)庫中建立數(shù)據(jù)表的方法有多種，可以手工建表，也可使用存儲(chǔ)過程建表。本次開發(fā)使用存儲(chǔ)過程建立數(shù)據(jù)表。注意：系統(tǒng)內(nèi)部提供了很多的存儲(chǔ)過程，用于安全管理，在你沒有掌握之前，不要去改動(dòng)，否則會(huì)導(dǎo)致系統(tǒng)不能正常運(yùn)行。你目前要用的存儲(chǔ)過程只是你自己建立的存儲(chǔ)過程。本站目前只使用兩個(gè)表來進(jìn)行新聞的基本操作。一個(gè)表是“欄目表”：負(fù)責(zé)存貯欄目名，欄目排序，欄目說明等數(shù)據(jù)。欄目名用來對各新聞條分類，欄目排序用來決定欄目的網(wǎng)頁中的排布位置。另一個(gè)表是“新聞表”： 負(fù)責(zé)存貯新聞標(biāo)題，欄目，作者，新聞發(fā)布時(shí)間，新聞內(nèi)容，新聞查看次數(shù)，審核通過情況。在新聞列表中顯示新聞標(biāo)題和時(shí)間，點(diǎn)擊新聞標(biāo)題即可查看新聞完整內(nèi)容，作者，時(shí)間，點(diǎn)擊次數(shù)。1.3.3 建表SQL代碼1右擊存儲(chǔ)過程，在菜單中點(diǎn)擊添加新存儲(chǔ)過程。如圖1.3-2圖1.3-2 新建存貯過程2將存儲(chǔ)過程的名由dbo.StoredProcedure1改為Create_table，并在AS和RETURN之間輸入下列SQL代碼內(nèi)容。CREATE PROCEDURE Create_table -dbo.StoredProcedure1-存儲(chǔ)過程名字在此處自己生成AS/*Create table 欄目(lmid int identity primary key, -欄目編號(hào) 欄目 nvarchar(30), 說明 nvarchar(100), 排序 int )Create table 新聞( nwid bigint identity primary key, -新聞編號(hào) lmid int , -本新聞所屬的欄目 標(biāo)題 nvarchar(30), 作者 nvarchar(10), 時(shí)間 datetime default(getdate(), -上傳的時(shí)間 次數(shù) int, -文章點(diǎn)擊打開的次數(shù) 內(nèi)容 ntext, 審核 nvarchar(20) , constraint tblm_news foreign key (lmid) REFERENCES 欄目(lmid) ON DELETE CASCADE ON UPDATE CASCADE -建立外鍵約束-層疊刪除-層疊更新) */RETURN注意：/* */不能少，其之間的SQL代碼為建立數(shù)據(jù)表的代碼。identity為定義自增列，讓欄目號(hào)及新聞號(hào)可以自動(dòng)增加?？蓽p少工作量，并確保惟一性。使用外鍵約束可以讓欄目表和新聞表中的數(shù)據(jù)保持一致，否則會(huì)出現(xiàn)因?yàn)闄谀勘碇心骋粰谀勘粍h除，而此欄目名下的新聞在新聞表依然存在，導(dǎo)致出現(xiàn)數(shù)據(jù)不一致的錯(cuò)誤。使用層疊刪除，則刪除欄目表中的某一欄目，新聞表中此欄目名下的新聞會(huì)自動(dòng)被刪除。層疊更新則是自動(dòng)更改。1.3.4 運(yùn)行SQL代碼建表只運(yùn)行建立表的SQL代碼，先選中如下內(nèi)容，點(diǎn)右鍵，再點(diǎn)“運(yùn)行選定內(nèi)容”。如圖1.3-3圖1.3-3 在存貯過程之中運(yùn)行SQL代碼的方法1.4 查看建好的用戶表建立表的SQL代碼運(yùn)行如沒有報(bào)錯(cuò)，則在表上右擊后選“刷新”，會(huì)出現(xiàn)下右圖，發(fā)現(xiàn)兩個(gè)表“欄目”表和“新聞”表已建好。如圖1.4-1右圖中的“欄目”和“新聞”表，其它aspnet_打頭的是系統(tǒng)提供的用于安全操作的表，在你還沒有成為高手之前不要去動(dòng)它們，否則網(wǎng)站的安全性就不能得到保證。 圖1.4-1 查看剛建立的表小結(jié)1掌握新建網(wǎng)站，打開網(wǎng)站，特別是打開復(fù)制過來的網(wǎng)站。2了解ASP.NET配置工具的使用，掌握安全驗(yàn)證的含義，了解勸角色，用戶的含義。3掌握網(wǎng)站中數(shù)據(jù)庫的建立，庫內(nèi)數(shù)據(jù)表的建立，SQL代碼建立表的操作流程。掌握查看表的結(jié)構(gòu)及內(nèi)容。第2章 母版頁和CSS文件使用 ASP.NET 母版頁可以為應(yīng)用程序中的頁創(chuàng)建一致的布局。單個(gè)母版頁可以為應(yīng)用程序中的所有頁（或一組頁）定義所需的外觀和標(biāo)準(zhǔn)行為。然后可以創(chuàng)建包含要顯示的內(nèi)容的各個(gè)內(nèi)容頁。當(dāng)用戶請求內(nèi)容頁時(shí)，這些內(nèi)容頁與母版頁合并以將母版頁的布局與內(nèi)容頁的內(nèi)容組合在一起輸出。母版頁實(shí)際由兩部分組成，即母版頁本身與一個(gè)或多個(gè)內(nèi)容頁。母版頁為具有擴(kuò)展名 .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)點(diǎn)：l 使用母版頁可以集中處理頁的通用功能，以便可以只在一個(gè)位置上進(jìn)行更新。l 使用母版頁可以方便地創(chuàng)建一組控件和代碼，并將結(jié)果應(yīng)用于一組頁。例如，可以在母版頁上使用控件來創(chuàng)建一個(gè)應(yīng)用于所有頁的菜單。l 通過允許控制占位符控件的呈現(xiàn)方式，母版頁使您可以在細(xì)節(jié)上控制最終頁的布局。l 母版頁提供一個(gè)對象模型，使用該對象模型可以從各個(gè)內(nèi)容頁自定義母版頁。CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時(shí)間。層疊樣式表極大地提高了工作效率樣式表定義如何顯示 HTML 對象。樣式通常保存在外部的 .css 文件中。通過編輯一個(gè)簡單的 CSS 文檔，外部樣式表可同時(shí)改變站點(diǎn)中所有頁面的布局和外觀。由于允許同時(shí)控制多重頁面的樣式和布局，CSS 可稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開發(fā)者，能夠?yàn)槊總€(gè) HTML 對象定義樣式，并應(yīng)用于任意多的頁面中。如需進(jìn)行全局的更新，只需簡單地改變樣式，然后網(wǎng)站中的所有相應(yīng)對象都會(huì)自動(dòng)地更新。CSS布局的優(yōu)點(diǎn)，采用CSS布局比對傳統(tǒng)的TABLE網(wǎng)頁布局有以下幾個(gè)顯著優(yōu)勢：l 表現(xiàn)和內(nèi)容相分離：將設(shè)計(jì)部分剝離出來放在一個(gè)獨(dú)立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。l 提高頁面瀏覽速度：對于同一個(gè)頁面視覺效果，采用CSS布局的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長的標(biāo)簽。l 易于維護(hù)和改版：只要簡單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁面。l 使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn)。2.1 母版頁2.1.1 母版頁文件及所在文件夾母版頁文件和CSS樣式文件這兩個(gè)文件組合用于網(wǎng)站的總體樣式設(shè)計(jì)，可以使整個(gè)網(wǎng)站的風(fēng)格一致，是網(wǎng)站整體布局，美觀設(shè)計(jì)最重要的方式方法。一定要為母版頁和CSS樣式文件建立文件夾，由于系統(tǒng)在開發(fā)時(shí)和運(yùn)行時(shí)，其絕對路徑的不同，經(jīng)常會(huì)出現(xiàn)找不到文件的錯(cuò)誤，所以在系統(tǒng)開發(fā)時(shí)對網(wǎng)頁各種文件的操作一定只能使用相對路徑，這樣可以保證在開發(fā)時(shí)和運(yùn)行時(shí)文件路徑的一致性。注意：網(wǎng)站開發(fā)時(shí)常用的相對路徑格式為 / 表示根路徑； ./ 表示上一級路徑。1在“解決方案資源管理器”的F:WebNews中右擊，再點(diǎn)新建文件夾，建立MASTER文件夾，專用于存放母版頁。如圖2.1-1。圖2.1-1 建立母版頁文件夾master2母版頁文件的建立在master文件夾上右擊，點(diǎn)選“添加新項(xiàng)”，在添加新項(xiàng)框中，選擇母版頁，將名稱中的名字改為MyMaster.master，點(diǎn)添加。如圖2.1-2。母版頁可以根據(jù)風(fēng)格需求變化建立多個(gè)。圖2.1-2 建立母版頁文件MyMaster.master2.1.2 母版頁的設(shè)計(jì)布局在 HTML 設(shè)計(jì)器中創(chuàng)建 HTML 頁或 ASP.NET 網(wǎng)頁時(shí)，對象的物理布局是從上至下。其布局形式有兩種，一是流式布局，二是兩維方式布局。默認(rèn)情況下，當(dāng)在瀏覽器中呈現(xiàn)頁時(shí)，流式布局將網(wǎng)頁中的對象按照相同的從上至下順序呈現(xiàn)。兩維方式布局是對網(wǎng)頁中的對象使用水平和垂直坐標(biāo)在頁中的相應(yīng)位置定位對象。流布局：如果對象沒有任何定位樣式屬性，則它們將在頁中從上至下、從左至右或從右至左排列，具體取決于頁的 dir 屬性的設(shè)置、對象的容器對象或?yàn)g覽器的語言設(shè)置。任何 Web 瀏覽器都可顯示使用此布局的 HTML 文檔。如果調(diào)整頁的大小，對象有時(shí)將被重新定位。使用流布局，可以使用table 對象或使用div 對象來對齊多個(gè)對象。但是，對象不能重疊，只能包含嵌套，外觀上顯現(xiàn)為一層。當(dāng)調(diào)整頁的大小時(shí)，對象會(huì)有移動(dòng)。兩維定位：應(yīng)用絕對定位選項(xiàng)，可將對象放置在頁中的精確位置。也可為添加到頁中的任何新對象指定定位選項(xiàng)。定位選項(xiàng)在實(shí)現(xiàn) W3C HTML 4.0 標(biāo)準(zhǔn)的任何瀏覽器中都有效。常用的定位選項(xiàng)：absolute：由 left, right、top 和 bottom 樣式屬性的任意組合定義對象在網(wǎng)頁中的位置。位置 0,0 基于當(dāng)前對象的父級定義，父級是具有定位信息的第一個(gè)容器對象。例如，如果當(dāng)前對象在具有定位信息的 div 對象內(nèi)，則將基于 div 對象的位置來計(jì)算絕對定位信息。如果當(dāng)前對象沒有帶定位信息的容器對象，則將基于 body 對象計(jì)算定位信息。relative：由 left 和 top 樣式屬性定義對象在網(wǎng)頁中的位置。此選項(xiàng)與 absolute 的區(qū)別在于，0,0 位置是根據(jù)對象在頁面流中的位置來定義的。具有相對定位并且 top 和 left 都設(shè)置為 0 的對象將在流中正常顯示。注意：使用絕對或相對定位的對象在頁中可能會(huì)不按照頁標(biāo)記聲明中的順序顯示，這可能會(huì)引起混亂。例如，在“源”視圖中，可能將某個(gè)按鈕定義為標(biāo)記中的第一個(gè)對象，但設(shè)置它的定位后，該按鈕可能在呈現(xiàn)的頁或“設(shè)計(jì)”視圖中顯示為最后一個(gè)對象。static：對象使用流布局呈現(xiàn)；即對象不使用兩維定位。如果要對重寫設(shè)置（該設(shè)置繼承自主題或樣式表）的單個(gè)控件設(shè)置定位選項(xiàng)，則可選擇此選項(xiàng)。注意：以上文字在你成為布局高手時(shí)來看，就不難了。本網(wǎng)站采用流式布局，使用DIV加CSS完成，要記住的是DIV對象有嵌套包含關(guān)系，此時(shí)設(shè)計(jì)布局的DIV，是定位各個(gè)大的板塊，今后各板塊的DIV都是容器對象，要在其中包含很多其它對象。1網(wǎng)站基本布局圖示網(wǎng)站的整體布局主要是對母版頁進(jìn)行設(shè)計(jì)。本網(wǎng)站各大板塊布局及大致功能劃分如圖2.1-3所示。圖2.1-3 網(wǎng)站各頁面的基本布局2網(wǎng)站布局的HTML代碼上面布局圖示對應(yīng)的html代碼如下： 注意：一個(gè)完整的div格式為 ；看清DIV的嵌套包含關(guān)系。class=后面的類名要和CSS文件中類名一致。2.1.3 母版頁的HTML主要代碼進(jìn)入母版頁的設(shè)計(jì)界面，對母版頁MyMaster.master輸入下述html代碼。如圖2.1-4圖2.1-4 布局的HTML代碼構(gòu)成注意：ContentPlaceHolder控件為母版頁中的內(nèi)容定義一個(gè)相對區(qū)域，并且呈現(xiàn)在內(nèi)容頁中發(fā)現(xiàn)的相關(guān) Content 控件內(nèi)的所有文本、標(biāo)記和服務(wù)器控件。ContentPlaceHolder控件在母版頁中至少要有一個(gè)。看清標(biāo)記說明，查清和網(wǎng)站布局的HTML代碼的區(qū)別。如在Visual 2005中開發(fā)，則綠色下劃線不會(huì)出現(xiàn)。2.2 CSS樣式文件2.2.1 建立CSS樣式文件 在“解決方案資源管理器”的F:WebNews中右擊，再點(diǎn)新建文件夾，建立CSS文件夾。在CSS文件夾上右擊，點(diǎn)選“添加新項(xiàng)”。在添加新項(xiàng)框中添加名為MyStyle.css的樣式文件。樣式文件是用于定義html頁中各種對象的屬性值的文本，屬性值一般有：寬度，高度，顏色，字體，位置，動(dòng)作等多種，是頁面美工的關(guān)鍵文件。如圖2.2-1。注意：樣式文件的路徑及引用問題。圖2.2-1 建立樣式文件MyStyle.css2.2.2 CSS文件的代碼結(jié)構(gòu)在myStyle.css頁面中，先輸入 .divAll 說明： .表示類，divAll為類名，必須和html頁中各對象中的class后面指定的類名一致。中為類的樣式參數(shù)地。在中點(diǎn)擊，讓光標(biāo)進(jìn)入其中，這時(shí)左上角工具條中的“生成樣式”變?yōu)榭捎脿顟B(tài)，點(diǎn)擊“生成樣式”，打開“修改樣式”，在其中可以定義樣式。最后點(diǎn)“確定”，就會(huì)自動(dòng)生成樣式參數(shù)值。1輸入樣式類名（和母版頁中存在的類名完全一樣，且一一對應(yīng)，母版頁中Class=后面的就是類名， CSS文件中的類名前要加上一個(gè)“”），啟用“生成樣式”工具，如圖2.2-2。生成樣式工具圖2.2-2 啟動(dòng)“生成樣式”工具2使用“生成樣式”工具。對各個(gè)類名進(jìn)行反復(fù)操作，對頁面中所有各對象的樣式都用此樣式工具生成一個(gè)。圖2.2-2 使用“生成樣式”工具生成樣式屬性值3在myStyle.css樣式文件中生成的完整樣式屬性值bodytext-align: center; /*居中 */font-size: 14px; /* 字體大小 */.divAllfont-family: 宋體, Arial, Helvetica, sans-serif; /* 字體類型 */width: 1010px; .headdivwidth: 1010px; .logodivborder: 1px dotted #FF9966; /*邊框?qū)挾阮伾?*width: 1010px; /*層的寬度 */height: 120px; .menudivborder: 1px solid #FF0000;width: 1010px;height: 26px; /*層的高度 */.bodydivborder-style: none solid none solid; /* 邊框線類型 */border-width: 0px 1px 0px 1px; /* 邊框線寬度 */width: 100%;border-right-color: #FF0000;border-left-color: #FF0000; .bodyleftborder-style: none solid none none;border-width: 0px 1px 0px 0px;border-color: #FF0000;float: left; /*float表示浮動(dòng),是div定位的要點(diǎn),不使用folat,就不能實(shí)現(xiàn)左右定位布局*/width: 760px;height: 560px; .bodyrightborder-style: none none none solid;border-width: 1px 0px 0px 1px;border-color: #FF0000;float: right; /*float表示浮動(dòng),是div定位的要點(diǎn),不使用folat,就不能實(shí)現(xiàn)左右定位布局*/width: 245px;height: 560px; .bottdivborder: 1px solid #FF0000;width: 1010px;height: 50px; 注意：樣式屬性的優(yōu)先級問題。優(yōu)先級規(guī)則是越內(nèi)層的越高，body是外層，divall是內(nèi)層，如果所以body設(shè)居中，divall設(shè)靠左，則body的居中只作用到divall，divall的靠左會(huì)作用于其內(nèi)含的對象，body的居中對divall內(nèi)含的對象不起作用。如果divall內(nèi)部還包含有tws層，也設(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)整，以防止器容中的對象溢出越界造成布局破壞。刪除高度數(shù)值則會(huì)自動(dòng)脹大以適應(yīng)內(nèi)含的對象高度，達(dá)到適應(yīng)高度的目地，但此做法有時(shí)會(huì)導(dǎo)致塊與塊之間的高度不一致。2.3 CSS文件的應(yīng)用要用CSS文件控制母版頁中所有對象的屬性，就要將樣式文件和網(wǎng)頁文件結(jié)合起來，才能讓樣式文件中定義的樣式屬性作用到網(wǎng)頁中各個(gè)對象類。CSS文件的引用就是將樣式文件和網(wǎng)頁文件相結(jié)合，讓網(wǎng)頁文件中對象能夠引用到樣式文件中定義的樣式值，并相應(yīng)變化。此步操作必不可少。2.3.1 引用CSS文件點(diǎn)擊”源”進(jìn)入母版頁的HTML代碼頁，從“解決方案資源管理器”中找到剛制作的樣式文件MyStyle.css，將其拖入到母版頁 至 之間2拖動(dòng)文件至此位置，CSS文件只能放在此處1點(diǎn)擊拖動(dòng)此文件圖2.3-1 頁面中引用CSS文件2.3.2 查看CSS樣式作用結(jié)果點(diǎn)擊“設(shè)計(jì)”，進(jìn)入設(shè)計(jì)頁面后即可看到布局結(jié)果。注意：此處為了結(jié)果的美觀，對DIV對象的Height定義了值，以后在各個(gè)板塊中加入了其它對象后，要考慮刪除Height的值，或修改Height的值。如未定義Height的值，則DIV容器的Height會(huì)自動(dòng)脹大，這很常用。圖2.3-2 布局最終的效果2.4 網(wǎng)頁上加載圖片或flash圖片或flash對網(wǎng)站的美工程度有極重要的作用，離開了圖片或flash，網(wǎng)站就會(huì)單調(diào)無味，沒有生機(jī)。2.4.1 準(zhǔn)備圖片及flash文件1在網(wǎng)站所在的文件夾之中新建一個(gè)名為Images的文件夾，再在其中復(fù)制一些圖片及flash文件。圖2.4-1 復(fù)制到網(wǎng)站中的圖形文件 2打開“解決方案資源管理器”，點(diǎn)擊“刷新”圖標(biāo)，即可看到Images的文件夾及其中剛才加入的圖片文件 圖2.4-2刷新看到新加入的圖形文件2.4.2 加載圖片1加入圖片控件，設(shè)置其寬高屬性?？杉尤攵鄠€(gè)圖片控件在bodyright層中從“工具箱”中拖入一個(gè)Image圖像控件（自動(dòng)命名為Image1），再打開其屬性窗口，設(shè)置其Height為100px，Width為100%。注意：100%表示占容器的比例，Image1圖像控件的容器為bodyright層（DIV），Image1對象的Width為100%是指bodyright層有多寬，Image1就有多寬。 圖2.4-3 在頁面上加入圖形顯示控件2進(jìn)入Image1屬性窗口，找到ImageUrl屬性（圖片路徑），點(diǎn)擊，彈出選擇圖像框圖2.4-3圖形顯示控件加載圖片文件3點(diǎn)擊images文件夾，從中選擇所要的圖像文件，點(diǎn)“確定”。 圖2.4-4圖形顯示控件加載圖片文件4最簡單的圖片加載方法是，在網(wǎng)頁處于設(shè)計(jì)視圖時(shí)，將選中的圖片文件直接拖到網(wǎng)頁之中，然后用鼠標(biāo)調(diào)整大小。注意：此操作使用為工具箱內(nèi)HTML項(xiàng)中的img對象。2.4.2加載flash文件加載方法有多種，但最常用的是使用下列代碼進(jìn)行加載。1. 點(diǎn)擊中的源進(jìn)入HTML代碼頁中，在logodiv層中輸入下列代碼。 %- -% 注意：這是格式代碼，不能改動(dòng)?？辞鍁alue=./images/head.swf及embed src=./images/head.swf的值是一樣的。Width及height可以調(diào)整，但也要一致。注意：有時(shí)embed可以不用，flash文件同樣會(huì)顯示。但考慮兼容性不同瀏覽器及版本，一般保留embed。小結(jié)1母版頁是網(wǎng)站中非常重要的頁面，可以決定整個(gè)網(wǎng)站或一類頁面的一致性，必須掌握。2CSS樣式可減小網(wǎng)站布局和美化的工作量，在網(wǎng)站布局及美化中至關(guān)重要，必須學(xué)會(huì)，深入了解。3Flash，圖片，音樂等是網(wǎng)站之中不缺少的元件，如何使用應(yīng)該掌握。第3章 欄目頁操作欄目是一個(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)性。欄目頁的主要功能是對欄目進(jìn)行以下操作：增加欄目項(xiàng)，修改欄目名，刪除欄目項(xiàng)，變動(dòng)欄目項(xiàng)所在位置。3.1 建立欄目文件夾及欄目管理頁不同功能的操作放在不同的文件夾中，非常有利于網(wǎng)站的權(quán)限管理。分離的權(quán)限管理可以使得網(wǎng)站權(quán)限清晰，層次分明，同時(shí)減少權(quán)限管理的工作量。3.1.1 建立欄目及新聞文件夾在“解決方案資源管理器”的F:WebNews中右擊，再點(diǎn)新建文件夾，分別建立LMIO和NEWIO文件夾，用于存放欄目操作頁和新聞操作頁，如圖3.1-1。建立不同文件夾的目地是方便進(jìn)行“權(quán)限管理”。 圖3.1-1 建立欄目文件夾和新聞文件夾3.1.2 新建欄目管理頁為統(tǒng)一網(wǎng)站樣式布局，此頁是建立在母版頁的基礎(chǔ)之上，由母版頁決定了其基本的布局格式。這是本網(wǎng)站建立的第一個(gè)頁面，步驟非常詳細(xì)，之后的網(wǎng)頁新建過程就會(huì)略過。1在LMIO文件夾上右擊，點(diǎn)擊“添加新項(xiàng)”。如圖3.1-2。圖3.1-2 新建欄目操作頁2選中“WEB窗體”，在名稱欄中改名為“l(fā)mio.aspx”，勾選中“選擇母版頁”，點(diǎn)“添加”。如圖3.1-3圖3.1-3 新建有母版頁的欄目操作頁LmIo.aspx3選擇母版頁，點(diǎn)“確定”。如圖3.1-4圖3.1-4 選中母版頁4在lmio.aspx頁的HTML代碼頁中改Title=無標(biāo)題頁，如圖3.1-5。為Title=欄目操作，如圖3.1-6，此為網(wǎng)頁的標(biāo)題名。要養(yǎng)成修改頁面標(biāo)題的好習(xí)慣。圖3.1-5 修改前的代碼圖3.1-6 修改以后的代碼3.2 欄目頁設(shè)計(jì)制作準(zhǔn)備點(diǎn)lmio.aspx頁的“設(shè)計(jì)”進(jìn)入設(shè)計(jì)視圖，點(diǎn)圖標(biāo)打開工具箱。圖3.2-1左邊為存放所有控件對象的工具箱，右邊為設(shè)計(jì)視圖。工具箱中的控件對象要加入到網(wǎng)頁中才能發(fā)揮作用。頁面中加入工具箱對象的方法有多種，可以在工具箱中用鼠標(biāo)點(diǎn)住控件對象將其拖入到頁面，也可以直接在工具箱中鼠標(biāo)雙擊要加入的控件對象到光標(biāo)所在點(diǎn)。圖3.2-1 工具箱中控件對象加入頁面操作3.3 欄目頁中GridView對象操作3.3.1 加入GridView1對象顯示表格數(shù)據(jù)是軟件開發(fā)中的一個(gè)基本任務(wù)。ASP.NET 提供了許多工具來在網(wǎng)格中顯示表格數(shù)據(jù)，GridView 控件是其中最常用的一種，功能非常強(qiáng)大。通過使用 GridView 控件，可以顯示、編輯和刪除多種不同的數(shù)據(jù)源中的數(shù)據(jù)。要做好網(wǎng)站必須學(xué)精GridView的使用。使用 GridView 可以執(zhí)行以下操作：l 通過數(shù)據(jù)源控件自動(dòng)綁定和顯示數(shù)據(jù)。l 通過數(shù)據(jù)源控件對數(shù)據(jù)進(jìn)行選擇、排序、分頁、編輯和刪除。還可以通過執(zhí)行以下操作來自定義 GridView 控件的外觀和行為：l 指定自定義列和樣式。l 利用模板創(chuàng)建自定義用戶界面 (UI) 元素。l 通過處理事件將自己的代碼添加到 GridView 控件的功能中。進(jìn)入lmio.aspx的設(shè)計(jì)視圖，在DIV框中點(diǎn)一下，讓光標(biāo)進(jìn)入之中（目地是將以后加入的對象放入此DIV層中），然后雙擊“工具箱”中的GridView，將其加入到網(wǎng)頁中成GridView1對象（此舉為加入網(wǎng)格，用于顯示數(shù)據(jù)庫中的數(shù)據(jù)）。如圖3.3-1為加入網(wǎng)頁后GridView1對象的初始狀態(tài)。圖3.3-1 GridView對象3.3.2 GriaView1的任務(wù)GriaView是專門用于顯示及操作表格數(shù)據(jù)的對象。要讓GriaView顯示及操作數(shù)據(jù)，就必須將GriaView和數(shù)據(jù)庫中的表或抽取數(shù)據(jù)的SQL命令進(jìn)行綁定?！癎riaView任務(wù)”就是進(jìn)行數(shù)據(jù)綁定的工具。如圖3.3-2。1啟動(dòng)GriaView任務(wù)將鼠標(biāo)的箭頭移入GriaView1對象之中，并點(diǎn)擊GriaView1對象右上角的，出現(xiàn)GriaView任務(wù)。圖3.3-2 GridView1對象的任務(wù)2新建GriaView1對象的數(shù)據(jù)源點(diǎn)“選擇數(shù)據(jù)源”的下拉按鈕，點(diǎn)“新建數(shù)據(jù)源”，再點(diǎn)“數(shù)據(jù)庫”，點(diǎn)“確定”。如圖3.3-3。圖3.3-3 數(shù)據(jù)源的ID值注意：此處對數(shù)據(jù)源沒有重新取名，使用得是系統(tǒng)提供的默認(rèn)名SqlDataSource1。以后要養(yǎng)成改名的好習(xí)慣，因?yàn)槿∫粋€(gè)見名識(shí)意的名字能讓以后的維護(hù)工作少走彎路。3.3.3 配置GriaView1對象的數(shù)據(jù)源1. 點(diǎn)下拉框，選中ASPNETDB.MDF數(shù)據(jù)庫，點(diǎn)“下一步”，如圖3.3-4。圖3.3-4 選擇網(wǎng)站中的數(shù)據(jù)庫連接注意：第一次進(jìn)行數(shù)據(jù)連接時(shí)會(huì)出現(xiàn)ASPNETDB.MDF數(shù)據(jù)庫名，以后不會(huì)出現(xiàn)。如果數(shù)據(jù)庫名沒有出現(xiàn)，最簡單可靠的方法是將VS系統(tǒng)關(guān)掉，重新再打開，即可，還否則是未建數(shù)據(jù)庫。2. 改ConnectionString為Conn，如圖3.3-5。點(diǎn)“下一步”。圖3.3-5 修改連接字串名注意：以后本網(wǎng)站對數(shù)據(jù)庫的聯(lián)接就使用Conn，再也不會(huì)出現(xiàn)ASPNETDB.MDF了。3.3.4 GriaView1對象數(shù)據(jù)源中表配置1. 選中“指定來自表或視圖的列”，在名稱下拉框中選中“欄目”表，并如下勾選欄目表的列（自動(dòng)生成SQL代碼：SELECT lmid, 欄目名, 說明, 排序 FROM 欄目）。圖3.3-6指定在頁面上顯示的字段。勾選中的字段會(huì)在頁面中顯示表中的數(shù)據(jù)記錄，未勾選的則不會(huì)。圖3.3-6 欄目表數(shù)據(jù)要顯示的列勾選2. 點(diǎn)“ORDER BY（R）”，此為對從數(shù)據(jù)庫欄目表中選擇出來的數(shù)據(jù)進(jìn)行排序，在排序方式中，選中排序（排序列），即使用欄目號(hào)進(jìn)行從小到大的排序。自動(dòng)生成SQL代碼：SELECT lmid, 欄目, 說明, 排序 FROM 欄目 ORDER BY 排序，如圖3.3-7。點(diǎn)“確定”，回到上一頁。圖3.3-7 配置數(shù)據(jù)記錄的排序3.3.5 數(shù)據(jù)源中生成SQL代碼在“高級SQL生成選項(xiàng)”框，勾中“生成INSERT、UPDATE和DELETE”（此時(shí)會(huì)自動(dòng)在頁面中生成SQL的插入、更新和刪除等命令代碼），如圖3.3-8。點(diǎn)“確定”?；氐缴弦豁?，點(diǎn)“下一步”，再點(diǎn)“完成”。要對數(shù)據(jù)進(jìn)行操作就必須在頁面生成INSERT、UPDATE和DELETE代碼。以后用存貯過程代替。圖3.3-8 勾選生成INSERT、UPDATE和DELETE，生成SQL操作代碼注意：不能勾選“使用開放式并發(fā)”項(xiàng)，這是高級用法，等水平較高時(shí)再去掌握。3.4 GriaView對象的列操作3.4.1 編輯GriaView1對象中列將鼠標(biāo)的箭頭移入GriaView1對象之中，點(diǎn)擊GriaView1對象右上角的，出現(xiàn)GriaView任務(wù)，勾中“啟用編輯”，“啟用刪除”項(xiàng)，再去點(diǎn)擊“編輯列”。如圖3.4-1圖3.4-1 操作GriaView1對象的命令按鈕列3.4.2 調(diào)整GriaView1中用于顯示的列1選中CommandField列，點(diǎn)，將其移到最下面，如圖3.4-2。圖3.4-2調(diào)整GriaView1中顯示列的順序2刪除“l(fā)mid”列，如圖3.4-2。再點(diǎn)“確定”。Lmid為欄目編號(hào)，由系統(tǒng)生成，用戶管不到，所以不要顯示出來。圖3.4-2刪除GriaView1中不想顯示的列3.4.3 GriaView對象的屬性設(shè)置將鼠標(biāo)的箭頭移入GriaView1對象之中，右擊鼠標(biāo)，在菜單中點(diǎn)擊“屬性”，打開屬性窗口，在屬性窗中找到“Width”，輸入96%作為GriaView1對象的寬度。如圖3.4-3圖3.4-3 設(shè)置GriaView1對象的寬度3.5 欄目頁中FormView對象FormView 控件用于一次顯示數(shù)據(jù)源中的一個(gè)記錄。在使用 FormView 控件時(shí)，可創(chuàng)建模板來顯示和編輯綁定值。這些模板包含用于定義窗體的外觀和功能的控件、綁定表達(dá)式和格式設(shè)置。FormView 控件通常與 GridView 控件一起用于主控/詳細(xì)信息方案。FormView 控件通常用于更新和插入新記錄。該控件通常用于主/從方案，在此方案中，主控件的選定記錄決定要在 FormView 控件中顯示的記錄。FormView 控件依賴于數(shù)據(jù)源控件的功能執(zhí)行諸如更新、插入和刪除記錄的任務(wù)。即使 FormView 控件的數(shù)據(jù)源有多條記錄，該控件一次也僅顯示一條數(shù)據(jù)記錄。FormView是數(shù)據(jù)錄入操作的好幫手。3.5.1 加入FormView1對象FormView1對象在此只是用于一個(gè)數(shù)據(jù)行的新增操作，即用于一個(gè)欄目項(xiàng)的新增。在DIV框中點(diǎn)一下，讓光標(biāo)進(jìn)入之中，雙擊工具箱中的“FormView”，加入一個(gè)FormView1對象，用回車鍵下移FormView1對象，和GriaView1對象隔開一點(diǎn)。圖3.5-1。圖3.5-1 加入FormView1對象3.5.2 為FormView1對象配置數(shù)據(jù)源點(diǎn)擊FormView1對象的按鈕，在“選擇數(shù)據(jù)源”下拉框中選中“SqlDataSource1”。即可。圖3.5-2 配置FormView1對象的數(shù)據(jù)源注意：FormView1對象和GriaView1對象共用數(shù)據(jù)源SqlDataSource1，可簡化很多操作，如數(shù)據(jù)刷新。3.5.3 刪除FormView1多余的模板FormView對象中有三個(gè)常用模板：ItemTemplate模板，EditItemTemplate模板，InsertItemTemplate模板。ItemTemplate模板作用為顯示數(shù)據(jù)，EditItemTemplate模板的作用為編輯數(shù)據(jù)，InsertItemTemplate模板的作用為插入數(shù)據(jù)。本頁中只使用InsertItemtemplate模板以加入數(shù)據(jù)。其他兩個(gè)模塊中的內(nèi)容可刪除。1刪除ItemTemplate模板：點(diǎn)FormView1對象的按鈕，點(diǎn)“編輯模板”，選擇ItemTemplate模板，在ItemTemplate模板中用鼠標(biāo)拖曳選中全部對象，按Delete健刪除。如圖3.5-3，圖3.5-4此為ItemTemplate模板，將其全部刪空。再選擇EditItemTemplate模板，將其也全部刪空圖3.5-3 進(jìn)入ItemTemplate模板圖3.5-4 刪空ItemTemplate模板2刪除EditItemTemplate模板：點(diǎn)FormView1對象的按鈕，點(diǎn)“編輯模板”，選擇EditItemTemplate模板，在EditItemTemplate模板中用鼠標(biāo)拖曳選中全部對象，按Delete健刪除。如圖3.5-5圖3.5-5 刪空EditItemTemplate模板3.6 FormView1中的模板布局網(wǎng)頁中大的布局目前最常用的是使用DIV+CSS完成，小的局部布局使用表格（Table），方便快捷，極大減少代碼量。此處是為FormView1中一個(gè)模板的布局，屬局部小塊，所以使用Table來進(jìn)行布局。3.6.1 對InsertItemTemplate模板用Table美化布局1. 選擇InsertItemTemplate模板，對其用表格（Table）進(jìn)行美觀化處理。圖3.6-1還未美化。圖3.6-1 進(jìn)入InsertItemTemplate模板2. 點(diǎn)擊將光標(biāo)移到“取消”按鈕后，回車鍵使其下移，點(diǎn)“菜單”中表（A），點(diǎn)“插入表”。圖3.6-2讓出加入表（Table）的空間。圖3.6-2 回車下移讓出空間3. 在“插入表格”中輸入行數(shù)為2，列數(shù)為3，具體值如下圖所示。點(diǎn)“確定”。圖3.6-3表格工具中行數(shù)，列數(shù)，指定寬度，邊框等都是要關(guān)注的數(shù)值。圖3.6-4為頁面中插入的表。圖3.6-3 插入2行3列Table網(wǎng)格圖3.6-4 T