---
tags: 公益程式體驗營
---
# 6. 切版紀錄 Chatbot / FunYoug
## 簡介
" FUNYOGA放瑜珈 " 以手刻撰寫 HTML、CSS、RWD，用 SCSS 寫法與工具拆分，
來完成此作品，內容為個人切版練習。例如：色系、字體大小、間距、斷點mixin等

原設計稿為"公益程式體驗營" 所提供的版型-“聊天機器人”，主要為切版練習，
分LV1、LV2繳交，切版完我再更換主題內容圖片等。

## 設計稿 / 作品
* [chatbot UI設計稿](https://xd.adobe.com/view/4922398e-1a6e-4d4b-848c-044a079713bb-1c71/specs/)
* [圖片空間github](https://github.com/hexschool/webLayoutTraining1st/tree/master/chatTalker_images)、[怎麼找圖片路徑](https://i.imgur.com/O7nQcFm.gif)
* [我的作品-放瑜珈](https://carefree0906.github.io/funyoga/)

## 我的筆記
因篇幅較長所以分成多個檔案
[切版任務二-聊天機器人-背景圖案與絕對定位教學](https://hackmd.io/xhqSwFNNQ2CJeo-TYmlxwA)
[切版任務二攻略-聊天機器人](https://hackmd.io/Hd9Y9T71S-6E9-1uQo16Bw?view)
[jQuery 增添介面使用者互動揪甘心](https://hackmd.io/nxUkIS80R76kZp2xNTWfKA)
[Swiper 輪播動畫效果](https://hackmd.io/VXamaOmURe2r6wEK6YPx1A)
[公益程式體驗營-每日任務](https://hackmd.io/rKITbRItQiidIH6gOYl95A)

## 攻略
* [切版二攻略](https://hackmd.io/BXKGIKbKRlOhS7xCGxQysA)
* [同學help](https://hackmd.io/@vMqZkbC0R0WZz-Jdp7CuZw/SJBQZ22v9#chatTalker-AI-%E6%A9%9F%E5%99%A8%E4%BA%BA---%E5%88%87%E7%89%88%E7%AD%86%E8%A8%98)、[LV2-Chang Chen](https://bernice-chen.github.io/chatTalker/)、[github](https://github.com/bernice-chen/chatTalker)

## Adobe XD
[Adobe XD 線上標示文件操作](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)
[如何將 Adobe XD 線上設計稿的每個頁面另存成圖片檔?](https://hackmd.io/NyH2q_VtR-eG9OmxnIAOTQ?view)
[Figma 線上標示文件教學](https://hackmd.io/PDH_CIJ1R0-uyZijDlz0Rw)
[Adobe XD 標示文件教學 - 高度講解](https://www.youtube.com/watch?v=hodJ07BC6EQ)

## 基本設定
### 全站設定
1. 因border-box和img很常用，cssreset沒有這段，需手動加上

    *,*::before,*::after{
        box-sizing:border-box;
    }

    img{
     max-width:100%;
     height:auto;
    }

2. 設計稿中"位""TWD"是使用sub這標籤，因cssreset將sub這標籤改成對齊vertical-align: baseline; 所以要在手動加回來

    sub{
        vertical-align: sub;
    }

3. 打開右下角就可以看到網格 設計大小1366-139-139-16-16 (內縮的左右padding) =1120px

    .container{
     max-width:1120px;
     padding-left:16px;
     padding-right:16px;
     margin:0 auto;
    }

### 通用

.rounded-s{
border-radius: 12px;
}

.rounded-m{
border-radius: 27px;
}

.rounded-cicle{
border-radius: 50%;
}

.shadow{
.box-shadow: 0px 2px 10px $gray-100;
}

$border-width-1: 1px solid;

<small>* 將通用的 拉出來設定class，裡面的設定值可以代變數，例如border、title等..
* 結構跟樣式要盡量分開，比較好活用 例如btn btn-primary</small>

### 字體
Comfortaa 400
Wendy One 400
Notosans 400 700

* 先到googlefonts搜尋文字，將文字加到~~購物車~~?!後，link貼到自己的專案

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa&family=Noto+Sans+TC:wght@400;700&family=Wendy+One&display=swap" rel="stylesheet">

* 再貼上css

font-family: 'Comfortaa', cursive;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Wendy One', sans-serif;

### color

$primary:#56C4C5;/*藍綠*/
$secondary:#FF5D50;/*粉*/
$secondary-light:#F5CA52;/*淺黃*/
$third:#F6CB52; /*黃*/

$white:#FFFFFF;

$gray-100:#00000014; /*陰影*/
$gray-200:#DDDDDD; /*細線*/
$gray-300:#F5F5F5; /*CARD BG*/
$gray-400:#747474; /*小字*/
$gray-500:#221E1F; /*大字*/

### font-size
$fs-1: 8px; /*設計稿沒有8px計算用*/
$fs-1-5: $fs-1 * 1.5; /*12px*/
$fs-2-25: $fs-1 * 2.25; /*18px*/
$fs-2-5: $fs-1 * 2.5; /*20px h2副標*/
$fs-3: $fs-1 * 3; /*24px itemtitle*/
$fs-4: $fs-1 * 4; /*32px h2*/
$fs-6: $fs-1 * 6; /*48px 大標*/

### spacer margin和padding都屬於spacer
8px $spacer-1: 8px;
12px $spacer-1-5: $spacer-1 * 1.5;
16px $spacer-2: $spacer-1 * 2;
24px $spacer-3: $spacer-1 * 3;
32px $spacer-4: $spacer-1 * 4;
48px $spacer-6: $spacer-1 * 6;

## 紀錄一下卡住的地方~~和一些血淚屎~~

### 1. 快速了解客戶輪廓 建立品牌流量池
* 左側卡片一直掉不下來，後來突然想到，不需要每個li設padding或maragin來推，直接下jcsb就好了，傻了我...

### 2. 好評如潮
* 留言的三個卡片，正在想說 咦~怎麼這簡單，然後就悲具了XDDDD...
使用者的照片 定位在li ，結果h2好評如潮下方的mb48px空間被照片吃掉了....我加了一個pb-6的class在把吃掉空間向內推開
* 右下方的星星 使用fontawesome 加入script標籤連結
* 解決小星星後，換下方padding空間被吃掉了...
應該是高度寫固定，padding推開後超出總高，把高度設auto可以解決，但跟設計稿總高不太一樣，就先這樣處理
* 很好~~卡住了~~ 手機版要點擊下面的切換按鈕 切換不同留言，這裡有用到JQ先略過

<!--### banner bg
喔喔喔 原來background-size是這樣用..
寫著寫著突然有心得了
原本高度設定100vh但是我的螢幕高度比設計稿的高度還小，圖最下面會被卡掉一些，
原來有設定bg-img的時候，width、heigh就像是容器一樣，bg-size則是圖的大小
h設定100vh bg-size設定background-size: 850px 768px; 就可以解決了-->

### 3. 碎念:
這次的設計稿主要想練scss寫法和設定通用class，走手刻路線，想說還是不要太貪心，bs5在加進來用人生太混亂了 哈哈哈!!

在設定變數和找出通用設定時，卡在fs-1到底要以8px為基礎還是16px，還是要跟spacer一樣?
18px和20px到底要去哪裡哈哈，然後手機版有的字體變小、margin變小 到底要怎麼設定比較好?

加上看了攻略二影片後，來來回回改了幾次，後來重整先把設計稿，通用的class和不同斷點的變化先寫好，開始切版時才不會一直卡住，果然還是要多切一些版，才會比較熟悉阿..