畢業(yè)設(shè)計(jì)任務(wù)書(shū)

1、河南工業(yè)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)任務(wù)書(shū)類(lèi)別：* 專(zhuān) 業(yè)：計(jì)算機(jī)應(yīng)用 班 級(jí): 應(yīng)用0901 姓 名： * 畢業(yè)設(shè)計(jì)題目： 同學(xué)錄 指導(dǎo)教師姓名： 楊俊成 負(fù)責(zé)人簽字： 王東升 2011 年 10月 10日內(nèi)容和要求：1本網(wǎng)站至少要有分類(lèi)別顯示新聞和顯示當(dāng)天最新新聞的功能，以及具有管理員添加和刪除新聞的功能。 2網(wǎng)站網(wǎng)頁(yè)的色彩搭配合理、和諧、自然，主色調(diào)與主題內(nèi)容相符。 3網(wǎng)頁(yè)中要有適量的圖片和網(wǎng)頁(yè)特效。 4此設(shè)計(jì)應(yīng)提交的資料有： （1）軟件(前臺(tái)用asp、asp.net、jsp或者php，后臺(tái)用sql server 2003，mysql或oracle數(shù)據(jù)庫(kù))； （2）畢業(yè)設(shè)計(jì)說(shuō)明書(shū)。包括設(shè)計(jì)任務(wù)書(shū)

2、、中文摘要、前言、目錄、正文（含可行性研究報(bào)告、需求分析、總體設(shè)計(jì)、概要設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)、軟件運(yùn)行的結(jié)果和軟件測(cè)試等）、程序代碼、結(jié)束語(yǔ)、致謝、參考文獻(xiàn)等，要求10000字以上。 （3）一級(jí)標(biāo)題三號(hào)宋體、二級(jí)標(biāo)題四號(hào)宋體、三級(jí)標(biāo)題小四宋體、行距是18磅 指導(dǎo)教師（簽字）： 年 月 日摘要目前，web標(biāo)準(zhǔn)大潮已經(jīng)席卷了國(guó)內(nèi)的網(wǎng)站設(shè)計(jì)領(lǐng)域,網(wǎng)頁(yè)作為上網(wǎng)的主要依托，由于人們頻繁的使用網(wǎng)絡(luò)而變得越來(lái)越重要，使得網(wǎng)頁(yè)設(shè)計(jì)也得到了快速的發(fā)展。網(wǎng)頁(yè)講究的是布局，其目的就是提供一種布局更合理、功能更強(qiáng)大、使用更方便的形式給每個(gè)瀏覽者，使他們能夠輕松、快捷的了解網(wǎng)頁(yè)所提供的信息。同學(xué)錄的制作中運(yùn)用了css的美化

3、和布局。其設(shè)計(jì)的基礎(chǔ)來(lái)源于完美網(wǎng)頁(yè)設(shè)計(jì)藝術(shù)、css布局之道和平時(shí)平面老師教授的平面設(shè)計(jì)排版基本原理。同學(xué)錄是一個(gè)小型網(wǎng)站，主要分為以下幾個(gè)部分：主頁(yè)、個(gè)人主頁(yè)、相冊(cè)、留言板等實(shí)現(xiàn)的功能是注冊(cè)、登錄、修改密碼、編輯留言、回復(fù)留言、顯示個(gè)人信息（包括個(gè)人愛(ài)好聯(lián)系方式等）搜索通訊錄、文章的編輯、發(fā)表、評(píng)論等。界面運(yùn)用的是css+div和表格配合。所有的頁(yè)面采用的圖片都是經(jīng)過(guò)深加工或者是一些簡(jiǎn)單顏色的配合。看起來(lái)活潑，畫(huà)面也不顯得太過(guò)于復(fù)雜。網(wǎng)站制作過(guò)程中，很少使用了代碼，一般都是依靠dreamweaver的功能實(shí)現(xiàn)的。也讓我們了解到了這個(gè)軟件功能之強(qiáng)大。主色調(diào)用的是藍(lán)、黃，注重的是前臺(tái)的設(shè)計(jì)，后臺(tái)制

4、作的功能不是很多，很多的功能都比較簡(jiǎn)陋，在以后要致力于提高。關(guān)鍵詞：同學(xué)錄 css+div web 排版 顏色 dreamweaver前言這個(gè)網(wǎng)站更注重的是美觀(guān)，前臺(tái)的設(shè)計(jì)很是費(fèi)時(shí)費(fèi)腦，先后淘汰掉了四五套方案，浪費(fèi)了大量時(shí)間，前臺(tái)也是勉強(qiáng)湊活著能看。不過(guò)也讓我對(duì)布局和一些css屬性有了更深的了解。也讓我對(duì)網(wǎng)站設(shè)計(jì)有了一個(gè)清晰的認(rèn)識(shí)。主頁(yè)面設(shè)計(jì)的有點(diǎn)失敗，設(shè)計(jì)之中我違背了設(shè)計(jì)網(wǎng)頁(yè)的步驟，那就是先規(guī)劃，后下手設(shè)計(jì)。這點(diǎn)我是深有體會(huì)，因?yàn)槲覜](méi)按步驟做，導(dǎo)致了我換了好幾套方案，浪費(fèi)了好多的時(shí)間和精力。我的網(wǎng)頁(yè)都是圍繞我的flash制作的，配色和其他的一些沖突因素都很難解決，參考了很多書(shū)之后，終于敲定其

5、布局。在前臺(tái)設(shè)計(jì)中，我也有了一些發(fā)現(xiàn)，以前我設(shè)計(jì)界面的時(shí)候喜歡用藍(lán)色，各種藍(lán)色搭配很漂亮。在設(shè)計(jì)的過(guò)程中，我發(fā)現(xiàn)原來(lái)藍(lán)色和黃色搭配好了也是很奇妙的選擇。于是用黃色作為背景，并在背景上添加了水印效果。背景用了一個(gè)信封的剪切和一些圖片重疊，好像是散亂的照片裝在信封里的效果，比前幾種方案要靠譜的多，于是毅然采用了這種設(shè)計(jì)方式。左邊的圓形flash菜單也不會(huì)和右面的登錄模塊相互沖突了。而網(wǎng)頁(yè)頭部的藍(lán)色也和背景顏色產(chǎn)生了比較強(qiáng)烈的對(duì)比，讓網(wǎng)頁(yè)上的logo看起來(lái)更加的明顯了。大致依照了九宮格式的布局。在排版過(guò)程中我也看了很多的關(guān)于排版的書(shū)籍。明白了很多，比如網(wǎng)頁(yè)中的圖片要么用自己拍的照片，要么把原圖處理的

6、風(fēng)格迥異，避免產(chǎn)生版權(quán)糾紛。而我采用的是盡量用不同的色塊搭配解決問(wèn)題，而不是用圖片來(lái)裝飾背景，這樣也解決了版權(quán)問(wèn)題。這個(gè)網(wǎng)頁(yè)用的主要是藍(lán)黃色，黃色讓人有一種懷舊和美好的感覺(jué)；藍(lán)色清新，深藍(lán)睿智冷靜?！拔业恼掌敝械木W(wǎng)頁(yè)頭部用的是黃色，我覺(jué)得我做的標(biāo)題就這個(gè)還可以我之所以說(shuō)這么多的排版和平面問(wèn)題主要是因?yàn)槲疑瞄L(zhǎng)的是平面，所以我做的網(wǎng)站也是側(cè)重于界面設(shè)計(jì)，功能確實(shí)少的可憐。開(kāi)始要實(shí)現(xiàn)的功能只是輸入、修改、讀取只是面對(duì)自己的一個(gè)網(wǎng)站， 可以為自己提供一些查閱和修改，但是那樣就違背了一個(gè)網(wǎng)站的目的了，網(wǎng)頁(yè)是用來(lái)面對(duì)大眾的，要做成flash，就沒(méi)有辦法用到注冊(cè)這個(gè)功能，而且很多的功能也很難實(shí)現(xiàn)，所以網(wǎng)站

7、設(shè)計(jì)是當(dāng)前最好的選擇。也因此平添了很多的麻煩。不過(guò)只有達(dá)到目標(biāo)而馬不停蹄才能學(xué)到更多，而不是遇到問(wèn)題就繞過(guò)去。雖然這個(gè)制作過(guò)程中只是實(shí)現(xiàn)了很少一部分功能，但是其制作過(guò)程也把我折騰了個(gè)灰頭土臉，網(wǎng)站制作看起來(lái)不是太難，可是其中的前臺(tái)設(shè)計(jì)顏色搭配，布局，也是讓我改了好幾遍。后臺(tái)的數(shù)據(jù)庫(kù)連接我更是沒(méi)有一點(diǎn)辦法，更是請(qǐng)教了很多的老師同學(xué)，說(shuō)來(lái)慚愧，我做的還是很差強(qiáng)人意。不過(guò)我的確是盡力了。在制作過(guò)程中，自學(xué)能力尤為重要。同學(xué)之間的互相幫助也體現(xiàn)出來(lái)了，從制作的網(wǎng)站的過(guò)程看，依稀能看到誰(shuí)能獲得一個(gè)好工作，而誰(shuí)要面對(duì)就業(yè)困難的困擾。我做的同學(xué)錄也能為自己量身打造一個(gè)紀(jì)念的承載物，就讓它作為我網(wǎng)站開(kāi)發(fā)的第一

8、份作業(yè)，不管好也罷，差也罷，總之我覺(jué)得這個(gè)網(wǎng)站開(kāi)發(fā)也不是一開(kāi)始想像的那么沒(méi)有意思，這也算是一個(gè)良好的開(kāi)端。 目錄第1章 asp動(dòng)態(tài)網(wǎng)站運(yùn)行環(huán)境1.1 安裝iis從“開(kāi)始”菜單中，選擇“設(shè)置”-“控制面板”-“添加或刪除程序”命令，在彈出的“添加或刪除程序”窗口中選擇“添加/刪除windows組件”。在彈出的“windows組建向?qū)А睂?duì)話(huà)框中，選中“internet信息服務(wù)（iis）”選項(xiàng)。單擊“詳細(xì)信息”按鈕，在彈出的“internet信息服務(wù)（iis）”對(duì)話(huà)框中，選中“internet信息服務(wù)管理單元”、“公用文件”、“萬(wàn)維網(wǎng)服務(wù)”、“文件傳輸協(xié)議（ftp）服務(wù)”4個(gè)子組件，然后單擊“確定”

9、按鈕彈出“所需文件”對(duì)話(huà)框單擊“瀏覽”按鈕，選擇“windowsxp professional sp3 iis5.1”安裝包的路徑。繼續(xù)單擊“確定按鈕”，如再?gòu)棾觥八栉募睂?duì)話(huà)框，再次指定安裝包路徑即可，待配置組件安裝完成后，會(huì)彈出完成“windows組件向?qū)А钡拇翱?，此時(shí)安裝成功測(cè)試：在瀏覽器地址欄中輸入“http:/localhost”，簡(jiǎn)單測(cè)試iis服務(wù)是否正常，然后再設(shè)置虛擬目錄和動(dòng)態(tài)網(wǎng)站點(diǎn)。1.2 設(shè)置站點(diǎn)和虛擬目錄建立站點(diǎn)：在本地電腦e盤(pán)創(chuàng)建一個(gè)名為biyeshejiduan的文件夾，作為大作業(yè)的站點(diǎn)目錄，在“internet信息服務(wù)”窗口中使用“虛擬目錄創(chuàng)建向?qū)А保瑢iyes

10、hejiduan的文件夾作為虛擬目錄，并設(shè)置asp動(dòng)態(tài)網(wǎng)站運(yùn)行環(huán)境。在dreamweaver中設(shè)置站點(diǎn)。在dreamweaver中的設(shè)置為：在“分類(lèi)”中選擇“本地信息”本地信息： 站點(diǎn)名稱(chēng)：biyesheji 本地根文件夾：e:/biyeshejiduan 在“分類(lèi)”中選擇“測(cè)試服務(wù)器”測(cè)試服務(wù)器： 服務(wù)器模型：asp vbscript 訪(fǎng)問(wèn)：本地/網(wǎng)絡(luò) 測(cè)試服務(wù)器文件夾：e:/biyeshejiduan url前綴：http：/localhost/biyesheji單擊“確認(rèn)”，完成設(shè)置。站點(diǎn)結(jié)構(gòu)：和數(shù)據(jù)庫(kù)連接（字符串）：provider=microsoft.jet.oledb.4.0;da

11、ta source=e:biyeshejiduanzhucezhuce.mdb; 這段字符串來(lái)自于一個(gè)數(shù)據(jù)庫(kù)連接文件，其后綴名為“udl”；打開(kāi)文件，選擇microsoft jet 4.0 ole db provider -“選擇數(shù)據(jù)庫(kù)名”后面的文本框填入：“ e:biyeshejiduanzhucezhuce.mdb”；將文件確定關(guān)閉，將后綴名改為“txt”,打開(kāi)，復(fù)制其中的相應(yīng)文本，粘貼進(jìn)dreamweaver中連接數(shù)據(jù)庫(kù)字符串后即可。 第2章 同學(xué)錄的分析2.1 可行性研究報(bào)告同學(xué)錄一個(gè)網(wǎng)站開(kāi)發(fā)項(xiàng)目。該網(wǎng)站要有一定的flash和圖片，要求圖片和flash要是原創(chuàng)。而且該網(wǎng)站擁有在線(xiàn)人數(shù)統(tǒng)

12、計(jì)功能，和一些基本的功能。2.1.1 需求臨近畢業(yè)，做一個(gè)有關(guān)同學(xué)錄的網(wǎng)站能起到實(shí)質(zhì)性的幫助，時(shí)間合適；能激發(fā)對(duì)網(wǎng)站的愛(ài)好，促進(jìn)對(duì)網(wǎng)站開(kāi)發(fā)的綜合應(yīng)用；為即將畢業(yè)做一個(gè)鋪墊，全是自己原創(chuàng)制作的網(wǎng)站是一個(gè)巨大的說(shuō)服力；更重要的是可以根據(jù)一些要求進(jìn)行網(wǎng)站的修改和升級(jí)，使其擁有更多的功能。擁有后期的發(fā)展能力。界面要合理布局，注重的是前臺(tái)的設(shè)計(jì)。2.1.2 技術(shù)我們學(xué)過(guò)flash和ps，擁有處理圖片和制作圖片、動(dòng)畫(huà)的很多經(jīng)驗(yàn)；學(xué)過(guò)dreamweaver和asp，擁有一些經(jīng)驗(yàn)和技術(shù)支持。還有的是同學(xué)和老師們的技術(shù)支持。更重要的是功能不是很多，時(shí)間上可以應(yīng)付的過(guò)來(lái)。2.1.3 必要性目的是為了提高我們的綜合

13、開(kāi)發(fā)技術(shù)和檢驗(yàn)畢業(yè)的網(wǎng)站開(kāi)發(fā)實(shí)力。網(wǎng)站開(kāi)發(fā)在這個(gè)時(shí)期是非?；馃岬?，所以有著一個(gè)良好的網(wǎng)站開(kāi)發(fā)經(jīng)驗(yàn)和技術(shù)基礎(chǔ)顯得尤為重要，在這些基礎(chǔ)上面進(jìn)行一些合理的拓展和提高，可以為學(xué)習(xí)新的知識(shí)而打下良好的基礎(chǔ)。在制作的過(guò)程中，聯(lián)系了同學(xué)，拉近了和老師的距離，擁有了良好的互動(dòng)和交流，更重要的是調(diào)動(dòng)了對(duì)網(wǎng)站開(kāi)發(fā)的興趣和良好的學(xué)習(xí)主動(dòng)性。將以前的零散的,看起來(lái)不實(shí)用的功能 都現(xiàn)實(shí)化了。在這些基礎(chǔ)之上還有了對(duì)一些流行技術(shù)的認(rèn)識(shí)和產(chǎn)生興趣。2.2 總體設(shè)計(jì)界面設(shè)計(jì)和各個(gè)頁(yè)面之間的聯(lián)系：首頁(yè)，主要的是登錄界面和flash導(dǎo)航欄。從主頁(yè)上延伸出來(lái)的注冊(cè)頁(yè)面。從主頁(yè)上登錄后跳轉(zhuǎn)到個(gè)人主頁(yè)，顯示登錄人的各種信息，和查詢(xún)同學(xué)的

14、聯(lián)系方式、修改個(gè)人密碼。修改密碼界面從主頁(yè)上延伸出來(lái)的照片即相冊(cè)從主頁(yè)上延伸出來(lái)的留言板從主頁(yè)上延伸出來(lái)的文章編輯界面。從主頁(yè)上延伸出來(lái)的學(xué)校簡(jiǎn)介。是個(gè)靜態(tài)頁(yè)面.其中個(gè)人主頁(yè)鏈接到了密碼修改留言板和相冊(cè)是一個(gè)動(dòng)態(tài)頁(yè)面。設(shè)計(jì)注重的部分為前臺(tái)布局，前臺(tái)的布局花費(fèi)了很大的心思，也參考了很多的資料?？偟膩?lái)說(shuō)集中在黃色和藍(lán)色兩大色塊上，其中黃顏色是一個(gè)搭配的顏色，藍(lán)顏色為主。原因是黃顏色太過(guò)明亮，沒(méi)有藍(lán)色的沉穩(wěn)。而且黃色容易引起視覺(jué)疲勞。字體的顏色集中在白色和黑色兩塊。網(wǎng)頁(yè)都需要flash以增強(qiáng)其趣味和功能。我的flash置于首頁(yè)，連接了幾個(gè)靜態(tài)的頁(yè)面。前臺(tái)：頁(yè)面簡(jiǎn)潔大方，顏色符合同學(xué)錄這個(gè)標(biāo)題。顏色要

