網(wǎng)站靜態(tài)頁面設(shè)計(jì)

1、第6章 網(wǎng)站靜態(tài)頁面設(shè)計(jì)1本章要點(diǎn)：主頁設(shè)計(jì)欄目與版面設(shè)計(jì)頁面可視化設(shè)計(jì)靜態(tài)網(wǎng)頁制作技術(shù)2確定主頁的功能模塊設(shè)計(jì)主頁的版面 處理技術(shù)上的細(xì)節(jié) 6.1 主頁設(shè)計(jì)31、確定主頁的功能模塊網(wǎng)站名稱、廣告條、主菜單新聞、搜索、友情鏈接聯(lián)系及版權(quán)信息 等452、主頁版面設(shè)計(jì)勾畫草圖軟件實(shí)現(xiàn)3、處理技術(shù)上的細(xì)節(jié)風(fēng)格、鏈接、圖形、動(dòng)畫、文字、速度6欄目設(shè)計(jì)版面設(shè)計(jì) 6.2 欄目與版面設(shè)計(jì) 7緊扣網(wǎng)站的主題 設(shè)立一個(gè)最近更新或網(wǎng)站指南欄目 設(shè)定一個(gè)可以雙向交流的欄目 設(shè)一個(gè)下載或常見問題回答欄目 欄目與版面設(shè)計(jì) 網(wǎng)站欄目安排要注意以下幾方面：欄目設(shè)計(jì)8版面設(shè)計(jì) 欄目與版面設(shè)計(jì) 版面設(shè)計(jì)的原則版面布局的步驟 版

2、面布局的形式 版面也稱為版塊：指的是瀏覽器看到的完整的一個(gè)頁面（可以包含框架和層） 9主次分明，中心突出 大小搭配，相互呼應(yīng) 圖文并茂，相得益彰 版面設(shè)計(jì)的原則設(shè)計(jì)版面布局要做到：正常平衡 異常平衡 對(duì)比 凝視 空白 盡量用圖片解說 版面設(shè)計(jì) 布局原則：10正常平衡異常平衡對(duì)比凝視空白圖片說明11輪廓設(shè)計(jì) 布局設(shè)計(jì) 細(xì)節(jié)設(shè)計(jì) 版面布局的步驟版面設(shè)計(jì) 12“T”結(jié)構(gòu)布局 “口”型布局 “三”型布局 對(duì)稱對(duì)比布局 POP布局“國(guó)”字型 拐角型 標(biāo)題正文型 左右框架型 上下框架型綜合框架型封面型 Flash型 版面布局的形式版面設(shè)計(jì) 13色彩的基本知識(shí) 網(wǎng)頁色彩設(shè)計(jì)6.3 色彩設(shè)計(jì)14顏色的概念 色

3、彩的搭配 色彩的心理感覺 色彩的對(duì)比 色彩的區(qū)域大小和形狀 色彩的位置 色彩的基本知識(shí)15顏色 是由光的折射產(chǎn)生的。紅，黃，藍(lán)被稱為三原色，其它的色彩都可以用這三種色彩調(diào)和而成 顏色 分非彩色和彩色兩類 顏色的概念色彩的基本知識(shí)16網(wǎng)頁色彩搭配的基本原理：色彩的鮮明性色彩的獨(dú)特性 彩的合適性色彩的聯(lián)想性色彩的搭配色彩的基本知識(shí)17網(wǎng)頁配色的基本方法 網(wǎng)頁色彩設(shè)計(jì) 網(wǎng)頁色彩搭配的技巧 網(wǎng)頁色彩設(shè)計(jì)18底色和圖形色 整體色調(diào) 配色的平衡 配色時(shí)要有重點(diǎn)色 配色的節(jié)奏 漸變色的調(diào)和 在配色方面的統(tǒng)調(diào) 在配色方面的分割 網(wǎng)頁配色的基本方法網(wǎng)頁色彩設(shè)計(jì)19網(wǎng)頁內(nèi)容 網(wǎng)頁標(biāo)題 導(dǎo)航菜單 側(cè)欄 頁腳 網(wǎng)頁色

