พัฒนาเว็บไซต์ · WDC-01-23

Basic Responsive Web Design

หลักสูตร Basic Responsive Web Design เป็นการอบรมหลักการออกแบบเว็บให้แสดงผลได้ดีบนหน้าจอหลายขนาด ทั้ง Desktop มือถือ และ Tablet ด้วยแนวคิด Responsive Web Design แล้วนำไปประยุกต์สร้างเว็บจริง เหมาะกับ Web Designer, Web Developer และผู้ที่เคยสร้างเว็บด้วย CSS มาบ้าง โดยควรมีพื้นฐาน HTML และ CSS

ราคาเริ่มต้น 3,900 บาท / ท่าน ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

หลักสูตร สำหรับผู้ที่จะเรียนรู้หลักการออกแบบบนหน้าจอขนาดต่าง ๆ และนำไปประยุกต์สร้างเว็บด้วยแนวคิดและหลักการของ Responsive Web Design ที่ช่วยตอบสนองการแสดงผลเว็บไซต์ได้ดี และมีประสิทธิภาพสำหรับอุปกรณ์สื่อสาร เช่น Desktop, มือถือ, Tablet และยังได้เรียนรู้หลักการออกแบบและพัฒนาเว็บไซต์ในอนาคตอีกด้วย

สิ่งที่คุณจะได้รับ

เพื่อให้ผู้สนใจได้เข้าใจหลักการทำงานของ Responsive Web Design
เพื่อให้ผู้เข้าร่วมอบรมมีความรู้และความเข้าใจขั้นตอนของ Responsive บนอุปกรณ์ต่างๆ
เพื่อให้ผู้เข้าร่วมอบรมสามารถประยุกต์เทคนิคต่างๆ บนอุปกรณ์พกพาได้

หลักสูตรนี้เหมาะสำหรับ

ผู้ที่เคยผ่านงานในการสร้างเว็บไซต์ด้วย CSS มาพอสมควร
Web Designer
Web Developer
ผู้ที่ต้องการเรียนรู้การทำงานและการออกแบบ Responsive Web Design เพื่อเพิ่มประสิทธิภาพในการทำงาน

พื้นฐานของผู้เข้าอบรม

สามารถใช้ Internet เบื้องต้นได้
มีพื้นฐานการเขียนโปรแกรมด้วยภาษา HTML และ CSS เบื้องต้น

หัวข้อการฝึกอบรม

บทนำ

1. ทบทวน CSS

CSS: การนำเสนอหน้าเว็บ

CSS3 คืออะไร
ใครเป็นผู้ดูแลมาตรฐาน CSS3
ทำไมควรเขียน CSS3
CSS3 เกิดขึ้นเมื่อไร

CSS Frameworks, Libraries และ Preprocessors

CSS Library คืออะไร
CSS Framework คืออะไร
CSS Preprocessor คืออะไร

ไวยากรณ์ของ CSS

CSS Selectors

นิยามศัพท์
ประเภทของ Selector

การปรับแต่ง Selector ให้มีประสิทธิภาพ

การปรับแต่ง CSS ให้มีประสิทธิภาพ

2. รู้จัก Responsive Web Design (RWD)

Responsive Web Design คืออะไร

Responsive Web Design กับ Responsive Web Layout
Responsive Layout กับ Adaptive Layout

ทำไมควรใช้ Responsive Web Design

RWD เทียบกับกลยุทธ์ Responsive แบบอื่นอย่างไร

Server-Side Device Detection (SSDD)
Responsive Web Design with Server Side Components (RESS)

ใครรับผิดชอบงาน RWD

ควรใช้ RWD เมื่อไร

จะนำ RWD ไปใช้อย่างไร

เทคนิคพื้นฐานของ RWD

Feature Detection
อิลิเมนต์ Viewport
Responsive Layouts
Media Queries
Responsive Images
Responsive Tables

ภาพรวมเทคนิค RWD

โซลูชันด้วย HTML
โซลูชันด้วย CSS
โซลูชันด้วย JavaScript

Responsive เทียบกับ Adaptive และ RESS

