網(wǎng)設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告

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

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

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

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

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

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

7、size:12px; /* 定義字號 */ color:#FFF; /* 定義字體顏色 */ line-height:30px; /*定義字體行高 */white-space:nowrap; /* 定義區(qū)塊空格 */ margin:0 0 0 30px; /* 定義外邊距 */ padding:0; /* 定義內(nèi)邊距 */ #nav li list-style-type:none; /* 定義列表類型 */ display:inline; /* 定義區(qū)塊顯示效果 */ #nav li a text-decoration:none; /* 定義字體修飾 */ font-family:Arial,

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

9、如圖所示。3） 在 style.css樣式表中插入下面的代碼，#left float:left; /* 定義浮動(dòng)位置 */ width:640px;/* 定義寬度 */ height:832px; /* 定義高度 */.sideBarLeftb1 width:238px; /* 定義寬度 */height:240px; /* 定義高度 */border:#ebcbb4 solid 1px; /* 定義邊框的顏色、粗細(xì)、樣式 */6. 網(wǎng)頁廣告設(shè)計(jì)制作1）將光標(biāo)置于 div 元素“ #left ”中，插入一個(gè)嵌套的 div 元素 #sideBarLefta2 ，2 ）將光標(biāo)置于DIV元素“ban

10、ner”中，插入一個(gè)已經(jīng)準(zhǔn)備好的SWF元素。3）選中“ banner”下面DIV元素，并定義類為“ hot”，在4個(gè)小 DIV 元素中分別插入準(zhǔn)備好的廣告圖，效果如圖所示 style.css 樣式表中插入的代碼如下： #sideBarLefta2 float:left; /* 定義浮動(dòng)位置 */width:390px; /*定義寬度 */height:268px;/* 定義高度 */overflow: hidden;/* 定義溢出效果 */#banner margin-top:5px; /* 定義頂端外邊距 */border:#999 solid 1px; /* 定義邊框的顏色、粗細(xì)、樣式 *

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

12、b3 和 .sideBarRightb4 ，在新建的 div 中插入準(zhǔn)備好的廣告圖像 ad1.jpg 和 ad2.jpg 并在屬性面板中定義超鏈接，效果如圖所示。在 style.css 中添加的代碼如下：#right float:left; /* width:320px;/* height:832px; /* .sideBarRightb3 height:60px; /*定義浮動(dòng)位置 */定義寬度 */定義高度 */定義高度 */margin-top:5px; /* 定義頂端外邊距 */border:#ebcbb4 1px solid; /* 定義邊框的顏色、粗細(xì)、樣式*/.sideBarRi

13、ghtb4 height:93px; /* 定義高度 */margin-top:5px; /* 定義頂端外邊距 */border:#ebcbb4 1px solid; /*定義邊框的顏色、粗細(xì)、樣式 */margin-bottom:5px; /* 定義底端外邊距 */.sideBarRightb3,.sideBarRightb4 img text-align:center; /* 定義文本位置 */padding:5px; /* 定義內(nèi)邊距 */8. 行業(yè)欄目設(shè)計(jì)1）將光標(biāo)置于 DIV 元素“ left ”中，在其下側(cè)插入一個(gè)嵌套的 DIV 元素“ sideBarLeftb2 ”。2）選中 D

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

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

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

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

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

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

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