bÀi 7 bố cục trong thiết kế web - giáo trình fpt

27
BÀI 7 BỐ CỤC TRONG THIẾT KẾ WEB

Upload: hoc-lap-trinh-web

Post on 21-Jun-2015

3.060 views

Category:

Documents


5 download

DESCRIPTION

Bố cục trong thiết kế web Sáng tạo trong thiết kế Giới thiệu HTML 5 và tương lai của web typography Từ box (hộp) tới grid (lưới) Lựa chọn chính xác kiểu chữ (typeface) Xây dựng một họ font linh động Bố cục trong thiết kế web Sáng tạo trong thiết kế Giới thiệu HTML 5 và tương lai của web typography Từ box (hộp) tới grid (lưới) Lựa chọn chính xác kiểu chữ (typeface) Xây dựng một họ font linh động

TRANSCRIPT

Page 1: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

BÀI 7BỐ CỤC TRONG THIẾT KẾ WEB

Page 2: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

NHẮC LẠI BÀI TRƯỚC

Khái niệm hướng mắt của người duyệt webWeight (trọng lượng)Italic & obliqueCác style trang tríVăn bản in hoa in thườngMàu sắcKiểu chữ

Khái niệm hướng mắt của người duyệt webWeight (trọng lượng)Italic & obliqueCác style trang tríVăn bản in hoa in thườngMàu sắcKiểu chữ

Slide 7 - Bố cục trong thiết kế web 2

Page 3: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

MỤC TIÊU CỦA BÀI HỌC

Bố cục trong thiết kế webSáng tạo trong thiết kếGiới thiệu HTML 5 và tương lai của web typographyTừ box (hộp) tới grid (lưới)Lựa chọn chính xác kiểu chữ (typeface)Xây dựng một họ font linh động

Bố cục trong thiết kế webSáng tạo trong thiết kếGiới thiệu HTML 5 và tương lai của web typographyTừ box (hộp) tới grid (lưới)Lựa chọn chính xác kiểu chữ (typeface)Xây dựng một họ font linh động

Slide 7 - Bố cục trong thiết kế web 3

Page 4: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

BỐ CỤC TRONG THIẾT KẾ WEB

Page 5: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

BỐ CỤC TRONG THIẾT KẾ WEB

Xác định một thiết kế tốt:Người dùng dễ dàng nắm được nội dung webNgười dùng có thể di chuyển dễ dàng thông qua điềuhướng trực quan

Người dùng nhận diện được từng trang thuộc vềtrang web

Xác định một thiết kế tốt:Người dùng dễ dàng nắm được nội dung webNgười dùng có thể di chuyển dễ dàng thông qua điềuhướng trực quan

Người dùng nhận diện được từng trang thuộc vềtrang web

Slide 7 - Bố cục trong thiết kế web 5

Page 6: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

BỐ CỤC TRONG THIẾT KẾ WEB

Cấu trúc của trang web

Slide 7 - Bố cục trong thiết kế web 6

Page 7: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

BỐ CỤC TRONG THIẾT KẾ WEB

Khối Container:• Tất cả trang web đều chứa phần nội dung• Chứa hầu hết các thẻ div

Logo:• Khi nhà thiết kế dựa vào nhận dạng thương hiệu, họ sẽ

dựa vào logo và màu sắc của những sản phẩmmarketing (card, brochure, letterhead, …)

Hệ thống điều hướng (Navigation):• Hệ thống điều hướng phải dễ dàng tìm kiếm và sử

dụng

Phần nội dung (Content): nội dung quyết định tất cảFooter: là vùng chân trang

Khối Container:• Tất cả trang web đều chứa phần nội dung• Chứa hầu hết các thẻ div

Logo:• Khi nhà thiết kế dựa vào nhận dạng thương hiệu, họ sẽ

dựa vào logo và màu sắc của những sản phẩmmarketing (card, brochure, letterhead, …)

Hệ thống điều hướng (Navigation):• Hệ thống điều hướng phải dễ dàng tìm kiếm và sử

dụng

Phần nội dung (Content): nội dung quyết định tất cảFooter: là vùng chân trang

Slide 7 - Bố cục trong thiết kế web 7

Page 8: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

BỐ CỤC TRONG THIẾT KẾ WEB

Khoảng trắng (Whitespace):• Khoảng trắng tạo ra sự cân bằng và dễ nhìn cho người

duyệt web

Slide 7 - Bố cục trong thiết kế web 8

http://www.yesnurse.co.uk/

Page 9: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

SÁNG TẠO TRONG THIẾT KẾ

Page 10: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

SÁNG TẠO TRONG THIẾT KẾ

Không nên thiết kế theo mặc địnhThiết lập lại những mặc định của trình duyệt và đặtđịnh dạng toàn cầu cho chính mình

* {margin: 0;padding: 0;border:0;outline: 0;font-size: 100%;vertical-align: baseline;text-decoration: none;background: transparent;}

Slide 7 - Bố cục trong thiết kế web 10

* {margin: 0;padding: 0;border:0;outline: 0;font-size: 100%;vertical-align: baseline;text-decoration: none;background: transparent;}

Page 11: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

