第五單元網頁建構與進階應用Outlinen5.1 多媒體簡介n5.2 網頁建構簡介n5.3 電腦平安簡介n5.4 程式語言簡介n5.5 進階網頁建構5.1 多媒體簡介What is Multi-media(多媒體)n機器(電腦)以不同(多樣)的媒介(體)將資料(訊)展現給人類n提供多樣化的表現方式於 教育/娛樂/任务 上多媒體包括有n文字n圖片n聲音n影片n3Dn其他資料壓縮n由於多媒體資料過於龐大 n必須先壓縮方便傳輸與儲存壓縮技術n非失真壓縮nRun Lengthn失真壓縮nPCA圖片n圖片的原理n以存Pixel的方式存圖片n圖片的壓縮n統計壓縮n重要元素壓縮n圖片的格式nPixel/Color/File FormatnBMP,PCX,GIF,JPG.範例n自然影像壓縮nBMP to GIFnBMP to JPGn人工影像壓縮nBMP to GIFnBMP to JPG圖片工具簡介n小畫家 (簡易圖形編輯)nPhotoImpact(網頁專用圖形編輯)nPaintShopPro (專業圖形編輯)nPhotoShop (超專業圖形編輯)nACDSee (秀圖軟體)動動手n本人用小畫家畫一張圖,然後存成BMP,GIF與JPG檔,比較一下差異.分組討論時間.n了解了圖片簡單的壓縮方式後n他覺得聲音要怎樣壓縮?聲音n聲音的原理n將聲音以數位的方式儲存n聲音的壓縮n去掉不重要的頻率(太高/太低)n聲音的格式n取樣n44.1/22/11 KHzn聲道nMono/Stereo/A3D 2,4 channel nDolby Digital 2/./5.1 channelnDTS 5.1/7.1 channelnWav,Mp3,Wma,Mid聲音數位化n自然聲音須經過一個取樣(sampling)的過程轉成數位(digital)訊號.n兩個影響取樣的要素.n取樣頻率(sample rate)n須表現出原始波型的型態,所以須以2倍以上的取樣頻率才干真實的表現出原音.n取樣解析度(sample resolution)n每個取樣點的階度直.越大越能夠真實的反應聲音的差異性.聲音數位化n取樣頻率(sample rate)n兩倍以上.n音樂訊號 10-20000 Hzn寬頻語音 50-7000 Hzn普通人聲 300-3400 Hz頻率波長(音量)頻率頻率頻率聲音數位化n取樣解析度(sample resolution)n添加強弱度的差異n8bits = 256 個強度n16bits = 65536 個強度波長(音量)波長(音量)常見取樣n CD品質n44100 Hz / 16 bitsn立體聲n44100*16*2/8=172KB/secn收音機品質n22050 Hz / 8 bitsn單音 n22KB/secn電話/錄音帶品質n11025 Hz / 8 bitsn單音 n11KB/sec聲音壓縮n由於人的聽覺約在20-20000Hz之間,所以可以將高頻及低頻捨去以壓縮空間.nMpeg1 audio layer1n標準壓縮效率為1：4nMpeg1 audio layer2n壓縮效率為1：61：8nMpeg1 audio layer3 (mp3)n壓縮效率則高達1：101：12MP3nMpeg1 audio layer3 (mp3)nBit rate(每秒資料的流量)n192Kn每秒要192Kbits的資料來存音樂n五分鐘的歌= 300 secn128K - 300*128Kb=38400kb=4.8MBn192K - 300*192K=57600kb=7.2MBnExample訊噪比nSNR，S/N，Signal-to-Noise Ration訊噪比的是原始訊號與噪音之間的比例n值越大越好。聲音工具簡介nVoxengo CurveEQ nWave Creatorn錄音機(錄音程式)nCreative Recorder (錄音程式)nWinAmp(撥放/轉換程式)nCdplayer(撥放程式)nWave 2 mp3n很多應用程式以內含影片n影片的原理n每秒撥放24張以上圖片(非自然圖加倍)n影片的壓縮nBit raten只存重要幾張其他以即時運算獲得n影片的格式nMpeg, Dat, Mov, Rm, Wmv影片原理n假设不另外壓縮則n需24*100kB(mpeg圖像)+17k(mpeg3聲音)/Sec.n145mB/Min.n8.7GB/Hr.n一定要壓縮!影片原理n只在一個間隔內放置關鍵頁(key frame)(紅色)n其他的頁(藍色)由內插法運算獲得key framekey framekey frame內插法簡介15 1816 1917 1214 1316 1515 161515.5 16.515.5 17.516.5 13.514.5 14.5324重要的數據nBit rate (影響影片單張畫質的好壞)n(每秒資料的流量)n普通約為數百(差)至數千(好)K bpsnKey frame ratenKey frame every secondn影響壓縮的程度n影響运用的方便度nframe rate(影響流暢度)n15- 不流暢n24 正常n30+ 電腦動畫視訊壓縮nMPEG I n352 X 240nMPEG II n720 X 480nMPEG III nHigh-Definition TV (HDTV), 但是 MPEG-2 的訊號和解碼的方式, 可以涵蓋處理這些高頻寬的訊號, 因此 MPEG-3 便併入MPEG-2 規格之中. nMPEG IVn能產生比 MPEG-1 更理想的畫質, 檔案的大小又比 MPEG-2 小得很多.影片工具簡介nUlead media studio.nXmpegnWindows media player/Real PlayernWinDVD/PowerDVDnAnimation Shopn3 DimensionnTrianglenTexture3 DimensionnTrianglenTexture3 Dimension5.2 網頁建構簡介網頁瀏覽流程Internet/dr888311/index.htm要求網頁要求網頁回覆網頁回覆網頁WebServer建構個人網站n1.撰寫網頁n設計網站n运用FrontPage/Dreamweaver編輯n圖片,聲音,影像編輯nHTMLn运用CSS(Cascading Style Sheets)n运用別人的CGI (JS,BVS)n2.申請網頁空間n3.上載網頁n4.維護網頁撰寫網頁n設計網站n目的n大綱(SiteMap)安排n版面安排n能否运用framen檔案結構安排網頁可运用的多媒體檔n圖片nJPG/GIF等有經過壓縮的圖片檔n聲音/音樂nMidi 音色檔nMP3/WMA/RM等有經過壓縮的音效/音樂n影片nGif 動畫檔nWMV/ASF/RM等有經過高壓縮的影片运用FrontPagen运用介面介紹n文字的运用與設定n網頁內容n背景n圖片安顿n連結的运用n圖層运用FrontPagen插入導覽(其他物件)n跑馬燈n相片藝廊n(其他很多功能需求Web Server有援助才干用)n簡易動態圖片(按鈕) DHTML工具列n框架的运用n內框架n多框架n表單申請網頁空間n因為網頁須置於一Web伺服器空間,才干全天候被瀏覽.n學校的任务站nnet.nthu.edu.tw/ 網際網路服務篇n其他免費的網頁空間nPChome 個人/網站上載網頁流程n先於本人的PC將網頁製作好n用FTP軟體(XP可用瀏覽器)/網頁上載 將一切的網頁都上載至指定位置nftp u123456(學號)thccy11.oz.nthu.edu.tw/nWWW/目錄下 (OZ)n設定运用權限nchmod 711 (OZ)n將第一頁(HomePage)設為該網頁空間規定的檔名.nindex.htmln於瀏覽器輸入網址noz.nthu.edu.tw/u123456/ (本人的學號)撰寫網頁nHTML 簡介n主體n.n雙標籤n n n單標籤nnn標籤適用區域不同(Head or Body)撰寫網頁nExamplenn n 資訊系統應用 n n n n n n 資訊系統應用n n n n n n n HTML 簡介(Text)n ParagraphnALIGN = left|right|center n Breakn HeadingnnSIZE=string, COLOR=#RRGGBB, FACE=font names n (Preformatted Text)nnnALIGN=left|right|center, NOSHADE, SIZE=n, WIDTH=n|p% HTML 簡介(Text)n 加粗 n 斜體 n 加底線 n 畫線刪除 n 文字放大 n 文字縮小 n 上標 n 下標 n 強調 HTML 簡介(Images)nHTML 簡介(Links)n絕對路徑 nfile/C:/Myfiles/main.html ncs.nthu.edu.tw/homepage.htmln相對路徑nhomepage.html 同一層目錄n./homepage.html 同一層目錄nweb2/homepage.html 下一層目錄n./homepage.html 上一層目錄n./abc/homepage.html上一層目錄的abc目錄下nHTML 簡介(Links)nn 標籤nref=“nthu.edu.tw#標籤名稱HTML 簡介(Table)nnn n nnntr: table rowntd: table dataHTML 簡介(Table)nALIGN=left|center|right：位置 nWIDTH=n|p%：表格的寬度。 nBORDER=n：邊界的寬度。 nCELLSPACING=n：儲存格間距。 nCELLPADDING=n：資料到儲存格間離。 nBGCOLOR=#RRGGBB：表格底色。 nColspan 合併儲存格nRowspan 合併儲存格n 加標題HTML 簡介(form)nn名字：n密碼：nnn網頁製作n簡易按鈕(圖形)製作n動畫製作nFTP軟體介紹.nCSS簡介撰寫網頁nCSS(Cascading Style Sheets)nShort-term definitionnPlace the style property in specific tagnEX:nn contentsnnMeans: all text marked by “this p tag will set to be nfont size = 5ncolor = #001100撰寫網頁nCSS(Cascading Style Sheets)nLong-term definitionnDefine the CSS between nEX:nn A:link color=#7777ff;text-decoration:none n A:visited color=#7777ff;text-decoration:none n A:hover color=#3333ff;text-decoration:underline nnMeans: all “A tag in this html file will set to benA (Normal) color = #7777ff and none decorationnA.visited (Clicked before) color = #7777ff and none decorationnA.hover (Mouse cursor over the link) color = #3333ff and underline撰寫網頁nCSS(Cascading Style Sheets)nReference definitionnCall the CSS reference file between nnAll tags will follow the referential CSS definition撰寫網頁n运用別人的CGI (JS,VBS)nFrom websitenEx:ndob.tnc.edu.tw/index.phpJava Script 簡介nJavaScript 的程式碼是內嵌於 HTML 原始碼中，由瀏覽器的解譯器執行程式碼.n除了 Cookies外，Script 無法存取用戶端的檔案.Examplennnnnnnmystring = Hello World!;ndocument.write(mystring);nnn根本觀念n識別字n保管字n變數n資料型別n運算子n敘述與運算式識別字n對一切常數,變數,函式的命名n英文字母+數字+“_+“$n非保管字n非運算子nMyCounternStudent_ID保管字n程式語言中保管的關鍵字n尤其特殊意義n資料宣告n迴圈n結構宣告nnBoolean, int, if, else, true變數n宣告一可變資料格式n資料類別 變數名稱 初始值nInt a = 0;資料型別nBytenIntnFloatnStringnchar運算子n用於運算的符號n算數運算n= + - * / % + - n關係運算 n = = = !=n邏輯運算n!(not) &(and) |(or) (xor)n複合運算n+= -= *= /=n位元運算n(補數) (右移) & | 敘述與運算式n普通敘述nsum = 10;n運算nsum = (a+b)/c;n註解n/ String條件決策n根據條件的情況而有不同的處理nIf elsenSwitch caseIf elsenIf (condition) n statement 1 nelse n statement 2 If elsen nfunction UsageOfIF()n na = prompt(“請輸入分數：, 60); nif (a60) alert(“過了！); nelse alert(“當了); n Switch casenswitch (variable) n nCase (value1) ; statement; break;nCase (value2) ; statement; break;nCase (value3) ; statement; break;nDefault ; statement; break;nSwitch 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;n迴圈n重複以一样的(或可預知的)條件作一件事nFornWhilenDo whileFor nfor (計數變數初值; 測試式; 更新計數變數)nn statements;nFornFor(i=0;i10;i+)nn document.write (i);nWhile nwhile (條件式) n n Statements;n ni=0;nwhile(i10)nn document.write (i);n i+;nDo-Whilendo nn Statements;nnwhile (條件式); Do-Whileni=0;ndo n document.write (i);n i+;nnwhile(i10)練習n以JS寫一個有99乘法表的網頁.陣列n將一样性質的資料以一個集合來存放n宣告n變數名稱 = new Array();n初始值n變數名稱i = 值;n运用nP = 變數名稱i ;nDocument.writeln(變數名稱i);陣列nArray1 = new Array(); nArray10 = “John;nArray11 = “Mary;nArray12 = “Helen;ndocument.writeln(Array10 + ); ndocument.writeln(Array21 + );ndocument.writeln(Array32 + ); 物件n將一個完好的概念(功能)以一個事物包裝.n物件內包含n相關的屬性n可用的方法(method)n宣告方式n變數名稱 = new物件名稱();Date物件用法 1ntoday = new Date()ngetYear() ngetMonth() ngetDate() /日期ngetDay() /星期ngetHours() ngetMinutes() ngetSeconds() Date物件用法 2nToday.getMonth ()n得到今天的月份ntoday = new Date();nmymonth = today.getMonth();ndocument.write(“今天是+mymonth);期末作業 12/25n請每人各製作一個網頁.並將其置於internet上(例如OZ)nDemo 日期: 12/25n根本要求(70%)n置於internet上n網頁5頁以上(不含框架檔)n框架运用n圖文連結n表格运用n加分項目n網站美術加分(0-10 %)n表單运用(mail給本人) (5%)nCSS运用(5%)nJS运用_別人寫的(5%)nJS运用_本人寫的(5%)nJSP/ASP/CGI运用(5%)5.3 電腦平安簡介電腦平安的重要性n知識(資料)即是財產n個人 隱私/權益 問題n防止本人個人(團體)一切的財產蒙受他人惡意 奪取/破壞個人電腦平安須知n如何防病毒n如何防駭客病毒n病毒的来源n(自取滅亡的天性)n病毒如何傳染n磁片光碟片等n網路n如何解毒n运用乾淨的開機方式n安裝掃毒解毒程式病毒n病毒呵斥的破壞n系統毀損n系統當機n檔案資料遺失n防毒要領n安裝防毒軟體n盡量运用原版軟體n不去執行來路不明的檔案(尤其是執行檔)駭客5.4 程式語言簡介程式語言是n作為開發程式的工具語言n程式語言有n高階語言nBasic 等n低階語言nCnJava 等撰寫程式語言需具備n根本n語言本身的熟適n寫程式的根本概念n進階n物件的觀念n資料結構的觀念n作業系統的觀念n系統結構的觀念nC exampleFor(i=1;i10;i+)For(j=1;j10;j+)Printf( j , “X , i , “= , j*I ); 物件導向簡介(Object-Oriented) 5.5 進階網頁建構