CSS : Membuat Desain Layout Website
Membuat Desain Layout Website
Membuat file HTML layout
media="all" />
- Kode diatas murni kode HTML dan anda telah membuat tag DIV dengan masing-masing diberikan selector ID, anda masih ingat tentunya dengan selector ID yang dipisahkan dari header,menu navigasi,content, menu kanan,footer.
- Kode komentar dengan warna merah perlu anda isi dengan konten atau artikel, karena jika anda tidak mengisi dengan artikel maka hasilnya tidak akan kelihatan (dalam file contoh telah saya beri artikel).
- Kode yang saya tebalkan merupakan link untuk menggabungkan dari File HTML dengan File CSS.
Lalu simpan dalam folder Bab1 Membuat layout yang sudah anda buat, beri nama dengan index.html , jika anda jalankan dengan klik 2 kali maka penampilannya masih tidak karuan hanya tulisan dari content saja karena anda belum membuat kode CSS yang bertujuan mendesain tampilan dan halaman layout web anda.
Membuat file CSS layout
Oke sekarang kita buat file CSS nya untuk membuat tampilan dari Layout website anda.
Berikut kode dari file CSS :
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#FFFF99;
width:1000px;
height:160px;
}
#menu{
background-color:#993300;
width:1000px;
height:35px;
}
#content{
background-color:#EBEBEB;
width:700px;
float:left;
}
#right {
width:300px;
background-color:#EBEBEB;
float:left;
}
#footer{
background-image:url(images/footer.gif);
width:1000px;
height:128px;
float:left;
}
- Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dan padding dengan nilai 0.
- Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font Arial, Helvetica, sans-serif .
- Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi ditengah karena margin nya 0 dan dibuat Auto.
- Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar ditengah dan diberi background warna kuning , dengan ukuran lebar 1.000px dan tinggi 160 px.
- Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px.
- Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/mengalir kekiri ).
- Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.
- Kode #footer {…} membuat footer dengan background image footer.gif , lebar 1.000 px , tinggi 128 px, penempatan Float left.
Lalu setelah itu anda simpan pada folder Bab1 Layout website beri nama style.css.
Untuk melihat hasilnya silahkan klik 2 kali di index.html dan ini hasilnya .
- Hasil diatas untuk artikel telah saya isi dengan mengambil dari internet.
- Untuk bagian artikel memang terlihat agak jelek karena kita belum mendesain bagian dari konten, nanti akan dibahas pada materi tersendiri.
Jangan Lupa like dan share.
Belajar Pemrograman di fajaryusuf.com aja. 🙂
MATERI CSS
Materi ke-1 : Fungsi HTML dan CSS pada WEB
Materi ke-2 : Aturan penulisan CSS
Materi ke-3 : Cara menggabungkan HTML dan CSS
Materi ke-4 : Property pada CSS
Materi ke-5 : Tips Mahir Menguasai CSS
Materi ke-6 : Membuat Desaign Layout
Materi ke-7 : Membuat Menu Navigasi
Materi ke-8 : Mengedit Konten
Materi ke-9 : Mengedit Kolom Right
Materi ke-10 : Mengedit Footer
Materi ke-11 : Menggabungkan Seluruh Materi