新媒體網(wǎng)頁設(shè)計與制作-Dreamweaver-CS6基礎(chǔ)、案例、技巧實用教程第1章課件

1、新媒體網(wǎng)頁設(shè)計與制作Dreamweaver CS6基礎(chǔ)、案例、技巧實用教程新媒體網(wǎng)頁設(shè)計與制作Dreamweaver CS6基礎(chǔ)、目 錄 第1章 網(wǎng)頁設(shè)計基礎(chǔ) 第2章 認(rèn)識Dreamweaver CS6 第3章 制作絢麗多彩的網(wǎng)頁 第4章 使用CSS樣式美化網(wǎng)頁 第5章 新媒體網(wǎng)頁布局 第6章 網(wǎng)頁中的超級鏈接 第7章 新媒體網(wǎng)頁中的多媒體元素 目 錄 第1章 網(wǎng)頁設(shè)計基礎(chǔ) 目 錄 第8章 在新媒體網(wǎng)頁中添加動態(tài)特效 第9章 站點風(fēng)格的統(tǒng)一 第10章 表單 第11章 綜合實訓(xùn)-家具聯(lián)盟網(wǎng)站 第12章 創(chuàng)建移動設(shè)備網(wǎng)頁及應(yīng)用程序 第13章 站點的整理維護(hù)與上傳 目 錄 第8章 在新媒體網(wǎng)頁中添加

2、動態(tài)特效 第1章 網(wǎng)頁設(shè)計基礎(chǔ)本章學(xué)習(xí)要點： 1網(wǎng)頁和網(wǎng)站的基本概念 2新媒體網(wǎng)站的色彩選擇與搭配、 策劃與創(chuàng)建原則 3網(wǎng)站制作的基本流程第1章 網(wǎng)頁設(shè)計基礎(chǔ)本章學(xué)習(xí)要點：1.1 認(rèn)識網(wǎng)頁1.1.1 網(wǎng)頁與網(wǎng)站概念靜態(tài)網(wǎng)頁：標(biāo)準(zhǔn)HTML文件。動態(tài)網(wǎng)頁：在發(fā)送到瀏覽器之前由應(yīng)用程序服務(wù)器自定義的網(wǎng)頁。 網(wǎng)站：即網(wǎng)頁的集合 。1.1 認(rèn)識網(wǎng)頁1.1.1 網(wǎng)頁與網(wǎng)站概念1.1.2 網(wǎng)頁的基本要素LOGO 標(biāo)題 導(dǎo)航欄頁眉 /頁腳 功能區(qū) 主體內(nèi)容 1.1.2 網(wǎng)頁的基本要素LOGO 1.1.3 新媒體網(wǎng)頁的設(shè)計元素文字：是網(wǎng)頁信息傳遞的主要手段。 圖片 ：用于提供信息、展示作品、裝飾網(wǎng) 頁等。 多媒

3、體：包括音頻、視頻、動畫等元素 。 互動：實現(xiàn)信息的遠(yuǎn)距離實時傳遞。 版式設(shè)計：“同”字型布局 、“國”字型布局 、“T”型布局 、“三”字型布局 、對比布局 、POP布局 、Flash布局 。1.1.3 新媒體網(wǎng)頁的設(shè)計元素文字：是網(wǎng)頁信息傳遞的主要1.1.4 新媒體網(wǎng)頁的布局方式固定布局流式布局 彈性布局 伸縮 響應(yīng)式 自適應(yīng) 1.1.4 新媒體網(wǎng)頁的布局方式固定布局1.2 新媒體網(wǎng)站的色彩選擇與搭配1.2.1 色彩理論 色彩是藝術(shù)表現(xiàn)的要素之一，是光刺激眼睛傳導(dǎo)到大腦中樞而產(chǎn)生的一種感覺。網(wǎng)頁設(shè)計師在決定了一個網(wǎng)站風(fēng)格的同時也決定了網(wǎng)站的情感，而情感的表達(dá)很大程度上取決于顏色的選擇。而網(wǎng)

4、站給人的第一印象來自視覺沖擊，因此確定網(wǎng)站的標(biāo)準(zhǔn)色彩是新媒體網(wǎng)頁設(shè)計中最重要的一個方面。 1.2 新媒體網(wǎng)站的色彩選擇與搭配1.2.1 色彩理論 1.2.1 色彩理論在HTML中，顏色有3種表示方式 ：十六進(jìn)制的數(shù) 顏色常量 rgb(r，g，b) 1.2.1 色彩理論在HTML中，顏色有3種表示方式 ：1.2.2 選擇色彩 網(wǎng)頁設(shè)計中，色彩的選擇往往是和情感聯(lián)系在一起的，比如溫暖、冷靜或嚴(yán)肅的情感。暖色能帶來陽光明媚的情緒，讓人感覺到溫暖，例如紅色、黃色和橙色；冷色可以表達(dá)出權(quán)威、明確和信任的感覺，讓人聯(lián)想到?jīng)鏊秃洌缢{(lán)色，綠色和紫色；中性色，只是給用戶一種淡淡的感受，沒有過多的情緒，平

5、靜，淡然，像灰色和棕色就是中性色。1.2.2 選擇色彩 網(wǎng)頁設(shè)計中，色彩的選擇往1.2.3 搭配色彩 標(biāo)準(zhǔn)色彩是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，不同的色彩搭配可以產(chǎn)生不同的效果，并可能影響到訪問者的情緒。單一色 相似色 互補(bǔ)色 1.2.3 搭配色彩 標(biāo)準(zhǔn)色彩是指能體現(xiàn)網(wǎng)站形象1.2.4 精彩網(wǎng)頁賞析IBM中國站 1.2.4 精彩網(wǎng)頁賞析IBM中國站 1.2.4 精彩網(wǎng)頁賞析可口可樂中國站 1.2.4 精彩網(wǎng)頁賞析可口可樂中國站 1.2.4 精彩網(wǎng)頁賞析何園網(wǎng)站1.2.4 精彩網(wǎng)頁賞析何園網(wǎng)站1.3 新媒體網(wǎng)站的策劃與創(chuàng)建原則1.3.1 定位網(wǎng)站主題和名稱 定位網(wǎng)站主題 ：網(wǎng)站的題材和內(nèi)容應(yīng)緊

6、扣主題，要突出個性和特色。網(wǎng)站定位要準(zhǔn)確，內(nèi)容要精練，題材不要太寬泛或者目標(biāo)太高。網(wǎng)站名稱：網(wǎng)站名稱最好使用中文，字?jǐn)?shù)控制在6個字以內(nèi)，名稱要見名知義，且能代表本站特色。1.3 新媒體網(wǎng)站的策劃與創(chuàng)建原則1.3.1 定位網(wǎng)站主題1.3.2 網(wǎng)站風(fēng)格 網(wǎng)站的風(fēng)格是指網(wǎng)站的整體外觀帶給用戶的綜合感受，包括版面布局、瀏覽方式、交互性等諸多因素。1.3.2 網(wǎng)站風(fēng)格 網(wǎng)站的風(fēng)格是指網(wǎng)站的整體1.3.3 網(wǎng)站的CI形象 所謂CI，是借用的廣告術(shù)語，意思是通過視覺來統(tǒng)一企業(yè)的形象。設(shè)計網(wǎng)站標(biāo)志確定網(wǎng)站標(biāo)準(zhǔn)色彩確定網(wǎng)站標(biāo)準(zhǔn)字體 設(shè)計網(wǎng)站的宣傳標(biāo)語1.3.3 網(wǎng)站的CI形象 所謂CI，是借用的1.4 HTML

7、5簡介 HTML5是定義HTML標(biāo)準(zhǔn)的最新的版本，它既是一個新版本的HTML語言，具有新的元素、屬性和行為，還有更大的技術(shù)集，允許更多樣化和強(qiáng)大的網(wǎng)站和應(yīng)用程序。它不但強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能，還追加了本地數(shù)據(jù)庫等 Web 應(yīng)用的功能。 1.4 HTML5簡介 HTML5是定義H1.4.1 HTML5特性語義特性 本地存儲特性 設(shè)備兼容特性 連接特性 網(wǎng)頁多媒體特性 三維、圖形及特效特性 性能與集成特性 CSS3特性 1.4.1 HTML5特性語義特性 1.4.2 HTML5新增功能取消了一些過時的HTML4標(biāo)記 將內(nèi)容和展示分離 表單元素的升級 新增audio 和video 標(biāo)簽 新增canvas標(biāo)簽 新增一些API（主要是供js使用的） 1.4.2 HTML5新增功能取消了一些過時的HTM