WooCommerce 系列教學 (3/3):串接第三方金流

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

WooCommerce 是很熱門的購物車系統,所以有很多的第三方金流服務,都有提供相關的 plugin 或 API 讓我們可以與 WooCommere 完整串接,今天要介紹的這個第三方金流服務是歐付寶,老實說我已經忘記選擇它的原因,但用了 4 個月還算不錯,而且安裝非常方便,客服回應也很快,所以分享給各位。

▼ 這是歐付寶手續費的明細,詳細的內容可到金流收費總覽觀看

大家應該有發現超商付款的手續費非常高,所以我並沒有使用超商付款的功能,我自己的網路商店也只有用信用卡與 ATM/ WebATM。
歐付寶的好處是提供了很多種付款方式,但你不一定全部都要啟用,可以視自己的需求啟用即可。

安裝歐付寶

接下來要跟大家說怎麼安裝歐付寶囉。

▼ 請先在首頁的「下載專區」找到「套裝購物車模組

▼ 找到第四個 WordPress WooCommerce 專用的外掛,下載後照著一般安裝外掛的流程,裝到你自己的 WordPress 網站。
⚠ 檔案裡面有一份 allPay 金流外掛套件安裝導引(WooCommerce).docx 也寫得很清楚,建議大家可以先行閱讀再安裝。

▼ 啟用後,在後台選單:「WooCommerce」→「設定」→「結帳」的分頁裡,會多了一個歐付寶,你可以在此設定想要啟用的付款方式,以及一些說明內容。

那麼要如何設定,讓顧客的錢進入你的口袋呢?接下來這個是最重要的地方,就是金鑰設定。

▼ 承上個步驟,將頁面稍微往下捲一些,會到「特店編號」、「金鑰」與「向量」的設定,只要將這邊設定完成,在商店的任何付款資料,歐付寶都能透過這個設定匯入到你的歐付寶帳戶。

WordPress 後台先到此暫停,讓我們回到歐付寶的網站去申請會員吧!

申請歐付寶會員,取得金鑰設定

請先註冊成為歐付寶的會員,一開始選擇個人會員就可以了,個人跟商務目前最大的差別,是收款額度的不同。

雖然很想把步驟寫清楚,但是歐付寶會員綁定手機號碼,我沒有其他的手機號碼可以測試截圖了,所以在此跟各位說聲抱歉 😢。但是歐付寶的網站步驟很清楚,註冊與申請是沒啥困難的。

註冊成為會員之後,可以去申請你的金鑰,申請金鑰的網址請點我。假設你已申請完畢,可以登入廠商後台取得你的特店編號、金鑰等設定。

▼ 這些設定可以在廠商後台的「系統開發管理」➡️「系統介接設定」找到,不管是 AllinOne 還是一般金流,數字都是一樣的,所以只要選擇一組填寫到 WooCommerce 即可。

▼ 在尚未正式開店前,可以先啟用測試模式,試試看你的購物流程是否暢通


以上就是 WooCommerce 串接歐付寶的簡單步驟,我個人覺得,歐付寶已經把付款做得很簡單了,而且所有資料都可以在廠商後台搜尋到,有任何不懂得也可以先到他的客服中心爬文,這邊就不再贅述了。

以後如果你覺得外掛的功能不足,也可以使用歐付寶提供的 API,讓你的購物網站擁有更多功能。但我這幾篇文章是針對「個人小額經營者」,相信不是所有人都會串接 API,而如果您們是「公司行號」,相信您們的團隊一定有工程師駐點,對 API 一定已駕輕就熟不需要我多說。所以在此我不會特別介紹 API 串接,但如果您有興趣,可以直接到歐付寶的官網下載各種串接規格

如果有任何問題也歡迎在底下留言,謝謝各位!

WooCommerce 系列教學 (2/3):商品上架流程

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

從後台的「商品」→「新增商品」就可以添加各式各樣的商品了。如果你已經習慣 WordPress 的作業模式,你會很開心地發現商品跟文章的格式幾乎有九成像,不管是標題、分類、標籤,商品(特色)圖片,都可以很快地進入狀況!

所以在此我只會特別說明商品資料(Product Data) 的部分,這個也是大家在設定的時候,比較容易碰到的問題。

小補充:商品簡短說明

