第一篇：實訓報告-網頁制作與網站建設項目實戰

《網頁制作與網站建設項目實戰》

實訓報告冊

系部： 專業： 指導老師： 班級：

同組人員： 實訓時間 學號: 姓名： 實訓成績： 批閱時間：

江蘇財經職業技術學院

目錄

一、實訓目的....................................................................................3

二、實訓任務....................................................................................4

三、實訓要求....................................................................................5

四、實訓設計說明............................................................................6

五、實訓中遇到的問題和解決方法..............................................17

六、心得體會..................................................................................18

一、實訓目的

1．進一步熟悉和掌握網站建設的基本流程和技術規范； 2．鞏固網頁設計中各種HTML標記的使用。

3．鞏固運用Dreamweaver軟件創建網站，邊界和創建網頁，Fireworks，photoshop圖像處理軟件進行網頁中圖形制作和運用flash動畫，背景音樂文件，視頻文件豐富網頁內容的知識；

4．鞏固運用網頁模板，使用恰當布局技術實現網頁的合理布局和內容的編排；

5．鞏固運用網頁特效，網頁行為給網頁添加簡單交互功能； 6．鞏固運用CSS樣式表實現網頁，網站整體風格，樣式的設置。8.熟悉使用Dreamweaver和CMS系統開發簡單動態網頁的能力。9．具備獨立撰寫實訓報告等科技文件的基本能力；

10．在網頁設計的實踐中培養分析問題、解決問題的能力，培養協作、交流的能力，培養創新能力和團隊意識；

11．為今后從事網站開發、維護和管理奠定基礎。

二、實訓任務

1．站點規劃，搜集資料。確定網站主題內容，規劃站點結構，從網上搜索相關資料（圖片、文字等）。

2．進行主頁設計。構思主頁布局，進行主頁標題圖片的設計（力求原創，使用學過的繪圖軟件），進行主頁其余圖片的設計和頁面內容的錄入，最后進行主頁的整體優化設計。

4．網頁設計。除主頁以外的網頁設計，首先設計網頁模版，一部分網頁由模版生成，一部分為單獨設計（依據實際需要確定哪些網頁由模版生成，確定哪些網頁單獨設計）。包括版面設計和圖形設計、內容錄入等。

5．多媒體使用。在網頁上使用網絡上的多媒體素材，或者可以自己創作多媒體素材，實現網頁的內容多樣性，增加網站的美觀和趣味性。

6．創建數據庫，鏈接數據庫，添加簡單動態網頁，實現部分數據的維護和更新。

綜合優化。鏈接正確、得當，動態效果好（時間軸動畫、行為、代碼的嵌入等）

7．網站測試并遞交。在瀏覽器中對完成的網站逐頁打開測試，包括鏈接正確與否，頁面打開時間，圖片和動畫是否丟失等。

8．說明：實訓報告中第一、二、三、部分為復印，四部分為分組打印，第五、六部分手寫。

三、實訓要求

1．網站題材選擇。

（1）班級網站（2）旅游景點網站（3）個人網站（4）網上書店（5）網上商店（6）課程學習網站（7）公司網站（8）學校網站

2．分組實現和各自網站風格對應的留言板，或者部分新聞發布管理功能。3．實訓技術要求。

頁面布局合理，色彩和諧，鏈接正確，圖文并茂并茂。網站頁面大小應該滿足800*600分辨率的客戶，兼顧1024*768分辨率。

主要圖片和動畫為原創（保存有源文件），主頁標題圖片（動畫）必須為原創。必須且合理使用動態技術（包括行為、時間軸動畫、嵌入代碼等），必須且合理運用模版、庫文件。

站點中網頁總數不少于8頁。

四、實訓設計說明

1．網站主題說明（給出網站名稱，為什么選擇本主題網站，網站風格特色說明）

1、網站名稱：旅游網站

2、選擇本網站的的原因：選擇旅游網站是因為我們身居江蘇這個風景迷人的地方，在這里學習了接近2年的時間，對江蘇淮安的文化有了更深的理解。尤其是淮安的景點，那有著古典氣息的文化色彩，讓我們對它有著很大的熱愛。

