Bootstrap Project A-Z 04 – Xây dựng một trang HTML (P1)

3
500

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Chuẩn bị thư mục lưu project

Ở bài viết trước, tôi đã hướng dẫn các bạn các bước cài đặt photoshop và sau đó là cắt ảnh cần thiết. Bây giờ chúng ta sẽ cùng nhau xây dựng nên giao diện của trang HTML từ những ảnh thu được.

Các bạn hãy nhớ nguyên tắc xây dựng trang là từ ngoài vào trong, từ trên xuống dưới.

Đầu tiên chúng ta cần copy hết các thư mục của file Bootstrap và file jquery-1.11.3.min.js (đã nói ở bài số 1) vào 1 folder. Tôi đặt tên folder là project bootstrap. Tiếp theo chúng ta tạo 1 trang index.html và gọi các file cần thiết vào (đã nói ở bài 1). Các ảnh ta cắt được sẽ cho vào chung 1 folder là img.Tạo thêm 1 file index.css để có thể style riêng cho giao diện của chúng ta. Gọi file này vào trang HTML. Như vậy chúng ta đã chuẩn bị được đầy đủ những thứ cần thiết.

1

2. Phân tích giao diện HTML

Một trang HTML luôn được cầu thành từ 3 phần: header – main – footer.

Header: thường có menu, logo, slide ảnh.

Main: chứa nội dung chính của trang html

Footer: thường có thông tin thêm về trang.

Do bootstrap hoạt động tốt nhất khi được đặt trong class .container nên tôi sẽ bao ngoài cả bài bằng class .container này. Tuy nhiên trang của chúng ta chỉ có chiều rộng là 1020px, nên tôi sử dụng thêm class .container-max và style cho nó có chiều rộng tối đa 1020px.

Cùng phân tích phần header này một chút. Như trong ảnh: phần nằm trong viền đỏ là tất cả header của chúng ta. Phần màu vàng là phần chứa logo, phần màu xanh da trời là phần chứa menu và phần màu xanh lá cây là phần chứa slide.

header

Tôi sẽ chia phần header làm 2 row. Row đầu tiên được chia làm 2 col. Col 1 sẽ chứa logo và Col 2 sẽ chứa menu. Row còn lại sẽ chứa phần text và có phần background là ảnh.

Tại sao tôi lại có “<div class=”col-xs-4 col-sm-4 col-md-7 logo”>”? Ở đây tôi muốn khi màn hình desktop, cột logo này sẽ chiếm 7/12 cột của Bootstrap. Khi bị co về màn hình điện thoại hoặc table nó sẽ chiếm 4/12 cột. Còn logo là tên class để tôi CSS.

Logo là một bức ảnh và người ta thường đặt logo trong thẻ h1.

Ta sẽ tạo ra logo.

Và menu

Sau đó ta tiếp tục viết phần Row còn lại.

Đây là phần CSS của tôi:

 

Lưu ý: bài này người thiết kế sử dụng font chữ: lato-bold, lato-italic, lato-regular, lato-light. Các font chữ nếu không có trong máy tính của các bạn thì photoshop sẽ hiện lên cảnh báo khi các bạn sử dụng công cụ xem font chữ. Các bạn tải các font này về cho vào thư mục font và sử dụng chúng bằng cách khai báo trong CSS thông qua thuộc tính @font-face.

Và kết quả cuối cùng ta thu được:

3

Các bạn có thể tham khảo bài mẫu tại đây

Như vậy ta vừa kết thúc thiết kế phần header. Ở bài viết sau tôi sẽ hướng dẫn các bạn thiết kế giao diện phần Main. Cảm ơn và hẹn gặp lại các bạn. Các bạn theo dõi các bài học bootstrap cơ bản tiếp nhé.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code.

Xem thêm các bài học tiếp theo tại đây:

Tác giả: Đạt Nguyễn Vietpro

 

[Total: 1    Average: 5/5]

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here