電子商務(wù)網(wǎng)頁設(shè)計(第三版)課件匯總?cè)珪娮咏贪竿暾嬲n件最全幻燈片(最新)課件電子教案幻燈片

1、電子商務(wù)網(wǎng)頁設(shè)計（第三版）國家級職業(yè)教育規(guī)劃教材目 錄第 1 章 電子商務(wù)網(wǎng)站概述第 2 章 網(wǎng)頁版面設(shè)計第 3 章 表格在網(wǎng)頁中的應(yīng)用第 4 章 層和框架在網(wǎng)頁中的應(yīng)用第 5 章 網(wǎng)頁特效第 6 章 超鏈接在網(wǎng)頁中的應(yīng)用第 7 章 網(wǎng)站發(fā)布課件制作謝謝觀看第 1 章 電子商務(wù)網(wǎng)站概述 第 1 節(jié) 電子商務(wù)網(wǎng)站需求分析 第 2 節(jié) 電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計 第 3 節(jié) 利用Dreamweaver CS5 創(chuàng)建站點第 1 節(jié) 電子商務(wù)網(wǎng)站需求分析 電子商務(wù)發(fā)展迅猛，消費者通過網(wǎng)絡(luò)進行購物已經(jīng)成為習(xí)慣，使用電子商務(wù)網(wǎng)站進行營銷也已經(jīng)是企業(yè)經(jīng)營的主要渠道。要建設(shè)好電子商務(wù)網(wǎng)站，就要掌握網(wǎng)站建設(shè)的基本知識

2、和流程，做好網(wǎng)站建設(shè)的前期準備工作。1. 網(wǎng)頁和網(wǎng)站 （1）網(wǎng)頁 網(wǎng)頁通常是使用網(wǎng)頁制作工具制作或者使用HTML 語言進行編寫，通過網(wǎng)絡(luò)傳播，并被瀏覽器翻譯成為可以顯示出來的集文本、超鏈接、圖像、聲音、動畫、視頻等信息元素為一體的頁面文件。一、電子商務(wù)網(wǎng)站建設(shè)概述 （2）網(wǎng)站 網(wǎng)站是指根據(jù)一定的規(guī)則，使用各種網(wǎng)頁制作工具制作的用于展示特定信息內(nèi)容的相關(guān)網(wǎng)頁的集合。瀏覽者可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。對于電子商務(wù)網(wǎng)站，客戶通過瀏覽器訪問相關(guān)電商網(wǎng)站，瀏覽具體商品網(wǎng)頁了解商品詳細信息來實現(xiàn)交易。2. 電子商務(wù)網(wǎng)站建設(shè)工具（1）Frontpage和Expressi

3、on Web（2）Dreamweaver3. 商務(wù)網(wǎng)站建設(shè)流程改版測試通過前期調(diào)研，分析需求確定站點整體規(guī)劃硬件軟件搭建調(diào)試網(wǎng)頁制作網(wǎng)站測試與排錯網(wǎng)站維護與推廣素材收集、整理素材數(shù)字化處理站點新建及設(shè)置網(wǎng)站發(fā)布發(fā)現(xiàn)問題二、客戶信息收集1收集的信息內(nèi)容 （1）企業(yè)自身信息 （2）市場信息 （3）目標客戶信息2搜集信息的方法 （1）資料統(tǒng)計法 （2）現(xiàn)場觀察法 （3）會議收集法 （4）網(wǎng)絡(luò)收集法三、客戶需求分析 1需求分析的內(nèi)容需求分析業(yè)務(wù)需求功能需求用戶需要的功能商家需要的功能非功能需求可用性可靠性性能接口需求2.網(wǎng)站功能整合描述包攬?zhí)煜戮W(wǎng)店前臺商品展示購物車訂單結(jié)算用戶訂單查詢后臺商品類別管理

