【文章內容簡介】 多知識上的缺陷，弄清的以前沒有搞懂的知識點。經過多番的努力和辛酸，我成功地完成了這次過程艱辛的實訓，而且我從中體會到了一種叫做‘成功的喜悅’的感覺，那種小有成就的興奮是只有置身其中的人才能體會的。在實訓過程中，我更體會到了基礎知識的重要性，也許我們正在迷惘，我們是否學到了東西，但事實說明零零散散的知識，在項目開發(fā)當中起到了非常關鍵的作用，我們不缺少時間和工具，我們只是缺少經驗和動手能力，如果我們以后能更好的在各方面增長自己的經驗，相信我們能在長長的就業(yè)隊伍中脫穎而出的！相信自己，相信未來。今后我將會更加努力的學習，不斷提高自身素質，為我將來的就業(yè)打下良好的基礎第四篇：網頁設計與制作實訓報告《Dreamweaver網頁設計與制作案例教程》實訓報告專 業(yè)： 計算機網絡技術 年 級： 2013級 姓 名： 學 號： 輔導老師：制作電子商務類網站首頁一、網站建設的前期準備工作網站整體需求分析網站整體需求主要包括以下幾個方面： 1)網站建設背景及目標 2)網站建設現(xiàn)狀分析 3)網站建設目標分解4)網站建設資金及人員投入情況分析確定網站風格根據電子商務網站的特點，確定網站的整體風格，即網站的色彩和版式。網站風格是在網站整體需求分析的基礎上，通過明確網站設計的目的和用戶需求、訪問者的特點等得出的結論。本實例是針對一個工業(yè)產品交易平臺的網站，網站與用戶交互性強，因此確定其主色調為暖色系的橘黃色給人以輕松愉快的瀏覽環(huán)境。如圖是電子商務網站的LOGO。網站素材搜集明確網站主題和劃分板塊后，接著要為后續(xù)的網站建設搜集素材。若想讓網站有聲有色，能夠吸引客戶注意，就要盡量搜集文字、圖片、音頻、視頻、動畫等多媒體素材。對于一些通用素材，可以從網上搜集得到，也可以根據需求自行制作素材，比如，通過Photoshop圖像處理軟件對圖像進行優(yōu)化處理，使用Flash制作動畫等。如圖所示。二、創(chuàng)建站點網站建設的第一步是創(chuàng)建本地站點。創(chuàng)建的站點信息將顯示在“文件”面板中。如果需要對站點參數(shù)進行修改，可以單擊“站點→管理站點”對站點進行重新設置。三、網站主頁制作+CSS布局頁面使用Div+CSS實現(xiàn)頁面布局，具體操作如下：4）為AP Div元素設置CSS樣式。由于網站首頁和子頁面采取相同的布局風格，因此樣式表采用外部鏈接樣式表。5）選中創(chuàng)建的AP元素“container”，在右側的“CSS樣式”面板中單擊鼠標右鍵，選擇“新建”命令，打開“新建CSS規(guī)則”對話框，并作相應設置，如圖所示。6）單擊確定按鈕，彈出“container的CSS規(guī)則定義”對話框，選擇分類列表框下的“背景”選項卡，設置文檔的“背景顏色”為FFF；在分類列表框中，切換到“區(qū)塊”選項卡，設置“文本對齊”屬性為左對齊；在分類列表框中，切換到“方框”選項卡，設置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項卡的屬性保持默認設置；切換到“定位”選項卡，單擊確定按鈕，完成對“container”元素樣式的定義。設置后的“CSS樣式”面板如圖所示。/* ==整體布局定義開始== */ Container { width:960px。/*定義頁面寬度*/ visibility:visible。/*設置可見度*/ margin:1px auto 0。/*設置外邊距*/ backgroundcolor: FFF。/*定義背景顏色*/ } 。頁面屬性是對標簽屬性的設置。代碼如下所示： body{ fontsize:12px。/*定義字號*/ color:666。/*定義字體顏色*/ background:FFF。/*定義背景顏色*/ textalign:center。/*定義文本位置*/ margin:0。/*定義外邊距*/ padding:0。/*定義外邊距*/ border:0。/*定義邊框粗細*/ background: transparent。/*定義背景透明*/ } ，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進行相應設置。在頂部的“top”元素中插入一幅圖像。如圖所示。網頁導航條是非常重要的網頁元素，網頁間的跳轉，需要通過導航條來完成。1）將光標定位在“nav” Div元素中，在其內部輸入列表項，并為列表項的各個單元設置超鏈接。設置情況如圖所示。2）添加CSS樣式。nav { height:30px。/*定義高度*/ width:100%。/*定義寬度*/ backgroundcolor:c00。/*定義背景顏色*/ overflow: hidden。/*定義溢出效果*/ } nav ul { fontsize:12px。/*定義字號*/ color:FFF。/*定義字體顏色*/ lineheight:30px。/*定義字體行高*/ whitespace:nowrap。/*定義區(qū)塊空格*/ margin:0 0 0 30px。/*定義外邊距*/ padding:0。/*定義內邊距*/ } nav li { liststyletype:none。/*定義列表類型*/ display:inline。/*定義區(qū)塊顯示效果*/ } nav li a { textdecoration:none。/*定義字體修飾*/ fontfamily:Arial, Helvetica, sansserif。/*定義字體*/ color:FFF。/*定義字體顏色*/ padding:7px 10px。/*定義內邊距*/ } nav li a:hover { color:ff0。/*定義字體顏色*/ backgroundcolor:red。/*定義背景顏色*/ 該樣式表使用列表項實現(xiàn)導航菜單功能。效果如圖所示。1）把光標置于DIV元素“l(fā)eft”中，創(chuàng)建新的DIV元素 sideBarLefta1，并定義相關樣式2）在DIV元素“sideBarLefta1”的內部插入推薦廠家標志及說明文字等信息，定義相關樣式如圖所示。3），left { float:left。/*定義浮動位置 */ width:640px。/*定義寬度 */ height:832px。/*定義高度 */ }.sideBarLeftb1 { width:238px。/*定義寬度 */ height:240px。/*定義高度*/ border:ebcbb4 solid 1px。/*定義邊框的顏色、粗細、樣式*/ } 1）將光標置于div元素“l(fā)eft”中，插入一個嵌套的div元素sideBarLefta2，2）將光標置于DIV元素“banner”中，插入一個已經準備好的SWF元素。3）選中“banner”下面DIV元素，并定義類為“hot”，在4個小DIV元素中分別插入準備好的廣告圖，效果如圖所示： sideBarLefta2 {float:left。/*定義浮動位置 */ width:390px。/*定義寬度 */ height:268px。/*定義高度*/ overflow: hidden。/*定義溢出效果*/ } banner { margintop:5px。/*定義頂端外邊距*/ border:999 solid 1px。/*定義邊框的顏色、粗細、樣式*/ width:390px。/*定義寬度 */ }.hot{ display:inline。/*定義區(qū)塊顯示效果*/ border:999 1px solid。/*定義邊框的顏色、粗細、樣式*/ width:91px。/*定義寬度 */ height:70px。/*定義高度*/ float:left。/*定義浮動位置 */ margin:2px。/*定義外邊距*/ } 1）將光標置于DIV元素“right”中。如圖所示。2），，效果如圖所示。： right { float:left。/*定義浮動位置 */ width:320px。/*定義