Kesemuanya sangat senang, sekadar "copy & paste" sahaja dalam Dreamweaver. Tag-tag yang terlibat ialah h1, ul, dan li.
Sampel 1
Masukkan kod-kod ini dalam fail HTML biasa: File > New > HTML
<div id = "style1"> <h1>Laman Saya:</h1> <ul> <li><a href ="#">Utama</a></li> <li><a href ="#">Profil</a></li> <li><a href ="#">Hubungi</a></li> </ul> </div> <div class = "content_box1"> Style 1: Isi Kandungan Di Sini </div>
Kemudian, bina satu fail CSS yang baru: File New CSS Files.
Masukkan semua koding ini dalam fail tersebut.
#style1 { font-family: Arial; }
#style1 h1 { font-size: 14px; font-weight: bold; text-transform: uppercase; background-color: #FF6600; width: 120px; text-align: right; padding: 5px; margin: 0px; float: left; border-top: 1px solid #FF6600; border-right: 1px solid #FF6600; border-left: 1px solid #FF6600; }
#style1 ul { font-size: 14px; font-weight: bold; margin: 0px; padding: 0px; list-style: none; }
#style1 li { background-color: #FF9900; float: left; border-top: 1px solid #FF6600; border-right: 1px solid #FF6600; }
#style1 li a { width: 100px; color: #FFFFFF; text-decoration: none; display: block; padding: 5px 0px 5px 5px; text-transform: uppercase; }
#style1 li a:visited { color: #FFFFFF; text-decoration: none; }
#style1 li a:hover { color: #000000; text-decoration: none; background-color: #FFCC33; }
.content_box1 { font-family: Arial; font-size: 11px; clear: left; background-color: #FFFF91; border: 1px solid #FF6600; width: 720px; padding: 15px; }
Sampel 2
Masukkan koding ini dalam fail HTML:
<div id = "style2"> <h1>Laman Saya:</h1> <ul> <li><a href ="#">Utama</a></li> <li><a href ="#">Profil</a></li> <li><a href ="#">Hubungi</a></li> </ul> </div> <div class = "content_box2"> Style 2: Isi Kandungan Di Sini </div>
Masukkan koding ini dalam fail CSS:
#style2 { font-family: Arial; }
#style2 h1 { font-size: 16px; font-weight: bold; background-color: #FF6600; width: 120px; padding: 5px; float: left; border-top: 1px solid #FF6600; border-right: 1px solid #BB4A00; border-bottom: 1px solid #FF6600; border-left: 1px solid #FF6600; margin: 10px 0px 0px 0px; }
#style2 ul { margin: 0px; padding: 0px; list-style: none; float: left; clear: left; }
#style2 li { width: 130px; font-size: 14px; font-weight: bold; background-color: #FF9900; border-right: 1px solid #DF5900; border-bottom: 1px solid #FF6600; border-left: 1px solid #FF6600; }
#style2 li a { width: 120px; color: #FFFFFF; text-decoration: none; display: block; padding: 5px; }
#style1 li a:visited { color: #FFFFFF; text-decoration: none; }
#style2 li a:hover { color: #000000; text-decoration: none; background-color: #FFCC33; }
.content_box2 { width: 586px; font-family: Arial; font-size: 11px; background-color: #FFFF91; border: 1px solid #FF6600; padding: 15px; float: left; }
Artikel:
Penilaian: