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 (B[.]

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 Trường Cao đẳng Cơ điện Hà Nội) Hà Nội, năm… BÀI 1: TỔNG QUAN VỀ HTML & CSS3 Thành phần HTML5 Phạm vi sử dụng Tổng quan cú pháp HTML5 3.Các thành phần / thẻ HTML5 Một số thành phần CSS3 mới: 11 BÀI 2: GIỚI THIỆU RESPONSIVE 13 Khái niệm Responsive Web Design 13 Độ phân giải hình 13 BÀI 3: VIEWPORT TRONG THIẾT KẾ RESPONSIVE 15 Khai báo meta viewport 15 Các giá trị khai báo thẻ meta viewport 15 BÀI 4: MEDIA QUERIES 16 Media CSS gì? 16 Sử dụng @media với thiết bị di động máy tính 16 a Desktop First 16 b Mobile First 17 BÀI 5: CSS GRIDVIEW 19 Grid-View gì? 19 Xây dựng Responsive Grid-View 19 Thiết kế website responsive với menu 20 BÀI 1: TỔNG QUAN VỀ HTML & CSS3 HTML5 phiên lớn HTML thay cho HTML 4.01, XHTML 1.0, XHTML 1.1 HTML5 chuẩn để cấu trúc diện nội dung WWW Chuẩn kết hợp tính Video Playback drag-and-drop mà trước phụ thuộc vào plug-ins trình duyệt thứ Adobe Flash, Microsoft Silverlight, Google Gears Thành phần HTML5 Phạm vi sử dụng HTML5 sử dụng để xây dựng ứng dụng chạy PC , thiết bị di động (Smartphone , tablet,…) Tổng quan cú pháp HTML5 ❖ Cấu trúc chuẩn site HTML5 ❖ Ngôn ngữ HTML5 giới thiệu số thẻ/ thành phần giúp cấu trúc trang web logic, thiết thực 3.Các thành phần / thẻ HTML5 ❖ Thẻ Thẻ thẻ chứa phần HEADER văn Thẻ thường dùng để chứa phần giới thiệu nội dung Bạn có nhiều thẻ tài liệu web Ví dụ : trường đ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 link điều hướng.tuy nhiên không thiết tất điều hướng phải nằm thẻ Ví dụ: ❖ Thẻ Thẻ định nghĩa khối (block) trang WEB Ví dụ : codienhanoi

tuyen sinh truong co dien noi

❖ Thẻ Thẻ thành phần thường chứa nội dung viết , tin tức … Có thể lồng thẻ vào thẻ Thẻ lựa chọn tối ưu để chứa nội dung đăng tải ngữ cảnh khác Thẻ chứa thẻ ,, Ví dụ : Giới thiệu trường

trường cao đẳng điện hà nội

❖ Thẻ Thẻ sử dụng cho vùng sidebar website Sử dụng cho vùng nội dung liên quan bên THẺ Ví dụ : codienhanoi

thơng tin tuyển sinh

❖ Thẻ Thẻ rõ footer trang WEB khối section Thẻ chuẩn chứa thông tin tác giả, quyền, link liên kết điều khoản sử dụng, thông tin liên hệ, vv Bạn có nhiều trong trang web Ví dụ :

cơ điện hà nội

160 - mai dịch - cầu giấy

❖ Thẻ Ở trang báo , sách thường có tiêu đề cho hình ảnh , mục đích đưa thích cho hình ảnh Ở HTML5 hình ảnh tiêu đề 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 trình duyệt - dạng video - Nhiều dạng video Ví dụ : ❖ Thẻ Thẻ cho phép nhúng file âm vào vào trang web mà khơng cần dùng plugin trình duyệt - dạng audio ❖ Flash cho phép bạn nhúng flash vào trang web Thiết kế form HTML5 cung cấp nhiều điều khiển form , dễ dàng cho nhà thiết kế phát triển ▪ ▪ ▪ ▪ i Thẻ input ... Flash cho phép bạn nhúng flash vào trang web Thiết kế form HTML5 cung cấp nhiều điều khiển form , dễ dàng cho nhà thiết kế phát triển ▪ ▪... vào trang web mà không cần dùng plugin trình duyệt - dạng video - Nhiều dạng video Ví dụ : ❖ Thẻ Thẻ cho phép nhúng file âm vào vào trang web mà khơng cần dùng plugin trình duyệt... chạy PC , thiết bị di động (Smartphone , tablet,…) Tổng quan cú pháp HTML5 ❖ Cấu trúc chuẩn site HTML5 ❖ Ngôn ngữ HTML5 giới thiệu số thẻ/ thành phần giúp cấu trúc trang web logic, thiết thực