TKDH

1. Layout là gì?
 Layout là một từ tiếng Anh có nghĩa là bố cục, cách sắp
xếp, trình bày các bộ phận, chi tiết nằm trong bản thiết
kế đó bao gồm việc căn chỉnh tỷ lệ, khoảng cách và lựa
chọn vị trí cho các thành phần. Đây là từ khóa quen
thuộc trong lĩnh vực như thiết kế như sách, báo, tạp chí,…
1

2. Layout trong thiết kế website
 Tương tự, trong thiết kế web, layout chính là cách dàn
trang, sắp xếp các yếu tố sẽ được hiển thị trên website.
Thông thường các website có thể chia thành trang chủ
và các trang nội dung. Hai loại trang này thường sẽ có
phần đầu trang và chân trang giống nhau nhưng các
thành phần nội dung sẽ rất khác biệt.
Đối với các loại trang sẽ có kiểu layout khác nhau, đảm
bảo những yếu tố cần thiết đều có vị trí, màu sắc và kích
thước hiển thị phù hợp, giúp người dùng dễ theo dõi.
 Lên kế hoạch sắp xếp layout bao gồm cả căn chỉnh các
yếu tố như font chữ, cỡ chữ, màu sắc thiết kế, khoảng
cách lề, khoảng cách hiển thị, vị trí căn lề, hiển thị ảnh,
… tạo sự thống nhất giữa các trang nội dung. Thiết kế
phần đầu trang, chân trang cũng như khoảng cách lề
2

3. Khái niệm Template
 Template cũng là một dạng layout, chúng được dùng để chỉ các mẫu
layout đã được thiết kế sẵn. Người dùng chỉ cần tải về và chỉnh sửa
qua một số các chi tiết nhỏ trước khi áp dụng cho website. Template
sẵn có thường giúp bạn tiết kiệm đáng kể thời gian và công sức thiết
kế. Tuy nhiên, vì là những sản phẩm được thiết kế sẵn, nên sẽ rất
khó để phù hợp mọi yêu tố bạn mong muốn cũng như khó đáp ứng
đầy đủ nhu cầu sử dụng cho website của bạn.
3

4. Tầm quan trọng của Layout trong thiết kế
Đảm bảo tính thẩm mỹ
 Khi bạn có kế hoạch hoàn hảo để đưa các thành phần lên website bạn
sẽ chủ động đảm bảo cấu trúc website theo đúng ý muốn của bạn. Thay
vì đưa tất cả các thành phần cần hiển thị lên màn hình máy tính, điện
thoại của bạn một cách tự nhiên, không sắp xếp, không căn chỉnh,
layout sẽ khiến từng bộ phận của website có cảm giác gọn gàng, đẹp
mắt và có tính thẩm mỹ hơn. Những mẫu layout mới lạ, độc đáo còn có
thể trở thành một điểm nhấn, giúp người dùng nhớ đến website của
bạn, đặc biệt khi website của bạn về các lĩnh vực như thời trang, mỹ
thuật, nhiếp ảnh, nghệ thuật,…
Tạo sự liên kết giữa các thành phần trong thiết kế
 Việc bố trí, sắp xếp các thành phần của website một cách hợp lý sẽ giúp
bạn điều khiển được tâm lý khách hàng. Người đọc sẽ bị chú ý đến
những bộ phận được bạn nhấn vào, dẫn người đọc đi theo đúng mạch
kết cấu và gần như không bỏ sót bất kỳ yếu tố nào được hiển thị. Sự
sắp xếp hài hòa này cần được thực hiện dựa trên mối liên hệ của các
yếu tố về mặt nội dung. Nhiệm vụ của layout sau đó chính là gián tiếp
thể hiện mối quan hệ này một cách trực quan hơn, giúp người dùng dễ
dàng tìm kiếm mở rộng những vấn đề mà họ quan tâm. 4

5. Gia tăng sự thu hút
 Website của bạn bắt mắt về thiết kế và liên kết
