網(wǎng)頁設計遇到的問題

第頁網(wǎng)頁設計遇到的問題〔網(wǎng)頁〔制定〕〕碰到的問題

CSS樣式表在網(wǎng)頁制作中一般有3種方式的用法，當有多個網(wǎng)頁要用到CSS，采納外聯(lián)CSS文件的方式，這樣網(wǎng)頁的代碼大大減少，修改起來非常方便。下面介紹網(wǎng)頁制定碰到的問題，希望這些內(nèi)容對您有幫助。

一、如何使用3種類型的CSS樣式?

CSS樣式表在網(wǎng)頁制作中一般有3種方式的用法，那么具體在使用時該采納哪種用法呢?當有多個網(wǎng)頁要用到CSS，采納外聯(lián)CSS文件的方式，這樣網(wǎng)頁的代碼大大減少，修改起來非常方便;只在單個網(wǎng)頁中使用的CSS，采納文檔頭部方式;只在一個網(wǎng)頁一兩個地方才用到的CSS，采納行內(nèi)插入方式。

二、關于沖突的CSS樣式

將兩個或更多的CSS樣式應用于同一文本時，這些樣式可能發(fā)生沖突并產(chǎn)生意外的結(jié)果。瀏覽器依據(jù)以下規(guī)則應用樣式屬性;如果將兩種樣式應用于同一文本，瀏覽器顯示這兩種樣式的所有屬性除非特定的屬性發(fā)生沖突。如一種樣式可能將藍色指定為文本顏色，而另一種樣式可能指定紅色作為文本顏色。如果應用于同一文本的兩種樣式的屬性發(fā)生沖突，則瀏覽器顯示最里面的樣式(離文本本身最近的樣式)的屬性。因此，如果外部樣式表和內(nèi)聯(lián)CSS樣式同時影響文本元素，則內(nèi)聯(lián)樣式為其中所應用的那一個。

如果有直接沖突，則CSS樣式(使用class屬性應用的樣式)中的屬性將取代HTML標簽樣式中的屬性。

例如，hl定義的樣式可以指定所有hl段落的字體、大小和顏色，但應用于該段落的自定義CSS樣式.Blue將取代hl樣式中的顏色設置;另一個自定義CSS樣式.Red將取代.Blue，因為它位于.Blue樣式的內(nèi)部。

三、文檔相對路徑的表示方法

關于文檔相對路徑省略關于當前文檔和所鏈接的文檔都相同的絕對URL部分。如果要鏈接的目標文件與當前文檔位于同一文件夾中，輸入文件名;如果位于子文件夾中，則提供子文件夾的名稱，后跟正斜杠"/'，然后輸入文件名;如果位于父文件夾中，則在文件名前添加"../'(其中"..'表示文件夾層次結(jié)構(gòu)的上一級目錄)。

四、解決跳轉(zhuǎn)菜單可能出現(xiàn)的問題

選擇跳轉(zhuǎn)菜單項后，如果再次導航回到該頁面，或者如果在【插入跳轉(zhuǎn)菜單】對話框的【打開URL于】文本框中指定了一個框架，則無法重新選擇此菜單項。解決此問題有兩個途徑：

