Laman » Reka Bentuk Web » 10 Tips & Trik Dreamweaver yang berguna untuk Pemula

    10 Tips & Trik Dreamweaver yang berguna untuk Pemula

    Seorang pengguna Dreamweaver pasti akan menganggap ia sebagai kuasa besar. Dikemas dengan ton ciri, pilihan dan salah satu daripada IDE yang paling terkenal (Persekitaran Pembangunan Bersepadu) di pasaran hari ini. Ia mungkin tidak memenuhi kriteria yang dikehendaki oleh sesetengah pemaju, Dreamweaver tidak dapat dinafikan menyediakan rangkaian pembangunan, kolaborasi dan pengekodan yang baik. Pilihan dan alat ini tersembunyi di bawah lapisan yang disesali dengan menu kurang intuitif, sebab itu kami menyediakan tutorial dalam catatan hari ini.

    Kami akan menunjukkan kepada anda beberapa fungsi Dreamweaver yang paling berkuasa untuk membantu akses anda dengan cepat, bersama dengan banyak helah membantu yang akan melancarkan masa pembangunan anda dan meningkatkan kualiti kod anda dengan ketara. Senarai penuh selepas melompat.

    1. Paparan Dinamik dengan “Siaran langsung”

    Kami sudah tahu bahawa DW menawarkan pandangan statik fail terbuka kami, tetapi bagaimana pula "pandangan dinamik" daripada aplikasi seperti WordPress?

    Pertama, kita perlu beritahu DW apa tetapan yang hendak digunakan untuk membentangkan kami"pandangan dinamik" betul. Untuk melakukan ini, pilih Tetapan Permintaan HTTP daripada Lihat> Pilihan Lihat Langsung menu, kemudian masukkan GET atau POST parameter yang anda perlukan untuk melihat aplikasi anda dengan betul.

    Kemudian dengan beralih ke Siaran langsung di DW, ia menggantikan yang lama Paparan Reka Bentuk panel dengan pemaparan Webkit yang sempurna pada piksel anda; lengkap dengan Javascript langsung, manipulasi DOM, pertanyaan pangkalan data, kod sisi pelayan, dan CSS yang diberikan, dan bukannya ikon tempat letak tempat yang anda lihat dalam Paparan Reka Bentuk.

    2. "Kod Navigator" adalah Firebug DW

    Mengambil langkah seterusnya adalah semua tentang Navigator Kod dan apabila di Siaran langsung tetingkap, klik ALT (Command-Option-clicking for Mac) di mana sahaja di tetingkap, dengan segera membentangkan kod yang diberikan item itu. Sama dengan apa yang anda mungkin lihat pada Firefox / Firebug.

    3. Pembekuan JavaScript

    Disebabkan sifat dinamik Ajax, banyak kali kita perlu berinteraksi dengan halaman di mana item tertentu tidak diberikan atau tersedia pada muatan halaman pertama. Ini adalah item yang disuntik ke dalam halaman beberapa waktu selepas beban halaman. Contohnya:

    Anda mungkin mahu menukar gaya tip alat yang dilaksanakan sepenuhnya dalam JavaScript. Sebelum hari ini, anda perlu mencari secara teratur cara anda melalui skrip anda untuk mencari apa yang sedang dibuat dan di mana.

    Sebaliknya, cuba ini:

    Berikan halaman anda dalam Siaran langsung, kemudian tekan F6 untuk membekukan JavaScript pada bila-bila masa, membolehkan anda menyasarkan dan membedah kod yang berkaitan dengan sebarang item dinamik di halaman.

    4. Rakan Best Next Next - "Kod Langsung"

    Apabila menggunakan Siaran langsung, anda juga boleh menghidupkan Kod Hidup. Kod Hidup akan mengemas kini kod anda semasa anda melayang, klik dan berinteraksi dengan elemen dan item dalam Tetingkap Live View!

    5. Penyempurnaan JavaScript Automatik

    Dreamweaver dilengkapi dengan penyelesaian HTML dan kod CSS yang cerdas dan lengkap, tetapi bagaimana dengan Javascripts? Jika anda kod jQuery atau Prototaip dalam Dreamweaver, maka anda harus tahu terdapat sambungan API yang menyediakan penyiapan kod Javascript. Ia mengurangkan menaip yang diperlukan dan boleh didapati dengan sangat berguna untuk coders cepat.

    Klik di sini untuk membaca lebih lanjut, atau muat turun:

    • lanjutan API jQuery untuk Dreamweaver
    • Pelanjutan prototaip API untuk Dreamweaver

    6. Mencipta Kod Pada Fly

    Adakah halaman kod anda kelihatan seperti baris kod yang tidak teratur? Menggunakan Terapkan Pemformatan Sumber ciri dan mengubahnya dengan tepat keutamaan anda. Untuk dengan cepat membersihkannya, klik Kod Sumber Format ikon di bahagian bawah Bar alat coding (Edit> Toolbars> Coding) dan pilih Tetapan Format Kod untuk menetapkan pemformatan pilihan anda.

    Anda juga boleh mengakses pilihan pemformatan dari Perintah> Terapkan Pemformatan Sumber atau hanya memohon kepada kod pilihan kod dengan memilih Terapkan Pemformatan Sumber untuk Pemilihan pilihan.

    7. Dapatkan widgety

    Cuma klik Luaskan ikon Dreamweaver (ia kelihatan seperti gear) di Bar Aplikasi anda dan pilih Semak imbas untuk Widget Web. Ini akan membawa anda ke Adobe Exchange di mana anda boleh mencari widget tambahan dari vendor seperti Yahoo !, JQuery, dan banyak lagi.

    8. Subversion & Dreamweaver

    Dan ya, Dreamweaver tidak menyokong Subversion (SVN). Bagi pemaju yang menggunakan SVN untuk mengekalkan kawalan semakan projek mereka, ini boleh menjadi berita baik. Pembangun Dreamweaver Andrew Voltmer berbincang bagaimana anda boleh menggunakan Subversions dengan Dreamweaver.

    9. Tiada Gaya Lebih Berlebihan

    Ramai orang menggunakan Dreamweaver sebagai cara untuk mengemas kini kandungan secara visual, seperti pemproses perkataan. Sebelum Dreamweaver CS4, ini boleh menyebabkan peraturan CSS berlebihan seperti .kelas1, .kelas2, dan sebagainya. Dalam Dreamweaver CS4, tukar sahaja Inspektor Harta kepada HTML mod (klik ikon HTML di sebelah kiri Inspektor) dan anda akan mengucapkan selamat tinggal kepada semua CSS yang berlebihan, memasukkan hanya markup HTML yang sesuai.

    10. Borang Pengesahan dibuat mudah

    Mahu mengesahkan medan borang anda, tetapi bimbang bahawa anda perlu membina semula dari awal? Tidak risau. Hanya pilih elemen borang sedia ada, seperti medan teks, dan gunakan a Widget Pengesahan Spry daripada Masukkan> Spry menu. Kemudian mengawal keperluan pengesahan seperti aksara minimum atau maksimum terus dari Pemeriksa hartanah.

    Bonus: 3 lagi

    11. Akses Fail Terkait dengan Mudah

    Apabila anda membuka fail HTML atau PHP, anda kini akan melihat satu barisan nama fail yang bergantung kepada, seperti CSS, Javascript dan juga termasuk fail untuk PHP, di bahagian atas tetingkap dokumen. Anda boleh dengan mudah beralih ke fail ini, membuat perubahan dan menyimpannya, semuanya tanpa membukanya. Apabila anda mengklik sebarang fail dalam bar Fail Berkaitan, anda akan melihat sumbernya dalam paparan Kod dan halaman ibu bapa dalam paparan Reka Bentuk. Atau gunakan Kod Navigator untuk mengakses kod sumber CSS dengan cepat yang memberi kesan kepada pilihan semasa anda.

    12. Semak keserasian pelayar

    Buka dokumen yang anda ingin periksa keserasian; dari bar menu yang sama di mana pandangan Kod / Split / Reka bentuk boleh diakses, lihat ke kanan untuk 'Semak Halaman'butang.

    Memasangnya akan mengembangkan menu lungsur turun, pilih 'Semak Keserasian Pelayar'. The Tetingkap keputusan Keserasian Pelayar akan dipaparkan di bahagian bawah tetingkap dengan mana-mana isu yang perlu anda hadapi.

    Nota: Ini TIDAK akan memeriksa versi baru IE pada Mac! Untuk memilih pelayar mana yang hendak digunakan untuk ujian, pilih Semak Halaman > Tetapan dari menu.

    13. Pratonton Laman PHP

    Dreamweaver membolehkan anda menjalankan dan mempratonton kod PHP dalam perisian. Inilah caranya untuk mendapatkannya.

    Bermula

    1. Pertama, pilih Tapak -> Tapak Baru dari navigasi atas.
    2. Anda akan melihat kedua-dua Asas dan Definisi Tapak Lanjutan tab pilihan. Mari kita lanjutkan dengan memilih Tab Definisi Tapak Lanjutan.
    3. Masukkan nama folder untuk tapak dalam kotak yang bersesuaian (untuk contoh ini kita akan menggunakan "myphp" sebagai nama folder).
    4. Buat folder lain bernama "imej" dengan memasukkan namanya dalam medan 'Folder Imej Default'.
    5. Di bawah Maklumat Tempatan, masukkan nilai berikut dalam bidang:
      • Nama Tapak: nama tapak. Untuk digunakan dalam Dreamweaver sahaja
      • Folder akar setempat: Ini adalah nama laman web yang akan anda kerjakan. Pastikan nama tapak untuk meminimumkan konflik, atau nama-nama yang mengelirukan.
      • Folder Imej lalai: Ini adalah pilihan, tetapi dinasihatkan untuk membuatnya sekarang kerana kebanyakan laman web akan menggunakan imej sedikit. Di sinilah DW akan 'melihat' untuk memasukkan imej dalam dokumen anda semasa fasa pengekodan.
      • Pautan Berkaitan dengan: Ini mentakrifkan cara menghubungkan dokumen dalam Dreamweaver akan ditangani. Anda boleh memilih Dokumen atau Root. Perbezaan antara keduanya adalah:
        • Dokumen Relatif - Akan memasukkan laluan relatif kepada fail yang anda sedang kerjakan dan item yang dipautkan.
        • Root Relative - Kegunaan / yang menyebabkan dokumen / fail dikaitkan berhubung dengan folder ROOT.
        • Alternatif lain ialah menambahkan beberapa konfigurasi ke fail konfigurasi pelayan. Sebagai tugas yang lebih maju, kami hanya akan menggunakan Dokumen-relatif untuk sekarang.
      • Alamat HTTP: masukkan folder root tapak untuk projek anda
      • Pautan sensitif kes: Dreamweaver akan memeriksa sama ada apa-apa fail dalam projek itu boleh mempunyai masalah Kes sensitif apabila memuat naik ke pelayan. Pemberitahuan akan dipaparkan apabila anda menggunakan: Tapak -> Semak Pautan Sitewide. Anda boleh meninggalkannya jika anda mahu. Saya secara peribadi tidak membiarkannya diperiksa kerana saya selalu menamakan fail dalam huruf kecil. Huruf huruf besar tidak disyorkan.
      • Cache: Periksa Enable cache.
    6. Di dalam Maklumat Jauh halaman, sama ada menyiapkan FTP anda atau akses lain ke pelayan jauh atau meninggalkan Akses ke Tiada.
    7. Di dalam Server Pengujian halaman pilih pilihan yang berkaitan dengan jenis / sistem fail yang akan anda uji.
    8. Kawalan Versi tidak akan digunakan untuk contoh ini supaya anda boleh membiarkannya kosong kecuali biasa dengannya.
    9. Cloaking membolehkan anda meletakkan .psd, .fla, dan fail sumber lain dalam folder tapak anda dan DW akan mengabaikannya semasa memuat naik / mengemaskini tapak anda.
    10. Nota Rekabentuk adalah sesuai untuk pasukan reka bentuk web kerana ia menyimpan nota mengenai perubahan yang dibuat pada fail. Ia diperiksa secara lalai dan baik untuk kami menggunakan cara ini.
    11. Tinggalkan Lajur View File, Sumbang, dan Templat sebagai lalai.
    12. The Spry halaman hanya menunjuk ke folder aset Spry yang dimasukkan secara automatik dengan Dreamweaver. Tidak perlu mengubah ini. Apabila setiap tetapan selesai, klik okey.

    Pratonton PHP dalam Dreamweaver

    Kini buka fail PHP dan buat perubahan yang diperlukan. Untuk melihat fail ini dalam Dreamweaver semata-mata tekan F12 dan hasilnya akan dipaparkan dalam penyemak imbas lalai anda. Anda boleh menukar pelayar mana yang digunakan Edit -> Keutamaan -> Pratonton dalam Penyemak Imbas. Ini membolehkan masa edit hingga pratonton yang lebih cepat, menghapuskan keperluan untuk mengetik URL lama ke dalam bar penyemak imbas anda atau menggunakan perisian pelayan lain untuk menjadikan fail PHP, yang semuanya menjimatkan masa!

    Itu sahaja. Happy Dreamweaver'ing :-)

    Nota editor: Jawatan ini ditulis oleh Jesse Matlock untuk Hongkiat.com. Selama 6 tahun yang lalu, Jesse telah merenung dirinya dalam reka bentuk UI, pembangunan app dan trend web. Beliau adalah pengasas dan rekaan reka bentuk untuk pasukan pembangunan kecil, walaupun sangat berbakat yang memberi tumpuan kepada pembangunan aplikasi yang lebih awal.