mạch lạc giữa các nội dung sẽ tạo ra sức hút, khiến
người truy cập cảm thấy thoải mái và bị hấp dẫn
bởi cách nội dung được hiển thị trước mắt họ.
5

6. Cách dàn trang và sắp xếp bố cục trong thiết kế
Việc sắp xếp bố cục trong thiết kế sẽ phụ thuộc rất nhiều vào sức sáng tạo của
các designer cũng như là mục đích xây dựng website. Tuy nhiên, có một quy
tắc cơ bản về thiết kế có thể được áp dụng để tạo ra những layout chất
lượng đó chính là thêm hiệu ứng.
Hiệu ứng lân cận
 Hiệu ứng lân cận là việc sử dụng không gian thị giác tạo ra mối
liên hệ giữa các thành phần trên website. Hiểu một cách đơn
giản là các yếu tố có liên quan đến nhau sẽ được đặt gần nhau,
tạo thành một nhóm. Ví dụ như các hình ảnh minh họa sẽ được
đặt gần tiêu đề bài viết, những biểu tượng kết nối mạng xã hội sẽ
được đặt thành một hàng ở góc trên cùng,… Trong khi đó, những
nhóm không liên quan sẽ được đặt ở một vị trí xa hơn để tạo nên
khoảng cách trực quan. Người truy cập chỉ cần lướt qua cũng có
thể nắm bắt được cơ bản các thành phần xuất hiện trong trang.
6

7. Không gian trắng
 Không gian trắng hay khoảng trống là những diện tích
mà người thiết kế cố tính để trống để website trông
khoa học hơn, không có cảm giác chật chội, chen chúc
các thành phần. Khoảng trống này bao gồm cả phần
không gian giữa các phần nội dung và phần lề. Người
dùng sẽ cảm thấy thoải mái hơn khi phải xem liên tục
quá nhiều thông tin và hình ảnh, đồng thời cũng
khiến phần nội dung trở nên thu hút và bắt mắt hơn.
Căn chỉnh
 Các yếu tố đồng cấp sẽ cần được căn chỉnh chính xác,
cân bằng nhằm tạo ra sự gọn gàng, nhất quán cho nội
dung. Ví dụ như khi căn chỉnh ba hình ảnh được đặt
ngang hàng, bạn cần điều chỉnh để chúng có kích
thước bằng nhau, hiển thị trên cùng một đường thẳng
7

8. 8

9. Tương phản
 Nguyên tắc tương phản là nguyên tắc tốt nhất cho bạn để tạo
nên điểm nhấn, sự khác biệt cho một yếu tố so với những yếu tố
khác trên trang web. Sự tương phản này có thể nằm ở sự khác
biệt trong diện tích hiển thị, sự đối lập trong thiết kế màu sắc
hoặc sử dụng hình ảnh động trong nền tĩnh.
Phân cấp
 Phân cấp cũng là một kỹ thuật trực quan, giúp người dùng ngay
lập tức xác định được những phần quan trọng, những nội dung
chính nhất nên được quan tâm.
Sự lặp lại
 Sự lặp lại sẽ khiến người dùng dễ theo dõi và cảm thấy tập trung
hơn vào thành phần chính thay vì quan sát sự khác biệt ở từng
trang. Điều này cũng có nghĩa là bạn nên lặp lại layout ở những
vị trí hợp lý, có nét tương đồng với nhau.
 Hy vọng qua bài viết bạn đã hiểu thêm về layout và tầm quan
trọng của bố cục website.
9

10. Bố cục website
 Bố cục website là một khung xác định cấu trúc
trang web. Nó có vai trò cấu trúc các thông tin
hiện diện trên website cho cả chủ sở hữu và
khách truy cập. Bố cục website cung cấp các
đường dẫn rõ ràng để điều hướng trong các
trang web (web page), đặt các thông tin quan
trọng ở vị trí phía trước & trung tâm của trang
web.
 Hiểu một cách ngắn gọn, bố cục website là một
yếu tố quan trọng làm cho một website có thể
thành công. Hoặc thất bại.
 Có một mối quan hệ chặt chẽ giữa bố cục và
