零基礎寫程式：設計商品頁面、嵌入YT影片或Google地圖、FB貼文廣告、發電子報……沒學過程式的你，照樣能談加薪賺外快。 文系でもプログラミング副業で月10万円稼ぐ!

作者簡介

日比野 新 

　　出生於日本京都府。高中畢業後，18歲時就擔任工程師。此後30年均從事商用軟體的提案、培育並錄用系統工程師和程式設計師等人才，以及用戶支援、系統維護及維修等工作。

　　目前獨立創業，活用過去工程師的經驗，一邊從事行銷、宣傳、製作工作，也一邊撰稿銷售文案、建構及營運自媒體、臉書廣告的上稿營運等工作。工程師資歷30年，指導程式設計資歷15年。目前為止指導過的人數超過1,000人。現在也是十分受歡迎的程式設計教室「侍工程師培訓班」的權威講師。

譯者簡介

黃立萍

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

　　聯絡方式：ooxxsleeping1@gmail.com

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

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

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

第三章 製作頁面的骨架，置入文字和圖像
1  用HTML指定網頁文章結構
2  表示文章結構的「符號」
3  HTML的架構，就像大箱子裡放小箱子
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】讓網頁方面在手機上瀏覽、調整圖像尺寸、解除繞行
19   CSS網頁設計的三大訣竅
20   設計以簡約為目標，善用「留白」
21  這三個方法協助你善用色碼
22  確認客戶提供的素材是否符合需求
23 檢視網頁於電腦、手機、平板的呈現樣貌，有更快的方法
專欄3 便利的圖像、插圖製作工具

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

第六章 開始製作登陸頁面
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】透過Google Analytics解析流量
13  最後的收尾工作
14  【步驟10】調整為對應手機畫面
15  【步驟11】確認圖片和文字置中

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