作者簡介

日比野新出生於日本京都府。高中畢業後，18歲時就擔任工程師。此後30年均從事商用軟體的提案、培育並錄用系統工程師和程式設計師等人才，以及用戶支援、系統維護及維修等工作。目前獨立創業，活用過去工程師的經驗，一邊從事行銷、宣傳、製作工作，也一邊撰稿銷售文案、建構及營運自媒體、臉書廣告的上稿營運等工作。工程師資歷30年，指導程式設計資歷15年。目前為止指導過的人數超過1,000人。現在也是十分受歡迎的程式設計教室「侍工程師培訓班」的權威講師。

譯者簡介

黃立萍一個需要養肝的全職媽媽，天天在孩子睡與醒的夾縫中求生存，並以SOHO身分從事各類採訪、撰稿，及中、日文翻譯等工作。譯作有《殘酷世界的生存法則》、《地點學》、《金融業者不能說的理財詭計》（以上皆為大是文化出版）。聯絡方式：ooxxsleeping1@gmail.com

作者自序

前言程式設計，沒有想像中那麼難「我真的能以程式設計為另一項技能，來增加收入嗎？」現在翻到這一頁的讀者們，應該有許多人都這麼想吧？一聽到「程式設計」，腦海中就浮現「堆砌在個人電腦畫面上的謎樣文字」，然後覺得那一定很難（我以前也是這樣）。在本書中，我們要運用這一堆謎樣的文字，把目標設定為「能夠自己製作出『登陸頁面』（LandingPage，或稱一頁式網站），獲得額外收入或是加薪」。如何？沒有程式設計相關經驗的人，或許會認為它看起來很困難。但是，請放心。只要讀完這本書，所有人都能夠「在兩到三個小時之內，從零寫出這樣的登陸頁面」。我相信，只要你能持續讀完，就能理解箇中援由。從程式設計門外漢的眼中來看，應該都會認為「這不是那麼簡單就能做到的」。確實，如果要詳細解說本書裡使用的三個程式語言（HTML、CSS、JavaScript），必須個別用一本書以上的分量才夠。然而，如果是關於程式設計，而且是專為初入門的新手而設計的「製作登陸頁面」，所需要的知識就相當有限了。在本書中，我從一般高達三本書的分量裡，抽出了以程式設計為工作技能時真正需要的內容。初學者只要先從這些部分開始，之後再鑽研對應所需的知識即可。這不是程式設計書，而是教你增加收入的方法此外，本書還有一項特色，是同類書籍所欠缺的。那就是，這不只是一本單純的程式設計書，而是一本商業書。本書是以「供初學者學習程式設計」為前提，因此會盡量減少複雜的公式和專業用語。此外，本書也整理了關於「如何尋找客戶」、「獲得客戶信賴的方法」等，當你實際以程式設計為工作技能之後，這些都是應該要知道的重點。不僅如此，為了盡可能讓讀者確實感受到自己的成長，我準備了許多要動手執行才能加深理解的內容。程式設計和學習外語一樣，熟能生巧非常重要，因此我很有信心，這個方法是掌握知識、技術的最短路徑。或許你會想，學習程式設計的門檻高，也只有一部分特別的人才能理解吧。「和資訊科技相關的工作，我完全不行」、「我不太懂程式數據，所以很害怕」，這些心情我都能理解。不過，只要你慢慢的理解以下三個階段，就能充分掌握程式設計的知識。1.從簡單的部分開始。2.設計之後，享受變化。3.增加動作，加深理解。為了確認我所說的話，請你在接下來的21天內，試著往下學習本書的課程。相信你每一天都能感覺到自己的成長，而且當你回過神時，已經能夠寫出登陸頁面了。除了本業，你可以有其他的收入來源我目前是自由工作者。在48歲時，我跳脫了過去的工作型態，揮別每天朝九晚五、、工作30年的軟體工程師職涯。在這三十年當中，我經歷過五次轉職，從正職員工到約聘員工，甚至是資訊科技業界中的工作型態「派遣人員」，這些我都嘗試過。我曾在職場的第一線指導過工程師，也曾為新進員工做教育訓練，指導對象合計超過一千人；也執行過系統開發的案件，從大型能源公司的經營統合系統到電商網站、網路的會員服務等，已累積了三百件以上的經驗。現在，我不僅是軟體工程師，也協助企劃、設計、建構電商網站和媒體網站，以及行銷、推廣等工作，同時也是業務文案撰稿人。除了這五項以上的工作之外，我從沒想過自己會獲得這樣的機會，能夠寫書、為客戶開設講座、培養程式設計師等。我有幸獲得客戶委託，從事各種工作，這些都是當我還是上班族時無法想像的。上班族的人生，可以更多采多姿我還是上班族時，一直都認為錢就是從公司那兒得到的酬勞，從未想過要運用自己的技術來賺取額外的收入。然而，在友人的介紹之下，我得到了一個製作登陸頁面的機會，人生才有了極大的轉變。我開始這樣想：「不但能從公司以外的收入來源賺到錢，而且只要努力，還可以賺到相應的豐厚報酬。」請不要捨棄自己的可能性。請務必利用本書創造機會，讓自己往「學會程式設計」邁進一小步。

名人導讀

推薦序一穿破程式設計學習迷霧的一支「雙雕箭」「紀老師程式教學網」版主／紀俊男我在電腦補習班執教程式設計 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網頁前端資源站」，致力於透過內容的撰寫與分享，減少初學者在學習新技術上的焦慮與不安。）

名人推薦

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

章節目錄

推薦序一穿破程式設計學習迷霧的一支「雙雕箭」／紀俊男推薦序二　從接案中學會寫程式，更務實又有效率！／網站帶路姬推薦序三　網頁開發不難，難在遇到一本好的入門書／陳柏融前言程式設計，沒有想像中那麼難在閱讀本書以前第一章零基礎也能學會寫程式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計算BMI12【步驟9】透過GoogleAnalytics解析流量13最後的收尾工作14【步驟10】調整為對應手機畫面15【步驟11】確認圖片和文字置中結語學習程式設計，能鍛鍊邏輯思考與解決問題的能力