15、合理搭配。后臺(tái)：基本功能具備，要有別于聊天網(wǎng)站。2.3 概要設(shè)計(jì)除了主頁(yè)以外，其中的相冊(cè)和留言板，文章區(qū)等各個(gè)模塊都聯(lián)系好多的頁(yè)面。如留言板中要有添加留言，顯示留言和評(píng)價(jià)留言；文章區(qū)和留言區(qū)相似，要有編輯文章、發(fā)表文章和評(píng)價(jià)文章，相冊(cè)是要有注冊(cè)、登錄、上傳和刪除自己上傳的圖片等的功能，其中有很多的東西要做，前臺(tái)布局，和后臺(tái)管理等。相冊(cè)有兩個(gè)，其中一個(gè)是靜態(tài)網(wǎng)頁(yè)，是我個(gè)人制作的，個(gè)人主頁(yè)中有一個(gè)是功能項(xiàng)目很多的動(dòng)態(tài)網(wǎng)頁(yè),具有了上傳，刪除，評(píng)價(jià)等功能。其最終結(jié)構(gòu)如圖2-1所示：圖 2-1 主要布局第3 章 數(shù)據(jù)庫(kù)設(shè)計(jì)最初我建立的數(shù)據(jù)庫(kù)很是混亂，經(jīng)過(guò)老師指點(diǎn)后，我整理一下思路，建立了一個(gè)名為zhuc

16、e的數(shù)據(jù)庫(kù)在數(shù)據(jù)庫(kù)中建立表zhuce1、rpost、board三個(gè)表。如下圖3-1：圖3-1 zhuce數(shù)據(jù)庫(kù)中的表格3.1 數(shù)據(jù)表zhuce1注冊(cè)模塊、登錄模塊、個(gè)人頁(yè)面、修改密碼其中的字段名稱(chēng)和其描述見(jiàn)下表 zhuce1字段設(shè)定：name文本名稱(chēng)name2文本昵稱(chēng)xingbie文本性別year數(shù)字年e-mail文本xuehao數(shù)字學(xué)號(hào)dizhi文本地址aihao文本愛(ài)好zym文本座右銘month數(shù)字月day數(shù)字日pw文本密碼圖3-2 zhuce1字段設(shè)定而board和rpost是為留言、文章而設(shè)計(jì)的表3.2 數(shù)據(jù)表boardboard中主要為留言其中有主題（subject）、作者（auth

17、or）、e-mail、和發(fā)布時(shí)間（time）、具體內(nèi)容（content）。3.3 數(shù)據(jù)表rpostrpost表單的內(nèi)容為回復(fù)留言的人（r-name）、回復(fù)時(shí)間(r-time)、回復(fù)內(nèi)容(r-content)等，主鍵為。數(shù)據(jù)庫(kù)中的東西不多，簡(jiǎn)化過(guò)來(lái)就是這樣。網(wǎng)頁(yè)和數(shù)據(jù)庫(kù)連接，生成一個(gè)文件（conn.asp）第4章 同學(xué)錄制作4.1首頁(yè)前臺(tái)設(shè)計(jì)4.1.1 div設(shè)計(jì)index的前臺(tái)用到了很多的div，要注意它們之間的嵌套和平行關(guān)系。其中用到的幾個(gè)屬性是height、width 、margin、 padding 、float、 background 等。4.1.2 flash設(shè)計(jì)前臺(tái)頁(yè)面用了一個(gè)巨大

18、的flash導(dǎo)航，自己看起來(lái)還可以，同學(xué)有人說(shuō)像是火狐的logo，仔細(xì)看也是，不過(guò)我用的是中國(guó)特有的墨跡和火焰的遮罩。做出來(lái)的看起來(lái)很像是一個(gè)寶石。這個(gè)flash用的是as3.0的代碼編寫(xiě)出來(lái)的。這個(gè)flash的中心是一個(gè)藍(lán)色的圓，類(lèi)似藍(lán)寶石，鼠標(biāo)放上邊時(shí)，有一個(gè)擴(kuò)張感的呼吸，有節(jié)奏，看來(lái)是初步達(dá)到了效果。和背景對(duì)比，突出了導(dǎo)航欄，更有一種動(dòng)感。見(jiàn)下圖 4-1:圖4-1 flash導(dǎo)航欄4.1.3 ps設(shè)計(jì)網(wǎng)頁(yè)頭部較為高大，有了一個(gè)現(xiàn)代感，讓整個(gè)頁(yè)面看起來(lái)布局較為合理。網(wǎng)頁(yè)背景是一個(gè)用信封素材，一個(gè)用三四張圖片合成的頭部，處理成幾張照片重疊裝在信封里的樣子。將海灘、椰樹(shù)、燈塔結(jié)合在一起，燈塔代

19、表的是指引迷津，同學(xué)錄也是眾多漂泊在社會(huì)中的同學(xué)們心中的燈塔。黃色的圖片只是露出了一角，在整個(gè)藍(lán)色的背景下，添了一份溫 馨和活潑，更重要的是它代表的是懷念，整個(gè)背景圖看起來(lái)清新，自然，溫馨 如下圖 4-2：圖4-2 首頁(yè)頭部信封是牛皮紙的黃色，融合了圖片、分割了網(wǎng)頁(yè)。整個(gè)信封作為網(wǎng)頁(yè)的主體。背景用的是處理過(guò)的圖片，處理了一個(gè)小的類(lèi)似水印的圖片，上面有“同學(xué)錄”三個(gè)字，字體是傾斜的，看起來(lái)緊湊而不缺少時(shí)代感。用css中的background-image，repeat重復(fù)，整個(gè)背景基本都用整個(gè)水印覆蓋，和藍(lán)色的標(biāo)題 圖4-3 首頁(yè)版面對(duì)比，看起來(lái)溫和而不失活潑。配色:用的是藍(lán)色，很純粹的藍(lán)色和黃色

20、，顏色對(duì)比很大。顏色看起來(lái)很活潑?！巴瑢W(xué)錄”三個(gè)字用的是方正綜藝，大方而莊重。字體用的是淺藍(lán)色，藍(lán)色的不同對(duì)比看起來(lái)很和諧，因?yàn)榕虐婧皖伾珕?wèn)題我費(fèi)了很大的力氣去搭配顏色，先后換過(guò)五種方案，最后看過(guò)一些參考資料，才開(kāi)始設(shè)計(jì)這樣的布局。 顏色中藍(lán)色用的比較明亮，純度比較高，黃色亦是如此，而作為主體的信封亮度較低，純度也差了很多，這樣就有幾點(diǎn)好處：背景適宜閱讀，不會(huì)太刺眼；突出了導(dǎo)航欄（導(dǎo)航欄用的是橘紅和藍(lán)色）；和標(biāo)題欄分別得很清楚，和背景也分別開(kāi)來(lái)，突出了標(biāo)題欄（網(wǎng)頁(yè)頭部）。見(jiàn)圖 4-3。界面設(shè)計(jì)的有點(diǎn)大了，在某些電腦上看起來(lái)我的網(wǎng)頁(yè)是個(gè)龐然大物。功能：首頁(yè)有登錄界面、搜索界面。連接了注冊(cè)界面，個(gè)

