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

《網頁設計與制作》

實習報告

指導老師：

實習地點：

實習時間：

實習班級：

學生姓名：

一、實習目的① 學會制作新聞發(fā)布系統(tǒng)。

② 學會制作在線調查系統(tǒng)。

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

④ 學會購物網站數據庫表的創(chuàng)建和數據庫連接的創(chuàng)建。

⑤ 學會購物系統(tǒng)前臺頁面制作和后臺管理制作。

二、實訓內容

1.創(chuàng)建數據庫表

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

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

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

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

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

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

2.創(chuàng)建數據庫連接

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

3.制作購物網系統(tǒng)頁面

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

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

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

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

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

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

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

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

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

三、疑難解惑

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

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

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

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

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

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

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

四、實訓心得

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

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

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

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

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

實訓報告

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

制作電子商務類網站首頁

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

1、網站整體需求分析

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

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

2、確定網站風格

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

3、網站素材搜集

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

二、創(chuàng)建站點

1、網站建設的第一步是創(chuàng)建本地站點。

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

三、網站主頁制作

1.使用Div+CSS布局頁面

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

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;/*設置外邊距*/ 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;/*定義區(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:#FFF;/*定義字體顏色*/ padding:7px 10px;/*定義內邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項實現導航菜單功能。效果如圖所示。

5.推薦廠家

1）把光標置于DIV元素“l(fā)eft”中，創(chuàng)建新的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;/*定義區(qū)塊顯示效果*/ 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.行業(yè)欄目設計

1）將光標置于DIV元素“l(fā)eft”中，在其下側插入一個嵌套的DIV元素“sideBarLeftb2”。

2）選中Div元素“sideBarLeftb2”，將光標定位在其內部，創(chuàng)建多個新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）在列表中添加列表內容，代碼如下：