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 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 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 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 Slide 3 - Bố cục web & Bảng (table) trên trang web 6 Mô hình CSS Box Các thiết lập trong mô hình Box: -Lề - Khoảng đệm -Đường viền 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 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: <div class="stylebox">nội dung box <div> Slide 3 - Bố cục web & Bảng (table) trên trang web 8 CSS: .stylebox { width:450px; border:#F00 solid 1px; margin:10px 5px 5px 10px; padding:4px 8px 10px 12px; background-color:#CCC; color:#F60} HTML: <div class="stylebox">nội dung box <div> 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, …) 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: Slide 3 - Bố cục web & Bảng (table) trên trang web 10 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 [...]... 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... 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Ả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ô... 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. .. 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... - 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 :37 3px; height:199px; z-index:1; left: 95px; top: 18px; background-color: #FF0000;} #apDiv2 { position:absolute; left :32 2px; top:124px; width :32 8px; 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... Slide 3 - Bố cục web & Bảng (table) trên trang web Laptop Dịch vụ Máy ảnh Bảo hành 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 Liên Liên Liên kết kết kết kết theo đường thẳng dựa trên cơ sở dữ liệu phân cấp 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... 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 phẩm Trang cấp 1 Ví dụ: Trang. .. 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 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 . 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 <div> và định vị giữa trang với bảng tương ứng Slide 3 - Bố cục web & Bảng (table) trên trang web. 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. 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