電子工程職業(yè)學(xué)院授課方案（教案）網(wǎng)站設(shè)計開發(fā)

xx電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：xx班級：網(wǎng)絡(luò)xx\xx 編寫時間：20xx.08課題：中小型網(wǎng)站創(chuàng)建概述教學(xué)目的及要求：了解網(wǎng)站建設(shè)的目的，了解本學(xué)期本課程考核要求；掌握建設(shè)流程和網(wǎng)站的策劃.教學(xué)重點：網(wǎng)站的規(guī)劃教學(xué)難點：網(wǎng)站的有效規(guī)劃回顧自己了解的網(wǎng)站類型學(xué)習(xí)新課1.1網(wǎng)站建設(shè)的目的

企業(yè)的主頁是企業(yè)在Internet上展示形象的門戶，是企業(yè)開展電子交易的基地，是企業(yè)網(wǎng)上的"家"，設(shè)計制作一個優(yōu)秀的網(wǎng)站是建站企業(yè)成功邁向互聯(lián)網(wǎng)的重要步驟。1.2有效的網(wǎng)站規(guī)劃

知道了網(wǎng)站的用途后，我們即可進(jìn)行網(wǎng)站內(nèi)容的規(guī)劃，在規(guī)劃之前有一個概念很重要，為誰而戰(zhàn)，為何而戰(zhàn)，很多網(wǎng)站這一點都做的不是很好，以下便舉一個例子作為介紹。我們下面將以一個銷售音響的公司作為介紹。大部分的網(wǎng)站，在首頁的主要鏈接項目如下：公司簡介最新消息經(jīng)營理念產(chǎn)品介紹聯(lián)絡(luò)我們回首頁1.3網(wǎng)站建設(shè)的方案1、自己公司建設(shè)一般非網(wǎng)站建設(shè)公司想要建設(shè)一套可發(fā)揮網(wǎng)絡(luò)行銷效果的網(wǎng)站，其實成本是相當(dāng)高的。2、購買套餐軟件建設(shè)3、外包專業(yè)網(wǎng)絡(luò)公司建設(shè)1.4關(guān)于動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別所謂靜態(tài)網(wǎng)頁就是指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。你編的是什么它顯示的就是什么、不會有任何改變。靜態(tài)網(wǎng)頁相對更新起來比較麻煩,適用于一般更新較少的展示型網(wǎng)站。反之不符合靜態(tài)網(wǎng)頁概念的就屬于動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁使用語言:HTML(超文本標(biāo)記語言)在網(wǎng)站設(shè)計中,一般的靜態(tài)網(wǎng)頁網(wǎng)址都是以.htm、.html、.shtml、.xml等為后后綴的,但是,并不是說靜態(tài)網(wǎng)頁就沒有動態(tài)的效果,有的靜態(tài)網(wǎng)頁也會有動態(tài)效果,如.GIF格式的動畫、FLASH、滾動字母等,動態(tài)網(wǎng)頁使用語言:HTML+ASP或HTML+PHP或HTML+JSP等。區(qū)別靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁最重要的一點程序是否在服務(wù)器端運行。這是最重要標(biāo)志。