21、人主頁(yè)。flash導(dǎo)航欄連接了文章編輯、留言、照片（靜態(tài)）、音樂(lè)（靜態(tài)）、學(xué)校簡(jiǎn)介。登錄界面用的是dreamweaver中的添加“服務(wù)器行為”搜索界面的制作：選中搜索輸入的文本域，設(shè)置其為“search”，然后為其添加一個(gè)spry：插入spryspry驗(yàn)證文本域；對(duì)其屬性進(jìn)行設(shè)置。在spry中有七項(xiàng)要注意：類(lèi)型：文本域要求采用的格式，包括整數(shù)、電子郵件、日期等，如選定格式，則必須輸入相應(yīng)格式的文本才可以通過(guò)驗(yàn)證。預(yù)覽狀態(tài)：在編輯制作網(wǎng)頁(yè)時(shí)設(shè)計(jì)人員所預(yù)覽的狀態(tài)，包括初始、必填、有效等狀態(tài)。驗(yàn)證于：有三項(xiàng)（onblur、onchange、onsubmit）必需的：若選中則要求該文本域必填。提示：這

22、個(gè)作用是由于文本域；有很多的不同格式，因此提示用戶(hù)需要輸入哪種格式會(huì)比較有幫助。最小字符、最大字符、最小值、最大值：分別對(duì)應(yīng)文本框中必須輸入的最小字符個(gè)數(shù)、可以輸入的最大字符個(gè)數(shù)、最小的數(shù)值和最大的數(shù)值。強(qiáng)制模式：禁止用戶(hù)在驗(yàn)證文本域輸入無(wú)效字符，當(dāng)用戶(hù)輸入與指定格式不符的文本時(shí)，輸入的文本不顯示在文本框中。制作搜索結(jié)果頁(yè)面前臺(tái)：只要把搜索頁(yè)面index.asp另存為search.asp，然后再將flash導(dǎo)航刪除，之后在flash原有地方進(jìn)行設(shè)計(jì)，表格設(shè)置。后臺(tái)：建立一個(gè)記錄集，在記錄集中選擇全部的項(xiàng)目，在篩選中要注意，是name=表單變量（search），排序按時(shí)間updatetime，降

23、序。在建立了記錄集之后，選擇一下步驟：插入-數(shù)據(jù)對(duì)象-動(dòng)態(tài)數(shù)據(jù)-動(dòng)態(tài)表格，單擊確定，建立了動(dòng)態(tài)表格，這是一個(gè)自動(dòng)生成的表格，所以當(dāng)中肯定有要?jiǎng)h除和修改的地方，將第一行的名稱(chēng)改掉4.2用戶(hù)注冊(cè)界面4.2.1頁(yè)面設(shè)計(jì)如圖4-4所示，這個(gè)頁(yè)面設(shè)計(jì)比較簡(jiǎn)單，其提示語(yǔ)在與藍(lán)色區(qū)域。 圖4-4 注冊(cè)界面從標(biāo)題欄較小，文字用的是方正綜藝，大方而不失優(yōu)雅；為了突出內(nèi)容，藍(lán)色為頭部，漸變灰色為主體，對(duì)比 鮮明；灰色優(yōu)雅，藍(lán)色也有睿智和優(yōu)雅，瀟灑的感覺(jué)，所以這兩者搭配，也很不錯(cuò)；插入了一些簡(jiǎn)單的圖片，平添了一份溫馨，讓整個(gè)冷色調(diào)中帶了一些暖色；此界面不宜過(guò)于復(fù)雜，本身表格比較多，如果太復(fù)雜容易讓人產(chǎn)生一種不耐煩的

24、感覺(jué)。界面要簡(jiǎn)潔，意圖清楚，界面不能太刺眼。 紅色字體用的是css中定義的“類(lèi)”；標(biāo)題中的藍(lán)色欄用的是div，背景插入用的是background-image no-repeat；主體也是div，背景用的也是。其他的欄目用的是表格，表格不好調(diào)整，不好進(jìn)行后期維護(hù)，但是對(duì)于欄目類(lèi)的東西，最適宜不過(guò)；在制作的時(shí)候排版也容易。4.2.2功能實(shí)現(xiàn)步驟1、添加form1的onsubmit事件： form action= method=post id=form1 name=form1 onsubmit=return check() 當(dāng)提交表單時(shí)會(huì)激發(fā)onsubmit事件，此時(shí)調(diào)用check()函數(shù)，當(dāng)函數(shù)的

25、返回值為true時(shí)，否則不提交表單。2、將光標(biāo)定位在代碼之前，然后添加如下代碼：3、將用戶(hù)注冊(cè)信息保存至數(shù)據(jù)表zhuce1選擇 服務(wù)器行為插入記錄，彈出“插入記錄”對(duì)話(huà)框，設(shè)置相關(guān)參數(shù)，單擊確定，將用戶(hù)信息保存在數(shù)據(jù)庫(kù)中。如圖4-5：圖4-5 注冊(cè)界面插入記錄4、檢查新用戶(hù)名檢查新用戶(hù)名，如果是已經(jīng)注冊(cè)的用戶(hù)，則不允許再次被注冊(cè)，選擇 服務(wù)器行為用戶(hù)身份驗(yàn)證，在子菜單中選擇“檢查新用戶(hù)”對(duì)話(huà)框，設(shè)置各項(xiàng)參數(shù)，如4-6圖所示：圖4-6 檢查新用戶(hù)注冊(cè)界面基本完成，dreamweaver完全界面設(shè)計(jì)，很少添加代碼。4.3個(gè)人主頁(yè)的設(shè)計(jì)：界面設(shè)計(jì)：圖4-7 個(gè)人頁(yè)面的設(shè)計(jì)這個(gè)界面設(shè)計(jì)明顯迥異與主頁(yè)，

