Sams Teach Yourself Responsive Web Design in 24 Hours (Paperback)
暫譯: Sams 24小時自學響應式網頁設計 (平裝本)

Jennifer Kyrnin

  • 出版商: SAMS
  • 出版日期: 2014-12-19
  • 售價: $1,400
  • 貴賓價: 9.5$1,330
  • 語言: 英文
  • 頁數: 384
  • 裝訂: Paperback
  • ISBN: 0672338386
  • ISBN-13: 9780672338380
  • 相關分類: 網頁設計
  • 立即出貨 (庫存=1)

買這商品的人也買了...

相關主題

商品描述

Learn responsive web design (RWD) with HTML5, CSS3 & JavaScript in just 24 one-hour lessons

 

Sams Teach Yourself Responsive Web Design in 24 Hours helps you create websites that work equally well on everything from smartphones and tablets to multi-screen monitors.

 

This book’s straightforward, step-by-step approach shows how to use HTML, CSS, and JavaScript to build the responsive sites today’s users and clients want. In just a few hours, you’ll be building layouts, sites, forms, and web apps that automatically adapt to virtually any device. Every lesson builds on what you’ve already learned, giving you a rock-solid foundation for real-world success.


Learn how to…

  • Create effective and reliable responsive designs with CSS3, HTML5, and JavaScript
  • Use progressive enhancement to consistently provide the right content while making the most of each device and browser
  • Establish breakpoints and write CSS media queries to respond appropriately to each user agent
  • Choose the right layout and wireframing approach for your site
  • Use web fonts to control typography and choose sizes that look good on any device
  • Master three ways to make tables responsive
  • Build responsive forms using the latest HTML5 tags and attributes
  • Implement responsive navigation patterns that users understand intuitively
  • Test for responsiveness and performance
  • Use Responsive Design + Server Side Components (RESS) to optimize performance

CONTENTS AT A GLANCE


PART I: INTRODUCTION TO RESPONSIVE WEB DESIGN

H OUR 1: What Is Responsive Web Design?

• History of Responsive Web Design

• Why We Need Responsive Web Design

HOUR 2 : Alternatives to Responsive Web Design

• Table-Based Layouts

• CSS Layouts

• Detection Scripts

HOUR 3: The Growth of Mobile

• Basic Cell Phones

• Smartphones

• Tablets

• Retina Devices

• Why Responsive Design Is Important

HOUR 4 : Progressive Enhancement

• What Is Progressive Enhancement?

• How to Use Progressive Enhancement on a

• Website

• Benefits of Progressive Enhancement

HOUR 5 : HTML for Responsive Web Design

• Using HTML5

• Clean Code

• Don’t Forget Semantic Elements

• Validating Your HTML

HOUR 6: Basic CSS

• How to Write CSS Rules

• Embedded and External Style Sheets

• Styling Fonts and Colors

• Creating a Layout with CSS

• Understanding Cascading and Specificity

HOUR 7: Unobtrusive JavaScript

• What Is Unobtrusive JavaScript?

• How to Implement Unobtrusive JavaScript

 

PART II: BUILDING A RESPONSIVE WEBSITE

HOUR 8: Planning a Responsive Website

• Should You Make Your Website Responsive?

• How to Plan for a Responsive Website

HOUR 9: Mobile First

• Why Design for Mobile First?

• What Makes a Site Mobile Friendly?

• What About Mobile Only?

HOUR 1 0: CSS Media Queries

• What Is a Media Query?

• Media Query Expressions

HOUR 1 1: Breakpoints

• What Is a Breakpoint?

• How to Define Breakpoints in CSS

• Optimal Breakpoints

HOUR 12: Layout

• What Is Web Layout?

• Types of Layouts

• Columns in Layout

HOUR 13 : Navigation

• Why Responsive Navigation Is Important

• What Makes Navigation Mobile Friendly?

• Basic RWD Navigation Patterns

HOUR 14: Responsive Fonts and Typography

• Using Web Fonts

• Sizing Typography

• Relative Versus Absolute Font Sizes

• New CSS3 Measurement Units

HOUR 15: Creating and Using Images in RWD

• Making Images Responsive

• Improving Download Speeds

• Building and Using Retina-Ready Images

HOUR 16: Videos and Other Media in RWD

• How to Make Videos Responsive

• Making YouTube Videos Responsive

HOUR 17: Tables in Responsive Web Design

• Tables on Small Devices

• Can Tables Be Responsive?

• Where Do Layout Tables Fit in RWD?

HOUR 18 : Responsive Web Forms

• HTML5 Forms

• Making Web Forms Usable

• Creating Responsive Forms

HOUR 19 : Testing Responsive Websites

• Testing in Your Browser

• Testing in a Device for All Your Breakpoints

• How to Test When You Don’t Have the Devices

HOUR 20 : Problems with Responsive Web Design

• Responsive Designs Can Be Slow

• RWD Can Make More Work for Designers

• Not All Customers Like Responsive Sites

• RWD May Break Advertising

 

PART III: IMPROVING RESPONSIVE DESIGN

HOUR 21: Tools for Creating Responsive Web Designs

• Planning and Designing Your RWD Site

• HTML Element and CSS Tools

• Web Editors for Building Responsive Web Pages

HOUR 22 : Device and Feature Detection

• Why Use Detection Scripts

