網(wǎng)頁(yè)的構(gòu)成及正文頁(yè)的設(shè)計(jì).ppt

1、網(wǎng)頁(yè)的構(gòu)成及正文頁(yè)的設(shè)計(jì),寧良紅 2011/10,正文頁(yè)是新聞或信息進(jìn)行完整展示的頁(yè)面，直接關(guān)系到新聞與信息傳達(dá)的質(zhì)量。 “等一下”葛瑞蒂，月亮還沒(méi)有升起來(lái)。等到月亮升起來(lái)，才能看到我灑的面包屑，面包屑會(huì)告訴我們回家的路。韓森與葛瑞蒂,目錄,網(wǎng)頁(yè)的構(gòu)成,1、頁(yè)面標(biāo)題 標(biāo)題位置：出現(xiàn)在瀏覽器的標(biāo)題欄中 功能作用：反映網(wǎng)頁(yè)的主要內(nèi)容，便于搜索引擎搜索。 編輯方法：將標(biāo)題內(nèi)容插入在HTML文檔中的title和/title之間。,網(wǎng)頁(yè)的構(gòu)成,2、網(wǎng)站標(biāo)志 標(biāo)志位置：一般放在顯要的位置，通常在頁(yè)眉的前部。 標(biāo)志功能：一是進(jìn)行網(wǎng)站鏈接；二是體現(xiàn)網(wǎng)站特色及文化內(nèi)涵。 制作要求：符合國(guó)際標(biāo)準(zhǔn)、精美獨(dú)特、與網(wǎng)站

2、的整體風(fēng)格相融。 尺寸標(biāo)準(zhǔn)： 88*31； 120*60； 120*90； 468*60,網(wǎng)頁(yè)的構(gòu)成,3、導(dǎo)航欄 顯示位置：可以設(shè)置導(dǎo)航欄顯示在網(wǎng)頁(yè)的頂部、底部、左側(cè)、右側(cè)。 功能作用：添加分類(lèi)信息，提供到網(wǎng)站不同區(qū)域的鏈接。 制作要求：導(dǎo)航清晰合理，鏈接關(guān)系正確，變更擴(kuò)展方便。,網(wǎng)頁(yè)的構(gòu)成,4、主內(nèi)容區(qū) 功能作用：是網(wǎng)頁(yè)的主體元素，一般放置二級(jí)鏈接內(nèi)容的標(biāo)題、提要、摘錄。 表現(xiàn)原則：合理分割板塊，文字與圖片配合巧妙、文字和背景和諧對(duì)比。 排布原則：符合視覺(jué)流動(dòng)習(xí)慣，重要的內(nèi)容排在左部、上部。,網(wǎng)頁(yè)的構(gòu)成,5、頁(yè)腳 頁(yè)腳位置：位于網(wǎng)頁(yè)的最底部，和頁(yè)頭相呼應(yīng)。 作用功能：標(biāo)注站點(diǎn)所屬公司名稱(chēng)、地

3、址，網(wǎng)站版權(quán)、制作者信息。 制作要求：文字清晰簡(jiǎn)潔，字號(hào)小于正文。,正文頁(yè)的設(shè)計(jì),1、頁(yè)面的要素 正文頁(yè)最注重的是閱讀的舒適度與傳遞信息的質(zhì)量，而字體、字號(hào)、顏色等這些基本的設(shè)計(jì)元素，正是影響以上效果的重要因素。 網(wǎng)絡(luò)頁(yè)面的要素包括：字體字號(hào)、點(diǎn)線面、色彩、圖表、音頻、視頻、超鏈接、空白等。 字體：目前，網(wǎng)頁(yè)上的字體默認(rèn)為宋體。有些設(shè)計(jì)者喜歡圓體字，但是圓體字的拐彎處呈圓弧狀，這使字跡看上去不清晰。宋體在報(bào)紙版面上常被用作正文字體。在網(wǎng)頁(yè)上，很多網(wǎng)站的新聞?wù)暮托侣剺?biāo)題都采用宋體，只是用字號(hào)的大小來(lái)加以區(qū)分。 字號(hào)：11點(diǎn)左右大小的字比較適合閱讀。報(bào)紙上新聞?wù)某Ｓ梦逄?hào)字或小五號(hào)字，標(biāo)題字號(hào)常

4、用到50磅以上。在網(wǎng)頁(yè)上，新聞?wù)某Ｓ玫淖痔?hào)也是五號(hào)字，有時(shí)為了閱讀方便，用小四號(hào)字；正文里的標(biāo)題常用小二號(hào)字，或20磅字。 色彩：白底黑字或白底藍(lán)字是比較適合的。 音頻、視頻：例：,正文頁(yè)的設(shè)計(jì),2、頁(yè)面長(zhǎng)度的控制 一個(gè)新聞?wù)捻?yè)占幾個(gè)屏大小較為合適。 如果一次瀏覽只呈現(xiàn)一屏內(nèi)容，那么基本上是不能在一屏完整體現(xiàn)這篇新聞的所有內(nèi)容。 有些設(shè)計(jì)者喜歡設(shè)置N個(gè)分頁(yè)，一方面它所包含的內(nèi)容比較多，另一方面多個(gè)分頁(yè)可以提高點(diǎn)擊量。但是，網(wǎng)民往往不喜歡過(guò)多的分頁(yè)，這樣做往往事倍功半。例：網(wǎng)民關(guān)于多圖分頁(yè)的體驗(yàn),正文頁(yè)的設(shè)計(jì),3、頁(yè)面布局結(jié)構(gòu) 以標(biāo)題正文型的布局結(jié)構(gòu) T型布局：左側(cè)是新聞?wù)模覀?cè)是推薦內(nèi)容

