【文章內(nèi)容簡介】 { ? 1 = 。 顯示圖像控件 ? 1 = + []()指定路徑 ? } 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞瀏覽代碼設(shè)計 ? { ? 1 = 。 隱藏控件 ? } ? ([]() ) 新聞附件存在 ? { ? 1 = 。 顯示超級鏈接控件 ? 1 = + []()。 鏈接路徑 ? } ? ? { ? 1 = 。 隱藏控件 ? } ? ()。 關(guān)閉閱讀器 ? ()。 關(guān)閉連接 ? } 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞瀏覽代碼設(shè)計 ? { ? ()。 ? ()。 ? ()。 頁面定位到出錯頁面。 ? } ? } ? ? { ? ()。 頁面定位到出錯頁面，讀者可以自行設(shè)計錯誤頁面。 ? } ? } 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞瀏覽代碼設(shè)計 ? 直接調(diào)試程序，顯示頁面無法找到，因為我們沒有建立這個頁面，打開新聞管理頁面，再調(diào)試程序，選擇一條新聞，單擊詳細內(nèi)容。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理模塊界面的美化 ?新聞管理模塊的界面美化采用流行的的布局方式進行美化，需要結(jié)合 2023和 5進行美化設(shè)計，使用 5設(shè)計布局頁面，使用 2023測試美化效果。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? ? 通過前面的設(shè)計，我們得到了網(wǎng)頁新聞顯示界面，而這只是從技術(shù)的角度實現(xiàn)，真正要到成品還需要進一步的美化。我們采用統(tǒng)一的布局來實現(xiàn)界面效果。實際的工作中，存在這樣的問題，美工已經(jīng)把新聞管理的界面設(shè)計完畢，并設(shè)計成格式的文件，往往這是很常見的情況，我們可以直接采用這個文件進行修改，形成模板，然后將其它的頁面套用上去，這樣的操作有助于我們實際操作能力的提高。這里設(shè)置了網(wǎng)頁的統(tǒng)一框架，而將網(wǎng)頁內(nèi)容放到右側(cè)中間的空白區(qū)域中，體現(xiàn)網(wǎng)頁設(shè)計一致性原理。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? ? 實現(xiàn)統(tǒng)一框架有兩種方法： ? 使用框架結(jié)構(gòu) 嵌入網(wǎng)頁。 ? 使用母版。 ? 通常情況下，使用框架結(jié)構(gòu)比較靈活，但要注意內(nèi)容溢出時的滾動條問題，為了不出現(xiàn)滾動條，需要對內(nèi)容進行修剪或裁切。這里介紹使用框架的方法，母版的方法將在第 18章進行介紹。首先在 5中設(shè)計網(wǎng)頁文件，這個頁面可以由美工設(shè)計完成，也可以由美工設(shè)計完效果圖后由技術(shù)人員利用軟件實現(xiàn)，注意需要將所用到的圖片連同文件夾一起復(fù)制到網(wǎng)站文件夾中。 ? 設(shè)計指導(dǎo)：實際應(yīng)用中可以將設(shè)計成動態(tài)網(wǎng)頁，以便于安全性的設(shè)置。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? ? 下面進行網(wǎng)站美工的設(shè)計制作，首先將配套光盤中“源文件 \15\”中的“美化前”文件夾復(fù)制到 D盤，即網(wǎng)站文件夾路徑為“ D:\美化前 \”，然后將配套光盤中“源文件 \15\素材 \”中的所有文件和文件夾復(fù)制到“ D:\美化前 \”文件夾中。打開 5軟件，新建站點“新聞管理”，定義站點文件夾為“ D:\美化前”。然后打開站點中的文件，單擊網(wǎng)頁右側(cè)的框架位置，選擇菜單“插入框架”，得到代碼： ? ? 然后修改代碼為： ? 700 434 0 ? 詳細步驟請參考配套光盤視頻教程中的講解“視頻教程 \15 新聞管理 2美化”。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? ? 選擇新聞發(fā)布和新聞管理圖片，設(shè)置超級鏈接的地址： ? 新聞發(fā)布：，目標“”。 ? 新聞管理：，目標“”。 ? 設(shè)計指導(dǎo)：一定要選擇目標“”，這是框架的命名，只有選擇了目標，單擊超級鏈接后，鏈接文件才會在目標框架中打開。 ? 使用 2023中調(diào)試文件，結(jié)果如圖所示。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 2網(wǎng)頁布局 ? 我們這里采用流行的的布局方式對新聞管理頁面進行美化。在進行新聞管理頁面的美化之前，在 2023中打開 “D:\美化前 \”文件，選擇控件，單擊智能標記中的 “自動套用格式 |移除自動套用格式 ”命令，保存文件。然后，使用 5軟件打開該文件，在設(shè)計視圖中紅色虛線范圍中 “即表單 ”單擊鼠標，單擊插入面板中的 “插入標簽 ”（或選擇菜單 “插入 |布局對象標簽 ”），在插入標簽對話框中設(shè)置插入為 “在插入點 ”，為 “”，如圖所示。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 2網(wǎng)頁布局 ? 再次在插入面板中單擊 “插入標簽 ”，在插入標簽對話框中設(shè)置插入為 “在標簽之后 ”，選擇標簽為 ””，為 “” ，插入標簽后的界面如圖所示。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 2網(wǎng)頁布局 ? 刪除標簽中的提示信息，在標簽插入圖片，圖片文件路徑為 “D:\美化前 \\”和 “D:\美化前 \\”，將第一個控件（即帶有黃色標志的控件 1）拖動到標簽中，第二個控件（即數(shù)據(jù)源控件 1）是隱藏的，所以不用處理。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 ? 在 5設(shè)計視圖中，單擊鼠標右鍵，選擇 “樣式 |新建 ”，新建樣式，選擇標簽樣式，選擇選擇器為，文件位置為新建樣式表文件，保存文件名為。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 ? 新建樣式，類型為，名稱為。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 ? 新建樣式，類型為，名稱為。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 ? 新建樣式，類型為 “類 ”，名稱為。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 進入樣式文件中，添加 。使表格線呈單線并去除間距，相鄰邊被合并，選擇控件，設(shè)置屬性面板中樣式為。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 ? 接下來進行表格數(shù)據(jù)的進一步美化，新建樣式，設(shè)置規(guī)則類型為“復(fù)合內(nèi)容 ”，選擇器名稱為 ，即設(shè)置（表格數(shù)據(jù)）項目下的（標題）屬性。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 樣式設(shè)計 ? 新建樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 ，即設(shè)置（表格數(shù)據(jù)）項目下的（單元格）屬性，類型屬性中設(shè)置行高為26，區(qū)塊屬性中（文本對齊）為居中。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? ? 我們發(fā)現(xiàn)，網(wǎng)頁的超級鏈接顯示為默認的藍色，因此需要修改為和諧的灰色，當鼠標劃上去的時候顯示紅色。新建樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 （這里一起設(shè)置鏈接和訪問過兩種狀態(tài)，故中間用逗號隔開），設(shè)置類型屬性中（文本修飾）為（無），即去掉超級鏈接的下劃線，為，即修改顏色為灰色。新建樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 , （這里一起設(shè)置鼠標劃上和激活兩種狀態(tài)），設(shè)置類型屬性中（文本修飾）為（無），去掉超級鏈接的下劃線，為 00，即修改顏色為紅色。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? ? 我們發(fā)現(xiàn)，網(wǎng)頁的超級鏈接顯示為默認的藍色，因此需要修改為和諧的灰色，當鼠標劃上去的時候顯示紅色。新建樣式，設(shè)置規(guī)則類型為 “復(fù)合內(nèi)容 ”，選擇器名稱為 （這里一起設(shè)置鏈接和訪問過兩種狀態(tài)，故中間用逗號隔開），設(shè)置類型屬性中（文本修飾）為（無），即去掉超級鏈接的下劃線，為，即修改顏色為灰色。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞管理界面的美化 ? 在 中調(diào)試： 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞發(fā)布界面的美化 ? 新聞發(fā)布同樣可以樣式進行美化，利用進行標題（）與表單內(nèi)容（）的分割，標題部分插入圖片，后設(shè)置底部橫線，表單部分利用表格進行版式編排，利用樣式進行版式編排與美化。 ? ? 使用軟件打開該文件，在設(shè)計視圖中單擊鼠標右鍵，選擇“樣式 |附加樣式表”選項，在鏈接外部樣式表對話框中選擇外部樣式表文件為網(wǎng)站中的文件。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞發(fā)布界面的美化 ? 2布局 ? 在網(wǎng)頁中（表單標簽內(nèi)）插入標簽（、）進行布局。 ? 在網(wǎng)頁中（表單標簽內(nèi)）插入標簽（、）進行布局。刪除標簽中的提示信息和新聞發(fā)布文字，在標簽插入兩張圖片，圖片文件路徑為“ D:\美化前 \\”和“ D:\美化前 \\”。在標簽中插入表格，設(shè)置行 6，列 2。把信息文字和控件拖動到表格相應(yīng)位置。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞發(fā)布界面的美化 ? 2. 布局 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞發(fā)布界面的美化 ? ?由于文件中已有的樣式，這里可以直接使用。 ?新建樣式，用戶控制表單樣式，設(shè)置方框?qū)傩灾袨?680，為 0，中為 10，為 20，其余為 0。 ?新建復(fù)合樣式 ，用于控制表格樣式，設(shè)置類型屬性中行距為 26，方框?qū)傩灾袨?500，和為 0。 ?新建復(fù)合樣式 ，用于設(shè)置表格的單元格樣式，設(shè)置邊框?qū)傩灾校ǖ撞浚邮綖椋c）為 1，為。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞發(fā)布界面的美化 ? ? 下面實現(xiàn)表格內(nèi)容的對齊與寬度設(shè)置，在代碼視圖中，對左側(cè)一列 標識逐個添加標識” c1”，右側(cè)一列， 標識添加標識” c2”（當然我們可以只設(shè)置 c1）。 ? 新建樣式，類型為“類”，選擇器名稱為“ 1”。區(qū)塊屬性中設(shè)置（文本對齊）為（右對齊）。設(shè)置方框?qū)傩灾袨?46，中為 10，其它為 0，為 0。 ? 新建樣式，類型為“類”，選擇器名稱為“ 2”。設(shè)置方框?qū)傩灾兄袨?5（這里只是為了說明可以對兩列分別設(shè)置樣式，如設(shè)置右對齊等，實際上我們可以在 c1中設(shè)置中為 15，而得到相同的效果）。 動態(tài)網(wǎng)頁設(shè)計教程 —— 美工與技術(shù) 機械工業(yè)出版社 新聞發(fā)布界面的美化 ? ? 下面進行按鈕樣式的設(shè)計，插入樣式，選擇類型為“類”，設(shè)置類型屬性中顏色為 999，背景屬性中設(shè)置背景顏色為 5f5f5；方框?qū)傩灾性O(shè)置高度為 20，和為 0；邊框?qū)傩灾袨?1，為。 ? 選擇按鈕發(fā)布，在屬性欄中選擇樣式。同樣可以設(shè)置上傳控件的樣