從零開始學 3 種主流網頁版型,只要你學會,以後不怕接不到案子!
標準框架式網頁 Standard Layout / 網格框架式網頁 Grid Layout / 單頁式框架網頁 Single Page Layout
<摘自本書序>
說到寫 HTML及CSS程式碼,「看得懂」與「會不會寫」是不一樣的。也許你已經有片段的知識,可以修正與改變網頁中的部分元件,但你是否有過這樣的經驗,要將整個網頁從零開始設計並呈現出自己想要的感覺時,就不知道要從何著手,也不知道該怎麼做比較好?本書的目標,就是幫助有這些困擾的讀者,透過實做網站來提昇您的程式碼撰寫技能。
本書內容分為 3 篇,每篇都會先介紹 1 種目前最流行、最常見的網頁架構,然後從零開始撰寫 HTML 及 CSS 語法。您不必像前端工程師 (front-end engineer) 那麼熟悉語法,只需要認識基本的 HTML 標籤,就能以接近現場、跟著網頁設計師一起實作的形式來學習用 HTML5 及 CSS3 做出網頁。
本書的範例網站相當講究設計,並集結了許多 HTML 的要素及 CSS 的屬性。當你實際撰寫程式碼時,本書會針對必要的知識深入解說,讀者可從學習的過程中輕鬆獲得實用的知識。
跟著本書一起從零開始撰寫程式碼,若經過 3 次以上的重複演練,應該就可以抓住設計的感覺,並獲取將設計概念轉變為程式碼的訣竅。讓我們一起來享受寫程式和做網頁的樂趣吧!
本書特色:
○從零開始寫,再也不怕程式碼:網頁設計師帶你一步步、一行一行慢慢寫出完整的網站,並一一仔細說明
○學好網頁設計觀念,比會寫語法更重要:為什麼網頁要這樣編排?訪客的眼睛會先看哪裡?設計師告訴你業界的眉角,觀念對了,就能做出好用的網站
○掌握當今最流行的 3 大主流網頁版型:
標準版型 Standard Layout / 自動調整的網格版型 Grid Layout / 單頁式版型 Single Page Layout,會做這 3 種網頁,以後什麼案子都難不倒你!
作者簡介:
吉田真麻
1991 年生。在中學時代因製作個人行動網站,從而得知 HTML / CSS 的有趣之處,在高中及大學的課餘時間,因為己身興趣或工作因素而製作了幾個網站。19 歲左右開始才真正從事網站的製作,之後接觸 PHP 與 JavaScript,而開啟了自己在程式設計上的新視野。
目前是前端工程師 ( Front-end engineer ),主要工作是使用 HTML / CSS / JavaScript 技術以開發網頁應用程式、個人產品製作以及演講活動等等。
譯者簡介:
李保宜
高雄市立海青工商資料處理科 專任教師
高雄師範大學資訊教育所畢,著有《電子商務概論與實務-邁向 CIW 電子商務技術工程師 (IBA) 認證》、《電子商務應用與專題製作增訂版》、《網路拍賣理論與實作》、《CIW電子商務基礎篇》…等書。
楊瑩瑩
東海大學日本語文學系畢,曾任台北知名法律事務所日文秘書近十年時間,擁有 N1 能力試驗證書。
目錄
PART 1 標準框架式網頁 (Standard Layout)
CHAPTER 01 PART1 的網站說明
CHAPTER 02 撰寫 PART1 的基本程式碼
CHAPTER 03 撰寫網頁標題區塊 (header) 程式碼
CHAPTER 04 撰寫主要內容區塊 (main) 程式碼
CHAPTER 05 撰寫側邊選單區塊 (side menu) 程式碼
CHAPTER 06 撰寫底部區塊 (footer) 程式碼
☆ 挑戰自我撰寫程式碼
PART 2 網格框架式網頁 (Grid Layout)
Chapter 07 PART 2 的網站說明
Chapter 08 撰寫 PART 2 的基本程式碼
Chapter 09 撰寫 box 區塊的程式碼
Chapter 10 撰寫中型與大型 box 區塊的程式碼
Chapter 11 撰寫導覽列的程式碼
☆☆ 挑戰自我撰寫程式碼
PART 3 單頁式框架網頁 (Single Page Layout)
Chapter 12 PART 3的網站說明
Chapter 13 撰寫 PART 3 的基本程式碼
Chapter 14 撰寫網頁標題區塊 (header) 程式碼
Chapter 15 撰寫 Section 1 (ABOUT ME) 的程式碼
Chapter 16 撰寫 Section 2 (WORKS) 的程式碼
Chapter 17 撰寫 Section 3 (MY SKILLS) 的程式碼
Chapter 18 撰寫 Section 4 (CONTACT) 及底部區塊 (footer) 的程式碼
Chapter 19 支援智慧型手機的準備
Chapter 20 支援智慧型手機的程式碼
☆☆☆ 挑戰自我撰寫程式碼
PART 1 標準框架式網頁 (Standard Layout)
CHAPTER 01 PART1 的網站說明
CHAPTER 02 撰寫 PART1 的基本程式碼
CHAPTER 03 撰寫網頁標題區塊 (header) 程式碼
CHAPTER 04 撰寫主要內容區塊 (main) 程式碼
CHAPTER 05 撰寫側邊選單區塊 (side menu) 程式碼
CHAPTER 06 撰寫底部區塊 (footer) 程式碼
☆ 挑戰自我撰寫程式碼
PART 2 網格框架式網頁 (Grid Layout)
Chapter 07 PART 2 的網站說明
Chapter 08 撰寫 PART 2 的基本程式碼
Chapter 09 撰寫 box 區塊的程式碼
Chapter 10 撰寫中型與大型 box 區塊的程式碼
Chapter 11...