零基礎寫程式：設計商品頁面、嵌入YT影片或...

名人推薦：「紀老師程式教學網」版主／紀俊男
「WordPress 網站帶路姬」創辦人／網站帶路姬
「PJCHENder網頁前端資源站」臉書粉絲專頁版主／陳柏融

成為斜槓青年的最快選擇

現今，斜槓的種類越來越多，一個月多賺新臺幣兩、三萬元以上的人也不少。但另一方面，應該也有很多人不知道該做什麼才好。
在此，我要介紹幾個一般認為比較典型的型態，並且和程式設計相比較。

‧ 聯盟行銷
所謂聯盟行銷，是指「成果報酬型的廣告」。其機制是將特定的商品、服務等廣告刊載於網頁和部落格文章上，再依據點閱率賺取收益。
好處是雖然能輕易開始，但一個月可賺到豐厚收入的人少之又少，也有很多人連新臺幣兩、三百元也賺不到，就脫離這一行。此外，據說要需要花上半年左右的時間，才能達到收入穩定的程度。
‧ 網路寫手
網路寫手的案件很多，但是，單價卻低廉得讓人驚訝，有些案件「撰寫三千字的報導只拿新臺幣一百多元」。雖然只要累積成績，單價也會提高，但因為競爭激烈，做起來也沒那麼容易。
‧ 轉賣
所謂轉賣，就是以低價買進商品，再透過Amazon、樂天、二手商品交易平臺Mercari （按：類似臺灣的「露天拍賣」）等網站高價賣出，藉以獲利。現金流動性高、可以在喜歡的時間做，這些都是優勢。然而，轉賣不僅需要空間來放置庫存商品，還需要自行進貨、上架、包貨、寄送，可說是體力活兒。

那麼，以程式設計另一種斜槓又如何？

首先，由於資訊科技人才不足，需求可說是相當多。根據日本經濟產業省的調查顯示，2016 年當時IT人才的欠缺人數，竟高達約17 萬人。不僅如此，該調查估計，到了2020 年，還會來到兩倍以上，約37 萬人；到了2030 年，更會增加為2020 年的兩倍以上，約為79 萬人。（按：臺灣經濟部工業局調查，2019 年至2021 年臺灣資料服務產業總專業人才新增數約1萬4,000人，逐年上升。）
因此，我們可以預料，程式設計的人才需求，在未來也將持續攀升。當然，如果供給少於需求的情況持續下去，相信接案單價將會持續成長，變得更好賺錢。
2020 年開始，程式設計已成為日本小學生的必修課（按：臺灣108 課綱也將程式教育納入中學課程），因此若自己能夠理解，也可以教導孩子。不僅如此，只要學會程式設計，就能具備邏輯思考、解決問題的能力，相信在職場上也會很有幫助。

登陸頁面是什麼？想想廣告傳單

在網路上銷售、介紹商品或服務時，登陸頁面具有「廣告傳單的功能」。
登陸頁面大致上可分為四個部分。只要先了解架構，等你接到委託案之後，就更能理解製作的內容了。
那麼，接下來讓我們看看各個部分的相關內容。
‧ 廣告標語（Catch Copy）
有了廣告標語，才能引發瀏覽者的興趣，讓他們繼續閱讀網頁的正文。

‧ 正文（body copy）
先讓商品與讀者內心的問題有所共鳴，再介紹自己提供的解決對策。這些要素，是為了讓閱覽者認為，商家介紹的商品或服務「正好能解決我的煩惱」。

‧ 結論文案（closing）
結論文案是讓閱覽者毫不遲疑，立刻下單購買商品或服務的關鍵。

‧ 呼籲字句（call To Action）
讓閱覽者在閱讀結尾文案之後，馬上採取行動、下單購買。具體而言，就是讓閱覽者「按下按鈕，跳轉到購買頁面」。

網頁的架構，也可以套用在銷售文案上
以上這些規則不僅有助於設計登陸頁面，未來如果你想要銷售物品或服務時，只要記住這四個架構，應該會很有幫助。

注意這些眉角，包你案子接不完

