Tutorial : Cara Membuat Web Design dengan Menggunakan Macromedia Dreamweaver Part 2

Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuatdokumen XHTML dan CSS sebagai style library external. Rencana yang akan dipersiapkan terlebih
dahulu adalah sebagai berikut :
1. Desain Website
2. Membuat Website Dengan Dreamweaver

* * *

Desain website

Untuk memulai membuat sebuah website, terlebih dahulu kita menggambarkan desain yang akan
kita buat. Untuk kesempatan ini, kita akan membuat desain website statis dengan format xhtml
yang akan dilanjutkan dengan membuat web menggunakan dreamweaver tools.

1.1 Tampilan website
Tampilan halaman website / webpage pada kesempatan ini adalah membuat halaman web
sederhana dengan 4 bagian / block seperti gambar dibawah ini dengan deskripsi sebagai berikut :

Header
Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage

Menu
Adalah Navigator dari Content layout, berisikan link informasi sebuah
website. Pada kesempatan ini, layout menu dapat ditambahkan sesuai dengan
kebutuhan pemilik seperti : home, article, about me, contact dsb

Content
Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama
yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu

dan Footer
hampir sama dengan header, namun yang membedakan adalah, posisi
footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright
pembuat / pemiliknya


1.2 Webpage Content

Untuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akan
dinavigasi dari menu, dengan informasi sebagai berikut :

1. Home (Index.html)
Menampilkan informasi Awal dari Website, halaman ini menjadi halaman
homepage. dengan inisial Home pada menu navigasi
2. Article (Article.html)
Menampilkan informasi tentang article. dengan inisial Article pada menu navigasi
3. About Me (About.html)
Menampilkan informasi pemilik Website, halaman ini menjadi halaman homepage,
pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik
4. Contact (Contact.html)
Menampilkan informasi Awal dari Website, halaman ini menjadi halaman
homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article
pemilik


1.3 Menyiapkan Graphic / Gambar pendukung webpage

Pada kesempatan ini, Graphic sudah terlebih dahulu dibuat mengunakan Adobe Photoshop. Yang
ditempung pada file images sebagai berikut :


Folder/ directory gambar

background-header.png --> File gambar background header block
background-footer.png --> File gambar background footer block
background-content.png --> File gambar background content block
background-menu.png --> File gambar background menu navigasi block

pastikan file tersebut sudah anda simpan dalam PC anda pada folder images pada susunan file
website anda.

1.4 File Management Website

Sesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kita
buat adalah sebagai berikut :

index.html --> html file, halaman utama / homepage
article.html --> html file, halaman article
about_me.html --> html file, halaman tentang pemilik
contact.html --> html file, halaman contact pemilik
template.css --> css file, Style Library halaman website

Folder / directory gambar
Buat 1 buah Folder / directory dengan nama “workshop” pada PC anda yang teletak pada “C:\”
File management diatas akan berada pada folder yang anda buat. “C:\workshop\”
Untuk awal tentunya anda belum mempunyai file index.html, about_me.html & template.css. file
graphic pendukung dapat dicopy dari tempat yang telah disediakan.


Membuat Website dengan Dreamweaver

Untuk Memulai membuat website dengan dreamweaver, anda dapat langsung
membukanya pada desktop shortcut atau melalui menu :
start --> All Program --> Macromedia --> Macromedia Dreamweaver MX 2004
Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan.

2.1 Membuat Halaman Index.html

Pada Dashboard Dreamweaver menu pilih “HTML” pada sub “Create New” Shortcut.
Anda akan memasuki workspace Dreamweaver.

Gambar 2.1.1 Title webpage

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


Sumber Tutorial : E-book Webdesign Workshop at Kudus July 14’th 2007