3、網站風格特色：我們無的網站的主要特色是以古老的淮河文化為主業面板，運用透明flash實現古色古香的氣息，讓旅客看到這個頁面有身臨其境的感覺。2．網站總體設計（說明設計思路，給出網站總體結構圖，參考實訓指導書）3．網站主體風格設置，網站整體CSS樣式表文件或網站模板，庫，使用文字加效果圖說明。4．網站主頁設計（網頁主頁布局設計，畫出主頁主要內容布局圖）

5．網站各個功能模塊的功能及實現（每個功能部分功能說明，使用的主要技術，運行截圖）．網站特色，關鍵模塊介紹（請結合具體的文字介紹，還有功能展示截圖進行說明。該部分可以為網站的創意，網站的架構，網站的整體版式，網站的風格，還可以是網站使用的典型的特效，突出的功能模塊等）

五、實訓中遇到的問題和解決方法

六、心得體會

第二篇：網頁制作實訓報告

《網站設計與制作》實訓報告

X學院XX班XXX號

一．實訓時間：

2010年6月7日到2010年6月13日

二．實訓地點：

XXX學院XXX班級

三．實訓組員：

XXX、XXX

四．實訓目標：

運用網頁設計方法，設計一個網站，提高綜合應用所學知識的能力，積累Web網站的制作經驗，培養團隊協作精神。本次實訓的具體目標為:了解網站制作的一般流程;熟練使用網頁制作工具Dreamweaver、Flash、Fireworks設計網頁;能靈活運用表格、層和框架布局頁面;熟練使用CSS樣式表美化網頁;正確使用JavaScript添加網頁特效;靈活使用模板和庫來制作網頁；學會申請免費域名空間和正確上傳站點的方法。

五．實訓策劃：

這一周，我們要進行《網站設計與制作》實訓，我們認為做網站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之后，確定制作以“婚紗”為主題的“喜多坊時尚婚紗網”。在之后的資料收集和網頁的框架的建設中，我們發現了許多問題，某些關鍵點無法做出心中的效果，這讓我們有些遺憾。通過自身及組員的共同探索，我們已盡權利將以下是我們的策劃內容：

1.確定主題。制作網頁,首先是確定主題，冬天很冷,卻冷得很幸福，剛剛過去的圣誕的熱鬧勁還在心頭。于是我們從幸福出發，想到了結婚-婚紗，建立一個簡單的介紹婚紗的網站并取名喜多坊時尚時尚婚紗,專業介紹一些喜多坊婚紗的特色等。我們本次間的網站基本以粉紅為基點，粉紅是可愛清純的顏色，粉紅代表著幸福溫馨，所以本站以粉紅為風格，讓整個網站充滿愛的力量。

2.設計主頁。主頁的設計是整個網站的靈魂，構思導航欄的分類，然后是整體規劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，我們構思大致

分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯系，在線論壇8大板塊，每一板塊又分幾小部分，內容比較充分，多樣。確定導航欄的各個分類標題之后對于建立二級子網尤為重要，我們運用Photoshop CS3技術來設計出導航欄，制作切片，建立導航欄，將整體的主頁效果建立起來。

3.資料的搜集。主頁的導航欄設計好后，接下來就是對主頁導航欄的各個內容進行資料的收集，我們采用大量的資料收集再對資料進行塞選p圖，得到最適合導航欄內容的資料。素材的選擇，要符合網站的主題，圖片的大小要符合模板的輪廓，我們將不符合模板的用Photoshop處理編輯，然后放入站點底下，進行圖文的鏈接和排版。

4.各個子網頁的建立。我們設計好模板后只要在可編輯區依次編輯所需資料就可，運用模板建立子網頁少了很多工序，為我們節省大量的時間。盡管我們建立了模板，但我們在建立子網時很小心，因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時，因此我們對所插入的圖片和表格都得進行測量，做到不影響網站整體的美觀。

5.實現網頁間的鏈接。做好個格子網和首頁后，接下來就是通過模板的鏈接，將整個網站中的網頁鏈接起來，過程其實很簡單，主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。做好這一步后，網站基本算是建好了。

6.向靜態網頁插入動態效果。在基本建好網頁中的插入層和時間軸，制作其動態效果，讓整個網頁充滿生機。我們在網上進行flash素材的收集，通過Flash CS3設計出主題下的風格動態效果。然后插入到靜態網頁中，使網頁更加生動形象。

六．實訓心得：

通過這周的學習實踐，在老師的指導下以大量明晰的操作步驟和典型的應用實例，使我們真正對所學的軟件融會貫通。我們結合年輕人心理制作了時尚婚紗網站，作為實訓的成果。其內容是多樣化的，制作網頁用的軟件是Deamweaver CS3軟件。它提供了網頁和表單的動態生成到網站的解決方案。主圖是一個網頁的門面，它能體現出這個網頁的整體風格。

制作網頁,首先是確定主題,經過再三考慮,就做了個關于婚紗的網站。考慮到,現在城市普遍幸福感不高，加上寒冬，于是以幸福為論點擴展想到了結婚，想到了婚紗，想到了未來的美好城市生活，城市讓生活更美好，結婚讓生活更完整婚紗讓生活更多姿！想到這些，我們最后決定建立一個簡單的介紹都市婚紗的網站,讓這個冬天不再寒冷，讓我們回憶起那些幸福的日子。于是網站主題確立。

然后是整體規劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯系，在線論壇，每一部分又分幾小部分，內容比較充分，多樣。

再后是收集資料與素材，大量瀏覽相關網站，收集關于婚紗的圖片，進行Photoshop CS3圖片處理和排版，插入好的文章和圖片等，還有參考一些好的網站的布局，特色，顏色搭配，背景圖等。

再后是設計網頁圖片，用flash制作動畫，用Photoshop制作靜態圖片。再后是建立站點，和制作網頁了，使用dreamweaver制作。

首頁內容精彩豐富，首頁主要是導航作用。首頁制作時，時刻考慮著網頁的基本原則：統一，連貫，分割，對比及和諧的原則，內容統一，都是為了主題服務，一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統成一體；每版內容都自成一體，顏色各異，便于瀏覽；整個網頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。

簡潔實用: 這是非常重要的，網絡特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協調，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。

利用我們所學的模板設計，制作更完美的頁面。將動態網頁與靜態網頁結合起來

再后，調試過程，好多次本來在Deamweaver CS3里好好的，把字調的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，經過再三調試，整理，加了好多表格，終于滿意了。

通過溫本周的實訓，發現自己還有很多的不足。框架的應用很難把握，切片也很難合理切割，當插入圖片的時候把原有的模板給撐破了，精確定位很重要。

因為學藝不精，所以不會網頁的代碼設計，只能通過網絡三劍客綜合使用。不過也實踐中也學到了很多知識，表格的嵌套是非常重要的，CSS樣式的應用也很便捷。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。

第三篇：網頁設計與制作實訓報告[范文]

《網頁設計與制作》

實習報告

指導老師：

實習地點：

實習時間：

實習班級：

學生姓名：

一、實習目的① 學會制作新聞發布系統。

② 學會制作在線調查系統。

③ 熟悉購物網站的主要功能和欄目。

④ 學會購物網站數據庫表的創建和數據庫連接的創建。

⑤ 學會購物系統前臺頁面制作和后臺管理制作。

二、實訓內容

1.創建數據庫表

① 啟動Microsoft Access，執行“文件”——“新建”命令，打開“新建文件”面板，在面板中單擊“空數據庫”。

② 彈出“文件新建數據庫”對話框，在對話框中選擇數據庫保存的路徑，“文件名”文本框中輸入shop。

③ 單擊“創建”按鈕，在對話框中雙擊“使用設計器創建表”選項。

④ 彈出“表1：表”對話框，在對話框中輸入“字段名稱”和字段所對應的“數據類型”，將shopID字段設置為主鍵。

⑤ 執行“文件”——“保存”命令，彈出“另存為”對話框，在對話框的“表名稱”文本框中輸入products。

⑥ 單擊“確定”按鈕，保存表。按以上步驟的方法，創建表fen和admin。

2.創建數據庫連接

新建一個網頁文件夾，打開IIS信息服務，創建IIS虛擬目錄，在文件夾安全性把來賓用戶的權限修改為完全控制，并導入數據庫。

3.制作購物網系統頁面

① 用index.html創建zhanshi.asp商品分類展示頁，新建站點，導入shop.mdb數據庫文件建立數據庫連接。插入表格并插入圖片、文字，創建記錄集并在表格相應位置綁定數據。在服務器行為里為表格設置重復區域，創建記錄集RS2并在左邊的商品分類表格里綁定