「新增商品」的最下面有一個「商品簡短說明」,在這邊輸入的文字,會出現在前台商品頁面的右上方喔。

當然,具體的位置還是要視你使用的佈景主題而定,不過國外的佈景主題設定幾乎都是在右上方無誤。

小補充:商品圖庫

在商品圖庫的地方,如果你一次上傳多張照片,他會利用 Lightbox 以及輪播方式秀圖。


商品資料

商品資料可以這麼看,先選擇 (1) 的下拉式選單,再點選 (2) 的各個設定,最後在 (3) 填入各種商品資料。

1.商品類型

WooCommerce 目前提供了四種商品類型:簡單商品、組合商品、外部/加盟商品、可變商品,簡單解說如下:

  • 簡單商品:商品只有一種款式、一種價格,顧客直接點選加入購物車即可。
  • 組合商品:附屬在其他商品底下,不會有自己的價格 (這個我從來沒用過)。
  • 外部/加盟商品:純粹介紹商品,如果要購買會連到外部網站。
  • 可變商品:一個商品頁面可以有很多種款式(例如 S, M, L 尺寸),對應不同的款式可以設定價格、庫存,與圖片。

2.商品設定

可變商品的功能是最為複雜,也較為完善,所以我用「可變商品」作為圖例,介紹給大家。

  • 一般:這個應該不用多作解釋,裡面只有「貨號」(SKU name)一個欄位,請填上不重複的貨號吧。
  • 庫存:
    可以勾選「庫存管理」以設定庫存,但如果是用可變商品,這邊可以不用寫,因為我們之後還需要分別設定各種款式的庫存。
    單獨出售的部分,就是照字面的意思解讀啦!如果你希望顧客一次只能買一件這個商品,就把他勾起來囉!
  • 運送方式:可以填寫產品的重量與尺寸,「運送級距」則是可以再給產品設定額外的運費,請看下面的介紹。

運送級距介紹

▼ 先在後台「商品」→「運送級距」的選單裡,設定額外的運費

▼ 接著在「WooCommerce」→「設定」→「運送方式」→「單一費率」,找到「運送級距費用」的欄位。你會發現我們剛剛設定的「大尺寸」出現在這了。我在這邊設定,只要有使用大尺寸的運送級距,運費都會額外增加 100 元。

▼ 回到商品設定的地方,可以設定這個商品的運送級距為大尺寸

▼ 如此一來,只要我們購買這個商品,運費就會自動再加上 100 元(原本的運費是 40 元)。

  • 連結商品:推薦型跟交叉型,都是可以讓顧客在購物時看到更多的商品。可以將滑鼠移到框框後面的問號看他的解釋,因為設定很容易所以就不多談了。分組我自己沒用過,所以先跳過😓
  • 屬性跟變化類型,是可變商品的精華部分,請直接看以下圖解

屬性

在購買產品時,可能曾經看過產品的規格,如下圖:

▼ 這些資料都是在屬性裡面設定的,記得要選擇「在商品頁面中可見」,才會出現在商品頁面裡:

如果你的商品資料是「可變商品」的話,你會發現「在商品頁面中可見」的文字下面,還有一個「用於變化類型」。這個就是讓我們設定,根據不同款式顯示不同的庫存、價格與圖片的重要選項唷!

▼ 範例可以參考我的寫法:

如果不需要讓這些款式出現在產品規格上,就不要勾選「在商品頁面中可見」的選項。每一個數值都請用|做分隔,寫在同一行或是換行都可以。

▼ 寫完之後記得按下儲存,然後再切到「變化類型」的分頁,並選擇「由所有屬性建立變化類型」。

送出之後,你剛剛新增的那四個數值,就會出現在畫面上了!

變化類型

每一個屬性都是一個變化類型,舉例來說,我這邊有四個款式讓顧客選擇,所以我可以單獨為這四個款式,設定圖片、價錢、庫存等資訊。

▼ 回到前頭,就可以跟各大購物網站一樣,選擇單一產品的各種款式囉~

⚠ 特別記住一點,所有的東西修改後,都必須按下該分頁內的「儲存變更」,這樣檔案才會存進去喔!


上架流程先到此告一段落,有沒有發現上架一點都不難,只要把可變商品搞懂,就可以做出很棒的變化囉!希望大家都能順利上架商品 🙂

