WEB1013 slide3 boxmodel a layout

BÀI 3: BOX MODEL VÀ LAYOUT WEB1013 – XÂY DỰNG TRANG WEB THIẾT KẾ LAYOUT MỤC TIÊU BÀI HỌC  HIỂU VÀ ỨNG DỤNG MƠ HÌNH HỘP TRONG CSS  HIỂU VÀ THIẾT KẾ LAYOUT  TỔ CHỨC TRANG WEB VỚI CỬA SỔ CON ĐẶT VẤN ĐỀ BOX MODEL border:1px solid red TÌM HIỂU BOX MODEL Width:100px Height:100px Padding:10px Margin:5px MƠ HÌNH HỘP (BOX MODEL)  Diện tích chiếm dụng phần tử trang web hình chữ nhật  Các thuộc tính CSS thơng số mơ hình hộp gồm: Nội dung padding margin border Kích thƣớc: width, height Khoảng đệm xung quanh: padding Đƣờng bao: border Lề xung quanh: margin Nền: background-color, background-image Bo góc: border-radius Bóng: box-shadow height • • • • • • • width ĐẶC ĐIỂM MÔ HÌNH HỘP  Kích thƣớc khơng bao gồm padding, margin border  Ảnh nằm màu  Nền phần padding chung với hộp  Nền margin ln suốt VÍ DỤ 1: BOX MODEL VÍ DỤ 2: BOX MODEL  Tìm hiểu thơng số mơ hình hộp THIẾT KẾ LAYOUT  Các thẻ HTML5 thƣờng đƣợc sử dụng để thiết kế layout gồm • • • • • • : phần đầu : phần menu : phần nội dung : cạnh bên : phần chân : phần THUỘC TÍNH CSS DÙNG TRONG THIẾT KẾ LAYOUT  Các thẻ HTML5 nói lên ý nghĩa vùng, thực chất nhƣ  Để bố trí chúng hàng phải sử dụng thuộc tính css chuyên dụng cho thiết kế layout float clear • float: • Thả hộp bên trái (left) bên phải (right) • clear: • Xóa bỏ chế độ thả bên trái (left), phải (right) bên (both)  Chú ý: thả hộp hộp tiếp sau tự động thả theo hƣớng hộp trƣớc Để bỏ thả nổi, phải sử dụng clear THUỘC TÍNH CSS THIẾT KẾ LAYOUT THIẾT KẾ LAYOUT float:left clear:both float:left  Tìm hiểu float, clear  Thiết kế layout TRẮC NGHIỆM CỬA SỔ CON LIÊN KẾT ĐẾN CỬA SỔ CON MENU CỬA SỔ CON VÍ DỤ VỀ CỬA SỔ CON Tên cửa sổ Cửa sổ LIÊN KẾT ĐẾN CỦA SỔ CON  đƣợc sử dụng để tạo cửa sổ chứa trang web khác  có thuộc tính thƣờng sử dụng sau • • • • @src=“url”: địa trang web đƣợc nhúng @name=“”: tên cửa sổ @frameborder: “?px” độ dày đƣờng bao @scrolling=“yes|no|auto”: đặt chế độ cuộn • Yes: ln ln xuất cuộn • No: khơng xuất cuộn, nội dung tràn bị che khuất • Auto: cuộn xuất nội dung tràn cửa sổ TỔ CHỨC WEBSITE INDEX.HTML HIỂN THỊ LÊN CỬA SỔ HIỆN TẠI FAQ.HTML HIỂN THỊ LÊN CỬA SỔ @NAME=“_PAGE”  Hiện thực hóa slide trƣớc để tổ chức website  Định nghĩa CSS cho iframe chế độ rộng tồn hình cao tối thiểu TRẮC NGHIỆM TĨM TẮT BÀI HỌC  MƠ HÌNH HỘP  KÍCH THƢỚC  ĐƢỜNG BAO  LỀ  KHOẢNG ĐỆM  NỀN  BO GÓC  BÓNG  THIẾT KẾ LAYOUT  CƠ CHÉ THẢ NỔI,  BỎ THẢ NỔI CỬA SỔ CON ... ảnh • background-attachment • Chế độ cuộn ảnh VÍ DỤ BACKGROUND BACKGROUND-REPEAT background-image: url('Image/bg.png'); background-repeat:repeat; background-image: url('Image/bg.png'); background-repeat:repeat-y;... url('Image/bg.png'); background-repeat:repeat-y; background-image: url('Image/bg.png'); background-repeat:repeat-x; background-image: url('Image/bg.png'); background-repeat:no-repeat; BACKGROUND-POSITION top... KẾ LAYOUT  TỔ CHỨC TRANG WEB VỚI C A SỔ CON ĐẶT VẤN ĐỀ BOX MODEL border:1px solid red TÌM HIỂU BOX MODEL Width:100px Height:100px Padding:10px Margin:5px