頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)課件

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

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

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