Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Layout Website Dengan CSS - Dasar1

    Diunggah oleh

    api-3766684
    756 tayangan3 halaman

    Judul Asli

    Membuat Layout Website dengan CSS--Dasar1

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    756 tayangan3 halaman

    Membuat Layout Website Dengan CSS - Dasar1

    Diunggah oleh

    api-3766684

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Layout Website Using CSS by masmalik@ymail.

    com

    Membuat Layout Website dengan CSS (Dasar 1)

    <!--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 masmalik@ymail.com
    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 masmalik@ymail.com

    b.3 Buat file baru, pilih HTML dan ketik kode dibawah ini. Simpan di folder
    latihCSS dengan nama index.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Fixed Width and Centred Template</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <div class="inner">
    <p>Tempatkan Headernya di sini</p>
    </div>
    </div>
    <div id="side">
    <div class="inner">
    <p>Disini untuk menu kiri</p>
    </div>
    </div>
    <div id="side2">
    <div class="inner">
    <p>Menu Kanan atau Iklan dapat ditempatkan disini</p>
    </div>
    </div>
    <div id="content">
    <div class="inner">
    <p>Content Utama Website ditempatkan disini</p>
    </div>
    </div>

    <div id="footer">
    <div class="inner">
    <p>Dibuat Oleh siapa, tulis disini!</p>
    </div>
    </div>
    </div>
    </body>
    </html>

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

    Anda mungkin juga menyukai