【文章內(nèi)容簡(jiǎn)介】 后建立頁(yè)面時(shí)可以按照它來操作。 2)各種網(wǎng)頁(yè)版面元素的設(shè)計(jì)特征 界面主顏色、 banner、廣告條、框架、標(biāo)題、按鈕以及字體顏色大小等，通過 Photoshop的專門設(shè)計(jì)，制作出與主題密切相關(guān)的風(fēng)格，使頁(yè)面看來起非常統(tǒng)一協(xié)調(diào)，界面友好性的良好體現(xiàn)。 3)進(jìn)行網(wǎng)頁(yè)的切圖以及切片的屬性設(shè)置 這部分是 Photoshop 應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵和技術(shù)性所在 ，將參考圖進(jìn)行切圖并轉(zhuǎn)化成 html 網(wǎng)頁(yè)，可以從靜態(tài)網(wǎng)頁(yè)上看界面的總體實(shí)現(xiàn)效果。 4)創(chuàng)建圖片與 Flash 整合的 swf 影片能夠輔助 Flash 設(shè)計(jì)圖片，創(chuàng)建出與主題相關(guān)的14 swf 影片 。 5)Photoshop、 Flash、 Visual Studio 的協(xié)同工作 Photoshop 制作網(wǎng)頁(yè)時(shí)利用圖像裝飾網(wǎng)站空間的方法各不相同，而最終的效果，取決于對(duì)藝術(shù)的理解與把握。同時(shí)，不能忽視了用戶界面的需求分析和設(shè)計(jì)規(guī)范的要求，要體現(xiàn)出建網(wǎng)的目的。在 Photoshop、 Flash、 Visual Studio 的協(xié)同工作下 ，實(shí)現(xiàn)帶給用戶友好的感觀體驗(yàn)和便捷的使用和操作的界面效果。 Visual Studio 的優(yōu)勢(shì)以及在本設(shè)計(jì)中的應(yīng)用 本人從 Visual Studio2021 開始使用，現(xiàn)在最新版本為 Visual Studio2021。這軟件無論在頁(yè)面設(shè)計(jì)上還是在程序開發(fā)上都有其優(yōu)越的一面。從頁(yè)面設(shè)計(jì)上來說，與Dreamweaver[13]相比， Visual Studio 要求頁(yè)面設(shè)計(jì)代碼要匹配，區(qū)分大小寫，這樣不但會(huì)使程序嚴(yán)謹(jǐn)而且會(huì)減少了代碼的冗余度，另外 Visual Studio 具有母模版，用戶自定義控件，這樣就能 大大減少開發(fā)者的開發(fā)時(shí)間。從后臺(tái)編碼來講，由于 Visual Studio 具有提示功能，就是您輸入開頭字母后，軟件會(huì)提示相關(guān)函數(shù)或者屬性，這樣一來就大大減少了用戶輸入代碼的時(shí)間。近幾年隨著 Ajax 的火速興起， Visual Studio 更加對(duì) Ajax 的兼容性進(jìn)行了提升，除了基本的 Ajax 控件外，還有一個(gè) Altas[10]框架，里面包含了常用的 Ajax控件，這些控件能夠使用戶享受更高的網(wǎng)上沖浪。 購(gòu)物流程 由于本系統(tǒng)屬于門戶網(wǎng)站，因此 購(gòu)物流程也相對(duì)簡(jiǎn)單 。購(gòu)物車頁(yè)面在點(diǎn)金產(chǎn)品中， 在點(diǎn)金產(chǎn)品頁(yè)面中，用戶點(diǎn)擊左邊導(dǎo)航樹的軟件訂購(gòu)后會(huì)出現(xiàn)可以進(jìn)行購(gòu)買的產(chǎn)品，這里有三個(gè)連接，一個(gè)是添加到購(gòu)物車，點(diǎn)擊添加到購(gòu)物車之后會(huì)出現(xiàn)一個(gè)購(gòu)物頁(yè)面，當(dāng)你輸入購(gòu)買數(shù)量后會(huì)出現(xiàn)總價(jià)，假如你沒有登陸的話會(huì)提示你未登錄，假如已經(jīng)登陸了就會(huì)添加到購(gòu)物車中；一個(gè)是連接到淘寶（即連接到公司在淘寶門店上的產(chǎn)品介紹），最后一個(gè)是詳細(xì)介紹，點(diǎn)擊詳細(xì)連接后就會(huì)出現(xiàn)該產(chǎn)品詳細(xì)介紹。 用戶登錄在點(diǎn)金產(chǎn)品頁(yè)面的左邊，導(dǎo)航樹的下方，用戶登錄要輸入用戶名，密碼和用戶角色，當(dāng)輸入信息正確的時(shí)候就會(huì)出現(xiàn)用戶信息，而且在該登15 陸框中還 有更改用戶信息鏈接，和退出功能。 在購(gòu)物車頁(yè)面中會(huì)顯示你購(gòu)買的產(chǎn)品，當(dāng)你沒有購(gòu)買任何產(chǎn)品的時(shí)候會(huì)顯示暫無數(shù)據(jù)，當(dāng)你已經(jīng)購(gòu)買了產(chǎn)品的時(shí)候會(huì)出現(xiàn)一個(gè)表，顯示你購(gòu)買了的產(chǎn)品，產(chǎn)品單價(jià)，購(gòu)買數(shù)量，總價(jià)。 購(gòu)物頁(yè)面 1） 購(gòu)物頁(yè)面有添加到購(gòu)物車、淘寶鏈接、詳細(xì)介紹三個(gè)連接按鈕， 下面是軟件訂購(gòu)頁(yè)面： 圖 12 軟件訂購(gòu)頁(yè)面 2）購(gòu)物車 界面包含了用戶之前已經(jīng)訂購(gòu)的產(chǎn)品和將要訂購(gòu)的產(chǎn)品，當(dāng)用戶確定訂購(gòu)某些產(chǎn)品之后，后臺(tái)就會(huì)進(jìn)行跟單，下面是購(gòu)物車界面： 圖 13 購(gòu)物車界面 16 計(jì) 本系統(tǒng)采用 SQL2021 來設(shè)計(jì)，數(shù)據(jù)庫(kù)名為 RF， 用戶角色為 sa，密碼為 ruifu，其表設(shè)計(jì)如下： 會(huì)員表主要用于存儲(chǔ)用戶信息，例如用戶名，密碼等，當(dāng)用戶購(gòu)物的時(shí)候首先要登陸才能進(jìn)行購(gòu)物，該表結(jié)構(gòu)如表 1 所示： 表 1 User_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 ID bigint 8 否 主鍵 Role nvarchar 10 是 用戶角色 NickName nvarchar 20 是 用戶昵稱 Name nvarchar 20 是 用戶實(shí)名 PassWord nvarchar 20 是 用戶密碼 Sex nvarchar 10 是 用戶性別 Telephone nvarchar 20 是 移動(dòng)電話號(hào)碼 FixedPhone nvarchar 20 是 固定電話號(hào)碼 Email nvarchar 50 是 電子郵箱 Address nvarchar 50 是 用戶地址 Question nvarchar 50 是 問題 Answer nvarchar 50 是 回答 管理員表用于記錄管理員的登錄帳號(hào)和登錄密碼，該表 結(jié)構(gòu)如表 2 所示： 表 2 Login_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 17 AdminiID int 4 否 主鍵 Name nvarchar 20 是 登陸賬號(hào) PassWord nvarchar 50 是 登陸密碼 該表用戶記錄用戶訂貨情況，后臺(tái)可以查看該表並進(jìn)行發(fā)貨跟單，該表結(jié)構(gòu)如表 3所示： 表 3 OrderInfo_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 OrderID bigint 8 否 主鍵 UserID nvarchar 10 是 用戶 ID OrderName nvarchar 20 是 用戶實(shí)名 ProductName nvarchar 50 是 商品名稱 ProductPrice float 8 是 產(chǎn)品價(jià)格 OrderNum int 4 是 訂購(gòu)數(shù)量 Amount float 8 是 總價(jià) OrderDate nvarchar 20 是 訂購(gòu)時(shí)間 IsCheckout nvarchar 10 是 是否下訂 IsSend nvarchar 10 是 是否發(fā)貨 公司簡(jiǎn)介模塊表主要包括經(jīng)營(yíng)理念、公司簡(jiǎn)介、聯(lián)系我們、管理團(tuán)隊(duì)、投資理念、投資流程，該表結(jié)構(gòu)如表 4 所示： 表 4 GSJJ_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 ID bigint 8 否 主鍵 About nvarchar 20 是 信息類別 18 Title nvarchar 50 是 標(biāo)題 DetailContent nvarchar 4000 是 詳細(xì)內(nèi)容 Author nvarchar 20 是 作者 ComeFrom nvarchar 50 是 信息來源 Time nvarchar 20 是 發(fā)布時(shí)間 該表主要記錄公司招聘的職位、工資等，其結(jié)構(gòu)如表 5 所示： 表 5 Job_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 ID bigint 8 否 主鍵 Job nvarchar 20 是 職位 Company nvarchar 50 是 公司 WorkPlace nvarchar 50 是 工作地點(diǎn) Wage nvarchar 20 是 工資 Number nvarchar 10 是 招聘人數(shù) EffectTime nvarchar 50 是 有效時(shí)間 JobDes nvarchar 20 是 職位描述 JobReq nvarchar 50 是 職位要求 AcademicReq nvarchar 50 是 學(xué)歷要求 ExperienceReq nvarchar 50 是 經(jīng)驗(yàn)要求 6．應(yīng)聘者信息表 該表主要記錄應(yīng)聘者的詳細(xì)信息，入姓名、性別、出生日期、工作經(jīng)驗(yàn)等，好讓后臺(tái)人員對(duì)其進(jìn)行篩選，其結(jié)構(gòu)如表 6 所示： 表 6 Candidates_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 19 ID bigint 8 否 主鍵 CJob nvarchar 20 是 職位 Name nvarchar 20 是 姓名 Sex nvarchar 10 是 性別 Birthday nvarchar 20 是 出生日期 IsMarry nvarchar 10 是 婚否 CNational nvarchar 10 是 民族 Address nvarchar 50 是 地址 Account nvarchar 50 是 戶口所在地 CEmail nvarchar 50 是 電子郵箱 Telephone nvarchar 50 是 移動(dòng)電話 MailingAddress nvarchar 50 是 通信地址 Education nvarchar 200 是 教育情況 WorkExp nvarchar 200 是 工作經(jīng)驗(yàn) Other nvarchar 200 是 其他 這個(gè)表主要存儲(chǔ)公司產(chǎn)品的詳細(xì)內(nèi)容，其結(jié)構(gòu)如圖表 7 所示： 表 7 GoldenProduct_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 ID bigint 8 否 主鍵 ProductName nvarchar 50 是 商品名 About nvarchar 50 是 類別 Introduce nvarchar 4000 是 詳細(xì)內(nèi)容 TaoBaoURL nvarchar 200 是 淘寶鏈接 Time nvarchar 20 是 發(fā)布時(shí)間 20 公司會(huì)定期發(fā)布軟件的補(bǔ)丁，因此要做一個(gè)具有下載功能的模塊，點(diǎn)金下載表存儲(chǔ)了文件的下載路徑等，其結(jié)構(gòu)如表 8 所示： 表 8 GoldenDownload_tb 表 字段 名 數(shù)據(jù)類型 長(zhǎng)度 是否允許為空 字段說明 ID bigint 8 否 主鍵 About nvarchar 20 是 類別 Title nvarchar 50 是 標(biāo)題 DetailContent nvarchar 4000 是 詳細(xì)內(nèi)容 ComeFrom nvarchar 50 是 來源 Author nvarchar 10 是 作者 Time nvarchar 20 是 發(fā)布時(shí)間 DownloadURL nvarchar 100 是 下載地址 DownloadTimes bigint 8 是 下載次數(shù) 9 總結(jié) 經(jīng)驗(yàn)總結(jié) 由于平時(shí)練習(xí)都是局限于本 地制作，本地測(cè)試，而且所有構(gòu)思都是自己設(shè)計(jì)和策劃的。但這次是負(fù)責(zé)公司的網(wǎng)站設(shè)計(jì)，所有步驟都要嚴(yán)格按照公司的規(guī)定來設(shè)計(jì)，至此要詳細(xì)地了解公司所需的模塊和功能。 在設(shè)計(jì)過程中，我也遇到過許多問題，通過跟同事的溝通和在 Q 群里面請(qǐng)教，問題在自我探索中得到解決。在技術(shù)上，對(duì) Vistual Studio、 Photoshop 等軟件應(yīng)用能力有了很大程度的提高。 在此對(duì)網(wǎng)頁(yè)的界面設(shè)計(jì)做以下總結(jié)： 一、網(wǎng)頁(yè) 友好化 一個(gè)網(wǎng)站的友好主要體現(xiàn)在界面的簡(jiǎn)潔，色彩要柔和，能夠讓用戶一進(jìn)入該網(wǎng)站就能找到自己需要的信息。 由于一開始未 經(jīng)過嚴(yán)密的排版，因此導(dǎo)致在做網(wǎng)站的時(shí)候排版出現(xiàn)了錯(cuò)誤。由于瀏覽器對(duì) Div+CSS[11]的排版方式還不是很兼容，因此用了 table+CSS21 來排版，但 table 有本身的缺陷，因?yàn)?table 在瀏覽器中是整個(gè)下載完后才在瀏覽器中呈現(xiàn)，純文字還影響不大，但對(duì)于圖片來說就會(huì)有很大的差別，會(huì)令用戶的體現(xiàn)不是很好。從中我學(xué)會(huì)了，用于顯示圖片的時(shí)候就用 Div，文字的時(shí)候就用 table，畢竟 table 排版要來的容易。 二、 網(wǎng)頁(yè)清晰化 個(gè)人認(rèn)為網(wǎng)頁(yè)清晰化主要體現(xiàn)在兩個(gè)方面，一是網(wǎng)頁(yè)色彩不要過于復(fù)雜，最好就簡(jiǎn)單一點(diǎn)，因?yàn)?網(wǎng)頁(yè)的色彩過于強(qiáng)烈的話會(huì)令瀏覽者眼花繚亂；二是要有明確的導(dǎo)航條，這樣就能夠使瀏覽者無論瀏覽到那個(gè)頁(yè)面都可以清楚地知道自己的位置。 遇到的問題和不足 大學(xué)四年期間本人做了許多的課程設(shè)計(jì)，特別大三以后，由于本人接觸了 .NET，覺得 .NET 的開發(fā)環(huán)境十分簡(jiǎn)單，只要有點(diǎn)編程基礎(chǔ)的人都很快上手。雖然平日自己在宿舍經(jīng)常練習(xí)編程，但這次畢業(yè)設(shè)計(jì)還是遇到了不少困難。 首先是溝通上的問題，因?yàn)檫@次是應(yīng)瑞富信息咨詢有限公司的要求，做一個(gè)以介紹公司產(chǎn)品為主的網(wǎng)站。瑞富信息咨詢有限公司內(nèi)部沒有一個(gè)人懂得搞網(wǎng)站的，所以溝通起來比較困難，有時(shí)候做好了整個(gè)程序，放到網(wǎng)上后才通知要修改，正是由于大家溝通不夠，所以才導(dǎo)致工作不斷重復(fù)。 其次，就是在做購(gòu)物車模塊的時(shí)候，要設(shè)計(jì)一個(gè)合適的表，能夠清楚地表達(dá)客戶購(gòu)買商品的情況。針對(duì)這個(gè)問題，我設(shè)計(jì)了幾個(gè)方案，但最后還是采用了以下這個(gè)：當(dāng)用戶把商品放到購(gòu)物車后還要確認(rèn)購(gòu)買，確認(rèn)購(gòu)買后就進(jìn)入“已購(gòu)買，未發(fā)貨”階段，后臺(tái)看到該信息后就進(jìn)行發(fā)貨