靜態(tài)網(wǎng)頁設(shè)計會出現(xiàn)的問題

第頁靜態(tài)網(wǎng)頁設(shè)計會出現(xiàn)的問題靜態(tài)〔網(wǎng)頁〔制定〕〕會出現(xiàn)的問題

在靜態(tài)網(wǎng)頁的制定過程中，文件的存放會常常出現(xiàn)問題，很多制定者在網(wǎng)頁中插入了相應(yīng)的圖形或圖片文件，這些文件在dreamweaver軟件中可以清楚顯示出來，但是在IE瀏覽器中就無法顯示。下面介紹靜態(tài)網(wǎng)頁制定會出現(xiàn)的問題，希望可以為您帶來幫助。

靜態(tài)網(wǎng)頁制定出現(xiàn)的問題

1、存放文件問題

在靜態(tài)網(wǎng)頁的制定過程中，文件的存放會常常出現(xiàn)問題。很多制定者在網(wǎng)頁中插入了相應(yīng)的圖形或圖片文件，這些文件在dreamweaver軟件中可以清楚顯示出來，但是在IE瀏覽器中就無法顯示。這樣一來，文件在靜態(tài)網(wǎng)頁中無法顯示，就會造成制定工作出現(xiàn)嚴(yán)重的漏洞，關(guān)于靜態(tài)網(wǎng)頁的合理制定有阻礙作用。靜態(tài)網(wǎng)頁缺少文件，就不是完整的網(wǎng)頁制定。

2、依賴、亂用Flash動畫

在靜態(tài)網(wǎng)頁的制定工作中，F(xiàn)lash動畫的應(yīng)用目前變得越來越廣泛。Flash動畫自身的體積相對較小，具有很好的視覺效果，能加強靜態(tài)網(wǎng)頁的動態(tài)性和直觀性，具有很強的應(yīng)用價值。但是，很多制定人員在靜態(tài)網(wǎng)頁的制定中關(guān)于Flash動畫的熟悉程度不夠，在應(yīng)用的時候?qū)ζ溥^分依賴。這樣，不僅不會提升靜態(tài)網(wǎng)頁制定的整體質(zhì)量，反而會使Flash動畫對靜態(tài)網(wǎng)頁產(chǎn)生一定的負(fù)面影響。

3、內(nèi)頁制定雜亂無序

一些網(wǎng)頁制定師由于自身素養(yǎng)不夠高，關(guān)于靜態(tài)網(wǎng)頁制定工作的熟悉程度不夠，導(dǎo)致靜態(tài)網(wǎng)頁制定中內(nèi)頁制定出現(xiàn)雜亂無序的狀況。在靜態(tài)網(wǎng)頁制定中，內(nèi)頁制定是最為重要的一個方面，關(guān)于靜態(tài)網(wǎng)頁的整體制定有著不可替代的重要影響。但是，很多制定師在進(jìn)行制定的時候，沒有注意到網(wǎng)頁結(jié)構(gòu)，也沒有對網(wǎng)頁內(nèi)容進(jìn)行合理的編輯，造成結(jié)構(gòu)相對雜亂。此外，一些制定師在制定時沒有注意到網(wǎng)頁的色彩與圖像，使靜態(tài)網(wǎng)頁沒有浮現(xiàn)出整體性和有序性。

如何解決靜態(tài)網(wǎng)頁制定出現(xiàn)的問題?

1、做好文件存放

