Class(2017-1)練習3

五、【最新消息】區塊

5-1 利用BS加入【媒體對齊Media alignment】元件

5-1-1 利用BS加入HTML 結構

BS:【元件Components】>【媒體物件Media object】>【媒體對齊Media alignment】

 在【.container】之下加入【id=”newsList”】

<!--  最新消息  ===================================================================== -->
<div class="container" id="newsList">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass01.png" alt="視覺設計">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">1.視覺設計</h4>
<p>【來巨匠學視覺設計 實現你的創業理想!】從跨界創意視覺設計開始,打穩美學基礎。除了獲得軟體操作的基本概念,還能獲得核心工作能力及絕佳的應用技能。</p>
<p>美工平面套課課程的設計,將以設計的角度出發,運用Illustrator插畫工具的功能,深入說明點線面應用技巧,帶領您將虛擬想像,化為現實影像。結合Photoshop 中的強大影像處理技巧功能,您不但能將插畫作品,搭配相片作品進行影像創作,設計出更精緻的視覺影像。</p>
<p>最後,要將影像和插畫成品,應用在手冊、廣告文宣等刋物,透過Indesign 的強大編排功能,讓文字成為影像設計的一部份,為設計作品加分。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass02.png" alt="手機APP設計">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">2.手機APP設計</h4>
<p>【化手機為商機 成為首屈一指的APP開發者!】由淺入深逐步教你元件應用、畫面處理、檔案與資料庫建構。包含智慧手錶、智慧眼鏡等等穿戴式雲端APP都教你開發,征服IPHONE及Android系統市場成為人生勝利組!</p>
<p>隨著智慧型手機的普及,APP已經變成我們生活中不可缺的一部份。但當你還在當低頭族的時候,已經有許多人已經抬起頭,把「手機」轉換成「商機」,開發出許多APP供人下載。究竟行動APP還發展出哪些商機和可能性呢,請看看我們的影片。</p>
<p>獨立開發設計IOS應用程式與遊戲,能夠結合定位和導航等Google地圖運用,處理相機、聲音、影像等多媒體程式,以及操控感應器、閃光燈、陀螺儀等硬體設備,並熟練操作XML和JSON等常用網路檔案格式。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass03.png" alt="程式/資料庫">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">3.程式/資料庫</h4>
<p>【讓玩遊戲、逛網拍等日常行為 成為你的生財利器!】電腦的世界沒有距離,程式語言才是世界共通的語言!雲端資料庫程式設計課程,就是帶你擴充電腦領域的一把鑰匙!從程式語言到雲端資料庫開發,完整學習如何和電腦溝通,教你成為下個愛因斯坦。</p>
<p>電腦的世界沒有距離,打開你的筆記型電腦,輕鬆按下一個ENTER指令它就能幫你處理龐大的數據,動動滑鼠就可以把你連接到地球的另一端,甚至還足以打敗世界棋王!這麼多的指令,我們又是怎麼跟他溝通呢?靠的就是程式語言!對一般人來說,程式語言就像一部天書。</p>
<p>平常使用電腦不就是打打GAME、用用Word、Excel,卻很少去了解C+、JAVA,到底這些複雜的程式語言在說什麼呢? 哈哈它認識我、我不認識它...不過現在有很多學習方法可以讓你學會跟程式語言溝通哦...快來看看 !</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass04.png" alt="建築室內設計">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">4.建築室內設計</h4>
<p>【下個安藤忠雄就是你 巨匠室設課程造就你的不凡人生!】巨匠電腦專為式室內與建築規畫一連串的室內建築設計課程,由八位擁有國際認證專業實務技能的老師帶領你打好根基,協助你考取專業國際證照,一步步朝向實踐擁有甜蜜家園的未來夢想前進。</p>
<p>「用心打造的空間會帶來幸福」!巨匠電腦規劃了一連串室內建築設計類課程,由多位擁有國際認可、專業實務技能的老師,帶領你打好地基,一步步朝向實踐擁有甜蜜家園的未來夢想前進。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass05.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">5.3D多媒體動畫</h4>
<p>【【誰說宅不能宅出經濟 玩遊戲、看動畫也能賺大錢!】巨匠電腦的多媒體動畫設計師課程,從基礎手繪、腳色設計、場景腳色的空間透視力等等,由淺入深一條龍式的培訓帶您踏入改造自己的第一步,全方位的動畫遊戲高手與企業搶手人才非你莫屬!</p>
<p>愛打電動的你,非常了解人生就是不斷的升等、打怪,勤練功、讓熱愛變成工作,生活的關卡會更精彩喔!</p>
<p>3D遊戲往往能讓我們有身歷其境的感覺!其中最大功臣就是場景的建置,藉由場景的建置可以讓遊戲效果更加乘,它和人物設計可以說是同等重要!藉由3ds Max遊戲場景設計的課程讓學員逐步完成各種風格的場景建置,更加貼近業界需求,計出自己的遊戲不是夢想!</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass06.png" alt="影視特效">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">6.影視特效</h4>
<p>【巨匠影視特效課程 讓夢想不再是紙上談兵!】巨匠電腦專為影視特效設計規劃一系列包含maya動畫特效設計、跨媒體影音特效剪輯、Autodesk多媒體國際認證等專業課程。同時透過認證讓大家見識你的能力,大大提升你提案、求職的成功率,讓你更容易找到一展長才的舞台。</p>
<p>還記得小時候,總是在塗鴉本上「華麗的冒險」?長大後現實的壓力,讓你忘記了這樣的感動。不過,誰說埋著頭塗鴉的小孩,不能變成名揚國際的動畫師呢?別放棄你的天分與夢想,未來就掌握在自己手中。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass07.png" alt="工業設計">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">7.工業設計</h4>
<p>【把夢想用盡全力拉出夢中 將創意實現在生活中!】讓想像力變成你的超能力!巨匠電腦的工業設計課程透過Pro/E這項軟體使用技能教你如何將科技導入生活中,賦予傳統產品新的創造力與活力,由多位專業講師與你攜手建構虛擬與現實間的夢想彩虹橋。</p>
<p>哆啦A夢不是夢,如何實現創意呢?掃地機器人已經廣泛運用在我們生活之中;萬能製造機也有了3D列印機來實現了。工業設計,就是一門將科技導入生活的藝術,一起來看看如何設計出風格產品,踏入這個整合虛擬與現實的有趣世界吧。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass08.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">8.網路管理</h4>
<p>【跟巨匠電腦一起擘劃你的IT職涯 管理網路雲端你也很可以!】巨匠電腦規劃整套完整的雲端網路管理工程課程,包含MCSA網路管理國際認證班、MCSE網路伺服器國際認證班、CCNA網路工程師國際認證班等國際認證課程,安排專業資深的IT巨匠名師由淺到深,一步步帶領你學習雲端網路工程相關專業技能。</p>
<p>嘔心瀝血的大作、客戶的企劃、秘密資料,過去都散落在各個冰冷的硬碟裡,你總是擔心它不小心掛掉。資訊匯流的時代,各產業紛紛開始將數位內容、電子商務等轉移到雲端。而「雲端網路網路工程師」就像這時代的英雄,整合。巨匠完整的課程,就算從零開始也沒關係,基本認識、實機環境到模擬實戰,建置出企業的網路基礎建設。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass09.png" alt="認證輔導">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">9.認證輔導</h4>
<p>【用夢想創業 完成你的人生目標!】你有想法 我有辦法!巨匠電腦幫你把創意變成現實,想開店賺進大把鈔票不再是夢想。</p>
<p>MOS國際認證 』是微軟,在 2000/08/14 正式向國人推廌的國際性專業認證,而且在國內是屬於中文化考試,您只要通過微軟的認證考試,微軟公司即頒發國際性專業認證的證書,證明了個人對於微軟公司的產品,具有充份的專業知識及能力</p>
<p>有志於從事該項職務的人員掌握學習的方向,對求才企業也提供了更快速、更客觀、更簡化的人才甄選程序。</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/listClass10.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">10.電腦資訊技能</h4>
<p>【豐富你的求職技能 成為企業搶手人才!】從電腦入門到office軟體操作應用,讓你學出競爭力成為最夯的職場達人,在職場上無往不利。</p>
<p>舉凡公司行號之行政、行銷、人事、秘書、財會、業務等部門的專業人員,都離不開Office系列軟體的使用,尤其是越有規模的大型企業,對此需求也相對的提高,因此對於社會新鮮人或是尋求職場第二春的轉職人員來說,進修研習Office系列軟體的應用已經是刻不容緩的基本課題。</p>
<p>職場上每天需要處理的辦公事務這麼多,好用的工具你會不會用?建立圖表、整理數據、製作商業文件、客戶資料的建檔、製作報表…這些煩人的瑣事,總是占據你太多的工作時間?善用Office讓你快速有效率高品質的完成工作!</p>
</div>
</div>
</div>

/* 最新消息 newsList =========================================================*/
#newsList img{ width: 200px; height: auto;}
#newsList .media-heading { font-size: 1.2em; color: #900037;}
#newsList p{ text-indent: 2em; color: #1d046d;}
#newsList .media { border-bottom: 1px solid #795548;}

 

5-1-2   jQuery第一階段:加入輪播

學習目標:JQ中 clone()方法jQ prependTo() 方法JS計時事件

// 最新消息
function newsScroll() {
// 先找出最後一個 media ,並宣告變數 方便程式簡化
var $newsLast = $('#newsList div.media:last-child');
//將最後一個media > 複製一個 > 隱藏 > 加入至第一個.media > 淡出
$newsLast.clone().hide().prependTo('#newsList').fadeIn(1000, function() {
setTimeout(newsScroll, 1000);
});
$newsLast.remove();
}
//啟動輪播
setTimeout(newsScroll, 1000);

5-1-3   jQuery第二階段:讓輪播更滑順

訊息是突然就跳插進去的,感覺不是那麼滑順。這是因新項目會把整個#newsList 往下擠,且被附加的項目一開始又是隱藏的,所以才會看到突然跳插的畫面。

學習目標:JQ中對物件大小定義(參考連結)、jQuery animate() 方法jQuery 效果-動畫

