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

網(wǎng)站靜態(tài)頁(yè)面設(shè)計(jì)1第1頁(yè)，共50頁(yè)，2023年，2月20日，星期六本章要點(diǎn)：主頁(yè)設(shè)計(jì)欄目與版面設(shè)計(jì)頁(yè)面可視化設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)制作技術(shù)2第2頁(yè)，共50頁(yè)，2023年，2月20日，星期六確定主頁(yè)的功能模塊設(shè)計(jì)主頁(yè)的版面處理技術(shù)上的細(xì)節(jié)

6.1主頁(yè)設(shè)計(jì)3第3頁(yè)，共50頁(yè)，2023年，2月20日，星期六1、確定主頁(yè)的功能模塊網(wǎng)站名稱、廣告條、主菜單新聞、搜索、友情鏈接聯(lián)系及版權(quán)信息等4第4頁(yè)，共50頁(yè)，2023年，2月20日，星期六5第5頁(yè)，共50頁(yè)，2023年，2月20日，星期六2、主頁(yè)版面設(shè)計(jì)勾畫草圖—軟件實(shí)現(xiàn)3、處理技術(shù)上的細(xì)節(jié)風(fēng)格、鏈接、圖形、動(dòng)畫、文字、速度6第6頁(yè)，共50頁(yè)，2023年，2月20日，星期六欄目設(shè)計(jì)版面設(shè)計(jì)

6.2欄目與版面設(shè)計(jì)

7第7頁(yè)，共50頁(yè)，2023年，2月20日，星期六緊扣網(wǎng)站的主題設(shè)立一個(gè)最近更新或網(wǎng)站指南欄目設(shè)定一個(gè)可以雙向交流的欄目設(shè)一個(gè)下載或常見(jiàn)問(wèn)題回答欄目

欄目與版面設(shè)計(jì)

網(wǎng)站欄目安排要注意以下幾方面：欄目設(shè)計(jì)8第8頁(yè)，共50頁(yè)，2023年，2月20日，星期六版面設(shè)計(jì)

欄目與版面設(shè)計(jì)

版面設(shè)計(jì)的原則版面布局的步驟版面布局的形式

版面也稱為版塊：指的是瀏覽器看到的完整的一個(gè)頁(yè)面（可以包含框架和層）

9第9頁(yè)，共50頁(yè)，2023年，2月20日，星期六主次分明，中心突出大小搭配，相互呼應(yīng)圖文并茂，相得益彰版面設(shè)計(jì)的原則設(shè)計(jì)版面布局要做到：正常平衡異常平衡對(duì)比凝視空白盡量用圖片解說(shuō)版面設(shè)計(jì)

布局原則：10第10頁(yè)，共50頁(yè)，2023年，2月20日，星期六正常平衡異常平衡對(duì)比凝視空白圖片說(shuō)明11第11頁(yè)，共50頁(yè)，2023年，2月20日，星期六輪廓設(shè)計(jì)布局設(shè)計(jì)細(xì)節(jié)設(shè)計(jì)版面布局的步驟版面設(shè)計(jì)

12第12頁(yè)，共50頁(yè)，2023年，2月20日，星期六“T”結(jié)構(gòu)布局

“口”型布局

“三”型布局

對(duì)稱對(duì)比布局

POP布局“國(guó)”字型

拐角型

標(biāo)題正文型

左右框架型

上下框架型綜合框架型封面型

Flash型

版面布局的形式版面設(shè)計(jì)

13第13頁(yè)，共50頁(yè)，2023年，2月20日，星期六色彩的基本知識(shí)網(wǎng)頁(yè)色彩設(shè)計(jì)6.3色彩設(shè)計(jì)14第14頁(yè)，共50頁(yè)，2023年，2月20日，星期六顏色的概念色彩的搭配色彩的心理感覺(jué)色彩的對(duì)比色彩的區(qū)域大小和形狀色彩的位置色彩的基本知識(shí)15第15頁(yè)，共50頁(yè)，2023年，2月20日，星期六顏色是由光的折射產(chǎn)生的。紅，黃，藍(lán)被稱為三原色，其它的色彩都可以用這三種色彩調(diào)和而成

顏色分非彩色和彩色兩類

