Dự án (tiếp tục)
Để mở infographic file
1. Sử dụng editor của bạn để mở file pc_info_txt.html từ thư mục html03 > tutorial.
Nhập tên của bạn và ngày tháng vào phần comment của file và lưu tài liệu như pc_info.html.
2. Trực tiếp sau phần tử title, điền các phần tử link sau để gắn file với các style sheets
pc_reset.css, pc_styles3.css, và pc_info.css.
<link href=”pc_reset.css” rel=”stylesheet” />
<link href=”pc_styles3.css” rel=”stylesheet” />
<link href=”pc_info.css” rel=”stylesheet” />
3. Giành một vài thời gian để nghiên cứu cấu trúc và nội dung của tài liệu pc_info.html.
Chú ý rằng Anne đã đặt 8 information graphics, mỗi cái bên trong một phần tử div riêng rẽ với
một tên class là infobox và một tên id trải từ info1 đến info8.
4. Đóng file lại, lưu thay đổi của bạn.
Tiếp theo, bạn sẽ bắt đầu làm việc trên file pc_info.css, cái sẽ chứa positioning và các styles
thiết kế khác cho các đối tượng trong infographic. Bạn sẽ bắt đầu bằng cách format phần tử main,
cái chứa các infographics. Vì bạn sẽ muốn vị trí của mỗi infographic sẽ được đo lường từ
góc đỉnh – trái của cái chứa, bạn sẽ đặt phần tử main với relative positioning và mở rộng height
của cái chứa thành 1400 pixels để rằng nó có thể chứa tất cả 8 phần tử graphic.
Để format phần tử main
1. Sử dụng editor của bạn để mở file pc_info_txt.css từ thư mục html03 > tutorial. Nhập tên của bạn
và ngày tháng vào phần comment của file và lưu tài liệu như pc_info.css.
2. Đi tới phần Main Styles và điền quy tắc style sau để format diện mạo của phần tử main:
main {
position: relative;
height: 1400px;
width: 100%;
}
Nó sẽ là dễ dàng hơn để xem hiệu ứng của các phần tử div nếu chúng không được hiển thị
cho đến khi bạn đã sẵn sàng position chúng. Thêm một quy tắc để giấu các phần tử div, sau
đó khi bạn position mỗi phần tử, bạn có thể thêm một quy tắc style để hiển thị lại nó.
3. Trực tiếp trước phần Main Styles, điền quy tắc style sau để giấu tất cả các
infoboxes:
div.infobox {display:none;}
4. Lưu các thay đổi của bạn vào file và sau đó mở file pc_info.html trong trình
duyệt của bạn. Thẩm định rằng trình duyệt thể hiện một box rỗng, cao khoảng 1400 pixels
nơi infographic sẽ được đặt.