最後一個部分,我會告訴大家怎麼跟 AllPay 歐付寶串接,敬啟期待囉 😊

WooCommerce 系列教學 (1/3):安裝與使用

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

很久以前寫過一篇 WooCommerce 的商品上架流程,但因為圖片都失效了,所以一直把「重寫」這件事情放在心上,但因為有段時間沒碰 WooCommerce 了,怕誤導大家所以遲遲未下筆。

後來,因為我現在有經營手帳寫真市集,是用 WooCommerce + AllPay 串接,所以可以有比較新、也比較完整的經驗分享啦!也歡迎大家購買市集的商品,給我一點支持喔 😳


事前準備:挑選佈景主題與安裝外掛

我不會寫適用 WooCommerce 的佈景主題,所以我都是從網路上找免費的 WooCommerce 佈景自己玩。

開發 WooCommece 的 WooThemes 也有提供免費與付費的主題,有興趣的朋友也可以從 WooThemes 下載。此外 WordPress.org 裡,也有人會上傳適用 WooCommerce 的 Themes,不過就要自己稍微找一下囉。

我選用的範例主題是從 WordPress.org 下載的 Klasik,如果你們想要自己練習,可以跟我下載一樣的佈景主題。

佈景主題裝好後,就可以安裝 WooCommerce 外掛了,直接從後台搜尋 WooCommerce 即可。

▼ WooCommerce 相關外掛有很多,我們首先要安裝的是由 WooThemes 開發的 WooCommerce – excelling eCommerce 主程式

啟用外掛後的第一步,就是安裝翻譯檔啦!WooCommerce 有提供繁體中文的版本,所以大家不用緊張,放手去安裝吧 🙂

▼ 請點選「Install Translation」

▼ 安裝成功後,畫面會變成繁體中文,然後就一直點選紫色按鈕進行你的商品設定即可。

這些設定之後都可以從後台更改,現在不想設定也沒關係 😊

事前準備到此告一段落,一來 WooCommerce 有中文化,二來很多設定都是要靠大家實際的販售情況調整。設定也不難,如果真的有問題再留言給我吧!


WooCommerce 的架構

安裝完左側會多了兩個選單,分別是:

  • WooCommeerce:WooCommerce 外掛相關設定,例如付款格式、付款方式、發送郵件… 等等。
  • 商品:上架或分類商品設定,有點類似「文章」選單的感覺,有獨立的分類與標籤,每一個商品都是一個單獨的文章格式。

那麼,我們該如何在前台顯示 WooCommerce 的相關頁面資料呢?所有 WooCommerce 的資料,我們可以在「頁面」透過 shortcode 進行設定。

▼ 安裝 WooCommerce 之後,他也會自動新增一些頁面在「頁面」選單裡,像是商店、忘記密碼、我的帳號… 等。

這邊提醒大家,因為我們選的是繁體中文語系,所以 WooCommerce 預設會把網址代碼也設為中文,我建議大家到「頁面」選單後」,把所有頁面的代碼都改回英文,不然一些頁面可能會連不上喔!

固定網址也要記得改。固定網址的設定,可以選擇「商品起點」,總之就是確保你的固定網址都是/shop/而不是/商店/

接下來你可以試著連到商店頁面啦,網址通常是http://你的部落格網址/shop,如果你有試著新增商品,可以在這一頁看到所有的商品清單。

顯示特定的分類

一間店會有很多不同分類的商品,這是無庸置疑的,所以你一定會有一個需求,就是在顯示單一分類的所有商品。

假使我們以衣服 👔 為例子,頁面只會顯示分類為衣服的商品,就我所知的有兩種方法,一併分享給大家。 記得要先新增商品分類,這邊就不再敘述怎麼新增了。

直接把連結抓出來

第一種方法,是直接找到「商品分類」的真正網址。

這個方法很簡單,到後台的「商品分類」選單中,找到你想要連結的商品分類,然後選擇「查看」就可以啦 😊

搭配 shortcode

另外,記得我們前面有提到,WooCommerce 幫我們建了一些頁面以顯示資料嗎。

我們先從後台點選「頁面」→「我的帳號」,你會看到文章內有一段程式碼為:[woocommerce_my_account],這段程式碼,就是我們常用的 WordPress Shortcode。

