Kebetulan saya hari ini lagi banyak waktu untuk ngasih sedikit tips bagaimana membuat template dgn image ready. Mudah2an bermanfaat buat para newbie.
Saya mulai.
Saya asumsikan sudah terbiasa menggunakan photoshop dan bagaimana menggunakan tool "slice".
I. Image Ready
1.Sekarang buka file example.psd tsb di image ready (template tsb saya adaptasi dari template http://www.my-webbizz.com yg akan segera saya update).
Apabila slices belum ditampilkan, aktifkan informasi slices dengan memilih menu View->Show->Slices
3. Sekarang tekan tombol Ctrl+Shift+Alt+S secara bersamaan, atau bisa menggunakan pointer mouse (File -> Save Optimized AS..)
[img width=242 height=131]http://www.my-webbizz.com/isrc/save_optimised_as.png[/img]
4. Tentukan desitination foldernya, pilih Save as type nya dengan memilih option "HTML and Images", lalu save dgn nama file yg anda inginkan (atau tetap dgn nama yg sama dengan nama file psd nya).
5. Lihat di folder destination, akan ada file example.html dan sebuah folder images yg berisi file2 image yg sudah terpotong2.
II. Dreamweaver
Proses di image ready sudah selesai. Tutup aja biar gak ngeberatin kompi. Sekarang kita masuki tahapan di dreamweaver. Buka Dreamweaver.
Akan sangat membantu kalau Dreamweaver nya sudah dipasangin mamboSolution extention (mambosolutions453.mxp - tapi kalau gak punya extension tsb pun gak masalah).
Untuk proses di Dreamweaver ini kita pilih tipe mode View Code (Menu View -> Code)
[img width=189 height=50]http://www.my-webbizz.com/isrc/view_selector.JPG[/img]
1. Buka example.html yg dihasilkan oleh image ready dgn menggunakan Dreamweaver
2. Select (marking) kode html di mulai dari
Code: Select all
<body>
<!-- ImageReady Slices (example.psd) -->
....
....
....
....
<!-- End ImageReady Slices -->
</body>
3. Buka juga file index.php dari folder template joomla yg templatenya merupakan template yg sedang aktif, juga dengan menggunakan Dreamweaver, misal yg mau kita bongkar sbg pilot template adalah "rhuk_solarflare" (posisinya di {joomla installation folder}/templates/rhuk_solarflare/index.php
[img width=130 height=49]http://www.my-webbizz.com/isrc/folder_solar.JPG[/img]
Ups jangan lupa.. template rhuk_solarflare dibackup dulu yah.
4. Select (marking) kode html dari file index.php tsb di mulai dari
Code: Select all
<body>
..
..
</body>
5. Lalu Paste (apabila bookmark pd tahap 2 masih aktif, kalau sudah nonaktif ulangi step 2).
6. Hapus folder images, yaitu {joomla installation folder}/templates/rhuk_solarflare/images,
7. Copy juga folder images yang dihasilkan oleh image ready ke {joomla installation folder}/templates/rhuk_solarflare/
8. Image path bawaan image ready harus kita ganti, karena relatif path yg dihasilkannya mempunyai struktur, misal,
Code: Select all
<img src="images/example_01.jpg"> atau <img src="images/example_01.gif">
Untuk itu kita bisa menggunakan Dreamweaver juga untuk mempercepat proses replacement dengan menekan Ctrl F lalu ketik di Box Find : images/
Di Box Replace kita ketik :
Code: Select all
<?php echo $mosConfig_live_site; ?>/templates/minimal/images/
Let's see what you have, buka previewnya di joomla.
III.
Sekarang kita bikin space table untuk meletakkan "left menu/mosLoadModules('left')" dan mosMainBody()
1. Ganti dulu View Dreamweaver ke mode Split.
2. Select image leftmenu.gif lalu delete (lebih enak ngedeletenya di mode View Design).
3. Lalu kita ketik kodenya :
Code: Select all
<?php mosLoadModules('left'); ?>
4. Sekarang kita letakan juga mosMainBody ke sel table yg di sebelah posisi left menu, kita ketik
Code: Select all
<?php mosMainBody();?>
Code: Select all
<td><img src="images/webbizz.gif" alt="" width="164" height="56"></td>
Hasilnya adalah
Code: Select all
<td width="164" height="56"><img src="images/webbizz.gif" alt=""></td>
Sekarang lihat line yg berisi kode html
Code: Select all
<table id="Table_01" width="740" height="251" border="0" cellpadding="0" cellspacing="0">
Coba sekarang lihat hasilnya. Mudah2an berhasil.
Sekarang kita review sedikit bagaimana hasil template bikinan image ready. Bisa dilihat kalau stuktur tablenya hanya terdiri dari satu table. Saya gak suka struktur macam gini karena bisa jadi lebar left menu menjadi tidak bebas untuk dimodifikasi. Maka dari itu, mending table tersebut dibagi menjadi dua bagian besar, header dan body.
Sebenarnya kalau narasinya bagus proses2 di atas gak bakalan terlalu rumit dan bertele2 yg penting main goalnya kita ngerti shg prosesnya gak mesti sama dgn steps di atas. Kalau sudah terbisa melakukan proses2 di atas, gantian rekans yg memperbaiki narasinya biar lebih enak dibaca:-)
Selamat mencoba dan make money dgn joomla:-)