Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6

Transkripsi

1

2 Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6

3 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 Rp (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 Rp ,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 Rp ,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 Rp ,00 (empat miliar rupiah).

4 Solusi Tepat Menjadi Pakar Adobe Dreamweaver CS6 Ruko Mandar PENERBIT PT ELEX MEDIA KOMPUTINDO

5 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 ISBN: 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

6 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 v

7 DAFTAR ISI Kata Pengantar... v Daftar Isi... vii Bab 1 Pendahuluan Apa Adobe Dreamweaver CS6? Menjalankan Adobe Dreamweaver CS Mengenal Starter Page... 4 Open a Recent Item... 4 Create New... 4 Top Features Membuat Lembar Kerja Baru... 5 Melalui Menu File... 6 Starter Page Mengenal Tampilan Lembar Kerja Adobe Dreamweaver CS Layout... 8 Code... 8 Split... 9 Design Live Code and Design Mengenal Bagian Lingkungan Kerja Adobe Dreamweaver...11 Panel Menu Bar Menyimpan Lembar Kerja Menutup Lembar Kerja Mengakhiri Adobe Dreamweaver CS Latihan Pertama...16 Praktik Latihan Pertama...16 Soal Pertama...20 Bab 2 Pengaturan Lembar Kerja Mengatur Layout Manajemen Site...22 Membuat Site Baru Mengedit Site Menghapus Site Menggandakan Site Menampilkan atau Menyembunyikan Panel Memindahkan Lokasi Panel...30 vii

8 2.5 Mengatur Layer Multiscreen...31 Latihan Kedua...32 Praktik Latihan Kedua...32 Soal Kedua...37 Petunjuk Soal...38 Bab 3 Pengaturan Halaman Web Bekerja dengan Tabel...39 Membuat Tabel Mengedit Tabel Menghapus Tabel Merancang Halaman Web Pengaturan Menggunakan Page Properties...54 Memberikan Judul Menentukan Warna Latar Menentukan Gambar Latar Pengaturan Link Menerapkan Heading Mengatur Margin Pengaturan Menggunakan Div Tag...64 Membuat Div Mengatur Tag Div Menggunakan CSS Latihan Ketiga...68 Praktik Latihan Ketiga...68 Soal Ketiga...75 Petunjuk Soal...75 Bab 4 Pengaturan Halaman Web Menggunakan CSS Apa itu CSS? Membuat Dokumen CSS...78 Internal CSS External CSS Inline CSS Menambah Baris CSS...83 Melalui Properties Melalui CSS Styles Menghapus Baris CSS Membuat Class Selector Membuat Styles di Dokumen CSS Mengedit CSS...90 Melalui Properties Melalui CSS Styles Melalui Dokumen CSS Menambah Property CSS Membuat Komentar di Dokumen CSS Menghubungkan CSS dengan Halaman Web Melepas Hubungan CSS dengan Halaman Web...98 viii

9 Latihan Keempat...99 Praktik Latihan Keempat...99 Soal Keempat Bab 5 Mengolah Teks Menyisipkan Teks di Halaman Web Menghapus Teks pada Halaman Web Menyisipkan Karakter Khusus Mengedit Teks Mengatur Perataan Teks Membuat Paragraf Membuat List Teks Menerapkan Warna pada Teks Membuat Indent Teks Menerapkan Block Quote Menghapus Block Quote Membuat Outdent Teks Mengatur Jenis Huruf Menerapkan Link pada Teks Latihan Kelima Praktik Latihan Kelima Soal Kelima Bab 6 Menambah Objek Menyisipkan Gambar di Halaman Web Melalui Asset Melalui Panel Insert Common Melalui Panel Files Melalui Menu Insert Menyisipkan Gambar Menggunakan Image Placeholder Menambah File Flash Menambah Flash Video Mengedit Gambar Menyalin Gambar Menghapus Gambar Crop Gambar Optimasi Gambar Sharpen Pengaturan Brightness dan Contrast Menerapkan Link pada Gambar Latihan Keenam Praktik Latihan Keenam Soal Keenam Bab 7 Membuat Link Membuat Link Hyperlink Link ix

10 7.2 Membuat Link Tertentu dalam Dokumen Web Membuat Anchor Membuat Link ke Anchor Mengedit Link Menghapus Link Mengubah Link Memberi Title Link Latihan Ketujuh Praktik Latihan Ketujuh Soal Ketujuh Bab 8 Membuat Navigasi Membuat Navigasi Navigasi Gambar Navigasi dengan Rollover Image Navigasi dengan Spry Menu Bar Spry Menu Bar Horizontal Spry Menu Bar Vertikal Mengedit Navigasi Bar Mengubah Nama Item Menambah Item Mengurangi Item Menambah dan mengurangi Sub Item Mengatur Posisi Item atau Sub Item Latihan Kedelapan Praktik Latihan Kedelapan Soal Kedelapan Bab 9 Membuat Frame dan Template Mengenal Frame Membuat Frame Menggunakan Frame Mengedit Frame Mengatur Ukuran Frame Mengatur Border Frame Mengenal Template Membuat Template Membuat Halaman Web Menggunakan Template Latihan Kesembilan Praktik Latihan Kesembilan Soal Kesembilan Bab 10 Menggunakan Common dan Layout Menggunakan Panel Common Membuat Horizontal Rule Membuat Tanggal Membuat Comment Membuat Head x

11 Meta Keywords Deskripsi Base Refresh Link Membuat Server-Slide Include Membuat Insert Div Tag Draw AP Div Latihan Kesepuluh Soal Kesepuluh Bab 11 Menggunakan Spry Mengenal Spry Membuat Spry Tabbed Panels Mengubah Nama Tabbed Panels Mengubah Judul Tab Menambah atau Mengurangi Tab Mengatur Urutan Tab Membuat Spry Accordion Mengubah Accordion Mengubah Nama Label Accordion Membuat Konten Membuat Spry Collapsible Panel Membuat Spry Validation Text Field Membuat Validations Text Field untuk Password Membuat Spry Validation Text Area Membuat Spry Validation Select Membuat Spry Validation Password Memberi Batas Bawah dan Atas Password Membuat Spry Validation Radio Grup Latihan Kesebelas Praktek Latihan Kesebelas Soal Kesebelas Bab 12 Menggunakan Form Mengenal Form Menggunakan Panel Form Membuat Form Membuat Text Field Membuat Textarea Membuat Checkbox Membuat Radio Button Membuat Button Membuat Label Membuat File Field Membuat Radio Group xi

12 Latihan Keduabelas Praktikum Latihan Keduabelas Soal Keduabelas Bab 13 Menggunakan Behavior Menggunakan Panel Behavior Membuat Action Menggunakan Action Call Javascript Menggunakan Action Change Property Menggunakan Action Check Plugin Menggunakan Action Go TO Url Menggunakan Pop Up Message Bab 14 Menggunakan Text Mengenal Text Mengatur Teks Menerapkan Bold Menerapkan Italic Menerapkan Strong Menerapkan Paragaph Menerapkan Block Quote Menggunakan Heading Heading Heading Heading Menggunakan List Menggunakan Unordered List Menggunakan Ordered List Menggunakan List Item Membuat Abbreviation Membuat Acronym Membuat Character Bab 15 Menggunakan Panel Assets dan Panel History Mengenal Panel Assets Menyegarkan Panel Assets Menambah Assets ke Halaman Web Menerapkan Warna dari Panel Assets Menambah Asset ke Daftar Favorite Membuat Nicname untuk Asset di Favorite Bekerja dengan Folder di Favorite Mengenal Panel History Mengulang Perintah Tentang Penulis xii

13 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. 1

14 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 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 2

15 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 3

16 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. Create New Gambar 1.5 Bagian fitur open a recent item 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. 4

17 Top Features Gambar 1.6 Bagian fitur create new 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. 5