• Assesment Desain Web CSS

    Hari Kamis tanggal 24 November 2011, merupakan pertemuan untuk mahasiswi dalam menjalankan Kewajibannya dalam mata kuliah Desain Web yaitu Assessment. Assessment kali ini yaitu mengenai CSS. Dimana materi ini baru bisa Saya dapatkan di semester 5.

    Mungkin tidak ada kata telat untuk mempelajari sesuatu dengan berbagai orang telah memahami dan belajar terlebih dahulu mengenai CSS..

    Oke tanpa panjang lebar.,
    Saya akan langsung mempraktikan hasil Assesment saya yang telah dikerjakan..,

    Silahkan disimak ya teman-teman semua.,

    Langkah-langkahnya yaitu :

    • buat dokumen html. Dibawah ini merupakan script html nya. Bisa di copy langsung. Untuk nama file nya temen-temen bisa menyimpannya dengan "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=utf-8" />
    <title>Layout Web [Latihan]</title>
    <link href="gaya_layout.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="header-area">
    <div id="header-sub">
        <h1>LOGO AREA</h1>
            <div id="navigation-container">
    <ul class="up-menu">
    <li class="current">
    <a href="#">Beranda</a>
    </li>
    <li>
    <a href="#">Profil</a>
    </li>
    <li>
    <a href="#">Berita</a>
    </li>
    <li>
    <a href="#">Klien</a>
    </li>
    <li>
    <a href="#">Kontak</a>
    </li>
    </ul>
    </div><!-- close #navigation-container -->
    <div class="navigation-base"></div>
        </div>
    </div>
    <div id="content-area">
    <div id="content">
        <div class="sidebar-left">
    <h4>Menu Lain</h4>
            <ul>
            <li>Menu 1</li>
                <li>Menu 2</li>
             </ul>
            </div>
            <div class="main-content">
        <h4>Content Area</h4>
            <p><span>isi dari content</span>
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            </div>
        </div>
       
    </div>
    <div id="footer">
    Copyleft&copy;2011
    </div>
    </body>
    </html>



    • buat dokumen css. Script dibawah ini dapat temen-temen simpan dengan nama file " gaya_layout.css "



    @charset "utf-8";
    /* CSS Document */

    body{
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    color:#000;
    margin:0;
    line-height:20px;
    background:#666666;
    }

    #header-area{
    background:#900;
    margin:0 auto;
    padding-top:0;
    }

    #header-sub{
    width:960px; margin:0 auto;
    }

    h1 {  font-size:30px; line-height:32px;  margin-bottom:8px;}
    h2 { font-size:21px;  line-height:24px; margin-bottom:4px;}
    h3 { font-size:19px; line-height:22px; margin-bottom:6px;}
    h4 { font-size:18px; line-height:21px;  margin-bottom:5px;}
    h5 {font-size:16px; line-height:19px; margin-bottom:3px;}
    h6 {font-size:14px; line-height:26px; margin-bottom:2px;}
     
    #content-area {background:#999 top left;}
    #content {width:960px; overflow:hidden; margin:0 auto; padding:10px 0 10px 0; }

    .sidebar-left {width:300px; height:auto; float:left;border:solid 1px #000;}
    .sidebar-left h4{background:#CCC;margin-top:0px; padding:4px;}

    .main-content{
    width:650px; border:#000000 solid 1px;float:right;background:#003399;
    }
    .main-content h4{
    background:#CCC;margin-top:0px; padding:4px;
    }
    .main-content span{
    padding:10px;
    }


    #footer{
    background:#900;
    margin:0px auto;
    text-align:center;

    }


    /*   NAVIGATION   */
    .up-menu, .up-menu * { margin: 0; padding:0; list-style:none; z-index:1001; }
    .up-menu { line-height: 1.0; }
    .up-menu ul {  position:absolute;  top: -999em; width:10em; /* left offset of submenus need to match (see below) */ }
    .up-menu ul li { width: 100%; }
    .up-menu li:hover { visibility:inherit !important; /* fixes IE7 'sticky bug' */ }
    .up-menu li { float:left; position:relative; }
    .up-menu a { position: relative; cursor:pointer; }
    #navigation-container { width:958px; border-left:1px solid #b8b8b8; border-right:1px solid #b8b8b8; height:37px; background:#0C0 top left repeat-x;}
    .navigation-base {width:960px; overflow:hidden; height:7px; padding-bottom:18px;}
    .up-menu a { display: block; line-height:100%; border-left: 1px solid #d6d6d6; border-right:   1px solid #bbbbbb; padding: 14px 34px 10px 34px; text-decoration:none; color:#FFFFFF; }
    .up-menu .current {background:#CCC; }
    .up-menu li.current:hover {background:#0C0; }
    .up-menu li { background:#063; text-transform:uppercase; }
    .up-menu li li {background:#093; }
    .up-menu li:hover, .up-menu li.upHover,
    .up-menu a:focus, .up-menu a:hover, .up-menu a:active { outline:0; background:#30C; color:#FFF;}
    .up-menu li li:hover, .up-menu li li.upHover,
    .up-menu li li a:focus, .up-menu li li a:hover, .up-menu li li a:active { outline:0; background: #999;}
    .up-menu li.current a { color:#494949;}
    .up-menu li.current li a {color:#5a5a5a;}
    ul.up-menu ul {  border-left:1px solid #bebebe; border-right:1px solid #bebebe;  background:#d9d9d9;}
    ul.up-menu ul a {text-transform:none; border:none;  padding:14px 20px 14px 35px;  font-size:11px; font-family:Verdana, sans-serif; font-weight:normal; }


    • masukan dalam 1 folder kedua dokumen tersebut. 
    • untuk melihat hasilnya temen-temen dapat membuka nama file yang berekstensi .html. (disini nama file yang saya buat yaitu index.html)
    • hasilnya :






    • Bagaimana? Mudahkan ..!


0 komentar:

Poskan Komentar