第”–®…ƒ 網頻§‹èˆ‡é€²é‡‰ç”¨

  • View
    68

  • Download
    0

Embed Size (px)

DESCRIPTION

第五單元 網頁建構與進階應用. Outline. 5.1 多媒體簡介 5.2 網頁建構簡介 5.3 電腦安全簡介 5.4 程式語言簡介 5.5 進階網頁建構. 5.1 多媒體簡介. What is Multi-media( 多媒體 ). 機器 ( 電腦 ) 以不同 ( 多樣 ) 的媒介 ( 體 ) 將資料 ( 訊 ) 展現給人類 提供多樣化的表現方式於 教育 / 娛樂 / 工作 上. 多媒體包括有. 文字 圖片 聲音 影片 3D … 其他. 資料壓縮. 由於多媒體資料過於龐大 ~ 必須先壓縮方便傳輸與儲存. 壓縮技術. 非失真壓縮 - PowerPoint PPT Presentation

Text of 第”–®…ƒ...

  • Outline5.1 5.2 5.3 5.4 5.5

  • 5.1

  • What is Multi-media()()()()()

    //

  • 3D

  • ~

  • Run Length

    PCA

  • PixelPixel/Color/File FormatBMP,PCX,GIF,JPG.

  • BMP to GIFBMP to JPG

    BMP to GIFBMP to JPG

  • ()PhotoImpact()PaintShopPro ()PhotoShop ()ACDSee ()

  • ,BMP,GIFJPG,.

  • .??

  • (/)44.1/22/11 KHzMono/Stereo/A3D 2,4 channel Dolby Digital 2/../5.1 channelDTS 5.1/7.1 channelWav,Mp3,Wma,Mid

  • (sampling)(digital)..(sample rate),2.(sample resolution)..

  • (sample rate). 10-20000 Hz 50-7000 Hz 300-3400 Hz

    ()

  • (sample resolution)8bits = 256 16bits = 65536 ()()

  • CD44100 Hz / 16 bits44100*16*2/8=172KB/sec22050 Hz / 8 bits 22KB/sec/11025 Hz / 8 bits 11KB/sec

  • 20-20000Hz,.

    Mpeg1 audio layer114Mpeg1 audio layer216~18Mpeg1 audio layer3 (mp3)110~112

  • MP3Mpeg1 audio layer3 (mp3)Bit rate()192K192Kbits= 300 sec128K -> 300*128Kb=38400kb=4.8MB192K -> 300*192K=57600kb=7.2MBExample

  • SNRS/NSignal-to-Noise Ratio

  • Voxengo CurveEQ Wave Creator()Creative Recorder ()WinAmp(/)Cdplayer()Wave 2 mp3

  • 24()Bit rateMpeg, Dat, Mov, Rm, Wmv

  • 24*100kB(mpeg)+17k(mpeg3)/Sec.145mB/Min.8.7GB/Hr.

    !!!

  • (key frame)()()key framekey framekey frame

  • 15 1816 1917 1214 1316 1515 161515.5 16.515.5 17.516.5 13.514.5 14.5324

  • Bit rate ()()()()K bpsKey frame rateKey frame every secondframe rate()15- 24 30+

  • 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 .

  • Ulead media studio.XmpegWindows media player/Real PlayerWinDVD/PowerDVDAnimation Shop

  • 3 DimensionTriangle

    Texture

  • 3 DimensionTriangle

    Texture

  • 3 Dimension

  • 5.2

  • Internet/dr888311/index.htmWebServer

  • 1.FrontPage/Dreamweaver,,HTMLCSS(Cascading Style Sheets)CGI (JS,BVS)2.3.4.

  • (SiteMap)frame

  • JPG/GIF/Midi MP3/WMA/RM/Gif WMV/ASF/RM

  • FrontPage

  • FrontPage()(Web Server)() DHTML

  • Web,.http://net.nthu.edu.tw/ []PChome [/]

  • PCFTP(XP)/ ftp:// u123456()@thccy11.oz.nthu.edu.tw/WWW/ (OZ)chmod 711 (OZ)(HomePage).index.htmlhttp://oz.nthu.edu.tw/~u123456/ ()

  • HTML ......

    (Head or Body)

  • Example

  • HTML (Text) ParagraphALIGN = left|right|center Break Heading

    SIZE=string, COLOR=#RRGGBB, FACE=font names (Preformatted Text)

    ALIGN=left|right|center, NOSHADE, SIZE=n, WIDTH=n|p%

  • HTML (Text)

  • HTML (Images)

  • HTML (Links) file:///C:/Myfiles/main.html http://www.cs.nthu.edu.tw/homepage.htmlhomepage.html ./homepage.html web2/homepage.html ../homepage.html ../abc/homepage.htmlabc
  • HTML (Links)

    ref=http://www.nthu.edu.tw#

  • HTML (Table)

    tr: table rowtd: table data

  • HTML (Table)ALIGN=left|center|right WIDTH=n|p% BORDER[=n] CELLSPACING=n CELLPADDING=n BGCOLOR=#RRGGBB Colspan Rowspan

  • HTML (form)

  • ()FTP.CSS

  • CSS(Cascading Style Sheets)Short-term definitionPlace the style property in specific tagEX:

    contents

    Means: all text marked by this p tag will set to be font size = 5color = #001100

  • 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

  • CSS(Cascading Style Sheets)Reference definitionCall the CSS reference file between

    All tags will follow the referential CSS definition

  • CGI (JS,VBS)From website

    Ex:http://dob.tnc.edu.tw/index.php

  • Java Script JavaScript HTML . CookiesScript .

  • Example

    mystring = "Hello World!";document.write(mystring);

  • ,,++_+$

    MyCounterStudent_ID

  • Boolean, int, if, else, true

  • Int a = 0;

  • ByteIntFloatStringchar

  • = + - * / % ++ -- > < >=
  • sum = 10;sum = (a+b)/c;// String

  • If elseSwitch case

  • If elseIf (condition) { statement 1 }else { statement 2 }

  • If else function UsageOfIF(){ a = prompt(, 60); if (a
  • Switch caseswitch (variable) { Case (value1) ; statement; break;Case (value2) ; statement; break;Case (value3) ; statement; break;Default ; statement; break;}

  • Switch casetoday = 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;}

  • ()ForWhileDo while

  • For for ([]; []; []){ statements;}

  • ForFor(i=0;i
  • While while () { Statements;}

  • i=0;while(i
  • Do-Whiledo { Statements;}while ();

  • Do-Whilei=0;do { document.write (i); i++;}while(i
  • JS99.

  • = new Array();[i] = ;P = [i] ;Document.writeln([i]);

  • Array1 = new Array(); Array1[0] = John;Array1[1] = Mary;Array1[2] = Helen;document.writeln(Array1[0] + ""); document.writeln(Array2[1] + "");document.writeln(Array3[2] + "");

  • ().(method) = new();

  • Date 1today = new Date()getYear() getMonth() getDate() //getDay() //getHours() getMinutes() getSeconds()

  • Date 2Today.getMonth ()

    today = new Date();mymonth = today.getMonth();document.write(+mymonth);

  • 12/25.internet(OZ)Demo : 12/25(70%)internet5()(0-10 %)(mail) (5%)CSS(5%)JS_(5%)JS_(5%)JSP/ASP/CGI(5%)

  • 5.3

  • () /

    () /

  • ()

  • ()

  • 5.4

  • Basic CJava

  • C exampleFor(i=1;i
  • (Object-Oriented)

  • 5.5