顏色的概念色彩的基本知識(shí)16第16頁(yè)，共50頁(yè)，2023年，2月20日，星期六網(wǎng)頁(yè)色彩搭配的基本原理：色彩的鮮明性色彩的獨(dú)特性彩的合適性色彩的聯(lián)想性色彩的搭配色彩的基本知識(shí)17第17頁(yè)，共50頁(yè)，2023年，2月20日，星期六網(wǎng)頁(yè)配色的基本方法網(wǎng)頁(yè)色彩設(shè)計(jì)網(wǎng)頁(yè)色彩搭配的技巧網(wǎng)頁(yè)色彩設(shè)計(jì)18第18頁(yè)，共50頁(yè)，2023年，2月20日，星期六底色和圖形色整體色調(diào)配色的平衡配色時(shí)要有重點(diǎn)色配色的節(jié)奏漸變色的調(diào)和在配色方面的統(tǒng)調(diào)在配色方面的分割網(wǎng)頁(yè)配色的基本方法網(wǎng)頁(yè)色彩設(shè)計(jì)19第19頁(yè)，共50頁(yè)，2023年，2月20日，星期六網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)標(biāo)題導(dǎo)航菜單側(cè)欄頁(yè)腳網(wǎng)頁(yè)色彩設(shè)計(jì)網(wǎng)頁(yè)色彩設(shè)計(jì)20第20頁(yè)，共50頁(yè)，2023年，2月20日，星期六暖色調(diào)即紅色、橙色、黃色、赭色等色彩的搭配冷色調(diào)即青色、綠色、紫色等色彩的搭配對(duì)比色調(diào)即把色性完全相反的色彩搭配在同一個(gè)空間里網(wǎng)頁(yè)色彩搭配的技巧網(wǎng)頁(yè)色彩設(shè)計(jì)21第21頁(yè)，共50頁(yè)，2023年，2月20日，星期六考慮人們的閱讀習(xí)慣與效果不要用花紋繁復(fù)的圖案作背景，以便突出主要文字內(nèi)容定位于國(guó)際性質(zhì)的網(wǎng)站，應(yīng)該針對(duì)不同地區(qū)訪問(wèn)者，設(shè)計(jì)不同的字體

6.4字體設(shè)計(jì)

22第22頁(yè)，共50頁(yè)，2023年，2月20日，星期六網(wǎng)站導(dǎo)航要清晰，容易查找注意超鏈接顏色與單純敘述性文字的顏色區(qū)別一般網(wǎng)頁(yè)的長(zhǎng)度不超過(guò)三個(gè)屏幕高度為佳以文檔中關(guān)鍵的字眼作為超鏈接的錨點(diǎn)網(wǎng)頁(yè)上傳后，逐一測(cè)試每一頁(yè)的每一個(gè)超鏈接是否有效，以杜絕失敗的鏈接6.5導(dǎo)航設(shè)計(jì)

23第23頁(yè)，共50頁(yè)，2023年，2月20日，星期六6.6圖像設(shè)計(jì)網(wǎng)頁(yè)中圖像的格式：網(wǎng)頁(yè)中圖形設(shè)計(jì)技巧

網(wǎng)頁(yè)中使用的圖像可以是GIF、JPEG、BMP、TIFF、PNG等格式的圖像文件，其中使用最廣泛主要是GIF和JPEG兩種格式24第24頁(yè)，共50頁(yè)，2023年，2月20日，星期六GIF格式GIF格式使用8位顏色，并在保留銳化細(xì)節(jié)（如藝術(shù)線條、徽標(biāo)或帶文字的插圖）的同時(shí)，有效地壓縮實(shí)色區(qū)域。還可以使用GIF格式創(chuàng)建動(dòng)畫圖像。大多數(shù)瀏覽器都支持GIF格式。GIF格式使用LZW壓縮，它是無(wú)損耗的壓縮方法。但是，因?yàn)镚IF文件只有256種顏色，故將原24位圖像優(yōu)化為8位GIF會(huì)導(dǎo)致顏色信息丟失。另外，Photoshop和ImageReady允許對(duì)GIF文件應(yīng)用損耗壓縮。使用“損耗”選項(xiàng)可通過(guò)犧牲一定的圖像品質(zhì)來(lái)生成顯著減小的文件。25第25頁(yè)，共50頁(yè)，2023年，2月20日，星期六JPEG格式JPEG格式支持24位顏色，并保留照片和其它連續(xù)色調(diào)圖像中存在的亮度和色相的顯著和細(xì)微變化。大多數(shù)瀏覽器都支持JPEG。JPEG通過(guò)有選擇地減少數(shù)據(jù)來(lái)壓縮文件大小。因?yàn)樗鼤?huì)棄用數(shù)據(jù)，故JPEG壓縮稱為損耗壓縮。較高品質(zhì)設(shè)置導(dǎo)致棄用的數(shù)據(jù)較少，但是JPEG壓縮方法會(huì)降低圖像中細(xì)節(jié)的清晰度，尤其是包含文字或矢量圖形的圖像。JPEG格式不支持透明度。26第26頁(yè)，共50頁(yè)，2023年，2月20日，星期六6.7動(dòng)畫設(shè)計(jì)動(dòng)畫就是在一定時(shí)間內(nèi)顯示的一系列圖像或幀。每一幀較前一幀有輕微的變化，當(dāng)連續(xù)、快速地顯示這些幀時(shí)就創(chuàng)造出運(yùn)動(dòng)的效果。GIF動(dòng)畫Flash動(dòng)畫27第27頁(yè)，共50頁(yè)，2023年，2月20日，星期六附：網(wǎng)站設(shè)計(jì)基礎(chǔ)語(yǔ)言HTMLHTML簡(jiǎn)介HTML的語(yǔ)法格式文件標(biāo)簽版式標(biāo)簽框架標(biāo)簽字體標(biāo)簽表格與清單標(biāo)簽表單標(biāo)簽超鏈接標(biāo)簽多媒體標(biāo)簽本節(jié)要點(diǎn)：28第28頁(yè)，共50頁(yè)，2023年，2月20日，星期六一、HTML簡(jiǎn)介（1）HTML語(yǔ)法標(biāo)記（標(biāo)簽）：以”<”、”>”括起來(lái)的內(nèi)容，大多成對(duì)出現(xiàn)（稱為首標(biāo)記與尾標(biāo)記），也有單一的標(biāo)記。書(shū)寫約定：不區(qū)分大小寫，忽略標(biāo)記間多余的空格與回車分類：描述頁(yè)面元素樣式的標(biāo)記：<body>、<p>、<h1>指向其他資源的標(biāo)記：<img>、<a>例：這是<b>粗體</b>字標(biāo)記的作用：描述頁(yè)面元素的顯示方式及其他資源訪問(wèn)方式屬性及其值：進(jìn)行一步提供詳細(xì)描述信息，所有屬性均放在首標(biāo)記中，多個(gè)屬性間以空格分開(kāi)如：<imgsrc=logo.gifwidth=520height=81>屬性值屬性名29第29頁(yè)，共50頁(yè)，2023年，2月20日，星期六一、HTML簡(jiǎn)介（2）HTML頁(yè)面文檔的結(jié)構(gòu)一個(gè)簡(jiǎn)單的HTML頁(yè)面<html>

<head>

<title>HTML文件結(jié)構(gòu)</title>

</head>

<body>

在這里顯示文件的主體內(nèi)容。

</body></html>30第30頁(yè)，共50頁(yè)，2023年，2月20日，星期六一、HTML簡(jiǎn)介（3）HTML標(biāo)記的結(jié)構(gòu)形態(tài)<標(biāo)記>頁(yè)面元素內(nèi)容</標(biāo)記>如：<p>這是一個(gè)文本段落</p><標(biāo)記屬性名=“屬性值”>頁(yè)面元素內(nèi)容</標(biāo)記>如：<fontcolor=“red”>紅色字</font><標(biāo)記>如：以內(nèi)容下?lián)Q行顯示<br>第二行內(nèi)容31第31頁(yè)，共50頁(yè)，2023年，2月20日，星期六二、創(chuàng)建HTML文檔（1）準(zhǔn)備工作新建一個(gè)用于保存網(wǎng)頁(yè)及相關(guān)資料的文件夾收集網(wǎng)頁(yè)素材，復(fù)制保存在新建文件夾中畫出網(wǎng)頁(yè)草圖，安排頁(yè)面元素用工具軟件創(chuàng)建HTML文檔利用DreamweaverMX創(chuàng)建HTML文檔新建文檔查看代碼保存文檔：文件擴(kuò)展名*.htm或*.html用文本編輯軟件創(chuàng)建HTML文檔用記事本進(jìn)行HTML文檔的編輯注意：保存文件時(shí)，保存類型應(yīng)選擇“所有文件”，并輸入文件全名查看保存的HTML文檔效果打開(kāi)IE瀏覽器，執(zhí)行“文件—打開(kāi)”菜單命令32第32頁(yè)，共50頁(yè)，2023年，2月20日，星期六二、創(chuàng)建HTML文檔（2）在瀏覽頁(yè)面時(shí)修改HTML源文件執(zhí)行“查看—源文件”菜單，調(diào)用記事本打開(kāi)源代碼，欲重新查看修改后的效果只需單擊IE工具欄“刷新”按鈕。三、文件標(biāo)記（1）<html></html>標(biāo)記：不是HTML文檔必須，但最好保持文檔的完整性<head></head>標(biāo)記：此標(biāo)記中內(nèi)容是提供給瀏覽器的，即文件頭信息。33第33頁(yè)，共50頁(yè)，2023年，2月20日，星期六三、文件標(biāo)記（2）<body>標(biāo)記可包括屬性，由此決定頁(yè)面內(nèi)容的總體顯示風(fēng)格、背景等。Text屬性：用于設(shè)定文字顏色Bgcolor屬性：設(shè)定頁(yè)面背景顏色link，alink，vlink屬性，分別用于設(shè)定頁(yè)面中超級(jí)鏈接“訪問(wèn)前、正在按下時(shí)、訪問(wèn)后的顏色”，不設(shè)定時(shí)取默認(rèn)值（藍(lán)、紅、紫）。Background屬性：用于設(shè)定背景圖片Scroll屬性：設(shè)定瀏覽器滾動(dòng)條是否顯示，取值”yes”或“no”，一般用于彈出式窗口34第34頁(yè)，共50頁(yè)，2023年，2月20日，星期六三、文件標(biāo)記（2）<title></title>標(biāo)記：置于<head>區(qū)段，用于設(shè)定瀏覽器的標(biāo)題<meta>標(biāo)記：用于描述HTML文檔相關(guān)信息。如編輯器類型，字符集等，通常用來(lái)為搜索引擎定義頁(yè)面關(guān)鍵字常見(jiàn)屬性：

