changed 5 years ago  
Linked with GitHub

內置框架的使用方法

有時候我們可能需要將一些外部『網頁』或『檔案』整合到同一個網頁中，以前的 HTML 技術喜歡使用框架 (frame) 來處理！ 不過框架有些麻煩，加上目前 HTML5 不太建議使用，因此目前這個技術倒是很少使用的。但是，我們確實有需要用到內部框架啊！ 例如很常看到的 google map 嵌入到某些網頁，作為交通指標的建議啊！這該如何處理？

基本上，可以透過 iframe 來處理！不過要注意的是， iframe 也是『在既有的網頁中，再嵌入另一個網頁或檔案』的意思～因此， 使用 iframe 時，你當然至少就要有兩個『網頁』才行！當然，最常用的就是 google map 的外部網頁！那就開始製作google map的外部網頁吧~~~

課堂練習 4.1.A

那就讓我們來設定貴校或貴單位的地理位置，將該地理位置的 google map 嵌入式網址 (一定要選擇嵌入式網址， 否則 google map 無法顯現！)，整合到你的網頁中。

src="url"：就是 iframe 裡面要放置的另一個檔案的位置；

height="高度"：就是 iframe 的框框高度

width="寬度"：就是 iframe 的框框寬度

name="一個名稱"：可以將這個 iframe 的框框給個名字！

一開始先在web1裡建立一個unit04-1.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡

<meta charset="utf-8">
unit04-1 嵌入地圖練習

本校的地理位置搜尋，嵌入 iframe的google map

課程練習 4-2-A

除了上述的應用之外，如果你需要將某個網頁以點擊的方式來呈現於目前的網頁下，也可以使用：

(1)將 iframe 給予一個名稱，即 name='abc' 的設定值
(2)在超連結 a 裡面，加上 target='abc' 即可讓該網頁 (href) 指向 iframe 喔！

在一個網頁中，用 iframe 嵌入 800x500 的寬高框，先設定 src 為空 (src=' ') 。在這個嵌入框架上方，以清單的方式， 列出我們學過的習題的超連結，並且這四個網頁的呈現，會跑到 iframe 的框架內！

範本: http://class.vbird.tw/~4060c006/cjshs/unit02-4-2.html

一開始先在web1裡建立一個unit04-2.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡

<meta charset="utf-8">
unit04-2 嵌入網頁練習

那就讓我們來練習如何利用嵌入的方式將其它網頁放置到該網頁的框架裡面巴~~~
完成的檔案會如下哦~~~

多媒體 video, audio 的使用

很多時候你可能會將自家的影片、聲音檔案等等放置到網站上，而不只是圖片而已。過去許多網站並不支援串流，因此無法直接在瀏覽器上面播放。 現在，瀏覽器本身就支援串流，管你網站有沒有支援，瀏覽器自動做串流～因此，影片再也不需要下載到 client 端才能看了！可以直接在瀏覽器上面播放！ 但是並非所有的格式都可以播放～支援度比較廣的應該是 MP4 這種影片格式～所以，你的相機、手機、攝影機等，錄影的時候，若直接調整成 MP4 的話， 那麼原始影片就可以直接放到你的網站上來播放呢！

影片格式的轉換-轉成 MP4

但是直接將你的影片丟到你自己的網站上，實在不是一個聰明的方法，因為…通常錄影所得的影片檔容量都太大了！如果隨便同時幾十個人來瀏覽， 你網站所在的網路頻寬恐怕就沒戲唱了！因此，通常我們會將影片格式轉檔成可以直接使用的 MP4 之外，也會將影片的解析度調小， 這樣比較好放置在網站上。通常網路上最常介紹的就是格式工廠 (format factory) 這個軟體～

你可以到底下的網站去了解一下。

格式工廠官網：http://www.pcfreetime.com/
台灣阿榮福利味：http://www.azofreeware.com/2008/10/formatfactory-155.html

課程練習 4-3-A

使用 preload=metadata 預載資料格式、加上 controls 的控制面板，且不要自動播放！請注意，影片檔名最好不要變動，且影片一定要放置於 img 目錄下！

src="filename"：指定檔案路徑與檔名

poster="photo.jpg"：視訊可以順利播放前要預先顯示的圖片

preload="{none或auto或metadata}"：使用者按下按鈕前，應該要做的動作。個人建議使用 metadata 即可

width, height="數值不須單位"：顯示的大小，單位為 px，不需要加上單位

controls：不須屬性值，可以顯示控制 bar

autoplay：不須屬性值，是否要自動開始播放的設定，一般不建議

loop：不須屬性值，是否要重複播放，一般不建議

一開始先在web1裡建立一個unit04-3.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡

<meta charset="utf-8">
unit04-3 嵌入影片練習

那就讓我們來練習如何利用嵌入影片到該網頁的裡面巴~~~
完成的檔案會如下哦~~~

嵌入影片喔

這個影片來自於https://videos.pexels.com/，是免費影片哦!但是也請不要亂用於商業行為!本站純屬自我練習哦!

課程練習 4-4-A

至於聲音想要直接整合到網頁時，HTML5 建議的聲音格式為 ogg，因此你可以將 mp3 或其他格式轉成 ogg 之後，再以 audio 的方式嵌入到網頁上。 雖然很多網頁喜歡加上背景音樂，不過個人認為，還是預設不要有音樂在網頁上面呈現會比較好。無論如何， audio 的屬性名有這些：

src="filename"：指定檔案路徑；

preload="{none或auto或metadata}"：使用者按下按鈕前，應該要做的動作。個人建議使用 metadata 即可

controls：無須屬性值，直接使用不須加上內容，可以顯示控制 bar

autoplay：無須屬性值，是否要自動開始播放，一般不建議

loop：無須屬性值，是否要重複播放，一般不建議

YouTube 有提供無償使用的音樂檔，相關的網址在 https://goo.gl/Z6TsBI， 你可以在該網站下載適合的音樂來播放。

一開始先在web1裡建立一個unit04-4.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡

<meta charset="utf-8">
unit04-4 嵌入音樂練習

那就讓我們來練習如何利用嵌入音樂到該網頁的裡面巴~~~
完成的檔案會如下哦~~~

嵌入音樂

底下的音樂來自於 Youtube的免費音樂，本站純屬自我練習哦!

4-5 作業練習

(10%)完成今天所有的課堂上面的實做，並且依據課堂上所說的，全部的例題都需要在web1裡面的 index.html檔案加上超連結，結果可能會如同下面的圖示所示。

4-6 作業練習二

一開始先在web1裡建立一個exam04-5.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡

<meta charset="utf-8">
exam04-5 框架作業

請根據課程練習的4-2-A來製作出另一個不同的iframe框架。

用 iframe 嵌入寬*高的框架，先設定 src 為空 (src=’ ') 。在這個嵌入框架上方，以清單的方式列出你想做的期末作業是類似什麼版型找出四個由最喜歡到最後一個喜歡的，並將它弄到iframe框架裡面

Sun, Apr 19, 2020 11:30 PM
陳鵬皓撰寫完畢

Select a repo