1.5網(wǎng)站的策劃書的編寫根據(jù)每個網(wǎng)站的情況不同，網(wǎng)站策劃書也是不同的，但是最終都不要離開主的框架，那么在網(wǎng)站建設(shè)前期，我們要進(jìn)行市場分析，然后總結(jié)一下，形成書面報告，對網(wǎng)站建設(shè)和運營進(jìn)行有計劃的指導(dǎo)和階段性總結(jié)都有很好的效果。網(wǎng)站策劃一般可以按照下面的思路來進(jìn)行整理，當(dāng)然特殊情況要特殊對待：我們按照門戶網(wǎng)站、企業(yè)網(wǎng)站、個人網(wǎng)站的建設(shè)來分別進(jìn)行框架定位。網(wǎng)站策劃的大體思路如下：1.5.1網(wǎng)站建設(shè)市場分析及網(wǎng)站的定位我們把市場分析和網(wǎng)站的定位聯(lián)系起來放在第一章，是因為它們之間有所聯(lián)系，我們要根據(jù)市場分析得來的情況對網(wǎng)站進(jìn)行定位和目標(biāo)調(diào)整。與此同時，我們還要進(jìn)行網(wǎng)站服務(wù)對象分析。旁批欄：1.5.2網(wǎng)站服務(wù)對象分析第一梯隊服務(wù)對象：對我們網(wǎng)站具有很高依賴性，或者是我們網(wǎng)站服務(wù)內(nèi)容主要面向的對象。比如汽車配件網(wǎng)站，它的第一梯隊服務(wù)對象就是汽車配件供應(yīng)商，汽車配件采購商以及汽車配件貿(mào)易公司等等。第二梯隊服務(wù)對象：對我們網(wǎng)站有興趣，或者是第一梯隊服務(wù)對象替補（所以第一梯隊服務(wù)對象替補就是一些本來應(yīng)該是第一梯隊服務(wù)對象的，但對網(wǎng)站不了解，對互聯(lián)網(wǎng)不認(rèn)同的一些企業(yè)或個人。它們隨時都有可能成為第一梯隊服務(wù)對象)，或者是和本行業(yè)互補的一些企業(yè)和個人。第三梯隊服務(wù)對象：包括行業(yè)的研究者、學(xué)者、新聞媒體等等。1.5.3網(wǎng)站的內(nèi)容建設(shè)在對網(wǎng)站進(jìn)行市場分析調(diào)研和定位之后，我們要做的就是網(wǎng)站的基礎(chǔ)設(shè)施建設(shè)了，它包括網(wǎng)站的前臺頁面設(shè)計制作和網(wǎng)站的后臺編程，在網(wǎng)站全部做完之后還要進(jìn)行網(wǎng)站測試和上傳等工作。1.網(wǎng)站設(shè)計2.網(wǎng)站編程1.5.4網(wǎng)站測試和上傳網(wǎng)站的設(shè)計和編程全部做完之后，我們要對網(wǎng)站進(jìn)行測試和上傳。首先我們應(yīng)該將網(wǎng)站上傳到網(wǎng)站空間，然后對網(wǎng)站進(jìn)行測試，同時也是對網(wǎng)站空間進(jìn)行測試。一般來說，網(wǎng)站測試需要進(jìn)行的就是網(wǎng)站頁面的完整程度，網(wǎng)站編程代碼的繁簡程度和完整性，網(wǎng)站空間的鏈接速度和網(wǎng)站空間的加壓測試承受度。1.5.5網(wǎng)站內(nèi)容添加1.5.6網(wǎng)站的推廣網(wǎng)站的推廣可是說是網(wǎng)站建設(shè)中尤為重要的一部分，推廣做的好可以說網(wǎng)站建設(shè)就成功了一大半，那么怎么樣進(jìn)行推廣呢？推廣的方式有哪些呢？讓我們來看一下：1.免費推廣方式2.付費推廣方式小結(jié)重點我們介紹了網(wǎng)站策劃書的編寫作業(yè)自己做一個網(wǎng)站策劃書旁批欄：xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:網(wǎng)站策劃書的寫法及應(yīng)用教學(xué)目的及要求：掌握網(wǎng)站策劃書的寫法教學(xué)重點：網(wǎng)站策劃書的寫法教學(xué)難點：網(wǎng)站策劃書的寫法及應(yīng)用一、復(fù)習(xí)網(wǎng)站建立中用到的一些技術(shù)二、學(xué)習(xí)新課網(wǎng)站的建設(shè)策劃網(wǎng)站策劃的內(nèi)容一、建設(shè)網(wǎng)站前的市場分析1、相關(guān)行業(yè)的市場是怎樣的，市場有什么樣的特點，是否能夠在互聯(lián)網(wǎng)上開展公司業(yè)務(wù)。2、市場主要競爭者分析，競爭對手上網(wǎng)情況及其網(wǎng)站策劃、功能作用。3、公司自身條件分析、公司概況、市場優(yōu)勢，可以利用網(wǎng)站提升哪些競爭力，建設(shè)網(wǎng)站的能力(費用、技術(shù)、人力等)。二、建設(shè)網(wǎng)站目的及功能定位1、為什么要建立網(wǎng)站，是為了樹立企業(yè)形象，宣傳產(chǎn)品，進(jìn)行電子商務(wù)，還是建立行業(yè)性網(wǎng)站?是企業(yè)的基本需要還是市場開拓的延伸?2、整合公司資源，確定網(wǎng)站功能。根據(jù)公司的需要和計劃，確定網(wǎng)站的功能類型：企業(yè)型網(wǎng)站、應(yīng)用型網(wǎng)站、商業(yè)型網(wǎng)站(行業(yè)型網(wǎng)站)、電子商務(wù)型網(wǎng)站;企業(yè)網(wǎng)站又分為企業(yè)形象型、產(chǎn)品宣傳型、網(wǎng)上營銷型、客戶服務(wù)型、電子商務(wù)型等。3、根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達(dá)到的目的作用。4、企業(yè)內(nèi)部網(wǎng)(Intranet)的建設(shè)情況和網(wǎng)站的可擴(kuò)展性。三、網(wǎng)站技術(shù)解決方案(與專業(yè)公司商議)根據(jù)網(wǎng)站的功能確定網(wǎng)站技術(shù)解決方案。1、采用自建服務(wù)器，還是租用虛擬主機(jī)。2、選擇操作系統(tǒng)，用Window2003/NT還是Unix、Linux。分析投入成本、功能、開發(fā)、穩(wěn)定性和安全性等。3、采用模板自助建站、建站套餐還是個性化開發(fā)。4、網(wǎng)站安全性措施，防黑、防病毒方案(如果采用虛擬主機(jī)，則該項由專業(yè)公司代勞)。5、選擇什么樣的動態(tài)程序及相應(yīng)數(shù)據(jù)庫。如程序ASP、JSP、PHP;數(shù)據(jù)庫SQL、ACCESS、ORACLE等。四、網(wǎng)站內(nèi)容及實現(xiàn)方式(與專業(yè)公司商議)1、根據(jù)網(wǎng)站的目的確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航。一般企業(yè)型網(wǎng)站應(yīng)包括：公司簡介、企業(yè)動態(tài)、產(chǎn)品介紹、客戶服務(wù)、聯(lián)系方式、在線留言等基本內(nèi)容。更多內(nèi)容如：常見問題、營銷網(wǎng)絡(luò)、招賢納士、在線論壇、英文版等等。2、根據(jù)網(wǎng)站的目的及內(nèi)容確定網(wǎng)站整合功能。如FLASH引導(dǎo)頁、會員系統(tǒng)、網(wǎng)上購物系統(tǒng)、在線支付、問卷調(diào)查系統(tǒng)、在線支付、信息搜索查詢系統(tǒng)、流量統(tǒng)計系統(tǒng)等。3、確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航中的每個頻道的子欄目。如公司簡介中可以包括：總裁致詞、發(fā)展歷程、企業(yè)文化、核心優(yōu)勢、生產(chǎn)基地、科技研發(fā)、合作伙伴、主要客戶、客戶評價等;客戶服務(wù)可以包括：服務(wù)熱線、服務(wù)宗旨、服務(wù)項目等。4、確定網(wǎng)站內(nèi)容的實現(xiàn)方式。如產(chǎn)品中心使用動態(tài)程序數(shù)據(jù)庫還是靜態(tài)頁面;營銷網(wǎng)絡(luò)是采用列表方式還是地圖展示。五、網(wǎng)頁設(shè)計1、網(wǎng)頁美術(shù)設(shè)計要求，網(wǎng)頁美術(shù)設(shè)計一般要與企業(yè)整體形象一致，要符合企業(yè)CI規(guī)范。要注意網(wǎng)頁色彩、圖片的應(yīng)用及版面策劃，保持網(wǎng)頁的整體一致性。2、在新技術(shù)的采用上要考慮主要目標(biāo)訪問群體的分布地域、年齡階層、網(wǎng)絡(luò)速度、閱讀習(xí)慣等。3、制定網(wǎng)頁改版計劃，如半年到一年時間進(jìn)行較大規(guī)模改版等。六、費用預(yù)算1、企業(yè)建站費用的初步預(yù)算一般根據(jù)企業(yè)的規(guī)模、建站的目的、上級的批準(zhǔn)而定。2、專業(yè)建站公司提供詳細(xì)的功能描述及報價，企業(yè)進(jìn)行性價比研究。3、網(wǎng)站的價格從幾千元到十幾萬元不等。網(wǎng)站建設(shè)的費用一般與功能要求是成正比的。七、網(wǎng)站維護(hù)1、服務(wù)器及相關(guān)軟硬件的維護(hù)，對可能出現(xiàn)的問題進(jìn)行評估，制定響應(yīng)時間。2、數(shù)據(jù)庫維護(hù)，有效地利用數(shù)據(jù)是網(wǎng)站維護(hù)的重要內(nèi)容，因此數(shù)據(jù)庫的維護(hù)要受到重視。3、內(nèi)容的更新、調(diào)整等。4、制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范化。5、說明：動態(tài)信息的維護(hù)通常由企業(yè)安排相應(yīng)人員進(jìn)行在線的更新管理;靜態(tài)信息(即沒用動態(tài)程序數(shù)據(jù)庫支持)可由專業(yè)公司進(jìn)行維護(hù)。八、網(wǎng)站測試網(wǎng)站發(fā)布前要進(jìn)行細(xì)致周密的測試，以保證正常瀏覽和使用。主要測試內(nèi)容：1、文字、圖片是否有錯誤。2、程序及數(shù)據(jù)庫測試。3、鏈接是否有錯誤。九、網(wǎng)站發(fā)布與推廣以上為網(wǎng)站策劃中的主要內(nèi)容，根據(jù)不同的需求和建站目的，內(nèi)容也會在增加或減少。在建設(shè)網(wǎng)站之初一定要進(jìn)行細(xì)致的策劃，才能達(dá)到預(yù)期建站目的。老師講解并舉例分析：見上課的補充材料1.紹興團(tuán)購網(wǎng)商業(yè)計劃書2.網(wǎng)站策劃書參考模板3.購物網(wǎng)站規(guī)劃書三、學(xué)生練習(xí)，學(xué)生課后根據(jù)自己選擇的主題進(jìn)行網(wǎng)站策劃四、作業(yè)。完成網(wǎng)站策劃xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:1.6-1.8節(jié)網(wǎng)站設(shè)計原則、色彩、布局教學(xué)目的及要求：掌握網(wǎng)站布局的設(shè)計方法教學(xué)重點：網(wǎng)站布局教學(xué)難點：網(wǎng)站布局一、復(fù)習(xí)網(wǎng)站策劃二、學(xué)習(xí)新課1網(wǎng)站設(shè)計原則1.明確建立網(wǎng)站的目標(biāo)和用戶需求。根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以“消費者(customer)”為中心，而不是以“美術(shù)”為中心進(jìn)行設(shè)計規(guī)劃。明確設(shè)計站點的目的和用戶需求，從而做出切實可行的設(shè)計計劃。2.網(wǎng)頁設(shè)計主題鮮明。在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。3.版式設(shè)計之整體性。即設(shè)計作品各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應(yīng).并注意整個頁面設(shè)計風(fēng)格統(tǒng)一、色彩統(tǒng)一、布局統(tǒng)一，即形成網(wǎng)站高度的形象統(tǒng)一。使整個頁面設(shè)計的各個部分極為融洽。4.版式設(shè)計之分割性。即按照內(nèi)容、主題和信息的分類要求，將頁面分成若干板塊、欄目，使瀏覽者一目了然。吸引瀏覽者的眼球，還能通過網(wǎng)頁達(dá)到信息宣傳的目的，顯示出鮮明的信息傳達(dá)效果。5.版式設(shè)計之對比性。在設(shè)計過程中，通過多與少、主與次、黑與白、動與靜、聚與散等對比手法的運用，使網(wǎng)頁主題更加突出鮮明而富有生氣。6.網(wǎng)頁設(shè)計的和諧性。網(wǎng)頁布局應(yīng)該符合人類審美的基本原則，渾然一體。如果僅僅是色彩、形狀、線條等的隨意混合，那么設(shè)計出來的作品不但沒有生氣、靈感，甚至連最基本的視覺設(shè)計和信息傳達(dá)功能也無法實現(xiàn)。如果選擇了與主頁內(nèi)容不和諧的色調(diào)，就會傳遞錯誤的信息，造成混亂。7.導(dǎo)向清晰。網(wǎng)頁設(shè)計中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進(jìn)或后退，而不會讓他們使用瀏覽器上的前進(jìn)或后退。我們在所有的圖片上使用“ALT”標(biāo)識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。8.非圖形的內(nèi)容。由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們，我們?nèi)匀唤ㄗh您要確定您的網(wǎng)站將為他們提供的是有價值的內(nèi)容，而不是過度的裝飾。1.7網(wǎng)站頁面色彩的規(guī)劃一般情況下要注意以下幾點，1、忌諱使用強烈對比的顏色搭配做主色;2、配色簡潔，主色要盡量控制在三種以內(nèi);3、背景和內(nèi)容的對比要明顯，少用花紋復(fù)雜的背景圖片，以便突出顯示文字內(nèi)容。1.8合理的網(wǎng)站欄目結(jié)構(gòu)布局合理的網(wǎng)站欄目結(jié)構(gòu)主要表現(xiàn)在下面幾個方面：·通過主頁可以到達(dá)任何一個一級欄目首頁、二級欄目首頁以及最終內(nèi)容頁面;·通過任何一個網(wǎng)頁可以返回上一級欄目頁面并逐級返回主頁;·主欄目清晰并且全站統(tǒng)一;·通過任何一個網(wǎng)頁可以進(jìn)入任何一個一級欄目首頁。不同主題的網(wǎng)站對網(wǎng)頁內(nèi)容的安排會有所不同，但大多數(shù)網(wǎng)站首頁的頁面結(jié)構(gòu)都會包括頁面標(biāo)題、網(wǎng)站LOGO、導(dǎo)航欄、登錄區(qū)、搜索區(qū)、熱點推薦區(qū)、主內(nèi)容區(qū)和頁腳區(qū)，其他頁面不需要設(shè)置如此復(fù)雜了，一般由頁面標(biāo)題、網(wǎng)站LOGO、導(dǎo)航欄、主內(nèi)容區(qū)和頁腳區(qū)等構(gòu)成。網(wǎng)頁布局方法介紹1.紙上布局法2.軟件布局法1.8.3網(wǎng)頁布局的技術(shù)1.層疊樣式表的應(yīng)用

2.表格布局3.框架布局1.8.4網(wǎng)頁布局的基本類型網(wǎng)頁布局只能在左右對稱結(jié)構(gòu)布局、“同”字型結(jié)構(gòu)布局、“回”字型結(jié)構(gòu)布局、“匡”字型結(jié)構(gòu)布局、“廠”字型結(jié)構(gòu)布局、自由式結(jié)構(gòu)布局、“另類”結(jié)構(gòu)布局等幾種布局的基本結(jié)構(gòu)中選擇。圖片參見教材。1.8.5網(wǎng)站首頁布局設(shè)計網(wǎng)站首頁是網(wǎng)站給用戶的第一印象，首頁頁面布局需從主題、導(dǎo)航、內(nèi)容等方面入手，下面以百度百科的頁面為例進(jìn)行首頁頁面布局分析。1.首頁主題2．首頁導(dǎo)航3．首頁內(nèi)容1.8.6內(nèi)頁與主頁風(fēng)格保持一致?1.內(nèi)頁與主頁的結(jié)構(gòu)要一致

2.內(nèi)頁與主頁色彩要一致3.內(nèi)頁與主頁導(dǎo)航統(tǒng)一性4.個別具有特色的元素貫穿全部網(wǎng)頁

1.8.7網(wǎng)站內(nèi)頁如何布局網(wǎng)站內(nèi)頁布局合理的方法，也就是難的方法：1.內(nèi)頁的頭部網(wǎng)站的內(nèi)頁的頭部應(yīng)該都要一樣，而且要獨立的寫出來，然后采取調(diào)用的方法，這樣就精簡了網(wǎng)站的代碼，給網(wǎng)站減肥，對網(wǎng)站有很大的好處。2.網(wǎng)站的內(nèi)頁導(dǎo)航3.網(wǎng)站內(nèi)頁鏈接的布局4.還有一點就是上一頁和下一頁的布局三、學(xué)生練習(xí)，學(xué)生根據(jù)上一課策劃的網(wǎng)站，進(jìn)行布局選擇和設(shè)計四、作業(yè)。完成網(wǎng)站布局xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:1.9-1.16節(jié)網(wǎng)站的風(fēng)格設(shè)計到網(wǎng)站發(fā)布教學(xué)目的及要求：掌握網(wǎng)站建設(shè)流程教學(xué)重點：網(wǎng)站建設(shè)的全過程介紹教學(xué)難點：網(wǎng)站建設(shè)的全過程介紹一、復(fù)習(xí)網(wǎng)站布局二、學(xué)習(xí)新課1網(wǎng)站風(fēng)格設(shè)計網(wǎng)站的設(shè)計必須要形成自己的風(fēng)格特色，特色就是優(yōu)勢。所謂網(wǎng)站風(fēng)格是指，網(wǎng)站頁面設(shè)計上的視覺元素組合在一起的整體形象，展現(xiàn)給人的直觀感受。這個整體形象包括網(wǎng)站的配色、字體、頁面布局、頁面內(nèi)容、交互性、海報、宣傳語等因素?？梢詮念伾⒕€條和形狀、版式等方面來進(jìn)行設(shè)計。2.網(wǎng)站建設(shè)的基本條件

網(wǎng)站設(shè)計基本條件是：

1．硬件條件