SÁNG TẠO TRONG THIẾT KẾ

Tự sáng tạo ra tỷ lệ để tạo nên trật tự củatypography:

Khi duyệt trang web, mắt người sẽ tìm vùng có độtương phản và vùng nhất quánTạo tỷ lệ bình thường cho typography sẽ làm cânbằng độ tương phản và nhất quán

Tự sáng tạo ra tỷ lệ để tạo nên trật tự củatypography:

Khi duyệt trang web, mắt người sẽ tìm vùng có độtương phản và vùng nhất quánTạo tỷ lệ bình thường cho typography sẽ làm cânbằng độ tương phản và nhất quán

Slide 7 - Bố cục trong thiết kế web 11

h1 {font-size: 2em}h2{font-size: 1.5em}h3{font-size: 1.1255em}h4{font-size: 1em}h5, h6 {font-size: .875em}h6{font-style: italic}p, li, q, blockquote{font-size: .75em}

Page 12: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

SÁNG TẠO TRONG THIẾT KẾ

Tạo nên đường link rõ ràng, không lộn xộn

a { color: rgb(0,0,255); text-decoration: none;}

p a: line {border-bottom: 1px solid rgb (153,153,255);}p a: visited {border-bottom: 1px solid rgb (204,204,255);}p a: link {border-bottom: 1px dotted rgb (153,153,255);}p a: active {border-bottom: 1px solid rgb (255,0,0);}

Slide 7 - Bố cục trong thiết kế web 12

p a: line {border-bottom: 1px solid rgb (153,153,255);}p a: visited {border-bottom: 1px solid rgb (204,204,255);}p a: link {border-bottom: 1px dotted rgb (153,153,255);}p a: active {border-bottom: 1px solid rgb (255,0,0);}

Page 13: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Page 14: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Grid (lưới), một phương thức được yêu thích chocấu trúc và tính nhất quán của trang web và websiteĐối với typography, lưới đã trở nên rất quan trọngkhi lựa chọn kích thước font chuẩn với khoảngkhông gianĐối với thiết kế web, lưới không chỉ hữu ích mà cònlà cấu trúc mặc định của trang

Grid (lưới), một phương thức được yêu thích chocấu trúc và tính nhất quán của trang web và websiteĐối với typography, lưới đã trở nên rất quan trọngkhi lựa chọn kích thước font chuẩn với khoảngkhông gianĐối với thiết kế web, lưới không chỉ hữu ích mà cònlà cấu trúc mặc định của trang

Slide 7 - Bố cục trong thiết kế web 14

Page 15: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Sử dụng lưới để cấu trúc trang web:Có nhiều phương thức để cấu trúc lưới trang webHTML5 đang dần trở thành ngôn ngữ đánh dấu mặcđịnh giúp cấu trúc lướiMột cải tiến đáng kể của ngôn ngữ đánh dấu trước đólà bổ sung các cấu trúc thành phần:

Sử dụng lưới để cấu trúc trang web:Có nhiều phương thức để cấu trúc lưới trang webHTML5 đang dần trở thành ngôn ngữ đánh dấu mặcđịnh giúp cấu trúc lướiMột cải tiến đáng kể của ngôn ngữ đánh dấu trước đólà bổ sung các cấu trúc thành phần:

Slide 7 - Bố cục trong thiết kế web 15

Page 16: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Header: khá rõ ràng, có thể sử dụng chophần đầu trang, đầu vùng chính, đầu bàiviết, …

Navigation: có thể chứa các phầnđộc lập của header/ footer

Section: định nghĩa vùngchính của trang, chứa nộidung chính

Slide 7 - Bố cục trong thiết kế web 16

Section: định nghĩa vùngchính của trang, chứa nộidung chính

Article: các bài viết blog

Aside: được sử dụng để hỗtrợ nội dung trang: link,navigation phụ, quảng cáo

Footer: giống header nhưng được đặt dưới cùng các thành phần

Page 17: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Cấu trúc HTML định nghĩa ô lưới theo bố cục trên:<html>

<head><title>FWT</title></head><body></div id="page"><div class="header"><div class="navigation"></div></div><div class="section"><div class="article"><div class="header"></div></div><div class="article"><div class="header"></div></div></div><div class="aside"></div><div class="footer"></div></div></body>

</html>

Slide 7 - Bố cục trong thiết kế web 17

<html><head><title>FWT</title></head><body></div id="page"><div class="header"><div class="navigation"></div></div><div class="section"><div class="article"><div class="header"></div></div><div class="article"><div class="header"></div></div></div><div class="aside"></div><div class="footer"></div></div></body>

</html>

Page 18: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Cố định chiều rộng cho lưới chính xácSử dụng chiều rộng biến thiên trong một khoảngcho lưới linh động

.page {min-width: 800px; max-width: 1060px; _width: 920px; padding: 0 1.5%;margin: 10px auto;}

Slide 7 - Bố cục trong thiết kế web 18

Page 19: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

960 Grid System:960 Grid System là Website chuyên về CSSFramework.Với màn hình có độ rộng 1024 pixel, Moll đã quyếtđịnh chọn giá trị 960px, đây là con số này có thể chiahết cho 3, 4, 5, 6, 8, 10, 12, 15 và 16 - điều đó khiếnnó trở thành một con số lý tưởng cho hệ thống ô lưới.

