###### tags: `網頁設計`
# 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> (目的為分攤圖片下載流量)
(5)切片選項設定:
名稱:圖片檔案名稱
目標:_blank
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> 【最佳化確認】>儲存為【影像及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});
}
```