1. MENGENAL DESKTOP DREAMWEAVER MXSoftware DreamWeaver ini merupakan salah satu software untuk mendesain
website atau homepage, selain software FrontPage yang sering kita dengar.
Untuk memahami cara bekerja dengan DreamWeaver paling tidak ada tiga
komponen yang perlu dimengerti pengguna software ini:
- Halaman utama: untuk desain website itu sendiri (tampilan web maupun
kode HTML)
- Obyek / Tool: terdiri dari common, layout, text, frames, forms, templates,
character, head, script dan application. Fungsinya adalah memasukan
obyekatau sifat obyek yang Anda inginkan, misalnya memasukan table
dan segala sifat-sifatnya, atau membubuhkan sifat text.
- Properties: berfungsi sebagai alat pengedit obyek yang sedang Anda olah.
Proporties akan berubah sesuai dengan obyek yang sedang Anda olah.
Bila object atau properties tidak tampak pada layar Anda, klik Windows > insert
atau properties.
4
DreamWeaver menyediakan tiga metode dalam mendesain website. Pertama,
mendesain dengan menggunakan kode HTML (bahasa dasar dalam membuat
website). Metode pertama ini tentunya bagi pendesain yang sudah mahir kode
HTMLnya. Kalau kita memilih metode pertama ini, maka layar di tampilan utama
ini murni kode-kode HTML. Sekali lagi ini cukup merepotkan bagi pemula.
Karenanya tidak dianjurkan bagi pemula menggunakan metode pertama ini.
Kedua, kita bisa desain juga dengan visualisasinya seperti kita mengetik melalui
editor word prosesor (MS WORD, misalnya). Metode kedua ini cocok bagi pemula.
Karena pendesain tidak perlu repot-repot memikirkan kode HTML. Anda cukup
klik tool yang Anda perlukan, DreamWeaver akan membuat sendiri HTML
kodenya. Jadi pada dasarnya tool hanya membuat HTML kode. Berbeda dengan
metode pertama, layar tampilan yang nampak sama seperti di website. Dalam
dunia Desktop Publishing disebut WYSIWYG (What you see is what you get = Apa
yang Anda lihat itulah tampilan sebenarnya).
Atau metode yang ketiga, yaitu perpaduan keduanya, mendesain secara visual
tapi juga bisa mengedit dengan kode HTML. Metode ini sebetulnya lebih tepat
daripada hanya mengAndalkan WYSIWYG. Sebab koreksi akan lebih tepat
dilakukan dengan kode HTML daripada sekedar tools.
| Page 1 |
2. MEMBUAT HALAMAN PERTAMA (INDEX)
Di bab ini Anda akan belajar:
- Define Site: menentukan folder, FTP login/password, dll…
- Cara meletakkan gambar, obyek atau text dengan menggunakan kerangka
dasar yaitu table.
- Memformat text dengan tool atau properties.
- Memasukan grafik
- Membuat hyperlinks
- Membuat ketentuan-ketentuan halaman (warna background halaman,
judul halaman, dll…)
Bila Anda mengikuti petunjuk step by step di bab ini, Anda akan mendapatkan
halaman index seperti pada gambar dibawah ini:
Gbr 2.1: Halaman pertama, Index.
2.1. Define Site
Define Site penting Anda lakukan bila Anda bekerja online atau meng-upload
homepage Anda ke internet. Dengan fungsi ini DreamWeaver akan meletakkan
semua file websites Anda ke dalam sebuah root folder (sebuah direktori).
Direktori beserta isinya ini yang nantinya akan di upload ke server.
1. Klik menu Site > New Site...
2. Muncul dialog Site definition for unnamed Site 1
3. Tulis Site Name yang Anda inginkan pada kolom yang tersedia.
Klik next.
4. Pada dialog berikutnya tentukan apakah Anda akan
menggunakan server technology. Klik next
5. Pilih direktori tempat menyimpan file. Klik next
6. Dialog berikutnya (lihat gbr di bawah) penting untuk meng-
upload website Anda.
| Page 2 |
Upload biasanya dilakukan dengan FTP (File Transfer Protocol).
Ketik hostname Anda (www.alamat.de), berikut FTP login dan
password. Klik next, selesaikan dialog dan done.
Semua files situs Anda akan disimpan dalam satu root folder dan akan
ditampilkan oleh dreamweaver secara otomatis seperti misalnya contoh dibawah
ini:
Gbr 2.3: contoh site yang sudah ter-define
| Page 3 |
2.2. Membuat kerangka layout dengan tabel
Tabel merupakan perangkat yang sangat berguna untuk merancang tata letak
desain website. Tabel terdiri dari tiga bagian utama, yaitu baris, kolom dan sel
yang merupakan pertemuan antara baris dan kolom. Setelah membuat suatu
table, Anda bisa memasukkan elemen apa saja dalam tabel tersebut, seperti teks,
gambar, form dan lainnya. Bahkan bisa juga kita membuat tabel dalam tabel
untuk memanipulasi tampilan Anda di website.
Misalnya saja halaman pertama website Kharisma terdiri dari beberapa tabel yang
dijadikan sebagai kerangka layout. Tentu saja user kharisma tidak akan melihat
kerangka tabel, karena tabel sudah di-set “blind” atau invisible.
Gbr 2.4: tabel sebagai kerangka layout halaman pertama kharisma.
Bagaimana cara meletakkan teks “Selamat datang di website kami”, agar terlihat
center secara horisontal maupun vertikal? Mungkin Anda akan berpikir:
- agar terletak center secara horisontal, klik simbol
- agar terletak center secara vertikal, klik Enter berkali-kali sampai terlihat
ditengah halaman.
Solusi diatas sangat tidak tepat. Mengapa? Sebab besarnya halaman pada layar
monitor setiap user internet tergantung dari resolusi layar dan besarnya window
yang dipilih user, tidak seperti ukuran kertas yang sudah pasti. Solusi yang tepat
adalah dengan menggunakan tabel invisible.
Untuk membuat halaman seperti pada gbr. 2.1 ikuti langkah berikut:
| Page 4 |
Cara membuat tabel:
1. Klik simbol
pada kumpulan common
2. Beri ketentuan seperti dibawah:
Keterangan:
- Width = 100 Percent menAndakan tabel berukuran 100 % sama
dengan layar monitor tempat Website dibuka.
- Border = 0 menAndakan tabel tidak kelihatan “blind”.
Cara memformat tabel dengan menggunakan layar propertie:
1. Klik tabel yang sudah Anda buat
2. Isi
propertie
dengan
ketentuan
sbb.:
Keterangan:
W = 100% dan H = 100% menAndakan table berukuran sama dengan
layar monitor tempat Website dibuka.
2.3. Memformat text
Setelah teks yang ingin digunakan sudah Anda masukkan pada jendela (layar)
dokumen, Anda dapat menformat teks tersebut seperti membuat teks menjadi
tebal, iring bergaris bawah, mengubah warna dan jenis font teks beserta besar
kecil eksnya. Teks juga bisa diformat rata kiri, kanan tengah atau rata kiri dan
kanan.
Untuk menformat teks terebut, Anda gunakan layar properti Teks. Jika kotak
properti itu belum tampak di layar, Anda dapat menampilkannya dengan
menggunakan menu Window > Properties. Atau bisa juga dengan short cut
dengan menekan Ctrl+F3.
Dengan properti teks, Anda dapat juga membuat list (daftar) berurut (orderred
| Page 5 |
list) dan daftar tanpa berurutan (unordered list). Daftar berurut dapat
menggunakan tAnda penomoran dengan angka atau huruf. Daftar tanpa
berurutan menggunakan tAnda bulatan atau kotak.
2.4. Memasukkan gambar
Sebelum memasukan gambar, pastikan bahwa gambar tersebut ada di dalam
direktori (root folder) yang sama dengan file html Anda atau di bawah direktori
html tersebut (sub direktori). Semisal Anda buat direktori di C:/website untuk
menyimpan semua file html Anda, maka Anda buat sub direktori gambar untuk
menyimpan semua file gambar, C:/website/gambar. Kegunakan dari sub direktori
khusus gambar tersebut adalah untuk memudahkan Anda dalam memilih dan
memilah file html dan gambar. Akan terasa lebih bermanfaat jika file html Anda
sangat banyak dan tentunya file gambar Anda akan banyak pula.
1. Klik simbol
pada kumpulan object
2. Pilih gambar yang akan dimasukan
3. Pastikan gambar yang Anda pilih berada dalam satu direktori.
Bila file belum Anda copy di root folder site Anda, gambar tidak
akan bisa di upload ke server, walaupun gambar nampak di layar
monitor DreamWeaver Anda.
Bila file diluar root folder Anda, akan muncul dialog seperti
dibawah ini:
| Page 6 |
Klik Yes: DreamWeaver akan mengcopy file di root folder site
Anda.
4. Gunakan propertie untuk meletakkan gambar di tengah (loihat
gbr. 2.1)
2.5. Membuat Hyperlinks
Kalau Anda mempunyai lebih dari satu file html maka Anda tentu harus
menggunakan link. Link adalah salah satu tag (perintah) dalam html yang
berfungsi untuk menghubungkan dengan file html atau program yang lain. Sama
seperti waktu akan memasukkan gambar, Anda usahakan berkerja dalam satu
root folder.
Anda dapat membuat link:
- dengan teks: link teks adalah link yang diakses dengan menekan teks yang
dipilih.
- dengan gambar: link gambar adalah link yang diakses dengan menekan gambar
tertentu yang dipilih.
Dalam workshop ini, Anda akan membuat link teks “Enter”:
1. Sorot teks „Enter“
2. Isi propertie dengan ketentuan sbb.:
Keterangan:
- Link = frame.htm: Dengan menekan text Enter, user akan
mendapatkan halaman kedua yaitu halaman frame.htm. Anda
bisa mengetiknya, atau browse pada simbol disampingnya.
Mengenai halaman ini akan dibicarakan di bab berikutnya.
- Target = _parent: halaman baru akan muncul pada window
yang sama
- Target = _blank: halaman baru akan muncul pada window baru
2.6. Menentukan page properties
Page Properties mendefinisikan ketentuan-ketentuan halaman, seperti batas
kiri, kanan atas bawah, judul halaman, dan gambar background:
1. Klik Modify > Page Properties
2. Beri ketentuan seperti berikut:
| Page 7 |
- Margin: batas tepi diberikan 0, berarti tanpa tepi.
- Link dan active Links: diberi warna #FFCCOO (kuning)
- Visited Link: links yang sudah dikunjungi berubah warna menjadi #3366CC
2.7. Kontrol tampilan di browser
Walaupun Dreamweaver adalah suatu WYSIWYG-Editor tetap saja Anda harus
mengkontrol tampilan Website di Browser.
1. Pastikan Anda telah men-save html-file Anda.
2. Klik simbol
. Dreamweaver akan menampilkan automatis
halaman yang Anda buat di browser.
Perhatikan tampilan Anda di Browser Internet-Explorer (IE) belum tentu sama di
Browser Netscape!
Bila Anda melakukan perubahan pada html-file Anda (di Dreamweaver-Editor)
tapi tampilan di Browser tidak berubah, pastikan:
1. Anda telah men-save html-file Anda di Dreamweaver.
2. klik refresh
Selamat Anda telah berhasil membuat halaman pertama!
Sebuah website tentunya tidak hanya terdiri dari satu halaman. Berikutnya Anda
akan membuat halaman kedua. Ikuti step berikutnya.
| Page 8 |
3. BEKERJA DENGAN FRAME
Masih ingat? Jika user klik “Enter” pada halaman index maka akan muncul
halaman kedua.
Bila Anda mengikuti petunjuk step by step bab ini, Anda akan membuat halaman
seperti di bawah ini:
Gbr 3.1: Halaman 2
Halaman diatas sebetulnya menggunakan Frame (kerangka) yang terdiri dari tiga
html-file, seperti yang tertera pada gambar 3.2:
- Top: berisi file top.htm,
- Left: berisi file left.htm,
- Content: berubah-ubah, berisi file bab1_1.htm atau bab2_1.htm
Dengan Frame Anda bisa mendapatkan seperti ini:
- Bila Anda klik Bab 1 , maka akan muncul bab 1 di bagian content.
- Sedangkan bila Anda klik Bab 2, bab 1 akan berganti bab 2 di bagian
content.
| Page 9 |
Gbr 3.2: Frame yang terdiri dari 3 file
3.1 Menyiapkan file untuk dimasukan ke frame
Sebelum membuat dan mengisi Frame siapkan dulu file yang diperlukan:
- top.htm
- content.htm
- left.htm
File Bab1.htm /Bab2.htm
1. Insert text (copy paste misalnya) untuk file bab1
2. Ubah penampilan text dengan properties
3. save as bab1.htm misalnya.
Dengan cara yang sama, Anda membuat halaman bab2.htm
File left.htm
1. klik file > new, category basic Page
2. insert table:
| Page 10 |
3. Ubah lebar kolom pertama dengan menggunakan layar
propertie. Sorot kolom pertama, masukan di propertie: w=20
4. Isi tabel dengan text home, bab 1, bab 2 dan masukan
nav_arrow.gif (panah) pada kolom pertama
5. pastikan Anda membuat tabel berisi text dan gambar seperti
dibawah ini:
6. Tentukan links Home = index, Bab 1 = bab1.htm, bab2 =
bab2.htm.
7. Tentukan warna background dan margin halaman.
7. save as left.htm
File Top.htm
1. insert grafik workshop.gif
2. Tentukan margin halaman top.htm dengan Left , Top Margin =
10 misalnya.
3. save as top.htm
80 pixel
20 pixel
| Page 11 |
3.2. Cara membuat frame
Tidak setiap frame mempunyai kerangka seperti gambar 3.2. Anda mempunyai
pilihan membuat frame seperti di bawah ini misalnya:
Untuk keperluan Workshop kita lakukan langkah-langkah seperti dibawah:
1. Klik file > new, category frameset
2. Pilih bentuk frame fixed left, nested top:
3. beri nama frame misalnya frame.htm: save frameset as…
3.3. Mengisi frame
1. Letakkan cursor pada frame bagian atas.
2. Klik file > open in Frame > pilih top.htm
Dengan cara yang sama Anda dapat mengisi kerangka bagian kiri
dan tengah.
3.4. Mengubah frame
Anda dapat dengan mudah memberi nama, merubah file atau lebar kerangka
bagian atas, kanan dan content. Gunakan layar properties
Tag Technorati: {grup-tag}Dreamweaver Tutorial
No comments:
Post a Comment