數據，在服務器行為里為左側的表格添加重復區域和轉到詳細頁，制作記錄集導航條。

② 用index.html創建xiangxi.asp商品詳細信息頁，首先創建記錄集并制作左側的商品分類表格，之后在中間區域插入表格，在表格中插入圖片、文字，創建記錄集RS2并將數據綁定在表格相應位置。

③ 用index.html創建denglu.asp商品詳細信息頁,創建記錄集并制作左側的商品分類表格，在中間區域插入表單，在表單里插入表格，在表格里插入文字、文本域、表單按鈕，并為表單設置檢查表單。創建記錄集RS2并在服務器行為里添加登錄用戶。

④ 用index.html創建fenlei.asp添加商品分類頁，插入表單，在表單里插入文字、文本域、表單按鈕，創建記錄集并在服務器行為里添加插入記錄和限制對頁的訪問。再用index.html創建fenleiok.asp,在其中插入表格輸入文字，并設置返回鏈接。

⑤ 用index.html創建tianjia.asp添加商品頁，創建記錄集，用插入記錄表單向導創建插入記錄表單，在服務器行為里添加限制對頁的訪問。再用index.html創建tianjiaok.asp,在其中插入表格輸入文字，并設置返回鏈接。

⑥ 用index.html創建guanli.asp商品管理頁，創建記錄集并制作左側的商品分類表格，在中間區域插入表格并插入文字，創建記錄集RS2并在表格相應位置綁定數據，為該表格設置服務器行為的重復區域，制作修改和刪除鏈接，制作記錄集導航條。

⑦ 用tianjia.asp創建xiugai.asp修改頁面，創建記錄集在對應的文本域中綁定數據，把服務器行為里的插入記錄刪除并添加更新記錄。在服務器行為里添加限制對頁的訪問。再用index.html創建xiugaiok.asp,在其中插入表格輸入文字，并設置返回鏈接。

⑧ 用index.html創建shanchu.asp刪除頁面,插入表格并插入文字，建立記錄集，在表格相應位置綁定數據，插入表單和表單按鈕，創建服務器行為限制對頁的訪問和刪除記錄。再用index.html創建shanchuok.asp,在其中插入表格輸入文字，并設置返回鏈接。

三、疑難解惑

① 網頁不能正常打開，電腦用戶權限沒有修改，在文件夾安全性把來賓用戶的權限修改為完全控制。

② 創建重復區域時，總顯示相同的內容，仔細閱讀教材，發現創建重復區域時要選中表格，而不是文字內容。

③ 登陸頁面不能登陸，把表格放入表單后，重新登錄，問題解決。

④ 創建添加商品頁面時，無法顯示商品分類。在插入記錄表單時，應將feileiID“顯

示為”下拉列表中選擇“菜單”，并在“菜單屬性”里的“域”列表中選擇fenlei。

⑤ 修改頁面點進去初始內容都一樣，“唯一鍵列”下拉列表中應選擇shpID。

⑥ 商品分類點進去每個種類都一樣，查找原因，發現記錄集中篩選是shpID，把記錄集中的篩選改為fenleiID解決。

四、實訓心得

經過一周動態網頁的實訓，使我們對本學期的這門課進行了整體的匯總。在這匯總期間，也算是對自己本學期的一個考核，此次實訓暴露出了許多我自身存在的問題，同時也對自身有了很大的提高。

在這次實訓中，我也有許多收獲。首先，我體會到了作為一個計算機專業的人，不會用DW的痛苦和尷尬。在制作的過程中遇到問題，可以說得是困難重重，這畢竟是第一次獨自制作動態網頁，難免會遇到過各種各樣的問題，同時在制作的過程中發現了自己的不足之處，對以前所學過的知識理解得不夠深刻，掌握得不夠牢固。在此過程當中彌補了我許多知識上的缺陷，弄清的以前沒有搞懂的知識點。經過多番的努力和辛酸，我成功地完成了這次過程艱辛的實訓，而且我從中體會到了一種叫做‘成功的喜悅’的感覺，那種小有成就的興奮是只有置身其中的人才能體會的。

