Catatan Febby : Dreamweaver

Latihan CSS

Pertama kita buat dulu file css nya dengan mengetikan coding dibawah ini

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #fff;
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
    margin: 100px auto;
    text-align: center;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }

nav ul {
    background: #53bd84;
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #666;
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #fff; text-decoration: none;
        }


    nav ul ul {
        background: #53bd84; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none;
            border-top: 1px solid #53bd84;
            border-bottom: 1px solid #53bd84; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }
                nav ul ul li a:hover {
                    background: #666;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

kemudian simpan file dengan nama style.css

Setelah itu kita buat file htmlnya dengan code dibawah ini

<html>
<head>
<meta charset="utf-8" />
<title>Membuat Menu Dropdown</title>

<link href="style.css" rel="stylesheet" />

</head>
<body>

<nav>
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tutorial</a>
            <ul>
                <li><a href="#">PHP</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">HTML</a>
                    <ul>
                        <li><a href="#">Pemula</a></li>
                        <li><a href="#">Mahir</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Nyekrip</a>
            <ul>
                <li><a href="#">Ngoding</a></li>
                <li><a href="#">Nyekrip Yuk</a></li>
            </ul>
        </li>
        <li><a href="#">Tentang</a>
            <ul>
                        <li><a href="#">Kontak</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </li>
    </ul>
</nav>

</body>
</html>

simpan dengan nama latihan css.html

Sumber : http://bharatakreatif.blogspot.co.id

Membuat Halaman Web Dengan Dreamwaver

Buka aplikasi Dreamwaver CS6 kemudian pilih HTML

Jika sudah terbuka ganti title dengan SMK Kaya Budi

Buatlah table dengan Row = 3 Coloum = 3

Untuk membuat bagian header kita seleksi terlebih dahulu row yang paling atas, jika sudah terseleksi klik kanan pilih tabel kemudian pilih merge cells

Untuk bagian tengah akan kita gunakan untuk membuat isi dan content, sedangkan untuk bagian bawah akan kita gunakan sebagai footer. Untuk membuat footer sama seperti kita membuat header tadi. (lihat no.4)
Jika seluruh bagian halaman web sudah dibuat kita atur size dan posisinya sehingga menjadi seperti dibawah ini