1. Cari Referensi Dari Website Lain
Jika anda masih bingung dalam membuat layout website dari awal,
mungkin cara ini dapat membantu anda, karena dengan mencari referensi
dari wweb ain, 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.
Buatlah sebuah file dengan nama style.css dan isi dengan kode CSS berikut ini untuk mendesain layout yang telah dibuat:
Berikut ini adalah contoh script yang memakai cara pertama, yaitu memasukan langsung script CSS di dalam tag …:
Lalu cara kedua yaitu menyisipkan link yang menghubungkan file HTML ke file CSS yaitu sebagai berikut:
*) 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.
2. Menterjemahkan Layout Dengan CSS
Gambar dibawah ini merupakan layout yang ingin kita terjemahkan dengan menggunakan CSS. Dilayout tersebut terdapat 4 kerangka website, yaitu bagian HEADER, BODY, SIDEBAR, dan FOOTER yang sudah saya jelaskan sebelumnya.
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 memaasukan 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> |
1
2
3
4
| <head><title>Test 123</title><link href="css/style.css" rel="stylesheet" type="text/css"></head> |
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
sumber
ramdhan,anggriawan
| <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> |
