Turorial belajar Membuat Layout Website Dengan CSS

Document Sample
Turorial belajar Membuat Layout Website Dengan CSS Powered By Docstoc
					        Layout Website Using CSS by masmalik@ymail.com 2008

                             <!--Membuat Layout Website Dengan CSS
        A.      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… ^_^

				
DOCUMENT INFO
Shared By:
Stats:
views:189
posted:7/26/2011
language:Indonesian
pages:5