4、品牌管理商品管理訂單管理物流管理人員管理四、搜集易買網(wǎng)商城的客戶信息 信息的采集需要通過現(xiàn)場觀察、召開會議、資料統(tǒng)計、問卷調(diào)查等方式進行，以全面掌握其公司基本信息、客戶群體資料以及建設(shè)網(wǎng)站的目的和網(wǎng)站功能定位。主要工作是填寫網(wǎng)站建設(shè)調(diào)查表。五、對易買網(wǎng)商城進行需求分析1. 業(yè)務(wù)需求2. 功能需求3. 非功能需求4. 接口需求六、易買網(wǎng)商城的功能第 2 節(jié) 電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計一、網(wǎng)站物理結(jié)構(gòu)1.網(wǎng)站物理結(jié)構(gòu)的概念 網(wǎng)站物理結(jié)構(gòu)指的是網(wǎng)站真實的目錄及所包含文件所存儲的真實位置所表現(xiàn)出來的結(jié)構(gòu)，也就是網(wǎng)站的實際目錄，或者說是文件實際的物理地址。一般來說靜態(tài)網(wǎng)站才有物理結(jié)構(gòu)，動態(tài)網(wǎng)站或偽靜態(tài)網(wǎng)站是不

5、存在物理結(jié)構(gòu)的。2.網(wǎng)站物理結(jié)構(gòu)的類型 網(wǎng)站物理結(jié)構(gòu)有兩種不同的表現(xiàn)形式，一種是扁平式物理結(jié)構(gòu)，另一種是樹形物理結(jié)構(gòu)。1網(wǎng)站目錄結(jié)構(gòu)的概念 網(wǎng)站目錄結(jié)構(gòu)是指建立網(wǎng)站時所創(chuàng)建的文件目錄。 二、網(wǎng)站目錄結(jié)構(gòu)2 . 網(wǎng)站目錄的建立原則（1）不要將所有文件都存放在根目錄下。（2）按主菜單欄目內(nèi)容建立子目錄。（3）根據(jù)更新要求建立和管理次要欄目。（4）在每個目錄下都建立獨立的image 目錄。（5）目錄的層次不要太深。（6）不要使用中文目錄。一般建議使用英文意思的名稱。如images目錄中存放圖像，css目錄存放css樣式表等。三、網(wǎng)站邏輯鏈接結(jié)構(gòu)1. 網(wǎng)站邏輯鏈接結(jié)構(gòu)的概念 網(wǎng)站邏輯鏈接結(jié)構(gòu)也叫作鏈接

6、結(jié)構(gòu)，主要是指網(wǎng)頁頁面之間相互鏈接的關(guān)系。邏輯鏈接結(jié)構(gòu)和物理結(jié)構(gòu)的區(qū)別在于，邏輯鏈接結(jié)構(gòu)由網(wǎng)站頁面的相互鏈接關(guān)系決定，而物理結(jié)構(gòu)則由網(wǎng)站頁面的物理存放位置決定。 在網(wǎng)站的邏輯鏈接結(jié)構(gòu)中，通常采用“鏈接深度”來描述頁面之間的邏輯關(guān)系?！版溄由疃取笔侵笍脑错撁娴竭_目標頁面所經(jīng)過的路徑數(shù)量。2. 網(wǎng)站邏輯鏈接結(jié)構(gòu)基本形式樹狀鏈接結(jié)構(gòu)（一對一）星狀鏈接結(jié)構(gòu)（一對多）3. 網(wǎng)站邏輯鏈接結(jié)構(gòu)的選擇 最好的辦法是：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。四、頁面流程1. 頁面流程的概念 網(wǎng)站設(shè)計者為訪問者設(shè)計的在瀏覽網(wǎng)站時的瀏覽經(jīng)歷就是頁面流程。2. 頁面流程設(shè)計 （1）功能模塊

7、的劃分 （2）根據(jù)功能模塊劃分網(wǎng)站頁面 （3）建立頁面鏈接流程五、設(shè)計易買網(wǎng)商城物理結(jié)構(gòu)和目錄結(jié)構(gòu)1. 設(shè)計易買網(wǎng)商城物理結(jié)構(gòu)2. 設(shè)計易買網(wǎng)商城的目錄結(jié)構(gòu)六、分析易買網(wǎng)商城的邏輯結(jié)構(gòu)1. 功能模塊劃分2. 分析頁面鏈接流程圖第 3 節(jié) 利用Dreamweaver CS5 創(chuàng)建站點一、安裝Dreamweaver CS5二、Dreamweaver CS5簡單使用1. 啟動Dreamweaver CS52. Dreamweaver CS5 工作區(qū)的構(gòu)成3. Dreamweaver CS5 的工作視圖三、新建和管理易買網(wǎng)商城本地站點1. 新建站點2. 站點信息3. 服務(wù)器配置4. 高級設(shè)置5. 選擇

8、保存，完成配置四、新建第一個網(wǎng)頁頁面1. 菜單欄中選擇“文件”/“新建”2. 編輯簡單的網(wǎng)頁課件制作謝謝觀看第 2 章 網(wǎng)頁版面設(shè)計 第 1 節(jié) 網(wǎng)頁的結(jié)構(gòu)和色彩設(shè)計 第 2 節(jié) HTML基礎(chǔ) 第 3 節(jié) 網(wǎng)頁的基本操作第 1 節(jié) 網(wǎng)頁的結(jié)構(gòu)和色彩設(shè)計一、網(wǎng)站風(fēng)格1. 網(wǎng)站風(fēng)格概述 通過網(wǎng)站的外表、內(nèi)容、文字等就可以概括出一個站點的風(fēng)格，這些風(fēng)格或者是色彩，或者是技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是該網(wǎng)站獨有的。2. 網(wǎng)站風(fēng)格的分類功能型展示型二、網(wǎng)頁結(jié)構(gòu)的類型1. “同”字型布局2. “國”字型布局3. T 型布局4. “三”字型布局5. 標題文本型布局6. POP 海報型布局7.

9、 框架型布局三、頁面色彩搭配1. 顏色傳達的信息2. 網(wǎng)頁色彩搭配要注意的問題 （1）使用單色 （2）使用鄰近色 （3）使用對比色 （4）黑色的使用 （5）網(wǎng)頁配色注意事項 1）同一個頁面色彩過于繁雜，會給人造成凌亂的印象。 2）不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。 3）背景和前文的對比盡量要大，以便突出頁面主要內(nèi)容，但是也盡量不要用花紋繁復(fù)的圖案和純度很高的色彩作背景。四、易買網(wǎng)商城首頁結(jié)構(gòu)設(shè)計1. 繪制布局草圖2. 設(shè)置首頁內(nèi)容3. 在Dreamweaver 中創(chuàng)建布局五、易買網(wǎng)商城頁面色彩搭配1. 網(wǎng)頁的底色2. 文字字型第 2 節(jié) HTML 基礎(chǔ)1. HTML 的概念 超文本

10、標記語言，用于描述網(wǎng)頁（網(wǎng)頁文檔）的語言。每一個頁面的代碼保存為一個網(wǎng)頁源文件（“.html”文件）。 HTML 不是一種編程語言，而是一種標記語言，包括一些定義頁面的文本、圖像、聲音和動畫等內(nèi)容及其格式的符號，這些符號稱為標記。一、HTML 的概念及作用2. HTML 的作用二、標記的概念及分類1. 標記的概念 （1）HTML 標記是放在尖括號里的關(guān)鍵詞，如。 （2）大多數(shù)標記都成對出現(xiàn)，如 和。 （3）標記對中的第一個標簽是開始標記（也叫開放標記），第二個標簽是結(jié)束標記（也叫閉合標記）。 （4）結(jié)束標記和開始標記所用的字符相同，只是前面加一個斜杠，例如， 用于標記一個自然段。 （5）標記可

