電子商務(wù)網(wǎng)站設(shè)計(jì)與管理5匯編

1、第5章 網(wǎng)站(wn zhn)靜態(tài)頁面設(shè)計(jì)本章要點(diǎn)：主頁設(shè)計(jì)欄目與版面設(shè)計(jì)頁面可視化設(shè)計(jì)靜態(tài)網(wǎng)頁制作(zhzu)技術(shù)1共四十頁一、主頁(zh y)設(shè)計(jì)1、確定主頁的功能模塊網(wǎng)站名稱(mngchng)、廣告條、主菜單新聞、搜索、友情鏈接聯(lián)系及版權(quán)信息 等2共四十頁3共四十頁2、主頁版面設(shè)計(jì)勾畫草圖軟件實(shí)現(xiàn)3、處理技術(shù)上的細(xì)節(jié)風(fēng)格、鏈接、圖形(txng)、動(dòng)畫、文字、速度4共四十頁二、欄目(ln m)與版面設(shè)計(jì)1、欄目設(shè)計(jì)欄目設(shè)計(jì)應(yīng)緊扣網(wǎng)站主題設(shè)計(jì)一個(gè)最近更新或網(wǎng)站指南欄目設(shè)計(jì)一個(gè)可以雙向交流的欄目設(shè)計(jì)一個(gè)下載或常見問題解答欄目大型網(wǎng)站可根據(jù)需要設(shè)置子欄目聯(lián)系及版權(quán)(bnqun)信息等輔助信息不要放

2、在主欄目5共四十頁2、版面設(shè)計(jì)版面(bnmin)布局原則主次分明，中心突出大小搭配，相互呼應(yīng)圖文并茂，相得益彰版面布局常用方法正常平衡異常平衡對(duì)比凝視空白圖片解說6共四十頁正常(zhngchng)平衡異常(ychng)平衡對(duì)比凝視空白圖片說明7共四十頁版面布局步驟輪廓設(shè)計(jì)布局設(shè)計(jì)細(xì)節(jié)設(shè)計(jì)版面布局形式“T”形結(jié)構(gòu)布局“口”形布局“三”形布局對(duì)稱(duchn)對(duì)比布局“國(guó)”或“同”字形拐角形框架布局Flash動(dòng)畫型，封面型8共四十頁三、頁面(y min)可視化設(shè)計(jì)1、色彩設(shè)計(jì)色彩的基本知識(shí)三原色原理色彩搭配色彩的心理感覺色彩的對(duì)比色彩的區(qū)域(qy)大小和形狀色彩的位置9共四十頁網(wǎng)頁色彩設(shè)計(jì)網(wǎng)頁配色

3、的基本方法底色和圖形色整體色彩顏色(yns)的平衡配色時(shí)要有重點(diǎn)色漸變色的調(diào)和統(tǒng)調(diào)配色分割配色10共四十頁網(wǎng)頁色彩設(shè)計(jì)網(wǎng)頁內(nèi)容的色彩網(wǎng)頁標(biāo)題色導(dǎo)航菜單色側(cè)欄色頁腳色網(wǎng)頁色彩搭配的技巧暖色調(diào)冷色調(diào)對(duì)比(dub)色調(diào)2、字體設(shè)計(jì)11共四十頁3、導(dǎo)航(dohng)設(shè)計(jì)突出超鏈接鏈接層次不宜過深“上一頁、下一頁，轉(zhuǎn)到N頁”的使用“返回”及“回首頁”的使用12共四十頁4、圖像設(shè)計(jì)圖像的格式與大小大小：?jiǎn)螐?0KB，單頁60KB，較大圖像應(yīng)進(jìn)行“切割”圖象(t xin)的格式：GIF、JPEG圖像設(shè)計(jì)技巧為圖片加入說明縮略圖的使用圖片的更新透明色的使用慎用網(wǎng)頁背景圖片5、動(dòng)畫設(shè)計(jì)GIF動(dòng)畫與Flash動(dòng)畫

4、13共四十頁四、靜態(tài)網(wǎng)頁制作(zhzu)技術(shù)1、HTML語言：Hyper Text Markup Language，中文名“超文標(biāo)記語言”特點(diǎn)：通過“標(biāo)記”描述頁面元素（文本、圖片、動(dòng)畫、音樂、影片等媒體）的顯示方式源文件為純文本文件，無需編譯，通過瀏覽器解釋(jish)運(yùn)行一個(gè)HTML文件（*.htm，*.html）對(duì)應(yīng)一個(gè)Web頁具備各個(gè)Web頁面可以通過“鏈接標(biāo)記”實(shí)現(xiàn)“超級(jí)鏈接”14共四十頁2、客戶端Script腳本語言Script：腳本，一段嵌在HTML源代碼中的小程序JavaScript：Netscape公司開發(fā)VBScript：Microsoft公司開發(fā)的，是VB的一個(gè)子集3、C

