HTML超連結及多媒體 靜宜大學 資管系 楊子青.

Slides:



Advertisements
Similar presentations
第六章 网页设计与制作基础.
Advertisements

專題製作 許惠淑.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第三讲 站点链接与表格布局.
俄语语音学习讲义(板块一) 本讲义的目的是让外国学生在开始学习发音、阅读以及书写前熟悉所接触的俄语字母和语音.
主讲 冷清波 城乡规划管理与法规 主讲 冷清波
Web图片搜索引擎设计 ——基于文本的图片信息提取.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
教师不仅仅是人类文化的传递者,也应该是学生心灵的塑造者,是学生心理健康的维护者。
個人資料保護法簡介 報告人: 花蓮地檢署主任檢察官 許建榮.
创建网页链接.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
dreamweavercs5 页面的框架结构
A級無障礙網頁製作 主講人:劉威良 臺南大學資訊教育所
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
東吳大學WEB 2.0網站建置系統說明會 2012/12/30製作.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
DreamWeaver MX (V) 林偉川.
Chapter14 HTML簡介與簡易網頁製作
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
通訊 授課:方順展.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
Working with Databases (II) 靜宜大學資管系 楊子青
Ch03 HTML5 + CSS 表格與多媒體 網頁程式設計.
第3章 图像和其他媒体.
增加影音與圖片 多媒體設計.
CSS樣式 靜宜大學 資管系 楊子青.
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
授课教师:姬广永 QQ: TEL: 学习交流网站:
自由軟體介紹(一) 把flash通通帶回家 報告人:陳俊銘.
4.5 网页制作 本节概述 本节的学习目标 主要内容.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
檔案與磁碟的基本介紹.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
網頁切換移轉 JS vs. ASP.NET.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
App Inventor 2初體驗 靜宜大學資管系 楊子青
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
PowerPoint 2019/4/9.
運用 Google Earth 製作戶外考察報告
網站總復習之重點 李燕秋
HTML – 超連結與圖片 資訊教育.
製商整合學程說明會 主講者: 商業自動化中心 陳薏如 助理 2010年9月13日.
個人網路空間 資訊教育.
《网页设计与制作》.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
HelloPurr_Extend 靜宜大學資管系 楊子青
指導單位:教育部 辦理單位:花蓮縣政府教育處、花蓮縣教育網路中心 協辦單位:國立東華大學
指導單位:教育部 辦理單位:花蓮縣政府教育處、花蓮縣教育網路中心 協辦單位:國立東華大學
Video 影像 (VideoPlayer 影像播放器、Camcorder 錄影機) 靜宜大學資管系 楊子青
CSS樣式 靜宜大學 資管系 楊子青.
CHAPTER 14 視窗與超連結的各種變化.
六年級電腦科 我是小導演 影音剪輯Movie Maker
從HTML表格到CSS 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
進階UI元件:ListView元件以及複選 靜宜大學資管系 楊子青
Brief Guide of FrontPage
連結 (anchor link).
DreamWeaver MX (IV) 林偉川.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
網頁製作 1032 數位教材 單元7 : 超連結 主講老師:徐培倫.
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
Presentation transcript:

HTML超連結及多媒體 靜宜大學 資管系 楊子青

大綱 超連結 內置框架 多媒體 圖片 音樂 影音 Flash動畫 YouTube影音

1. 超連結 Hyperlink 點選文字或圖片,連結到另一個網頁、BBS 、FTP 、檔案或e-mail

超連結語法 <a href="網址" target="開啟目標"> 屬性 值 描述 href URL 例如設計一個超連結,開啟新視窗連結到靜宜大學: <a href="http://www.pu.edu.tw" target="_blank">靜宜大學</a> 屬性 值 描述 href URL Specifies the URL of the page the link goes to target _blank _parent _self _top framename Specifies where to open the linked document 顯示於新視窗 顯示於上一層框架 顯示於目前視窗(預設值) 移除框架,顯示於目前視窗 顯示於特定框架

絕對路徑與相對路徑 絕對路徑 相對路徑 絕對的位置,並不會隨著現在目錄的改變而改變 相對於現在目錄的路徑表示法,所指到的檔案或目錄,會隨著現在目錄的不同而改變 分類 範例 說明 絕對路徑 http://www.google.com 連結至Google網站Server file:///D:/test.htm 連結至本機D磁碟機的test.htm 相對路徑 test.htm 連結至同一資料夾下的tets.htm image/test.gif image資料夾下的test.gif ../index.htm 上一層資料夾的index.htm ../test/menu.htm 上一層資料夾下的test子目錄下的menu.htm

連結至E-mail信箱 <a href="mailto:E-mail帳號">…</a> 撥電話及分機 例如: <a href="mailto:tcyang@pu.edu.tw">寄信給子青老師</a> 設定主旨 <a href="mailto:tcyang@pu.edu.tw?subject=HTML5">寄信</a> 郵件副本 <a href="mailto:tcyang@pu.edu.tw?cc=a@mail.com">寄信</a> 密件副本 <a href="mailto:tcyang@pu.edu.tw?bcc=a@mail.com">寄信</a> 郵件主旨內容 <a href="mailto:tcyang@pu.edu.tw?body=Have a Nice Day!">寄信</a> 撥電話及分機 <a href="tel:0426328001,18110">04-26328001轉18110</a>

2. 內置框架 把外部網頁嵌入自己網頁中,語法: <iframe src="欲插入的網頁網址" width= "框架寬度" height="框架高度" scrolling="yes"> </iframe> 實例:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe 實例: <iframe src="http://www.pu.edu.tw" width="600" height="400" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe>

3. 多媒體 (1) 圖片 建議的圖片格式:JPEG、GIF 建議的圖片解析度:只要72dpi(電腦螢幕的解析度,每英吋72點),圖檔愈小愈好(但需考慮清晰度 ) 語法: <img src="圖檔來源" alt= "說明文字" width="圖寬" height="圖高" /> 例如: <img src="http://www.csim.pu.edu.tw/files/users/pic/cache.21_54aae2f0.jpg.w95_h95.jpg" width="95" height="95" alt="子青老師個人照"></img>

多媒體 (2) 音樂 常見的音樂格式:WAV、MP3、OGG等 語法: <audio src="音樂來源" type="audio/mpeg"> </audio> 實例: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio

多媒體 (3) 影音 常見的音樂格式:MP4、OGG、WebM等 語法: <video src="影音來源" type="vidio/mp4"> </video> 實例: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video

多媒體 (4) Flash動畫 格式:SWF檔 語法: <embed src="動畫來源"> </embed> 實例: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_embed

多媒體 (5) YouTube影音 利用iframe嵌入YouTube影音,語法: <iframe src="http://www.youtube.com/embed/影片網址?autoplay=0" allowfullscreen> </iframe> YouTube影片網址,取v=後面:lXHEnZ1KanI https://www.youtube.com/watch?v=lXHEnZ1KanI 也可由影片「分享」獲知影片網址 autoplay=1則可自動播放

參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。 Chap 08: 建立超連結 Chap 06: 圖片的處理 Chap 09: 多媒體影音的運用 網路資源 http://www.w3schools.com/tags/