在實訓過程中，我更體會到了基礎知識的重要性，也許我們正在迷惘，我們是否學到了東西，但事實說明零零散散的知識，在項目開發當中起到了非常關鍵的作用，我們不缺少時間和工具，我們只是缺少經驗和動手能力，如果我們以后能更好的在各方面增長自己的經驗，相信我們能在長長的就業隊伍中脫穎而出的！相信自己，相信未來。今后我將會更加努力的學習，不斷提高自身素質，為我將來的就業打下良好的基礎

第四篇：網頁設計與制作實訓報告

《Dreamweaver網頁設計與制作案例教程》

實訓報告

專 業： 計算機網絡技術 年 級： 2013級 姓 名： 學 號： 輔導老師：

制作電子商務類網站首頁

一、網站建設的前期準備工作

1、網站整體需求分析

網站整體需求主要包括以下幾個方面： 1)網站建設背景及目標 2)網站建設現狀分析 3)網站建設目標分解

4)網站建設資金及人員投入情況分析

2、確定網站風格

根據電子商務網站的特點，確定網站的整體風格，即網站的色彩和版式。網站風格是在網站整體需求分析的基礎上，通過明確網站設計的目的和用戶需求、訪問者的特點等得出的結論。本實例是針對一個工業產品交易平臺的網站，網站與用戶交互性強，因此確定其主色調為暖色系的橘黃色給人以輕松愉快的瀏覽環境。如圖是電子商務網站的LOGO。

3、網站素材搜集

明確網站主題和劃分板塊后，接著要為后續的網站建設搜集素材。若想讓網站有聲有色，能夠吸引客戶注意，就要盡量搜集文字、圖片、音頻、視頻、動畫等多媒體素材。對于一些通用素材，可以從網上搜集得到，也可以根據需求自行制作素材，比如，通過Photoshop圖像處理軟件對圖像進行優化處理，使用Flash制作動畫等。如圖所示。

二、創建站點

1、網站建設的第一步是創建本地站點。

2、創建的站點信息將顯示在“文件”面板中。如果需要對站點參數進行修改，可以單擊“站點→管理站點”對站點進行重新設置。

三、網站主頁制作

1.使用Div+CSS布局頁面

使用Div+CSS實現頁面布局，具體操作如下：

4）為AP Div元素設置CSS樣式。由于網站首頁和子頁面采取相同的布局風格，因此樣式表采用外部鏈接樣式表。

5）選中創建的AP元素“container”，在右側的“CSS樣式”面板中單擊鼠標右鍵，選擇“新建”命令，打開“新建CSS規則”對話框，并作相應設置，如圖所示。

6）單擊確定按鈕，彈出“#container的CSS規則定義”對話框，選擇分類列表框下的“背景”選項卡，設置文檔的“背景顏色”為#FFF；在分類列表框中，切換到“區塊”選項卡，設置“文本對齊”屬性為左對齊；在分類列表框中，切換到“方框”選項卡，設置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項卡的屬性保持默認設置；切換到“定位”選項卡，單擊確定按鈕，完成對“#container”元素樣式的定義。設置后的“CSS樣式”面板如圖所示。

/* ==整體布局定義開始== */ #Container { width:960px;/*定義頁面寬度*/ visibility:visible;/*設置可見度*/ margin:1px auto 0;/*設置外邊距*/ background-color: #FFF;/*定義背景顏色*/ } 2.設置頁面屬性