4、彩設(shè)計(jì)網(wǎng)頁色彩設(shè)計(jì)20暖色調(diào)即紅色、橙色、黃色、赭色等色彩的搭配 冷色調(diào)即青色、綠色、紫色等色彩的搭配 對(duì)比色調(diào)即把色性完全相反的色彩搭配在同一個(gè)空間里 網(wǎng)頁色彩搭配的技巧網(wǎng)頁色彩設(shè)計(jì)21 考慮人們的閱讀習(xí)慣與效果 不要用花紋繁復(fù)的圖案作背景，以便突出 主要文字內(nèi)容 定位于國(guó)際性質(zhì)的網(wǎng)站，應(yīng)該針對(duì)不同地 區(qū)訪問者，設(shè)計(jì)不同的字體 6. 4 字體設(shè)計(jì) 22網(wǎng)站導(dǎo)航要清晰，容易查找注意超鏈接顏色與單純敘述性文字的顏色區(qū)別 一般網(wǎng)頁的長(zhǎng)度不超過三個(gè)屏幕高度為佳 以文檔中關(guān)鍵的字眼作為超鏈接的錨點(diǎn) 網(wǎng)頁上傳后，逐一測(cè)試每一頁的每一個(gè)超鏈接 是否有效，以杜絕失敗的鏈接 6.5 導(dǎo)航設(shè)計(jì) 236.6 圖像

5、設(shè)計(jì)網(wǎng)頁中圖像的格式：網(wǎng)頁中圖形設(shè)計(jì)技巧 網(wǎng)頁中使用的圖像可以是GIF、JPEG、BMP、TIFF、PNG等格式的圖像文件，其中使用最廣泛主要是GIF和JPEG兩種格式24GIF 格式GIF 格式使用 8 位顏色，并在保留銳化細(xì)節(jié)（如藝術(shù)線條、徽標(biāo)或帶文字的插圖）的同時(shí)，有效地壓縮實(shí)色區(qū)域。還可以使用 GIF 格式創(chuàng)建動(dòng)畫圖像。大多數(shù)瀏覽器都支持 GIF 格式。GIF 格式使用 LZW 壓縮，它是無損耗的壓縮方法。但是，因?yàn)?GIF 文件只有 256 種顏色，故將原 24 位圖像優(yōu)化為 8 位 GIF 會(huì)導(dǎo)致顏色信息丟失。另外，Photoshop 和 ImageReady 允許對(duì) GIF 文件

6、應(yīng)用損耗壓縮。使用“損耗”選項(xiàng)可通過犧牲一定的圖像品質(zhì)來生成顯著減小的文件。25JPEG 格式 JPEG 格式支持 24 位顏色，并保留照片和其它連續(xù)色調(diào)圖像中存在的亮度和色相的顯著和細(xì)微變化。大多數(shù)瀏覽器都支持 JPEG。JPEG 通過有選擇地減少數(shù)據(jù)來壓縮文件大小。因?yàn)樗鼤?huì)棄用數(shù)據(jù)，故 JPEG 壓縮稱為損耗壓縮。較高品質(zhì)設(shè)置導(dǎo)致棄用的數(shù)據(jù)較少，但是 JPEG 壓縮方法會(huì)降低圖像中細(xì)節(jié)的清晰度，尤其是包含文字或矢量圖形的圖像。JPEG 格式不支持透明度。 266.7 動(dòng)畫設(shè)計(jì)動(dòng)畫就是在一定時(shí)間內(nèi)顯示的一系列圖像或幀。每一幀較前一幀有輕微的變化，當(dāng)連續(xù)、快速地顯示這些幀時(shí)就創(chuàng)造出運(yùn)動(dòng)的效果。

7、 GIF動(dòng)畫Flash動(dòng)畫27附：網(wǎng)站設(shè)計(jì)基礎(chǔ)語言HTMLHTML簡(jiǎn)介HTML的語法格式文件標(biāo)簽版式標(biāo)簽框架標(biāo)簽字體標(biāo)簽表格與清單標(biāo)簽表單標(biāo)簽超鏈接標(biāo)簽多媒體標(biāo)簽本節(jié)要點(diǎn)：28一、HTML簡(jiǎn)介（1）HTML語法標(biāo)記（標(biāo)簽）：以”括起來的內(nèi)容，大多成對(duì)出現(xiàn)（稱為首標(biāo)記與尾標(biāo)記），也有單一的標(biāo)記。書寫約定：不區(qū)分大小寫，忽略標(biāo)記間多余的空格與回車分類：描述頁面元素樣式的標(biāo)記：、指向其他資源的標(biāo)記：、例：這是粗體字標(biāo)記的作用：描述頁面元素的顯示方式及其他資源訪問方式屬性及其值：進(jìn)行一步提供詳細(xì)描述信息，所有屬性均放在首標(biāo)記中，多個(gè)屬性間以空格分開 如：屬性值屬性名29一、HTML簡(jiǎn)介（2）HTML頁

8、面文檔的結(jié)構(gòu)一個(gè)簡(jiǎn)單的HTML頁面 HTML文件結(jié)構(gòu) 在這里顯示文件的主體內(nèi)容。 30一、HTML簡(jiǎn)介（3）HTML標(biāo)記的結(jié)構(gòu)形態(tài)頁面元素內(nèi)容如：這是一個(gè)文本段落頁面元素內(nèi)容如：紅色字如：以內(nèi)容下?lián)Q行顯示第二行內(nèi)容31二、創(chuàng)建HTML文檔（1）準(zhǔn)備工作新建一個(gè)用于保存網(wǎng)頁及相關(guān)資料的文件夾收集網(wǎng)頁素材，復(fù)制保存在新建文件夾中畫出網(wǎng)頁草圖，安排頁面元素用工具軟件創(chuàng)建HTML文檔利用Dreamweaver MX創(chuàng)建HTML文檔新建文檔查看代碼保存文檔：文件擴(kuò)展名 *.htm 或 *.html用文本編輯軟件創(chuàng)建HTML文檔用記事本進(jìn)行HTML文檔的編輯注意：保存文件時(shí)，保存類型應(yīng)選擇“所有文件”，并

9、輸入文件全名查看保存的HTML文檔效果打開IE瀏覽器，執(zhí)行“文件打開”菜單命令32二、創(chuàng)建HTML文檔（2）在瀏覽頁面時(shí)修改HTML源文件執(zhí)行“查看源文件”菜單，調(diào)用記事本打開源代碼，欲重新查看修改后的效果只需單擊IE工具欄“刷新”按鈕。三、文件標(biāo)記（1）標(biāo)記：不是HTML文檔必須，但最好保持文檔的完整性標(biāo)記：此標(biāo)記中內(nèi)容是提供給瀏覽器的，即文件頭信息。33三、文件標(biāo)記（2）標(biāo)記可包括屬性，由此決定頁面內(nèi)容的總體顯示風(fēng)格、背景等。Text屬性：用于設(shè)定文字顏色Bgcolor屬性：設(shè)定頁面背景顏色link，alink，vlink屬性，分別用于設(shè)定頁面中超級(jí)鏈接“訪問前、正在按下時(shí)、訪問后的顏色”

10、，不設(shè)定時(shí)取默認(rèn)值（藍(lán)、紅、紫）。Background屬性：用于設(shè)定背景圖片Scroll屬性：設(shè)定瀏覽器滾動(dòng)條是否顯示，取值”yes”或 “no”，一般用于彈出式窗口34三、文件標(biāo)記（2）標(biāo)記：置于區(qū)段，用于設(shè)定瀏覽器的標(biāo)題標(biāo)記：用于描述HTML文檔相關(guān)信息。如編輯器類型，字符集等，通常用來為搜索引擎定義頁面關(guān)鍵字常見屬性： Name和content屬性：指定“網(wǎng)頁描述”類型及相應(yīng)值http-equiv和content屬性：指定HTTP響應(yīng)頭標(biāo)及相應(yīng)值舉例：35四、排版標(biāo)記功能：實(shí)現(xiàn)頁面的版式編排，應(yīng)用廣泛，兼容性強(qiáng)。主要有以下標(biāo)記：注釋標(biāo)記：段落標(biāo)記：換行標(biāo)記：水平線標(biāo)記：預(yù)設(shè)格式標(biāo)記區(qū)段標(biāo)

11、記36：注釋標(biāo)記注釋格式：段落標(biāo)記標(biāo)記標(biāo)記Size屬性：設(shè)置水平線高度，以像素為單位width屬性：設(shè)置水平線寬度，以像素為單位，也可以視窗的百分比為寬度。Align屬性：設(shè)置水平線水平對(duì)齊方式，可取值：left、right、centerColor屬性：指定水平線顏色Noshade屬性：無需設(shè)置屬性值，設(shè)置水平線無陰影。Title屬性：用于設(shè)置水平線在鼠標(biāo)指向時(shí)的提示說明標(biāo)記區(qū)段標(biāo)記Align屬性：取值left、right 、center37五、框架標(biāo)記功能：實(shí)現(xiàn)頁面的框架分割，一般多用于在頁面需保留一部分信息的情況下。 框架集標(biāo)記：定義框架內(nèi)部的基本結(jié)構(gòu)Rows屬性：設(shè)置橫向分割窗口的比例（

12、框架頁的高度），可以是像素值，也可為%，* 代表剩余高度如Cols屬性：用于設(shè)置縱向分割窗口的比例Border屬性：設(shè)置框邊界寬度，以像素為單位Bordercolor屬性：設(shè)置框邊界顏色。38框架內(nèi)容標(biāo)記Src屬性：指定當(dāng)前框架中顯示的頁面文件Name屬性：設(shè)置框架名稱標(biāo)記用于設(shè)置不支持frame時(shí)頁面顯示的信息如在含有框架的HTML頁面中加入 對(duì)不起，你的瀏覽器不支持frame!39六、字體標(biāo)記功能：用于設(shè)定字體的大小、粗線、顏色等：粗體：加強(qiáng)語氣（一般通過加粗來實(shí)現(xiàn)，視不同瀏覽器面有所不同）（?。ù螅?biāo)題標(biāo)記下劃線標(biāo)記刪除線標(biāo)記下標(biāo)標(biāo)記與上標(biāo)標(biāo)記40字體標(biāo)記Face屬性：用于指定字體，多

13、個(gè)字體用逗號(hào)分隔，默認(rèn)字體中文為“宋體”，英文“Times New Roman” Color屬性：設(shè)置文字顏色，屬性值可以為顏色英文代碼，也可為RGB顏色代碼（#rrggbb）rr、gg、bb分別表示紅、綠、藍(lán)三原色代碼，取值00FF如：紅字 紅字Size屬性：設(shè)置字號(hào)，取值1（大）7（小），默認(rèn)為3，41七、項(xiàng)目清單與表格標(biāo)記一個(gè)項(xiàng)目清單實(shí)例、 與 標(biāo)記（unordered list）無序清單標(biāo)記（ordered list）有序清單標(biāo)記例：無序列表有序列表無序項(xiàng)目1 有序項(xiàng)目1無序項(xiàng)目2有序項(xiàng)目2 42表格完整代碼示例 第一行第一列第一行第二列 第二行第一列第二行第二列 第一行第一列第一行第

14、二列第二行第一列第二行第二列構(gòu)成表格的一行構(gòu)成表格的一列43、標(biāo)記標(biāo)記：表格開始與結(jié)束標(biāo)記border屬性：表格邊線寬度，以像素為單位，為0時(shí)不顯示表格線Cellpadding屬性：設(shè)置單元格內(nèi)容與邊線之間空間，默認(rèn)值為1Cellspacing屬性：表格內(nèi)單元格之間的距離。默認(rèn)值為2Width 屬性：表格寬度，可以為像素值和%兩種形式Height屬性：表格高度，可以為像素值和%兩種形式Align屬性：水平對(duì)齊方式，取值left、right、centerValign屬性：垂直對(duì)齊方式，取值top、center、bottomBgcolor屬性：表格背景色Bordercolor屬性：表格邊界線顏色B

15、ordercolorlight與bordercolordark屬性：三維表格亮色與暗色顏色Background屬性：表格背景圖片表格行開始與結(jié)束標(biāo)記單元格開始與結(jié)束標(biāo)記說明：表格標(biāo)記屬性較多。設(shè)置較復(fù)雜，一般先通過軟件生成，于細(xì)節(jié)處利用代碼修改44八、表單標(biāo)記功能：用于提供與用戶交互，收集用戶信息，通常需配合CGI、ASP等服務(wù)器端Web程序來實(shí)現(xiàn)。一個(gè)表單實(shí)例表單標(biāo)記Action屬性：指定表單處理程序，其值為一個(gè)服務(wù)器端Web程序URL。Method屬性：指定數(shù)據(jù)傳遞的方法，取值為get或postName屬性：指定表單名稱，區(qū)分不同表單，及便于其他程序調(diào)用。45表單元素標(biāo)記詳釋輸入標(biāo)記nam

16、e屬性：表單元素名稱type屬性：反映不同類型輸入項(xiàng)目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：復(fù)選框RADIO：?jiǎn)芜x按鈕SUBMIT：提交按鈕RESET：復(fù)位按鈕IMAGE：圖像按鈕HIDDEN：隱藏表單組件Value屬性：表單元素初始值46下拉列表標(biāo)記選項(xiàng)標(biāo)記，置于區(qū)段內(nèi)Selected屬性：默認(rèn)選項(xiàng)，無屬性值Value屬性：設(shè)置選項(xiàng)被選中后提交的內(nèi)容，默認(rèn)為之間顯示的內(nèi)容多行文本框標(biāo)記Rows屬性：設(shè)定textarea輸入框行數(shù)Cols屬性：textarea輸入框列數(shù)47九、超鏈接標(biāo)記功能：提供瀏覽者在不同Web頁面進(jìn)行跳轉(zhuǎn)標(biāo)記（anchor）Href屬性：設(shè)定鏈接目標(biāo)文件，一般為一URL地址或本地Web路徑文件例：鏈接到本地Web網(wǎng)頁：回首頁 鏈接到本地Web路徑下一普通文件： 軟件下載鏈接到本地Web路徑下一圖片：打開我的照片鏈接到internet上某一網(wǎng)站：搜狐網(wǎng)鏈接到電子郵件地址：給我寫信48鏈接到Web頁面中特定結(jié)點(diǎn)（稱為