Ba cơ sở layout: Layout thứ nhất gồm 12 cột, layoutthứ hai gồm 16 cột và layout thứ ba gồm 24 cột.

960 Grid System:960 Grid System là Website chuyên về CSSFramework.Với màn hình có độ rộng 1024 pixel, Moll đã quyếtđịnh chọn giá trị 960px, đây là con số này có thể chiahết cho 3, 4, 5, 6, 8, 10, 12, 15 và 16 - điều đó khiếnnó trở thành một con số lý tưởng cho hệ thống ô lưới.

Ba cơ sở layout: Layout thứ nhất gồm 12 cột, layoutthứ hai gồm 16 cột và layout thứ ba gồm 24 cột.

Slide 7 - Bố cục trong thiết kế web 19

Page 20: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỪ BOX TỚI GRID

Hệ thống ô lưới 16 cột:.container_16 {

margin-left: auto;margin-right: auto;width: 960px;

}.grid_16 {

display: inline;float: left;margin-left: 10px;margin-right: 10px;

}.container_16 .grid_1 {

width: 40px;}…

Slide 7 - Bố cục trong thiết kế web 20

.container_16 {margin-left: auto;margin-right: auto;width: 960px;

}.grid_16 {

display: inline;float: left;margin-left: 10px;margin-right: 10px;

}.container_16 .grid_1 {

width: 40px;}…

Page 21: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

LỰA CHỌN FONT CHÍNH XÁC

Page 22: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

LỰA CHỌN FONT CHÍNH XÁC

Thiết lập một tiếng nói typography:Lựa chọn kiểu chữ (typeface) để phản ánh tâm trạngvà cử chỉ của thông điệp mà website truyền tải

Sử dụng các font chính xác cho các vị trí phù hợp

Thiết lập một tiếng nói typography:Lựa chọn kiểu chữ (typeface) để phản ánh tâm trạngvà cử chỉ của thông điệp mà website truyền tải

Sử dụng các font chính xác cho các vị trí phù hợp

Slide 7 - Bố cục trong thiết kế web 22

Page 23: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

XÂY DỰNG HỌ FONT LINH ĐỘNG

Page 24: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

XÂY DỰNG HỌ FONT LINH ĐỘNG

Tìm kiếm sự hiển thị thân thiện nhất của font chovùng nội dung

Sử dụng font với chiều rộng tương ứng và kerning

h1, h2, h3, h4, h5, h6 {word-spacing: .1em;}p {letter-spacing: .03em;}

Slide 7 - Bố cục trong thiết kế web 24

Page 25: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

XÂY DỰNG HỌ FONT LINH ĐỘNG

Chắc chắn rằng kiểu chữ có chứa tất cả trọng lượng(weight) và kiểu dáng (style) mong muốn

Download font cần thiếtNhúng web safe, lõi (core), và họ font-family chung

b, strong { font-weight: normal; font-variant: small-caps;}

Chắc chắn rằng kiểu chữ có chứa tất cả trọng lượng(weight) và kiểu dáng (style) mong muốn

Download font cần thiếtNhúng web safe, lõi (core), và họ font-family chung

Slide 7 - Bố cục trong thiết kế web 25

body { font-family: “bell mt”, “goudy old style”, times, serif;}h1, h2, h3, h4, h5, h6 {

font-family: “alice headline”, tahoma, arial, sans-serif;}

Page 26: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỔNG KẾT

Bố cục của trang web thường gồm các thành phần:Containing blockLogoNavigationContentFooterWhitespace

Nên thiết lập lại những mặc định của trình duyệtThiết kế hiển thị link một cách rõ ràng

Bố cục của trang web thường gồm các thành phần:Containing blockLogoNavigationContentFooterWhitespace

Nên thiết lập lại những mặc định của trình duyệtThiết kế hiển thị link một cách rõ ràng

Slide 7 - Bố cục trong thiết kế web 26

Page 27: BÀI 7 Bố cục trong thiết kế web - Giáo trình FPT

TỔNG KẾT

Sử dụng kỹ thuật lưới (grid) vào việc thiết kế layouttrang web. Việc này sẽ tạo ra sự nhất quán về bốcục các trang web trong toàn bộ websiteSử dụng font với kích thước và loại font chính xáccho từng vùng vị tríChắc chắn rằng kiểu chữ có chứa tất cả trọng lượng(weight) và kiểu dáng (style) mong muốnNhúng web safe, lõi (core), và họ font-family chung

Sử dụng kỹ thuật lưới (grid) vào việc thiết kế layouttrang web. Việc này sẽ tạo ra sự nhất quán về bốcục các trang web trong toàn bộ websiteSử dụng font với kích thước và loại font chính xáccho từng vùng vị tríChắc chắn rằng kiểu chữ có chứa tất cả trọng lượng(weight) và kiểu dáng (style) mong muốnNhúng web safe, lõi (core), và họ font-family chung

Slide 7 - Bố cục trong thiết kế web 27