網(wǎng)站建設(shè)之頁面設(shè)計技巧

發(fā)布日期：[2013/9/21] 編輯：奇億廣州網(wǎng)站建設(shè)

　　在網(wǎng)站建設(shè)的過程中我們會遇到很多問題，我們也會去解決各類問題。無論是網(wǎng)站設(shè)計還是代碼編寫。今天針對網(wǎng)站建設(shè)過程中我們會遇到的一些小問題，并給出一些簡單的解決辦法。

　　Ie6不支持Png格式下的透明。

　　應(yīng)用解析：有不少人都會對LOGO進行透明處理以融入head部分的漸變背景。

　　解決方案：采用JS代碼實現(xiàn)或CSS濾鏡功能，當(dāng)然問題也存在部分，導(dǎo)致圖片質(zhì)成像量不高。

　　小技巧1：將透明的LOGO用高于IE6的瀏覽器打開網(wǎng)頁，然后采用FF的PearlCrescentPageSaver全屏截圖插件截屏。再采用PS或者Fireworks進行裁切LOGO部分。并替換透明背景LOGO。這樣即使是漸變背景也能和LOGO保持一致。

　　小技巧2：布局上頁面與頁面之間存在相同部分，要學(xué)會簡化。當(dāng)兩個頁面有部分板塊相同，最好不要去讓兩個頁面獨立存在，可以將兩個相同部分獨立出來。采用程序調(diào)用共同部分。以減少網(wǎng)頁代碼。

　　小技巧3：網(wǎng)站重要頁面最好有可更新或者可調(diào)用更新內(nèi)容的板塊。以達到日常更新引蜘蛛爬行的目的，原因很簡單，利于網(wǎng)站SEO優(yōu)化。

　　小技巧4：網(wǎng)站要和互聯(lián)網(wǎng)接軌，要跟得上時代，別忘了在網(wǎng)站完成后給網(wǎng)站安裝一個百度分享工具，或者新浪微博，這樣做利于網(wǎng)站推廣。

　　小技巧5：新手設(shè)計網(wǎng)站困難，photoshop水平不高，怎么辦?AXURE讓網(wǎng)站設(shè)計更輕松。很多高端網(wǎng)站設(shè)計師都采用PS對網(wǎng)站進行美化設(shè)計以達到更絢麗的網(wǎng)頁效果，對于新手而言，PS的學(xué)習(xí)無疑是一道門檻。采用Axure并結(jié)合“扁平化設(shè)計”也可以讓新手也能很簡單“拖”出很精致的網(wǎng)頁。

　　小技巧6：Jiasale將小型企業(yè)站變成小型電商平臺，無需注冊直接即可購買產(chǎn)品。針對部分微小型企業(yè)，很多企業(yè)無力承擔(dān)高昂的建站費用，但又希望自己的網(wǎng)站能帶來商機或者達成線上交易，那么龐大的會員管理系統(tǒng)，以及產(chǎn)品訂購功能無疑是一大難題，Jiasale是一款購物按鈕可以讓網(wǎng)站快速實現(xiàn)電子商務(wù),只需要在網(wǎng)站中添加一段代碼,就能輕松實現(xiàn)站中店。(非廣告)。連接支付寶無需注冊，即可購買。對于一些有著線上交易需求的站長而言，還是挺方便的。

　　從網(wǎng)站整體結(jié)構(gòu)方面來說，我們需要先了解一下網(wǎng)站的頁面組成，網(wǎng)站一般包括以下幾部分：

