资源描述
Chen-Yu Lee 2003第五單元網頁建構與進階應用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-Yu Lee 2003壓縮技術n非失真壓縮 Run Lengthn失真壓縮 PCAChen-Yu Lee 2003圖片n圖片的原理 以存Pixel的方式存圖片n圖片的壓縮 統計壓縮 重要元素壓縮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(網頁專用圖形編輯)nPaintShopPro(專業圖形編輯)nPhotoShop(超專業圖形編輯)nACDSee(秀圖軟體)Chen-Yu Lee 2003動動手n自己用小畫家畫一張圖,然後存成BMP,GIF與JPG檔,比較一下差異.Chen-Yu Lee 2003分組討論時間.n了解了圖片簡單的壓縮方式後n你覺得聲音要怎樣壓縮?Chen-Yu Lee 2003聲音n聲音的原理 將聲音以數位的方式儲存n聲音的壓縮 去掉不重要的頻率(太高/太低)n聲音的格式 取樣 44.1/22/11 KHz 聲道 Mono/Stereo/A3D 2,4 channel Dolby Digital 2/./5.1 channel DTS 5.1/7.1 channel Wav,Mp3,Wma,MidChen-Yu Lee 2003聲音數位化n自然聲音須經過一個取樣(sampling)的過程轉成數位(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)增加強弱度的差異 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 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 ExampleChen-Yu Lee 2003訊噪比nSNR，S/N，Signal-to-Noise Ration訊噪比的是原始訊號與噪音之間的比例n值越大越好。Chen-Yu Lee 2003聲音工具簡介nVoxengo CurveEQ nWave Creatorn錄音機(錄音程式)nCreative Recorder(錄音程式)nWinAmp(撥放/轉換程式)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.8.7GB/Hr.n一定要壓縮!Chen-Yu Lee 2003影片原理n只在一個間隔內放置關鍵頁(key frame)(紅色)n其他的頁(藍色)由內插法運算獲得key framekey framekey frameChen-Yu Lee 2003內插法簡介15 1816 1917 1214 1316 1515 161515.5 16.515.5 17.516.5 13.514.5 14.5324Chen-Yu Lee 2003重要的數據nBit rate(影響影片單張畫質的好壞)(每秒資料的流量)一般約為數百(差)至數千(好)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 的訊號和解碼的方式,可以涵蓋處理這些高頻寬的訊號,因此 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 Lee 20033 DimensionnTrianglenTextureChen-Yu Lee 20033 DimensionChen-Yu Lee 20035.2 網頁建構簡介Chen-Yu Lee 2003網頁瀏覽流程Internet/dr888311/index.htm要求網頁要求網頁回覆網頁回覆網頁WebServerChen-Yu Lee 2003建構個人網站n1.撰寫網頁 設計網站 使用FrontPage/Dreamweaver編輯 圖片,聲音,影像編輯 HTML 使用CSS(Cascading Style Sheets)使用別人的CGI(JS,BVS)n2.申請網頁空間n3.上載網頁n4.維護網頁Chen-Yu Lee 2003撰寫網頁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簡易動態圖片(按鈕)DHTML工具列n框架的使用 內框架 多框架n表單Chen-Yu Lee 2003申請網頁空間n因為網頁須置於一Web伺服器空間,才能全天候被瀏覽.n學校的工作站 http:/net.nthu.edu.tw/網際網路服務篇n其他免費的網頁空間 PChome 個人/網站Chen-Yu Lee 2003上載網頁流程n先於自己的PC將網頁製作好n用FTP軟體(XP可用瀏覽器)/網頁上載 將所有的網頁都上載至指定位置 ftp:/u123456(學號)thccy11.oz.nthu.edu.tw/WWW/目錄下(OZ)n設定使用權限 chmod 711(OZ)n將第一頁(HomePage)設為該網頁空間規定的檔名.index.htmln於瀏覽器輸入網址 http:/oz.nthu.edu.tw/u123456/(自己的學號)Chen-Yu Lee 2003撰寫網頁nHTML 簡介 主體.雙標籤 單標籤 標籤適用區域不同(Head or Body)Chen-Yu Lee 2003撰寫網頁nExample 資訊系統應用 資訊系統應用 Chen-Yu Lee 2003HTML 簡介(Text)n Paragraph ALIGN=left|right|center n Breakn Headingn SIZE=string,COLOR=#RRGGBB,FACE=font names n(Preformatted 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 強調 Chen-Yu Lee 2003HTML 簡介(Images)nChen-Yu Lee 2003HTML 簡介(Links)n絕對路徑 file:/C:/Myfiles/main.html http:/www.cs.nthu.edu.tw/homepage.htmln相對路徑 homepage.html 同一層目錄./homepage.html 同一層目錄 web2/homepage.html 下一層目錄./homepage.html 上一層目錄./abc/homepage.html上一層目錄的abc目錄下nChen-Yu Lee 2003HTML 簡介(Links)nn 標籤nref=“http:/www.nthu.edu.tw#標籤名稱”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 簡介(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=5 color =#001100Chen-Yu Lee 2003撰寫網頁nCSS(Cascading 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 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 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,VBS)From website Ex:http:/dob.tnc.edu.tw/index.phpChen-Yu Lee 2003Java Script 簡介nJavaScript 的程式碼是內嵌於 HTML 原始碼中，由瀏覽器的解譯器執行程式碼.n除了 Cookies外，Script 無法存取用戶端的檔案.Chen-Yu Lee 2003Examplennnnnnnmystring=Hello World!;ndocument.write(mystring);nnnChen-Yu Lee 2003基本觀念n識別字n保留字n變數n資料型別n運算子n敘述與運算式Chen-Yu Lee 2003識別字n對所有常數,變數,函式的命名 英文字母+數字+“_”+“$”非保留字 非運算子 MyCounter Student_IDChen-Yu Lee 2003保留字n程式語言中保留的關鍵字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註解/StringChen-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;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:document.write(星期一);nbreak;ncase 2:document.write(“星期二);nbreak;ndefault:ndocument.write(“其他天);nbreak;nChen-Yu Lee 2003迴圈n重複以相同的(或可預知的)條件作一件事nFornWhilenDo whileChen-Yu Lee 2003For nfor(計數變數初值;測試式;更新計數變數)nn statements;nChen-Yu Lee 2003FornFor(i=0;i10;i+)nn document.write(i);nChen-Yu Lee 2003While nwhile(條件式)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練習n以JS寫一個有99乘法表的網頁.Chen-Yu Lee 2003陣列n將相同性質的資料以一個集合來存放n宣告 變數名稱=new Array();n初始值 變數名稱i=值;n使用 P=變數名稱i;Document.writeln(變數名稱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物件內包含 相關的屬性 可用的方法(method)n宣告方式 變數名稱=new物件名稱();Chen-Yu Lee 2003Date物件用法 1ntoday=new Date()getYear()getMonth()getDate()/日期 getDay()/星期 getHours()getMinutes()getSeconds()Chen-Yu Lee 2003Date物件用法 2nToday.getMonth()得到今天的月份ntoday=new Date();nmymonth=today.getMonth();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 20035.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 Lee 20035.4 程式語言簡介Chen-Yu Lee 2003程式語言是n作為開發程式的工具語言n程式語言有 高階語言 Basic 等 低階語言 C Java 等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 進階網頁建構
展开阅读全文