(1）域名：

(2）網(wǎng)站空間：

2．軟件條件1.11網(wǎng)站建設(shè)的常用方法網(wǎng)站設(shè)計的方法很多，但常用的一般有以下幾種：

1.靜態(tài)網(wǎng)頁組成的網(wǎng)站

2．動態(tài)網(wǎng)頁組成的網(wǎng)站

3.動態(tài)網(wǎng)頁數(shù)據(jù)庫

4.WEB應(yīng)用程序組成的動態(tài)網(wǎng)站1.12網(wǎng)站建設(shè)的常用技術(shù)本書我們介紹的是ASP技術(shù)，我們在此基礎(chǔ)上在學(xué)習(xí)ASP.NET,PHP,JSP技術(shù)。1.13常用網(wǎng)站模塊功能及說明1.14中小型網(wǎng)站建設(shè)的基本流程中小型網(wǎng)站的建設(shè)流程如下：1.聯(lián)系網(wǎng)站建設(shè)公司并提交要求(1)向網(wǎng)站建設(shè)公司提出網(wǎng)站建設(shè)基本要求；(2)提供相關(guān)文本及圖片資料。公司介紹項目描述網(wǎng)站基本功能需求基本設(shè)計要求2.

制定網(wǎng)站建設(shè)方案(1)雙方就網(wǎng)站建設(shè)內(nèi)容進(jìn)行協(xié)商，修改、補充，以達(dá)成共識；(2)網(wǎng)站建設(shè)方制定《網(wǎng)站建設(shè)方案》；(3)雙方確定建設(shè)方案具體細(xì)節(jié)及價格。

3.簽署協(xié)議，并支付預(yù)付款(1)雙方簽訂《網(wǎng)站建設(shè)協(xié)議》；(2)客戶支付預(yù)付款；(3)客戶提供網(wǎng)站相關(guān)內(nèi)容資料4.完成初稿，經(jīng)客戶確認(rèn)后進(jìn)行建設(shè)(1)根據(jù)《網(wǎng)站建設(shè)方案》）完成初稿設(shè)計：

首頁風(fēng)格頻道首頁風(fēng)格網(wǎng)站架構(gòu)圖(2)客戶審核確認(rèn)初稿設(shè)計；(3)網(wǎng)站建設(shè)方完成整體網(wǎng)站制作。5.

網(wǎng)站開通，客戶瀏覽驗收(1)客戶根據(jù)協(xié)議內(nèi)容進(jìn)行驗收工作；(2)驗收合格，由客戶簽發(fā)"網(wǎng)站建設(shè)驗收合格確認(rèn)書"；(3)戶支付余款，網(wǎng)站開通；(4)為客戶注冊域名、開通網(wǎng)站空間、上傳制作文件、設(shè)置電子郵箱。6.網(wǎng)站交付使用(1)驗收通過后，網(wǎng)站正式交付使用。向客戶移交所有的管理和登陸權(quán)限，以便以后的網(wǎng)站更新和維護(hù)。(2)網(wǎng)站建設(shè)公司提供免費的電話技術(shù)支持。1.15網(wǎng)站內(nèi)容制作的流程網(wǎng)站創(chuàng)建流程如下：(1)網(wǎng)站策劃網(wǎng)站策劃包括主題策劃、內(nèi)容策劃、風(fēng)格策劃、網(wǎng)站創(chuàng)意、目錄設(shè)計、布局策劃等。(2)明確網(wǎng)站開放對象明確網(wǎng)站開放對象：當(dāng)一個網(wǎng)站主題確定后，我們所要考慮的就是確定網(wǎng)站服務(wù)對象，我們網(wǎng)站的真正瀏覽者是那些群體。只有正確的定位了網(wǎng)站瀏覽群體后，才能真正體現(xiàn)網(wǎng)站的可觀性。(3)繪制網(wǎng)站草圖繪制網(wǎng)站草圖，就是把網(wǎng)頁的平面效果圖畫在一張紙上，便于以后的設(shè)計和排版。說起來很容易，但實際上較為復(fù)雜，這往往是一個網(wǎng)站成功的關(guān)鍵因素。當(dāng)人瀏覽網(wǎng)站時。網(wǎng)頁的精彩度是把握也是吸引瀏覽者的關(guān)鍵。在做網(wǎng)站前，一定要先設(shè)計好平面效果圖。把所有欄目擺放的具體位置和將用到的一些什么圖片一定要計劃好。這樣便于收集和制作。(4)建立網(wǎng)站文件夾(5)收集建站資源收集網(wǎng)絡(luò)資料、針對網(wǎng)站平面效果圖及版塊內(nèi)容準(zhǔn)備好所要用到的資料，然后存放在對應(yīng)的文件夾，以便在建站時調(diào)用。(6)設(shè)計網(wǎng)站頁面內(nèi)容(7)網(wǎng)上安家及域名申請(8)網(wǎng)站發(fā)布(9)網(wǎng)站宣傳維護(hù)及管理1.16網(wǎng)站內(nèi)容制作的詳細(xì)步驟1.16.1網(wǎng)站主題策劃1.16.2網(wǎng)站風(fēng)格和網(wǎng)站創(chuàng)意1.16.3網(wǎng)站內(nèi)容規(guī)劃在確定了網(wǎng)站主題和網(wǎng)站風(fēng)格后，還需要考慮規(guī)劃網(wǎng)站的內(nèi)容。1.16.4網(wǎng)站設(shè)計的技術(shù)路線網(wǎng)站設(shè)計采用什么技術(shù)路線是網(wǎng)站策劃的一部分。在動手制作網(wǎng)頁之前，應(yīng)該首先明確網(wǎng)站的定位，從而選擇適當(dāng)?shù)募夹g(shù)路線?；ヂ?lián)網(wǎng)上的網(wǎng)站，按照功能和性質(zhì)大致可以分為個人網(wǎng)站、商業(yè)網(wǎng)站、學(xué)術(shù)機(jī)構(gòu)和政府團(tuán)體網(wǎng)站。1.16.5網(wǎng)站欄目規(guī)劃及布局目錄設(shè)計1．欄目與版塊的劃分2．網(wǎng)站的目錄結(jié)構(gòu)策劃網(wǎng)站的目錄是指在建立網(wǎng)站時所創(chuàng)建的目錄。網(wǎng)站的目錄設(shè)計與網(wǎng)站的欄目版塊設(shè)計密切相聯(lián)，規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)要根據(jù)網(wǎng)站的主題和內(nèi)容來進(jìn)行分類規(guī)劃，不同的欄目對應(yīng)不同的目錄。1.16.6導(dǎo)航設(shè)計1.16.7鏈接設(shè)計1.16.8網(wǎng)站資料搜集1.16.9網(wǎng)頁設(shè)計在網(wǎng)站規(guī)劃工作完成后，即可以開始網(wǎng)頁設(shè)計。網(wǎng)頁設(shè)計首先需要進(jìn)行首頁設(shè)計。首頁是網(wǎng)站的靈魂，一定要在首頁設(shè)計上多下功夫，然后再設(shè)計一級頁面、二級頁面，將一級頁面、二級頁面做成模板或者庫進(jìn)行保存，然后在設(shè)計其他一級、二級頁面時即可從模板新建網(wǎng)頁或者插入庫項目，這樣維護(hù)起來更較為方便，設(shè)計網(wǎng)頁的速度也較快。設(shè)計網(wǎng)頁時要注意版面的規(guī)劃。版面規(guī)劃主要是如何突出主題內(nèi)容，如何提高網(wǎng)頁下載打開的速度。在本書后面章節(jié)將以一個企業(yè)網(wǎng)站“房產(chǎn)信息網(wǎng)”的建立來講解網(wǎng)頁設(shè)計的基本技巧。1.16.10網(wǎng)上安家1.16.11域名申請在申請網(wǎng)站空間后，接下來要考慮的問題是選擇域名。域名被視為企業(yè)的網(wǎng)上商標(biāo)，其重要性不言而喻。域名的申請知識及方法參見本書第7章相關(guān)內(nèi)容。1.16.12網(wǎng)站發(fā)布網(wǎng)站在空間申請及域名申請好以后，則可以進(jìn)行站點發(fā)布，將網(wǎng)站上傳到服務(wù)器上。發(fā)布站點的方法很多，可以采用Dreamweaver8/CS3 /CS4/CS5/CS6自帶的發(fā)布站點功能或者采用專門的FTP發(fā)布工具進(jìn)行網(wǎng)站發(fā)布。以上兩種發(fā)布網(wǎng)站的方法將在網(wǎng)站項目工程建設(shè)過程中進(jìn)行詳細(xì)講解。1.16.13網(wǎng)站宣傳維護(hù)管理三、學(xué)生練習(xí)，學(xué)生自己選擇策劃的網(wǎng)站進(jìn)行網(wǎng)站的內(nèi)容、風(fēng)格設(shè)計四、作業(yè)。了解網(wǎng)站建設(shè)全過程，并完成網(wǎng)站的主題、內(nèi)容策劃xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:練習(xí)網(wǎng)站的策劃教學(xué)目的及要求：掌握網(wǎng)站的策劃教學(xué)重點：策劃書的編寫、網(wǎng)站的主題、內(nèi)容、布局規(guī)劃教學(xué)難點：策劃書的編寫、網(wǎng)站的主題、內(nèi)容、布局規(guī)劃一、復(fù)習(xí)網(wǎng)站建設(shè)流程二、學(xué)習(xí)新課完成網(wǎng)站全過程的策劃的與初步設(shè)計1.策劃書的編寫2.策劃網(wǎng)站的主題3.策劃網(wǎng)站的內(nèi)容4.策劃網(wǎng)站的布局5.策劃網(wǎng)站的風(fēng)格和色彩等6.空間和域名的策劃三、學(xué)生練習(xí)，完成網(wǎng)站的策劃四、作業(yè)。完成網(wǎng)站策劃，編制完成的策劃書xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:安裝配置IIS教學(xué)目的及要求：掌握XP和WINDOWS7安裝IIS的方法教學(xué)重點：安裝配置IIS教學(xué)難點：安裝配置IIS一、復(fù)習(xí)網(wǎng)站建設(shè)流程二、學(xué)習(xí)新課2.1.1WindowsXP下面安裝與配置IIS雖然，讀者朋友自己配置計算機(jī)現(xiàn)在安裝WindowsXP系統(tǒng)的已經(jīng)不多了，但是在學(xué)校的機(jī)房環(huán)境中使用WindowsXP系統(tǒng)來上課的還是占98%,所以，我們本節(jié)還是要講一下WindowsXP系統(tǒng)中的IIS的安裝與配置。(1)擊“開始”，再打開“控制面板”，雙擊“添加或刪除程序”,如圖2-1所示。（2）雙擊“添加/刪除windows組件”，如圖2-2所示。（3）把“Internet信息服務(wù)（IIS）”復(fù)選框選上，如圖2-3所示。（4）按“下一步”，開始配置組件，如圖2-4所示。（5）單擊“下一步”，直到完成“Windows組件向?qū)А?，如圖2-5所示。（6）單擊“完成”關(guān)閉向?qū)?，回到控制面板，雙擊“管理工具”，如圖2-6所示。（7）雙擊“Internet信息服務(wù)快捷方式”，如圖2-7所示。（8）如圖2-8所示，打開其中的子菜單，右鍵單擊“默認(rèn)網(wǎng)站”，再單擊瀏覽。圖2-8選擇默認(rèn)網(wǎng)站（9）瀏覽的結(jié)果是無權(quán)查看網(wǎng)頁，如圖2-9所示，說明IIs還未搭建成功。圖2-9無權(quán)查看網(wǎng)頁（10）回到“管理工具”，雙擊“計算機(jī)管理”，如圖2-10所示。（11）在用戶中對來賓賬戶和進(jìn)程賬戶進(jìn)行“屬性”修改，如圖2-11所示。（12）將兩賬戶屬性中的“賬戶已停用”的勾去掉，如圖2-12、圖2-13所示。圖2-13去掉賬戶屬性中的“賬戶已停用”的勾（13）回到管理工具｜用戶的窗口中，發(fā)現(xiàn)兩個帳號已經(jīng)啟用了，如圖2-14所示。（14）返回“管理工具”，對“組件服務(wù)”進(jìn)行修改，如圖2-15所示。（15）在控制臺根目錄中找到“我的電腦”，如圖2-16所示。（16）找到“COM+應(yīng)用程序”，如圖2-17所示。圖2-17找到“COM+應(yīng)用程序”（17）雙擊“COM+應(yīng)用程序”，右鍵單擊“IISOutof…..”圖標(biāo)，然后選擇屬性，在“IISUTOF…..”屬性中，切換到標(biāo)識選項卡，然后選擇“系統(tǒng)帳戶”這個選項，如圖2-18所示。圖2-18選擇“系統(tǒng)帳戶”這個選項（18）再在“IISOUTOF…..”圖標(biāo)上右鍵選擇“運行”即可。（19）回到IIS控制臺，再次右鍵單擊“默認(rèn)網(wǎng)站”，瀏覽結(jié)果如圖2-19所示，即表時“IIS”已經(jīng)安裝成功。圖2-19IIS安裝成功2.1.2Windows7下面安裝配置IISWindows7下面安裝配置IIS的步驟如下：（1）打開“控制面板”，如圖2-20所示。（2）在控制面板中打開“管理工具”，如圖2-21所示。（3）我們打開“管理工具”后，沒有找到“Internet信息服務(wù)管理器”，說明IIS沒有安裝，如圖2-22所示。（4）找不到“Internet信息服務(wù)管理器”時，說明沒有添加這功能，我們在控制面板中，單擊“程序和功能”，如圖2-23所示。（5）單擊“打開或關(guān)閉Windows功能”，如圖2-24所示。（6）正在加載“打開或關(guān)閉Windows功能”，如圖2-25所示。（7）添加需要的功能，勾選IIS功能部分，如圖2-26所示。圖2-25勾選IIS功能（8然后出現(xiàn)“Windows正在更改功能”，如圖2-26所示。（8）安裝完成后，在管理工具中找到“Internet信息服務(wù)管理器”，然后雙擊，如圖所示。（9）打開的IIS的主要窗口如圖2-27所示。（10）在圖2-28中單擊“基本設(shè)置”，如圖2-28所示。圖2-28單擊基本設(shè)置（11）出現(xiàn)了“編輯網(wǎng)站”的對話框，如圖2-29所示。圖2-29編輯網(wǎng)站的對話框在圖2-29中，物理路徑下面有個G:\龍口房產(chǎn)網(wǎng)，這是我們原來設(shè)置的物理路徑，現(xiàn)在我們可以更改。（12）我們將物理路徑下面的G:\龍口房產(chǎn)網(wǎng)更改為G:\龍口房產(chǎn)網(wǎng)1，如圖2-30、圖2-31所示。（13）找到圖2-28中IIS窗口中的ASP，然后，在鍵單擊“打開功能”，如圖2-32所示。（14）在ASP主窗口中，作如圖2-33、圖2-34所示的設(shè)置。圖2-33設(shè)置將錯誤發(fā)送到瀏覽器為True圖2-34啟用父路徑為True（15）單擊圖2-35中的高級設(shè)置。（16）出現(xiàn)“高級設(shè)置”的對話框，可以查看我們的配置，如圖2-36所示。（17）在IIS的窗口中找到瀏覽網(wǎng)站區(qū)域，單擊“瀏覽”，如圖2-37所示。圖2-37單擊瀏覽我們到此處為止，Windows7下面的IIS配置已經(jīng)完成。三、學(xué)生練習(xí)，在教室學(xué)生機(jī)上安裝IIS四、作業(yè)。在自己的電腦上安裝IIS(學(xué)生自己電腦多數(shù)是WINDOWS7)xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:2.2創(chuàng)建數(shù)據(jù)庫教學(xué)目的及要求：掌握數(shù)據(jù)庫及數(shù)據(jù)庫表的創(chuàng)建方法教學(xué)重點：掌握數(shù)據(jù)庫及數(shù)據(jù)庫表的創(chuàng)建方法教學(xué)難點：掌握數(shù)據(jù)庫及數(shù)據(jù)庫表的創(chuàng)建方法一、復(fù)習(xí)網(wǎng)站的IIS配置二、學(xué)習(xí)新課（1）選擇安裝的ACCESS2003程序，如圖2-38所示。（2）打開后的初始窗口如圖2-39所示。（3）選擇“文件”｜“新建”，如圖2-40所示。（4）單擊“空數(shù)據(jù)庫”，如圖2-41所示。（5）出現(xiàn)“文件新建數(shù)據(jù)庫”對話框，選擇龍口房產(chǎn)網(wǎng)1的data,然后，我們輸入一個數(shù)據(jù)庫名字qhousedb.mdb，如圖2-42所示。（6）在圖2-43所示的對話框中單擊“創(chuàng)建”，如圖2-43所示。圖2-43單擊創(chuàng)建（7）單擊創(chuàng)建后，出現(xiàn)如圖2-44所示的窗口，我們雙擊使用設(shè)計器創(chuàng)建表。（8）出現(xiàn)需要我們輸入字段名稱和選擇數(shù)據(jù)類型窗口，如圖2-45所示。圖2-45選擇字段名稱和數(shù)據(jù)類型（9）我們打開網(wǎng)上下載的一個數(shù)據(jù)庫，如圖2-46所示。圖2-46打開下載的數(shù)據(jù)庫（10）出現(xiàn)一個警告對話框，提示是否阻止，我們單擊“否”，如圖2-47所示。（11）然后在出現(xiàn)的安全警告的對話框中單擊“打開”，如圖2-48所示。（12）打開數(shù)據(jù)庫后，我們可以看到原來的表，如圖2-49所示。（13）我們找到一個admin的表，單擊打開，如圖2-50所示。圖2-50打開admin的表（14）可以看到里面的數(shù)據(jù)，同時可以看到里面的字段名稱，如圖2-51所示。圖2-50查看表中的數(shù)據(jù)（15）我們打開前面自己創(chuàng)建的數(shù)據(jù)庫，在表1：表中輸入字段名稱和選擇字段類型，如圖2-51所示。圖2-51輸入字段名稱選擇類型（16）輸入字段名稱和選擇類型后的窗口如圖2-52所示。（17）單擊保存按鈕保存表，出現(xiàn)一個“另存為”的對話框，如圖2-53所示。（18）在另存為對話框中輸入表名稱：admin，如圖2-54所示。（19）單擊“確定”按鈕后，出現(xiàn)一個尚未定義主鍵的對話框，我們選擇“是”創(chuàng)建主鍵，如圖2-55所示。（20）到此為止，表創(chuàng)建完成，出現(xiàn)了一個鑰匙圖標(biāo)，如圖2-56所示。圖2-56表創(chuàng)建完成三、學(xué)生練習(xí)，學(xué)生創(chuàng)建數(shù)據(jù)庫及表四、作業(yè)。完成數(shù)據(jù)庫表的創(chuàng)建，根據(jù)策劃的網(wǎng)站創(chuàng)建自己的數(shù)據(jù)庫及表，老師也可以指定內(nèi)容來創(chuàng)建。xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:2.3建立站點教學(xué)目的及要求：掌握DW建立站點的方法教學(xué)重點：掌握DW建立站點的方法教學(xué)難點：掌握DW建立站點的方法一、復(fù)習(xí)網(wǎng)站的數(shù)據(jù)庫建立二、學(xué)習(xí)新課步驟如下：（1）打開Dreamweaver，選擇“站點”｜“新建站點”，如圖2-57所示。（2）出現(xiàn)“站點定義為”對話框，如圖2-58所示。（3）切換到高級選項，如圖2-59所示。圖2-59站點高級選項（4）我們單擊圖2-59中的“本地根文件夾”后面的瀏覽按鈕選擇“龍口房產(chǎn)網(wǎng)1”這個網(wǎng)站，并單擊打開按鈕，如圖2-60所示。注意：我們只是選擇要創(chuàng)建的站點，如果讀者自己的站點名字不是這個名稱，就自己選擇自己創(chuàng)建的名稱。（5）在圖2-61所示的對話框中，我們單擊“選擇”按鈕。圖2-61單擊“選擇”（6）選擇完成后站點定義為高級選項如圖2-62所示。圖2-61站點定義為高級選項（7）在圖2-62中遠(yuǎn)程信息選項卡，我們可以不作改變。（8）切換到測試服務(wù)器選項，我們在“服務(wù)器模型”下拉列表中，我們選擇“ASPVBSCRIPT”，如圖2-63所示。（9）在訪問下拉列表中選擇“本地/網(wǎng)絡(luò)”，如圖2-64所示。（10）完成后的測式服務(wù)器選項如圖2-65所示。圖2-65完成后的測式服務(wù)器選項三、學(xué)生練習(xí)，建立自己的網(wǎng)站站點四、作業(yè)。建立站點xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:2.4ODBC數(shù)據(jù)源創(chuàng)建與連接教學(xué)目的及要求：掌握ODBC數(shù)據(jù)源創(chuàng)建與連接方法教學(xué)重點：掌握ODBC數(shù)據(jù)源創(chuàng)建與連接方法教學(xué)難點：掌握ODBC數(shù)據(jù)源創(chuàng)建與連接方法一、復(fù)習(xí)站點建立二、學(xué)習(xí)新課（1）找到控制面板中的管理工具，如圖2-66所示。（2）雙擊管理工具，找到“數(shù)據(jù)源ODBC”，如圖2-67所示。（3）出現(xiàn)“ODBC數(shù)據(jù)源管理器”對話框，如圖2-68所示。（4）切換到“系統(tǒng)DSN”選項，并單擊“添加”按鈕，如圖2-69所示。圖2-69選擇“添加”（4）出現(xiàn)“創(chuàng)建新數(shù)據(jù)源”的對話框，我們在其中選擇第二行，再單擊“完成”，如圖2-70所示。（5）出現(xiàn)“ODBCMicrosoftAccess安裝”對話框中，我們輸入一個數(shù)據(jù)源的名稱，并單擊“選擇”按鈕，如圖2-71所示。圖2-71輸入數(shù)據(jù)源的名稱，并單擊“選擇”按鈕（6）在“選擇數(shù)據(jù)庫”對話框中，我們展開data，如圖2-72所示。（7）找到我們的數(shù)據(jù)庫，如圖2-73所示。圖2-73找到我們需要的數(shù)據(jù)庫（8）單擊圖2-73中的“確定”按鈕后，回到“ODBCMicrosoftAccess安裝”對話框中，發(fā)現(xiàn)數(shù)據(jù)庫已經(jīng)完成選擇，如圖2-74所示。圖2-74完成數(shù)據(jù)庫選擇（9）單擊“確定”按鈕，數(shù)據(jù)源已經(jīng)建立完成，如圖2-75所示。三、學(xué)生練習(xí)，ODBC連接四、作業(yè)。建立ODBC連接xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:2.5Dreamweaver建立數(shù)據(jù)庫的連接教學(xué)目的及要求：掌握Dreamweaver建立數(shù)據(jù)庫的連接方法教學(xué)重點：掌握Dreamweaver建立數(shù)據(jù)庫的連接方法教學(xué)難點：掌握Dreamweaver建立數(shù)據(jù)庫的連接方法一、復(fù)習(xí)ODBC二、學(xué)習(xí)新課2.5.1使用DSN連接數(shù)據(jù)源（1）打開Dreamweaver中的應(yīng)用程序中的數(shù)據(jù)庫按鈕，展開“+”按鈕，選擇“數(shù)據(jù)源名稱（DSN）”，如圖2-76所示。圖2-76選擇“數(shù)據(jù)源名稱（DSN）”（2）出現(xiàn)“數(shù)據(jù)源名稱（DSN）”對話框，我們在其中作如圖2-77所示的選擇和輸入，并單擊“測試”按鈕。圖2-77“數(shù)據(jù)源名稱（DSN）”對話框（3）測試DSN連接成功，如圖2-78所示。圖2-78DSN連接成功（4）回到應(yīng)用程序數(shù)據(jù)庫面板中，發(fā)現(xiàn)數(shù)據(jù)源已經(jīng)連接成功了，表也出現(xiàn)了，如圖2-79所示。（5）再找到網(wǎng)站文件夾中的連接文件夾，查看連接文件也有了，如圖2-80所示。圖2-80出現(xiàn)了連接文件（6）查看連接中的代碼，可以看到是DSN的連接方式，如圖2-81所示。圖2-81DSN連接2.5.2使用自定義連接字符串步驟如下：（1）在數(shù)據(jù)庫面板中，選擇“自定義連接字符串”，如圖2-82所示。圖2-82選擇“自定義連接字符串”（2）出現(xiàn)“自定義連接字符串”的對話框，我們按圖2-83進(jìn)行設(shè)置。其中“自定義連接字符串”那一欄中的路徑是作者計算機(jī)中的網(wǎng)站路徑。圖2-83“自定義連接字符串”連接（3）單擊“測試”，測試成功了，如圖2-84所示。（4）查看連接文件的源代碼，可以看到完整的連接代碼，如圖2-85所示。圖2-85完成的連接代碼2.5.3“自定義連接字符串”服務(wù)端連接我們在第二種方法使用的是“自定義連接字符串”中的“使用此計算機(jī)上的驅(qū)動程序”，本節(jié)我們講的第三種方法。（1）選擇“自定義連接字符串”，如圖2-86所示。圖2-86選擇“自定義連接字符串”（2）在出現(xiàn)的“自定義連接字符串”對話框中我們選擇“使用測試服務(wù)器上的驅(qū)動程序”，同時在“連接字符串”欄中我們輸入的路徑是一個相對路徑，如圖2-87所示。圖2-87“自定義連接字符串”方法二（3）查看連接代碼，如圖2-88所示。圖2-88查看連接代碼2.5.4使用純代碼連接數(shù)據(jù)庫我們可以建立一個連接文件，手動輸入以下代碼。<%setconn=server.createobject("adodb.connection")//創(chuàng)建連接對象connstr="Provider=Microsoft.jet.oledb.4.0;datasource="&server.mappath("../data/qhousedb.mdb")//數(shù)據(jù)庫驅(qū)動字符串conn.openconnstr//鏈接數(shù)據(jù)庫%>以上代碼的解釋見上面的批注。三、學(xué)生練習(xí)，建立數(shù)據(jù)庫連接四、作業(yè)。完成數(shù)據(jù)庫連接xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:2.6創(chuàng)建第一個測試頁面教學(xué)目的及要求：掌握數(shù)據(jù)顯示的方法教學(xué)重點：掌握數(shù)據(jù)顯示的方法教學(xué)難點：掌握數(shù)據(jù)顯示的方法一、復(fù)習(xí)數(shù)據(jù)庫連接二、學(xué)習(xí)新課（1）單擊“文件”｜“新建”，如圖2-89所示。（2）出現(xiàn)“新建文檔”的對話框，如圖2-90所示。（3）選擇“ASPVBSCript”，并單擊“創(chuàng)建”，如圖2-91所示。（4）出現(xiàn)一個“空白的網(wǎng)頁”，如圖2-92所示。圖2-92出現(xiàn)一個空白的網(wǎng)頁（5）單擊“文件”｜“保存”，如圖2-93所示。（6）保存在我們的站點下面，輸入一個網(wǎng)頁的名稱，如圖2-94所示（7）在該網(wǎng)頁中輸入以下內(nèi)容，如圖2-95所示。圖2-95輸入網(wǎng)頁的內(nèi)容（8）單擊“應(yīng)用程序”面板中的“綁定”，并展開“+”按鈕，選擇“記錄集”，如圖2-96所示。圖2-96選擇記錄集（9）在出現(xiàn)的“記錄集”對話框中，我們進(jìn)行設(shè)置，如圖2-97所示。圖2-97設(shè)置記錄集（10）單擊測試按鈕，可以發(fā)現(xiàn)里面有一條數(shù)據(jù)，如圖2-98所示，（11）回到記錄集面板，展開記錄集，選擇各個字段并單擊“插入”按鈕，如圖2-99所示。圖2-99單擊插入（12）插入后的網(wǎng)頁如圖2-100所示。圖2-100插入記錄后的網(wǎng)頁（13）F12瀏覽，如圖2-101所示。（14）瀏覽結(jié)果如圖2-102所示。圖2-102瀏覽結(jié)果（15）保存網(wǎng)頁，如圖2-103所示。圖2-103保存網(wǎng)頁再通過后面兩個數(shù)據(jù)庫連接來顯示數(shù)據(jù)，同樣可以正常顯示。三、學(xué)生練習(xí)，完成網(wǎng)頁創(chuàng)建及數(shù)據(jù)顯示四、作業(yè)。完成網(wǎng)頁創(chuàng)建及數(shù)據(jù)顯示xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:會員注冊頁面設(shè)計教學(xué)目的及要求：掌握會員注冊頁面設(shè)計方法教學(xué)重點：掌握會員注冊頁面設(shè)計方法教學(xué)難點：掌握會員注冊頁面設(shè)計方法一、復(fù)習(xí)網(wǎng)站的數(shù)據(jù)顯示二、學(xué)習(xí)新課3.1會員數(shù)據(jù)表的設(shè)計用戶注冊和登錄頁面、修改注冊資料，修改密碼，找回密碼功能頁面需要的數(shù)據(jù)表為Company。進(jìn)行表的復(fù)制和粘貼。打開該表查看數(shù)據(jù)表中的字段，如圖3-5所示。這些字段名稱和字段的數(shù)據(jù)類型，如果是我們自己來設(shè)計這個表，可以按照圖3-5自己來輸入和選擇也可以，我們此處只是做了一個復(fù)制的工作。會員注冊頁面是reg.asp以及regsave-1.asp頁面，下面分別介紹。3.2.1reg.asp頁面的設(shè)計（1）將reg.htm另存為reg.asp，如圖3-6所示。（2）reg.asp頁面的表格設(shè)計如圖3-7所示。圖3-7reg.asp的表格區(qū)域設(shè)計（3）我們講一個表格區(qū)域中表單元素的設(shè)計，圖3-8是用戶名后面的文表框的設(shè)計，圖3-9是密碼后的文本框的設(shè)計，圖3-10單選按鈕的設(shè)計。圖3-8用戶名的表單屬性圖3-9密碼的表單元素圖3-10單選按鈕的表單元素（4）切換頁面到源代碼下面，我們看到表單的提交動作是到regsave-1.asp頁面。如圖3-11所示。圖3-11表單的提交動作（5）設(shè)置提交按鈕的動作檢查行為，如圖3-12所示。圖3-12檢查提交按鈕（6）繼續(xù)查看該頁面中的JavaScript控制代碼，該代碼主要是控制提交按鈕的動作。加入JavaScript控制代碼如下：<SCRIPTlanguage=JavaScript> functionval_radio(names,form_name){ varradio_elements=names.split(':'); for(vari=0;i<radio_elements.length;i++) { varvalid=false; for(varj=0;j<eval("document."+form_name+"."+radio_elements[i]+".length");j++) { if(eval("document."+form_name+"."+radio_elements[i]+"[j].checked")) { valid=true; break; } } if(!valid) { returnfalse; } returntrue; }}//以上是控制單選按鈕 functionshopcheck() { if(document.reg.reg_user.value=="")//如果表單中的用戶名文本框中輸入為空 { alert("請?zhí)顚懹脩裘?);//提示需要輸入用戶名 document.reg.reg_user.focus(); returnfalse; }if(document.reg.reg_pwd.value=="")//如果表單中的密碼文本框中輸入為空 { alert("請輸入密碼！");//提示輸入密碼 document.reg.reg_pwd.focus(); returnfalse; } if(document.reg.reg_pwd.value.length<5)//檢查密碼長度 { alert("輸入密碼少于5位"); document.reg.reg_pwd.focus(); returnfalse; }if(document.reg.reg_pwd2.value=="")//檢查確認(rèn)密碼是否輸入 { alert("請再次輸入密碼！"); document.reg.reg_pwd2.focus(); returnfalse; } if(document.reg.reg_pwd.value!=document.reg.reg_pwd2.value)//檢查兩次密碼是不是一樣的 { alert("輸入密碼和確認(rèn)密碼不一樣！"); document.reg.reg_pwd2.focus(); returnfalse; } if(!val_radio('reg_type','reg')){ alert("請選擇會員類別！個人還是房產(chǎn)中介？"); returnfalse; } returntrue; }</SCRIPT>（7）測試reg.asp頁面，測試結(jié)果如圖3-13所示。圖3-13測試頁面3.2.2會員注冊第二個頁面regsave-1.asp的設(shè)計（1）將regsave-1.htm另存為regsave-1.asp，如圖3-14所示。（2）regsave-1.asp的表格區(qū)域如圖3-15所示。圖3-15regsave-1.asp的表格區(qū)域（3）將光標(biāo)移動到如圖3-16所示的用戶名后邊。圖3-16移動光標(biāo)到用戶名處（4）切換到源代碼，增加如圖3-17所示的代碼接受上一個頁面表單元素。圖3-17增加代碼（5）移動光標(biāo)到你的密碼右邊，如圖3-18所示。圖3-18移動光標(biāo)（6）增加密碼的代碼，用于接受上一個頁面?zhèn)魉蛠淼膮?shù)，如圖3-19所示。圖3-19增加密碼代碼（7）光標(biāo)移動在真實姓名后，如圖3-20所示。圖3-20光標(biāo)移動（8）增加代碼用于接受用戶類型，如圖3-21所示。圖3-21接受用戶類型（9）切換到源代碼下面，插入隱藏域，如圖3-22所示。圖3-22切換到源代碼下（10）選擇“插入記錄”｜“表單”｜“隱藏域”命令，如圖3-23所示。（11）設(shè)置各個隱藏域的參數(shù)如圖3-24、圖3-25、圖3-26所示。圖3-24設(shè)置用戶名的隱藏域圖3-25設(shè)置密碼的隱藏域圖3-26設(shè)置用戶類型的隱藏域（12）回到設(shè)計模式，查看下幾個隱藏域的值，我們可以看到幾個隱藏域的表單元素的值如圖3-27、圖3-28、圖3-29所示。（13）設(shè)計完成的表格區(qū)域如圖3-30所示。圖3-30設(shè)計完成的表格區(qū)域（14）選擇“服務(wù)器行為”｜“插入記錄”，如圖3-31所示。（15）在插入記錄的對話框中作如圖3-32所示的設(shè)置。圖3-32插入記錄的設(shè)置其中，reg_modi.asp是個人用戶修改資料的頁面。（16）個人用戶注冊頁面使用插入記錄行為后的設(shè)計完成的表格區(qū)域如圖3-33所示。圖3-33設(shè)計完成的表格區(qū)域（17）給該頁面加入一個控制代碼<%ifrequest.form("reg_type")="1"thenresponse.redirect"editdata_co.asp"response.endendif%>該段代碼的含義是：如果在表單中傳送的用戶類型是1，則轉(zhuǎn)到企業(yè)用戶界面。editdata_co.asp是企業(yè)會員的注冊頁面，如果用戶在reg.asp選擇的是企業(yè)用戶，則會直接到企業(yè)用戶頁面注冊。（18）測試一下用戶注冊頁面，如圖3-34所示。圖3-34測試用戶注冊頁面（19）出現(xiàn)如圖3-35所示的錯誤，經(jīng)過檢查發(fā)現(xiàn)是源代碼有問題。（20）將連接文件的代碼移動到插入記錄的語句代碼的前面。如圖3-36圖3-37所示。圖3-36找到數(shù)據(jù)連接的代碼圖3-37移動代碼（21）注冊成功后，我們本來是到reg_modi.asp進(jìn)行資料修改，但是，我們在reg_modi.asp頁面，我們加了控制代碼進(jìn)行檢查。就是要讓用戶注冊后進(jìn)行登錄。代碼如下：<%ifsession("MM_username")=""thenresponse.redirect"login2.asp"response.endendififsession("reg_type")="1"thenresponse.redirect"reg_modico.asp"response.endendif%>該段代碼的含義：如果用戶沒有登錄則轉(zhuǎn)到login2.asp登錄，如果登錄后的用戶類型是1，則會轉(zhuǎn)到reg_modico.asp企業(yè)用戶修改注冊資料的頁面。（22）我們再次測試注冊的頁面，注冊后直接轉(zhuǎn)到了login2.asp登錄，如圖3-38所示。圖3-38轉(zhuǎn)到登錄（23）我們用注冊的用戶名和密碼登錄成功的頁面，如圖3-39所示。圖3-39登錄后的修改頁面Reg_modi.asp頁面我們在后面的章節(jié)繼續(xù)介紹。三、學(xué)生練習(xí)，本處我們介紹了兩個頁面，要重點看下某些代碼的修改、隱藏區(qū)域的設(shè)置。四、作業(yè)。完成注冊頁面的設(shè)計xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.3檢查新用戶教學(xué)目的及要求：掌握檢查新用戶的設(shè)計方法教學(xué)重點：掌握檢查新用戶的設(shè)計方法教學(xué)難點：掌握檢查新用戶的設(shè)計方法一、復(fù)習(xí)網(wǎng)站策劃二、學(xué)習(xí)新課用戶注冊功能完成后，為了防止用戶重復(fù)注冊，我們添加了重名檢查功能，步驟如下：（1）選擇“服務(wù)器行為”｜“用戶身份驗證”｜“檢查新用戶名”，如圖3-40所示。（2）出現(xiàn)“檢查新用戶名”對話框，按如圖3-41所示進(jìn)行設(shè)置。圖3-41“檢查新用戶名”對話框（3）圖3-41中的轉(zhuǎn)到的頁面并不存在，我們需要新建立一個。單擊“文件”｜“新建”新建一個文檔，如圖3-42所示。（4）將該頁面保存為regfail.asp，并在頁面中輸入以下內(nèi)容，如圖3-43所示。圖3-43輸入內(nèi)容（5）測試該頁面發(fā)現(xiàn)顯示不正常，是因為字體的問題，如圖3-44所示。圖3-44顯示不正常（6）設(shè)置字體，如圖3-45所示。圖3-45設(shè)置字體（7）再次通過注冊頁面測試，用一個已經(jīng)注冊過的用戶名來注冊，出現(xiàn)了錯誤的提示，如圖3-46所示.圖3-46重名測試三、學(xué)生練習(xí)，完成重名檢查設(shè)計四、作業(yè)。完成上機(jī)作業(yè)xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.4企業(yè)用戶注冊頁面設(shè)計教學(xué)目的及要求：掌握企業(yè)用戶注冊頁面設(shè)計方法教學(xué)重點：掌握企業(yè)用戶注冊頁面設(shè)計方法教學(xué)難點：掌握企業(yè)用戶注冊頁面設(shè)計方法一、復(fù)習(xí)重名檢查二、學(xué)習(xí)新課（1）將頁面另存，如圖3-47所示。（2）設(shè)計完成的表格區(qū)域如圖3-48所示。圖3-48設(shè)計完成的表格（3）插入隱藏域，如圖3-49所示。（4）設(shè)置隱藏域的屬性，如圖所示。設(shè)置type為1.圖3-50設(shè)置隱藏域的屬性（5）選擇“插入記錄”的服務(wù)器行為，轉(zhuǎn)入后，轉(zhuǎn)到企業(yè)用戶的修改頁面，如圖3-51所示。圖3-51轉(zhuǎn)到企業(yè)修改頁面（6）reg_modico.asp是企業(yè)用戶修改注冊資料的頁面。設(shè)計完成的表單區(qū)域如圖3-52所示。圖3-52設(shè)計完成的表單（7）我們進(jìn)行測試，選擇企業(yè)用戶進(jìn)行注冊，如圖3-53所示。（8）單擊“提交”后進(jìn)入到下一個頁面，測試如圖3-54所示。圖3-54企業(yè)用戶的注冊（9）注冊成功后，我們本來是到reg_modico.asp，reg_modico.asp是企業(yè)用戶修改資料的頁面。但是，reg_modico.asp頁面，我們加了控制代碼進(jìn)行檢查。代碼如下：<%ifsession("MM_username")=""thenresponse.redirect"login2.asp"response.endendif%>代碼含義：如果沒有登錄則轉(zhuǎn)到login2.asp登錄。（10）企業(yè)用戶注冊后直接轉(zhuǎn)到了login2.asp登錄，我們用企業(yè)用戶登錄，如圖3-55所示。圖3-55用戶登錄（11）用戶登錄成功后，轉(zhuǎn)到用戶修改資料的頁面，如圖3-56所示。三、學(xué)生練習(xí)，完成企業(yè)用戶注冊設(shè)計四、作業(yè)。上機(jī)操作xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.5檢查企業(yè)注冊用戶重名的設(shè)計教學(xué)目的及要求：掌握檢查企業(yè)注冊用戶重名的設(shè)計方法教學(xué)重點：掌握檢查企業(yè)注冊用戶重名的設(shè)計方法教學(xué)難點：掌握檢查企業(yè)注冊用戶重名的設(shè)計方法一、復(fù)習(xí)企業(yè)用戶注冊二、學(xué)習(xí)新課檢查新用戶的注冊頁面設(shè)計與個人用戶注冊頁面的設(shè)計方法完全相同。（1）在editdata_co.asp的服務(wù)器行為面板中，展開檢查新用戶名的行為，然后出現(xiàn)“檢查新用戶名”的對話框，我們按如圖3-57所示進(jìn)行設(shè)置。圖3-57檢查新用戶名對話框（2）完成后服務(wù)器行為面板出現(xiàn)了“檢查新用戶名”，如圖3-58所示。圖3-58檢查新用戶名（3）用一個已經(jīng)注冊的用戶名再來注冊，如圖3-59所示，同樣出現(xiàn)前面已經(jīng)提到的錯誤，如圖3-60所示。圖3-60出現(xiàn)了錯誤（4）按前面介紹的方法將數(shù)據(jù)連接文件移動到插入記錄形成的代碼前面,再測試，結(jié)果如圖3-61所示。三、學(xué)生練習(xí)，完成重名檢查四、作業(yè)。上機(jī)操作xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:login.asP設(shè)計教學(xué)目的及要求：掌握登錄頁面的設(shè)計方法教學(xué)重點：掌握登錄頁面的設(shè)計方法教學(xué)難點：掌握登錄頁面的設(shè)計方法一、復(fù)習(xí)企業(yè)用戶注冊二、學(xué)習(xí)新課3.6.1login.asp頁面的設(shè)計步驟如下：（1）選擇“服務(wù)器行為”｜“用戶身份驗證”｜“登錄用戶”，如圖3-62所示。（2）在出現(xiàn)的對話框中作如圖3-63所示的設(shè)置，同時，我們可以選擇連接驗證的數(shù)據(jù)源，同時通過瀏覽按鈕選擇登錄成功和失敗后轉(zhuǎn)到的頁面，如圖3-64、3-65所示。圖3-63登錄用戶（3）完成后的服務(wù)器行為面板，如圖3-66所示。圖3-66服務(wù)器行為面板（4）產(chǎn)生的登錄代碼如下：<%'***Validaterequesttologintothissite.MM_LoginAction=Request.ServerVariables("URL")IfRequest.QueryString<>""ThenMM_LoginAction=MM_LoginAction+"?"+Server.HTMLEncode(Request.QueryString)MM_valUsername=CStr(Request.Form("reg_user"))IfMM_valUsername<>""ThenDimMM_fldUserAuthorizationDimMM_redirectLoginSuccessDimMM_redirectLoginFailedDimMM_loginSQLDimMM_rsUserDimMM_rsUser_cmdMM_fldUserAuthorization="reg_type"MM_redirectLoginSuccess="house_fabu.asp"MM_redirectLoginFailed="login.asp"MM_loginSQL="SELECTUserid,Pwd"IfMM_fldUserAuthorization<>""ThenMM_loginSQL=MM_loginSQL&","&MM_fldUserAuthorizationMM_loginSQL=MM_loginSQL&"FROMCompanyWHEREUserid=?ANDPwd=?"SetMM_rsUser_cmd=Server.CreateObject("ADODB.Command")MM_rsUser_cmd.ActiveConnection=MM_conn_STRINGMM_rsUser_cmd.CommandText=MM_loginSQLMM_rsUser_cmd.Parameters.AppendMM_rsUser_cmd.CreateParameter("param1",200,1,30,MM_valUsername)'adVarCharMM_rsUser_cmd.Parameters.AppendMM_rsUser_cmd.CreateParameter("param2",200,1,30,Request.Form("reg_pwd"))'adVarCharMM_rsUser_cmd.Prepared=trueSetMM_rsUser=MM_rsUser_cmd.ExecuteIfNotMM_rsUser.EOFOrNotMM_rsUser.BOFThen'usernameandpasswordmatch-thisisavaliduserSession("MM_Username")=MM_valUsernameIf(MM_fldUserAuthorization<>"")ThenSession("MM_UserAuthorization")=CStr(MM_rsUser.Fields.Item(MM_fldUserAuthorization).Value)ElseSession("MM_UserAuthorization")=""EndIfifCStr(Request.QueryString("accessdenied"))<>""AndfalseThenMM_redirectLoginSuccess=Request.QueryString("accessdenied")EndIfMM_rsUser.CloseResponse.Redirect(MM_redirectLoginSuccess)EndIfMM_rsUser.CloseResponse.Redirect(MM_redirectLoginFailed)EndIf%>注意：以上代碼是判斷用戶名和密碼列的值來實現(xiàn)登錄，我們在登錄時，還選擇了用戶類別，因此，還需要修改該段代碼，實現(xiàn)對用戶類別即reg_type表單提交值的判斷。（5）修改代碼的地方如圖3-67、圖3-68所示。圖3-67找到要改代碼的地方圖3-68修改代碼（6）進(jìn)行登錄測試，如圖3-69所示。圖3-69進(jìn)行登錄測試（7）登錄成功后到了發(fā)表信息的頁面，如圖3-70所示。圖3-70發(fā)表信息頁面（8）用企業(yè)用戶登錄，如圖3-71所示。圖3-71企業(yè)用戶登錄（9）登錄后的結(jié)果如圖3-72所示。圖3-72登錄結(jié)果三、學(xué)生練習(xí)，完成登錄頁面設(shè)計四、作業(yè)。上機(jī)操作xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.6.2Login2.asp頁面的制作、頭文件的制作教學(xué)目的及要求：掌握Login2.asp頁面的設(shè)計方法教學(xué)重點：掌握Login2.asp頁面的設(shè)計方法教學(xué)難點：掌握Login2.asp頁面的設(shè)計方法一、復(fù)習(xí)Login.asp頁面的設(shè)計方法二、學(xué)習(xí)新課我們用同樣的方法制作Login2.asp頁面，但是有一點區(qū)別，代碼的區(qū)別如下：MM_fldUserAuthorization="reg_type"IfRequest("reg_type")=0Then//表單中的用戶類型為0，即個人用戶MM_redirectLoginSuccess="reg_modi.asp"http://驗證通過讓個人用戶到自己修改資料頁面MM_redirectLoginFailed="login2.asp"http://驗證失敗，則重新登錄Else//表單中的用戶類型為1，即企業(yè)用戶MM_redirectLoginSuccess="reg_modico.asp"http://驗證通過讓企業(yè)用戶到自己修改資料頁面MM_redirectLoginFailed="login2.asp"http://驗證失敗，則重新登錄3.6.3包含的頭文件的制作Top.asp頁面、Top3.asp與制作與login.asp相同。top2.asp頁面的制作同樣的方法制作，代碼的區(qū)別如下：MM_fldUserAuthorization="reg_type"IfRequest("reg_type")=0ThenMM_redirectLoginSuccess="house_fabu2.asp"MM_redirectLoginFailed="login2.asp"http://如果用戶類型為個人用戶，則成功后到發(fā)表信息頁面，失敗到登錄login2.asp頁面Else//否則MM_redirectLoginSuccess="reg_modico.asp"MM_redirectLoginFailed="login2.asp"http://如果用戶類型為企業(yè)用戶，則成功后轉(zhuǎn)到用戶修改資料的頁面，失敗到登錄login2.asp頁面三、學(xué)生練習(xí)，完成登錄login2.asp制作四、作業(yè)。上機(jī)操作xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.7個人用戶修改資料頁面reg_modi.asp制作教學(xué)目的及要求：掌握個人用戶修改資料頁面reg_modi.asp的設(shè)計方法教學(xué)重點：掌握個人用戶修改資料頁面reg_modi.asp的設(shè)計方法教學(xué)難點：掌握個人用戶修改資料頁面reg_modi.asp的設(shè)計方法一、復(fù)習(xí)用戶登錄頁面設(shè)計二、學(xué)習(xí)新課（1）將頁面另存，如圖3-73所示。（2）reg_modi.asp頁面的設(shè)計表格如圖3-74所示。（3）選擇“綁定”｜“記錄集”，出現(xiàn)“記錄集”對話框，如圖3-75所示。圖3-75選擇記錄集（4）選擇“服務(wù)器行為”｜“更新記錄”，如圖3-76所示。（5）出現(xiàn)“更新記錄”的對話框，如圖3-77所示圖3-77更新記錄（6）使用更新記錄后的表格如圖3-78所示。圖3-78更新記錄后的表格（7）測試一下，用chy這個個人用戶登錄，出現(xiàn)了修改資料的頁面，如圖3-79所示。圖3-79修改資料（8）將老師更改為學(xué)生，如圖3-80所示，修改成功了。圖3-80修改成功了（9）添加reg_modi.asp個人用戶修改資料頁面的保護(hù)。<%ifsession("MM_username")=""thenresponse.redirect"login2.asp"response.endendififsession("reg_type")="1"thenresponse.redirect"reg_modico.asp"response.endendif%>如果沒有登錄則讓用戶登錄，如果是企業(yè)用戶則轉(zhuǎn)到企業(yè)用戶修改資料頁面。企業(yè)用戶修改資料頁面的制作在下一節(jié)再介紹。三、學(xué)生練習(xí)，完成個人用戶修改頁面四、作業(yè)。上機(jī)操作xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.8企業(yè)用戶修改注冊資料頁面reg_modico.asp制作教學(xué)目的及要求：掌握企業(yè)用戶修改注冊資料頁面reg_modico.asp的設(shè)計方法教學(xué)重點：掌握企業(yè)用戶修改注冊資料頁面reg_modico.asp的設(shè)計方法教學(xué)難點：掌握企業(yè)用戶修改注冊資料頁面reg_modico.asp的設(shè)計方法一、復(fù)習(xí)用戶資料修改頁面二、學(xué)習(xí)新課reg_modico.asp是企業(yè)用戶修改注冊資料頁面。（1）將頁面另存，如圖3-81所示。（2）reg_modico.asp頁面的設(shè)計表格如圖3-82所示。（3）選擇“綁定”｜“記錄集”，出現(xiàn)“記錄集”對話框，如圖3-83所示。圖3-83選擇階段變量的記錄集（4）選擇“服務(wù)器行為”｜“更新記錄”，如圖3-84所示。（5）出現(xiàn)“更新記錄”的對話框，作如圖3-85所示的設(shè)置。圖3-85更新記錄的設(shè)置（6）使用更新記錄后的表格如圖3-86所示。圖3-86更新記錄后的表格（7）保護(hù)頁面的代碼如下：<%ifsession("MM_username")=""thenresponse.redirect"login2.asp"response.endendif%>（8）測試一下，用ww這個企業(yè)用戶登錄，出現(xiàn)了修改資料的頁面，如圖3-87所示。圖3-87用戶登錄（9）更改郵件，如圖3-88所示。圖3-88更改郵件的測試（10）更改成功后的網(wǎng)頁如圖3-89所示。圖3-89修改成功了三、學(xué)生練習(xí)，企業(yè)用戶修改設(shè)計四、作業(yè)。上機(jī)操作xx電子工程職業(yè)學(xué)院授課方案（教案）課名：網(wǎng)站設(shè)計開發(fā)教師：xx班級：網(wǎng)絡(luò)xx\xx編寫時間：20xx.08課題:3.9修改密碼頁面的設(shè)計教學(xué)目的及要求：掌握修改密碼頁面的設(shè)計方法教學(xué)重點：掌握修改密碼頁面的設(shè)計方法教學(xué)難點：掌握修改密碼頁面的設(shè)計方法一、復(fù)習(xí)用戶資料修改頁面二、學(xué)習(xí)新課3.9.1editpwd.asp的制作步驟如下：（1）編輯密碼的表格區(qū)域如圖3-90所示。圖3-90編輯密碼的表格（2）表單及表單中的幾個文本框的屬性設(shè)置如圖3-91、圖3-92、圖3-93、圖3-94所示。（3）控制密碼的輸入，我們添加一段控制要輸入密碼的代碼，如下所示。這是一段JavaScript代碼。<inputtype="submit"name="Submit"value="保存修改"onClick="javascript:returncheck(theForm)"><scriptlanguage="JavaScript">functioncheck(theForm){if(theForm.oldpwd.value==""){alert("請輸入舊密碼！");theForm.oldpwd.focus();return(false);}if(theForm.pwd.value==""){alert("請輸入您的密碼！");theForm.pwd.focus();return(false);}if(theForm.repwd.value==""){alert("請在\"確認(rèn)密碼\"中