11、以具有相應(yīng)的屬性，如size、color、width 等。2. 標記的分類 （1）用來指定網(wǎng)頁上的元素及其格式。 （2）用來指向其他的資源。三、HTML 及標記在網(wǎng)頁中的應(yīng)用1. HTML 在網(wǎng)頁文檔結(jié)構(gòu)中的應(yīng)用 HTML 可以用來指明一個網(wǎng)頁文檔的基本結(jié)構(gòu)。頁面HTML 文檔通常由版本信息、文檔頭（head）、文檔主體（body）三部分組成。 （1） 是版本信息說明 （2） 是文件標記 （3） 是頭部標記 （4） 是主體標記2. 內(nèi)容及其格式標記的簡單應(yīng)用 （1）格式標記 用來創(chuàng)建一個段落，在此標記之間的文本將按照段落的格式顯示。 是一個很簡單的換行標記，它沒有結(jié)束標記，用來創(chuàng)建一個換行。

12、是普通列表標記， 和 都必須放在 標記之間。 用來創(chuàng)建一個列表； 用來創(chuàng)建列表中的上層項目； 用來創(chuàng)建列表中最下層項目。 （2）添加文本并設(shè)置格式 1）（六級標題標記） 2）（字體標記） 3）（字體的大小顏色標記） （3）超鏈接標記 （4）圖像標記和多媒體標記 圖像標記 將音樂或影像嵌入網(wǎng)頁，可以用 標記 （5）表單標記及其應(yīng)用 標記用來創(chuàng)建一個表單 標記具有action、method 和target 屬性。第 3 節(jié) 網(wǎng)頁的基本操作 網(wǎng)頁的基本組成部分包括文本、圖像、多媒體和超鏈接。制作網(wǎng)頁時首先注意主題要鮮明，其次內(nèi)容要豐富，才能不斷吸引訪問者。文字是必不可少的元素，網(wǎng)站思想、內(nèi)容的表達都

13、需要文字加以傳遞。同時，適當?shù)嘏浜弦恍﹫D像、Flash 動畫、其他媒體對象等能夠提高網(wǎng)頁的觀賞性。頁面上的元素應(yīng)用超鏈接就構(gòu)成了一個有機整體，實現(xiàn)互聯(lián)互通，這樣能夠讓瀏覽者在不同頁面間進行跳轉(zhuǎn)，找到所需的內(nèi)容。一、網(wǎng)頁中添加文本1. 添加普通文本 （1）直接輸入文本 （2）復(fù)制粘貼文本 （3）從其他文件導(dǎo)入2. 添加空格 在需要輸入的地方單擊鼠標左鍵，將輸入法切換到半角狀態(tài)，單擊空格鍵即可輸入一個空格。如果需要輸入多個連續(xù)的空格可以通過以下幾種方法來實現(xiàn)： （1）菜單“插入記錄”/“HTML”/“特殊字符”/“不換行空格”。 （2）直接按“Ctrl+Shift+Space”快捷鍵。 （3）設(shè)置

14、軟件首選參數(shù)“允許連續(xù)空格”。3. 插入水平線4. 插入特殊字符 （1）通過菜單插入。先將光標放置到需要插入特殊字符的位置，在“HTML”/“特殊字符”的級聯(lián)菜單中選擇需要插入的特殊字符。 （2）通過“文本”插入工具欄插入。先在Dreamweaver CS5 的“插入”工具欄中選擇“文本”，顯示“文本”插入工具欄，然后選擇需要插入的特殊字符。5. 設(shè)置文本格式二、網(wǎng)頁中插入圖像1. 網(wǎng)頁中常用的圖像格式2. 易買網(wǎng)首頁插入圖像操作三、網(wǎng)頁中插入Flash 動畫1. Flash 動畫類型2. 插入Flash 動畫操作四、網(wǎng)頁中插入FLV 視頻五、在網(wǎng)頁中插入音頻課件制作謝謝觀看第 3 章 表格在

