HTML 5與課程簡介 靜宜大學 資管系 楊子青.

Slides:



Advertisements
Similar presentations
高中新课程思想政治(必 修 1 、 2 )的教学体会 北京师大二附中 李文燕 2008 年西城新课程教师培训的讲稿.
Advertisements

●公司簡介. ●公司組織 行銷 企劃部 行銷 企劃部 研發 設計部 研發 設計部 視覺 設計部 視覺 設計部 媒體 製作部 媒體 製作部 行動 裝置部 行動 裝置部 執行長 總經理 管理部 本公司組織人力配置除董事長、執行長、總經理外,共 有六大部門,分別為研發部 6 人、管理部 4 人、視覺設計部.
《饲料分析与质量检测技术》 说课 主讲教师:管建慧. 课程名称: 《饲料分析与饲料质量检测技术 》 课程编码:
醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
智慧城市创意设计 大赛说明 中国智慧城市产业技术创新战略联盟 2014 年 3 月. 背景介绍 1. 创意启迪智慧 创新驱动发展.
阿布杜艾尼 · 米吉提 上海医学院 网络虚拟环境在医学中的应用 谷歌人体浏览器.
4 第 4 章 网页的布局 设计站点地图,有助于突出网站的主题,确定网 站的内容。而对于每一个网页来说,最重要的除了网 页的内容以外,还有就是网页的风格和布局。一个格 局凌乱的网页,内容再精彩,也不能说是一个好网页 。
5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用.
LOGO 《静态网页设计》课程整体设计 电子信息工程系 计算机专业 李超燕. LOGO 2 课程在专业课程体系中的定位 3 岗位分析 目 录 1 课程的基本信息 6 本课程的特色和效果 4 教学整体设计 5 教学基本条件.
2009/12/211 商務科技管理系 實 務 專 題 報 告 辦桌非難事 學生: 施雅雯 ( ) 張敬芝 ( ) 葉明臻 ( ) 黃怡琅 ( )
熟悉 Dreamweaver 的工作區與基本操作
16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小
第14章 表单 在制作动态网页时,要实现信息交互,常常用到表单。 常见的表单有搜索表单、用户登录注册表单、调查表 单、留言簿表单等。本章节将和大家一起探讨在表单 的基本概念和各个元素,以及在Dreamweaver CS4中 如何创建表单,并通过实例掌握表单制作的方法。
成语乐园 成语乐园 执教老师:李道梅.
詹天佑.
北师大版义务教育课程标准实验教科书 七年级上册讲义 第17课 先进的科学技术.
讲故事训练 授课人:田轶.
第十一課 菜園 6-11.
參考資料:﹝升中全接觸﹞ 香港明愛青少年及社區服務
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
活力校園 5C 顏慧玲.
行動終端應用軟體創作專題競賽 題目:商品後端管理APP
20 使用Dreamweaver构建HTML结构
六. 布局.
當那時候,末底改坐在朝門,王的太監中有兩個守門的,辟探和提列,惱恨亞哈隨魯王,想要下手害他。(斯2:21)
5.6 制作具有动态特效的网页 1. 层和时间轴动画 2. Dreamweaver的Behaviors(行为)概述 华东师范大学计算中心.
Web程序设计基础 太原理工大学 计算机科学与技术学院 林福平 求实创新
Mm Framework MakingMobile是一套基于HTML5的手机应用系统开发框架,致力将既有的桌面Web系统平滑延展到手机上。其架构特点强调易用性、延展性、跨平台、解耦化、组件化,主要面向定制性较强的行业应用市场。
大学计算机.
郑州市惠济区第六中学 网站推介 姜茂方 2015年1月10日.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
Dreamweaver的工作界面.
第六章 补间动画 主讲人:马 震 人民邮电出版社.
蘇軾詞的賞析
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第十五章 传播学调查研究方法.
14 Spry工具集與資料集的使用 認識 Spry 關於版面配置 Spry 工具集 Spry 選單列 Spry 標籤面板
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
Selenium 一个用于Web应用程序测试的工具 Robin Ren
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
拿 法 常晓波博士 Mobile:
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
当那时候,末底改坐在朝门,王的太监中有两个守门的,辟探和提列,恼恨亚哈随鲁王,想要下手害他。(斯2:21)
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
Web前端开发技术与实践 第3章:初识HTML5 阮晓龙 /
学生网页作品情况分析.
認識我的故鄉_台中市.
第18章 Dreamweaver与Photoshop的完美结合
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
前端技术开发 高莺.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
网页设计与制作 Dreamweaver CS6 标准教程
大專院校美食網- 以新北市為例 商務科技管理專題 組 別: 第二組 專題成員: 方采薇 陳宜欣
第17章 网站测试与发布 在网页制作完成后,就要进入最后一个环节——网站 的测试与发布。Dreamweaver CS4具有网站测试与发 布的功能,可以对网站的浏览器兼容性、链接进行检 查,还可以清理HTML标签,并将本地站点上传到服务 器上。
十 三.使用模板和库.
站群系统管理平台简介 网教中心 2014年10月29日.
主讲:陶建平 华中科技大学网络与计算中心
精忠报国  演唱:屠洪纲 作词:陈涛 作曲:张宏光  狼烟起 江山北望  龙起卷 马长嘶 剑气如霜  心似黄河水茫茫  二十年 纵横间 谁能相抗  恨欲狂 长刀所向  多少手足忠魂埋骨它乡  何惜百死报家国  忍叹惜 更无语 血泪满眶  马蹄南去 人北望  人北望 草青黄 尘飞扬  我愿守土复开疆  堂堂中国要让四方来贺.
网页设计与制作 Jiangxi Engineering Vocational College 信息工程系 徐卫红.
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
賣場與網站設計 EC-IC 2010最佳賣場設計奬第一名觀摩 EC-IC 2010最佳賣場設計奬第三名觀摩 各國網站風格大不同 網站設計.
聽聽那冷雨---重點摘要 二愛 王煜榕.
工业设计教研室 主讲教师:李明 Mobile: 教学主楼1385室
憲政與民主 應化3A 邱泓明.
网页设计三合一教程 主讲教师 2019/6/2.
古蹟知性之旅 我和新港奉天宮有個約 報告人:陳 映 竹 傅 湘 甯.
JavaScript 教师:魏小迪
Presentation transcript:

HTML 5與課程簡介 靜宜大學 資管系 楊子青

大綱 HTML5 靜態網頁與動態網頁 關於本課程

Rough Timeline of Web Technologies HTML5標準還在制定中

1. HTML 5 HTML 5 CSS 3 JavaScript

HTML5與HTML4差異(1) 語法簡化,例如文件型態定義: HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML5 <!DOCTYPE html>

廢除一些舊有標籤,例如<font>、<center>、<frame>等 HTML5與HTML4差異(2) 廢除一些舊有標籤,例如<font>、<center>、<frame>等 <frame>由<iframe>取代 測試網址:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe

HTML5與HTML4差異(3) 新增語意標籤,例如 <header>、<footer>、<section> 和 <article> HTML5的設計是要更好的描繪網站的結構,讓搜尋引擎更容易擷取到網頁重點 位置可自由搭配

語意標籤實例

HTML5與HTML4差異(4) 全新的表單設計 實例:http://www.w3schools.com/tags/att_input_type.asp

Form field types on mobile

嵌入音訊和視頻檔,例如新的 <audio> 和 <video> 標記 HTML5與HTML4差異(5) 嵌入音訊和視頻檔,例如新的 <audio> 和 <video> 標記 實例:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video

逐漸改用<canvas>標籤,取代flash HTML5與HTML4差異(6) 逐漸改用<canvas>標籤,取代flash http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas 實例:8 Crazy Animations With WebGL and HTML5 Canvas (可在行動裝置測試) http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas

HTML5與HTML4差異(7) CSS顯示效果 (漸層) (透明度)

2. 靜態網頁與動態網頁 網頁的資料內容與顯示方式 瀏覽網站時 伺服器傳送給用戶端的網頁是『純文字的 HTML 文件』, HTML 標準定義了文字與排版的效果。 瀏覽器收到網頁後,解析其中的 HTML 標籤,將網頁依 HTML 標籤指示的效果顯示出來。 例如文字、圖片或多媒體資料 隨著網際網路的應用日漸廣泛,靜態的效果已無法滿足人們的需求,希望網頁的效果更豐富多樣。 讓網頁依照不同狀況,顯示不同的訊息 網站可以和使用者產生互動…

動態網頁技術 用戶端動態網頁技術 伺服器端動態網頁技術 例如JavaScript 在瀏覽器上執行程式,使用者可立即得到程式執行結果,並減輕伺服器的負擔 伺服器端動態網頁技術 例如:ASP.NET、PHP、JSP 由伺服器執行程式,產生不同內容的網頁,再傳送給瀏覽器 程式設計的彈性相當大,還可以搭配資料庫系統,設計出複雜的應用

3. 關於本課程 課程內容: 開發環境 以HTML5為主 HTML、CSS搭配JavaScript JavaScript 的函式庫:JQuery 以JQuery為基礎的跨平台手機應用函式庫:JQuery Mobile 開發環境 以「記事本」熟悉網頁標籤 可自行使用Dreamweaver CS6等軟體,進行網頁編輯

參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。 Chap 04: HTML入門 網路資源 http://slides.html5rocks.com/#timeline-slide http://www.dotblogs.com.tw/yuan0716/archive/2011/11/10/html5newtag.aspx http://w3design.pixnet.net/blog/post/14352301-10個HTML5和HTML4之間的不同