Berikut ini saya akan memberikan tutorial membuat
layout website dengan CSS. Hal pertama yang dilakukan adalah membuat design
pada media kertas.
1. Cari Referensi Dari Website Lain
Jika masih bingung dalam membuat layout website dari
awal, mungkin cara ini dapat membantu, karena dengan mencari referensi dari web
lain, kita tinggal menterjemahkannya ke dalam media kertas. Berikut ini adalah
salah satu website yang saya buat yang akan kita jadikan contoh untuk membuat
sebuah layout website.
Gambar tampilan website diatas terdiri dari 4
bagian, yaitu: HEADER, BODY, SIDEBAR, dan FOOTER. Untuk
penamaan bagian-bagian didalam layout disarankan agar nama yang diberikan
sesuai dengan fungsinya. Seperti di bagian #SIDEBAR, bisa juga diberi nama
#RIGHTBOX, tetapi nama tersebut menjadi aneh ketika sewaktu-waktu kita ingin
memindahkan bagian tersebut kesebelah kiri. Maka untuk pemberian nama, saya
sarankan lebih spesifik dan agar sesuai dengan fungsinya.
2. Menterjemahkan Layout Dengan CSS
Gambar dibawah ini merupakan layout yang ingin
diterjemahkan dengan menggunakan CSS. Dilayout tersebut terdapat 4 kerangka
website, yaitu bagianHEADER, BODY, SIDEBAR, dan FOOTER.
Buatlah sebuah file dengan nama style.css
dan isi dengan kode CSS berikut ini untuk mendesain layout yang telah dibuat:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| #wrapper {width: 800px;margin: 0 auto;}#header {float: left;width: 100%;height: 150px;background-color: red;}#body {float: left;width: 70%;height: 300px;background-color: blue;}#sidebar {float: left;width: 30%;height: 300px;background-color: green;}#footer {float: left;width: 100%;height: 100px;background-color: yellow;} |
3. Menyisipkan Link File CSS di Script
HTML/PHP
Untuk menggunakan CSS, ada dua cara yang bisa
dipakai, yaitu dengan cara memasukkan langsung script CSS di dalam tag …, atau
bisa juga dengan memasukkan link yang menghubungkan antara file HTML dengan
file CSS.
Berikut ini adalah contoh script yang memakai
cara pertama, yaitu memasukan langsung script CSS di dalam tag …:
1
2
3
4
5
6
| <head><title>Test 123</title><style>//script CSS yang ingin dimasukkan</style></head> |
Lalu cara kedua yaitu menyisipkan link yang menghubungkan
file HTML ke file CSS yaitu sebagai berikut:
1
2
3
4
| <head><title>Test 123</title><link href="css/style.css" rel="stylesheet" type="text/css"></head> |
*) jika anda menyimpan file didalam folder CSS, maka
link yang ditulis harus href=”css/style.css”, namun jika file CSS yang dibuat
ada didalam satu folder dengan file HTML, maka cukup dengan href=”style.css”
saja.
4. Membuat file HTML
Berikut ini adalah script file HTML yang di
integrasikan dengan file CSS diatas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <html><head><title>Membuat Layout Website Dengan CSS</title><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><div id="wrapper"><div id="header"><h1>#header</h1><p>Ini adalah bagian HEADER. Biasanya terdapat LOGO, MENU, dan sebagainya.</p></div><div id="body"><h1>#body</h1><p>Ini adalah bagian BODY yang merupakan bagian inti dari website.</p></div><div id="sidebar"><h1>#sidebar</h1><p>Ini adalah bagian SIDEBAR. Biasanya terdapat MENU, DAFTAR KONTEN, dan sebagainya.</p></div><div id="footer"><h1>#footer</h1><p>Ini adalah bagian FOOTER. Biasanya terdapat HAK CIPTA, MENU, dan sebagainya.</p></div></div></body></html> |
