Joomla Membuat Template 2
Oke, saatnya tutorial membuat template joomla dimulai...
Oke, saatnya tutorial membuat template joomla dimulai...
Tutorial ini ditujukan buat
pemula, jadi bakal dikenalkan dasar-dasar HTML, CSS dan integrasinya ke Joomla
CMS.
Langkah yang dipakai ini bukan
langkah baku lho, masing2 desainer bisa punya cara yang berbeda2, ini cara yang
penulis gunakan, kalau mau mengembangkan sendiri bebas.
Langkah 1:
Desain di Photoshop
Desain web sebaiknya dimulai dari
pembuatan desainnya di photoshop. tujuannya supaya kita punya panduan untuk
code-nya. ada juga beberapa coder yang langsung code ke HTML/CSS, tapi untuk
desain yg lebih sempurna dan mempercepat proses sebaiknya desain dulu deh.
ini saya lampirkan desain JPG untuk
proyek situs sekolah, dinamain aja smk tobacamp.
(klik gambar untuk melihat ukuran
lebih besar)
Langkah 2:
Slice
Setelah selesai desain, kita bisa
melakukan proses slicing gambar di PSD tadi menjadi kepingan2 kecil, dalam
format JPG, GIF atau PNG.
Gambar2 yang berulang, seperti
background di slice tipis saja, kalau bisa bahkan sampai lebar cuma 1pixel.
Saya biasa melakukan slice
menggunakan ADOBE IMAGEREADY.
Langkah 3:
Packing
Buat folder khusus di directory
kita, misalnya saya namakan smktobacamp.
di dalam folder itu terdapat folder
CSS dan IMAGES. simpan semua gambar hasil slice tadi ke dalam folde IMAGES.
Langkah 4:
Code HTML/CSS
Saya menggunakan DREAMWEAVER untuk
mengcode html dan css, supaya serasi dengan joomla nantinya, saya buat
file template dengan nama index.html dan template_css.css (file css disimpan
dalam folder css).
dari dreamweaver create new HTML
page.
Secara otomatis, dreamweaver bakal
menulis searngkaian tag html standar, seperti <html><head> dan
<body> termasuk tag penutupnya.
Langkah 5:
Tableless Design
Saat ini desain html sudah mengenal
penggunaan tableless design, alias desain tanpa menggunakan tabel samasekali.
penggunaan table dalam desain layout html dianggap kuno dan bermasalah. situs
generasi baru saat ini sudah tidak memakau table lagi tapi full desain layout
dari CSS.
tutorial ini juga tidak menggunakan
table.
untuk menentukan layout standar kita
pakai LAYER dengan tag <DIV ></DIV>
Langkah 6:
Mempelajari desain Photoshop.
sebelum mengerjakan code, paling
baik adalah mempelajari hasil desain kita, jangan main hajar langsung ke code.
coba perhatikan file desain tadi, kira2 kalau kita mau membagi desain kedalam
kerangka, kita harus memikirkan perlahan pembagian areal layernya.
Sebagai contoh desain smktobacamp
tadi, analisanya:
1. Bagian utama Situs terletak di
tengah, semua elemen lainnya perlu ditampung dalam 1 buah layer utama dan
terluar. kita namakan layer ini OUTERLAYER, di layer ini seluruh layer lainnya
ditampung. Berhubung desain kita mengambang di tengah, maka kita tambahkan
satu layer lainnya CONTAINER yang akan menempatkan diri di tengah browser.
2. Dibagian paling atas, ada layer
untuk menampung logo dan nama sekolah. ini adalah satu buah layer paling atas
dinamakan layer HEADER dan berada di dalam layer CONTAINER.
3. dibawah logo, ada tempat untuk
meletakkan link utama kita, layer ini kita namakan MENUTOP.
4. Dibawah menu tadi, adalah
content/isi utama situs kita yang nantinya diisi dengan artikel dan modul2 dari
joomla. secara layout, bagian itu terbagi 2 buah areal, sebelah kiri -kita
namakan CONTENTLEFT dan sebelah kanan kita namakan CONTENTRIGHT, kedua layer
ini kita tampung dalam layer MAINCONTENT.
5. Didalam CONTENTLEFT terbagi
2 layer utama juga, yaitu area untuk visi dan misi -rencananya nanti setelah integrasi
ke joomla kita jadikan slideshow, layer ini kita namakan HIGHLIGHT, dibawahnya
baru untuk berita/artikel utama, kita namakan layer NEWSCONTENT.
6. Dibawah NEWSCONTENT terdapat 2
buah module untuk menampilkan berita, karena kedua box module itu sama dari
segi desain, ukuran dan warna, maka kita jadikan layer dengan class (nanti
dibahas) namanya NEWSMODULE , dan keduanya ditampung dalam layer MODULEBOTTOM.
7. disebelah kanan, yaitu di dalam
layer CONTENTRIGHT terdapat (saat ini, nanti bisa saja lebih) 3 kotak modul,
kita namakan NEWSMODULE2 dan box ketiga berbeda desain kita namakan
NEWSMODULE3. ingat, NEWSMODULE2 dan NEWSMODULE3 terdapat dalam layer
CONTENTRIGHT.
8. terakhir di bagian bawah terdapat
tulisan copyright, kita namakan layer FOOTER.
layer ini terletak
sesudah layer MAINCONTENT, dan tetap bagian dari layer CONTAINER.
9. Kerangka terluar sudah siap.
10. silakan ketik code kedalam file
index.html sbb:
<body>
<div
id="outerlayer">
<div id="container">
<div id="header"> </div>
<div id="menutop"></div>
<div id="maincontent">
<div id="contentleft">
<div id="highlight"></div>
<div id="newscontent"></div>
<div id="modulebottom">
<div class="newsmodule"></div>
<div class="newsmodule"></div>
</div>
</div>
<div id="contentright">
<div class="newsmodule2"></div>
<div class="newsmodule2"></div>
<div class="newsmodule3"></div>
</div>
<div id="container">
<div id="header"> </div>
<div id="menutop"></div>
<div id="maincontent">
<div id="contentleft">
<div id="highlight"></div>
<div id="newscontent"></div>
<div id="modulebottom">
<div class="newsmodule"></div>
<div class="newsmodule"></div>
</div>
</div>
<div id="contentright">
<div class="newsmodule2"></div>
<div class="newsmodule2"></div>
<div class="newsmodule3"></div>
</div>
</div>
<div id="footer"></div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</body>
ID adalah nama pengenal
masing-masing layer. ada layer yang menggunakan CLASS karena layer ID hanya
boleh digunakan satu kali dalam file HTML sedangkanCLASS boleh digunakan
berulang2, jadi NEWSMODULE memang akan digunakan berulang2 maka dijadikan
class.
Layer ini nantinya akan ditambahkan
dengan layer2 lain seperlunya atau mungkin juga dihilangkan. seiring
pengerjaan.
selesai...
bersambung ke bagian 3.
