10 Tips & Trik Dreamweaver Yang Berguna Untuk Pemula

Seorang pengguna Dreamweaver pasti akan berpikir betapa kuatnya itu. Dilengkapi dengan berton-ton fitur, opsi, dan salah satu di antara IDE (Lingkungan Pengembangan Terpadu) yang paling terkenal di pasaran saat ini. Ini mungkin tidak memenuhi kriteria yang diminta oleh beberapa pengembang, Dreamweaver tanpa diragukan lagi menyediakan serangkaian pengembangan, kolaborasi dan alat pengkodean yang layak. Opsi dan alat ini disembunyikan di bawah lapisan menu yang kurang intuitif yang disesalkan, itulah sebabnya kami menyediakan tutorial di pos hari ini.

Kami akan menunjukkan kepada Anda beberapa fungsi Dreamweaver yang paling kuat untuk membantu Anda mengaksesnya dengan cepat, bersama dengan banyak trik bermanfaat lainnya yang akan melumasi waktu pengembangan Anda dan meningkatkan kualitas kode Anda secara signifikan. Daftar lengkap setelah lompat.

1. Tampilan Dinamis dengan “Live View”

Kita sudah tahu bahwa DW menawarkan tampilan statis file terbuka kita, tetapi bagaimana dengan "pandangan dinamis" aplikasi seperti WordPress?

Pertama, kita perlu menceritakan DW pengaturan apa yang digunakan untuk menyajikan"pandangan dinamis" benar. Untuk melakukan ini, pilih Pengaturan Permintaan HTTP dari Lihat> Opsi Tampilan Langsung menu, lalu masuk ke menu MENDAPATKAN atau POS parameter yang Anda butuhkan untuk melihat aplikasi Anda dengan benar.

Kemudian dengan beralih ke Live View di DW, itu menggantikan yang lama Tampilan Desain panel dengan rendering WebKit langsung piksel yang sempurna untuk halaman Anda; lengkap dengan Javascript langsung, manipulasi DOM, kueri basis data, kode sisi server, dan CSS yang diberikan, alih-alih ikon placeholder yang Anda lihat di Tampilan Desain.

2. "Code Navigator" adalah Firebug DW

Melangkah lebih jauh adalah tentang Navigator kode dan ketika di Live View jendela, mengklik ALT (mengklik Opsi-Perintah untuk Mac) di mana saja di jendela, langsung menampilkan kode yang membuat item itu. Mirip dengan apa yang saat ini Anda lihat di Firefox / Firebug.

3. Membekukan JavaScript

Karena sifat dinamis Ajax, sering kali kita perlu berinteraksi dengan halaman di mana item tertentu tidak dirender atau tersedia pada pemuatan halaman pertama. Ini adalah item yang disuntikkan ke halaman beberapa saat setelah pemuatan halaman. Ini sebuah contoh:

Anda mungkin ingin mengubah gaya tip alat yang diterapkan sepenuhnya dalam JavaScript. Sebelum hari ini, Anda harus mencari secara metodis jalan-jalan naskah Anda untuk menemukan apa yang sedang dibuat dan di mana.

Alih-alih, coba ini:

Jadikan halaman Anda masuk Live View, lalu tekan F6 untuk Membekukan JavaScript kapan saja, memungkinkan Anda untuk menargetkan dan membedah kode yang berkaitan dengan item dinamis apa pun di halaman.

4. Live View's Best Friend berikutnya - "Live Code"

Ketika menggunakan Live View, Anda juga bisa menghidupkan Kode Langsung. Kode Langsung akan memperbarui kode Anda saat Anda mengarahkan kursor, klik dan berinteraksi dengan elemen dan item di Jendela Live View!

5. Penyelesaian JavaScript Otomatis

Dreamweaver hadir dengan penyelesaian kode HTML dan CSS yang cerdas dan lengkap, tapi bagaimana dengan Javascripts? Jika Anda memberi kode jQuery atau Prototipe di Dreamweaver, maka Anda harus tahu ada ekstensi API yang menyediakan penyelesaian kode Javascript. Ini mengurangi pengetikan yang diperlukan dan bisa berguna untuk coders cepat.

Klik di sini untuk membaca lebih lanjut, atau unduh:

Ekstensi jQuery API untuk Dreamweaver
Ekstensi API prototipe untuk Dreamweaver

6. Mempercantik Kode On The Fly

Apakah halaman kode Anda terlihat seperti baris kode yang tidak terorganisir dan berantakan? Menggunakan Terapkan Pemformatan Sumber fitur dan format ulang sesuai keinginan Anda. Untuk membersihkannya dengan cepat, klik Format Kode Sumber ikon di bagian bawah jendela Coding toolbar (Edit> Bilah Alat> Pengodean) dan pilih Pengaturan Format Kode untuk mengatur pemformatan yang Anda inginkan.

Anda juga dapat mengakses opsi pemformatan dari Perintah> Terapkan Pemformatan Sumber atau hanya menerapkannya pada blok kode tertentu dengan memilih Terapkan Pemformatan Sumber ke Pilihan pilihan.

7. Dapatkan widgety

Cukup klik Perpanjang ikon Dreamweaver (terlihat seperti roda gigi) di Bilah Aplikasi Anda dan pilih Jelajahi Widget Web. Ini akan membawa Anda ke Adobe Exchange di mana Anda dapat menemukan widget tambahan dari vendor seperti Yahoo !, JQuery, dan banyak lainnya..

8. Subversi & Dreamweaver

Dan ya, Dreamweaver mendukung Subversion (SVN). Bagi pengembang yang menggunakan SVN untuk mempertahankan kontrol revisi proyek mereka, ini bisa menjadi kabar baik. Pengembang Dreamweaver Andrew Voltmer mendiskusikan bagaimana Anda dapat menggunakan Subversi dengan Dreamweaver.

9. Tidak Ada Lagi Gaya Redundan

Banyak orang menggunakan Dreamweaver sebagai cara untuk memperbarui konten secara visual, seperti pengolah kata. Sebelum Dreamweaver CS4, ini bisa menghasilkan aturan CSS yang berlebihan seperti .kelas1, .class2, dan seterusnya. Di Dreamweaver CS4, cukup alihkan Inspektur Properti untuk HTML mode (klik ikon HTML di sebelah kiri Inspektur) dan Anda akan mengucapkan selamat tinggal pada semua CSS yang berlebihan itu, hanya memasukkan markup HTML yang sesuai.

10. Formulir Validasi menjadi mudah

Ingin memvalidasi bidang formulir Anda, tetapi khawatir Anda harus membangun kembali dari awal? Jangan khawatir. Cukup pilih elemen formulir yang ada, seperti bidang teks, dan terapkan a Widget Validasi sigap dari Sisipkan> Menu sigap. Kemudian kontrol persyaratan validasi seperti karakter minimum atau maksimum langsung dari Inspektur properti.

Bonus: 3 lebih

11. Akses File Terkait dengan Mudah

Saat Anda membuka file HTML atau PHP, Anda sekarang akan melihat deretan nama file dependen, seperti CSS, Javascript dan bahkan file yang disertakan untuk PHP, di bagian atas jendela dokumen. Anda dapat dengan mudah beralih ke file-file ini, membuat perubahan dan menyimpannya, semua tanpa membukanya. Ketika Anda mengklik file apa pun di bilah File Terkait Anda akan melihat sumbernya dalam tampilan Kode dan halaman induk dalam tampilan Desain. Atau gunakan Code Navigator untuk dengan cepat mengakses kode sumber CSS yang memengaruhi pilihan Anda saat ini.

12. Periksa kompatibilitas browser

Buka dokumen yang ingin Anda periksa kompatibilitasnya; dari bilah menu yang sama di mana tampilan Kode / Split / Desain diakses, lihat ke kanan untuk 'Periksa Halamantombol.

Mengkliknya akan memperluas menu drop down, pilih 'Periksa Kompatibilitas Browser' Itu Jendela hasil Kompatibilitas Browser akan muncul di bagian bawah jendela dengan masalah apa pun yang perlu Anda atasi.

Catatan: Ini TIDAK akan memeriksa versi baru IE di Mac! Untuk memilih browser yang akan digunakan untuk pengujian, pilih Periksa Halaman > Pengaturan dari menu.

13. Pratinjau Halaman PHP

Dreamweaver memungkinkan Anda untuk menjalankan dan melihat pratinjau kode PHP dalam perangkat lunak. Berikut cara mengaturnya.

Mulai

