基本介紹
- 中文名：頁面編排
意義及目的,網頁設計原則,面對的問題,適合內容繪圖,意義與選擇,文字的運用,內文設計部份,
意義及目的
以報紙廣告的編排為例：將構成報紙廣告的商標、合成文字、插圖、商品名、輪廊等造型要素，以及標題、副標題、說明文字、口號、公司名、地址等文字部分的內容要素，適當地安排於指定範圍（版面、畫面、篇幅）內，使它在同一畫面上互相襯托，充分發揮其最大”的廣告效果。
在編排時，須注意下列兩點：
1.把上述信息內容作最優秀的圖形處理（平面設計）。雖然直觀的成份較多，但決不可以單純的美術問題去判斷編排的價值，必須以規定的信息傳達手段是否適當為評定準則。在此最重要的是先依照信息內容，變化編排要素。
這雖然沒有一定法則，不過一般總是先充分理解信息內容，並考慮各要素之間的相對重要性，然後決定強調什麼或減弱什麼。就是根據商品特性、媒體性格及對方狀態，判斷出各要素的重要性而作出的編排。儘管報紙廣告整幅版面的左上方亂了一點，但是以大“正”字及傾斜推出商品，還是構成有力的構圖，是可取的編排。
2.提高消費者與廣告內容之間的心理接觸效果。這一點是否成功，決定於從廣告的表現主題至創造出信息內容的瞬間因素。換句話說，編排的第一步是分析廣告主題，其次是將分析的各點加以結合，創造出最佳的信息構成，以強烈而正確的傳達方式感動消費者，使其在心理上留下良好印象與深刻記憶。
因此從事編排設計，必須充分考慮商品的特性、媒體性格以及對方狀態等因素，再決定傳達什麼信息，宣傳什麼廣告，推銷什麼產品。
網頁設計原則
面對的問題
原則上，一個 HTML 網頁頁面的配置，能夠加強作者所企圖表達的概念與目的。頁面上的每一個元素，都會影響讀者對頁面上其他元素的解讀，在看一個頁面時，我們應該把整個組合看做是一個統一的整體，而非許多小單位的集合。在進行版面配置時，應把焦點放在版面的平衡與留白空間的處理，設計者應該根據圖像與背景的關係、對比的關係、類似的原理、以及比例的關係，將整個空間以最有效的方式加以分配、組織。
1、版面留白量
設計者可以很容易地改變背景顏色，因此，當我們提到“空白”時，所指的就是背景顏色，或是所謂圖像與背景的關係的背景部分。在一個頁面的組合中，留白的部分和被置於其上的元素同樣重要。就像樂章中的休止符，讓聽者能據知對音樂達成理解與鑑賞一樣，留白的空間讓頁面有了格式，因此，千萬不要忽略留白的重要性。在早期的 HTML 版本中，要隨心所欲地安排版面配置還很困難，由於在處理行列與對齊上的技術困難，使得版面常常陷入一種不平衡的局面。你必須考慮到所有的留白，這並不是說你得填滿所有的空白，而是、你必須把這些留白也一起納入考慮，達成頁面的平衡。
2、視覺平衡的考量
在安排頁面上的諸元素時，你應該考慮每個元素之間的視覺比重，這個比重可以由物件的大小、亮度﹝深色物件比淺色物件重﹞、以及紋路或內文的密度。視覺對比也很重要，如果加以有效地運用，對比可以很快地抓住讀者的注意力。但是如果元素之間的對比過大，則容易造成反效果，使整體失去和諧與平衡。另外，視覺上的諧調和對比一樣重要，你必須考慮物件之間大小比例的關係，將每一個元素對其他元素作相對的評估，比如說，一個很大的物件如果跟一個小物件放在一起，它會顯得更大，而影響到整體的平衡。
3、對稱式的平衡
在設計一個 HTML 頁面時，有許多方法可以達成平衡，其中最簡單的就是那種規規矩矩或是對稱的版面，比如說左右兩半或是上下部分彼此相似，甚至有些設計者把頁面上的每個元素向中央對齊。在某些情況下，這種設計方式可以有不錯的效果，但是通常內文的易讀性就會大大地降低。一般而言，一個對稱式的平衡是屬於靜態的，而無法引導讀者的目光去搜尋頁面上的其他元素。另外還有一種平衡的方式則是非制式且不對稱的。
4、不對稱的平衡
一個不對稱的頁面結構必須藉由技巧性地安排不同視覺比重的各種元素來達成。例如，一段很長的文字就可以用一個深色的圖形來平衡，一系列的小元素可以用一個大的元素來平衡。其變化的可能性是有很多的。一個不對稱的平衡頁面有時是經由設計者的天賦巧思所設計出來的，有時則是經過仔細的計算。初學者可藉由格線的輔助來設計頁面的平衡。一個不對稱或是非制式的組合方式可以使頁面在視覺上顯得較生動活潑。
5、缺乏平衡的問題
一般而言，一個頁面會出現不平衡的情況，若不是因為技術上的限制，就是因為設計者缺乏慨念。目前軟體的技術已能符合大部分格式設計的要求，因此很快地，設計者就必須為失敗的設計負起全責。有時候設計者的意圖是要製造出一種讓人感到不安、不穩定的感覺，這時一個不平衡的頁面也許就可以適當地傳達出這種概念或感覺，但如果這種不平衡不是出於故意的安排，那么，這樣一個頁面會讓你的網站功效大打折扣。
6、網頁設計前後的一致性
一般而言，你不會只設計一頁網頁，而是將許多頁面以一個主題為中心相互連結起來，因此，在開始設計時，你必須將整個 WWW 網站的方案做全盤考量。由於超媒體的便利性，我們都習慣只需用滑鼠輕輕一點，就能從某一頁跳到另一頁，而在這種情形下，視覺上的改變可能會讓讀者認為我們已從一個網站跳到另一個網站，通常我們當然不希望讀者在我們的網站中，從一頁跳到另一頁時產生這種錯覺。因此，你就得在你的頁面之間建立一個統一性，例如使用一個固定的標題圖示、一種特別的版面安排、或是一組特定的色系。記住，在考慮如何讓你的頁面具有一致性時，對這一致性做一點點的變化，會使你的網站更具有視覺趣味，並且使讀者更有興趣去瀏覽它。有時你也許會想要對你的頁面設計作變化，讓它不那么枯燥無聊，有時你也可能想要建立一個版面規格讓每一頁的內容配置都能保有一致性。
7、紙上設計與網頁設計的比較
在設計 WWW 時，我們應記住的是，電腦的熒幕通常是寬大於高，這使得我們很難同時在電腦上和紙上作設計，幾年前，有人預言一個無紙的時代即將來臨，但到了今日，看起來我們的用紙量比過去有過之而無不及，無論電腦多么方便，人們還是習慣把網頁列印出來看，如果你是以水平而非垂直的方向在擴展你的網頁，那就會有些列印上的問題。有些瀏覽器會在列印前先把頁面重新安排過，但是通常這也會破壞所有有趣的頁面設計。因此，你必須了解，有些材料最好是以垂直的格式來表現，這樣比較便於列印。
8、使用設計參考格線
在設計版面時，利用格線來安置物件的位置是一個蠻不錯的建議。格線就像是隱形的路標，有助於在網站的頁面中建立組織化的單元。許多的桌面排版軟體中都附有標線以便於物件的對齊，有些編寫網頁的工具也會提供這類的工具，但一般的文書編輯器則沒有。在這種情況下，你可以為你的頁面畫一個草圖，一但你決定了所依據的格線，你就可以用這個架構去對齊你的圖像與文字，讓你的頁面達到平衡。HTML 的分割頁框的功能，則可以讓你在頁面上定義出不同的區 塊，這使你只需更新有改變的元素即可，而不用每次都重新修改一整頁。有些人可能會覺得使用格線會讓畫面的整體設計變得單調無趣，但其實如果運用得當的話，並不會如此。一但你建立了網頁的架構，你就可以在這個格線架構下衍生出許多種安排物件的方式，並且每頁之間在元素排列上的變化是非常重要的。一個元素可以占據一個或兩個、甚至更多個區域，文字也可以放在一塊本來被拿來放圖像的區塊，你可以為一個網站準備兩個或以上的格線，然後依照每一頁的內容做不同的套用，通常當一個網站中使用多個格線模式時，是為了要在頁面轉換之間，創造出視覺上的韻律感。
9、視覺焦點的安排
在完成了一個頁面的編寫之後，用瀏覽器開啟它，往後站一步來看。不要讀內文的文字，把你的眼睛閉上幾秒鐘，然後打開，看著你的 WWW 網頁。頁面上的哪個部分最吸引你的眼光？你目光的下一個目標又是哪裡？試著去追溯你的眼睛瀏覽整個頁面的軌跡。作為一個設計者，也許你會有些偏見，所以你可以找別人來幫你看看你的焦點與瀏覽路徑是否適當。如果你的焦點在顏色對比、大小、密度或是色值上太過強勢，那么讀者的目光就會很難從上面移開，而其他的部份就會被認為是不重要的。但如果頁面上的所有元素看起來都差不多，那們讀者就很容易被搞糊塗，不知道該從哪裡看起，也不知道下一步要看哪一項。無論如何，不管設計者是否是有意識地考慮到讀者的目光，你都要記得，目光瀏覽的路徑，也會影響到讀者對這個網頁的滿意度與閱讀經驗。
適合內容繪圖
用在網頁上的圖形應該要支援並能夠增強 HTML 檔案的內容，在設計圖形時必須考慮很多事情，包括技術上的限制到美學上的考量。技術上的限制雖然都已漸漸地獲得解決，但是仍然不可忽視；而關於圖像與用及設計的美學問題，則不會有太大的改變，我們今天所討論的這些原則，將一直適用於大多數的套用實例中。
1、繪圖與美術修養
當一個藝術家在為多媒體設計圖像時，有許多小花招。如果要設計一個成功的圖像，則必須要體認到一點∶電腦不會替你創造藝術 ─ 好的藝術必須出自有藝思的天賦與努力練習。當然，這並不是說如果你不是一個藝術家，你就沒有辦法創造出一個好的圖像。
2、鑑賞的眼光
要做出成功的圖像，有一個很重要的技巧是要有一雙具批判性的眼光。如果你能夠客觀地評量你的作品並且發現它的缺點，那么你就能夠改進它。如果你相信你的作品只是〝還不錯″，那么它就還有一點點變得更好的可能。許多藝術家一直不斷地在尋求自身藝術造詣的更上層樓，而為了要訓練自己具有批判性的眼光，最好的方式就是常常接收他人對自己作品的回饋。發現其他人對同一作品會有不同於我的觀點的解釋，甚至常常有些人會指出完全沒注意到的部分，而這個部分一但被注意到，也就能產生另一種不同的觀點。
當你向他人尋求對你的作品的忠告時，你必須要能夠不帶防衛地接受那些具建設性的批評。想想看別人所說的話，然後自己在心中衡量一下，要不就是回絕這個建議，要不就是改變你的圖像來改正有問題的部分。如果你回絕這個建議，那么你也要能夠合理地解釋為什麼這不是一個好建議。“因為我想要這樣子做”並不是一個好理由。去找到一個願意提出誠實並有意的評語的人是很重要的，像“我喜歡”這樣的評語並不能幫助你把作品做得更好，請對方說說這個圖像在效用上的優缺點會是個不錯的方式。
3、繪圖技巧
光是想著要改進你的技巧，並且具有批判的眼光是不夠的，你將會發現若想要創作出成功的圖像，藝術技巧是絕對必要的。你可以依循某些規則或訣竅來學習發展這些技巧。雖然我們在網路上可以看到許多經過處理的影像，但是大部分的時候我們也必須具備實際繪圖的能力，手跟眼之間的協調、以及將眼睛所見的 3D 立體物體轉換成電腦上 2D 的平面圖像所需的視覺轉換能力，都需要許多年的訓練與經驗才能做得好。能提出的最好的建議是，你可以隨身帶著一本素描簿，並且在任何時候畫下你所見的事物，這樣不久你就能夠自然且隨意地表達你所想表達的東西。要有創意地處理影像也需要技巧，你必須考慮顏色、整體設計、對比、色值、符號意涵、以及許多其他的因素。要用 PHOTOSHOP 把兩個影像放在一起，然後製造出一個圖像放在你的網頁上，這看起來很容易，但你必須注意，如果你在設計一個圖像時，將它獨立於整體網頁的設計考量之外，那么你的網頁可能會顯得雜亂無章而使得效果有所打折。
4、圖像性質一致
你的網頁上的每一個圖像都與彼此有著緊密的關聯，所以，當它們被合置在一個網頁上時，你不能對它們作各自獨立的處理，因此，發展一套圖像的規則並且確實地套用在圖像的創造上就非常重要了。例如，你可以藉由在每一個圖像上加一道 3 個像素寬的框線，並且讓每一個圖像保持 1" X 1" 的大小，讓圖像間擁有一個共同的特質。當你建立起一套規則並實際地運用到你的網頁圖像上時，人們也許並不會注意到，但是，如果你的圖像大小不一，有的有框線、有的沒有，那么人們就很容易注意到，而使你的網頁不那么吸引人。
5、陰影表現方式一致
當你在一個圖形或文字上使用陰影時，這通常表現出一種深度的錯覺；當你在文字下方加上陰影，會使得那文字似乎栩栩地躍然於紙上，這陰影用於圖像時，它也會讓讀者覺得這影像比較逼近自己。並不是所有時候都必須使用陰影，你應該小心並有創意地用它。在使用陰影效果時，你應該了解到，有陰影就表示有一個潛在的光源，比如說，你的物件有一個下方 4 個像素、右方 5 個像素的陰影，那么看的人就會有意識或無意識地認定在相反方向的地方有一個光源。一個常見的錯誤是，在某個物體的某一邊製造出陰影，卻又在同一頁或同一個影像上的相反的那一邊也製造出陰影，這樣的錯誤會導致視覺混淆，而讓人無法確定光源到底來自哪個方向。
6、圖像大小有統一性
當處理成對出現或一系列的圖像時，你應該注意讓所有的圖像保持統一的規格，如果這些圖像都是以同樣的比例製作的，那么這倒不是難事，但是如果這些圖形有的是水平的、有的是垂直的，那么要把它們統一起來就有些難度了。如果可能的話，就把垂直和水平的影像分別集中在一起，並且統一它們的規格。如果你把垂直和水平的影像放在同一個區塊中，那么就重新調整它們的大小，讓其中一個向度保持一樣的尺寸，這將有助於建立統一感。由於我們一般都習慣使用固定的行間距，所以，調整影像讓它在同一向度上具有一樣的長度，將有助於維持整齊的行列。當一個影像以水平方向向其他影像對齊時，就調整影像使它的高度相等，而垂直方向的對齊，則有賴於影像寬度的一致。
7、圖像排列有序
在一個有許多圖像的網頁上，即使每個圖像都有一致的規格，仍然有可能因為缺乏有創意地排列，而顯得凌亂隨便。如果你事先為你的網頁建立了格線，那么只要將你的圖像依格線對齊，就能夠強制產生一個架構。不管你是否使用格線，你都必須有意識地決定如何安排這些圖像的位置，不要被 HTML 的技術限制住你對圖像編排的控制。
8、模仿其它媒體表現
有些時候藝術家們會模仿其他的媒體來創作圖像，比如說，我們都已習慣看到圖像後方出現陰影，而未曾質疑在電腦的影像上是不可能像現實世界中一樣出現陰影的。作為一個藝術家，他常常會去模擬或是借用某種媒材的視覺特性，並把它轉換到另一種媒材上面。在某些情況中，它的意圖是要在 2D 平面上製造出三度空間的幻覺，有許多技巧可以製造出這種三度空間的效果∶
線條透視畫法﹝將線條延伸聚集在無限遠的一點上﹞
將兩個影像輪廓重疊﹝在上者看起來比較近﹞
色彩透視畫法﹝較遠的物體具有較淺的顏色、且較不精細﹞
大小關係﹝大的物體看起來比較近﹞
做立體模型 做陰影做漸層﹝將物體件加上立體效果﹞
以方向性燈光製造陰影﹝強調物體到表面的距離﹞
在平面上的位置﹝上面的物體看起來比較遠﹞
粗線條﹝看起來向前方前進﹞
色彩﹝亮暖色系看起來向前方前進，暗冷色系則看起來像在後退﹞
當第一次看到某些模擬手法時，我們常常會覺得驚訝或是新鮮。例如，在網頁上看到一個木質的框線沒什麼了不起，可是從電腦熒幕上看到一個金屬材質的註冊標誌，就很少見了。當你仿照其他的媒體而創造出圖像，就有可能引起瀏覽者的好奇心，因而繼續瀏覽你的網頁。
9、模仿工具﹝filters﹞
雖然有創意的處理能夠加強你的網站的視覺效果，但你也要知道，有許多處理的方式都已經被過度使用而變成陳腔濫調了。例如，頁尾捲起的效果，在一開始被引進時，就被大量地引用，不管這樣的效果有沒有意義或是它和頁面的內容圖片有沒有關係。倫敦字型﹝一種中古世紀風格的、亮燦的草書字型處理方式﹞也是如此，人們把這種字型用在未來派寫作、科技觀點、以及其他並不合適的地方。所以，當你發現一種新的濾鏡效果時，要小心，這樣的處理方式可能會被誤用或是過度使用，而使的原來的本意大打折扣。當你使用濾鏡時，要謹慎並且要有選擇性，試著避免直接使用它的預設值，並且儘量將多種濾鏡組合使用，以創造出不能被歸類為某一種濾鏡效果的圖形。對電腦新手來說，你的作品中所使用的濾鏡效果可能會令他們眼花撩亂，但是對從事圖像創作的藝術家而言，你的作品只是，比如說，誤用柔焦濾鏡而產生的結果，而貶抑你的努力，認為那是個老套的東西。
10、破除框框的安排形式
另一種藝術工作者常用的小技巧是打破大多數圖形所遵從的直線欄框。一般的圖形都是被預設為以矩形的形狀儲存，雖然矩形的格式可以讓你的畫面看起來比較有組織，但是有時候一個突破框架限制的圖形能夠引起視覺上的刺激，並形成一個新的架構，這樣子的挑戰創新能夠讓你的檔案看起來更具動態。當你在設計 GIF 圖形檔時，你可以將這個檔案設定為以某一種顏色當作透明罩遮，當你用瀏覽器看這個圖形時，這個顏色就會變成透明的。這種透明效果只能用在 GIF ，而不能用在 JPG 檔，用得好的話，它可以讓你的 WWW 網頁生色不少。
11、動畫
WWW 的引進對網際網路的意義，就像是電視的發明之於收音機的世界一樣，我們可以看到影像並且很容易地接收資訊，但是你能夠想像如果電視上的所有影像都是靜態的圖像嗎？電視就像是一連串的幻燈片或彈匣。早期的 WWW 瀏覽器只能經由外掛程式來看這些時間導向的媒體，因此，影片的內容和網頁的內容是分開的。後來程式設計師們發明了一種聰明的方法來從伺服器〝推動″圖像，以模擬動畫的效果，但是頻寬的問題卻讓這項發明無法廣為大家所用，目前則有配合伺服器之推動動作的動畫型態的 GIF 格式，以及 Shockwave 檔，和一些其他的小技巧，能夠在瀏覽器視窗內模擬動畫圖形的效果。
動畫效果對你的網頁可以說是既能載舟，也能覆舟，所以你必須仔細考慮何時 以及為何要使用動畫，在許多例子中，動畫是被用來標示你的畫面上的一些新鮮有趣的東西，有時動畫則可以增加資訊的負載量，製造出某一種氣氛、或是配合支援網頁的內容。要記住，在大部分的情況中，動畫都會使得下載的速度變慢，而讓連線必須一直處於開啟狀態。
如果你創造了一個動畫，請仔細的想想看這個動畫會與網頁上的其他元素產生怎樣的互動？它會對讀者的感受與所要傳達的資訊有幫助嗎？動畫的動作跟色彩或是其中元素的安排一樣重要。如果你打算要放進一個動畫，那就讓它值得觀賞者花費那些下載的時間，並且讓你的動畫變動的動作看起來儘可能地順暢。
意義與選擇
當你在為網頁設計圖形時，應該特別注意色彩的選擇。如同前面所提到的，網頁上的影像並不能獨立於其他元件單獨運作。因此在對圖形加入色彩之前，你應該首先考慮網頁的整體色彩架構。
在網頁中使用色彩的原因應當如下：
區分項目
統一元件
喚起情緒反應
提高視覺反應
將觀念符號化
打破傳統
吸引注意力
在影像中的色彩，會受到周圍色彩的影響。例如，當紅色置於綠色附近，綠色會被增強。經過細心組合與安置的色彩可以讓個別的顏色在視覺上彼此影響。互補的色彩有彼此機動配合的作用。對比的色彩，會令人產生一種緊張或興奮的感覺。調和色彩，也就是在色彩輪盤上彼此靠近的顏色，會產生一種和諧與穩定的感覺。最好在你的影像上，選定一定範圍的色彩，而不要運用如彩虹般眾多的色彩。
1、色彩與情緒
德國的理論家，詩人與小說家哥德，曾經研究色彩對於觀察者的感官與心理的效應。他相信當一個人觀看色彩時，會建構出一複雜組合的心理經驗，並認為色彩可以激發記憶與期待。雖然他的想法不被當時的科學界所接受，不過現在我們卻發現他的研究具有實質的內容。雖然在不同文化之間，對於色彩的效應並不存在著所謂普遍的認知，我們依然可以肯定西方對於色彩在心靈上的效應所做的觀察。譬如：
紅色，橘色與黃色具有激勵效應，快樂的，熱情的特質
藍色與綠色具有安撫與鎮定的效應，憂鬱的特質
紫色具有神秘與不安的特質
已經有研究顯示，色彩甚至能影響觀察者的新陳代謝與對他們所處的環境的感受。有報導說，在藍色的房間內感覺較冷，而在黃色的房間內感覺較暖和。有人認為，在紅色範圍內的色調有助組織復原，然而藍色與綠色會減少荷爾蒙的活動。
2、色彩與象徵
在不同的文化中，色彩具有相當不同的象徵意義。當為網際網路設計圖形使用色彩時，須注意某些色彩被認為具有強烈的象徵或宗教意義。在西方文化中，白色象徵純潔；當使用疊加色彩系統時，它是所有色彩的組合。然而，在某些亞洲文化中，白色象徵死亡。黑色，沒有光線時，普遍地象徵夜晚；但是在某些文化中，也意指死亡，危險和邪惡。黃色經常讓人聯想到陽光，但是在世界上乾熱的地區，太陽被認為有害。黃色有時讓人聯想到黃金與富有，但是在某些文化中，也已被認為哀悼的色彩。紅色象徵熱情與愛情，但是在某些文化中，意指低俗與怪異。因為對色彩的聯想缺乏普遍的象徵意義，使得很難認定全球的人如何詮釋你所選擇的色彩。
3、色彩與冷暖
如同前面所提到的，色彩被使用來對於你的圖形創造一種三度空間的感覺。暖色系，﹝黃色，紅色和橘色﹞，在構圖中呈現往前跳躍。冷色系，﹝藍色和綠色﹞，似乎產生後退的感覺。經由選擇能幫助區分背景與前景的色彩，將對你有利。選擇色彩使得背景變成明亮的黃色或橘色且使得前景物體變成藍色或綠色，是一項常見的錯誤。假如你把焦點放在個別的色彩上，影像可能會集中在一起，但是當往後站立，當色彩似乎與設計者想要建立的空間關係相矛盾時，你會注意到有視覺的緊張與混淆。
4、有效的色彩與繪圖
當設計圖像時， 應考慮整個 WWW 網站，而不僅僅是為了個別的部分。你要考慮這個圖像如何與你在其他地方所做的東西有一致性呢？假如你僅僅為了吸引觀眾的注意，而使用一個圖像，並且在視覺上與觀念上，對於內容沒有任何關係，也許最好不要使用這個圖像。設計圖像最重要的事情是，避免不必要的圖像或是那些會貶抑你的觀念的圖像。例如，沒有必要為一個容易經由文字傳達意念的事物，去創造圖像，除非這個圖像能超越僅用文字的表達方式。總之，當設計超檔案網頁時，圖像可以是用來傳達你的觀念的有效的方式。但是，一定要注意整合圖像，文字與其相關內容，以創造一個整體性的網頁是重要的一件事。
文字的運用
無論是在哪一種版面配置中，文字都同時扮演了內文與網頁上的圖像元素這兩種角色，前面對色彩、圖像對齊等規則的建議，同時也都適用於文字。
1、文字為設計基本元素
在一開始學習版面設計時，你最好不要拿有意涵的內文來用在你的版面上，你可試著把文字看做編織紋路，因為在討論網頁設計與排版時，文字的實際內容並不重要。當然，對一個網頁設計來說，經過校對而沒有任何文法或錯字的文字內容是很基本必須的。為了將文字當作一個設計元素來討論，我們要注意文字區塊的形狀與版面安排方式上面。
2、水平與垂直排列
無論你是否在網頁中運用了隱藏的格線，你都應該將文字區塊的邊緣跟你的圖形框線或是網頁上的其他元素對齊。當然有時也會有效果不錯的穿插著的文字，但它必須跟其他元素達到良好的平衡，讓人覺得那是經過特意設計的，而不是一個設計錯誤。HTML 語法中的表格功能，讓網頁設計者更能夠隨意地控制文字的置中或對齊，而注意頁面的規格與文字區塊的寬度之間的關係，也是很重要的。
3、字型的運用要有統一性
要有效地使用字型與字型，設立一個規則並切實地遵守。例如，所有的英文書名都使用斜體字，所有的副標題字型都設為四級的大小，諸如此類的用法。這能讓觀眾從文字型裁的式樣，快速地了解網頁的文字內容。
4、標題字的運用
如果你用標題或是較大字型的格式來作為對某一頁的快速導覽，那么觀眾通常就能很快地找到他們要的資訊。HTML 提供了從〈Hl〉到〈H6〉的旗標，來控制字型的大小，從一號到六號，其中一號代表最大的字型。所有的瀏覽器都支援這組旗標，不過實際上的字型大小多少會有些出入。另一種製作標題的方式就是用〈FONT SIZE = 4〉．．．〈/ FONT〉這組旗標，來設定字型的大小。這種方式在沒有分段符號的情況下較具彈性，而你也可以用它來改變某一行的字型大小。
5、反鋸齒狀與鋸齒狀的文字
既然我們所做的是用在熒幕上的設計，那就難免會受到熒幕解析度的限制，在大部分的個人電腦以及麥金塔的標準解析度熒幕上，我們都可以清楚地以肉眼看出組成文字的像素，﹝尤其是有稜有角的字，如 W﹞，這對大標題以及斜體字的使用來說，是一個頗大的困擾。一般來說，這對 SGIs 及 SUN 的工作站熒幕則不是問題，因為他們有較高的解析度。有時你也許會使用反鋸齒文字﹝即無鋸齒線﹞，在這種情況下，你必須創造出一個包含這項文字的圖形，當然，這是一種妥協，你想要增加你的字型品質，就得要花費較多的下載時間。有時你對格式的要求超出 HTML 所能提供的功能，例如想要讓文字機動性地環繞著圖像、具層次感、或是使用特殊字型等等，這時最好的方法大概就是把文字轉換成圖像的形式了，你可以以一種較低位元的格式儲存你的文字，來減少檔案傳輸所需要的時間。
6、可讀性的問題
雖然我們已有許多種方式可以控制格式，但在字型變化的能力上則仍有待努力。由於平台之間相容性的問題，使得我們只能使用平台間某些共同的字型。雖然使用者能設定瀏覽器的預設字型，但是選擇並不多。基本的選擇就是非比例﹝non-proportional﹞﹝即所有的字元都具有一樣的字元空間﹞，以及比例（proportional﹞字型。後者較容易閱讀，但前者在行列的設計上有比較好的效果。﹝PRE﹞這個旗標除了注意到文字中的空白鍵以外，它也是以一種非比例的方式排列。
7、文章與字型的整合
﹝FONTFASE=" "﹞的旗標讓網頁設計者得以直接指定字型，雖然這讓網頁能夠以一種比較有創造性的方式處理格式，但是當所指定的字型只在某些平台上受到支援時，它就常常會變成無效的設定。這種規格挑戰了 WWW 的跨平台原理，它也為下一代的 WWW 對字型之支援的發展鋪路。據說 Microsoft 將要推出一種方式，機動地讓 HTML 所指定的字型隨檔案一同下載並嵌入。基本上，字型下載的方式讓 Miocrosoft 得以將嵌入的壓縮過的字型套用在 HTML 檔案中，這項技術並不支援 Postscript 字型，它把字型的基本資料與專用的提示嵌入於檔案中，而這樣技術將只適用於 TrueType 字型，跨平台瀏覽器之間的支援是這項技術的一大問題。 Netscape 也宣布將要引進使用 Bitstream TrueDoc 技術的動態字型支援，據說 TrueDoc 同時可支援 TrueType 和 Postscript 兩種字型，並且能夠跨平台作用，它的原理類似 Microsof t把壓縮為適當容量的字型嵌入於檔案中的原理，除了包含大綱與提示以外，它也以高解析度記錄了字元原始字型的形狀，並創造出它自己附屬於檔案的特定提示，TrueDoc 也提供了反鋸齒邊以及數位過濾的功能。看起來，新的技術將能免除將字型轉換成圖像的麻煩。
8、英文大寫字型的運用
在打字機的年代，我們對文字的格式並沒有什麼選擇性，當我們想要讓某些文字看起來格外醒目時，我們通常會用大寫來打每一個字母。但現在再也不需要這樣做了。雖然我們並沒有很大量的字型可以選擇，但我們的確可以使用一些字型來取代使用大寫的方式。在聊天室或是電子郵件里，當你全部使用大寫時，這會被認為是在大聲嚷嚷，當你有重要的話要說而用這樣的態度，不但太過粗魯，另外一方面全部大寫的字也會讓人不易閱讀。我們通常依照一個字的形狀來辨識它，而很少會一個字母一個字母地去拼出〝the″這個字，我們很快速地認出這個字並繼續閱讀下面的文字。當全部使用大寫時，每個字看起來就會變成一樣的形狀，只是長度不同罷了，這會讓文字的可讀性大大地降低。
9、瀏覽器與文字
人們就像一個瀏覽器，我們掃視過許多畫面，但是只對其中很小的部分加以注意。當我們在網頁之間移動時，不太可能在每個地方都停下來逐字逐句地讀，閱讀電腦熒幕上的文字要比閱讀紙上的文字困難得多，這是因為眼睛容易緊繃著，而且電腦熒幕的位置也會造成影響。使用筆記型電腦可能可以讓你安坐在躺椅里閱讀，但是它的解析度和顯示技術卻又讓人在閱讀大量文字時更吃不消。一般來說，要閱讀一個以文字為主的網站是不太容易的，因為人們通常並不想花費太多的時間在閱讀一個網站的檔案上，因此，保持訊息的簡明，並控制文字的量是很重要的。對網頁作適當的格式化安排，讓它可以被印出來並且讓人們能夠不必經由電腦閱讀它。如果你有許多文字資訊，那么把它們拆成幾頁，用目錄或大綱的形式讓使用者可以依照自己的進度依序閱讀。一般原則是，一個網頁的長度最好不要超過熒幕高度的三倍。
10、運用小字塊
將一大塊的文字分割成幾個較容易控制的小區塊也是不錯的方式，使用分隔設定號、圖形，或是在段與段之間加以分隔，能夠讓人在視覺上稍作休息，再繼續讀下一段文字。一段簡短的文字是要比一大塊沒有間斷的文字要容易閱讀得多。
11、文字與互動設計
文字可以以多種形式來增進互動性，除了超連結功能外，也可以讓觀眾自己輸入資訊，而有不同的體驗。
內文設計部份
1、每一行文字的長度
1.最好 25 到 35 箇中文字﹝50 到 70 個英文字母﹞
2、行距與字距
1.行距與字距已由軟體內定。設計者能以段落與段落間空行，及首行
縮排方式以輔助閱讀。
3、字型大小
1.標題以 H1 到 H3 為佳，內文 font size = 3 到 4 級為佳。
4、同版面的字型
1.三種字型以內。
5、文字的顏色
1.三種顏色以內。
6、已選過的文字
1.在顏色上要能與未選過之文字連結點辨別，也要與背景區分。
7、內文的排列
1.向左對齊並與左邊界保持適當距離。可以善用表格填入文字以達此
效果。
8、表格或清單內的字
1.運用相同字型與字型大小，以利辨別。
