10 Tips & Trik Dreamweaver Sederhana Tapi Bermanfaat untuk Pemula

Adobe Dreamweaver adalah alat yang ampuh untuk desainer web. Dreamweaver menyediakan permukaan desain visual dan editor kode untuk mengembangkan situs web. Meskipun memiliki pro dan kontra, berbagai fiturnya memungkinkan Anda membangun situs web secara efektif.

Berikut adalah 10 tips dan trik Dreamweaver sederhana namun bermanfaat untuk pemula.

1. Hapus jeda baris:

Saat menyalin teks dari dokumen, email atau file Word ke Dreamweaver Anda berakhir dengan jeda baris di akhir paragraf atau baris. Karakter pemutus tautan <br> menandakan akhir baris, jadi teks apa pun setelahnya akan ditampilkan pada baris di bawahnya. Karakter ini tidak terlihat sehingga sulit untuk menghapusnya. Meskipun Dreamweaver tidak biasanya menyorot karakter ini, Anda dapat mengubah pengaturan di menu preferensi untuk membuat program menampilkan ikon kuning kecil yang menunjukkan jeda baris. Setelah jeda baris terlihat, Anda dapat dengan mudah menghapusnya.

2. Ingatlah untuk mendefinisikan sebuah situs:

Orang sering bingung bekerja di Dreamweaver sebagai bekerja dengan dokumen kata. Namun, mendesain situs bukan tentang membangun satu file, ini tentang membangun situs dengan kumpulan file yang saling terkait seperti gambar, file JavaScript, Halaman Web, dan file CSS. Pengguna yang tidak memahami hal ini sering melupakan pentingnya menyiapkan situs. Dreamweaver menyediakan proses pengaturan situs yang mudah. Ini memberikan informasi tentang lokasi file situs Anda dan memungkinkan Anda memilih salah satu dari banyak alat manajemen Dreamweaver. Alat-alat ini mentransfer file Anda ke server Web Anda, memeriksa tautan yang rusak, dan membangun situs dengan templat.

3. Tingkatkan ukuran font kode Anda:

Dengan fitur Dreamweaver untuk menyesuaikan ukuran font Anda, Anda dapat meningkatkan ukuran kode dalam beberapa langkah mudah. Untuk memperbesar ukuran font pertama pilih Dreamweaver > Preferences lalu klik kategori Font setelah itu pilih ukuran baru dan klik OK. Ini akan membantu Anda membuat kode mudah dibaca dan Anda dapat bekerja mengembangkan situs web Anda untuk jangka waktu yang lama tanpa melelahkan mata Anda.

4. Matikan latar belakang CSS Singkatan:

Salah satu fitur CSS adalah properti background. Fitur ini memungkinkan Anda untuk menambahkan warna atau gambar ke latar belakang Anda. Properti singkatan latar belakang Dreamweaver memperpendek kode 3 baris menjadi hanya satu baris yang mendefinisikan properti gambar, warna, dan pengulangan. Hal ini tentu dapat mempermudah untuk menentukan properti latar belakang tetapi jika Anda meninggalkan satu properti dalam versi singkatan, browser web akan memperlakukannya sebagai "tidak ada". Misalnya, saat mengubah latar belakang jika Anda hanya menentukan properti gambar, browser web akan menghapus warna yang ada dari latar belakang sebelumnya. Oleh karena itu, lebih baik untuk menonaktifkan singkatan latar belakang CSS untuk menghindari masalah ini.

5. Salin gaya dengan CSS Designer:

Dengan CSS Designer Anda dapat meningkatkan gaya pada halaman web Anda secara visual. Jika Anda ingin menggunakan lebih banyak fitur desainer CSS, klik kanan pada pemilih mana pun untuk menggunakan operasi salin atau duplikat. Opsi ini memungkinkan Anda untuk menyalin gaya dari satu pemilih ke pemilih lainnya. Gaya ini termasuk latar belakang, teks, animasi atau perbatasan. Jika Anda ingin menyalin seluruh pemilih, gunakan duplikat standar atau duplikat ke perintah kueri media untuk pendekatan yang ditargetkan. Pintasan ini akan menghemat banyak waktu Anda dan juga mempertahankan gaya yang konsisten.

6. Hilangkan bilah navigasi:

Adobe Dreamweaver CS5 hadir dengan toolbar navigasi browser. Toolbar ini dibuat untuk digunakan dengan opsi live view Dreamweaver. Anda dapat menemukan kedua opsi ini di jendela dokumen. Live view digunakan untuk melihat preview halaman web Anda. Dengan tampilan langsung, Anda dapat mengklik tautan dan pindah ke halaman tertentu. Bilah alat navigasi menampilkan lokasi halaman baru dan memungkinkan Anda menavigasi antar halaman dengan mudah. Anda dapat menyembunyikan bilah alat ini saat tidak digunakan dengan menghapus centang pada opsi navigasi Peramban di bagian Tampilan > Bilah Alat.

7. Kelola file Anda:

Semua file ada di panel Files saat Anda membuat situs dengan Dreamweaver. Anda dapat menggunakan panel file ini untuk banyak fungsi seperti mengganti nama, memindahkan, dan menyorot nama file. Ini mungkin umum dan Anda mungkin tahu semua ini tetapi halaman web berbeda dari file biasa. Halaman web memiliki gambar, tautan ke halaman Web lain, dan gaya CSS dari file lembar gaya eksternal. Mengganti nama gambar, halaman web, atau file CSS secara normal melalui Windows explorer dapat mengakibatkan tautan rusak. Sedangkan Dreamweaver memungkinkan Anda untuk memperbarui tautan secara otomatis jika Anda memindahkan atau mengganti nama file menggunakan panel file. Dengan cara ini tidak ada link yang rusak.

8. Pilih pemilih Tag:

Saat menerapkan gaya kelas CSS, menambahkan atau menghapus tag dengan presisi bisa jadi sulit. Untuk memilih garis yang tepat, pemilih tag Dreamweaver adalah yang terbaik. Pemilih tag ditempatkan di kiri bawah jendela dokumen. Pemilih ini menampilkan semua HTML dan tag lain yang ada di sekitar teks. Anda dapat memilih tag tertentu dengan mengklik tag yang tersedia di bilah pemilih tag. Tag yang disorot menunjukkan bahwa tag dipilih.

9. Gunakan cuplikan:

Dreamweaver menyediakan cuplikan yang merupakan bit inti kode yang dapat menghemat banyak waktu. Cuplikan disinkronkan melalui Creative Cloud yang memastikannya tersedia di setiap sistem. Anda dapat menetapkan yang paling sering digunakan sebagai pintasan keyboard. Jika Anda ingin mengedit pintasan, buka desain pintasan keyboard dan duplikat set standar. Kemudian, pilih kategori cuplikan di bawah bagian perintah untuk memilih favorit Anda. Anda kemudian akan menemukan daftar semua cuplikan yang tersedia termasuk yang Anda buat. Bagian tersulit adalah mencari tahu kombinasi keyboard mana yang tidak digunakan. Tapi ini bisa diselesaikan dengan menggunakan pengubah.

10. Hubungkan WordPress dan Dreamweaver:

Dreamweaver dan WordPress menjadi tim yang hebat. Anda dapat mendesain dan memodifikasi halaman WordPress dengan perangkat file dinamis Dreamweaver. Perangkat ini mencakup filter khusus, file yang terkait secara dinamis, dan petunjuk kode khusus situs. Bagian yang sulit adalah untuk mengetahui bagaimana bekerja dengan halaman situs lain dengan Dreamweaver. Anda harus terlebih dahulu memulai dengan file index.php yang ada di root situs WordPress dan menavigasi dari sana. Anda dapat menambahkan jalur langsung ke alamat web atau menggunakan fitur Dreamweaver untuk mengklik tautan. Setelah halaman ditampilkan, CSS dan alat lain di Dreamweaver berada dalam kendali Anda.

Adobe Dreamweaver sangat bagus untuk membangun situs web. Seiring dengan fitur dasar seperti penyelesaian kode, penciutan kode, dan penyorotan sintaks, ia hadir dengan beberapa fitur lanjutan seperti introspeksi kode dan pemeriksaan sintaks waktu nyata. Kiat-kiat yang disebutkan ini akan membantu Anda membangun situs web Anda dengan lebih efisien. Jika Anda mencari alat untuk membangun situs web tanpa banyak pengkodean, lihat alat pembuatan situs web ini.