###### 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>
## <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

# 2、Web Font(05/16)
## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(1)Awesome運用</span>
## <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)
## <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
## <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>
### <h3 style="color:#b71c1c; line-height:1.1em">課程範例float改善</h3>
### <h3 style="color:#b71c1c; line-height:1.1em">Flex運用</h3>
[Flex CSS tools](http://the-echoplex.net/flexyboxes/)
## <span style="color:#000099; background:#cce5ff; display:block; line-height:2em">(4)補充課題：Mark Man</span>
[Mark Man](http://www.getmarkman.com/)

# 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>
### <h3 style="color:#b71c1c; line-height:1.1em">2.CSS美化重點</h3>

## <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>

### <h3 style="color:#b71c1c; line-height:1.1em">2.jQuery 添加元素方法</h3>
[本網連結](http://tips.zoego.tech/archives/541)

### <h3 style="color:#b71c1c; line-height:1.1em">3.jQuery DOM結構</h3>
[本網連結](http://tips.zoego.tech/archives/313)
## <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>


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>

### <h3 style="color:#b71c1c; line-height:1.1em">練習2：心型加入</h3>

## <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>
### <h3 style="color:#b71c1c; line-height:1.1em">2.animate.css與wow.js結合</h3>
### <h3 style="color:#b71c1c; line-height:1.1em">3.Slick.js 讓製作網頁輪播的效果（Carousel)更輕鬆</h3>
## <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瀏覽器中無法利用背景換圖片

<header></header>

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>

<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>

#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辨斷照片高度

//判斷圖片寬度代入 $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>

 //因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)
### <h3 style="color:#b71c1c; line-height:1.1em">Step2：@media queries媒體類型查詢設定</h3>

[本網參考連結](http://tips.zoego.tech/archives/46)
建議文章閱讀
1.[RWD尺寸間設定關係參考](https://blog.hinablue.me/css-media-query-tips/)
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)
## <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>
### <h3 style="color:#b71c1c; line-height:1.1em">2.nav區設定</h3>

# 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>

<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使用

在輸出後網頁結構

<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>


<h3 style="color:#b71c1c; line-height:1.1em">2.非規則商品陳列</h3>


<h3 style="color:#b71c1c; line-height:1.1em">4.建立影像地圖（MAP）</h3>

<a href="https://i.imgur.com/zEUPnoW.png" target="_blank" ></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" ></a>

<h3 style="color:#b71c1c; line-height:1.1em">5.圖片改為絕對路徑</h3>

網站上傳後，利用【尋找／取代】方法將圖片改為絕對路徑


<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>


<p style="color:#b71c1c; line-height:1.1em">Step2.新增電子報方法</p>

利用拖曳方法依網站現有版型，或HTML語法自行加入


<p style="color:#b71c1c; line-height:1.1em">Step3.電子報基本資料加入</p>


<p style="color:#b71c1c; line-height:1.1em">Step4.依發報網站提供的功能選擇</p>

加入GA更能了解讀者的喜愛情形


<p style="color:#b71c1c; line-height:1.1em">Step5.選擇聯絡人名單</p>


<p style="color:#b71c1c; line-height:1.1em">Step6.加入HTML結構，eDM內容</p>



<p style="color:#b71c1c; line-height:1.1em">Step7.讀者收到信件情形</p>


# 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)

### <h3 style="color:#b71c1c; line-height:1.1em">Step1：flex css 美化</h3>


### <h3 style="color:#b71c1c; line-height:1.1em">Step2：jQ設定</h3>

JQ運用：each()方法、animate()方法、Dom結構關係

$('.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)

### <h3 style="color:#b71c1c; line-height:1.1em">Step1：點選下方文字標題，切換照片</h3>

JQ動作原則

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>

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);
}

循環輪播的計算情形

### <h3 style="color:#b71c1c; line-height:1.1em">Step3：圖片隨視窗調整尺寸</h3>

ADimg();
 
//視窗調整尺寸時	
$(window).resize(function(){
	ADimg();
});	
 
function ADimg(){
var $ADimg = $('.AD img'),
	$ADwidth = $('.AD').outerWidth();
	$ADimg.css({'width':$ADwidth,'height':$ADwidth*0.5});
}