15、網(wǎng)頁中的應(yīng)用 第 1 節(jié) 利用表格顯示數(shù)據(jù) 第 2 節(jié) 利用表格布局網(wǎng)頁第 1 節(jié) 網(wǎng)頁的結(jié)構(gòu)和色彩設(shè)計一、表格的概念1. 網(wǎng)頁中的表格 表格是組成網(wǎng)頁的基本元素之一。很多網(wǎng)站的頁面是以表格為框架制作的。 和Excel 電子表格一樣，網(wǎng)頁中也可以用表格來顯示數(shù)據(jù)，但是網(wǎng)頁中的表格功能更強一些，網(wǎng)頁中的表格還可以用來進行網(wǎng)頁布局設(shè)計（排版）。2. 表格的組成元素 表格由三個主要元素構(gòu)成：行、列以及單元格。單元格是行和列相交的部分。單元格和單元格之間的距離叫單元格間距。單元格內(nèi)容和單元格邊界的距離叫單元格邊距。整張表格的邊緣叫作邊框。表格也可以帶一標題，標題在表格的頂端，表格也以有背景色，可以單獨

16、對表格、行、單元格設(shè)置不同的背景色。二、表格的基本操作1. 新建表格2. 選擇表格元素3. 調(diào)整表格、列和行的大小4. 添加/ 刪除行和列 當行被選中時，單擊鍵盤上的“Delete”鍵可以刪除一行； 當列被選中時，單擊鍵盤上的“Delete”鍵可以刪除一列； 單擊選中任意一個單元格時，按“Ctrl+M”快捷鍵可以在當前單元格下方插入一行； 單擊選中任意一個單元格時，按“Ctrl+Shift+A”快捷鍵可以在當前單元格左邊插入一列。5. 復(fù)制、粘貼和刪除單元格6. 設(shè)置單元格、行或列的屬性7. 合并或拆分單元格三、在網(wǎng)頁中制作簡單的表格1. 可視化創(chuàng)建表格2. 表格的HTML 表示 （1） 表示

17、表格。 （2） 表示表格的標題。 （3） 表示行。 （4） 表示單元格。 （5）width表示表格寬度，border表示表格的邊框線粗細，cellpadding表示單元格的邊距cellspacing表示單元格的間距，bgcolor表示背景色。 （6）單元格的具體內(nèi)容寫在 之間， 就象一對括號， 表示括號開始， 表示括號結(jié)束，它們必須成對出現(xiàn)。第 2 節(jié) 利用表格布局網(wǎng)頁 網(wǎng)頁布局就是將頁面上的元素按照一定的形式排列好。 一般網(wǎng)頁的版面都是分布整齊、左右對稱的，具有類似表格的特點，因此可以借助表格來進行網(wǎng)頁布局。在用表格進行布局時，一般主要用單元格來分割版面中的不同顯示部分，所以不需要設(shè)表格的背

18、景色、表格的邊框線等，通過調(diào)整單元格的寬度、高度、間距、邊距等參數(shù)來調(diào)節(jié)版面，另外利用表格嵌套功能，還可以對局部進行更精細地調(diào)整。一、網(wǎng)頁布局的概念和原理二、利用表格布局網(wǎng)頁的簡單實例1. 創(chuàng)建表格2. 表格參數(shù)設(shè)置3. 表格標簽檢查器的設(shè)置4. 輸入表格內(nèi)容5. 表格的HTML 表示三、用表格布局易買網(wǎng)商品列表頁（product-list.htm）1. 插入表格 （1）打開Dreamweaver CS5，新建頁面命名為“product-list.htm”，并保存。 （2）單擊菜單“插入”/“表格”，或按“Ctrl+Alt+T”快捷鍵。 （3）在彈出的“表格”對話框中，輸入行數(shù)為“4”，列數(shù)為

19、“4”。 2. 設(shè)置表格屬性3. 添加圖片并設(shè)置屬性4. 添加文本及設(shè)置其格式5. 完成表格的其他商品課件制作謝謝觀看第 4 章 層和框架在網(wǎng)頁中的應(yīng)用 第 1 節(jié) 層在網(wǎng)頁中的應(yīng)用 第 2 節(jié) 框架在網(wǎng)頁中的應(yīng)用頁第 1 節(jié) 層在網(wǎng)頁中的應(yīng)用一、層的概念和分類1. 層的概念 層是網(wǎng)頁內(nèi)容的一個容器，只要是能放置在網(wǎng)頁中的內(nèi)容，都可以放置在層當中。層最主要的特性就是它可以在網(wǎng)頁上自由浮動，從而實現(xiàn)對網(wǎng)頁元素的精確定位，而且層的位置是可以重疊的，可以任意地控制層的前后位置、顯示或隱藏，大大增強了網(wǎng)頁設(shè)計的靈活性。2. 層的分類 （1）普通層和嵌套層 （2）固定層和浮動層 1）固定層。固定層在網(wǎng)頁

