Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6

Sanksi Pelanggaran Pasal 113 Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta

1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah).

2. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

3. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling banyak Rp1.000.000.000,00 (satu miliar rupiah).

4. Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).

 

Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6

Ruko Mandar

PENERBIT PT ELEX MEDIA KOMPUTINDO

Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6

Ruko Mandar

©2017, PT. Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2017

okti@elexmedia.id

717050816

ISBN: 978-602-04-2096-7

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku tanpa izin tertulis dari penerbit.

Dicetak oleh Percetakan PT. Gramedia, Jakarta Isi di luar tanggung jawab percetakan

v

KATA PENGANTAR

Puji syukur senantiasa penulis limpahkan kepada sang pencipta alam semesta “Allah SWT” yang selalu memberikan kesehatan, waktu, dan kesempatan kepada penulis untuk berkarya, menyusun, dan menyelesaikan buku ini tepat pada waktunya sehingga dapat berada di tengah-tengah pembaca. Tidak lupa pula penulis kirimkan shalawat dan salam kepada junjungan nabi besar Muhammad SAW yang telah membawa kita dari alam kegelapan menuju alam yang terang benderang.

Buku ini membahas mengenai kumpulan Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6 yang sangat populer digunakan dalam mendesain website. Adobe Dreamweaver adalah sebuah paket desain grafis yang amat terkenal, digunakan untuk menyelesaikan perancangan di bidang website dengan tingkat ketelitian serta kemudahan yang cukup memadai untuk website yang memerlukan ketelitian tinggi. Ditambah lagi program ini menyediakan fasilitas teknologi pemrograman web yang didukung oleh fireworks serta flash sebagai elemen navigasi animasi serta didukung oleh Scrip Server Side.

Setelah membaca buku ini, Anda akan mengetahui bahwa Adobe Dreamweaver memiliki banyak dukungan fasilitas, teknologi pemrograman web, dan scrip server side yang akan menjadikan website lebih sempurna.

Malunda, 21 Maret 2017 Tim Ruko Mandar

rukomandar@gmail.com

vii

DAFTAR ISI

Kata Pengantar ...........................................................................v Daftar Isi ...................................................................................vii

Bab 1 Pendahuluan .................................................................... 1 1.1 Apa Adobe Dreamweaver CS6?................................................................ 1 1.2 Menjalankan Adobe Dreamweaver CS6..................................................... 2 1.3 Mengenal Starter Page ............................................................................. 4

Open a Recent Item ..................................................................................... 4 Create New ................................................................................................ 4 Top Features ............................................................................................... 5

1.4 Membuat Lembar Kerja Baru ..................................................................... 5 Melalui Menu File ........................................................................................ 6 Starter Page ................................................................................................ 7

1.5 Mengenal Tampilan Lembar Kerja Adobe Dreamweaver CS6........................ 7 Layout ........................................................................................................ 8 Code.......................................................................................................... 8 Split ........................................................................................................... 9 Design......................................................................................................10 Live ..........................................................................................................11 Code and Design ......................................................................................11

1.6 Mengenal Bagian Lingkungan Kerja Adobe Dreamweaver ..........................11 Panel........................................................................................................11 Menu Bar .................................................................................................14

1.7 Menyimpan Lembar Kerja .......................................................................14 1.8 Menutup Lembar Kerja............................................................................15 1.9 Mengakhiri Adobe Dreamweaver CS6 .....................................................15 Latihan Pertama...........................................................................................16 Praktik Latihan Pertama ................................................................................16 Soal Pertama ..............................................................................................20

Bab 2 Pengaturan Lembar Kerja............................................... 21 2.1 Mengatur Layout ....................................................................................21 2.2 Manajemen Site.....................................................................................22

Membuat Site Baru ....................................................................................23 Mengedit Site............................................................................................25 Menghapus Site.........................................................................................27 Menggandakan Site...................................................................................28

2.3 Menampilkan atau Menyembunyikan Panel...............................................29 2.4 Memindahkan Lokasi Panel .....................................................................30

viii

2.5 Mengatur Layer Multiscreen.....................................................................31 Latihan Kedua .............................................................................................32 Praktik Latihan Kedua...................................................................................32 Soal Kedua.................................................................................................37 Petunjuk Soal ..............................................................................................38

