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