Tutorial Membuat Themes AuraCMS

Tutorial Membuat Themes AuraCMS
1. Tools dan Software
Tidak ada yang istimewa dan semua gampang didapat,
Photoshop | Ms Frontpage | Texpad | HTMLColor | Firefox | IE | AUraCMS ver2.2 | Apache server
klik disini untuk download dan detail singkat tools ybs.

2. Utak-Atik di Photoshop
Langsung ke tutorial themes, gunakan Photoshop untuk membuat layout tampilan, kemudian potong (slice image) atur pada posisi yang sesuai dan simpan, pilih type HTML and Images (*.html).


Gambar atas adalah contoh desain awal yang siap dikirim ke Frontpage sebagai file HTML dan gambar yang telah di-slice akan otomatis tersimpan dalam folder images.
Anda dapat mencoba sendiri dan berkreasi dengan software lain yang biasa digunakan, yang penting nanti bisa menghasilkan 1 file HTML dan source gambar2nya dalam folder images yang dibutuhkan untuk membuat themes. [Download contoh PSD File]

3. Utak-Atik di Frontpage
Kemudian masuk ke MS.Frontpage, buka file HTML-nya, ini adalah hasil generated dari desain yang kita buat di photoshop, coba test di Browser (klik toolbars 'Preview in Browser') untuk memastikan semuanya sudah oke...

Biasanya pada tahap ini saya hanya perlu mengatur posisi tabel dengan 'Alignment Center' agar jarak lebar kiri kanan halaman seimbang. Setelah melihat tampilan di browser sudah yahud, kembali ke MS.Frontpage dan kita akan mulai edit tampilan, menandai space untuk posisi modul/blok dan bakal content-nya dan membuang slice image yang tidak diperlukan.

3. Edit kode HTML & Tandai posisi
Ini adalah file HTML setelah diedit, seperti terlihat disini, area untuk masing-masing posisi telah ditandai dengan teks, mulai dari Tag/Header logo, top-navigasi, tanggal, blok/modul kiri, content, blok/modul kanan, footer dll...
Yang dibutuhkan sebenarnya hanya paa sel yang saya tandai angka 1 - 4,
1. untuk Blok/Modul kiri,
2. untuk Content,
3. untuk Blok/Modul kanan dan,
4. untuk posisi Footer/Copyright.

Untuk memberi teks caranya dengan menghilangkan image yang ada di lokasi sel tersebut dan merubahnya menjadi background image atau background color dengan warna yang sesuai, kemudian ketik dan tanda dengan teks, misalnya 'Blok/Modul kiri', 'content', 'Blok/Modul kanan' dan 'Footer'...
Ukuran tinggi tabel (height) di 'netralkan' agar nantinya tingginya menyesuaikan dengan isi konten. Juga yang penting adalah memberi image background dengan style repeat-y pada tabel sisi2 kiri kanan teks (lihat sel yang diberi warna biru).