Bab 3 Pengaturan Halaman Web ..............................................39 3.1 Bekerja dengan Tabel ...........................................................................39

Membuat Tabel .........................................................................................39 Mengedit Tabel .........................................................................................41 Menghapus Tabel ......................................................................................51 Merancang Halaman Web .........................................................................52

3.2 Pengaturan Menggunakan Page Properties ..............................................54 Memberikan Judul......................................................................................54 Menentukan Warna Latar ...........................................................................55 Menentukan Gambar Latar .........................................................................56 Pengaturan Link .........................................................................................58 Menerapkan Heading ................................................................................60 Mengatur Margin ......................................................................................62

3.3 Pengaturan Menggunakan Div Tag .........................................................64 Membuat Div ............................................................................................64 Mengatur Tag Div Menggunakan CSS .........................................................65

Latihan Ketiga.............................................................................................68 Praktik Latihan Ketiga...................................................................................68 Soal Ketiga.................................................................................................75 Petunjuk Soal ..............................................................................................75

Bab 4 Pengaturan Halaman Web Menggunakan CSS ................77 4.1 Apa itu CSS?.........................................................................................77 4.2 Membuat Dokumen CSS .........................................................................78

Internal CSS ..............................................................................................79 External CSS .............................................................................................80 Inline CSS.................................................................................................82

4.3 Menambah Baris CSS ............................................................................83 Melalui Properties ......................................................................................83 Melalui CSS Styles .....................................................................................84

4.4 Menghapus Baris CSS ............................................................................85 4.5 Membuat Class Selector..........................................................................86 4.6 Membuat Styles di Dokumen CSS.............................................................89 4.7 Mengedit CSS .......................................................................................90

Melalui Properties ......................................................................................90 Melalui CSS Styles .....................................................................................91 Melalui Dokumen CSS................................................................................93 Menambah Property CSS............................................................................93

4.8 Membuat Komentar di Dokumen CSS .......................................................94 4.9 Menghubungkan CSS dengan Halaman Web ...........................................95 4.10 Melepas Hubungan CSS dengan Halaman Web .....................................98

ix

Latihan Keempat..........................................................................................99 Praktik Latihan Keempat................................................................................99 Soal Keempat ...........................................................................................103

Bab 5 Mengolah Teks ............................................................. 105 5.1 Menyisipkan Teks di Halaman Web .......................................................105 5.2 Menghapus Teks pada Halaman Web....................................................105 5.3 Menyisipkan Karakter Khusus ................................................................106 5.4 Mengedit Teks .....................................................................................107

Mengatur Perataan Teks ...........................................................................107 Membuat Paragraf...................................................................................108 Membuat List Teks....................................................................................108 Menerapkan Warna pada Teks.................................................................109 Membuat Indent Teks ...............................................................................110 Menerapkan Block Quote .........................................................................111 Menghapus Block Quote ..........................................................................111 Membuat Outdent Teks.............................................................................112

5.5 Mengatur Jenis Huruf............................................................................113 5.6 Menerapkan Link pada Teks..................................................................115 Latihan Kelima ..........................................................................................115 Praktik Latihan Kelima ................................................................................116 Soal Kelima ..............................................................................................119

Bab 6 Menambah Objek......................................................... 121 6.1 Menyisipkan Gambar di Halaman Web ................................................ 121

Melalui Asset ......................................................................................... 121 Melalui Panel Insert Common ................................................................... 122 Melalui Panel Files .................................................................................. 123 Melalui Menu Insert ................................................................................ 124

6.2 Menyisipkan Gambar Menggunakan Image Placeholder.......................... 125 6.3 Menambah File Flash .......................................................................... 127 6.4 Menambah Flash Video ....................................................................... 129 6.5 Mengedit Gambar .............................................................................. 131

Menyalin Gambar .................................................................................. 131 Menghapus Gambar............................................................................... 132 Crop Gambar ........................................................................................ 132 Optimasi Gambar................................................................................... 133 Sharpen................................................................................................. 135 Pengaturan Brightness dan Contrast .......................................................... 135

6.6 Menerapkan Link pada Gambar ........................................................... 136 Latihan Keenam........................................................................................ 137 Praktik Latihan Keenam ............................................................................. 138 Soal Keenam ........................................................................................... 140