為了獲得穩定的收入，你得想辦法抓住老客戶，只要能持續接到委託案件，不僅收入會更穩定，技能也會提升。
因此，我要告訴你「與客戶高明往來」的五個觸發條件。

‧ 讓對方感到輕鬆
比起詢問客戶：「該怎麼做才好？」你應該問：「我們有Ａ方案和Ｂ方案，你覺得哪一個比較好？」這種讓對方選擇的提問方式，就能讓對方不必費心思考並給出答案。

‧ 別讓客戶焦慮、不安
「聯絡不上」、「沒有回覆」，持續發生這些情況，會讓客戶焦慮，也會覺得不安。最後，不但無法與客戶建立信賴關係，對方也不想要再把工作委託給你。因此，請加快平時的回覆速度！

‧ 在製作期過一半時，先向對方確認
請盡可能在製作期過了一半時，就先向對方說明「成品大約是這樣的感覺⋯⋯」，讓客戶檢視一下過程。比起到了交件當日，才讓對方覺得「這方向不對呀」而慌了手腳，不如在交件前能從容的改善，對彼此來說合作會更愉快。

‧ 以對方的角度來思考
比起想著：「該怎麼做，自己才能輕鬆做事？」你應該先想想：「該怎麼做，對方才會開心？」打個比方，即便是寫電子郵件，也不只是寄出而已，而是要整理成收件者容易閱讀的內容，或讓對方更容易理解重點，如此考慮對方的立場來溝通是很重要的。這和談戀愛是同樣的道理。

‧ 準備替代方案
無論是什麼樣的工作，都會遇到一些自己目前無法解決的問題。這種時候，雖然可以簡單說一句「我辦不到」，但這麼一來，案子就飛了。所以，還是請你盡可能提出自己辦得到的替代方案。

網路就像人類的語言，會說，但不是人人都懂其中原理

網路之所以能受到人們廣泛使用，主要有三大理由：一、1991年，全世界第一個網站公開；二、1994年，網路商用化；三、1995年，Microsoft Windows95問世，掀起空前的網路風潮。
我們每天都在使用網路，但「網路」究竟是什麼？
所謂的網際網路（internet），是利用既定的規則，讓全世界的網絡能夠彼此交流的方法。在專業上，我們將它稱為「網路通訊協定」。網路通訊協定相當於人類的語言。說同樣語言的人，就能輕鬆的對話。
串連起全世界電腦的網絡（network）之間，藉由運作和人類語言相同的機制，我們才能在通勤電車上、從咖啡廳裡，連結到美國、巴西、西班牙，最後還能迅速、輕易的得知從南極昭和基地（按：日本位於南極的觀測基地）發送過來的資訊。

網際網路和全球資訊網不一樣？
我們經常會聽見「全球資訊網」（Web）這個詞彙，因此有許多人都會混淆，以為「網際網路等於全球資訊網」。
然而，網際網路和全球資訊網，在根本上意思完全不同。
所謂的「網際網路」（internet），是網絡之間相互連結、能夠彼此對話的機制，也是一種通訊規則。相對的，「全球資訊網（web）」則是我們平時在電腦、手機的畫面上看見的網頁。順帶一提，全球資訊網的正確名稱是「World Wide Web」。

頁面看起來很複雜，其實架構只有三個
乍看之下，登陸頁面製作起來似乎很複雜，其實它只是由「文字」、「設計」、「動作」這三個元素構成的。
一、文字：所謂的文字，是指瀏覽者要閱讀的文章。舉凡頁面上介紹的商品特性、使用商品後能獲得的未來理想樣貌等，都屬於文字。
二、設計：所謂的設計，則是決定了文章、圖像要配置在頁面的哪裡，以及如何將文章裡想強調的字詞顏色、字型等細節加以變化。
最近不只是電腦，用手機瀏覽時也要讓瀏覽者容易理解內容，因此配置就很重要了，所以設計和登陸頁面密不可分。
三、動作：是指想在登陸頁面添加「動作」時使用的。這裡所指的動作，並不是指從右到左移動的動作，而是指計算、顯示地圖、顯示影片這類動態。
動作不是登陸頁面的必要元素。不過，由於最近提供了具備動作資訊的案件也越來越多，因此我就以第三個要素來說明。

