NGÂN HÀNG PHÁT TRIỂN ỨNG DỤNG WEB

Logo là ảnh đại diện của trang web  Ô số 2 là slogan: Là nơi thể hiện định hướng của trang web  Ô số 3 là quảng cáo: là nơi bạn đặt quảng cáo  Ô số 4 là menu: là nơi chứa các chuyên m

PHÁT TRIỂN ỨNG DỤNG WEB

1 Trình bày cấu trúc cơ bản của một trang web?

Hình 1 Cấu trúc, thành phần của website

1 Phần Header: header là phần đầu của trang web Nó bao gồm các phần 1,2,3,4 ở trên hình vẽ

 Ô số 1 là logo Logo là ảnh đại diện của trang web

 Ô số 2 là slogan: Là nơi thể hiện định hướng của trang web

 Ô số 3 là quảng cáo: là nơi bạn đặt quảng cáo

 Ô số 4 là menu: là nơi chứa các chuyên mục cho trang web của bạn

2 Phần Content: Là nơi chứa nội dung của trang web, chứa tất cả những gì bạn muốn thể hiện Nó ở vị trí 5 và 6 trên hình vẽ.

Trong các ô số 5 và số 6 có thể chia nhỏ hơn nữa thành các ô khác để phù hợp với các web khác nhau nhưng điều đó không quan trọng Khi bạn đã quen với cấu trúc này rồi thì việc chia nhỏ hơn nữa rất đơn giản

 Ô số 5 là Content: chứa nội dung chính thế hiện Thông thường chỉ là ảnh đại diện, tiêu đề, và vài dòng mô tả của bài viết

 Ô số 6 là Sidebar second: Chứa các nội dung liên quan đến nội dung chính đang trình bày

3 Phần footer: Phần để các thông tin cần để người xem có thể liên hệ với người chủ trang web Là ô số 7 trên hình vẽ

Lưu ý:

Các trang cơ bản cần xây dựng khi làm web 1 trang web thì có 3 trang chính sau: Trang chủ, trang chuyên mục và trang chi tiết

 Trang chủ: là bộ mặt của trang web, là phần đầu tiên khi người dùng

vào web được tiếp cận; trang chủ là trang khi bạn gõ tên miền lên trình duyệt sẽ vào luôn

 Trang chuyên mục: Các bài viết trong trang web có cùng nội sẽ được

nhóm vào với nhau thành chuyên mục Trang chuyên mục là trang để thể hiện các nội dung được nhóm đó

 Trang chi tiết: Là trang thể hiện chi tiết nội dung bài viết.

Cấu trúc cơ bản của trang web

Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.

 Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các

button, đoạn flash, hoặc các form ngắn như form tìm kiếm,

 Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang

quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub

navigation).

 Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần

nội dung phụ (sidebar).

 Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người

dùng xem.

 Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local

navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,

 Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa

chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,

2 Nguyên tắc cơ bản thiết kế giao diện web?

"Chuyển động của mắt và sự ảnh hưởng đến giao diện" : Logo + Nút bấm + Sự sắp xếp + Không gian

 Logo đặt ở phía bên trái, nơi nhận được nhiều sự chú ý nhất của website Tránh đặt chung với banner

 Nội dung quan trọng nên tận dụng đặt ở bên trái website không nên đặt bên phải là nơi kém được chú ý nhất

 Các nút điều hướng nên đặt ở trên cùng hoặc nếu ở bên trái thì nên thiết kế gọn, thậm chí là dạng menu ẩn

 Nội dung quan trọng nhất nên để ở hai đoạn đầu của website, nếu có thể hãy sử dụng hình ảnh để truyền thông điệp thay vì sử dụng văn bản

 Không nên viết quá nhiều, hãy để những khoảng trống và hình ảnh đẹp nhiều hơn vì việc có quá nhiều nội dung thông tin trong một bài mà không có hình ảnh sẽ gây khó chịu cho người đọc

=> Tóm lại, cách nhìn và đọc của độc giả chính là điều quan trọng nhất trong thiết kế giao diện cũng như thiết kế website tổng thể mà cụ thể là

sự chuyển động của mắt Khi thiết kế bạn nên dựa vào những nguyên tắc này để có một website hoàn hảo, điều hướng đúng người dùng

a Đảm bảo tính thống nhất

b Cho phép người dùng sử dụng các phím tắt

c Cung cấp phản hồi

d Chia nhỏ hành động để thấy được kết quả ngắn hạn

e Dễ dàng khắc phục lỗi

f Cho phép đảo ngược hành động

g Con người làm chủ

h Giảm tải bộ nhớ ngắn hạn

3 Phác họa giao diện khung mẫu cho những website đồ án?

4 Phác họa giao diện khung mẫu cho website thương mại?

5 Phác họa giao diện khung mẫu cho website giải trí?

6 Phác họa giao diện khung mẫu cho blog?