Pertama, pilih Situs -> Situs Baru dari navigasi atas.
Anda akan melihat keduanya Dasar dan Definisi Situs Lanjutan tab opsi. Mari kita lanjutkan dengan memilih Tab Definisi Situs Lanjutan.
Masukkan nama folder untuk situs di kotak yang sesuai (untuk contoh ini kita akan menggunakan "myphp" sebagai nama folder).
Buat folder lain bernama "gambar" dengan memasukkan namanya di bidang 'Folder Gambar Default'.
Di bawah Info Lokal, masukkan nilai berikut di bidang:
- Nama situs: nama situs. Untuk digunakan dalam Dreamweaver saja
- Folder root lokal: Ini adalah nama situs tempat Anda akan bekerja. Pastikan untuk memberi nama situs dengan cara meminimalkan konflik, atau membingungkan nama.
- Folder Gambar default: Ini opsional, tetapi disarankan untuk membuatnya sekarang karena sebagian besar situs akan menggunakan gambar sampai batas tertentu. Di sinilah DW akan 'melihat' untuk menyisipkan gambar dalam dokumen Anda selama fase pengkodean.
- Tautan Relatif ke: Ini mendefinisikan bagaimana penautan dokumen di Dreamweaver akan ditangani. Anda dapat memilih Dokumen atau Root. Perbedaan antara keduanya adalah:
  - Relatif Dokumen - Akan menyisipkan jalur relatif ke file yang Anda gunakan dan item yang ditautkan.
  - Root Relative - Penggunaan / yang menyebabkan dokumen / file dihubungkan dengan kaitannya dengan folder ROOT.
  - Alternatif lain adalah menambahkan beberapa konfigurasi ke file konfigurasi server. Menjadi tugas yang lebih maju, kami hanya akan tetap menggunakan Dokumen-relatif untuk saat ini.
- Alamat HTTP: masukkan folder root situs untuk proyek Anda
- Tautan peka huruf besar-kecil: Dreamweaver akan memeriksa apakah ada file dalam proyek ini yang memiliki masalah peka huruf besar saat mengunggah ke server. Pemberitahuan akan ditampilkan ketika Anda menggunakan: Situs -> Periksa Tautan di Seluruh Situs. Anda dapat membiarkannya diperiksa jika Anda mau. Saya pribadi tidak membiarkannya diperiksa karena saya selalu memberi nama file dalam huruf kecil. Huruf besar tidak dianjurkan.
- Cache: Centang Aktifkan cache.
Dalam Info Jarak Jauh halaman, baik atur FTP Anda atau akses lain ke server jauh atau biarkan Akses ke Tidak Ada.
Dalam Server Pengujian halaman pilih opsi yang berhubungan dengan jenis file / sistem yang akan Anda uji.
Kontrol Versi tidak akan digunakan untuk contoh ini sehingga Anda dapat membiarkannya kosong kecuali jika sudah terbiasa.
Cloaking memungkinkan Anda untuk menempatkan .psd, .fla, dan file sumber lainnya dalam folder situs Anda dan DW akan mengabaikannya ketika mengunggah / memperbarui situs Anda.
Catatan Desain ideal untuk tim desain web karena menyimpan catatan tentang perubahan yang dilakukan pada file. Ini diperiksa secara default dan baik bagi kita untuk menggunakan cara ini.
Meninggalkan Kolom Tampilan File, Menyumbang, dan Templat sebagai standar.
Itu Sigap Halaman hanya menunjuk ke folder Aset sigap yang secara otomatis disertakan dengan Dreamweaver. Tidak perlu mengubah ini. Setelah setiap pengaturan selesai, klik baik.

Pratinjau PHP di Dreamweaver

Sekarang buka file PHP dan buat perubahan yang diperlukan untuk itu. Untuk melihat file ini di Dreamweaver secara sederhana tekan F12 dan hasilnya akan ditampilkan di browser default Anda. Anda dapat mengubah di mana browser digunakan Edit -> Preferensi -> Pratinjau di Browser. Ini memungkinkan waktu edit-ke-pratinjau yang lebih cepat, menghilangkan kebutuhan untuk mengetik URL panjang ke bilah browser Anda atau menggunakan perangkat lunak server lain untuk membuat file PHP, yang semuanya menghemat waktu!

Itu saja. Selamat Dreamweaver'ing :-)

Catatan Editor: Posting ini ditulis oleh Jesse Matlock untuk Hongkiat.com. Selama 6 tahun terakhir, Jesse telah membenamkan dirinya dalam desain UI, pengembangan aplikasi, dan tren web. Dia adalah pendiri dan pemimpin desain untuk tim pengembangan kecil, meskipun sangat berbakat yang berfokus pada pengembangan aplikasi yang dipesan lebih dahulu.