掌管三大要素的技術
為了實現前述①至③的要素，以下的技術分別各自擁有對應上述三項要素的功能。
一、文字（HTML）：主要負責決定文章、段落、資訊的彙整。
二、設計（CSS）：負責決定所有的設計。沒有這項技術，就做不出外觀好看、漂亮的網頁了。
三、動作（JavaScript）：負責支援動作的功能。這也是程式語言之一。

用HTML指定文章結構

製作網站頁面時不可或缺的工具之一，就是「HTML」。本節將帶各位一起了解它的功能！
網站頁面、登陸頁面，都要透過瀏覽器顯示。這時候，我們必須告訴瀏覽器以下內容：「文章的這個部分要分段喔」、「這是標題喔」、「會有個像是EXCEL的表格喔」、「有圖像喔」、「可以跳轉到其他頁面喔」等。

世界共通的語言「HTML」
指定文章功能的世界共通語言， 就是超文本標記語言（HyperText Markup Language，以下簡稱HTML）。雖然有許多人都聽過它，但應該有不少人不懂它的意義吧？
首先，「HyperText」是什麼？當我們點擊了網頁上「○○請按這裡」的按鈕或連結後，就會跳轉到其他網頁──你應該也曾有類似的經驗吧。儘管大家都沒有意識到自己每天都在使用它，但HyperText 就是一個能夠相互跳轉的功能。
所謂「Markup」，是指利用稱為「標籤」（tag）的世界共通、既定的文字，以便讓瀏覽器能夠理解的方式。
「Language」則是語言的意思。提到語言，或許對程式設計有興趣的讀者，會聯想到「Java」、「C語言」、「Python」、「PHP」這些令局外人費解的詞彙。
然而，和這些程式語言相比，HTML無論在記憶或使用上，都顯得非常簡單。繼續閱讀本書，你應該就能立即解讀了。

成為斜槓青年的最快選擇

現今，斜槓的種類越來越多，一個月多賺新臺幣兩、三萬元以上的人也不少。但另一方面，應該也有很多人不知道該做什麼才好。
在此，我要介紹幾個一般認為比較典型的型態，並且和程式設計相比較。

‧ 聯盟行銷
所謂聯盟行銷，是指「成果報酬型的廣告」。其機制是將特定的商品、服務等廣告刊載於網頁和部落格文章上，再依據點閱率賺取收益。
好處是雖然能輕易開始，但一個月可賺到豐厚收入的人少之又少，也有很多人連新臺幣兩、三百元也賺不到，就脫離這一行。此外，據說要需要花上半年左右的時間，才能達到收...

推薦序一
穿破程式設計學習迷霧的一支「雙雕箭」
「紀老師程式教學網」版主／紀俊男

我在電腦補習班執教程式設計 30 年的經驗中，學生最常問我的問題就是：「老師，我想學程式，我該怎麼開始？」以及「老師，我學完某某程式語言了，接下來我能做什麼？」前一個問題，通常發生在報名我的課程之前；後一個問題，則通常發生在學完我的課程之後。

對於上面兩個問題，我的回答常常帶著一點狡猾：「看你的需求啊！」、「能做的事很多，讓我們到那邊坐下來慢慢聊……。」所以當我看到本書作者，建議初學者從網頁設計開始，並結合「登陸頁」（Landing Page）的製作，讓讀者馬上能「用」，不禁讚嘆他教案「學用並進」的設計巧思。

網頁程式設計好上手，還能夠用來製作登陸頁，將讀者的產品、夢想，透過網路推銷出去！這招「學程式順便賺錢」的手法實在太高了！一次消弭「不知從何開始」與「不知學完後能幹什麼」的兩大問題。不僅替零基礎的讀者指出一條學習道路，也用一本書同時貫穿程式設計與網路行銷兩大主題。這種能穿過迷霧、一箭雙雕的書，實在罕見！

作者摒棄坊間電腦書「從A到Z」的生硬教法，利用「製作瑜伽教室登陸頁」的範例貫穿全書。先以實務問題引起讀者的興趣，然後把HTML、CSS、JavaScript這些網頁程式技巧，由淺入深的依序切入。不僅如此，連怎麼製作網路廣告頁、怎麼監控網站流量，這些「行銷面」的知識，也穿插在正確的時間點出現。

