張琪　李晢

【摘 要】隨著網(wǎng)絡(luò)技術(shù)的發(fā)展和經(jīng)濟(jì)發(fā)展的需要，國內(nèi)的大中小醫(yī)院都開始逐步建立自己的企業(yè)網(wǎng)頁，網(wǎng)頁的開發(fā)不僅是適應(yīng)社會生產(chǎn)開發(fā)的需要，在電子商務(wù)飛速發(fā)展的現(xiàn)代，網(wǎng)頁對于擴(kuò)大市場，產(chǎn)品的展示宣傳，企業(yè)信息發(fā)布管理，員工管理等許多的方面都有十分重要的作用。本人瀏覽了許多的醫(yī)院網(wǎng)站，發(fā)現(xiàn)在設(shè)計過程發(fā)現(xiàn)這些網(wǎng)站雖然風(fēng)格樣式雖然不同，但是結(jié)構(gòu)布局上都是相似的，本文就國內(nèi)醫(yī)院網(wǎng)頁的建設(shè)實例進(jìn)行分析，總結(jié)出通用的網(wǎng)頁板塊布局設(shè)計思路。

【關(guān)鍵詞】網(wǎng)頁；實例分析；板塊布局；風(fēng)格樣式

0 前言

由于互聯(lián)網(wǎng)技術(shù)的飛躍發(fā)展，web前端設(shè)計成為了一個十分熱門的技術(shù)，我們都知道網(wǎng)站的建設(shè)對醫(yī)療企業(yè)的重要性，但是在實際的建站過程中由于疏忽導(dǎo)致了許多的網(wǎng)站產(chǎn)生了一些缺漏，由此導(dǎo)致使用產(chǎn)生許多的不便。我希望能在眾多款式風(fēng)格多樣的醫(yī)療企業(yè)網(wǎng)站中完成一個調(diào)查匯總，以此對相關(guān)設(shè)計人員在完成設(shè)計項目時候提供設(shè)計資料。

1 網(wǎng)站建設(shè)的必要性和目的

在這個互聯(lián)網(wǎng)飛速發(fā)展的時代，一個單位要是想做大做強(qiáng)，沒有互聯(lián)網(wǎng)技術(shù)的支持和宣傳是不行的，網(wǎng)站作為代表企業(yè)單位的宣傳門面，對企業(yè)的重要性不言而喻。利用網(wǎng)站不僅可以更好的展示醫(yī)療單位的形象，介紹單位提供的產(chǎn)品和服務(wù)，還可以提高單位認(rèn)知度和品牌知名度，發(fā)布內(nèi)容新聞、服務(wù)動態(tài)、最新的醫(yī)療信息，接受在線掛號，拓展信息渠道，接受在線咨詢，完善售后服務(wù)進(jìn)行網(wǎng)上招聘，吸引更多人才。但是在設(shè)計上如果不按照一定的設(shè)計邏輯來建立網(wǎng)站，設(shè)計出來的網(wǎng)站往往不能滿足客戶的需求，或者給用戶帶來不便。為了完善單位的網(wǎng)絡(luò)信息，設(shè)計一個獨(dú)有的單位網(wǎng)站就被提到了他們的計劃中來。

2 網(wǎng)頁板塊布局樣式

2.1 主頁的版塊風(fēng)格

我們平時在上網(wǎng)時經(jīng)常瀏覽過各種各樣的網(wǎng)站，由于網(wǎng)頁設(shè)計目的不盡相同，所以我們看到的風(fēng)格也是大不一樣，在瀏覽一些以電子商務(wù)類的網(wǎng)站時，比如淘寶網(wǎng)、天貓商城、亞馬遜網(wǎng)上書店，由于它們的目標(biāo)就是以網(wǎng)絡(luò)銷售，我們看到的網(wǎng)頁往往充滿了大量的展示類信息，這些網(wǎng)頁的風(fēng)格在這些銷售類網(wǎng)站上往往充滿回力，鮮艷跳躍。從用戶心理上來說，跳躍性的色彩和活躍的網(wǎng)站風(fēng)格往往可以調(diào)動用戶的興奮情緒，加上網(wǎng)頁中許多的動畫特效，往往讓消費(fèi)者被灌輸一種不自覺的購買欲望。

企業(yè)的網(wǎng)站除了這類銷售類網(wǎng)站還有一部分網(wǎng)頁是為大型企業(yè)而建造，這些網(wǎng)站的主要目的是為了發(fā)布內(nèi)部信息和對外的信息交流及其員工管理。大型醫(yī)院的網(wǎng)頁就是一個典型的代表。醫(yī)院的網(wǎng)頁主頁設(shè)計風(fēng)格往往以清新干凈，安全舒適的感覺設(shè)計，在色彩風(fēng)格上往往是以綠色，藍(lán)色或者白色作為底色，這三個色彩往往是醫(yī)院的常用色，而且色彩也是象征著純凈健康。我們平時所見到的大型醫(yī)院網(wǎng)站基本很少見到那些煩人的漂浮廣告，每一條網(wǎng)頁信息都是那么的清楚明了，在字體設(shè)計上，很少帶有花哨的藝術(shù)字，采用往往都是易于識別的宋體。[1]

2.2 網(wǎng)頁的table布局和div/css樣式表在主頁設(shè)計上的使用

說起網(wǎng)頁的布局，就不得不說起table和div布局，在很久以前，設(shè)計師都是采用table進(jìn)行網(wǎng)頁設(shè)計，由于html文件中的table標(biāo)簽的瀏覽速度較慢，所以，使用嵌套表格的方法來布局網(wǎng)頁框架會使網(wǎng)頁瀏覽的速度變慢。因為table是中的內(nèi)容是自適應(yīng)的，為了自適應(yīng)，它要計算嵌套最深的節(jié)點(diǎn)以滿足自適應(yīng)，所以有可能會有一斷時間出現(xiàn)空白才顯示。所以是會有問題的。

