DESIGN WEB

1.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 :
 gambar 1.1 tampilan website
• Header
Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage
• Menu
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
• Footer
Footer hampir sama dengan header, namun yang membedakan adalah, posisi
footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright
pembuat / pemiliknya.
3
Content
Menu
Header
Footer  Webdesign Workshop at Kudus July 14’th 2007
Create by Hendra.account@gmail.com
2
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
Komponen
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 :
images Æ 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
images Æ 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.