動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)徐延章編著第15章新聞管理模塊設(shè)計(jì)

——GridView控件與ADO.NET高級應(yīng)用第15章新聞管理模塊設(shè)計(jì)

——GridView控件與ADO.NET高級應(yīng)用新聞管理模塊是一個(gè)綜合新聞和內(nèi)容管理的模塊，是基于B/S模式的網(wǎng)絡(luò)信息管理系統(tǒng)，新聞管理提供新聞的發(fā)布，審核，刪除，瀏覽等功能，是大多數(shù)網(wǎng)站后臺(tái)的主要功能模塊，通過設(shè)計(jì)新聞管理模塊，讀者可以延伸設(shè)計(jì)例如用戶管理、信息管理等模塊。將美工與技術(shù)一起講在本章也有明顯的體現(xiàn)，本章美工設(shè)計(jì)采用流行的DIV+CSS模式設(shè)計(jì)，緊跟時(shí)代潮流，體現(xiàn)技術(shù)的要求。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo第15章新聞管理模塊設(shè)計(jì)

——GridView控件與ADO.NET高級應(yīng)用動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社15.1新聞管理界面的設(shè)計(jì)115.2新聞管理數(shù)據(jù)庫的設(shè)計(jì)215.3新聞管理功能的實(shí)現(xiàn)——GridView控件的使用315.4新聞發(fā)布功能的實(shí)現(xiàn)415.5新聞瀏覽功能的實(shí)現(xiàn)515.6新聞管理模塊界面的美化2615.7新聞管理模塊高級設(shè)計(jì)——ADO.NET數(shù)據(jù)操縱7CompanyLogo15.1新聞管理界面的設(shè)計(jì)新聞管理模塊主要包括新聞管理、新聞發(fā)布、新聞瀏覽等頁面，我們在一致性原則的指導(dǎo)下，進(jìn)行新聞管理界面的美工設(shè)計(jì)。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.1.1美工的界面設(shè)計(jì)1.新聞管理界面動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.1.1美工的界面設(shè)計(jì)1.新聞管理界面動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.1.1美工的界面設(shè)計(jì)2.新聞發(fā)布界面動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.1.1美工的界面設(shè)計(jì)2.新聞發(fā)布界面動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.1.2技術(shù)如何實(shí)現(xiàn)新聞管理功能主要利用GridView控件結(jié)合數(shù)據(jù)源對象實(shí)現(xiàn)，利用數(shù)據(jù)源控件的查詢、修改和刪除語句，通過GridView控件按鈕實(shí)現(xiàn)。GridView控件通過表格形式顯示數(shù)據(jù)，通過設(shè)置GridView控件的數(shù)據(jù)源，GridView控件每列顯示一個(gè)字段，每行顯示一條記錄，同時(shí)支持?jǐn)?shù)據(jù)的編輯、排序和分頁的功能。需要說明的是，GridView控件不支持插入記錄的功能。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.2新聞管理數(shù)據(jù)庫的設(shè)計(jì)新聞管理模塊是典型的數(shù)據(jù)庫操作的應(yīng)用，因此在設(shè)計(jì)時(shí)首先要對新聞數(shù)據(jù)庫進(jìn)行設(shè)計(jì)，建立數(shù)據(jù)庫并設(shè)計(jì)數(shù)據(jù)表，提供程序?qū)?shù)據(jù)的訪問支持。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.2.1數(shù)據(jù)庫的建立打開SQLServer2005，從左側(cè)對象資源管理其中，選擇數(shù)據(jù)庫選項(xiàng)，單擊鼠標(biāo)右鍵，選擇新建數(shù)據(jù)庫，設(shè)置數(shù)據(jù)庫名稱為“NewsDB”。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.2.2數(shù)據(jù)表的建立打開新聞數(shù)據(jù)庫“NewsDB”，選擇“表”選項(xiàng)，單擊鼠標(biāo)右鍵，選擇“新建表”，輸入字段“NewsID”，在列屬性中設(shè)置數(shù)據(jù)類型為int型，設(shè)置標(biāo)識(shí)規(guī)范為是，從而使字段能夠自動(dòng)編號(hào)。單擊工具欄中的設(shè)置為主鍵按鈕，將該字段作為主鍵。然后按照表輸入其它字段，單擊保存按鈕，將表命名為“News”。。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.2.3數(shù)據(jù)表數(shù)據(jù)的添加在對象資源管理器中，單擊News表，單擊鼠標(biāo)右鍵，選擇打開表，手動(dòng)輸入數(shù)據(jù)，注意輸入完一條記錄，按<Enter>鍵確認(rèn)。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3新聞管理功能的實(shí)現(xiàn)——GridView控件的使用新聞管理功能中重要的就是表格形式的新聞條目的顯示，提供新聞修改、刪除、瀏覽的超級鏈接。GridView控件是專門為表格數(shù)據(jù)設(shè)計(jì)的控件，提供對表格形式數(shù)據(jù)操作的多項(xiàng)功能。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立打開VisualS2008，選擇菜單“文件|新建|網(wǎng)站”，在“新建網(wǎng)站”對話框中，設(shè)置網(wǎng)站的位置為“D:\news”，程序自動(dòng)新建Default.aspx文件，選擇“設(shè)計(jì)”視圖。從左側(cè)工具欄中選擇“數(shù)據(jù)”組中的“GridView”控件，拖動(dòng)到設(shè)計(jì)視圖中。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示從控件右側(cè)的智能標(biāo)記選項(xiàng)中選擇“自動(dòng)套用格式”，可以設(shè)置控件的顯示樣式，可以單擊“移除格式設(shè)置”，取消格式的應(yīng)用，這里選擇一種格式后單擊“確定”按鈕。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立從控件右側(cè)智能標(biāo)記中“選擇數(shù)據(jù)源”選項(xiàng)中選擇“新建數(shù)據(jù)源”，出現(xiàn)數(shù)據(jù)源設(shè)置對話框，在這里可以設(shè)置數(shù)據(jù)源的類型，這里選擇“數(shù)據(jù)庫”，系統(tǒng)會(huì)自動(dòng)為數(shù)據(jù)源對象命名“SqlDataSource1”，單擊確定按鈕。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立在選擇數(shù)據(jù)連接對話框中單擊“新建連接”按鈕，設(shè)置服務(wù)器為（local）或者為.（半角字符——點(diǎn)），用戶名為sa，密碼為111111，選擇數(shù)據(jù)庫為“NewsDB”。讀者可以根據(jù)自己設(shè)置的密碼輸入密碼。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立此時(shí)已經(jīng)設(shè)置好連接的數(shù)據(jù)字符串，單擊下一步按鈕，在出現(xiàn)的對話框中提示我們是否要把剛才的連接字符串保存到配置文件中，選擇“是”。這樣如果再建立連接，就可以直接從連接中選擇，不必重新設(shè)置添加連接。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立選擇下一步，進(jìn)入配置SQL語句對話框，選擇表為News，字段為NewsID、Title、NewsDate、Author。選擇右側(cè)的“ORDERBY”按鈕，添加排序，設(shè)置排序字段為“NewsDate”，降序排列，。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立單擊確定后選擇下一步，此時(shí)可以單擊“測試查詢”按鈕，顯示選擇出的數(shù)據(jù)如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立單擊完成回到設(shè)計(jì)界面，出現(xiàn)相應(yīng)的數(shù)據(jù)顯示效果，如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示1.新聞界面的建立單擊調(diào)試按鈕，瀏覽器中效果如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示2.列的編輯選擇GridView控件，在右側(cè)的智能標(biāo)記選項(xiàng)中選擇“編輯列”。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示2.列的編輯從左側(cè)下方選定的字段中單擊“NewsID”字段，在右側(cè)修改屬性HeaderText（標(biāo)題文本）為“編號(hào)”，如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示2.列的編輯同樣修改Title的HeaderText屬性為“標(biāo)題”，Author的HeaderText屬性為“發(fā)布人”，NewsDate的HeaderText屬性為“日期”，單擊確定。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示3.超級鏈接列的增加選擇GridView智能標(biāo)記中的添加新列選項(xiàng)，設(shè)置添加字段對話框中，選擇字段類型為HyperLinkField（超級鏈接字段），超級鏈接文本為指定文本“查看詳細(xì)”，超鏈接URL選項(xiàng)中從數(shù)據(jù)字段獲取URL選擇“NewsID”，URL格式字符串為“newsdetail.aspx?newsid={0}”，這里的0代表參數(shù)NewsID，這樣可以將每條記錄的主鍵連接到每個(gè)超級鏈接中，形成變化的超級鏈接，從而傳遞查詢的參數(shù)，以備newsdetail.aspx這個(gè)新聞瀏覽的頁面顯示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示3.超級鏈接列的增加動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示3.超級鏈接列的增加動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示3.超級鏈接列的增加設(shè)計(jì)指導(dǎo)：這里我們也可以在插入超級鏈接字段對話框中設(shè)置頁眉文本為標(biāo)題，超鏈接文本為從數(shù)據(jù)字段獲取文本，然后選擇Title。然后刪除原始的標(biāo)題字段，將新添加的超級鏈接字段左移。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示4.命令按鈕列的增加選擇GridView智能標(biāo)記中的添加新列選項(xiàng)，設(shè)置添加字段對話框中，選擇字段類型為CommandField（命令按鈕字段），頁面文本為“編輯”，按鈕類型為“Link”（超級鏈接形式），命令按鈕選擇“刪除、編輯/更新、顯示取消按鈕”。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.1新聞的顯示5.分頁的啟用選擇GridView控件，選擇智能標(biāo)記中的啟用分頁，如果記錄不足10條，將不顯示下面的分頁鏈接?？梢酝ㄟ^修改GridView的PageSize屬性修改每頁的記錄條數(shù)。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.2新聞的編輯通過數(shù)據(jù)源控件的修改功能實(shí)現(xiàn)新聞的編輯，選擇數(shù)據(jù)源控件，選擇屬性中的UpdateQuery，單擊右側(cè)的按鈕。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.2新聞的編輯在命令和參數(shù)編輯器中輸入修改命令：updateNewssetTitle=@Title,Author=@Author,NewsDate=@NewsDatewhereNewsID=@NewsID單擊刷新參數(shù)，單擊參數(shù)NewsID，設(shè)置其參數(shù)源為控件“Control”，ControlID為“GridView1”，依次設(shè)置其它參數(shù)為同樣的屬性。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.2新聞的編輯動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.2新聞的編輯設(shè)計(jì)指導(dǎo)：如果希望某個(gè)字段不需修改，除了在SQL的更新命令中去除更新語句外，還需要把GridView控件的該字段的Readonly屬性設(shè)置為True，即設(shè)置為只讀，這樣單擊編輯時(shí)，就不會(huì)出現(xiàn)文本框，而是直接顯示信息了。例如要求不能修改發(fā)布人，即發(fā)布人設(shè)置為只讀，需要選擇GridView控件，在右上角的智能標(biāo)記中選擇“編輯列”命令，在字段編輯對話框中選擇“發(fā)布人”字段，修改右側(cè)屬性ReadOnly為True，如圖15-34所示。然后選擇數(shù)據(jù)源控件的UpdateQuery屬性，取消Author項(xiàng)的修改，修改SQL語句為：updateNewssetTitle=@Title,NewsDate=@NewsDatewhereNewsID=@NewsID動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.3.3新聞的刪除通過數(shù)據(jù)源控件的刪除功能實(shí)現(xiàn)新聞的刪除，選擇數(shù)據(jù)源控件，選擇屬性中的DeleteQuery，單擊右側(cè)的按鈕，在命令和參數(shù)編輯器中輸入修改命令：deletefromNewswhereNewsID=@NewsID單擊刷新參數(shù)，單擊參數(shù)NewsID，設(shè)置其參數(shù)源為控件“Control”，ControlID為“GridView1”。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4新聞發(fā)布功能的實(shí)現(xiàn)新聞發(fā)布實(shí)現(xiàn)新聞信息以及附件和圖片等信息的提交，使新聞?dòng)涗浶枰迦霐?shù)據(jù)庫中，新聞圖片和附件需要上傳到服務(wù)器，并將圖片和附件的名稱記錄在該新聞?dòng)涗浿小?dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.1新聞發(fā)布界面制作在右側(cè)解決方案管理器中單擊網(wǎng)站分支（D:\news），單擊鼠標(biāo)右鍵，選擇添加新項(xiàng)，或者選擇菜單“文件|新建|文件”，選擇類型為Web窗體，名稱為“NewsAdd.aspx”。打開設(shè)計(jì)視圖，輸入提示文字，拖動(dòng)工具欄標(biāo)準(zhǔn)控件組中相應(yīng)的控件（TextBox，F(xiàn)ileUpload，Button，Label）到設(shè)計(jì)視圖，調(diào)整標(biāo)題框的寬度，設(shè)置內(nèi)容文本框的TextMode屬性為MultiLine，并調(diào)整其寬度與高度，修改Label控件的Text屬性為空，兩個(gè)上傳控件后面的Label用于提示上傳錯(cuò)誤信息，按鈕后面的Label控件用于顯示發(fā)布提示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.1新聞發(fā)布界面制作動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.1新聞發(fā)布界面制作這里我們可以對用戶輸入的信息進(jìn)行非空驗(yàn)證，這里設(shè)計(jì)標(biāo)題的非空驗(yàn)證。從左側(cè)工具欄中選擇驗(yàn)證組中的“RequiredFieldValidator”，拖動(dòng)到標(biāo)題文本框后面，修改其屬性ErrorMessage為“請輸入標(biāo)題”，ControlToValidate屬性為“TextBox1”（標(biāo)題文本框）。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)1.準(zhǔn)備工作完成了新聞發(fā)布界面的設(shè)計(jì)，我們進(jìn)行代碼的編寫，首先我們新建兩個(gè)文件夾upimage和upfile，用于存放用戶上傳的圖片與附件，在右側(cè)解決方案管理器中單擊網(wǎng)站分支（D:\news），單擊鼠標(biāo)右鍵，選擇添加新項(xiàng)，選擇文件夾，修改文件夾的名字為“upimage”，同樣添加upfile文件夾。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)2.插入數(shù)據(jù)基本功能的實(shí)現(xiàn)設(shè)計(jì)思路：先設(shè)計(jì)完成基本的功能——數(shù)據(jù)的插入，然后進(jìn)行逐步完善，驗(yàn)證用戶信息的合法性，考慮文件上傳的限制問題，最后實(shí)現(xiàn)完善的程序。程序設(shè)計(jì)從簡單到復(fù)雜，逐步深入與完善，以此來體會(huì)程序開發(fā)的每一步。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)在發(fā)布按鈕（Button1）的單擊事件Button1_Click中輸入插入數(shù)據(jù)的代碼如下：//下面代碼是建立數(shù)據(jù)庫連接Stringconstr="datasource=(local);database=NewsDB;userid=sa;password=111111;";SqlConnectionconn=newSqlConnection(constr);conn.Open();//下面代碼是定義命令SqlCommandcmd=conn.CreateCommand();cmd.CommandText="insertintoNews(Title,Author,NewsDate,NewsBody,NewsPhoto,NewsFile)values(@Title,@Author,@NewsDate,@NewsBody,@NewsPhoto,@NewsFile)";//下面代碼給命令參數(shù)賦值cmd.Parameters.Add("@Title",SqlDbType.NVarChar).Value=TextBox1.Text;動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)cmd.Parameters.Add("@NewsBody",SqlDbType.Text).Value=TextBox2.Text;cmd.Parameters.Add("@Author",SqlDbType.NVarChar).Value=TextBox3.Text;cmd.Parameters.Add("@NewsDate",SqlDbType.DateTime).Value=DateTime.Now;cmd.Parameters.Add("@NewsPhoto",SqlDbType.NVarChar).Value="";//這里先設(shè)置為沒有圖片cmd.Parameters.Add("@NewsFile",SqlDbType.NVarChar).Value="";//這里先設(shè)置為沒有附件//執(zhí)行命令cmd.ExecuteNonQuery();conn.Close();//顯示信息Label3.Text="新聞發(fā)布完畢";動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)//清空文本框內(nèi)容TextBox1.Text="";TextBox2.Text="";

TextBox3.Text="";動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)測試程序，輸入數(shù)據(jù)，注意先不選擇附件和圖片。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)3.文件上傳功能的實(shí)現(xiàn)在設(shè)計(jì)文件上傳功能時(shí)，有這樣一個(gè)要求，新聞可以沒有附件或圖片，如有圖片或者附件，要求新聞圖片是網(wǎng)頁支持的圖片格式（JPG、GIF、PNG、BMP）且大小不能超過10M，新聞的附件大小不能超過100M。為此，兩個(gè)文件上傳空間后面的標(biāo)簽用于提示錯(cuò)誤信息，如新聞圖片格式不正確，新聞圖片太大，附件太大等。同時(shí)我們要注意，只有當(dāng)圖片和附件都滿足要求時(shí)（新聞可以沒有圖片或附件，但如果有就要滿足要求），才完成數(shù)據(jù)的插入操作。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)設(shè)計(jì)思路：初始化變量與信號(hào)量

Stringupfilename="";//定義上傳附件的附件名Stringupimagename="";//定義上傳圖片的文件名

Stringupfilename2="";//定義上傳附件文件的擴(kuò)展名Stringupimagename2="";//定義上傳圖片文件的擴(kuò)展名Stringupfilepath=Server.MapPath("upfile");//定義上傳附件的路徑Stringupimagepath=Server.MapPath("upimage");//定義上傳圖片的路徑動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)//通過時(shí)間拼出文件名為當(dāng)前時(shí)間的年月日時(shí)分秒毫秒

DateTimectime=DateTime.Now;//獲取當(dāng)前時(shí)間

Stringtimestring="";//定義時(shí)間字符串

timestring=ctime.Year.ToString()+ctime.Month.ToString()+ctime.Day.ToString();//年月日拼接

timestring=timestring+ctime.Hour.ToString()+ctime.Minute.ToString()+ctime.Second.ToString()+ctime.Millisecond.ToString();//小時(shí)分鐘秒毫秒拼接//定義信號(hào)量記錄上傳圖片和附件狀態(tài)intupfilestyle=0;//定義上傳附件的狀態(tài)信號(hào)量：0為默認(rèn)狀態(tài)，表示沒有附件，1表示有附件且符合要求，2表示有附件但不符合要求intupimagestyle=0;//定義上傳圖片的狀態(tài)信號(hào)量：0為默認(rèn)狀態(tài)，表示沒有圖片，1表示有圖片且符合要求，2表示有圖片但不符合要求動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)檢查上傳附件是否存在（檢查附件文件大小，記錄信號(hào)量）if(FileUpload1.PostedFile.ContentLength>104857600)//如果文件大小大于100M{Label1.Text="上傳附件文件太大";upfilestyle=2;//記錄上傳附件錯(cuò)誤}else{upfilestyle=1;//記錄上傳附件成功}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì) 檢查上傳圖片是否存在（檢查圖片文件大小，記錄信號(hào)量；檢查圖片文件格式，記錄信號(hào)量）if(FileUpload2.PostedFile.ContentLength>10485760)//10M{Label2.Text="圖片文件太大";upimagestyle=2;//記錄錯(cuò)誤狀態(tài)}//如圖大小滿足要求，判斷文件格式elseif(upimagename2.ToLower()==".jpg"||upimagename2.ToLower()==".gif"||upimagename2.ToLower()==".png"||upimagename2.ToLower()==".bmp"){upimagestyle=1;//記錄狀態(tài)為成功}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)//如果執(zhí)行到這里，只能是大小滿足要求，但文件格式不正確else{Label2.Text="文件格式不正確";upimagestyle=2;//記錄錯(cuò)誤狀態(tài)}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)根據(jù)附件信號(hào)量upfilestyle和圖片信號(hào)量upimagestyle的值（0表示沒有文件，1表示有文件且格式與大小正確，2表示文件格式不正確或大小不正確），判斷是否有附件與圖片、文件格式與大小是否符合要求。只有附件信號(hào)量upfilestyle和圖片信號(hào)量upimagestyle的值同時(shí)在正確范圍時(shí)（小于2，即0或1），才進(jìn)行文件的上傳操作，同時(shí)完成在數(shù)據(jù)庫中插入新聞?dòng)涗浀牟僮?。也就是說，圖片和附件可以沒有，但有就要符合要求，即圖片滿足格式正確、大小在規(guī)定范圍，附件大小在規(guī)定范圍，才能進(jìn)行上傳操作。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)//根據(jù)信號(hào)量取值決定是否執(zhí)行文件上傳與數(shù)據(jù)插入操作if(upfilestyle<2&&upimagestyle<2)//只有上傳附件信號(hào)量和圖片信號(hào)量都滿足要求時(shí){if(upfilestyle==1)//如果上傳附件狀態(tài)為1，即有文件且合法，上傳文件，記錄文件名{……}else//如果為0，則沒有附件文件，記錄文件名為空{(diào)……}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)if(upimagestyle==1)//如果上傳圖片狀態(tài)為1，即有文件且合法，上傳文件，記錄文件名{……}else//如果為0，則沒有圖片文件，記錄文件名為空{(diào)……}//執(zhí)行插入數(shù)據(jù)代碼，別忘了修改命令參數(shù)中的圖片和附件的取值……}完整代碼參考書中或光盤中的內(nèi)容動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)調(diào)試程序，選擇一個(gè)大文件，測試出現(xiàn)無法顯示該頁面的提示頁面，原因在于配置文件默認(rèn)是上傳4M以下的文件，因此需要在配置文件中web.config文件來改變應(yīng)用程序上傳限制。在<system.web></system.web>分支中加入：<httpRuntimemaxRequestLength="1024000"executionTimeout="600"/>這里maxRequestLength設(shè)置上傳文件大小，單位是kb，executionTimeout允許執(zhí)行請求的最大秒數(shù),即超時(shí)時(shí)間，單位：秒，此功能必須在Compilation元素中Debug屬性為false時(shí)才生效。再次選擇文件，上傳之后刷新解決方案資源管理器，發(fā)現(xiàn)附件與圖片上傳成功，。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)4.信息處理與頁面完善我們發(fā)現(xiàn)新聞發(fā)布成功之后，仍然存在文件格式不正確的提示，發(fā)布的數(shù)據(jù)在數(shù)據(jù)庫中新聞主體內(nèi)容的信息完全連接到了一起，沒有換行的標(biāo)志，這樣顯示新聞時(shí)必然只有一個(gè)段落，與提交的信息不同，因此需要修改。再有就是信息的驗(yàn)證，對于客戶端的瀏覽器由于安全性而對JavaScript有不同的設(shè)置，因此應(yīng)在提交信息后通過進(jìn)行驗(yàn)證。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)解決信息換行的問題，需要新建一個(gè)公用函數(shù)texttohtml：publicstringtexttohtml(stringchr){if(chr==null)return"";//如果字符串為空，返回空值

chr=Server.HtmlEncode(chr);//對字符串進(jìn)行HTML編碼

chr=chr.Replace("<","<");//替換字符串中的小于號(hào)<為HTML的小于號(hào)<chr=chr.Replace(">",">");//替換字符串中的小于號(hào)>為HTML的大于號(hào)>chr=chr.Replace("","  ");//替換字符串中的空格為HTML的空格

chr=chr.Replace("\n","<br/>");//替換字符串中的換行為HTML的換行<br/>return(chr);//返回加工后的字符串

}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)將該函數(shù)放在程序中與其它事件并列，這里放在Page_Load之后。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)然后將Button1_Click事件中插入數(shù)據(jù)的參數(shù)cmd.Parameters.Add("@Title",SqlDbType.NVarChar).Value=TextBox1.Text;cmd.Parameters.Add("@NewsBody",SqlDbType.Text).Value=TextBox2.Text;cmd.Parameters.Add("@Author",SqlDbType.NVarChar).Value=TextBox3.Text;修改為cmd.Parameters.Add("@Title",SqlDbType.NVarChar).Value=texttohtml(TextBox1.Text);cmd.Parameters.Add("@NewsBody",SqlDbType.Text).Value=texttohtml(TextBox2.Text);cmd.Parameters.Add("@Author",SqlDbType.NVarChar).Value=texttohtml(TextBox3.Text);動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.4.2新聞發(fā)布代碼設(shè)計(jì)對于頁面合法性與提示信息，修改Button1_Click程序?yàn)椋篿f(Page.IsValid)//進(jìn)行頁面合法性驗(yàn)證{//清除提示內(nèi)容

Label1.Text="";Label2.Text="";Label3.Text="";原程序內(nèi)容……}else{Label3.Text="請?zhí)顚懶侣剺?biāo)題";}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5新聞瀏覽功能的實(shí)現(xiàn)新聞瀏覽是根據(jù)用戶選擇的新聞，打開新聞詳細(xì)內(nèi)容的界面，顯示新聞的具體內(nèi)容，同時(shí)將新聞圖片和附件以適當(dāng)?shù)男问秸故境鰜?。?dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.1新聞瀏覽界面制作打開VisualStudio2008，添加新項(xiàng)，選擇Web窗體，文件名為newsdetail.aspx，放置Label用于顯示新聞標(biāo)題（lbltitle）、發(fā)布人(lblauthor)、發(fā)布日期(lbldate)、新聞內(nèi)容(lblbody)，這里對每個(gè)Label控件進(jìn)行了改名，并設(shè)置其Text屬性為空，放置Image控件(Image1)用于顯示新聞圖片，最后放置一個(gè)Hyperlink控件(Hyperlink1)，修改其Text屬性為“下載附件”用于下載新聞附件。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.2新聞瀏覽代碼設(shè)計(jì)在Page_Load事件中進(jìn)行代碼設(shè)計(jì)，這里為了防止用戶盜鏈，即沒有通過新聞管理頁面而直接輸入網(wǎng)址產(chǎn)生錯(cuò)誤，通過判斷請求參數(shù)來進(jìn)行處理。protectedvoidPage_Load(objectsender,EventArgse){if(Request.QueryString["newsid"]!=null)//如果請求頁面

//存在請求參數(shù)，則進(jìn)行數(shù)據(jù)讀取{

}else{Response.Redirect("error.aspx");//頁面定位到出錯(cuò)界//面?，讀者可以自行設(shè)計(jì)錯(cuò)誤頁面。}}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.2新聞瀏覽代碼設(shè)計(jì)然后對if分支進(jìn)行程序完善，進(jìn)行數(shù)據(jù)庫連接，定義sql命令，讀取數(shù)據(jù)，進(jìn)行判斷。詳細(xì)代碼參考書中內(nèi)容。protectedvoidPage_Load(objectsender,EventArgse){if(Request.QueryString["newsid"]!=null)//如果請求頁面存在請求//參數(shù)，則進(jìn)行數(shù)據(jù)讀取{Stringconstr="datasource=(local);database=NewsDB;userid=sa;password=;";SqlConnectionconn=newSqlConnection(constr);//定義連接對//象conn.Open();//打開連接//下面代碼是定義命令SqlCommandcmd=conn.CreateCommand();cmd.CommandText="select*fromNewswhereNewsID=@NewsID";

動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.2新聞瀏覽代碼設(shè)計(jì)//下面代碼給命令參數(shù)賦值cmd.Parameters.Add("@NewsID",SqlDbType.NVarChar).Value=Request.QueryString["newsid"].ToString();//執(zhí)行命令SqlDataReaderrd=cmd.ExecuteReader();//定義閱讀器對象接收//命令執(zhí)行的結(jié)果（數(shù)據(jù)集合）if(rd.Read()){lbltitle.Text=rd["Title"].ToString();//新聞標(biāo)題lblauthor.Text=rd["Author"].ToString();//發(fā)布人lbldate.Text=rd["NewsDate"].ToString();//發(fā)布日期lblbody.Text=rd["NewsBody"].ToString();//新聞內(nèi)容if(rd["NewsPhoto"].ToString()!="")//新聞圖片存在{Image1.Visible=true;//顯示圖像控件Image1.ImageUrl="~/upimage/"+rd["NewsPhoto"].ToString();//指定路徑}

動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.2新聞瀏覽代碼設(shè)計(jì)else{Image1.Visible=false;//隱藏控件

}if(rd["NewsFile"].ToString()!="")//新聞附件存在

{HyperLink1.Visible=true;//顯示超級鏈接控件

HyperLink1.NavigateUrl="~/upfile/"+rd["NewsFile"].ToString();//鏈接路徑

}else{HyperLink1.Visible=false;//隱藏控件

}rd.Close();//關(guān)閉閱讀器

conn.Close();//關(guān)閉連接

}

