Giáo trình Thiết kế web đa nền tảng

(NB) Giáo trình Thiết kế web đa nền tảng gồm có 5 bài, trang bị cho sinh viên những kiến thức cơ bản như: Tổng quan về HTML 5 & CSS3, giới thiệu responsive, viewport trong thiết kế responsive, media queries, CSS gridview. Mời các bạn cùng tham khảo để biết thêm các nội dung chi tiết.
Nội dung trích xuất từ tài liệu:
Giáo trình Thiết kế web đa nền tảng BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI **************************** GIÁO TRÌNH MÔN HỌC/MÔ ĐUN: THIẾT KẾ WEB ĐA NỀN TẢNG NGÀNH/NGHỀ: THIẾT KẾ TRANG WEB TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐCĐ-ĐT ngày…….tháng….năm ................... của Trường Cao đẳng Cơ điện Hà Nội) Hà Nội, năm… BÀI 1: TỔNG QUAN VỀ HTML 5 & CSS3 ........................................................................ 2 Thành phần của HTML5 ........................................................................................................... 3 1. Phạm vi sử dụng .................................................................................................................... 3 2. Tổng quan cú pháp của HTML5 ........................................................................................... 3 3.Các thành phần / thẻ mới của HTML5 .................................................................................. 5 4. Một số thành phần CSS3 mới: ............................................................................................ 11 BÀI 2: GIỚI THIỆU RESPONSIVE .................................................................................. 13 1. Khái niệm về Responsive Web Design ............................................................................ 13 2. Độ phân giải màn hình ..................................................................................................... 13 BÀI 3: VIEWPORT TRONG THIẾT KẾ RESPONSIVE ............................................... 15 1. Khai báo meta viewport ................................................................................................... 15 2. Các giá trị trong khai báo thẻ meta viewport ...................................................................... 15 BÀI 4: MEDIA QUERIES ................................................................................................... 16 1. Media CSS là gì? ............................................................................................................... 16 2. Sử dụng @media với các thiết bị di động và máy tính ....................................................... 16 a. Desktop First ....................................................................................................................... 16 b. Mobile First ......................................................................................................................... 17 BÀI 5: CSS GRIDVIEW ...................................................................................................... 19 1. Grid-View là gì? ................................................................................................................. 19 2. Xây dựng 1 Responsive Grid-View ................................................................................. 19 3. Thiết kế website responsive với menu ............................................................................. 20 BÀI 1: TỔNG QUAN VỀ HTML 5 & CSS3 HTML5 là phiên bản lớn tiếp theo của HTML thay thế cho HTML 4.01, XHTML 1.0, và XHTML 1.1. HTML5 là một chuẩn để cấu trúc và hiện diện nội dung trên WWW. Chuẩn mới này kết hợp các tính năng như Video Playback và drag-and-drop mà trước đây đã phụ thuộc vào plug-ins trình duyệt thứ 3 như Adobe Flash, Microsoft Silverlight, và Google Gears. Thành phần của HTML5 1. Phạm vi sử dụng HTML5 được sử dụng để xây dựng các ứng dụng chạy trên PC , thiết bị di động (Smartphone , tablet,…) 2. Tổng quan cú pháp của HTML5 ❖ Cấu trúc chuẩn của một site HTML5 ❖ Ngôn ngữ HTML5 giới thiệu một số thẻ/ thành phần mới giúp cấu trúc trang web logic, thiết thực hơn. 3.Các thành phần / thẻ mới của HTML5 ❖ Thẻ Thẻ là thẻ chứa phần HEADER của văn bản. Thẻ thường dùng để chứa phần giới thiệu nội dung. Bạn có thể có nhiều thẻ trong một tài liệu web . Ví dụ : trường cơ điện logo, hình ảnh đại diện ... ❖ Thẻ Thẻ định nghĩa khu vực thiết lập menu điều hướng . Thẻ bao gồm tập hợp các link điều hướng.tuy nhiên không nhất thiết tất cả các điều hướng phải nằm trong thẻ Ví dụ: ❖ Thẻ Thẻ định nghĩa các khối (block) của trang WEB . Ví dụ : codienhanoi tuyen sinh truong co dien ha noi ❖ Thẻ Thẻ là thành phần thường chứa nội dung một bài viết , tin tức … Có thể lồng thẻ vào trong thẻ Thẻ là lựa chọn tối ưu để chứa nội dung được đăng tải trong những ngữ cảnh khác nhau . Thẻ có thể chứa các thẻ ,, Ví dụ : Giới thiệu về trường trường cao đẳng cơ điện hà nội.. ❖ Thẻ Thẻ sử dụng cho vùng sidebar của website . Sử dụng cho một vùng nội dung liên quan bên trong THẺ Ví dụ : codienhanoi thông tin tuyển sinh ❖ Thẻ Thẻ chỉ rõ footer của trang WEB hoặc của một khối section Thẻ chuẩn chứa thông tin về tác giả, bản quyền, link liên kết điều khoản sử dụng, thông tin liên hệ, vv. Bạn có thể có nhiều trong một trang web. Ví dụ : cơ điện hà nội 160 - mai dịch - cầu giấy ❖ Thẻ và Ở các trang báo , sách thường có tiêu đề cho hình ảnh , mục đích của nó là đưa ra chú thích cho hình ảnh . Ở HTML5 hình ảnh và tiêu đề có thể nhóm chung vào thẻ Ví dụ : ảnh tuyển sinh ❖ Thẻ Thẻ cho phép nhúng video vào trang web mà không cần dùng plugin của tr ...