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ễ 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ảo nhất. Trong bài này, mình sẽ làm mẫu với boosmcuj trang web gồm 1 khung header, 1 main content bên phải và 1 sidebar bên trái nhé!
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.

Chúng ta sẽ cần 1 Class/Id bao quanh toàn bộ trang web. Ở đây mình lấy là wrapper nhé!
Tiếp đến là 1 Class/Id cho phần header. Mình chọn luôn là header cho tiện.
Lại tiếp tục chọn 1 Class/Id cho phần main content, mình lấy main-wrapper.
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: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>

<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>

</html>

Các bạn có thể thêm những phần kahsc 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/