Giáo trình nghề Thiết kế trang Web - Môđun: Thiết kế Web đa nền tảng - Trường Cao đẳng Cơ điện Hà Nội
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
1. Khai báo meta viewport ...................................................................................................15
2. Các giá trị trong khai báo thẻ meta viewport......................................................................15
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ÀI 5: CSS GRIDVIEW......................................................................................................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ẻ <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ều
hướng phải nằm trong thẻ <nav>
Ví dụ:
❖
Thẻ <section>
Thẻ <section> định nghĩa các khối (block) của trang WEB .
Ví dụ :
<section>
<h1>codienhanoi</h1>
<p>tuyen sinh truong co dien ha noi</p>
</section>
❖
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>
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ác
nhau .
Thẻ <article> có thể chứa các thẻ <header>,<footer>,<section>
Ví dụ :
<article>
<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>
Ví dụ :
<aside>
<h4>codienhanoi</h4>
<p>thông tin tuyển sinh</p>
</aside>
Thẻ <footer>
❖
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>
</footer>
❖ Thẻ <figure> và <figcaption>
Ở 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ẻ <figure>
Ví dụ :
<figure>
<img src="codien.jpg" alt="codienhanoi" width="100%; " height="300">
<figcaption>ảnh tuyển sinh</figcaption>
</figure>
❖
Thẻ <video>
Thẻ <video> cho phép nhúng video vào trang web mà không cần dùng
plugin của trình duyệt
- dạng video
- Nhiều dạng video
Ví dụ :
❖
Thẻ <audio>
Thẻ <audio> cho phép nhúng file âm vào thanh vào trang web mà không cần
dùng plugin của trình duyệt .
- 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)
Thẻ select
iii.
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ề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
kỹ thuật bao gồm flexible grid, responsive image và CSS media query. Khi người dùng
chuyể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ần
phả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ần
thiế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ế
web.
Responsive Web Design là gì? Từ khái niệm tới thực tế
2. Độ phân giải màn hình
Các thiết bị mới đang được phát triển mỗi ngày và mỗi thiết bị này có thể xử lý các biến
kích thước, chức năng và ngay cả màu sắc khác nhau. 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
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ác
dòng điện thoại Android khác có thể chuyển đổi từ dọc sang ngang theo ý thích của người
dù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ường
meta 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í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)
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
1. Media CSS là gì?
Media CSS là một "công nghệ" được giới thiệu trong Css3. Nguyên tắc nó sử dụng trên
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ị. Thuộc tính này có cú pháp như sau:
@media not|only mediatype and (media feature) {
CSS-Code;
}
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
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.
/*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 đố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ệt
vớ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) {...}
/* For Desktop */
@media all and (min-width: 1280px)
Desktop First:
● 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
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ệc
xâ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ợi
hơ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ạ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ành
border-box. Điều này đảm bảo rằng các thuộc tính padding và border được bao gồm trong
tổ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ủa
bạ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 đó.
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 một hàng, và hai cột:
HTML code:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
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
Tải về để xem bản đầy đủ
31 trang
05/05/2022
3860
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình nghề Thiết kế trang Web - Môđun: Thiết kế Web đa nền tảng - Trường Cao đẳng Cơ điện Hà Nội", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_nghe_thiet_ke_trang_web_modun_thiet_ke_web_da_nen.doc
