網(wǎng)站設(shè)計(jì)的原則和技術(shù)

馬玲

互聯(lián)網(wǎng)時代的到來，讓越來越多的人們通過網(wǎng)絡(luò)去獲取信息，有的通過網(wǎng)絡(luò)學(xué)習(xí)知識；有的通過網(wǎng)絡(luò)采購自己喜愛的商品；有的通過網(wǎng)絡(luò)來交友聊天，而這些絕大多數(shù)都是通過瀏覽網(wǎng)頁來實(shí)現(xiàn)的。人們已經(jīng)習(xí)慣于應(yīng)用網(wǎng)站平臺來進(jìn)行網(wǎng)絡(luò)的交互。好的網(wǎng)站制作是需要多方面技術(shù)支撐的，由文案設(shè)計(jì)、前臺美工、后臺數(shù)據(jù)互聯(lián)、算法設(shè)計(jì)以及編碼實(shí)現(xiàn)等多項(xiàng)內(nèi)容組成。本文就網(wǎng)站設(shè)計(jì)的原則、常用工具、設(shè)計(jì)技術(shù)以及相關(guān)算法進(jìn)行了研究，進(jìn)行了詳細(xì)闡述。

【關(guān)鍵詞】數(shù)據(jù)庫 網(wǎng)頁美化 服務(wù)器 制作原則

1 網(wǎng)站設(shè)計(jì)的原則

一個成功的網(wǎng)站是多方面的精心設(shè)計(jì)與努力完成的，但是到瀏覽者的面前，這些都如同一個黑匣子，瀏覽者最為關(guān)注的就是網(wǎng)站的內(nèi)容是否吸引他，網(wǎng)站中顯示的網(wǎng)頁是否美觀，觀看是否具有舒適感。網(wǎng)站設(shè)計(jì)中的基本原則標(biāo)準(zhǔn)實(shí)際就是為瀏覽網(wǎng)頁的網(wǎng)絡(luò)用戶提供便捷優(yōu)質(zhì)服務(wù)。

1.1 網(wǎng)頁風(fēng)格統(tǒng)一

這里的網(wǎng)頁風(fēng)格統(tǒng)一主要包含兩層含義，第一種，就是網(wǎng)頁的整體風(fēng)格統(tǒng)一，每個網(wǎng)頁從外觀上，欄目設(shè)計(jì)上有相似之處。當(dāng)然，有個別的一、二個特色網(wǎng)頁，為了起到強(qiáng)調(diào)突出作用，脫離整體風(fēng)格，有時會起到吸引瀏覽者的效果。但是這種突出一定要精心設(shè)計(jì)，一旦失敗，就會給網(wǎng)絡(luò)用戶留下網(wǎng)頁質(zhì)量低劣的印象。第二種，就是網(wǎng)頁的美化風(fēng)格要跟主體統(tǒng)一。舉例來說，京劇的美化風(fēng)格就適合古韻古香，用一些搖滾、重金屬的圖片等素材進(jìn)行美化，就是一種不統(tǒng)一的應(yīng)用。美化過程是為了襯托主體，兩者風(fēng)格統(tǒng)一才讓網(wǎng)頁表現(xiàn)更加協(xié)調(diào)，美觀。

1.2 主題鮮明突出，內(nèi)容翔實(shí)

美麗的網(wǎng)頁吸引的是網(wǎng)絡(luò)用戶第一眼的印象，能夠讓用戶長期使用，長期瀏覽的是不斷更新的用戶們關(guān)注的網(wǎng)站的主要內(nèi)容。所以制作網(wǎng)站之前，一定要準(zhǔn)確定位。網(wǎng)站的方向是什么？是提供大量信息資源的門戶網(wǎng)站，還是側(cè)重于某些專業(yè)知識的論壇，又或許是互動平臺如此等等，不一而足。定位后就要進(jìn)行材料的收集與分類，提供用戶感興趣的專欄。

1.3 網(wǎng)頁設(shè)計(jì)避免過于花哨

長期被網(wǎng)絡(luò)用戶關(guān)注的網(wǎng)站，絕大多數(shù)都并不花哨。這是有一定原因的。吸引大量網(wǎng)絡(luò)用戶，長時間關(guān)注與瀏覽，不可避免的有一個視覺疲勞的問題。如果顏色過亮，設(shè)計(jì)過于花哨，視覺疲勞就會很早發(fā)生，這就會流失大量的瀏覽者。

2 網(wǎng)站、網(wǎng)頁常用設(shè)計(jì)工具簡介

針對簡單的靜態(tài)網(wǎng)頁來說，網(wǎng)頁三劍客是使用最為方便，高效完成完成網(wǎng)頁設(shè)計(jì)的工具。網(wǎng)站設(shè)計(jì)過程中，常常要使用圖片，對圖片進(jìn)行細(xì)致設(shè)計(jì)的常用軟件無疑首選，photshop，它的CS版本還特意推出了網(wǎng)頁制作功能，為網(wǎng)頁制作提供便捷的服務(wù)。但是目前靜態(tài)網(wǎng)頁已經(jīng)不能滿足網(wǎng)站的需求，任何的網(wǎng)站都應(yīng)該實(shí)現(xiàn)數(shù)據(jù)交互的功能。所以后臺數(shù)據(jù)庫管理系統(tǒng)不可或缺，目前使用較多的有Oracle系列、Sql系列、dbase系列等等。值得一提的是針對小型網(wǎng)站，Mysql也是一個不錯的選擇。前臺開發(fā)的高級語言主要有C#、JAVA，當(dāng)然PHP腳本應(yīng)用也占有一定市場份額。特效腳本常見的有javascript、vbscript。

