# JDX課程回顧 # 1、PS操作(05/11) <span style="color:red;">【課程主題】利用PSD進行網站規劃</span> ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)StatCounter分析</span> http://tips.zoego.tech/archives/514 ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)參考線製作</span> - 【檢視】>【新增參考線配置】 - 【檢視】>【新增參考線】 - 從尺規上拖曳加入 - 移動參考線 + 【shift】 :固定移動單位 - 利用矩型繪製 >【檢視】>【從形狀新增參考線】 PS新增參考線: http://tips.zoego.tech/archives/422 ill新增參考線: http://tips.zoego.tech/archives/441 ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(3)轉換為智慧型物件</span> 指令:利用【圖層】>【轉換為智慧型物件】 參考:[連結1](https://helpx.adobe.com/tw/photoshop/using/create-smart-objects.html)、[連結2](http://www.astralweb.com.tw/photoshop-modify-smart-object/) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(4)影像資產</span> 指令:【檔案】>【產生】>【影像資產】 參考:[連結1](https://helpx.adobe.com/tw/photoshop/using/generate-assets-layers.html)、[連結2](http://design.pixchoco.com/2015/03/photoshop-cc-image-assets.html) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(5)剪裁圖片</span> ![](https://i.imgur.com/7YQv49N.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(6)補充課題:</span> - Brige 批次圖片更名 - 利用線上工具壓縮圖片 例如:https://tinypng.com/ ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(7)Brackets 使用<span> Brackets是Adobe提供免費的網站設計工具,讓許多前端開發人員人喜愛,替代Dreamweaver。 http://tips.zoego.tech/archives/321 ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(8)Emmet 簡化輸入</span> 為了少打字少錯誤,並加快輸入效率,那麼Emmet則是很好用的工具,且Dreamweaver CC 2015已經內建囉!! http://tips.zoego.tech/archives/349 ![](http://tips.zoego.tech/wp-content/uploads/tools_emmet02.png) # 2、Web Font(05/16) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)Awesome運用</span> ![](http://tips.zoego.tech/wp-content/uploads/iconfont02.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)Flaticon 運用</span> 了解【:before】與【:after】應用技巧 # 3、CSS3運用(05/18) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)transition 過渡</span> [runoob說明連結](http://www.runoob.com/css3/css3-transitions.html) ![](https://i.imgur.com/Lb05Y69.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)animation</span> [runoob說明連結](http://www.runoob.com/css3/css3-animations.html) CSS3,創建動畫,它可以取代許多網頁動畫圖像,Flash動畫,和JAVAScripts ![](http://tips.zoego.tech/wp-content/uploads/jdx01-02.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(3)Flex運用</span> runoob連結:[連結1](http://www.runoob.com/css3/css3-flexbox.html)、[連結2](http://www.runoob.com/w3cnote/flex-grammar.html) [Flex CSS tools](http://the-echoplex.net/flexyboxes/) ### <h3 style="color:#b71c1c; line-height:1.1em">float問題</h3> ![](https://i.imgur.com/d5O2bKT.png) ### <h3 style="color:#b71c1c; line-height:1.1em">課程範例float改善</h3> ![](https://i.imgur.com/Y9AjLyE.png) ### <h3 style="color:#b71c1c; line-height:1.1em">Flex運用</h3> [Flex CSS tools](http://the-echoplex.net/flexyboxes/) ![](https://i.imgur.com/bbPUBh0.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(4)補充課題:Mark Man</span> [Mark Man](http://www.getmarkman.com/) ![](https://i.imgur.com/GWEwHMB.png) # 4、【data-*】運用(05/23) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)CSS中【:before】與【data-*】結合 </span> ### <h3 style="color:#b71c1c; line-height:1.1em">1.圖文結構</h3> ![](https://i.imgur.com/JO8V2No.png) ![](https://i.imgur.com/W3FaDn5.png) ### <h3 style="color:#b71c1c; line-height:1.1em">2.CSS美化重點</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01_data01.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)jQuery中【attr屬性】與【data-*】結合 </span> ### <h3 style="color:#b71c1c; line-height:1.1em">1.jQuery程式結構</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01_data04.png) ### <h3 style="color:#b71c1c; line-height:1.1em">2.jQuery 添加元素方法</h3> [本網連結](http://tips.zoego.tech/archives/541) ![](http://tips.zoego.tech/wp-content/uploads/jdx01_data05.png) ### <h3 style="color:#b71c1c; line-height:1.1em">3.jQuery DOM結構</h3> [本網連結](http://tips.zoego.tech/archives/313) ![](http://tips.zoego.tech/wp-content/uploads/jquery03.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(4)補充課題:PS批次處理 </span> [本網連結](http://tips.zoego.tech/archives/397) 修圖時候重覆動作,可利用Photoshop能將所有步驟「錄」起來,再以Photoshop的批次處理「播放」完成批次處理的工作。 S1:開啟【視窗】>【動作】面版 S2:利用【動作】儲存需要的步驟後, <p style="color:#b71c1c;">記得加上【轉存】為網頁用圖片,及【關閉】檔案,否則批次的檔案都得自行關閉</p> ![](http://tips.zoego.tech/wp-content/uploads/PS_Action03.png) S3:開始重覆執行上述動作,【開始】>【自動】>【批次處理】 # 5、外掛 plugins套用(05/25) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)CSS有趣圖形製作 </span> ### <h3 style="color:#b71c1c; line-height:1.1em">練習1:三角型向上</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01-08.png) ![](https://i.imgur.com/WpekzmN.png) ### <h3 style="color:#b71c1c; line-height:1.1em">練習2:心型加入</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01-09.png) ![](http://tips.zoego.tech/wp-content/uploads/heart01.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)外掛 plugins套用 </span> ### <h3 style="color:#b71c1c; line-height:1.1em">1.animate.css結合</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01-10.png) ### <h3 style="color:#b71c1c; line-height:1.1em">2.animate.css與wow.js結合</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01-11.png) ### <h3 style="color:#b71c1c; line-height:1.1em">3.Slick.js 讓製作網頁輪播的效果(Carousel)更輕鬆</h3> ![](http://tips.zoego.tech/wp-content/uploads/tools_slick02.png) ## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(4)補充課題:animate結合 </span> ### <h3 style="color:#b71c1c; line-height:1.1em">1.CSS【animation】與背景的結合</h3> 在第三堂課中,運用div在CSS中利用@keyframes置換背景圖片的方法,但此方法在firefox瀏覽器中無法利用背景換圖片 ![](http://tips.zoego.tech/wp-content/uploads/jdx01-02.png) ```htmlmixed <header></header> ``` ```css header{height: 560px; width: 100%; animation: banerMovie 10s infinite ; } @keyframes banerMovie{ 0%{background: url(images/banner01.jpg) no-repeat center center;background-size:cover; } 30%{background: url(images/banner02.jpg) no-repeat center center;background-size:cover; } 50%{background: url(images/banner03.jpg) no-repeat center center;background-size:cover;} 75%{background: url(images/banner04.jpg) no-repeat center center;background-size:cover; } 100%{background: url(images/banner01.jpg) no-repeat center center;background-size:cover; } } ``` ### <h3 style="color:#b71c1c; line-height:1.1em">2.在html加入圖片,利用animation屬性opacity顯示圖片 </h3> #### <h4 style="color:#006064; background:#f8bbd0; line-height:2em">Step1:html結構</h4> ```htmlmixed <div id="slider"> <img src="image/banner01.jpg" alt=""> <img src="image/banner02.jpg" alt=""> <img src="image/banner03.jpg" alt=""> <img src="image/banner04.jpg" alt=""> </div> <div>內容顯示</div> ``` #### <h4 style="color:#006064; background:#f8bbd0; line-height:2em">Step2:CSS美化</h4> ![](http://tips.zoego.tech/wp-content/uploads/slider01.png) ```css #slider img{ /*照片符合螢幕寬度*/ width: 100%; /*照片全部定位至(0,0) 重疊在一起*/ position: absolute; left: 0; top: 0; /*照片全部都透明,利用animatin CSS照片顯示*/ opacity: 1; } #slider img:nth-child(1){ animation: img1 3s infinite;} #slider img:nth-child(2){ animation: img2 3s infinite;} #slider img:nth-child(3){ animation: img3 3s infinite;} #slider img:nth-child(4){ animation: img4 3s infinite;} @keyframes img1{ 0%{opacity: 1;} } @keyframes img2{ 0%{opacity: 0;} 45%{opacity: 1;} } @keyframes img3{ 0%{opacity: 0;} 45%{opacity: 0;} 70%{opacity: 1;} } @keyframes img4{ 0%{opacity: 0;} 45%{opacity: 0;} 70%{opacity: 0;} 100%{opacity: 1;} } ``` #### <h4 style="color:#006064; background:#f8bbd0; line-height:2em">Step3:jQuery判斷照片的高度</h4> 因#slider之下圖片利用position:absolut;照片全部定位至(0,0) 重疊在一起,導致父區域【#slider】高度為0,若後續有其他內容時,會被#slider蓋住,需要利用jQuery辨斷照片高度 ```javascript //判斷圖片寬度代入 $sliderW變數 //因圖片height:auto; 無法偵測圖片高度,故改偵測圖片寬度 var $sliderW = $('#slider img').width(); // alert($sliderW); // 計算原始圖片長寬比(範例長寬比1920x560),計算現在圖片的寬度 //判斷圖片高度代入 $sliderW變數 var $sliderH = $sliderW /(1920/560); // alert($sliderH); // 將圖片高度,置入父區域#slider高度 $('#slider').css('height',$sliderH); ``` #### <h4 style="color:#006064; background:#f8bbd0; line-height:2em">Step4:當視窗縮放時,圖片高度會改變,但#slider的高度不會改變,利用jQuery偵測改變</h4> ```javascript //因function不會自動執行 slider(); //當視窗縮放時執行,計算#slider高度 $(window).resize(function(){ slider() }); //將Step3中計算#slider高度,包在function中重覆執行 function slider(){ var $sliderW = $('#slider img').width(); var $sliderH = $sliderW /(1920/560); $('#slider').css('height',$sliderH); } ``` # 6、RWD(05/25) 說明: RWD響應式網頁設計又稱為回應式網站設計,是指網站能跨平台使用,自動偵測使用者上網的裝置尺寸,能針對不同螢幕的大小而自動調整網頁圖文內容, 讓使用者在用手機瀏覽您的網站時,不用一直忙著縮小放大拖曳,給使用者最佳瀏覽畫面。 網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 ## <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)RWD理論說明 </h2> ### <h3 style="color:#b71c1c; line-height:1.1em">Step1:RWD之下Veiwport 行動裝置顯示設定</h3> [本網參考連結](http://tips.zoego.tech/archives/33) ![](http://tips.zoego.tech/wp-content/uploads/Rwd05.png) ![](http://tips.zoego.tech/wp-content/uploads/Rwd06.png) ### <h3 style="color:#b71c1c; line-height:1.1em">Step2:@media queries媒體類型查詢設定</h3> [本網參考連結](http://tips.zoego.tech/archives/46) ![](http://tips.zoego.tech/wp-content/uploads/Rwd08.png) 建議文章閱讀 1.[RWD尺寸間設定關係參考](https://blog.hinablue.me/css-media-query-tips/) ![](https://blog.hinablue.me/content/images/2014/Nov/responsive-reference.png) 2.[RWD值建議](http://www.websitedimensions.com/) <ul>Devices and resolutions <li>What browsers do people use?</li> <li>On what kind of devices?</li> <li>What is their screen resolution?</li> <li>How much space is taken by the browser toolbars?</li> <li>What does it mean for me as a web site developer?</li> </ul> [3.Statcoubter網站頁面分析](http://tips.zoego.tech/archives/514) ![](http://tips.zoego.tech/wp-content/uploads/statCounter01.png) ## <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)課程範例 </h2> [詳本網參考連結](http://tips.zoego.tech/archives/566/7) ### <h3 style="color:#b71c1c; line-height:1.1em">1.Section02設計</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01-04.png) ![](http://tips.zoego.tech/wp-content/uploads/jdx01-12.png) ### <h3 style="color:#b71c1c; line-height:1.1em">2.nav區設定</h3> ![](http://tips.zoego.tech/wp-content/uploads/jdx01-05.png) # 13、eDM(06/27) <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)PhotoShop設計及輸出為網頁 </h2> <h3 style="color:#b71c1c; line-height:1.1em">1.商品_柔膚加亮效果 </h3> Step1.商品原圖>複製圖層 Step2.濾鏡>模糊>高斯模糊 Step3.右側【圖層】面版>濾色 Step4.S2之圖層>複製圖層 Step5.右側【圖層】面版>色彩增值>降低[透明度]即可 <iframe width="700" height="410" src="https://www.youtube.com/embed/iDeE3r1Ymms" frameborder="0" allowfullscreen></iframe> <h3 style="color:#b71c1c; line-height:1.1em">2.商品_倒影效果 </h3> Step1.商品原圖>複製圖層 Step2.自由變型Ctrl+T>[上方工具列]H:設定為-100% Step3.右側【圖層】面版>新增「遮色片圖層」 Step4.色票確認為「黑白」> 利用「漸層工具」加入黑白色即可 <iframe width="700" height="410" src="https://www.youtube.com/embed/_z2fn7157Zk" frameborder="0" allowfullscreen></iframe> <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)eDM切片操作 </h2> <h3 style="color:#b71c1c; line-height:1.1em">1.利用PS進行【規則性切片】</h3> PS切片工具<br>![](https://i.imgur.com/O8qscO3.png) <p style="color:#b71c1c; line-height:1.1em">切片原則</p> (1)寬度約700px,圖片以在行動裝置閱讀清楚為原則 (2)全部先切一大塊 (3)圖片不要切得過於碎片 (4)利用【切片選取工具】,將大圖規則切小圖<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(目的為分攤圖片下載流量) (5)切片選項設定: &nbsp;&nbsp;&nbsp;&nbsp;名稱:圖片檔案名稱 &nbsp;&nbsp;&nbsp;&nbsp;目標:_blank &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alt:SEO使用 ![](https://i.imgur.com/qo2OsuS.png) 在輸出後網頁結構 ![](https://i.imgur.com/fZZXhlA.png) <h3 style="color:#b71c1c; line-height:1.1em">2.PS輸出</h3> Step1:注意PSD檔案名稱,後續圖片檔名一致 Step2:【檔案】>【儲存為網頁用】><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【最佳化確認】>儲存為【影像及HTML】 <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(3)利用DW調整</h2> <h3 style="color:#b71c1c; line-height:1.1em">1.在< head >之前的設定</h3> ![](https://i.imgur.com/sP9KSHo.png) <h3 style="color:#b71c1c; line-height:1.1em">2.非規則商品陳列</h3> ![](https://i.imgur.com/ExRkqHz.png) <h3 style="color:#b71c1c; line-height:1.1em">4.建立影像地圖(MAP)</h3> <a href="https://i.imgur.com/zEUPnoW.png" target="_blank" >![](https://i.imgur.com/zEUPnoW.png)</a> 矩形:shape="rect" 圓形:shape="circle" 多邊形:shape="poly" 並且在html結構中加入【alt】及【title】 <h3 style="color:#b71c1c; line-height:1.1em">4.加入【如看不到內容,請按此...】訊息</h3> <a href="https://i.imgur.com/S2fQ255.png" target="_blank" >![](https://i.imgur.com/S2fQ255.png)</a> <h3 style="color:#b71c1c; line-height:1.1em">5.圖片改為絕對路徑</h3> 網站上傳後,利用【尋找/取代】方法將圖片改為絕對路徑 ![](https://i.imgur.com/teXsZsP.png) <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(4)利用第三方網站發報</h2> 以[benchmarkemail發報網站](https://www.benchmarkemail.com/tw/)為例 <p style="color:#b71c1c; line-height:1.1em">Step1.新增電子報類型</p> ![](https://i.imgur.com/ZEAxo3b.png) <p style="color:#b71c1c; line-height:1.1em">Step2.新增電子報方法</p> 利用拖曳方法依網站現有版型,或HTML語法自行加入 ![](https://i.imgur.com/OaSDxwK.png) <p style="color:#b71c1c; line-height:1.1em">Step3.電子報基本資料加入</p> ![](https://i.imgur.com/n3kaTuD.png) <p style="color:#b71c1c; line-height:1.1em">Step4.依發報網站提供的功能選擇</p> 加入GA更能了解讀者的喜愛情形 ![](https://i.imgur.com/DeJKSnq.png) <p style="color:#b71c1c; line-height:1.1em">Step5.選擇聯絡人名單</p> ![](https://i.imgur.com/FXT7ouE.png) <p style="color:#b71c1c; line-height:1.1em">Step6.加入HTML結構,eDM內容</p> ![](https://i.imgur.com/KsFI2Aw.png) ![](https://i.imgur.com/zWljjYT.png) <p style="color:#b71c1c; line-height:1.1em">Step7.讀者收到信件情形</p> ![](https://i.imgur.com/BsspeZb.png) # 14、MOD(jQ應用1)(06/29) ## <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)首頁(P1):Flex運用 </h2> [課程範例](http://tips.zoego.tech/archives/744) [範例結果](http://zoego.tech/ex/jdx0302/page/page1.html) ![](http://tips.zoego.tech/wp-content/uploads/jdx04_0101.jpg) ### <h3 style="color:#b71c1c; line-height:1.1em">Step1:flex css 美化</h3> ![](https://i.imgur.com/08pKFFx.jpg) ### <h3 style="color:#b71c1c; line-height:1.1em">Step2:jQ設定</h3> JQ運用:each()方法、animate()方法、Dom結構關係 ```javascript $('.flexbox li').each(function() { $(this).hover( function(){ $(this).children().animate({width:'80%'}).parents().siblings().children().css('opacity',0); },function(){ $(this).children().animate({width:'90%'}).parents().siblings().children().css('opacity',1); }); }); ``` ## <h2 style="color:#000099; background:#cce5ff; display:block; line-height:2em">(2)主題推薦(P3):廣告輪播 </h2> [課程範例](http://tips.zoego.tech/archives/743) [範例結果](http://zoego.tech/ex/jdx0302/page/page3.html) ![](http://tips.zoego.tech/wp-content/uploads/JQslider01.jpg) ### <h3 style="color:#b71c1c; line-height:1.1em">Step1:點選下方文字標題,切換照片</h3> JQ動作原則 ![](https://i.imgur.com/oopsQVQ.jpg) ```javascript= var $li = $('.title li') .click(function(){ $(this).add($('.AD div').eq($(this).index())) .addClass('on').siblings('.on').removeClass('on'); }); ``` ### <h3 style="color:#b71c1c; line-height:1.1em">Step2:廣告自動輪播</h3> ```javascript= var speed = 2000 , timer=window.setTimeout(move,speed); //滑鼠移入時,停止循環照片 $('.AD').hover( function(){ window.clearTimeout(timer);} ,function(){window.setTimeout(move,speed);} ); //控制輪播 function move(){ var clickIndex = $('.title li.on').index(); clickIndex = (clickIndex+1) % $li.length; $li.eq(clickIndex).click(); timer=window.setTimeout(move,speed); } ``` 循環輪播的計算情形 ![](http://tips.zoego.tech/wp-content/uploads/jdx04_0301.jpg) ### <h3 style="color:#b71c1c; line-height:1.1em">Step3:圖片隨視窗調整尺寸</h3> ```javascript= ADimg(); //視窗調整尺寸時 $(window).resize(function(){ ADimg(); }); function ADimg(){ var $ADimg = $('.AD img'), $ADwidth = $('.AD').outerWidth(); $ADimg.css({'width':$ADwidth,'height':$ADwidth*0.5}); } ```