dreamwaver

Student Guide Series: Macromedia Dreamweaver 8
2
1.1 Apa Itu Dreamweaver 8?
Macromedia Dreamweaver 8, atau biasa disebut “Dreamweaver 8”,
adalah sebuah perangkat lunak aplikasi untuk mendesain dan membuat
halaman web. Dengan menggunakan Dreamweaver 8, ketika
membuat sebuah halaman web, Anda tidak perlu lagi mengetik kodekode
HTML atau kode-kode lainnya secara manual. Anda cukup
melakukan klik beberapa kali, maka simsalabin, halaman web yang
Anda inginkan sudah jadi.
Ketika Anda mempelajari buku SGS Pemrograman Web dengan
HTML, CSS, dan JavaScript, Anda harus menuliskan beberapa baris
kode HTML yang panjang, hanya untuk sekadar membuat sebuah
Tabel. Namun, dengan Dreamweaver 8, Anda dapat membuat tabel
hanya dengan melakukan dua kali klik saja. Dreamweaver 8 akan
menciptakan kode-kode HTML yang sesuai untuk membuat tabel yang
Anda inginkan tersebut.
Selain HTML, Dreamweaver 8 juga mendukung CSS, JavaScript, PHP,
ASP, dan bahasa pemrograman lainnya untuk membuat web. Hal ini
akan sangat menguntungkan Anda. Sebagai contoh, jika dahulu Anda
harus mengetikkan kode-kode CSS untuk membuat Style tertentu,
maka dengan Dreamweaver 8, Anda cukup melakukan klik beberapa
kali saja.
Buku ini akan menuntun Anda mempelajari bagaimana menggunakan
Dreamweaver 8 dalam membuat dan mendesain halaman web. Bagi
para pembaca yang pernah mempelajari buku SGS Pemrograman
Web dengan HTML, CSS, dan JavaScript, akan menjadi nilai
tambah tersendiri bagi Anda karena akan membuat Anda lebih mudah
memahami kode-kode HTML, CSS, atau kode lainnya yang muncul.
Dreamweaver 8 adalah versi terbaru dari keluarga Dreamweaver.
Versi pertamanya sendiri diluncurkan sekitar tahun 1994 oleh
Macromedia Inc. Dalam versi terbaru ini, banyak sekali fasilitas baru
yang ditambahkan. Contohnya, Anda akan dapat membuat dan
menggunakan Style dalam CSS dengan mudah dan fleksibel. Panel
untuk pengolahan CSS juga sudah diperbarui dan lebih mudah digunakan.
Dreamweaver 8 juga menyediakan beberapa template haModul
1: Mengenal Macromedia Dreamweaver 8
3
laman web baru, termasuk fasilitas Starter Pages. Akhirnya, selamat
memulai mempelajari Dreamweaver 8.
1.2 Antarmuka Dreamweaver 8
Anda dapat mengklik Start > All Programs > Macromedia >
Macromedia Dreamweaver 8 untuk mulai menjalankan
Dreamweaver 8. Lihat contohnya pada gambar di bawah ini.
Jika Anda menjalankan Dreamweaver 8 untuk pertama kali, Anda
akan menemui jendela Workspace Layout seperti di bawah ini. Pada
jendela tersebut, Anda dapat memilih Workspace Layout atau
susunan antarmuka Dreamweaver 8 yang diinginkan.
Ada dua susunan antarmuka yang dapat dipilih, yaitu Designer atau
Coder. Pilihan Designer biasanya dipilih oleh para web designer.
Sedangkan pilihan Coder umumnya dipilih oleh para pembuat kode
program atau web programmer.
Kali ini, Anda klik saja opsi Designer, kemudian klik tombol OK.
Sehingga akan muncul jendela Start Page seperti gambar selanjutnya.
Student Guide Series: Macromedia Dreamweaver 8