26、色調(diào)基本完全相反。這個(gè)頁(yè)面上有這幾樣?xùn)|西：個(gè)人詳細(xì)信息，美文欣賞，返回主頁(yè)，修改密碼。很明顯，這個(gè)頁(yè)面注重的是頁(yè)面設(shè)計(jì)，背景是深藍(lán)色的，為了突出黃色的葉子，這些葉子在藍(lán)色的包圍中看起來(lái)很活潑，工整大方。4.3.1 ps技術(shù)詳細(xì)信息和美文欣賞部分用的是切片，詳細(xì)信息部分利用的是陰影（藍(lán)色的詳細(xì)信息界面）和濾鏡（素描紙），兩部分看起來(lái)就像是重疊起來(lái)的，很有層次感，顏色搭配也盡量讓它們平衡，基本采用了九宮格的布局方式，整個(gè)頁(yè)面用了一個(gè)網(wǎng)絡(luò)圖片，只顯示了一部分，盡量避免了侵權(quán)的問(wèn)題。“美文欣賞”部分用的是相近顏色搭配，看起來(lái)就像是一個(gè)透明的背景放在黃色的紙上。這個(gè)頁(yè)面采用的格式來(lái)源于完美網(wǎng)頁(yè)設(shè)計(jì)藝術(shù)。

27、4.3.2 div+css返回主頁(yè)和修改密碼只是文字，其底紋和按鈕作用都是通過(guò)css+div實(shí)現(xiàn)的；把文字變成列表，去掉列表標(biāo)號(hào)，然后讓行浮動(dòng)，設(shè)定距離，添加鏈接，為鏈接添加背景顏色。放在div.css中的如下代碼：#corr ullist-style:none;#corr lifloat:left;margin-left:5px;margin-right:5px;#corr li adisplay:block;padding:5px 5px 5px 5px;#corr li a:linkbackground-color:#2b8cd5;#corr li a:hoverbackground-c

28、olor:#3cf;color:#ff0;其中，hover為鼠標(biāo)懸停狀態(tài)，還有visited屬性，是訪(fǎng)問(wèn)過(guò)的狀態(tài)。這些都屬于超鏈接特效4.3.3 實(shí)現(xiàn)功能實(shí)現(xiàn)了個(gè)人信息的讀取實(shí)現(xiàn)步驟：新建一個(gè)記錄集，名稱(chēng)：recordset1連接：conn表格：zhuce1全部列 篩選：name= 階段變量(mm_username)在這里，最重要的是篩選，name和階段變量mm_username連接成功后，再插入表格，格式類(lèi)似于zhuce.asp文件中的表格。見(jiàn)圖4-8： 圖4-8 個(gè)人信息詳細(xì)信息用的是表格，這類(lèi)的排版嚴(yán)謹(jǐn)，細(xì)致，有條理，“詳細(xì)信息”四個(gè)字用的是圖片，為的是防止字體丟失。這些記錄都是從記錄集

29、recordset1中得到的，拖至表格中，在階段變量的狀態(tài)下，進(jìn)行的記錄集顯示。個(gè)人主頁(yè)基本完成。4.4修改密碼界面一張圖片為背景制作出來(lái)的密碼修改界面，簡(jiǎn)潔。背景是一個(gè)漸變 通過(guò)repeatx制作而成的。此頁(yè)面突出的是功能，功能實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單1、客戶(hù)端用戶(hù)輸入密碼信息驗(yàn)證，和前面的一樣，所以在這里不再贅述。2、修改登錄用戶(hù)的密碼3、選擇 服務(wù)器行為-記錄集查詢(xún)，彈出記錄集對(duì)話(huà)框，設(shè)置各項(xiàng)參數(shù)，其中要注意的是篩選中用的是階段變量4、服務(wù)器行為-更新記錄設(shè)置要更新的表格zhuce1。唯一鍵列為id，在更新后轉(zhuǎn)到gerenzhuye2.asp，獲取值自“form1”表單元素“unewpass”u

30、newpassok”5、限制對(duì)頁(yè)面的訪(fǎng)問(wèn)。否則跳到主頁(yè)。4.5相冊(cè)的制作此項(xiàng)為靜態(tài)頁(yè)面，用到了ps和css技術(shù)4.5.1 顏色標(biāo)題用了黃色，漸變的黃色?？此坪芷恋念^部設(shè)計(jì)成 4-9 相冊(cè)logo設(shè)計(jì)了我進(jìn)一步設(shè)計(jì)的絆腳石，我不知道怎樣搭配顏色看起來(lái)不錯(cuò)，于是在很多次的試驗(yàn)中，選定了與其顏色相近的顏色，進(jìn)行了一些漸變的拖拉，成了現(xiàn)在的樣子，背景運(yùn)用了藍(lán)色，不可否認(rèn)的是藍(lán)色真的很適合我的口味。特別是和黃色搭配，我是藍(lán)色開(kāi)始，最后喜歡上黃色、橘黃、 橘紅色等顏色的。藍(lán)色給我一個(gè)很舒服的感覺(jué)。兩兩相照，結(jié)果看起來(lái)整個(gè)界面整潔又活潑。4.5.2 ps技術(shù)其標(biāo)題背景用了一個(gè)width為9px,heigh

31、t為200px的漸變通過(guò)css中的background-image repeat-x進(jìn)行的處理一個(gè)這樣的圖片而不 是處理一個(gè)整塊的圖片好處在于：減少整個(gè)文件的大小、可以多次利用（誰(shuí)也不知道你下一次設(shè)計(jì)的名為top的div有多寬）。如下圖所示,這是一個(gè)logo設(shè)計(jì),這個(gè)logo使用了同色漸變,看起來(lái)有一種立體的感覺(jué),在背景上用一個(gè)藍(lán)色文字,經(jīng)過(guò)字體柵格化后,進(jìn)行藍(lán)色和深藍(lán)色的漸變處理,得出了這樣的效果,顏色對(duì)比鮮明,一目了然,字體用的時(shí)方正綜藝,加了陰影效果,然后在中文字體下用了一行英文,英文字體看起來(lái)俏皮可愛(ài),也很優(yōu)雅,在下方,填補(bǔ)了整個(gè)logo的空白,達(dá)到了上下的平衡。設(shè)計(jì)好之后，總覺(jué)得顏色

