頁設計基礎知識課件

網(wǎng)頁設計矯桂娥郵箱：jiaoguie@126.com辦公室：1205#網(wǎng)頁設計矯桂娥2主要內(nèi)容網(wǎng)頁框架的搭建：dreamweaver/flash網(wǎng)頁動態(tài)元素的使用：flash網(wǎng)頁靜態(tài)元素的使用：photoshop/fireworks2主要內(nèi)容網(wǎng)頁框架的搭建：dreamweaver/flash3網(wǎng)頁框架的搭建網(wǎng)頁制作的基礎知識等標記語言xhtml的使用css樣式的應用Web常見網(wǎng)頁元素的創(chuàng)建標準之行為的使用綜合實例3網(wǎng)頁框架的搭建網(wǎng)頁制作的基礎知識等4網(wǎng)頁動態(tài)元素的使用Flash基本動畫特效網(wǎng)頁中常見的動畫元素FlashActionScript3.0基礎知識Flash交互應用程序的創(chuàng)建4網(wǎng)頁動態(tài)元素的使用Flash基本動畫特效5教材主教材《CSS網(wǎng)頁設計標準教程》人民郵電出版社參考教材《網(wǎng)頁制作綜合技術(shù)教程》網(wǎng)址：校課程中心網(wǎng)站《網(wǎng)頁設計》(矯)《Dreamweavercs3網(wǎng)頁制作基礎教程》《dreamweaver與xml綜合應用》《flash網(wǎng)站制作創(chuàng)意與表現(xiàn)》5教材主教材6課程性質(zhì)考核方式：考試課平時成績：課堂表現(xiàn)，考勤，隨堂作業(yè)，實驗報告等（40%）考試部分：上機考，網(wǎng)頁設計（60%）6課程性質(zhì)考核方式：考試課7課程性質(zhì)考核方式：考查課考核次數(shù)：平時和兩次考核平時成績：課堂表現(xiàn)，考勤，隨堂作業(yè)，實驗報告等（30%）第一次考核：網(wǎng)頁設計部分（40%）第二次考核：網(wǎng)頁的動畫部分（30%）7課程性質(zhì)考核方式：考查課8教學進度考查課，共64課時。網(wǎng)頁設計部分：48課時，校內(nèi)教師講授網(wǎng)頁動畫部分：16課時，校企合作單位講授8教學進度考查課，共64課時。9教學進度考試課，共48課時。網(wǎng)頁設計部分：48課時，校內(nèi)教師講授網(wǎng)頁動畫部分：12課時，校企合作單位講授9教學進度考試課，共48課時。10網(wǎng)頁基礎知識基本概念網(wǎng)站開發(fā)流程網(wǎng)頁標準網(wǎng)頁布局分類以及技術(shù)10網(wǎng)頁基礎知識基本概念平時上網(wǎng)干什么？主要使用什么瀏覽器？怎樣打開校園網(wǎng)？怎樣創(chuàng)建一個網(wǎng)頁（網(wǎng)站）？網(wǎng)站保存在什么地方？平時上網(wǎng)干什么？12基本概念網(wǎng)頁：web服務器上供客戶端用戶瀏覽的文件網(wǎng)站：一系列網(wǎng)頁的組合，擁有相同或相似的屬性并通過各種鏈接相關(guān)聯(lián)。主頁：網(wǎng)站的第一個頁面12基本概念HTML?HTTP?URL?HTML?B/S模式服務器與瀏覽器關(guān)系示意圖B/S模式服務器與瀏覽器關(guān)系示意圖15網(wǎng)頁分類靜態(tài)網(wǎng)頁動態(tài)網(wǎng)頁客戶端動態(tài)技術(shù)服務器端動態(tài)技術(shù)15網(wǎng)頁分類實踐1創(chuàng)建一個基本的網(wǎng)頁：myindex.html在本地計算機中訪問這個網(wǎng)頁在瀏覽器中訪問這個網(wǎng)頁區(qū)別是什么？構(gòu)建網(wǎng)站的流程是怎樣的？實踐1創(chuàng)建一個基本的網(wǎng)頁：myindex.html17網(wǎng)頁開發(fā)工作流程規(guī)劃站點確立站點的策略或目標，確定所面向的用戶以及站點的數(shù)據(jù)需求設置開發(fā)環(huán)境選擇Web服務器，利用Dreamweaver等軟件定義站點以及數(shù)據(jù)源規(guī)劃頁面設計和布局用繪圖工具創(chuàng)建頁面和界面模型，使用Dreamweaver等布置頁面17網(wǎng)頁開發(fā)工作流程規(guī)劃站點18創(chuàng)建內(nèi)容資源使用ps、flash等創(chuàng)建圖像、視頻等組合、測試和部署站點使用dreamweaver等編譯資源，測試代碼，將站點發(fā)布到服務器上維護、更新站點使用dreamweaver等保持內(nèi)容的更新18創(chuàng)建內(nèi)容資源19網(wǎng)頁基本元素導航欄表單動畫超鏈接文本表格圖片聲音和視頻其他常見元素19網(wǎng)頁基本元素導航欄20網(wǎng)頁標準的組成Web2.0網(wǎng)頁標準：結(jié)構(gòu)標準語言：xhtml和xml表現(xiàn)標準語言：css行為標準語言：dom、ecmascript20網(wǎng)頁標準的組成Web2.0網(wǎng)頁標準：21結(jié)構(gòu)標準語言Xml可擴展標記語言：滿足網(wǎng)絡信息發(fā)布的需要，網(wǎng)絡數(shù)據(jù)的轉(zhuǎn)換和描述Xhtml可擴展超文本標記語言：是html向xml過渡的一個橋梁，是一個引導人們逐步走向規(guī)范的過渡方案21結(jié)構(gòu)標準語言22SGML，通用標記語言標準，定義電子文檔結(jié)構(gòu)和內(nèi)容描述的標準。1989前后，html問世，至今html5.0版本缺陷：內(nèi)容和格式在一起存放處理圖像等多媒體能力比較弱標記有限等22SGML，通用標記語言標準，定義電子文檔結(jié)構(gòu)和內(nèi)容描述的23表現(xiàn)標準語言網(wǎng)頁的表現(xiàn)是賦予內(nèi)容的一種樣式，也就是文檔看起來的樣子。CSS，層疊樣式表，布局網(wǎng)頁，控制網(wǎng)頁的表現(xiàn)CSS（網(wǎng)頁的表現(xiàn)）ANDXhtml（網(wǎng)頁的結(jié)構(gòu)），使得站點的訪問和網(wǎng)頁的維護更加容易23表現(xiàn)標準語言24行為標準語言DOM，文檔對象模型，與瀏覽器、平臺、語言的接口，使用戶可以訪問頁面其他的標準組件ECMAScript，標準腳本語言24行為標準語言25網(wǎng)頁標準的優(yōu)點客戶端文件下載與頁面顯示速度更快內(nèi)容能被更多的用戶訪問內(nèi)容能被更廣泛的設備訪問用戶能夠通過樣式選擇定制自己的表現(xiàn)界面所有頁面都能提供適于打印的版本25網(wǎng)頁標準的優(yōu)點26服務器端更少的代碼和組件，容易維護帶寬要求降低（代碼更簡潔），成本降低更容易被搜索引擎搜索到改版方便，不需要變動頁面內(nèi)容提供打印版本而不需要復制內(nèi)容26服務器端27“內(nèi)容+結(jié)構(gòu)+表現(xiàn)”構(gòu)成了一個網(wǎng)頁的不可缺少的組成部分內(nèi)容是頁面?zhèn)鬟_信息的基礎，文本、圖片、音樂、視頻、數(shù)據(jù)、文檔等表現(xiàn)使得內(nèi)容的傳達變得更加明晰和方便，字體樣式、對齊樣式、背景修飾等。結(jié)構(gòu)是表現(xiàn)和內(nèi)容的紐帶27“內(nèi)容+結(jié)構(gòu)+表現(xiàn)”構(gòu)成了一個網(wǎng)頁的不可缺少的組成部分28

RIA的概念Macromedia公司在業(yè)界率先提出RichInternetApplication（簡稱RIA，富互聯(lián)網(wǎng)應用程序）的概念，它是一種具高度互動性和豐富用戶體驗的新一代網(wǎng)絡應用程序框架，能帶給用戶一個直觀、快速響應和豐富的互動體驗的運行環(huán)境，為用戶帶來前所未有的體驗。在技術(shù)上，RIA將客戶層的設計從以頁面為中心提升到以組件為中心，從而改進了客戶端程序的設計。目前多家廠商紛紛推出了自己的RIA解決方案，如已經(jīng)成為主流的Ajax技術(shù)，微軟的SilverLight和Sun的JavaFx，Adobe的Flex等，這些技術(shù)各有特點。28RIA的概念29網(wǎng)頁布局的原則平衡性對稱性對比性疏密度比例29網(wǎng)頁布局的原則平衡性30常見的網(wǎng)頁布局“國”字型布局拐角型布局標題文本型布局左右（或者上下）框架型布局綜合框架型布局封面型布局Flash型布局變化型布局30常見的網(wǎng)頁布局31布局的常用技術(shù)CSS布局表格布局框架布局31布局的常用技術(shù)32相關(guān)技巧第一屏與版面尺寸多分辨率的支持流媒體空白的處理字體不要太多鏈接層次不要太深表格嵌套不要太多32相關(guān)技巧第一屏與版面尺寸33基本經(jīng)驗：忌“花”：色彩不要過多冷暖搭配要謹慎網(wǎng)站各界面色彩統(tǒng)一不要用“花”背景（避免“喧賓奪主”）33基本經(jīng)驗：網(wǎng)頁設計矯桂娥郵箱：jiaoguie@126.com辦公室：1205#網(wǎng)頁設計矯桂娥35主要內(nèi)容網(wǎng)頁框架的搭建：dreamweaver/flash網(wǎng)頁動態(tài)元素的使用：flash網(wǎng)頁靜態(tài)元素的使用：photoshop/fireworks2主要內(nèi)容網(wǎng)頁框架的搭建：dreamweaver/flash36網(wǎng)頁框架的搭建網(wǎng)頁制作的基礎知識等標記語言xhtml的使用css樣式的應用Web常見網(wǎng)頁元素的創(chuàng)建標準之行為的使用綜合實例3網(wǎng)頁框架的搭建網(wǎng)頁制作的基礎知識等37網(wǎng)頁動態(tài)元素的使用Flash基本動畫特效網(wǎng)頁中常見的動畫元素FlashActionScript3.0基礎知識Flash交互應用程序的創(chuàng)建4網(wǎng)頁動態(tài)元素的使用Flash基本動畫特效38教材主教材《CSS網(wǎng)頁設計標準教程》人民郵電出版社參考教材《網(wǎng)頁制作綜合技術(shù)教程》網(wǎng)址：校課程中心網(wǎng)站《網(wǎng)頁設計》(矯)《Dreamweavercs3網(wǎng)頁制作基礎教程》《dreamweaver與xml綜合應用》《flash網(wǎng)站制作創(chuàng)意與表現(xiàn)》5教材主教材39課程性質(zhì)考核方式：考試課平時成績：課堂表現(xiàn)，考勤，隨堂作業(yè)，實驗報告等（40%）考試部分：上機考，網(wǎng)頁設計（60%）6課程性質(zhì)考核方式：考試課40課程性質(zhì)考核方式：考查課考核次數(shù)：平時和兩次考核平時成績：課堂表現(xiàn)，考勤，隨堂作業(yè)，實驗報告等（30%）第一次考核：網(wǎng)頁設計部分（40%）第二次考核：網(wǎng)頁的動畫部分（30%）7課程性質(zhì)考核方式：考查課41教學進度考查課，共64課時。網(wǎng)頁設計部分：48課時，校內(nèi)教師講授網(wǎng)頁動畫部分：16課時，校企合作單位講授8教學進度考查課，共64課時。42教學進度考試課，共48課時。網(wǎng)頁設計部分：48課時，校內(nèi)教師講授網(wǎng)頁動畫部分：12課時，校企合作單位講授9教學進度考試課，共48課時。43網(wǎng)頁基礎知識基本概念網(wǎng)站開發(fā)流程網(wǎng)頁標準網(wǎng)頁布局分類以及技術(shù)10網(wǎng)頁基礎知識基本概念平時上網(wǎng)干什么？主要使用什么瀏覽器？怎樣打開校園網(wǎng)？怎樣創(chuàng)建一個網(wǎng)頁（網(wǎng)站）？網(wǎng)站保存在什么地方？平時上網(wǎng)干什么？45基本概念網(wǎng)頁：web服務器上供客戶端用戶瀏覽的文件網(wǎng)站：一系列網(wǎng)頁的組合，擁有相同或相似的屬性并通過各種鏈接相關(guān)聯(lián)。主頁：網(wǎng)站的第一個頁面12基本概念HTML?HTTP?URL?HTML?B/S模式服務器與瀏覽器關(guān)系示意圖B/S模式服務器與瀏覽器關(guān)系示意圖48網(wǎng)頁分類靜態(tài)網(wǎng)頁動態(tài)網(wǎng)頁客戶端動態(tài)技術(shù)服務器端動態(tài)技術(shù)15網(wǎng)頁分類實踐1創(chuàng)建一個基本的網(wǎng)頁：myindex.html在本地計算機中訪問這個網(wǎng)頁在瀏覽器中訪問這個網(wǎng)頁區(qū)別是什么？構(gòu)建網(wǎng)站的流程是怎樣的？實踐1創(chuàng)建一個基本的網(wǎng)頁：myindex.html50網(wǎng)頁開發(fā)工作流程規(guī)劃站點確立站點的策略或目標，確定所面向的用戶以及站點的數(shù)據(jù)需求設置開發(fā)環(huán)境選擇Web服務器，利用Dreamweaver等軟件定義站點以及數(shù)據(jù)源規(guī)劃頁面設計和布局用繪圖工具創(chuàng)建頁面和界面模型，使用Dreamweaver等布置頁面17網(wǎng)頁開發(fā)工作流程規(guī)劃站點51創(chuàng)建內(nèi)容資源使用ps、flash等創(chuàng)建圖像、視頻等組合、測試和部署站點使用dreamweaver等編譯資源，測試代碼，將站點發(fā)布到服務器上維護、更新站點使用dreamweaver等保持內(nèi)容的更新18創(chuàng)建內(nèi)容資源52網(wǎng)頁基本元素導航欄表單動畫超鏈接文本表格圖片聲音和視頻其他常見元素19網(wǎng)頁基本元素導航欄53網(wǎng)頁標準的組成Web2.0網(wǎng)頁標準：結(jié)構(gòu)標準語言：xhtml和xml表現(xiàn)標準語言：css行為標準語言：dom、ecmascript20網(wǎng)頁標準的組成Web2.0網(wǎng)頁標準：54結(jié)構(gòu)標準語言Xml可擴展標記語言：滿足網(wǎng)絡信息發(fā)布的需要，網(wǎng)絡數(shù)據(jù)的轉(zhuǎn)換和描述Xhtml可擴展超文本標記語言：是html向xml過渡的一個橋梁，是一個引導人們逐步走向規(guī)范的過渡方案21結(jié)構(gòu)標準語言55SGML，通用標記語言標準，定義電子文檔結(jié)構(gòu)和內(nèi)容描述的標準。1989前后，html問世，至今html5.0版本缺陷：內(nèi)容和格式在一起存放處理圖像等多媒體能力比較弱標記有限等22SGML，通用標記語言標準，定義電子文檔結(jié)構(gòu)和內(nèi)容描述的56表現(xiàn)標準語言網(wǎng)頁的表現(xiàn)是賦予內(nèi)容的一種樣式，也就是文檔看起來的樣子。CSS，層疊樣式表，布局網(wǎng)頁，控制網(wǎng)頁的表現(xiàn)CSS（網(wǎng)頁的表現(xiàn)）ANDXhtml（網(wǎng)頁的結(jié)構(gòu)），使得站點的訪問和網(wǎng)頁的維護更加容易23表現(xiàn)標準語言57行為標準語言DOM，文檔對象模型，與瀏覽器、平臺、語言的接口，使用戶可以訪問頁面其他的標準組件ECMAScript，標準腳本語言24行為標準語言58網(wǎng)頁標準的優(yōu)點客戶端文件下載與頁面顯示速度更快內(nèi)容能被更多的用戶訪問內(nèi)容能被更廣泛的設備訪問用戶能夠通過樣式選擇定制自己的表現(xiàn)界面所有頁面都能提供適于打印的版本25網(wǎng)頁標準的優(yōu)點59服務器端更少的代碼和組件，容易維護帶寬要求降低（代碼更簡潔），成本降低更容易被搜索引擎搜索到改版方便，不需要變動頁面內(nèi)容提供打印版本而不需要復制內(nèi)容26服務器端60“內(nèi)容+結(jié)構(gòu)+表現(xiàn)”構(gòu)成了一個網(wǎng)頁的不可缺少的組成部分內(nèi)容是頁面?zhèn)鬟_信息的基礎，文本、圖片、音樂、視頻、數(shù)據(jù)、文檔等表現(xiàn)使得內(nèi)容的傳達變得更加明晰和方便，字體樣式、對齊樣式、背景修飾等。結(jié)構(gòu)是表現(xiàn)和內(nèi)容的紐帶27“內(nèi)容+結(jié)構(gòu)+表現(xiàn)”構(gòu)成了一個網(wǎng)頁的不可缺少的組成部分61

RIA的概念Macromedia公司在業(yè)界率先提出R