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

Khái niệm về Responsive Web Design Responsive Web Design là cách thiết kế website sử dụng HTML và CSS để tự động điềuchỉnh cách hiển thị nội dung trang web luôn luôn đẹp trên tất cả các

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

 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ẻ <header>

Thẻ <header> là thẻ chứa phần HEADER của văn bản

Thẻ <header> thường dùng để chứa phần giới thiệu nội dung

Bạn có thể có nhiều thẻ <header> trong một tài liệu web

Ví dụ :

<header>

<h1>trường cơ điện</h1>

<p>logo, hình ảnh đại diện </p>

</header>

 Thẻ <nav>

Thẻ <nav> định nghĩa khu vực thiết lập menu điều hướng

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ềuhướng phải nằm trong thẻ <nav>

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>

Thẻ <article> là lựa chọn tối ưu để chứa nội dung được đăng tải trong những ngữ cảnh khácnhau

Thẻ <article> có thể chứa các thẻ <header>,<footer>,<section>

Ví dụ :

<h1>Giới thiệu về trường</h1>

<p>trường cao đẳng cơ điện hà nội </p>

</article>

 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>

Thẻ <footer> chỉ rõ footer của trang WEB hoặc của một khối section

Thẻ <footer> 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 <footer>trong một trang web

Ví dụ :

<footer>

<p>cơ điện hà nội</p>

<p>160 - mai dịch - cầu giấy</p>

<img src="codien.jpg" alt="codienhanoi" width="100%; " height="300">

<figcaption>ảnh tuyển sinh</figcaption>

</figure>

- dạng audio

 Flash

<embed> và <object> cho phép bạn nhúng flash vào trang web

Thiết kế form cơ bản

HTML5 cung cấp nhiều điều khiển trong form hơn , dễ dàng hơn cho nhà thiết

kế và phát triển

 <form action=“” method=“” enctype=“”>

 <input type=“”>

 <textarea rows=“” cols=“”>

 <select multiple>

i Thẻ input

ii Thẻ textarea

 <textarea rows=“?” cols=“?”>

 Tạo ô nhập nhiều dòng

 Các thuộc tính thường được sử dụng

• @rows: số hàng nhìn thấy, nhiều hơn phải cuộn

• @cols: số cột, mỗi cột có độ rộng bằng ký tự rộng nhất (M hoặc W) iii Thẻ select

4 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 ra gradient với hai kiểu linear và radial (

 CSS Transition (CSS chuyển đổi)

 CSS Animation (CSS chuyển động)

 2D/ 3D Transformation

 CSS3 background, border,,

BÀI 2: GIỚI THIỆU RESPONSIVE

1 Khái niệm về Responsive Web Design

Responsive Web Design là cách thiết kế website sử dụng HTML và CSS để tự động điềuchỉ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ểnweb 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

kỹ thuật bao gồm flexible grid, responsive image và CSS media query Khi người dùngchuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi

để 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ầnphải có công nghệ tự động đáp ứng theo thiết bị của người dùng Điều này sẽ loại bỏ sự cầnthiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế

ngang Như chúng ta biết từ sự phổ biến của điện thoại thông minh iPhone, iPad và cácdòng điện thoại Android khác có thể chuyển đổi từ dọc sang ngang theo ý thích của ngườidùng Vậy người thiết kế xử lý tình huống này như thế nào?

BÀI 3: VIEWPORT TRONG THIẾT KẾ RESPONSIVE 1.Khai báo meta viewport

Để cho trang website của bạn có thể hiển thị được Responsive thì chúng ta Khai báo tên trườngmeta viewport

<meta name="viewport"content="width=device-width,initial-scale=1.0">

thẻ này trong cặp <head> trong mã HTML của website

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íchthướ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 chophé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)