4
Jendela Start Page akan selalu muncul ketika Anda menjalankan
Dreamweaver 8. Jendela ini menyediakan berbagai macam fasilitas,
misalnya fasilitas untuk membuka file yang pernah dibuat, fasilitas
untuk membuat file baru, fasilitas untuk membuat halaman web
berdasarkan template yang ada, dan lain-lain.
Modul 1: Mengenal Macromedia Dreamweaver 8
5
Klik kotak ceklist Don’t show again agar
jendela Start Page tidak muncul lagi setiap Anda menjalankan
Dreamweaver 8. Kemudian jika muncul jendela konfirmasi seperti di
bawah ini, klik saja tombol OK.
Selanjutnya, kali ini klik saja pilihan HTML pada bagian Create New.
Sehingga muncul susunan antarmuka Dreamweaver 8, berikut ini
penjelasan singkatnya.
Document Window adalah bagian yang merupakan area kerja
Anda. Di sinilah proses mendesain dan membuat halaman web Anda
lakukan. Ada 3 tampilan Document Window, yaitu Code View,
Code and Design View, dan Design View. Oleh karena di awal
tadi Anda memilih susunan antarmuka Designer, maka yang akan
ditampilkan adalah Design View. Anda dapat mengubah tampilan
Document Window dengan cara mengklik tombol-tombol berikut
pada bagian Document Toolbar.
Document Toolbar memiliki berbagai macam tombol yang dapat
digunakan untuk mengatur tampilan Document Window.
Student Guide Series: Macromedia Dreamweaver 8
6
Insert Bar digunakan untuk memasukkan atau membuat berbagai
macam objek ke dalam halaman web yang sedang Anda buat pada
Document Window.
Menu Bar berisi berbagai macam menu untuk mengatur halaman
web yang sedang Anda buat. Misalnya menu File, Edit, View, dan
lain-lain.
Property Inspector berisi berbagai macam atribut dari elemen yang
sedang terpilih dalam Document Window. Misalkan Anda sedang
mengklik sebuah tabel pada bagian Document Window, maka
Property Inspector akan menampilkan berbagai macam atribut dari
tabel tersebut. Anda juga dapat mengubah nilai-nilai atributnya pada
bagian ini.
Insert Bar Document Toolbar
Document Window
Panel Groups
Property Inspector
Menu Bar
Modul 1: Mengenal Macromedia Dreamweaver 8
7
Panel Groups berisi berbagai macam panel. Setiap panel digunakan
untuk mengatur hal-hal yang spesifik. Misalkan panel CSS digunakan
untuk mengatur CSS. Panel Files digunakan untuk mengatur file-file,
dan lain sebagainya. Klik tombol panah kecil di pojok kiri atas sebuah
panel untuk membuka atau menutup panel tersebut.
Sebuah panel juga dapat dipisahkan dengan cara men-drag panel
tersebut. Contohnya seperti gambar di bawah ini, panel CSS dipisahkan
dari yang lainnya.
Klik menu Window > Workspace Layout > Designer untuk
mengatur susunan antarmuka kembali seperti semula.
Drag bagian
yang ditunjuk
Student Guide Series: Macromedia Dreamweaver 8
8
1.3 Membuat Situs Web
Situs web berbeda dengan halaman web. Sebuah situs web (web site)
dapat terdiri atas beberapa halaman web (web page). Andaikan Anda
ingin membuat situs web pribadi, maka situs web tersebut dapat
berisi beberapa buah halaman web, yaitu halaman web yang berisi
profil Anda, halaman web yang berisi foto-foto Anda, atau halaman
web yang berisi cita-cita Anda.
Dapat juga dikatakan bahwa beberapa halaman web dapat dikelola
menjadi sebuah situs web. Seorang pembuat situs web, biasanya
membuatnya terlebih dahulu di komputer, kemudian setelah selesai
barulah situs web tersebut dipublikasi ke Internet.
Modul 1: Mengenal Macromedia Dreamweaver 8
9
1
2
3
Kali ini, kita akan mencoba membuat sebuah situs web. Nantinya kita
dapat mengisi dan melengkapi situs web tersebut dengan berbagai
macam halaman web.
Untuk membuat situs web, lakukanlah langkah-langkah berikut:
Jalankan Macromedia Dreamweaver 8.
Klik menu Site > New Site....
Ketika muncul jendela seperti di bawah ini, ketik nama situs
web yang ingin Anda buat pada kotak isian What would
you like to name your site?. Misalkan Anda ketik saja
SGSDreamweaver8. Kemudian tekan tombol Next.
Student Guide Series: Macromedia Dreamweaver 8
10
4
5
Kemudian ketika muncul jendela seperti di bawah ini, pilih
saja opsi No, I do not want to use a server technology.
Sebab, kali ini kita belum ingin menggunakan bahasa
pemrograman yang memanfaatkan teknologi web server
seperti PHP atau ASP. Kita hanya ingin mencoba membuat
situs web sederhana saja. Kemudian klik tomboll Next.
Ketika muncul jendela seperti di bawah ini, pilih opsi Edit
local copies on my machine, then upload to server
when ready (recomended). Perhatikan isi kotak yang
dilingkari. Pada kotak tersebut tertulis letak dan nama folder
yang digunakan untuk menyimpan situs web Anda. Lalu klik
tombol Next.
Modul 1: Mengenal Macromedia Dreamweaver 8
11
6
Ketika muncul jendela seperti di bawah ini, pilih None pada
kotak pilihan yang disediakan. Kemudian klik tombol Next.
Student Guide Series: Macromedia Dreamweaver 8
12
7
Kemudian klik tombol Done. Berarti Anda telah berhasil
membuat sebuah situs web bernama SGSDreamweaver8.
Perhatikanlah bahwa situs web tersebut muncul di dalam
panel Files.
Modul 1: Mengenal Macromedia Dreamweaver 8
13
1.4 Membuat Halaman Web Pertama
Setalah menyiapkan situs web-nya, selanjutnya Anda dapat melengkapinya
dengan beberapa halaman web. Kali ini, kita akan mencoba
Student Guide Series: Macromedia Dreamweaver 8
14
1
2
3
membuat sebuah halaman web sederhana dalam situs web yang telah
dibuat. Prosesnya sangat mudah, lakukanlah langkah-langkah berikut:
Jalankan Macromedia Dreamweaver 8.
Klik menu File > New....
Ketika muncul jendela New Document seperti di bawah
ini, klik tab General, kemudian klik pilihan Basic Page
pada kotak pilihan Category:. Salanjutnya, pilih HTML
pada kotak pilihan Basic Page:. Lalu klik tombol Create.
Modul 1: Mengenal Macromedia Dreamweaver 8
15
4
5
6
Klik tombol Split dalam Document Toolbar, untuk mengubah
tampilan Document Window ke dalam bentuk Code
and Design View.
Ketik kalimat Selamat Belajar Dreamweaver 8 dalam
bagian Design. Perhatikan perubahan yang terjadi pada
bagian Code. Lihat gambar di bawah ini.
Blok tulisan yang baru saja Anda ketik tersebut pada bagian
Design. Kemudian aturlah beberapa atribut pada bagian
Property Inspector seperti di bawah ini. Ubah atau klik
bagian-bagian yang dilingkari.
Bagian
Code
Bagian
Design
Student Guide Series: Macromedia Dreamweaver 8
16
7
Selama Anda mengatur nilai atribut tertentu, amati perubahan
yang terjadi pada bagian Code. Akan terlihat bahwa
Dreamweaver 8 secara otomatis membuatkan kode-kode
HTML yang sesuai dengan perubahan yang Anda lakukan.
Anda tidak perlu lagi mengetiknya secara manual. Mudah
bukan?
Klik menu File > Save As..., untuk menyimpan halaman
web tersebut.
Modul 1: Mengenal Macromedia Dreamweaver 8
17
8
10
9
Ketika muncul jendela Save As. Ketik contoh1 pada kotak
isian File name. Kemudian klik tombol Save. Maka
halaman web tersebut akan tersimpan dengan nama
contoh1.html.
Perhatikan isi panel Files. Akan terlihat bahwa sudah
tersedia file baru bernama contoh1.html dalam situs web
Anda.
Tekan tombol F12 pada keyboard, untuk melihat preview
halaman web tersebut di browser (misalnya di Internet
Explorer).
Student Guide Series: Macromedia Dreamweaver 8
18
1
2
3
4
Kerjakan soal di bawah ini untuk lebih menguasai materi yang sudah
diberikan:
Jalankan Dreamweaver 8, kemudian kenali dan tunjukkan
bagian-bagian berikut:
- Document Window
- Document Toolbar
- Panel CSS
- Panel Files
- Insert Bar
- Menu Bar
- Propery Inspector
Klik menu Window > Workspace Layout > Coder, untuk
mengubah susunan antarmuka Dreamweaver 8. Amati
perbedaannya dengan susunan Designer.
Klik menu Window > Behaviours, untuk memunculkan
panel Behaviours. Cobalah untuk memunculkan panel-panel
yang lainnya.
Cobalah untuk memisahkan beberapa panel dan menggabungkannya
kembali.
Modul 1: Mengenal Macromedia Dreamweaver 8
19
5
Cobalah untuk membuat sebuah halaman web sederhana
seperti di bawah ini. Simpan dengan nama latihan1.html.