Name和content屬性：指定“網(wǎng)頁(yè)描述”類型及相應(yīng)值

http-equiv和content屬性：指定HTTP響應(yīng)頭標(biāo)及相應(yīng)值舉例：35第35頁(yè)，共50頁(yè)，2023年，2月20日，星期六四、排版標(biāo)記功能：實(shí)現(xiàn)頁(yè)面的版式編排，應(yīng)用廣泛，兼容性強(qiáng)。主要有以下標(biāo)記：<!---->：注釋標(biāo)記<p></p>：段落標(biāo)記<br>：換行標(biāo)記<hr>：水平線標(biāo)記<pre></pre>：預(yù)設(shè)格式標(biāo)記<div></div>區(qū)段標(biāo)記36第36頁(yè)，共50頁(yè)，2023年，2月20日，星期六<!---->：注釋標(biāo)記注釋格式：<!–注釋內(nèi)容--><p></p>段落標(biāo)記<br>標(biāo)記<hr>標(biāo)記Size屬性：設(shè)置水平線高度，以像素為單位width屬性：設(shè)置水平線寬度，以像素為單位，也可以視窗的百分比為寬度。Align屬性：設(shè)置水平線水平對(duì)齊方式，可取值：left、right、centerColor屬性：指定水平線顏色Noshade屬性：無(wú)需設(shè)置屬性值，設(shè)置水平線無(wú)陰影。Title屬性：用于設(shè)置水平線在鼠標(biāo)指向時(shí)的提示說(shuō)明<pre></pre>標(biāo)記<div></div>區(qū)段標(biāo)記Align屬性：取值left、right、center37第37頁(yè)，共50頁(yè)，2023年，2月20日，星期六五、框架標(biāo)記功能：實(shí)現(xiàn)頁(yè)面的框架分割，一般多用于在頁(yè)面需保留一部分信息的情況下。<frameset><frameset>框架集標(biāo)記：定義框架內(nèi)部的基本結(jié)構(gòu)Rows屬性：設(shè)置橫向分割窗口的比例（框架頁(yè)的高度），可以是像素值，也可為%，*代表剩余高度如<framesetrows=“30%,*”></frameset>Cols屬性：用于設(shè)置縱向分割窗口的比例Border屬性：設(shè)置框邊界寬度，以像素為單位Bordercolor屬性：設(shè)置框邊界顏色。38第38頁(yè)，共50頁(yè)，2023年，2月20日，星期六<frame>框架內(nèi)容標(biāo)記Src屬性：指定當(dāng)前框架中顯示的頁(yè)面文件Name屬性：設(shè)置框架名稱<noframes></noframes>標(biāo)記用于設(shè)置不支持frame時(shí)頁(yè)面顯示的信息如在含有框架的HTML頁(yè)面中加入<noframes>

對(duì)不起，你的瀏覽器不支持frame!</noframes>39第39頁(yè)，共50頁(yè)，2023年，2月20日，星期六六、字體標(biāo)記功能：用于設(shè)定字體的大小、粗線、顏色等<b></b>：粗體<strong></strong>：加強(qiáng)語(yǔ)氣（一般通過(guò)加粗來(lái)實(shí)現(xiàn)，視不同瀏覽器面有所不同）<h1></h1>（?。?lt;h6></h6>（大）標(biāo)題標(biāo)記<u></u>下劃線標(biāo)記<strike></strike>刪除線標(biāo)記下標(biāo)標(biāo)記與上標(biāo)標(biāo)記40第40頁(yè)，共50頁(yè)，2023年，2月20日，星期六<font></font>字體標(biāo)記Face屬性：用于指定字體，多個(gè)字體用逗號(hào)分隔，默認(rèn)字體中文為“宋體”，英文“TimesNewRoman”Color屬性：設(shè)置文字顏色，屬性值可以為顏色英文代碼，也可為RGB顏色代碼（#rrggbb）rr、gg、bb分別表示紅、綠、藍(lán)三原色代碼，取值00—FF如：<fontcolor=“red”>紅字</font><fontcolor=“#FF0000”>紅字</font>Size屬性：設(shè)置字號(hào)，取值1（大）—7（?。J(rèn)為3，41第41頁(yè)，共50頁(yè)，2023年，2月20日，星期六七、項(xiàng)目清單與表格標(biāo)記一個(gè)項(xiàng)目清單實(shí)例<ul></ul>、<ol></ol>與<li></li>標(biāo)記<ul></ul>（unorderedlist）無(wú)序清單標(biāo)記<ol></ol>（orderedlist）有序清單標(biāo)記例：無(wú)序列表 有序列表<ul> <ol><li>無(wú)序項(xiàng)目1</li> <li>有序項(xiàng)目1</li><li>無(wú)序項(xiàng)目2</li> <li>有序項(xiàng)目2</li></ul> </ol>42第42頁(yè)，共50頁(yè)，2023年，2月20日，星期六表格完整代碼示例<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>第一行第一列第一行第二列第二行第一列第二行第二列構(gòu)成表格的一行構(gòu)成表格的一列43第43頁(yè)，共50頁(yè)，2023年，2月20日，星期六<table></table>、<tr></tr>、<td></td>標(biāo)記<table></table>標(biāo)記：表格開(kāi)始與結(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屬性：表格邊界線顏色Bordercolorlight與bordercolordark屬性：三維表格亮色與暗色顏色Background屬性：表格背景圖片<tr></tr>表格行開(kāi)始與結(jié)束標(biāo)記<td></td>單元格開(kāi)始與結(jié)束標(biāo)記說(shuō)明：表格標(biāo)記屬性較多。設(shè)置較復(fù)雜，一般先通過(guò)軟件生成，于細(xì)節(jié)處利用代碼修改44第44頁(yè)，共50頁(yè)，2023年，2月20日，星期六八、表單標(biāo)記功能：用于提供與用戶交互，收集用戶信息，通常需配合CGI、ASP等服務(wù)器端Web程序來(lái)實(shí)現(xiàn)。一個(gè)表單實(shí)例<form></form>表單標(biāo)記Action屬性：指定表單處理程序，其值為一個(gè)服務(wù)器端Web程序URL。Method屬性：指定數(shù)據(jù)傳遞的方法，取值為get或postName屬性：指定表單名稱，區(qū)分不同表單，及便于其他程序調(diào)用。45第45頁(yè)，共50頁(yè)，2023年，2月20日，星期六表單元素標(biāo)記詳釋<input>輸入標(biāo)記name屬性：表單元素名稱type屬性：反映不同類型輸入項(xiàng)目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：復(fù)選框RADIO：?jiǎn)芜x按鈕SUBMIT：提交按鈕RESET：復(fù)位按鈕IMAGE：圖像按鈕HIDDEN：隱藏表單組件Value屬性：表單元素初始值46第46頁(yè)，共50頁(yè)，2023年，2月20日，星期六<select></select>下拉列表標(biāo)記<option></option>選項(xiàng)標(biāo)記，置于<select>區(qū)段內(nèi)Selected屬性：默認(rèn)選項(xiàng)，無(wú)屬性值Value屬性：設(shè)置選項(xiàng)被選中后提交的內(nèi)容，默認(rèn)為<option></option>之間顯示的內(nèi)容<textarea></textarea>多行文本框標(biāo)記Rows屬性：設(shè)定textarea輸入框行數(shù)Cols屬性：textarea輸入框列數(shù)47第47頁(yè)，共50頁(yè)，2023年，2月20日，星期六九、超鏈接標(biāo)記功能：提供瀏覽者在不同Web頁(yè)面進(jìn)行跳轉(zhuǎn)<a