5、SS技術(shù)Cascading Style Sheets，層疊樣式表功能：實(shí)現(xiàn)(shxin)網(wǎng)頁數(shù)據(jù)的編排、格式化顯示及特殊效果，以彌補(bǔ)HTML在格式化網(wǎng)頁數(shù)據(jù)方面的不足15共四十頁練習(xí)(linx)請(qǐng)利用(lyng)PhotoShop或Fireworks或其他圖像設(shè)計(jì)軟件為網(wǎng)上書店進(jìn)行主頁設(shè)計(jì)。16共四十頁附：網(wǎng)站設(shè)計(jì)基礎(chǔ)(jch)語言HTMLHTML簡(jiǎn)介HTML的語法格式文件標(biāo)簽版式(bnsh)標(biāo)簽框架標(biāo)簽字體標(biāo)簽表格與清單標(biāo)簽表單標(biāo)簽超鏈接標(biāo)簽多媒體標(biāo)簽本節(jié)要點(diǎn)：17共四十頁一、HTML簡(jiǎn)介(jin ji)（1）HTML語法標(biāo)記（標(biāo)簽）：以”括起來的內(nèi)容，大多成對(duì)出現(xiàn)（稱為首標(biāo)記與尾標(biāo)記），也

6、有單一的標(biāo)記。書寫約定：不區(qū)分大小寫，忽略標(biāo)記間多余的空格與回車分類：描述頁面元素樣式的標(biāo)記：、指向其他資源的標(biāo)記：、例：這是粗體字標(biāo)記的作用：描述頁面元素的顯示方式及其他資源訪問方式屬性及其值：進(jìn)行一步(y b)提供詳細(xì)描述信息，所有屬性均放在首標(biāo)記中，多個(gè)屬性間以空格分開 如：屬性值屬性名18共四十頁一、HTML簡(jiǎn)介(jin ji)（2）HTML頁面文檔的結(jié)構(gòu)一個(gè)簡(jiǎn)單的HTML頁面 HTML文件(wnjin)結(jié)構(gòu) 在這里顯示文件的主體內(nèi)容。 19共四十頁一、HTML簡(jiǎn)介(jin ji)（3）HTML標(biāo)記的結(jié)構(gòu)形態(tài)頁面元素內(nèi)容如：這是一個(gè)文本段落(dunlu)頁面元素內(nèi)容如：紅色字如：以內(nèi)容

7、下?lián)Q行顯示第二行內(nèi)容20共四十頁二、創(chuàng)建(chungjin)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)選擇“所有文件”，并輸入文件全名查看保存的HTML文檔效果打開(d ki)IE瀏覽器，執(zhí)行“文件打開(d ki)”菜單命令21共四十頁二、創(chuàng)建(chungjin)HTML文檔（2）在瀏覽

8、頁面時(shí)修改HTML源文件執(zhí)行“查看源文件”菜單(ci dn)，調(diào)用記事本打開源代碼，欲重新查看修改后的效果只需單擊IE工具欄“刷新”按鈕。三、文件標(biāo)記（1）標(biāo)記：不是HTML文檔必須，但最好保持文檔的完整性標(biāo)記：此標(biāo)記中內(nèi)容是提供給瀏覽器的，即文件頭信息。22共四十頁三、文件(wnjin)標(biāo)記（2）標(biāo)記可包括屬性，由此決定頁面內(nèi)容的總體顯示風(fēng)格、背景(bijng)等。Text屬性：用于設(shè)定文字顏色Bgcolor屬性：設(shè)定頁面背景顏色link，alink，vlink屬性，分別用于設(shè)定頁面中超級(jí)鏈接“訪問前、正在按下時(shí)、訪問后的顏色”，不設(shè)定時(shí)取默認(rèn)值（藍(lán)、紅、紫）。Background屬性：用于

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

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

11、內(nèi)部的基本結(jié)構(gòu)Rows屬性：設(shè)置橫向分割窗口的比例（框架頁的高度），可以是像素值，也可為%，* 代表剩余高度如Cols屬性：用于設(shè)置縱向分割窗口的比例Border屬性：設(shè)置框邊界(binji)寬度，以像素為單位Bordercolor屬性：設(shè)置框邊界顏色。27共四十頁框架內(nèi)容標(biāo)記Src屬性：指定當(dāng)前框架中顯示的頁面文件Name屬性：設(shè)置(shzh)框架名稱標(biāo)記用于設(shè)置不支持frame時(shí)頁面顯示的信息如在含有框架的HTML頁面中加入 對(duì)不起，你的瀏覽器不支持frame!28共四十頁六、字體(zt)標(biāo)記功能：用于設(shè)定字體的大小、粗線、顏色等：粗體：加強(qiáng)(jiqing)語氣（一般通過加粗來實(shí)現(xiàn)，視不同

