Prototyping cepat dengan Pages Panel di Fireworks CS6

 

Adobe Fireworks CS6 adalah alat yang ideal untuk membuat prototipe. Ada beberapa keuntungan menggunakan Fireworks atas saudaranya Photoshop, tapi yang saya ingin berbagi dengan Anda dalam artikel ini adalah panel Pages. Panel ini memberikan Anda kemampuan untuk fungsionalitas cepat meniru ditemukan di situs web sepenuhnya-kode dan aplikasi, dengan jumlah minimal usaha dan nol coding. Yang penting untuk mengambil dari ini, terutama jika Anda baru untuk desain web dan pengembangan, adalah bahwa kode, sementara fungsional, sama sekali tidak, bentuk, atau bentuk, siap produksi. Konten yang dihasilkan dari Fireworks, dalam konteks artikel ini, harus benar-benar digunakan untuk prototyping tujuan. Pada dasarnya, klien atau kolega bisa mendapatkan rasa apa yang diharapkan dari produk akhir.

Selain itu, saya pikir itu layak disebut bahwa proses prototyping biasanya langkah kedua setelah menyelesaikan wireframe. Sebuah gambar rangka adalah tata letak kasar atau ide untuk mendasarkan prototipe Anda. Contoh gambar rangka Saya menggunakan cukup formal, dan wireframes tidak memerlukan banyak usaha ini. Anda bisa mencoret-coret gambar rangka pada serbet jika itu sesuai dengan proyek Anda. Setiap tahap ini dirancang untuk menghemat waktu pengembangan yang berharga. Pada tahap ini membuat perubahan pada tata letak, desain, atau fungsi jauh lebih mudah. Hal yang sama tidak dapat dikatakan setelah Anda mulai coding HTML, CSS, dan JavaScript.

Wireframe

Di mana untuk memulai?

Pada titik ini, saya menganggap Anda memiliki pengetahuan dasar tentang Fireworks. Selain itu, saya mengasumsikan bahwa ada gambar rangka disetujui, atau setidaknya dasar dari mana Anda dapat membangun prototipe Anda. Jika itu terjadi, Anda harus mulai dengan berpikir tentang elemen-elemen yang akan sering dibagi di semua halaman dalam prototipe Anda. Berdasarkan gambar wireframe, kami memiliki beberapa bagian yang perlu kita perhatikan.
Sekarang, untuk menjaga hal-hal yang mendasar seperti mungkin, saya memiliki tata letak yang sangat umum yang saya bekerja dengan. Kami memiliki area header yang berisi sistem navigasi dan kotak pencarian, bagian untuk beberapa karya seni, bagian untuk slide iQuery , dan footer. Dengan gambar rangka ini, unsur-unsur umum dibagi di semua halaman akan menjadi header dengan nav, bagian karya seni, dan footer. Meninggalkan daerah untuk slider jQuery sebagai daerah di mana konten akan berubah.

Membuat Master Page

Setiap kali saya mengajar kelas Fireworks, ketika konsep prototyping muncul, saya menemukan bahwa siswa yang mencoba-coba sendiri tidak sepenuhnya memahami bagaimana menerapkan Master Pages di panel PT. Hal ini penting untuk mengambil serangkaian langkah-langkah dalam rangka untuk Master Page untuk bekerja dengan benar. Tidak sulit atau membingungkan, Anda hanya perlu mengingat proses. Hal ini dapat menjadi aspek yang paling penting untuk menciptakan prototipe fungsional.

Di sini kita melihat apa halaman rumah situs akan terlihat seperti, lengkap dengan jQuery slider-nya. Sekarang dalam rangka bagi kita untuk prototipe ini dengan benar kita perlu menetapkan apa rincian Master Page seharusnya. Seperti yang saya sebutkan sebelumnya, segala sesuatu kecuali untuk slider jQuery akan menjadi elemen umum bersama di semua halaman.
Pastikan Anda memiliki terbuka panel Pages. Jika Anda tidak melakukannya, Anda dapat mengaksesnya dengan pergi ke Window> Pages. Anda akan melihat secara default Anda memiliki 1 halaman yang disebut "01 Page1".