2 Các giá trị trong khai báo thẻ meta viewport

 Width : Định dạng chiều rộng của viewport

 Device-width: Chiều rộng cố định của các thiết bị khác nhau

 Height : Thiết lập chiều cao của viewport

 Device-height : Chiều cao cố định của thiết bị

 Initial-scale : Định dạng mức phóng to của trình duyệt lúc ban đầu, nếu đặt giá trị là 1 cónghĩa là không phóng to, khi giá trị được thiết lập, định dạng thì người dùng không thểphóng to vì nó đã được cố định

 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

 Muser-scalable : Cho phép người dùng có thể phóng to, có hai giá trị là yes và no

BÀI 4: MEDIA QUERIES

Trong đó mediatype gồm các thuộc tính hay sử dụng sau:

● all: Dùng cho mọi thiết bị

● print: Dùng cho máy in

● screen: Dùng cho máy tính và các thiết bị smart phone

2 Sử dụng @media với các thiết bị di động và máy tính

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

a Desktop First

Đố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 Quá trình phát triển sẽ có dạng như sau:

Đố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 Hay nói cách khác, giao diện của chúng ta sẽ thay đổi nếu chiều

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

Dưới đây là các media query điển hình mà ta cần thêm vào dự án

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 Cụ thể nó sẽ như

sau:

Đố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) Khi bạn chạy đoạn code trên sẽ thấy kết quả thu được giống hệtvới phương pháp đầu tiên, chỉ có điều cách làm ngược lại

Nói chung với mỗi phương pháp sẽ khác nhau như 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) { }

BÀI 5: CSS GRIDVIEW

1 Grid-View là gì?

Các trang web được dựa trên một Grid-View, có nghĩa là trang được chia thành các cột, việcxây dựng 1 Grid-View chuẩn sẽ giúp công việc thực hiện responsive về sau này thuận lợihơn rất nhiều Xem hình minh họa dưới đây để hình dung thế nào là 1 Grid-View

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 Hình dưới đây minh họa cho 1 trang web bao gồm header, footer, 2 sidebar vàphần content ở giữa, bố cục của trang web này được phân chia dựa trên 1 Grid-View

1 Grid-View thường có 12 cột và có tổng chiều rộng là 100%, sẽ tự động co giãn khi bạnthay đổi kích thước cửa sổ trình duyệt Xem ví dụ ở đây để thấy rõ hơn

2.Xây dựng 1 Responsive Grid-View

Lưu ý: Trong nội dung bài viết này Grid-View sẽ được xây dựng hoàn toàn 1 cách thủ công

để chúng ta có thể hiểu rõ cơ chế hoạt động của 1 Grid-View là như thế nào, hoàn toàn không phụ thuộc vào các thư viện CSS có sẵn như Bootstrap hay Foundation.

xây dựng 1 Responsive Grid-View

Đầu tiên đảm bảo rằng tất cả các phần tử HTML có thuộc tính box-sizing được đặt thànhborder-box Điều này đảm bảo rằng các thuộc tính padding và border được bao gồm trongtổng chiều rộng và chiều cao của tất cả các phần tử Thêm đoạn code sau vào file CSS củabạn:

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 Đầu tiên ta phải tính phần trăm cho một cột: 100% / 12 =

8.33% Sau đó, ta tạo các class cho từng cột trong tổng số 12 cột, các class class="col-" và tỉ

lệ tương ứng cho từng class đó

Ta sẽ có 1 trang web đơn giản với bố cục như hình dưới đây:

3 Thiết kế website responsive với menu

Menu là một thành phần không thể thiếu cho website Đố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

phone, bạn sẽ không có đủ kích thước để hiển thị Do đó, cách tốt nhất là hiển thị menu theochiều dọc màn hình.

Sau đây sẽ là các bước thực hiện thiết kế website responsive với menu:

Bước 1: Code HTML (index.html)

<!DOCTYPE html>

<html>

<head>

<title>Responsive website</title>

<meta name='viewport' content='width=device-width, initial-scale=1'>

<link rel="stylesheet" href="responsive.css"/>

Bước 2: Thêm CSS (responsive.css)

/* chèn màu nền trên thanh topnav */

