RESPONSIVE WEB DESIGN

Slide_1 RESPONSIVE WEB DESIGN Sinh viên thực hiện: Hoài Thu Nội dung thuyết trình Giới thiệu Phân loại Thành phần Đối tượng áp dụng Các bước thực Công cụ hỗ trợ Slide_2 Giới thiệu Slide_3 Vì phải dụng RWD ? - Nếu không dùng RWD điện thoại phải zoom hình xem phần nội dung - Nếu dùng cần kéo xuống Giới thiệu Slide_4 • RWD thiết kế giao diện web thích ứng với loại thiết bị thị như: • • • • Điện thoại di động - mobile Máy tính bảng – tablet Desktop Tivi • Ngôn ngữ sử dụng • HTML (HTML5) • CSS(CSS3) Giới thiệu • Vì RWD làm điều ? • Sắp xếp đối tượng - Vị trí Ẩn /hiện • Điều chỉnh kích thước đối tượng Slide_5 Giới thiệu Slide_6 • Ưu điểm RWD đạt • Hiện thị nội dung dễ nhìn • Dễ sử dụng • Thích ứng với loại hình khác Phân loại Slide_7 • Fluid grid: sử dụng % để điều chỉnh kích cỡ, không sử pixel point • Flexible image: sử dụng thẻ chứa để giới hạn thị đối tượng • Media queries: cho phép trang web thị theo định dạng css tương ứng với thiết bị định dạng săn 3 Thành phần • Viewport • Grid view • Media queries Slide_8 3.Thành phần Slide_9 • Viewport: giới hạn vùng nhìn thấy trang web o Thẻ thẻ bắt đầu định dạng cho viewport o Nội dung o Width: độ rộng tính theo độ rộng hinh thiết bị o Initial-scale: tỉ lệ khởi tạo ban đầu 3.Thành phần Slide_10 • Grid view: hình thị thiết bị chia thành số cột định Vi dụ  Desktop: 12 columns  Tablet: columns  Mobile: column Thành phần Slide_11 • Media queries: cho phép trang web thi theo định dạng css tương ứng với thiết bị xây dựng sẵn 4 Đối tượng áp dụng • Character font-size: 1.2em; • Image: {width: 100%; height: auto;} • Video: {width: 100%; height: auto;} Slide_12 Các bước thực Slide_13 • Chọn loại RWD • Thiết kế DOM (document object model) • Sơ đồ phác thảo • Thiết kế hình theo loại thiết bị (vẽ giấy) • Menu • CSS • HTML • Kiểm tra chỉnh sửa Các bước thực • Chọn loại RWD: media queries • Thiết kế DOM Slide_14 Các bước thực • Sơ đồ phác thảo • Thiết kế hình theo loại thiết bị (vẽ giấy) • Menu Slide_15 Các bước thực Slide_16 • CSS: định dạng CSS cho loại hình @media screen and (min-width:1280px){ } @media screen and (min-width:1024px){ } @media screen and (max-device-width: 480px) and (orientation:landscape){ } @media screen and (max-device-width: 480px) and (orientation:portrait) { } Các bước thực Slide_17 • HTML Thiết kế web theo sơ đồ phác thảo dựng sẵn • Kiểm tra chỉnh sửa • Thay đổi kích thước hình, dụng toggle device mode trình duyệt để kiểm tra đối tượng menu 6 Công cụ hỗ trợ • Adobe dreamweaver hỗ trợ thiết kế fluid grid layout Slide_18 Công cụ hỗ trợ Slide_19 • Adobe phonegap thiết kế giao diện web thiết bị di động 6 Công cụ hỗ trợ Slide_20 • Framework: nơi tập hợp định nghĩa css cho phép thiết bị thị responsive  W3.css  boostrap demo • Liên kết tới Demo nhóm: o File CSS định dạng responsive o File HTML o File TXT Slide_21 demo • Kết chạy Demo sau: Slide_22 Trên desktop demo • Kết chạy Demo sau: Trên Ipad Slide_23 Trên mobile ... trang web thị theo định dạng css tương ứng với thiết bị định dạng săn 3 Thành phần • Viewport • Grid view • Media queries Slide_8 3.Thành phần Slide_9 • Viewport: giới hạn vùng nhìn thấy trang web. .. Slide_19 • Adobe phonegap thiết kế giao diện web thiết bị di động 6 Công cụ hỗ trợ Slide_20 • Framework: nơi tập hợp định nghĩa css cho phép thiết bị thị responsive  W3.css  boostrap demo • Liên... columns  Tablet: columns  Mobile: column Thành phần Slide_11 • Media queries: cho phép trang web thi theo định dạng css tương ứng với thiết bị xây dựng sẵn 4 Đối tượng áp dụng • Character