yes
no
10/Promotion/slider
no

Membuat Layout Website dengan CSS dan HTML

7 komentar
Sebelum membuat website seorang Web Designer harus merancang Layout Website terlebih dahulu. Layout Website dikenal dengan Story Board atau Story Boarding. Istilah Story Board sudah tidak asing bagi para Web Wesigner. Story Board dapat dibuat dengan CSS dan HTML, maka untuk merancang Story Board diperlukan skrip CSS dan skrip HTML.

Skrip CSS digunakan untuk merancang letak maupun ukuran (tinggi dan lebar) dari elemen-elemen layout web, seperti wrapper (pembungkus), header, menu, sidebar, content maupun footer website. Wrapper adalah bagian layout yang paling luar, yang berfungsi sebagai pembungkus dari elemen-elemen layout lainnya seperti header, menu, sidebar dan footer. Sedangkan skrip HTML berfungsi untuk mengatur/menentukan posisi dari elemen-elemen layout website tersebut berdasarkan selector skrip CSS.

Skrip CSS dan HTML dapat dipelajari di Lembaga Pendidikan Kursus Komputer (IT Training Center), pada program kursus Web Design. Computer First adalah Lembaga Pendidikan Kursus Komputer yang membuka program Kursus Komputer Web Design, Web Programming maupun Web Master. Di Computer First, HTML dan CSS merupakan materi wajib untuk dipelajari pada program kursus Web Design, Web Programming maupun Web Master. Sehingga lulusan Web Design, Web Programming dan Web Master dari Computer First mampu merancang Layout Website (Story Board) dengan CSS dan HTML. Selain membuka program kursus diatas, Computer First juga membuka program kursus Programming, Ms. Office, Multimedia Design, Robotic dan program-program kursus yang lainnya.

Untuk lebih memahami tentang pembuatan layout website dengan CSS dan HTML, penulis sudah membuat skrip CSS dan HTML dengan langkah-langkah sebagai berikut :

1.   Membuat Rancangan Awal Layout :
Rancangan Awal merupakan Rencana Layout yang akan dibuat. Rancangan Awal ini dapat dibuat dengan menggunakan Ms. Word, Corel Draw atau Adobe Illustrator. Contoh dari Rancangan Awal Website adalah :















2.    Membuat Layout Website
Layout Website/Story Board dibuat setelah membuat Rancangan Awal. Layout Website/Story Board dibuat dengan menggunakan  CSS (Cascading Stylesheet) secara  eksternal yang disimpan di folder css pada localhost. Layout Website yang sesuai dengan Rancangan Awal diatas adalah :

Nama File : css/layout.css 

#wrapper{ width:1000px;
                   height:750px;
                   background:grey;
                   margin-top:10px;
                   margin-left:10px;
                   margin-bottom:10px;
                   margin-right 10px;
                   padding:10px;        
}
#menu { margin-bottom:10px;
               height:50px;
               width:750px;
               background:aqua;
               float:left;
}
#pencarian { margin-bottom:10px;
                      margin-left:50px;
                      height:50px;
                      width:200px;
                      background:red;
                      float:left;
}
#logo { margin-bottom:10px;
             margin-right:20px;
             height:150px;
             width:150px;
             background:yellow;
             float:left;
             clear:both;
}
#header { margin-bottom:10px;
                 height:250px;
                 width:810px;
                 background:green;
                 float:left;
                 padding:10px;   
}
#berita1 { margin-bottom:10px;
                 margin-right:20px;
                 height:250px;
                 width: 250px;
                 background:blue;
                 float:left;
                 clear:both;
}
#berita2 {  margin-bottom:10px;
                  margin-right:20px;
                  margin-left:260px;
                  margin-top:-260px;
                  height:250px;
                  width: 250px;
                  background:blue;
                  float:left;
                  clear:both;

#berita3 { margin-bottom:10px;
                margin-right:20px;
                margin-left:520px;
                margin-top:-260px;
                height:250px;
                width: 250px;
                background:blue;
                float:left;
                clear:both;

}
#login { margin-bottom:10px;
             margin-left:800px;
             margin-top:-260px;
             height:200px;
             width:200px;
             background:brown;
            float:left;
}
#footer { margin-bottom:10px;
               height:150px;
               width:1000px;
               background:aqua;
              float:left;
               padding:0px;     
         


3.    Membuat File Index/Homepage
File Index/Hompage dibuat untuk memanggil dan menerapkan skrip layout website yang sudah dibuat pada CSS. Nama Id atau Class yang sudah dibuat pada file CSS di diletakkan pada elemen div yang dibuat pada file index. File  index/homepage  disimpan di localhost dengan ekstensi html. Adapun skrip file index tersebut adalah :

Nama File : index.html

<html>
  <head>
    <title>Artikel</title>
    <link href="css/layout.css" type="text/css" rel="stylesheet">
  </head>
  <body>
  <center>
  <div id="wrapper">
    <div id="menu">
     MENU
    </div>
    <div id="pencarian">
     PENCARIAN
    </div>
    <div id="logo">
     LOGO
    </div>
    <div id="header">
    HEADER
    </div>
    <div id="berita1">
    BERITA 1
    </div>
    <div id="berita2">
    BERITA 2
    </div>
    <div id="berita3">
    BERITA 3
    </div>
    <div id="login">
    LOGIN
    </div>
    <div id="footer">
    FOOTER
    </div>
  </div>
  </center>
</html>


Jika file index.html dijalankan di browser, maka akan tampil Layout/Story Board sebagai berikut :

















Demikian artikel ini penulis buat, semoga bermanfaat bagi para pembaca blog Computer First. Jangan lupa untuk dicoba sendiri dan beri komentarnya.....
author profile image
Abdelghafour

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

7 komentar

  1. Asik tuh gan, layoutnya keren :D
    ini versi ane gan, hasil ngutak-ngatik syntax-nya agan
    http://longscripts.blogspot.com/2015/01/cara-membuat-layout-sederhana-dengan-css.html

    BalasHapus
  2. gak bisa pak, padahal saya udah kopas presis, minta yang udah jadi donk pak...

    BalasHapus
    Balasan
    1. mungkin css-nya nggak kebuka gan, coba cek penamannya.
      cari e-book css yang lengkap gan biar nggak pusing :)

      Hapus
  3. terima kasih memudahkan pemahaman

    BalasHapus
  4. script link css nya salah. terus untuk file css nya dalam script nya jangan lupa di beri tag "style"
    terimaksih.cuman sekedar masukkan.

    BalasHapus
  5. Mantap dah artikelnya kawan
    http://oplosanessen.com

    BalasHapus

no
Computer First - First Choice in IT Training Center - menyediakan jasa pelatihan Kursus Komputer di Jakarta sejak dari usia dini yaitu sejak anak-anak sampai dengan dewasa. Computer First berdiri pada tahun 2001, Visi Computer First ingin menjadi First Choice in IT Training Center melalui pendidikan dan pelatihan komputer yang berkualitas terbaik [Computer First Indonesia] (http://computerfirst.co.id/images/logo/logo1.png)