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ành3.<meta charset=”UTF-8”>4. 5.<link rel=”stylesheet” href=”style.css” type=”text/css”>6.thành7.<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, typeOkie, 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>
Mã CSS đầu tiên
01.*{margin:0px; padding:0px}02.header, footer, section, nav03.{04.display:blocks05.}06..container07.{08.margin:0 auto; 09.width:950px;10.margin-top:20px11.}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>
Và CSS cho nó
01.#nav02.{03.overflow:auto;04.}05.#nav ul06.{07.list-style:none;08.height:30px;09.padding:0px;10.margin:0px;11.}12.#nav ul li13.{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>
01.#main02.{03.overflow:auto;04.}05.#content06.{07.float:left;08.width:600px;09.}10.#sidebar11.{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>
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.net đ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>
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
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 devices17.<meta name="viewport" content="width=device-width"> 18.<link rel="stylesheet" href="style.css"> //Style Sheet19.<script src="modernizr.min.js"></script>20.</head>21.<body>22.<header class='container' id='header'>23.Logo Part24.</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 Description44.</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, #nav05.{06.overflow:auto;07.}08.#content09.{10.float:left;11.width:600px;12.}13.#sidebar14.{15.float:right;16.width:330px;17.}18.#nav19.{20.overflow:auto;21.}22.#nav ul23.{24.list-style:none;25.height:30px;26.padding:0px;27.margin:0px;28.}29.#nav ul li30.{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
Bài viết được chia sẻ bởi
Sharecodeweb.com
You must log in to post a comment.