【網(wǎng)頁設(shè)計(jì)與制作5700字（論文）】

網(wǎng)頁設(shè)計(jì)與制作目錄TOC\o"1-2"\h\u10571網(wǎng)頁設(shè)計(jì)與制作 127209摘要 115821一、引言 210614二、MicrosoftFrontPage簡介 230415（一）強(qiáng)大的編輯功能 221752（二）方便的網(wǎng)頁向?qū)Чδ?216977（三）完善的站點(diǎn)管理功能 34985（四）Web數(shù)據(jù)庫發(fā)布功能 3600（五）與Office其它組件的緊密結(jié)合 317636三、網(wǎng)頁設(shè)計(jì)系統(tǒng)理論 327960（一）欄目導(dǎo)航模塊設(shè)計(jì)特點(diǎn) 33081（二）登錄模塊 428958（三）通知公告模塊 48823（四）優(yōu)秀網(wǎng)頁設(shè)計(jì)網(wǎng)站模塊 515630（五）教學(xué)資源模塊 512302四、網(wǎng)頁設(shè)計(jì)系統(tǒng)的實(shí)現(xiàn) 625268（一）注冊與登錄模塊設(shè)計(jì)與實(shí)現(xiàn) 627656（二）新聞發(fā)布系統(tǒng)模塊的設(shè)計(jì)與實(shí)現(xiàn) 824489（三）在線交流模塊設(shè)計(jì)與實(shí)現(xiàn) 1115260五、網(wǎng)頁設(shè)計(jì)系統(tǒng)測試 154655六、總結(jié)與展望 1625188參考文獻(xiàn) 18摘要隨著電子技術(shù)、現(xiàn)代通信技術(shù)和新媒體技術(shù)的高速發(fā)展階段，網(wǎng)絡(luò)教育作為一種新型戰(zhàn)略的教育內(nèi)容，以其開放的教育資源和良好的交互性吸引了越來越多的人的關(guān)注，逐漸成為研究熱點(diǎn)。從傳統(tǒng)形式以教師為中心規(guī)劃的教育到以學(xué)生為中心發(fā)展的網(wǎng)絡(luò)教育，全面教育正在發(fā)生發(fā)展變革。網(wǎng)絡(luò)課程作為網(wǎng)絡(luò)教育的重要信息載體，也得到了迅速的發(fā)展。設(shè)計(jì)和開發(fā)高質(zhì)量的網(wǎng)絡(luò)課程是當(dāng)前教育領(lǐng)域的一個熱門話題。本文通過對國內(nèi)外各種網(wǎng)絡(luò)課程的分析和研究，深入分析了我國高校網(wǎng)絡(luò)課程的現(xiàn)實(shí)情況，并分析得出網(wǎng)頁設(shè)計(jì)課程的鮮明特征進(jìn)行系統(tǒng)建模。在研發(fā)流程中，采用了模塊化的設(shè)計(jì)方法，最后對在線課程的架構(gòu)進(jìn)行了詳細(xì)的論述，并對兩個后臺模塊(注冊登錄模塊、新聞發(fā)布模塊等)的開發(fā)與實(shí)現(xiàn)過程進(jìn)行了精辟論述。關(guān)鍵詞：網(wǎng)絡(luò)課程；網(wǎng)頁設(shè)計(jì)；設(shè)計(jì)與開發(fā)一、引言在網(wǎng)絡(luò)時代，網(wǎng)絡(luò)覆蓋范圍越來越廣，對網(wǎng)絡(luò)設(shè)計(jì)技術(shù)人員的需求也越來越大。在學(xué)校教育的主要科目中，大多數(shù)學(xué)生準(zhǔn)備選擇網(wǎng)頁設(shè)計(jì)課程。網(wǎng)頁設(shè)計(jì)主要是通過各種技術(shù)如視頻、圖像、動畫、社區(qū)語言等進(jìn)行處理。目前，從學(xué)校設(shè)計(jì)網(wǎng)頁的學(xué)習(xí)內(nèi)容可以推斷，學(xué)習(xí)內(nèi)容本質(zhì)上是案例分析和任務(wù)分配的形式。它不會激發(fā)學(xué)生的創(chuàng)造力和自我意識。如何激發(fā)學(xué)生的主動學(xué)習(xí)，如何將學(xué)生融入到現(xiàn)代網(wǎng)絡(luò)技術(shù)的發(fā)展中，對于出現(xiàn)的所有問題，都需要對教育模式進(jìn)行再創(chuàng)新，以促進(jìn)學(xué)生對新的網(wǎng)絡(luò)技術(shù)的理解和理解。如何正確的進(jìn)行網(wǎng)頁設(shè)計(jì)課程，只有教師才能合理的利用有效的資源來提高教育水平。二、MicrosoftFrontPage簡介FrontPage是微軟推出的Office集成軟件的組件之一。FrontPage在整體設(shè)計(jì)、管理和網(wǎng)站連接方面內(nèi)置功能十分強(qiáng)大，其內(nèi)置功能如下:（一）強(qiáng)大的編輯功能FrontPage使用可視化界面對網(wǎng)頁進(jìn)行編輯，具有實(shí)力強(qiáng)大的編輯文檔功能，可以輕松自如地向網(wǎng)頁插入圖像、聲音、動畫制作等媒體系統(tǒng);FrontPage可以為網(wǎng)頁中的交互圖像添加動態(tài)視圖，如振動、飛向、跳躍等;FrontPage提供了諸如添加圖標(biāo)、游動字幕、自定義分頁、動態(tài)廣告牌、默認(rèn)值的設(shè)置等功能。使用FrontPage，可以實(shí)際執(zhí)行上述功能，而無需編寫程序語言。FrontPage具有“實(shí)時預(yù)覽”的功能特性，會根據(jù)用戶添加或編輯的元素組合自動導(dǎo)入HTML核心代碼。對于熟練HTML的現(xiàn)有用戶，可以使用HTML視圖模式與VBScript、JavaScript等一起創(chuàng)建高級詳情頁面。（二）方便的網(wǎng)頁向?qū)Чδ蹻rontPage提供了層出不窮的制作模板和Web自定義菜單，例如“公司表示站點(diǎn)向?qū)А薄ⅰ皞€體站點(diǎn)向?qū)А?、“表單Web頁面引導(dǎo)”等等。使用向?qū)瓿删W(wǎng)站界面主體的設(shè)計(jì)結(jié)構(gòu)，只需簡單和確認(rèn)信息。（三）完善的站點(diǎn)管理功能FrontPage具有強(qiáng)大實(shí)力的網(wǎng)站功能模塊，不僅組織創(chuàng)建類型多樣的網(wǎng)站，還允許直接導(dǎo)入、復(fù)制、刪除和上傳網(wǎng)站。此外，F(xiàn)rontPage提供了多種三維視圖來實(shí)現(xiàn)對頁面設(shè)計(jì)的一體化管理，包括統(tǒng)計(jì)報(bào)表管理、導(dǎo)航管理功能、文件夾集成功能、數(shù)據(jù)導(dǎo)入和導(dǎo)出等。（四）Web數(shù)據(jù)庫發(fā)布功能將信息管理技術(shù)與web技術(shù)緊密結(jié)合，充分整合技術(shù)優(yōu)勢，利用Internet實(shí)現(xiàn)數(shù)據(jù)庫優(yōu)勢互補(bǔ)，是web開發(fā)的必要手段。FrontPage提供了大力支持和數(shù)據(jù)庫集成的方法，為數(shù)據(jù)庫平臺對象向?qū)?、輸入?shù)據(jù)表單和創(chuàng)建用于數(shù)據(jù)訪問的Access頁面提供專業(yè)方向向?qū)АrontPage通過在Asp文件中插入數(shù)據(jù)庫創(chuàng)建，可以外部訪問多種類型的核心數(shù)據(jù)庫(如SQLServer核心數(shù)據(jù)庫、access核心數(shù)據(jù)庫等)。（五）與Office其它組件的緊密結(jié)合FrontPage非常類似于其他Office應(yīng)用程序，如Word、Excel、PowerPoint等。它易于學(xué)習(xí)和使用，支持拖放技術(shù)，并具有在Office應(yīng)用程序之間共享資源的優(yōu)勢。微軟使用HTML作為Office套件包含的通用編碼格式。在一些Office網(wǎng)絡(luò)應(yīng)用程序中，除了以自己的編碼格式保存路徑外，還可以將文件完整保存為HTML格式，完整保存到Web文件夾中。三、網(wǎng)頁設(shè)計(jì)系統(tǒng)理論（一）欄目導(dǎo)航模塊設(shè)計(jì)特點(diǎn)橙色和黃色代表溫煦和熱烈。橙色-黃色漸變效果被用作列導(dǎo)航地圖的背景顏色，它在冷藍(lán)色的背景襯托下尤為突出。網(wǎng)頁標(biāo)題讓訪問者觀察了解本課程的內(nèi)容重點(diǎn)和核心要義，有益于快速找到自己的專業(yè)選擇。有些專題欄目還有二級導(dǎo)航，引導(dǎo)訪問者選擇精確的內(nèi)容形式。如圖3.1所示。圖3.1欄目導(dǎo)航模塊（二）登錄模塊在本研究中，所有用戶都是通過登錄門戶登錄在線課程教育平臺，但是不同的賬號有不同的使用權(quán)限，可以授予系統(tǒng)管理員，由系統(tǒng)管理員設(shè)置。如圖3.2所示。圖3.2登錄模塊（三）通知公告模塊本模塊組成帶有拖動滾動條的設(shè)計(jì)，可以通過拖動窗口來顯示更多的公告信息。這就是JS實(shí)際效果。主要代碼設(shè)置如下:<選框onmouseover=this.stop風(fēng)格()=""onmouseout=this.start()scrollAmount=1方向=up寬度=230Height=200edge="0"align="center">填寫要滾動的文本，還可以從數(shù)據(jù)庫動態(tài)返回?cái)?shù)據(jù)!</MARQUEE>通知公告模塊頁面效果如圖3.3所示圖3.3通知公告模塊（四）優(yōu)秀網(wǎng)頁設(shè)計(jì)網(wǎng)站模塊在這個模塊中，管理員數(shù)據(jù)篩選了一些優(yōu)秀的網(wǎng)頁設(shè)計(jì)網(wǎng)址鏈接，快捷方便訪問者快捷訪問。如圖3.4所示圖3.4優(yōu)秀網(wǎng)頁設(shè)計(jì)網(wǎng)站模塊（五）教學(xué)資源模塊學(xué)習(xí)資源模塊廣泛搜集的背景素材、優(yōu)秀的內(nèi)容顯示、HTML核心代碼、CSS源代碼、FLASH源文件等供學(xué)生搜索下載。這個模塊可以允許某些學(xué)生公開發(fā)表他們認(rèn)為優(yōu)秀的制作材料。如圖3.5所示。圖3.5教學(xué)資源模塊四、網(wǎng)頁設(shè)計(jì)系統(tǒng)的實(shí)現(xiàn)（一）注冊與登錄模塊設(shè)計(jì)與實(shí)現(xiàn)登錄界面主要指注冊登陸。新注冊用戶點(diǎn)擊“進(jìn)入頁面”按鈕，打開登錄頁面如圖4.1所示。用戶輸入正確選擇的注冊資料后，點(diǎn)擊“Register”功能按鈕，頁面將移用“reg2.asp”文件，向數(shù)據(jù)庫中寫入邏輯意義的數(shù)據(jù)區(qū)域。圖4.1注冊界面注冊用戶可以直接輸入登錄帳號和賬號密碼。用戶直接登錄后，頁面調(diào)用“l(fā)ogon.asp”文件對用戶信息進(jìn)行資質(zhì)認(rèn)證，認(rèn)證成功完成進(jìn)入課程網(wǎng)站“Web設(shè)計(jì)”教育平臺功能界面。在“reg2.asp”文件中，向數(shù)據(jù)庫提交用戶注冊信息的關(guān)鍵代碼如下:<%uid=chkstr(trim(request.form("uid")))pwd=chkstr(trim(request.form("pwd")))email=chkstr(trim(request.form("email")))homepage=chkstr(trim(request.form("homepage")))oicq=chkstr(trim(request.form("oicq")))city=chkstr(trim(request.form("city")))sex=chkstr(trim(request.form("sex")))job=chkstr(trim(request.form("job")))iftrim(uid)=""ortrim(pwd)="”ortrim(email)=""then%><scriptlanguage=vbscript>MsgBox"錯誤:必須填寫姓名、密碼和電子郵件!”location.href="javascript:history.back()"</script><%elsesetrstmp=conn.execute("SelectuidfromUserWhereuid='"&trim(uid)&""')ifnotrstmp.eofthen07o><scriptlanguage=vbscript>MsgBox”錯誤:您的用戶名已被使用，請重新輸入!”location.href="javascript:history.back()"</script><%elseifcity=""thencity=”沒填”endififlen(homepage)c8thenhomepage=”沒填”endifstr="InsertIntoUser(uid,sex,pwd,email,homepage,city,oicq,job,about,face,penname,regtime)Values("'str=str&uid&”’，”’str=str&sex&”’，”’str=str&pwd&”’，”’str=str&email&”’，”’str=str&homepage&”’，”’setrs=server.createobject("adodb.recordset")setrs=conn.execute("Select*fromUserWhereuid="'&uid&”’，”’%>注冊成功后，返回登陸界面進(jìn)行登陸。（二）新聞發(fā)布系統(tǒng)模塊的設(shè)計(jì)與實(shí)現(xiàn)本系統(tǒng)模塊采用Access作為后臺數(shù)據(jù)庫。創(chuàng)建一個名為data的數(shù)據(jù)庫，并在數(shù)據(jù)庫中創(chuàng)建三個表:admin、article和lanmu。admin表內(nèi)容覆蓋2個字段值:user和password劃分保存管理員賬號和密碼信息;lanmu表內(nèi)容覆蓋一個lanmu字段值，用來標(biāo)簽信息所屬的列;文章表包含tit,com,pic,lanmu,date等字段，tit用于安全存儲信息的標(biāo)題內(nèi)容，com用于存儲信息的詳細(xì)信息，pic用于存儲插入圖片，lanmu用于數(shù)據(jù)記錄的信息屬于lanmu表的哪一列。本模塊組成中的lanmu表只有這一列。表4.1admin表的詳細(xì)結(jié)構(gòu)字段名數(shù)據(jù)類型字段大小說明user文本50管理員登錄名password文本50管理員登錄密碼表4.2article表的詳細(xì)結(jié)構(gòu)字段名數(shù)據(jù)類型字段大小說明tit文本50新聞題目pic文本50上傳圖片date文本50新聞發(fā)布日lanmu文本50文章欄目com備注新聞內(nèi)容表4.3lanmu表詳細(xì)結(jié)構(gòu)字段名數(shù)據(jù)類型字段大小說明lanmu文本50欄目名稱1用戶瀏覽信息的詳細(xì)設(shè)計(jì)當(dāng)用戶在前臺服務(wù)點(diǎn)擊特定功能的編輯記錄后，頁面自動初始化參數(shù)“article_view.asp”，該文件通過運(yùn)行附贈的asp腳本代碼從數(shù)據(jù)庫調(diào)出所需媒體新聞的詳細(xì)信息，并將其數(shù)據(jù)顯示在前臺供用戶上網(wǎng)瀏覽。2管理員進(jìn)行新聞管理的詳細(xì)設(shè)計(jì)管理員進(jìn)入more.asp頁面上的“新聞管理門戶”網(wǎng)頁鏈接，調(diào)用“l(fā)ogin.asp”相關(guān)文件，打開管理員登錄窗口。管理員輸入賬號密碼。在頁面登錄之前，頁面首先調(diào)用文件“cklogin.asp”進(jìn)行密碼驗(yàn)證過程。管理員密碼登陸后，進(jìn)入新聞配置界面。您可以修改管理員數(shù)字密碼，頒布、改動、注銷賬號。打開鏈接“在開設(shè)專欄中添加編輯文章”，頁面會調(diào)用“addarticle.asp”文件內(nèi)容，打開“靜態(tài)頁”頁面添加編輯文章。本頁面包含文章題目、文字圖片、文章鏈接等界面“添加新聞”。填寫文章題目，選擇本地上傳圖片，然后填寫完整文章內(nèi)容，點(diǎn)擊“提交”功能按鈕，頁面會自動調(diào)用文件“add.asp”完成新聞(信息)分享功能。點(diǎn)擊新聞審核界面的“調(diào)換”按鈕，可以直接進(jìn)入相應(yīng)文章的更改頁面。在編輯文章時，還需要調(diào)用“add.asp”文件來完成新聞的信息數(shù)據(jù)庫。如果你點(diǎn)擊“刪除”鏈接在編輯文章,消息行“刪除”按鈕的位置將被刪除,也就是說,從數(shù)據(jù)庫中刪除內(nèi)容之后,頁面會刷新按鈕,新聞已被刪除后頁面將顯示在前臺。此過程也稱為“add.asp”文件來完成。允許用戶瀏覽信息的關(guān)鍵代碼存儲在“article_view.asp”文件中:<！——#include文件=“conn.asp”><%Idl=request.querystring("id")‘查詢id中所有值的集合設(shè)置rs=server.createobject(“adodb.recordset”)的記錄集Sql="select*fromarticlewhereid="+cstr(idl)rs.opensql,dd=rs(“date”)照片=rs(“pic”)rs.update%>通過以下代碼實(shí)現(xiàn)的功能是:如果數(shù)據(jù)庫中有照片，刪除照片，顯示房源新聞內(nèi)容的左端，并在信息發(fā)布日期的右下角顯示新聞內(nèi)容。<%ifpic<>""then07o><imgborder="0"src=pic/<%=rs("pic")%>align="left"><br><%endif%><%=rs("com")%><tdwidth="3%”height="18"></td><%rs.closesetrs=nothingconn.closesetcorm=nothing%><tdwidth="94%”height="18"align="right"><%=dd%></td>。（三）在線交流模塊設(shè)計(jì)與實(shí)現(xiàn)在這個模塊中，用戶可以表達(dá)自己的觀點(diǎn)和問題，也可以實(shí)現(xiàn)回答其他同學(xué)的問題，從而阻斷用戶之間的在線交流。登錄后，管理員可以對問題進(jìn)行過濾，對相應(yīng)的主題進(jìn)行修改和刪除，也可以設(shè)置某一主題的文章作為重點(diǎn)留言或停留在頂部，以便及時實(shí)現(xiàn)BBS的基本功能。1在線交流模塊的詳細(xì)設(shè)計(jì)本模塊的數(shù)據(jù)庫設(shè)計(jì)有三個表:admin表、bbs表、info表。其中管理員表包含admin_name、admin_pass兩個字段，分別存儲管理員登錄名和密碼;信息表中存儲了論壇的名稱、論壇的作者、該作者發(fā)表的帖子的總數(shù)和該作者回復(fù)的總數(shù)。對應(yīng)的字段有title,message,user_name,ip,layer,re_number,uptop,jingpin,re_name,re_time,add_time對應(yīng)于存儲信息論壇標(biāo)題、論壇標(biāo)題、論壇內(nèi)容、版主名字、主機(jī)IP、數(shù)量的反應(yīng),無論是在頂部，最后一個回復(fù)者的名字，最后一個回復(fù)的時間和消息發(fā)布的時間。表4.4admin表的詳細(xì)結(jié)構(gòu)字段名數(shù)據(jù)類型字段大小說明Admin_name文本50管理員登錄名Admin_pass文本50管理員登錄密碼表4.5bbs表的詳細(xì)結(jié)構(gòu)字段名數(shù)據(jù)類型字段大小說明title文本50帖子標(biāo)題message文本50帖子內(nèi)容Usre_name文本50版主名字ip文本50主機(jī)iplayer數(shù)字長整型所在層數(shù)Re_name文本50回復(fù)者名字Re_time時間回復(fù)時間表4.6info表詳細(xì)結(jié)構(gòu)字段名數(shù)據(jù)類型字段大小說明ltname文本50論壇名稱zzname文本50論壇名字ztnum數(shù)字長整型主體數(shù)目remum數(shù)字長整型回復(fù)數(shù)目2建立ASP與Access數(shù)據(jù)庫的連接與Access數(shù)據(jù)庫連接的代碼如下:<%dimdbsetdb=server.createobject("adodb.connection")db.open"dbq="&server.mappath("bbs.mdb")&”;driver={microsoftaccessdriver(*.mdb)}”%>在每一個與數(shù)據(jù)庫有讀寫操作的頁面加入<!一##includefile="conn.asp”一>代碼，就可以實(shí)現(xiàn)ASP與數(shù)據(jù)庫的訪問。3界面詳細(xì)設(shè)計(jì)登錄后，用戶進(jìn)入圖4.2所示的界面。在這個頁面上，用戶在標(biāo)題中輸入消息的標(biāo)題，在內(nèi)容中輸入消息的詳細(xì)信息，在名稱中輸入消息的名稱。點(diǎn)擊“發(fā)送”按鈕，頁面調(diào)用“index.asp”文件中的腳本來處理消息，將新消息中的相關(guān)信息寫入數(shù)據(jù)庫，并在前臺顯示。圖4.2用戶發(fā)帖界面用戶可以點(diǎn)擊消息的任意標(biāo)題，讀取消息的詳細(xì)內(nèi)容，并打開回復(fù)界面，如圖5.3所示。在回答頁面上，用戶可以說出他們想要什么。點(diǎn)擊“回復(fù)”按鈕，彈出“re.asp”頁面，在數(shù)據(jù)庫中寫入回復(fù)消息并顯示在前臺。第一個答案在一樓，第二個在二樓，以此類推。4.3瀏覽及回帖界面關(guān)鍵代碼設(shè)計(jì)"index.asp"文件中處理發(fā)帖的腳本如下:<!--#includefile="conn.asp”一><%ifrequest.form("title")<>"”andrequest.form("message")<>""thendimtitle,message,user_name,layer,fid,re_number,iptitle=th(request.form("title"))message=th(request.form("message"))user_name=th(request.form("user_name"))layer=1fid=0renumber=0onnumber=0ip=request.ServerVariables("REMOTE_ADDR")sql="insertintobbs(title,message,user_name,layer,fid,re_number,ip,re_name,ifrequest.QueryString("action")="jingpin"thenid=request.querystring("id")sql="updatebbssetjingpin=1whereid="&iddb.execute(sql)response.redirect"index.asp"endif%>"re.asp"文件中設(shè)置置頂?shù)年P(guān)鍵腳本如下:<%’以下設(shè)為置頂ifrequest.QueryString("action")="ziding"thenid=request.querystring("id")sql="updatebbssetuptop=1whereid="&iddb.execute(sql)response.redirect"index.asp"endif%>五、網(wǎng)頁設(shè)計(jì)系統(tǒng)測試網(wǎng)站建設(shè)基本完成，基本功能初步實(shí)現(xiàn)，但產(chǎn)品是否達(dá)到預(yù)期效果，還需要通過一定的方法進(jìn)行檢驗(yàn)。一方面,需要測試該web頁面代碼是否符合web標(biāo)準(zhǔn):與此同時,它也需要測試web代碼占用的空間的改變之前和之后使用web標(biāo)準(zhǔn),以及是否打開頁面的效果在不同的瀏覽器中是一致的。對于上述項(xiàng)目，本課題采用相應(yīng)的方法對結(jié)果進(jìn)行測試和分析。該工具為Firefox瀏覽器提供的Webdeveloper插件工具中的本地html認(rèn)證工具，用于檢查頁面文件是否符合web標(biāo)準(zhǔn)。因?yàn)轫摂?shù)太多了，不可能測試每個頁面，所以測試一個有代表性的頁面。表5.1部分頁面的測試結(jié)果和說明測試結(jié)果：在HTML測試工具與web標(biāo)準(zhǔn)進(jìn)行比較后，不合規(guī)的代碼被分為兩類:錯誤和警告。錯誤是指代碼明顯不規(guī)則，甚至完全不符合語法，這很容易導(dǎo)致代碼不能正常工作等問題;