.topnav {

background-color: #333;

overflow: hidden;

* Khi màn hình rộng dưới 600 pixel,

* ẩn tất cả các liên kết, ngoại trừ liên kết đầu tiên ("Trang chủ").

* Hiển thị liên kết có chứa nên mở và đóng topnav (.icon)*/

@media screen and (max-width: 600px) {

topnav a:not(:first-child) {display: none;}

* Lớp "responsive" được thêm vào topnav bằng JavaScript

(hiển thị các liên kết theo chiều dọc thay vì theo chiều ngang)

* /

@media screen and (max-width: 600px) {

topnav.responsive {position: relative;}

- topnav: chính là class ứng với thẻ <div> - chính là thanh menu

- background-color: #333: cài đặt màu nền cho thanh menu Bạn có thể thay đổi tuỳthích

- overflow: hidden: Thực tế, thuộc tính overflow sẽ có các giá trị là: visible, hidden,scroll, auto, inherit (bạn có thể tham khảo về overflow tại đây) Còn ở đây, khi mìnhđặt giá trị của overflow là hidden thì chiều cao của thanh menu sẽ được xác địnhbằng với phần tử trong nó - là các link (Mình không đặt giá trị cho thuộc tínhheight)

Cấu hình các mục (link) trên thanh menu

● float: left: để dồn các mục về phía tay trái Cũng có thể dùng float: right để dồn menu

về phía tay phải

● display: block: cấu hình các mục của menu là một block chứ không phải chỉ mỗidòng chữ (link)

● color, text-align, padding, text-decoration, font-size: những phần này đơn giản là đểtrang trí cho menu

Tạo hiệu ứng khi di chuyển chuột đến các mục của menu

.topnav a:hover {

background-color: #ddd;

color: black;

}

● a:hover: dùng để cấu hình cho thẻ <a> khi chuột hover

● Mình thay đổi background-color (màu nền) và color (màu chữ)

Ẩn icon (đóng mở menu) khi ở màn hình rộng

.topnav icon {

display: none;

}

Trong đó, display: none: để ẩn class="icon"

Ẩn các mục của menu khi màn hình nhỏ

@media screen and (max-width: 600px) {

topnav a:not(:first-child) {display: none;}

● Ở bài này, chúng ta thiết kế theo kiểu desktop trước

● Sử dụng @media screen and (max-width: 600px) để cấu hình menu khi độ rộng mànhình tối đa là 600px - nghĩa là màn hình điện thoại

● topnav a:not(:first-child) {display: none;}: tất cả các thẻ <a> đều ẩn đi, trừ thẻ đầutiên (home)

● float: right: dùng để đưa link với class="icon" sang bên phải màn hình

● display: block: hiển thị link dạng block

Hiển thị menu khi 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;}

Ở đây, xuất hiện một lớp mà trong html không có Đó là "responsive" Thực tế là khi nhấnvào icon, mình sẽ sử dụng Javascript để add thêm class cho "topnav" (mình sẽ trình bày sauđây) 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ụngposition:absolute

Đối với icon, mình sẽ cho nó ở phía trên bên phải của thanh menu (position: absolute; top:0; right: 0;)

Đố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 sangtrá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

Chữ trên các mục menu để phía bên trái: text-align: left

Kết quả

Giao diện trên máy tính:

Giao diện trên điện thoại:

Lúc này, nếu bạn nhấn vào icon phía bên phải thanh menu thì vẫn chưa có hiện tượng gì xảy

ra Tiếp theo mình sẽ thêm phần xử lý javascript

Bước 3: Xử lý Javascript (responsive.js)

<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>}

Nghĩa là class="icon" sẽ thực hiện hành động trong hàm myFunction() khi nó được click.Trước tiên, lấy phần tử với id là "myTopnav" dùng document.getElementById("myTopnav")

Lúc đầu, phần tử này chỉ thuộc lớp "topnav" Ta sẽ gán thêm giá trị lớp cho nó là

"responsive": x.className += " responsive" Lúc này, các mục menu sẽ được hiển thị (theophần css ở trên)