Bước đầu xây dựng bộ khung cho trang web của mình

Trong bài viết trước, chúng ta đã cùng nhau tạo ra 1 trang web trắng tinh rồi. Trong bài viết này, chúng ta sẽ cùng nhau build lên bộ khung cho trang web nhé. Cái này tương đối dễ đối với người đã biết HTML và CSS rồi. Và với Blogger cũng y như vậy mà thôi.

Các bạn chưa cần thắc mắc làm sao để có thể hiển thị danh sách các bài viết hay là thêm các widget như thế nào. Chúng ta sẽ đi từ những cái cơ bản nhất. Trong bài này, mình sẽ làm mẫu với bố cục trang web gồm 1 khung header, 1 main content bên phải và 1 sidebar bên trái nhé!

build bo cuc web

Vậy chúng ta cần những ID, Class nào cho 1 trang web như thế này? Cứ đơn giản mà nghĩ thôi.

  1. Chúng ta sẽ cần 1 Class/Id  bao quanh toàn bộ trang web. Ở đây mình lấy là wrapper nhé!
  2. Tiếp đến là 1 Class/Id cho phần header. Mình chọn luôn là header cho tiện.
  3. Lại tiếp tục chọn 1 Class/Id cho phần main content, mình lấy main-wrapper.
  4. Cuối cùng là dành cho sidebar? Thôi thì lấy sidebar-wrapper vậy.
Như vậy là chúng ta đã xác định được những yếu tố cần thiết rồi. Bây giờ chúng ta sẽ tiến hành code thôi nào. Sau 1 hồi gõ code và viết CSS thì ta sẽ được như sau:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Tiêu đề trang web</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin><![CDATA[
.wrapper {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
min-height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 70%;
float:left;
min-height: 300px;
background: #f0c36d;
}
.sidebar-wrapper {
width: 30%;
float:right;
min-height: 300px;
background: #f9edbe;
}
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<div class='wrapper'>
<div class='header'>
Đây là nội dung hiển thị trong phần Header
</div>
<div class='main-wrapper'>
Đây là nội dung hiển thị trong phần Main Content
</div>
<div class='sidebar-wrapper'>
Đây là nội dung hiển thị trong phần Sidebar
</div>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Các bạn có thể thêm những phần khác cho trang web nữa nhé! Mình thì chỉ làm nấy thôi!
Các bạn có thể xem DEMO tại đây: http://huongdanthietketempalte-2.blogspot.com/
Bài viết cùng Serie<< Hướng dẫn tạo một trang web trắng tinh trên BloggerThêm widget cấu hình tiêu đề blog vào phần Header >>
Cùng chuyên mục:

Add Comment