Pertemuan 1 Pengenalan Dreamweaver CS 6 1

Praktikum

1
Pengenalan Dreamweaver CS 6
Tujuan

1. Praktikan mengenal Aplikasi Web Editor

2. Praktikan mengenal Dreamweaver dan Perkembangannya
3. Praktikan mengetahui bagian-bagian ruang lingkup Dreamweaver CS 6
4. Praktikan mampu melakukan pengaturan site

Teori

1. Sekilas tentang Dreamweaver

Dreamweaver merupakan salah satu program aplikasi yang digunakan untuk mengolah halaman
situs (aplikasi web editor). Aplikasi ini lebih banyak digunakan oleh para pengembang web karena
memiliki banyak kelebihan. Salah satu kelebihan yang ditawarkan adalah konsep WYSIWYG
(What You See Is What You Get). Dahulu aplikasi ini lebih dikenal dengan sebutan Macromedia
Dreamweaver, tetapi sekarang telah berganti menjadi Adobe Dreamweaver. Berikut adalah tabel
perkembangan Dreamweaver :
Perusahaa Versi Nama Lain Tanggal Rilis Keterangan
n
1.0 Desember 1997 Versi pertama, hanya untuk Mac OS
1.0
1.2 Maret 1998 Versi pertama untuk Windows
2.0 2.0 Desember 1998
3.0 Desember 1999
3.0
UltraDev 1.0 Juni 1999
Macromedia
4.0 Desember 2000
4.0
UltraDev 4.0 Desember 2000
6.0 MX 29 Mei 2002
7.0 MX 2004 10 September 2003
8.0 8.0 13 September 2005 Versi terakhir Macromedia
9.0 CS 3 16 April 2007
10.0 CS 4 23 September 2008
11.0 CS 5 12 April 2010
11.5 CS 5.5 12 April 2011 Support HTML 5
Adobe 12.0 CS 6 21 April 2012
13.0 Creative Cloud 17 Juni 2013
14.0 18 Juni 2014
CC 2014
14.1 6 Oktober 2014
16.0 CC 2015 16 Juni 2016

2. Macromedia Dreamweaver CS 6
Macromedia Dreamweaver CS 6 mendukung format penulisan untuk HTML, ColdFusion, PHP,
ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, JSP dan CSS. Dengan memilih
salah satu jenis dokumen yang akan dirancang, maka dreamweaver secara otomatis akan
menyesuaikan format dokumen yang dipilih. Misalnya kita memilih jenis dokumen PHP, maka
format dokumennya adalah .php (dot php).

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 2

Gambar 1.1 Memilih jenis dokumen

3. Jendela Kerja Dreamweaver CS 6

Menu Bar Document Toolbar

Panel Groups

Document Windows

Property Inspector
Tag Selector
Gambar 1.2 Jendela kerja Dreamweaver CS 6

Keterangan :
a. Menu bar, merupakan menu utama dari aplikasi Dreamweaver CS 6
b. Document toolbar, merupakan toolbar untuk mengatur jendela kerja (document window).
c. Document window, merupakan sarana/tempat untuk merancang halaman situs.
d. Panel Groups, merupakan kumpulan dari panel-panel pendukung dreamweaver. Terdapat
beberapa panel seperti: Design, Code, Application, Tag Inspector dan panel Files.
e. Tag Selector, menampilkan tag yang sedang aktif (digunakan). Dapat juga digunakan untuk
memilih tag yang akan digunakan.
f. Property Inspector, jendela properties untuk mengatur objek-objek di dalam lembar kerja.

4. Mengatur Panel dan Toolbar

Panel-panel dan toolbar pada lembar kerja dreamweaver dapat disembunyikan dan ditampilkan
sesuai dengan kebutuhan. Untuk menampilkan/menyembunyikan semua panel dan toolbar, klik
menu window – hide / show panels (f4).

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 3

Gambar 1.3 show/hide panels

5. Mengatur Jendela Kerja

Jendela kerja (documents window) dapat diatur sesuai kebutuhan. Untuk mengatur jendela kerja
dapat memanfaatkan fasilitas yang terdapat pada document toolbar.

Gambar 1.5 document toolbar

Keterangan :
a. Tombol Code, Split dan Design , digunakan untuk mengatur tampilan halaman
secara koding, setengah koding, ataupun secara desain.
b. Tombol Live Data View , digunakan untuk melihat tampilan data secara langsung
(memerlukan koneksi ke server dan database).
c. Kotak Title , digunakan untuk mengatur judul dari halaman situs.
d. Tombol Browser Check Errors , digunakan untuk memeriksa kesalahan untuk browser.
e. Tombol File Management , digunakan untuk manajemen file website.
f. Tombol Preview/debug in browser , digunakan untuk menampilkan situs ke dalam web
browser.
g. Tombol Refresh design view , digunakan untuk memperbarui halaman pada modus desain.
h. Tombol View options , digunakan untuk menampilkan/menyembunyikan garis bantu untuk
halaman.

6. Page properties
Page properties merupakan jendela yang digunakan untuk pengaturan standart halaman yang
sedang dirancang. Untuk mengakses page properties dapat melalui menu Modify – Page
Properties… atau dengan menekan tombol Page Properties… pada jendela property inspector.

Gambar 1.6 Mengakses page properties

Maka akan muncul kotak dialog Page properties :

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 4

Gambar 1.7 kotak dialog Page properties

Terdapat beberapa kategori pada page properties yaitu :
a. Appearance; untuk pengaturan tampilan, terdapat beberapa pengaturan yaitu :
- Page font; mengatur jenis huruf yang digunakan pada halaman web
- Size; mengatur ukuran huruf yang digunakan pada halaman web
- Text color; mengatur warna huruf yang digunakan pada halaman web
- Background color; mengatur warna latar belakang halaman
- Background image; mengatur latar belakang halaman berupa gambar
- Left margin; mengatur batas tepi kiri
- Right margin; mengatur batas tepi kanan
- Top margin; mengatur batas tepi atas
- Bottom margin; mengatur batas tepi bawah
b. Links ; untuk pengaturan link (hyperlink) :
- Link font; mengatur huruf yang digunakan pada link
- Size; mengatur ukuran huruf pada link
- Link color; mengatur warna teks yang diberikan link
- Rollover links; mengatur warna teks link ketika dilalui oleh pointer mouse
- Visited links; mengatur warna teks link yang telah dikunjungi
- Active links; mengatur warna teks link yang sedang aktif
- Underline style; mengatur garis bawah pada link
c. Headings ; mengatur ukuran huruf untuk format heading (<h1>, <h2>, <h3>, dan seterusnya)
d. Title / Encoding ; mengatur judul halaman yang sedang dirancang
e. Tracing Image ; mengatur gambar yang ditampilkan sementara jika koneksi lambat.

7. Defenisi Situs (Site Defenition)

Defenisi situs (site defenition) digunakan untuk membuat profil yang membedakan antara satu situs
dengan situs yang lain yang dikerjakan dengan Dreamweaver. Informasi-informasi yang ada dalam
site definition ini memungkinkan dreamweaver untuk mengakses file-file yang berhubungan
dengan situs. Dengan adanya defenisi situs tersebut, maka proses pengerjaan sebuah website tidak
akan mengganggu proses website yang lain.
Tujuan dari defenisi situs (site definition) adalah agar file-file dan folder yang berhubungan dengan
website yang sedang dibangun terstruktur. Letak file dan folder yang digunakan pada website tidak
berantakan, karena telah diatur sedemikian rupa sehingga tingkat error pada website lebih minim.

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 5

8. Manage Site
Untuk mengakses defenisi situs, klik menu Site – Manage site… maka akan ditampilkan kotak
dialog manage sites.

Gambar 1.8 Manage Sites

Terdapat beberapa tombol pada kotak dialog manage site :

- New…; digunakan untuk membuat site baru
- Edit…; digunakan untuk merubah site yang sudah ada
- Duplicate…; digunakan untuk menggandakan site yang sudah ada
- Remove; digunakan untuk menghapus site
- Export…; digunakan untuk meng-eksport pengaturan site
- Import…; digunakan untuk meng-import pengaturan site
- Help; digunakan untuk menampilkan kotak bantuan dari dreamweaver
- Done; digunakan untuk mengakhiri pilihan sekaligus menggunakan site yang telah dipilih.
9. Membuat site baru
Untuk membuat site baru, ikuti langkah-langkah berikut :
- Pada kotak dialog manage site, klik tombol new-sites

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 6

Gambar 1.9 new site

Lalu pilih Side Menu SITE, dan lakukan pengaturan site seperti berikut :

Gambar 1.10 Pengaturan site

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 7

Lalu pilih Side Menu SERVER, dan Add New Server + lakukan pengaturan site seperti
berikut :

Gambar 1.11 Pengaturan server

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 8

Gambar 1.12 Pengaturan Server Tab Basic dan Tab Advanced

Setelah selesai tekan Button Save. Maka akan muncul sebuat site server pada jendela window
servers, centang bagian Testing dan Kemudian Save

Setelah selesai membuat site baru, berikutnya adalah memilih site yang baru dibuat tadi (jika
site sudah ada, tinggal memilih sitenya saja), kemudian klik done.

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 9

Gambar 1.13 Memilih site

Jika pengaturan site telah dilakukan, perhatikan Panel Files. Pada panel ini akan ditampilkan
file dan folder yang berhubungan dengan website yang sedang dibangun.

Gambar 1.14 Tampilan panel files

Usahakan selalu melakukan pengaturan site sebelum bekerja dengan Dreamweaver.

10. Export dan Import Site

Ada kalanya website yang sedang dalam proses pengerjaan, tidak selalu dikerjakan di dalam satu
komputer. Sering kali kita menggunakan komputer lain (mungkin komputer teman) untuk
mengerjakan website tersebut. Dengan memanfaatkan media penyimpanan eksternal (seperti
flashdisk atau yang lainnya), kita dapat membawa proyek website tersebut kemana-mana dan dapat
mengerjakannya di komputer manapun asal ada aplikasi Dreamweaver. Karena situasi seperti
inilah kita perlu untuk melakukan export dan import site, agar kita tidak selalu membuat site baru
jika mengerjakannya.
Berikut adalah langkah-langkah untuk export site :
- Klik menu site - manage site

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 10

- Pilih site yang akan di-export lalu klik tombol export…

Gambar 1.15 export site

- Pilih lokasi penyimpanan dan nama file export. Biasanya dreamweaver akan memberi nama
file sesuai dengan nama site tersebut dan lokasi penyimpanannya adalah root folder site
tersebut. Disarankan untuk mengikuti aturan standar tersebut dan langsung melakukan
penyimpanan (boleh juga mengubah peraturannya jika memang perlu). Ingat, ekstensi untuk
file site definition adalah .ste (dot ste) dan ini tidak boleh dirubah.

Lokasi penyimpanan

Nama file

Gambar 1.16 nama file dan tempat penyimpanan

Untuk meng-import site yang di eksport tersebut, ikuti langkah-langkah berikut :

- Klik menu site - manage site, lalu klik tombol import…

Panduan Web Desain II

Pertemuan 1 Pengenalan Dreamweaver CS 6 11

Gambar 1.17 import site

- Pilih file .ste yang telah di eksport sebelumnya, lalu klik open.

Gambar 1.18 membuka file site defenition

Panduan Web Desain II