ตัวอย่าง Liquid Layout
ตัวอย่างการออกแบบแบบ Responsive
ตัวอย่างการออกแบบแบบ Adaptive
ตัวอย่างการออกแบบแบบ RESS

ข้อดีและข้อเสียของเทคนิค Responsive Design

3. พื้นฐาน Responsive Web Design

Feature Detection

Viewport และ Media Query

CSS Box Model และ CSS Reset

ทำความเข้าใจ Feature Detection

การใช้ไลบรารี Modernizr
Modernizr คืออะไร

ทำความเข้าใจ Viewport

Viewport คืออะไร
Properties ของ Viewport
ตัวอย่างโค้ด Viewport Meta Element
ความกว้างของ Viewport วัดเป็นพิกเซลอย่างไร

ทำความเข้าใจแอตทริบิวต์ Media และ Media Types

จะกำหนด Media Type ไว้ที่ไหน
Media Types ที่รองรับ

ทำความเข้าใจ Media Queries

Media Query คืออะไร
ไวยากรณ์ของ Media Query
เขียน Media Query ได้ที่ไหนบ้าง
Media Query กับ Cascade
Media Query Features
Demo: ทำความเข้าใจ Media Query

ทำความเข้าใจ CSS Box Model และ CSS Reset

CSS Box Model คืออะไร
CSS Reset

4. เทคนิคการจัด Layout แบบ Responsive

Fixed Layout

หน่วยวัดแบบคงที่หรือแบบสัมบูรณ์ใน CSS
ข้อดีข้อเสียของ Fixed Layout

Liquid (หรือ Fluid) Layout

หน่วยวัดแบบสัมพัทธ์ใน CSS
ข้อดีข้อเสียของ Liquid Layout

Elastic Layout

Elastic Layout คืออะไร
การสร้าง Elastic Layout

Adaptive Layout

Flex-box Layout

Flex-box คืออะไร
Flex Layout Model
Properties ของ Flex-box
การสร้าง Flex-box Layout แบบ Responsive
การสร้าง Flex-box Layout

Grid Layout

Grid Layout คืออะไร
Grid Layout Model
แบบฝึกหัด: สร้าง Grid Layout
โจทย์ท้าทาย: สร้าง Grid Layout

Multi-Column Layout

CSS Multi-Column คืออะไร
Properties ของ Column
ปัญหาการออกแบบที่เกี่ยวกับ Column
Demo: ไฟล์ตัวอย่าง Column
การสร้าง Container สำหรับ Multi-Column Layout

การใช้ Responsive Frameworks

Twitter Bootstrap

5. Responsive Typography

บทนำ

Responsive Typography คืออะไร

ตัวเลือกการกำหนดขนาดฟอนต์

หน่วยวัดแบบคงที่
หน่วยวัดแบบสัมพัทธ์
หน่วยวัดแบบสัมบูรณ์เทียบกับแบบสัมพัทธ์

6. Responsive Images

Responsive Images คืออะไร

ตัวอย่าง Responsive Image
ปัญหาที่เกี่ยวกับ Responsive Images

ศัพท์พื้นฐานเกี่ยวกับภาพ

ความละเอียดหน้าจอ (Screen Resolution)
ความหนาแน่นพิกเซล (Pixel Density)
CSS Pixel หรือ Density Independent Pixel (DIP)
CSS Pixel Ratio
Device Pixel Ratio
ขนาดไฟล์ภาพ (Asset Size)
ความละเอียดไฟล์ภาพ (Asset Resolution)
ภาพ Foreground
ภาพ Background

เทคนิค Responsive Image

บทนำ
เทคนิคด้วย HTML
เทคนิคด้วย CSS
เทคนิคด้วย JavaScript
เทคนิคฝั่ง Server

เทคนิคด้วย HTML

บทนำ
อิลิเมนต์ picture
แอตทริบิวต์ srcset

เทคนิคด้วย CSS

บทนำ
เทคนิคแบบ Responsive
เทคนิคแบบ Adaptive

เทคนิคด้วย JavaScript

บทนำ
PictureFill.js: Polyfill สำหรับอิลิเมนต์ HTML
HiSRC: ปลั๊กอิน jQuery

เทคนิคอื่น ๆ

เทคนิคฝั่ง Server

ไม่ใช้ภาพเลย

ทางเลือกแทนการดาวน์โหลดภาพ

7. Responsive Tables

การซ่อนข้อมูลในตาราง
การปรับแต่งตาราง
การแปลงรูปแบบตาราง (Morphing)
การเลื่อนดูข้อมูลในตาราง

8. รู้จัก CSS3

CSS3 Backgrounds และ Shadows

CSS3 Transforms

CSS3 2D Transforms
CSS3 3D Transforms
Properties และ Methods ของ CSS Transforms

CSS3 Transitions

CSS Transition คืออะไร
การสั่งให้ Transition ทำงาน

CSS3 Animations

โค้ด CSS3 Animation

บทสรุป

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Responsive Design กับ Adaptive Design ต่างกันอย่างไร

Responsive Design ใช้เลย์เอาต์เดียวที่ยืดหดตามความกว้างหน้าจอได้ต่อเนื่อง ด้วยกริดแบบยืดหยุ่น รูปภาพที่ปรับขนาดได้ และ Media Queries ส่วน Adaptive Design เตรียมเลย์เอาต์ขนาดตายตัวไว้หลายชุดสำหรับหน้าจอแต่ละกลุ่ม แล้วเลือกชุดที่ตรงที่สุดมาแสดง ทั้งด้วย CSS หรือการตรวจอุปกรณ์ฝั่งเซิร์ฟเวอร์ ส่วน RESS คือการผสม Responsive เข้ากับส่วนประกอบที่ปรับจากฝั่งเซิร์ฟเวอร์

เขียน Media Query ใน CSS อย่างไร

เขียนในรูป @media ตามด้วยชนิดสื่อและเงื่อนไข เช่น @media screen and (min-width: 768px) { ... } แล้วใส่สไตล์ที่ใช้เมื่อเงื่อนไขเป็นจริงไว้ในวงเล็บปีกกา เงื่อนไขที่ใช้บ่อยคือ min-width, max-width และ orientation และรวมหลายเงื่อนไขด้วย and ได้ ที่สำคัญต้องใส่ meta viewport ในหน้าเว็บ ไม่อย่างนั้นมือถือจะแสดงหน้าแบบย่อทั้งหน้าและ Media Query ไม่ได้ผลตามที่ตั้งใจ

ทำรูปภาพให้ Responsive ทำอย่างไร

ขั้นพื้นฐานคือกำหนด max-width: 100% และ height: auto ให้รูปย่อตามกล่องที่ครอบโดยไม่ล้น ต่อมาใช้แอตทริบิวต์ srcset คู่กับ sizes เพื่อเตรียมรูปหลายขนาดให้เบราว์เซอร์เลือกตามความกว้างและความละเอียดของจอ ซึ่งช่วยประหยัดข้อมูลบนมือถือ และถ้าต้องการเปลี่ยนการครอปภาพหรือชนิดไฟล์ตามขนาดจอให้ใช้แท็ก picture

หลักสูตร Basic Responsive Web Design เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับ Web Designer, Web Developer และผู้ที่เคยสร้างเว็บไซต์ด้วย CSS มาพอสมควร ที่อยากออกแบบเว็บให้แสดงผลได้ดีทุกขนาดหน้าจอ ควรมีพื้นฐานการเขียน HTML และ CSS เบื้องต้น และใช้อินเทอร์เน็ตได้

เรียนจบหลักสูตร Basic Responsive Web Design แล้วทำอะไรได้บ้าง

อธิบายความต่างของ Responsive, Adaptive และ RESS ได้ ตั้งค่า Viewport และเขียน Media Queries ใช้ Modernizr ตรวจความสามารถของเบราว์เซอร์ จัดเลย์เอาต์แบบ Fluid, Flexbox, Grid และ Multi-column ใช้ Bootstrap ปรับขนาดตัวอักษรและรูปภาพให้เหมาะกับแต่ละจอได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Basic Responsive Web Design ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกปรับหน้าเว็บที่ทีมดูแลอยู่ให้แสดงผลดีบนมือถือ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449