Kelebihan: fitur yang lebih baik untuk bekerja dengan CSS; ditingkatkan Photoshop integrasi; Live View baru dan Kode Hidup lebih akurat membuat halaman web dalam Dreamweaver.

Cons: Untuk pengguna Mac, antarmuka baru mengambil alih layar Anda, dan membutuhkan beberapa pelatihan ulang untuk semua pengguna lama.

Penilaian: 85

Dalam versi utama kesepuluh aplikasi profesional, sebagian besar dasar-dasar sudah diurus. Begitu pula dengan Dreamweaver CS4. Versi ini berhasil terus gerakan Dreamweaver terhadap bangunan benar terstruktur, sesuai standar situs Web. Apakah kamu seorang desainer atau programmer web, Dreamweaver CS4 membuat lebih mudah untuk bekerja dengan situs saat ini, berpisah karena mereka antara HTML, CSS, dan file script.Tambahkan integrasi yang lebih kuat dengan Photoshop untuk membuat grafis web, dan ini merupakan upgrade layak bayar.

 

Persiapan
Untuk menjalankan Dreamweaver CS4, Anda harus Windows XP SP2 atau Vista, atau Mac OS X 10.4.11 atau lambat. Pada Mac, Anda juga akan memerlukan G5 PowerPC atau Intel berbasis Macintosh. Saya telah menginstal Dreamweaver CS4 sebagai bagian dari paket Master Collection CS4 di Macintosh dan sebagai program mandiri pada Windows. Instalasi pada Mac Butuh waktu lama (hampir satu jam), seperti yang sekarang akrab ketika menginstal paket aplikasi Adobe. Instalasi Windows memakan waktu jauh lebih sedikit karena ada begitu banyak kurang untuk menginstal.

Hei, ini Tampak berbeda …
Hal pertama yang Anda akan melihat saat Anda membuka program ini adalah antarmuka pengguna tweak. Dreamweaver sekarang menggunakan OWL, cross-platform OS Widget Perpustakaan dimaksudkan untuk menyatukan pengalaman pengguna di semua aplikasi Adobe (Gambar 1).

Gambar 1. Antarmuka Dreamweaver, seperti semua program dalam suite CS4, telah menjadi lebih berorientasi panel, mengusir Bar Insert lama ke dermaga panel di sisi kanan layar, di mana ia menjadi panel Insert. Klik gambar untuk melihat versi yang lebih besar.

Anda dapat menarik panel dari dermaga panel untuk menjadi bebas-mengambang jendela, atau Anda dapat menutup panel untuk ikon untuk ruang dokumen lagi. Mengklik ikon panel menyebabkan panel untuk terbang keluar sehingga Anda dapat menggunakannya (Gambar 2). Anda dapat mengatur panel pun yang Anda suka, dan Anda dapat menghemat ruang kerja Anda sehingga selalu tersedia untuk Anda. Dreamweaver dilengkapi dengan ruang kerja beberapa dioptimalkan untuk desainer, coders, dan pengembang aplikasi.

Gambar 2. Jika Anda membutuhkan real layar lebih nyata, Anda dapat menutup panel untuk ikon. Mengklik ikon panel menyebabkan panel untuk terbang keluar dan muncul. Klik pada gambar untuk melihat versi yang lebih besar.

Salah satu kekurangan pada antarmuka OWL, terutama untuk pengguna Mac, adalah bahwa itu benar-benar ingin mengambil seluruh layar. Ketika saya membuka dokumen pada 20-inch monitor saya, dokumen jendela Dreamweaver, toolbar, dan panel menutupi semua program latar belakang. Anda dapat mengecilkan jendela dokumen, tapi toolbar dan panel tetap keras kepala ke atas, bawah, dan sisi kiri layar Anda. Dengan cara ini, antarmuka bertindak lebih seperti program Windows dimaksimalkan, yang tidak diharapkan perilaku pada Mac dan kadang-kadang mendapat di jalan.

Lama Dreamweaver pengguna mungkin sedikit bingung pada awalnya, karena Insert bar telah menjadi panel Insert. Bahkan, seluruh antarmuka telah menjadi lebih berorientasi panel. Tip: Jika Anda lebih nyaman dengan Insert bar, cukup drag panel Insert keluar dari dermaga panel di sisi kiri layar, dan untuk bagian atas layar Anda, di mana ia akan kembali menjadi Insert bar.

Baru Dreamweaver CS4, Inspektur Properti sekarang memiliki dua tab, HTML dan CSS (Gambar 3). Tergantung pada tab yang sedang, Dreamweaver berlaku sifat dari tipe tersebut. Sebagai contoh, jika Anda berada di tab HTML dan klik tombol Italic, Dreamweaver menerapkan gaya menggunakan tag <em> HTML. Jika Anda pada tab CSS dari Property Inspector dan klik tombol Italic, Dreamweaver menuntun Anda melalui menciptakan aturan CSS gaya baru untuk seleksi.

Gambar 3. Inspektur Properti sekarang dibagi menjadi dua tab, satu untuk sifat HTML dan lainnya, ditampilkan di sini, yang membantu Anda menerapkan gaya CSS.Klik pada gambar untuk melihat versi yang lebih besar.

Adobe telah dihapus beberapa fitur dari program yang baik usang atau tidak sejalan dengan praktik terbaik saat ini untuk membangun situs Web.Modus Tabel tua Layout adalah pergi, dan baguslah, karena berbasis CSS layout adalah cara untuk pergi untuk situs modern. Sekarang-fitur lainnya termasuk Baris Waktu berangkat; alat Peta Situs; perilaku server untuk ASP NET dan JSP;. Dan Tombol Flash dan Teks Flash.

Apa yang Anda Lihat Adalah Whole Lot Mendekati Apa yang Anda akan Dapatkan
desainer Web telah lama harus bersaing dengan perbedaan rendering HTML dan CSS antara browser. Halaman yang tampak hebat di Firefox, misalnya, mungkin tampak mengerikan di Internet Explorer. Di masa lalu, tampilan Design Dreamweaver diberikan halaman – semacam – tetapi Anda masih harus melihat dulu halaman Web di beberapa browser untuk melihat apa yang mereka benar-benar akan terlihat seperti untuk pengguna (Gambar 4).

Gambar 4. Design View Dreamweaver hanya menunjukkan tabel dasar dan tidak membuat efek CSS terlampir dan file JavaScript. Klik pada gambar untuk melihat versi yang lebih besar.

Dreamweaver CS4 berjalan jauh menuju WYSIWG benar dengan Live View yang baru. Memasukkan WebKit, cross-platform rendering mesin yang digunakan oleh Apple Safari dan Google Chrome browser, Live View memberi Anda pandangan yang jauh lebih akurat, tepat di Dreamweaver, tentang bagaimana halaman Anda akan terlihat di browser yang mendukung standar Web (Gambar 5). Bahkan membuat CSS dan menjalankan JavaScript. Perancang bijaksana masih akan melihat dulu halaman di semua browser yang target situs anda, tetapi dengan Live View, Anda bisa mendapatkan lebih jauh, lebih cepat saat mengembangkan situs Anda.

Gambar 5. Bila Anda beralih ke Live View, Dreamweaver berisi gaya CSS diterapkan ke meja, dan Anda dapat melihat bahwa baris di bawah kursor disorot, berkat kombinasi dari JavaScript dan CSS. Klik pada gambar untuk melihat yang lebih besar versi.

Kode Live baru melengkapi Live View, karena ketika Anda nyalakan, ia membagi jendela (Dreamweaver menambahkan split vertikal ke horisontal Lihat saja split sebelumnya) sehingga kode Anda dalam satu jendela dan Live View yang lain. Dengan Kode Live, Anda dapat berinteraksi dengan halaman di panel Live View sebagai pengguna akan di browser, dan melihat bagaimana tindakan Anda menghasilkan kode baru di browser di panel Kode Live (Gambar 6). Anda dapat bahkan sementara mengunci kode saat melakukan tindakan tertentu untuk memecahkan masalah.

Gambar 6. Dalam Kode Live, layar perpecahan dan Anda dapat melihat bagaimana JavaScript adalah menulis ulang kode HTML dengan cepat. Jika Anda melihat dekat pada kelas di panel Kode untuk Sgt. Itu lada, Anda akan melihat bahwa kelas telah berubah menjadi “aneh atas” karena kursor pada panel Live View selesai entri untuk album itu. Klik pada gambar untuk melihat versi yang lebih besar.

Menemukan Kode Anda
joki Kode juga akan senang dengan dua fitur baru lagi yang membantu Anda menemukan dan mengubah kode lebih cepat. Related Files menunjukkan nama-nama file dukungan yang sering melekat pada halaman HTML (seperti file CSS atau script) dalam toolbar berguna di bagian atas jendela dokumen (Gambar 7). Mengklik salah satu nama switch Dreamweaver ke Split melihat dan membuka dokumen dalam pane Kode.

Gambar 7. Bar Related Files membuatnya mudah untuk melompat ke CSS terpasang atau file JavaScript, dan untuk menampilkan kode sumber untuk halaman HTML Anda. Klik pada gambar untuk melihat versi yang lebih besar.

Jika Anda pernah menghabiskan waktu melacak stylesheet yang terkait mempengaruhi elemen tertentu pada halaman Web, maka Navigator Kode baru adalah untuk Anda. Bila Anda menempatkan kursor di atas sebuah elemen dan Alt-klik (Option-klik di Mac), jendela Navigator Kode muncul, menampilkan stylesheet terkait (s) dan aturan yang berlaku untuk elemen (Gambar 8).

Gambar 8. Bila Anda ingin cepat menemukan properti untuk elemen tertentu pada halaman Anda, Navigator Kode memudahkan.

Melayang di atas sebuah aturan muncul tooltip dengan sifat aturan itu.Mengklik nama aturan yang beralih Dreamweaver ke Split View, dengan stylesheet aturan di panel Code, dan kursor ditempatkan dalam aturan, siap untuk diedit. Kode Navigator adalah alat yang hebat ketika Anda sedang membangun atau mempertahankan situs, terutama jika Anda mengambil alih situs dari desainer lain dan mencoba untuk mencari tahu struktur gaya.

Jika Anda bekerja pada situs besar yang menggunakan sistem kontrol versi Subversion, Dreamweaver sekarang dapat bertindak sebagai klien Subversion terbatas untuk memeriksa file dan keluar dari repositori.Namun, itu bukanlah pengganti untuk sebuah program klien Subversion penuh.

Mendapatkan Chaumiere dengan Photoshop
Tidaklah mengherankan bahwa Adobe telah membawa integrasi lebih dekat antara Dreamweaver CS4 dan pembangkit tenaga listrik grafis, Photoshop. Dalam Dreamweaver CS3, Anda dapat menyalin gambar (dan lapisan gambar) di Photoshop dan paste ke dalam tata letak halaman Web Anda dalam Dreamweaver, setelah langkah konversi di mana Anda tentukan format grafis yang Anda inginkan (PNG, JPEG, atau GIF).

Dalam Dreamweaver CS4, Anda dapat menempatkan dokumen Photoshop langsung ke dalam program, di mana ia menjadi Smart Object; yaitu, ia mempertahankan link ke file asli Photoshop PSD (Gambar 9)..

Gambar 9. Panah melengkung merah menunjukkan bahwa Photoshop ditempatkan grafis tidak sinkron dengan dokumen Photoshop asli.

Ketika psd file. Diperbarui, Dreamweaver mengakui bahwa mereka telah berubah dan memberitahu Anda untuk memperbarui salinan dalam dokumen Dreamweaver (Gambar 10). Ini berarti bahwa Anda dapat menggunakan satu file PSD. Di halaman berbeda dari situs Anda. Bila Anda memperbarui file Photoshop, Anda akan memperbarui semua salinan seluruh situs sekaligus.

Gambar 10. Ketika grafis pada halaman Web Anda dan dokumen Photoshop asli di sync, panah melengkung keduanya hijau.

Lihat Ma, Database Tidak!
Dreamweaver telah lama memiliki kemampuan untuk antarmuka dengan database server-side untuk membuat situs Web dinamis, tetapi hal ini membutuhkan database yang serius dan pengetahuan pemrograman.

Baru Dreamweaver CS4 tersebut HTML Data set fitur memungkinkan Anda untuk menyimpan data Anda dalam sebuah tabel HTML standar, serangkaian tag div, atau daftar unordered. Melalui wizard, Anda mengintegrasikan data ke tabel dinamis yang ditampilkan dengan menggunakan kerangka sigap untuk Ajax. Sigap adalah Adobe JavaScript dan CSS perpustakaan yang memungkinkan Anda menempatkan elemen antarmuka pengguna atau efek pada halaman Anda Dreamweaver. Wizard memberikan Anda beberapa pilihan untuk menampilkan data, dan ketika pengguna memuat halaman Anda, mereka dapat berinteraksi dengan halaman untuk menyortir atau menampilkan informasi rinci, ditarik dengan cepat dari dokumen data.

Hal yang menarik dari kumpulan data HTML adalah bahwa orang lain tanpa keterampilan tata letak dapat memperbarui dokumen data. Berkat halaman dinamis yang dihasilkan oleh sigap, hasilnya akan tetap terlihat bagus.

Salah satu perkembangan menarik yang muncul setelah Dreamweaver dikirim adalah tersedianya berbagai widget dari kerangka JavaScript lainnya pada situs Bursa Adobe Web, termasuk widget berdasarkan Yahoo Antarmuka Library (YUI), jQuery, dan MooTools. Hal ini menunjukkan bahwa Adobe Dreamweaver ingin memberikan pengguna akses ke hasil kerja pengembang lain. Sebelumnya, jika Anda ingin mengambil keuntungan dari setiap kerangka JavaScript selain sigap, Anda perlu untuk mengintegrasikan dalam Tampilan Kode Dreamweaver. Sekarang, Anda dapat melakukannya tanpa perlu menggali ke dalam kode, setelah Anda menginstal pihak ketiga widget dengan Extension Manager yang disertakan, mereka muncul di panel Insert Dreamweaver.

Untuk Upgrade atau Tidak?
Harga untuk Dreamweaver tidak berubah: Ini $ 399 untuk pembeli baru, dan $ 199 untuk upgrade dari Dreamweaver MX 2004 atau lambat, atau GoLive 5 atau lambat. Upgrade dari produk mandiri ke suite CS4 lebih kompleks, mulai dari $ 599 ke $ 1.399, tergantung pada versi suite yang Anda inginkan. Lihat situs web Adobe untuk rincian lengkap.

Dreamweaver CS4 masih memerintah sebagai program desain Web terkemuka, dan pemilik Dreamweaver 8 atau sebelumnya tidak perlu ragu untuk meng-upgrade. Dreamweaver CS3 pemilik memiliki keputusan yang sedikit lebih sulit, tetapi jika Anda melakukan banyak membangun situs dari awal, penanganan yang lebih baik dari CSS, Live View, File Terkait, dan Navigator Kode akan menghemat banyak waktu dan cepat harus membenarkan meningkatkan biaya.

 

SEMOGA BERMANFAAT  🙂

 

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s