JoomKitapHTML' e Dönüştürme
Şimdi oluşturduğunuz konsepti HTML ve CSS 'e dönüştürme zamanı geldi. Kullanmış olduğunuz resim düzenleme programına göre, resimlerden doğrudan HTML kodu üretmeniz mümkün olabilir. Bu dönüşümü kendiniz bir metin editörü ya da NVU gibi bir çok ( ya da ticari Dreamweavers) özgür HTML editörü ile yapmanız mümkündür.
HTML kodunuz aşağıdaki gibi gözükecektir. Kodumuz, özellikle oldukça sade olmasına dikkat edilerek hazırlanmıştır ve başlık bilgisinde XHTML standardında olmadığı gözükmektedir. Bu HTML kodunuzun bulunduğu dosyanın adı index.php olmalıdır.
Kodun başlık bölümünde ise daha sonra temanıza bağlanacak olan CSS dosyasının adı ve yolu tanımlanmıştır. Bu CSS dosyasında şu anda sadece kullanılacak yazı tipleri belirtilmiştir.
<html> <head> <link href="/joomla15/templates/joomkitap/css/template.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="part1">baslık kısmı <div id="bolum1">bölüm1</div> <div id="bolum2">bölüm2</div> </div> <div id="part2">ana kısım <div id="bolum3">breadcrumbs</div> <div id="bolum6">sayfanın sağı</div> <div id="bolum4">sayfanın solu</div> <div id="bolum5">içerik</div> </div> <div id="part3">alt kısım <div id="bolum7">Bölüm7</div> </div> </body> </html>
dosya 1:HTML Dosyası /index.php
body{
font-size: 12px;
font-family: Helvetica,Arial,sans-serif;
}
#part1{ /*başlık*/
float: left;
border: 2px dotted green;
}
#part2{ /*ana bölüm*/
float: left;
border: 2px dotted yellow;
}
#part3{ /*alt kısım*/
clear:all;
border: 2px dotted red;
}
#bolum1{ /*sağ üst*/
float: left; width: 18em;
margin: 0 0 1.2em;
border: 1px dashed silver; background-color: #eee;
}
#bolum2{ /*sol üst*/
float: right; width: 12em;
margin: 0 0 1.1em;
background-color: #eee; border: 1px dashed silver;
}
#bolum3{ /*breadcrumbs*/
border: 1px dashed silver;
background-color: #eee;
}
#bolum4{ /*sayfanın solu*/
float: left; width: 15em;
margin: 0 0 1.2em;
border: 1px dashed silver;
}
#bolum5{ /*içerik*/
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
}
#bolum6{ /*sayfanın sağı*/
float: right; width: 12em;
margin: 0 0 1.1em;
background-color: #eee; border: 1px dashed silver;
}
#bolum7{ /*alt bölüm*/
margin: 0 0 1.1em;
background-color: #eee; border: 1px dashed silver;
}
Dosya 2: CSS-Dosyası /css/template.css
Bu ilk temanızı doğrudan el ile Joomla'nın kurulu olduğu dizine kopyalayacaksınız. Daha sonra Joomla kurulum paketi haline nasıl getireceğinizi öğreneceksiniz. HTML dosyasını index.php olarak kaydettikten sonra,önce [joomla_kurulum_dizini]/templates dizini altında joomkitap adında yeni bir dizin oluşturup, ardından bu dizine kopyalayın. . [joomla_kurulum_dizini]/templates dizini altında css adında yeni bir dizin oluşturun ve template.css dosyasını da bu dizine kopyalayın. Böylece temanın temel yapısını oluşturmuş oldunuz. Şimdi yönetici ara yüzünde temanızın tanınması için, temaya ait tanıtımı işlevini sağlayan XML dosyasını oluşturalım.
Comments
Post new comment