[DAY-038]ImageText ~ Portlolio with Filtering

今天老師講解了Image Text ~ Portlolio whit Filtering,十一個範例中因為有些是之前已經說過了,所以只是帶了一下,重點放在Full Page Image、Meet the Team和Portolio Gallery上,因為這三個比較實用.

圖片佔位器

最後在講解Portfolio Gallery時因為時間來不及,老師要大家把這個項目的變化當成作業回家做,主要是希望套上Tap Gallery的點擊功能,點擊作品小圖可以在下方展現大圖及更多的說明.

 




[DAY-033]modal和light-box

今天除了把上周最後的輪播再說一次,又多教了modal和light-box兩種效果,modal就是彈出視窗,light-box就是燈箱效果,是滿常見的應用.

燈箱效果

老師的教學算是講得滿詳細的,幾乎把每個標籤的效用及修改方式都說了一輪,所以老師也說,這樣教是教不完的,他只會把常用的說一遍,其他的效果就要大家自己找時間去研究學習了.

彈出視窗

輪播效果




[DAY-028]前端網頁動態-CSS進階 / JS初探 / 前端技術整合

前兩周的課程大多是針對單一技術在做細部的說明,今天老師則是開始以W3Cschool的內容為教材在做整合性的講解,同時也開始帶到了Javascript的內容;老師預告未來兩三周的教學大綱如下:

主軸:HTML5+CSS3+JAVASCRIPT

採網頁常使之”元件”為實習(注意要看懂語法為主)
1.image圖片的呈現技巧
 ->學習以image為主的呈現語法
2.Menu選單-以Nav選單為主的呈現
3.Form表單-以表單為主的呈現手法
4.表格為主的呈現
5.其他常用項目

利用W3Cschool的內容來講解CSS的應用

利用W3Cschool的TRY IT功能線上實作

利用線上範例再到DW中進行修改,這邊老師講解了媒體查詢的使用方式,可以用來因應各式不同的螢幕大小

這是一個圖象牆的按鈕切換功能,老師利用這個範例來解說JavaScript的語法及套用方式

這是一個在圖像上做Overlay功能的範例,老師用來教大家如何進階的去做修改成自己需要的內容

下課前老師教大家如何用10分鐘快速做一個Banner輪播功能出來,直接套用範例並且快速修改成自己需要的形式

這兩周的課程內容都滿快速的,老師也提醒大家要跟上,因為網頁製作的東西真的很多,整合上也很多細節要注意,但課程的時間很有限,所以大家除了上課要集中精神聽之外,回家也多花時間自己練習和涉獵更多的內容.



[DAY-023]CSS講解與RWD及BOOTSTRAP的關係

今天主要的教學內容是CSS,對我來說是有點悶的內容,因為基本的CSS我已經算熟了,不過老師講解到BOOTSTRAP的CSS操作時我還是有認真的聽一下,上午半天的時間都在差點昏睡的狀況下渡過,然後一直在追我的椅子的送貨進度,快中午時才收到PCHOME客服發來的道歉回答,說會補100元現金積點給我,離下訂時間已經超過100小時了.

想學對岸玩活動促銷,卻掌握不好物流,搞得24小時到貨過了100小時還沒到貨,賠再多現金積點也挽回不了消費者的信任

下午我一邊聽老師逐個講解CSS的語法,一邊開始做PHP的登入系統作業,大概一個小時就把主要的功能都做完了,剩下的是畫面調整得好看一點,打算回家再做,

下課時有同學在問老師CSS和BOOTSTRAP的關係,然後老師又帶到CMS的東西,一問一答之下,變得有點不可收拾,不過同學好學是好事,半年下來如果真的能建立良好的技術基礎也是很值得的.




[DAY-018]前端動態技術-內容的編輯與頁腳的處理/ HTML標籤解說

因為有點小感冒,今天一天頭都暈暈的,再加上外接硬碟不是很穩定,搞到軟體掛了不能用,一怒之下把老師建議的外接作業環境都搬到本機上作業,課程內容主要是接續上周的RWD及BOOTSTRAP雙開的網頁製作教學,同時比較兩種製作方式的差異,今天有比較多的內容是在講述CSS的內容,不過這部份我還算熟,雖然沒有特別去聽,但也還跟得上進度,只是一直很想睡而已,比較有收獲的地方主要是一些老師提到的業界實務的變通方式或處理,比如垂直置或DIV的排列美觀問題.

下午結束了網頁的實習內容後,老師開始講解HTML5的一些標籤特性,這部份對我來說也是有點枯橾,因為七成的標籤我都可以直接使用,倒是標籤的屬性我一直沒有去深入了解,這段期間應該要來好好的摸索一下;中間有提到canvas的時候,老師順帶提了一下adobe animator,也就是flash,我順口就問了老師關於animator是否還在使用actionscript來做動畫還是改成javascript了?結果老師好象沒聽懂我的問題,說了一堆影格之類的東西,我只好自己上網找,大概的狀況就是雖然animator還是有支援actionscript,但是如果是FOR HTML5的製作或輸出,基本上是以js為主了,而且adobe似乎也自己定義了一些動畫製作的js函式庫來使用.

原本想製作一篇關於mysql聯表查詢的文章,但精神狀況不佳最後做罷.




[DAY-013]RWD與BOOTSTRAP初探

 

今天天延續上周的DW操作,介紹了瀏覽器預設白邊的處理,不過這部份我還是習慣直接丟個reset.css檔來處理,然後也介紹了float的設定,這是HTML4以後很常使用排版手法,最後介紹了上傳檔案到虛擬主機,不過因為職訓場的對外IP都是同一個,所以連線數超過限制,只有一半的人可以連線成功,到這邊算是開站教學告一段落了,老師也把每個步驟都說得很仔細.

測試網站上傳成果

上傳網頁到虛擬主機

下午的課老師先介紹了一下平常在接案的時候有一些和客戶往來的注意事項,像是雙方要交付的資料,文件等等的,然後就開始進入比較正式的網頁開發教學,這邊老師一次要我們開兩個站,一個用RWD的方式來製作,一個則是用BOOTSTRAP的樣板來製作,老師有特別解釋這樣做的原因是為了讓大家比較快了解到業界實際的趨勢,也讓大家知道這兩種主流的設計方式的差異,我覺得老師心臟也真的夠大才敢這樣教,不過我倒是收獲不少,有人帶著實際操作一次還是比看書慢慢摸索來得快多了.

vw單位的效果

RWD的設計方式介紹

格線系統介紹

BOOTSTRAP介紹

本日成果




[DAY-008]前端網頁動態設計-工作環境與DW基本操作

今天又有位同學退訓了,原因是前公司出更高的薪水請他回去上班,這招感覺不錯!

上午的課主要在重覆上周的工作環境介紹,老師一再的強調工具的重要性,網頁設計師不能只會網頁設計,所以一些基本的電腦知識,工作環境的維持等等都很重要,因此也介紹了商用虛擬主機的申請,老師自己則是提供了班上同學一人一組商用虛擬主機的帳號,可以使用到結訓為止,主要也是用來交作業用的;然後測試了一下虛擬空間的FTP帳號,順帶的也介紹了CPANEL的界面和使用.

虛擬主機的CPANEL界面

下午的課先是解釋了RWD設計的規範,然後也提到了BOOTSTRAP的設計風格,這些都是未來上課的重點,也是我參訓的期待,先前民間補習班開的職訓課教的東西都太基礎,離業界實用的做法差距太大了,去面試都被打搶,所以我對這800小時的課是很期待的,希望能真的學到新的東西.

BOOTSTRAP格線系統

不過老師在講解設計規範和原則時步調很快,但是到了實際操作卻有點慢,步驟細到我一直打哈欠,不過對沒接觸過的同學來說似乎還是有點跟不上,最後有帶到CSS的設定,並且看到區塊的差異出來,下周應該重點在版型的設計上吧.

說明DOM的對應關係及DW基本操作

今日的成果,基本的CSS區塊設定

今天自己的研究就是解決了課表上一周下一周的換頁功能,然後想做欄位統計的查詢時遇到問題,主要是資料表的設計方式不適合,但是打算再找找資料看能不能硬幹.

線上課表的進度是完成上一周下一周的查詢

 




[DAY-003]前端網頁技術概說 / 環境建立 / 工具介紹

上課第三天,已經開始有點學生的態度出來了,但是作息還要再調整一下,玩魔獸的時間要縮減了,不然早上七點起床真的很難受.

今天上課的林金露老師是職訓班的名師,有位同學說在別的課有上過,評價還不錯,上午的課主要在介紹林老師自己開發的一套工具,可以放在隨身碟上,裏頭都是免安裝的軟體,可以隨處使用工具,所以老師也建議我們自己準備一顆外接硬碟來使用.

下午講解了一下和日後上課有關的一些作業習慣,包括了雲端空間的使用,日後繳交作業都是用雲端空間來交,然後上課筆記的做法,一些小工具的操作方式等等,最後有帶到使用DreamWeaver來開站的方式;然後介紹了虛擬主機的申請,這部份算是我需要的,因為我找免費好用的虛擬主機好一陣子了,剛好老師介紹的好象不錯用,所以很快就申請下來了,也測試了上傳網頁.