SESI 1

Mengenal Adobe Dreamweaver CS6

Dalam membuat sebuah website yang berkualitas tentunya diperlukan rancangan
desain yang baik dan benar. Hal ini menjadi penting karena proses merancang desain
merupakan salah satu langkah awal untul membuat website secara keseluruhan. Dasar dari
pembuatan desain web adalah menggunakan HTML (HyperText Markup Language) dengan
bahasa dan sintaks pemrograman yang mungkin tidak semua orang dapat dipelajari engan
mudah. Untuk memberikan kemudahan pada user dalam membuat desain website dapat
dilakukan perancangan secara visual dengan bantuan web editor.

Gambar 1.1 Logo Adobe Dreamweaver CS6

Salah satu aplikasi yang dapat anda manfaatkan untuk melakukan perancangan desain web
secara visual atau aplikasi web editor adalah Adobe Dreamweaver. Aplikasi ini secara umum
sangat populer dan banyak digunakan oleh para desainer web. Dengan versi terbarunya, yaitu
Adobe Dreamweaver CS6, aplikasi ini menyediakan banyak fasilitas yang akan memudahkan
Anda dalam mendesain dan menghasilkan sebuah website yang interaktif dan profesional.

MENGENAL ADOBE DREAMWEAVER CS6

Adobe Dreamweaver CS6 merupakan versi terbaru dari Adobe Dreamweaver yang
sebelumnya adalah Adobe Dreamweaver CS5. Aplikasi Adobe Dreamweaver CS6
memberikan tampilan yang lebih baik dan tentu saja semakin mudah dalam penggunaannya.
Aplikasi ini mengintegrasikan beragam fitur untuk memenuhi kebutuhan pengembangan
website, termasuk pembuatan halaman web dan pengelolaannya.
Adobe Dreamweaver CS6 menyertakan banyak tool yang berkaitan dengan pengkodean seperti
HTML, CSS, XML, dan pemrograman Client Side, yaitu JavaScript dengan penggunaan yang
sangat mudah dan user friendly. Aplikasi ini juga mendukungpemrograman Script Server Side
seperti PHP, Active Server Page (ASP), ASP.NET, ASP Java Script, ASP VB Script, Cold
Fusion, dan Java Server Page (JSP).
Fasilitas yang ada pada Adobe Dreamweaver CS6 memberikan kemudahan kepada user untuk
melakukan pengeditan karena ditampilkan secara visual. Penambahan desain dan fungsi pada
halaman web tidak harus dituliskan dalam baris kode. Anda tinggal memilih dan menempatkan
komponen web secara langsung dan cepat.
Selain itu, Adobe Dreamweaver CS6 juga dapat meng-import dan menyisipkan image atau
movie yang dibuat dari aplikasi lainnya seperti file flash (.SWF) ataupun FLV.

FITUR BARU ADOBE DREAMWEAVER CS6

Hampir sama dengan versi sebelumnya. Adobe Dreamweaver CS6 memiliki fitur-fitur baru
yang merupakan penyempurnaan dari versi sebelumnya. Fitur-fitur baru yang ditambahkan
sebagai berikut:
 Built-in CMS
Dukungan untuk menciptakan dan pengujian bahan-bahan untuk system manajemen
konten seperti WordPress, Joomla!, dan Drupal.
 Integrasi dengan Adobe Browser Lab
Pemetaan halaman dinamis dan konten lokal dengan melihat beberapa
pandangan,diagnosis, dan perbandingan.
 Petunjuk PHP kelas custom
Tampilan sintaks yang tepat untuk fungsi PHP dimaksudkan mencegah kesalahan
dalam pengkodean.
 Manajemen file yang digunakan
Mengatur berbagaí macam file yang digunakan untuk menyusun halaman web dengan
lebiíh efisien. Fitur ini juga menampilkan semua dokumen yang dihubungkan pada
halaman web sepert CSS, JavaScript, PHP, atau XML dalam satu baris di sebelah atas
pada Dokumen Window.

Gambar 1.2 Related Files

