Web1013 lab06
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (545.58 KB, 4 trang )
LAB 6: BOX MODEL VÀ LAYOUT (PHẦN II)
LAB 6: BOX MODEL VÀ LAYOUT (PHẦN II)
-------------------MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng
Thiết kế được layout
Tổ chức được website với iframe
BÀI 1 (4 ĐIỂM)
Thiết kế trang index.html có layout như hình sau đây
WEB1013 – XÂY DỰNG TRANG WEB
TRANG 1
LAB 6: BOX MODEL VÀ LAYOUT (PHẦN II)
Hướng dẫn:
Cấu trúc trang index.html
<div class="container">
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>
</div>
Bổ sung nội dung cho các thẻ
o Bổ sung các liên kết vào nav
<a href="#">Trang chủ</a> |
<a href="#">Giới thiệu</a> |
<a href="#">Liên hệ</a> |
<a href="#">Góp ý</a> |
<a href="#">Gỏi đáp</a>
o Bổ sung danh sách vào aside
<ul>
<li><a href="#">Máy tính xách tay</a></li>
<li><a href="#">Điện thoại di động</a></li>
<li><a href="#">Máy quay phim</a></li>
<li><a href="#">Máy chụp ảnh</a></li>
</ul>
o Bổ sung nội dung cho footer
FPT Polytechnic © 2017. All rights reserved.
Thiết kế layout theo hướng dẫn
o body{} bỏ lề và khoảng đệm xung quanh trang
padding:0px;
margin:0px;
o .container{} rộng tối đa 1000 pixel và căn giữa
max-width:1000px;
margin:0 auto;
o .container > header{} ảnh nền tỉ lệ height/width=1/4
WEB1013 – XÂY DỰNG TRANG WEB
TRANG 2
LAB 6: BOX MODEL VÀ LAYOUT (PHẦN II)
background-image: url('images/poly-header.jpg');
background-size:100% 100%;
height:0px;
padding-bottom:25%;
o .container > nav{} căn lề giữa, chữ hoa nhỏ, cao 40 pixel
line-height:40px;
background-color:orangered;
color:white;
text-align:center;
font-variant:small-caps;
o .container > article{} rộng 75%, thả nổi bên trái
min-height:400px;
width:75%;
background-color:white;
float:left;
o .container > aside{} rộng 25% thả nổi bên phải
min-height:400px;
width:25%;
background-color:lightgray;
float:right;
o .container > footer{} bỏ thả nổi, cao 50 pixel
border-top:5px double orangered;
line-height:50px;
background-color:lightcyan;
text-align:center;
font-variant:small-caps;
clear:both;
o .container > nav > a{} bỏ gạch chân, lề trái và phải 10 pixel
color:white;
text-decoration:none;
margin:0 10px;
o .container > nav > a:hover{} đổi màu, có gạch chân
color:yellow;
WEB1013 – XÂY DỰNG TRANG WEB
TRANG 3
LAB 6: BOX MODEL VÀ LAYOUT (PHẦN II)
text-decoration:underline;
BÀI 2 (3 ĐIỂM)
Sử dụng index.html ở bài 1 và tổ chức web site theo yêu cầu sau
Thêm iframe vào thẻ article
Hiệu chỉnh liên kết trong nav và trong aside bằng cách thêm thuộc tính
target chỉ đến tên của iframe
Bổ sung CSS định nghĩa cho iframe
Tạo các trang thành viên được liên kết đến trong 2 menu với nội dung tùy ý
o home.html
o about.html
o contact.html
o feedback.html
o faq.html
o mobile.html
o laptop.html
o …
BÀI 3 (3 ĐIỂM) – GV CHO THÊM
WEB1013 – XÂY DỰNG TRANG WEB
TRANG 4
