Masukan Judul “Home” pada textbox title






Gambar 2.1.2 Saving Index.html

Save halaman Pertama anda dengan
nama index.html pada folder
“C:/apache2triad/htdocs/workshop/”

Gambar 2.1.3 Setting Block Div

masukan div tag pada halaman layout dengan class sesuai dengan design yg akan dibuat container, footer, content, menu, header
seperti digambar sebelah ini.












Gambar 2.1.4 Homepage Content

masukan informasi sesuai dengan block yang telah dibuat (contoh seperti gambar disamping).

1.header block :
Dengan nama anda dan motto

2.menu block :
navigator halaman diikuti
dengan fungsi hyperlink
• Home
• Article
• About me
• Contact

3.content block :
informasi homepage
berisikan kata sambutan, dsb

4.footer block :
informasi pembuat




2.2 Membuat CSS dengan Dreamweaver MX

Cascading style sheet dapat digunakan melalui 3 macam / jenis sebagai berikut :
1. Inline style – ditulis langsung pada setiap tag / elemen
2. Document level style – ditulis diantara bagian head HTML pada setiap dokumen
3. External style sheet – ditulis difile .css sebagai file external yang dapat dipanggil /
digunakan lebih dari 1 halaman / webpage.
Kita akan membuat dengan cara yang ke 3 dengan membuat sebuah file template.css melalui
menu File --> new --> CSS pada kategori basic page. Selanjutnya gunakan template.css sebagai link
stylesheet pada index.html dengan Attach style sheet pada panel CSS.

Gambar 2.2.1 Attach External Css

Halaman index.html akan menampung script
sebagai berikut sebagai link CSS external

<link href="template.css" rel="stylesheet" type="text/css" />

• setting semua style tag webpage dengan warna abu2 dengan margin dan padding 0.
dengan menggunakan wizard dari dreamweaver atau menulis sctipt css sebagai berikut :
* {
color: #333333;
margin: 0px;
padding: 0px;
}

• selanjutnya setting style body, format text H1 dan H2 seperti script dibawah ini :
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #313131;
}
h1 {
text-transform: lowercase;
color: #3399FF;
font-size: 25px;
}
h2 {
color:#3399FF;
font-size: 14px;
text-transform: uppercase;
}

• buat style tag div
div {
padding: 5px;
border: 1px solid #FFFFFF; 
}

• style class container
.container {
width: 600px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
padding: 0px;
border: 3px ridge #FFFFFF;
}

• Style class header
.header {
background: #FFFFFF url(images/background-header.png);
text-align: center;
}

• Style class content
.content {
font-size: 12px;
background: #FFFFFF url(images/background-content.png) repeat-x;
text-align: justify;
}

• Style class menu
.footer {
font-size: 11px;
color: #FFFFFF;
background: #FFFFFF url(images/background-footer.png);
text-align: center;

• Style class menu
.menu {
height:25px;
padding:0px;
border:0px;
}

• Advance class menu pada tag li, a dan a:hover
.menu li {
list-style:none;
text-align: center;
float: left;
height: auto;
width: 150px;
font: 12px/25px Verdana, Arial, Helvetica, sans-serif; 
}
.menu li a {
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background: url(images/background-menu.png);
display: block;
}
.menu li a:hover {
background: url(images/background-menu.png) 0 -25px;
color:#000000;
}

Maka tampilan home page anda akan akan seperti sebagai berikut :

Gambar 2.2.2 index.html

Gambar 2.2.3 article.html

Nahhh... gimana sobat ??
Cukup Mudah Kan Tutorialnya dalam membuat website sederhana ?? :)
Semoga Bermanfaat sobat