【正文】 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞發(fā)布代碼設(shè)計 ? //如果執(zhí)行到這里，只能是大小滿足要求，但文件格式不正確 ? else ? { ? = 文件格式不正確 。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞發(fā)布代碼設(shè)計 ? ? 我們發(fā)現(xiàn)新聞發(fā)布成功之后，仍然存在文件格式不正確的提示，發(fā)布的數(shù)據(jù)在數(shù)據(jù)庫中新聞主體內(nèi)容的信息完全連接到了一起，沒有換行的標(biāo)志，這樣顯示新聞時必然只有一個段落，與提交的信息不同，因此需要修改。//替換字符串中的換行為 HTML的換行br / ? return (chr)。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞發(fā)布代碼設(shè)計 ? 對于頁面合法性與提示信息，修改 Button1_Click程序為： ? if ()//進(jìn)行頁面合法性驗證 ? { ? //清除提示內(nèi)容 ? = 。 //頁面定位到出錯界 ? //面 ?，讀者可以自行設(shè)計錯誤頁面。//定義連接對//象 ? ()。 //發(fā)布日期 ? = rd[NewsBody].ToString()。 //關(guān)閉閱讀器 ? ()。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理模塊界面的美化 ?新聞管理模塊的界面美化采用流行的 DIV+CSS的布局方式進(jìn)行美化，需要結(jié)合 Visual Studio 2023和Dreamweaver CS5進(jìn)行美化設(shè)計，使用Dreamweaver CS5設(shè)計布局頁面，使用 Visual Studio 2023測試美化效果。這里介紹使用框架的方法，母版的方法將在第 18章進(jìn)行介紹。 ? 設(shè)計指導(dǎo)：一定要選擇目標(biāo)“ mainframe”，這是框架的命名，只有選擇了目標(biāo)，單擊超級鏈接后，鏈接文件才會在目標(biāo)框架中打開。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理界面的美化 ? title CSS樣式設(shè)計 ? 新建 CSS樣式，類型為 ID，名稱為 title。新建 CSS樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 .data a:link,.data a:visited（這里一起設(shè)置鏈接和訪問過兩種狀態(tài)，故中間用逗號隔開），設(shè)置類型屬性中 Textderection（文本修飾）為 none（無），即去掉超級鏈接的下劃線， Color為 CCC，即修改顏色為灰色。刪除 Div標(biāo)簽中的提示信息和新聞發(fā)布文字，在 title標(biāo)簽插入兩張圖片，圖片文件路徑為“ D:\News美化前\images\”和“ D:\News美化前\images\”。 ? 新建 css樣式，類型為“類”，選擇器名稱為“ .c1”。保存文件后在 Visual Studio中調(diào)試，單擊新聞發(fā)布圖片，顯示結(jié)果。 ?新建 CSS樣式 .newinfo，類型為“類”，用于控制新聞發(fā)布人與發(fā)布時間樣式，設(shè)置類型屬性中 Fontsize字號為 12px， Fontweight為 normal（取消 H2默認(rèn)的加粗樣式），區(qū)塊屬性中文本對齊為 center。} 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞瀏覽界面的美化 ? css樣式 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理模塊高級設(shè)計 —— ?在動態(tài)網(wǎng)站開發(fā)中，除了可以使用數(shù)據(jù)源控件完成對數(shù)據(jù)庫信息的瀏覽和操作外，還可以使用 ，通過編寫代碼實現(xiàn)數(shù)據(jù)庫操作功能，能夠?qū)崿F(xiàn)更加復(fù)雜與特殊的操作。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理界面的改進(jìn) ? 再次選擇智能標(biāo)記中的添加新列選項，插入選擇 TemplateField字段（模版列），頁眉文本為標(biāo)題，同樣插入其它 TemplateField字段（發(fā)布人、日期、審核狀態(tài)）。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理界面的改進(jìn) ? 設(shè)計指導(dǎo)：如果沒有數(shù)據(jù)源或數(shù)據(jù)源不匹配的話，可以直接選擇自定義綁定，就像上面為導(dǎo)航屬性進(jìn)行綁定一樣，如手動綁定標(biāo)題，可直接在自定義綁定中輸入 Eval(“ Title” )。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理界面的改進(jìn) ? 在設(shè)計界面拖入復(fù)選框控件 CheckBox2，修改 Text屬性為全選，拖入 Button控件，修改 Text屬性為“刪除所選” 。database=NewsDB。 ? //數(shù)據(jù)適配器 da執(zhí)行填充命令 Fill，把 sql命令執(zhí)行結(jié)果存入數(shù)據(jù)集 ds，為表命令為 dsnews ? = [0].DefaultView。 //定義鏈接對象 ? string sqlstr = select * from news order by NewsDate desc。 ? 用于對服務(wù)器端新聞附件和圖片文件進(jìn)行刪除。 ? 設(shè)計指導(dǎo)：手動綁定短日期格式為： Eval(NewsDate, {0:d})，我們應(yīng)該記住這個格式設(shè)置。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理界面的改進(jìn) ? 在“標(biāo)題”列（ Column[1]）中 ItemTemplate模版中添加HyperLink控件， EditItemTemplate模版中添加 TextBox控件。 ? （ 3）支持新聞的審核功能，只有通過審核的新聞才能正常顯示，編輯新聞時，審核狀態(tài)通過選項選擇實現(xiàn)，如“通過”、“未通過”。 ? 新建 CSS樣式 .newsfile，類型為“類”，用于控制新聞附件的樣式，設(shè)置區(qū)塊屬性中文本對齊為 right，設(shè)置方框?qū)傩灾?Padding中 Right為40px。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞瀏覽界面的美化 ? +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)簽插入圖片 ，將 Image控件拖動到 newsimg標(biāo)簽中，修改 news標(biāo)簽內(nèi)的代碼 。設(shè)置方框?qū)傩灾?Padding中 Left為 5px（這里只是為了說明可以對兩列分別設(shè)置樣式，如設(shè)置右對齊等，實際上我們可以在 c1中設(shè)置Padding中 Right為 15px，而得到相同的效果）。 ? 新建 css樣式 formitem，用戶控制表單樣式，設(shè)置方框?qū)傩灾衱idth為 680px， Padding為 0， Margin中 Top為 10px， Left為20px，其余為 0px。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞管理界面的美化 ? 在 Visual Studio中調(diào)試： 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞發(fā)布界面的美化 ? 新聞發(fā)布同樣可以 CSS樣式進(jìn)行美化，利用 DIV進(jìn)行標(biāo)題（ title）與表單內(nèi)容（ formitem）的分割，標(biāo)題部分插入圖片，后設(shè)置底部橫線，表單部分利用表格進(jìn)行版式編排，利用 CSS樣式進(jìn)行版式編排與美化。使表格線呈單線并去除間距，相鄰邊被合并，選擇 GridView控件，設(shè)置屬性面板中 css樣式為 data。然后，使用 Dreamweaver CS5軟件打開該文件，在設(shè)計視圖中紅色虛線范圍中“即 Form表單”單擊鼠標(biāo)，單擊插入面板中的“插入 Div標(biāo)簽”（或選擇菜單“插入 |布局對象 |Div標(biāo)簽”），在插入 Dibble標(biāo)簽對話框中設(shè)置插入為“在插入點”， ID為“ title”，如圖所示。打開 Dreamweaver CS5軟件，新建站點“新聞管理”，定義站點文件夾為“ D:\News美化前”。這里設(shè)置了網(wǎng)頁的統(tǒng)一框架，而將網(wǎng)頁內(nèi)容放到右側(cè)中間的空白區(qū)域中，體現(xiàn)網(wǎng)頁設(shè)計一致性原理。 //頁面定位到出錯頁面。 //隱藏控件 ? } ? if (rd[NewsFile].ToString() != ) //新聞附件存在 ? { ? = true。 ? //執(zhí)行命令 ? SqlDataReader rd = ()。database=NewsDB。 ? } 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞瀏覽功能的實現(xiàn) ?新聞瀏覽是根據(jù)用戶選擇的新聞，打開新聞詳細(xì)內(nèi)容的界面，顯示新聞的具體內(nèi)容，同時將新聞圖片和附件以適當(dāng)?shù)男问秸故境鰜怼?? (Author, ).Value = 。 //對字符串進(jìn)行 HTML編碼 ? chr = (, lt)。也就是說，圖片和附件可以沒有，但有就要符合要求，即圖片滿足格式正確、大小在規(guī)定范圍，附件大小在規(guī)定范圍，才能進(jìn)行上傳操作。 //記錄上傳附件錯誤 ? } ? else ? { ? upfilestyle = 1。 //定義上傳圖片的路徑 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞發(fā)布代碼設(shè)計 ? //通過時間拼出文件名為當(dāng)前時間的 年月日時分秒毫秒 ? DateTime ctime = 。為此，兩個文件上傳空間后面的標(biāo)簽用于提示錯誤信息，如新聞圖片格式不正確，新聞圖片太大，附件太大等。 //這里先設(shè)置為沒有附件 ? //執(zhí)行命令 ? ()。 ? //下面代碼是定義命令 ? SqlCommand cmd = ()。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞發(fā)布代碼設(shè)計 ? ? 設(shè)計思路：先設(shè)計完成基本的功能 ——數(shù)據(jù)的插入，然后進(jìn)行逐步完善，驗證用戶信息的合法性，考慮文件上傳的限制問題，最后實現(xiàn)完善的程序。例如要求不能修改發(fā)布人，即發(fā)布人設(shè)置為只讀，需要選擇 GridView控件，在右上角的智能標(biāo)記中選擇“編輯列”命令，在字段編輯對話框中選擇“發(fā)布人”字段，修改右側(cè)屬性 ReadOnly為 True，如圖 1534所示。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞的顯示 ? 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞的顯示 ? 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞的顯示 ? ? 設(shè)計指導(dǎo)：這里我們也可以在插入超級鏈接字段對話框中設(shè)置頁眉文本為標(biāo)題，超鏈接文本為從數(shù)據(jù)字段獲取文本，然后選擇Title。選擇右側(cè)的“ ORDER BY”按鈕，添加排序，設(shè)置排序字段為“ NewsDate”，降序排列。從左側(cè)工具欄中選擇“數(shù)據(jù)”組中的“ GridView”控件，拖動到設(shè)計視圖中。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 數(shù)據(jù)庫的建立 ?打開 SQL Server 2023，從左側(cè)對象資源管理其中，選擇數(shù)據(jù)庫選項，單擊鼠標(biāo)右鍵，選擇新建數(shù)據(jù)庫，設(shè)置數(shù)據(jù)庫名稱為“ NewsDB”。Company LOGO 動態(tài)網(wǎng)頁設(shè)計教程 ——美工與技術(shù) 徐延章 編著 第 15章 新聞管理模塊設(shè)計 —— GridView控件與 第 15章 新聞管理模塊設(shè)計 —— GridView控件與 ?新聞管理模塊是一個綜合新聞和內(nèi)容管理的模塊，是基于 B/S模式的網(wǎng)絡(luò)信息管理系統(tǒng)，新聞管理提供新聞的發(fā)布，審核，刪除，瀏覽等功能，是大多數(shù)網(wǎng)站后臺的主要功能模塊，通過設(shè)計新聞管理模塊，讀者可以延伸設(shè)計例如用戶管理、信息管理等模塊。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 數(shù)據(jù)表的建立 ? 打開新聞數(shù)據(jù)庫“ NewsDB”，選擇“表”選項，單擊鼠標(biāo)右鍵，選擇“新建表”，輸入字段“ NewsID”，在列屬性中設(shè)置數(shù)據(jù)類型為 int型，設(shè)置標(biāo)識規(guī)范為是，從而使字段能夠自動編號。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機(jī)械工業(yè)出版社 Company Logo 新聞的顯示 ? 從控件右側(cè)的智能標(biāo)記選項中選擇“自動套用格式”