Ini juga diperhatikan bahwa contoh saya menggunakan simbol tombol dalam sistem navigasi. Jika Anda ingin prototipe link, Anda dapat menggunakan hotspot, tetapi dalam kasus ini dengan menggunakan simbol-simbol tombol, Anda dapat mensimulasikan tombol negara dalam prototipe Anda.
Langkah berikutnya adalah untuk menghapus slider jQuery. Aku akan memilihnya menggunakan Alat Pointer (panah hitam) dan memotong ke clipboard Edit> Cut. Konten yang jelas akan ini kita tidak ingin pada halaman master. Dengan 01 Page 1 dipilih pada panel Pages, klik tombol sub-menu di sudut kanan atas dan pilih Set As Guru.

Ini akan mengatur 01 Page 1 ke Master Page. Setelah Anda membuat halaman master, setiap halaman yang baru dibuat secara otomatis mewarisi pengaturan Master Page. Halaman yang ada tidak mewarisi pengaturan ini kecuali jika Anda menghubungkan mereka ke Master Page dengan mengklik kotak kecil di sebelah kiri halaman. Jika Anda kemudian mengubah Master Page, semua halaman yang terhubung, dan halaman dibuat setelah pengaturan halaman sebagai update Master Page secara otomatis.
Buat halaman baru dengan mengklik tombol halaman baru ke bawah menuju sudut kanan bawah panel.

Setelah halaman baru dibuat, sisipkan slider jQuery Anda dipotong dari langkah sebelumnya. Ubah nama halaman dengan mengklik dua kali pada nama saat ini untuk Tentang.

Untuk melanjutkan prototipe, Anda akan membangun setiap halaman baru dengan cara yang sama. Untuk contoh ini, saya hanya akan ketik beberapa teks placeholder menunjukkan nama halaman. Jadi klik pada tombol halaman baru lagi untuk membuat halaman baru. Anda akan melihat hanya aset dari Master Page disertakan pada halaman baru. Ketik Produk.

Ulangi proses ini sampai Anda memiliki semua halaman dipertanggungjawabkan.

Membuat Link

Sekarang dengan semua halaman yang dibuat dalam panel halaman, saatnya untuk membuat link antara halaman. Tentu saja kita ingin semua halaman untuk menghubungkan dengan cara yang sama, jadi kita akan membuat link pada Master Page. Karena kita diciptakan halaman baru kami setelah kami menciptakan Guru, mereka semua akan diperbarui untuk mencerminkan perubahan ini.
Dengan Master Page aktif dalam panel Pages, klik pada tombol Tentang dengan Alat Pointer. Dengan tombol Tentang dipilih, Anda akan melihat kolom teks tautan muncul dalam Properties Panel. Mengakses menu yang terkait dengan link bidang teks, Anda akan melihat itu diisi dengan semua halaman yang Anda buat. Pilih Tentang.

Ulangi proses ini untuk semua tombol di Master Page.
Sebelum kita melihat ini, saya ingin memberikan sedikit tip. Ini adalah detail kecil kecil yang membuat perbedaan besar ketika mempresentasikan prototipe Anda dan mungkin salah satu hal yang jelas paling tidak dapat dilakukan. Ketika saya mengajar Fireworks kelas ini selalu membingungkan siswa. Ketika melihat pratinjau prototipe, Anda tidak ingin melihat Master Page, bukan dalam hal ini halaman Tentang. Ada tombol kecil di Halaman Panel pada Master Page yang akan beralih visibilitas. Anda ingin memastikan itu toggle off sehingga tidak terlihat. The Master Page thumbnail tidak akan muncul ketika visibilitas toggle off.

Sekarang kita memiliki semua halaman lengkap, hal terakhir yang perlu kita lakukan adalah melihat itu. Buka File> Preview Dalam Browser> Preview Semua Artikel dalam [Safari].

Setelah beban konten Anda di browser web Anda akan dapat menggunakan link dalam sistem navigasi.
Fireworks menawarkan banyak fitur untuk prototyping website dan aplikasi. Panel Pages hanya awal, tapi dengan keterampilan dasar ini Anda harus berada di jalan untuk menciptakan konten yang dapat Anda menguji dan mengevaluasi sebelum harus menulis kode.