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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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