Iso Web Id Tutorial Komputer
Lama tidak posting Artikel disini ya, kali ini kita akan belajar design menggunakan CSS.
ingat kita tidak melakukan design tampilan website melainkan kita hanya membuat sebatas layout mockup web yang akan kita buat. Masih ingat dengan artikel sebelumnya Belajar CSS framework kita akan melanjutkan sedikit tentang cara instalasi dan cara menggunakannya.
CSS Framework yang digunakan adalah 960 css kalian dapat download melalui Link ini,
Bagaimana cara memulainya?
1. Extract file zip yang sudah kalian download
2. Masuk pada folder Code/css
3. Buat Folder baru pada Project kalian dengan nama css.
4. Copy File 960.css, reset.css, text.css
5. Pastekan hasil kopi ke folder css.
6. Buat 1 file dengan nama index.html
isi kode html seperti dibawah
<html>
<head>
<title>Belajar CSS Framework II</title>
<link rel=”stylesheet” href=”css/style.css” /> <!– Pemanggilan file css yg baru kita buat –>
</head>
<body>
<div id=”container”>
<div id=”header”>Header</div>
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About me</a></li>
<li><a href=”#”>Profile</a></li>
<li><a href=”#”>Contact me</a></li>
</ul>
<div id=”content”>
<div id=”left_column”>Left Column</div>
<div id=”right_column”>Right Column</div>
</div>
<div id=”footer”>Footer</div>
</div>
</body>
</html>
7. buat file css baru pada folder css beri nama style.css
isi dari kode CSS seperit beriku
@import url(960.css); /* Memanggil Framework 960 CSS*/
@import url(reset.css); /* Memanggil FIle reset.css */body{
margin-top: 10px; /* beri margin 10 pixel dari atas */
background-color: #CCC; /* beri warna background website dengan warna Abu2 kecoklatan */
font: normal 12px Arial, Helvetica, Sans-serif; /* Default font sebesar 12px untuk Arial (Windows), Helvetica (Mac OS), Sans-serif (Linux)*/
}
dari proses diatas Instalasi Framework CSS 960 sudah dilakukan, sekarang kalian bisa akses
melalui browser file yang sudah kalian buat itu. Bila kalian liat Design dari CSS masih belum terbentuk, karena memang masih belum bentuk sesuai keinginan :). File HTML Sedikit dimodifikasi agar terlihat lebih menarik
<html>
<head>
<title>Belajar CSS Framework II</title>
<link rel=”stylesheet” href=”css/style.css” /> <!– Pemanggilan file css yg baru kita buat –>
</head>
<body>
<div id=”container” class=”container_16″>
<div id=”header” class=”grid_16″>Header</div>
<ul id=”menu” class=”grid_16 menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About me</a></li>
<li><a href=”#”>Profile</a></li>
<li><a href=”#”>Contact me</a></li>
</ul>
<div id=”content”>
<div id=”left_column” class=”grid_5″>Left Column</div>
<div id=”right_column” class=”grid_11″>Right Column</div>
<div class=”clear”></div>
</div>
<div id=”footer” class=”grid_16″>
<ul class=”fmenu”>
<li><a href=”#”>Nama domain.com</a></li>
<li>Copyright 2013 </li>
</ul>
</div>
</div>
</body>
</html>
Ubah juga File style.css seperti berikut
@import url(960.css); /* Memanggil Framework 960 CSS*/
@import url(reset.css); /* Memanggil FIle reset.css */body{
margin-top: 10px; /* beri margin 10 pixel dari atas */
background-color: #CCC; /* beri warna background website dengan warna Abu2 kecoklatan */
font: normal 12px Arial, Helvetica, Sans-serif; /* Default font sebesar 12px untuk Arial (Windows), Helvetica (Mac OS), Sans-serif (Linux)*/
}a{color:#000000;}
a:hover{text-decoration: underline;}#container {
margin:0 auto; /* posisikan Layout di tengah */
padding:0;
}
#container #header{
background-color:#B31418; /* beri warna merah pada Header */
height:40px; /* set tinggi Header sebesar 40px */
line-height:40px; /* posisikan Test ada ditengah baris */
color:#FFFFFF; /* beri warna Text putih */
text-align:center; /* Posisikan text ditengah kolom */
font-size:18px; /* set font sebeasr 18px */
font-weight: bold; /* Huruf tebal */
}/* Menu Navgasi */
#container ul.menu{
list-style:none; /* non aktifkan style list */
margin-bottom: 5px;
background-color:#FFFFFF;
}#container ul.menu li{
float: left;
margin-right:5px;
padding:5px;
}
#container ul.menu li a{
display: block;
text-decoration:none;
}
#container ul.menu li a:hover{
text-decoration:underline;
}/* Content */
#content {margin:10px 0;}/* Footer */
#footer{
background-color:#B31418; /* beri warna merah pada Header */
height:20px; /* set tinggi Header sebesar 40px */
color:#FFFFFF; /* beri warna Text putih */
text-align:right; /* Posisikan text ditengah kolom */
font-size:11px; /* set font sebeasr 18px */
}
#footer ul.fmenu{
margin:0;
padding:0;
}
#footer ul.fmenu li{
float:right;
padding: 5px;
margin-righh: 5px;
}
#footer ul.fmenu li a{
color: #FFF; /* beri warna putih pada link */
}
#footer ul.fmenu li a:hover{
text-decoration:none; /* ketika di hover underline di hilangkan */
}
Dari beberapa modifikasi design Layout website yang akan kita buat sudah telihat lebih menarik dari pada
sebelumnya, akan tetapi kita masih belum memodifikasi sisi Content website.
Bersambung
