網(wǎng)頁(yè)設(shè)計(jì)遇到的問(wèn)題

第頁(yè)網(wǎng)頁(yè)設(shè)計(jì)遇到的問(wèn)題〔網(wǎng)頁(yè)〔制定〕〕碰到的問(wèn)題

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

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

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

二、關(guān)于沖突的CSS樣式

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

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

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

三、文檔相對(duì)路徑的表示方法

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

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

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

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

●使用【前往】按鈕，該按鈕同意重新訪問(wèn)當(dāng)前所選鏈接。

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

五、善用拖放

在使用Dreamweaver編輯網(wǎng)頁(yè)時(shí)，常常必須要插入一些圖像，如果要插入的圖像很多，按照常規(guī)方法來(lái)操作就顯得非常麻煩。可以利用拖動(dòng)技巧來(lái)很好地解決這個(gè)問(wèn)題。首先把Dreamweaver的操作窗口變成活動(dòng)窗口，找到要插入的圖像文件后，把它們一一用鼠標(biāo)拖動(dòng)到網(wǎng)頁(yè)的適當(dāng)部位，Dreamweaver將自動(dòng)把這些圖像的URL添加到文件的HTML代碼中，這里要求被拖動(dòng)的圖像文件必須是GIF、JPEG等Web圖像格式的文件。關(guān)于已經(jīng)在網(wǎng)頁(yè)中的圖像也是一樣，直接拖過(guò)來(lái)即可，但如果被拖動(dòng)的圖像上有超鏈接，就不可以再使用拖動(dòng)技術(shù)了，因?yàn)槟菚r(shí)拖過(guò)來(lái)的僅僅是超鏈接地址。

網(wǎng)頁(yè)制定流程中常常遇見(jiàn)的問(wèn)題

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

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

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

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

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

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

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

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

問(wèn)題4、技術(shù)不過(guò)關(guān)，創(chuàng)意無(wú)法得到實(shí)現(xiàn)。

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

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

1、不要讓你的用戶長(zhǎng)時(shí)間等待加載

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

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

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

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

3、避免滾動(dòng)劫持

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

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

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

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

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

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

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

1、使用不合理的模板

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

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

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

2、使用默認(rèn)外觀

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

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

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

3、排版對(duì)比度的問(wèn)題

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

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

4、使用深色背景

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

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

5、多級(jí)行為呼喚

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