　　首頁：網(wǎng)站的門面，如同公司的形象，特別注重設(shè)計和規(guī)劃。
　　框架頁：網(wǎng)站的主要結(jié)構(gòu)頁面，又稱次首頁、內(nèi)頁，大型網(wǎng)站往往框架頁即首頁，如一些門戶網(wǎng)站。框架頁主要是網(wǎng)站內(nèi)部主要欄目的首頁，講究風(fēng)格的一致性，并于主頁呼應(yīng)。
　　普通頁：網(wǎng)站主要的承載信息的頁面，設(shè)計要求不高，但要求鏈接準(zhǔn)確、文字無誤、圖文并茂，并沿襲網(wǎng)頁的風(fēng)格。
　　彈出頁：一般用于廣告、新聞、消息、到其他網(wǎng)站的鏈接等等，一般用的很少。
　　
　　通過上面的分析，我們可以看出：
　　
　　從功能上來看，首頁主要承擔(dān)著樹立企業(yè)形象（當(dāng)然不僅僅是首頁）的作用，框架頁在導(dǎo)航方面起著重要的作用，比如各欄目內(nèi)部主要內(nèi)容的介紹，都可以在框架頁中體現(xiàn)再進入普通頁，讓瀏覽者能夠迅速了解網(wǎng)站各欄目的主要內(nèi)容，擇其需要而瀏覽，而普通頁則是主要的信息頁面，也是網(wǎng)站的最終頁面，對于大型網(wǎng)站，這種結(jié)構(gòu)非常重要，而對于中小型企業(yè)，網(wǎng)站規(guī)模較小、頁面數(shù)量不多，有時框架頁就起著普通頁的作用，至于彈出頁，建議您不是必要，最好不要用。下面詳細介紹各頁面的設(shè)計技巧：
　　
　　一、首頁設(shè)計技巧
　　網(wǎng)站首頁是企業(yè)網(wǎng)上的虛擬門面，在此，提醒上網(wǎng)的企業(yè)注意自己門面的設(shè)計，決不能敷衍了事、馬馬虎虎。我們會經(jīng)常看到印刷精美的產(chǎn)品目錄或廣告，當(dāng)您屢屢看到那些印有產(chǎn)品目錄或廣告的精美印刷制品的時候，相信您或多或少會對有關(guān)的產(chǎn)品形成一種好感，即使您不會購買，也必然對這些產(chǎn)品形成一定程度的認同。而對于設(shè)計毛糙的宣傳品，您肯定會懷疑其內(nèi)容的真實性，從而對其產(chǎn)品或服務(wù)產(chǎn)生質(zhì)疑。好，現(xiàn)在說說網(wǎng)站的設(shè)計，相信您會同意這種說法：網(wǎng)站的頁面就好比是“無紙的印刷品”。既然如此，我們會因此而得出一個結(jié)論：精良和專業(yè)網(wǎng)站的設(shè)計，如同制作精美的印刷品，會大大刺激消費者（訪問者）的購買欲望，反之，您公司所提供的產(chǎn)品或服務(wù)將不會給消費者（訪問者）留下較好的印象。值得一提的是，除非您的企業(yè)有專業(yè)的網(wǎng)站規(guī)劃、設(shè)計人員，否則您最好找專業(yè)公司或?qū)I(yè)人員為您設(shè)計制作，一個優(yōu)秀的專業(yè)設(shè)計人員會很快明白您的意圖，并根據(jù)您的建站目的提出建設(shè)性的意見。
　　
　　一般來說，網(wǎng)站首頁的形式不外乎有兩種，一種是純粹的形象展示型，這種類型文字信息較少，圖像信息較多，通過藝術(shù)造型和設(shè)計布局，利用一系列與公司形象和產(chǎn)品、服務(wù)有關(guān)的圖像、文字信息，組成一幅生動的畫面，向瀏覽者展示一種形象、一個氛圍，從而吸引瀏覽者進入瀏覽。這需要設(shè)計者具有良好的設(shè)計基礎(chǔ)和審美能力，能夠努力挖掘企業(yè)深層的內(nèi)涵，展示企業(yè)文化。這種類型的首頁在設(shè)計過程中一定要明確要以設(shè)計為主導(dǎo)，通過色彩、布局給訪問者留下深刻的印象，當(dāng)然，我們不能為了設(shè)計而設(shè)計，我們的目的是營銷，在設(shè)計過程中一定要牢記這一點！
　　
　　另一種是信息羅列型，一般的大、中型企業(yè)網(wǎng)站和門戶網(wǎng)站常用的方式，即在首頁中就羅列出網(wǎng)站的主要內(nèi)容分類、重點信息、網(wǎng)站導(dǎo)航、公司信息等等，也就是我們上面談到的框架頁，這種風(fēng)格比較適合網(wǎng)站信息量大，內(nèi)容豐富的網(wǎng)站，因為是以展示信息為主，這是的設(shè)計就要在細微之處體現(xiàn)企業(yè)形象，建議設(shè)計人員最好仔細閱讀企業(yè)的ＣＩ手冊，熟悉企業(yè)標(biāo)志、吉祥物、字體及用色標(biāo)準(zhǔn)，在網(wǎng)站的局部體現(xiàn)出來，往往平淡之中一個優(yōu)美的符合企業(yè)特點的曲線就能夠給人以深刻的印象，從而將企業(yè)形象印在瀏覽者的腦海里。設(shè)計人員在設(shè)計過程中要注意使用這些語言符號來表達一種獨特的企業(yè)信息。

　　二、風(fēng)格保持一致——內(nèi)頁設(shè)計技巧
如何保持網(wǎng)站風(fēng)格的一致，是進行內(nèi)頁設(shè)計過程中考慮的重要方面，根據(jù)我的經(jīng)驗，您可以嘗試以下幾種設(shè)計方式：

　　1、結(jié)構(gòu)的一致性：我們知道，網(wǎng)站的統(tǒng)一性在網(wǎng)站營銷中占重要地位，而網(wǎng)站結(jié)構(gòu)是網(wǎng)站風(fēng)格統(tǒng)一的重要手段，包括網(wǎng)站布局、文字排版、裝飾性元素出現(xiàn)的位置、導(dǎo)航的統(tǒng)一、圖片的位置等等，到國外著名的電子商務(wù)網(wǎng)站瀏覽，你會發(fā)現(xiàn)這些網(wǎng)站結(jié)構(gòu)驚奇的一致性，所不同的是色彩或內(nèi)容，在結(jié)構(gòu)的一致性中，我們要強調(diào)網(wǎng)站標(biāo)志性元素的一致性，即網(wǎng)站或公司名稱、網(wǎng)站或企業(yè)標(biāo)志、導(dǎo)航及輔助導(dǎo)航的形式及位置、公司聯(lián)系信息等，這種方式是目前網(wǎng)站普遍采用的結(jié)構(gòu)，一方面減少設(shè)計、開發(fā)的工作量，同時更有利于以后的網(wǎng)站維護與更新。

　　當(dāng)然相信每個人都有自己的網(wǎng)站建設(shè)方面的技巧。也有自己解決問題的方法。希望這篇文章能帶給大家?guī)椭?/P>