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
Citation preview
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 Format– BMP,PCX,GIF,JPG….
Chen-Yu Lee 2003
範例
自然影像壓縮 BMP to GIF BMP to JPG
人工影像壓縮 BMP to GIF BMP 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 channel• DTS 5.1/7.1 channel
– Wav,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 ： 4
Mpeg1 audio layer2– 壓縮效率為 1 ： 6~1 ： 8
Mpeg1 audio layer3 (mp3)– 壓縮效率則高達 1 ： 10~1 ： 12
Chen-Yu Lee 2003
MP3
Mpeg1 audio layer3 (mp3) Bit rate( 每秒資料的流量 ) 192K
– 每秒要 192Kbits 的資料來存音樂– 五分鐘的歌 = 300 sec– 128K -> 300*128Kb=38400kb=4.8MB– 192K -> 300*192K=57600kb=7.2MB– Example
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 bps
Key frame rate– Key frame every second– 影響壓縮的程度– 影響使用的方便度
frame rate( 影響流暢度 )– 15- 不流暢– 24 正常– 30+ 電腦動畫
Chen-Yu Lee 2003
視訊壓縮 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 小得很多 .
Chen-Yu Lee 2003
影片工具簡介
Ulead media studio. Xmpeg Windows media player/Real Player WinDVD/PowerDVD Animation Shop …
Chen-Yu Lee 2003
3 Dimension
Triangle
Texture
Chen-Yu Lee 2003
3 Dimension
Triangle
Texture
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://net.nthu.edu.tw/ [ 網際網路服務篇 ]
其他免費的網頁空間– PChome [ 個人 / 網站 ]
Chen-Yu Lee 2003
上載網頁流程 先於自己的 PC 將網頁製作好 用 FTP 軟體 (XP 可用瀏覽器 )/ 網頁上載 將所有的網
頁都上載至指定位置– ftp:// u123456(學號 )@thccy11.oz.nthu.edu.tw/– WWW/目錄下 (OZ)
設定使用權限– chmod 711 (OZ)
將第一頁 (HomePage)設為該網頁空間規定的檔名 .– index.html
於瀏覽器輸入網址– http://oz.nthu.edu.tw/~u123456/
( 自己的學號 )
Chen-Yu Lee 2003
撰寫網頁
HTML 簡介– 主體
• <HTML><HEAD>...</HEAD><BODY>...</BODY></HTML>
– 雙標籤• <起始標籤 屬性 = 值 > <結束標籤 >
• <font size=3> … </font>
– 單標籤• < 標籤 屬性 = 值 >
• <img src=“image/Logo.gif” width=‘50’>
– 標籤適用區域不同 (Head or Body)
Chen-Yu Lee 2003
撰寫網頁 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>
Chen-Yu Lee 2003
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%
Chen-Yu Lee 2003
HTML 簡介 (Text)
<B> 加粗 <I> 斜體 <U> 加底線 <STRIKE> 畫線刪除 <BIG> 文字放大 <SMALL> 文字縮小 <SUP> 上標 <SUB> 下標 <EM> 強調
Chen-Yu Lee 2003
HTML 簡介 (Images)
<IMG – SRC=“” 來源 URL– ALT=“” 文字說明 String– WIDTH=“” 寬 integer/percentage– HEIGHT=“” 高 integer /percentage– BORDER=“” 框 integer– ALIGN=“” 對齊文字 top/middle/bottom/left/right
>
Chen-Yu Lee 2003
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">
Chen-Yu Lee 2003
HTML 簡介 (Links)
<a – target="new" 開啟目標– ref=“http://www.nthu.edu.tw” 開啟的資源
> <A name= "new" > 標籤
ref=“http://www.nthu.edu.tw# 標籤名稱”
Chen-Yu Lee 2003
HTML 簡介 (Table)
<table>– <tr>– <td> </td>– <td> </td>– </tr>
</table>
tr: table row td: 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 合併儲存格 <caption> 加標題
Chen-Yu Lee 2003
HTML 簡介 (form)
<FORM action="mailto:[email protected]" 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>
Chen-Yu Lee 2003
網頁製作
簡易按鈕 ( 圖形 )製作 動畫製作 FTP 軟體介紹 . CSS 簡介
Chen-Yu Lee 2003
撰寫網頁
CSS(Cascading Style Sheets)– Short-term definition
Place the style property in specific tagEX:
<p style=font-size:5pt;color:#001100> contents</p>
Means: all text marked by “this” p tag will set to be • font size = 5• color = #001100
Chen-Yu Lee 2003
撰寫網頁 CSS(Cascading Style Sheets)
– Long-term definitionDefine the CSS between <head></head>EX:
<style type="text/css"> A:link { color=#7777ff;text-decoration:none } A:visited { color=#7777ff;text-decoration:none } A:hover { color=#3333ff;text-decoration:underline }</style>
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 underline
Chen-Yu Lee 2003
撰寫網頁
CSS(Cascading Style Sheets)– Reference definition
Call the CSS reference file between <head></head>
<link rel="stylesheet" type="text/css" title="Style" href="web.css">
All tags will follow the referential CSS definition
Chen-Yu Lee 2003
撰寫網頁
使用別人的 CGI (JS,VBS)– From website
– Ex:• http://dob.tnc.edu.tw/index.php
Chen-Yu Lee 2003
Java Script 簡介
JavaScript 的程式碼是內嵌於 HTML 原始碼中，由瀏覽器的解譯器執行程式碼 .
除了 Cookies 外， Script 無法存取用戶端的檔案 .
Chen-Yu Lee 2003
Example
<html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; ch
arset=big5"> </head> <body> <script language="javascript"> mystring = "Hello World!"; document.write(mystring); </script> </body> </html>
Chen-Yu Lee 2003
基本觀念
識別字保留字變數 資料型別 運算子敘述與運算式
Chen-Yu Lee 2003
識別字
對所有常數 ,變數 ,函式…的命名–英文字母 + 數字 +“_”+“$”– 非保留字– 非運算子
– MyCounter– Student_ID
Chen-Yu Lee 2003
保留字
程式語言中保留的關鍵字尤其特殊意義
– 資料宣告–迴圈–結構宣告– …
– Boolean, int, if, else, true…
Chen-Yu Lee 2003
變數
宣告一可變資料格式 資料類別 變數名稱 初始值
Int a = 0;
Chen-Yu Lee 2003
資料型別
Byte Int Float String char
Chen-Yu Lee 2003
運算子 用於運算的符號
– 算數運算• = + - * / % ++ --
– 關係運算 • > < >= <= == !=
– 邏輯運算• !(not) &(and) |(or) ^(xor)
– 複合運算• += -= *= /=
– 位元運算• ~(補數 ) <<(左移 ) >>(右移 ) & |
Chen-Yu Lee 2003
敘述與運算式
一般敘述– sum = 10;
運算– sum = (a+b)/c;
註解– // String…
Chen-Yu Lee 2003
條件決策
根據條件的情況而有不同的處理 If else Switch case
Chen-Yu Lee 2003
If else
If (condition) – { statement 1 }
else – { statement 2 }
Chen-Yu Lee 2003
If else
<script> function UsageOfIF() {
– a = prompt(“請輸入分數：” , 60); – if (a<60) 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
迴圈
重複以相同的 (或可預知的 )條件作一件事
For While Do while
Chen-Yu Lee 2003
For
for ([ 計數變數初值 ]; [測試式 ]; [更新計數變數 ])
{ statements; }
Chen-Yu Lee 2003
For
For(i=0;i<10;i++) { document.write (i); }
Chen-Yu Lee 2003
While
while ( 條件式 ) { Statements; }
Chen-Yu Lee 2003
i=0; while(i<10) { 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(i<10)
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(); Array1[0] = “John”; Array1[1] = “Mary”; Array1[2] = “Helen”; document.writeln(Array1[0] + "<br>"); document.writeln(Array2[1] + "<br>"); document.writeln(Array3[2] + "<br>");
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 等– 低階語言
• C• Java 等
Chen-Yu Lee 2003
撰寫程式語言需具備
基本– 語言本身的熟適– 寫程式的基本概念
進階– 物件的觀念– 資料結構的觀念– 作業系統的觀念– 系統結構的觀念– …
Chen-Yu Lee 2003
C example
For(i=1;i<10;i++)
{For(j=1;j<10;j++)
{
Printf( j , “X” , i , “=” , j*I );
}
}
Chen-Yu Lee 2003
物件導向簡介 (Object-Oriented)
Chen-Yu Lee 2003
5.5 進階網頁建構
