網(wǎng)設計與制作實訓報告_第1頁
網(wǎng)設計與制作實訓報告_第2頁
網(wǎng)設計與制作實訓報告_第3頁
網(wǎng)設計與制作實訓報告_第4頁
網(wǎng)設計與制作實訓報告_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

4、 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 樣式表文

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

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

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

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

9、 定義浮動位置*/width:640px;/* 定義寬度*/height:832px; /* 定義高度*/.sideBarLeftb1 width:238px; /* 定義寬度*/height:240px; /* 定義高度*/border:#ebcbb4 solid 1px; /* 定義邊框的顏色、粗細、樣式*/6. 網(wǎng)頁廣告設計制作1）將光標置于div 元素“ #left ”中，插入一個嵌套的 div 元素#sideBarLefta2 ，2）將光標置于DIV元素“banner”中，插入一個已經(jīng)準備好的 SWF 元素。3）選中 banner”DIV 元素，并定義類為“hot ”，在 4 個小D

10、IV元素中分別插入準備好的廣告圖，效果如圖所示style.css 樣式表中插入的代碼如下：#sideBarLefta2 float:left; /* 定義浮動位置*/width:390px; /* 定義寬度*/height:268px;/* 定義高度*/overflow: hidden;/* 定義溢出效果*/#banner margin-top:5px; /* 定義頂端外邊距*/border:#999 solid 1px; /* 定義邊框的顏色、粗細、樣式*/width:390px; /* 定義寬度*/.hotdisplay:inline; /* 定義區(qū)塊顯示效果*/border:#999 1

11、px solid; /* 定義邊框的顏色、粗細、樣式*/width:91px; /* 定義寬度*/height:70px; /* 定義高度*/float:left; /* 定義浮動位置*/margin:2px; /* 定義外邊距*/7. 頁面右側欄目設計1 ）將光標置于DIV 元素“ right ”中，插入已經(jīng)準備好的圖片service.jpg 。如圖所示。2）在service.jpg 下面插入兩個div ，分別定義為.sideBarRightb3和 .sideBarRightb4 ， 在新建的div 中插入準備好的廣告圖像ad1.jpg和 ad2.jpg 并在屬性面板中定義超鏈接，效果如圖所

12、示。在 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;

13、/* 定義邊框的顏色、粗細、樣式*/margin-bottom:5px; /* 定義底端外邊距*/.sideBarRightb3,.sideBarRightb4 img text-align:center; /* 定義文本位置*/padding:5px; /* 定義內邊距*/8. 行業(yè)欄目設計1）將光標置于DIV 元素“ left ”中，在其下側插入一個嵌套的 DIV元素“ sideBarLeftb2 ”。2）選中Div 元素“ sideBarLeftb2 ”，將光標定位在其內部，創(chuàng)建多個 新 Div ， 為 了 方 便 日 后 的 維 護 我 們 將 新 建 Div 單 獨 定 義為 .si

14、deBarLeftb3 。3）選中DIV元素“ sideBarLeftb3 "，在style.css中添加的代碼如下：sideBarLeftb3 text-align:left; /*定義文本位置*/float:left; /* 定義浮動位置*/height:150px; /* 定義高度*/width:280px; /* 定義寬度*/padding:4px; /* 定義內邊距*/4）將光標移到sideBarLeftb3 的DIV元素中，插入兩行列表并對列表設置相關CS噲數(shù)。在style.css 中添加的代碼如下：.sideBarLeftb3 ul font-size: 12px; /

15、*定義字號 */line-height:6px; /*定義字體行高 */float: left; /*定義浮動位置*/width:270px; /* 定義寬度 */margin:0 0 0 5px; /*定義外邊距 */padding:0; /*定義內邊距*/5）在列表中添加列表內容，代碼如下：<div class="sideBarLeftb3"><ul class="font-c"><a class="font-d"> 機械 v/a>va嘴由承v/a>va> 閥門 </a&

16、gt;va>模具 </a>刀具夾具</a>v/a></ul><ul class="font-b"><li>密封件v/|><li>粉碎機v/|><li>壓縮機v/|>< li> 減速機 </li>< li> 機械加工</li></ul><ul class="font-b">< li> 焊機 </li>< li> 風機</li>

17、< li> 機床</li>< li>彈簧</li>< li>齒輪</li>< li>鍋爐</li>< li>更多</li></ul></div>6）對列表內容設置相關CSS數(shù)。在style.css中添加的代碼如下:.sideBarLeftb3 li list-style-type:none; /*定義列表類型*/float:left; /* 定義浮動位置*/margin-top:2px; /* 定義頂端外邊距*/border-right-width:1

18、px; /* 定義邊框右邊的寬度*/border-right-style:solid; /*定義邊框右邊的樣式*/border-left-style:none; /*定義邊框左邊的樣式*/padding:6px; /* 定義內邊距*/7）對列表的第一行整體設置為class="font-c" ，第二行整體設置為class="font-b",并設置相關CS噲數(shù)。在style.css 中添加的代碼如下：.font-c font-size:14px; /* 定義字號*/font-weight:700; /* 定義字體粗細*/color:#03C; /* 定義字體

19、顏色*/.font-b font-size:12px; /* 定義字號*/color:#666; /* 定義字體顏色*/padding:10px 0 1px; /* 定義內邊距*/8）選中第一行的首個詞組，如圖中的“機械”，將其單獨定義為class="font-d",并設置相關CS噲數(shù)。UL列表設置效果如圖所示。在 style.css 中添加的代碼如下：.font-d font-size:16px; /* 定義字號*/color:#f60; /* 定義字體顏色*/font-weight:700; /* 定義字體粗細*/line-height:20px; /*定義字體行高*/

20、9）在“ sideBarLeftb2 ”包含的其它DIV元素中，分別添加不同的 列表內容，并將上面介紹的UL列表樣式添加到這些列表中。至此，行業(yè)欄目列表制作完成，如圖所示。9. 右邊側欄設計設計制作步驟：1）將光標置于元素“ sideBarRightb4 ”的下方，插入 DIV元素，并 定義相關參數(shù)：“高”129像素、“寬”310像素，“邊框”為 1 像素的邊框，將此樣式命名為類“ sideBarRightb1 ”。2）在新建的DIV中插入欄目標題DIV,并設置其邊距及文字對齊方 式，然后在該DIV元素中輸入文字“創(chuàng)業(yè)加盟”。3）將光標置于欄目標題 DIV的下方，創(chuàng)建圖片的DIV元素，并設置

21、其邊框浮動為“左對齊”，同時對其邊距進行設置。4）在該DIV中插入準備好的圖片，在右側插入 UL列表項目，效果如 圖所示。5）用同樣的方法制作如圖所示的“庫存二手”欄目，需要修改其背景色參數(shù)，該DIV的類名定義為“ sideBarRightb2 ”。代碼如下：.sideBarRightb1 height:129px; /* 定義高度*/width:310px; /* 定義寬度*/border:#ebcbb4 1px solid; /*定義邊框的顏色、粗細、樣式 */margin-top:5px; /* 定義頂端外邊距*/.sideBarRightb2 height:129px; /* 定義高度*/width:310px; /* 定義寬度*/border:#ebcbb4 1px solid; /* 定義邊框的顏色、粗細、樣式*/background:#E8E8E8

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論