一些制定師發(fā)現(xiàn)在制定靜態(tài)網(wǎng)頁的時候，網(wǎng)頁編輯器可以顯示的圖形文件在IE瀏覽器中顯示不出來，造成這種現(xiàn)象出現(xiàn)的主要原因就是圖形文件與靜態(tài)網(wǎng)頁的文件沒有在同一個路徑之下進(jìn)行顯示。某網(wǎng)頁制定人員在制定靜態(tài)網(wǎng)頁的過程中發(fā)現(xiàn)圖形文件在IE中無法顯示，便針對這一問題進(jìn)行針對性解決。該制定人員發(fā)現(xiàn)在制定靜態(tài)網(wǎng)頁的過程中，會應(yīng)用到相對較多的文件類型，主要的有.avi文件、.htm文件、.gif文件等。該制定人員發(fā)現(xiàn)，這些文件如果沒有進(jìn)行合理的存放，就會出現(xiàn)一定的問題與漏洞。該制定師針對這一現(xiàn)象建立了一個根文件夾，制定師將制定靜態(tài)網(wǎng)頁過程中應(yīng)用的子文件都存放在這個根文件夾中。這樣一來，所有文件在相應(yīng)的代碼中就能以合適的路徑進(jìn)行儲存，該制定師這樣做不僅方便〔管理〕和存放這些文件，還可以確保文件從網(wǎng)頁編輯器移植到IE的時候，可以很好地體現(xiàn)出來。該制定師這樣做，有效解決了靜態(tài)網(wǎng)頁制定中文件存放的問題。

2、合理應(yīng)用Flash動畫

Flash動畫應(yīng)用于靜態(tài)網(wǎng)頁的制定工作中，具有較好的應(yīng)用效果，可以加強靜態(tài)網(wǎng)頁的動態(tài)效果，吸引網(wǎng)絡(luò)用戶。但是，在制定靜態(tài)網(wǎng)頁的過程中，不能過分使用Flash動畫。如果靜態(tài)網(wǎng)頁在制定中應(yīng)用了較多的Flash動畫，有用性并不會得到相應(yīng)加強，還會使用戶的網(wǎng)頁瀏覽速度變慢。某網(wǎng)頁制定師在制定靜態(tài)網(wǎng)頁的時候，為了合理應(yīng)用Flash動畫且不拖慢用戶的網(wǎng)頁速度，沒有在靜態(tài)網(wǎng)頁的導(dǎo)航條位置應(yīng)用Flash動畫，而是將Flash動畫應(yīng)用在其它位置。這樣一來，用戶在瀏覽網(wǎng)頁的過程中不僅沒有感到速度變慢，反而感覺靜態(tài)網(wǎng)頁有了一定動態(tài)性。該制定師在應(yīng)用Flash動畫的時候，還注重命名的正確性，沒有將文件名設(shè)置為中文，而是以數(shù)字、字母形式命名。這樣，就很好地確保了Flash動畫的應(yīng)用效果。

3、確保內(nèi)頁制定一致性

在制定靜態(tài)網(wǎng)頁的過程中，為了避免內(nèi)頁制定工作出現(xiàn)雜亂無序的狀況，一定要確保內(nèi)頁制定的一致性。在進(jìn)行靜態(tài)網(wǎng)頁內(nèi)頁布局的時候，要將文字的排版、導(dǎo)航條的設(shè)置及圖片位置等進(jìn)行統(tǒng)一制定。在內(nèi)頁制定中，制定師可以在內(nèi)頁部分融入網(wǎng)站的名稱、標(biāo)志、導(dǎo)航形式等。這些內(nèi)容的設(shè)置和應(yīng)用，不僅能確保內(nèi)頁制定的一致性，還能提升靜態(tài)網(wǎng)頁制定工作的具體效率，關(guān)于網(wǎng)頁日后的應(yīng)用與維護(hù)都有一定的重要意義。確保內(nèi)頁制定工作的一致性，還要注重靜態(tài)網(wǎng)頁相應(yīng)色彩的具體使用。靜態(tài)網(wǎng)頁在制定中應(yīng)用具有一定特色的色彩，可以確保內(nèi)頁制定的一致性，滿足用戶的更高必須求。用戶通過靜態(tài)網(wǎng)頁內(nèi)部的色彩，可以加深對網(wǎng)頁的印象與熟悉，還能提升靜態(tài)網(wǎng)頁的應(yīng)用效果。因此，制定師在制定靜態(tài)網(wǎng)頁的過程中可以應(yīng)用網(wǎng)頁色彩。在選擇色彩的時候，可以選擇一種主要色彩，并選擇幾種次要色彩進(jìn)行輔助制定，來強化色彩的應(yīng)用效果。

