人機交互網(wǎng)頁制作課程設(shè)計實驗報告_第1頁
人機交互網(wǎng)頁制作課程設(shè)計實驗報告_第2頁
人機交互網(wǎng)頁制作課程設(shè)計實驗報告_第3頁
人機交互網(wǎng)頁制作課程設(shè)計實驗報告_第4頁
人機交互網(wǎng)頁制作課程設(shè)計實驗報告_第5頁
已閱讀5頁,還剩13頁未讀 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

《網(wǎng)頁制作》課程設(shè)計報告姓名:班級:學(xué)號:指導(dǎo)教師:設(shè)計時間:目錄一.課程設(shè)計目的3二.課程設(shè)計題目描述和要求錯誤!未定義書簽。三.課程設(shè)計報告內(nèi)容錯誤!未定義書簽。3.1設(shè)計方案錯誤!未定義書簽。3.2設(shè)計過程錯誤!未定義書簽。3.3設(shè)計結(jié)果錯誤!未定義書簽。四.結(jié)論與心得錯誤!未定義書簽。一.課程設(shè)計目的一、實驗概述:利用表格、框架、層和鏈接設(shè)計頁面(各頁面之間要有鏈接),使用數(shù)據(jù)庫做一個留言板1.1實驗?zāi)康募耙螅耗康募耙螅哼\用所學(xué)《網(wǎng)頁設(shè)計》課程的理論知識和技能,分析和解決計算機應(yīng)用實際問題,提高網(wǎng)頁設(shè)計與制作能力;掌握利用軟硬件資源發(fā)布一個具體網(wǎng)站的操作過程。1.2實驗原理:利用Dreamweaver,MicrosoftOfficeAccess制作一個一個小型網(wǎng)站1.3實驗環(huán)境(使用的軟件):Dreamweaver、MicrosoftOfficeAccess二、實驗內(nèi)容:實驗方案設(shè)計:1.設(shè)計一個主頁面(結(jié)構(gòu)圖如下主頁HomeDiaryGalleryPhotoCollecGuestE_MailUsagition2.制作數(shù)據(jù)庫(其實只做一個Data表就可以了)Admin表字段名稱Tid數(shù)據(jù)類型自動編號文本說明注冊管理員編號注冊管理員名稱注冊管理員密碼tAdmintPassword文本Data表(用來存放網(wǎng)友在留言板中所輸入的信息。)字段名稱數(shù)據(jù)類型說明字段大小必須有數(shù)據(jù)Tid自動編號網(wǎng)友留言編號//tNametE_mailtHomepagetOicq文本文本文本文本文本文本日期/時間網(wǎng)友姓名205010015100255是否否否是是網(wǎng)友E_mail地址網(wǎng)友主頁地址網(wǎng)友OICQtSubjecttCotenttDate網(wǎng)友留言標題網(wǎng)友留言具體內(nèi)容網(wǎng)友留言時間默認值輸入Now()User表字段名稱Tid數(shù)據(jù)類型說明自動編號文本文本文本文本文本日期/時間網(wǎng)友留言編號tName網(wǎng)友姓名(不可重復(fù))tE_mail網(wǎng)友E_mail地址網(wǎng)友主頁地址網(wǎng)友密碼網(wǎng)友OICQtHomepagetPasswordtOicqtDate網(wǎng)友留言時間2.2實驗過程(實驗步驟、記錄、數(shù)據(jù)、分析)一.⑴安裝配置IIS(若配了就不用安裝)①“開始→控制面板→添加刪除程序”②打開“添加刪除程序”選中“Internet信息服務(wù)(IIS)”單擊進行裝段時間等待后,屏幕上出現(xiàn)【完成“Windows組件向?qū)А薄繉υ捒颍瑔螕簟就瓿伞堪磁ぃ瓿闪薎IS的安裝③經(jīng)過一。二。主頁的制作1.生成進站頁面,該頁面以index.html的名字保存在根目錄下(新建站點,在這里就介紹了)2.生成主頁及其他的頁面3.制作進站頁面⑴用表格整體布局(插入→表格)插入一個4行一列的表格⑵添加網(wǎng)頁元素(按照要求輸入文字和圖象)⑶頁面屬性設(shè)置在頁面屬性中將背景顏色設(shè)為綠色(#99cc33)以后顏色都是這個值,文本顏色為白色(#FFFFFF)※下面的心情文章也是用表格制作的在這里就不介紹了。布局是用的幾個表格加幾個連接就搞定了其中的時間顯示用的代碼是<scriptlanguage="javascript"><!--now=newDate()hour=now.getHours()if(hour<12){document.write("現(xiàn)在是:"+now.toLocaleString())}elseif(hour<18){document.write("現(xiàn)在是:"+now.toLocaleString())}elseif(hour>=18){document.write("現(xiàn)在是:"+now.toLocaleString())}//--></script>創(chuàng)建文檔1.選擇文件→新建→模板;2.選中【當(dāng)模板改變是更新頁面】單擊【創(chuàng)建】進入新文檔設(shè)計視圖;3.改變文檔標題為“個人簡歷”4.將光標移到EditRegionl,輸入對應(yīng)的文字;5.保存文檔為toufashishang.htm.效果圖如下6.城市的性格和服裝百年都用上面的文檔來建。

三.留言板基本功能頁面的制作(一)創(chuàng)建數(shù)據(jù)庫打開MicrosoftOfficeAccess“文件→新建選擇空數(shù)據(jù)庫→把數(shù)據(jù)庫存在站點的根目錄下→在中選擇第一個,再按照上面需要制作的依次填入如Admin表打開Admin表顯示的是此時該數(shù)據(jù)庫就建好了,按照上面的方法建另外的兩個數(shù)據(jù)庫”創(chuàng)建ODBC數(shù)據(jù)源①選擇“開始②在“ODBC數(shù)據(jù)源③單擊“鈕,選擇數(shù)據(jù)源類型(MicrosoftAccessDriver(*.mdb)),單擊“按鈕。④在彈出的“的名稱;在“——所有程序——控制面板——管理工具——數(shù)據(jù)源(ODBC)”。管理器”對話框中,單擊“系統(tǒng)DNS”選項卡。添加”按完成”O(jiān)DBCMicrosoftAccess安裝”對話框中,“數(shù)據(jù)源名”文本框中輸入數(shù)據(jù)源注釋;單擊“選擇”按鈕,在彈出的取提供數(shù)據(jù)的Access數(shù)據(jù)庫。⑤選擇數(shù)據(jù)庫文件(xx/xx.mdb)后,安裝”對話框中。說明”文本框中可輸入對該數(shù)據(jù)庫的“選擇數(shù)據(jù)庫”對話框中選單擊“確定”按鈕,返回到“ODBCMicrosoftAccess⑥用戶可以看到新增了一個ODBC數(shù)據(jù)源,為以后建立與數(shù)據(jù)庫的連接做好準備。5.創(chuàng)建DSN連接①在DW的“應(yīng)用程序”面板中單擊“數(shù)據(jù)庫”選項卡,單擊“+”按鈕出現(xiàn)連接定義方式菜單。②選擇“數(shù)據(jù)源名稱(DSN)”項,③在“連接名稱”④在“數(shù)據(jù)源名稱(DSN)”下拉列表框中選擇碼”為可選項。彈出其對話框。文本框中輸入一個字符串作為連接名。所需的DSN,如xx.mdb。“用戶名”“和密⑤單擊“測試”按鈕,系統(tǒng)會彈出一個對話框,報告“成功創(chuàng)建連接腳本”。單擊“確定”按鈕。⑥再次單擊“中創(chuàng)建的數(shù)據(jù)表了。(二)留言板基本功能頁面的制作確定”按鈕。關(guān)閉“數(shù)據(jù)源名稱(DSN)”對話框。在數(shù)據(jù)庫面板中可以看到數(shù)據(jù)庫⑴制作管理員登錄頁面①啟動DWMX2004,制作login.asp客戶登錄頁面。②檢查登錄表單。選擇客戶登錄頁面中的注冊表單。在“行為”面為按鈕,從彈出的檢查表單”行為命令,在彈出的對話框中做如下設(shè)置。板中單擊“+”添加行菜單中選擇“在“命名的欄位”列表框中做如下的檢查表單項設(shè)置:“文本tName”的“值”設(shè)置為“必需的”,“可接受”選項中選中“任何東西”。“文本tPassword”的“值”設(shè)置為“必需的”,“可接受”選項中選中“任何東西”。③單擊“確定”按鈕,完成檢查登錄表單的設(shè)置,并將該行為的事件設(shè)置為onSubmit。④驗證客戶登錄信息是否為客戶登記表中的合法用戶。在“服務(wù)器行為”選項卡中單擊“+”按鈕,從彈出的菜單中執(zhí)行“用戶身份驗證——登錄用戶”服務(wù)器行為命令。在打開的對話框中,做如下設(shè)置。⑵構(gòu)建留言頁面獲取客戶留言頁由以下部分組成:一個允許用戶輸入數(shù)據(jù)的HTML表單(留言板)。一個用于更新數(shù)據(jù)庫的“插入記錄”服務(wù)器行為。插入頁首先通過用戶填寫留言信息提交留言板表單。然后通過檢查表單行為,驗證表單的填寫是否正確。如:是否輸入用戶名和留言內(nèi)容等信息。輸入有誤或不符合要求重新輸入留言板信息,輸入無誤則將“留言板信息”插入到數(shù)據(jù)庫表中。具體步驟如下:則提示用戶①啟動DWMX2004,制作客戶留言頁面new.asp。②打開“服務(wù)器行為”選項卡。③單擊“+”按鈕,從彈出的菜單中選擇“插入記錄”選項,在打開的對話框中做如下設(shè)置。④單擊“確定”按鈕,確定“插入記錄”服務(wù)器行為的設(shè)置。在“服務(wù)器面板”中便會出現(xiàn)插入記錄行為。⑤對完成的插入頁面進行保存,便完成了插入頁面的制作。⑶顯示留言顯示客戶留言頁面由以下部分組成:使用DW設(shè)計工具布置留言詳細頁面。為頁面定義一個記錄集,詳細頁將從此記錄集中提取記錄的詳細信息。將記錄集中的各項綁定到該頁面。留言頁面首先通過記錄集獲取數(shù)據(jù)庫表中相關(guān)的留言信息,在顯示留言頁面中顯示出來。1.設(shè)置重復(fù)區(qū)域通常在顯示客戶留言的頁面中,總是希望能夠顯示多條留言。這樣做能方便地對客戶留言做系統(tǒng)的分析和合理的比較。具體的操作方法如下:①選中顯示內(nèi)容的表格。②在“服務(wù)器行為”選項卡中單擊“+”按鈕,從彈出的菜單中選擇“重復(fù)區(qū)域”選項。并做如下設(shè)置。③單擊“確定”按鈕,完成每頁顯示5條記錄的重復(fù)區(qū)域設(shè)置。2.記錄集導(dǎo)航條在留言板的顯示頁面中建立記錄集導(dǎo)航條,能夠方便網(wǎng)絡(luò)管理者對客戶留言信息檢查和翻頁。具體操作如下:①將光標停留在需插入記錄集導(dǎo)航條的單元格內(nèi)。②在文檔窗口菜單欄中執(zhí)行“插入——應(yīng)用程序?qū)ο蟆涗浖猪摗涗泴?dǎo)航條”菜單命令。打開其對話框,并做如下設(shè)置。③單擊“確定”按鈕,完成記錄集導(dǎo)航條設(shè)置。3.設(shè)置記錄集導(dǎo)航狀態(tài)通過該操作,可以完成對數(shù)據(jù)庫中所有記錄集的統(tǒng)計工作。具體操作如下:①將光標停留在需插入記錄集導(dǎo)航②在文檔窗口菜單欄中航狀態(tài)”菜單狀態(tài)的單元格內(nèi)。選擇“插入——應(yīng)用程序?qū)ο蟆@示記錄計數(shù)——記錄集導(dǎo)命令,打開其對話框,并做如下設(shè)置。⑷管理留言1.管理機制分析在此通過服務(wù)器行為來管理留言板,可以將不健康的留言從數(shù)據(jù)表中刪除,維護良好的留言環(huán)境。刪除留言首先在顯示留言頁面中選擇需刪除的留言記錄,并以特定的記錄轉(zhuǎn)到刪除留言頁面。在刪除留言頁面中通過用戶的管理員身份驗證后,將所選擇的留言記錄從數(shù)據(jù)庫表中刪除。2.刪除留言要實現(xiàn)刪除留言的效果,請執(zhí)行下列操作:①使用“轉(zhuǎn)到詳細頁面”服務(wù)器行為。啟動DW,打開index.asp顯示留言頁面,并在該頁面中選擇“刪除留言”文本。在“服務(wù)器行為”選項卡中單擊“+”按鈕,從中選擇“轉(zhuǎn)到詳細頁面”選項,并做如下設(shè)置。②使用“移至特定記錄”服務(wù)器行為。在“服務(wù)器行為”選項卡中單擊“+”按鈕,從彈出的菜單中選擇“記錄集分頁——移至特定記錄”服務(wù)器行為,并做如下設(shè)置。③建立記錄集。制作del.asp文件,并在頁面中建立如下記錄集④綁定記錄集到del.asp頁面⑤刪除記錄。在“服務(wù)器行為”選項卡中單擊“+”按鈕,從中選擇“刪除記錄”服務(wù)器行為,并做如下設(shè)置。⑥單擊“確定”按鈕,對文檔進行保存,完成留言板的制作。⑦附加一點,為了限制普通用戶不能隨意具有刪除留言的功能,因此,還可以加一項“限制對頁的訪問”。執(zhí)行“服務(wù)器行為——“+”號按鈕——用戶身份驗證——限制對頁的訪問”,在打開的對話框中,做如下設(shè)置。最后對文檔保存,完成留言板基本功能的制作四.把所有的都連接起來就完成了主頁面,最后瀏覽上傳。2.3實驗結(jié)論(結(jié)果):所有的連接都能夠達到要達到的效果,所有的頁面都能瀏覽,不會出先該網(wǎng)頁無法第一

溫馨提示

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

評論

0/150

提交評論