第一篇：網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告[范文]

《網(wǎng)頁(yè)設(shè)計(jì)與制作》

實(shí)習(xí)報(bào)告

指導(dǎo)老師：

實(shí)習(xí)地點(diǎn)：

實(shí)習(xí)時(shí)間：

實(shí)習(xí)班級(jí)：

學(xué)生姓名：

一、實(shí)習(xí)目的① 學(xué)會(huì)制作新聞發(fā)布系統(tǒng)。

② 學(xué)會(huì)制作在線調(diào)查系統(tǒng)。

③ 熟悉購(gòu)物網(wǎng)站的主要功能和欄目。

④ 學(xué)會(huì)購(gòu)物網(wǎng)站數(shù)據(jù)庫(kù)表的創(chuàng)建和數(shù)據(jù)庫(kù)連接的創(chuàng)建。

⑤ 學(xué)會(huì)購(gòu)物系統(tǒng)前臺(tái)頁(yè)面制作和后臺(tái)管理制作。

二、實(shí)訓(xùn)內(nèi)容

1.創(chuàng)建數(shù)據(jù)庫(kù)表

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

② 彈出“文件新建數(shù)據(jù)庫(kù)”對(duì)話框，在對(duì)話框中選擇數(shù)據(jù)庫(kù)保存的路徑，“文件名”文本框中輸入shop。

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

④ 彈出“表1：表”對(duì)話框，在對(duì)話框中輸入“字段名稱”和字段所對(duì)應(yīng)的“數(shù)據(jù)類型”，將shopID字段設(shè)置為主鍵。

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

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

2.創(chuàng)建數(shù)據(jù)庫(kù)連接

新建一個(gè)網(wǎng)頁(yè)文件夾，打開IIS信息服務(wù)，創(chuàng)建IIS虛擬目錄，在文件夾安全性把來賓用戶的權(quán)限修改為完全控制，并導(dǎo)入數(shù)據(jù)庫(kù)。

3.制作購(gòu)物網(wǎng)系統(tǒng)頁(yè)面

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

數(shù)據(jù)，在服務(wù)器行為里為左側(cè)的表格添加重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁(yè)，制作記錄集導(dǎo)航條。

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

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

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

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

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

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

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

三、疑難解惑

① 網(wǎng)頁(yè)不能正常打開，電腦用戶權(quán)限沒有修改，在文件夾安全性把來賓用戶的權(quán)限修改為完全控制。

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

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

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

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

⑤ 修改頁(yè)面點(diǎn)進(jìn)去初始內(nèi)容都一樣，“唯一鍵列”下拉列表中應(yīng)選擇shpID。

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

四、實(shí)訓(xùn)心得

經(jīng)過一周動(dòng)態(tài)網(wǎng)頁(yè)的實(shí)訓(xùn)，使我們對(duì)本學(xué)期的這門課進(jìn)行了整體的匯總。在這匯總期間，也算是對(duì)自己本學(xué)期的一個(gè)考核，此次實(shí)訓(xùn)暴露出了許多我自身存在的問題，同時(shí)也對(duì)自身有了很大的提高。

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

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

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

《Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程》

實(shí)訓(xùn)報(bào)告

專 業(yè)： 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù) 年 級(jí)： 2013級(jí) 姓 名： 學(xué) 號(hào)： 輔導(dǎo)老師：

制作電子商務(wù)類網(wǎng)站首頁(yè)

一、網(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í)例是針對(duì)一個(gè)工業(yè)產(chǎn)品交易平臺(tái)的網(wǎng)站，網(wǎng)站與用戶交互性強(qiáng)，因此確定其主色調(diào)為暖色系的橘黃色給人以輕松愉快的瀏覽環(huán)境。如圖是電子商務(wù)網(wǎng)站的LOGO。

3、網(wǎng)站素材搜集

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

二、創(chuàng)建站點(diǎn)

1、網(wǎng)站建設(shè)的第一步是創(chuàng)建本地站點(diǎn)。

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

三、網(wǎng)站主頁(yè)制作

1.使用Div+CSS布局頁(yè)面

使用Div+CSS實(shí)現(xiàn)頁(yè)面布局，具體操作如下：

4）為AP Div元素設(shè)置CSS樣式。由于網(wǎng)站首頁(yè)和子頁(yè)面采取相同的布局風(fēng)格，因此樣式表采用外部鏈接樣式表。

5）選中創(chuàng)建的AP元素“container”，在右側(cè)的“CSS樣式”面板中單擊鼠標(biāo)右鍵，選擇“新建”命令，打開“新建CSS規(guī)則”對(duì)話框，并作相應(yīng)設(shè)置，如圖所示。

6）單擊確定按鈕，彈出“#container的CSS規(guī)則定義”對(duì)話框，選擇分類列表框下的“背景”選項(xiàng)卡，設(shè)置文檔的“背景顏色”為#FFF；在分類列表框中，切換到“區(qū)塊”選項(xiàng)卡，設(shè)置“文本對(duì)齊”屬性為左對(duì)齊；在分類列表框中，切換到“方框”選項(xiàng)卡，設(shè)置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項(xiàng)卡的屬性保持默認(rèn)設(shè)置；切換到“定位”選項(xiàng)卡，單擊確定按鈕，完成對(duì)“#container”元素樣式的定義。設(shè)置后的“CSS樣式”面板如圖所示。

/* ==整體布局定義開始== */ #Container { width:960px;/*定義頁(yè)面寬度*/ visibility:visible;/*設(shè)置可見度*/ margin:1px auto 0;/*設(shè)置外邊距*/ background-color: #FFF;/*定義背景顏色*/ } 2.設(shè)置頁(yè)面屬性

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

3.插入圖片

在頂部的“top”元素中插入一幅圖像。如圖所示。

4.添加導(dǎo)航條

網(wǎng)頁(yè)導(dǎo)航條是非常重要的網(wǎng)頁(yè)元素，網(wǎng)頁(yè)間的跳轉(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-size:12px;/*定義字號(hào)*/ 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, 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元素 sideBarLefta1，并定義相關(guān)樣式

2）在DIV元素“sideBarLefta1”的內(nèi)部插入推薦廠家標(biāo)志及說明文字等信息，定義相關(guān)樣式如圖所示。

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)頁(yè)廣告設(shè)計(jì)制作

1）將光標(biāo)置于div元素“#left”中，插入一個(gè)嵌套的div元素#sideBarLefta2，2）將光標(biāo)置于DIV元素“banner”中，插入一個(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ì)、樣式*/ width:390px;/*定義寬度 */ }.hot{ display:inline;/*定義區(qū)塊顯示效果*/ border:#999 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ width:91px;/*定義寬度 */ height:70px;/*定義高度*/ float:left;/*定義浮動(dòng)位置 */ margin:2px;/*定義外邊距*/ } 7.頁(yè)面右側(cè)欄目設(shè)計(jì)

1）將光標(biāo)置于DIV元素“right”中，插入已經(jīng)準(zhǔn)備好的圖片service.jpg。如圖所示。

2）在service.jpg下面插入兩個(gè)div，分別定義為.sideBarRightb3和.sideBarRightb4，在新建的div中插入準(zhǔn)備好的廣告圖像ad1.jpg和ad2.jpg并在屬性面板中定義超鏈接，效果如圖所示。

在style.css中添加的代碼如下： #right { float:left;/*定義浮動(dòng)位置 */ width:320px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarRightb3 { height:60px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/ border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ }.sideBarRightb4 { 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元素“l(fā)eft”中，在其下側(cè)插入一個(gè)嵌套的DIV元素“sideBarLeftb2”。

2）選中Div元素“sideBarLeftb2”，將光標(biāo)定位在其內(nèi)部，創(chuàng)建多個(gè)新Div，為了方便日后的維護(hù)我們將新建Div單獨(dú)定義為.sideBarLeftb3。

3）選中DIV元素“sideBarLeftb3”，在style.css中添加的代碼如下：

sideBarLeftb3 { text-align:left;/*定義文本位置 */ float:left;/*定義浮動(dòng)位置 */ height:150px;/*定義高度*/ width:280px;/*定義寬度 */ padding:4px;/*定義內(nèi)邊距*/ } 4）將光標(biāo)移到sideBarLeftb3的DIV元素中，插入兩行列表并對(duì)列表設(shè)置相關(guān)CSS參數(shù)。在style.css中添加的代碼如下：.sideBarLeftb3 ul { font-size:12px;/*定義字號(hào)*/ line-height:6px;/*定義字體行高*/ float:left;/*定義浮動(dòng)位置 */ width:270px;/*定義寬度 */ margin:0 0 0 5px;/*定義外邊距*/ padding:0;/*定義內(nèi)邊距*/ } 5）在列表中添加列表內(nèi)容，代碼如下：