因此,我們可以用同樣的方式,新增一個叫做「衣服」的頁面,然後插入一段 shortcode,告訴 WordPress 顯示所有分類為衣服的商品:[product_category category="clothing" ]

category 後面接的clothing,就是看你的商品分類的代碼怎麼寫,這邊就跟著寫一樣的字。

( 更多的 WooCommerce Shortcut 資料,請參考 Shortcodes included with WooCommerce )

乍看之下,感覺第一種方法比較簡單,但如果你還有一些特殊的需求,例如顯示指定的 SKU 商品、指定的單一商品 … 等等,都可以透過 Shortcode 幫你達成喔!記得使用方法,都是在「頁面」把對應的 Shortcode 插入即可。


WooCommerce 系列教學的第一篇就到此告一段落了,其實安裝並不難,設定也很簡單。所以我只是把大家初步使用,可能會碰到的問題先整理好放出來,希望對大家有所幫助!

如果有照著安裝的朋友們,可以試著先建立幾個商品,接下來我會分享進階的的商品設定,所以如果你有新增商品的經驗,會更快上手 😊,閱讀或實作有任何問題,都歡迎留言告訴我。

輕鬆上手CSS(III) – 基本語法傳授!!

☞ 輕鬆上手 CSS 系列文

這次要跟大家談論的主題,是修改以及創造的抉擇。在 css 的世界裡,你希望當個看得懂 css 語法並且會修改的人?或者是當可以無中生有創造出令人驚豔的 css 佈景?這個答案沒有絕對,端看你自己想往哪一條路發展。然而,不論你想當個修改者或是創造者,今天的主題都是非看不可 ^_________^

這邊要先跟各位說明,css 的語法跟選擇器是兩種不同的東西,比如以下這段 css:

CSS

a:hover 是 css 選擇器。裡頭由 { } 包住的則是 css 語法。對 css 選擇器不熟或想進一步瞭解的朋友,可以參考我之前寫的 CSS 選擇器概略說明

不論以後你要走修改路線或是創造路線(好像遊戲轉職!!),css 的基本語法都是你必備的知識,在此我將常用的 css 語法做個整理,供大家閱覽參考。另外要特別說明一點,這邊所謂的「基本」語法是就我的認知而言,我覺得哪些是大家常用的語法才會把它丟上來,如果過於冷僻或艱難我會自動忽略。

文字屬性一覽

CSS

框線屬性一覽

CSS

框線樣式:

  • 實線: solid
  • 虛線: dotted
  • 雙線: double
  • 凹框: inset
  • 凸框: outset

背景樣式一覽

CSS

項目符號樣式一覽

項目符號,我想大家最常用到的就是「如何隱藏項目符號的編號」…但只寫這麼一行感覺很空虛,所以我把幾個編號的樣式也寫出來給大家參考~

CSS

邊界與間距

邊界 margin 以及間距 padding 是大家最常用來調整圖層的語法,這邊概略說明兩者的使用方法以及差別:

CSS

以下是一張網頁示意圖(以灰底表示), A 圖層以及 B 圖層各放在左右兩邊。此時沒有任何的語法牽制,所以兩張圖層的大小位置相同,都緊緊貼著網頁的最上方。

而我現在想要將兩張圖層的位子往下移 40px,A 圖層使用 margin, B 圖層使用 padding

CSS

來猜猜最後會發生什麼事情吧:)

看到了嗎!!! 雖然兩個圖層的文字都往下移了 40px ,達到你想要的效果,但是假設你有對圖層調背景顏色,就會發現其實差多了。

  • A 圖層使用 margin 控制, margin 控制的是整個圖層相對於邊界而言,所以他會將整個圖層往下移動
  • B 圖層使用 padding 控制, padding 控制的是裡頭的物件,他的相對點就是整個 B 圖層,所以相對於 B 圖層,物件下移 40px

瞭解 margin 以及 padding 的差別後,你就可以知道為什麼有時圖層會掉下去或是錯位了吧。原因之一就是你用了過多的 margin 來控制他,但是圖層都是白底所以看不出他的差別,事實上他可能已經嚴重蓋到上下的圖層或左右的圖層,一張張圖層疊加上去,光是用想的都覺得恐怖XD。

CSS 基本語法小結

不知道對各位來說東西會不會過多?總之 css 應該也需要時間做消化,所以今天就講到這裡。關於 float 還有 position 的語法,我會放到進階語法區(個人覺得那個比較麻煩…)

如果以上這些語法你都消化瞭解了,我建議大家看一篇基本的 css 語法縮寫,這兩篇看完之後,我相信應該可以看懂大多數的 css 語法了!

最後的最後,老話一句~,如果有寫錯或是不懂的地方,歡迎留言給我

輕鬆上手CSS(II) – 叫叫ABC篇

輕鬆上手 CSS 系列文

相信大家對於「叫叫 ABC 」這五個字都非常的熟悉,甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上,而是當成 CSS 教學的一部分。我想很多人應該都會對此抱持疑問,不懂「叫叫 ABC」怎麼可以跟 CSS 做結合吧!

歡迎繼續看下去,就知道其中奧妙囉~

我這次要跟大家分享的 CSS 概念非常的簡單,就是如何在靜態以及動態的網頁上呼叫 css,還有對自己寫的 css 要抱持怎樣的態度。

叫(自定選擇器)

要呼叫 css 的方法有兩種,同樣的沒有說哪種方法比較好,端看大家的撰寫習慣。
第一種呼叫方式:直接在網頁裡頭呼叫 css。舉例如下:

HTML

重點在於 css 要被 <style>...</style> 包覆著。

叫(載入外部 css 檔案)

這個方法比較多人在使用,因為我們只要修改一個 css 檔案,就可以同時修改許多網頁的外觀樣式。前提當然是這些網頁都要引用這份 css 檔案啦!!

而載入外部 css 我們又可以分成兩種方式:

直接連結樣式表

Step1.

舉例來說,假設我現在要製作一份 css 檔案,先將以下語法複製到記事本後存檔為 style.css ,副檔名必須為 .css

CSS

仔細觀察,但第一種呼叫方式不同的地方在於少了 <style>...</style> 的包覆。只要你將 css 存成一個獨立的檔案,都不需要被 <style> 標籤包覆。

Step2.

在要呼叫 style.css 的網頁裡頭加入以下語法

HTML

假設現在有三張網頁都同時載入了這個 style.css 的檔案,只要你修改了這份 css ,三張網頁都會同時變更,在效率上也大福提昇了許多。

A(Active 啟動)

以上步驟完成後,請打開瀏覽器觀看效果。雖然簡易的 css 不太會有錯誤,但是 css 可不是上傳之後就萬事太平阿!如果碰到複雜的圖層、定位這些 css,可能就會有跑位的問題。所以寫好 css 記得一定要啟動觀看他的效果,邊寫邊修正以達到最好的視覺效果。

B(Believe 相信)

要對自己寫出來的 css 有信心,不要因為一時的挫折就放棄學習 css。他們不是什麼刁鑽艱深的語言,你唯一需要的就是不斷的練習、練習,以及練習。

C(Css)

「叫叫ABC」:網頁或是連結呼叫後,請啟動,並且對自己所撰寫的css有信心!

這就是今天我想跟各位分享的「叫叫 ABC」,其實眼尖的人都應該瞭解到重點在於前面的兩種呼叫方式。之前就在想說應該要先把怎麼呼叫 css 寫出來讓大家瞭解,可是光寫這樣好像又過於貧乏,恰巧腦海閃過了「叫叫ABC」,所以就張冠李戴將這個口訣移植過來 XDD

當然也希望透過這個簡單的「叫叫 ABC」可以讓大家對呼叫 css 的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^

輕鬆上手css(I) – 不可不知篇

輕鬆上手 CSS 系列文

我之前有發了一篇「學 css 前要準備什麼?」,如果你已經閱覽過這篇文章也準備好了,就讓我們跨出學習 css 的第一步吧。

如果你開啟了自己寫 css 的工具(例如記事本、DreamWeaver ),那我要在這邊跟你說聲抱歉,請先默默的將他縮小或關閉。

因為對初學者來說最重要的還是概念,請先別一頭熱的想要開始寫 css ,否則會適得其反唷。 當然,假使你已經不是初學者,或者你有過人的慧根,這篇文章也可以選擇跳過不看啦,因為今天寫的這一篇文章完全是針對 CSS 初學者喔。

你知道css不能獨立生存嗎?

CSS(Cascading Style Sheets)有一個很難記的中文名詞:串樣式列表,它是 W3C 經定義,用來替 html 以及 xml 這種檔案添加樣式的語言。

因此他必須要搭配 html 才可以產生出一張張動人的網頁,只有 css 的檔案充其量只是一堆語言,不具任何意義。(你硬要說他有參考價值的意義我也不反對啦:P)

你知道css和html之間的關聯嗎?

首先,這邊有一張很簡單的html網頁語法:

HTML

接著以下是利用剛剛提供的html語法製成的簡易網頁圖:

以第 1 行 <div id="header">我是 header</div> 為例,「我是 header」這段話是html的文字,他會直接秀在網頁上,而我們都知道在 html 裡頭,透過<>標記的標籤是不會顯示在網頁上面。

這段 html 語言的意思是:我是一個 id 叫做 header 的圖層,圖層裡頭包含「我是header」 這句話。

我們可以把 div(圖層)想像成是一個區塊,這個區塊的長寬可以隨你的意思做調整,而包含在這個區塊裡頭的內容就是靠 ,

這個標籤做設置。如果想要針對 id 叫做 header 的這個圖層區塊做修改,可以在 css 裡頭這麼寫:

CSS

☞ 補充

「id」在 css 語言中不叫做「id」,他有另外一個稱呼叫做「#」;
同理而言,「class」在css語言中則是叫做「.

你知道 id 和 class 有什麼不同嗎

其實在 html 裡頭設置 css 標籤自由度非常的高,他不像 html 一樣, font 代表的是字體、 color 代表的是顏色, html 每個標籤都有規定的意思不能更改,但 css 不同,css 完全可以依照你自已的選擇做設定,這個區塊你想取名叫做 muki ,那個區塊想叫做 space ,沒人會反對。如果真要說什麼規定,就是他的標籤只能用英文來命名吧

假使還要再說一項規定,就要談到 id 以及 class 的差別之處了。

  • id=header:這個 header 在一張網頁裡頭只能 出現一次 (這邊指的網頁是從 html 開始到結束,不是像 php 那種 include 的包法)
  • class=header:這個 header 在一張網頁裡頭可以出現無數次

★ 會撰寫 java script 的朋友這邊也要特別注意, id 可以被 js 裡頭的 GetElementByID 函數所運用, class 則不行。
★ 最後要提醒大家一點,在 css 裡頭大小寫是有差別的。你今天寫 id=header 以及 id=Header 這是兩種不同的屬性選擇器,請多多注意唷!!!

你知道 div 以及 span 的差異嗎

同樣的今天我寫了一張html網頁:

HTML

以下是呈現出來的網頁效果:

簡單的一個概念:使用 span 他不會有換行的效果,所以我們可以用 span 來做更細部的 css 修改。

瀏覽器兼容

網路上有非常多的瀏覽器,IE6、IE7、Firefox、Opera、Google..等等。我們都希望自己的網頁在每個瀏覽器瀏覽時都是最漂亮的、最符合自己理想的。無奈的是有的瀏覽器並不會乖乖照著 W3C 的規範去走,偏偏他又是目前市佔率最高的瀏覽器,那這該如何是好呢?

其實每個 css designer 都會碰到這樣的困擾,包含我自己也還在學習當中,所以 如果你有志設計css樣板給大家使用,就不得不正視這個問題!! 我的建議是多裝幾套瀏覽器測試一下效果,勤做修改吧!另外就是基礎一定要穩,別被每種瀏覽器給嚇著亂了陣腳唷。

學css前要準備什麼?

輕鬆上手 CSS 系列文

做專題之後,陸陸續續會聽到同學也想學習 css,互相研究,加上有的朋友會問我該怎麼學習 css,如何上手?該從哪些資料開始著手?

這邊簡單跟大家分享我的經驗,也希望對想要學習 css 的人有所幫助:)

學 css 要買相關書籍嗎??

這一點並沒有正確的答案,端看你自己學習的狀況來判定。

大家可以先試著回想自己在學習其他軟體、語言的時候,是買市面上的書籍回家研究呢?還是在網路上找大家的教學來學習?

要看你自己習慣哪種模式,就跟著一貫的學習方式走吧。

另外一種建議方式,我是認為你可以先想想你是否為「 css 完全初學者」?

如果以下 10 個問題,如何有 7 項以上都符合你的狀態,那你就是 css 完全初學者。

  1. 如果不查資料,我不知道 css 的全名是什麼?
  2. 在我的印象裡頭,css 就等於是讓排版美觀的意思。
  3. 我不懂 html,也不懂怎麼把 html 還有 css 兜在一起。
  4. 看到很漂亮的網站,我會發自內心的讚嘆。卻不會去思考如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫…就只是單純欣賞.羨慕)
  5. 如果不查資料,我不懂 margin 以及 padding 的差別。
  6. 我一直不能理解標籤怎麼控制我的版面
  7. 打開一份 css 文件,我不懂要從何開始學習、觀看,甚至修改。
  8. 如果我成功的修改了字型大小、顏色還有超連結的狀態,我會覺得自己很厲害。
  9. 給我一份完全沒有 css 標籤的 html 檔案,我沒辦法獨力將他加上標籤、搭配 css 呈現出來。
  10. 我真的很想學 css ,可是我不知道從何學起。

測驗結束,如果你符合「css完全初學者」,那我會建議你買一本書,但是這本書一定要從頭開始把整個css的架構都講的很清楚,讓你可以從基本的概念學起

muki有沒有推薦的書籍??

這邊要跟大家說聲抱歉,我只買過一本實體書籍:「FrontPage2000」,其他 html 以及 css 都是從網路上自學而來。所以我並沒有買過相關書籍,也無從推薦你們哪本比較好。

建議如果要買書的朋友,可以先問問週遭會 css 的朋友,有沒有覺得不錯的書?但最重要的是,希望大家可以親自到實體書店走一趟,翻翻每本書的內容,看哪一本的編排最適合你。

不要只是聽了朋友的推薦就衝動買下來,到時候如果不喜歡書本的解說、或者覺得內容太難,就欲哭無淚囉。(這邊有Carrie推薦的幾本css、html書籍,大家可以去看看)

我要準備什麼工具??

假設你買好了書(或者從網路上蒐集到教學資訊),你可能會躍躍欲試,馬上就要開始寫 css。

但是你可能會發現無從下手?會不會因為你不知道要用什麼工具呢?

首先我們要知道一個概念,css 這個文件他無法單獨在瀏覽器中讀取,就算讀到也只是文字而已,css 必須搭配 html 才可以呈現他的效果

我常常拿大家熟悉的「人」來做例子。
今天你要出門,你一定要穿衣服才能出門吧!!!

  • 「裸體的你、什麼都沒穿的你」就是 html
  • 「穿在你身上的衣服、配件」就是 css

要搭配衣服(css)穿上自己(html)的身上,才可以有美麗的效果。所以說任何的美化一定要搭配一個實體的東西,否則就等於 0。

講到這裡,相信大家應該都懂了。

你的首要工具(知識),就是你一定要懂基礎的html,否則免談。如果你真的不懂,可能你要買的書籍就不是純粹的css,而是要搭配html的css書籍

假設你會基礎的 html,要開始學習 css,這時候你的工具選擇有兩種方式:

  1. 網頁編輯器的軟體輔助你使用 css (ex. DreamWeaver),網路上也有許多是小型免費的網頁編輯器軟體可供下載,大家也可以用用看。
  2. 文字編輯器的軟體輔助你使用 css (ex. VScode, Sublime, Brackets)。

我推薦大家使用網頁編輯的軟體(雖然我是用文字編輯),因為對初學者來說,大家不可能都把每一段 css 背的很熟,靠軟體輔助慢慢學習會比較好。

開始上手css

最後,有了好的教學書籍,有了很棒的輔助軟體,就要歡迎你來到 css 的世界囉!!

一開始你會學的很愉快,因為 css 普遍來說並不難。但是隨著接觸的資料愈多,需要用到更高深的技巧,甚至是 CSS3 搭配 HTML5 的變化時,可能會有很嚴重的挫敗感。不過請不要氣餒,因為學起來了就是你的!!!

css 不是一蹴可及的東西,他需要不斷的練習、學習,你才可以將他運用自如。
而且 css 一直在進化,我們都需要不斷上網學習新知識,才可以讓自己的網頁排版功力一直進步唷XD。