3 網(wǎng)站設(shè)計(jì)的主要模塊

網(wǎng)站設(shè)計(jì)從功能角度出發(fā)，要了解用戶需求，實(shí)現(xiàn)網(wǎng)站平臺的主體功能，實(shí)行網(wǎng)頁的基本框架。要通過高級語言或者腳本語言實(shí)行前臺設(shè)計(jì)，要與數(shù)據(jù)庫合作進(jìn)行數(shù)據(jù)存儲與互聯(lián)，后期要進(jìn)行美工美化過程，讓網(wǎng)頁更加美觀，便于瀏覽給用戶舒適感。要搭建網(wǎng)站需要的服務(wù)器。

4 網(wǎng)站設(shè)計(jì)中的技術(shù)與算法

網(wǎng)站設(shè)計(jì)要通過編碼實(shí)現(xiàn)，針對功能不同的網(wǎng)站要配合相應(yīng)算法實(shí)現(xiàn)，將算法通過代碼進(jìn)行設(shè)計(jì)，完成網(wǎng)站提供的功能。例如，在線測評系統(tǒng)，就會要求對評測的網(wǎng)站平臺提供合理的出卷策略模塊，我們就可能需要使用遺傳算法，進(jìn)行試卷試題難度的控制與試題范圍的覆蓋。再比如網(wǎng)購平臺網(wǎng)站的設(shè)計(jì)，很多平臺通過用戶瀏覽的商品信息，進(jìn)行用戶身份信息以及可能需要的商品信息的分析，從而推薦自身認(rèn)為用戶可能會購買的產(chǎn)品，以增加網(wǎng)站產(chǎn)品銷售量。這就需要在用戶搜索中，進(jìn)行搜索記錄和算法分析，相關(guān)算法較多，這里簡單推薦協(xié)同過濾算法，以及在搜索中判斷重要程度的pagerank算法。

瀏覽器的兼容技術(shù)問題：流的瀏覽器主要包括Firefox、Opera、chrome、IE、safari等，不同的瀏覽器使用的瀏覽器內(nèi)核不一樣，導(dǎo)致不同瀏覽器對網(wǎng)頁的解析不一致，因此導(dǎo)致網(wǎng)頁展示出現(xiàn)差異，例如出現(xiàn)排版不正確、字體大小不一致、圖片展示有差異等，這被稱為“瀏覽器兼容性”因此，網(wǎng)站開發(fā)者不斷研究網(wǎng)頁標(biāo)準(zhǔn)，讓用戶可以在任意瀏覽器中瀏覽同一個頁面達(dá)到一樣的效果。瀏覽器對含小數(shù)值的像素解析不一致。每一個瀏覽器對于含小數(shù)值的像素解析都存在不一致的地方。例如11.8px，F(xiàn)irefox/Google Chrome/Opera/IE8取值為12px；IE6/7/Safari會取值為11px；IE9以上的版本會直接解析為11.8px；在做網(wǎng)頁兼容的時候，要是遇到在IE6/7/safari中設(shè)置文字大小為11px；可以使用該方法，直接把文字大小設(shè)置為11.8就可以達(dá)到目的了。這樣還可以省下一個CSS HACK. PX、EM和REM的使用對網(wǎng)頁版面的影響。PX是絕對單位，而EM是相對單位，在設(shè)置字體大小的時候，最好使用EM；當(dāng)用IE調(diào)整網(wǎng)頁自由縮放的時候，PX不會做出任何的反應(yīng)，而EM則可以隨著頁面的縮放而縮放，默認(rèn)的1em=16px；而EM是相對值，會繼承其父級元素的字體大小，如果全局變量中設(shè)置了“body{font-size：12px；}”；則1em=12px；而REM是一個CSS3新增的一個相對單位，REM就是根EM，REM是相對于HTML的根元素，只要調(diào)整根元素的大小就可以調(diào)整一個頁面的字體大小，并且該屬性IE8以上的版本都可識別，包括其他瀏覽器都能支持。

參考文獻(xiàn)

[1]于群峰.網(wǎng)站設(shè)計(jì)中CSS技術(shù)與PHP技術(shù)探究[J].電子制作，2014.

[2]陳君.基于PHP的在線音樂網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢理工大學(xué)，2012.

[3]李毅.交互式網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[D].北京郵電大學(xué)，2011.

[4]黃志明.購物類網(wǎng)店系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].電子科技大學(xué)，2010.

[5]王浩百.基于PHP和MySQL的辦公室網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[D].吉林大學(xué)，2010.

[6]李金生.基于PHP的博客系統(tǒng)[D].吉林大學(xué)，2009.

[7]張蓓.中學(xué)心理健康教育網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[D].天津師范大學(xué)，2007.

作者單位

黑龍江外國語學(xué)院信息科學(xué)系 黑龍江省哈爾濱市 150025