những người dùng website. Nó xác định thời
10

11. Các yếu tố khi thiết kế bố cục website
Bố cục kích thích thị giác
 Bố cục kích thích thị giác được tạo bởi sự tương phản của
không gian, màu sắc, độ sáng và nó dễ dàng nhận thấy nếu
được đan xen trong một sự cân bằng tổng thể của các yếu tố.
Bố cục này giúp người dùng thoát khỏi thói quen lướt web
và xử lý thông tin trên website theo cách hoàn toàn mới,
khiến người dùng tập trung sự chú ý vào các điểm chính của
website.
Bố cục kể chuyện
 Bố cục tạo ra khuôn cho thông điệp bạn phải truyền tải. Các
khu vực website được liên kết với nhau để kể một câu
chuyện hoàn chỉnh. Mỗi yếu tốt trong chuỗi này là một
chương khác nhau trong câu chuyện mà doanh nghiệp
muốn truyền tải.
11

12. Phá vỡ khuôn mẫu
 Trong khi các bố cục website thường đi theo con đường
truyền thống với mục đích phục vụ tốt nhất chức năng
website thì các bố cục website vượt khỏi ranh giới tiêu
chuẩn sử dụng thiết kế và cấu trúc táo bạo, với mục đích
chính là tạo ấn tượng với người dùng. Phá vỡ khuôn mẫu
có nghĩa là sự sắp xếp bất ngờ của các yếu tố trong website
và những trải nghiệm mới lạ mà nó mang lại trong cả rừng
websute đi theo tiêu chuẩn. Điều đó làm cho người dùng
không thể không nhớ đến website của bạn!
Bố cục zíc zắc
 Bố cục này khiến người dùng duyệt nội dung theo chiều
chữ Z: mắt di chuyển từ trái sang phải, đi xuống và sang
trái, di chuyển qua phải một lần nữa. Bố cục này có thể
được áp dụng cho website thuộc nhiều lĩnh vực khác nhau.
12

13. 13

14. Ảnh toàn màn hình (Full Screen Photo)
 Bố cục này truyền tải nội dung qua hình ảnh toàn màn
hình. Các phần văn bản hoặc các phần menu đều có thể
hỗ trợ cho hình ảnh được sử dụng. Bố cục này được áp
dụng với các website muốn ngay lập tức gây ấn tượng
với khách truy cập về chủ đề chính của website.
14

15.  Loại trang web này rất phổ biến cho các nghành vì khi
sử dụng loại layout này thì đập vào mắt người dùng đầu
tiên là phần banner sẽ full height toàn màn hình với các
hiệu ứng slide hay animation độc đáo, quảng cáo được
sản phẩm của mình thông qua banner này.
 Các thành phần còn lại hay nói cách khác là nội dung
của trang web được chia theo section mỗi section full
màn hình theo chiều ngang như thế này.
15

16. Bố cục lưới (Grid Layout)
 Thông tin được sắp xếp thành dạng lưới giúp dễ dàng truy
cập và duyệt web. Người dùng có thể dừng lại ở chủ đề cụ
thể mà họ quan tâm.
 Bố cục lưới cho phép phân phối đồng đều văn bản, hình
ảnh, video lên các website. Bố cục lưới áp dụng tốt nhất
cho các trang website báo chí, vlog, tin tức...
16

17. Bố cục một cột
 Đây là loại bố cục
sắp xếp thông tin
thành một cột duy
nhất - một trong
những loại bố cục
đơn giản nhất. Ưu
điểm của bố cục
website này đó là
dễ theo dõi nội
dung (văn bản,
hình ảnh, video).
 Bố cục một cột
thường được áp
dụng cho các bài
nghiên cứu hay bài
báo dài. 17

18. Bố cục bất đối xứng (Asymmetrical Layout)
 Bố cục bất đối xứng - đúng với cái tên của nó, phá vỡ các
