[DAY-086]網頁乙級第四題帶解二

年節前最後一堂課，今天主講第四題的前端選單及新聞消息的部份，老師表示學到現在，很多的能應該我們自己做，他負責比較有難度的講解就可以了，所以後台的一些管理功能就當成作業讓大家練習，順便打個分數，第四題的部份估計還要一天半才能講完，因為購物及登入驗證的地方有點難度要克服，當然，如果題目沒提到就不做的話，這兩部份也是有快速的做法可以跳過。

前端類別清單及商品清單

最新消息跑馬燈，及最新消息列表

我自己則是利用時間研究我的學科考題系統，先把原先的資料表拆成題目和選項兩張表，接下來希望利用春節時間可以做出一個類似士商的線上測驗系統，結訓前可以加入會員系統及歷程查詢的功能。

[DAY-085]網頁乙級術科第三題結束及第四題帶解一

上周的第三題把訂單部份講得差不多，今天主要是處理一下劃位時的底圖顯示判斷，然後就進入到第四題的部份，這樣有望在春節前把第四題講完80%左右。

第四題後台畫面一

第四題後台畫面一

我則是打算小小休息一下，整理了一下題目的動作數及重點，等春節時再來規劃比較簡化有效率的解題法，下午時間我開始在設計乙級學科的線上測驗系統，因為我發現老師提供的兩個線上系統都有一些問題存在，所以乾脆自己來寫一個自己覺得好用的系統出來，也算是把這半年的所學做一個實例應用。

[網頁乙級]試題計分分析

這是一位同學之前做的統計，然後我今天再做一次分析，

原則上這己經扣除了第一項動作的七十分，及版型要求的分數，因為第一項動作是建置作業環境，不應該出錯，出錯了後面也做不下去，而版型是題目素材本身有提供的，所以統計後的結果如下，以60分為及格分數來算，這張表的意義在提供大家研究如果時間來不及時，可以放棄那些動不做，最多可以放棄8個動作：

總分愈少的，難度愈高，所以第三題是最難的，第三題前台的部份需要製作動畫轉場效果，而訂單的部份要求有連動的選擇功能，這兩塊是比較花時間和難度高的，後台要求變換排序的功能也有點難度；

而第四題主要的難度在選好商品後的資料傳遞，頁面有來回轉換的作業時，資料如何保存是個問題，這部份要善用session才會比較好做，題目有些地方交代不清是一個麻煩的地方，比如庫存要不要做檢查，需不需要去扣除庫存量，這部份題目沒有說，要做又花時間，需要配合當時作答的狀況來判斷需不需要多做這些功能和檢查。

[DAY-084]Joomla結構講解與外掛套用

今天繼續Joomla的課程，比較多是集中在遠端虛擬主機的安裝上，及一些外掛模組的使用，不過老師今天沒有講到我比較希望聽到的修改即有模組的部份，只有簡提的提一下怎麼新增一個自定的HTML區塊而已，

CPANEL講解

不同的主機業者提供不同程度的應用軟體

Joomla 結構

最後老師給我們一個他自己實務上幫人架站用的模板，這個模板己經套好一些比較實用的外掛及電商模組，只要前台修改一下，就可以拿來製作各種中小企業需要的網站。

[DAY-083]網頁乙級學科講解與網路基礎知識

今天繼續講解學科題目的內容，一樣是簡報加VM操作來加深同學的印象，不過我大部份時間都在做第四題．

下課前幾乎把第四題做完了，剩下後台的訂單管理功能而已，這進度比預期的快一些，這樣春節期間我就有時間複習學科及做個線上考題系統了．

[DAY-082]Joomla安裝與CMS實習

上午一兩節賴了個床，晚點到班上課，正好講到安裝Joomla的部份，CMS的安裝使用我是很熟了，所以自己下載安裝程式，很快就裝好了，然後沒想到老師一個上午光安裝就教了五次，分別是裸裝和含套件的安裝，本地和遠端及國外虛擬主機，感覺象是把大家當成社區老人班在教一樣，所以大多時間我都在練習第四題．

