Membuat Layout Website Dengan Css--dasar1

Layout Website Using CSS by [email protected]

Membuat Layout Website dengan CSS (Dasar 1) A.

Persiapan Buatlah direktori latihCSS di direktori utama webserver anda, misalnya: C:\AppServ\www\latihCSS, (untuk AppServer).

B.

Membuat File konfigurasi style (gaya desain) dari layout website. b.1 Bukalah Aplikasi Dreamweaver kemudian pilih CSS

b.2

Ketik kode berikut ini dan simpan di direktori utama latihCSS dengan nama file style.css

Layout Website Using CSS by [email protected] body { text-align: center; min-width: 750px; padding: 0; margin: 0; } #wrapper { text-align: left; width: 750px; margin-top: 50px; margin-left: auto; margin-right: auto; padding: 0; } #header { margin-bottom: 10px; clear: both; border: 1px solid #000000; } #header .inner { margin: 10px; } #content { margin: 0 200px 0 200px; border: 1px solid #00609D; } #content .inner { padding-top: 1px; margin: 0 10px 10px 10px; } #side { float: left; width: 180px; margin: 0; border: 1px solid #CC6600; } #side .inner { padding-top: 1px; margin: 0 10px 10px 10px; } #side2 { float: right; width: 180px; margin: 0; border: 1px solid #FFCC01; } #side2 .inner { padding-top: 1px; margin: 0 10px 10px 10px; } #footer { margin-top: 10px; clear: both; border: 1px solid #000000; } #footer .inner { margin: 10px; }

Layout Website Using CSS by [email protected]

b.3

Buat file baru, pilih HTML dan ketik kode dibawah ini. Simpan di folder latihCSS dengan nama index.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

C.

Menguji Website Buka browser anda kemudian cobalah desain layout yang anda buat dengan mengarahkan url browser pada http://localhost/latihcss/