#newsList { position:relative; }
#news{ overflow: hidden;}

 

function newsScroll() {
// 先找出最後一個 media ,並宣告變數 方便程式簡化
var $newsLast = $('#newsList .media:last-child');
// 先取得 #newsList 最後.media高度
var $scrollHeight = $newsLast.outerHeight(true);
// alert($scrollHeight);
// 先把 #newsList 往下移
$('#newsList').animate({ top: $scrollHeight + 'px' }, 1000, function () {
//將最後一個media > 複製一個 > 隱藏 > 加入至第一個.media > 淡出
$newsLast.clone().hide().prependTo('#newsList').fadeIn(1000, function () {
setTimeout(newsScroll, 1000);
});
// 馬上把 #news 移到 top 等於 0 的位置
$('#newsList').css('top', 0);
// 把$newsLast 移除掉
$newsLast.remove();
});
}
// 啟動輪播計時器
setTimeout(newsScroll, 1000);

 

5-2  利用BS加入【對話方塊】元件

Stet1:BS:【JavaScript】>【互動視窗Modals】

<!-- Modal  listclass1-->
<div class="modal fade" id="listclass1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class01.mp4" type="video/mp4">
</video>
</div>
<h3>1視覺設計</h3>
<ul class="text-primary">
<li>跨界創意視覺設計</li>
<li>響應式跨平台網頁設計</li>
<li>Painter原畫美術設計</li>
<li>行動裝置UI設計</li>
</ul>
<p>【來巨匠學視覺設計 實現你的創業理想!】從跨界創意視覺設計開始,打穩美學基礎。除了獲得軟體操作的基本概念,還能獲得核心工作能力及絕佳的應用技能。</p>
<p>美工平面套課課程的設計,將以設計的角度出發,運用Illustrator插畫工具的功能,深入說明點線面應用技巧,帶領您將虛擬想像,化為現實影像。結合Photoshop 中的強大影像處理技巧功能,您不但能將插畫作品,搭配相片作品進行影像創作,設計出更精緻的視覺影像。</p>
<p>最後,要將影像和插畫成品,應用在手冊、廣告文宣等刋物,透過Indesign 的強大編排功能,讓文字成為影像設計的一部份,為設計作品加分。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
<!-- Modal  listclass2-->
<div class="modal fade" id="listclass2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">2.手機APP設計</h4>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class02.mp4" type="video/mp4">
</video>
</div>
<h3>2.手機APP設計</h3>
<ul class="text-primary">
<li>iOS APP企業實務應用開發</li>
<li>Android穿戴式雲端應用開發</li>
<li>行動裝置UI視覺設計</li>
<li>iOS APP程式實務應用</li>
</ul>
<p>【化手機為商機 成為首屈一指的APP開發者!】由淺入深逐步教你元件應用、畫面處理、檔案與資料庫建構。包含智慧手錶、智慧眼鏡等等穿戴式雲端APP都教你開發,征服IPHONE及Android系統市場成為人生勝利組!</p>
<p>隨著智慧型手機的普及,APP已經變成我們生活中不可缺的一部份。但當你還在當低頭族的時候,已經有許多人已經抬起頭,把「手機」轉換成「商機」,開發出許多APP供人下載。究竟行動APP還發展出哪些商機和可能性呢,請看看我們的影片。</p>
<p>獨立開發設計IOS應用程式與遊戲,能夠結合定位和導航等Google地圖運用,處理相機、聲音、影像等多媒體程式,以及操控感應器、閃光燈、陀螺儀等硬體設備,並熟練操作XML和JSON等常用網路檔案格式。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
<!-- Modal  listclass3-->
<div class="modal fade" id="listclass3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">2.手機APP設計</h4>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class03.mp4" type="video/mp4">
</video>
</div>
<h3>3.程式/資料庫</h3>
<ul class="text-primary">
<li>Java OCP JP程式設計認證</li>
<li>智慧物聯網程式設計</li>
<li>程式設計先修</li>
</ul>
<p>【讓玩遊戲、逛網拍等日常行為 成為你的生財利器!】電腦的世界沒有距離,程式語言才是世界共通的語言!雲端資料庫程式設計課程,就是帶你擴充電腦領域的一把鑰匙!從程式語言到雲端資料庫開發,完整學習如何和電腦溝通,教你成為下個愛因斯坦。</p>
<p>電腦的世界沒有距離,打開你的筆記型電腦,輕鬆按下一個ENTER指令它就能幫你處理龐大的數據,動動滑鼠就可以把你連接到地球的另一端,甚至還足以打敗世界棋王!這麼多的指令,我們又是怎麼跟他溝通呢?靠的就是程式語言!對一般人來說,程式語言就像一部天書。</p>
<p>平常使用電腦不就是打打GAME、用用Word、Excel,卻很少去了解C+、JAVA,到底這些複雜的程式語言在說什麼呢? 哈哈它認識我、我不認識它...不過現在有很多學習方法可以讓你學會跟程式語言溝通哦...快來看看 !</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>

Stet2:欲加入【Modals】元件

 data-toggle="modal" data-target="#listclass1"