網(wǎng)頁制定的應(yīng)注意哪些問題

不要在網(wǎng)頁上使用太多不同的字體

您的計算機中可能下載有1000個以上的字體，但是當(dāng)這些字體大量同時浮現(xiàn)在網(wǎng)頁中時，你制定的網(wǎng)頁不僅不會給人留下深入的印象，相反會讓人感到厭惡。因為大量、無規(guī)則的字體樣式不僅會讓網(wǎng)站訪問者感到閱讀困難，它還會讓你的網(wǎng)站俗不可耐。

不要在襯線和無襯線字體間切換多次

頻繁穿插襯線和無襯線字體對你的網(wǎng)頁弊大于利?？勺x性是你制定網(wǎng)頁時首先要合計的問題。無論你的網(wǎng)站制定得多么絢麗，如果訪問者無法容易的讀取網(wǎng)頁上的內(nèi)容，他們一定會走。

不要忽視使用大字體的訪問群體

年齡較大的網(wǎng)民可能會調(diào)整瀏覽器中網(wǎng)頁顯示字體的大小，所以你的網(wǎng)頁無論采納何種默認(rèn)字體，它都可能無法顯示成正常模式;此時，網(wǎng)頁的頁眉、頁腳或者其它元素可能會受頁面字體擴大的影響被折斷成兩行甚至多行，從而造成整個頁面錯亂。因此，在網(wǎng)站制作的時候如果沒有合計到字體擴大因素的影響，會造成很多錯誤。

不要為大字體使用無襯線字體

無襯線字體有著整齊的、統(tǒng)一的外觀。但是當(dāng)你的網(wǎng)頁中存在大字體(10磅以上)時，襯線字體比筆直劃一的無襯線字體更能帶給訪問者更好的閱讀感受，因為襯線字體會讓大字體的曲線和形狀更加圓滑，讓瀏覽者的眼睛更舒適。

不要過分強調(diào)你的文字

一個好的作家可以通過語氣來強調(diào)他想要表達(dá)的意思，而不是單純地在語句中使用粗體、斜體或下劃線。如果你的網(wǎng)頁中充斥著大量的粗體、斜體和下劃線，你必須要重新合計網(wǎng)頁的制定。利用代碼來強調(diào)詞匯可不是一個尊重用戶體驗的好辦法。

不要忘記利用CSS代碼中的字體棧

由于Windows7的普及，很多制定師在制定網(wǎng)頁的時候往往喜愛用微軟雅黑字體，但是很多Windowsxp的用戶還是采納系統(tǒng)中的默認(rèn)字體宋體，這就造成微軟雅黑字體不能正確的顯示。因此，在CSS中設(shè)定字體棧樣式是最好的解決方式。

CSS代碼設(shè)置成如下形式：font:微軟雅黑,宋體,sans-serif。其含義是，優(yōu)先將網(wǎng)頁字體顯示為微軟雅黑;如果訪問者的計算機中不存在微軟雅黑，那么將網(wǎng)頁字體顯示為宋體;如果由于某種原因訪問者的計算機中連宋體都無法使用，那么網(wǎng)頁字體就采納無襯線字體。

網(wǎng)頁美學(xué)、網(wǎng)頁排版、網(wǎng)站內(nèi)容是一個網(wǎng)站的三個重要方面，忽視任何一方都會導(dǎo)致網(wǎng)站暗淡無色。

網(wǎng)頁制定中對齊原則有哪些作用

