RSSCSS

HTML5 template design cho Blog

Bài viết này lấy nguồn từ 9lessions được dịch và trình bày cho dễ hiểu hơn một chút. Giúp cho các bạn có thể học làm quen với cách thiết kế template HTML5 cơ bản nhất. DOCTYPE Thành phần này có thể là quan trọng nhất, nó giúp cho trình duyệt của bạn hiểu được bạn đang dùng version nào của phiên bản HTML view sourceprint?

HTML5 template design cho Blog

Bài viết này lấy nguồn từ 9lessions được dịch và trình bày cho dễ hiểu hơn một chút. Giúp cho các bạn có thể học làm quen với cách thiết kế template HTML5 cơ bản nhất.

DOCTYPE

Thành phần này có thể là quan trọng nhất, nó giúp cho trình duyệt của bạn hiểu được bạn đang dùng version nào của phiên bản HTML

 
1.<!DOCTYPE html>

Trong HTML5 thì bỏ thuộc tính Type. Khi đó những thẻ như sau sẽ được rút ngắn lại

1.<meta http-equiv=”Content-Type” content="text/html";>
2.thành
3.<meta charset=”UTF-8”>
4. 
5.<link rel=”stylesheet” href=”style.css” type=”text/css”>
6.thành
7.<link rel=”stylesheet” href=”style.css”>

Bạn cũng nên tránh theo những thẻ hay thuộc tính trong HTML5 như

1.<font>, <center>,<frame> align, bgcolor, height, width, size, type

Okie, bắt đầu nhé

Bước 1 – Thiết kế khung website

Layout của website của chúng ta sẽ được thiết kế thành các thành phần như Hearder, Nav, Section and Footer.

1.<header class='container'>1 Header</header>
2.<nav class='container'>2 Nav</nav>
3.<section class='container'>3 Main</section>
4.<footer class='container'>4 Footer</footer>

 

HTML5 template design for blog


Mã CSS đầu tiên

 

 
01.*{margin:0px; padding:0px}
02.header, footer, section, nav
03.{
04.display:blocks
05.}
06..container
07.{
08.margin:0 auto;
09.width:950px;
10.margin-top:20px
11.}

Bước 2 – Làm việc với thẻ ul tạo thanh menu

 

01.<nav class='container' id='nav'>
02.<ul>
03.<li>HOME</li>
04.<li>PROJECT</li>
05.<li>TUTORIALS</li>
06.<li>FACEBOOK</li>
07.<li>JQUERY</li>
08.</ul>
09.</nav>

HTML5 template design for blog
Và CSS cho nó

01.#nav
02.{
03.overflow:auto;
04.}
05.#nav ul
06.{
07.list-style:none;
08.height:30px;
09.padding:0px;
10.margin:0px;
11.}
12.#nav ul li
13.{
14.float:left;
15.margin:10px;
16.}

Bước 3 – Phần content

Section Main của chúng ta sẽ được chia làm 2 thành phần, một bên chứa Article, và một bên là sidebar

 

1.<section class='container'>
2.<section id="content">Article</section>
3.<aside id='sidebar'>Sidebar</aside>
4.</section>

HTML5 template design for blog

01.#main
02.{
03.overflow:auto;
04.}
05.#content
06.{
07.float:left;
08.width:600px;
09.}
10.#sidebar
11.{
12.float:right;
13.width:330px;
14.}

Article

Trong Section có id là Content kia, chúng ta lại tiếp tục chia ra các Article nhỏ hơn, gọi là các bài viết

 
01.<section id='content'>
02. 
03.<article>
04.<header>
05.<h1>Article Title</h1>
06.</header>
07.<p>
08.Article Description
09.</p>
10.</article>
11. 
12.</section>

HTML5 template design for blog
Như đã nói, phần homepage sẽ chứa nhiều Article khác nhau, sắp xếp theo dạng list giống như sharecodeweb.com đang dùng vậy,

 
01.<section id='content'>
02. 
03.<article>
04.<header>
05.<h2>Article Title 1</h2>
06.</header>
07.<p>
08.Article Short Description
09.</p>
10.</article>
11. 
12.<article>
13.<header>
14.<h2>Article Title 2</h2>
15.</header>
16.<p>
17.Article Short Description
18.</p>
19.</article>
20. 
21........
22. 
23.</section>

HTML5 template design for blog

Modernizr

Ngoài ra chúng ta cũng cần nhúng bộ thư viện hỗ trợ cực mạnh cho HTML5 và CSS3 này vào nữa. Các bạn có thể download tại đây
HTML5 template design for blog

Hoàn thành

Cuối cùng, toàn bộ mã HTML của chúng ta sẽ nhìn như sau

 
01.<!DOCTYPE html>
02.<!--[if lt IE 7]>
03.<html class="no-js lt-ie9 lt-ie8 lt-ie7">
04.<![endif]-->
05.<!--[if IE 7]>
06.<html class="no-js lt-ie9 lt-ie8">
07.<![endif]-->
08.<!--[if IE 8]>
09.<html class="no-js lt-ie9">
10.<![endif]-->
11.<!--[if gt IE 8]><!-->
12.<html class="no-js">
13.<!--<![endif]-->
14.<head>
15.<title>Responsive Design with CSS</title>
16.//Meta tag for devices
17.<meta name="viewport" content="width=device-width">
18.<link rel="stylesheet" href="style.css"> //Style Sheet
19.<script src="modernizr.min.js"></script>
20.</head>
21.<body>
22.<header class='container' id='header'>
23.Logo Part
24.</header>
25. 
26.<nav class='container' id='nav'>
27.<ul>
28.<li><a href='#'>Home</a></li>
29.<li><a href='#'>DEMOS</a></li>
30.<li><a href='#'>PROJECT</a></li>
31......
32......
33.</ul>
34.</nav>
35. 
36.<section class='container' id='main'>
37.<section id='content'>
38.<article>
39.<header>
40.<h1>Article Title</h1>
41.</header>
42.<p>
43.Article Description
44.</p> 
45.</article>
46.</section>
47.  
48.<aside id='sidebar'>
49.</aside>
50.</section>
51. 
52.<footer class='container' id='footer'>
53.<p>
54.© 2009-2013 9lessons.info.
55.</p>
56.</footer>
57.<body>
58.</html>

Đoạn mã HTML này chạy tốt ngay cả trên những trình duyệt IE đời thấp. Chú ý nữa là bộ mã js bên trên không làm việc với các đoạn mã CSS dạng inline ngay trong HTML nhé.

 
01.*{margin:0px; padding:0px}
02.header, footer,section,nav{display:blocks}
03..container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
04.#main, #header, #nav
05.{
06.overflow:auto;
07.}
08.#content
09.{
10.float:left;
11.width:600px;
12.}
13.#sidebar
14.{
15.float:right;
16.width:330px;
17.}
18.#nav
19.{
20.overflow:auto;
21.}
22.#nav ul
23.{
24.list-style:none;
25.height:30px;
26.padding:0px;
27.margin:0px;
28.}
29.#nav ul li
30.{
31.float:left;
32.font-size:12px;
33.font-weight:bold;
34.}

Vậy là xong rồi đó, bạn có thể dựa vào khung này để thiết kế cho mình một template hợp lý và rất hiện đại nhé. Chúc bạn thành công.

Download code

Bạn có thể download bộ code hoàn chỉnh tại link dưới đây

Download codeDemo

Bài viết được chia sẻ bởi
Sharecodeweb.com

 

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu