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 Trường Cao đẳng Cơ điện Hà Nội) Hà Nội, năm… BÀI 1: TỔNG QUAN VỀ HTML & CSS3 .2 Thành phần HTML5 .3 Phạm vi sử dụng Tổng quan cú pháp HTML5 .3 3.Các thành phần / thẻ HTML5 .5 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 ii Thẻ textarea   Tạo ô nhập nhiều dịng  Các thuộc tính thường sử dụng iii • @rows: số hàng nhìn thấy, nhiều phải cuộn • @cols: số cột, cột có độ rộng ký tự rộng (M W) Thẻ select Một số thành phần CSS3 mới:  Thuộc tính border-radius CSS3 (Bo Góc )  Thuộc tính box-shadow CSS3 ( Bóng )  Tạo gradient với hai kiểu linear radial (  CSS Transition (CSS chuyển đổi)  CSS Animation (CSS chuyển động) rộng (width) hình nhỏ break point, mà đặt PC first khái niệm để responsive giao diện từ hình to xuống hình nhỏ Để làm việc với mơ hình sử dụng max-width media query Dưới media query điển hình mà ta cần thêm vào dự án /*Ipad ngang(1024 x 768)*/ @media screen and (max-width: 1024px){ } /*Ipad dọc(768 x 1024)*/ @media screen and (max-width: 768px){ } /*Tablet nhỏ(480 x 640)*/ @media screen and (max-width: 480px){ } /*Iphone(480 x 640)*/ @media screen and (max-width: 320px){ } /*Smart phone nhỏ*/ @media screen and (max-width: 240px){ } b Mobile First Ngược lại Desktop First phương pháp này, giao diện web bạn thực theo hướng từ thiết bị có hình nhỏ (Mobile) đến thiết bị có hình lớn Tablet, Laptop Desktop Tương tự với Desktop First sử dụng @media query CSS để thực q trình Cụ thể sau: Đối với Mobile First ta sử dụng thuộc tính min-width thay max-width Desktop First Lúc giao diện thay đổi chạm break point cụ thể hình có độ rộng (width) lớn break point mà đặt (768px, 1024px) Khi bạn chạy đoạn code thấy kết thu giống hệt với phương pháp đầu tiên, có điều cách làm ngược lại Nói chung với phương pháp khác sau: /* For Mobile */ @media all and (min-width: 320px) { } /* For Tablet With Vertical Screen */ @media all and (min-width: 600px) { } /* For Tablet With Horizontal Screen */ @media all and (min-width: 1024px) { } /* For Desktop */ @media all and (min-width: 1280px) Desktop First: ● Sử dụng max-width ● Giao diện thay đổi độ rộng hình nhỏ break point Mobile First: ● Sử dụng min-width ● Giao diện thay đổi độ rộng hình lớn break point BÀI 5: CSS GRIDVIEW Grid-View gì? Các trang web dựa Grid-View, có nghĩa trang chia thành cột, việc xây dựng Grid-View chuẩn giúp công việc thực responsive sau thuận lợi nhiều Xem hình minh họa để hình dung Grid-View Sử dụng Grid-View hữu ích thiết kế trang web, giúp bạn dễ dàng đặt phần tử trang Hình minh họa cho trang web bao gồm header, footer, sidebar phần content giữa, bố cục trang web phân chia dựa Grid-View Grid-View thường có 12 cột có tổng chiều rộng 100%, tự động co giãn bạn thay đổi kích thước cửa sổ trình duyệt Xem ví dụ để thấy rõ Xây dựng Responsive Grid-View Lưu ý: Trong nội dung viết Grid-View xây dựng hồn tồn cách thủ cơng để hiểu rõ chế hoạt động Grid-View nào, hoàn toàn khơng phụ thuộc vào thư viện CSS có sẵn Bootstrap hay Foundation xây dựng Responsive Grid-View Đầu tiên đảm bảo tất phần tử HTML có thuộc tính box-sizing đặt thành border-box Điều đảm bảo thuộc tính padding border bao gồm tổng chiều rộng chiều cao tất phần tử Thêm đoạn code sau vào file CSS bạn: Tuy nhiên, muốn sử dụng grid-view với 12 cột, để kiểm sốt nhiều bố cục khác trang web Đầu tiên ta phải tính phần trăm cho cột: 100% / 12 = 8.33% Sau đó, ta tạo class cho cột tổng số 12 cột, class class="col-" tỉ lệ tương ứng cho class CSS code: col-1 {width: 8.33%;} col-2 {width: 16.66%;} col-3 {width: 25%;} col-4 {width: 33.33%;} col-5 {width: 41.66%;} col-6 {width: 50%;} col-7 {width: 58.33%;} col-8 {width: 66.66%;} col-9 {width: 75%;} col-10 {width: 83.33%;} col-11 {width: 91.66%;} col-12 {width: 100%;} ví dụ: Trang web chia thành hàng, hai cột: HTML code: Ta có trang web đơn giản với bố cục hình đây: Thiết kế website responsive với menu Menu thành phần thiếu cho website Đối với kích thước hình desktop, menu thường để dàn trải theo chiều ngang Nhưng với kích thước hình tablet hay phone, bạn khơng có đủ kích thước để hiển thị Do đó, cách tốt hiển thị menu theo chiều dọc hình Sau bước thực thiết kế website responsive với menu: Bước 1: Code HTML (index.html) Responsive website Home About Contact ☰ Bước 2: Thêm CSS (responsive.css) /* chèn màu topnav */ topnav { background-color: #333; overflow: hidden; } /* Hiển thị dạng block, chỉnh nav */ topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Sử dụng hiệu ứng hover trỏ chuột đổi màu */ topnav a:hover { background-color: #ddd; color: black; } /* Ẩn liên kết mở đóng topnav hình nhỏ */ topnav icon { display: none; } /* * Khi hình rộng 600 pixel, * ẩn tất liên kết, ngoại trừ liên kết ("Trang chủ") * Hiển thị liên kết có chứa nên mở đóng topnav (.icon)*/ @media screen and (max-width: 600px) { topnav a:not(:first-child) {display: none;} topnav a.icon { float: right; display: block; } } /* * Lớp "responsive" thêm vào topnav JavaScript (hiển thị liên kết theo chiều dọc thay theo chiều ngang) */ @media screen and (max-width: 600px) { topnav.responsive {position: relative;} topnav.responsive a.icon { position: absolute; right: 0; top: 0; } topnav.responsive a { float: none; display: block; text-align: left; } } Cấu hình menu topnav { background-color: #333; overflow: hidden; } - topnav: class ứng với thẻ - menu - background-color: #333: cài đặt màu cho menu Bạn thay đổi tuỳ thích - overflow: hidden: Thực tế, thuộc tính overflow có giá trị là: visible, hidden, scroll, auto, inherit (bạn tham khảo overflow đây) Cịn đây, đặt giá trị overflow hidden chiều cao menu xác định với phần tử - link (Mình khơng đặt giá trị cho thuộc tính height) Cấu hình mục (link) menu topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } ● float: left: để dồn mục phía tay trái Cũng dùng float: right để dồn menu phía tay phải ● display: block: cấu hình mục menu block dòng chữ (link) ● color, text-align, padding, text-decoration, font-size: phần đơn giản để trang trí cho menu Tạo hiệu ứng di chuyển chuột đến mục menu topnav a:hover { background-color: #ddd; color: black; } ● a:hover: dùng để cấu hình cho thẻ chuột hover ● Mình thay đổi background-color (màu nền) color (màu chữ) Ẩn icon (đóng mở menu) hình rộng topnav icon { display: none; } Trong đó, display: none: để ẩn class="icon" Ẩn mục menu hình nhỏ @media screen and (max-width: 600px) { topnav a:not(:first-child) {display: none;} topnav a.icon { float: right; display: block; } } ● Ở này, thiết kế theo kiểu desktop trước ● Sử dụng @media screen and (max-width: 600px) để cấu hình menu độ rộng hình tối đa 600px - nghĩa hình điện thoại ● topnav a:not(:first-child) {display: none;}: tất thẻ ẩn đi, trừ thẻ (home) ● float: right: dùng để đưa link với class="icon" sang bên phải hình ● display: block: hiển thị link dạng block Hiển thị menu người dùng nhấn vào icon phía bên phải @media screen and (max-width: 600px) { topnav.responsive {position: relative;} topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } Chúng ta sử dụng @media screen and (max-width: 600px) để cấu hình menu độ rộng hình tối đa 600px Vì trường hợp nhấn vào icon bên phải xảy với trường hợp hình nhỏ Ở đây, xuất lớp mà html khơng có Đó "responsive" Thực tế nhấn vào icon, sử dụng Javascript để add thêm class cho "topnav" (mình trình bày sau đây) Nghĩa phần có ý nghĩa người dùng nhấn vào icon bên phải hình Lúc này, menu để position:relative để phần tử bên sử dụng position:absolute Đối với icon, cho phía bên phải menu (position: absolute; top: 0; right: 0;) Đối với mục menu (link), cho float:none lúc mục menu không dồn sang trái nữa, kết hợp với display: block chúng chiếm trọn chiều ngang hình Chữ mục menu để phía bên trái: text-align: left Kết Giao diện máy tính: Giao diện điện thoại: Lúc này, bạn nhấn vào icon phía bên phải menu chưa có tượng xảy Tiếp theo thêm phần xử lý javascript Bước 3: Xử lý Javascript (responsive.js) function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } Trong phần HTML xét: ☰} Nghĩa class="icon" thực hành động hàm myFunction() click Trước tiên, lấy phần tử với id "myTopnav" dùng document.getElementById("myTopnav") Lúc đầu, phần tử thuộc lớp "topnav" Ta gán thêm giá trị lớp cho "responsive": x.className += " responsive" Lúc này, mục menu hiển thị (theo phần css trên) Khi menu mở ra, nghĩa thuộc lớp "topnav" "responsive" Nếu ta nhấn vào icon phía bên phải lần lúc giá trị thuộc tính lớp "topnav": x.className = "topnav" Và menu lại bị ẩn Kết nhấn vào icon: BÀI 6: THIẾT KẾ TRANG WEB ... Responsive Web Design (RWD) xu hướng theo quy trình thiết kế phát triển web đáp ứng thiết bị môi trường người dùng theo tiêu chí kích thước chiều hình thiết bị Để làm điều sử dụng linh hoạt kết hợp... thiết cho nhiều thiết kế web khác giảm thiểu thời gian chi phí thiết kế web Responsive Web Design gì? Từ khái niệm tới thực tế Độ phân giải hình Các thiết bị phát triển ngày thiết bị xử lý biến... RESPONSIVE Khái niệm Responsive Web Design Responsive Web Design cách thiết kế website sử dụng HTML CSS để tự động điều chỉnh cách hiển thị nội dung trang web luôn đẹp tất thiết bị (desktops, tablets,