在style.css樣式表文件內部設置網頁的頁面屬性。頁面屬性是對標簽屬性的設置。代碼如下所示： body{ font-size:12px;/*定義字號*/ color:#666;/*定義字體顏色*/ background:#FFF;/*定義背景顏色*/ text-align:center;/*定義文本位置*/ margin:0;/*定義外邊距*/ padding:0;/*定義外邊距*/ border:0;/*定義邊框粗細*/ background: transparent;/*定義背景透明*/ } 也可以打開index.html，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進行相應設置。

3.插入圖片

在頂部的“top”元素中插入一幅圖像。如圖所示。

4.添加導航條

網頁導航條是非常重要的網頁元素，網頁間的跳轉，需要通過導航條來完成。

1）將光標定位在“nav” Div元素中，在其內部輸入列表項，并為列表項的各個單元設置超鏈接。設置情況如圖所示。

2）添加CSS樣式，需要在style.css文件中輸入相關代碼。#nav { height:30px;/*定義高度*/ width:100%;/*定義寬度*/ background-color:#c00;/*定義背景顏色*/ overflow: hidden;/*定義溢出效果*/ } #nav ul { font-size:12px;/*定義字號*/ color:#FFF;/*定義字體顏色*/ line-height:30px;/*定義字體行高*/ white-space:nowrap;/*定義區塊空格*/ margin:0 0 0 30px;/*定義外邊距*/ padding:0;/*定義內邊距*/ } #nav li { list-style-type:none;/*定義列表類型*/ display:inline;/*定義區塊顯示效果*/ } #nav li a { text-decoration:none;/*定義字體修飾*/ font-family:Arial, Helvetica, sans-serif;/*定義字體*/ color:#FFF;/*定義字體顏色*/ padding:7px 10px;/*定義內邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項實現導航菜單功能。效果如圖所示。

5.推薦廠家

1）把光標置于DIV元素“left”中，創建新的DIV元素 sideBarLefta1，并定義相關樣式

2）在DIV元素“sideBarLefta1”的內部插入推薦廠家標志及說明文字等信息，定義相關樣式如圖所示。

3）在style.css樣式表中插入下面的代碼，#left { float:left;/*定義浮動位置 */ width:640px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarLeftb1 { width:238px;/*定義寬度 */ height:240px;/*定義高度*/ border:#ebcbb4 solid 1px;/*定義邊框的顏色、粗細、樣式*/ } 6.網頁廣告設計制作

1）將光標置于div元素“#left”中，插入一個嵌套的div元素#sideBarLefta2，2）將光標置于DIV元素“banner”中，插入一個已經準備好的SWF元素。

3）選中“banner”下面DIV元素，并定義類為“hot”，在4個小DIV元素中分別插入準備好的廣告圖，效果如圖所示

style.css樣式表中插入的代碼如下： #sideBarLefta2 {

float:left;/*定義浮動位置 */ width:390px;/*定義寬度 */ height:268px;/*定義高度*/ overflow: hidden;/*定義溢出效果*/ } #banner { margin-top:5px;/*定義頂端外邊距*/ border:#999 solid 1px;/*定義邊框的顏色、粗細、樣式*/ width:390px;/*定義寬度 */ }.hot{ display:inline;/*定義區塊顯示效果*/ border:#999 1px solid;/*定義邊框的顏色、粗細、樣式*/ width:91px;/*定義寬度 */ height:70px;/*定義高度*/ float:left;/*定義浮動位置 */ margin:2px;/*定義外邊距*/ } 7.頁面右側欄目設計

1）將光標置于DIV元素“right”中，插入已經準備好的圖片service.jpg。如圖所示。

2）在service.jpg下面插入兩個div，分別定義為.sideBarRightb3和.sideBarRightb4，在新建的div中插入準備好的廣告圖像ad1.jpg和ad2.jpg并在屬性面板中定義超鏈接，效果如圖所示。

在style.css中添加的代碼如下： #right { float:left;/*定義浮動位置 */ width:320px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarRightb3 { height:60px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/ border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細、樣式*/ }.sideBarRightb4 { height:93px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/

border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細、樣式*/ margin-bottom:5px;/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定義文本位置 */ padding:5px;/*定義內邊距*/ } 8.行業欄目設計

1）將光標置于DIV元素“left”中，在其下側插入一個嵌套的DIV元素“sideBarLeftb2”。

2）選中Div元素“sideBarLeftb2”，將光標定位在其內部，創建多個新Div，為了方便日后的維護我們將新建Div單獨定義為.sideBarLeftb3。

3）選中DIV元素“sideBarLeftb3”，在style.css中添加的代碼如下：

sideBarLeftb3 { text-align:left;/*定義文本位置 */ float:left;/*定義浮動位置 */ height:150px;/*定義高度*/ width:280px;/*定義寬度 */ padding:4px;/*定義內邊距*/ } 4）將光標移到sideBarLeftb3的DIV元素中，插入兩行列表并對列表設置相關CSS參數。在style.css中添加的代碼如下：.sideBarLeftb3 ul { font-size:12px;/*定義字號*/ line-height:6px;/*定義字體行高*/ float:left;/*定義浮動位置 */ width:270px;/*定義寬度 */ margin:0 0 0 5px;/*定義外邊距*/ padding:0;/*定義內邊距*/ } 5）在列表中添加列表內容，代碼如下：