20、中的位置固定。 2）浮動層。在網(wǎng)頁設(shè)計視圖內(nèi)，可以通過拖動控制手柄使浮動層移動。二、層的創(chuàng)建及設(shè)置1. 普通層的創(chuàng)建 （1）使用菜單命令創(chuàng)建普通層 （2）使用布局面板創(chuàng)建普通層2. 嵌套層的創(chuàng)建 （1）使用菜單命令創(chuàng)建嵌套層 （2）使用插入面板創(chuàng)建嵌套層3. 層屬性的設(shè)置4. 層的基本操作 （1）選擇層 （2）移動層 （3）改變層大小 （4）對齊層三、使用Div 布局易買網(wǎng)首頁1. 新建空白文檔2. 插入Div 標簽四、使用“Div+CSS”美化易買網(wǎng)首頁1. 生成CSS 文件2. Div 應(yīng)用樣式3. 編輯網(wǎng)頁內(nèi)容五、使用AP Div 實現(xiàn)浮動廣告1. 插入AP Div2. 設(shè)置AP Div

21、 浮動效果3. 保存網(wǎng)頁并瀏覽六、AP Div 與表格的轉(zhuǎn)換1. 把AP Div 轉(zhuǎn)換為表格2. 把表格轉(zhuǎn)換為AP Div第 2 節(jié) 框架在網(wǎng)頁中的應(yīng)用一、框架與框架集1. 框架 框架（frame）是指用來分隔網(wǎng)頁的窗格，每個框架都是瀏覽器中的一個區(qū)域，它可以顯示與瀏覽器窗口中所顯示內(nèi)容相關(guān)的HTML 文檔，是一個獨立的HTML 頁面。2. 框架集 框架集（frameset）是指定義一組網(wǎng)頁布局結(jié)構(gòu)與屬性的HTML 頁面，其中包含了顯示在頁面中框架的數(shù)量、尺寸、裝入框架的頁面來源及其他可定義的屬性相關(guān)信息。3. 框架結(jié)構(gòu)的優(yōu)點 （1）使網(wǎng)頁結(jié)構(gòu)清晰，易于維護和更新。 （2）每個框架網(wǎng)頁都具有獨

22、立滾動條，因此訪問者可以獨立控制各個頁面。 （3）便于修改。一般情況下，每隔一段時間，網(wǎng)站的設(shè)計就要做一定的修改，如果是公共部分需要修改，只需修改公共頁面，整個網(wǎng)站就同時更新。 （4）訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形，當瀏覽器的滾動條滾動時，這些鏈接不隨滾動條的滾動而上下移動，一直固定在某個窗口，便于訪問者能隨時跳轉(zhuǎn)到另一個頁面。二、創(chuàng)建預(yù)定義框架集1. 示例方式2. 按鈕方式3. 菜單方式4. 保存框架三、框架和框架集基本操作1. 選擇框架和框架集 （1）在“框架”面板中選擇框架和框架集 （2）在設(shè)計窗口中選擇框架或框架集2. 拆分和刪除框架3. 屬性設(shè)置 （1）設(shè)置框

