网页建构与进阶应

《网页建构与进阶应》由会员分享，可在线阅读，更多相关《网页建构与进阶应（95页珍藏版）》请在装配图网上搜索。

1、第五單元網頁建構與進階應用Chen-Yu Lee 2003Outlinen5.1 多媒體簡介n5.2 網頁建構簡介n5.3 電腦安全簡介n5.4 程式語言簡介n5.5 進階網頁建構Chen-Yu Lee 20035.1 多媒體簡介Chen-Yu Lee 2003What is Multi-media(多媒體)n機器(電腦)以不同(多樣)的媒介(體)將資料(訊)展現給人類n提供多樣化的表現方式於 教育/娛樂/工作 上Chen-Yu Lee 2003多媒體包括有n文字n圖片n聲音n影片n3Dn其他Chen-Yu Lee 2003資料壓縮n由於多媒體資料過於龐大 n必須先壓縮方便傳輸與儲存Chen-

2、Yu Lee 2003壓縮技術n非失真壓縮Run Lengthn失真壓縮PCAChen-Yu Lee 2003圖片n圖片的原理以存Pixel的方式存圖片n圖片的壓縮統計壓縮重要元素壓縮n圖片的格式Pixel/Color/File FormatBMP,PCX,GIF,JPG.Chen-Yu Lee 2003範例n自然影像壓縮nBMP to GIFnBMP to JPGn人工影像壓縮nBMP to GIFnBMP to JPGChen-Yu Lee 2003圖片工具簡介n小畫家(簡易圖形編輯)nPhotoImpact(網頁專用圖形編輯)nPaintShopPro(專業圖形編輯)nPhotoShop

3、(超專業圖形編輯)nACDSee(秀圖軟體)Chen-Yu Lee 2003動動手n自己用小畫家畫一張圖,然後存成BMP,GIF與JPG檔,比較一下差異.Chen-Yu Lee 2003分組討論時間.n了解了圖片簡單的壓縮方式後n你覺得聲音要怎樣壓縮?Chen-Yu Lee 2003聲音n聲音的原理將聲音以數位的方式儲存n聲音的壓縮去掉不重要的頻率(太高/太低)n聲音的格式取樣聲道Mono/Stereo/A3D 2,4 channel Dolby Digital 2/./5.1 channelWav,Mp3,Wma,MidChen-Yu Lee 2003聲音數位化n自然聲音須經過一個取樣(sa

4、mpling)的過程轉成數位(digital)訊號.n兩個影響取樣的因素.取樣頻率(sample rate)須表現出原始波型的型態,所以須以2倍以上的取樣頻率才能真實的表現出原音.取樣解析度(sample resolution)每個取樣點的階度直.越大越能夠真實的反應聲音的差異性.Chen-Yu Lee 2003聲音數位化n取樣頻率(sample rate)兩倍以上.音樂訊號 10-20000 Hz寬頻語音 50-7000 Hz一般人聲 300-3400 Hz頻率波長(音量)頻率頻率頻率Chen-Yu Lee 2003聲音數位化n取樣解析度(sample resolution)增加強弱度的差異

5、8bits=256 個強度16bits=65536 個強度波長(音量)波長(音量)Chen-Yu Lee 2003常見取樣n CD品質44100 Hz/16 bits立體聲44100*16*2/8=172KB/secn收音機品質22050 Hz/8 bits單音 22KB/secn電話/錄音帶品質11025 Hz/8 bits單音 11KB/secChen-Yu Lee 2003聲音壓縮n由於人的聽覺約在20-20000Hz之間,所以可以將高頻及低頻捨去以壓縮空間.nMpeg1 audio layer1標準壓縮效率為1：4nMpeg1 audio layer2壓縮效率為1：61：8nMpeg1

6、 audio layer3(mp3)壓縮效率則高達1：101：12Chen-Yu Lee 2003MP3nMpeg1 audio layer3(mp3)nBit rate(每秒資料的流量)n192K每秒要192Kbits的資料來存音樂五分鐘的歌=300 secExampleChen-Yu Lee 2003訊噪比nSNR，S/N，Signal-to-Noise Ration訊噪比的是原始訊號與噪音之間的比例n值越大越好。Chen-Yu Lee 2003聲音工具簡介nVoxengo CurveEQ nWave Creatorn錄音機(錄音程式)nCreative Recorder(錄音程式)nWi

7、nAmp(撥放/轉換程式)nCdplayer(撥放程式)nWave 2 mp3n很多應用程式以內含Chen-Yu Lee 2003影片n影片的原理每秒撥放24張以上圖片(非自然圖加倍)n影片的壓縮Bit rate只存重要幾張其他以即時運算獲得n影片的格式Mpeg,Dat,Mov,Rm,WmvChen-Yu Lee 2003影片原理n若不另外壓縮則需24*100kB(mpeg圖像)+17k(mpeg3聲音)/Sec.145mB/Min.n一定要壓縮!Chen-Yu Lee 2003影片原理n只在一個間隔內放置關鍵頁(key frame)(紅色)n其他的頁(藍色)由內插法運算獲得key frame

8、key framekey frameChen-Yu Lee 2003內插法簡介15 1816 1917 1214 1316 1515 161514.5 324Chen-Yu Lee 2003重要的數據nBit rate(影響影片單張畫質的好壞)(每秒資料的流量)一般約為數百(差)至數千(好)K bpsnKey frame rateKey frame every second影響壓縮的程度影響使用的方便度nframe rate(影響流暢度)15-不流暢24 正常30+電腦動畫Chen-Yu Lee 2003視訊壓縮nMPEG I 352 X 240nMPEG II 720 X 480nMPEG

9、III High-Definition TV(HDTV),但是 MPEG-2 的訊號和解碼的方式,可以涵蓋處理這些高頻寬的訊號,因此 MPEG-3 便併入MPEG-2 規格之中.nMPEG IV能產生比 MPEG-1 更理想的畫質,檔案的大小又比 MPEG-2 小得很多.Chen-Yu Lee 2003影片工具簡介nUlead media studio.nXmpegnWindows media player/Real PlayernWinDVD/PowerDVDnAnimation ShopnChen-Yu Lee 20033 DimensionnTrianglenTextureChen-Yu

10、 Lee 20033 DimensionnTrianglenTextureChen-Yu Lee 20033 DimensionChen-Yu Lee 20035.2 網頁建構簡介Chen-Yu Lee 2003網頁瀏覽流程Internet要求網頁要求網頁回覆網頁回覆網頁WebServerChen-Yu Lee 2003建構個人網站n1.撰寫網頁設計網站使用FrontPage/Dreamweaver編輯圖片,聲音,影像編輯HTML使用CSS(Cascading Style Sheets)使用別人的CGI(JS,BVS)n2.申請網頁空間n3.上載網頁n4.維護網頁Chen-Yu Lee 200

11、3撰寫網頁n設計網站目的大綱(SiteMap)安排版面安排是否使用frame檔案結構安排Chen-Yu Lee 2003網頁可使用的多媒體檔n圖片JPG/GIF等有經過壓縮的圖片檔n聲音/音樂Midi 音色檔MP3/WMA/RM等有經過壓縮的音效/音樂n影片Gif 動畫檔WMV/ASF/RM等有經過高壓縮的影片Chen-Yu Lee 2003使用FrontPagen使用介面介紹n文字的使用與設定n網頁內容背景n圖片安置n連結的使用n圖層Chen-Yu Lee 2003使用FrontPagen插入導覽(其他物件)跑馬燈相片藝廊(其他很多功能需要Web Server有支援才能用)n簡易動態圖片(按

12、鈕)DHTML工具列n框架的使用內框架多框架n表單Chen-Yu Lee 2003申請網頁空間n因為網頁須置於一Web伺服器空間,才能全天候被瀏覽.n學校的工作站http:/網際網路服務篇n其他免費的網頁空間PChome 個人/網站Chen-Yu Lee 2003上載網頁流程n先於自己的PC將網頁製作好n用FTP軟體(XP可用瀏覽器)/網頁上載 將所有的網頁都上載至指定位置ftp:/u123456(學號WWW/目錄下(OZ)n設定使用權限chmod 711(OZ)n將第一頁(HomePage)設為該網頁空間規定的檔名.n於瀏覽器輸入網址http:/oz.nthu.edu.tw/u123456/

13、(自己的學號)Chen-Yu Lee 2003撰寫網頁nHTML 簡介主體.雙標籤 單標籤標籤適用區域不同(Head or Body)Chen-Yu Lee 2003撰寫網頁nExample 資訊系統應用 資訊系統應用 Chen-Yu Lee 2003HTML 簡介(Text)n ParagraphALIGN=left|right|center n Breakn HeadingnSIZE=string,COLOR=#RRGGBB,FACE=font names n(Preformatted Text)nnALIGN=left|right|center,NOSHADE,SIZE=n,WIDTH=

14、n|p%Chen-Yu Lee 2003HTML 簡介(Text)n 加粗 n 斜體 n 加底線 n 畫線刪除 n 文字放大 n 文字縮小 n 上標 n 下標 n 強調 Chen-Yu Lee 2003HTML 簡介(Images)nChen-Yu Lee 2003HTML 簡介(Links)n絕對路徑 file:/C:/http:/n相對路徑homepage.html 同一層目錄./homepage.html 同一層目錄web2/homepage.html 下一層目錄./homepage.html 上一層目錄./上一層目錄的abc目錄下nChen-Yu Lee 2003HTML 簡介(Lin

15、ks)nn 標籤nref=“http:/#標籤名稱”Chen-Yu Lee 2003HTML 簡介(Table)n nntr:table rowntd:table dataChen-Yu Lee 2003HTML 簡介(Table)nALIGN=left|center|right：位置 nWIDTH=n|p%：表格的寬度。nBORDER=n：邊界的寬度。nCELLSPACING=n：儲存格間距。nCELLPADDING=n：資料到儲存格間離。nBGCOLOR=#RRGGBB：表格底色。nColspan 合併儲存格nRowspan 合併儲存格n 加標題Chen-Yu Lee 2003HTML 簡

16、介(form)nn名字：n密碼：nnnChen-Yu Lee 2003網頁製作n簡易按鈕(圖形)製作n動畫製作nFTP軟體介紹.nCSS簡介Chen-Yu Lee 2003撰寫網頁nCSS(Cascading Style Sheets)Short-term definitionPlace the style property in specific tagEX:contentsMeans:all text marked by“this”p tag will set to be font size=5color =#001100Chen-Yu Lee 2003撰寫網頁nCSS(Cascading

17、 Style Sheets)Long-term definitionDefine the CSS between EX:A:link color=#7777ff;text-decoration:none A:visited color=#7777ff;text-decoration:none A:hover color=#3333ff;text-decoration:underline Means:all“A”tag in this html file will set to beA.link(Normal)color=#7777ff and none decorationA.visited(

18、Clicked before)color=#7777ff and none decorationA.hover(Mouse cursor over the link)color=#3333ff and underlineChen-Yu Lee 2003撰寫網頁nCSS(Cascading Style Sheets)Reference definitionCall the CSS reference file between All tags will follow the referential CSS definitionChen-Yu Lee 2003撰寫網頁n使用別人的CGI(JS,VB

19、S)From websiteEx:http:/Chen-Yu Lee 2003Java Script 簡介nJavaScript 的程式碼是Chen-Yu Lee 2003Examplennnnnnnmystring=Hello World!;ndocument.write(mystring);nnnChen-Yu Lee 2003基本觀念n識別字n保留字n變數n資料型別n運算子n敘述與運算式Chen-Yu Lee 2003識別字n對所有常數,變數,函式的命名英文字母+數字+“_”+“$”非保留字非運算子MyCounterStudent_IDChen-Yu Lee 2003保留字n程式語言中保

20、留的關鍵字n尤其特殊意義資料宣告迴圈結構宣告Boolean,int,if,else,trueChen-Yu Lee 2003變數n宣告一可變資料格式n資料類別 變數名稱 初始值nInt a=0;Chen-Yu Lee 2003資料型別nBytenIntnFloatnStringncharChen-Yu Lee 2003運算子n用於運算的符號算數運算=+-*/%+-關係運算 =!=邏輯運算!(not)&(and)|(or)(xor)複合運算+=-=*=/=位元運算(補數)(右移)&|Chen-Yu Lee 2003敘述與運算式n一般敘述sum=10;n運算sum=(a+b)/c;n註解/Stri

21、ngChen-Yu Lee 2003條件決策n根據條件的情況而有不同的處理nIf elsenSwitch caseChen-Yu Lee 2003If elsenIf(condition)statement 1 nelse statement 2 Chen-Yu Lee 2003If elsen nfunction UsageOfIF()n a=prompt(“請輸入分數：”,60);if(a60)alert(“過了！”);else alert(“當了”);Chen-Yu Lee 2003Switch casenswitch(variable)Case(value1);statement;br

22、eak;Case(value2);statement;break;Case(value3);statement;break;Default;statement;break;Chen-Yu Lee 2003Switch casentoday=new Date();/取得今天的物件nday=();/取得今天是星期幾nswitch(day)ncase 0:document.write(星期天);nbreak;ncase 1:document.write(星期一);nbreak;ncase 2:document.write(“星期二);nbreak;ndefault:ndocument.write(“

23、其他天);nbreak;nChen-Yu Lee 2003迴圈n重複以相同的(或可預知的)條件作一件事nFornWhilenDo whileChen-Yu Lee 2003For nfor(計數變數初值;測試式;更新計數變數)nn statements;nChen-Yu Lee 2003FornFor(i=0;i10;i+)nn (i);nChen-Yu Lee 2003While nwhile(條件式)n n Statements;n Chen-Yu Lee 2003ni=0;nwhile(i10)nn (i);n i+;nChen-Yu Lee 2003Do-Whilendo nn Sta

24、tements;nnwhile(條件式);Chen-Yu Lee 2003Do-Whileni=0;ndo n (i);n i+;nnwhile(i10)Chen-Yu Lee 2003練習n以JS寫一個有99乘法表的網頁.Chen-Yu Lee 2003陣列n將相同性質的資料以一個集合來存放n宣告變數名稱=new Array();n初始值變數名稱i=值;n使用P=變數名稱i;(變數名稱i);Chen-Yu Lee 2003陣列nArray1=new Array();nArray10=“John”;nArray11=“Mary”;nArray12=“Helen”;ndocument.write

25、ln(Array10+);ndocument.writeln(Array21+);ndocument.writeln(Array32+);Chen-Yu Lee 2003物件n將一個完整的概念(功能)以一個事物包裝.n物件內包含相關的屬性可用的方法(method)n宣告方式變數名稱=new物件名稱();Chen-Yu Lee 2003Date物件用法 1ntoday=new Date()getYear()getMonth()getDate()/日期getDay()/星期getHours()getMinutes()getSeconds()Chen-Yu Lee 2003Date物件用法 2nTo

26、day.getMonth()得到今天的月份ntoday=new Date();nmymonth=();ndocument.write(“今天是”+mymonth);Chen-Yu Lee 2003期末作業 12/25n請每人各製作一個網頁.並將其置於internet上(例如OZ)nDemo 日期:12/25n基本要求(70%)置於internet上網頁5頁以上(不含框架檔)框架使用圖文連結表格使用n加分項目網站美術加分(0-10%)表單使用(mail給自己)(5%)CSS使用(5%)JS使用_別人寫的(5%)JS使用_自己寫的(5%)JSP/ASP/CGI使用(5%)Chen-Yu Lee 2

27、0035.3 電腦安全簡介Chen-Yu Lee 2003電腦安全的重要性n知識(資料)即是財產n個人 隱私/權益 問題n防止自己個人(團體)所有的財產遭受他人惡意 奪取/破壞Chen-Yu Lee 2003個人電腦安全須知n如何防病毒n如何防駭客Chen-Yu Lee 2003病毒n病毒的起源(自取滅亡的天性)n病毒如何傳染磁片光碟片等網路n如何解毒使用乾淨的開機方式安裝掃毒解毒程式Chen-Yu Lee 2003病毒n病毒造成的破壞系統毀損系統當機檔案資料遺失n防毒要領安裝防毒軟體盡量使用原版軟體不去執行來路不明的檔案(尤其是執行檔)Chen-Yu Lee 2003駭客Chen-Yu Le

28、e 20035.4 程式語言簡介Chen-Yu Lee 2003程式語言是n作為開發程式的工具語言n程式語言有高階語言Basic 等低階語言CJava 等Chen-Yu Lee 2003撰寫程式語言需具備n基本語言本身的熟適寫程式的基本概念n進階物件的觀念資料結構的觀念作業系統的觀念系統結構的觀念Chen-Yu Lee 2003C exampleFor(i=1;i10;i+)For(j=1;j10;j+)Printf(j,“X”,i,“=”,j*I);Chen-Yu Lee 2003物件導向簡介(Object-Oriented)Chen-Yu Lee 20035.5 進階網頁建構Chen-Yu Lee 2003