JavaScript frameworks ini meliputi jQuery, Prototype, dan Spry dapat manfaatkan
untuk menciptakan halaman web yang lebih interaktif.
 HTML data sets
Dengan fitur ini, Anda dapat membuat data dalam tabel HTML div tags, atau unordered
list. Caranya adalah pada menu bar pilih Insert→Spry→Spry Data Set.

Gambar 1.3 Pilihan Spry Data Set

  Photoshop Smart Objects Fitur ini memungkinkan Anda dapat melakukan copy paste
file Photoshop (.PSD) ke dalam halaman web pada aplikasi Adobe Dreamweaver CS6
dan langsung mengedit file tersebut sebagai desain interface web.

MENGGUNAKAN ADOBE DREAMWEAVER CS6

Setelah diinstal ke dalam komputer, program Adobe Dreamweaver CS6 siap untuk digunakan.
Untuk menjalankan program Adobe Dreamweaver CS6, Anda dapat melakukan salah satu cara
berikut:
 Klik ganda ikon program Adobe Dreamweaver CS6 yang terdapat pada desktop.

Gambar 1.4 lkon shortcut Adobe Dreamweaver CS6 pada desktop

 Klik tombol Start→All Programs→Adobe Dreamweaver CS6.

MENGENAL STARTER PAGE

Pada saat menjalankan program Adobe Dreamweaver CS6 pertama kali akan muncul tampilan
Starter Page. Bagian atas terdiri dari tiga bagian, yaitu Open a Recent Item, Create New, dan
Top Features (videos). Sedangkan pada bagian bawah terdiri dari Getting Started, New
Features, Resources, dan Dreamweaver Exchange.

Gambar 1.5 Tampilan Starter Page

Berikut penjelasan mengenai menu yang ada pada Starter Page:
 Bagian paling kiri adalah Open a Recent Item, merupakan pilihan untuk membuka file
ataupun recent file yang baru digunakan. Untuk membuka file gunakan tombol Open
pada Starter Page.
 Bagian tengah adalah Create New, digunakan untuk membuat halaman web baru.
Terdapat beberapa macam tipe file untuk format halaman web yang dapat Anda pilih,
seperti:
 HTML (Hypertext Markup Language), merupakan dasar untuk pembuatan
desain web. File HTML berisi instruksi tertentu yang dapat memberikan suatu
format dokumen yang akan ditampilkan pada World Wide Web.
  ColdFusion, merupakan bahasa scripting yang digunakan oleh Adobe
ColdFusion, BlueDragon, dan sebagainya untuk 09 scripting server-side.
 PHP (Hypertext Preprocessor) adalah sebuah bahasa pemrograman yang umum
dipakai untuk scripting serverside. PHP biasanya terpasang pada HTML.
Dengan bahasa pemrograman ini dapat dibuat suatu website yang dinamis.
 CSS (Cascading Style Sheet) adalah bahasa stylesheet yang digunakan untuk
mengatur tampilan halaman web dan ditulis dengan HTML atau XHTML.
Selain itu dapat juga digunakan untuk semua jenis dokumen XML, termasuk
SVG XUL
 JavaScript adalah bahasa scripting yang mempunyai kesamaan dengan
penggunaan sintaks bahasa pemrograman C. Script ini umum digunakan untuk
pengembangan web client-side.
 XML, lengkapnya adalah Extensible Markup Language, menggunakan markup
tags seperti halnya HTML, namun penggunaannya tidak terbatas pada halaman
web saja.
 Dreamweaver Site berfungsi untuk membuat website baru dengan program
Dreamweaver. Bagian paling kanan adalah Top Features (videos), digunakan
untuk membuka beberapa fitur yang telah disediakan melalui internet.

MEMBUKA DOKUMEN WEB

Untuk membuka dokumen web terdapat tiga cara, yaitu menggunakan Starter Page, Menu Bar,
dan Files Panel.
 Menggunakan Starter Page
Starter Page tampil saat pertama masuk ke aplikasi Adobe Dreamweaver CS6. Untuk
membuka dokumen melalui Starter Page caranya sebagai berikut:
1. Pada bagian Open a Recent Item pilih Open.
2. Tentukan letak file atau dokumen yang akan dibuka, misalnya terdapat pada
direktori C:\AppServ\www\tokobukuwahana\index.php, kemudian klik tombol
OK.