動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.2新聞瀏覽代碼設(shè)計(jì)else{rd.Close();conn.Close();Response.Redirect("error.aspx");//頁面定位到出錯(cuò)頁面。

}}else{Response.Redirect("error.aspx");//頁面定位到出錯(cuò)頁面，讀者可//以自行設(shè)計(jì)錯(cuò)誤頁面。

}}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.5.2新聞瀏覽代碼設(shè)計(jì)直接調(diào)試程序，顯示error頁面無法找到，因?yàn)槲覀儧]有建立這個(gè)頁面，打開新聞管理頁面，再調(diào)試程序，選擇一條新聞，單擊詳細(xì)內(nèi)容。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6新聞管理模塊界面的美化新聞管理模塊的界面美化采用流行的DIV+CSS的布局方式進(jìn)行美化，需要結(jié)合VisualStudio2008和DreamweaverCS5進(jìn)行美化設(shè)計(jì)，使用DreamweaverCS5設(shè)計(jì)布局頁面，使用VisualStudio2008測試美化效果。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化1.統(tǒng)一界面的設(shè)計(jì)通過前面的設(shè)計(jì)，我們得到了網(wǎng)頁新聞顯示界面，而這只是從技術(shù)的角度實(shí)現(xiàn)，真正要到成品還需要進(jìn)一步的美化。我們采用統(tǒng)一的布局來實(shí)現(xiàn)界面效果。實(shí)際的工作中，存在這樣的問題，美工已經(jīng)把新聞管理的界面設(shè)計(jì)完畢，并設(shè)計(jì)成html格式的文件，往往這是很常見的情況，我們可以直接采用這個(gè)文件進(jìn)行修改，形成模板，然后將其它的頁面套用上去，這樣的操作有助于我們實(shí)際操作能力的提高。這里設(shè)置了網(wǎng)頁的統(tǒng)一框架，而將網(wǎng)頁內(nèi)容放到右側(cè)中間的空白區(qū)域中，體現(xiàn)網(wǎng)頁設(shè)計(jì)一致性原理。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化1.統(tǒng)一界面的設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化1.統(tǒng)一界面的設(shè)計(jì)實(shí)現(xiàn)統(tǒng)一框架有兩種方法： 使用框架結(jié)構(gòu)<IFRAME></IFRAME>嵌入網(wǎng)頁。 使用母版。通常情況下，使用框架結(jié)構(gòu)比較靈活，但要注意內(nèi)容溢出時(shí)的滾動(dòng)條問題，為了不出現(xiàn)滾動(dòng)條，需要對內(nèi)容進(jìn)行修剪或裁切。這里介紹使用框架的方法，母版的方法將在第18章進(jìn)行介紹。首先在DreamweaverCS5中設(shè)計(jì)網(wǎng)頁newsadmin.html文件，這個(gè)頁面可以由美工設(shè)計(jì)完成，也可以由美工設(shè)計(jì)完效果圖后由技術(shù)人員利用Dreamweaver軟件實(shí)現(xiàn)，注意需要將所用到的圖片連同文件夾一起復(fù)制到網(wǎng)站文件夾中。設(shè)計(jì)指導(dǎo)：實(shí)際應(yīng)用中可以將newsadmin.html設(shè)計(jì)成動(dòng)態(tài)網(wǎng)頁newsadmin.aspx，以便于安全性的設(shè)置。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化1.統(tǒng)一界面的設(shè)計(jì)下面進(jìn)行網(wǎng)站美工的設(shè)計(jì)制作，首先將配套光盤中“源文件\15\”中的“News美化前”文件夾復(fù)制到D盤，即網(wǎng)站文件夾路徑為“D:\News美化前\”，然后將配套光盤中“源文件\15\素材\”中的所有文件和文件夾復(fù)制到“D:\News美化前\”文件夾中。打開DreamweaverCS5軟件，新建站點(diǎn)“新聞管理”，定義站點(diǎn)文件夾為“D:\News美化前”。然后打開站點(diǎn)中的newsadmin.html文件，單擊網(wǎng)頁右側(cè)的框架位置，選擇菜單“插入|HTML|框架|IFRAME”，得到代碼：<iframe></iframe>然后修改代碼為：<iframewidth="700"height="434"id="mainframe"name="mainframe"src="NewsAmin.aspx"frameborder="0"></iframe>詳細(xì)步驟請參考配套光盤視頻教程中的講解“視頻教程\15新聞管理2-美化.wmv”。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化1.統(tǒng)一界面的設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化1.統(tǒng)一界面的設(shè)計(jì)選擇新聞發(fā)布和新聞管理圖片，設(shè)置超級鏈接的地址：新聞發(fā)布：NewsAdd.aspx，目標(biāo)“mainframe”。新聞管理：Default.aspx，目標(biāo)“mainframe”。設(shè)計(jì)指導(dǎo)：一定要選擇目標(biāo)“mainframe”，這是框架的命名，只有選擇了目標(biāo)，單擊超級鏈接后，鏈接文件才會(huì)在目標(biāo)框架中打開。使用VisualStudio2008中調(diào)試newsadmin.html文件，結(jié)果如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化2.DIV+CSS網(wǎng)頁布局我們這里采用流行的DIV+CSS的布局方式對新聞管理頁面進(jìn)行美化。在進(jìn)行新聞管理頁面的美化之前，在VisualStudio2008中打開“D:\News美化前\Default.aspx”文件，選擇GridView控件，單擊智能標(biāo)記中的“自動(dòng)套用格式|移除自動(dòng)套用格式”命令，保存文件。然后，使用DreamweaverCS5軟件打開該文件，在設(shè)計(jì)視圖中紅色虛線范圍中“即Form表單”單擊鼠標(biāo)，單擊插入面板中的“插入Div標(biāo)簽”（或選擇菜單“插入|布局對象|Div標(biāo)簽”），在插入Dibble標(biāo)簽對話框中設(shè)置插入為“在插入點(diǎn)”，ID為“title”，如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化2.DIV+CSS網(wǎng)頁布局再次在插入面板中單擊“插入Div標(biāo)簽”，在插入Div標(biāo)簽對話框中設(shè)置插入為“在標(biāo)簽之后”，選擇標(biāo)簽為<divid=”title”>，ID為“datatable”，插入Div標(biāo)簽后的界面如圖所示。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化2.DIV+CSS網(wǎng)頁布局刪除Div標(biāo)簽中的提示信息，在title標(biāo)簽插入圖片，圖片文件路徑為“D:\News美化前\images\titlelogo.jpg”和“D:\News美化前\images\newssend.jpg”，將第一個(gè)控件（即帶有黃色ASP標(biāo)志的控件GridView1）拖動(dòng)到datatable標(biāo)簽中，第二個(gè)控件（即數(shù)據(jù)源控件SqlDataSource1）是隱藏的，所以不用處理。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化3.主體bodyCSS樣式設(shè)計(jì)在DreamweaverCS5設(shè)計(jì)視圖中，單擊鼠標(biāo)右鍵，選擇“CSS樣式|新建”，新建CSS樣式，選擇標(biāo)簽樣式，選擇選擇器為body，文件位置為新建樣式表文件，保存文件名為newscss.css。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化4.標(biāo)題區(qū)域titleCSS樣式設(shè)計(jì)新建CSS樣式，類型為ID，名稱為title。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化5.數(shù)據(jù)表區(qū)域datatableCSS樣式設(shè)計(jì)新建CSS樣式，類型為ID，名稱為datatable。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化6.表格dataCSS樣式設(shè)計(jì)新建CSS樣式，類型為“類”，名稱為data。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化進(jìn)入css樣式文件中，添加border-collapse:collapse;使表格線呈單線并去除間距，相鄰邊被合并，選擇GridView控件，設(shè)置屬性面板中css樣式為data。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化7.表格標(biāo)題thCSS樣式設(shè)計(jì)接下來進(jìn)行表格數(shù)據(jù)的進(jìn)一步美化，新建CSS樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容”，選擇器名稱為.datath，即設(shè)置data（表格數(shù)據(jù)）項(xiàng)目下的th（標(biāo)題）屬性。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化7.表格標(biāo)題thCSS樣式設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化8.表格單元格tdCSS樣式設(shè)計(jì)新建CSS樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容”，選擇器名稱為.datatd，即設(shè)置data（表格數(shù)據(jù)）項(xiàng)目下的td（單元格）屬性，類型屬性中設(shè)置行高Line-height為26px，區(qū)塊屬性中Text-align（文本對齊）為center居中。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化9.超級鏈接CSS樣式設(shè)計(jì)我們發(fā)現(xiàn)，網(wǎng)頁的超級鏈接顯示為默認(rèn)的藍(lán)色，因此需要修改為和諧的灰色，當(dāng)鼠標(biāo)劃上去的時(shí)候顯示紅色。新建CSS樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容”，選擇器名稱為.dataa:link,.dataa:visited（這里一起設(shè)置鏈接和訪問過兩種狀態(tài)，故中間用逗號(hào)隔開），設(shè)置類型屬性中Text-derection（文本修飾）為none（無），即去掉超級鏈接的下劃線，Color為#CCC，即修改顏色為灰色。新建CSS樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容”，選擇器名稱為.dataa:hover,.dataa:active（這里一起設(shè)置鼠標(biāo)劃上和激活兩種狀態(tài)），設(shè)置類型屬性中Text-decoration（文本修飾）為none（無），去掉超級鏈接的下劃線，Color為#F00，即修改顏色為紅色。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化9.超級鏈接CSS樣式設(shè)計(jì)我們發(fā)現(xiàn)，網(wǎng)頁的超級鏈接顯示為默認(rèn)的藍(lán)色，因此需要修改為和諧的灰色，當(dāng)鼠標(biāo)劃上去的時(shí)候顯示紅色。新建CSS樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容”，選擇器名稱為.dataa:link,.dataa:visited（這里一起設(shè)置鏈接和訪問過兩種狀態(tài)，故中間用逗號(hào)隔開），設(shè)置類型屬性中Text-derection（文本修飾）為none（無），即去掉超級鏈接的下劃線，Color為#CCC，即修改顏色為灰色。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.1新聞管理界面的美化在VisualStudio中調(diào)試：動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化新聞發(fā)布同樣可以CSS樣式進(jìn)行美化，利用DIV進(jìn)行標(biāo)題（title）與表單內(nèi)容（formitem）的分割，標(biāo)題部分插入圖片，后設(shè)置底部橫線，表單部分利用表格進(jìn)行版式編排，利用CSS樣式進(jìn)行版式編排與美化。1.附加樣式表使用Dreamweaver軟件打開該文件NewsAdd.aspx，在設(shè)計(jì)視圖中單擊鼠標(biāo)右鍵，選擇“CSS樣式|附加樣式表”選項(xiàng)，在鏈接外部樣式表對話框中選擇外部樣式表文件為網(wǎng)站中的newscss.css文件。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化2.DIV+CSS布局在網(wǎng)頁中（表單標(biāo)簽內(nèi)）插入Div標(biāo)簽（title、formitems）進(jìn)行布局。在網(wǎng)頁中（表單標(biāo)簽內(nèi)）插入Div標(biāo)簽（title、formitems）進(jìn)行布局。刪除Div標(biāo)簽中的提示信息和新聞發(fā)布文字，在title標(biāo)簽插入兩張圖片，圖片文件路徑為“D:\News美化前\images\titlelogo.jpg”和“D:\News美化前\images\newsadd.jpg”。在formitems標(biāo)簽中插入表格，設(shè)置行6，列2。把信息文字和控件拖動(dòng)到表格相應(yīng)位置。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化2.DIV+CSS布局動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化3.設(shè)置css樣式由于newscss.css文件中已有title的樣式，這里可以直接使用。新建css樣式formitem，用戶控制表單樣式，設(shè)置方框?qū)傩灾衱idth為680px，Padding為0，Margin中Top為10px，Left為20px，其余為0px。新建復(fù)合樣式#formitemtable，用于控制表格樣式，設(shè)置類型屬性中行距為26px，方框?qū)傩灾衱idth為500px，Padding和Margin為0。新建復(fù)合樣式#formitemtabletrtd，用于設(shè)置表格的單元格樣式，設(shè)置邊框?qū)傩灾蠦ottom（底部）樣式style為dashed（點(diǎn)）,width為1px，color為#CCC。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化3.設(shè)置css樣式下面實(shí)現(xiàn)表格內(nèi)容的對齊與寬度設(shè)置，在代碼視圖中，對左側(cè)一列<td>標(biāo)識(shí)逐個(gè)添加css標(biāo)識(shí)class=”c1”，右側(cè)一列，<td>標(biāo)識(shí)添加css標(biāo)識(shí)class=”c2”（當(dāng)然我們可以只設(shè)置c1）。新建css樣式，類型為“類”，選擇器名稱為“.c1”。區(qū)塊屬性中設(shè)置Text-align（文本對齊）為right（右對齊）。設(shè)置方框?qū)傩灾衱idth為46px，Padding中Right為10px，其它為0，Margin為0px。新建css樣式，類型為“類”，選擇器名稱為“.c2”。設(shè)置方框?qū)傩灾蠵adding中Left為5px（這里只是為了說明可以對兩列分別設(shè)置樣式，如設(shè)置右對齊等，實(shí)際上我們可以在c1中設(shè)置Padding中Right為15px，而得到相同的效果）。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化3.設(shè)置CSS樣式下面進(jìn)行按鈕樣式的設(shè)計(jì)，插入css樣式.btn，選擇類型為“類”，設(shè)置類型屬性中顏色為#999，背景屬性中設(shè)置背景顏色為#f5f5f5；方框?qū)傩灾性O(shè)置高度為20px，Padding和Margin為0px；邊框?qū)傩灾衱idth為1px，Color為#CCC。選擇按鈕發(fā)布，在屬性欄中選擇css樣式btn。同樣可以設(shè)置上傳控件的樣式為btn。保存文件后在VisualStudio中調(diào)試newsadmin.html文件，單擊新聞發(fā)布圖片，顯示結(jié)果。當(dāng)然我們可以對標(biāo)題、內(nèi)容等文本框進(jìn)行CSS樣式美化，設(shè)置其寬度高度等，這里就不贅述。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.2新聞發(fā)布界面的美化3.設(shè)置CSS樣式動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化界面美化設(shè)計(jì)思路是首先利用DIV進(jìn)行標(biāo)題（title）與新聞（news）的分割，標(biāo)題部分插入圖片，后設(shè)置底部橫線，利用CSS樣式進(jìn)行版式編排與美化。1.附加樣式表使用Dreamweaver軟件打開文件newsdetail.aspx，在設(shè)計(jì)視圖中單擊鼠標(biāo)右鍵，選擇“CSS樣式|附加樣式表”附加樣式表文件newscss.css。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化2.DIV+CSS布局在網(wǎng)頁中（表單標(biāo)簽內(nèi)）插入Div標(biāo)簽（title、news）進(jìn)行布局，在news標(biāo)簽中插入Div標(biāo)簽newsimg，刪除Div標(biāo)簽中的提示信息和新聞瀏覽文字，在title標(biāo)簽插入圖片titlelogo.jpg和newsbrowser.jpg，將Image控件拖動(dòng)到newsimg標(biāo)簽中，修改news標(biāo)簽內(nèi)的代碼。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化2.DIV+CSS布局<divid="news"><h1class="newstitle"><asp:LabelID="lbltitle"runat="server"></asp:Label></h1><h2class="newsinfo">發(fā)布人：<asp:LabelID="lblauthor"runat="server"></asp:Label> 發(fā)布時(shí)間：<asp:LabelID="lbldate"runat="server"></asp:Label></h2><divid="newsimg"><asp:ImageCssClass="newsphoto"ID="Image1"runat="server"/></div><pclass="newsbody"><asp:LabelID="lblbody"runat="server"></asp:Label></p><pclass="newsfile"><asp:HyperLinkID="HyperLink1"runat="server">下載附件</asp:HyperLink></p></div>動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化2.DIV+CSS布局動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化3.設(shè)置CSS樣式由于newscss.css文件中已有title的樣式，這里可以直接使用。新建css樣式news，類型為ID，設(shè)置方框?qū)傩灾衱idth為680px，Padding為10，Margin中為0px。新建CSS樣式.newstitle，類型為“類”，用于控制新聞標(biāo)題樣式，設(shè)置類型屬性中字號(hào)為16px，行距為24px，顏色為#666，區(qū)塊屬性中文本對齊為center。新建CSS樣式.newinfo，類型為“類”，用于控制新聞發(fā)布人與發(fā)布時(shí)間樣式，設(shè)置類型屬性中Font-size字號(hào)為12px，F(xiàn)ont-weight為normal（取消H2默認(rèn)的加粗樣式），區(qū)塊屬性中文本對齊為center。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化3.設(shè)置CSS樣式新建CSS樣式.newsimg，類型為“ID”，用于控制新聞圖片對齊樣式，設(shè)置區(qū)塊屬性中文本對齊為center。新建CSS樣式.newsphoto，類型為“類”，用于控制新聞圖片的樣式，設(shè)置方框?qū)傩灾衱idth為300px，Padding為5px，Margin為0px。新建CSS樣式.newsbody，類型為“類”，用于控制新聞內(nèi)容的樣式，設(shè)置類型屬性中Font-size為14px，Line-height為21px，Color為#666，方框?qū)傩灾衱idth為650px。新建CSS樣式.newsfile，類型為“類”，用于控制新聞附件的樣式，設(shè)置區(qū)塊屬性中文本對齊為right，設(shè)置方框?qū)傩灾蠵adding中Right為40px。新建CSS樣式.newsfilea，類型為“復(fù)合內(nèi)容”，用于控制新聞附件超級鏈接樣式（a包括超級鏈接的四種狀態(tài)），設(shè)置類型屬性中文本大小為14px，顏色為#666，文本修飾為none。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化3.設(shè)置CSS樣式保存文件后在VisualStudio中調(diào)試newsadmin.html文件，單擊選擇一條新聞，單擊詳細(xì)信息，顯示結(jié)果。我們發(fā)現(xiàn)，由于采用了框架，長的內(nèi)容會(huì)使網(wǎng)頁出現(xiàn)滾動(dòng)條，影響界面的美觀，我們通過修改CSS代碼來去掉水平的滾動(dòng)條，在newscss.css文件中添加代碼：html{overflow-x:hidden;}動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.6.3新聞瀏覽界面的美化3.設(shè)置css樣式動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7新聞管理模塊高級設(shè)計(jì)——ADO.NET數(shù)據(jù)操縱在動(dòng)態(tài)網(wǎng)站開發(fā)中，除了可以使用數(shù)據(jù)源控件完成對數(shù)據(jù)庫信息的瀏覽和操作外，還可以使用ADO.NET提供的各種對象，通過編寫代碼實(shí)現(xiàn)數(shù)據(jù)庫操作功能，能夠?qū)崿F(xiàn)更加復(fù)雜與特殊的操作。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.1新聞管理模塊的新需求前面我們基本完成了新聞管理模塊的設(shè)計(jì)，而實(shí)際應(yīng)用中我們不斷遇到新的需求：（1）刪除記錄時(shí)支持多選，能夠一次刪除一頁記錄，同時(shí)出現(xiàn)刪除確認(rèn)的對話框。刪除記錄時(shí)支持刪除文件的功能，因?yàn)槿绻延涗泟h除了，而該記錄對應(yīng)的圖片和附件卻不能刪除，而成為服務(wù)器上的“垃圾”，導(dǎo)致空間被浪費(fèi)。（2）修改記錄時(shí)支持選擇輸入，提供快速正確的數(shù)據(jù)更新，而不是完全由用戶輸入。（3）支持新聞的審核功能，只有通過審核的新聞才能正常顯示，編輯新聞時(shí)，審核狀態(tài)通過選項(xiàng)選擇實(shí)現(xiàn)，如“通過”、“未通過”。以上的功能單憑SQLDataSource控件是很難完全實(shí)現(xiàn)的，因此我們需要通過ADO.NET進(jìn)行數(shù)據(jù)的高級操縱。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.1新聞管理模塊的新需求為此，首先在數(shù)據(jù)庫NewsDB的數(shù)據(jù)表news中添加新字段“Statenvarchar（50）”，其取值為“通過、未通過和空值（Null）”，當(dāng)新增加記錄時(shí)，其值為Null。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.2新聞管理界面的改進(jìn)使用VisualStudio2008打開網(wǎng)站newadv，打開Default.aspx文件，選擇GridView控件，選擇智能標(biāo)記中的添加新列選項(xiàng)，選擇TemplateField字段（模版列），頁眉文本為“選擇”。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.2新聞管理界面的改進(jìn)再次選擇智能標(biāo)記中的添加新列選項(xiàng)，插入選擇TemplateField字段（模版列），頁眉文本為標(biāo)題，同樣插入其它TemplateField字段（發(fā)布人、日期、審核狀態(tài)）。再插入新列，選擇字段類型為CommandField（命令列），頁眉文本為編輯，按鈕類型為Link，命令按鈕選擇“編輯/更新”和“顯示取消按鈕”列，然后刪除原有的列（編號(hào)、標(biāo)題、發(fā)布人、日期、詳細(xì)信息、編輯）。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.2新聞管理界面的改進(jìn)為了更新字段列表，選擇SqlDataSource控件，選擇智能標(biāo)記中的配置數(shù)據(jù)源選項(xiàng)，配置Select語句為SELECT[NewsID],[Title],[Author],[NewsDate],[State]FROM[News]，從而使字段中出現(xiàn)State字段。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.2新聞管理界面的改進(jìn)選擇GridView控件，選擇智能標(biāo)記中的編輯模版選項(xiàng)，進(jìn)入模版編輯，選擇模版編輯中的智能標(biāo)記，在“選擇”列（Column[0]）中ItemTemplate模版中添加CheckBox控件。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.2新聞管理界面的改進(jìn)在“標(biāo)題”列（Column[1]）中ItemTemplate模版中添加HyperLink控件，EditItemTemplate模版中添加TextBox控件。動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程——美工與技術(shù)機(jī)械工業(yè)出版社CompanyLogo15.7.2新聞管理界面的改進(jìn)單擊HyperLink控件，選擇“編輯DataBinding”，設(shè)置Text屬性為字段綁定Title。選擇Navigate