32、的表達(dá)不夠豐富，而黃色和綠色搭配，特別是淺綠色的搭配很是不錯(cuò)，于是在標(biāo)題的上方，用鋼筆勾勒出了一個(gè)淺綠色的葉子。為了表達(dá)其立體的感覺(jué)，于是有加了一種深綠，整個(gè)logo平添了一份活力。從整體來(lái)看，整個(gè)logo優(yōu)雅，大方而又不失活力，達(dá)到了原來(lái)想要達(dá)到的目標(biāo)。4.5.3 css+div技術(shù)這是一個(gè)div創(chuàng)建的源代碼，經(jīng)過(guò)修改之后得到的，其中class是css中創(chuàng)建的類(lèi)。div的代碼相同，經(jīng)過(guò)css代碼中class的規(guī)范，變成一樣的規(guī)格。 從以上代碼不難看出，我用了熱點(diǎn)地圖，原因于若無(wú)熱點(diǎn)地圖，加上鏈接的話(huà)，整個(gè)版面整齊的排版會(huì)莫名其妙的被打亂。于是無(wú)奈中用了這個(gè)方法。css代碼如下（寫(xiě)在源文件中）

33、4.6留言板設(shè)計(jì)4.6.1 顯示留言數(shù)據(jù)庫(kù)中建立表board、rpost創(chuàng)建顯示留言表格頁(yè)面新建board.asp的新文件，將它保存。插入表格插入一個(gè)2行3列的表格，對(duì)齊屬性設(shè)置為“居中對(duì)齊”。定義css，單元格大小為12px窗口-綁定，打開(kāi)綁定面板，單擊面板中的“+”，在彈出的菜單中選擇“記錄集（查詢(xún)）”命令。進(jìn)行設(shè)置在“記錄集”對(duì)話(huà)框中的“名稱(chēng)”文本框中輸入設(shè)定的記錄集名稱(chēng)，例如名為board。在“連接”下拉列表中選擇“conn”，在表格下拉列表中選擇board，在列侯選中“選定的”，在列表中選“id”“subject”“author”和“time”。在“排序”下拉列表中選擇“time”和

34、“降序”。單擊確定，創(chuàng)建記錄集。綁定數(shù)據(jù)將光標(biāo)置于第二行第一列單元格中，在“綁定”面板中展開(kāi)創(chuàng)建的記錄集board，選中subject字段，選擇右下角的“插入”按鈕，綁定字段，同樣將author和time綁定，設(shè)置重復(fù)區(qū)域 選中第二行單元格，選擇 窗口-服務(wù)器行為，打開(kāi)服務(wù)器行為面板，在面板中單擊“+”按鈕，在彈出的菜單中選擇“重復(fù)區(qū)域”命令，彈出了“重復(fù)區(qū)域”對(duì)話(huà)框，在對(duì)話(huà)框中的“記錄集”下拉列表中選擇“board”，設(shè)置“顯示”記錄的參數(shù)為10單擊確定，創(chuàng)建“重復(fù)區(qū)域”服務(wù)器行為、記錄集分頁(yè)。將光標(biāo)置于表格右邊，按enter鍵換行。選擇“插入”-數(shù)據(jù)對(duì)象-記錄集分頁(yè)-記錄集導(dǎo)航條 命令。在

35、“記錄集導(dǎo)航條”窗口中，選擇“記錄集”下的“board”，設(shè)置“顯示方式”為“文本”，單擊確定按鈕。在“屬性”面板中，設(shè)置水平對(duì)齊方式為“居中對(duì)齊”，將導(dǎo)航條居中、轉(zhuǎn)到詳細(xì)頁(yè)面。選中表格第二行第一列中的board.subject，單擊“服務(wù)器行為”面板中的“+”，在彈出的菜單中選擇“轉(zhuǎn)到詳細(xì)頁(yè)面”命令。在彈出的頁(yè)面中“詳細(xì)信息頁(yè)”中輸入“m_show”設(shè)置“記錄集“為board，設(shè)置列為id。保存文件。4.6.2 詳細(xì)頁(yè)面的設(shè)計(jì)新建m_show.asp，將光標(biāo)置于相應(yīng)位置，選擇“插入-表格命令”，插入一個(gè)5行2列的表格，在“屬性”面板中將“對(duì)齊”設(shè)置為“居中對(duì)齊”。在第一列單元格中分別輸入文字

36、，在“屬性”面板中將大小設(shè)置為“12px”。打開(kāi)“窗口-綁定”面板，在面板中單擊“+”按鈕，在彈出的菜單中選擇“記錄集查詢(xún)”命令，出現(xiàn)了“記錄集”對(duì)話(huà)框。在“記錄集”對(duì)話(huà)框的“連接”下拉列表中選擇“conn”，在“表格”下拉列表中選擇“board”，設(shè)置“列”為“全部”，在“篩選”下拉列表中分別選擇“id”、“=”“url參數(shù)”和“id”，確定，創(chuàng)建記錄集。 插入要綁定的字段，author、e-mail、time、和content，保存。4.6.3 發(fā)表留言創(chuàng)建發(fā)表留言表單頁(yè)面創(chuàng)建“m_add.asp”，將光標(biāo)置于相應(yīng)位置，選擇“插入”-“表單”-“表單”命令，插入表單。將光標(biāo)置于表單中，選擇

37、“插入”-“表格”命令，插入一個(gè)5行2列的表格，在“屬性”面板中將“對(duì)齊”設(shè)置成“居中對(duì)齊”。在第1列單元格中分別輸入文字“留言標(biāo)題”、“留言人”、“聯(lián)系郵箱”、“留言?xún)?nèi)容”。在“屬性”面板中將“大小”設(shè)置為“12px”。將光標(biāo)置于第1行第2列單元格中，選擇“插入”-“表單”-“文本域”命令，插入文本域，在“屬性”面板中的“文本域名稱(chēng)”文本框輸入“subject”，將“字符寬度”設(shè)置為“35”，“類(lèi)型”設(shè)置為“單行”。將光標(biāo)置于第2行第2列單元格中，選擇“插入”-“表單”-“文本域”命令，插入文本域，在在“屬性”面板中的“文本域名稱(chēng)”文本框輸入“author”，將“字符寬度”設(shè)置為“25”，“

