Web design for developers chapter 9building the home page with HTML

The Home-Page Structure  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ê

GIAO TIẾP NGƯỜI MÁY

ĐỀ TÀI BÁO CÁO: Web Design for

Developers

Chapter 9:Building the Home Page with HTML

NỘI DUNG

I Working with Web Standards

1 Khái niệm W3C ?

2 Một website chuẩn W3C khi nó trải qua đủ 4 giai đoạn chuẩn sau:

 Phác thảo (Working Draft).

 Chỉnh sửa Cuối cùng (Last Call)

 Trình chuẩn (Proposed Recommendation)

 Chuẩn đủ Tư cách Ứng cử (Candidate Recommendation

3 Lợi ích ?

II The Home-Page Structure

 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,

Ví dụ web đkmh:

Ví dụ giao diện của facebook

Cấu trúc trang web

Các ví dụ về layout trong thiết kế trang web

 Ví dụ thực tế

Kiểu khối hộp:

Hiệu ứng màn hình 3 chiều

 Ví dụ thực tế

Kiểu lưới nâng cao

 Ví dụ thực tế

Kiểu sử dụng ảnh đồ họa làm trọng tâm

 Ví dụ thực tế

III The header

 Vùng Header chứa tiều đề và phụ đề trang.

 Sử dụng thẻ <header> để tạo ra vùng header của trang

 Thẻ <header> có thể chứa thông tin mở về một

<section> và <article>.

The Header

Ví dụ 1:

Ví dụ 2: chưa 1 <hgroup>, tạo nhóm các tiêu đề,bằng sử dụng các mức từ h1 ->h6

Và có 1 tiều đề chính và 1 tiều đề phụ

IV Navigation

 Sử dụng thẻ<nav> để tạo vùng Navigation và nó được đinh nghĩa một vùng đặc biệt dành cho việc chuyển hướng.

 Nên sử dụng thẻ <nav> để chuyển hướng trang web chính, không dùng để thiết lập các liên kết.

Ví dụ:

V The Sidebar

 Nên đặt gì ở Sidebar?

 Nên đặt bên trái hay bên phải?

VI The Main Content

Thẻ Section

Thẻ section dùng để xác định các phần quan trọng của nội dung trên trang Thẻ này có phần tương tự như việc chia một cuốn sách thành các chương.

Ví dụ

Thẻ article

Ví dụ

Thẻ article (mục) xác định các phần nội dung chính trong một trang web

Hãy nghĩ về một blog, nơi mà mỗi bài đăng riêng sẽ tạo nên một phần nội dung có ý nghĩa

Ví dụ:

 Phần <footer> chứa thông tin về một trang web hoặc một bài viết, chẳng hạn như tác giả hay ngày viết bài.

 Là phần cuối trang nên nó có thể chứa bản quyền và thông tin

pháp lý quan trọng

VII.The Footer

<footer>

<p>Posted by: Hege Refsnes</p>

<p>Contact information: <a href=“mailto:someone@example.com”>

someone@example.com</a>.</p>

</footer>

Cám ơn thầy và các bạn đã

lắng nghe.