網(wǎng)站技術(shù)與設(shè)計(jì)培訓(xùn)課件_第1頁
網(wǎng)站技術(shù)與設(shè)計(jì)培訓(xùn)課件_第2頁
網(wǎng)站技術(shù)與設(shè)計(jì)培訓(xùn)課件_第3頁
網(wǎng)站技術(shù)與設(shè)計(jì)培訓(xùn)課件_第4頁
網(wǎng)站技術(shù)與設(shè)計(jì)培訓(xùn)課件_第5頁
已閱讀5頁，還剩63頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)站技術(shù)與設(shè)計(jì)蔣斌

jiangbincn@163.co習(xí)平臺(tái)：作業(yè)上傳：07/網(wǎng)站技術(shù)與設(shè)計(jì)蔣斌學(xué)習(xí)平臺(tái)：1信息素養(yǎng)獲取信息、使用信息、創(chuàng)造信息的能力技術(shù)與設(shè)計(jì)有一雙識(shí)別美的眼睛預(yù)備知識(shí)：http://ftp://URL

網(wǎng)站結(jié)構(gòu)信息素養(yǎng)2課的結(jié)構(gòu)理論課35%實(shí)踐課（帶上耳機(jī)）50%欣賞課15%課的結(jié)構(gòu)理論課3制作軟件整合了幾乎所有的網(wǎng)站技術(shù)，是制作專業(yè)網(wǎng)站的捷徑But仍然必須對各種語言有一定了解Dreamweaver制作軟件Dreamweaver4制作軟件矢量動(dòng)畫制作軟件FLASH圖形處理軟件PHOTOSHOP制作軟件矢量動(dòng)畫制作軟件FLASH5Difficulty20%課堂上可以學(xué)會(huì)的40%通過上機(jī)實(shí)踐可以掌握的20%經(jīng)過努力可以習(xí)得20%需要慢慢領(lǐng)悟的Difficulty20%課堂上可以學(xué)會(huì)的6MethodsDo{上機(jī)}while(1)Copy&modifydesignyourproductionMethodsDo7idea沒有一種軟件可以促進(jìn)你的水平提高，一切進(jìn)步的根源在于你的頭腦別人的作品比你的優(yōu)秀的原因不是靠幾個(gè)技巧，而是他耗費(fèi)了比你更多的精力idea沒有一種軟件可以促進(jìn)你的水平提高，一切進(jìn)步的根源在于8網(wǎng)站技術(shù)知識(shí)體系1.超文本標(biāo)識(shí)語言(html)HyperTextMarkupLanguageHtml是用來表示web文檔的規(guī)范，它使用標(biāo)識(shí)符來確定網(wǎng)頁顯示的格式Html4.01XHtml1.0(XML)網(wǎng)站技術(shù)知識(shí)體系1.超文本標(biāo)識(shí)語言(html)Hyper92.網(wǎng)頁美化層疊樣式表CSS（CasecadingStyleSheet）是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁格式網(wǎng)站技術(shù)知識(shí)體系2.網(wǎng)頁美化層疊樣式表是一種格式化網(wǎng)頁的標(biāo)10CSS介紹CSS層疊樣式表單1、樣式表單——控制網(wǎng)頁顯示方式2、層疊——樣式的優(yōu)先級3、有效地使網(wǎng)頁顯示和網(wǎng)頁內(nèi)容分離（示例）“Web標(biāo)準(zhǔn)”CSS介紹CSS層疊樣式表單1、樣式表單——控制網(wǎng)頁顯示方式11CSS盒模型（box）contentpaddingbordermarginCSS2中的盒模型是關(guān)系到設(shè)計(jì)中排版定位的關(guān)鍵CSS盒模型（box）contentpaddingborde12三維模型動(dòng)畫三維模型動(dòng)畫13層疊概念及css與html結(jié)合方式<HTML><HEAD><LINKrel=stylesheethref=test.csstype=“text/css”><STYLE><!--H1{color:yellow}--></STYLE></HEAD><BODY><H1style=“color:blue”>red,yelloworblue?</H1></BODY></HTML> 層疊概念及css與html結(jié)合方式<HTML>14基本規(guī)則P{color:red；}選擇符聲明屬性值基本規(guī)則P{color:red；}選擇符聲明15選擇符類型選擇符類選擇符ID選擇符包含選擇符類選擇符和ID選擇符的區(qū)別：類選擇符可以重復(fù)使用，且可以應(yīng)用在任意元素上；ID選擇符是唯一的選擇符類型選擇符16偽類和偽元素元素并不存在，只是指明一種狀態(tài)A:link{FONT-SIZE:12px;COLOR:#000000;TEXT-DECORATION:none}A:visited{FONT-SIZE:12px;COLOR:#000000;TEXT-DECORATION:none}A:hover{FONT-SIZE:12px;COLOR:#fc6a04;TEXT-DECORATION:underline}A:active{FONT-SIZE:12px;COLOR:#cc0000;text-decoration:none}注意順序A(錨點(diǎn))樣式重定義(偽類)偽類和偽元素元素并不存在，只是指明一種狀態(tài)A:link{17文檔結(jié)構(gòu)文檔結(jié)構(gòu)18網(wǎng)站技術(shù)知識(shí)體系3.動(dòng)態(tài)網(wǎng)頁javascriptAJAX(異步JavaScript和XML)典型應(yīng)用：Gmail,Googlesuggest和googleMaps網(wǎng)站技術(shù)知識(shí)體系3.動(dòng)態(tài)網(wǎng)頁javascriptAJAX19JavaScript核心概念所有的網(wǎng)頁元素都是一個(gè)對象windowlocationdocumenttableimagelinkformtextsubmittrtdJavaScript核心概念所有的網(wǎng)頁元素都是一個(gè)對象wi20萬物皆對象每個(gè)對象都有屬性和方法img1.heighttd1.alignwindow.print()document.write(“”)我們通過事件來觸發(fā)程序onMouseOveronMouseOut點(diǎn)語法document.queryFText.value萬物皆對象21基礎(chǔ)練習(xí)翻滾圖定制彈出窗口基礎(chǔ)練習(xí)翻滾圖22表單檢驗(yàn)functionEmailCkeck(){varvalid=false;varemailStr=document.login.email.value;if(emailStr=="")alert("inputyouremail,please!");else{for(i=0;i<emailStr.length;i++){if(emailStr.charAt(i)=="@") {valid=true; break; }}if(valid==false)alert("pleasecheckyouremail!"); }}表單檢驗(yàn)functionEmailCkeck()23CSS&JavaScript應(yīng)用

---XP風(fēng)格菜單代碼分析CSS&JavaScript應(yīng)用

-24網(wǎng)站技術(shù)知識(shí)體系4.網(wǎng)絡(luò)編程.net(asp)+windows(IIS)+SQLServerPHP+Linux+MySqlJSP+Linux+Oracle網(wǎng)站技術(shù)知識(shí)體系4.網(wǎng)絡(luò)編程.net(asp)+windo25Flash動(dòng)畫的特點(diǎn)靈活地結(jié)合了矢量圖、位圖、音頻、視頻和交互動(dòng)作，應(yīng)用于各種媒體領(lǐng)域文件數(shù)據(jù)量小強(qiáng)大的交互性（Actionscript）支持邊下載邊播放的“流”的形式絢麗的視覺表現(xiàn)形式Flash動(dòng)畫的特點(diǎn)靈活地結(jié)合了矢量圖、位圖、音頻、視26動(dòng)畫基本概念連續(xù)播放的靜態(tài)圖片給人產(chǎn)生運(yùn)動(dòng)的錯(cuò)覺動(dòng)畫基本概念連續(xù)播放的靜態(tài)圖片給人產(chǎn)生運(yùn)動(dòng)的錯(cuò)覺27幀(frame)---動(dòng)畫的時(shí)間表示1、逐幀動(dòng)畫2、關(guān)鍵幀動(dòng)畫(keyframe)幀(frame)---動(dòng)畫的時(shí)間表示28動(dòng)畫基本概念層(layer)---動(dòng)畫的三維空間表示動(dòng)畫基本概念層(layer)---動(dòng)畫的三維空間表示29物體和運(yùn)動(dòng)的透視關(guān)系物體和運(yùn)動(dòng)的透視關(guān)系30鏡頭組接原則景別過渡自然、合理必須有明顯變化景別差別不大時(shí)，必須改變“攝像機(jī)”機(jī)位不能同景別相接動(dòng)接動(dòng)，靜接靜鏡頭組接原則景別過渡自然、合理31Flash基礎(chǔ)概念Directorflash矢量圖與位圖800%Flash基礎(chǔ)概念Directorfla32Flash基礎(chǔ)概念場景和演員(元件)導(dǎo)演：讓演員(元件)在不同的時(shí)候(時(shí)間軸)出現(xiàn)在不同的地方演員：可以控制他的大小，顏色，透明度(alpha)等，甚至是復(fù)制他ActionScript腳本語言Flash基礎(chǔ)概念場景和演員(元件)33演講完畢，謝謝觀看！演講完畢，謝謝觀看！34網(wǎng)站技術(shù)與設(shè)計(jì)蔣斌

jiangbincn@163.co習(xí)平臺(tái)：作業(yè)上傳：07/網(wǎng)站技術(shù)與設(shè)計(jì)蔣斌學(xué)習(xí)平臺(tái)：35信息素養(yǎng)獲取信息、使用信息、創(chuàng)造信息的能力技術(shù)與設(shè)計(jì)有一雙識(shí)別美的眼睛預(yù)備知識(shí)：http://ftp://URL

網(wǎng)站結(jié)構(gòu)信息素養(yǎng)36課的結(jié)構(gòu)理論課35%實(shí)踐課（帶上耳機(jī)）50%欣賞課15%課的結(jié)構(gòu)理論課37制作軟件整合了幾乎所有的網(wǎng)站技術(shù)，是制作專業(yè)網(wǎng)站的捷徑But仍然必須對各種語言有一定了解Dreamweaver制作軟件Dreamweaver38制作軟件矢量動(dòng)畫制作軟件FLASH圖形處理軟件PHOTOSHOP制作軟件矢量動(dòng)畫制作軟件FLASH39Difficulty20%課堂上可以學(xué)會(huì)的40%通過上機(jī)實(shí)踐可以掌握的20%經(jīng)過努力可以習(xí)得20%需要慢慢領(lǐng)悟的Difficulty20%課堂上可以學(xué)會(huì)的40MethodsDo{上機(jī)}while(1)Copy&modifydesignyourproductionMethodsDo41idea沒有一種軟件可以促進(jìn)你的水平提高，一切進(jìn)步的根源在于你的頭腦別人的作品比你的優(yōu)秀的原因不是靠幾個(gè)技巧，而是他耗費(fèi)了比你更多的精力idea沒有一種軟件可以促進(jìn)你的水平提高，一切進(jìn)步的根源在于42網(wǎng)站技術(shù)知識(shí)體系1.超文本標(biāo)識(shí)語言(html)HyperTextMarkupLanguageHtml是用來表示web文檔的規(guī)范，它使用標(biāo)識(shí)符來確定網(wǎng)頁顯示的格式Html4.01XHtml1.0(XML)網(wǎng)站技術(shù)知識(shí)體系1.超文本標(biāo)識(shí)語言(html)Hyper432.網(wǎng)頁美化層疊樣式表CSS（CasecadingStyleSheet）是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁格式網(wǎng)站技術(shù)知識(shí)體系2.網(wǎng)頁美化層疊樣式表是一種格式化網(wǎng)頁的標(biāo)44CSS介紹CSS層疊樣式表單1、樣式表單——控制網(wǎng)頁顯示方式2、層疊——樣式的優(yōu)先級3、有效地使網(wǎng)頁顯示和網(wǎng)頁內(nèi)容分離（示例）“Web標(biāo)準(zhǔn)”CSS介紹CSS層疊樣式表單1、樣式表單——控制網(wǎng)頁顯示方式45CSS盒模型（box）contentpaddingbordermarginCSS2中的盒模型是關(guān)系到設(shè)計(jì)中排版定位的關(guān)鍵CSS盒模型（box）contentpaddingborde46三維模型動(dòng)畫三維模型動(dòng)畫47層疊概念及css與html結(jié)合方式<HTML><HEAD><LINKrel=stylesheethref=test.csstype=“text/css”><STYLE><!--H1{color:yellow}--></STYLE></HEAD><BODY><H1style=“color:blue”>red,yelloworblue?</H1></BODY></HTML> 層疊概念及css與html結(jié)合方式<HTML>48基本規(guī)則P{color:red；}選擇符聲明屬性值基本規(guī)則P{color:red；}選擇符聲明49選擇符類型選擇符類選擇符ID選擇符包含選擇符類選擇符和ID選擇符的區(qū)別：類選擇符可以重復(fù)使用，且可以應(yīng)用在任意元素上；ID選擇符是唯一的選擇符類型選擇符50偽類和偽元素元素并不存在，只是指明一種狀態(tài)A:link{FONT-SIZE:12px;COLOR:#000000;TEXT-DECORATION:none}A:visited{FONT-SIZE:12px;COLOR:#000000;TEXT-DECORATION:none}A:hover{FONT-SIZE:12px;COLOR:#fc6a04;TEXT-DECORATION:underline}A:active{FONT-SIZE:12px;COLOR:#cc0000;text-decoration:none}注意順序A(錨點(diǎn))樣式重定義(偽類)偽類和偽元素元素并不存在，只是指明一種狀態(tài)A:link{51文檔結(jié)構(gòu)文檔結(jié)構(gòu)52網(wǎng)站技術(shù)知識(shí)體系3.動(dòng)態(tài)網(wǎng)頁javascriptAJAX(異步JavaScript和XML)典型應(yīng)用：Gmail,Googlesuggest和googleMaps網(wǎng)站技術(shù)知識(shí)體系3.動(dòng)態(tài)網(wǎng)頁javascriptAJAX53JavaScript核心概念所有的網(wǎng)頁元素都是一個(gè)對象windowlocationdocumenttableimagelinkformtextsubmittrtdJavaScript核心概念所有的網(wǎng)頁元素都是一個(gè)對象wi54萬物皆對象每個(gè)對象都有屬性和方法img1.heighttd1.alignwindow.print()document.write(“”)我們通過事件來觸發(fā)程序onMouseOveronMouseOut點(diǎn)語法document.queryFText.value萬物皆對象55基礎(chǔ)練習(xí)翻滾圖定制彈出窗口基礎(chǔ)練習(xí)翻滾圖56表單檢驗(yàn)functionEmailCkeck(){varvalid=false;varemailStr=document.login.email.value;if(emailStr=="")alert("inputyouremail,please!");else{for(i=0;i<emailStr.length;i++){if(emailStr.charAt(i)=="@") {valid=true; break; }}if(valid==false)alert("pleasecheckyouremail!"); }}表單檢驗(yàn)functionEmailCkeck()57CSS&JavaScript應(yīng)用

---XP風(fēng)格菜單代碼分析CSS&JavaScript應(yīng)用

-58網(wǎng)站技術(shù)知識(shí)體系4.網(wǎng)絡(luò)編程

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論