Untuk pembuat halaman web profesional yang ingin membuat halaman web kompleks dalam lingkungan visual, Dreamweaver secara bertahap muncul di pasar alat pengeditan halaman web dan telah menjadi pilihan terbaik bagi para profesional untuk menulis halaman web. Dilihat dari keadaan saat ini, fungsi bawaan Dreamweaver bisa dikatakan semakin melimpah, kaya dan lengkap. Di sini saya ingin memperkenalkan kepada Anda beberapa tips aplikasi di versi 4.0.
1. Membuat halaman web lebih fleksibel. Beberapa pengembang web menyebut teknik yang diperkenalkan di bawah ini cair, tetapi di sini saya menyebut teknik ini melar (teknik ekstensi fleksibel). Ini adalah teknik yang dapat menyesuaikan ukuran halaman web ketika ukuran jendela browser pengunjung berubah. Oleh karena itu, jika jendela terlalu besar, tidak akan ada ruang kosong, dan jika jendela terlalu kecil, maka akan naik dan bilah bergerak ke bawah tidak akan muncul di tepi. 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 kolom tetap dan gambar GIF sebagai interval untuk mendesain halaman web. Dengan cara ini, baik menggunakan Internet Explorer atau Mac, ukuran halaman akan tetap dan tidak akan hilang. Dengan Dreamweaver 4.0, Anda dapat dengan mudah mendesain halaman web yang otomatis menyesuaikan secara fleksibel. Bagaimana cara melakukannya?
Buka halaman web menggunakan tombol pada palet Objek 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. Pilih panah kecil di atas kolom yang ingin Anda atur tampilan fleksibelnya, dan lalu pilih Tampilan "Jadikan Kolom Fleksibel" (Jadikan Kolom Autostretch). (Atur penyesuaian otomatis lebar kolom menjadi terbatas pada satu kolom) Pada saat ini, garis bergelombang akan muncul di atas kotak kolom, bukan angka asli yang menunjukkan lebar kolom. Dreamweaver akan secara otomatis membuat file gambar kosong dengan tata letak tetap. File gambar kosong ini diwakili oleh dua tabel kosong panjang di atas kolom. (Saat Anda menambahkan file gambar kosong untuk pertama kalinya, kotak dialog akan muncul menanyakan apakah Anda ingin menggunakan file gambar bawaan. Untuk efek terbaik, saya sarankan Anda membiarkan Dreamweaver secara otomatis membuatnya, jika tidak, Anda tidak perlu menggunakan file gambar kosong untuk mengisi tata letak.)
2. Buat palet warna yang dipersonalisasi. Panel Aset baru Dreamweaver 4.0 adalah alat baru yang dapat mengelola file menurut jenis file, seperti gambar, templat, dll. ., saat mengedit situs web. Saat Anda menentukan situs web baru (Pilih Situs · Situs Baru), semua jenis komponen akan secara otomatis ditambahkan ke kotak yang sesuai di panel Aset. Panel Aset baru ini juga memiliki kotak warna di panel kontrol properti, yang menyimpan semua warna yang digunakan di situs Anda, termasuk warna teks, warna latar belakang, dan warna tautan. Ini adalah palet warna berorientasi situs web yang dirancang untuk pengguna. Aktifkan saja panel Assets (pilih Window terlebih dahulu, lalu Assets), lalu pilih scroll bar warna kecil di sebelah kiri, dan Anda akan melihat berbagai pilihan warna untuk website Anda. Tentu saja Anda dapat menarik warna-warna ini ke teks tertentu yang dipilih. Bahkan ketika Anda memilih warna, nilai heksadesimal warna dan kode tiga warna yang sesuai (RGB) akan muncul di layar. Jika Anda ingin memperkecil toolbar palet Anda, Anda bahkan dapat menambahkan warna tertentu saja ke Favorit palet Anda. Cukup sorot warna yang dipilih, pilih tombol bernama "Tambahkan ke Favorit Saya" di jendela (tombol kanan bawah), dan selesai.
3. Membuat Sistem Navigasi Menu Pop-up Awalnya, membuat Sistem Navigasi Menu Pop-up memerlukan beberapa keterampilan sintaksis JavaScript, tetapi jika Anda menginstal Dreamweaver/Fireworks Studio, hal ini dapat dilakukan dengan cepat. Pertama mulai di Fireworks, pilih gambar, lalu pilih Sisipkan Menu Pop-Up di kotak dialog Set Menu Pop-Up. Anda dapat memasukkan nama item dan memilih tombol Plus untuk menambahkan proyek. Anda dapat terus membuat pengaturan detail di kotak pesan pop-up, seperti mengatur teks dan link yang akan digunakan untuk item tersebut. Tentu saja, Anda juga dapat menambahkan submenu dan mengatur ulang pengaturan untuk level berikutnya. Setelah selesai, pilih Berikutnya untuk melanjutkan pengaturan preferensi seperti warna, font, dan lainnya. Setelah menu selesai, Anda dapat melihat pratinjau sintaks HTML dan melihat gambar. Kemudian pilih Selesai. Saat ini, ketika mouse bergerak ke pola aslinya, daftar isi sistem menu akan muncul. Kemudian ketika Anda mengekspor file yang dibuat, Fireworks akan secara otomatis menghasilkan semua file HTML, JavaScript, dan gambar yang dibutuhkan Dreamweaver.
4. Pindahkan file gambarnya!
Jika Anda menginstal Dreamweaver/Fireworks Studio secara bersamaan, Anda akan kagum dengan kombinasi sempurna dari kedua produk ini. Meskipun Anda bukan seorang desainer grafis profesional, Anda tetap ingin memodifikasi beberapa file gambar GIF agar lebih jelas saat mendesain halaman web. Dreamweaver memungkinkan Anda membuat animasi tanpa bertanya kepada siapa pun! Pilih gambar yang ingin Anda modifikasi di jendela standar, lalu pilih tombol Edit di Property Inspector. Jika Fireworks disertakan dengan instalasi Dreamweaver Anda, Fireworks adalah editor gambar default Dreamweaver, dan gambar akan secara otomatis dimuat ke Fireworks. (Jika Anda perhatikan baik-baik, Anda akan menemukan bahwa teks dan grafik seperti Editing From Dreamweaver akan muncul di layar Fireworks, menandakan bahwa Anda dapat mengedit gambar dari Dreamweaver.) Oke, sekarang pilih gambar yang akan diedit di Fireworks dan pilih Modify· Menghidupkan · Menghidupkan Pilihan. Selanjutnya selesaikan pengaturan pada kotak dialog Animate, pilih jumlah frame untuk animasi, arah pergerakan animasi, transparansi, dll. Anda juga dapat memilih toolbar Frames untuk mengatur kecepatan gerakan, dan memilih panel Objek untuk mengubah pengaturan. Untuk mengekspor file, cukup pilih toolbar Optimize dan pilih GIF Animasi sebagai jenis file. Setelah selesai, Fireworks akan secara otomatis mengekspor gambar dengan pengaturan yang dioptimalkan, secara otomatis memperbarui file gambar GIF, dan menampilkan file gambar yang diperbarui di Dreamweaver. Pilih File·Pratinjau di Browser, sehingga Anda dapat melihat pratinjau gambar indah yang baru saja Anda buat di browser!
5. Membuat tombol memiliki efek berkedip. Di Dreamweaver, Anda dapat membuat objek tombol Flash dengan efek berkedip tanpa program Flash. Versi 4.0 memiliki beberapa objek tombol Flash bawaan, yang dapat membuat beberapa bentuk tombol berbeda. Pilih Sisipkan·Gambar Interaktif·Tombol Flash untuk melihat tombol bawaan mana yang tersedia. 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 kursor mouse untuk memilih bentuk tombol yang ingin Anda gunakan, lalu masukkan parameter secara berurutan, seperti teks, font, warna, tautan, dll. pada tombol, atau nama file yang disesuaikan. Tekan oke. Selanjutnya, file SWF akan dibuat dan secara otomatis ditempatkan di 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, tombol Putar akan muncul. Setelah memilihnya, Anda dapat melihat pratinjau efek flashing tombol tanpa membuka browser.
6. Membuat teks mengalir. Menambahkan teks mengalir ke halaman web semudah menambahkan tombol Flash yang baru saja saya perkenalkan. Demikian pula, Anda tidak perlu menginstal Flash, Anda dapat melakukannya dengan mudah menggunakan fitur baru yang disediakan oleh Dreamweaver 4.0. Pembuat halaman web yang biasanya menggunakan sintaks HTML untuk menulis halaman web dan tidak memiliki pengalaman media interaktif dapat dengan mudah membuat teks mengalir yang ringkas dalam bentuk Flash. Menurut Macromedia, 97% pengguna Internet dapat melihat halaman web dengan efek Flash, sehingga fitur baru ini dapat menambah interaktivitas saat menjelajah dan membaca halaman web tanpa menambah masalah kompatibilitas. Pilih Sisipkan · Gambar Interaktif · Teks Flash, lalu isi pengaturan preferensi satu per satu (seperti teks, gaya font, warna font, ukuran font, dll. yang ingin Anda ubah efeknya).
7. Mengubah pintasan keyboard Dreamweaver memungkinkan pengguna untuk menyesuaikan antarmuka. Misalnya, pengguna dapat mengubah menu dengan menulis program atau menambahkan objek. Anda tidak perlu menjadi ahli untuk mengubah pintasan keyboard, karena Dreamweaver memiliki antarmuka grafis yang disebut Editor Pintasan Keyboard. Cukup pilih Edit · Pintasan Keyboard, dan kotak dialog akan memuat dan mencantumkan daftar tombol pintasan yang dapat diubah, memungkinkan Anda dengan cepat Mengubah kunci ke nilai pengaturan yang biasa Anda gunakan. Untuk mengubah tombol pintasan, cukup gunakan menu drop-down pada daftar Set dan Perintah Saat Ini, temukan perintah yang ingin Anda ubah di antara perintah yang ada, lalu pilih tombol pintasan saat ini. Ini akan muncul di daftar tombol cepat. dalam daftar kunci. Selain itu, jika Anda ingin menambahkan pengaturan tombol cepat, Anda dapat memilih tombol Plus, mengetikkan tombol perwakilan cepat baru yang ingin Anda gunakan pada keyboard, dan pilih Ubah. Pada saat yang sama, Anda juga dapat memilih tombol pintasan dan memilih tombol hapus (Minus) untuk menghapus tombol pintasan.
8. Atur ulang lebar kolom jendela Situs. Cukup pilih Lihat·Kolom Tampilan File dari jendela Situs untuk menyesuaikan ukuran dan presentasi lebar kolom saat melihat tampilan Situs. Pilih kolom nama dan gunakan panah atas dan bawah untuk mengubah ukurannya, atau hapus centang Tampilkan bidang untuk menyembunyikan kolom. Selain itu, Anda juga dapat menambahkan kolom dengan memilih tombol Plus dan membuat nama kolom Anda sendiri. Selain itu, Anda bisa mengaitkan kolom dengan Catatan Desain dengan memilih catatan yang ada dari menu drop-down.
9. Baca file halaman web asli. Saat Anda membuka Referensi Kode O'Reilly (Jendela · Referensi) untuk memeriksa properti atau kompatibilitas browser, jendela default akan menampilkan pengaturan referensi dalam 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 dokumen asli (kecil, hingga sedang, dan besar). . Memilih font berukuran besar tidak terlalu mengganggu mata karena Anda tidak perlu memegang kaca pembesar untuk melihat layar saat melihat file HTML asli!
10. Tambahkan tombol Flash baru. Di atas, saya telah mengajari Anda cara menggunakan 20 jenis tombol preset untuk membuat tombol Flash di Dreamweaver. Metode ini tidak memerlukan instalasi file atau program tambahan apa pun. Ada metode lain di bawah ini, yaitu memasang tombol Fireworks. Fungsi tambahan ini memiliki efek yang sama seperti Tip 5. Buka Exchange for Dreamweaver (pusat pertukaran ekstensi Dreamweaver), masukkan kata kunci pencarian "InstaGraphics Extensions for Dreamweaver", lalu unduh file 577K ini. Beralih ke Dreamweaver, pilih Perintah·Kelola Ekstensi, lalu pilih File·Instal Ekstensi untuk memulai instalasi. Setelah Dreamweaver diaktifkan kembali, ada enam jenis tombol baru dan menarik, termasuk Surfboard dan Bulletbar. Saat ini, cukup gunakan perintah Sisipkan · Gambar Interaktif · Tombol Kembang Api untuk membuat tombol keren. Anda juga dapat menggunakan perintah ·Konversi Poin Menjadi Gambar dan Perintah ·Konversi Teks Menjadi Gambar. Kedua metode di atas dapat menjalankan Kembang Api secara otomatis.
11. Tambahkan fungsi "Tetapkan sebagai Favorit" ke halaman web dan cari di Exchange, Anda dapat menemukan fungsi ekstensi 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 Manajer Ekstensi (Perintah · Kelola Ekstensi, File · Instal Ekstensi). Kemudian aktifkan kembali Dreamweaver. File ekstensi yang baru dimuat ini akan menambahkan fitur baru ke Dreamweaver. Jika Anda menambahkan fungsi "tambahkan ke favorit" ini ke halaman web Anda, maka ketika pengguna Internet mengunjungi situs web Anda, dia dapat dengan mudah menambahkan situs web Anda ke favorit browsernya hanya dengan satu klik ( atau bookmark pribadi). Selain itu, Anda juga dapat menyesuaikan nama pintasan favorit dan ikon kecil yang akan muncul di depan nama pintasan favorit (umumnya ikon kecil di depan pintasan favorit di IE adalah nilai default IE. Jika Anda punya sendiri Ikon kecil yang dirancang jauh lebih keren. Perhatikan bahwa fungsi ini hanya mendukung browser dengan IE 4.0 dan lebih tinggi. Cukup pilih panel Perilaku di menu Windows dan pilih opsi ini di menu tarik-turun fungsi IE
ingin membuat grafikkeren
, apakah Anda masih harus meluangkan waktu mengetik kode sumber halaman web? Sudah ada yang siap diunduh dari Exchange! Ekstensi Form Builder memiliki formulir siap pakai yang memungkinkan Anda untuk langsung menyalin formulir yang berisi bidang seperti negara, jenis kelamin, status perkawinan, kelompok usia, dan kategori lainnya. Unduh file kecil (hanya 11K) ini dari Exchange, lalu gunakan Manajer Ekstensi. Instal (Perintah·Kelola Ekstensi, File ·Instal Ekstensi). Kemudian aktifkan kembali Dreamweaver dan pilih Sisipkan·FormBuilder, dan Anda akan menemukan file ekstensi di (Sisipkan·FormBuilder). Setelah memilih, kotak dialog akan muncul, semua menu format yang berlaku akan ditampilkan.