38、類(lèi)型”設(shè)置為“單行”。將光標(biāo)置于第3行第2列單元格中，選擇“插入”-“表單”-“文本域”命令，插入文本域，在在“屬性”面板中的“文本域名稱(chēng)”文本框輸入“e-mail”，將“字符寬度”設(shè)置為“30”，“類(lèi)型”設(shè)置為“單行”。將光標(biāo)置于第4行第2列單元格中，選擇“插入”-“表單”-“文本域”命令，插入文本域，在在“屬性”面板中的“文本域名稱(chēng)”文本框輸入“content”，將“字符寬度”設(shè)置為“45”，“行數(shù)”設(shè)置為“5”，“類(lèi)型”設(shè)置為“多行”。將光標(biāo)置于第5行第2列單元格中，選擇“插入”-“表單”-“按鈕”命令，在在“屬性”面板中的“動(dòng)作”選擇“提交表單”，插入“提交”按鈕。將光標(biāo)置于“提交”按

39、鈕后，選擇選擇“插入”-“表單”-“按 鈕”，再在“屬性”面板中的“動(dòng)作”選擇“重置表單”，插入“重置”按鈕。添加“插入記錄”服務(wù)器行為選擇“窗口”-“行為”命令，打開(kāi)“行為”面板，在面板中單擊“+”在彈出的菜單中選擇”檢查表單“命令彈出“檢查表單”對(duì)話(huà)框，在對(duì)話(huà)框中將文本域subject、author、和content的“值”設(shè)為“必需的”，“可接受”設(shè)置為“任何東西”。文本域e-mail的“可接受”設(shè)置為“電子郵件地址”。確定，添加行為。單擊“插入記錄”對(duì)話(huà)框，在對(duì)話(huà)框中的“連接”下拉列表框中選擇“conn”，“插入到表格”下拉列表中選擇“board”，“插入后，轉(zhuǎn)到”文本框中輸入“boa

40、rd.asp”。確定，創(chuàng)建成功記錄集。 4.6.4 回復(fù)留言打開(kāi)留言詳細(xì)頁(yè)面m_show.asp在已創(chuàng)立的表格后面換行，插入一個(gè)一行一列的表格，在“屬性”面板中將單元格“對(duì)齊”設(shè)置為“居中對(duì)齊”。在表格中輸入“我要回復(fù)”，并設(shè)為“居中對(duì)齊”選中文字“我要回復(fù)”，單擊“服務(wù)器行為”面板中的“+”按鈕，在彈出的菜單中選擇“轉(zhuǎn)到詳細(xì)頁(yè)面”，彈出“轉(zhuǎn)到詳細(xì)頁(yè)面”的對(duì)話(huà)框。在其中進(jìn)行設(shè)置，“詳細(xì)信息頁(yè)”為m_reply.asp；“傳遞url參數(shù)”為id記錄集為board，列設(shè)置為“id”。4.6.5 顯示回復(fù)信息創(chuàng)建記錄集，綁定數(shù)據(jù)建立一個(gè)名為rpost的記錄集，和數(shù)據(jù)庫(kù)中的rpost表連接，篩選id為

41、url參數(shù)，依照r_id降序排列。設(shè)置重復(fù)區(qū)域在“插入-數(shù)據(jù)對(duì)象-記錄集分頁(yè)-記錄集導(dǎo)航條”在“記錄集導(dǎo)航條”窗口中，設(shè)置“記錄集”參數(shù)為“rpost”，設(shè)置“顯示方式”為“文本”。單擊“確定”按鈕。導(dǎo)航條居中（center）在導(dǎo)航條下面輸入“還沒(méi)有網(wǎng)友回復(fù)該留言”，切換到“服務(wù)器行 為”面板，單擊“+”打開(kāi)下拉選單，選擇“顯示區(qū)域”-“如果記錄集為空則顯示區(qū)域”命令。打開(kāi)“如果記錄集為空則顯示區(qū)域”對(duì)話(huà)框，選擇“記錄集”為“rpost”，然后單擊“確定”按鈕。選中顯示回復(fù)信息的表格。切換到“服務(wù)器行為”面板，單擊“+”按鈕，打開(kāi)下拉菜單，選擇“顯示區(qū)域”-“如果記錄集不為空則顯示區(qū)域”命令。

42、打開(kāi)此對(duì)話(huà)框，選擇記錄集為“rpost”，然后單擊“確定”按鈕。制作回復(fù)留言頁(yè)面留言回復(fù)頁(yè)面m_reply.asp提供回復(fù)留言的功能，頁(yè)面上方顯示留言標(biāo)題和留言者的信息，頁(yè)面下方則是用于填寫(xiě)回復(fù)信息的表單，該頁(yè)面需要綁定兩個(gè)數(shù)據(jù)表board和rpost制作留言部分新建文件reply.asp將光標(biāo)置于相應(yīng)的位置，插入一個(gè)2行2列的表格 “窗口-綁定”面板，面板中單擊“+”按鈕，在彈出的菜單中選擇“記錄集”命令，彈出的對(duì)話(huà)框進(jìn)行設(shè)置，要注意的時(shí)在“篩選”下拉列表中分別選擇id=url參數(shù)和id進(jìn)行綁定?；貜?fù)留言表格制作可以復(fù)制m_add中的表格，然后復(fù)制到這個(gè)文件里，將文本域修改一下，建立和rpost有關(guān)的記錄集和board的記錄集進(jìn)行rpost寫(xiě)入記錄和board的讀取記錄。完成留言板設(shè)置。4.7 文章區(qū)設(shè)計(jì)基本功能和留言板相似，但是好在前臺(tái)設(shè)置；ps技術(shù)：這個(gè)logo設(shè)計(jì)的沒(méi)有相冊(cè)的logo漂亮，藍(lán)色和水生的貝殼等軟體動(dòng)物結(jié)合讓人想起了大海，大?？梢越o人很多思圖 4-9 文章logo設(shè)計(jì)路和感慨，故選此情景為logo。這個(gè)logo用了蒙版，主要是利用蒙版和漸變工具結(jié)合來(lái)使事物和背景更好的結(jié)合在一起。文章制作步驟和留言板相似，所以具體的在這里不再贅述。功能：編輯、評(píng)價(jià)、留言；結(jié)束語(yǔ)在知識(shí)快速更新