CMS課程大綱

CPANEL後台介紹

後台設定

下午的時間在講解Joomla的後台操作，不過只能說是介紹而已，實做的部份老師提供了一些別人改好的整套joomla模版，安裝一下就可以做為商業使用，也有講到佈景的匯入和改變，最後介紹了新增文章的功能，讓大家練習一下新增文章的操作．

Joomla 後台介紹

joomla資料夾結構

商業套件實習

套件的CSS外觀

[DAY-081]UI/UX講解續 / 廠商面談

上午時間繼續上周的UI/UX講解，今天的內容大多是UI/UX實做面的議題，比如需求訪談的做法，wireframe/mockup/prototype的差別，A/B測試的實做方式等等，覺得收獲還不少，至少也搞清楚一些過去比較容易混淆的觀念

需求訪談

評量原則

wireframe/mockup/prototype的差別

下午導師這邊安排了廠商來做企業介紹及面談，看起來是家有活力的新創公司，主力在於把傳統的紡織印刷結合軟體及網路，擴大成為可以客製化及小眾化的服務，滿有趣的，有六位同學參與面談，感覺還不錯。

[DAY-080]網頁乙級術科帶解第三題之五

今天主要帶解的部份是訂票及劃位，不過我己經在做第四題了，走過第三題，第四題變得很親民，只是題目描述依然不清不楚，自由發揮空間頗大

第四題後台

第四題送分題

不過一邊做第四題，一邊聽老師帶解第三題的過程中，我發現我第三題的訂票有做的不太好的地方，雖然不會影響考試的成績，不過基於保險起見，找個時間修正一下，順便把程式碼再簡化一些，確保能在時間內完成比較重要

利用CSS來繪製三角形區塊

這也是在解第三題時產生的需求，因為原始素材中少了許多圖檔，包括左右箭頭，雖然老師是直接開PS來直接畫一個，不過我想了一下，似乎直接用CSS來快速產生一個三角形會更快一些，利用的原理是block邊框的特性，css的邊框預設是會以45度角的方式來連接，這個設計的特色在於我們可以透過設定邊框的顏色就快速產生一個按鈕的區塊出來，省掉不少美術的工作，因此很多新的網頁設計都會利用這個特性來產生簡易的幾何圖形，取代傳統美術需要製作一堆icon的工作，

我直接附上css的原始碼及變化過程的截圖，就不再多做文字解釋了，相信看完就能明白

原始block的狀態，正常使用我們設定寬高

一般我們會直接加上四邊同色的邊框

如果我們加上較粗的邊框並給予四邊不同的顏色，很明顯的可以看出四邊交接處是以45度角的方式接合

把邊框加更粗的話,我們可以看到四個梯形出現了,但是中間的方框是我們不想要的

把block的長寬設為0後,我們看到四個顏色的等邊三角形接合在一起,而邊框的寬度成了等邊三角形的高

我們把其中三邊的顏色設為透明色的話，就可以看到一個三角形出現了。

調整另外三邊的寬度，可以產生各種形狀的三角形，因為這個三角形其實是一個block的區塊，所以可以拿來加上行為比如超連結或click等等

除了三角形，利用border-radius屬性還可以產生圓形，更可以組合多個block來產生各種幾何圖形，更多變化，大家可以自己再去研究。

用console.log()來取代alert()

最近在解乙級第三題時，使用到很多的JS，先前老師只教了用alert()來做除錯的協助，但是alert()有個問題是會暫時中斷程式的執行，然後還要手動去點確定後才能繼續下一步，所以後來在找其他資料時發現很多前輩的範例程式碼中都會使用console.log()來協助除錯，訊息會直接在瀏灠器的除錯終端視窗中顯示出來，不會打斷程式的執行，所以後來就都改用console.log()了,使用方式也很簡單，把要顯示的訊息放在括號中就可以了。