除此之外，本書還有不容忽視的五大優點，是我想特別推薦給讀者的：

‧範例選題精準：作者用「瑜伽教室」當範例真的是太妙了！不僅能示範如何在網頁顯示文字、圖片，也能示範展示影片、播放心靈音樂等功能。讓拜訪您網站的觀眾，瞬間融入瑜伽的空靈境界。換成瑜伽以外的範例，恐怕無法如此全面的展現這麼多網頁功能。

‧文、碼、圖恰如其分：不同於某些電腦書籍，太過強調文字描述、程式碼、或畫面截圖其中之一，本書作者把「文、碼、圖」三者平衡得非常好！既不會被大量文字敘述淹沒，也不會在一整頁中塞滿如外星文字的程式碼，更不會用一堆螢幕截圖，讓你覺得這本書是在靠圖片「騙錢」。很難做到平衡這三者，這一點值得稱讚！

‧擅長整理、舉例、發明口訣：日本作者一向善於舉例或用手繪卡通來表達各種概念，這一點我想大家都認同。本書作者還很會發明口訣，像他在書中提到如何替網站選擇吸睛圖片時，說了「3B」原則，亦即「Baby、Beauty、Beast」（幼兒、美女、動物）。這讓我笑著笑著，就記住了。

‧製作用心：針對原文提到的日文網站，本書會很用心的找到臺灣類似的網站是哪些。展示執行結果的圖片，也沒偷懶用日文截圖，而是全數重製成中文。即便語言不同，仍能感受到日文原書的優秀之處。

總之，這本書或許不是什麼主題都有的百寶箱，不過它一定是能在關鍵概念上拉你一把的「救命草」。接下來，就輪到您上場了！記得在看完一章後，照著每章的「Let’s Try」單元，打開電腦、動動雙手。天底下沒有同學能看完「游泳入門」後，跳入水中就能換氣的。不過我保證，只要肯天天實作，本書甘若純蜜的醍醐味，一定能澆灌入頂，把程式設計變成您一生的技能，不離不棄！

（本文作者為「紀老師程式教學網」臉書粉絲專頁版主、「和群資訊公司」創辦人，擁有30年程式設計教學經驗。）

推薦序二
從接案中學會寫程式，更務實又有效率！
「WordPress 網站帶路姬」創辦人／ 網站帶路姬

坊間有很書籍能教你寫複雜的程式、也有很多書籍教你接案。但是，今天介紹的這一本書，竟然帶著你直接從接案中學習寫程式！讓人學起程式來更有動力、也更有效率！

很多人都知道，會寫程式有很多好處，可以做網站、可以自由的把網站改成自己想要的樣子。然而，大部分學習程式語言的書籍，都充滿艱深的詞彙，初學者通常看不到幾頁，就看不下去了；還有很多人也許會接其他行業的案子，卻沒有接過網頁設計相關的，於是在接案過程中感到非常不確定與沒有自信。作者日比野新的這一本書，不是程式設計書，而是商業書！他用最白話的文字，搭配恰到好處的節奏，讓你只需要花很短的時間，不只能學會做出一個網頁，而且還能學到接案流程、接案時的注意事項等，真的可以開始賺錢！

我本身是使用者介面（UI） 與網頁設計師。過去兩年來，致力於經營「網站帶路姬」部落格，希望透過最生活化的比喻、最淺顯易懂的方式，帶領完全不懂程式的人無痛進入 WordPress 的世界，讓每個人都能輕鬆做出網站。WordPress 是目前世界上最有名的架站工具之一，不用寫程式，就能夠幫助大家，快速做出一個個看起來很專業的網站。然而，這些工具表面上提供大家視覺化的互動介面，讓你經由輕鬆的拖拉元素，就能做出網頁，但其背後的運作原理，不外乎還是幫你產生，可讓網頁瀏覽器轉譯成網頁的程式碼。

