一般做網(wǎng)頁遇到的問題

測試是網(wǎng)頁設(shè)計(jì)中很關(guān)鍵的一個(gè)步驟。
在你正式提交網(wǎng)站之前，你應(yīng)該進(jìn)行測試。您需要測試以了解你網(wǎng)站的看起如何或感覺起來如何，以及了解其工作原理。下面介紹一般做網(wǎng)頁設(shè)計(jì)遇到的問題，希望可以為您帶來幫助。


1.
不經(jīng)測試而發(fā)布網(wǎng)站

測試是網(wǎng)頁設(shè)計(jì)中很關(guān)鍵的一個(gè)步驟。
在你正式提交網(wǎng)站之前，你應(yīng)該進(jìn)行測試。您需要測試以了解你網(wǎng)站的看起如何或感覺起來如何，以及了解其工作原理。

另一個(gè)常見的錯(cuò)誤是忽略了在所有設(shè)備上測試你的網(wǎng)站的重要性，而現(xiàn)在所有網(wǎng)站都應(yīng)該具備響應(yīng)功能來支持多個(gè)移動(dòng)平臺(tái)。測試的目的，是確保你的網(wǎng)站在上線之前表現(xiàn)出優(yōu)化的性能。

2.
顏色的誤用

顏色在網(wǎng)頁設(shè)計(jì)中扮演著重要的角色。每個(gè)設(shè)計(jì)師都應(yīng)該掌握色彩使用的原則，通過應(yīng)用色彩原則來達(dá)到完美的設(shè)計(jì)效果。如果你想要一個(gè)不錯(cuò)的顏色對(duì)比效果，你必須知道如何進(jìn)行顏色的搭配。好的是，有很多在線工具可以根據(jù)你的網(wǎng)站主題和你正在運(yùn)行的內(nèi)容幫助你選擇完美的顏色搭配。

3.
使用彈出窗口

彈出窗口可能看上去不錯(cuò)，但是會(huì)讓某些用戶感到迷惑并且導(dǎo)致網(wǎng)頁轉(zhuǎn)換速度很慢。如果你非得使用彈出窗口，確保使用一個(gè)就行了。你也可以使用燈箱，消除所有的干擾項(xiàng)，確保用戶能有一個(gè)清晰的了解。讓你的用戶可以毫不費(fèi)勁的關(guān)閉彈出窗口，萬一他們對(duì)內(nèi)容不感興趣呢?

4.
失敗的內(nèi)容

如果你使用不相關(guān)的、過時(shí)的內(nèi)容，或者你網(wǎng)頁上根本沒有多少內(nèi)容，那么你的網(wǎng)站一定會(huì)很失敗。內(nèi)容對(duì)于任何一個(gè)網(wǎng)站來說都十分重要，因?yàn)檫@可以向你的訪問者傳達(dá)你正在運(yùn)作的東西。確保你網(wǎng)站上的東西要及時(shí)更新，質(zhì)量高和易于閱讀和理解。瀏覽每一條內(nèi)容以確保沒有任何錯(cuò)誤，盡可能的提供必要信息。

5.
糟糕的易讀性

良好的可讀性是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，他可使訪問者在你的網(wǎng)站上面停留更長的時(shí)間，更多地了解你的業(yè)務(wù)。問題是許多設(shè)計(jì)師以忽略可讀性為代價(jià)而過于關(guān)注于創(chuàng)新。最終得到是一個(gè)華而不實(shí)的網(wǎng)站。在這種情況下，為了提供對(duì)用戶有吸引力的內(nèi)容，字體，字體大小和顏色的正確選擇很關(guān)鍵。

6.
凌亂的網(wǎng)頁

在客戶了解你的業(yè)務(wù)之前，其中一個(gè)可能使他們離開網(wǎng)站的原因就是，你有一個(gè)很凌亂的網(wǎng)頁。您需要留下足夠的空白空間讓你的內(nèi)容
透氣
，以便訪問者可以輕松的瀏覽并尋找到他們想要到內(nèi)容。盡可能地內(nèi)容最小化，同時(shí)為訪問者提供足夠的信息。

7.
使用大量的圖像

大量的圖片和基于閃存的圖形和動(dòng)畫可能看起來很酷，但這會(huì)拉慢你網(wǎng)站的速度，并且會(huì)讓用戶變的沮喪。你最不希望就發(fā)生的事就是讓你的訪客體驗(yàn)慢速下載，特別是在移動(dòng)設(shè)備上。他們可能永遠(yuǎn)都不會(huì)去看你的網(wǎng)站上的內(nèi)容，你也可能會(huì)在搜索引擎中獲得較低的排名，也很難被消費(fèi)者發(fā)現(xiàn)。盡可能地讓你的網(wǎng)站看起來
輕盈
，避免閃存。

