Selasa, 09 September 2014

Membuat Layout Template Sederhana

Unknown 01.40 , Tidak ada komentar :
Berhubung saya paling tidak suka menggunakan frame untuk membuat template web maka dari itu pada akhirnya saya memberikan sedikit ilmu yang pernah saya pelajari, yaitu membuat template web menggunakan html dan css. Cara ini sebenarnya tidak terlalu sulit, cukup dengan memahami struktur dari web tersebut maka kita bisa menentukan layout tersebut dan siap untuk build layout. Perhatikan gambar berikut.
struktur halaman web 580x433 Membuat Template Web Sederhana Menggunakan Html Dan Css
 Nah dari gambar di atas maka kita bisa simpulkan bahwa pada umumnya web itu pasti memiliki elemen dibawah ini
Header
Kontent
Sidebar
Footer
Untuk membuat halaman seperti gambar di atas maka kita harus membuat file index.html ataupun index.php dan 1 file tambahan yaitu css nah untuk mencoba silahkan copy scrip dibawah ini dan paste di notepad++ kemudian simpan dengan nama index.html.
?
01
02
03
04
05
06
07
08
09
10
<div id="wrapper">
<div id="header"></div>
<div id="page">
<div id="konten">
ISI</div>
<div id="sidebar">SIDEBAR</div>
</div>
<div id="footer"></div>
</div>
</div>
kedua silahkan kopi kode css dibawah ini paste di notepad++ dan beri nama dengan css.css pada folder yang sama dengan file index kemudian jalankan file index.html menggunakan browser kalian masing-masing.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body{
background: #f1f1f1;
}
#wrapper{
background: #f1f1f1;
border: 1px solid black;
width: 960px;
margin: 0px auto;
height: auto;
}
#header{
background: white;
width: 940px;
margin: 0px auto;
height: 100px;
margin-top: 10px;
}
#page{
background: blue;
border: 1px solid black;
width: 940px;
height: 400px;
margin:0px auto;
margin-top:10px;
margin-bottom: 10px;
}
#konten{
background: black;
width: 630px;
margin: 0px auto;
float: left;
height: auto;
}
#sidebar{
background: red;
float: right;
width: 300px;
margin: 0px auto;
}
#footer{
background: black;
margin: 0px auto;
width: 940px;
height: 30px;
}
nah selesai mudah bukan untuk membuat template web, mudah mudahan bermanfaat bagi kalian, apabila kalian bisa hubungi saya langsung terimakasih..

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )