【正文】 aver CS5中設(shè)計網(wǎng)頁 ，這個頁面可以由美工設(shè)計完成，也可以由美工設(shè)計完效果圖后由技術(shù)人員利用 Dreamweaver軟件實現(xiàn)，注意需要將所用到的圖片連同文件夾一起復(fù)制到網(wǎng)站文件夾中。然后打開站點中的 ，單擊網(wǎng)頁右側(cè)的框架位置，選擇菜單“插入 |HTML|框架 |IFRAME”，得到代碼： ? iframe/iframe ? 然后修改代碼為： ? iframe width=700 height=434 id=mainframe name=mainframe src= frameborder=0/iframe ? 詳細步驟請參考配套光盤視頻教程中的講解“視頻教程 \15 新聞管理 2美化 .wmv”。 ? 使用 Visual Studio 2023中調(diào)試，結(jié)果如圖所示。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的美化 ? +CSS網(wǎng)頁布局 ? 再次在插入面板中單擊“插入 Div標(biāo)簽”，在插入 Div標(biāo)簽對話框中設(shè)置插入為“在標(biāo)簽之后”，選擇標(biāo)簽為 div id=”title”，ID為“ datatable” ，插入 Div標(biāo)簽后的界面如圖所示。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的美化 ? datatable CSS樣式設(shè)計 ? 新建 CSS樣式，類型為 ID，名稱為 datatable。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的美化 ? th CSS樣式設(shè)計 ? 接下來進行表格數(shù)據(jù)的進一步美化，新建 CSS樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 .data th，即設(shè)置 data（表格數(shù)據(jù)）項目下的 th（標(biāo)題）屬性 。 新建 CSS樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容”，選擇器名稱為 .data a:hover, .data a:active（這里一起設(shè)置鼠標(biāo)劃上和激活兩種狀態(tài)），設(shè)置類型屬性中 Textdecoration（文本修飾）為 none（無），去掉超級鏈接的下劃線， Color為 F00，即修改顏色為紅色。 ? ? 使用 Dreamweaver軟件打開該文件 ，在設(shè)計視圖中單擊鼠標(biāo)右鍵，選擇“ CSS樣式 |附加樣式表”選項，在鏈接外部樣式表對話框中選擇外部樣式表文件為網(wǎng)站中的。在 formitems標(biāo)簽中插入表格，設(shè)置行 6，列 2。 ? 新建復(fù)合樣式 formitem table，用于控制表格樣式，設(shè)置類型屬性中行距為 26px，方框?qū)傩灾?width為 500px， Padding和Margin為 0。區(qū)塊屬性中設(shè)置 Textalign（文本對齊）為 right（右對齊）。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞發(fā)布界面的美化 ? CSS樣式 ? 下面進行按鈕樣式的設(shè)計，插入 css樣式 .btn，選擇類型為“類”，設(shè)置類型屬性中顏色為 999，背景屬性中設(shè)置背景顏色為f5f5f5；方框?qū)傩灾性O(shè)置高度為 20px， Padding和 Margin為0px；邊框?qū)傩灾?width為 1px， Color為 CCC。當(dāng)然我們可以對標(biāo)題、內(nèi)容等文本框進行 CSS樣式美化，設(shè)置其寬度高度等，這里就不贅述。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞瀏覽界面的美化 ? +CSS布局 ? div id=news ? h1 class=newstitle ? asp:Label ID=lbltitle runat=server/asp:Label ? /h1 ? h2 class=newsinfo ? 發(fā)布人： asp:Label ID=lblauthor runat=server/asp:Label ? 發(fā)布時間： asp:Label ID=lbldate runat=server/asp:Label ? /h2 ? div id=newsimg ? asp:Image CssClass=newsphoto ID=Image1 runat=server / ? /div ? p class=newsbody ? asp:Label ID=lblbody runat=server/asp:Label ? /p ? p class=newsfile ? asp:HyperLink ID=HyperLink1 runat=server下載附件/asp:HyperLink ? /p ? /div 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞瀏覽界面的美化 ? +CSS布局 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞瀏覽界面的美化 ? CSS樣式 ?由于 title的樣式，這里可以直接使用。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞瀏覽界面的美化 ? CSS樣式 ? 新建 CSS樣式 .newsimg，類型為“ ID”，用于控制新聞圖片對齊樣式，設(shè)置區(qū)塊屬性中文本對齊為 center。 ? 新建 CSS樣式 .newsfile a，類型為“復(fù)合內(nèi)容”，用于控制新聞附件超級鏈接樣式（ a 包括超級鏈接的四種狀態(tài)），設(shè)置類型屬性中文本大小為14px，顏色為 666，文本修飾為 none。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理模塊的新需求 ? 前面我們基本完成了新聞管理模塊的設(shè)計，而實際應(yīng)用中我們不斷遇到新的需求： ? （ 1）刪除記錄時支持多選，能夠一次刪除一頁記錄，同時出現(xiàn)刪除確認的對話框。 ? 以上的功能單憑 SQL DataSource控件是很難完全實現(xiàn)的，因此我們需要通過 。再插入新列，選擇字段類型為CommandField（命令列），頁眉文本為編輯，按鈕類型為 Link，命令按鈕選擇“編輯 /更新”和“顯示取消按鈕”列，然后刪除原有的列（編號、標(biāo)題、發(fā)布人、日期、詳細信息、編輯）。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 單擊 HyperLink控件，選擇“編輯 DataBinding”，設(shè)置 Text屬性為字段綁定 Title。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 在“發(fā)布人”列（ Column[2]）中 ItemTemplate模版中添加 Label控件， EditItemTemplate模版中添加 TextBox控件。 ? 同樣選擇 EditItemTemplate模版中的 TextBox控件，選擇“編輯 DataBinding”，設(shè)置 Text屬性為字段綁定 NewsDate。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞數(shù)據(jù)顯示中的數(shù)據(jù)綁定技術(shù) ? ? 選擇 GridView控件，選擇屬性 DataSourceID，設(shè)置為“無”，出現(xiàn)對話框刷新 GridView字段，務(wù)必選“否”，否則前面的界面設(shè)計將完全被刪除，然后刪除數(shù)據(jù)源控件。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞數(shù)據(jù)顯示中的數(shù)據(jù)綁定技術(shù) ? 編寫公共調(diào)用的數(shù)據(jù)綁定函數(shù) bind()，放到 Page_Load事件后面。User ID=sa。 //定義 sql語句 ? SqlDataAdapter da = new SqlDataAdapter(sqlstr, conn)。 ? //指定 GridView控件數(shù)據(jù)源為上面填充的表 ? 。 //定義客戶端數(shù)據(jù)集 ds存放數(shù)據(jù)表 ? (ds, dsnews)。 //數(shù)據(jù)連接字符串 ? SqlConnection conn = new SqlConnection(constr)。綁定數(shù)據(jù) ? { ? String constr = server=(local)。 ? 然后引用文件操作組件： ? using 。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 設(shè)置 Label綁定數(shù)據(jù)，設(shè)置 DropDownList控件選項為“未審核、通過、未通過”三項，“未審核”設(shè)置為默認： Selected為 True，Text為“未審核”， Value為空，“通過”的 Text和 Value均為“通過”，未通過的 Text和 Value均為“未通過”。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 在“日期”列（ Column[3]）中 ItemTemplate模版中添加Label控件， EditItemTemplate模版中添加 TextBox控件，選擇日期列，綁定日期 NewsDate，注意設(shè)置格式為“短日期”：{0:d}。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 選擇 EditItemTemplate模版中的 TextBox控件，選擇“編輯DataBinding”，設(shè)置 Text屬性為字段綁定 Title。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 選擇 GridView控件，選擇智能標(biāo)記中的編輯模版選項，進入模版編輯，選擇模版編輯中的智能標(biāo)記，在“選擇”列（ Column[0]）中 ItemTemplate模版中添加 CheckBox控件。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞管理界面的改進 ? 使用 Visual Studio 2023打開網(wǎng)站 newadv，打開 文件，選擇 GridView控件，選擇智能標(biāo)記中的添加新列選項，選擇 TemplateField字段（模版列），頁眉文本為“選擇” 。 ? （ 2）修改記錄時支持選擇輸入，提供快速正確的數(shù)據(jù)更新，而不是完全由用戶輸入。我們發(fā)現(xiàn)，由于采用了框架，長的內(nèi)容會使網(wǎng)頁出現(xiàn)滾動條，影響界面的美觀，我們通過修改 CSS代碼來去掉水平的滾動條，在 中添加代碼： ? html ? {overflowx:hidden。 ? 新建 CSS樣式 .newsbody，類型為“類”，用于控制新聞內(nèi)容的樣式，設(shè)置類型屬性中 Fontsize為 14px， Lineheight為 21px， Color為666，方框?qū)傩灾?width為 650px。 ?新建 CSS樣式 .newstitle，類型為“類”，用于控制新聞標(biāo)題樣式，設(shè)置類型屬性中字號為 16px，行距為24px，顏色為 666，區(qū)塊屬性中文本對齊為 center。 ? ? 使用 Dreamweaver軟件打開文件 ，在設(shè)計視圖中單擊鼠標(biāo)右鍵，選擇“ CSS樣式 |附加樣式表”附加樣式表文件 。同樣可以設(shè)置上傳控件的樣式為 btn。 ? 新建 css樣式，類型為“類”，選擇器名稱為“ .c2”。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞發(fā)布界面的美化 ? css樣式 ? 下面實現(xiàn)表格內(nèi)容的對齊與寬度設(shè)置，在代碼視圖中，對左側(cè)一列 td標(biāo)識逐個添加 css標(biāo)識 class=” c1”，右側(cè)一列， td標(biāo)識添加 css標(biāo)識 class=” c2”（當(dāng)然我們可以只設(shè)置 c1）。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞發(fā)布界面的美化 ? 2. DIV+CSS布局 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 Company Logo 新聞發(fā)布界面的美化 ? css樣式 ? 由于 title的樣式，這里可以直接使用。 ? 在網(wǎng)頁中（表單標(biāo)簽內(nèi)）插入 Div標(biāo)簽（ title、 formitems）進行布局。新建 CSS樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 .data a:link,.data a:visited（這里一起設(shè)置鏈接和訪問過兩種狀態(tài)，故中間用逗號隔開），設(shè)置類型屬性中 Textderection（文本修飾）為 none（無），即去掉超級鏈接的下劃線，