[Ana Sayfa] [Hakkımda] [Arşiv] [İletişim]

0 PHP Template Teorisi

Yazar serdaR on 19 Kasım 2010
Etiketler : , ,
Bu yazı kicker & bana aittir.
Merhaba bu yazımızda sizlere Photoshop'ta teorik bir template tasarımından & template'mizin php ile nasıl kullanılacağından bahsedicez.

Photoshop'ta alttaki ayarlara benzer bir çalışma alanı açıyoruz.Ben arka planı transparan olarak ayarladım böylece template sayfamızda belirleyceğimiz her renk koduna uyacak.


Ardından "Rectangle Tool" yardımıyla template'in ana kısımlarını istediğimiz uzunluk ver genişlikde çiziyoruz.Ben template'mi 4 kısımdan oluşturdum bunlar; Banner, Menü, Body ve Footer alanları.

Tasarım kısmını üstteki şekilde tamamladıysanız sıra template'mizi parçalamaya geldi.Parçalama işlemini "Slice Tool" ile gerçekleştiriyoruz.Tavsiyem dilimleme işlemini yaparken birbirinden bağımsız alanlar arasından dilimlemeniz.
Gördüğünüz gibi başarılı bir şekilde parçalamışsanız her dilim başında 1,2,3,4.. olarak numaralandırma yapacaktır.Şimdi photoshop'taki işlemlerimiz burada sona erdi. "File" > "Save For Web" diyerek template'i HTML olarak kaydediyoruz.Browser'da açarak güzel görünüyormu diye bir kontrol edelim değilmi :)
Evet açıkçası gerçekten iğrenç görünüyor hmm her neyse zaten bu yazımız teorik bir önem taşıdığından ayrıntılara takılmıyoruz ;) Mesela sola yaslanmasını center koduyla gidermemiz mümkün template'i kaydettiğiniz yeri bulun ve dosya_adı.html olan dosyayı not defterinde açın alttaki table tagını center ile konumlandırabilirsiniz.
<!-- ImageReady Slices (Untitled-1) -->
<table align="center" id="Table_01" width="628" height="577" border="0" cellpadding="0" cellspacing="0">
Sıra geldi PHP sayfamızda çağıracağımız TPL Template bloklarını oluşturmaya ben örnek olarak kendi kodlarımı göstericem.
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<table align="center" id="Table_01" width="628" height="577" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td>
   <img src="images/TPL_01.gif" width="628" height="135" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/TPL_02.gif" width="628" height="66" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/TPL_03.gif" width="628" height="292" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/TPL_04.gif" width="628" height="84" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Ben 3 tane tpl dosyası yarattım;
Tekrar kodlarımıza dönüyoruz bu işlemi dikkatli yapmanızda fayda var daha sonrasında kargaşa olmaması açısından.
Yukarıdaki 3 farklı alan sırasıyla kafa.tpl, govde.tpl ve belalti.tpl dosyalarına yerleştirilecektir.Şimdi php dosyamızı oluşturalım php sayfanız alttaki gibi olabilir;
<?php

#   s-labZ.net ~ UsluBey & kicker

include "Template/kafa.tpl";
/*
kod blokları
*/
include "Template/govde.tpl";
/*
kod blokları
*/
include "Template/belalti.tpl";
?> 
Dizininiz bu şekilde olacaktır, photoshop'un oluşturduğu images klasörünü site dizininize atmayı unutmayın. 

0 yorum :

Yorum Gönder

Yorumun denetlendikten sonra görüntülenecek...Teşekkürler!