Bab 7 Membuat Link .............................................................. 141 7.1 Membuat Link..................................................................................... 141

Hyperlink ............................................................................................... 141 E-Mail Link ............................................................................................. 143

x

7.2 Membuat Link Tertentu dalam Dokumen Web ......................................... 144 Membuat Anchor.................................................................................... 144 Membuat Link ke Anchor ......................................................................... 145

7.3 Mengedit Link..................................................................................... 146 Menghapus Link ..................................................................................... 146 Mengubah Link....................................................................................... 147 Memberi Title Link................................................................................... 148

Latihan Ketujuh......................................................................................... 148 Praktik Latihan Ketujuh............................................................................... 148 Soal Ketujuh ............................................................................................ 149

Bab 8 Membuat Navigasi....................................................... 151 8.1 Membuat Navigasi ............................................................................. 151

Navigasi Gambar................................................................................... 151 Navigasi dengan Rollover Image.............................................................. 153

8.2 Navigasi dengan Spry Menu Bar .......................................................... 155 Spry Menu Bar Horizontal ....................................................................... 156 Spry Menu Bar Vertikal ........................................................................... 157

8.3 Mengedit Navigasi Bar........................................................................ 158 Mengubah Nama Item ............................................................................ 158 Menambah Item ..................................................................................... 160 Mengurangi Item .................................................................................... 161 Menambah dan mengurangi Sub Item....................................................... 161 Mengatur Posisi Item atau Sub Item........................................................... 162

Latihan Kedelapan.................................................................................... 163 Praktik Latihan Kedelapan.......................................................................... 163 Soal Kedelapan........................................................................................ 166

Bab 9 Membuat Frame dan Template ..................................... 167 9.1 Mengenal Frame ............................................................................... 167

Membuat Frame ..................................................................................... 167 Menggunakan Frame .............................................................................. 169

9.2 Mengedit Frame ................................................................................ 171 Mengatur Ukuran Frame.......................................................................... 171 Mengatur Border Frame........................................................................... 171

9.3 Mengenal Template ........................................................................... 172 Membuat Template ................................................................................. 172

9.4 Membuat Halaman Web Menggunakan Template ................................. 174 Latihan Kesembilan................................................................................... 175 Praktik Latihan Kesembilan......................................................................... 175 Soal Kesembilan....................................................................................... 177

Bab 10 Menggunakan Common dan Layout ........................... 179 10.1 Menggunakan Panel Common............................................................ 179 10.2 Membuat Horizontal Rule................................................................... 180 10.3 Membuat Tanggal............................................................................. 181 10.4 Membuat Comment ........................................................................... 182 10.5 Membuat Head ................................................................................ 183

xi

Meta ..................................................................................................... 183 Keywords .............................................................................................. 184 Deskripsi................................................................................................ 186 Base...................................................................................................... 187 Refresh .................................................................................................. 188 Link ....................................................................................................... 189

10.6 Membuat Server-Slide Include............................................................. 190 10.7 Membuat Insert Div Tag ..................................................................... 191 10.8 Draw AP Div .................................................................................... 192 Latihan Kesepuluh ..................................................................................... 193 Soal Kesepuluh......................................................................................... 195

Bab 11 Menggunakan Spry.................................................... 197 11.1 Mengenal Spry................................................................................. 197 11.2 Membuat Spry Tabbed Panels ............................................................ 198

Mengubah Nama Tabbed Panels ............................................................. 199 Mengubah Judul Tab............................................................................... 200 Menambah atau Mengurangi Tab ............................................................ 201 Mengatur Urutan Tab .............................................................................. 202

11.3 Membuat Spry Accordion .................................................................. 202 Mengubah Accordion ............................................................................. 203 Mengubah Nama Label Accordion ........................................................... 204 Membuat Konten .................................................................................... 205

11.4 Membuat Spry Collapsible Panel......................................................... 206 11.5 Membuat Spry Validation Text Field .................................................... 207

Membuat Validations Text Field untuk Password ......................................... 207 11.6 Membuat Spry Validation Text Area .................................................... 209 11.7 Membuat Spry Validation Select ......................................................... 210 11.8 Membuat Spry Validation Password .................................................... 212

