Magic Adakabrada!

Basic Layout Web Design, part 1

Sekarang mari kita mencoba lebih lanjut teknik pembuatan design layout untuk aplikasi web. Pada percobaan kali ini kita masih belum membutuhkan server-side scripting, karena seluruh design layout nantinya dibuat menggunakan HTML5 dan CSS3, dengan bantuan editor (seperti notepad++) dan browser versi terbaru (menggunakan Chrome dan Firefox).

http://yarticles.com/wp-content/uploads/2012/08/html5-layout.gif
layout web design, 2 column

Bermacam-macam bentuk layout web, bisa Anda lihat pada sketsa berikut ini. Tapi kita akan coba membuat sesuai bentuk Layout pada gambar diatas. Kita juga akan coba menerapkan berbagai tag HTML5 yang disarankan untuk membuat design layout, seperti tag header, nav, article, section, aside dan footer. Penjelasan lebih lanjut tentang tag layout content tersebut bisa anda dapatkan di w3school.com.

Langkah pertama, anda harus menyiapkan file index.html dan style.css, pada satu directory yang sama. Kemudian isi file html tersebut dengan susunan layout seperti gambar diatas.

<html>
<head>
 <title>Basic Web Design</title>
</head>

<body>
<!-- isi untuk bagian content web -->
</body>
</html>

Kita mulai dengan membuat header pada bagian awal <body> yang terdiri dari Title dan Menu (navigation),

<div>
 <header>
 <h1>Learning Basic Web Design</h1>
 <nav>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Galery</a></li>
   <li><a href="#">My Profile</a></li>
   </ul>
 </nav>
 </header>
</div>

Kemudian membuat bagian konten utama nya, yang terdiri dari bagian tulisan artikel dan sidebar.

<div>
 <div>
 <article>
 <section>
 <h2>Judul Article section h2</h2>
 <p>Tuliskan Content Article disini.</p>
 </section>
 <section>
 <h2>Judul Article section h2</h2>
 <p>Tulisakan Content Article disini.</p>
 </section>                   
 </article>

 <aside>
 <h3>Kata Muatiara</h3>
 <p>Tulisakan kata mutiara pada bagian sidebar ini.</p>
 </aside>

 </div> <!-- ending #main -->
</div> <!-- ending #main-container -->

Terakhir, mari kita tambahkan bagian footer. Anda bisa memasukkan keterangan, pemilik web atau menu tambahan pada bagian ini.

<div>
 <footer>
 <h3>Responsive Web Design</h3>
 copyright by me@2013  | link reference :
 <a href="http://www.w3schools.com">www.w3schools.com</a>
 </footer>
</div>

Sampai pada tahapan ini, silahkan amati kembali script layout yang telah Anda buat. Pastikan bahwa susunan nya sudah sesuai dengan design layout pada gambar dibagian paling atas artikel ini.

sample basic web design

Untuk layout nya pasti belum akan sesuai, karena kita harus menyusunnya menggunakan CSS. Tambahkan script link file CSS pada bagian head file HTML anda.

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

Kemudian kita bisa mengedit file CSS tersebut, untuk memasukkan script yang berkaitan dengan design dan layout HTML tersebut. Kita tidak akan membahas lebih lanjut tentang berbagai attribut dan teknik penulisan CSS, karena Anda dapat pelajari sendiri dari ebook “Learning Web Design” atau w3school.com.

Agar sesuai gambar design diatas, Anda bisa mencoba sample script CSS berikut,

body{
 background:#c0d6e4;
 font-family: "Arial";
 color:#232;
 font-size: 1em;
 line-height: 1.4;
 margin:0px;
}

.wrapper {
 width: 98%;
 margin: 0 1%;
}

.header-container,
.footer-container {
 background: #3a75c4;
}

.main aside {
 background: #3C0;
}

.header-container {
 border-bottom: 20px solid #012156;   
}

.header-container h1.title, .footer-container{
 padding: 0 20px;
 color:#dedede;
 font-family: "Tahoma";
}

aside{
 border-radius:15px;
 -moz-border-radius:15px;

}

/* ==============
 Design Menu
 ============== */

nav ul,ol {
 list-style:none;
 list-style-image:none;
}   

nav ul {
 margin: 0;
 padding: 0;
}

nav a {
 display: block;
 margin-bottom: 10px;
 padding: 15px 0;

 text-align: center;
 text-decoration: none;
 font-weight: bold;

 color: white;
 background: #012156   
}

nav a:hover, nav a:visited {
 color: white;
 background: #e44d26;
}

nav a:hover {
 text-decoration: underline;
}

.title {
 float: left;
}

nav a {
 float: left;
 width: 27%;
 margin: 0 0.5%;
 padding: 15px 2%;
 margin-bottom: 0;   
}

