寵物網(wǎng)站設(shè)計(jì)案例

寵物之家網(wǎng)站研究論文PAGE34-07級(jí)電子商務(wù)2班03307204潘夢(mèng)菲論文摘要序：寵物之家網(wǎng)站，是我們小組的網(wǎng)站名稱，顧名思義，我們所做的網(wǎng)站是跟寵物有關(guān)的。我們希望可以利用自己所學(xué)的知識(shí)，將我們的網(wǎng)站做的很好。我們組共有八名同學(xué)，作為小組長(zhǎng)的我將我們的網(wǎng)站分為了八個(gè)模塊。每個(gè)人負(fù)責(zé)其中的一個(gè)模塊，最后由我在將首頁做好。在此，我將主要介紹首頁和我負(fù)責(zé)的寵物商店的設(shè)計(jì)過程。對(duì)論文主要內(nèi)容的概括本論文主要介紹寵物之家網(wǎng)站的構(gòu)建過程以及實(shí)現(xiàn)情況。包括動(dòng)態(tài)頁面和靜態(tài)頁面的設(shè)置，各種功能的實(shí)現(xiàn)。從設(shè)計(jì)到實(shí)現(xiàn)的階段都有具體的體現(xiàn)。重點(diǎn)介紹寵物商店的構(gòu)建情況。關(guān)鍵字：寵物之家寵物商店動(dòng)態(tài)網(wǎng)頁注冊(cè)登錄模塊在線投票模塊搜索引擎模塊留言版模塊目錄摘要 1目錄 2第一章 緒論 31.1研究目的與意義 31.1.1研究目的 31.1.2選題背景 31.1.3研究意義 41.2基本理論 41.3文獻(xiàn)綜述 6第二章 寵物之家網(wǎng)站設(shè)計(jì)策劃 82.1設(shè)計(jì)討論 82.2網(wǎng)站的主題 92.3實(shí)現(xiàn)的功能 92.4頁面風(fēng)格 92.5推廣自己的網(wǎng)站 11第三章寵物之家網(wǎng)站設(shè)計(jì)實(shí)現(xiàn) 133.1網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)的流程和具體實(shí)現(xiàn) 133.2介紹整個(gè)網(wǎng)站的頁面效果、功能實(shí)現(xiàn) 133.3動(dòng)態(tài)網(wǎng)頁的交互流程 16第四章 寵物商店功能模塊的實(shí)現(xiàn) 184.1寵物商店的模塊設(shè)計(jì) 184.2動(dòng)態(tài)網(wǎng)頁的制作 184.2.1注冊(cè)登錄以及個(gè)人資料修改模塊 194.2.2留言版模塊 224.2.3在線投票以及結(jié)果顯示模塊 234.2.4搜索引擎模塊 254.2.5動(dòng)態(tài)模塊的總結(jié) 264.3靜態(tài)網(wǎng)頁制作 264.3.1網(wǎng)頁布局 274.3.2圖片鏈接以及Flash的插入 274.3.3CSS樣式的使用 274.3.3flash圖像查看器的使用 28第五章 寵物之家首頁的實(shí)現(xiàn) 295.1對(duì)于logo的設(shè)計(jì) 295.2個(gè)性化設(shè)置 295.3時(shí)間軸的使用 305.4背景圖片的切分 305.5添加背景音樂 30第六章總結(jié) 31參考文獻(xiàn) 33緒論1.1研究目的與意義1.1.1研究目的寵物之家網(wǎng)站是我們的小組網(wǎng)頁設(shè)計(jì)課程的期末考試作業(yè)。作為一個(gè)電子商務(wù)專業(yè)的學(xué)生，我認(rèn)為學(xué)會(huì)如何做網(wǎng)站是我們必備的技能。因此，這個(gè)網(wǎng)站對(duì)于我而言，不僅僅是一個(gè)作業(yè)，是我們?yōu)榱藢W(xué)會(huì)一種技能，也是我們提高自己能力的過程。我們努力完成一個(gè)具有多種功能的網(wǎng)站。人貴在有一技之長(zhǎng)。研究這個(gè)網(wǎng)站的構(gòu)建情況，有助于我們很好的了解構(gòu)建一個(gè)網(wǎng)頁所需要的整體過程，從一開始的設(shè)計(jì)到建設(shè)到維護(hù)階段。每一個(gè)階段都需要我們認(rèn)真地對(duì)待，需要我們進(jìn)行統(tǒng)籌分析并進(jìn)行實(shí)施。我們每個(gè)人都需要百分百的投入其中，并進(jìn)自己的一份力。1.1.2選題背景隨著時(shí)代的不斷發(fā)展，我們的腳步已經(jīng)邁入信息社會(huì)的大門。計(jì)算機(jī)技術(shù)的發(fā)展，特別是網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，給文檔的保存和管理提供極大的方便。在這信息化的社會(huì)里，人門對(duì)信息傳遞服務(wù)需求的及時(shí)性越來越迫切，要求越來越高。工作和生活中要涉及到大量的信息查詢與修改，信息存儲(chǔ)和共享。在具體制作中，用ASP技術(shù)來實(shí)現(xiàn)B/S系統(tǒng)，ASP技術(shù)與數(shù)據(jù)庫技術(shù)結(jié)合，用戶在瀏覽器端可以隨意查詢自己需要的標(biāo)本，而數(shù)據(jù)的后臺(tái)操作則由服務(wù)器端處理。這樣提高了網(wǎng)頁的互動(dòng)性，使整個(gè)系統(tǒng)能更好的為用戶服務(wù)。我們所學(xué)的就是以Dreamweaver和ASP相結(jié)合作網(wǎng)頁的技術(shù)。本網(wǎng)頁是我們根據(jù)小組同學(xué)的個(gè)人愛好以及當(dāng)代人的偏好而設(shè)計(jì)開發(fā)的。界面簡(jiǎn)潔、使用方便，內(nèi)容豐富，而重在實(shí)現(xiàn)功能，是我們寵物網(wǎng)站的目標(biāo)。作為初學(xué)網(wǎng)站設(shè)計(jì)的學(xué)生，我們對(duì)于如何構(gòu)建一個(gè)網(wǎng)頁還不是很清楚，一切從頭做起。根據(jù)我們小組八個(gè)成員的討論，我們本來想做一個(gè)有關(guān)80后為主題的網(wǎng)站，但是由于這個(gè)網(wǎng)站所涉及的內(nèi)容太過廣泛，難度過大，所以最終我們確定以寵物作為我們的主題，在當(dāng)今時(shí)代，越來越多的人將寵物作為生活的一部分，這使得這幾年寵物行業(yè)得到了大力的發(fā)展。網(wǎng)絡(luò)上也出現(xiàn)了很多與寵物有關(guān)的網(wǎng)站。我們小組也以寵物為主題，設(shè)計(jì)并實(shí)現(xiàn)功能。我們的網(wǎng)站由寵物社區(qū)，寵物照片，寵物視頻，寵物趣事，寵物博客，寵物游戲，寵物百科，寵物商店八個(gè)模塊構(gòu)成。網(wǎng)絡(luò)是信息傳播工具，從它登場(chǎng)那一天起就是一種新型的信息傳播工具,它和任何工具一樣供人利用,來為人類服務(wù)。我們做為新時(shí)代的大學(xué)生，尤其是電子商務(wù)專業(yè)的學(xué)生，更要努力的掌握我們所學(xué)的知識(shí)，學(xué)以致用。無論我們寵物之家網(wǎng)站最后做的是好是壞，它都是我們這一個(gè)多月的努力成果。我們希望可以通過自己的努力而獲得成功，當(dāng)然我們的網(wǎng)站有非常多的不足之處，功能也很簡(jiǎn)陋，但是仍然希望老師和同學(xué)們可以認(rèn)可。1.1.3研究意義本論文旨在對(duì)于我們寵物之家網(wǎng)站的一個(gè)總結(jié)和概括，是為了將我們網(wǎng)站的構(gòu)建過程完整的呈現(xiàn)給大家。便于我們及時(shí)糾正和改正在制作網(wǎng)站中的錯(cuò)誤。同時(shí)，加強(qiáng)同學(xué)之間的交流。開拓我們的思維，培養(yǎng)我們的創(chuàng)新精神，提高我們的團(tuán)隊(duì)意識(shí)，增強(qiáng)我們的實(shí)踐能力。也是我們個(gè)人對(duì)我們寵物之家網(wǎng)站的一個(gè)小結(jié)。1.2基本理論Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。它有一個(gè)很好聽的中文名字，叫做“織夢(mèng)者”。它的出現(xiàn)以及不斷的推陳出新，取代了當(dāng)時(shí)網(wǎng)頁制作的龍頭老大Frontpage。我們所學(xué)習(xí)的網(wǎng)站設(shè)計(jì)與制作就是建立在Dreamweaver的基礎(chǔ)之上的，同時(shí)結(jié)合ASP構(gòu)建動(dòng)態(tài)網(wǎng)頁，利用Photoshop和Flash作為輔助。下面介紹在寵物之家網(wǎng)頁建設(shè)中所使用到得理論基礎(chǔ)和概念。界面是一種由色彩、文字、圖象、符號(hào)等視覺元素以及多媒體元素為主構(gòu)成的，傳達(dá)特定信息的，以方便人機(jī)交流為目的的中間媒體。網(wǎng)頁界面的構(gòu)成要素由文字，圖形，頁面版式，色彩，多媒體，技術(shù)等構(gòu)成。界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時(shí)要注意欄目與板塊編排，構(gòu)建一個(gè)網(wǎng)站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。網(wǎng)站建設(shè)初學(xué)者，最容易犯的錯(cuò)誤就是：確定題材后立刻開始制作，沒有進(jìn)行合理規(guī)劃。從而導(dǎo)致網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜混亂，板塊編排混亂等。結(jié)果不但瀏覽者看得糊里糊涂，制作者自己在擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。所以，我們?cè)趧?dòng)手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個(gè)合理的編排。比如，將一些最吸引人的內(nèi)容放在最突出的位置或者在版面分布上占優(yōu)勢(shì)地位。欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時(shí)候，要仔細(xì)考慮，合理安排。在欄目編排時(shí)需要注意的是：盡可能刪除那些與主題無關(guān)的欄目；盡可能將網(wǎng)站內(nèi)最有價(jià)值的內(nèi)容列在欄目上；盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內(nèi)容，如站點(diǎn)簡(jiǎn)介、版權(quán)信息、個(gè)人信息等大可不必放在主欄目里，以免沖淡主題。而文字部分包括標(biāo)題、文字信息、文字鏈接；圖形包括標(biāo)題背景、主圖、鏈接按鈕；多媒體包括視頻，音頻，動(dòng)畫；技術(shù)包括瀏覽器，傳輸速度，屏幕分辨率、顏色顯示。網(wǎng)頁界面的特征主要是主體的經(jīng)濟(jì)性，手段的先進(jìn)性，對(duì)象的廣泛性，內(nèi)容的豐富性，形式的多樣性，操作的交互性。設(shè)計(jì)以功能為主，主要體現(xiàn)在信息傳遞功能和審美功能。形象明確，易于接受，形式簡(jiǎn)潔，因此需要加強(qiáng)網(wǎng)頁界面的視覺沖擊力，迅速傳遞信息的要求，也是形式美的要求。信息傳播是網(wǎng)頁界面設(shè)計(jì)的首要因素。網(wǎng)頁界面的信息傳播功能主要體現(xiàn)在三個(gè)方面，科學(xué)技術(shù)作為生產(chǎn)力組成員要素的作用日益明顯的表現(xiàn)出來。社會(huì)文化的發(fā)展飛速進(jìn)行，由此帶來的社會(huì)變化比以往任何時(shí)候都更加顯著。網(wǎng)絡(luò)使人們跨越心理屏障和社會(huì)階層差異進(jìn)行溝通的有效工具。網(wǎng)頁界面的主要形式主要有信息查詢類，大眾媒體類，宣傳窗口類，電子商務(wù)類，交流平臺(tái)類，網(wǎng)絡(luò)社區(qū)類。電子商務(wù)網(wǎng)站建設(shè)是互聯(lián)網(wǎng)發(fā)展的一個(gè)增長(zhǎng)點(diǎn)，我們建立網(wǎng)站的目的是為了充分利用網(wǎng)絡(luò)資源，開展電子商務(wù)與客戶互動(dòng)來往，建立企業(yè)形象，主動(dòng)搶占先機(jī)，做網(wǎng)上廣告。下面主要介紹寵物商店以及首頁所用的理論基礎(chǔ)：關(guān)于背景，由于很多我們下載的圖片都是很小的圖，或者分辨率很低。這樣就會(huì)導(dǎo)致在我們的頁面上會(huì)顯示很不協(xié)調(diào)的背景。用Photoshop進(jìn)行調(diào)整，但是仍然會(huì)比較詭異。另外在表格布局中，想將一張照片插入到不同單元中，就需要進(jìn)行切分。因此必要的Photoshop技術(shù)是我們需要的。關(guān)于色調(diào)搭配，作為一個(gè)寵物主題網(wǎng)站，我們盡量運(yùn)用鮮艷的顏色。網(wǎng)站首頁顏色是紅色。在顏色變化方面，盡量以暖色調(diào)為主，背景以冷色調(diào)為主，營(yíng)造一種反差，可以突出所要表現(xiàn)的內(nèi)容。并且我們的網(wǎng)站有諸多的版塊，但是我們不僅要把版塊內(nèi)容放在導(dǎo)航欄上，更要讓登陸我們網(wǎng)站的人一眼就能看到自己感興趣的內(nèi)容在哪里。所以我們主頁大部分的空間是對(duì)版塊的重新排版，讓最新的最好玩的信息集中體現(xiàn)到首頁上，這樣不僅能吸引更多的寵物迷，還能讓網(wǎng)站看起來生動(dòng)活潑。另外各種分頁面我們沒有采用統(tǒng)一的色彩搭配要求，希望每個(gè)組員都可以自由發(fā)揮。關(guān)于布局，在寵物商店中，主要是采用表格布局。關(guān)于圖片和圖表的設(shè)計(jì)，需要相關(guān)Flash的制作。1.3文獻(xiàn)綜述本網(wǎng)頁共涉及到的知識(shí)以及內(nèi)容是以我們的教材《電子商務(wù)網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》為主。此書結(jié)構(gòu)安排合理、語言通俗易懂、內(nèi)容圖文并茂，以培養(yǎng)思維能力為主，精選了大量有針對(duì)性的實(shí)例，并將要求掌握的知識(shí)點(diǎn)融入到實(shí)例中，力求讓讀者通過親自動(dòng)手操作達(dá)到掌握所學(xué)知識(shí)、培養(yǎng)動(dòng)手能力的目的，真正做到授之以漁和授之以魚兼得。共分十六章，具體內(nèi)容如下：1電子商務(wù)網(wǎng)頁界面設(shè)計(jì)和網(wǎng)站建設(shè)的理論基礎(chǔ)2網(wǎng)頁的基礎(chǔ)知識(shí)3構(gòu)建靜態(tài)HTML頁面4構(gòu)建動(dòng)態(tài)HTML頁面5構(gòu)建交互式頁面6ASP的應(yīng)用7用ASP設(shè)計(jì)主頁模塊8電子商務(wù)網(wǎng)站規(guī)劃9電子商務(wù)網(wǎng)站建設(shè)中的軟件工程方法10電子商務(wù)網(wǎng)站的系統(tǒng)設(shè)計(jì)11電子商務(wù)網(wǎng)站網(wǎng)絡(luò)數(shù)據(jù)庫12電子商務(wù)網(wǎng)站核心功能的實(shí)現(xiàn)13電子商務(wù)網(wǎng)站的推廣及管理與維護(hù)14電子商務(wù)網(wǎng)站的安全管理寵物之家網(wǎng)站設(shè)計(jì)策劃2.1設(shè)計(jì)討論我們根據(jù)時(shí)間的分布進(jìn)行了分工，時(shí)間分布表如下：計(jì)劃階段 項(xiàng)目立項(xiàng) 1 可行性研究 2 需求分析 12 總體設(shè)計(jì) 10 詳細(xì)設(shè)計(jì) 22設(shè)計(jì)階段 網(wǎng)頁制作 5 腳本程序編制 6 應(yīng)用程序編制 12測(cè)試與完善階段 系統(tǒng)測(cè)試 18 發(fā)布試運(yùn)行 2 系統(tǒng)維護(hù) 10構(gòu)建網(wǎng)站，我們要做的是確定網(wǎng)站主題，確定網(wǎng)站界面，進(jìn)行形象設(shè)計(jì)，確定網(wǎng)站風(fēng)格，有創(chuàng)意的內(nèi)容選擇網(wǎng)站的設(shè)計(jì)可以從以下幾點(diǎn)出發(fā)：設(shè)計(jì)網(wǎng)站標(biāo)志(LOGO)，設(shè)計(jì)網(wǎng)站色彩，設(shè)計(jì)網(wǎng)站字體，設(shè)計(jì)網(wǎng)站宣傳語。根據(jù)我們小組的實(shí)際情況，我們每個(gè)人分管一個(gè)模塊。由于我們小組的人員對(duì)于網(wǎng)站設(shè)計(jì)都不是很在行，缺乏對(duì)于整體設(shè)計(jì)和統(tǒng)一的策劃。因此一人分管自己的一個(gè)模塊，最后統(tǒng)一在首頁上。我們的分工情況是我和陳浩博負(fù)責(zé)首頁的設(shè)置，嚴(yán)揚(yáng)負(fù)責(zé)寵物博客，張曉負(fù)責(zé)寵物社區(qū)，蔣靚媛負(fù)責(zé)寵物趣事，我負(fù)責(zé)寵物商店，陳浩博負(fù)責(zé)寵物視屏，侯臻負(fù)責(zé)寵物照片，張臻崢負(fù)責(zé)寵物游戲，周旭負(fù)責(zé)寵物百科。我們的目標(biāo)是，網(wǎng)站重在實(shí)現(xiàn)功能，務(wù)必將每個(gè)功能實(shí)現(xiàn)，以此來彌補(bǔ)我們?cè)谂虐婧蜕拭阑系牟罹?。我們的要求是，每位同學(xué)都必須自己做網(wǎng)頁，不可以下載模板，我們是為了學(xué)會(huì)自己動(dòng)手做一個(gè)網(wǎng)站的全過程，我們力爭(zhēng)所學(xué)的網(wǎng)頁設(shè)計(jì)每個(gè)知識(shí)點(diǎn)都涉及到?；蛟S利用網(wǎng)上現(xiàn)成的模板會(huì)很省事，也會(huì)很漂亮，但是就會(huì)增加我們的懶惰心理。也許我們的網(wǎng)站會(huì)很平凡，但是是我們每個(gè)人辛勤的勞動(dòng)成果。作為組長(zhǎng)的我，為每個(gè)組員做了一個(gè)小的Flash頭像，放在每個(gè)同學(xué)的頁面上。2.2網(wǎng)站的主題我們寵物之家網(wǎng)站的主題，顧名思義，以寵物為主題。設(shè)計(jì)到寵物的方方面面，從寵物的習(xí)性到收養(yǎng)注意事項(xiàng)，從寵物美容到寵物商店。是為熱愛寵物的朋友們提供了一個(gè)平臺(tái)，可以是大家在我們的網(wǎng)站中進(jìn)行交流。2.3實(shí)現(xiàn)的功能進(jìn)入首頁后，會(huì)有背景音樂，顯示時(shí)間軸，圖片以及flash的顯示等等。在寵物社區(qū)里，可以看到最新更新的文章，以及發(fā)表文章，相當(dāng)于一個(gè)論壇。在寵物圖片里，主要是以大量圖片為主，穿插著超鏈接。寵物商店中，主要是顯示注冊(cè)登錄系統(tǒng)，留言版系統(tǒng)，在線投票及結(jié)果顯示系統(tǒng)，搜索引擎的制作，并以簡(jiǎn)明的圖案呈現(xiàn)網(wǎng)上商城的狀況。寵物游戲則是以flash為主，利用flash顯現(xiàn)一些功能，使頁面立體化。寵物百科是對(duì)寵物文章進(jìn)行分類整理，寵物博客是顯示愛寵達(dá)人的養(yǎng)寵物的經(jīng)驗(yàn)，寵物趣事的功能是使用CSS樣式表，錨點(diǎn)的利用等等。2.4頁面風(fēng)格我們小組在頁面風(fēng)格上沒有做統(tǒng)一的規(guī)定和要求，主要強(qiáng)調(diào)的是簡(jiǎn)潔，清爽。首頁以天藍(lán)色做作為背景，填充的色彩以紅色為主，對(duì)比性很強(qiáng)。它保持了簡(jiǎn)單性，各分網(wǎng)頁力求以暖色調(diào)為主，背景圖片使用Photoshop進(jìn)行切分后拼接使用。適當(dāng)?shù)氖褂妙伾珴u變的技巧，全譜色彩漸變完美地吸引了注意?？傊η蠛?jiǎn)潔淡雅，以我的寵物商店為例，以白色為底，漸變的藍(lán)色做為標(biāo)題，使得整個(gè)頁面給人清爽和舒心的感覺。色彩的鮮明性，獨(dú)特性，藝術(shù)性，合適性，聯(lián)想性，色彩搭配的合理性都是我們要考慮的內(nèi)容。網(wǎng)頁風(fēng)格的三個(gè)基本要素，顏色、線條和形狀、版式。我們要協(xié)調(diào)運(yùn)用顏色，不同的色彩影響著人們對(duì)網(wǎng)站的第一感覺，紅色系象征著激烈、興奮，寵物能給我們帶來歡樂和幸福，所以我們網(wǎng)站的主色調(diào)是紅色。一個(gè)網(wǎng)站不可能單一運(yùn)用一種顏色，這會(huì)讓人感覺單調(diào)，乏味；但是也不可能把所有顏色運(yùn)用到網(wǎng)站中，給人感覺輕浮、花哨。一個(gè)網(wǎng)站必須有一種或兩種主題色。我們的網(wǎng)站就是兩種主題色，分別是紅色和藍(lán)色。這樣既不會(huì)讓用戶迷失方向，也不至于單調(diào)、乏味。所以確定網(wǎng)站主題色是我們必須慎重考慮的問題之一。首頁以紅色為主，寵物商店則是以藍(lán)色為主。通常情況下，一個(gè)頁面內(nèi)盡量不要使用超過4種色彩，太多的色彩容易讓人感覺沒有方向、沒有側(cè)重。當(dāng)主題色確定好以后，考慮其他配色時(shí)，一定要考慮其他配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果；另外還要考慮哪種因素可能占主要地位，是明度、純度還是色相。我們網(wǎng)站以藍(lán)色或者黑色作為背景，有的文字鏈接采用暖色系，這樣一冷一暖的搭配可以更好的突出所表現(xiàn)的內(nèi)容，從而達(dá)到很好的效果。適當(dāng)選擇線條和形狀，文字、標(biāo)題、圖片等的組合，會(huì)在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構(gòu)成了主頁的總體藝術(shù)效果。必須注意藝術(shù)地搭配好這些線條和形狀，才能增強(qiáng)頁面的藝術(shù)魅力。一般網(wǎng)站有以下三種線條和形狀的使用方法：直線（矩形）的應(yīng)用。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊的，也就是所謂的有輪有廓。直線和矩形在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果。一般應(yīng)用于比較莊重、嚴(yán)肅的主頁題材。曲線（弧形）的應(yīng)用。曲線的效果是流動(dòng)、活躍，具有動(dòng)感的，曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快、富有活力的視覺效果。一般應(yīng)用于青春、活潑的主頁題材。曲、直線（矩形、弧形）的綜合應(yīng)用。把以上兩種線條和形狀結(jié)合起來運(yùn)用，可以大大豐富主頁的表現(xiàn)力，使頁面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的主頁，適應(yīng)的范圍更大，各種主題的主頁都可以應(yīng)用。但是，在頁面的編排處理上，難度也會(huì)相應(yīng)大一些，處理得不好會(huì)產(chǎn)生凌亂的效果。最簡(jiǎn)單的途徑是，在一個(gè)頁面上以一種線條（形狀）為主，只在局部的范圍內(nèi)適當(dāng)用一些其他線條（形狀）。由于我們的技術(shù)條件有限，我們本想采用曲、直線綜合應(yīng)用的版面形狀，可惜我們工作只能在dreamweaver上進(jìn)行，在這款軟件上還沒有發(fā)現(xiàn)類似功能，所以為了節(jié)約時(shí)間，我們就采用直線線條的版面形狀。均衡的分割板式，在網(wǎng)頁設(shè)計(jì)中，頁面因?yàn)閮?nèi)容元素的需要被分割成很多區(qū)塊，區(qū)塊之間的均衡就是版式設(shè)計(jì)上需要著重考慮的問題。均衡并非簡(jiǎn)單理性的等量不等形的計(jì)算，一幅好的、均衡的網(wǎng)頁版面設(shè)計(jì)，是布局、重心、對(duì)比等多種形式原理創(chuàng)造性全面應(yīng)用的結(jié)果，是對(duì)設(shè)計(jì)師的藝術(shù)修養(yǎng)、藝術(shù)感受力的一種檢驗(yàn)。在面積對(duì)比強(qiáng)烈(不等形)而又均衡(等量)的設(shè)計(jì)中，我們可以看到對(duì)比法則的成功參與；而在一些對(duì)比不十分強(qiáng)烈、典雅的不對(duì)稱設(shè)計(jì)中，我們則可感受到設(shè)計(jì)者的別具用心。需要注意的是，傳統(tǒng)網(wǎng)頁設(shè)計(jì)的版式控制都是在不超越大眾顯示器分辨率寬度的前提下，依照內(nèi)容多少縱向延展設(shè)計(jì)。而如今流行的產(chǎn)品型網(wǎng)站，更傾向于在一屏內(nèi)表達(dá)最主要的東西，尤其是首頁，盡量不出現(xiàn)滾動(dòng)條。而在分頁面中，像是寵物美容，則出現(xiàn)大量滾動(dòng)條來顯示信息。另外適當(dāng)美化，去除冗余，在必要的元素都設(shè)計(jì)完成之后，回顧整個(gè)頁面，根據(jù)整站的風(fēng)格需要，也許你會(huì)覺得設(shè)計(jì)得過于復(fù)雜了，或者是設(shè)計(jì)得不夠完美，不能突出想要的風(fēng)格。這個(gè)時(shí)候就需要適當(dāng)調(diào)整對(duì)頁面的美化控制。簡(jiǎn)潔的往往是美的，而美的東西不一定簡(jiǎn)潔。尤其在網(wǎng)頁設(shè)計(jì)上，對(duì)于內(nèi)容很多的門戶網(wǎng)站，任何多余的修飾都會(huì)加重瀏覽者眼睛的負(fù)擔(dān)，所以可以看到門戶的設(shè)計(jì)往往特別簡(jiǎn)單；而某些專業(yè)型網(wǎng)站，就首頁來說確實(shí)沒有什么東西可以展示，那么則需要刻意增加一些點(diǎn)綴而不顯得特別空洞。當(dāng)然，這也不是定理，針對(duì)行業(yè)不同或者突發(fā)性事件，適當(dāng)?shù)貙?duì)設(shè)計(jì)進(jìn)行調(diào)整也能夠起到很好的效果。2.5推廣自己的網(wǎng)站想特別說明一下網(wǎng)站的推廣情況，與剛學(xué)的市場(chǎng)營(yíng)銷是緊密聯(lián)系的。網(wǎng)站的營(yíng)銷推廣在個(gè)人網(wǎng)站的運(yùn)行中也占著重要的地位，在推廣個(gè)人網(wǎng)站之前，請(qǐng)確保已經(jīng)做好了以下內(nèi)容：網(wǎng)站信息內(nèi)容豐富、準(zhǔn)確、及時(shí)；網(wǎng)站技術(shù)具有一定專業(yè)水準(zhǔn)，網(wǎng)站的交互性能良好。一般來說，網(wǎng)站的推廣有以下幾種方式：1.搜索引擎注冊(cè)與搜索目錄登錄技巧注冊(cè)著名的搜索引擎站點(diǎn)是在技術(shù)上推廣網(wǎng)站的第一步。注冊(cè)搜索引擎有一定的技巧，像AltaVista、搜索客這樣的搜索引擎，它自動(dòng)收錄提交的網(wǎng)址。另外，注意Meta的使用，不要提交分欄Frame頁面，大部分搜索引擎不識(shí)別Frame，所以一定要提交有內(nèi)容的Main頁面。而像Yahoo、搜狐等搜索目錄網(wǎng)站采用手工方式收錄網(wǎng)址，以保證收錄網(wǎng)站的質(zhì)量，在分類查詢時(shí)獲得的信息相關(guān)性比搜索引擎站點(diǎn)（靠Spider自動(dòng)搜索的）更強(qiáng)。由于搜索目錄網(wǎng)站收錄網(wǎng)站的人為因素相對(duì)較多，因此在提交網(wǎng)站時(shí)要注意遵守規(guī)則。如Yahoo要求注冊(cè)站點(diǎn)描述不超過25個(gè)單詞。在此要注意：將網(wǎng)址提交到最合適的目錄下面，要認(rèn)真詳細(xì)的介紹網(wǎng)站，千萬不要有虛假、夸張的成分。2.廣告交換技巧很多個(gè)人站點(diǎn)在相互廣告交換時(shí)都提出了幾個(gè)條件：第一，訪問量相當(dāng)；第二，首頁交換。顯而易見，這種做法是為了充分利用廣告交換。以很多個(gè)人網(wǎng)站的經(jīng)驗(yàn)，當(dāng)與一個(gè)個(gè)人站點(diǎn)交換鏈接時(shí)，對(duì)方把網(wǎng)站的LOGO放到了友情連接一頁，而不是首頁時(shí)，很少有訪客會(huì)來自那里。通常在首頁，廣告交換才會(huì)有很好的效果。3.目標(biāo)電子郵件推廣使用電子郵件宣傳網(wǎng)址時(shí)，主要有如下技巧：可以使用免費(fèi)郵件列表來進(jìn)行，只要你申請(qǐng)了免費(fèi)郵件列表服務(wù)，你就可以利用郵件列表來推廣你的網(wǎng)站；可以通過收集的特定郵件地址，來發(fā)送信息到特定的網(wǎng)絡(luò)群體，在特定網(wǎng)絡(luò)群體中推廣自己的網(wǎng)站；發(fā)送HTML格式的郵件，即使其內(nèi)容與接收者關(guān)系不大，也不會(huì)被被當(dāng)作垃圾信件馬上刪掉，人們至少會(huì)留意一下發(fā)送者的地址。而對(duì)于我們的網(wǎng)站，我們?cè)诎嗉?jí)內(nèi)部推廣就可以了。第三章寵物之家網(wǎng)站設(shè)計(jì)實(shí)現(xiàn)3.1網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)的流程和具體實(shí)現(xiàn)寵物之家網(wǎng)站的具體流程是，通過主頁分別鏈接到分網(wǎng)頁，首頁—寵物社區(qū)—寵物照片—寵物視頻—寵物趣事—寵物百科—寵物游戲—寵物博客—寵物商店。每個(gè)頁面都有自己的特點(diǎn)和功能。具體實(shí)現(xiàn)將在后面的章節(jié)體現(xiàn)。3.2介紹整個(gè)網(wǎng)站的頁面效果、功能實(shí)現(xiàn)我們網(wǎng)站的預(yù)覽效果如下：（以部分為例）首頁首頁為靜態(tài)網(wǎng)頁，網(wǎng)站的形象代表著品牌形象，人們?cè)诰W(wǎng)上了解寵物的主要方式就是訪問寵物相關(guān)的網(wǎng)站，網(wǎng)站形象代表了一個(gè)網(wǎng)站的制作水平，設(shè)計(jì)理念，內(nèi)容豐富度等多個(gè)方面。實(shí)現(xiàn)鏈接為主要功能，擁有大量圖片和文字，主要為給用戶視覺上的效果。寵物社區(qū)寵物博客社區(qū)和博客的是實(shí)現(xiàn)交互式頁面的功能。可以達(dá)到增進(jìn)顧客關(guān)系，吸引顧客參與的目的，不僅為熱愛寵物的朋友提供一個(gè)交流的平臺(tái)，同時(shí)也有助于緊密聯(lián)系網(wǎng)站管理者和用戶之間的關(guān)系。寵物趣事通過訪問寵物趣事頁面，可以讓用戶對(duì)寵物的用品和美容有一個(gè)更深入地了解，靈活地向用戶展示寵物說明及圖片。內(nèi)容及其豐富的一個(gè)頁面。寵物視頻制作寵物視頻網(wǎng)頁過程其實(shí)很簡(jiǎn)單，里面多運(yùn)用一項(xiàng)插入FLASH視頻的技術(shù)。但總體上來說，是屬于靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁最大的不同之處是，靜態(tài)網(wǎng)頁的更新需要網(wǎng)站的管理人員每天親自的進(jìn)行更新，而動(dòng)態(tài)網(wǎng)頁的特點(diǎn)就是，使用網(wǎng)站的每個(gè)用戶都可以成為網(wǎng)站的管理員，上傳的帖子，上傳的圖片，上傳的視頻都是網(wǎng)站更新內(nèi)容的一部分。寵物照片要做一個(gè)含有大量圖片的分網(wǎng)頁，最重要的就是對(duì)圖片的大小進(jìn)行優(yōu)化，因?yàn)槿绻且阅J(rèn)格式直接黏貼圖片上去的話，文件大小就會(huì)特別的大，如果上傳到服務(wù)器的話就會(huì)嚴(yán)重影響打開圖片的速度，所以用PHOTOSHOP軟件把每張圖片進(jìn)行優(yōu)化并保存為WEB格式，也就是說，在寵物照片網(wǎng)頁里，每張照片可以單獨(dú)作為一個(gè)網(wǎng)頁打開放大觀察，滿足不同用戶的需求。寵物商店以動(dòng)態(tài)模塊為主，完善顧客服務(wù)，為顧客提供各種服務(wù)和幫助信息，在網(wǎng)站上發(fā)布在線調(diào)查表或問卷，可以獲得客戶的反饋信息，通過這種信息的反饋有助于我們更好的改進(jìn)服務(wù)，是獲得第一手市場(chǎng)資料的有效調(diào)查工具。搜索引擎模塊為大家提供了很好的服務(wù)。寵物百科以Flash為主構(gòu)建的頁面，很有新意。3.3動(dòng)態(tài)網(wǎng)頁的交互流程網(wǎng)頁不同于傳統(tǒng)媒體之處，就在于信息的動(dòng)態(tài)更新和即時(shí)交互性。即時(shí)的交互性是Web成為熱點(diǎn)的主要原因，也是網(wǎng)頁設(shè)計(jì)時(shí)必須考慮的問題。傳統(tǒng)媒體（如廣播、電視節(jié)目、報(bào)刊雜志等）都以線性方式提供信息，即按照信息提供者的感覺、體驗(yàn)和事先確定的格式來傳播。而在Web環(huán)境下，人們不再是一個(gè)傳統(tǒng)媒體方式的被動(dòng)接受者，而是以一個(gè)主動(dòng)參與者的身份加入到信息的加工處理和發(fā)布之中。這種持續(xù)的交互，使網(wǎng)頁藝術(shù)設(shè)計(jì)不像印刷品設(shè)計(jì)那樣，發(fā)表之后就意味著設(shè)計(jì)的結(jié)束。網(wǎng)頁設(shè)計(jì)人員必須根據(jù)網(wǎng)站各個(gè)階段的經(jīng)營(yíng)目標(biāo)，配合網(wǎng)站不同時(shí)期的經(jīng)營(yíng)策略，以及用戶的反饋信息，經(jīng)常地對(duì)網(wǎng)頁進(jìn)行調(diào)整和修改。為了保持瀏覽者對(duì)網(wǎng)站的新鮮感，需要定期或不定期的進(jìn)行改版，這就需要設(shè)計(jì)者在保持網(wǎng)站視覺形象一貫性的基礎(chǔ)上，不斷創(chuàng)作出新的網(wǎng)頁設(shè)計(jì)作品。寵物社區(qū)和寵物商店是兩個(gè)動(dòng)態(tài)的交互頁面，共有5個(gè)動(dòng)態(tài)的功能模塊。關(guān)于寵物商店的構(gòu)建，每個(gè)交互頁面都是為了提供與用戶交互的功能。注冊(cè)登錄與修改資料是記錄用戶信息，用戶通過注冊(cè)，將信息傳遞到數(shù)據(jù)庫當(dāng)中。登錄時(shí)調(diào)用數(shù)據(jù)庫的信息，登錄后顯示用戶信息，用戶可以進(jìn)行修改，修改后數(shù)據(jù)庫同時(shí)更新。留言版是便于用戶進(jìn)行交流的頁面。在線投票功能是系統(tǒng)人員了解用戶對(duì)于網(wǎng)站的評(píng)價(jià)，通過調(diào)教調(diào)查問卷形式，將信息寫入數(shù)據(jù)庫，并將結(jié)果直接顯示在另一個(gè)頁面。搜索引擎功能是為了方便用戶查找到相關(guān)的信息，輸入相關(guān)信息，傳遞到數(shù)據(jù)庫中，顯示符合條件的信息。

