Kini saatnya
kita melanjutkan tutorial web kita yang membahas cara membuat web dengan
menggunakan Macromedia Dreamweaver.
Dibagian
pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai
profil Dreamweaver sebagai salah satu software web design.
Oke deh, saya
sarankan pembaca sudah mendownload dan
sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase,
trial, maupun yang versi tak asli yang serial number-nya didapat dari
crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga
tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang
membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita
akan mempelajari dasar-dasar dreamweaver untuk membuat website.
1. Silahkan
jalankan program Dreamweaver jika pembaca
telah menginstalnya.
2. Pada menu
utama, pilih File --> New, maka akan
muncul tampilan pilihan jenis dokumen baru yang ingin kita buat.
Maksudnya adalah kita memilih apakah ingin membuat halaman web basic
(statis), web dinamis (biasanya untuk web berbasis database), halaman
template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis
dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi
yang akan digunakan untuk halaman website yang akan kita buat. Karena
saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan
pilih kategori Basic Page dan jenisnya HTML.
3. Tampilan
layar desain
Dreamweaver terdiri dari 3 jenis,
yaitu code,
split, dan design.
Layar
Code berfungsi sebagai tempat kita membuat halaman web dengan mengetikbahasa pemograman secara
langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang
dipakai pada halaman web yang sedang kita buat. Pada bagian design,
kita membuat
website dengan menggunakan menu-menu yang tersedia, misalnya menu
menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan
lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita
buat karena secara otomatis, setiap kita menambahkan sebuah elemen,
maka dreamweaver akan
menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita
gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage,
dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu
yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya
juga sangat bagus dan mudah digunakan. Bagian splitberguna untuk membagi
halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan
separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin
mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya,
dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihatstruktur HTML
sebagai contoh
struktur:
<title>Untitled
Document</title>
dimana struktur
tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan
muncul di title bar browser.
4. Dibagian kiri atas
dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan.
Pilihan ini berguna untuk memilih menu-menu desain yang akan kita
gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka
disebelah kanannya akan muncul menu-menu bergambar yang bisa kita
gunakan, salah satunya untuk memasukkan gambar ke halaman website.
5. Coba pembaca masuk ke
layar Design seperti
yang saya
jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah
pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan
dari elemen-elemen yang kita tambahkan kedalam halaman web yang
kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.
6. Dibagian samping,
terdapat pula bagian yang bernama Panel. Salah
satu fungsi panel ini adalah untuk mengatur file-file web yang telah
kita buat.
7. Dibagian atas tepatnya
disamping menu pilihan layar, ada
kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web
yang sedang kita buat yang akan muncul pada title bar browser.
Fungsi
ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba
pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website
Dengan Dreamweaver". Setelah itu, kembali ke layar code dan
lihat perubahan yang terjadi pada bagian tag <title>.
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 :
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 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