CSS網頁佈局與Bootstrap 多媒體設計.

Slides:



Advertisements
Similar presentations
一、老师申请题目,以下指导老 师操作。 1. 登录教务系统 web 端. 2. 点击 “ 毕业设计 ” 工具栏下拉菜单中的 “ 论文 _ 教师申请题目 ”
Advertisements

商管群科科主任 盧錦春 年 3 月份初階建置、 4 月份進階建置、 5 月份試賣與對外營業。
經濟學報告 小組成員 一年忠班周士堯. 林彥儒. 紀丞祐. 葉利德. 討論問題 1. 上學為什麼要穿制服 ?? 2. 為什麼國片不賣作 ?? 3 網路就可以看到的小說為甚麼還有人會去 買實體書 ??
16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小
新約研讀 彼得前書複習 讀經組
大南海文化園區 (國立歷史博物館 -初期計畫) 簡介
我的家乡 南通 ….
Chapter 6 竞争与合作战略 成本领先战略 差异化战略 集中化战略 合作战略 竞争优势分析.
世界经济的“全球化”.
从“阿拉伯之春” 看新媒体的政治传播能力.
20 使用Dreamweaver构建HTML结构
網頁設計入門 與 Dreamweaver 使用簡介
第八章 网络课程的设计与开发.
Web程序设计基础 太原理工大学 计算机科学与技术学院 林福平 求实创新
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
第 九 章 安神剂.
“深入推进依法行政加快建设法治政府” -《法治政府建设实施纲要》解读
大学计算机.
比特云 后台操作手册.
第六节 可降阶的二阶微分方程 一、 型的微分方程 二、 型的微分方程 三、 型的微分方程.
第十一章 理气剂.
看图找关系.
第三节 固精缩尿止带药 1.特点:酸涩收敛,主归肾、膀胱经。 2.功效:固精、缩尿、止带。兼补肾。
互联网时代班主任的挑战 万玮 2014年9月20日.
五、学习方法及应考对策 (一)学习方法 1.保证复习时间,吃透教材:上课之前应该对课程相关内容进行预习,把不理解的问题记录下来,带着问题听课。考试之前务必把课本看3遍以上,第一遍一定要精读,最好能做笔记,边读边记,不要快,要记牢。第二、三遍可以查缺补漏型的看,通过做题目看书,加深课本印象。 2.加强概念、理论性内容的重复记忆:概念、理论性内容一般比较抽象,所以在理解的基础上一定要重复记忆,在接受辅导之后,再加以重点记忆,以便及时巩固所学内容,切忌走马观花似的复习,既浪费时间,效果也不好。
不動產市場 分析與預測 第四章 不動產市場分析與研究.
Bootstrap 3 報告人:Sean Huang 日期:2014/12/11.
14 Spry工具集與資料集的使用 認識 Spry 關於版面配置 Spry 工具集 Spry 選單列 Spry 標籤面板
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第 3 章 網頁的基本設定與預覽.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
鄉村尋根-農具篇.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
传播GIS知识 | 交流GIS经验 地图切片简介 LZUGIS 分享GIS价值 | 专注GIS发展.
CSS 钟晖云 QQ:
NAMO網頁製作教學簡報 講師:李惠茹.
Bootstrap框架 ——Bootstrap 入门.
貨幣需求與貨幣市場的均衡.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
UI 软件 设计 页面布局(二).
前端技术开发 高莺.
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
第4章 CSS基础 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
Web Programming 網際網路程式設計
第三章 HTML相关技术基础知识 纵观各种动态页面开发技术,无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术,包括HTML、
计算机网络与网页制作 Chapter 11:用CSS作页面布局
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
UI 软件 设计 页面布局(一).
《网页设计与制作》.
武汉纺织大学传媒学院 cm.wtu.edu.cn
商業行為成立的要件 動動腦 Q 請試著判斷下列何者為商業行為? 請試著判斷下列何者為商業行為?.
藝術大師-達利.
网页设计与制作 Jiangxi Engineering Vocational College 信息工程系 徐卫红.
交際障礙分組系統 大家好,關於我們的深碗計畫,交際障礙分組系統,是我們的主題。.
武汉纺织大学传媒学院 cm.wtu.edu.cn
從HTML表格到CSS 靜宜大學 資管系 楊子青.
“修身成材” 班级干部培训班 黑龙江大学党委学工部.
Dreamweaver 進階網頁製作 B 許天彰.
網頁程式設計 袁福良 B B.
網路商店裝修之二 CSS樣式編輯.
6.1 動畫檔案的格式 6.2 建立合適的動畫元素.
第5章 Div+CSS布局技术 经济管理学院.
W3C标准网页制作 主讲教师:张 涛.
3-3 随机误差的正态分布 一、 频率分布 在相同条件下对某样品中镍的质量分数(%)进行重复测定,得到90个测定值如下:
106年免試入學第一次模擬 選填重要日程表說明 1.106年1月10日中午12時~106年1月16日中午12時完成第一次模擬
Web前端开发 第7章:初识CSS3 阮晓龙 / 河南中医药大学管理科学与工程学科
组件 组件是构成图形用户界面的各种元素。通过对不同事件的响应来完成和用户的交互或组件之间的交互。组件分为容器(Container)类和非容器类组件两大类。 控制组件有Button按钮 、Checkbox复选矿、 Choice下拉列表、Label标签、List列表、textcomponent文本(TextField文本域.
Presentation transcript:

CSS網頁佈局與Bootstrap 多媒體設計

BootStrap Bootstrap,來自 Twitter,是目前最受歡迎的前 端框架。Bootstrap 是基於 HTML、CSS、 JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更 加快捷。

BootStrap Grid System(網格系統) Table(表格) Forms(表單) Buttons(按鈕) Images(圖片)

Grid System Grid System通過一系列的行(column)與列(row) 的組合來創建網頁佈局,可以將內容放進設計好 的佈局內。 Grid system的Column將螢幕畫面分割為12格, 可以通過.col-xs-*、col-md-*、col-lg-*來配合 設備畫面大小來縮放畫面。

將畫面分成12等分

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 行為 總是水平排列 開始堆疊在一起,對應使用者需求做變化 類別名稱 .col-xs-* .col-sm-* .col-md-* .col-lg-* Column數量 12 Column最大值 自動 ~62px ~81px ~97px 偏移 是 列排序

BootStap CDN <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Grid System的工作原理 Row必須包含在.container(固定寬度)或 是.container-fluid (100%寬度)中,以便獲 得合適的排列(alignment)和內邊距(padding)。 使用column來創建水平排版。 內容要放在column內。

堆疊到水平排版 <div class=“row”> <div class=“col-md-1”> :

手機、平板、桌面

多餘的列(column)將另起一行排列

列偏移

嵌入式row

列排序 通过使用 .col-md-push-* 和 .col-md-pull-* 类 就可以很容易的改变(column)的順序

練習6:排版 請排出下面範例的佈局