Scribd Logo
Upload

Welcome to Scribd!

  • Membuat Layout Website Dengan CSS

    Uploaded by

    Liberhot Pardede
    75 views5 pages

    Original Title

    6891992 Membuat Layout Website Dengan CSS

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    75 views5 pages

    Membuat Layout Website Dengan CSS

    Uploaded by

    Liberhot Pardede

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Layout Website Using CSS by masmalik@ymail.

    com 2008

    A.

    <!--Membuat Layout Website Dengan CSS 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 Button b.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.

    Gradient Tool

    Foreground & Backgroun d

    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

    Layout Website Using CSS by masmalik@ymail.com 2008

    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:#000000 font-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 }

    Layout Website Using CSS by masmalik@ymail.com 2008 #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; }

    Layout Website Using CSS by masmalik@ymail.com 2008 #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; }

    c.3

    Buat file baru dengan tipe HTML. Ketik kode di bawah ini dan simpan di direktori utama latihCSS dengan nama file index.html.
    <!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> <!--Buat Wrapper--> <div id="wrapper"> <!--Buat Block Untuk Header--> <div id="header"> <p>Sistem Informasi Data Siswa SMKTI Airlangga Samarinda</p> </div> <!--Tutup Block header--> <!--Buat Block Menu--> <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> <!--Tutup Block Menu--> <!--Buat Blosk Untuk Menu--> <div id="content"> <!--Buat Block Untuk Informasi--> <div id="information"> <p>The First Cyber School In East Kalimantan</p> <p>Search Boxes</p> <p>External Link</p> </div> <!--CLOSE INFORMATION BOX--> <!--Tulis Content (isi) dari website anda disini--> <h1>Nama Ketegori</h1> <p>Tulis Paragraf Disini!</p> <!--Buat Blok Untuk Footer--> <div id="footer"> <p>Tempatkan Footer Disini!</p> </div>

    Layout Website Using CSS by masmalik@ymail.com 2008 <!--Tutup Block Footer--> </div> <!--Tutup Content--> </div> <!--Tutup Wrapper--> </body> </html

    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 ^_^

    You might also like