quy tắc đối xứng theo đúng tiêu chí: Có nhiều thứ phải cung
cấp hơn là sự hoàn hảo. Bố cục bất đối xứng tạo ra nhiều
không gian và làm cho không gian âm trở nên sống động
hơn. Bố cục này được sử dụng cho các website kinh doanh
sáng tạo, các website giới thiệu công ty, sản phẩm dịch vụ...
18

19. 19

20. Bố cục chia nhỏ màn hình
 Kiểu bố cục này đề cập đến việc chia màn hình theo chiều
dọc và chiều ngang. Màn hình chia dọc để truyền đạt tầm
quan trọng kép, khuyến khích sự lựa chọn nhanh chóng, tăng
tương tác với website. Bố cục website này được khuyến nghị
dành cho các cửa hàng trực tuyến (bán đồ cho nam và nữ),
website sáng tạo...
20

21. Bố cục khối
 Bố cục này liên quan đến Material Design - một giao thức
thiết kế được Google đưa ra. Nó ngày càng trở nên phổ
biến do tính linh hoạt và khả năng đáp ứng của mình. Bố
cục khối có nghĩa là, mỗi một đơn vị nội dung sẽ được
đặt trong một khối riêng. Các website áp dụng bố cục
này có giao diện được sắp xếp hợp lý và mạch lạc.
21

22. Bố cục đối xứng xuyên tâm
 Đây là một kiểu bố cục website đẹp ít phổ biến.
Bố cục này có một điểm trung tâm và từ đó tỏa ra
các mục liên quan ở dạng tròn.
22

23. F Layout
 Mặc dù layout này khá cũ nhưng nó được sử
dụng rất phổ biến cho web admin cho document,
magazine....
 Bố cục nãy ra đời rất lâu, các trang web thời đầu
hay sử dụng bố cục dạng này để phát triển. Ngày
nay bố cục chữ F cũng được sử dụng rất phổ
biến, thường người ta sử dụng layout này cho
việc viết document bởi vì việc thiết kế kiểu này
giúp người đọc dễ hình dung cũng như tóm tắt
được nội dung cần đọc
23

24. 24

25. WEB TĨNH VÀ WEB ĐỘNG
WEBSITE TĨNH
Là trang web s d ng hoàn toàn ngôn ng HTML, sau khi t i trang
ử ụ ữ ả
HTML t máy ch xu ng, trình duy t s biên d ch mã và hi n th
ừ ủ ố ệ ẽ ị ể ị
n i dung trang web, ng i dùng h u nh không th t ng tác v i
ộ ườ ầ ư ể ươ ớ
trang web.
Khi nào s d ng web tĩnh?
ử ụ
- N i dung website ít khi c p nh t và b n mu n ti t ki m chi phí
ộ ậ ậ ạ ố ế ệ
- Website b n nh và b n thuê luôn ng i chuyên v web đ
ạ ỏ ạ ườ ề ể
qu n tr
ả ị
- N u b n là doanh nghi p mu n t mình làm website thì b n có
ế ạ ệ ố ự ạ
th h c các ki n th c căn b n và t làm m t Web tĩnh
ể ọ ế ứ ả ự ộ
+ u đi m c a website tĩnh:
Ư ể ủ
- T c đ truy c p nhanh b i nó ch là nh ng file HTML
ố ộ ậ ở ỉ ữ
- Chi phí đ u t th p b i b n không ph i tr ti n nhi u cho Coder
ầ ư ấ ở ạ ả ả ề ề
- V giao di n Designer có th thi t k theo ki u m i l
ề ệ ẻ ế ế ể ớ ạ
- Thân thi n v i b máy tìm ki m b i b n có th đ t tên file tùy ý
ệ ớ ộ ế ở ạ ể ặ
+ Nh c đi m c a website tĩnh:
ượ ể ủ
- Khó qu n lý n i dung
ả ộ