許多人使用了如WordPress這樣的架站工具後，如果發現有些地方無法直接透過後臺介面去「設定」出自己要的樣子，就束手無策，只好屈就於它的限制及不夠完美的設計。其實，如果大家能學習一點基礎的網頁相關程式語法，像是書中所提到的 HTML、CSS與 JavaScript，就能輕鬆克服上述的問題，更可以針對細節寫一些程式，就能做到完全客製化，更貼近自己想要的樣子。

另一方面，有些人在WordPress裡，透過外掛的方式來經營搜尋引擎最佳化（Search Engine Optimization，簡稱SEO)，希望提升網站的 Google 排名，可是常常在過程中，不確定自己做的到底對或錯？這時候，如果能懂一點基本的 HTML 知識，就能幫助你正確的檢測與判斷。

網頁設計的市場需求非常大。試想，你周遭的每一個人，都需要一個網頁來呈現自己的履歷或作品；你周遭的每一家公司，都需要一個商業網站來銷售服務或商品。不過，不是每個人都有時間自己製作網站，因此，如果能越早開始學習寫程式，就越早有機會開始做程式設計的副業，多一筆額外的收入！資歷越深、收入還越高！不論你是想跟著作者的教學，專注於一頁式登陸頁的設計與接案；或是使用WordPress之類的工具來架站與接案，並搭配本書作者的教學，加強自己客製化設計的能力，本書都是很棒的選擇！

身為使用者介面設計師的我，更加深刻體會到作者的用心，他處處為不懂程式的朋友著想、刻意避開艱澀的專有名詞、使用了許多生活化的比喻、設計簡潔又易於閱讀的排版，讓人學習起來很輕鬆、沒有壓力，一點都不像在學寫程式！這本《零基礎寫程式》真是一本好書，值得推薦給不懂程式的新手們。

（本文作者為「WordPress網站帶路姬」部落格及「WordPress 不懂程式的新手站長──網站帶路姬學園」臉書社團的創辦人，擁有超過18年的網頁設計經驗。）

推薦序三
網頁開發不難，難在遇到一本好的入門書
「PJCHENder網頁前端資源站」臉書粉絲專頁版主／陳柏融

轉職網頁工程師，到現在也快 5 年了，當初誤打誤撞走上了網頁開發這條路。因為網頁開發可以在畫面上得到立即回饋、與使用者又有高度互動，這種程式開發讓我深深著迷。

近幾年來，網頁開發的應用情境越來越廣，從過去單純只能在瀏覽器中檢視的網頁，到現在已經可以用來製作手機上的 App，以及電腦上的應用程式、AI 機器學習和區塊鏈等應用，這些都可以透過相同或相似的網頁開發技術達到。

因此，有越來越多人想要嘗試並投入這個領域，但在嘗試之前卻往往抓不到方向。雖然網路上的學習資源包山包海，卻也讓初學者不知道該從哪裡開始入門？一方面，初學者看到有如天書般的程式碼後，還沒開始就決定放棄；另一方面則擔心自己花了大量時間後，卻發現所學並不是自己想要的，於是不斷思考「我適合這個領域嗎？」、「我真的對這個領域有興趣嗎？」

如果你經常聽到網頁開發、想要嘗試學習，但又不確定自己到底喜不喜歡、有沒有興趣，又或者單純只是好奇，每天都在瀏覽的無數網站是怎麼產生的，那麼《零基礎寫程式》這本書非常適合你。

這本書將會一步一步帶著你建立網頁，從一開始的 HTML 架構，接著搭配 CSS 、幫網頁添加造型與設計、最後透過 JavaScript 來增加更多與使用者互動的功能。這本書是特別為了「零基礎」的入門者所規劃，因此在難易度的拿捏上用心做了取捨，也詳細的描述入門者比較容易掌握的觀念，而對於較艱深進階的觀念，則是請讀者們先跟著書中內容做過一遍，再去探究原理。

在閱讀本書的過程中，建議讀者們可以跟隨作者的說明，體驗製作網頁過程的成就感與樂趣。這本書適合完全沒有程式開發經驗，又想了解網頁開發的人，不論你是產品經理、學生、考慮轉職的上班族，都可以從這本簡易的入門書開始上手。跟著本書體驗過後，相信你將更清楚自己是否對網頁設計與程式開發感興趣、是不是願意花更多時間繼續投入學習。

（本文作者在考取臨床心理師後轉職軟體工程師，同時經營「PJCHENder網頁前端資源站」，致力於透過內容的撰寫與分享，減少初學者在學習新技術上的焦慮與不安。）

推薦序一
穿破程式設計學習迷霧的一支「雙雕箭」
「紀老師程式教學網」版主／紀俊男

我在電腦補習班執教程式設計 30 年的經驗中，學生最常問我的問題就是：「老師，我想學程式，我該怎麼開始？」以及「老師，我學完某某程式語言了，接下來我能做什麼？」前一個問題，通常發生在報名我的課程之前；後一個問題，則通常發生在學完我的課程之後。

對於上面兩個問題，我的回答常常帶著一點狡猾：「看你的需求啊！」、「能做的事很多，讓我們到那邊坐下來慢慢聊……。」所以當我看到本書作者，建議初學者從網頁設計開始，並結合「登陸頁...

前言
程式設計，沒有想像中那麼難

「我真的能以程式設計為另一項技能，來增加收入嗎？」
現在翻到這一頁的讀者們，應該有許多人都這麼想吧？一聽到「程式設計」，腦海中就浮現「堆砌在個人電腦畫面上的謎樣文字」，然後覺得那一定很難（我以前也是這樣）。
在本書中，我們要運用這一堆謎樣的文字，把目標設定為「能夠自己製作出『登陸頁面』（LandingPage，或稱一頁式網站），獲得額外收入或是加薪」。
如何？沒有程式設計相關經驗的人，或許會認為它看起來很困難。
但是，請放心。只要讀完這本書，所有人都能夠「在兩到三個小時之內，從零寫出這樣的登陸頁面」。我相信，只要你能持續讀完，就能理解箇中援由。
從程式設計門外漢的眼中來看，應該都會認為「這不是那麼簡單就能做到的」。確實，如果要詳細解說本書裡使用的三個程式語言（HTML、CSS、JavaScript），必須個別用一本書以上的分量才夠。
然而，如果是關於程式設計，而且是專為初入門的新手而設計的「製作登陸頁面」，所需要的知識就相當有限了。
在本書中，我從一般高達三本書的分量裡，抽出了以程式設計為工作技能時真正需要的內容。初學者只要先從這些部分開始，之後再鑽研對應所需的知識即可。

這不是程式設計書，而是教你增加收入的方法
此外，本書還有一項特色，是同類書籍所欠缺的。那就是，這不只是一本單純的程式設計書，而是一本商業書。
本書是以「供初學者學習程式設計」為前提，因此會盡量減少複雜的公式和專業用語。
此外，本書也整理了關於「如何尋找客戶」、「獲得客戶信賴的方法」等，當你實際以程式設計為工作技能之後，這些都是應該要知道的重點。
不僅如此，為了盡可能讓讀者確實感受到自己的成長，我準備了許多要動手執行才能加深理解的內容。程式設計和學習外語一樣，熟能生巧非常重要，因此我很有信心，這個方法是掌握知識、技術的最短路徑。
或許你會想，學習程式設計的門檻高，也只有一部分特別的人才能理解吧。「和資訊科技相關的工作，我完全不行」、「我不太懂程式數據，所以很害怕」，這些心情我都能理解。
不過，只要你慢慢的理解以下三個階段，就能充分掌握程式設計的知識。

1.從簡單的部分開始。
2.設計之後，享受變化。
3.增加動作，加深理解。

為了確認我所說的話，請你在接下來的21天內，試著往下學習本書的課程。相信你每一天都能感覺到自己的成長，而且當你回過神時，已經能夠寫出登陸頁面了。

除了本業，你可以有其他的收入來源
我目前是自由工作者。在48歲時，我跳脫了過去的工作型態，揮別每天朝九晚五、、工作30年的軟體工程師職涯。
在這三十年當中，我經歷過五次轉職，從正職員工到約聘員工，甚至是資訊科技業界中的工作型態「派遣人員」，這些我都嘗試過。
我曾在職場的第一線指導過工程師，也曾為新進員工做教育訓練，指導對象合計超過一千人；也執行過系統開發的案件，從大型能源公司的經營統合系統到電商網站、網路的會員服務等，已累積了三百件以上的經驗。
現在，我不僅是軟體工程師，也協助企劃、設計、建構電商網站和媒體網站，以及行銷、推廣等工作，同時也是業務文案撰稿人。
除了這五項以上的工作之外，我從沒想過自己會獲得這樣的機會，能夠寫書、為客戶開設講座、培養程式設計師等。我有幸獲得客戶委託，從事各種工作，這些都是當我還是上班族時無法想像的。

上班族的人生，可以更多采多姿
我還是上班族時，一直都認為錢就是從公司那兒得到的酬勞，從未想過要運用自己的技術來賺取額外的收入。然而，在友人的介紹之下，我得到了一個製作登陸頁面的機會，人生才有了極大的轉變。
我開始這樣想：「不但能從公司以外的收入來源賺到錢，而且只要努力，還可以賺到相應的豐厚報酬。」
請不要捨棄自己的可能性。請務必利用本書創造機會，讓自己往「學會程式設計」邁進一小步。

前言
程式設計，沒有想像中那麼難

「我真的能以程式設計為另一項技能，來增加收入嗎？」
現在翻到這一頁的讀者們，應該有許多人都這麼想吧？一聽到「程式設計」，腦海中就浮現「堆砌在個人電腦畫面上的謎樣文字」，然後覺得那一定很難（我以前也是這樣）。
在本書中，我們要運用這一堆謎樣的文字，把目標設定為「能夠自己製作出『登陸頁面』（LandingPage，或稱一頁式網站），獲得額外收入或是加薪」。
如何？沒有程式設計相關經驗的人，或許會認為它看起來很困難。
但是，請放心。只要讀完這本書，所有人都能夠「在兩到三個小時之...

推薦序一穿破程式設計學習迷霧的一支「雙雕箭」／紀俊男
推薦序二　從接案中學會寫程式，更務實又有效率！／網站帶路姬
推薦序三　網頁開發不難，難在遇到一本好的入門書／陳柏融
前言程式設計，沒有想像中那麼難
在閱讀本書以前

第一章零基礎也能學會寫程式
1成為斜槓青年的最快選擇
2程式設計初學的第一步：客戶在哪裡
3從接案到收入進帳的流程
4登陸頁面是什麼？想想廣告傳單
5沒有萬用的頁面，得隨時更新改善
6注意這些眉角，包你案子接不完
7從新手進階到老手後，你會賺更多
專欄1最強大的文字編輯器「AdobeBrackets」

第二章開始寫之前，你得先知道這些事！
1網路就像人類的語言，會說，但不是人人都懂其中原理
2網站就是網頁的集合
3谷歌人人在用，檢索技巧卻不是誰都會，你信不信？
4寫程式一定要知道的三個詞彙
5終於到準備階段了，先整頓作業環境！
6頁面看起來很複雜，其實架構只有三個
【練習1】範例檔案的顯示

第三章製作頁面的骨架，置入文字和圖像
1用HTML指定網頁文章結構
2表示文章結構的「符號」
3HTML的架構，就像大箱子裡放小箱子
4學習HTML的24個常用標籤（前篇）
5設定網頁中「開始的宣告」和「指定大箱子」
6在HTML指定「兩個小箱子」
7放進「第一個小箱子」的字元編碼和標題
8「第二個小箱子」則要分三個部分來指定
9用些小技巧，讓程式碼更容易閱讀
10如何顯示特殊符號？
【練習2】指定字元編碼、放進特殊符號和縮排
11用次標題突顯重要字詞
12善用段落和換行，更容易閱讀
13添加摘錄、引用其他文章和資訊，更容易讓人信服
14用文字尺寸和強調凸顯重點
15條列重點，讓訴求更能打動瀏覽者
【練習3】活用次標題、條列與換行
16在網頁中插入圖像
17設定跳轉到其他頁面
18使用「排版區塊」
19設定「按鈕」，讓程式運作
【練習4】插入圖像及按鈕、設定跳轉和排版區塊
20學習HTML的24個常用標籤（後篇）
21添加有意義的圖像和圖片描述
22嵌入影片或Google地圖
23自己製作的影片，一樣可以嵌入網頁
24在網頁嵌入音檔
【練習5】嵌入影片和音檔、加上圖片描述
專欄2商標會改變人們的印象！從這些免費商標製作網站著手