制定有一些原則是共通的，不管是產(chǎn)品制定、〔平面制定〕、還是服裝制定，制定的形式美法則都是通用的。今天跟大家分享對齊原則在網(wǎng)頁當(dāng)中的運用。對齊，是很重要卻很容易被遺忘的一點。有四大原則：對比、重復(fù)、對齊、和親密性。書中提出：任何東西都不能在頁面上隨意擺放，每個元素都應(yīng)當(dāng)與頁面上的另一個元素有著某種視覺聯(lián)系。這樣能建立一種清楚、精巧而且清爽的外觀。那就開始今天的網(wǎng)頁制定中對齊原則課程之旅。

視覺上遵從堅持尺寸和邊緣的一致性。

對齊可以讓一個網(wǎng)站頁面看起來比較規(guī)范整齊。對齊一般有三種方式：左對齊、居中對齊、右對齊。

在網(wǎng)頁當(dāng)中運用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差，所以出現(xiàn)的頻率不高，小部分的出現(xiàn)還是有的。不管是哪種方式的對齊，網(wǎng)頁中對齊后的文本一定要合計可讀性的問題，千萬不要本末倒置。

對齊在網(wǎng)頁中的運用無非還是上面那三種對齊方式，正常狀況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區(qū)塊布局的對齊。

1、元素對齊

元素的對齊指的是網(wǎng)頁中的一些按鈕、圖標(biāo)、搜索框等網(wǎng)頁中的元素統(tǒng)一采納一種對齊方式對齊。

用主頁來舉例，可以看到圖標(biāo)部分都是居左對齊的，元素上的對齊分布讓整個界面看起來整齊簡潔，內(nèi)容劃分也變得比較明確，可讀性強，方便瀏覽者瀏覽。

一個網(wǎng)頁當(dāng)中，會有很多元素，而元素的對齊可以讓整個界面變得井然有序，元素過于隨意擺放沒有規(guī)律，會讓界面雜亂無章。

2、文字的對齊

文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現(xiàn)在文章詳情的標(biāo)題部分，右對齊文字出現(xiàn)的頻率小一點，不會以大篇幅出現(xiàn)，大部分在登陸注冊或是產(chǎn)品詳情界面中常見。

左對齊的方式合適人們的閱讀習(xí)慣，在網(wǎng)頁中也比較常見，這里不多講了。

居中對齊是進(jìn)幾年隨著html5流行起來，越來越多制定師用居中對齊作為一些區(qū)塊內(nèi)容展示的方式。

可以看到，蘋果官網(wǎng)在產(chǎn)品介紹頁面，文字用得比較多的是這種居中對齊。這樣的對齊方式有個好處就是讓瀏覽者的視線集中在該區(qū)塊內(nèi)容上，其次從樣式上的不對稱感可以增加界面的層次感和制定感。但是文字居中對齊不適用于文字內(nèi)容太多的區(qū)塊。

右對齊常見到的是在一些小的細(xì)節(jié)中，比如登陸注冊界面、底部導(dǎo)航區(qū)塊等，仔細(xì)看看還是可以發(fā)現(xiàn)有一些地方用到了右對齊。

3、圖片的對齊

圖片對齊也不外乎上面說的三種方式，圖片對齊好處理一些，主要依據(jù)網(wǎng)頁想表達(dá)的內(nèi)容去做對齊，以達(dá)到好的視覺展示效果。所以在不同的狀況下，可以采納不同的對齊方式。

4、區(qū)塊布局的對齊

上面講的小元素對齊重要，那大的區(qū)塊對齊也很重要。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應(yīng)的內(nèi)容。小元素不對齊會顯得亂，大區(qū)塊不對齊會讓整個界面沒有秩序感。

說到區(qū)塊的對齊，不得不提的柵格系統(tǒng)，柵格系統(tǒng)可以讓一個網(wǎng)站看起來有秩序感。很多人不喜愛柵格系統(tǒng)，覺得限制他們自己的創(chuàng)意。

事實上，柵格的運用可以很靈活，分多少欄全看制定師的制定。

因此可見，對齊也是有層次的，不同層次內(nèi)容可以采納不同的對齊方式。

對齊相比較之前的其他制定原則來說，會比較簡單也好理解，但是在具體的施行過程中，還必須要制定師們?nèi)ニ妓骱椭贫āR，不僅可以在信息層級上一致，而且會更有氣勢。

