1、 Dreamweaver網頁設計與制作案例教程實訓報告專業:計算機網絡技術年級:2013級姓名:學號:輔導老師：制作電子商務類網站首頁一、網站建設的前期準備工作1、網站整體需求分析網站整體需求主要包括以下幾個方面：1）網站建設背景及目標2）網站建設現狀分析3）網站建設目標分解4）網站建設資金及人員投入情況分析2、確定網站風格根據電子商務網站的特點，確定網站的整體風格，即網站的色彩和版 式。網站風格是在網站整體需求分析的基礎上， 通過明確網站設計的 目的和用戶需求、訪問者的特點等得出的結論。本實例是針對一個工 業產品交易平臺的網站，網站與用戶交互性強，因此確定其主色調為 暖色系的橘黃色給人以輕松

2、愉快的瀏覽環境。 如圖是電子商務網站的LOGO3、網站素材搜集明確網站主題和劃分板塊后，接著要為后續的網站建設搜集素材。 若 想讓網站有聲有色，能夠吸引客戶注意，就要盡量搜集文字、圖片、 音頻、視頻、動畫等多媒體素材。對于一些通用素材，可以從網上搜 集得到，也可以根據需求自行制作素材，比如，通過 Photoshop圖像 處理軟件對圖像進行優化處理，使用 Flash制作動畫等。如圖所示。二、創建站點1、網站建設的第一步是創建本地站點。2、創建的站點信息將顯示在“文件”面板中。如果需要對站點參數 進行修改，可以單擊“站點t管理站點”對站點進行重新設置。三、網站主頁制作1. 使用Div+CSS布局頁

3、面使用Div+CSS實現頁面布局，具體操作如下：4）為AP Div元素設置CSS樣式。由于網站首頁和子頁面采取相同 的布局風格，因此樣式表采用外部鏈接樣式表。5）選中創建的AP元素“ contain er ”，在右側的“ CSS樣式”面板 中單擊鼠標右鍵，選擇“新建”命令，打開“新建CSS規則”對話框， 并作相應設置，如圖所示。6）單擊確定按鈕，彈出“ #container的CSS規則定義”對話框，選 擇分類列表框下的“背景”選項卡，設置文檔的“背景顏色”為#FFF; 在分類列表框中，切換到“區塊”選項卡，設置“文本對齊”屬性為 左對齊;在分類列表框中，切換到“方框”選項卡，設置 Ap Div

4、 的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px; “邊框” 和“列表”選項卡的屬性保持默認設置;切換到“定位”選項卡，單 擊確定按鈕， 完成對“ #container ”元素樣式的定義。 設置后的“ CSS 樣式”面板如圖所示。/* = 整體布局定義開始 = */#Container width:960px; /* 定義頁面寬度 */ visibility:visible; /*設置可見度 */margin:1px auto 0; /* 設置外邊距 */ background-color: #FFF;/* 定義背景顏色 */ 2. 設置頁面屬性在 style.css 樣式

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

6、相應設置。3. 插入圖片在頂部的“ top ”元素中插入一幅圖像。如圖所示。4. 添加導航條網頁導航條是非常重要的網頁元素， 網頁間的跳轉， 需要通過導航條1）將光標定位在“ nav” Div 元素中，在其內部輸入列表項，并為 列表項的各個單元設置超鏈接。設置情況如圖所示。2）添加CSS羊式，需要在style.css 文件中輸入相關代碼。#nav height:30px; /* 定義高度 */ width:100%; /* 定義寬度 */ background-color:#c00;/* 定義背景顏色 */ overflow: hidden;/* 定義溢出效果 */ #nav ul font-

7、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,

8、 Helvetica, sans-serif; /* 定義字體 */ color:#FFF; /* 定義字體顏色 */ padding:7px 10px;/* 定義內邊距 */ #nav li a:hover color:#ff0; /*定義字體顏色 */background-color:red; /* 定義背景顏色 */ 該樣式表使用列表項實現導航菜單功能。效果如圖所示。5. 推薦廠家1）把光標置于DIV元素“left ”中，創建新的DIV元素sideBarLeftal , 并定義相關樣式2）在DIV元素“ sideBarLeftal ”的內部插入推薦廠家標志及說明文 字等信息，定義相關樣式

9、如圖所示。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元素“ban

10、ner”中，插入一個已經準備好的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; /* 定義邊框的顏色、粗細、樣式 *

11、/width:390px; /*定義寬度 */.hotdisplay:inline; /*定義區塊顯示效果 */border:#999 1px solid; /* 定義邊框的顏色、粗細、樣式 */width:91px; /* 定義寬度 */height:70px; /* 定義高度 */float:left; /* 定義浮動位置 */margin:2px; /*定義外邊距 */7. 頁面右側欄目設計1）將光標置于 DIV 元素“ right ”中，插入已經準備好的圖片service.jpg 。如圖所示。2）在 service.jpg 下面插入兩個 div ，分別定義為 .sideBarRight