26. WEBSITE ĐỘNG
Là m t t p h p các d li u s hóa đ c t ch c thành c s d
ộ ậ ợ ữ ệ ố ượ ổ ứ ơ ở ữ
li u, các d li u s hóa đ c g i ra trình di n trên các trang web
ệ ữ ệ ố ượ ọ ễ
d i d ng văn b n, âm thanh
ướ ạ ả - hình nh
ả , nó có thêm các ph n x
ầ ử
lý thông tin và truy xu t d li u còn website tĩnh thì không.
ấ ữ ệ
Khác v i web tĩnh, web đ ng luôn luôn có thông tin m i do các
ớ ộ ớ
thông tin này đ c c p nh t b i ph n m m qu n tr web do các
ượ ậ ậ ở ầ ề ả ị
công ty thi t k website cung c p. Các thông tin m i này đ c
ế ế ấ ớ ượ
l u vào c s d li u c a website và đ a ra s d ng d a theo
ư ơ ở ữ ệ ủ ư ử ụ ự
yêu c u c a ng i dùng.
ầ ủ ườ
Trang web đ ng đ c các chuyên gia l p trình, s d ng các
ộ ượ ậ ử ụ
ngôn ng l p trình t o ra mã ngu n d a theo yêu c u c a trang
ữ ậ ạ ồ ự ầ ủ
web.
Khi nào s d ng web
ử ụ động?
- Làm web tin tức, blog cá nhân
- Website có tầm cỡ lớn
- Làm website thương mại điện tử bán hàng

27. + u đi m c a website đ ng:
Ư ể ủ ộ
 D dàng nâng c p và b o trì
ễ ấ ả
 Có th xây d ng đ c
ể ụ ượ website l n
ớ
 Th ng s d ng t ng tác v i ng i dùng
ườ ử ụ ươ ớ ườ
cao
 D dàng qu n lý n i dung
ễ ả ộ
+ Nh c đi m c a website đ ng:
ượ ể ủ ộ
 N u web
ế site l n có th c n thêm nhân s
ớ ể ầ ự
chuyên ngành
 Chi phí xây d ng cao
ự

28. Xác định cấu trúc của giao diện trang web
• Tr c tiên chúng ta
ướ
c n xác đ nh s chia
ầ ị ẽ
giao di n ra thành các
ệ
ph n nh nào? Vi c
ầ ỏ ệ
này thì tuỳ theo quy
mô c a trang. Trang
ủ
càng nhi u ch c
ề ứ
năng, các ch c năng
ứ
càng tách bi t v i
ệ ớ
nhau thì càng ph i
ả
chia thành nhi u ph n
ề ầ
nh . Đ thu n ti n cho
ỏ ể ậ ệ
vi c s d ng, template
ệ ử ụ
đ c view render tr c
ượ ự
ti p ch nên k th a 1
ế ỉ ế ừ
template main (Thay vì
m i l n dùng ph i k
ỗ ầ ả ế
th a nhi u template),
ừ ề
main template có thể

29. C u trúc th m c c b n cho thi t k website
ấ ư ụ ơ ả ế ế
• Đ b t đ u th c hi n m t d án website hay đ thi t k m t
ể ắ ầ ự ệ ộ ự ể ế ế ộ
website. Chúng ta c n có c u trúc các th m c đ l u tr các
ầ ấ ư ụ ể ư ữ
t p tin ch y ch ng trình. D i đây là m t c u trúc th m c c
ệ ạ ươ ướ ộ ấ ư ụ ơ
b n đ ti n hành l p tr nh d án web.
ả ể ế ậ ị ự
Trong đó:
• Admin: ch c các t p tin tác đ ng đ n h th ng website nh thêm
ứ ậ ộ ế ệ ố ư
s a xóa, thao tác v i c s d li u (ph n back end).
ử ớ ơ ở ữ ệ ầ
• Classes: ch c các t p tin c u hình các l p x lý cho ph n ng i
ứ ậ ấ ớ ử ầ ườ
dùng.
• Configs: ch c các t p tin c u hình chung cho website
ứ ậ ấ
• Elements: hay module ch a các t p tin th hi n các ch c năng
ứ ệ ể ệ ứ
c a website
ủ
• Libraries: ch c các t p tin th vi n và các thành ph n m r ng t
ứ ậ ư ệ ầ ở ộ ừ
bên th ba
ứ
• Media: ch các t p tin hình nh, file,…
ứ ậ ả
• Templates: ch a các t p tin th hi n giao di n ng i dùng.
ứ ậ ể ệ ệ ườ
• Index.php: t p tin chính c a trang website
ệ ủ
 Trên đây ch là c u trúc các th m c đ n gi n đ ti n hành