●使用菜單項選擇擇提示(如類別)或用戶說明(如"選擇其中一項：')。在選擇每個菜單之后將自動重新選擇菜單項選擇擇提示。

●使用【前往】按鈕，該按鈕同意重新訪問當前所選鏈接。

必須要注意的是：由于這些選項應用于整個跳轉(zhuǎn)菜單，因此在【插入跳轉(zhuǎn)菜單】對話框中，每個跳轉(zhuǎn)菜單只能選擇這些選項中的一項。

五、善用拖放

在使用Dreamweaver編輯網(wǎng)頁時，常常必須要插入一些圖像，如果要插入的圖像很多，按照常規(guī)方法來操作就顯得非常麻煩?？梢岳猛蟿蛹记蓙砗芎玫亟鉀Q這個問題。首先把Dreamweaver的操作窗口變成活動窗口，找到要插入的圖像文件后，把它們一一用鼠標拖動到網(wǎng)頁的適當部位，Dreamweaver將自動把這些圖像的URL添加到文件的HTML代碼中，這里要求被拖動的圖像文件必須是GIF、JPEG等Web圖像格式的文件。關于已經(jīng)在網(wǎng)頁中的圖像也是一樣，直接拖過來即可，但如果被拖動的圖像上有超鏈接，就不可以再使用拖動技術了，因為那時拖過來的僅僅是超鏈接地址。

網(wǎng)頁制定流程中常常遇見的問題

問題1、跳過網(wǎng)站功能及信息架構(gòu)上的研究，直接開始視覺創(chuàng)作。

網(wǎng)站的功能和信息架構(gòu)是網(wǎng)站的核心，一個網(wǎng)站不是單純的讓訪問者去感受視覺上的美觀，美觀永遠是第二位的，而功能性卻是第一位的。一個企業(yè)網(wǎng)站是為了展示企業(yè)的形象、售賣企業(yè)的產(chǎn)品和服務;一個門戶網(wǎng)站是為了更好的提供信息內(nèi)容，一個個人博客是為了分享個人的觀點，樹立個人品牌等等，確保了這些功能更好的實現(xiàn)了之后才應該去合計視覺上是否美觀的問題。

我在之前的一篇文章《從千鳥志看網(wǎng)頁制定中的功能性》中分析過千鳥的個人博客在功能性和用戶體驗方面的優(yōu)點，雖然初次打開該博客并不會被它看上去似乎沒怎么制定的灰白界面所吸引，但這個網(wǎng)站優(yōu)良的用戶體驗卻一定會讓你記憶深入。

更重要的是，網(wǎng)站功能以及它的信息架構(gòu)關于視覺是有非常重要的影響的，這點我在《網(wǎng)頁核心內(nèi)容對視覺表現(xiàn)的影響》這篇文章中有較為具體的論述，在這里就不再展開了。

問題2、制定過程中碰到困難，隨意調(diào)整制定方向。

畫好了草圖就要按照制定方向堅決執(zhí)行，這樣才干確保前期的創(chuàng)意階段的工作不被浪費。很多制定師前期的創(chuàng)意構(gòu)思都很有想法，但是一旦開始制定，途中碰到尋找素材或者技術方面的困難，或者突然發(fā)現(xiàn)某一個素材很不錯，很美麗，馬上拋棄前面的整個創(chuàng)意，開拓一條新路從頭開始，但往往做到半中間就再做不下去了，導致制定總是半途而廢，情緒上不斷受挫，焦躁不堪。而我們?nèi)绻催^高手的制定過程，比如文子的光大銀行的制定視頻，我們就會發(fā)現(xiàn)高手從來都不輕易的改變已經(jīng)設定好的制定方向，并且總能把我們看來完全用不著的素材變廢為寶，從而擁有化腐朽為神奇的本事。千萬不要花費大量時間去尋找完美的、拿來不用調(diào)整就能用的制定素材，能找到這樣的素材的幾率比中彩票還要低，而是要不斷提升我們將看上去和整體制定毫不搭邊的素材融合進整體制定的能力。

問題3、細節(jié)不夠講究，顯得粗糙。

一些制定師給我發(fā)來個人作品讓我給說說建議，我發(fā)現(xiàn)其中共同存在的問題就是制定中細節(jié)做的不好。漸變和高光過于生硬、陰影的距離和不透明度太高、對齊方式偏差幾個像素、上下左右邊距距離太小、元素和背景的反差不夠造成元素清楚度不夠等幾個問題是常見的制定毛病。這些問題雖然也涉及到技術的問題，但是最重要的我認為還是用心不夠、認為做到差不多就行了的態(tài)度問題。這里我向大家推舉Dribbble和PremiumPixels這兩個網(wǎng)站，這其中的制定作品無論哪一個細節(jié)都是非常完美、無可挑剔的，下面是我隨手從這兩個網(wǎng)站中拿出來的作品，大家應該能從這里理解網(wǎng)頁制定就是細節(jié)的藝術這句話的含義。

問題4、技術不過關，創(chuàng)意無法得到實現(xiàn)。

只有通過大量的制定和學習才干盡可能多的掌握具體的技術。但是無論是跟著網(wǎng)上的制定教程學習，還是通過研究別人的PSD文件也好，不能做過一遍就過去了。一般來說我們常常必須要必須要通過教程掌握的是如何處理手頭的素材，將其融合于整體的場景之中的思路的方法，看看高手是如何通過使用調(diào)整圖層、自由變幻、色彩范圍選擇等一系列的技術去實現(xiàn)必須要的效果，而不僅僅是按照教程做一遍就完了，下次碰到必須要自己動手創(chuàng)建場景的時候依舊無所適從。如果你已經(jīng)有了一定的PS基礎，應該多學習些圖標和場景的創(chuàng)建，認真研究，你一定能學到很多東西

網(wǎng)頁制定注意什么問題

1、不要讓你的用戶長時間等待加載

不管是面對APP還是網(wǎng)頁，用戶的耐心都非常之有限。有研究說明，7秒的等待幾乎是用戶的等待極限，而10秒的加載時間，只會讓絕大多數(shù)的用戶關閉頁面，再精美的加載動畫都安撫不了用戶的煩躁。所以，不要讓你的用戶等待加載，尤其是這個加載時間很長的時候。相關的應對策略很多，比如你可以采納占位符先顯示布局，逐步加載內(nèi)容，至少讓用戶知道，這個過程正在推動。

2、不要讓促銷廣告蓋住內(nèi)容

現(xiàn)實生活中廣告已經(jīng)讓人難以忍受了，如果你的網(wǎng)頁中廣告竟然擋住了主要內(nèi)容，這幾乎是逼著你的用戶生氣關閉頁面，這樣換來的廣告營收從某種意義上也是飲鴆止渴。

另外一方面，長時間的互聯(lián)網(wǎng)瀏覽經(jīng)驗會培養(yǎng)出用戶的另外一種廣告應對策略：當他們看到廣告的時候會主動忽略它。這關于廣告的轉(zhuǎn)化率同樣是毀滅性的打擊，不是么?

3、避免滾動劫持

滾動劫持通常指的是開發(fā)者或者制定師為了實現(xiàn)新的布局、動畫或者排版，而修改了滾動的固定點甚至滾動條和體驗本身，帶來的非常規(guī)的滾動體驗。滾動劫持是最惱人的狀況之一，所以，通常而言，除非極各別的原因，盡量不要過度調(diào)整和修改用戶滾動瀏覽的體驗制定。

視頻和音頻自動播放關于用戶而言是一種失控的體驗，關于用戶也是一種刺激。這樣的制定應該慎重使用，除非用戶對此已經(jīng)有所預期。

4、不要為了美麗而犧牲可用性

網(wǎng)站和APP的界面制定的外觀不應該影響它本身的可用性。避免繁瑣的制定，為了美觀而犧牲內(nèi)容的可讀性和對比性都是不能讓人接受的體驗。

5、不要使用晃眼的文本和廣告

令人晃眼的文本和廣告本身體驗不佳，它們會讓人分心，而且還會觸發(fā)體質(zhì)敏感的癲癇患者發(fā)病。

網(wǎng)站制定中不要忽視哪些問題

1、使用不合理的模板

用模板確實是一件非常方便的事情。大型企業(yè)用模板確實說不過去，但是初創(chuàng)公司借助BootStrap做網(wǎng)站絕對是情有可原。使用類似Bootstrap模板來作為基礎，借制定師之手針對品牌和企業(yè)氣質(zhì)稍加定制，其實是個很不錯的主意，如果〔溝通〕優(yōu)良，說不定最終能浮現(xiàn)出一個非常不錯的網(wǎng)站，關于企業(yè)的產(chǎn)品與服務也是很不錯的加成。

但是僅僅只是套用模板而不予以調(diào)整和定制，你所遭遇最常見的問題是模板與品牌本身的視覺制定上無法達成一致，從LOGO使用的色彩，到品牌中獨特的字體，都無法與網(wǎng)站構(gòu)成較高的匹配度。

不過如果你真的是在這方便也捉襟見肘的話，盡量挑選在各方面與品牌形象本身更接近的模板，將疏離感降到最低。

2、使用默認外觀

和中文網(wǎng)站的狀況不一樣，英文網(wǎng)站使用多種多樣的字體是一件很輕松的事情。如果你使用了Bootstrap、Wordpress這樣的工具來創(chuàng)建網(wǎng)站，而僅僅使用默認的設置，你愚弄不了任何人，大家一眼就會把你偷懶的事情看出來連字體都是默認的OpenSans。用Wordpress默認外觀也是一樣的道理。如果你不打算在網(wǎng)站視覺上和別人稍作區(qū)別的話，對品牌的傷害是顯而易見的。

當然，如果你能用好諸如FontAwesome這樣的字體和CSS工具，也有點鐵成金的奇效。它能以增加圖標庫和樣式的方式，讓Bootstrap等各種各樣的系統(tǒng)，擁有美麗一致的視覺語言。

毫無疑問，這些被精心制作過的原創(chuàng)的圖標，自然是比系統(tǒng)內(nèi)置的通用圖標好。如果你有自己的創(chuàng)意和點子，為什么不去尋找更有個性，更符合你的品牌調(diào)性的圖標、插畫和字體呢?或許時間成本、實現(xiàn)成本并沒有你想象中那么高。

3、排版對比度的問題

字體的排版的問題之大，遠非絕大多數(shù)非制定人員想象的那么簡單。文字和字母看起來很簡單，但是它們可以成就好制定，也可以毀掉整個版面。

在許多"自制'的網(wǎng)頁中，最常見的問題是標題和正文字體之間的對比度較低，整個頁面的信息層級不顯然。僅僅只是調(diào)整字體大小并不夠以構(gòu)成對比，標題字體的字重應該比正文更大，也就是說字體應該更粗，保證它們夠顯眼，更容易被眼睛注意到。

4、使用深色背景

雖然背景處于網(wǎng)頁的最底層，但是它實際上是占據(jù)網(wǎng)站面積最大的部分，在用戶看到網(wǎng)頁的時候會第一時間感受到，精心選擇背景色彩很重要。

作為一個久經(jīng)驗證的法則，黑色色調(diào)的網(wǎng)站，除開真正專業(yè)的制定師做出來的，其他的基本都沒法看。使用白色作為基本的背景色是非常安全的，不過多數(shù)的制定師會選擇淺灰色打底。值得注意的是，網(wǎng)站的灰度越高，黑色的文字的可閱讀性越差，為了保證網(wǎng)站的可閱讀性，灰度最好堅持在15%以下。

5、多級行為呼喚

CallToAction，通常被稱為行為呼喚，一般指