web網(wǎng)設(shè)計(jì)課程設(shè)計(jì)個(gè)人博客

《電子商務(wù)設(shè)計(jì)》課程設(shè)計(jì)匯報(bào)題目個(gè)人博客網(wǎng)頁(yè)設(shè)計(jì)系統(tǒng)學(xué)生姓名易帥龍學(xué)號(hào)1707專業(yè)班級(jí)信管10101指導(dǎo)老師易明設(shè)計(jì)日期6月指導(dǎo)老師評(píng)閱意見(jiàn)：評(píng)閱成績(jī)：署名：目錄摘要··························································3系統(tǒng)概述······················································4項(xiàng)目需求分析····················································51.1需求分析····························································51.2所用軟件·····························································5首頁(yè)設(shè)計(jì)·························································52.1網(wǎng)站主題·····························································52.2靜態(tài)網(wǎng)頁(yè)制作工具·····················································52.3系統(tǒng)總框圖···························································62.4設(shè)計(jì)網(wǎng)站·····························································6第三章靜態(tài)分頁(yè)模塊設(shè)計(jì)·················································73.1各個(gè)靜態(tài)子網(wǎng)頁(yè)設(shè)計(jì)·················································73.2實(shí)現(xiàn)網(wǎng)頁(yè)間連接·····················································10第四章動(dòng)態(tài)分頁(yè)模塊設(shè)計(jì)·················································114.1留言板設(shè)計(jì)···························································114.2數(shù)據(jù)層設(shè)計(jì)···························································13總結(jié)····································································15附錄：參考文件··························································16摘要網(wǎng)絡(luò)發(fā)展到今天，建立網(wǎng)站已經(jīng)成為一個(gè)很普遍問(wèn)題了，對(duì)于一個(gè)企業(yè)來(lái)說(shuō)，建設(shè)好自己網(wǎng)站能夠搶占新世紀(jì)發(fā)展戰(zhàn)略關(guān)鍵點(diǎn)。建立新企業(yè)形象，直接開(kāi)拓國(guó)際市場(chǎng)，開(kāi)展二十四小時(shí)網(wǎng)上營(yíng)銷及高效廉價(jià)定向宣傳；與客戶建立最直接交流機(jī)制，縮短推出新產(chǎn)品和打開(kāi)新市場(chǎng)周期，與富有吸引力客戶群發(fā)展客戶關(guān)系網(wǎng)；與自己銷售人員保持聯(lián)絡(luò)，深入面向當(dāng)?shù)厥袌?chǎng)。

出眾網(wǎng)站吸引人地方不但僅在于其內(nèi)容，鮮明結(jié)構(gòu)和獨(dú)特格調(diào)往往能起到畫(huà)龍點(diǎn)睛作用。一個(gè)網(wǎng)站即使內(nèi)容再豐富，假如網(wǎng)站結(jié)構(gòu)和格調(diào)不能吸引人，那也是毫無(wú)價(jià)值。往往整個(gè)網(wǎng)站格調(diào)是一個(gè)網(wǎng)站吸引瀏覽者魅力所在，所以應(yīng)該依照網(wǎng)站主題、內(nèi)容和瀏覽者要求來(lái)設(shè)計(jì)自己獨(dú)特網(wǎng)站格調(diào)。