總之，在做網(wǎng)站的時候要以內(nèi)容為主旨，界面制定一定是要方便用戶快速找到他們想要的。其次使用正確的對齊方式，讓界面更為整齊，信息更為明確。

單頁面網(wǎng)站制定的技巧

1.將內(nèi)容分割成小塊

當(dāng)你只有一個頁面來展示你的故事的時候，不要讓用戶淹沒在大量信息中就顯得至關(guān)重要了。不要害怕使用折疊和多區(qū)域顯示內(nèi)容。讓信息和媒體元素從頭至尾地堅持簡潔凝練。更重要的是，單網(wǎng)頁的內(nèi)容應(yīng)該有邏輯連續(xù)性和一定的順序(發(fā)生的事件--原因--怎樣發(fā)展的--地點--時間)

另一個讓用戶遵從你的引導(dǎo)的方法就是同時使用圖片視覺和文本內(nèi)容。講故事是一種強有力的傳遞內(nèi)容的方式，同時也是內(nèi)容營銷的趨勢。它將平凡小事融入到信息中，使其更加貼近用戶的生活。這可不代表你必須要雇傭一個小說家。只必須要多注意內(nèi)容的情態(tài)表達(dá)以及嘗試將東西寫得更人性化。

2.為快速訪問制定非傳統(tǒng)的導(dǎo)航

單網(wǎng)頁通常只有滾動，有時甚至是無止盡的滾動。就像潛入了深邃的海洋，不知道你會走多遠(yuǎn)。堅持用戶有跡可循的安全性：將滾動和傳統(tǒng)的導(dǎo)航系統(tǒng)結(jié)合起來。普遍的做法是在頁面頂部設(shè)置固定的導(dǎo)航條，不管滾動多久它都堅持在頂端。這種方式也增加了易用性。固定導(dǎo)航條相比傳統(tǒng)的面包屑導(dǎo)航更具有可視性和交互性。

如果你的單網(wǎng)頁站點很長，那么擁有"回到頂部'按鈕和垂直滾動條就變得很有意義，它可以讓用戶快速回到頂端和訪問網(wǎng)頁的其他區(qū)域。

3.激烈的行動引導(dǎo)

如果你問一個數(shù)字營銷商人在轉(zhuǎn)換中最有影響力的因素是什么，答案幾乎可以確定就是行動引導(dǎo)。好的行動引導(dǎo)不能說完成全部工作，也至少完成了一半的工作。我敢說所有為了特定目標(biāo)而制定的網(wǎng)站都適用這個原則，不管是移動應(yīng)用下載，訂單簽訂，演示請求，郵箱注冊或者更簡單的聯(lián)系方式的提交。無論什么目的，行動引導(dǎo)的質(zhì)量決定機遇。

單網(wǎng)頁成為制定焦點使其在行動引導(dǎo)方面做得更好。在單網(wǎng)頁中，少量的文本和多媒體元素不會使用戶脫離主要目標(biāo)。同時，通過優(yōu)良的表達(dá)引導(dǎo)用戶瀏覽網(wǎng)頁一直到重點信息區(qū)域，在那應(yīng)放上激烈的行動引導(dǎo)標(biāo)識。

再強調(diào)一次，安排一些A/B測試來決定哪種引導(dǎo)才是最合適網(wǎng)站的，因為有時候微小的改變，如：顏色、位置、措辭都會帶來意想不到的變化。

4.堅持簡單，不是單調(diào)

傳統(tǒng)的多頁面網(wǎng)站很美麗是因為它有一個制定主題以及很多可用的內(nèi)頁面模版。制定單頁面站點更具有挑戰(zhàn)性同時有更多創(chuàng)造性的空間。隨著近期CSS3，HTML5和Javascript的發(fā)展，使開發(fā)簡單但吸引人的網(wǎng)站擁有了無限的可能性。添加一些小動