网页建构与进阶应.ppt
Chen-Yu Lee 2003,第五單元網頁建構與進階應用,Chen-Yu Lee 2003,Outline,5.1 多媒體簡介5.2 網頁建構簡介5.3 電腦安全簡介5.4 程式語言簡介5.5 進階網頁建構,Chen-Yu Lee 2003,5.1 多媒體簡介,Chen-Yu Lee 2003,What is Multi-media(多媒體),機器(電腦)以不同(多樣)的媒介(體)將資料(訊)展現給人類提供多樣化的表現方式於 教育/娛樂/工作 上,Chen-Yu Lee 2003,多媒體包括有,文字圖片聲音影片3D其他,Chen-Yu Lee 2003,資料壓縮,由於多媒體資料過於龐大 必須先壓縮方便傳輸與儲存,Chen-Yu Lee 2003,壓縮技術,非失真壓縮Run Length失真壓縮PCA,Chen-Yu Lee 2003,圖片,圖片的原理以存Pixel的方式存圖片圖片的壓縮統計壓縮重要元素壓縮圖片的格式Pixel/Color/File FormatBMP,PCX,GIF,JPG.,Chen-Yu Lee 2003,範例,自然影像壓縮BMP to GIFBMP to JPG人工影像壓縮BMP to GIFBMP to JPG,Chen-Yu Lee 2003,圖片工具簡介,小畫家(簡易圖形編輯)PhotoImpact(網頁專用圖形編輯)PaintShopPro(專業圖形編輯)PhotoShop(超專業圖形編輯)ACDSee(秀圖軟體),Chen-Yu Lee 2003,動動手,自己用小畫家畫一張圖,然後存成BMP,GIF與JPG檔,比較一下差異.,Chen-Yu Lee 2003,分組討論時間.,了解了圖片簡單的壓縮方式後你覺得聲音要怎樣壓縮?,Chen-Yu Lee 2003,聲音,聲音的原理將聲音以數位的方式儲存聲音的壓縮去掉不重要的頻率(太高/太低)聲音的格式取樣44.1/22/11 KHz聲道Mono/Stereo/A3D 2,4 channel Dolby Digital 2/./5.1 channelDTS 5.1/7.1 channelWav,Mp3,Wma,Mid,Chen-Yu Lee 2003,聲音數位化,自然聲音須經過一個取樣(sampling)的過程轉成數位(digital)訊號.兩個影響取樣的因素.取樣頻率(sample rate)須表現出原始波型的型態,所以須以2倍以上的取樣頻率才能真實的表現出原音.取樣解析度(sample resolution)每個取樣點的階度直.越大越能夠真實的反應聲音的差異性.,Chen-Yu Lee 2003,聲音數位化,取樣頻率(sample rate)兩倍以上.音樂訊號 10-20000 Hz寬頻語音 50-7000 Hz一般人聲 300-3400 Hz,頻率,波長(音量),頻率,頻率,頻率,Chen-Yu Lee 2003,聲音數位化,取樣解析度(sample resolution)增加強弱度的差異8bits=256 個強度16bits=65536 個強度,波長(音量),波長(音量),Chen-Yu Lee 2003,常見取樣,CD品質44100 Hz/16 bits立體聲44100*16*2/8=172KB/sec收音機品質22050 Hz/8 bits單音 22KB/sec電話/錄音帶品質11025 Hz/8 bits單音 11KB/sec,Chen-Yu Lee 2003,聲音壓縮,由於人的聽覺約在20-20000Hz之間,所以可以將高頻及低頻捨去以壓縮空間.Mpeg1 audio layer1標準壓縮效率為1：4Mpeg1 audio layer2壓縮效率為1：61：8Mpeg1 audio layer3(mp3)壓縮效率則高達1：101：12,Chen-Yu Lee 2003,MP3,Mpeg1 audio layer3(mp3)Bit rate(每秒資料的流量)192K每秒要192Kbits的資料來存音樂五分鐘的歌=300 sec128K-300*128Kb=38400kb=4.8MB192K-300*192K=57600kb=7.2MBExample,Chen-Yu Lee 2003,訊噪比,SNR，S/N，Signal-to-Noise Ratio訊噪比的是原始訊號與噪音之間的比例值越大越好。,Chen-Yu Lee 2003,聲音工具簡介,Voxengo CurveEQ Wave Creator錄音機(錄音程式)Creative Recorder(錄音程式)WinAmp(撥放/轉換程式)Cdplayer(撥放程式)Wave 2 mp3很多應用程式以內含,Chen-Yu Lee 2003,影片,影片的原理每秒撥放24張以上圖片(非自然圖加倍)影片的壓縮Bit rate只存重要幾張其他以即時運算獲得影片的格式Mpeg,Dat,Mov,Rm,Wmv,Chen-Yu Lee 2003,影片原理,若不另外壓縮則需24*100kB(mpeg圖像)+17k(mpeg3聲音)/Sec.145mB/Min.8.7GB/Hr.一定要壓縮!,Chen-Yu Lee 2003,影片原理,只在一個間隔內放置關鍵頁(key frame)(紅色)其他的頁(藍色)由內插法運算獲得,key frame,key frame,key frame,Chen-Yu Lee 2003,內插法簡介,15 1816 19,17 1214 13,16 1515 16,1,5,15.5 16.515.5 17.5,16.5 13.514.5 14.5,3,2,4,Chen-Yu Lee 2003,重要的數據,Bit rate(影響影片單張畫質的好壞)(每秒資料的流量)一般約為數百(差)至數千(好)K bpsKey frame rateKey frame every second影響壓縮的程度影響使用的方便度frame rate(影響流暢度)15-不流暢24 正常30+電腦動畫,Chen-Yu Lee 2003,視訊壓縮,MPEG I 352 X 240MPEG II 720 X 480MPEG III High-Definition TV(HDTV),但是 MPEG-2 的訊號和解碼的方式,可以涵蓋處理這些高頻寬的訊號,因此 MPEG-3 便併入MPEG-2 規格之中.MPEG IV能產生比 MPEG-1 更理想的畫質,檔案的大小又比 MPEG-2 小得很多.,Chen-Yu Lee 2003,影片工具簡介,Ulead media studio.XmpegWindows media player/Real PlayerWinDVD/PowerDVDAnimation Shop,Chen-Yu Lee 2003,3 Dimension,TriangleTexture,Chen-Yu Lee 2003,3 Dimension,TriangleTexture,Chen-Yu Lee 2003,3 Dimension,Chen-Yu Lee 2003,5.2 網頁建構簡介,Chen-Yu Lee 2003,網頁瀏覽流程,Internet,/dr888311/index.htm,要求網頁,要求網頁,回覆網頁,回覆網頁,WebServer,Chen-Yu Lee 2003,建構個人網站,1.撰寫網頁設計網站使用FrontPage/Dreamweaver編輯圖片,聲音,影像編輯HTML使用CSS(Cascading Style Sheets)使用別人的CGI(JS,BVS)2.申請網頁空間3.上載網頁4.維護網頁,Chen-Yu Lee 2003,撰寫網頁,設計網站目的大綱(SiteMap)安排版面安排是否使用frame檔案結構安排,Chen-Yu Lee 2003,網頁可使用的多媒體檔,圖片JPG/GIF等有經過壓縮的圖片檔聲音/音樂Midi 音色檔MP3/WMA/RM等有經過壓縮的音效/音樂影片Gif 動畫檔WMV/ASF/RM等有經過高壓縮的影片,Chen-Yu Lee 2003,使用FrontPage,使用介面介紹文字的使用與設定網頁內容背景圖片安置連結的使用圖層,Chen-Yu Lee 2003,使用FrontPage,插入導覽(其他物件)跑馬燈相片藝廊(其他很多功能需要Web Server有支援才能用)簡易動態圖片(按鈕)DHTML工具列框架的使用內框架多框架表單,Chen-Yu Lee 2003,申請網頁空間,因為網頁須置於一Web伺服器空間,才能全天候被瀏覽.學校的工作站http:/網際網路服務篇其他免費的網頁空間PChome 個人/網站,Chen-Yu Lee 2003,上載網頁流程,先於自己的PC將網頁製作好用FTP軟體(XP可用瀏覽器)/網頁上載 將所有的網頁都上載至指定位置ftp:/u123456(學號WWW/目錄下(OZ)設定使用權限chmod 711(OZ)將第一頁(HomePage)設為該網頁空間規定的檔名.index.html於瀏覽器輸入網址http:/oz.nthu.edu.tw/u123456/(自己的學號),Chen-Yu Lee 2003,撰寫網頁,HTML 簡介主體.雙標籤 單標籤標籤適用區域不同(Head or Body),Chen-Yu Lee 2003,撰寫網頁,Example 資訊系統應用 資訊系統應用,Chen-Yu Lee 2003,HTML 簡介(Text),ParagraphALIGN=left|right|center Break HeadingSIZE=string,COLOR=#RRGGBB,FACE=font names(Preformatted Text)ALIGN=left|right|center,NOSHADE,SIZE=n,WIDTH=n|p%,Chen-Yu Lee 2003,HTML 簡介(Text),加粗 斜體 加底線 畫線刪除 文字放大 文字縮小 上標 下標 強調,Chen-Yu Lee 2003,HTML 簡介(Images),Chen-Yu Lee 2003,HTML 簡介(Links),絕對路徑 file:/C:/Myfiles/main.html http:/相對路徑homepage.html 同一層目錄./homepage.html 同一層目錄web2/homepage.html 下一層目錄./homepage.html 上一層目錄./abc/homepage.html上一層目錄的abc目錄下,Chen-Yu Lee 2003,HTML 簡介(Links),標籤ref=“http:/#標籤名稱”,Chen-Yu Lee 2003,HTML 簡介(Table),tr:table rowtd:table data,Chen-Yu Lee 2003,HTML 簡介(Table),ALIGN=left|center|right：位置 WIDTH=n|p%：表格的寬度。BORDER=n：邊界的寬度。CELLSPACING=n：儲存格間距。CELLPADDING=n：資料到儲存格間離。BGCOLOR=#RRGGBB：表格底色。Colspan 合併儲存格Rowspan 合併儲存格 加標題,Chen-Yu Lee 2003,HTML 簡介(form),名字：密碼：,Chen-Yu Lee 2003,網頁製作,簡易按鈕(圖形)製作動畫製作FTP軟體介紹.CSS簡介,Chen-Yu Lee 2003,撰寫網頁,CSS(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=#001100,Chen-Yu Lee 2003,撰寫網頁,CSS(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 beA.link(Normal)color=#7777ff and none decorationA.visited(Clicked before)color=#7777ff and none decorationA.hover(Mouse cursor over the link)color=#3333ff and underline,Chen-Yu Lee 2003,撰寫網頁,CSS(Cascading Style Sheets)Reference definitionCall the CSS reference file between All tags will follow the referential CSS definition,Chen-Yu Lee 2003,撰寫網頁,使用別人的CGI(JS,VBS)From websiteEx:http:/,Chen-Yu Lee 2003,Java Script 簡介,JavaScript 的程式碼是內嵌於 HTML 原始碼中，由瀏覽器的解譯器執行程式碼.除了 Cookies外，Script 無法存取用戶端的檔案.,Chen-Yu Lee 2003,Example,mystring=Hello World!;document.write(mystring);,Chen-Yu Lee 2003,基本觀念,識別字保留字變數資料型別運算子敘述與運算式,Chen-Yu Lee 2003,識別字,對所有常數,變數,函式的命名英文字母+數字+“_”+“$”非保留字非運算子MyCounterStudent_ID,Chen-Yu Lee 2003,保留字,程式語言中保留的關鍵字尤其特殊意義資料宣告迴圈結構宣告Boolean,int,if,else,true,Chen-Yu Lee 2003,變數,宣告一可變資料格式資料類別 變數名稱 初始值Int a=0;,Chen-Yu Lee 2003,資料型別,ByteIntFloatStringchar,Chen-Yu Lee 2003,運算子,用於運算的符號算數運算=+-*/%+-關係運算=(右移)&|,Chen-Yu Lee 2003,敘述與運算式,一般敘述sum=10;運算sum=(a+b)/c;註解/String,Chen-Yu Lee 2003,條件決策,根據條件的情況而有不同的處理If elseSwitch case,Chen-Yu Lee 2003,If else,If(condition)statement 1 else statement 2,Chen-Yu Lee 2003,If else,function UsageOfIF()a=prompt(“請輸入分數：”,60);if(a60)alert(“過了！”);else alert(“當了”);,Chen-Yu Lee 2003,Switch case,switch(variable)Case(value1);statement;break;Case(value2);statement;break;Case(value3);statement;break;Default;statement;break;,Chen-Yu Lee 2003,Switch case,today=new Date();/取得今天的物件day=today.getDay();/取得今天是星期幾switch(day)case 0:document.write(星期天);break;case 1:document.write(星期一);break;case 2:document.write(“星期二);break;default:document.write(“其他天);break;,Chen-Yu Lee 2003,迴圈,重複以相同的(或可預知的)條件作一件事ForWhileDo while,Chen-Yu Lee 2003,For,for(計數變數初值;測試式;更新計數變數)statements;,Chen-Yu Lee 2003,For,For(i=0;i10;i+)document.write(i);,Chen-Yu Lee 2003,While,while(條件式)Statements;,Chen-Yu Lee 2003,i=0;while(i10)document.write(i);i+;,Chen-Yu Lee 2003,Do-While,do Statements;while(條件式);,Chen-Yu Lee 2003,Do-While,i=0;do document.write(i);i+;while(i10),Chen-Yu Lee 2003,練習,以JS寫一個有99乘法表的網頁.,Chen-Yu Lee 2003,陣列,將相同性質的資料以一個集合來存放宣告變數名稱=new Array();初始值變數名稱i=值;使用P=變數名稱i;Document.writeln(變數名稱i);,Chen-Yu Lee 2003,陣列,Array1=new Array();Array10=“John”;Array11=“Mary”;Array12=“Helen”;document.writeln(Array10+);document.writeln(Array21+);document.writeln(Array32+);,Chen-Yu Lee 2003,物件,將一個完整的概念(功能)以一個事物包裝.物件內包含相關的屬性可用的方法(method)宣告方式變數名稱=new物件名稱();,Chen-Yu Lee 2003,Date物件用法 1,today=new Date()getYear()getMonth()getDate()/日期getDay()/星期getHours()getMinutes()getSeconds(),Chen-Yu Lee 2003,Date物件用法 2,Today.getMonth()得到今天的月份today=new Date();mymonth=today.getMonth();document.write(“今天是”+mymonth);,Chen-Yu Lee 2003,期末作業 12/25,請每人各製作一個網頁.並將其置於internet上(例如OZ)Demo 日期:12/25基本要求(70%)置於internet上網頁5頁以上(不含框架檔)框架使用圖文連結表格使用加分項目網站美術加分(0-10%)表單使用(mail給自己)(5%)CSS使用(5%)JS使用_別人寫的(5%)JS使用_自己寫的(5%)JSP/ASP/CGI使用(5%),Chen-Yu Lee 2003,5.3 電腦安全簡介,Chen-Yu Lee 2003,電腦安全的重要性,知識(資料)即是財產個人 隱私/權益 問題防止自己個人(團體)所有的財產遭受他人惡意 奪取/破壞,Chen-Yu Lee 2003,個人電腦安全須知,如何防病毒如何防駭客,Chen-Yu Lee 2003,病毒,病毒的起源(自取滅亡的天性)病毒如何傳染磁片光碟片等網路如何解毒使用乾淨的開機方式安裝掃毒解毒程式,Chen-Yu Lee 2003,病毒,病毒造成的破壞系統毀損系統當機檔案資料遺失防毒要領安裝防毒軟體盡量使用原版軟體不去執行來路不明的檔案(尤其是執行檔),Chen-Yu Lee 2003,駭客,Chen-Yu Lee 2003,5.4 程式語言簡介,Chen-Yu Lee 2003,程式語言是,作為開發程式的工具語言程式語言有高階語言Basic 等低階語言CJava 等,Chen-Yu Lee 2003,撰寫程式語言需具備,基本語言本身的熟適寫程式的基本概念進階物件的觀念資料結構的觀念作業系統的觀念系統結構的觀念,Chen-Yu Lee 2003,C example,For(i=1;i10;i+)For(j=1;j10;j+)Printf(j,“X”,i,“=”,j*I);,Chen-Yu Lee 2003,物件導向簡介(Object-Oriented),Chen-Yu Lee 2003,5.5 進階網頁建構,
