# 建立網站的入門

###### tags: `html`

## 網站結構

字體網站：https://fonts.google.com/
icon 網站：https://fontawesome.com/

英文標題
open sans

### 英文內文
league gothic
roboto
roboto condensed
oswald
raleway

### 中文
noto sans TC
再使用 粗體來分類

在配置文案時，對比很重要

每一行字距 line-height 1.58比較舒服
行距 margin-bottom 32px 大約2-3個字高度

所以資料要對齊對正方便閱讀

## 設計
### 空間
放大每一個section 的空間看起來比較舒服

### 主色
再配1-3種的輔助色就好
可以使用這個網站做配色
https://color.adobe.com/zh/create/color-wheel

參考這個網頁有 50 種網站配色
https://visme.co/blog/website-color-schemes/

### 相片
使用漂亮的照片讓網站質感提升
付費 shutterstock.com
免費 www.pexels.com
插圖 https://elements.envato.com/

對比很重要

### 動態元素
載入時動畫
滾動時動畫
滑鼠時動畫

不要使用loading動畫載入 會讓user體感不好

各種網站範例：
www.behance.net
www.awwwards.com
www.landingfolio.com

## 文字

### 文案
感同身受
與客戶對話，為什麼想用？最吸引你的地方？有用過相似的產品嗎
簡單明白文句，短句
使客戶更容易理解
使用『你』站在客戶的立場
用戶可以得到什麼？
數據化產品的行銷方式
5個可以快速減肥的方式。

## 開發方式

### 使用第三方服務
沒有源始碼，很多東西要收費，靈活度較低

### 使用wordpress架站
免費，開源，可以套用網站module 直接啟用

### 自建frontend/backend 前後端
自已做前後端

前端使用：
html css bootstrap javascript jQuery

Javascript 框架：
ReactJS, VueJS, AngularJS

Nodejs 框架：
Express, Koa, Strapi

## 分析軟體
google analytics
分析網站的所有資訊，來源，國家

gogole Webmaster tools
關健字，流量，分析，seo

***

5個要訣，你也能製作「超專業」的銷售網站：

1. 結構

一個「以銷售為目標」的網站，其實是有一定的結構，才能一步一步，讓客戶信任你，並買下你的產品。

以下是我自己一套常用「銷售產品」的主頁結構。我把它用在自已及不同客戶的身上，效果也非常好。

這個結構共有8個部份：

1. 標題/副標題
2. 問題 / 個人經歷
3. 產品介紹/ 解決方案/ 特別之處
4. 別人推薦/ 社交認證/ 案例研究
5. 風險倒轉
6. 緊急性 ＋ Bonus
7. 抗拒處理 (FAQ)
8. CTA

2. 設計

設計對於一個網頁，也是非常重要的。如果你網頁的設計很得差，像中小學生作品一樣，用家便很難去相信你

這裡有10個設計要訣，讓你迅速提升自己的設計觸覺！

1. 字體
2. 文字粗幼，行距，字距
3. 對齊
4. 空間
5. 顏色
6. 相片
7. 對比
8. 動態元素
9. 訓練設計觸覺
10. 跟足Template

3. 文案

好的文案，絕對可以帶給你網站更多流量，更多lead，更多的銷售。

以下是我常用的5個文案要訣，助你寫出好文案。

1. 身同感受
    -- 論壇
    -- 與客人對話
    -- 書評
2. 簡單易明，短句子
3. 使用「你」
4. 注重「用家可以得到什麼」
5. 標題使用數字

4. 開發方法

以下是現今, 市面上最常見的3種架站方法：

1. 使用第3方服務如wix/shopify 
2. 使用Wordpress架站 
3. 自己寫Frontend + Backend

學習網頁編程的次序：

Frontend：
- HTML 
- CSS
- CSS Framework (Bootstrap)
- Javascript
- JQuery
- GSAP (Optional)
- JS Framework (AngularJS / ReactJS/ VueJS)

Backend：
- PHP/ Nodejs
- CMS Development (Wordpress/ Strapi)

5. 分析軟件

通常，我們會替網站安裝兩個分析軟件：

- Google Analytics
- Google Webmaster Tools

 

 


重溫課程內容：

https://learn.mtache.com/crash