Gudang Ilmu: Cara Membuat Desain Web Dua Kolom

Tuesday, 1 August 2023

Cara Membuat Desain Web Dua Kolom

 Cara membuat desain web dua kolom menggunakan CSS dan HTML tanpa konsep table, sehingga tampilan website lebih style, dinamis, fast loading, responsive, dan seo friendly, serta lebih mudah dibuat dari pada menggunakan web desain template konsep table HTML.

Membuat desain web dua kolom dengan CSS lebih banyak memiliki kelebihan jika dibandingkan dengan desain web menggunakan konsep table HTML, diantaranya adalah lebih cepat loading (fast loading) sehingga pengunjung tidak bosan menunggu, ukuran atau resolusi menyesuaikan dengan resolusi aktual PC pengguna sehingga akan memiliki tampilan yang rapih dan teratur. Tetapi bukan berarti web design konsep table HTML sudah tidak digunakan lagi, masih banyak website terkenal yang membuat desain web dengan konsep table HTML.

Pada tutorial cara membuat desain web dua kolom ini, kita akan menggunakan 2 bahasa pemrograman website atau web design yaitu CSS dan HTML, sehingga Anda harus mengerti terlebih dahulu apa itu CSS dan apa itu HTML. Desain web dua kolom yang dimaksud adalah pada bagian content terdapat dua sub bagian yaitu content itu sendiri yang berisi artikel dan sidebar, content di desain di sebelah kanan sedangkan sidebar di desain di sebelah kiri, supaya lebih jelas dibawah ini adalah tampilan desain web dual kolom yang dimaksud:

cara membuat desain web dua kolom
Cara Membuat Desain Web Dua Kolom

Berikut langkah - langkah tutorial cara membuat desain web dua kolom menggunakan CSS dan HTML yang kami kemas dalam tutorial web design template:

1. Desain web layout seperti gambar di atas menggunkan CSS.

Untuk membuat desain web dua kolom seperti pada gambar di atas dibutuhkan file CSS dengan struktur program sebagai berikut:

body { }
#art-main { }
#navbar { }
#art-header { }
#art-sheet { }
#sidebar { }
#article { }
#art-footer { }

Dari struktur program diatas dapat dibuat script CSS yang dapat membentuk desain web dua kolom, script CSS nya seperti berikut:

  • code
  • source
  1. a {color: #3366CC; text-decoration: none}

  2. p {margin: 0; padding: 0;}

  3. body {    

  4.     background: #EEEEEE;

  5.     color: #000000;

  6.     margin: 0;

  7.     padding: 0;

  8.     font: 0em "Arial", Helvetica, Sans-Serif;

  9.     text-align:center;

  10.     }

  11. h2 {

  12.     margin: 8px 0 5px 0;

  13.     padding: 0;

  14.     font-size: 1em;

  15.     letter-spacing: -1px;

  16.     color: #808080;

  17.     background-color: inherit;

  18.     }

  19. h3 {    

  20.     font-family: Arial, Helvetica, sans-serif;    

  21.     font-size: 1em;    

  22.     background-color: #006666;      

  23.     color: #DCDCDC

  24.     }

  25. h4 {color: #000000}

  26.     

  27. #art-main{clear: both; width: 950px auto; height: auto;}

  28. 

  29. #navbar{ 

  30.     clear: both;

  31.     width: 940px;

  32.     height: 20px;

  33.     margin: 2px auto 0;

  34.     background: #CCCCCC;

  35.     color: #808080;

  36.     text-align:right;

  37.     padding: 5px 10px 0 0;

  38. }

  39. #art-header{

  40.     clear: both;

  41.     width: 950px;

  42.     height: 160px;

  43.     background: #DCDCDC url(images/logo.jpg) no-repeat center;

  44.     color: #DCDCDC;

  45.     margin: 2px auto 0;

  46. }

  47. .header{

  48.     text-align: right; margin-left: auto; margin-right: auto;

  49. }

  50. .header ul{

  51.     margin:0; padding-left: 0;   float: right;  width: 500px;

  52. }

  53. .header ul li{

  54.     display: block; list-style: none;

  55. }

  56. .header ul li.title{

  57.     padding-right: 15px; color: #EEEEEE; font-family: Arial; font-size: 25px; font-weight: bold;

  58. }

  59. .header ul li.titledesc{

  60.     padding-right: 15px; color: #EEEEEE; font-family: MS Sans Serif; font-size: 14px; margin-top: 40px;  font-weight: bold;

  61. }

  62. 

  63. #art-sheet{

  64.     border-top: 1px solid #FEFEFE; 

  65.     clear: both;

  66.     width: 950px;

  67.     margin: 2px auto 0;

  68.     background: white;

  69.     color: #000000;

  70.     text-align:left;

  71. }

  72. 

  73. #sidebar{

  74.     float: left;

  75.     width: 250px;

  76.     margin: 0 auto;

  77.     padding: 10px;

  78. }

  79. .vmenu a {

  80.     display: block;

  81.     background: #BF3E18 url(images/vmenuarrow.gif) no-repeat center left;

  82.     color: #FFFFFF;

  83.     padding: 5px 0 5px 19px;

  84.     margin: 0 0 1px 0;

  85.     text-decoration: none;

  86.     text-align:left;

  87. }

  88. .vmenu a:hover {

  89.     color: #FFFFFF;

  90.     background: #822C0F url(images/vmenuarrowhover.gif) no-repeat center left;

  91. }

  92. .sidebar-content {

  93.     background: #EEEEEE;

  94.     margin: 2px 0 2px 0;

  95.     padding: 8px;

  96.     line-height: 1em;

  97. }

  98. 

  99. #article{

  100.     float: right; width: 680px;

  101. }

  102. .date-header{

  103.     float: left;

  104.     width: 100px;

  105.     height: 40px;

  106.     background: #3366CC;

  107.     color: #000000;

  108.     line-height:40px;

  109.     margin: 10px 0 2px 0;

  110.     padding: 0 0 0 10px;

  111. }

  112. .content{

  113.     padding: 10px;

  114.     float: left;

  115.     width: 640px;

  116. }

  117. .date-footer {

  118.     margin: 5px 0 5px 0;

  119.     padding: 10px 5px 5px 0;

  120.     background: url(images/horizontaldotted.gif) repeat-x bottom left;

  121.     color: #808080;

  122.     text-align: right;

  123. }

  124. .date-footer a { color: #808080;  }

  125. 

  126. #art-footer{

  127.     border-top: 1px solid #FEFEFE; 

  128.     clear: both;

  129.     width: 950px;

  130.     margin: 2px auto 10px;

  131.     background: #CCCCCC ;

  132.     color: #000000;

  133.     text-align: center;

  134.     padding:15px;

  135. }

