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

2、須先壓縮方便傳輸與儲存Chen-Yu Lee 2003壓縮技術(shù)n非失真壓縮 Run Lengthn失真壓縮 PCAChen-Yu Lee 2003圖片n圖片的原理 以存Pixel的方式存圖片n圖片的壓縮 統(tǒng)計壓縮 重要元素壓縮n圖片的格式 Pixel/Color/File Format BMP,PCX,GIF,JPG.Chen-Yu Lee 2003範例n自然影像壓縮nBMP to GIFnBMP to JPGn人工影像壓縮nBMP to GIFnBMP to JPGChen-Yu Lee 2003圖片工具簡介n小畫家 (簡易圖形編輯)nPhotoImpact(網(wǎng)頁專用圖形編輯)nPaintS

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

4、 5.1/7.1 channel Wav,Mp3,Wma,MidChen-Yu Lee 2003聲音數(shù)位化n自然聲音須經(jīng)過一個取樣(sampling)的過程轉(zhuǎn)成數(shù)位(digital)訊號.n兩個影響取樣的因素. 取樣頻率(sample rate) 須表現(xiàn)出原始波型的型態(tài),所以須以2倍以上的取樣頻率才能真實的表現(xiàn)出原音. 取樣解析度(sample resolution) 每個取樣點的階度直.越大越能夠真實的反應(yīng)聲音的差異性.Chen-Yu Lee 2003聲音數(shù)位化n取樣頻率(sample rate) 兩倍以上. 音樂訊號 10-20000 Hz 寬頻語音 50-7000 Hz 一般人聲 300

5、-3400 Hz頻率波長(音量)頻率頻率頻率Chen-Yu Lee 2003聲音數(shù)位化n取樣解析度(sample resolution) 增加強弱度的差異 8bits = 256 個強度 16bits = 65536 個強度波長(音量)波長(音量)Chen-Yu Lee 2003常見取樣n CD品質(zhì) 44100 Hz / 16 bits 立體聲 44100*16*2/8=172KB/secn收音機品質(zhì) 22050 Hz / 8 bits 單音 22KB/secn電話/錄音帶品質(zhì) 11025 Hz / 8 bits 單音 11KB/secChen-Yu Lee 2003聲音壓縮n由於人的聽覺約在

6、20-20000Hz之間,所以可以將高頻及低頻捨去以壓縮空間.nMpeg1 audio layer1 標準壓縮效率為1：4nMpeg1 audio layer2 壓縮效率為1：61：8nMpeg1 audio layer3 (mp3) 壓縮效率則高達1：101：12Chen-Yu Lee 2003MP3nMpeg1 audio layer3 (mp3)nBit rate(每秒資料的流量)n192K 每秒要192Kbits的資料來存音樂 五分鐘的歌= 300 sec 128K - 300*128Kb=38400kb=4.8MB 192K - 300*192K=57600kb=7.2MB Exam

7、pleChen-Yu Lee 2003訊噪比nSNR，S/N，Signal-to-Noise Ration訊噪比的是原始訊號與噪音之間的比例n值越大越好。Chen-Yu Lee 2003聲音工具簡介nVoxengo CurveEQ nWave Creatorn錄音機(錄音程式)nCreative Recorder (錄音程式)nWinAmp(撥放/轉(zhuǎn)換程式)nCdplayer(撥放程式)nWave 2 mp3n很多應(yīng)用程式以內(nèi)含Chen-Yu Lee 2003影片n影片的原理 每秒撥放24張以上圖片(非自然圖加倍)n影片的壓縮 Bit rate 只存重要幾張其他以即時運算獲得n影片的格式 Mp

8、eg, Dat, Mov, Rm, WmvChen-Yu Lee 2003影片原理n若不另外壓縮則 需24*100kB(mpeg圖像)+17k(mpeg3聲音)/Sec. 145mB/Min. 8.7GB/Hr.n一定要壓縮!Chen-Yu Lee 2003影片原理n只在一個間隔內(nèi)放置關(guān)鍵頁(key frame)(紅色)n其他的頁(藍色)由內(nèi)插法運算獲得key framekey framekey frameChen-Yu Lee 2003內(nèi)插法簡介15 1816 1917 1214 1316 1515 161515.5 16.515.5 17.516.5 13.514.5 14.5324Che

9、n-Yu Lee 2003重要的數(shù)據(jù)nBit rate (影響影片單張畫質(zhì)的好壞) (每秒資料的流量) 一般約為數(shù)百(差)至數(shù)千(好)K bpsnKey frame rate Key frame every second 影響壓縮的程度 影響使用的方便度nframe rate(影響流暢度) 15- 不流暢 24 正常 30+ 電腦動畫Chen-Yu Lee 2003視訊壓縮nMPEG I 352 X 240nMPEG II 720 X 480nMPEG III High-Definition TV (HDTV), 但是 MPEG-2 的訊號和解碼的方式, 可以涵蓋處理這些高頻寬的訊號, 因此

10、MPEG-3 便併入MPEG-2 規(guī)格之中. nMPEG IV 能產(chǎn)生比 MPEG-1 更理想的畫質(zhì), 檔案的大小又比 MPEG-2 小得很多.Chen-Yu Lee 2003影片工具簡介nUlead media studio.nXmpegnWindows media player/Real PlayernWinDVD/PowerDVDnAnimation ShopnChen-Yu Lee 20033 DimensionnTrianglenTextureChen-Yu Lee 20033 DimensionnTrianglenTextureChen-Yu Lee 20033 Dimension

11、Chen-Yu Lee 20035.2 網(wǎng)頁建構(gòu)簡介Chen-Yu Lee 2003網(wǎng)頁瀏覽流程Internet/dr888311/index.htm要求網(wǎng)頁要求網(wǎng)頁回覆網(wǎng)頁回覆網(wǎng)頁WebServerChen-Yu Lee 2003建構(gòu)個人網(wǎng)站n1.撰寫網(wǎng)頁 設(shè)計網(wǎng)站 使用FrontPage/Dreamweaver編輯 圖片,聲音,影像編輯 HTML 使用CSS(Cascading Style Sheets) 使用別人的CGI (JS,BVS)n2.申請網(wǎng)頁空間n3.上載網(wǎng)頁n4.維護網(wǎng)頁Chen-Yu Lee 2003撰寫網(wǎng)頁n設(shè)計網(wǎng)站 目的 大綱(SiteMap)安排 版面安排 是否使用f

12、rame 檔案結(jié)構(gòu)安排Chen-Yu Lee 2003網(wǎng)頁可使用的多媒體檔n圖片 JPG/GIF等有經(jīng)過壓縮的圖片檔n聲音/音樂 Midi 音色檔 MP3/WMA/RM等有經(jīng)過壓縮的音效/音樂n影片 Gif 動畫檔 WMV/ASF/RM等有經(jīng)過高壓縮的影片Chen-Yu Lee 2003使用FrontPagen使用介面介紹n文字的使用與設(shè)定n網(wǎng)頁內(nèi)容 背景n圖片安置n連結(jié)的使用n圖層Chen-Yu Lee 2003使用FrontPagen插入導(dǎo)覽(其他物件) 跑馬燈 相片藝廊 (其他很多功能需要Web Server有支援才能用)n簡易動態(tài)圖片(按鈕) DHTML工具列n框架的使用 內(nèi)框架 多框

13、架n表單Chen-Yu Lee 2003申請網(wǎng)頁空間n因為網(wǎng)頁須置於一Web伺服器空間,才能全天候被瀏覽.n學(xué)校的工作站 .tw/ 網(wǎng)際網(wǎng)路服務(wù)篇n其他免費的網(wǎng)頁空間 PChome 個人/網(wǎng)站Chen-Yu Lee 2003上載網(wǎng)頁流程n先於自己的PC將網(wǎng)頁製作好n用FTP軟體(XP可用瀏覽器)/網(wǎng)頁上載 將所有的網(wǎng)頁都上載至指定位置 ftp:/ u123456(學(xué)號).tw/ WWW/目錄下 (OZ)n設(shè)定使用權(quán)限 chmod 711 (OZ)n將第一頁(HomePage)設(shè)為該網(wǎng)頁空間規(guī)定的檔名. index.htm

14、ln於瀏覽器輸入網(wǎng)址 .tw/u123456/ (自己的學(xué)號)Chen-Yu Lee 2003撰寫網(wǎng)頁nHTML 簡介 主體 . 雙標籤 單標籤 標籤適用區(qū)域不同(Head or Body)Chen-Yu Lee 2003撰寫網(wǎng)頁nExample 資訊系統(tǒng)應(yīng)用 資訊系統(tǒng)應(yīng)用 Chen-Yu Lee 2003HTML 簡介(Text)n Paragraph ALIGN = left|right|center n Breakn Headingn SIZE=string, COLOR=#RRGGBB, FACE=font names n (Preformatted

15、Text)nn ALIGN=left|right|center, NOSHADE, SIZE=n, WIDTH=n|p% Chen-Yu Lee 2003HTML 簡介(Text)n 加粗 n 斜體 n 加底線 n 畫線刪除 n 文字放大 n 文字縮小 n 上標 n 下標 n 強調(diào) Chen-Yu Lee 2003HTML 簡介(Images)nChen-Yu Lee 2003HTML 簡介(Links)n絕對路徑 file:/C:/Myfiles/main.html .tw/homepage.htmln相對路徑 homepage.html 同一層目錄

16、 ./homepage.html 同一層目錄 web2/homepage.html 下一層目錄 ./homepage.html 上一層目錄 ./abc/homepage.html上一層目錄的abc目錄下nChen-Yu Lee 2003HTML 簡介(Links)nn 標籤nref=“.tw#標籤名稱”Chen-Yu Lee 2003HTML 簡介(Table)n nntr: table rowntd: table dataChen-Yu Lee 2003HTML 簡介(Table)nALIGN=left|center|right：位置 nWIDTH=n|p

17、%：表格的寬度。 nBORDER=n：邊界的寬度。 nCELLSPACING=n：儲存格間距。 nCELLPADDING=n：資料到儲存格間離。 nBGCOLOR=#RRGGBB：表格底色。 nColspan 合併儲存格nRowspan 合併儲存格n 加標題Chen-Yu Lee 2003HTML 簡介(form)nn名字：n密碼：nnnChen-Yu Lee 2003網(wǎng)頁製作n簡易按鈕(圖形)製作n動畫製作nFTP軟體介紹.nCSS簡介Chen-Yu Lee 2003撰寫網(wǎng)頁nCSS(Cascading Style Sheets) Short-term definitionPlace the

18、 style property in specific tagEX: contentsMeans: all text marked by “this” p tag will set to be font size = 5 color = #001100Chen-Yu Lee 2003撰寫網(wǎng)頁nCSS(Cascading Style Sheets) Long-term definitionDefine the CSS between EX: A:link color=#7777ff;text-decoration:none A:visited color=#7777ff;text-decorat

19、ion:none A:hover color=#3333ff;text-decoration:underline Means: all “A” tag in this html file will set to be A.link (Normal) color = #7777ff and none decoration A.visited (Clicked before) color = #7777ff and none decoration A.hover (Mouse cursor over the link) color = #3333ff and underlineChen-Yu Le

20、e 2003撰寫網(wǎng)頁nCSS(Cascading Style Sheets) Reference definitionCall the CSS reference file between All tags will follow the referential CSS definitionChen-Yu Lee 2003撰寫網(wǎng)頁n使用別人的CGI (JS,VBS) From website Ex: .tw/index.phpChen-Yu Lee 2003Java Script 簡介nJavaScript 的程式碼是內(nèi)嵌於 HTML 原始碼中，由瀏覽器的解譯

21、器執(zhí)行程式碼.n除了 Cookies外，Script 無法存取用戶端的檔案.Chen-Yu Lee 2003Examplennnnnnnmystring = Hello World!;ndocument.write(mystring);nnnChen-Yu Lee 2003基本觀念n識別字n保留字n變數(shù)n資料型別n運算子n敘述與運算式Chen-Yu Lee 2003識別字n對所有常數(shù),變數(shù),函式的命名 英文字母+數(shù)字+“_”+“$” 非保留字 非運算子 MyCounter Student_IDChen-Yu Lee 2003保留字n程式語言中保留的關(guān)鍵字n尤其特殊意義 資料宣告 迴圈 結(jié)構(gòu)宣告

22、 Boolean, int, if, else, trueChen-Yu Lee 2003變數(shù)n宣告一可變資料格式n資料類別 變數(shù)名稱 初始值nInt a = 0;Chen-Yu Lee 2003資料型別nBytenIntnFloatnStringncharChen-Yu Lee 2003運算子n用於運算的符號 算數(shù)運算 = + - * / % + - 關(guān)係運算 = = = != 邏輯運算 !(not) &(and) |(or) (xor) 複合運算 += -= *= /= 位元運算 (補數(shù)) (右移) & | Chen-Yu Lee 2003敘述與運算式n一般敘述 sum =

23、 10;n運算 sum = (a+b)/c;n註解 / StringChen-Yu Lee 2003條件決策n根據(jù)條件的情況而有不同的處理nIf elsenSwitch caseChen-Yu Lee 2003If elsenIf (condition) statement 1 nelse statement 2 Chen-Yu Lee 2003If elsen nfunction UsageOfIF()n a = prompt(“請輸入分數(shù)：”, 60); if (a60) alert(“過了！”); else alert(“當了”); Chen-Yu Lee 2003Switch case

24、nswitch (variable) Case (value1) ; statement; break; Case (value2) ; statement; break; Case (value3) ; statement; break; Default ; statement; break; Chen-Yu Lee 2003Switch casentoday = new Date();/ 取得今天的物件nday = today.getDay(); / 取得今天是星期幾nswitch (day) ncase 0:document.write(星期天);nbreak;ncase 1:docum

25、ent.write(星期一);nbreak;ncase 2:document.write(“星期二);nbreak;ndefault:ndocument.write(“其他天);nbreak;nChen-Yu Lee 2003迴圈n重複以相同的(或可預(yù)知的)條件作一件事nFornWhilenDo whileChen-Yu Lee 2003For nfor (計數(shù)變數(shù)初值; 測試式; 更新計數(shù)變數(shù))nn statements;nChen-Yu Lee 2003FornFor(i=0;i10;i+)nn document.write (i);nChen-Yu Lee 2003While nwhil

26、e (條件式) n n Statements;n Chen-Yu Lee 2003ni=0;nwhile(i10)nn document.write (i);n i+;nChen-Yu Lee 2003Do-Whilendo nn Statements;nnwhile (條件式); Chen-Yu Lee 2003Do-Whileni=0;ndo n document.write (i);n i+;nnwhile(i10)Chen-Yu Lee 2003練習(xí)n以JS寫一個有99乘法表的網(wǎng)頁.Chen-Yu Lee 2003陣列n將相同性質(zhì)的資料以一個集合來存放n宣告 變數(shù)名稱 = new Ar

27、ray();n初始值 變數(shù)名稱i = 值;n使用 P = 變數(shù)名稱i ; Document.writeln(變數(shù)名稱i);Chen-Yu Lee 2003陣列nArray1 = new Array(); nArray10 = “John”;nArray11 = “Mary”;nArray12 = “Helen”;ndocument.writeln(Array10 + ); ndocument.writeln(Array21 + );ndocument.writeln(Array32 + ); Chen-Yu Lee 2003物件n將一個完整的概念(功能)以一個事物包裝.n物件內(nèi)包含 相關(guān)的屬性 可用的方法(method)n宣告方式 變數(shù)名稱 = new物件名稱();Chen-Yu Lee 2003Date物件用法 1ntoday = new Date() getYear() getMonth() getDate() /日期 getDay() /星期 getHours() getMinutes() getSeconds() Chen-Yu Lee 2003Date物件用法 2nToday.getMonth () 得到今天的月份ntoday = new D