網(wǎng)站靜態(tài)頁面設(shè)計_第1頁
網(wǎng)站靜態(tài)頁面設(shè)計_第2頁
網(wǎng)站靜態(tài)頁面設(shè)計_第3頁
網(wǎng)站靜態(tài)頁面設(shè)計_第4頁
網(wǎng)站靜態(tài)頁面設(shè)計_第5頁
已閱讀5頁，還剩45頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

網(wǎng)站靜態(tài)頁面設(shè)計1第1頁，課件共50頁，創(chuàng)作于2023年2月本章要點：主頁設(shè)計欄目與版面設(shè)計頁面可視化設(shè)計靜態(tài)網(wǎng)頁制作技術(shù)2第2頁，課件共50頁，創(chuàng)作于2023年2月確定主頁的功能模塊設(shè)計主頁的版面處理技術(shù)上的細節(jié)

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

7第7頁，課件共50頁，創(chuàng)作于2023年2月緊扣網(wǎng)站的主題設(shè)立一個最近更新或網(wǎng)站指南欄目設(shè)定一個可以雙向交流的欄目設(shè)一個下載或常見問題回答欄目

欄目與版面設(shè)計

網(wǎng)站欄目安排要注意以下幾方面：欄目設(shè)計8第8頁，課件共50頁，創(chuàng)作于2023年2月版面設(shè)計

欄目與版面設(shè)計

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

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

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

布局原則：10第10頁，課件共50頁，創(chuàng)作于2023年2月正常平衡異常平衡對比凝視空白圖片說明11第11頁，課件共50頁，創(chuàng)作于2023年2月輪廓設(shè)計布局設(shè)計細節(jié)設(shè)計版面布局的步驟版面設(shè)計

12第12頁，課件共50頁，創(chuàng)作于2023年2月“T”結(jié)構(gòu)布局

“口”型布局

“三”型布局

對稱對比布局

POP布局“國”字型

拐角型

標(biāo)題正文型

左右框架型

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

Flash型

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

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

顏色分非彩色和彩色兩類

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

6.4字體設(shè)計

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

23第23頁，課件共50頁，創(chuàng)作于2023年2月6.6圖像設(shè)計網(wǎng)頁中圖像的格式：網(wǎng)頁中圖形設(shè)計技巧

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

<head>

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

</head>

<body>

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論