第四章這樣設計，讓瀏覽者想一口氣讀完！
1網站版型設計的基礎語言「CSS」
2如何用CSS改變網頁外觀？
3如何撰寫樣式表
4版型設計上須知的六個基礎知識
5調整文字的字體，讓設計呈現想要的氛圍
6改變文字的顏色和粗細
7改變文字大小，凸顯標題層次
8調整文字對齊方式和頁面背景顏色，替文章增添節奏
【練習6】用CSS調整文字大小、顏色、位置
9九個技巧，頁面更吸睛
10設定圖像的大小
11指定「文繞圖」的位置
12解除「文繞圖」的設定
13加上圓角的邊框，增加柔和氛圍
14利用「螢光筆劃記」來強調文字
【練習7】設定文繞圖、添加圓角框和螢光筆劃記
15在文字行距間留點空白，讓閱讀多點喘息
16游標一碰到連結，文字設計就會改變
17為連結加上彈跳的動畫效果，被點擊的次數就會增加
【練習8】文字行距拉大，改變連結顏色、讓連結彈跳
18讓網頁在手機上也容易閱覽
【練習9】讓網頁方面在手機上瀏覽、調整圖像尺寸、解除繞行
19CSS網頁設計的三大訣竅
20設計以簡約為目標，善用「留白」
21這三個方法協助你善用色碼
22確認客戶提供的素材是否符合需求
23　檢視網頁於電腦、手機、平板的呈現樣貌，有更快的方法
專欄3便利的圖像、插圖製作工具

第五章只要加上「動作」，就能提升網頁完成度
1用JavaScript增添「動作」
2利用JavaScript來計算
3JavaScript程式碼可以放在三個位置
4善用外部檔案，製作網頁更有效率
5在JavaScript中使用的十個基礎語法
6用彈出式視窗顯示「警告訊息」
7只要克服了這一關，就不再是初學者
8加上「條件判斷」，變數運作更順暢
9計算的基本概念，你還記得多少？
10使用「函數」，讓程式重複處理
11會用到JavaScript的三個實作項目
12將簡單的四則運算套入網頁中
13設定「一鍵回到畫面頂端」的功能
14用GoogleAnalytics分析，掌握瀏覽者的行動
【練習10】加入計算程式、使用JavaScript、GoogleAnalytics

第六章開始製作登陸頁面
1安排登陸頁面的整體製作流程
2製作登陸頁面的事前準備
3【步驟1】製作登陸頁面的草稿
4【步驟2】準備登陸頁面要用到的素材
5【步驟3】準備登陸頁面要使用的文章
6開始製作登陸頁面
7【步驟4】利用HTML製作骨架
8【步驟5】導入文章
9【步驟6】嵌入圖像、插畫
10【步驟7】利用CSS調整設計
11【步驟8】利用JavaScript計算BMI
12【步驟9】透過GoogleAnalytics解析流量
13最後的收尾工作
14【步驟10】調整為對應手機畫面
15【步驟11】確認圖片和文字置中

結語學習程式設計，能鍛鍊邏輯思考與解決問題的能力

推薦序一穿破程式設計學習迷霧的一支「雙雕箭」／紀俊男
推薦序二　從接案中學會寫程式，更務實又有效率！／網站帶路姬
推薦序三　網頁開發不難，難在遇到一本好的入門書／陳柏融
前言程式設計，沒有想像中那麼難
在閱讀本書以前

第一章零基礎也能學會寫程式
1成為斜槓青年的最快選擇
2程式設計初學的第一步：客戶在哪裡
3從接案到收入進帳的流程
4登陸頁面是什麼？想想廣告傳單
5沒有萬用的頁面，得隨時更新改善
6注意這些眉角，包你案子接不完
7從新手進階到老手後，你會賺更多
專欄1最強大的文字編輯器「AdobeBrackets」...