1. Analisis latar belakang
Untuk produsen halaman web profesional yang ingin membuat halaman web kompleks dalam lingkungan visual, Dreamweaver secara bertahap muncul sebagai alat pengeditan halaman web dan menjadi pilihan terbaik bagi para profesional untuk menulis halaman web. Menurut survei Macromedia, Dreamweaver saat ini memiliki lebih dari 700.000 pengguna, menempati peringkat pertama di antara alat pengeditan web dalam hal pangsa, meninggalkan pesaing seperti "Adobe GoLive" dan "NetObjects Fusion" jauh di belakang. Oleh karena itu, secara umum jumlah pengguna Dreamweaver diperkirakan akan terus meningkat.
Di bawah tingkat popularitas yang luar biasa ini, dapat dibayangkan bahwa fungsi bawaan Dreamweaver menjadi semakin melimpah, kaya, dan lengkap. Pada perkenalan kita kali ini, terdapat beberapa fitur baru yang memberikan pembuat halaman web desain yang lebih cepat, pengkodean yang lebih mudah, dan fungsi yang lebih terintegrasi. Tanpa basa-basi lagi, berikut kami perkenalkan cara memanfaatkan beberapa fungsi di Dreamweaver dengan baik. Ada dua belas teknik rahasia di bawah ini, yang dapat dibagi menjadi empat tema. Diantaranya: mendesain halaman web (Dreamweaver memiliki fungsi desain halaman yang fleksibel), menggunakan Dreamweaver dengan produk Macromedia lainnya (membuat animasi dan gambar tanpa meminta bantuan), menyesuaikan antarmuka pengguna (menikmati pengalaman pengguna yang dipersonalisasi), dan terakhir bergabung dengan Dreamweaver Extensions ( memuat fitur-fitur canggih yang diperluas ke halaman web).
2. Tips untuk mendesain halaman web.
Apakah Anda ingin menggunakan sintaks HTML asli untuk menulis halaman web kata demi kata, atau menggunakan jendela standar untuk desain visual halaman web, tips berikut mungkin berguna.
Tip 1: Jadikan ukuran halaman web lebih fleksibel.
Beberapa pengembang web menyebut teknik yang diperkenalkan di bawah ini "cair", tetapi di sini mereka menyebutnya "teknik ekstensi elastis". Ini adalah teknik yang menyesuaikan ukuran halaman web ketika ukuran jendela browser pengunjung berubah. Oleh karena itu, jika jendela terlalu besar, tidak akan ada ruang kosong; jika jendela terlalu kecil, maka akan bergerak ke atas dan ke bawah bilah tidak akan muncul di tepinya. Faktanya, sebagian besar halaman web sederhana akan secara otomatis menyesuaikan ukuran halaman sesuai dengan ukuran jendela browser. Namun, jika banyak bingkai dan tabel berbeda digunakan di halaman web, akan sulit untuk menyesuaikan ukuran halaman web secara otomatis disesuaikan secara fleksibel. Biasanya desainer web akan menggunakan campuran bingkai dengan lebar tetap dan gambar GIF sebagai interval untuk mendesain halaman web. Dengan cara ini, baik menggunakan Internet Explorer atau Netscape Navigator, ukuran halaman akan tetap dan tidak akan hilang. Dengan Dreamweaver 4.0, Anda dapat dengan mudah mendesain halaman web yang secara otomatis akan menyesuaikan secara fleksibel. Bagaimana cara melakukannya?
★Metode khusus: Gunakan tombol pada palet alat (Palet objek) untuk membuka halaman web dan beralih ke "Tampilan tata letak". Saat ini, Anda dapat melihat lebar kolom kotak teks. Ada panah drop-down kecil di tengah kotak di atas setiap kolom. Klik panah kecil di atas kolom yang ingin Anda atur tampilan fleksibelnya, lalu pilih "Tetapkan Kolom sebagai Jadikan Kolom Autostretch. (Atur lebar kolom penyesuaian otomatis menjadi terbatas pada satu kolom) Saat ini, garis bergelombang akan muncul di atas kotak kolom, bukan angka asli yang menunjukkan lebar kolom. Dreamweaver secara otomatis akan membuat gambar kosong dengan tata letak tetap. Gambar kosong ini diwakili oleh dua tabel kosong panjang di atas kolom. (Saat Anda menambahkan gambar kosong untuk pertama kalinya, kotak dialog akan muncul menanyakan apakah Anda ingin menggunakan gambar bawaan. Untuk efek terbaik, kami menyarankan Anda membiarkan Dreamweaver secara otomatis membuatnya, jika tidak, Anda tidak perlu melakukannya. perlu menggunakan gambar kosong untuk mengisi tata letak.)
Tip 2: Membuat Palet Pribadi
"Panel Aset" baru Dreamweaver (panel kontrol properti) adalah alat baru yang dapat mengelola file sesuai dengan format file, seperti gambar, gaya, dll. , saat mengedit situs web.
★Metode khusus: Saat Anda menentukan situs baru (klik Situs Situs Baru), semua jenis objek akan secara otomatis ditambahkan ke kotak tabel yang sesuai di "Panel Aset". Panel kontrol properti "Panel aset" yang baru ditambahkan ini juga memiliki kotak warna, yang menyimpan semua warna yang digunakan di situs web Anda, termasuk warna teks, warna latar belakang, dan warna hyperlink. Ini adalah palet warna navigasi situs web yang disesuaikan untuk pengguna. Cukup luncurkan "Panel Aset" (pilih "Jendela" terlebih dahulu lalu klik "Aset"), lalu klik gulir warna kecil di sebelah kiri, dan Anda akan melihat berbagai pilihan warna untuk situs web Anda. Tentu saja Anda dapat menarik warna-warna ini ke teks tertentu yang dipilih. Bahkan ketika Anda memilih warna tertentu, nilai heksadesimal kerapatan warna dan tiga kode kontras warna primer (RGB) akan muncul di layar. Jika Anda ingin memperkecil toolbar palet, Anda bahkan dapat menambahkan warna tertentu saja ke "favorit" palet. Cukup sorot warna yang dipilih dan klik tombol "Tambahkan ke Favorit" di jendela (tombol kanan bawah), dan selesai.
Tip 3: Membuat Sistem Navigasi Menu Pop-up
Awalnya, membuat Sistem Navigasi Menu Pop-up memerlukan banyak sintaks dan teknik JavaScript, tetapi jika Anda memiliki Dreamweaver dan Fireworks Studio, Anda dapat melakukannya dengan mudah dan cepat.
★Metode khusus: Pertama mulai di "Kembang Api", pilih gambar, lalu klik "Sisipkan Menu Pop-Up" di kotak dialog "Setel Menu Pop-Up". Anda dapat memasukkan nama item (item) dan Klik tombol "Plus" untuk menambahkan item. Anda dapat terus melakukan pengaturan detail pada kotak informasi yang muncul, seperti pengaturan teks dan hyperlink yang akan digunakan untuk proyek tersebut. Tentu saja, Anda juga dapat menambahkan submenu dan mengatur ulang pengaturan untuk level berikutnya. Setelah selesai, klik "Berikutnya" untuk melanjutkan pengaturan berbagai nilai parameter, seperti warna, font, dll. Setelah menu selesai, Anda dapat melihat pratinjau sintaks HTML dan gambar. Klik "Selesai" lagi. Saat ini, ketika mouse bergerak ke gambar aslinya, daftar isi sistem menu akan muncul. Kemudian ketika Anda mengekspor file yang dibuat, "Fireworks" secara otomatis akan menghasilkan semua file HTML, javascript, dan gambar yang perlu digunakan Dreamweaver.
Tip 4: Buatlah gambar bergerak.
Jika Anda menginstal Dreamweaver dan Fireworks Studio secara bersamaan, Anda akan kagum dengan kombinasi sempurna dari kedua perangkat lunak ini. Meskipun Anda bukan seorang desainer gambar profesional, Anda mungkin ingin memodifikasi beberapa gambar GIF agar lebih jelas saat mendesain halaman web. Dreamweaver memungkinkan Anda membuat animasi tanpa meminta bantuan.
★Metode khusus: Pilih gambar yang akan dimodifikasi di jendela standar, lalu klik "Edit" di "Property Inspector". Jika Anda menginstal Dreamweaver dengan menyertakan "Fireworks", "Fireworks" adalah editor gambar default Dreamweaver, dan gambar akan secara otomatis dimuat ke "Fireworks". (Jika Anda perhatikan baik-baik, Anda akan menemukan teks dan grafik seperti "Editing From Dreamweaver" akan muncul di layar Fireworks, menandakan bahwa Anda dapat mengedit gambar di Dreamweaver.) Oke, sekarang klik gambar yang ingin Anda edit di " Fireworks", pilih "Modify Animate Animate Selection". Selanjutnya selesaikan pengaturan pada “Animate dialog box”, pilih jumlah frame animasi, arah pergerakan animasi, transparansi dan pengaturan lainnya. Anda juga dapat mengklik alat "Bingkai" untuk mengatur kecepatan gerakan, dan memilih panel "Objek" untuk mengubah pengaturan. Saat Anda ingin mengekspor file, cukup klik pada toolbar "Optimalkan" dan pilih "GIF Animasi" pada jenis file. Setelah selesai, "Fireworks" akan secara otomatis mengekspor gambar dengan pengaturan yang dioptimalkan, secara otomatis memperbarui gambar GIF, dan menampilkan gambar yang diperbarui di Dreamweaver. Klik "Pratinjau File di Browser" sehingga Anda dapat melihat pratinjau gambar indah yang baru saja Anda buat di browser.
Tip 5: Jadikan tombol memiliki efek berkedip.
Di Dreamweaver, Anda dapat membuat objek tombol Flash dengan efek berkedip tanpa Flash. Dreamweaver memiliki beberapa objek tombol Flash bawaan, yang dapat membuat beberapa bentuk tombol berbeda.
★Metode khusus: Klik "Sisipkan Tombol Flash Gambar Interaktif" untuk melihat tombol bawaan. Anda bahkan dapat menggunakan mouse untuk menunjuk ke bentuk tombol yang ingin Anda gunakan di kotak dialog, dan kemudian melihat cara kerjanya di browser. Gunakan penunjuk tetikus untuk memilih bentuk tombol yang akan digunakan, lalu masukkan parameter secara berurutan, seperti teks, font, warna, hyperlink, dll. pada tombol, atau nama file khusus. Tekan oke. Selanjutnya, file dalam format "SWF" akan dibuat, dan file tersebut akan secara otomatis diimpor ke halaman web Anda. Klik pada file yang sudah selesai dan Anda akan melihat properti file ditampilkan di "Property Inspector". Saat menampilkan atribut file, jika Anda memperluas daftar atribut file, "Putar" akan muncul. Setelah mengklik, Anda dapat melihat pratinjau efek flashing tombol tanpa membuka browser.
Tip 6: Membuat teks mengalir
Menambahkan teks mengalir ke halaman web semudah menambahkan tombol Flash yang baru saja kita perkenalkan. Demikian pula, tanpa menginstal Flash, Anda dapat dengan mudah melakukannya dengan fitur-fitur baru yang disediakan oleh Dreamweaver. Pembuat halaman web yang biasa menggunakan sintaks HTML untuk menulis halaman web dan tidak memiliki pengalaman dalam media interaktif dapat dengan mudah membuat teks mengalir kompak dalam bentuk Flash. Fitur baru ini dapat menambahkan beberapa interaktivitas penjelajahan ke halaman web tanpa menambah kerumitan kompatibilitas. ★Metode khusus: Klik "Sisipkan Gambar Interaktif Teks Flash", lalu isi pengaturan parameter satu per satu (seperti teks, gaya font, warna font dan ukuran font yang ingin Anda ubah efeknya, dll.).
Tip 7: Ubah pintasan keyboard
Dreamweaver memungkinkan pengguna untuk menyesuaikan antarmuka, dan desain ini sangat fleksibel. Misalnya, pengguna dapat mengubah menu dengan menulis program atau menambahkan objek sendiri. Anda tidak perlu menjadi ahli untuk mengubah pintasan keyboard karena Dreamweaver memiliki antarmuka grafis yang disebut "Keyboard Shortcut Editor".
★Metode khusus: Cukup klik "Edit Pintasan Keyboard", dan kotak dialog akan memuat dan mencantumkan tombol pintasan yang dapat diubah, sehingga Anda dapat mengubah tombol pintasan ke pengaturan yang biasa Anda gunakan. Untuk mengubah tombol pintasan, cukup gunakan menu tarik-turun pada bilah Set dan Perintah Saat Ini, temukan perintah yang ingin Anda ubah di antara perintah yang ada, lalu pilih tombol pintasan saat ini, itu akan muncul di daftar tombol pintasan. dalam daftar. Selain itu, jika Anda ingin menambahkan pengaturan tombol pintasan, Anda dapat mengklik "Plus", ketikkan perwakilan tombol pintasan baru yang ingin Anda gunakan pada keyboard, dan klik "Ubah". Pada saat yang sama, Anda juga dapat memilih tombol pintasan dan klik "Minus" untuk menghapus tombol pintasan.
Tip 8: Reset kolom jendela Situs
★ Metode spesifik: Cukup klik "Lihat Kolom Tampilan File" dari "Jendela Situs" untuk melihat ukuran dan tampilan kolom tampilan Situs. Pilih nama bidang dan gunakan panah atas dan bawah untuk mengubah ukurannya, atau hapus centang Tampilkan bidang untuk menyembunyikan bidang. Selain itu, Anda juga dapat menambahkan kolom dan membuat nama kolom sendiri dengan mengklik tombol "Plus". Alternatifnya, Anda dapat mengaitkan kolom dengan "Catatan Desain" dengan memilih "catatan" yang ada di menu tarik-turun.
Tip 9: Lihat kode asli halaman web
★ Metode khusus: Saat Anda membuka "Referensi Kode Reilly" (Referensi Jendela) untuk memeriksa properti atau kompatibilitas browser, jendela default akan menampilkan "Pengaturan Referensi" dalam nilai font kecil". Namun jika Anda menekan tombol kanan di pojok kanan atas jendela (tepat di bawah tombol tutup), akan muncul deretan menu drop-down di mana Anda dapat memilih ukuran font kode asli (kecil hingga sedang dan besar). Memilih font berukuran besar tidak terlalu "menyalahgunakan" mata karena Anda tidak perlu memegang kaca pembesar untuk melihat layar saat membaca kode HTML asli.
Tip 10: Tambahkan Tombol Flash
Di Tip 5, kami memperkenalkan cara menggunakan 20 jenis tombol preset untuk membuat tombol Flash di Dreamweaver. Ini adalah metode yang tidak memerlukan instalasi file atau program tambahan apa pun. Ada cara lain di bawah ini, yaitu memasang "Tombol Kembang Api". Ekstensi ini memiliki efek yang sama seperti Tip 5.
★Metode khusus: Buka "Exchange for Dreamweaver" (pusat pertukaran ekstensi Dreamweaver), masukkan pencarian kata kunci "InstaGraphics Extensions for Dreamweaver", lalu unduh file berukuran sekitar 577K ini. Beralih ke Dreamweaver, pilih "Commands Manage Extensions", lalu pilih "File Install Extension" untuk memulai instalasi. Setelah Anda me-restart "Dreamweaver", akan ada enam format tombol baru dan menarik, termasuk "Surfboard" dan "Bulletbar". Saat ini, cukup gunakan perintah "Sisipkan Tombol Kembang Api Interaktif" untuk membuat tombol keren. Anda juga dapat menggunakan "perintah Konversi Poin Menjadi Gambar" dan "Perintah Konversi Teks Menjadi Gambar". Kedua metode di atas dapat secara otomatis menjalankan "Kembang Api".
Tip 11: Tambahkan fungsi "Tetapkan sebagai Favorit" ke halaman web ★ Metode khusus: Cari di "Pertukaran" dan Anda dapat menemukan fungsi tambahan "Tambahkan Ke Favorit". File kecil ini hanya berukuran 3K, dan waktu pengunduhan tidak akan memakan waktu terlalu lama. Kemudian ikuti langkah yang sama untuk memuatnya dari "Extension Manager" (Perintah Kelola Ekstensi, Instal File Ekstensi). Kemudian restart Dreamweaver. File ekspansi yang baru dimuat ini akan menambahkan fitur baru ke Dreamweaver. Jika Anda menambahkan fungsi "Tambahkan ke koleksi saya" ini ke halaman web Anda, maka ketika pengguna melihat situs web Anda, dia dapat dengan mudah menambahkan situs web Anda ke "Koleksi Saya" di browsernya hanya dengan satu klik "(atau bookmark pribadi). Selain itu, yang paling keren adalah Anda juga dapat menyesuaikan nama "My Favorites" dan ikon kecil yang akan muncul di depan nama "My Favorites" (biasanya ikon kecil di depan "My Favorites" di IE adalah Nilai default IE, jika Anda memiliki ikon kecil yang dirancang sendiri, akan lebih mempesona). Perhatikan bahwa fitur ini hanya mendukung browser yang menggunakan IE 4.0 dan lebih tinggi. Cukup pilih panel "Behavior" di menu "Windows", lalu buka menu drop-down fungsi IE dan klik fungsi ini untuk mengaktifkan fitur keren ini dengan mudah.
Tips 12: Chart super keren.
Kalau mau bikin form, masih harus meluangkan waktu untuk menulis kode asli halaman web secara verbatim? Tidak perlu, sudah ada yang sudah jadi
! Tukarkan dan unduh "Ekstensi Pembuat Formulir", Ada tabel siap pakai yang memungkinkan Anda menyalin tabel secara instan yang mencakup: negara, jenis kelamin, status perkawinan, kelompok umur, dan kategori lainnya. Buka Exchange untuk mengunduh file kecil ini (hanya 11K), lalu instal melalui "Manajer Ekstensi" (Perintah Kelola Ekstensi, Ekstensi Penginstalan File). Kemudian restart Dreamweaver, klik "Insert FormBuilder", dan Anda akan menemukan fungsi tambahan di (Insert FormBuilder). Setelah mengklik, sebuah kotak dialog akan muncul, yang akan menampilkan semua menu format yang berlaku, yang sangat nyaman.