Sejak kedatangan versi CS6, Adobe menerapkan di Photoshop pilihan yang sangat berguna untuk mengatur dan mengembangkan reka bentuk web. Operasinya adalah sangat mudah dan di atas semua pantas. Melalui aplikasi ini kita akan dapat menghasilkan casing gaya cascading yang mengambil sebagai rujukan bentuk dan lapisan teks kita. Prosedurnya semudah mengembangkan maket kami, menyalin versi kod elemen kami dan menempelkannya di helaian kami.
Ini adalah pilihan yang sangat baik terutamanya kerana membolehkan kita melihat evolusi reka bentuk kita dari segi visual dan dalam masa nyata. Berikut adalah beberapa petua untuk menggunakan pilihan ini dan dapatkan prestasi maksimum:
Cuba tepat
Untuk mendapatkan hasil profesional, disarankan agar anda mengambil kira ukuran dan bahagian laman web anda. Tetapkan nilai Lebar dan Tinggi templat yang anda reka dan terapkan pada maket anda. Apabila anda menyalin kod CSS, kami akan meletakkan setiap elemen sebagai rujukan jarak dalam piksel antara setiap elemen dan tepi kanvas. Juga pertimbangkan ukuran dan alasan hierarki yang akan anda sertakan dalam reka bentuk anda, termasuk penjajaran setiap elemen dan jarak antara masing-masing untuk memberikan keterbacaan maksimum kepada pengguna anda.
Penggunaan panduan dan peraturan antara muka akan membantu anda membina templat yang kemas dan bersih dengan semua elemennya diselaraskan dengan sempurna.
Konfigurasikan semua ciri setiap elemen
Pilihan untuk menyalin kod CSS memberi kita kemungkinan untuk merancang laman web kita dengan tepat dengan menggunakan lapisan bentuk dan teks. Kandungan setiap lapisan akan disalin ke Papan Keratan dan kita dapat dengan cepat memasukkannya ke dalam helaian gaya kita. Dari lapisan bentuk, tangkap nilai tetapan berikut:
- Saiz
- Jawatan
- Warna sebatan
- Isi warna (termasuk kecerunan)
- Bayangan jatuh
Dari lapisan teks kita dapat menangkap nilai berikut:
- Keluarga fon
- Saiz fon
- Ketebalan fon
- Ketinggian garisan
- Bergaris bawah
- Strikethrough
- Superskrip
- Langganan
- Penjajaran teks
Ingatlah dan tetapkan setiap nilai ini untuk memberikan gaya yang anda cari.
Bekerja dengan kumpulan lapisan
Fungsi ini menerjemahkan karya kami yang disusun oleh dua jenis kelas, satu untuk setiap kumpulan yang menyatukan lapisan bentuk atau teks dan kelas untuk setiap lapisan salah satu jenis ini. Setiap kelas kumpulan akan mewakili elemen div induk yang akan mengandungi elemen div anak yang akan sesuai dengan lapisan yang dimasukkan dalam setiap kumpulan. Dengan cara ini, nilai atas dan kiri bekas kanak-kanak akan ditetapkan dengan merujuk kepada bekas induk. Anda harus ingat bahawa pilihan ini tidak tersedia dengan objek pintar dan tidak akan berlaku untuk lebih dari satu lapisan secara serentak melainkan ia dikumpulkan.
Langkah menukar
Setelah membuat maket anda, anda telah menyesuaikan setiap elemen dan mengelompokkannya mengikut kumpulan, anda hanya perlu mengikuti langkah-langkah berikut:
- Pergi ke panel lapisan dan pilih salah satu daripada dua pilihan ini:
- Klik kanan pada bentuk atau lapisan teks atau sekumpulan lapisan dan pilih Salin CSS dalam menu konteks.
- Pilih bentuk atau lapisan teks atau sekumpulan lapisan, kemudian pilih pilihan Salin CSS dalam menu panel Lapisan.
-
Tampalkan kod ke dalam dokumen helaian gaya anda dan terapkan ke halaman anda melalui html5.
