【正文】 象 沒有任何定位樣式屬性，則它們將在頁中從上至下、從左至右或從右至左排列，具體取決于頁的 dir 屬性的設(shè)置、 對象 的容器 對象 或瀏覽器的語言設(shè) 置。如果調(diào)整頁的大小， 對象 有時將被重新定位。但是， 對象 不能重疊 ，只能包含嵌套，外觀上顯現(xiàn)為一層 。 兩維定位 ： 應(yīng)用 絕對 定位選項，可將 對象 放置在頁中的精確位置。定位選項在實現(xiàn) W3C HTML 標準的任何瀏覽器中都有效。位置 0,0 基于當(dāng)前 對象 的父級定義 ， 父級是具有定位信息的第一個容器 對象 。如果當(dāng)前 對象 沒有帶定位信息的容器 對象 ，則將基于 body 對象 計算定位信息。此選項與 absolute 的區(qū)別在于， 0,0 位置是根據(jù) 對象 在頁面流中的位置來定義的。 注意 ： 使用絕對或相對定位的 對象 在頁中可能會不按照頁標記聲明中的順序顯示，這可能會引起混亂。 static： 對象 使 用流布局呈現(xiàn)；即 對象 不使用兩維定位。 注意：以上文字在你成為 布局 高手時來看，就不難了。 1．網(wǎng)站基本布局圖示 14 網(wǎng)站的整體布局主要是對母版 頁 進行設(shè)計 。 圖 網(wǎng)站各頁面的基本布局 2．網(wǎng)站布局的 HTML代碼 上面布局圖示 對應(yīng)的 html代碼如下： div class=divAll div class=headdiv div class=logodiv /div div class=menudiv /div /div div class=bodydiv div class=bodyleft /div div class=bodyright /div /div div class=bottdiv /div /div 注意：一個完整的 div 格式為 div… /div；看清 DIV 的嵌套包含關(guān)系。 母版頁的 HTML 主要代碼 進入母版頁的設(shè)計界面，對 母版頁 輸入 下 述 html 代碼 。 ContentPlaceHolder 控件 在 母版頁中 至少要有一個。如在 Visual 2020 中開發(fā)，則 綠 色下劃線不會出現(xiàn)。 在 CSS 文件夾上右擊，點選“添加新項” 。 樣式文件是用于定義 html頁中各種對象的屬性值的文本，屬性值一般有：寬度，高度，顏色，字體，位置，動作等多種，是頁面美工的關(guān)鍵文件。 注意：樣式文件的路徑及引用問題 。 {}中為類的樣式 參數(shù)地 。最后點“確定” ，就會自動生成樣式參數(shù) 值 。 圖 啟動“生成樣式”工具 2．使用“生成 樣式 ”工具 。 生成樣式工具 17 圖 使用“生成樣式”工具生成樣式 屬性 值 3． 在 文件中 生成的 完整 樣式 屬性值 body { textalign: center。 } /* 字體大小 */ .divAll { fontfamily: 宋體 , Arial, Helvetica, sansserif。 } .headdiv { width: 1010px。 /*邊框?qū)挾阮伾? * width: 1010px。 } .menudiv { border: 1px solid FF0000。 height: 26px。 /* 邊框線類型 */ borderwidth: 0px 1px 0px 1px。 borderrightcolor: FF0000。 } .bodyleft { borderstyle: none solid none none。 bordercolor: FF0000。 /*float表示浮動 ,是 div定位的要點 ,不使用 folat,就不能實現(xiàn)左右定位布局 */ width: 760px。 } .bodyright { borderstyle: none none none solid。 bordercolor: FF0000。 /*float表示浮動 ,是 div定位的要點 ,不使用 folat,就不能實現(xiàn)左右定位布局 */ width: 245px。 } .bottdiv { border: 1px solid FF0000。 height: 50px。 優(yōu)先級 規(guī)則 是越內(nèi)層的越高， body是外層， divall是內(nèi)層， 如果 所以body設(shè)居中， divall設(shè)靠左，則 body的居中只作用到 divall， divall的靠左 會作用于其內(nèi)含的對象 ， body的居中 對 divall內(nèi)含的對象 不起作用。 如還有 些 屬性 各層 都未設(shè) 置 ，則起 用 默認值。 高度 height部分以后要刪除或調(diào)整 ， 以防止器容中的對象溢出越界 造成布局破壞 。 CSS 文件的 應(yīng)用 要 用 CSS 文件控制母版頁中所有對象的屬性 ，就 要將樣式文件和網(wǎng)頁文件結(jié)合 起來 ，才能讓樣式文件中定義的樣式屬性作用到網(wǎng)頁中各個對 象類 。此步操作必不可少。 注意：此處為了結(jié)果的美觀，對 DIV 對象的 Height 定義了值， 以后在各個板塊中加入了其它對象后，要考慮刪除 Height 的值，或修改 Height 的值。 圖 布局最終的效果 網(wǎng)頁上加載圖片 或 flash 圖片或 flash 對網(wǎng)站 的美工程度有極重要的作用，離開了圖片或 flash，網(wǎng)站就會單調(diào)無味，沒有生機。 圖 復(fù)制到網(wǎng)站中的圖 形 文件 2． 打開 “ 解決方案資源管理器 ” ，點擊 “ 刷新 ” 圖標，即可 看到 Images 的文件夾 及其 中 剛才加入的圖片文件 圖 刷新看到新加入的圖 形 文件 加載圖片 1． 加入圖片控件，設(shè)置其寬高屬性 。 注意： 100%表示占容器的比例， Image1 圖像控件的容器為 bodyright 層（ DIV）， Image1 對象的 Width為 100%是指 bodyright 層有多寬， Image1 就有多寬 。 22 圖 圖形顯示控件加載圖片文件 4．最簡單的圖片加載方法是，在網(wǎng)頁處于設(shè)計視圖時，將選中的圖片文件直接拖到網(wǎng)頁之中，然后用鼠標調(diào)整大小。 加載 flash文件 加載方法有多種，但最常用的是使用下列代碼進行加載。 div class=divAll div class=headdiv div class=logodiv object classid=clsid:D27CDB6EAE6D11cf96B8444553540000 codebase= style=width: 1010px。 param name=movie value=../images/ / param name=WMODE value=Transparent / %embed src=../images/ width=1010px height=100px /embed% /object /div div class=menudiv /div /div 注意： 這 是 格 式 代 碼 ， 不 能 改 動 。 Width及 height可以調(diào)整 ，但也要一致 。 但考慮兼容性不同瀏覽器及版本，一般保留embed。 2． CSS 樣式可減小網(wǎng)站 布局和 美化的工作量，在網(wǎng)站布局及美化中至關(guān)重要，必須學(xué)會，深入了解。 第 3 章 欄目頁操作 欄目是一個新聞網(wǎng)站的基礎(chǔ) ， 所有新聞最終都歸類到相應(yīng)的欄目之中。甚至各欄目在網(wǎng)站中排布的位置也是可調(diào)整的。 欄目頁的主要功能是對欄目進行以下操作：增加欄目 項 ，修改欄目名，刪除欄目 項 ，變動欄目 項 所在位置。分離的權(quán)限管理可以使得網(wǎng)站權(quán)限清晰，層次分明，同時減少權(quán)限管理的工作量。 建立不同文件夾的目地是方便進行“ 權(quán)限管理 ” 。 這是本網(wǎng)站 建立的 第一個頁面 ，步驟非常詳細，之后的網(wǎng)頁新建 過程 就會略過 。如圖 。 如圖 24 圖 新建有母版頁的欄目操作頁 3． 選擇母版頁，點“確定” 。 為 Title=欄目操作 ，如 圖， 此為網(wǎng)頁的標題名。 圖 修改前的代碼 圖 修改以后的代碼 欄目頁設(shè)計制作 準備 點 頁的 “設(shè) 計”進 入 設(shè)計 視圖 ， 點圖標 打開工具箱。 工具箱中的 控件 對象要加入到網(wǎng)頁中才能發(fā)揮作用。 25 圖 工具箱中 控件 對象 加入頁面 操作 欄目頁 中 GridView 對象操作 加入 GridView1 對象 顯示表格數(shù)據(jù)是軟件開發(fā)中的一個 基本 任務(wù)。通過使用 GridView 控件，可以顯示、編輯和刪除多種不同的數(shù)據(jù)源中的數(shù)據(jù)。 使用 GridView 可以執(zhí)行以下操作： ? 通過數(shù)據(jù)源控件自動綁定和顯示數(shù)據(jù)。 還可以通過執(zhí)行以下操作來自定義 GridView 控件的外觀和行為： ? 指定自定義列和樣式。 ? 通過處理事件將自己的代碼添加到 GridView 控件的功能 中。 如 圖 為加入網(wǎng)頁后 GridView1 對象 的初始狀態(tài)。 要讓 GriaView顯示 及操作 數(shù)據(jù)，就必須將 GriaView和數(shù)據(jù)庫中的表或抽 取數(shù)據(jù)的 SQL 命令進行綁定。 如 圖 。 圖 GridView1 對象的任務(wù) 2． 新建 GriaView1 對象 的 數(shù)據(jù)源 點 “ 選擇數(shù)據(jù)源 ” 的下拉按鈕，點“新建數(shù)據(jù)源”，再點“數(shù)據(jù)庫”，點“確定” 。 圖 數(shù)據(jù)源的 ID 值 注意：此處對數(shù)據(jù)源沒有重新取名，使用得是系統(tǒng)提供的默認名 SqlDataSource1。 配置 GriaView1 對象的 數(shù)據(jù)源 1. 點下拉框，選中 數(shù)據(jù)庫，點“下一步”， 如圖 。如果 數(shù)據(jù)庫名 沒有出現(xiàn)， 最簡單可靠的方法是 將 VS 系統(tǒng)關(guān)掉，重新再打開，即可 ， 還 否則是未建數(shù)據(jù)庫 。 點“下一步”。 GriaView1對象 數(shù)據(jù)源中表 配置 1. 選中“指定來自表或視圖的列”，在名稱下拉框中選中“欄目”表，并如下勾選欄目表的列（自動生成 SQL 代碼： SELECT [lmid], [欄目名 ], [說明 ], [排序 ] FROM [欄目 ]）。勾選中的字段會在頁面中顯示表中的數(shù)據(jù)記錄，未勾選的則不會。 自動生成 SQL 代碼： SELECT [lmid], [欄目 ], [說明 ], [排序 ] FROM [欄目 ] ORDER BY [排序 ]，如 圖 。 28 圖 配置數(shù)據(jù) 記錄 的排序 數(shù)據(jù)源中生成 SQL 代碼 在 “高級 SQL 生成選項 ” 框 ，勾中“生成 INSERT、 UPDATE 和 DELETE”（此時會自動 在頁面中 生成 SQL 的插入、更新和刪除 等 命令代碼）， 如圖 ?；氐缴弦豁?，點“下一步”，再點“完成” 。以后用存貯過程代替。 GriaView 對象的列操作 編輯 GriaView1 對象中列 將鼠標的箭頭移入 GriaView1 對象之中，點擊 GriaView1 對象右上角的 ，出現(xiàn) GriaView 任務(wù)， 勾中“啟用編輯”，“啟用刪除”項 ， 再去 點 擊“編輯列”。 圖 調(diào)整 GriaView1 中顯示列的順序 2． 刪除“ lmid”列 ，如圖 。 Lmid 為欄目編號，由系統(tǒng)生成，用戶管不到，所以不要顯示出來。 如圖 圖 設(shè)置 GriaView1 對象的寬度 欄目頁中 FormView 對象 FormView 控件用于一次顯示數(shù)據(jù)源中的一個記錄。這些模板包含用于定義窗體的外觀和功能的控件、綁定表達式和格式設(shè)置。 FormView 控件通常用于更新和插入新記錄。 FormView 控件依賴于數(shù)據(jù)源控件的功能執(zhí)行諸如更新、插入和刪除記錄的任務(wù)。 FormView 是數(shù)據(jù)錄入操作的好幫手。 在 DIV 框中點一下，讓光標進入之中，雙擊工 具箱 中 的“ FormView”，加入 一個 FormView1 對象 ， 用回車鍵下移 FormView1 對象，和 GriaView1 對象隔開一點。 圖 加入 FormView1 對象 為 FormView1 對象配置數(shù)據(jù)源 點擊 FormView1 對象的 按鈕，在“選擇數(shù)據(jù)源”下拉框中選中“ SqlDataSource1”。 圖 配置 FormView1 對象的數(shù)據(jù)源 注意： FormView1 對象和 GriaView1 對象共用數(shù)據(jù)源 SqlDataSource1，可簡化很多操作，如數(shù)據(jù)刷新。 ItemTemplate 模板 作用為顯示數(shù)據(jù) ， EditItemTemplate 模板 的作用為編輯數(shù)據(jù) ， InsertItemTemplate 模板的作用為插入數(shù)據(jù)。 其他兩個模塊中的內(nèi)容可刪除。 如 圖 ，圖 此為 ItemTemplate 模板，將其全部刪空。 如 圖 圖 刪空 EditItemTemplate 模板 FormView1中的 模板 布局 網(wǎng)頁中大的布局目