正是由于這些缺點(diǎn)，后來人們開始采用div布局，div布局可以通過css樣式給框架進(jìn)行功能強(qiáng)大的屬性設(shè)置以及給網(wǎng)頁的局部進(jìn)行任意的定位，制作出來的頁面瀏覽速度較快，同時頁面的風(fēng)格可以通過修改單獨(dú)的css文件進(jìn)行隨意的修改和更新；但是每個div容器都需要定義css樣式來控制，制作過程相比table方式要復(fù)雜?，F(xiàn)在的網(wǎng)頁越來越傾向于使用DIV的方法來布局網(wǎng)頁了。在醫(yī)院主頁網(wǎng)頁的開發(fā)上，現(xiàn)在往往都是采用div進(jìn)行網(wǎng)頁布局，但是在一些界面，有時也需要表格完成一些數(shù)據(jù)的展示。[2]

2.3 企業(yè)文化的結(jié)合和logo在網(wǎng)頁上的應(yīng)用

我們都知道企業(yè)文化對任何一個單位都是十分的重要，醫(yī)院網(wǎng)頁的主頁作為宣傳的門面，對于那些未曾到過醫(yī)院的網(wǎng)頁瀏覽用戶，主頁頭部往往會代表著這些醫(yī)院的企業(yè)形象。在實際的醫(yī)院主頁中，頂部或者左上部分，就是醫(yī)院的logo和醫(yī)院名稱，實際的代碼操作過程中，有的網(wǎng)站主頁是把這一部分放入頁面的背景圖片中，還有的是單獨(dú)作出div。

主頁的的上部，即用戶打開頁面看到的無需滾動條下拉的那一部分是首頁展示的關(guān)鍵，醫(yī)院的動態(tài)圖片展示就放在這一部分，動態(tài)展示的照片往往包括醫(yī)院風(fēng)景，新聞信息，內(nèi)部活動等，良好的展示信息往往可以體現(xiàn)出醫(yī)院過硬的醫(yī)療水平和和諧的環(huán)境氛圍。

3 醫(yī)院主頁的布局版塊設(shè)計

3.1 頭部導(dǎo)航欄，搜索欄，頁腳

導(dǎo)航欄是一個網(wǎng)站的地圖，訪客可以通過導(dǎo)航縱觀整個網(wǎng)站的概況，并且方便他們快速到達(dá)想要了解的地方。從尺寸上來說，導(dǎo)航欄的的寬度往往是在800左右，它的寬度往往代表了整個網(wǎng)站網(wǎng)頁的寬度，導(dǎo)航欄的位置往往是在網(wǎng)站首頁logo下或者搜索欄下，上下的高度不宜太高，和設(shè)計的字體大小匹配就可以，醫(yī)院主頁導(dǎo)航欄包含的內(nèi)容條目往往包含很多，經(jīng)過我的分析主要包含以下項目：醫(yī)院概況，新聞動態(tài)，科室導(dǎo)航，醫(yī)師介紹，科研教學(xué)，服務(wù)指南，人才招聘，黨風(fēng)建設(shè)等。導(dǎo)航欄的色彩風(fēng)格也是遵循簡單清晰的原則進(jìn)行設(shè)計，還有一點(diǎn)需要注意的是導(dǎo)航欄的色彩必須要和背景的色彩相互搭配，每個文字鏈接在點(diǎn)擊后不應(yīng)該發(fā)生變色，不應(yīng)該出現(xiàn)下劃線。[3]

搜索欄在醫(yī)院網(wǎng)站的任務(wù)主要是查詢整個網(wǎng)站的信息，不僅包括醫(yī)師信息，新聞信息，還包括通知公告等。搜索欄的使用從用戶的角度考慮應(yīng)該設(shè)計在導(dǎo)航欄的上面或者下面，這樣的安排利于用戶配合導(dǎo)航欄的信息進(jìn)行檢索，完成信息目標(biāo)的查找，同時在設(shè)計檢索按鈕的時候，按鈕的色彩風(fēng)格也應(yīng)該保持整個頁面的風(fēng)格。

頁腳的功能是為了表明網(wǎng)頁的許可信息及其醫(yī)院的聯(lián)系方式，雖然導(dǎo)航欄已經(jīng)有了鏈接，但是為了設(shè)計規(guī)則的需要，大多數(shù)的醫(yī)院主頁網(wǎng)頁都是在頁腳標(biāo)明相關(guān)聯(lián)系信息。主要包括的信息如下：地址，郵編，電話，傳真，E-mail，許可證號。頁腳還可能含有微信二維碼，新浪微博等官方博客信息。

3.2 主頁主干版塊的構(gòu)建

我們在導(dǎo)航欄之后往往就是主頁的主干信息部分了，在這里包含的內(nèi)容很多，但是這眾多版塊卻是主頁導(dǎo)航欄的提煉[4]，他們一個個展示的都是最近更新的信息或者展示的是最重要的信息。接下來我們把主頁的信息區(qū)域分為以下三個部分。

（1）公告區(qū)：這部分的目的是為了單位發(fā)布信息公告，利于內(nèi)部人員的交流。從利于用戶使用的方面考慮，新聞公告和醫(yī)院動態(tài)往往是最主要的展示信息，在旁邊我們一般都會加上視頻展示部分作為補(bǔ)充。從代碼上來說，設(shè)計人員可以按照每個版塊的不同把這個主干劃分出不同的