TUTORIAL
WEBDESIGN HTML & CSS
DENGAN
DREAMWEAVER
Membuat website
statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen
XHTML dan CSS sebagai style library external. Rencana yang akan dipersiapkan
terlebih dahulu adalah sebagai berikut :
1. Desain
Website
2. Membuat
Website Dengan Dreamweaver
3. Upload
Website
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 :
• 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.
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
Silahkan download Tutorial lengkapnya di sini