bÀi 3 bố cục trang web & bảng (table) trên trang web - giáo trình fpt
TRANSCRIPT
BÀI 3BỐ 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úcCá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 CSSKhởi tạo CSS với Dreamweaver CS4Bố cục trang web với CSS
Làm quen với HTML:Khái niệm, cấu trúcCá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 CSSKhởi tạo CSS với Dreamweaver CS4Bố 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 BoxLàm việc với div và AP divXếp chồng và xếp gối các thành phầnTạo style cho nội dung hộpĐiều chỉnh vị trí
Tổ chức và phác thảo websiteCá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 BoxLàm việc với div và AP divXếp chồng và xếp gối các thành phầnTạo style cho nội dung hộpĐiều chỉnh vị trí
Tổ chức và phác thảo websiteCá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ìnhBoxTrong 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 trangBox đượ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ìnhBoxTrong 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 trangBox đượ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 trongmô 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ộpThiết lập bằng nhóm thuộc tính marginsTạ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 dungThiế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 theomặc địnhThiết lập bằng nhóm thuộc tính border
Lề (margins):Phần trong suốt bao quanh ngoài hộpThiết lập bằng nhóm thuộc tính marginsTạ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 dungThiế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 theomặc địnhThiế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áchộp (box) trên webVị trí của hộp sẽ được xác định bởi các thuộc tính top,leftCác thuộc tính này thiết lập khoảng cách của hộp lầnlượt từ cạnh trên và cạnh trái trangKhi 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áchộp (box) trên webVị trí của hộp sẽ được xác định bởi các thuộc tính top,leftCác thuộc tính này thiết lập khoảng cách của hộp lầnlượt từ cạnh trên và cạnh trái trangKhi 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ácbả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íchthước của AP Div vừa tạo hoặc sử dụng bảngPROPERTIES để điều chỉnh
BỐ CỤC WEBSITE VỚI CSS
Tùy chỉnh ApDiv với bảng PROPERTIES:
Điều chỉnh vị trí củaAPDiv bằng thuộc tínhtop, left
Hoặc có thể áp dụngclass riêng cho ApDiv
Slide 3 - Bố cục web & Bảng (table) trên trang web 11
Điều chỉnh vị trí củaAPDiv bằng thuộc tínhtop, left
Điều chỉnh kích thướccủa ApDIv bằng giá trịwidth, height
Đặt giá trị hình nền vàmàu nền với thuộc tínhBg image, Bg color
Hoặc có thể áp dụngclass riêng cho ApDiv
Tùy chỉnh đặt tên choApDiv
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 <div> và định vị giữa trang với bảng tươngứngĐịnh vị tương đối và tuyệt đốiXế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 <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 13
Sử dụng ID cho trường hợp này
BỐ CỤC WEBSITE VỚI CSS
Slide 3 - Bố cục web & Bảng (table) trên trang web 14
Khai báo này giúp căn <div> ở giữatrang
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ằmtrong mối tương quan với bộ chứa nóBộc chứa có thể là <div> hoặc bản thân trang
Slide 3 - Bố cục web & Bảng (table) trên trang web 15
Box #2 được chứa, hay lồng trongBox #1
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 trongluồng thông thường như các nội dung HTML xungquanh
Đị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 trongluồng thông thường như các nội dung HTML xungquanh
Slide 3 - Bố cục web & Bảng (table) trên trang web 16
Box #2 giữ nguyên vị trí nhưtrước nhưng nó bị dịch chuyểnso với các nội dung đứng trước
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ủaphầ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ănxế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).
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ủaphầ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ănxế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ầnthiết nằm trong giai đoạn thiết kế của quá trìnhthiết kế webSả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 trongwebsitePhác thảo chi tiết về mặt hình thức của từng trangweb trong website
Tầm quan trọng:Phát hiện sớm các bất hợp lý trong yêu cầuTạo bố cục nhất quán cho các trang trong websiteCông việc thực hiện dễ dàng hơn
Tổ chức và phác thảo website là các công việc cầnthiết nằm trong giai đoạn thiết kế của quá trìnhthiết kế webSả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 trongwebsitePhác thảo chi tiết về mặt hình thức của từng trangweb trong website
Tầm quan trọng:Phát hiện sớm các bất hợp lý trong yêu cầuTạo bố cục nhất quán cho các trang trong websiteCô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 trangweb trong website và mối liên hệ giữa chúngCác bước thực hiện:
Xác định các trang cần có trong websiteXác định vị trí của trang webXác định mối liên hệ giữa các trang trong website
Tổ chức website là công việc định nghĩa ra các trangweb trong website và mối liên hệ giữa chúngCác bước thực hiện:
Xác định các trang cần có trong websiteXác định vị trí của trang webXác định mối liên hệ giữa các trang trong website
Slide 3 - Bố cục web & Bảng (table) trên trang web 21
Trang con cấp 2
Trang cấp 1
Trangchủ
Sảnphẩm
Laptop Máy ảnh
Dịch vụ
BảohànhVí dụ:
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áctrang webCác loại liên kết thông dụng:
Liên kết theo đường thẳngLiên kết dựa trên cơ sở dữ liệuLiên kết phân cấpLiên kết kết hợp giữa các loại trên
Liên kết trang: là công việc xác định link giữa cáctrang webCác loại liên kết thông dụng:
Liên kết theo đường thẳngLiên kết dựa trên cơ sở dữ liệuLiên kết phân cấpLiê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:
Là loại liên kết phù hợp cho các website hướngngười dùng đi theo một thứ tự các bước nào đóVí dụ:
Website hướng dẫnWebsite xử lý đơn mua hàng
1 chiều
2 chiều
Liên kết theo đường thẳng:
Là loại liên kết phù hợp cho các website hướngngười dùng đi theo một thứ tự các bước nào đóVí dụ:
Website hướng dẫnWebsite 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 khingay tại các trang web chính, một số lượng lớn cácliên kết phụ thuộc vào các phần tử trong cơ sở dữliệuVí dụ:
Các trang webliệt kê
Liên kết dựa trên có sở dữ liệu : Là loại liên kết khingay tại các trang web chính, một số lượng lớn cácliên kết phụ thuộc vào các phần tử trong cơ sở dữliệuVí dụ:
Các trang webliệ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ừngcấp để tới được thông tin mình cầnVí dụ:
Website tin tức
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ừngcấp để tới được thông tin mình cầnVí 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 webtrong websiteCá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, MockupScreens, ForeUI, …
Phác thảo website:Là công việc tạo ra bản phác họa của từng trang webtrong websiteCá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, MockupScreens, 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:http://www.balsamiq.com/products/mockupsSử dụng trên phần mềm Balsamiq Mockups ở máytính
Vùng cung cấp các hìnhphác họa cho các
thành phần trên web
Slide 3 - Bố cục web & Bảng (table) trên trang web 27
Vùng cung cấp các hìnhphác họa cho các
thành phần trên web
Vùng vẽ phác thảo chotoàn trang web
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ảngTạo bố cục (layout) cho trang web, trong thời kỳ đầucủa việc thiết kế web. Tuy nhiên với sự phát triển củaCSS 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ảngINSERT > Layout > Table
Hộp thoại Table, tùy chọn được cácthành phần:Dòng (Rows)ColumnsChiều dàiBoderCell padding: xác định không gian,pixel giữa các ngănCell 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
Hộp thoại Table, tùy chọn được cácthành phần:Dòng (Rows)ColumnsChiều dàiBoderCell padding: xác định không gian,pixel giữa các ngănCell spacing: xác định không gian,trong pixels, giữa các ngăn.
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ạoTrê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ảngPROPERTIES để áp dụng class vừa khai báo chobả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ởimô hình hộp (box). Mô hình này định nghĩa đượcbằng các thuộc tính margins, padding, borderVới thuộc tính z-index, có thể định nghĩa xếp gối cácbox trên webpage.Tổ chức và phác thảo website là công đoạn cầnthiết và quan trọng trong quá trình thiết kế websiteHiệ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
Các thành phần trên webpage được định nghĩa bởimô hình hộp (box). Mô hình này định nghĩa đượcbằng các thuộc tính margins, padding, borderVới thuộc tính z-index, có thể định nghĩa xếp gối cácbox trên webpage.Tổ chức và phác thảo website là công đoạn cầnthiết và quan trọng trong quá trình thiết kế websiteHiệ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