零基礎寫程式:設計商品頁面、嵌入YT影片或Google地圖、FB貼文廣告、發電子報……沒學過程式的你,照樣能談加薪賺外快。

零基礎寫程式:設計商品頁面、嵌入YT影片或Google地圖、FB貼文廣告、發電子報……沒學過程式的你,照樣能談加薪賺外快。
定價:399
NT $ 279 ~ 359
  • 作者:日比野 新
  • 譯者:黃立萍
  • 出版社:大是文化
  • 出版日期:2020-07-28
  • 語言:繁體中文
  • ISBN10:957965493X
  • ISBN13:9789579654937
  • 裝訂:平裝 / 352頁 / 17 x 23 x 2.1 cm / 普通級 / 雙色印刷 / 初版
 

內容簡介

  ◎公司要做簡單的商品介紹頁面,但外包太貴,最好自己動手。
  ◎網拍商品,設計FB貼文廣告、IG限時動態問卷,沒有基礎的文科生照樣能搞定。
  ◎YouTube影片怎麼嵌入網頁?怎樣才能在網頁放Google地圖?
 
  以上這些技能,本書手把手教會你,就算零基礎也能學會寫程式,
  讓你更有本錢跟老闆談加薪、轉斜槓,收入馬上增加。
 
  作者日比野新是日本十分受歡迎的「侍工程師培訓班」權威講師。
  這間培訓班的學生,
  近九成都是程式設計的門外漢,也成功輔導許多人轉業。
  
  他本身擁有30年的工程師資歷,指導程式設計有15年的經驗。
  指導過的學生人數更超過一千人。
 
  本書的前提是「供初學者學習程式設計」,
  主題鎖定在專為新手而設計的商品行銷「登陸頁面製作」。
  
  書中提取三個程式語言(HTML、CSS、JavaScript)中,
  製作登陸頁面所需要的知識,即使是程式設計的門外漢也不用擔心。
  
  .什麼是登陸頁面(Landing page,或稱一頁式網站)?想想廣告傳單。
  FB貼文廣告的產品購買頁、IG限時動態連結的問卷等,都用得到登陸頁面。
  在網路銷售時代,這是必須的產品。
  
  .登陸頁面看起來很複雜,其實架構只有三個。
  網頁上特效多得讓人眼花撩亂,但構成的三要素很簡單:文字、設計、動作。
  這三個要素,分別可透過HTML、CSS、JavaScript來編排,書中手把手教你。
  
  .響應式網頁設計是什麼?
  就是讓一個網頁,在手機、平板、電腦上都容易閱讀。
  
  現在用手機看網頁很平常,但網頁是用電腦製作的,得要能對應不同裝置。
  書中教你,能同時確認網頁在手機、平板、電腦上的顯示狀態。
 
各界推薦
 
  「紀老師程式教學網」版主/紀俊男
  「WordPress 網站帶路姬」創辦人/網站帶路姬
  「PJCHENder網頁前端資源站」臉書粉絲專頁版主/陳柏融
 

作者介紹

作者簡介
 
日比野 新 
 
  出生於日本京都府。高中畢業後,18歲時就擔任工程師。此後30年均從事商用軟體的提案、培育並錄用系統工程師和程式設計師等人才,以及用戶支援、系統維護及維修等工作。
 
  目前獨立創業,活用過去工程師的經驗,一邊從事行銷、宣傳、製作工作,也一邊撰稿銷售文案、建構及營運自媒體、臉書廣告的上稿營運等工作。工程師資歷30年,指導程式設計資歷15年。目前為止指導過的人數超過1,000人。現在也是十分受歡迎的程式設計教室「侍工程師培訓班」的權威講師。
 
譯者簡介
 
黃立萍
 
  一個需要養肝的全職媽媽,天天在孩子睡與醒的夾縫中求生存,並以SOHO身分從事各類採訪、撰稿,及中、日文翻譯等工作。譯作有《殘酷世界的生存法則》、《地點學》、《金融業者不能說的理財詭計》(以上皆為大是文化出版)。
 
  聯絡方式:[email protected]
 

目錄

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

第一章 零基礎也能學會寫程式
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】確認圖片和文字置中

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

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