8.
糟糕的導(dǎo)航

為訪問者設(shè)計(jì)簡單可行的導(dǎo)航操作，以便他們隨時(shí)知道自己在哪個(gè)位置。導(dǎo)航的功能是讓用戶可方便快捷的瀏覽某個(gè)網(wǎng)頁。糟糕的導(dǎo)航體驗(yàn)會(huì)挫敗網(wǎng)絡(luò)消費(fèi)者，即使你有最好的產(chǎn)品或服務(wù)，但許多人甚至都不了解它。有許多方法可以改進(jìn)，例如通過將分頁納入設(shè)計(jì)，使用一頁的布局等等。

9.
復(fù)雜的注冊表

填寫表格是非常必要的，盡管并非總是如此。復(fù)雜的注冊表將會(huì)對(duì)你的業(yè)務(wù)產(chǎn)生影響。沒有人愿意去填寫一個(gè)很麻煩的表格，尤其是它還有多個(gè)字段。簡單可行的方法就是擁有一個(gè)簡單明了的注冊表。只問最重要的問題，盡可能的最少化。

10.
散亂的頁面布局

網(wǎng)頁設(shè)計(jì)師需要知道，對(duì)于消費(fèi)者來說困難的莫過于快速的瀏覽一個(gè)凌亂的頁面。為了快速了解網(wǎng)站的內(nèi)容，許多人都會(huì)這么做。要解決這個(gè)問題，你的頭腦里面應(yīng)該有一個(gè)清晰的結(jié)構(gòu)：你的設(shè)計(jì)將會(huì)是什么樣子。不管任何時(shí)候都不要讓用戶覺得難以發(fā)現(xiàn)自己要了解什么。規(guī)劃好你的內(nèi)容，才能引導(dǎo)用戶瀏覽頁面。

網(wǎng)頁設(shè)計(jì)與制作常見問題

1.
如何使用3種類型的CSS樣式?

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

2.
關(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)部。

3.
文檔相對(duì)路徑的表示方法

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

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

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

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

●
使用【前往】按鈕，該按鈕允許重新訪問當(dāng)前所選鏈接。

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

5.
善用拖放

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

6.
怎樣為圖像添加指定顏色的邊框?

在Dreamweaver的【圖像】屬性面板中，有一個(gè)【邊框】屬性，可以直接設(shè)置邊框的寬度。寬度設(shè)好了，可是沒有顏色，那么如何才能為圖像的邊框加上不同的顏色呢?可以利用CSS樣式表來實(shí)現(xiàn)。在【圖像】屬性面板中一個(gè)【類】選項(xiàng)，通過【類】列表框選擇【樣式】，創(chuàng)建一種新的樣式，打開【CSS樣式定義】窗口，選擇【邊框】項(xiàng)，為邊框設(shè)置所需要的顏色。只要把這種樣式應(yīng)用到有邊框的圖像即可。

網(wǎng)頁圖像處理的技巧

1、圖像的尺寸

圖像的尺寸與網(wǎng)頁設(shè)計(jì)目的相關(guān)，尺寸大的圖像涵蓋的內(nèi)容豐富，能夠更加細(xì)的傳達(dá)圖像信息，讓瀏覽者注意圖像中醒目的內(nèi)容元素。尺寸小的圖像簡單，有個(gè)性，對(duì)于主題表達(dá)起到襯托的作用。網(wǎng)頁設(shè)計(jì)中大小圖像結(jié)合文字共同把設(shè)計(jì)主題展示出來，設(shè)計(jì)者根據(jù)設(shè)計(jì)需求分析網(wǎng)頁設(shè)計(jì)的主標(biāo)題和副標(biāo)題，讓主標(biāo)題更突出，更惹眼，讓附屬圖像與主圖內(nèi)容相得益彰，共同達(dá)到設(shè)計(jì)效果。



2、圖像的外形

圖像設(shè)計(jì)向多元化方向發(fā)展，不同類型的圖像都有各自的特色，我們看到圓形的圖像時(shí)就覺得不呆板、親切可人;而不規(guī)則的圖像動(dòng)態(tài)十足，有活力;方型圖像則給人中規(guī)中矩的感覺。網(wǎng)頁設(shè)計(jì)目的不同，對(duì)各種類型的網(wǎng)站需要多種形狀的圖像烘托。

(1)方形圖像。方型是最常見的，也是我們生活中使用最多的形狀。在一些嚴(yán)肅的網(wǎng)站比如政務(wù)網(wǎng)等官方，適宜利用方型的圖像或主圖像來傳遞給瀏覽者正規(guī)、嚴(yán)肅的信息內(nèi)容。方型的穩(wěn)重帶給瀏覽者可信度高、理性的思考，能把整體網(wǎng)頁的風(fēng)格襯托出來。