5、及廣告。（喬布斯新聞）,正文頁(yè)的設(shè)計(jì),4、頁(yè)面附加內(nèi)容 正文頁(yè)除了承載新聞?wù)耐?，通常還有一些附加內(nèi)容。這些內(nèi)容雖然不一定與新聞稿件有直接的聯(lián)系，但是他們充分利用了正文的空間，是網(wǎng)站想要推薦的內(nèi)容有更多的展示區(qū)域。主要包括： 網(wǎng)站重點(diǎn)推薦的新聞 網(wǎng)站重點(diǎn)推薦的專(zhuān)題 網(wǎng)站重點(diǎn)推薦的博客和熱帖 廣告,網(wǎng)頁(yè)藍(lán)圖的規(guī)劃,在制作網(wǎng)頁(yè)之前應(yīng)當(dāng)繪制其藍(lán)圖，這好比造一座高樓，首先要設(shè)計(jì)好框架圖紙，才能使樓房結(jié)構(gòu)合理。網(wǎng)頁(yè)的藍(lán)圖規(guī)劃大致需要經(jīng)過(guò)構(gòu)思、繪制、實(shí)施、調(diào)整的過(guò)程。這過(guò)程實(shí)際上是一個(gè)相互影響的過(guò)程，如由于某個(gè)藍(lán)圖規(guī)劃因技術(shù)限制原因而無(wú)法實(shí)現(xiàn)，則需要重新調(diào)整網(wǎng)頁(yè)的藍(lán)圖。所以網(wǎng)頁(yè)構(gòu)圖規(guī)劃的過(guò)程會(huì)有反復(fù)或重復(fù)

6、。網(wǎng)頁(yè)藍(lán)圖的規(guī)劃流程如下圖所示：,網(wǎng)頁(yè)藍(lán)圖的規(guī)劃,在制作網(wǎng)頁(yè)之前應(yīng)當(dāng)繪制其藍(lán)圖，這好比造一座高樓，首先要設(shè)計(jì)好框架圖紙，才能使樓房結(jié)構(gòu)合理。網(wǎng)頁(yè)的藍(lán)圖規(guī)劃大致需要經(jīng)過(guò)構(gòu)思、繪制、實(shí)施、調(diào)整的過(guò)程。這過(guò)程實(shí)際上是一個(gè)相互影響的過(guò)程，如由于某個(gè)藍(lán)圖規(guī)劃因技術(shù)限制原因而無(wú)法實(shí)現(xiàn)，則需要重新調(diào)整網(wǎng)頁(yè)的藍(lán)圖。所以網(wǎng)頁(yè)構(gòu)圖規(guī)劃的過(guò)程會(huì)有反復(fù)或重復(fù)。網(wǎng)頁(yè)藍(lán)圖的規(guī)劃流程如下圖所示：,網(wǎng)頁(yè)藍(lán)圖的規(guī)劃,1、構(gòu)思網(wǎng)頁(yè)藍(lán)圖 構(gòu)思相當(dāng)重要，將決定網(wǎng)頁(yè)創(chuàng)意是否成功。在構(gòu)思過(guò)程中要充分發(fā)揮藝術(shù)想象力，同時(shí)要遵循以下布局原則： 網(wǎng)頁(yè)亮點(diǎn)布局原則將具有視覺(jué)引力的網(wǎng)頁(yè)元素（如走馬燈、 廣告、動(dòng)畫(huà)）放在網(wǎng)頁(yè)的左上方，加深瀏覽者的印

7、象。 網(wǎng)頁(yè)主體布局原則將網(wǎng)頁(yè)的主體內(nèi)容、有精華板塊排放在比較顯眼的位置，使瀏覽者易于找到這些內(nèi)容。 功能板塊布局原則將功能板塊（如搜索引擎、 郵件列表、網(wǎng)上調(diào)查、會(huì)員登陸）放在頁(yè)面的兩側(cè)，避免影響主題。,網(wǎng)頁(yè)藍(lán)圖的規(guī)劃,2、繪制網(wǎng)頁(yè)藍(lán)圖 根據(jù)網(wǎng)頁(yè)布局原則將頭腦中構(gòu)思的藍(lán)圖繪制出來(lái)，用一張白紙和一支鉛筆，僅以粗陋的線條勾畫(huà)出創(chuàng)意的輪廓，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能。,網(wǎng)頁(yè)藍(lán)圖的規(guī)劃,3、技術(shù)實(shí)施 樣式表布局利用層疊樣式表精確的定位文本和圖片。 表格布局優(yōu)勢(shì)是能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心它們之間的影響。 框架布局把不同對(duì)象放置到不同頁(yè)面加以處理。,網(wǎng)頁(yè)藍(lán)圖的規(guī)劃,4、調(diào)整藍(lán)圖 調(diào)整藍(lán)圖時(shí)網(wǎng)頁(yè)構(gòu)圖布局與設(shè)計(jì)中最后的完善過(guò)程，當(dāng)將創(chuàng)意中的網(wǎng)頁(yè)輪廓的雛形轉(zhuǎn)化為可視化后，就應(yīng)當(dāng)綜合考慮檢查： 那些網(wǎng)頁(yè)布局使得整體上不協(xié)