Gambar 1.6 Open pada Starter Page

 Gambar 1.7 Menentukan alamat file
 Menggunakan Menu Bar
Untuk membuka dokumen, Anda juga dapat menggunakan menu bar pada Adobe
Dreamweaver CS6, yaitu pilih File→Open.

Gambar 1.8 Pilih Open untuk membuka dokumen

Langkah selanjutnya adalah menentukan direktori file seperti langkah sebelumnya.
 Menggunakan Files Panel
Files Panel terletak di Dreamweaver CS6. Untuk membuka dokumen melalui Files
Panel, gunakan cara sebagai beri kut:
1. Lihat Files Panel di sebelah kanan jendela. Jika Files Panel belum aktif, aktifkan
terlebih dahulu dengan menekan tombol F8 pada keyboard atau melalui menu bar
pilih Window→Files. Selanjutnya tentukan direktori yang akan sebelah kanan
jendela Adobe Anda buka.

Gambar 1.9 Pemilihan direktori pada Files Panel

2. Langkah berikutnya pilih folder yang akan Anda buka, misalnya di
C:\AppServis\www\tokobukuwahana\, kemudian pilih file.
 Gambar 1.10 Pemilihan file

Dengan salah satu cara di atas, akan terbuka file yang Anda inginkan. Berikut contoh halaman
web yang telah dibuka:

Gambar 1.11 File halaman web yang dibuka

MENGENAL AREA KERJA ADOBE DREAMWEAVER CS6

Pada area kerja Adobe Dreamweaver CS6 terdapat berbagai macam fasilitas yang digunakan
untuk melakukan semua hal yang berkaitan dengan aktivitas editing halaman web. Area kerja
yang ada dalam Adobe Dreamweaver CS6 terdiri dar Menu bar, Document Toolbar, Document
Window, Panel Groups, Workspace Switcher, Tag Selector, dan Property Inspector. Secara
umum, tampilan area kerja dapat Anda lihat seperti gambar berikut:

Gambar 1.12 Tampilan area kerja Adobe Dreamweaver CS6

Menu Bar
Menu bar pada Adobe Dreamweaver CS6 terdiri dari menu File, Edit, View, Insert, Modify,
Format, Commands, Site, Window, dan Help. Masing-masing menu mempunyai submenu
sesuai kategorinya dengan fungsi yang berbeda. Misalnya menu bar File berisi perintah-perntah
yang digunakan untuk pengelolaan file dokumen seperti membuka file, membuat file baru,
menyimpan file, dan sebagainya.
Untuk menggunakannya, klik nama menu yang tersedia. Selanjutnya akan tampil submenu atau
perintah di mana beberapa di antaranya memiliki submenu atau perintah lagi yang ditandai
dengan anak panah di sebelah kanan. Untuk mengakses salah satu perintah cukup dengan klik
nama menu yang akan dijalankan.

Document Window
Document Window menampilkan dokumen dari halaman web yang aktif atau dokumen yang
sedang diedit. Pada Document Window terdapat Title Bar yang menampilkan informasi nama
file, fasilitas Zoom, Document Toolbar, dan Tag Selector.

Gambar 1.13 Document Window

Document Toolbar
Document Toolbar berisi tombol-tombol yang digunakan untuk mengatur dengan cepat layar
kerja dokumen pada Dreamweaver, di antaranya Show Code view, Show Code and Design
views, Show Design view, dan Live.

Gambar 1.14 Toolbar untuk Code dan Design View

Show Code View

Tampilan layar Code hanya akan menampilkan kode-kode script halaman web. Di sebelah kiri
layar kerja terdapat Coding tool yang digunakan untuk mengedit kode atau script tersebut.
Untuk mengaktifkannya Anda dapat menggunakan salah satu cara berikut:
 Pada menu bar klik View→Code.
 Pada Document Toolbar, klik ikon Code.
 Gambar 1.15 Tampilan layar Code

Show Design View

