Cara Menggunakan Adobe Dreamweaver

Adobe Dreamweaver adalah alat yang sangat kuat untuk desainer web, karena memiliki banyak hal yang dapat Anda lakukan dengannya. Tentu saja, semua hal yang dapat Anda lakukan membuatnya sulit untuk dipelajari. Temukan beberapa dari banyak hal yang dapat dilakukan Dreamweaver, termasuk perubahan pada versi terbaru, CS5. Dan jangan lupa untuk memeriksa hal-hal yang hilang dari Dreamweaver CS5.

Mendefinisikan Situs

• Mulai situs web baru
• Buat situs web
• Siapkan hanya bagian situs yang Anda butuhkan, saat Anda membutuhkannya *Baru di CS5
• Siapkan server jarak jauh, QA, dan pengujian untuk alur kerja yang lebih lengkap *Baru di CS5
• Buat dan publikasikan direktori baru
• Ubah doctype
• Sertakan data meta di halaman Anda

Menghidupkan Situs Anda

• Tentukan situs jarak jauh
• File FTP ke server web
• Gunakan sistem kontrol versi untuk memeriksa file masuk dan keluar
• Terhubung dengan Subversion untuk kontrol versi yang lebih canggih *Baru di CS5
• Tinggalkan catatan untuk rekan satu tim Anda

Membuat Halaman Web

• Tulis halaman dalam mode WYSIWYG
• Tulis halaman dalam HTML
• Buat halaman baru dari template
• Buat halaman baru dari awal
• Buat template
• Simpan file ke direktori situs Anda
• Tentukan properti halaman

CSS

• Gunakan lembar gaya CSS
• Menambahkan gaya sebaris
• Buat lembar gaya eksternal
• Lampirkan lembar gaya eksternal
• Buat class, ID, tag, dan pemilih CSS gabungan
• Edit aturan CSS yang ada
• Buat CSS untuk halaman yang dapat dicetak
• Mengaktifkan dan menonaktifkan properti gaya *Baru di CS5
• Periksa model kotak CSS secara visual *Baru di CS5

Teks

• Ubah teks
• Gunakan font yang berbeda
• Masukkan jeda baris
• Gunakan karakter khusus
• Sertakan tanggal hari ini
• Tulis komentar
• Berlaku tag HTML untuk mengirim pesan
• Tambahkan atribut HTML ke tag

Tautan

• Tautkan teks dan gambar
• Periksa tautan situs
• Ubah warna tautan default (tautan, dikunjungi, arahkan kursor, aktif)
• Buat kiat alat di tautan
• Buat tautan mailto
• Buat jangkar halaman web

Gambar-gambar

• Tambahkan grafik ke halaman
• Mengedit gambar
• Ubah ukuran gambar
• Tambahkan teks alternatif ke gambar
• Tambahkan opsi aksesibilitas tambahan ke gambar
• Sejajarkan gambar dan teks
• Buat gambar rollover
• Menggunakan peta gambar
• Gunakan gambar pelacakan
• Gunakan placeholder gambar
• Masukkan HTML Kembang Api
• Masukkan file Photoshop

Tata Letak

• Gunakan template gratis yang disertakan *Tata letak starter CSS baru di CS5
• Sisipkan div untuk tata letak
• Edit div di panel gaya CSS
• Masukkan elemen yang benar-benar diposisikan
• Format elemen yang benar-benar diposisikan di inspektur properti
• Gunakan penggaris, kisi, dan panduan

Daftar

• Tambahkan daftar berpoin dan bernomor
• Sesuaikan daftar peluru dan nomor

Tabel

• Buat tabel
• Tambahkan baris dan kolom header
• Menggunakan gambar transparan untuk menahan sel tabel tetap terbuka
• Buat kolom lebar tetap dan lebar fleksibel
• Ubah gaya batas tabel
• Sematkan tabel di dalam tabel
• Impor data tabel

Formulir

• Gunakan formulir mailto
• Tentukan tindakan formulir
• Tambahkan teks, radio, kotak centang, file, gambar, kotak pilih, dan bidang formulir tersembunyi
• Jadikan formulir Anda dapat diakses dengan fieldset dan bidang label
• Buat tombol kirim khusus
• Validasi formulir dengan JavaScript (Spry)

Database dan PHP Scripting

• Lampirkan situs Anda ke database
• Siapkan situs PHP/mySQL
• Gunakan elemen sigap untuk terhubung ke database
• Masukkan objek data ke halaman Anda
• Uji dan perbarui sumber atau tampilan data sigap
• Edit situs dinamis yang kompleks dalam tampilan desain
• Temukan semua file yang terkait secara dinamis untuk merakit situs PHP CMS (WordPress, Joomla, dan Drupal) *Baru di CS5
• Petunjuk kelas khusus untuk kode PHP, termasuk kerangka kerja pihak ketiga seperti kerangka kerja Zend *Baru di CS5

Bingkai

• Bangun situs web berbingkai
• Edit konten noframe
• Format dan gaya bingkai Anda
• Siapkan target tautan default di antara bingkai

Tambahkan Interaktivitas

• Buat album foto (Tidak lagi di CS5)
• Tambahkan suara ke halaman web
• Buat menu tarik-turun
• Gunakan perilaku Dreamweaver untuk membuka jendela pop-up, membuat menu lompat, memutar suara, menukar gambar, dan banyak lagi
• Tambahkan umpan RSS ke situs
• Masukkan teks Flash sebagai rollover
• Masukkan teks CSS sebagai rollover
• Masukkan plugin lain
• Tambahkan bilah menu sigap, panel tab, akordeon, tip alat, dan panel yang dapat dilipat
• Gunakan Browser Widget untuk menemukan widget baru untuk situs Anda, tanpa perlu mengetahui JavaScript

Uji Halaman Anda

• Uji halaman Anda di Live View untuk melihat perubahan karena JavaScript dan interaktivitas *Baru di CS5
• Validasi HTML Anda
• Pratinjau halaman Anda di beberapa browser
• Gunakan BrowserLab untuk melihat pratinjau halaman Anda di sistem operasi lain *Baru di CS5
• Gunakan Pusat Perangkat untuk memeriksa tampilan halaman di perangkat seluler
• Periksa kompatibilitas browser
• Ubah pengaturan agar sesuai dengan apa yang dibutuhkan situs Anda untuk bekerja
• Periksa tautan situs internal
• Uji aksesibilitas situs Anda (Tidak lagi di CS5)
• Konversi a Dokumen kata ke HTML

Sesuaikan Dreamweaver

• Tambahkan ekstensi
• Nonaktifkan ekstensi
• Kustomisasi Dreamweaver dengan pintasan

Tingkatkan Efisiensi Anda

• Gunakan pintasan keyboard bawaan
• Gunakan cuplikan kode
• Buat dan gunakan template
• Hasilkan halaman baru dari templat khusus
• Perbarui template
• Sertakan satu file di file lain dengan perpustakaan Dreamweaver
• Perbarui item perpustakaan
• Sertakan satu file di file lain menggunakan SSI
• Gunakan pencarian dan ganti