Simpan script di atas dengan nama file style.css, letakkan dalam folder khusus.

2. Buat dokumen HTML untuk sehingga membentuk desain web dua kolom.

Agar dapat membentuk dan membuat desain web dua kolom seperti layout di atas, maka script style CSS harus di insert ke dalam dokumen HTML. Berikut adalah script HTML yang membentuk dokumen HTML tersebut:

  • code
  • source
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  2. <html>

  3. <head>

  4.     <title>Cara Membuat Desain Web Dua Kolom</title>

  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  6.     <link rel="stylesheet" type="text/css" href="style.css" />

  7. </head>

  8. <body>

  9.     <div id=art-main>

  10.         <div id=navbar> <a href="#">Home</a> | <a href="#">Privacy Policy</a> | <a href="#">TOS</a> |  <a href="#">Contact us</a></div>

  11.         <div id=art-header>  

  12.             <div class="header">

  13.                 <ul>    

  14.                     <li class="titledesc">Cara Membuat Desain Web Dua Kolom | Web Design Tutorial</li>

  15.                     <li class="title">raja putra media ©</li>

  16.                 </ul>

  17.             </div>

  18.         </div>

  19.         <div id=art-sheet>     

  20.             <div id=sidebar>

  21.                 <div class=vmenu>

  22.                     <a href="#"> Home</a><a href="#"> Service</a><a href="#"> News</a><a href="#"> Tutorial</a><a href="#"> Design</a><a href="http://blog.rajaputramedia.com" target="_blank"> Blogs</a>

  23.                 </div>

  24.                 <div class=sidebar-content>

  25.                     <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <a href="#">quis nostrud exerci</a>.</p>

  26.                 </div>

  27.                 <div class=sidebar-content>

  28.                     <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <a href="#">quis nostrud exerci</a>.</p>

  29.                 </div>

  30.             </div>

  31.             <div id=article>

  32.                 <div class=date-header><font size=4>20</font> Des 2013</div>

  33.                 <div class=content>

  34.                     <h2><a href="#">Lorem Ipsum</a></h2>

  35.                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupt...  </p>

  36.                     <p class="date-footer"><img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments(34)</a> <img src="images/timeicon.gif" alt="" /> 24th Dec, 2013</p>

  37.                 </div>

  38.                 <div class=date-header><font size=4>20</font> Des 2013</div>

  39.                 <div class=content>

  40.                     <h2><a href="#">Lorem Ipsum</a></h2>

  41.                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupt...</p>

  42.                     <p class="date-footer"><img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments(34)</a> <img src="images/timeicon.gif" alt="" /> 24th Dec, 2013</p>

  43.                 </div>

  44.                 <div class=date-header><font size=4>20</font> Des 2013</div>

  45.                 <div class=content>

  46.                     <h2><a href="#">Lorem Ipsum</a></h2>

  47.                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupt...  </p>

  48.                     <p class="date-footer"><img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments(34)</a> <img src="images/timeicon.gif" alt="" /> 24th Dec, 2013</p>

  49.                 </div>

  50.             </div>

  51.         </div>

  52.         <div id=art-footer>

  53.             Design by <a href="http://www.rajaputramedia.com">jasa pembuatan website </a> - © 2013 -  andihatmoko[at]gmail.com - phone:+62857 1405 7686

  54.         </div>

  55.     </div>

  56. </body>

  57. </html>

Simpan script HTML di atas dengan nama file index.html, kemudian letakan dalam satu folder dengan file CSS yang sudah dibuat.

3. Pastikan file CSS dengan nama style.css berada di dalam satu folder dengan file index.html.

By -
Label:

No comments:

Post a Comment

terimakasih telah mengunjungi blog saya.

Subscribe to: Post Comments (Atom)