Bài giảng Thiết kế Web - Bài 3: Bố cục trang Web và bảng (Table) trên trang Web

 BÀI 3
BỐ CỤC TRANG WEB & BẢNG (TABLE) TRÊN TRANG
 WEB
 NHẮC LẠI BÀI TRƯỚC
 Làm quen với HTML:
 Khái niệm, cấu trúc
 Cách viết mã HTML với môi trường soạn thảo
 (notepad, Dreamweaver, …)
 Làm việc với những thành phần:
 • Văn bản
 • Hình ảnh
 Làm quen với CSS
 Khởi tạo CSS với Dreamweaver CS4
 Bố cục trang web với CSS
Slide 3 - Bố cục web & Bảng (table) trên trang web 2
 MỤC TIÊU BÀI HỌC
 Bố cục website với CSS:
 Mô hình CSS Box
 Làm việc với div và AP div
 Xếp chồng và xếp gối các thành phần
 Tạo style cho nội dung hộp
 Điều chỉnh vị trí
 Tổ chức và phác thảo website
 Cách làm việc với bảng (table) trên trang web:
 Khởi tạo bảng với HTML
 Định dạng style cho bảng với CSS/ HTML
Slide 3 - Bố cục web & Bảng (table) trên trang web 3
BỐ CỤC WEBSITE VỚI CSS
 BỐ CỤC WEBSITE VỚI CSS
 Mô hình CSS Box:
 CSS bố trí các thành phần trong trang bằng mô hình
 Box
 Trong Box có thể chứa văn bản, hình ảnh, nội dung
 đa phương tiện, bảng, ….
 Mỗi Box đảm nhiệm một vùng nhất định trên trang
 Box được xác định bởi chiều rộng và chiều dài
Slide 3 - Bố cục web & Bảng (table) trên trang web 5
 BỐ CỤC WEBSITE VỚI CSS
 Các thiết lập trong
 mô hình Box:
 -Lề
 - Khoảng đệm
 -Đường viền
 Mô hình CSS Box
Slide 3 - Bố cục web & Bảng (table) trên trang web 6
 BỐ CỤC WEBSITE VỚI CSS
 Lề (margins):
 Phần trong suốt bao quanh ngoài hộp
 Thiết lập bằng nhóm thuộc tính margins
 Tạo khoảng cách giữa các box hoặc đường biên trang
 Khoảng đệm (padding):
 Là khoảng cách giữa cạnh trong của hộp và nội dung
 Thiết lập bằng nhóm thuộc tính padding
 Đường viền (border):
 Nằm trực tiếp giữa lề và khoảng đệm, trong suốt theo
 mặc định
 Thiết lập bằng nhóm thuộc tính border