概述這個(gè)網(wǎng)站是一個(gè)用Dreamweaver、Photoshop、ASP.NET、Microsoftaccess設(shè)計(jì)編寫(xiě)個(gè)人博客網(wǎng)站，主要包含6個(gè)模塊：網(wǎng)站首頁(yè)，個(gè)人信息，個(gè)人簡(jiǎn)歷，個(gè)人興趣,個(gè)人照片，留言板。首先前5個(gè)模塊是主要功效是用來(lái)展示自己，類似于個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)，所以采取了靜態(tài)HTML語(yǔ)言編寫(xiě)，添加了對(duì)應(yīng)CSS樣式表文件和JS腳本文件用來(lái)美化網(wǎng)頁(yè)并添加YUI中實(shí)用功效，用來(lái)介紹自己，便于公布之后被搜索引擎收錄。最終一個(gè)留言板模塊使用了ASP.NET技術(shù)編寫(xiě)，能夠讓用戶注冊(cè)之后登陸并留言給網(wǎng)站站長(zhǎng)，并帶有后臺(tái)管理功效，能夠刪除和回復(fù)游客留言。第一章項(xiàng)目需求分析1.1需求分析伴隨就業(yè)競(jìng)爭(zhēng)越來(lái)越大，很多人開(kāi)始在簡(jiǎn)歷上奇招頻出，紙質(zhì)文件個(gè)人介紹已經(jīng)不能滿足電子商務(wù)快速發(fā)展當(dāng)代社會(huì)了，于是個(gè)人介紹個(gè)人網(wǎng)站應(yīng)聲而出，能夠滿足用戶在網(wǎng)上介紹自己，展示個(gè)人專長(zhǎng)和才華，增加被用人單位錄用機(jī)會(huì)。1.2所用軟件網(wǎng)頁(yè)編輯排版MacromediaDreamweaver8、網(wǎng)頁(yè)圖像制作軟件PhotoShopCS5、數(shù)據(jù)庫(kù)MicrosoftACCESS、動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言ASP、靜態(tài)網(wǎng)頁(yè)編寫(xiě)語(yǔ)言HTML、樣式表CSS、網(wǎng)頁(yè)腳本語(yǔ)言JavaScript。 第二章首頁(yè)設(shè)計(jì)2.1網(wǎng)站主題個(gè)人介紹網(wǎng)站主旨就是介紹自己，所以主要主題就是靜態(tài)介紹，采取靈活CSS樣式技術(shù)對(duì)個(gè)人網(wǎng)站進(jìn)行美化，吸引訪問(wèn)者注意，提升訪問(wèn)量。依照我性格和喜好，網(wǎng)站主要基調(diào)色是藍(lán)色，并加入了大量動(dòng)漫人物圖片，展示自己特點(diǎn)和興趣。2.2靜態(tài)網(wǎng)頁(yè)制作工具做HTML網(wǎng)頁(yè)時(shí)主要使用是Deamweaver。另外，為了處理網(wǎng)頁(yè)中其余元素，還使用了Photoshop、VS等軟件。2.3系統(tǒng)總框圖首頁(yè)首頁(yè)留言板個(gè)人照片個(gè)人興趣個(gè)人介紹個(gè)人信息留言板個(gè)人照片個(gè)人興趣個(gè)人介紹個(gè)人信息后臺(tái)管理前端頁(yè)面后臺(tái)管理前端頁(yè)面2.4設(shè)計(jì)網(wǎng)站首部LOGO，這個(gè)區(qū)域揭示了整個(gè)網(wǎng)站主旨，所以這一部分圖片和內(nèi)容必須設(shè)計(jì)得很精。然后是左下區(qū)域座右銘，座右銘表現(xiàn)了個(gè)人性格和涵養(yǎng)以及價(jià)值觀，這一部分布局必須清楚明了。最終是右下部分其余，為了使網(wǎng)頁(yè)看起來(lái)簡(jiǎn)練明了，我在這一部分添加了一個(gè)單獨(dú)圖片作為一個(gè)DIV。下面是我制作完成首頁(yè)，整個(gè)頁(yè)面主色調(diào)是黃色，LOGO部分是我喜歡動(dòng)漫圖片，左下是座右銘區(qū)域，其中包含了我聯(lián)絡(luò)方式，右下也是一張動(dòng)漫圖片，為了適應(yīng)游客不一樣時(shí)段訪問(wèn)以及不一樣人不一樣喜好，我還另外使用JS技術(shù)做了一套夜間模式換膚。 默認(rèn)格調(diào) 夜間模式第三章靜態(tài)分頁(yè)模塊設(shè)計(jì)3.1各個(gè)靜態(tài)子網(wǎng)頁(yè)建立在設(shè)計(jì)并制作好了網(wǎng)站首頁(yè)之后，接下來(lái)就是設(shè)計(jì)各個(gè)模塊內(nèi)容，依照我自己興趣和了解，于是每個(gè)模塊都設(shè)計(jì)了自己CSS文件，以顯示個(gè)人網(wǎng)站特點(diǎn)和個(gè)人特色。3.1.1個(gè)人信息這個(gè)部分我使用了方方正正藍(lán)色方塊狀作為中央背景，主體背景是主色調(diào)黃色，顯得整個(gè)頁(yè)面比較簡(jiǎn)練明朗。上面包含了一些個(gè)人信息。其中我在左上角區(qū)域使用JS代碼添加了一個(gè)能夠顯示當(dāng)前時(shí)間控件。并借鑒了禪意花園203號(hào)作品CSS格調(diào)給個(gè)人信息部分做了布局，這套CSS格調(diào)比較符合個(gè)人信息應(yīng)該具備簡(jiǎn)單明了、內(nèi)容清楚格調(diào)。3.1.2個(gè)人簡(jiǎn)歷這個(gè)頁(yè)面依舊使用了黃色主色調(diào)，頂部是藍(lán)色，與個(gè)人信息想呼應(yīng)。主題是大海，個(gè)人簡(jiǎn)歷就像魚(yú)兒在海中經(jīng)歷一樣，這也和個(gè)人簡(jiǎn)歷格調(diào)想呼應(yīng)。左上角我添加了一個(gè)時(shí)鐘空間，并添加了一個(gè)能夠游動(dòng)魚(yú)，點(diǎn)擊之后能夠快速返回主頁(yè)，這條小魚(yú)是使用JS代碼和GIF動(dòng)圖完成，和整個(gè)大海格調(diào)比較融合。另外我在網(wǎng)頁(yè)底部添加了固定BOTTOM頁(yè)腳，主要內(nèi)容也是跟海關(guān)于，為也是和主題融合。3.1.3興趣興趣這個(gè)子網(wǎng)頁(yè)采取是YUI中Paginator:GettingstartedwithPaginatorJS控件，能夠在網(wǎng)頁(yè)中插入文字圖片，并有翻頁(yè)效果。每個(gè)人興趣興趣能夠有很多，假如采取流式布局則會(huì)顯得很冗雜，于是我采取了這個(gè)JS控件，讓游客能夠?qū)γ恳粋€(gè)感興趣欄目進(jìn)行瀏覽，不會(huì)產(chǎn)生疲勞。另外我將圖片大小調(diào)整同意大小，并添加在每個(gè)框架中，這么能夠使整個(gè)網(wǎng)頁(yè)布局不會(huì)產(chǎn)生太大波動(dòng)。3.1.4個(gè)人照片這個(gè)網(wǎng)頁(yè)依然采取是黃色基調(diào)色，采取了YUI中CarouselControl:SpotlightexampleJS控件。這個(gè)JS控件我將它設(shè)置了三個(gè)外循環(huán)變量三個(gè)內(nèi)循環(huán)變量，一共能夠?qū)?張照片分成3個(gè)大塊顯示，每一塊3張照片，比較符合現(xiàn)在照片墻格調(diào)。另外我還采取了一個(gè)背部落雪花GIF動(dòng)態(tài)效果JS控件，并添加了一個(gè)比較輕快背景音樂(lè)，讓人在瀏覽照片時(shí)候感到輕松。3.2實(shí)現(xiàn)網(wǎng)頁(yè)間鏈接做好各個(gè)子網(wǎng)和首頁(yè)后，接下來(lái)就是經(jīng)過(guò)鏈接，將整個(gè)網(wǎng)站中網(wǎng)頁(yè)鏈接起來(lái)，使各個(gè)分頁(yè)和主頁(yè)、分頁(yè)和分頁(yè)間能夠流暢切換，從而降低人們?yōu)g覽網(wǎng)頁(yè)時(shí)間。我采取是添加A標(biāo)簽，使用A標(biāo)簽切換頁(yè)面瀏覽，并將每個(gè)鏈接設(shè)置成一個(gè)DIV，使總體效果看起來(lái)比較清楚。分頁(yè)鏈接返回主頁(yè)第四章動(dòng)態(tài)分頁(yè)模塊設(shè)計(jì)考慮到游客與站長(zhǎng)互動(dòng)性，我還設(shè)計(jì)了一個(gè)留言板模塊。這個(gè)模塊是使用asp.NET動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)實(shí)現(xiàn)，主要邏輯拓?fù)鋱D以下所表示：4.1留言板設(shè)計(jì)登陸頁(yè)面設(shè)計(jì)，我對(duì)用戶名和密碼進(jìn)行了加密，只有擁有用戶權(quán)限游客才能進(jìn)入留言，假如沒(méi)有賬號(hào)話，必須先申請(qǐng)一個(gè)賬號(hào)才能進(jìn)入留言板，在留言板中能夠填寫(xiě)自己昵稱和要留言內(nèi)容，一旦留言之后就不能再進(jìn)行更改。留言板還具備一個(gè)后臺(tái)管理功效，能夠讓站長(zhǎng)進(jìn)入留言板后臺(tái)對(duì)留言進(jìn)行回復(fù)和刪除，而且能夠修改后臺(tái)管理員用戶名和秘密，通常來(lái)說(shuō)這個(gè)賬號(hào)是站長(zhǎng)獨(dú)有，不應(yīng)泄露給他人。4.1.1登陸頁(yè)面登陸頁(yè)面設(shè)計(jì)依然采取了黃色主色調(diào)，這部分只有兩個(gè)INPUT框和一個(gè)提交按鈕，非常簡(jiǎn)單明了，功效也很清楚。登陸頁(yè)面4.1.2留言板前臺(tái)部分留言框架部分我采取了淺綠色類似于IPAD邊框，游客留言時(shí)就像在使用IPAD一樣，游客能夠輸入自己昵稱和留言內(nèi)容，當(dāng)站長(zhǎng)上線之后能夠進(jìn)入后臺(tái)回復(fù)，實(shí)現(xiàn)了站長(zhǎng)和游客互動(dòng)功效。假如要進(jìn)入后臺(tái)部分，則要輸入后臺(tái)管理密碼，這個(gè)密碼是保留在ACCESS數(shù)據(jù)庫(kù)中，只有站長(zhǎng)才知道這個(gè)密碼。后臺(tái)部分整體頁(yè)面效果跟前臺(tái)部分是差不多，不過(guò)后臺(tái)部分在每個(gè)留言后面添加了兩個(gè)控件，當(dāng)擁有管理權(quán)限人（管理員-站長(zhǎng)）進(jìn)入后臺(tái)之后才能夠執(zhí)行者兩個(gè)操作。4.2數(shù)據(jù)層設(shè)計(jì)4.2.1游客賬戶數(shù)據(jù)庫(kù)E-R圖數(shù)據(jù)庫(kù)表數(shù)據(jù)字典：User：每個(gè)游客一個(gè)user，主鍵Pwd：每個(gè)游客一個(gè)pwd（密碼），非空4.2.2管理員賬戶數(shù)據(jù)庫(kù)E-R圖數(shù)據(jù)庫(kù)表數(shù)據(jù)字典：Id：每個(gè)管理員一個(gè)ID，主鍵User：每個(gè)管理員一個(gè)user用戶名，非空Pass：每個(gè)管理員一個(gè)pass（密碼），非空，使用md5加密4.2.3留言板數(shù)據(jù)庫(kù)E-R圖數(shù)據(jù)庫(kù)表數(shù)據(jù)字典：Id：每個(gè)留言一個(gè)id，主鍵，非空Title：每個(gè)留言一個(gè)title，能夠?yàn)榭誘entent：每個(gè)留言一個(gè)內(nèi)容，能夠?yàn)榭誘ime：每個(gè)留言一個(gè)時(shí)間，能夠?yàn)榭誌p：每個(gè)留言一個(gè)ip，一個(gè)ip能夠?qū)?yīng)多個(gè)留言Huifu：每個(gè)留言對(duì)應(yīng)一個(gè)管理員回復(fù)，能夠?yàn)榭湛偨Y(jié)在這次課程設(shè)計(jì)中，我再一次鞏固了對(duì)HTML靜態(tài)網(wǎng)頁(yè)和ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)制作方法，尤其是對(duì)HTML網(wǎng)頁(yè)已經(jīng)較為熟練掌握了。而且我對(duì)CSS樣式文件和JS腳本文件使用也有了更深了解。這次課程設(shè)計(jì)做這個(gè)博客每個(gè)網(wǎng)頁(yè)源文件都是自己一個(gè)一個(gè)字敲出來(lái)，感觸很深是對(duì)HTML網(wǎng)頁(yè)從略知一二到熟練掌握這一過(guò)程，經(jīng)過(guò)這次課程設(shè)計(jì)我相信自己已經(jīng)有了獨(dú)立制作一個(gè)靜態(tài)網(wǎng)頁(yè)并調(diào)整適宜CSS布局和樣式能力。我還學(xué)會(huì)了YUI使用，YUI是個(gè)非常實(shí)用工具，相當(dāng)于C++中STL標(biāo)準(zhǔn)模板庫(kù)，能夠?yàn)槲覀兲峁┖芊奖鉐S控件，這次課程設(shè)計(jì)中我也使用了大量JS控件豐富自己網(wǎng)頁(yè)。經(jīng)過(guò)這次課程設(shè)計(jì)我還學(xué)會(huì)了ASP.NET網(wǎng)頁(yè)制作方法，經(jīng)過(guò)動(dòng)態(tài)網(wǎng)頁(yè)制作動(dòng)態(tài)交互式效果，比如網(wǎng)頁(yè)中留言板，這是HTML靜態(tài)網(wǎng)頁(yè)所無(wú)法達(dá)成，使用數(shù)據(jù)庫(kù)和ASP技術(shù)結(jié)合能夠很好實(shí)現(xiàn)用戶和站長(zhǎng)交互功效。這次課程設(shè)計(jì)也是很艱難，