nav {
 float: right;
 width: 38%;
}

/* ==============
 Design Main
 ============== */

.main {
 padding: 30px 0;
}

.main article h1 {
 font-size: 2em;
}

.main aside {
 color: white;
 padding: 0px 5% 10px;
}

.main article {
 float: left;
 width: 57%;
}

.main aside {
 float: right;
 width: 28%;
}

.footer-container footer {
 color: white;
 padding: 20px 0;
}

/* ====================
 WIDE: CSS3 Effects
 ==================== */

 .header-container,
 .main aside {
 -webkit-box-shadow: 0 5px 10px #aaa;
 -moz-box-shadow: 0 5px 10px #aaa;
 box-shadow: 0 5px 10px #aaa;
 }

/* ===============
 Maximal Width
 =============== */

 .wrapper {
 width: 1026px; /* 1140px - 10% for margins */
 margin: 0 auto;
 }

.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}

.clearfix:after {
 clear: both;
}

.clearfix {
 *zoom: 1;
}

Woow.. banyak euy.. mudah-mudahan Anda semakin bingung, penasaran dan makin mencari untuk berkreatifitas. 😀

Saran saya, setelah melakukan copy-paste, Anda harus memahami satu-persatu script yang ada pada CSS tersebut, dengan melihat id(#) atau (.)class nya pada HTML. Hasil nya akan seperti ini,

Hasil Layout Web Design

Berikut ini penjelasan setiap tahapannya. Pertama membuat layout secara umum, yang terdiri dari pengaturan posisi setiap layout, warna, ukuran screen dan effect shadow pada bagian tertentu.

body{
 background:#c0d6e4;
 font-family: "Arial";
 color:#232;
 font-size: 1em;
 line-height: 1.4;
 margin:0px;
}

.wrapper {
 width: 98%;
 margin: 0 1%;
}

.header-container,
.footer-container {
 background: #3a75c4;
}

.main aside {
 background: #3C0;
}

.header-container {
 border-bottom: 20px solid #012156;   
}

.header-container h1.title, .footer-container{
 padding: 0 20px;
 color:#dedede;
 font-family: "Tahoma";
}

aside{
 border-radius:15px;
 -moz-border-radius:15px;

}

/* ====================
 WIDE: CSS3 Effects
 ==================== */

 .header-container,
 .main aside {
 -webkit-box-shadow: 0 5px 10px #aaa;
 -moz-box-shadow: 0 5px 10px #aaa;
 box-shadow: 0 5px 10px #aaa;
 }

/* ===============
 Maximal Width
 =============== */

 .wrapper {
 width: 1026px; /* 1140px - 10% for margins */
 margin: 0 auto;
 }

.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}

.clearfix:after {
 clear: both;
}

.clearfix {
 *zoom: 1;
}

Sedangkan bagian berikut ini digunakan untuk membuat menu pada bagian header, sebagai navigasi,

/* ==============
 Design Menu
 ============== */

nav ul,ol {
 list-style:none;
 list-style-image:none;
}   

nav ul {
 margin: 0;
 padding: 0;
}

nav a {
 display: block;
 margin-bottom: 10px;
 padding: 15px 0;

 text-align: center;
 text-decoration: none;
 font-weight: bold;

 color: white;
 background: #012156   
}

nav a:hover, nav a:visited {
 color: white;
 background: #e44d26;
}

nav a:hover {
 text-decoration: underline;
}

.title {
 float: left;
}

nav a {
 float: left;
 width: 27%;
 margin: 0 0.5%;
 padding: 15px 2%;
 margin-bottom: 0;   
}

nav {
 float: right;
 width: 38%;
}

Dan bagian yang terakhir adalah untuk pengaturan layout main, sebagai isi dari content. Nantinya akan diisi dengan tulisan atau artikel sebagai konten utama, berikut ini potong script nya,

/* ==============
 Design Main
 ============== */

.main {
 padding: 30px 0;
}

.main article h1 {
 font-size: 2em;
}

.main aside {
 color: white;
 padding: 0px 5% 10px;
}

.main article {
 float: left;
 width: 57%;
}

.main aside {
 float: right;
 width: 28%;
}

.footer-container footer {
 color: white;
 padding: 20px 0;
}

OKs, sampai disini kita telah berhasil membuat layout design menggunakan HTML5 & CSS3. Teknik ini menggantikan model penggunaan Table pada pembuatan layout di zaman dahulu kala. Hasilnya akan lebih memuaskan dan dinamis. Untuk selanjutnya, kita akan membahas pengembangan web design dengan teknik “Responsive Web Design”.

 

tambunan

, , , , ,

One response to “Basic Layout Web Design, part 1”

Leave a Reply

Your email address will not be published. Required fields are marked *