(2)菱形圖像。菱形是方型的靈動(dòng)，沒有方型的凝重、嚴(yán)肅，使網(wǎng)頁的美感增加。

(3)圓形圖像。圓形圖像有柔和曲線，讓瀏覽者產(chǎn)生充實(shí)的感覺，圓滿的外型把自由和隨意傳遞給瀏覽者。

(4)三角形圖像。三角形圖像在網(wǎng)頁中能夠把動(dòng)感有個(gè)性的內(nèi)涵闡釋給瀏覽者，網(wǎng)頁變得生命力十足。

(5)個(gè)性化圖像。此類圖像不是自然界的常規(guī)圖型，經(jīng)過創(chuàng)造者技術(shù)加工和個(gè)性化處理，把圖像加工成自由靈活的創(chuàng)意圖像，圖像沒有規(guī)則的形狀，沒有統(tǒng)一的配色，自然而又隨性。圖像與文字自然規(guī)整的結(jié)合在網(wǎng)頁頁面上，將主題效果突出的顯示出來。

圖像處理技術(shù)應(yīng)用下的網(wǎng)頁設(shè)計(jì)

簡單來說，計(jì)算機(jī)圖像處理技術(shù)就是將一些圖像、視頻、圖片等進(jìn)行數(shù)字轉(zhuǎn)化，并且通過轉(zhuǎn)化將其變成計(jì)算機(jī)技術(shù)所能識(shí)別的固定代碼，從而便于計(jì)算機(jī)進(jìn)行識(shí)別和美化，通過對(duì)圖像的一些操作使圖像呈現(xiàn)出我們想要的圖像效果，計(jì)算機(jī)圖像處理技術(shù)的處理速度是相對(duì)較快的，而且其存儲(chǔ)空間也相對(duì)較大，所以，對(duì)于那些已經(jīng)處理過的圖像和視頻可以直接保存，同時(shí)，隨著計(jì)算機(jī)信息技術(shù)的發(fā)展，計(jì)算機(jī)圖像處理技術(shù)也取得了一定的進(jìn)展，計(jì)算機(jī)圖像處理技術(shù)只需要將數(shù)字轉(zhuǎn)化為紅、黃、藍(lán)三種原始色彩的數(shù)字圖像就可以，然后計(jì)算機(jī)通過對(duì)這些圖像進(jìn)行分析和處理，從而實(shí)現(xiàn)圖像的多樣化操作，同時(shí)，計(jì)算機(jī)圖像處理技術(shù)的提高也體現(xiàn)在圖像清晰度和分辨率，以及圖像傳輸率等技術(shù)的提升和發(fā)展。

計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

在網(wǎng)頁設(shè)計(jì)的過程中，圖像的處理和美化是其中最重要的環(huán)節(jié)之一，在一些較為復(fù)雜的網(wǎng)頁中，可能會(huì)包含一些動(dòng)態(tài)的圖像以及flash元素等，這些元素的存在無疑增加了網(wǎng)頁的特色，同時(shí)，也會(huì)提高客戶體驗(yàn)，為了保持這些元素的鮮明性就需要將計(jì)算機(jī)圖像處理技術(shù)很好的應(yīng)用到網(wǎng)頁設(shè)計(jì)中，提高網(wǎng)頁質(zhì)量的同時(shí)，增加網(wǎng)頁的特點(diǎn)。

滿足網(wǎng)頁設(shè)計(jì)中對(duì)于圖片格式的需求

滿足網(wǎng)頁設(shè)計(jì)中對(duì)圖片格式的需求是網(wǎng)頁設(shè)計(jì)過程中最基礎(chǔ)的環(huán)節(jié)，在網(wǎng)頁設(shè)計(jì)中，需要各種不同的元素來組成一個(gè)完整的、特色鮮明的網(wǎng)頁，從而讓瀏覽者瞬間獲取自己所需要的信息和資源，同時(shí)，網(wǎng)頁設(shè)計(jì)必須具有一定的便捷性，這樣才能有效的增加用戶體驗(yàn)，同時(shí)增強(qiáng)用戶瀏覽體驗(yàn)的感受，由此可見，圖像的處理是網(wǎng)頁設(shè)計(jì)中最基礎(chǔ)的內(nèi)容，所以，計(jì)算機(jī)圖像處理技術(shù)首先需要處理的就是網(wǎng)頁設(shè)計(jì)中的圖像問題，其中jpeg是最為常用的圖片格式，而gif可以實(shí)現(xiàn)圖像的動(dòng)態(tài)效果，由于這兩種的網(wǎng)絡(luò)圖像格式所需要的參數(shù)和規(guī)格是不盡相同的，所以在應(yīng)用計(jì)算機(jī)圖像處理技術(shù)時(shí)，應(yīng)該滿足其格式的不同需求。

對(duì)網(wǎng)頁設(shè)計(jì)中圖像的大小進(jìn)行控制

眾所周知，計(jì)算機(jī)的長度和寬度是有限的，這在一定程度上就決定了網(wǎng)頁設(shè)計(jì)的圖像也應(yīng)該是有一定的規(guī)格，同時(shí)，為了保障網(wǎng)頁瀏覽的清晰度和流暢度，就需要對(duì)網(wǎng)頁中的圖像進(jìn)行一些特定的處理來限制其圖像的大小，由于圖像的大小與其所展現(xiàn)的清晰度有直接關(guān)系，所以，需要借助計(jì)算機(jī)圖像處理技術(shù)來進(jìn)行處理，以此來緩解清晰度和圖像大小之間的矛盾，在追求圖片高清晰度的同時(shí)，提高網(wǎng)頁加載的速度和質(zhì)量，同時(shí)提高網(wǎng)頁瀏覽的效果。計(jì)算機(jī)圖像處理技術(shù)主要是一種針對(duì)jpeg圖片進(jìn)行處理來權(quán)衡加載速度和網(wǎng)頁瀏覽效果的一種技術(shù)，從而提高網(wǎng)頁設(shè)計(jì)的瀏覽效果和網(wǎng)頁質(zhì)量。

對(duì)網(wǎng)頁設(shè)計(jì)進(jìn)行進(jìn)一步的開發(fā)

只有綜合運(yùn)用計(jì)算機(jī)圖像處理技術(shù)對(duì)網(wǎng)頁設(shè)計(jì)進(jìn)行進(jìn)一步的開發(fā)和應(yīng)用，才能從根本上提高網(wǎng)頁設(shè)計(jì)效果，近年來，計(jì)算機(jī)圖像處理技術(shù)主要是以軟件為主，是目前最為常用的圖片處理軟件，但是，隨著網(wǎng)頁設(shè)計(jì)的不斷普及和發(fā)展，出現(xiàn)了更多網(wǎng)頁個(gè)體設(shè)計(jì)者，為了滿足不同個(gè)體對(duì)網(wǎng)頁設(shè)計(jì)的個(gè)性化需求，同時(shí)帶動(dòng)個(gè)體成為網(wǎng)頁設(shè)計(jì)的主流，豐富網(wǎng)頁的內(nèi)容和色彩，就需要適當(dāng)?shù)慕档陀?jì)算機(jī)圖像處理技術(shù)的技術(shù)水平，以此滿足社會(huì)大眾的需求，其中photoshop的圖片處理功能相對(duì)強(qiáng)大，但是photoshop主要是針對(duì)專業(yè)的網(wǎng)頁設(shè)計(jì)人員開發(fā)的一種技術(shù)處理軟件，所以，對(duì)于那些非專業(yè)的網(wǎng)頁設(shè)計(jì)者，這個(gè)軟件具有一定的難度，這在一定程度上限制了網(wǎng)頁設(shè)計(jì)的普及和發(fā)展，所以，為了滿足更多網(wǎng)頁開發(fā)者的設(shè)計(jì)體驗(yàn)，要不斷開發(fā)出一些相對(duì)簡單和實(shí)用的計(jì)算機(jī)圖像處理技術(shù)，進(jìn)而推動(dòng)計(jì)算機(jī)圖像處理技術(shù)的革新和技術(shù)升級(jí)。

結(jié)語

互聯(lián)網(wǎng)是當(dāng)前社會(huì)發(fā)展中一個(gè)龐大的體系結(jié)構(gòu)，而網(wǎng)頁設(shè)計(jì)可以說是這個(gè)龐大體系中的一個(gè)分支和基本單元，想要提高網(wǎng)頁設(shè)計(jì)的質(zhì)量和水平，不僅需要專業(yè)的創(chuàng)意支撐，還需要借助計(jì)算機(jī)圖像處理技術(shù)來對(duì)其進(jìn)行完善和整合，提高網(wǎng)頁的藝術(shù)性和美觀性，在網(wǎng)頁設(shè)計(jì)過程中，包括對(duì)網(wǎng)頁圖像的色調(diào)、圖像的規(guī)格、圖像的效果以及圖像的藝術(shù)感都要通過計(jì)算機(jī)圖像處理技術(shù)來進(jìn)行處理和完善，最終設(shè)計(jì)出令用戶滿意的網(wǎng)頁。