寵物商店功能模塊的實(shí)現(xiàn)我負(fù)責(zé)的部分是寵物商店的模塊，通過對(duì)網(wǎng)絡(luò)上很多網(wǎng)站的考察以及和同學(xué)們的討論，我負(fù)責(zé)的寵物商店功能主要是以實(shí)現(xiàn)寵物商店模塊的注冊(cè)登錄修改個(gè)人資料功能，實(shí)現(xiàn)在線投票以及投票結(jié)果顯示功能，留言版的功能實(shí)現(xiàn)，搜索引擎功能的實(shí)現(xiàn)。另外，還有的主要就是對(duì)于靜態(tài)網(wǎng)頁的一些基本功能的實(shí)現(xiàn)，圖像和文字的鏈接，表格和框架布局網(wǎng)頁，對(duì)于背景圖片用Photoshop進(jìn)行拆分后使用，用Flash做小的圖標(biāo)等。4.1寵物商店的模塊設(shè)計(jì)作為寵物之家的重要組成部分，在設(shè)計(jì)階段，首先在色調(diào)上保持與首頁一致。以藍(lán)白為主，給人以簡(jiǎn)單明了的感覺。寵物商店共分五個(gè)具體分頁面，即寵物商店首頁，貓貓專區(qū)，小寵專區(qū)，雜志區(qū)，紀(jì)念品區(qū)。其次首頁采用的表格布局，其他頁面采用的為框架布局，統(tǒng)一布局，條理清晰。在ASP和ACCESS數(shù)據(jù)庫的支持下，寵物商店的注冊(cè)登錄模塊，留言版模塊，在線投票以及結(jié)果顯示模塊均使用ASP頁面構(gòu)建。由于寵物商店設(shè)計(jì)到在線購物系統(tǒng)，較為復(fù)雜，因此就沒有具體實(shí)現(xiàn)，只是夠建出具體的模塊。商店的美觀主要是對(duì)于物品的展示，由于我本人對(duì)于美觀設(shè)計(jì)這一方面較為欠缺，在我的網(wǎng)頁中，僅僅只是重在實(shí)現(xiàn)功能，在外觀上會(huì)差一些。在寵物商店構(gòu)建的準(zhǔn)備工作中，我看了很多網(wǎng)站，研究了很多書籍，并希望可以在網(wǎng)頁中使用。4.2動(dòng)態(tài)網(wǎng)頁的制作動(dòng)態(tài)網(wǎng)頁的目的是實(shí)現(xiàn)交互式的功能。準(zhǔn)備工作，即在電腦中裝入IIS。我的電腦很奇怪，點(diǎn)開控制面板中選擇添加/刪除程序后在Windows組件里并沒有Internet信息服務(wù)一項(xiàng)。在查詢了相關(guān)資料后，利用打開C:\Windows\inf文件夾，搜索到sysoc.inf記事本文件，加入代碼iis=iis2.dll,OcEntry,iis2.inf,,7，將IIS的下載解壓到一個(gè)系統(tǒng)盤里面，然后進(jìn)行安裝。然后按照步驟進(jìn)行安裝，選擇“開始”“程序”里的“管理工具”中“Internet信息服務(wù)”命令，在打開的“Internet信息服務(wù)”窗口中鼠標(biāo)右擊“默認(rèn)網(wǎng)站”，在菜單中選擇“屬性”。在彈出的“默認(rèn)網(wǎng)站屬性”對(duì)話框中設(shè)置。網(wǎng)站中“IP地址”選擇“全部未分配”；“TCP端口”通常設(shè)置為80，主目錄中“文本路徑”中設(shè)置網(wǎng)站虛擬目錄的實(shí)際路徑；勾選“讀取”“寫入”選項(xiàng)。選中“啟用默認(rèn)文檔”，則該選項(xiàng)組中的文件可默認(rèn)為一個(gè)ASP工程中的初試文件；點(diǎn)擊“添加”可在“默認(rèn)文檔名”中填寫新的文檔名稱。點(diǎn)擊確定，接著配置IIS的虛擬目錄鼠標(biāo)右擊“默認(rèn)網(wǎng)站”，在菜單中選擇“新建”“虛擬目錄”命令，打開“虛擬目錄創(chuàng)建向?qū)А保瑔螕簟跋乱徊健?，打開“虛擬目錄別名”對(duì)話框并在“別名”中輸入虛擬目錄的名稱。點(diǎn)擊“下一步”，在“目錄”中添加文件的物理路徑，點(diǎn)擊“下一步”，打開“訪問權(quán)限”對(duì)話框，選中“讀取”、“運(yùn)行腳本”和“寫入”選項(xiàng)。點(diǎn)擊“下一步”，單擊完成，此時(shí)在“Internet信息服務(wù)”窗口中可以瀏覽創(chuàng)建的虛擬目錄。這個(gè)過程很痛苦，試了很多次，不過終于還是安裝好了IIS。然后進(jìn)行設(shè)置，新建虛擬目錄，對(duì)文件夾的共享進(jìn)行設(shè)置，添加everyone，并賦予其全部權(quán)限。另外安裝ACCESS，在Dreamweaver中進(jìn)行站點(diǎn)的設(shè)置。這一切準(zhǔn)備工作做好之后，便開始了我的動(dòng)態(tài)模塊的制作。4.2.1注冊(cè)登錄以及個(gè)人資料修改模塊這個(gè)模塊式我根據(jù)老師上課所教的注冊(cè)登陸模塊進(jìn)行修改以及增加了個(gè)人資料的修改模塊。這樣可以使得我們的注冊(cè)登錄系統(tǒng)更加人性化和合理化。注冊(cè)登錄系統(tǒng)共包含8個(gè)頁面，即注冊(cè)頁面，注冊(cè)成功頁面，注冊(cè)失敗頁面，登錄頁面，登錄成功頁面，登錄失敗頁面，個(gè)人資料修改頁面，個(gè)人資料修改成功頁面，個(gè)人資料修改失敗頁面。首先進(jìn)行數(shù)據(jù)庫的設(shè)計(jì)，建立一個(gè)用戶注冊(cè)信息的數(shù)據(jù)庫注冊(cè)時(shí)進(jìn)行數(shù)據(jù)有效性檢驗(yàn)，通過檢驗(yàn)后將表單數(shù)據(jù)插入數(shù)據(jù)庫中登陸時(shí)讀取數(shù)據(jù)庫信息，在數(shù)據(jù)庫中查找表單提交的用戶名是否存在，用戶名與密碼是否匹配，如果是則返回登陸成功，不是則提示出錯(cuò)。登錄后進(jìn)行個(gè)人資料的修改，將登錄用戶的個(gè)人資料掉出，并進(jìn)行修改，將修改后的數(shù)據(jù)插入數(shù)據(jù)庫中。首先分析數(shù)據(jù)庫結(jié)構(gòu)，此為注冊(cè)用戶登錄頁面的數(shù)據(jù)庫db1:字段類型長(zhǎng)度必填字段允許空值備注ID自動(dòng)編號(hào)YN編號(hào)，主鍵username文本50YN用戶名，唯一性u(píng)serpasswd文本50YN用戶密碼question文本50YN密碼提示問題answer文本50YN提示問題答案sex文本50NY性別，非必填age數(shù)字3NY年齡，非必填—根據(jù)此表進(jìn)行數(shù)據(jù)庫的設(shè)計(jì)，建立數(shù)據(jù)庫，并保存至指定文件夾。進(jìn)行數(shù)據(jù)庫的鏈接,使用代碼Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\asp\db1.mdb對(duì)于注冊(cè)頁面，利用Dreamweaver進(jìn)行表單的設(shè)置，添加行為，設(shè)置插入記錄，進(jìn)行用戶名檢察。對(duì)于注冊(cè)失敗頁面，使用靜態(tài)頁面制作，添加代碼JavaScript:history.go(-1)。另外，綁定階段變量，在綁定頁面板中選擇添加按鈕，并在彈出的菜單中選擇“階段變量”命令，定義階段變量的名稱MM_username，完成綁定階段變量的操作。對(duì)于注冊(cè)成功頁面,這個(gè)頁面中引入階段變量，得到登陸成功的用戶名，另外還要限制對(duì)頁的訪問，只有在成功登陸的用戶才可以訪問此頁面。登陸失敗頁面則直接利用超鏈接跳轉(zhuǎn)。個(gè)人資料修改頁面，插入與登陸頁面同樣的表單域，并綁定記錄集，在篩選條件中選擇User=階段變量MM_username。綁定動(dòng)態(tài)記錄后，進(jìn)行記錄的更新，在插入欄數(shù)據(jù)中選擇更新記錄，并限制對(duì)頁的訪問。個(gè)人資料修改成功頁面與退出頁面均使用靜態(tài)頁面。在實(shí)現(xiàn)這些功能過后，對(duì)于頁面進(jìn)行適當(dāng)?shù)拿拦?，雖然這個(gè)登陸系統(tǒng)看似很簡(jiǎn)單，但是在實(shí)際操作的過程中，遇到了很多的麻煩。同樣一個(gè)操作，可能要做很多遍，但是總是會(huì)報(bào)錯(cuò)。有時(shí)侯直接顯示錯(cuò)誤，不顯示原因，類似像http錯(cuò)誤等等。不過總之，還是做出來了。4.2.2留言版模塊這個(gè)模塊是在寵物商店里，為方便用戶溝通交流而制作的。比較簡(jiǎn)單的一個(gè)頁面。由兩個(gè)頁面構(gòu)成，一個(gè)是用戶留言以及留言顯示頁面，另一個(gè)是留言成功的頁面。這個(gè)頁面的構(gòu)思很簡(jiǎn)單，就是從首頁點(diǎn)擊我要留言后進(jìn)入到留言的頁面，上面就會(huì)顯示之前已經(jīng)在數(shù)據(jù)庫中留言內(nèi)容，下面則是留言模塊，輸入留言的內(nèi)容，點(diǎn)擊提交，在提交成功后，進(jìn)入留言成功頁面，點(diǎn)擊返回留言頁面，此時(shí)正好刷新數(shù)據(jù)庫中的內(nèi)容，使得留言直接在頁面中顯示出來。比較偷懶的使用了老師所給的數(shù)據(jù)庫設(shè)計(jì)思路，此為數(shù)據(jù)庫設(shè)計(jì)表。字段 類型長(zhǎng)度必填字段允許空值備注ID自動(dòng)編號(hào)YN主鍵Subject文本255YN留言主題Content備注YN留言內(nèi)容Reply備注NY回復(fù)內(nèi)容Data時(shí)間/日期YN留言時(shí)間ReplyData時(shí)間/日期NY回復(fù)時(shí)間UserIP文本15YN留言IP根據(jù)此表進(jìn)行數(shù)據(jù)庫的建立，建立記錄集后動(dòng)態(tài)的綁定記錄集內(nèi)容，設(shè)置重復(fù)區(qū)域使得每條記錄都可以得以顯示，插入記錄的設(shè)置基本都和之前的一致。與之不同的就是對(duì)于表單項(xiàng)設(shè)置重復(fù)區(qū)域。此頁面重視的是色調(diào)的搭配，以深藍(lán)做底色，利用一些圖案做裝飾，給人鮮明的視覺效果。4.2.3在線投票以及結(jié)果顯示模塊很多的網(wǎng)站都有在線投票的功能，因此，我在寵物商城的網(wǎng)頁中設(shè)置了一個(gè)商品點(diǎn)評(píng)的模塊，通過這個(gè)模塊，用戶可以進(jìn)行投票，屬于在線調(diào)查的一個(gè)模式。投票后會(huì)直接顯示投票的結(jié)果。本系統(tǒng)分為兩個(gè)具體顯示頁面，投票調(diào)查信息頁面，調(diào)查結(jié)果顯示頁面。包含一個(gè)數(shù)據(jù)庫表如下：字段名稱字段類型內(nèi)容說明id自動(dòng)編號(hào)主鍵user文本姓名age數(shù)字年齡lujing數(shù)字知道本網(wǎng)站的路徑fchmyi是/否對(duì)本網(wǎng)站非常滿意myi是/否對(duì)本網(wǎng)站滿意yiban是/否對(duì)本網(wǎng)站一般buhao是/否對(duì)本網(wǎng)站感覺不好根據(jù)此表創(chuàng)建數(shù)據(jù)庫。對(duì)于投票調(diào)查信息頁面。在該網(wǎng)頁進(jìn)行勾選后，點(diǎn)擊提交，網(wǎng)頁會(huì)將用戶提交的資料全部交給服務(wù)器端并插入到調(diào)查表中。插入表單域后，進(jìn)行表單的相關(guān)設(shè)置。利用復(fù)選框和單選框進(jìn)行初始設(shè)置，并輸入相應(yīng)的文字，插入記錄的設(shè)置。做好的頁面如下圖：制作調(diào)查結(jié)果頁面，在插入表單域和表格后，設(shè)置對(duì)比鮮明的顏色做為單元格背景，用來反應(yīng)調(diào)查結(jié)果。在此頁面上工綁定5個(gè)記錄集，RD1是將剛才提交的數(shù)據(jù)綁定到這個(gè)頁面上，age,lujing,fchmyi,myi是為了顯示調(diào)查單項(xiàng)調(diào)查結(jié)果而設(shè)置的。以age為例，在綁定記錄集時(shí)選擇高級(jí)，添加SQL語句：SELECTcount(age)asageNum,(ageNum/(SELECTcount(user)FROMdch))asmyPercentFROMdchgroupbyageORDERBYage。同理對(duì)其他的進(jìn)行設(shè)置。設(shè)置動(dòng)態(tài)記錄集，綁定相關(guān)字段，并設(shè)置重復(fù)區(qū)域。此功能中，應(yīng)顯示百分比數(shù)據(jù)，但是由于技術(shù)有限和版本的限制，無法找到動(dòng)態(tài)數(shù)據(jù)對(duì)話框，因此此功能為完全實(shí)現(xiàn)。只能勉強(qiáng)將結(jié)果顯示，請(qǐng)老師見諒。圖如下所示：4.2.4搜索引擎模塊在寵物商店中，搜索引擎作為一個(gè)重要的組成部分，因?yàn)樵趯櫸锷痰曛袝?huì)涉及到大量的信息內(nèi)容，為方便用戶們及時(shí)方面的找到自己所需要的物品，因此設(shè)計(jì)了高級(jí)搜索一覽，即搜索引擎模塊，方面用戶查找自己所需要的信息。應(yīng)用的依然是統(tǒng)一風(fēng)格的頁面。數(shù)據(jù)庫設(shè)計(jì)圖如下：字段名稱字段類型內(nèi)容說明id自動(dòng)編號(hào)主鍵keyword文本關(guān)鍵字class文本分類pingpai文本品牌data時(shí)間/日期上榜日期way文本所在區(qū)域price貨幣價(jià)格除了與前面大致相同的表單添加，動(dòng)態(tài)文本的設(shè)置操作等等，在此模塊中增加了設(shè)置條件顯示區(qū)域，并對(duì)部分代碼進(jìn)行了修改。使得一開始的時(shí)候，未搜索時(shí)不顯示結(jié)果，當(dāng)搜索過后顯示結(jié)果。搜索引擎模塊使得整個(gè)流程更加順暢和完整化。4.2.5動(dòng)態(tài)模塊的總結(jié)至此，所有的動(dòng)態(tài)網(wǎng)頁的部分已經(jīng)結(jié)束，寵物商店的四個(gè)動(dòng)態(tài)模塊構(gòu)建已經(jīng)完成，這四個(gè)模塊是寵物商店的主要功能部分。貫穿整個(gè)寵物商店之中，是動(dòng)態(tài)交互式的頁面。很多的過程不知道怎么用文字表述，請(qǐng)見諒。4.3靜態(tài)網(wǎng)頁制作寵物商店網(wǎng)頁同時(shí)也有大量的靜態(tài)頁面來呈現(xiàn)所銷售的商品，因此會(huì)有大量的介紹頁面的呈現(xiàn)。4.3.1網(wǎng)頁布局對(duì)于寵物商店的布局，對(duì)于首頁以表格布局，四段式，即標(biāo)題欄（圖標(biāo)是用photoshop修改過的），中間分三欄，左邊是分類頁面的向?qū)?，中間是對(duì)于商品的展示，旁邊是圖片顯示。分頁面均以相同表格的形式布局，保持頁面的一致性。同時(shí)使得左邊的分類向?qū)щS著頁面的變化而變化。4.3.2圖片鏈接以及Flash的插入“屬性”面板中拖動(dòng)“鏈接”文本框右邊的“指向文件”按鈕，拖動(dòng)鼠標(biāo)時(shí)會(huì)出現(xiàn)一條帶箭頭的細(xì)線，指向鏈接文件后釋放鼠標(biāo)，即會(huì)鏈接到該文件。在插入flash的時(shí)候出現(xiàn)過bug,flash按鈕插入后顯示不在一個(gè)文件夾下無法使用。很奇怪，后來重新開DW8，重新添加按鈕又成功了，也不知道為什么。由于寵物商店涉及到大量的圖片的文字內(nèi)容，在分網(wǎng)頁中，添加錨點(diǎn)等功能方便用戶使用。4.3.3CSS樣式的使用CascadingStyleSheet（CSS）層疊樣式表（或級(jí)聯(lián)樣式表）用于定義文字屬性、文本屬性等網(wǎng)頁中基本信息，是網(wǎng)頁中的字體、大小、顏色等一系列基本信息，不隨著瀏覽器及系統(tǒng)顯示的分辨率等因素的變化而變化，使得網(wǎng)頁具有一定“固定”性。使用“CSS樣式”面板附加樣式表新建CSS樣式，里面含有編輯樣式表、刪除CSS樣式、創(chuàng)建新的CSS樣式三項(xiàng)。在“CSS樣式”面板底部單擊“新建CSS樣式”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中進(jìn)行設(shè)置，選擇器類型：選擇“標(biāo)簽”，自定義標(biāo)簽名稱，選擇“新建樣式表文件”點(diǎn)擊確定，保存新建的樣式表，即可創(chuàng)建CSS樣式表。在對(duì)于網(wǎng)頁的文字和標(biāo)題部分，我大量使用了CSS樣式表，這樣可以使得標(biāo)題更加美觀和突出。4.3.3flash圖像查看器的使用在媒體中選擇圖像查看器，保存相應(yīng)的Flash元素，對(duì)于flash元素進(jìn)行修改，編輯IamgeURLs進(jìn)行修改設(shè)置，選擇需要插入的圖片進(jìn)行保存。寵物之家首頁的實(shí)現(xiàn)5.1對(duì)于logo的設(shè)計(jì)首頁需要突出重點(diǎn)，因此圖標(biāo)和圖片元素顯得十分重要，我在首頁中加入了很多小的元素，并在于此鏈接的小網(wǎng)頁中加入了各種圖片元素，參考了部分網(wǎng)站的內(nèi)容。寵物商店的logo以簡(jiǎn)潔突出為主要目的，同時(shí)色調(diào)與首頁logo保持一致。以簡(jiǎn)潔清晰的搭配進(jìn)行設(shè)計(jì)，同時(shí)用Photoshop進(jìn)行修改。5.2個(gè)性化設(shè)置在一開始的設(shè)計(jì)的思路中，我的想法是用我們每個(gè)人的頭像用Flash做一個(gè)小動(dòng)畫，然后插到每個(gè)人的頁面中。我在網(wǎng)上搜集了幾個(gè)可愛的gif和flash的圖，然后使用Flash將圖像進(jìn)行摳圖，將我們自己的頭像換到當(dāng)中。最后在將拆分的幾個(gè)圖重新拼接，做成動(dòng)態(tài)的小圖。希望可以給我們的網(wǎng)站增加些色彩。5.3時(shí)間軸的使用將鼠標(biāo)經(jīng)過圖像變換與時(shí)間軸結(jié)合使用，在首頁制作時(shí)間軸，使得頁面充滿動(dòng)態(tài)的感覺。先選中建立APＤＩＶ元素，后將所需圖片插入其中，窗口中選擇時(shí)間軸后進(jìn)行設(shè)置，增加關(guān)鍵幀等。5.4背景圖片的切分我們的首頁是用表格布局，因此需要對(duì)于背景圖片進(jìn)行切分，充分的利用Photoshop進(jìn)行切分后對(duì)單獨(dú)的單元格進(jìn)行背景的設(shè)置，或者偷懶的用QQ截圖進(jìn)行功能的實(shí)現(xiàn)。5.5添加背景音樂利用代碼進(jìn)行添加，<bgsoundsrc="e:/asp/web/shop/lovesong.mp3"loop=3>，使得音樂在打開頁面時(shí)播放，最小化時(shí)停止。代碼可以插在body中，也可以在body之外。P．S．這個(gè)部分是我跟陳浩博同學(xué)一起實(shí)現(xiàn)的，我是負(fù)責(zé)美工以及鏈接和分網(wǎng)頁的制作。布局是由他完成的，后期制作是由我完成的。這里就只重點(diǎn)介紹沒有出現(xiàn)過的功能。第六章總結(jié)本小組其實(shí)并不是一個(gè)非常優(yōu)秀的小組，相反，可能我們組在整個(gè)班級(jí)中還算比較差的。在一開始的