內置框架的使用方法

# 內置框架的使用方法 >有時候我們可能需要將一些外部『網頁』或『檔案』整合到同一個網頁中，以前的 HTML 技術喜歡使用框架 (frame) 來處理！不過框架有些麻煩，加上目前 HTML5 不太建議使用，因此目前這個技術倒是很少使用的。但是，我們確實有需要用到內部框架啊！例如很常看到的 google map 嵌入到某些網頁，作為交通指標的建議啊！這該如何處理？ :::warning **基本上，可以透過 iframe 來處理！不過要注意的是， iframe 也是『在既有的網頁中，再嵌入另一個網頁或檔案』的意思～因此，使用 iframe 時，你當然至少就要有兩個『網頁』才行！當然，最常用的就是 google map 的外部網頁！那就開始製作google map的外部網頁吧~~~** ::: --- :::success **課堂練習 4.1.A** ::: **那就讓我們來設定貴校或貴單位的地理位置，將該地理位置的 google map 嵌入式網址 (一定要選擇嵌入式網址，否則 google map 無法顯現！)，整合到你的網頁中。** **src="url"**：就是 iframe 裡面要放置的另一個檔案的位置； **height="高度"**：就是 iframe 的框框高度 **width="寬度"**：就是 iframe 的框框寬度 **name="一個名稱"**：可以將這個 iframe 的框框給個名字！ **一開始先在web1裡建立一個unit04-1.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡** <pre> <!doctype html> <html lang="zh_tw"> <head> <meta charset="utf-8"> <style> </style> <title>unit04-1 嵌入地圖練習</title> </head> <body> </body> </html> </pre> :::info <h1><font face='標楷體'>本校的地理位置搜尋，嵌入 iframe的google map</font></h1> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3672.9662102804023!2d120.22079531491859!3d22.98826998497048!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e769730d48799%3A0x9d26dad24ef66aee!2z56eB56uL6ZW35qau6auY57Sa5Lit5a24!5e0!3m2!1szh-TW!2stw!4v1574171903465!5m2!1szh-TW!2stw" width="600" height="300" frameborder="1" style="border:2px solid pink;"></iframe> ::: --- :::success **課程練習 4-2-A** ::: #### 除了上述的應用之外，如果你需要將某個網頁以點擊的方式來呈現於目前的網頁下，也可以使用： **(1)將 iframe 給予一個名稱，即 name='abc' 的設定值 (2)在超連結 a 裡面，加上 target='abc' 即可讓該網頁 (href) 指向 iframe 喔！** :::warning **在一個網頁中，用 iframe 嵌入 800x500 的寬高框，先設定 src 為空 (src=' ') 。在這個嵌入框架上方，以清單的方式，列出我們學過的習題的超連結，並且這四個網頁的呈現，會跑到 iframe 的框架內！** ::: 範本: http://class.vbird.tw/~4060c006/cjshs/unit02-4-2.html **一開始先在web1裡建立一個unit04-2.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡** <pre> <!doctype html> <html lang="zh_tw"> <head> <meta charset="utf-8"> <style> </style> <title>unit04-2 嵌入網頁練習</title> </head> <body> </body> </html> </pre> **那就讓我們來練習如何利用嵌入的方式將其它網頁放置到該網頁的框架裡面巴~~~** **完成的檔案會如下哦~~~** :::info ![](https://i.imgur.com/52uW3Uh.png) ::: --- :::success **多媒體 video, audio 的使用** ::: >很多時候你可能會將自家的影片、聲音檔案等等放置到網站上，而不只是圖片而已。過去許多網站並不支援串流，因此無法直接在瀏覽器上面播放。現在，瀏覽器本身就支援串流，管你網站有沒有支援，瀏覽器自動做串流～因此，影片再也不需要下載到 client 端才能看了！可以直接在瀏覽器上面播放！但是並非所有的格式都可以播放～支援度比較廣的應該是 MP4 這種影片格式～所以，你的相機、手機、攝影機等，錄影的時候，若直接調整成 MP4 的話，那麼原始影片就可以直接放到你的網站上來播放呢！ :::warning **影片格式的轉換-轉成 MP4** 但是直接將你的影片丟到你自己的網站上，實在不是一個聰明的方法，因為...通常錄影所得的影片檔容量都太大了！如果隨便同時幾十個人來瀏覽，你網站所在的網路頻寬恐怕就沒戲唱了！因此，通常我們會將影片格式轉檔成可以直接使用的 MP4 之外，也會將影片的解析度調小，這樣比較好放置在網站上。通常網路上最常介紹的就是格式工廠 (format factory) 這個軟體～ ::: **你可以到底下的網站去了解一下。** **格式工廠官網**：http://www.pcfreetime.com/ **台灣阿榮福利味**：http://www.azofreeware.com/2008/10/formatfactory-155.html --- :::success **課程練習 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 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡** <pre> <!doctype html> <html lang="zh_tw"> <head> <meta charset="utf-8"> <style> </style> <title>unit04-3 嵌入影片練習</title> </head> <body> </body> </html> </pre> **那就讓我們來練習如何利用嵌入影片到該網頁的裡面巴~~~** **完成的檔案會如下哦~~~** :::info <h1><font face="標楷體">嵌入影片喔</font></h1> <p>這個影片來自於<a href="https://videos.pexels.com/" target="_blank" title="雖然是免費素材，不過還是請尊重原作者，給予連結說明">https://videos.pexels.com/</a>，是免費影片哦!但是也請不要亂用於商業行為!本站純屬自我練習哦!</p> <video poster="images/photo.PNG" src="images/Pexels Videos 2169880.mp4" preload="metadata" controls width="600">若您看到此訊息，代表您的瀏覽器不支援 HTML5 的 video 標記功能～請下載檔案後再播放，或更換成支援 HTML5 的瀏覽器為佳。</video> ::: --- :::success **課程練習 4-4-A** ::: **至於聲音想要直接整合到網頁時，HTML5 建議的聲音格式為 ogg，因此你可以將 mp3 或其他格式轉成 ogg 之後，再以 audio 的方式嵌入到網頁上。雖然很多網頁喜歡加上背景音樂，不過個人認為，還是預設不要有音樂在網頁上面呈現會比較好。無論如何， audio 的屬性名有這些：** **src="filename"**：指定檔案路徑； **preload="{none或auto或metadata}"**：使用者按下按鈕前，應該要做的動作。個人建議使用 metadata 即可 **controls**：無須屬性值，直接使用不須加上內容，可以顯示控制 bar **autoplay**：無須屬性值，是否要自動開始播放，一般不建議 **loop**：無須屬性值，是否要重複播放，一般不建議 :::warning YouTube 有提供無償使用的音樂檔，相關的網址在 https://goo.gl/Z6TsBI，你可以在該網站下載適合的音樂來播放。 ::: **一開始先在web1裡建立一個unit04-4.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡** <pre> <!doctype html> <html lang="zh_tw"> <head> <meta charset="utf-8"> <style> </style> <title>unit04-4 嵌入音樂練習</title> </head> <body> </body> </html> </pre> **那就讓我們來練習如何利用嵌入音樂到該網頁的裡面巴~~~** **完成的檔案會如下哦~~~** :::info <h1><font face="標楷體">嵌入音樂</font></h1> <p>底下的音樂來自於 Youtube的免費音樂，本站純屬自我練習哦!</p> <audio src="images/1989.mp3" preload="metadata" controls></audio> ::: --- :::success **4-5 作業練習** ::: **(10%)完成今天所有的課堂上面的實做，並且依據課堂上所說的，全部的例題都需要在web1裡面的 index.html檔案加上超連結，結果可能會如同下面的圖示所示。** ![](https://i.imgur.com/N3uBlYh.png) :::success **4-6 作業練習二** ::: **一開始先在web1裡建立一個exam04-5.html 的檔案，接著複製底下原始程式碼貼到剛建立的檔案裡** <pre> <!doctype html> <html lang="zh_tw"> <head> <meta charset="utf-8"> <style> </style> <title>exam04-5 框架作業</title> </head> <body> </body> </html> </pre> 請根據**課程練習的4-2-A**來製作出另一個不同的**iframe**框架。 :::warning **用 iframe 嵌入寬*高的框架，先設定 src 為空 (src=’ ') 。在這個嵌入框架上方，以清單的方式列出你想做的期末作業是類似什麼版型找出四個由最喜歡到最後一個喜歡的，並將它弄到iframe框架裡面** ::: > [time=Sun, Apr 19, 2020 11:30 PM] > [name=陳鵬皓撰寫完畢]

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.