Memberi Batas Bawah dan Atas Password ................................................ 214 11.9 Membuat Spry Validation Radio Grup ................................................. 215 Latihan Kesebelas ..................................................................................... 216 Praktek Latihan Kesebelas .......................................................................... 216 Soal Kesebelas ......................................................................................... 218

Bab 12 Menggunakan Form ................................................... 219 12.1 Mengenal Form ................................................................................ 219 12.2 Menggunakan Panel Form.................................................................. 220 12.3 Membuat Form ................................................................................. 222 12.4 Membuat Text Field........................................................................... 223 12.5 Membuat Textarea ............................................................................ 224 12.6 Membuat Checkbox .......................................................................... 225 12.7 Membuat Radio Button ...................................................................... 226 12.8 Membuat Button................................................................................ 227 12.9 Membuat Label................................................................................. 227 12.10 Membuat File Field.......................................................................... 228 12.11 Membuat Radio Group .................................................................... 229

xii

Latihan Keduabelas................................................................................... 231 Praktikum Latihan Keduabelas..................................................................... 231 Soal Keduabelas....................................................................................... 235

Bab 13 Menggunakan Behavior ............................................. 237 13.1 Menggunakan Panel Behavior ............................................................ 237 13.2 Membuat Action ............................................................................... 239

Menggunakan Action Call Javascript ........................................................ 239 Menggunakan Action Change Property ..................................................... 240 Menggunakan Action Check Plugin........................................................... 241 Menggunakan Action Go TO Url .............................................................. 242 Menggunakan Pop Up Message............................................................... 244

Bab 14 Menggunakan Text .................................................... 245 14.1 Mengenal Text.................................................................................. 245 14.2 Mengatur Teks.................................................................................. 246

Menerapkan Bold ................................................................................... 246 Menerapkan Italic................................................................................... 247 Menerapkan Strong ................................................................................ 247 Menerapkan Paragaph ........................................................................... 248 Menerapkan Block Quote ........................................................................ 248

14.3 Menggunakan Heading..................................................................... 249 Heading 1 ............................................................................................. 250 Heading 2 ............................................................................................. 250 Heading 3 ............................................................................................. 251

14.4 Menggunakan List ............................................................................. 251 Menggunakan Unordered List................................................................... 252 Menggunakan Ordered List...................................................................... 252 Menggunakan List Item ............................................................................ 253

14.5 Membuat Abbreviation ...................................................................... 253 14.6 Membuat Acronym............................................................................ 254 14.7 Membuat Character .......................................................................... 255

Bab 15 Menggunakan Panel Assets dan Panel History ............ 257 15.1 Mengenal Panel Assets ...................................................................... 257

Menyegarkan Panel Assets ...................................................................... 258 Menambah Assets ke Halaman Web ........................................................ 259 Menerapkan Warna dari Panel Assets ...................................................... 260 Menambah Asset ke Daftar Favorite.......................................................... 261 Membuat Nicname untuk Asset di Favorite................................................. 262 Bekerja dengan Folder di Favorite ............................................................ 263

15.2 Mengenal Panel History ..................................................................... 264 Mengulang Perintah................................................................................ 265

Tentang Penulis ...................................................................... 267

1

Bab1 Pendahuluan

Pada bab ini akan dibahas mengenai pengenalan aplikasi Dreamweaver CS6 dari proses menjalankan aplikasi pengenalan lembar kerja sampai menutupnya kembali. Setelah mempelajari pembahasan pada bab ini, diharapkan pembaca mengenal lebih jauh aplikasi Adobe Dreamweaver dan mampu mengoperasikannya.

1.1 Apa Adobe Dreamweaver CS6? Adobe Dreamweaver merupakan aplikasi pengembang yang berfungsi untuk mendesain web yang dibuat, dikembangkan, dan diproduksi oleh Adobe System. Sampai saat ini versi terbaru dari Adobe Dreamweaver adalah Adobe Dreamweaver CS6 yang dirilis pada tanggal 21 April 2012 dengan harga $399 USD.

Aplikasi pengembang web ini sangat digemari oleh web desainer dalam merancang web sebab perangkat lunak komputer ini memiliki kelebihan dan kemudahan dalam penggunaannya. Dengan menggunakan aplikasi ini, pengembangan web dapat dilakukan secara visual sehingga hasil perancangan web dapat langsung terlihat tanpa harus menggunakan aplikasi bantu peramban seperti Google Crome, Firefox, atau Internet Explorer. Teknologi web yang didukung oleh Adobe Dreamweaver sangat beragam, salah satunya adalah teknologi untuk kebutuhan pengembangan web berbasis mobile.

Selain Adobe Dreamweaver, masih banyak aplikasi desain dan pemrograman web yang beredar, tetapi apabila Anda ingin menjadi desainer dan pemrograman web tanpa bekerja melalui mode HTML maka aplikasi ini adalah pilihan terbaik.

2

Adobe Dreamweaver dapat dijalankan pada sistem operasi Windows XP SP2, Windows Vista, Windows 7, Windows 8. Untuk dapat menjalankan Adobe Dreamweaver di komputer Anda maka spesifikasi komputer yang digunakan minimal menggunakan Prosesor Intel Pentium 4 atau AMD Athlon 64, Memori (RAM) 512 MB, Resolusi monitor 280x800 pixel, dan Hardisk dengan kapasitas kosong minimal 1 GB.

Gambar 1.1 Logo Adobe Dreamweaver di start windows 8

1.2 Menjalankan Adobe Dreamweaver CS6

Sebelum mulai bekerja dengan Adobe Dreamweaver, tentu Anda harus menjalankan aplikasi tersebut terlebih dahulu. Untuk menjalankan aplikasi Dreamweaver dapat dilakukan dengan beragam cara, tetapi tujuannya sama. Pada pembahasan ini, penulis menggunakan sistem operasi Windows 8. Langkah menjalankan aplikasi Dreamweaver dapat dilakukan sebagai berikut.

1. Pastikan komputer yang digunakan dalam keadaan aktif.

2. Pilih tombol Start yang terletak di sebelah kiri bawah layar monitor Anda untuk menuju halaman start.

Gambar 1.2 Memilih tombol star

3

3. Kemudian di halaman Start, pilih tombol Drop down untuk menampilkan semua shortcut program pada komputer yang ada di halaman Apps.

Gambar 1.3 Memilih shortcut dreamweaver cs6

4. Di halaman Apps, cari dan temukan shocut Adobe Dreamweaver CS6 kemudian klik dan beberapa menit kemudian aplikasi akan ditampilkan.

Gambar 1.4 Tampilan awal aplikasi dreamweaver

4

1.3 Mengenal Starter Page Starter Page merupakan tampilan awal yang diperlihatkan oleh aplikasi dreamweaver ketika baru dijalankan. Pada tampilan tersebut terdapat tiga bagian utama yang harus Anda ketahui, yakni Open a Recent Item, Create New, dan Top Features.

Open a Recent Item

Bagian yang pertama pada Starter Page adalah Open a Recent Item. Bagian ini adalah bagian yang menampilkan informasi mengenai file yang pernah dibuka sebelumnya. Informasi file yang ada diurutkan berdasarkan file yang paling terakhir dibuka berada paling atas.

Gambar 1.5 Bagian fitur open a recent item

Create New

Bagian yang kedua pada Starter Page adalah Create New di mana bagian ini menampilkan shorcut dokumen yang sering digunakan ketika membuat web. Fitur tersebut akan lebih memudahkan pengguna dalam membuat file baru seperti lembar kerja html, PHP, CSS, JavaScrip, XML, dan ColdFusin.

5

Gambar 1.6 Bagian fitur create new

Top Features

Bagian ketiga dari Starter Page adalah fitur yang dapat digunakan untuk mempelajari lebih jauh tentang penggunaan Dreamweaver seperti situs yang menyediakan tutorial CSS dalam bentuk video. Apabila Anda ingin mendownload video tutorial yang ada dapat dilakukan dengan mengunjungi situs penyedia dengan meng-klik salah satu top featur yang ada.

Gambar 1.7 Bagian top features

1.4 Membuat Lembar Kerja Baru Pembuatan lembar kerja baru dapat dilakukan dengan berbagai macam cara. Walaupun cara pembuatan lembar kerja baru yang berbeda, tetapi tujuannya sama. Dalam membuat lembar kerja baru, ada dua cara yang umum digunakan, yakni dari menu File atau dari Starter Page. Kedua cara tersebut akan dijelaskan sebagai berikut.