• Modernizr

• WURFL

HOUR 23: Using RESS with RWD

• What Is RESS?

• Benefits of Using RESS

• Getting Started with RESS

• When to Use RESS

HOUR 24: RWD Best Practices

• Give Everyone the Best Experience

• Use the Best Breakpoints You Can

• Be Flexible and Think Small

• Don’t Forget the Content

• Manage Costs

商品描述(中文翻譯)

在24堂一小時的課程中學習使用HTML5、CSS3和JavaScript的響應式網頁設計 (RWD)

Sams Teach Yourself Responsive Web Design in 24 Hours 這本書幫助您創建在智能手機、平板電腦到多屏顯示器上都能良好運行的網站。

這本書的簡單明瞭、逐步的教學方法展示了如何使用HTML、CSS和JavaScript來構建當今用戶和客戶所需的響應式網站。在短短幾小時內,您將能夠構建自動適應幾乎所有設備的佈局、網站、表單和網頁應用程式。每一課都建立在您已經學到的知識之上,為您在現實世界中的成功打下堅實的基礎。

學習如何…
- 使用CSS3、HTML5和JavaScript創建有效且可靠的響應式設計
- 使用漸進增強技術持續提供正確的內容,同時充分利用每個設備和瀏覽器
- 建立斷點並撰寫CSS媒體查詢,以適當回應每個用戶代理
- 為您的網站選擇合適的佈局和線框設計方法
- 使用網頁字體來控制排版,並選擇在任何設備上看起來都好的字體大小
- 掌握三種使表格響應式的方法
- 使用最新的HTML5標籤和屬性構建響應式表單
- 實現用戶直觀理解的響應式導航模式
- 測試響應性和性能
- 使用響應式設計 + 伺服器端組件 (RESS) 來優化性能

內容概覽

第一部分:響應式網頁設計介紹

第一小時: 什麼是響應式網頁設計?

- 響應式網頁設計的歷史
- 為什麼我們需要響應式網頁設計

第二小時: 響應式網頁設計的替代方案

- 基於表格的佈局
- CSS佈局
- 偵測腳本

第三小時: 行動設備的增長

- 基本手機
- 智能手機
- 平板電腦
- Retina設備

- 為什麼響應式設計很重要

第四小時: 漸進增強

- 什麼是漸進增強?
- 如何在網站上使用漸進增強
- 漸進增強的好處

第五小時: 響應式網頁設計的HTML

- 使用HTML5
- 乾淨的代碼
- 不要忘記語義元素
- 驗證您的HTML

第六小時: 基本CSS

- 如何撰寫CSS規則
- 嵌入式和外部樣式表
- 字體和顏色的樣式
- 使用CSS創建佈局
- 理解層疊和特異性

第七小時: 非侵入式JavaScript

- 什麼是非侵入式JavaScript?
- 如何實現非侵入式JavaScript

第二部分:構建響應式網站

第八小時: 規劃響應式網站

- 您是否應該讓您的網站響應式?
- 如何為響應式網站進行規劃

第九小時: 行動優先

- 為什麼要以行動為先進行設計?
- 什麼使網站對行動設備友好?
- 那麼僅行動設備呢?

第十小時: CSS媒體查詢

- 什麼是媒體查詢?
- 媒體查詢表達式

第十一小時: 斷點

- 什麼是斷點?
- 如何在CSS中定義斷點
- 最佳斷點

第十二小時: 佈局

- 什麼是網頁佈局?
- 佈局的類型
- 佈局中的列

第十三小時: 導航

- 為什麼響應式導航很重要
- 什麼使導航對行動設備友好?
- 基本的RWD導航模式

第十四小時: 響應式字體和排版

- 使用網頁字體
- 字體大小
- 相對與絕對字體大小
- 新的CSS3測量單位

第十五小時: 在RWD中創建和使用圖像

- 使圖像響應式
- 改善下載速度
- 構建和使用Retina準備的圖像

第十六小時: RWD中的視頻和其他媒體

- 如何使視頻響應式
- 使YouTube視頻響應式

第十七小時: 響應式網頁設計中的表格

- 小設備上的表格
- 表格可以響應式嗎?
- 佈局表格在RWD中的位置

第十八小時: 響應式網頁表單

- HTML5表單
- 使網頁表單可用
- 創建響應式表單

第十九小時: 測試響應式網站

- 在您的瀏覽器中測試
- 在所有斷點的設備上測試
- 當您沒有設備時如何測試

第二十小時: 響應式網頁設計的問題

- 響應式設計可能會很慢
- RWD可能會增加設計師的工作量
- 不是所有客戶都喜歡響應式網站
- RWD可能會破壞廣告

第三部分:改善響應式設計

第二十一小時: 創建響應式網頁設計的工具

- 規劃和設計您的RWD網站
- HTML元素和CSS工具
- 用於構建響應式網頁的網頁編輯器

第二十二小時: 設備和功能檢測

- 為什麼使用檢測腳本
- Modernizr
- WURFL

第二十三小時: 在RWD中使用RESS

- 什麼是RESS?
- 使用RESS的好處
- 開始使用RESS
- 何時使用RESS

第二十四小時: RWD最佳實踐

- 為每個人提供最佳體驗
- 使用最佳的斷點
- 保持靈活並考慮小型設備
- 不要忘記內容
- 管理成本