- Phạm vi sử dụng.
- Độ phân giải màn hình.
- Sử dụng @media với các thiết bị di động và máy tính.
- 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,…).
- Thẻ <header>.
- Thẻ <header>.
- Bạn có thể có nhiều thẻ <header>.
- <p>logo, hình ảnh đại diện ...</p>.
- Thẻ <nav>.
- Thẻ <nav>.
- 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ẻ <nav>.
- Thẻ <section>.
- Thẻ <section>.
- định nghĩa các khối (block) của trang WEB .
- Thẻ <article>.
- Thẻ <article>.
- 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ẻ <article>.
- vào trong thẻ <section>.
- có thể chứa các thẻ <header>,<footer>,<section>.
- <p>trường cao đẳng cơ điện hà nội..
- </p>.
- Thẻ <aside>.
- Thẻ <aside>.
- 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Ẻ <section>.
- <p>thông tin tuyển sinh</p>.
- Thẻ <footer>.
- Thẻ <footer>.
- Bạn có thể có nhiều <footer>trong một trang web..
- <p>cơ điện hà nội</p>.
- Thẻ <figure>.
- Ở HTML5 hình ảnh và tiêu đề có thể nhóm chung vào thẻ <figure>.
- Thẻ <video>.
- Thẻ <video>.
- Thẻ <audio>.
- Thẻ <audio>.
- cho phép bạn nhúng flash vào trang web.
- Các thuộc tính thường được sử dụng.
- Responsive Web Design là cách thiết kế website sử dụng HTML và CSS để tự động điều chỉnh cách hiển thị nội dung trang web luôn luôn đẹp trên tất cả các thiết bị (desktops, tablets, smart phones…) của người sử dụng truy cập..
- Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị.
- Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các.
- để phù hợp với kích thước màn hình và kịch bản xử lý.
- Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng.
- Một số thích dùng màn hình nhỏ, một số dùng màn hình to, có người thích dùng theo chiều dọc và có người thích dùng chiều.
- Thẻ meta viewport nghĩa là một thẻ được thiết lập để trình duyệt hiển thị tương ứng với kích thước của màn hình.
- Như câu lệnh ở trên thì bạn có thể định dạng trình duyệt hiển thị cố định và tương thích với mọi thiết bị dựa trên chiều rộng của thiết bị đó (device-width) và không cho phép người dùng phóng tó, thu nhỏ, theo chiều ngang của màn hình (thiết lập initial-scale có giá trị cố định là 1.0).
- Device-width: Chiều rộng cố định của các thiết bị khác nhau..
- Device-height : Chiều cao cố định của thiết bị..
- Minimum-scale : Mức phóng to tối thiểu của thiết bị với trình duyệt..
- Maximum-scale : Mức phóng to tối đa của thiết bị với trình duyệt..
- Nguyên tắc nó sử dụng trên thông qua các thông số kích thước màn hình được khai báo thông qua @media.
- Với công cụ này chúng ta có thể phân đoạn Css chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị.
- Trong đó mediatype gồm các thuộc tính hay sử dụng sau:.
- all: Dùng cho mọi thiết bị.
- screen: Dùng cho máy tính và các thiết bị smart phone 2.
- Với danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị.
- Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng..
- Đối với phương pháp Desktop First giao diện của bạn sẽ được ưu tiên code sao cho phù hợp với màn hình Desktop của bạn trước rồi sau đó mới tiếp tục thêm code CSS mới vào bằng @media query sao cho giao diện và bố cục trang web của bạn phù hợp với các màn hình bé hơn lần lượt là Laptop, Tablet và Mobile.
- Đối với phương pháp Desktop First chúng ta sẽ sử dụng thuộc tính max-width như bạn thấy trong đoạn code CSS.
- rộng (width) của màn hình hiện tại nhỏ hơn hoặc bằng các break point, mà chúng ta đặt ra ở trên..
- PC first là khái niệm để chỉ tuần tự responsive giao diện từ màn hình to xuống màn hình nhỏ Để làm việc với mô hình này chúng ta sử dụng max-width trong media query.
- Ngược lại đối với Desktop First thì ở phương pháp này, giao diện web của bạn sẽ được thực hiện theo hướng từ thiết bị có màn hình nhỏ (Mobile) rồi mới đến các thiết bị có màn hình lớn hơn lần lượt là Tablet, Laptop và Desktop.
- Tương tự với Desktop First thì chúng ta cũng sẽ sử dụng @media query của CSS để thực hiện quá trình này.
- Đối với Mobile First ta sẽ sử dụng thuộc tính min-width thay vì max-width như Desktop First.
- Lúc này giao diện của chúng ta cũng sẽ thay đổi khi chạm các break point cụ thể nếu màn hình của chúng ta có độ rộng (width) lớn hơn hoặc bằng các break point mà chúng ta đặt ra thì (768px, 1024px).
- Sử dụng max-width.
- Giao diện thay đổi khi độ rộng màn hình nhỏ hơn hoặc bằng break point Mobile First:.
- Sử dụng min-width.
- Giao diện thay đổi khi độ rộng màn hình lớn hơn hoặc bằng break point.
- Sử dụng Grid-View rất hữu ích khi thiết kế các trang web, nó giúp bạn dễ dàng đặt các phần tử trên trang.
- Tuy nhiên, chúng ta muốn sử dụng grid-view với 12 cột, để có thể kiểm soát nhiều hơn các bố cục khác của trang web.
- <div class="col-3">...</div>.
- <div class="col-9">...</div>.
- Đối với kích thước màn hình desktop, menu thường để dàn trải theo chiều ngang.
- Nhưng với kích thước màn hình tablet hay.
- Do đó, cách tốt nhất là hiển thị menu theo chiều dọc màn hình..
- <a href gt;Home</a>.
- <a href gt;About</a>.
- <a href gt;Contact</a>.
- onclick="myFunction()">☰</a>.
- Sử dụng hiệu ứng hover khi trỏ chuột đổi màu nền.
- Ẩn liên kết sẽ mở và đóng topnav trên màn hình nhỏ.
- Khi màn hình rộng dưới 600 pixel,.
- topnav: chính là class ứng với thẻ <div>.
- a:hover: dùng để cấu hình cho thẻ <a>.
- Ẩn icon (đóng mở menu) khi ở màn hình rộng.
- Ẩn các mục của menu khi màn hình nhỏ.
- Sử dụng @media screen and (max-width: 600px) để cấu hình menu khi độ rộng màn hình tối đa là 600px - nghĩa là màn hình điện thoại.
- tất cả các thẻ <a>.
- sang bên phải màn hình..
- Chúng ta sử dụng @media screen and (max-width: 600px) để cấu hình menu khi độ rộng màn hình tối đa là 600px.
- Vì trường hợp nhấn vào icon bên phải chỉ xảy ra với trường hợp màn hình nhỏ..
- Thực tế là khi nhấn vào icon, mình sẽ sử dụng Javascript để add thêm class cho "topnav".
- Nghĩa là phần này chỉ có ý nghĩa khi người dùng nhấn vào icon bên phải màn hình..
- Lúc này, menu để position:relative để các phần tử bên trong nó có thể sử dụng position:absolute..
- Đối với các mục menu (link), mình cho float:none lúc này các mục menu sẽ không dồn sang trái nữa, kết hợp với display: block thì chúng sẽ chiếm trọn chiều ngang màn hình..
- onclick="myFunction()">☰</a>}.
- "responsive": x.className.
- "topnav": x.className = "topnav".
- BÀI 6: THIẾT KẾ TRANG WEB