Tampilan layar mode Design akan menampilkan dokumen dari halaman web secara grafis atau
visual. Untuk menampilkan Design view, lakukan salah satu cara berikut:
 Pada menu bar klik View Design.
 Pada Document Toolbar klik ikon Design.

Gambar 1.16 Tampilan layar mode Design

Show Code and Design Views

Tampilan layar ini biasanya dikenal dengan mode Split, yaitu menampilkan atau
menggabungkan secara bersamaan tampilan lavar code dan tampilan layar design. Tampilan
layar code akan menampilkan dalam mode teks, kemudian untuk tampilan layar design akan
menampilkan hasilnya.
Untuk menampilkan dalam mode Split, lakukan salah satu cara berikut:
 Pada menu bar klik View→Code and Design.
 Pada Document Toolbar klik ikon Split.

Gambar 1.17 Tampilan layar mode Split

Tag Selector
Tag Selector yang terdapat pada Document Window di bagian bawah sebelah kiri berfungsi
untuk menampilkan tag HTML dari objek yang terseleksi. Klik<body> untuk memilih
keseluruhan elemen dokumen.

Gambar 1.18 Tag Selector

Panel Groups
Panel merupakan salah satu fasilitas yang terdapat pada Adobe Dreamweaver CS6 dan
berfungsi untuk membantu dalam proses editing halaman web. Panel Groups terletak di
sebelah kanan layar kerja dan terdiri dari beberapa panel. Masing-masing panel tersebut
memiliki fungsi yang berbeda-beda. Untuk menampilkan panel klik ganda pada nama panel
tersebut.

Gambar 1.19 Panel Groups

Insert Panel
Mulai versi Dreamweaver CS5, Insert Toolbar digabungkan dalam Panel Groups, berbeda
pada versi sebelumnya yang diletakkan secara terpisah. Insert Panel berfungsi untuk
menyisipkan objek-objek ke dalam halaman web. Pada Insert Panel terdapat beberapa tab, di
antaranya Common, Layout, Forms, Data, Spry, Text, dan Favorites.
Tab Common
Pada tab ini terdapat tool yang digunakan untuk membuat ataupun menyisipkan objek ke
dalam halaman web seperti membuat hyperlink, tabel, gambar, media, dan sebagainya.
Tab Forms
Dengan bentuk form, website dapat dibuat menjadi lebih interaktif karena user dapat
memberikan input kepada sistem atau website menggunakan tool yang ada pada tab Form.
Berikut keterangan fungi tool pada tab Forms :
 Gambar 1.20 Tab Data

Tab Spry
Tab Spry berisi tombol-tombol untuk membuat halaman-halaman Spry, termasuk object data
spry. Spry merupakan library JavaScript yang dapat digunakan untk mendesain halaman
web,seperti membuat menu bar,textarea, text field dan sebagainya dengan hasil yang lebih
menarik.
Gambar 1.21 Tab Spry
 Gambar 1.22 Klik kanan dan pilih Costumize Favorite

2. Pada Available objects pilih tab yang akan dimasukkan kemudian tekan tombol >>
dilanjutkan dengan menekan tombol OK.

Gambar 1.23 Menetukan objek yang akan dimasukkan ke dalam tab favorite

CSS Styles Panel

CSS Styles panel merupakan fasilitas dalam Adobe Dreamweaver CS6 yang berfungsi untuk
mengatur script CSS agar halamn web menjadi lebih menarik. CSS Styles panel terdiri dari
dua mode, yaitu mode All dan mode Current.

Gambar 1.24 Mode All pada CSS Styles panel

 Mode All terdiri dari dua panel, yaitu All Rules dan Properties. Panel All Rules akan
menampilkan list atau daftar style sheet dari dokumen halaman web yang diseleksi.
Sedangkan panel Properties akan menampilkan isi atau atribut dari style sheet yang
diseleksi pada panel All Rules (Gambar 1.30).
 Mode Current terdiri dari tiga panel, yaitu Summary for Selection panel, About panel,
dan Properties panel. Summary for Selection panel akan menampilkan isi dari CSS.
About panel menampilkan informasi lokasi dari script CSS yang diseleksi. Sedangkan
Properties panel akan menampilkan isi atau atribut dari style sheet yang diseleksi.
 Gambar 1.25 Mode Current pada CSS Style Panel

Files Panel
Files panel pada Adobe Dreamweaver CS6 merupakan fasilitas yang berfungsi untuk
mengelola berbagai file dari dokumen web. Anda dapat dengan mudah mengelola berbagai file
tersebut di folder, jaringan komputer, ataupun secara remote.

Gambar 1.26 Files panel

Assets Panel
Assets panel berfungsi untuk mengelola semua aset atau elemen yang da dalam sebuah website
seperti file image, file movie, swf, dan cebagainya. Assets panel membagi aset-aset menjadi
beberapa kategori, di antaranya Images, Colors, URLS, SWF, Shockwave, Movies, Scripts,
Templates, dan Library. Berikut contoh tampilan Assets dari kategori Images:

Gambar 1.27 Assets panel

Property Inspector
Pada Adobe Dreamweaver CS6 terdapat fasilitas Property Inspector yang berfungsi untuk
mengatur ataupun mengedit properti objek-objek yang digunakan dalam halaman web.
Property Inspector menampilkan semua properti objek (misalnya objek teks, objek gambar,
objek tabel) yang terseleksi pada jendela kerja. Pada Property Inspector Anda dapat dengan
mudah mengatur atau mengedit properti objek dengan memasukkan nilai parameter yang
disediakan.
Berikut tampilan Property Inspector pada Adobe Dreamweaver CS6:

Gambar 1.28 Property Inspector

 Targeted Rule, untuk menampilkan properti CSS yang ada di objek pada halaman web
yang terpilih.
 Tombol Edit rule, digunakan untuk mengedit perintah atau script dari CSS pada objek
yang terpilih.
 Tombol CSS panel, digunakan untuk mengaktifkan dan membuka CSS Style panel.
 Font, menampilkan jenis font yang digunakan pada teks yang diseleksi dan digunakan
untuk memformat jenis font.
 Size, digunakan untuk mengatur ukuran font pada teks.
 Tombol B, I. Digunakan untuk mengatur format teks menjadi huruf tebal bold (B) dan
cetak huruf miring italic (I). berfungsi untuk mengatur halaman
 Tombol Align Left menjadi rata kiri. berfungsi untuk mengatur halaman
 Tombol Align Center menjadi rata tengah.
 Tombol Align Right menjadi rata kanan. berfungsi untuk mengatur halaman
 Tombol Justify berfungsi untuk mengatur halaman menjadi rata kanan-kiri.
 Color ditandai dengan ikon digunakan untuk mengatur warna yang akan dipakai pada
halaman web.
 Pada bagian Cell terdapat Horz yang berfungsi untuk mengatur posisi objek secara
horizontal pada halaman web. Sedangkan Vert berfungsi untuk mengatur posisi dari
objek secara vertikal.
 Bg, berfungsi untuk mengatur background gambar maupun warna yang akan dipakai
pada halaman web.
 Tombol Page Properties, digunakan untuk mengatur properti halaman web.

Jika Anda memilih salah satu objek gambar pada jendela kerja maka tampilan dari Property
Inspector akan berbeda dari sebelumnya.

Gambar 1.29 Image Property Inspector

 Pada bagian Image, ditampilkan besarnya file gambar dan ukuran dari gambar tersebut.
 Src, berfungsi untuk menampilkan lokasi dari file gambar. Untuk mengganti gambar
tekan tombol, lalu pilih gambar yang diinginkan.
 Link, berfungsi untuk memberikan link pada gambar.
 Alt, berfungsi untuk memberikan keterangan berupa teks pada gambar.
 Edit, berfungsi untuk mengedit gambar dengan memanggil program eksternal ataupun
secara langsung.
 Class,berfungsi untuk menyisipkan class dari CSS Style pada gambar.
  Map, berfungsi untuk memberikan pemetaan status atau hotspot pada area gambar.
 V Space, berfungsi untuk memberikan jarak gambar dengan objek lain secara vertikal.
 H Space, berfungsi untuk memberikan jarak gambar dengan objek lain secara
horizontal.
 Target, berfungsi untuk memberikan target link, biasanya digunakan pada frame.
 Original, berfungsi untuk memasukkan gambar yang hanya berformat psd dan *.png.
 Border, berfungsi untuk memberikan border pada gambar.
 Align, berfungsi untuk mengatur posisi gambar.

Jika Anda menyeleksi tabel pada jendela kerja maka tampilan dari Property Inspector menjadi
seperti berikut:

Gambar 1.30 Tabel Property Inspector

 Rows, menampilkan jumlah baris yang ada pada tabel.
 Cols, mempilkan jumlah kolom yang ada pada tabel.
 W (width), berfungsi untuk mengatur ukuran dari tabel.
 Cellpad, berfungsi untuk mengatur jarak antara sel dengan isi. dari tabel.
 CellSpace, berfungsi untuk mengatur jarak antarsel.
 Align, berfungsi untuk mengatur posisi tabel.
 Border, berfungsi untuk memberikan ketebalan garis tabel.
 Class, berfungsi untuk menyisipkan class dari CSS Style.

Workspace Switcher

Gambar 1.31 Workspace Switcher

Workspace Switcher pada Adobe Dreamweaver CS6 berfungsi untuk mengubah ataupun
mengatur jendela kerja sesuai yang diinginkan sehingga dapat memudahkan Anda dalam
membuat halaman web. Di antaranya adalah mode Designer, Classic, Coder, dan sebagainya.
Untuk tampilan standar jendela kerja pada Adobe Dreamweaver CS6 adalah mode Designer.

Untuk mengubah tampilan tekan tombol kemudian akan tampil sederetan pilihan mode
tampilan.

Gambar 1.32 Pemilihan tampilan pada Workspace Switcher

 Gambar 1.33 Tampilan Jendela Kerja Designer Compact

MENYIMPAN FILE DOKUMEN WEB

Sebelum menutup dokumen web, Anda dapat menyimpan file dokumen web tersebut dengan
cara sebagai berikut :
1. Pada menu bar, klik File→Save.

Gambar 1.34 Menyimpan file

2. Isikan nama file yang akan disimpan pada kolom File name misalkan index. html.

Gambar 1.35 Kotak dialog Save As

3. Klik tombol Save untuk menyimpan file.
Selain menggunakan Save, Anda dapat menggunakan Save As untuk menyimpan file dokumen
web. Save As digunakan untuk menyimpan halaman web yang telah diedit dengan nama file
yang berbeda atau dengan tipe file yang berbeda. Sedangkan Save digunakan untuk menyimpan
ulang halaman web baru ataupun yang telah diedit dengan nama file yang sama dari file
sebelumnya.

MENUTUP DOKUMEN WEB DAN APLIKASI ADOBE DREAMWEAVER CS6

Untuk menutup dokumen yang telah disimpan klik tanda silang (x) pada Document Window.

Gambar 1.36 Menutup dokumen web

Sedangkan untuk menutup aplikasi Adobe Dreamweaver CS6, lakukan salah satu cara berikut:
 Pada menu bar, klik File→Exit.

Gambar 1.37 Menutup aplikasi Adobe Dreamweaver

 Klik tombol X di bagian pojok kanan atas jendela aplikasi.

Gambar 1.38 Menutup aplikasi

RANGKUMAN
Adobe Dreamweaver CS6 memberikan tampilan yang menawan dan mudah dalam hal
penggunaan. Aplikasi ini mengintegrasi kan banyak aspek dalam pengembangan. Selain
mendukung bahasa HTML sebagai dasar bahasa pembuatan website, Adobe Dreamweaver
CS6 juga mendukung berbagai bahasa pendukung pemrograman web, misalnya CSS yang
digunakan untuk mempercantik tampilan, XML dan bahasa pemrograman client-side seperti
JavaScript, serta pemrograman server- side seperti PHP, Active Server Page (ASP), ASP.NET,
ASP JavaScript, ASP VBScript, ColdFusion, dan Java Server Page (JSP).