Dalam membuat website harus direncanakan terlebih dahulu apa tujuan dari
pembuatan website, informasi-informasi apa yang akan diberikan dan kepada siapa
informasi-informasi tersebut dituju.
Macromedia Dreamweaver adalah salah satu program pembuatan website yang
mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk
mendesain website yang lebih kreatif dan membuat sebuah site yang komplit. Untuk
mendapatkan hasil lebih bagus, harus didesain dan direncanakan lebih dahulu tiap-tiap
halaman site yang ada.
Rencana dan desain sebuah site
Ketika memulai merencanakan membuat website, diharapkan melakukannya secara
bertahap dan terencana untuk memastikan situs yang dibuat baik dan berhasil. Walaupun
hanya akan membuat homepage pribadi yang hanya akan dilihat dan dikunjungi oleh
teman dan keluarga. Bagi seorang pengajar situs pribadi bisa digunakan untuk
memberikan informasi dan layanan ajar online untuk siswa .
Menentukan tujuan Membuat Web site
Menentukan tujuan site adalah langkah pertama kali yang harus diambil dalam
pembuatan sebuah website. Tulis semua tujuan dan harapan dari pembuatan website, agar
dapat mengingat saat proses mendesain website. Tujuan-tujuan tersebut akan sangat
membantu agar tetap terfokus dan mempunyai target terhadap website yang diinginkan.
Sebuah website yang memberikan berita-berita dengan subjek tertentu sangat berbeda
dengan website yang menjual produk atau komersial.
Memilih sasaran pengunjung situs
Pelatihan Penyusunan Sumber Belajar Matematika Berbasis Web dengan Menggunakan Perangkat Lunak
Macromedia Dreamweaver bagi Guru Sekolah Menengah di Daerah Istimewa Yogyakarta
Jurusan Pendidikan Matematika FMIPA UNY 8‐9 Agustus 2008
5
Setelah menentukan apa yang diinginkan untuk menyelesaikan website, tentukan
siapa saja atau sasaran pengunjung situs.
MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML
Dreamweaver menawarkan berbagai macam cara untuk membuat suatu Dokumen, yaitu
• membuat baru, dokumen HTML yang kosong;
pilih menu File > New
• membuka dokumen HTML yang sudah ada
Pilih menu File > Open
• jika untuk mempersingkat waktu dapat membuat dokumen baru berdasarkan
template (blangko).
Pilih menu File > New from Template. Akan tampak dialog box, daftar
template-template yang ada (template terlebih dahulu harus dibuat sebelum membuat
dokumen baru berdasarkan template)
Pilih salah satu template. Dokumen baru akan dibuat berdasarkan template
tersebut
.
Menyimpan dokumen :
• Pilih menu File > Save.
• Ketik nama file dan tentukan dimana file tersebut akan disimpan.
Catatan : Dreamweaver akan secara otomatis menyimpan file tersebut dalam bentuk
htm atau html.
• Klik button Save untuk menyimpan file tersebut.
Mengatur document properties
Judul halaman, background image, warna-warna teks dan warna link adalah dasar dari
semua dokumen HTML. Judul halaman merupakan identitas dan nama dokumen.
Background image atau gambar background dari suatu halaman (bisa juga memakai
warna untuk background) diatur untuk keseluruhan tampilan dari dokumen tersebut.
Teks dan warna link membantu pengunjung situs membedakan teks mana yang bisa
link/masuk ke halaman lain, dan juga bisa membedakan dari warnanya apakah link
tersebut sudah dikunjungi atau belum.
Merubah judul halaman
Judul dari halaman HTML memberitahu pengunjung site apa yang sedang pengunjung
buka, yang dapat dilihat pada menu bar windows dibawah.
.Untuk mengganti judul halaman :
Langkah-langkah :
• Pilih menu Modify > Page Properties.
• Klik kursor anda pada daerah kosong di halaman web. Lalu pilih Page Properties
dengan mengklik kanan mouse anda. Masukkan judul untuk halaman tersebut
pada title text box.
Mengenal Lingkungan Kerja Dreamweaver MX
Area kerja dreamweaverMX akan tampak seperti di bawah ini
• Tampilan di atas adalah tampilan dimana dokumen yang akan dibuat dan diedit.
• Pada Insert panel terdapat icon-icon yang dapat diklik untuk memasukkan object
pada dokumen dan untuk mengedit pembuatan halaman web.
• Pada property inspector ditampilkan properti-properti dari object atau text yang
dipilih dan dapat dimodifikasi (contoh = jenis text, ukuran text, dan sebagainya)
• Untuk membuka tampilan windows, inspector dan panel-panel, gunakan menu
Window. Beri tanda check untuk memilih tampilan mana yang diperlukan pada
tampilan window.
• Pada baris judul dari tampilan document window ditunjukkan judul halaman,
nama folder dan nama file ada dalam tanda kurung.
• Status bar, didapat pada bagian paling bawah document window, menunjukkan
informasi-informasi tentang dokumen yang sedang dibuat.
• Pada tag selector menampilkan HTML control pada text atau object yang dipilih.
Klik salah satu text atau object maka pada tag selector akan tampak HTML
control, contoh jika diklik pada dokumen window, pada tag selector akan tampak
tulisan <body> disini menunjukkan sedang bekerja pada body dari dokumen
secara HTML.• Pada Window size pop-up menu dapat dilihat dan mengedit ukuran window yang
ditampilkan sesuai keinginan
• .Disebelah kanan menu window size pop-up dapat dilihat ukuran besarnya file
dokumen dan waktu yang dibutuhkan untuk download file pada tampilan window.
Catatan : Pada ukuran window menggambarkan ukuran dimensi pada browser. Untuk
contoh, gunakan ukuran “536 x 196 (640 x 480, default)” jika pengunjung situs
menggunakan Microsoft Internet Explorer atau Netscape Navigator, maka
konfigurasi tampilannya adalah 640 x 480.
OBJECT PANEL
Pada Object panel terdapat button-button untuk membuat dan memasukkan object
seperti tabel, layer dan images. Untuk menampilkan dan menyembunyikan Objects panel,
pilih menu Window > Objects.
Memasukkan sebuah Object :
Klik icon button pada Object panel, tergantung pada object yang dipilih. Setelah diklik
salah satu button maka akan tampil Dialog Box yang harus diisi untuk memasukkan
object tersebut. Object panel terdiri dari 7 kategori : Character, Common, Form,
Frames, Head, Invisibles dan Special.
Semua kategori tersebut menampilkan button untuk merubah tampilan : Standart dan
Layout. Untuk saat ini kita hanya akan membicarakan kategori Common atau kategori
yang umum dan biasa dipakai dan kategori Character.
Memasukkan Image atau gambar
Ada 2 cara untuk memasukkan image pada Dreamweaver , dengan menggunakan main
menu dan dengan menggunakan Object panel.
1. Klik kursor pada tempat dimana ingin dimasukkan image. (coba diklik tempat
paling atas pada dokumen)
2. Pilih menu Insert > Image
3. Tampak dialog box untuk memilih file image pilih image yang akan ditampilkan.
4. Klik select, maka image tersebut akan masuk pada dokumen.
Jika menggunakan cara dengan penggunaan Object panel
Klik button insert image pada Object panel, maka akan tampak tampilan dialog
box yang sama, lakukan seperti langkah sebelumnya.
Membuat rollover image
Rollover image adalah suatu image yang akan berubah ketika pointer dari mouse diarahkan
pada image tersebut.
Rolover image terdiri dari 2 gambar atau image: image pertama akan tampak pada saat
pertama kali loading browser, dan image kedua akan tampak ketika pointer diarahkan pada
image tersebut. Pastikan kedua image tersebut mempunyai ukuran yang sama, bila tidak
sama maka tampilan site tampak tidak teratur.
1. Klik button image rollover pada object panel
2. Maka akan keluar dialog box yang harus diisi nama rollover image tersebut,
memilih image pertama dan memilih rollover image atau image kedua , alamat url
atau link yang dituju bila image tersebut diklik.
3. Klik option Preload image rollover, untuk memastikan image rollover tersebut
jalan bila dibrowse.
4. Klik OK untuk menutup dialog box tersebut bila sudah selesai.
Memasukkan Flash Button
Pada Macromedia Dreamweaver dapat langsung memasukkan Flash Button
yang sangat dinamis dan animasi dalam berbagai macam bentuk.
• Klik menu flash button pada Object panel.
Maka akan keluar sebuah dialog box, yang harus diisi, dengan memilih bentuk-bentuk
button, menulis teks dan jenis hingga ukuran teks yang akan ditampilkan pada button
tersebut, memasukkan alamat halaman lain (link).
Tidak ada komentar:
Posting Komentar