23、架集屬性 （2）設(shè)置框架屬性4. 識別代碼 （1）框架的基本結(jié)構(gòu)代碼 （2）框架集標簽 標簽的屬性 1）framespacing 屬性，通過該屬性來設(shè)置框架集邊框的寬度 2）bordercolor 屬性，通過該屬性來設(shè)置框架集邊框的顏色 3）rows 屬性，在垂直方向，瀏覽器可以被分割成多個窗口 4）cols 屬性，在水平方向瀏覽器可以被分割成多個窗口 （3）框架標簽 的屬性 1）src 屬性，顯示頁面源文件的路徑。 2）name 屬性，框架的名稱。 3）scrolling 屬性，框架滾動條顯示屬性。 4）noresize 屬性，框架尺寸調(diào)整屬性。 5）marginwidth 屬性，框架邊緣寬

24、度屬性。 6）marginheight 屬性，框架邊緣高度屬性。四、框架布局“圖書首頁”頁面1. 創(chuàng)建框架布局頁面2. 向框架中添加內(nèi)容3. 保存并預(yù)覽框架布局頁面五、使用框架布局易買網(wǎng)圖書頁面1. 創(chuàng)建框架布局頁面2. 調(diào)整框架結(jié)構(gòu)3. 向框架中添加內(nèi)容4. 保存并預(yù)覽框架布局頁面課件制作謝謝觀看第 5 章 網(wǎng)頁特效 第 1 節(jié) CSS 樣式表特效 第 2 節(jié) 行為特效第 1 節(jié) CSS 樣式表特效一、層疊樣式表的基礎(chǔ)知識1. 層疊樣式表的概念 層疊樣式表（Cascading Style Sheets，簡稱CSS），是專門用于定義各種各樣的樣式的一套規(guī)范，是網(wǎng)頁元素的修飾者，有了它就可以非常

25、靈活方便地設(shè)計和匯總樣式來控制網(wǎng)頁內(nèi)容的外觀。2. 層疊樣式表的功能 （1）樣式豐富多樣 （2）靈活方便 （3）減少網(wǎng)站開發(fā)者工作的重復(fù)性3. 層疊樣式表的類型 （1）行內(nèi)式樣式表 （2）嵌入式樣式表 （3）外聯(lián)式樣式表二、CSS 樣式表創(chuàng)建1. 創(chuàng)建CSS 樣式表的方法 （1）通過菜單選項創(chuàng)建樣式表 （2）通過“CSS 樣式”面板創(chuàng)建樣式表 （3）通過“屬性”面板創(chuàng)建樣式表2. 新建CSS 規(guī)則三、CSS 樣式屬性定義1. 文本屬性2. 背景屬性3. 邊框?qū)傩?. 列表屬性四、CSS 樣式表的引用1. 引入外部樣式表2. 應(yīng)用CSS 樣式表 （1）通過菜單應(yīng)用 （2）通過“屬性”面板應(yīng)用 （

26、3）通過“CSS 樣式”面板應(yīng)用3. CSS 的應(yīng)用優(yōu)先級 CSS 樣式的優(yōu)先級總結(jié)來說，離被設(shè)置元素越近優(yōu)先級別越高，一般依據(jù)下面的規(guī)則劃分優(yōu)先級，即行內(nèi)樣式表（在HTML 元素內(nèi)部） 內(nèi)部樣式表（位于 標簽內(nèi)部） 外聯(lián)樣式表 瀏覽器缺省設(shè)置。 行內(nèi)樣式（在HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明： 標簽中的樣式聲明、外部樣式表中的樣式聲明或者瀏覽器中的樣式聲明（缺省值）。五、CSS 樣式的應(yīng)用1. 內(nèi)部樣式表的應(yīng)用2. 外部樣式表的應(yīng)用3. 應(yīng)用外部樣式第 2 節(jié) 行為特效一、認識行為1. 行為的概念 行為是由對象、事件和該事件觸發(fā)的動作構(gòu)成的。Dreamwe

27、aver CS5 內(nèi)置了很多行為，使設(shè)計者不用輸入復(fù)雜的代碼即可在網(wǎng)頁上實現(xiàn)一些很實用的交互效果，如果對JavaScript 語言有些掌握，還可以編寫代碼實現(xiàn)更加豐富的效果。2. 對象 對象是產(chǎn)生行為的主體。3. 事件 事件是由用戶或瀏覽器針對頁面元素的一種操作。4. 動作 動作通常是由一段預(yù)先編寫的JavaScript 代碼組成的，用于完成某些特殊的任務(wù)。二、添加與編輯行為1. 打開“行為”面板2. 添加行為3. 編輯行為三、表單 Form 表單用于申明表單，定義采集數(shù)據(jù)的范圍，也就是 和 里面包含的數(shù)據(jù)將被提交到服務(wù)器，通常形式是： 。 表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選

28、框、單選框、文件上傳框、下拉選擇框等。1. 文本框 文本框是一種讓訪問者自己輸入內(nèi)容的表單對象，通常被用來填寫單個字或簡短的回答。2. 多行文本框 多行文本框也是一種讓訪問者自己輸入內(nèi)容的表單對象，只不過能讓訪問者填寫較長的內(nèi)容。3. 密碼框 密碼框是一種特殊的文本域，用于輸入密碼，當訪問者輸入文字時，文字會被星號或其他符號代替，而輸入的文字會被隱藏。4. 隱藏域 隱藏域是用來收集或發(fā)送信息的不可見元素，對于網(wǎng)頁的訪問者來說，隱藏域是看不見的，當表單被提交時，隱藏域就會將信息用設(shè)置時定義的名稱和值發(fā)送到服務(wù)器上。5. 復(fù)選框 復(fù)選框允許在待選項中選中一項以上的選項，每個復(fù)選框都是一個獨立的元素

29、，都必須有一個唯一的名稱。6. 單選框 當需要訪問者在單選項中選擇唯一的答案時，就需要用到單選框了。7. 文件上傳框 有時候需要用戶上傳文件，文件上傳框看上去和其他文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件路徑或者單擊瀏覽按鈕選擇需要上傳的文件。8. 下拉選擇框 下拉選擇框允許在一個有限的空間設(shè)置多種選項。9. 表單按鈕 表單按鈕控制表單的運作。提交按鈕用來將輸入的信息提交到服務(wù)器。四、JavaScript 腳本語言 JavaScript 是一種直譯式腳本語言，它的解釋器被稱為JavaScript 引擎，是廣泛用于客戶端的腳本語言。1. JavaScript 的

30、功能 JavaScript 常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。2. JavaScript 的特性 （1）簡單性 （2）動態(tài)性 （3）跨平臺性五、制作表單文本框行為特效1. 設(shè)計表單2. 添加行為3. 預(yù)覽效果六、使用JavaScript 腳本實現(xiàn)彈出對話框特效1. JavaScript 腳本嵌入網(wǎng)頁頭部2. JavaScript 腳本與頁面代碼進行交互七、使用JavaScript 腳本實現(xiàn)漂浮廣告窗1. 添加跳轉(zhuǎn)效果2. 編寫實現(xiàn)漂浮效果的JavaScript 腳本代碼3. 頁面引用JavaScript 腳本文件4. 瀏覽效果課件制作謝謝觀看第 6 章 超鏈接在網(wǎng)頁中的應(yīng)用一、超鏈接1. 超鏈接的概念 超鏈接（Hyper Link）是指從一個網(wǎng)頁指向一個目標的連接關(guān)系。 一個完整的超鏈接由兩部分組成，即超鏈接目標和超鏈接對象。鏈接目標一般用URL 來表示，鏈接目標可以是網(wǎng)頁、圖片以及其他各種文件，也可以是電子郵件、空鏈接等，超鏈接對象是屏幕上的顯示部分，是超鏈接在網(wǎng)頁中的顯示載體2. 超鏈接的分類 （1）按照URL 組成部分的不同，超鏈接可以分為外部鏈接、內(nèi)部鏈接和錨點鏈接，其中內(nèi)部鏈接又可分為絕對鏈接和相對鏈接。外部鏈接連接到其他的網(wǎng)站，內(nèi)部鏈接連接到網(wǎng)站內(nèi)部的其他網(wǎng)頁，絕對鏈接包含網(wǎng)站地址或磁盤根目錄路徑，相對鏈