Slide 3 - Bố cục web & Bảng (table) trên trang web 7
 BỐ CỤC WEBSITE VỚI CSS
 Ví dụ về CSS Box:
 CSS:
 .stylebox { width:450px; border:#F00 solid 1px; margin:10px 5px 5px 10px;
 padding:4px 8px 10px 12px; background-color:#CCC; color:#F60}
 HTML:
 nội dung box 
Slide 3 - Bố cục web & Bảng (table) trên trang web 8
 BỐ CỤC WEBSITE VỚI CSS
 Làm việc với AP Div:
 AP Div (Absolute Positioned Div – div định vị tuyệt
 đối): là cách đơn giản và trực quan nhất để đặt các
 hộp (box) trên web
 Vị trí của hộp sẽ được xác định bởi các thuộc tính top,
 left
 Các thuộc tính này thiết lập khoảng cách của hộp lần
 lượt từ cạnh trên và cạnh trái trang
 Khi DW tạo AP Div sẽ tự động đặt tên mặc định:
 ApDiv1, ApDiv2,… Tuy nhiên nên thay đổi tên để có
 tính miêu tả hơn (ví dụ: boxleft, boxright, …)
Slide 3 - Bố cục web & Bảng (table) trên trang web 9
 BỐ CỤC WEBSITE VỚI CSS
 Khởi tạo và tùy chỉnh style cho AP Div bằng các
 bảng tương ứng:
 Có thể sử dụng chuột để tùy chỉnh vị trí, kích
 thước của AP Div vừa tạo hoặc sử dụng bảng
 PROPERTIES để điều chỉnh
Slide 3 - Bố cục web & Bảng (table) trên trang web 10
 BỐ CỤC WEBSITE VỚI CSS
 Tùy chỉnh ApDiv với bảng PROPERTIES:
 Điều chỉnh vị trí của Hoặc có thể áp dụng
 APDiv bằng thuộc tính class riêng cho ApDiv
 top, left
 Điều chỉnh kích thước Đặt giá trị hình nền và
 của ApDIv bằng giá trị màu nền với thuộc tính
 width, height Bg image, Bg color
 Tùy chỉnh đặt tên cho
 ApDiv
Slide 3 - Bố cục web & Bảng (table) trên trang web 11
 BỐ CỤC WEBSITE VỚI CSS
 Làm việc với div và định vị khối trên web:
 Khởi tạo và định vị giữa trang với bảng tương
 ứng
 Định vị tương đối và tuyệt đối
 Xếp gối các hộp và z-index
Slide 3 - Bố cục web & Bảng (table) trên trang web 12
 BỐ CỤC WEBSITE VỚI CSS
 Khởi tạo và định vị giữa trang với bảng tương ứng
 Sử dụng ID cho trường hợp này
Slide 3 - Bố cục web & Bảng (table) trên trang web 13
 BỐ CỤC WEBSITE VỚI CSS
 Khai báo này giúp căn ở giữa
 trang
Slide 3 - Bố cục web & Bảng (table) trên trang web 14
 BỐ CỤC WEBSITE VỚI CSS
 Định vị tuyệt đối:
 Thành phần được thiết lập giá trị absolute (tuyệt đối)
 sẽ tuân thủ chính xác các giá trị vị trí và chỉ nằm
 trong mối tương quan với bộ chứa nó
 Bộc chứa có thể là hoặc bản thân trang
 Box #2 được chứa, hay lồng trong
 Box #1
Slide 3 - Bố cục web & Bảng (table) trên trang web 15
 BỐ CỤC WEBSITE VỚI CSS
 Định vị tương đối:
 Thành phần được định vị tương đối nhận các giá trị
 cho thuộc tính vị trí (top, left) nhưng cũng nằm trong
 luồng thông thường như các nội dung HTML xung
 quanh
 Box #2 giữ nguyên vị trí như
 trước nhưng nó bị dịch chuyển
 so với các nội dung đứng trước
Slide 3 - Bố cục web & Bảng (table) trên trang web 16
 BỐ CỤC WEBSITE VỚI CSS
 Xếp gối các hộp và z-index:
 Thuộc tính z-index quy định cụ thể ngăn xếp của
 phần tử (thứ tự chồng)
 Một phần tử với ngăn xếp thứ tự lớn hơn là luôn luôn
 ở phía trước của một phần tử với một trật tự ngăn
 xếp thấp hơn.
 z-index chỉ hoạt động trên các yếu tố vị trí (vị trí:
 tuyệt đối, vị trí: tương đối, hoặc vị trí: cố định).
Slide 3 - Bố cục web & Bảng (table) trên trang web 17
 BỐ CỤC WEBSITE VỚI CSS
 Ví dụ về z-index:
 #apDiv1 {
 position:absolute; width:373px; height:199px; z-index:1; left: 95px;
 top: 18px; background-color: #FF0000;}
 #apDiv2 { position:absolute; left:322px; top:124px; width:328px; height:173px;
 z-index:2; background-color: #00FF00;
 }
Slide 3 - Bố cục web & Bảng (table) trên trang web 18
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Tổ chức và phác thảo website là các công việc cần
 thiết nằm trong giai đoạn thiết kế của quá trình
 thiết kế web
 Sản phẩm chính của các công việc này:
 Sơ đồ chi tiết về mối liên hệ giữa các trang web trong
 website
 Phác thảo chi tiết về mặt hình thức của từng trang
 web trong website
 Tầm quan trọng:
 Phát hiện sớm các bất hợp lý trong yêu cầu
 Tạo bố cục nhất quán cho các trang trong website
 Công việc thực hiện dễ dàng hơn
Slide 3 - Bố cục web & Bảng (table) trên trang web 20
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Tổ chức website là công việc định nghĩa ra các trang
 web trong website và mối liên hệ giữa chúng
 Các bước thực hiện:
 Xác định các trang cần có trong website
 Xác định vị trí của trang web
 Xác định mối liên hệ giữa các trang trong website
 Trang
 chủ
 Sản
 Trang cấp 1 Dịch vụ
 phẩm
 Bảo
 Trang con cấp 2 Laptop Máy ảnh
 Ví dụ: hành
Slide 3 - Bố cục web & Bảng (table) trên trang web 21
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Liên kết trang: là công việc xác định link giữa các
 trang web
 Các loại liên kết thông dụng:
 Liên kết theo đường thẳng
 Liên kết dựa trên cơ sở dữ liệu
 Liên kết phân cấp
 Liên kết kết hợp giữa các loại trên
Slide 3 - Bố cục web & Bảng (table) trên trang web 22
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Liên kết theo đường thẳng:
 1 chiều
 2 chiều
 Là loại liên kết phù hợp cho các website hướng
 người dùng đi theo một thứ tự các bước nào đó
 Ví dụ:
 Website hướng dẫn
 Website xử lý đơn mua hàng
Slide 3 - Bố cục web & Bảng (table) trên trang web 23
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Liên kết dựa trên có sở dữ liệu : Là loại liên kết khi
 ngay tại các trang web chính, một số lượng lớn các
 liên kết phụ thuộc vào các phần tử trong cơ sở dữ
 liệu
 Ví dụ:
 Các trang web
 liệt kê
Slide 3 - Bố cục web & Bảng (table) trên trang web 24
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Liên kết phân cấp: Là loại liên kết thông dụng nhất,
 dựa trên liên kết này, người dùng sẽ đi theo từng
 cấp để tới được thông tin mình cần
 Ví dụ:
 Website tin tức
Slide 3 - Bố cục web & Bảng (table) trên trang web 25
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Phác thảo website:
 Là công việc tạo ra bản phác họa của từng trang web
 trong website
 Các bước thực hiện:
 • Phác thảo layout
 • Phác thảo chi tiết
 Cách thức thực hiện:
 • Vẽ bằng tay trên giấy
 • Sử dụng công cụ chuyên phác thảo web: Balsamiq
 Mockups, iPlotz, Microsoft Expression Blend, Mockup
 Screens, ForeUI, …
Slide 3 - Bố cục web & Bảng (table) trên trang web 26
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
 Phác thảo web bằng Balsamiq Mockups:
 Sử dụng trên web:
 Sử dụng trên phần mềm Balsamiq Mockups ở máy
 tính
 Vùng cung cấp các hình
 phác họa cho các
 thành phần trên web
 Vùng vẽ phác thảo cho
 toàn trang web
Slide 3 - Bố cục web & Bảng (table) trên trang web 27
 TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Slide 3 - Bố cục web & Bảng (table) trên trang web 28
LÀM VIỆC VỚI BẢNG TRÊN TRANG WEB
 BẢNG TRÊN WEB
 Bảng được sử dụng:
 Hiển thị dữ liệu theo dạng bảng
 Tạo bố cục (layout) cho trang web, trong thời kỳ đầu
 của việc thiết kế web. Tuy nhiên với sự phát triển của
 CSS hiện nay, cách này đã ít được áp dụng
Slide 3 - Bố cục web & Bảng (table) trên trang web 30
 BẢNG TRÊN WEB
 Khởi tạo bảng: Insert > Table hoặc sử dụng bảng
 INSERT > Layout > Table
 Hộp thoại Table, tùy chọn được các
 thành phần:
 Dòng (Rows)
 Columns
 Chiều dài
 Boder
 Cell padding: xác định không gian,
 pixel giữa các ngăn
 Cell spacing: xác định không gian,
 trong pixels, giữa các ngăn.
Slide 3 - Bố cục web & Bảng (table) trên trang web 31
 BẢNG TRÊN WEB
 Định dạng style cho bảng với CSS/ HTML:
 Lựa chọn bảng vừa tạo
 Trên bảng CSS STYLES, chuột phải chọn New …
Slide 3 - Bố cục web & Bảng (table) trên trang web 32
 BẢNG TRÊN WEB
 Sau khi sử dụng CSS để định dạng, sử dụng bảng
 PROPERTIES để áp dụng class vừa khai báo cho
 bảng đã tạo
Slide 3 - Bố cục web & Bảng (table) trên trang web 33
 TỔNG KẾT
 Các thành phần trên webpage được định nghĩa bởi
 mô hình hộp (box). Mô hình này định nghĩa được
 bằng các thuộc tính margins, padding, border
 Với thuộc tính z-index, có thể định nghĩa xếp gối các
 box trên webpage.
 Tổ chức và phác thảo website là công đoạn cần
 thiết và quan trọng trong quá trình thiết kế website
 Hiện nay bảng chỉ được sử dụng khi cần hiển thị
 nhiều dữ liệu dạng bảng. Không nên sử dụng bảng
 để tạo layout cho web
Slide 3 - Bố cục web & Bảng (table) trên trang web 34