12、b3 和 .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; /* 定義邊框的顏色、粗細、樣式*/.sideBarRi

13、ghtb4 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）選中 D

14、iv 元素“ sideBarLeftb2 ”，將光標定位在其內部，創建多 個 新 Div ， 為 了 方 便 日 后 的 維 護 我 們 將 新 建 Div 單 獨 定 義 為 .sideBarLeftb3 。3）選中DIV元素“ sideBarLeftb3 ”，在style.css中添加的代碼如下：定義文本位置 */定義浮動位置 */定義高度 */定義寬度 */定義內邊距 */sideBarLeftb3 text-align:left; /* float:left; /* height:150px; /* width:280px; /* padding:4px; /*4）將光標移到sideB

15、arLeftb3 的DIV元素中，插入兩行列表并對列表設置相關CSS參數。在style.css中添加的代碼如下：.sideBarLeftb3 ul font-size:12px; /* 定義字號 */ line-height:6px; /*定義字體行高 */float:left; /* 定義浮動位置 */width:270px; /* 定義寬度 */margin:0 0 0 5px; /* 定義外邊距 */ padding:0; /*定義內邊距 */5）在列表中添加列表內容，代碼如下：機械 軸由承 閥門 v/a模具 刀具夾具泵 密封件 粉碎機 壓縮機 減速機 機械加工 焊機 風機 機床 彈簧

16、齒輪 鍋爐 更多 6）對列表內容設置相關CSS參數。在style.css中添加的代碼如下:.sideBarLeftb3 li list-style-type:none; /*定義列表類型 */float:left; /*定義浮動位置 */margin-top:2px; /* 定義頂端外邊距 */border-right-width:1px; /* border-right-style:solid; /* border-left-style:none; /* border-right-color:#999; /*定義邊框右邊的寬度 */定義邊框右邊的樣式 */定義邊框左邊的樣式 */定義字體顏色

17、 */line-height:20px; /*定義字體行高 */7）對列表的第一行整體設置為 class=font-c ，第二行整體設置為 class二font-b,并設置相關CSS參數。在style.css 中添加的代碼 如下：.font-c font-size:14px; /* 定義字號 */ font-weight:700; /* 定義字體粗細 */color:#03C; /* 定義字體顏色 */.font-b font-size:12px; /* 定義字號 */ color:#666; /* 定義字體顏色 */ padding:10px 0 1px; /* 定義內邊距 */ 8）選中第

18、一行的首個詞組，如圖中的“機械”，將其單獨定義為 class=font-d,并設置相關CSS參數。UL列表設置效果如圖所示。 在 style.css 中添加的代碼如下：.font-d font-size:16px; /* 定義字號 */ color:#f60; /* 定義字體顏色 */font-weight:700; /* 定義字體粗細 */9）在“ sideBarLeftb2 ”包含的其它DIV元素中，分別添加不同的 列表內容，并將上面介紹的 UL列表樣式添加到這些列表中。至此， 行業欄目列表制作完成，如圖所示。9. 右邊側欄設計設計制作步驟：1）將光標置于元素“ sideBarRightb

19、4 ”的下方，插入 DIV元素，并 定義相關參數：“高” 129像素、“寬” 310像素，“邊框”為 1 像 素的邊框，將此樣式命名為類 “sideBarRightb1 ”。2）在新建的DIV中插入欄目標題DIV，并設置其邊距及文字對齊方 式，然后在該DIV元素中輸入文字“創業加盟”。3）將光標置于欄目標題 DIV的下方，創建圖片的DIV元素，并設置 其邊框浮動為“左對齊”，同時對其邊距進行設置。4） 在該DIV中插入準備好的圖片，在右側插入 UL列表項目，效果如 圖所示。5）用同樣的方法制作如圖所示的“庫存二手”欄目，需要修改其背景色參數，該DIV的類名定義為“ sideBarRightb2

20、 ”。代碼如下：.sideBarRightb1 height:129px; /* 定義高度 */width:310px; /* 定義寬度 */border:#ebcbb4 1px solid; /*定義邊框的顏色、粗細、樣式*/margin-top:5px; /* 定義頂端外邊距 */.sideBarRightb2 height:129px; /* 定義高度 */width:310px; /* 定義寬度 */ border:#ebcbb4 1px solid; /* 定義邊框的顏色、粗細、樣式 */ background:#E8E8E8; /* 定義背景顏色 */margin-top:3px;/* 定義溢出效果 */ 根據上面介紹的方法，制作右邊側欄的其它內容。10. 網頁