ỉ ấ ư ụ ơ ả ể ế
l p trình web
ậ . Khi tri n khai thêm các ng d ng m i chúng ta có
ể ứ ụ ớ
th có thêm các th m c m i.
ể ư ụ ớ

30. Những thành phần cơ bản trên website
 Header
• Thành ph n này n m v trí đ u trang web và đ c
ầ ằ ở ị ầ ượ
hi n th t t c các trang trong website
ể ị ở ấ ả (trang gi i
ớ
thi u, trang liên h , trang s n ph m, trang d ch v …
ệ ệ ả ẩ ị ụ
là các Webpage).
• Bên trong header th ng ch a nh ng thành ph n
ườ ứ ữ ầ
sau:
– Site ID
– Home link
– Menu đi u h ng
ề ướ
– Search box
– Gi h
ỏ àng
 Site ID
• Là đ nh danh cho website, d hi u h n là tên
ị ễ ể ơ
website. Site ID th ng đ c đ t góc bên tay trái.
ườ ượ ặ ở
B n d th y nh t chính là hình logo ho c m t đo n
ạ ễ ấ ấ ặ ộ ạ

31.  Home link
Home link hay còn gọi là đường dẫn liên kết đến trang chủ, khi
bạn click vào link này sẽ chuyển đến trang chủ của website.
• Home link có thể được làm theo hai cách sau:
– Được gắn vào logo website.
– Được gắn vào đoạn chữ, bạn dễ thấy nhất như chữ Trang chủ
hay Home …
 Menu điều hướng
- Là vùng chứa tập hợp các link dẫn đến các trang chính trên
website. - Thông thường menu sẽ được đặt bên trong header.
Menu được thiết kế dễ nhìn, giúp cho người dùng nhanh chóng đi
đến các trang chính trên website. Ví dụ bạn thấy menu có thể
gồm các link sau như: Trang chủ, Sản phẩm, Liên hệ, Giới thiệu
…
- Có khi menu cũng được đặt ở Scan columns hay Footer, những
thành phần này bạn sẽ gặp ở phần tiếp theo.

32.  Ô tìm kiếm (Search box)
- Đối với những website có rất nhiều bài viết hay sản phẩm, ô tìm
kiếm giúp người dùng tìm những thông tin trên website một cách
nhanh chóng.
- Ở header, ô tìm kiếm thường đặt phía góc phải và được làm
đơn giản để không chiếm qua nhiều diện tích. Nó chỉ bao gồm
một ô để nhập từ khóa cần tìm và một nút tìm. Nếu bạn nghĩ đến
một ô tìm kiếm có nhiều chức năng hơn ví dụ như tìm theo danh
mục sản phầm, màu sắc … (thường gọi là tìm kiếm nâng cao),
hãy nghĩ đặt nó ở Scan columns.
 Giỏ hàng
Đối với những website bán hàng, bạn để ý sẽ thấy một biểu
tượng hình giỏ hàng được đặt phía bên góc phải. Giỏ hàng có
thể hiển thị thông tin như: số lượng sản phẩm đã chọn, tổng
thành tiền là bao nhiêu? Khi người dùng click vào sẽ được
chuyển đến trang giỏ hàng để xem chi tiết các sản phẩm đã đặt
mua.

33.  Slider
- Thành phần này thường được đặt bên dưới header. Slider phổ biến là
hình ảnh, gồm nhiều tấm hình khác nhau nhưng không phải là hiển thị tất cả
lên trang web. Slider sẽ có nút điều hướng, giúp bạn có thể di chuyển qua
các slide khác. Ngoài ra slide có thể là video.
- Slider được thiết kế đẹp sẽ thu hút khách hàng của bạn ngay lần đầu tiên
vào trang web. Ngày nay, bạn có thể bắt gặp slide ở rất nhiều trang web
khác nhau.
 Scan columns (Chia cột website)
