BELAJAR MEMBUAT WEBSITE CSS
DENGAN MENGGUNAKAN DREAMWEAVER WIZARD
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
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.
0 komentar: