Bài giảng Thiết kế web bài 3: Bố cục trang web & bảng (table) trên trang web

Bài 3: Bố cục trang web & bảng (table) trên trang web là một bài trong bộ bài giảng thiết kế web do giảng viên trường đại học FPT biên soạn nhằm mục đích phục vụ cho việc giảng dạy môn học này. Trong bài này nội dung chính trình bày về bố cục web với CSS , cụ thể là đề cập đến 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 stye cho nội dung hộp và cuối cùng là hướng dẫn điều chỉnh vị trí. Phần tiếp theo của bài 3 hướng dẫn tổ chức và phác thảo website, cách làm việc với bảng (table)trên trang web. Trong cách làm việc với bảng thì có 2 vấn đề đặt ra là cách khởi tạo bảng với HTML và định dạng stylecho bảng với CSS/HTML.
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế web bài 3: Bố cục trang web & 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 ...