membuat layout website dengan css

Layout Website Using CSS by [email protected] 2008

<!--Membuat Layout Website Dengan CSSA. Persiapan

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

a.2 Buatlah folder images didalam direktori latihCSS yang baru saja anda buat, sehingga strukturnya tampak sebagai berikut:

B. Membuat 2 buah file JPEG untuk kebutuhan pembuatan Menu Buttonb.1 Bukalah Aplikasi Photoshop, kemudian buat Image baru ukuran Width:3,

Height:25 Pixels.

b.2 Click [Gradient Tool], kemudian ubahlah warna Foreground Color: Orange dan Background: Yellow.

b.3 Kemudian buatlah pola warna gradient Orange-Yellow dengan membuat menarik garis lurus dari ujung atas ke bawah (top-bottom). Simpan gambar tersebut di dalam folder images dengan nama m_over.jpeg

Gradient Tool

Foreground &

Background

mailto:[email protected]


b.4 Buat kembali seperti langkah b.3 akan tetapi polanya adalah gradient Yellow-Orange dari bawah ke atas (bottom-top). Kemudian simpan dengan nama m_down.jpg. Dengan demikian anda telah memiliki 2 file JPG di dalam folder images.

C. Membuat File konfigurasi style (gaya desain) dari layout website.

c.1 Bukalah Aplikasi Dreamweaver kemudian pilih CSS

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

/* CSS Document */body{

background-color:#000000font-family:Arial, Helvetica, sans-serif;}

#wrapper{width: 900px;margin: 0 auto;background-color:#666666}

#header{width:900px;background-image:(images/your_image_here.jpg);background-repeat:no-repeat;background-position:top;background-color:#333333}



#header p{color:#ffffff;font-size:14px;margin:0;padding:82px 6px 0px 6px;}

#menu{height:25px;font-size:11px;font-weight:bold;color:#FFFFFF;background-image:url(images/mover.jpg);background-repeat:repeat-x;}

#menu ul{margin:0;padding:0;list-style-type:none;}

#menu ul li{display:inline;}

#menu ul li a{float:left;padding:5px 0;width:65px;text-align:center;}

#menu a:link, #menu a:visited{color::#ffffff;background-image:url(images/mover.jpg);background-repeat:repeat-x;background-position:center;}

#menu a:hover, #menu a:active{color:#000000;background-image:url(images/mdown.jpg);background-repeat:repeat-x;background-position:center;}

#content{background-color:#cccccc;width:900px;}

#content h1{font-size:18px;font-weight:normal;margin: 0 6px;padding: 15px 0 3px 0;}

#content p{color:#000000;font-size:12px;margin:0 6px;padding:0 6px 9px 6px;}

#information{margin:15px 6px;width:200px;float:right;background-color:#ff0000;border::1px solid #000;}


c.3 Buat file baru dengan tipe HTML. Ketik kode di bawah ini dan simpan di direktori utama latihCSS dengan nama file index.html.

#information p{font-size:11px;color:#ffffff;margin: 0;padding: 6px;}

#footer{clear:both;background-color:#ffff00;}

#footer p{font-size:15px;font-weight:bold;color:#000000;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Selamat Datang : Sistem Informasi Data Siswa SMKTI Airlangga Samarinda</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="wrapper">

<div id="header"><p>Sistem Informasi Data Siswa SMKTI Airlangga Samarinda</p></div>

<div id="menu"<ul>

<li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">News</a></li><li><a href="#">Contact Us</a></li><li><a href="#">About Us</a></li>

</ul></div><div id="content">

<div id="information"><p>The First Cyber School In East Kalimantan</p><p>Search Boxes</p><p>External Link</p>

</div>

<h1>Nama Ketegori</h1><p>Tulis Paragraf Disini!</p>

<div id="footer"><p>Tempatkan Footer Disini!</p></div>

D. Menguji Layout di browser.Cobalah buka browser anda kemudian arahkan URL nya ke http://localhost/latihCSS. Mestinya akan tampak seperti dibawah ini.

To Be Continued… ^_^

</div></div></body></html


http://localhost/latihCSS

membuat layout website dengan css

Documents