- Tại sao gọi là “scan columns”, scan giống như là bạn dùng mắt duyệt qua
từng phần của trang web, mà cụ thể ở đây là cột (columns). Khái niệm scan
columns đã có từ rất lâu, trước đó đã được dùng trong việc xuất bản sách
báo. Ngày nay scan columns được áp dụng rộng rãi trong thiết kế website.
Các dạng chia cột phổ biến bạn thường bắt gặp như chia 2 cột, 3 cột …
Scan column thường chiếm chiều rộng không quá nhiều, nó có thể chứa các
thành phần sau:
– Menu điểu hướng
– Box tìm kiếm nâng cao
– Sản phẩm, bài viết nổi bật
– Thông tin liên hệ
– Banner quảng cáo
– …

34.  Banner
Có một số trường hợp nhầm lẫn giữa banner và header. Thực ra
banner và header là hoàn toàn khác nhau. Từ banner được
dùng trong việc quảng cáo như quảng cáo sản phẩm, quảng cáo
sự kiện … Banner thông thường sẽ là hình ảnh, được thiết kế
bắt mắt nhằm thu hút khách hàng. Các vị trí đặt banner phổ biến
như trên cùng của trang (trên phần header) hay ở scan column.
Ngoài ra bạn có thể thấy banner quảng cáo trong video clip như
youtube chẳng hạn.
 Content area (phần nội dung trang web)
Đây là phần nội dung chính của trang web và chứa thông tin nhiều
nhất. Phần nội dung trình bày dễ nhìn, thông tin hay sẽ giữ chân
khách hàng của bạn lâu hơn.
Phần nội dung thường chứa các thành phần sau:
– Tiêu đề trang (Page title): thường được đặt ở đầu phần nội
dung. Tiêu đề thường có font chữ to và in đậm nhằm cho người
dùng biết trang web đang nói về vấn đề gì.

35. – Breadcrumb navigation (Breadcrumb trails): là thanh điều
hướng phân cấp, giúp người dùng biết mình đang ở đâu trên trang
web và có thể di chuyển giữa các mục trên trang web một cách
nhanh chóng. Bạn để ý những trang tin tức thường có thanh điều
hướng này và nó được đặt ở đầu phần nội dung trang. Ví dụ như:
Tin tức → Thể thao …
– Phần nội dung chính: phần này có thể chứa bất kì thông tin nào,
thông thường website sẽ có phần quản trị hay còn gọi là CMS để
bạn có thể nhập nội dung này.
– Paging navigation (điều hướng phân trang): đối với những trang
web chứa rất nhiều nội dung như một trang trình bày danh sách
sản phẩm hay danh sách bài viết, việc phân trang nhằm giúp giảm
tải cho trang web để trang web load nhanh hơn, nó cũng giúp cho
người dùng không phải cuộn chuột quá nhiều. Điều hướng phân
trang thường được đặt ở đầu, cuối hay cả đầu và cuối trong phần
nội dung trang.
– Thanh thông tin: thường được đặt ở đầu hay cuối phần nội
dung trang, thanh thông tin thường bao gồm các thông tin như
ngày đăng bài viết, tác giả là ai, số lượt xem bài viết …
– Thanh chia sẻ mạng xã hội: bao gồm các nút chia sẻ trang qua
các mạng xã hội phổ biến như Facebook, Google, Twitter …

36. • Page footers
Còn gọi là chân trang, nằm ở vị trí cuối cùng của
trang web và được hiển thị ở tất cả các trang
trong website của bạn.
Chân trang thường chứa các thành phần sau:
– Thông tin bản quyền website
– Link liên kết
– Menu
– …
• Thực hành
Thiết kế Website từ template (offline):
 http://www.free-css.com
Thiết kế Website trực tuyến (online):
 http://www.wix.com