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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16、e的數(shù)據(jù)庫在數(shù)據(jù)庫中建立表zhuce1、rpost、board三個(gè)表。如下圖3-1：圖3-1 zhuce數(shù)據(jù)庫中的表格3.1 數(shù)據(jù)表zhuce1注冊模塊、登錄模塊、個(gè)人頁面、修改密碼其中的字段名稱和其描述見下表 zhuce1字段設(shè)定：name文本名稱name2文本昵稱xingbie文本性別year數(shù)字年e-mail文本xuehao數(shù)字學(xué)號dizhi文本地址aihao文本愛好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ù)庫中的東西不多，簡化過來就是這樣。網(wǎng)頁和數(shù)據(jù)庫連接，生成一個(gè)文件（conn.asp）第4章 同學(xué)錄制作4.1首頁前臺設(shè)計(jì)4.1.1 div設(shè)計(jì)index的前臺用到了很多的div，要注意它們之間的嵌套和平行關(guān)系。其中用到的幾個(gè)屬性是height、width 、margin、 padding 、float、 background 等。4.1.2 flash設(shè)計(jì)前臺頁面用了一個(gè)巨大

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

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

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

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

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

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

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

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

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

27、4.3.2 div+css返回主頁和修改密碼只是文字，其底紋和按鈕作用都是通過css+div實(shí)現(xiàn)的；把文字變成列表，去掉列表標(biāo)號，然后讓行浮動，設(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屬性，是訪問過的狀態(tài)。這些都屬于超鏈接特效4.3.3 實(shí)現(xiàn)功能實(shí)現(xiàn)了個(gè)人信息的讀取實(shí)現(xiàn)步驟：新建一個(gè)記錄集，名稱：recordset1連接：conn表格：zhuce1全部列 篩選：name= 階段變量(mm_username)在這里，最重要的是篩選，name和階段變量mm_username連接成功后，再插入表格，格式類似于zhuce.asp文件中的表格。見圖4-8： 圖4-8 個(gè)人信息詳細(xì)信息用的是表格，這類的排版嚴(yán)謹(jǐn)，細(xì)致，有條理，“詳細(xì)信息”四個(gè)字用的是圖片，為的是防止字體丟失。這些記錄都是從記錄集

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

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

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

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

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

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

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

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

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

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

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

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

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

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