---
# System prepended metadata

title: CED101 Web 前端設計工程師養成班
tags: [前端設計工程師養成班]

---

###### tags: `前端設計工程師養成班`
# CED101 Web 前端設計工程師養成班


# Sass



## Vscode  設定css 輸出

設定css 輸出的資料夾，在檔案<喜好設定<設定
![](https://i.imgur.com/6klXVRK.png)


---

 -> 搜尋找到seeting.json檔案，放入底下這段，
可以改編譯過後的路徑。


 #### setting.json
```json= 

//css產出設定
 "liveSassCompile.settings.formats": [
        {
            "format": "expanded", //壓縮成一行"compressed", //壓縮成一行css，正式版本
            "extensionName": ".css",
            "savePath": "/css/" //此為輸出的路徑，可以自行更改
        }
    ],
```
















# uiux 講義

https://drive.google.com/file/d/186uCb_ksLa1NOIkAzM367tKykwxl-0hm/view?usp=sharing


# uiux 資源

- design system
https://designsystemsrepo.com/design-systems/

- uiux 介面
http://collectui.com/designs
https://www.cssawards.net/
https://dribbble.com/
https://www.awwwards.com/
http://nipponcolors.com/#tonoko
https://www.behance.net/
http://4db.cc/
https://codemyui.com/


https://preview.themeforest.net/item/cork-responsive-admin-dashboard-template/full_screen_preview/25582188?_ga=2.211702293.145436789.1599030155-220591041.1581305097

<br>

## moqups / mockup工具
   https://moqups.com/
   
<br>

# 分析網站結構
   
https://www.apple.com/tw/
https://www.tesla.com/

# 功能流程規劃

畫出 yahoo 購物中心的購物流程圖
https://tw.buy.yahoo.com/


# 專案文件

 - sitemap
     ![](https://i.imgur.com/njWAHHm.png)

   - wireframe
    ![](https://i.imgur.com/8E4jtRh.jpg)


   - ui flow
     ![](https://i.imgur.com/cZvn7Fn.jpg)
     
  
 # 產品組成
 
- 產品的組成大約可以拆分成 頁面 > 元件 > 元素 > 圖（影片）、文字、icon、表單、互動 等。



- 各元素都可能需要制定 色彩、透明度、尺寸、間距、檔案格式、品質、風格 等。互動包含 手勢操作、過場動畫、特效、音效、震動 等。

<br><br><br>  

- 範例    
https://preview.themeforest.net/item/cork-responsive-admin-dashboard-template/full_screen_preview/25582188?_ga=2.211702293.145436789.1599030155-220591041.1581305097     
     
 ## 首頁介面組成 
  ![](https://i.imgur.com/P5XalcN.png)    


###  選單元件
  

  ![](https://i.imgur.com/IleGkOw.jpg)
  <br>
  ![](https://i.imgur.com/uPpKgv8.png)
  <br>
  ![](https://i.imgur.com/bsraOHn.png)
  範例網址：http://demo.smartaddons.com/templates/html/market/intro-new/






  ####  Header要注意的

- [ ]  logo不能置頂 貼邊
- [ ]  選單要標示所在位址
- [ ]  是否有 會員登入/註冊 的標示
- [ ]  購物網站是否有購物車 的標示
- [ ]  功能列，主選單，次選單層級 是否清楚
- [ ]  選單是否有對齊
- [ ]  選單跟圖片的關係是否清楚

### - 選單壓在圖上，保持選單清楚，圖片內容避免干擾選單

*選單不適合壓在圖上（圖片干擾選單）*
![](https://i.imgur.com/Oayr2WW.jpg)

*適合壓在圖上*
![](https://i.imgur.com/PV3vX99.jpg)

<br>

#### - 選單要固定在上方
![](https://i.imgur.com/zyLQtxw.gif)


# gsap

https://greensock.com/
https://greensock.com/docs/v2
https://greensock.com/docs/v2/Easing


## github 連結：

https://github.com/sexfat/ced101
 

```jsx=
 scaleX:1.5,
    x: 140,
    y: 0,
    boxShadow: "0px 0px 20px red",//陰影
    scale:2, //放大
    delay: 2,//延遲幾秒
    repeat: 3,//重複幾次
    repeatDelay: 2,//重複延遲時間
    yoyo: true,//動畫順序1-2-2-1
    alpha:0,//透明度
    autoAlpha: 0 //透明度
    ease: Power3.easeInOut//動畫效果

//旋轉要件
    rotationY: 360, //旋轉
    rotationX: 360 , //旋轉
    transformOrigin : 'right top' //定位點
//透明度
    autoAlpha: 0 //自動消失
//修改classname
//增加一組class
   className: "+=box10"
//覆蓋掉本來的class
   className: "box10"
```

  

- ## html  

```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>gsap2.1.3</title>
</head>
<body>
    <div class="box box01">01</div>
    <div class="box box02">02</div>
    <div class="box box03">03</div>
    <div class="box box04">04</div>
    <div class="box box04">04</div>
    <div class="box box04">04</div>
    
</body>
<script src="./gsap.js"></script>
</html>


```

- ## css

```css
body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

.box {
    width: 80px;
    height: 80px;
    background-color: #00ffaa;
    border-radius: 6px;

}


.box01 {
   position: relative;
   top: 100px;
   left: 300px
}

.box03 {
    position: relative;
    border-radius: 20px;
    top: 300px;
    left: 300px;
    /* width: 300px; */
 }

.box04 {
    opacity: 0;
} 


```
  
  
- ## gsap.js  
  
```jsx=
TweenMax.to('.box' , 3 , {
    y: 200,
    x: 100
})
```



```jsx=
TweenMax.to('.box01' , 2 , {
    y: 200,//位移
    x: 100,//位移
    // ease: Power2.easeOut
    // ease : Elastic.easeOut
    ease: Bounce.easeOut,// 補間動畫
    rotation : 360,//旋轉
    width : '80%',//寬度
})
```



```jsx=
TweenMax.from('.box02' , 2 , {
    x: 400,
    repeat : 7,
    yoyo : true
    
});


TweenMax.to('.box03' , 1 , {
    rotation : 360,
    repeat : -1,
    ease: Power0.easeNone

});
TweenMax.staggerTo('.box04',1,{
   x: 100,
   opacity: 1

},0.6)





TweenMax.staggerFromTo('.box04', 1, {
    x:0,
    opacity:0
}, {
    x: 200,
    opacity: 1
} , 0.6)

```



```jsx=
//TimelineMax

var tl01 =  new TimelineMax({
    repeat : 2
});

// TweenMax.to('.box05' ,1, {
//     x: 100
// });

// TweenMax.to('.box06' ,1, {
//     y: 100
// });
// TweenMax.to('.box07' ,1, {
//     y: 100,
//     x: 100
// });
tl01.to('.box05' ,1, {
    x: 100,
    rotation: 360
}).to('.box06' ,1, {
    y: 100,
    scale: 2
}).to('.box07' ,1, {
    y: 100,
    x: 100
});

```