12、瀏覽器面有所不同）（?。ù螅?biāo)題標(biāo)記下劃線標(biāo)記刪除線標(biāo)記下標(biāo)標(biāo)記與上標(biāo)標(biāo)記29共四十頁字體標(biāo)記Face屬性：用于指定字體，多個(gè)字體用逗號(hào)分隔，默認(rèn)字體中文為“宋體”，英文“Times New Roman” Color屬性：設(shè)置文字顏色，屬性值可以為顏色英文代碼，也可為RGB顏色代碼（#rrggbb）rr、gg、bb分別表示(biosh)紅、綠、藍(lán)三原色代碼，取值00FF如：紅字 紅字Size屬性：設(shè)置字號(hào)，取值1（大）7（?。?，默認(rèn)為3，30共四十頁七、項(xiàng)目清單(qngdn)與表格標(biāo)記一個(gè)(y )項(xiàng)目清單實(shí)例、 與 標(biāo)記（unordered list）無序清單標(biāo)記（ordered list）

13、有序清單標(biāo)記例：無序列表有序列表無序項(xiàng)目1 有序項(xiàng)目1無序項(xiàng)目2有序項(xiàng)目2 31共四十頁表格完整代碼(di m)示例 第一行第一列第一行第二列 第二行第一列第二行第二列 第一行第一列第一行第二列第二行第一列第二行第二列構(gòu)成表格的一行構(gòu)成表格的一列32共四十頁、標(biāo)記標(biāo)記：表格開始與結(jié)束標(biāo)記border屬性：表格邊線寬度，以像素為單位，為0時(shí)不顯示表格線Cellpadding屬性：設(shè)置單元格內(nèi)容與邊線之間空間，默認(rèn)值為1Cellspacing屬性：表格內(nèi)單元格之間的距離。默認(rèn)值為2Width 屬性：表格寬度，可以為像素值和%兩種形式Height屬性：表格高度，可以為像素值和%兩種形式Align屬性

14、：水平對(duì)齊方式，取值left、right、centerValign屬性：垂直對(duì)齊方式，取值top、center、bottomBgcolor屬性：表格背景色Bordercolor屬性：表格邊界線顏色Bordercolorlight與bordercolordark屬性：三維表格亮色(lin s)與暗色顏色Background屬性：表格背景圖片表格行開始與結(jié)束標(biāo)記單元格開始與結(jié)束標(biāo)記說明：表格標(biāo)記屬性較多。設(shè)置較復(fù)雜，一般先通過軟件生成，于細(xì)節(jié)處利用代碼修改33共四十頁八、表單標(biāo)記(bioj)功能：用于提供與用戶交互，收集用戶信息，通常(tngchng)需配合CGI、ASP等服務(wù)器端Web程序來實(shí)現(xiàn)

15、。一個(gè)表單實(shí)例表單標(biāo)記Action屬性：指定表單處理程序，其值為一個(gè)服務(wù)器端Web程序URL。Method屬性：指定數(shù)據(jù)傳遞的方法，取值為get或postName屬性：指定表單名稱，區(qū)分不同表單，及便于其他程序調(diào)用。34共四十頁表單元素(yun s)標(biāo)記詳釋輸入(shr)標(biāo)記name屬性：表單元素名稱type屬性：反映不同類型輸入項(xiàng)目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：復(fù)選框RADIO：?jiǎn)芜x按鈕SUBMIT：提交按鈕RESET：復(fù)位按鈕IMAGE：圖像按鈕HIDDEN：隱藏表單組件Value屬性：表單元素初始值35共四十頁下拉列表(li bio)標(biāo)記選項(xiàng)標(biāo)記，置于

16、區(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ù)36共四十頁九、超鏈接標(biāo)記(bioj)功能：提供瀏覽者在不同Web頁面進(jìn)行跳轉(zhuǎn)標(biāo)記（anchor）Href屬性(shxng)：設(shè)定鏈接目標(biāo)文件，一般為一URL地址或本地Web路徑文件例：鏈接到本地Web網(wǎng)頁：回首頁 鏈接到本地Web路徑下一普通文件： 軟件下載鏈接到本地Web路徑下一圖片：打開我的照片鏈接到internet上某一網(wǎng)站：搜狐網(wǎng)鏈接到電子郵件地址：給我寫信37共四十頁鏈接到We

17、b頁面中特定結(jié)點(diǎn)（稱為錨）適用(shyng)：當(dāng)頁面超長(zhǎng)時(shí)，可利用此方法實(shí)現(xiàn)頁面內(nèi)部的跳轉(zhuǎn)先在頁面內(nèi)部設(shè)置特定結(jié)點(diǎn)名稱（錨）頁面頂部再設(shè)置鏈接到特定結(jié)點(diǎn)（錨）：回頂部設(shè)置鏈接到其他頁面內(nèi)部特定結(jié)點(diǎn)（錨）回到首頁頂部38共四十頁十、多媒體標(biāo)記(bioj)圖片標(biāo)記Src屬性：設(shè)置圖片路徑Alt屬性：設(shè)置圖片說明Align屬性：圖片旁文字對(duì)齊方式：left、right、top、middle、bottomBorder屬性：圖片邊框線Height屬性：圖片高度Width屬性：圖片寬度(kund)圖片文件類型：*.gif 或 *.jpg圖片路徑：URL路徑，本地絕對(duì)路徑，本地相對(duì)路徑例：39共四十頁內(nèi)容摘要第5章 網(wǎng)