1 / 95

第五單元 網頁建構與進階應用

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

faith-levine
Download Presentation

第五單元 網頁建構與進階應用

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第五單元網頁建構與進階應用

  2. Outline • 5.1 多媒體簡介 • 5.2 網頁建構簡介 • 5.3 電腦安全簡介 • 5.4 程式語言簡介 • 5.5 進階網頁建構

  3. 5.1 多媒體簡介

  4. What is Multi-media(多媒體) • 機器(電腦)以不同(多樣)的媒介(體)將資料(訊)展現給人類 • 提供多樣化的表現方式於 教育/娛樂/工作 上

  5. 多媒體包括有 • 文字 • 圖片 • 聲音 • 影片 • 3D • …其他

  6. 資料壓縮 • 由於多媒體資料過於龐大~ • 必須先壓縮方便傳輸與儲存

  7. 壓縮技術 • 非失真壓縮 • Run Length • 失真壓縮 • PCA

  8. 圖片 • 圖片的原理 • 以存Pixel的方式存圖片 • 圖片的壓縮 • 統計壓縮 • 重要元素壓縮 • 圖片的格式 • Pixel/Color/File Format • BMP,PCX,GIF,JPG….

  9. 範例 • 自然影像壓縮 • BMP to GIF • BMP to JPG • 人工影像壓縮 • BMP to GIF • BMP to JPG

  10. 圖片工具簡介 • 小畫家 (簡易圖形編輯) • PhotoImpact(網頁專用圖形編輯) • PaintShopPro (專業圖形編輯) • PhotoShop (超專業圖形編輯) • ACDSee (秀圖軟體)

  11. 動動手 • 自己用小畫家畫一張圖,然後存成BMP,GIF與JPG檔,比較一下差異.

  12. 分組討論時間. • 了解了圖片簡單的壓縮方式後 • 你覺得聲音要怎樣壓縮??

  13. 聲音 • 聲音的原理 • 將聲音以數位的方式儲存 • 聲音的壓縮 • 去掉不重要的頻率(太高/太低) • 聲音的格式 • 取樣 • 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,Mid

  14. 聲音數位化 • 自然聲音須經過一個取樣(sampling)的過程轉成數位(digital)訊號. • 兩個影響取樣的因素. • 取樣頻率(sample rate) • 須表現出原始波型的型態,所以須以2倍以上的取樣頻率才能真實的表現出原音. • 取樣解析度(sample resolution) • 每個取樣點的階度直.越大越能夠真實的反應聲音的差異性.

  15. 聲音數位化 • 取樣頻率(sample rate) • 兩倍以上. • 音樂訊號 10-20000 Hz • 寬頻語音 50-7000 Hz • 一般人聲 300-3400 Hz 波長 (音量) 頻率 頻率 頻率 頻率

  16. 聲音數位化 • 取樣解析度(sample resolution) • 增加強弱度的差異 • 8bits = 256 個強度 • 16bits = 65536 個強度 波長 (音量) 波長 (音量)

  17. 常見取樣 • CD品質 • 44100 Hz / 16 bits • 立體聲 • 44100*16*2/8=172KB/sec • 收音機品質 • 22050 Hz / 8 bits • 單音 • 22KB/sec • 電話/錄音帶品質 • 11025 Hz / 8 bits • 單音 • 11KB/sec

  18. 聲音壓縮 • 由於人的聽覺約在20-20000Hz之間,所以可以將高頻及低頻捨去以壓縮空間. • Mpeg1 audio layer1 • 標準壓縮效率為1：4 • Mpeg1 audio layer2 • 壓縮效率為1：6~1：8 • Mpeg1 audio layer3 (mp3) • 壓縮效率則高達1：10~1：12

  19. MP3 • Mpeg1 audio layer3 (mp3) • Bit rate(每秒資料的流量) • 192K • 每秒要192Kbits的資料來存音樂 • 五分鐘的歌= 300 sec • 128K -> 300*128Kb=38400kb=4.8MB • 192K -> 300*192K=57600kb=7.2MB • Example

  20. 訊噪比 • SNR，S/N，Signal-to-Noise Ratio • 訊噪比的是原始訊號與噪音之間的比例 • 值越大越好。

  21. 聲音工具簡介 • Voxengo CurveEQ • Wave Creator • 錄音機(錄音程式) • Creative Recorder (錄音程式) • WinAmp(撥放/轉換程式) • Cdplayer(撥放程式) • Wave 2 mp3 • 很多應用程式以內含

  22. 影片 • 影片的原理 • 每秒撥放24張以上圖片(非自然圖加倍) • 影片的壓縮 • Bit rate • 只存重要幾張其他以即時運算獲得 • 影片的格式 • Mpeg, Dat, Mov, Rm, Wmv…

  23. 影片原理 • 若不另外壓縮則 • 需24*100kB(mpeg圖像)+17k(mpeg3聲音)/Sec. • 145mB/Min. • 8.7GB/Hr. • 一定要壓縮!!!

  24. 影片原理 • 只在一個間隔內放置關鍵頁(key frame)(紅色) • 其他的頁(藍色)由內插法運算獲得 key frame key frame key frame

  25. 內插法簡介 5 1 15 18 16 19 17 12 14 13 3 16 15 15 16 2 4 15.5 16.5 15.5 17.5 16.5 13.5 14.5 14.5

  26. 重要的數據 • Bit rate (影響影片單張畫質的好壞) • (每秒資料的流量) • 一般約為數百(差)至數千(好)K bps • Key frame rate • Key frame every second • 影響壓縮的程度 • 影響使用的方便度 • frame rate(影響流暢度) • 15- 不流暢 • 24 正常 • 30+ 電腦動畫

  27. 視訊壓縮 • MPEG I • 352 X 240 • MPEG II • 720 X 480 • MPEG III • High-Definition TV (HDTV), 但是 MPEG-2 的訊號和解碼的方式, 可以涵蓋處理這些高頻寬的訊號, 因此 MPEG-3 便併入MPEG-2 規格之中. • MPEG IV • 能產生比 MPEG-1 更理想的畫質, 檔案的大小又比 MPEG-2 小得很多.

  28. 影片工具簡介 • Ulead media studio. • Xmpeg • Windows media player/Real Player • WinDVD/PowerDVD • Animation Shop • …

  29. 3 Dimension • Triangle • Texture

  30. 3 Dimension • Triangle • Texture

  31. 3 Dimension

  32. 5.2 網頁建構簡介

  33. 網頁瀏覽流程 Internet 要求網頁 回覆網頁 要求網頁 回覆網頁 Web Server /dr888311/index.htm

  34. 建構個人網站 • 1.撰寫網頁 • 設計網站 • 使用FrontPage/Dreamweaver編輯 • 圖片,聲音,影像編輯 • HTML • 使用CSS(Cascading Style Sheets) • 使用別人的CGI (JS,BVS) • 2.申請網頁空間 • 3.上載網頁 • 4.維護網頁

  35. 撰寫網頁 • 設計網站 • 目的 • 大綱(SiteMap)安排 • 版面安排 • 是否使用frame • 檔案結構安排

  36. 網頁可使用的多媒體檔 • 圖片 • JPG/GIF等有經過壓縮的圖片檔 • 聲音/音樂 • Midi 音色檔 • MP3/WMA/RM等有經過壓縮的音效/音樂 • 影片 • Gif 動畫檔 • WMV/ASF/RM等有經過高壓縮的影片

  37. 使用FrontPage • 使用介面介紹 • 文字的使用與設定 • 網頁內容 • 背景 • 圖片安置 • 連結的使用 • 圖層

  38. 使用FrontPage • 插入導覽(其他物件) • 跑馬燈 • 相片藝廊 • (其他很多功能需要Web Server有支援才能用) • 簡易動態圖片(按鈕) DHTML工具列 • 框架的使用 • 內框架 • 多框架 • 表單

  39. 申請網頁空間 • 因為網頁須置於一Web伺服器空間,才能全天候被瀏覽. • 學校的工作站 • http://net.nthu.edu.tw/ [網際網路服務篇] • 其他免費的網頁空間 • PChome [個人/網站]

  40. 上載網頁流程 • 先於自己的PC將網頁製作好 • 用FTP軟體(XP可用瀏覽器)/網頁上載 將所有的網頁都上載至指定位置 • ftp:// u123456(學號)@thccy11.oz.nthu.edu.tw/ • WWW/目錄下 (OZ) • 設定使用權限 • chmod 711 (OZ) • 將第一頁(HomePage)設為該網頁空間規定的檔名. • index.html • 於瀏覽器輸入網址 • http://oz.nthu.edu.tw/~u123456/ (自己的學號)

  41. 撰寫網頁 • HTML 簡介 • 主體 • <HTML><HEAD>...</HEAD><BODY>...</BODY></HTML> • 雙標籤 • <起始標籤 屬性=值> <結束標籤> • <font size=3> … </font> • 單標籤 • <標籤 屬性=值> • <img src=“image/Logo.gif” width=‘50’> • 標籤適用區域不同(Head or Body)

  42. 撰寫網頁 • Example <html> <head> <title>資訊系統應用</title> </head> <body text="#0000FF"> <br> <center> <font size="5" color="#111111FF" face="標楷體"> <b>資訊系統應用</b> </font> </center> <a href="Slides/91IFin.doc"> <img border="0" src="image/WordIcon.jpg" width="20" height="20"> </a> </body> </html>

  43. HTML 簡介(Text) • <P> Paragraph • ALIGN = left|right|center • <BR> Break • <H1> Heading • <FONT></FONT> • SIZE=string, COLOR=#RRGGBB, FACE=font names • <PRE> (Preformatted Text) • <XMP> • <HR> • ALIGN=left|right|center, NOSHADE, SIZE=n, WIDTH=n|p%

  44. HTML 簡介(Text) • <B> 加粗 • <I> 斜體 • <U> 加底線 • <STRIKE> 畫線刪除 • <BIG> 文字放大 • <SMALL> 文字縮小 • <SUP> 上標 • <SUB> 下標 • <EM> 強調

  45. HTML 簡介(Images) • <IMG • SRC=“”來源 URL • ALT=“”文字說明 String • WIDTH=“”寬 integer/percentage • HEIGHT=“”高 integer /percentage • BORDER=“”框 integer • ALIGN=“”對齊文字top/middle/bottom/left/right • >

  46. HTML 簡介(Links) • 絕對路徑 • file:///C:/Myfiles/main.html • http://www.cs.nthu.edu.tw/homepage.html • 相對路徑 • homepage.html 同一層目錄 • ./homepage.html 同一層目錄 • web2/homepage.html 下一層目錄 • ../homepage.html 上一層目錄 • ../abc/homepage.html上一層目錄的abc目錄下 • <a target="new“ ref="http://www.nthu.edu.tw">

  47. HTML 簡介(Links) • <a • target="new" 開啟目標 • ref=“http://www.nthu.edu.tw”開啟的資源 • > • <A name= "new" > 標籤 • ref=“http://www.nthu.edu.tw#標籤名稱”

  48. HTML 簡介(Table) • <table> • <tr> • <td> </td> • <td> </td> • </tr> • </table> • tr: table row • td: table data

  49. HTML 簡介(Table) • ALIGN=left|center|right：位置 • WIDTH=n|p%：表格的寬度。 • BORDER[=n]：邊界的寬度。 • CELLSPACING=n：儲存格間距。 • CELLPADDING=n：資料到儲存格間離。 • BGCOLOR=#RRGGBB：表格底色。 • Colspan 合併儲存格 • Rowspan 合併儲存格 • <caption> 加標題

  50. HTML 簡介(form) • <FORM action="mailto:leoli@cs.nthu.edu.tw" method="post“ enctype="text/plain"> • 名字：<INPUT name="myname" size=10 maxlength=20 value=“ "><P> • 密碼：<INPUT name="passwd" type=password size=8 maxlength=8><P> • <INPUT type="submit" value="送出表單"> • <INPUT type="reset" value="重新輸入"> • </FORM>

More Related