Posts Tagged ‘Joomla Dersleri’

« Older Entries

Bölüm Nasıl Oluşturulur, Videolu Anlatım, Joomla Dersleri

星期二, 七月 1st, 2008

Joomla ile yeni tanıştınız, görsel derslerimizle veya başka bir şekilde joomlanızı kurdunuz, şimdi siz ona bakıyor o size bakıyor olabilir, o zaman daha fazla bakışmadan icraata geçelim mi?. Joomlanıza bir içerik eklemenin yolu önce bölüm oluşturmaktan geçtiği için ilk adım olarak doğru yerdesiniz bu birinci adımı geçtikten sonra sırasıyla kategori nasıl eklenir ve nihayetinde de içerik nasıl eklenir konularına geçebilirsiniz. Bu dersimizle bölümler nasıl oluşturulur ve nasıl yönetilir gelin hep beraber görelim.

Bölüm Nasıl Oluşturulur

Kaynak : joomladersleri.com

Tags: , ,
Posted in 懒得分类 | No Comments »

Joomla 1.5 Kurulumu Nasıl Yapılır – Videolu Anlatım

星期二, 七月 1st, 2008

Joomla yepyeni arayüzü, kendine has çekirdek kodlaması ile mambo’nun kod yapısından kendini soyutlayan daha da esnek yapısıyla Joomla 1.5 sürümü göz dolduruyor. Joomla artık profesyonelleşiyormu (ücretlimi olacak) dedirtecek kadar daha profesyonel bir yapıya kavuşurken kullanıcıların bu sistemin halen ücretsiz olması karşısında hem hayret hemde takdirleri topluyor.

Bu görsel dersimizde sizlere joomla 1.5 sürümünün nasıl kurulacağını detaylı bir şekilde uygulamalı olarak anlattığımız görsel dersimizi izleyerek hem bu sistemin kurulum aşamalarını öğrenin hemde sitelerinizi artık 1.5 sürümüne terfi için hazırlamaya başlamayı düşünün.

Joomla 1.5 Kurulumu

Kaynak : joomladersleri.com

Tags: , ,
Posted in 懒得分类 | No Comments »

Joomla Temalara Ajax Ekleme, Joomla Dersleri

星期二, 七月 1st, 2008

Merhaba sevgili arkadaşlar.
Bu dersimizde sanırım birçok joomlacı arkadaşın kafasına takılan ve bazen içinden çıkılmaacak bir hal alan joomla temaların görselliğine paralel bir sorunu ele almaya çalışacağım . Hemen hemen her joomlacı arkadaşın başına gelmiştir diye düşünüyorum diyelimki bir ücretsiz tema buldunuz ve kendi zevkinize göre bu temayı editlediniz fakat web 2.0 özelliklerinin’de sitenizde bulunmasını istiyorsunuz web 2.0 deyince benim aklıma ilk etap’da Ajax geliyor. Peki nedir bu Ajax , Ajax = Asynchronous JavaScript and XML yani
Asynchronous(yani ayni anda) çeşidindeki server ile browser arasındaki bilgi alışverişini sağlayan bir özellik’dir , Ajax’in en büyük özelligi HTML sayfa içerisinde sorulan sorulara sayfayı tekrar aktüalize etmeden cevap verebilmesidir buda sayfanızda ki ziyaretçilerin sorunsuz , sıkıntısız ve en önemlisi beklemeden istedikleri verilere ulaşması anlamına gelir.

Buraya kadar azda olsa sizlere Ajax’i anlatmaya çalıştım şimdi dilerseniz Ajax’i joomla sayfamıza nasıl entegre edebileceğimizi inceleyelim .

Bunun için bize gerekli olanlar:

  1. HTML editör
  2. Localserver yada webserver
  3. Grafik düzenleme programı
  4. Beğendimiz bir tema
  5. Beğendimiz bir ajax script

Bu derste yapmaya çalışacağımız sitemize gelen ziyaretçilerimize açılır kapanır bir panel yardımı ile sitemizden son haberleri iletmek olacak.

Tema olarak siteground’in 74 no’lu temasını seçtim nedeni ise bu tema’da web 2.0 özelliklerinin kullanılmamış olması .

Image template thumb

Temamızı editlemek için dilerseniz yerel sunucuya kuralım bu işlem bittikten sonra index.php ve template_css.css’i açarak kullanmak istediğimiz tema hakkında biraz inceleme yapmak pek de fena bir fikir olmaz .

Sizlerin de kullanmak istediğiniz temayı incelediğinizden yola çıkarak devam etmek istiyorum.

Su anda bize gerekli olan panelimize web 2.0 özelliğini verecek olan script ben bu iş için mootools sayfasında http://demos.mootools.net/Fx.Slide fx.slide scriptini uygun görüyorum siz aramaya devam edip daha ilginç uygulamalar bulabilirsiniz .

Mootools.svn.js (kütüphanemiz)

Şimdi bize gerekli olan bir fikir, panelimizi nereye koyabiliriz ben içerik bölümünün hemen üstünü uygun görüyorum alttaki resime bakarak nereyi kastettiğimi daha iyi anlayabilirsiniz.

Şimdi dilerseniz yavaş yavaş script entegremize başlayalım .

Normal HTML çalışmalarında scriptlerimizi sayfalarımıza eklerken alttaki kodu <head> ile </head> taglari arasına ekliyoruz.

<script  type="text/javascript" src="/js/scriptimiz.js"></script>


bu sistem joomlada biraz değişiyor çünkü joomla bir içerik yönetim sistemi ve karmaşık bir dizin sistemi var aslında prensip aynı fakat dizin adresleri değişik aşağıdaki gibi.


<script  type="text/javascript" src="/<?php echo  $mosConfig_live_site;?>/templates/<?php echo  $mainframe->getTemplate(); ?>/js/scriptimiz.js"></script>




dikkat ederseniz script’e giden yol üzerinde js/ adlı bir klasör olusturduk bu klasör’ü joomla dizininde temamızın klasörünün içinede aynı şekilde olusturmalıyız (örnek: joomla => templates => tema klasörü => js.) ve oluşturduğumuz bu klasör içine mootools kütüphanemizi atmamız gerekli (mootools.svn.js) .


Bütün bu  yaptıklarımızdan sonra , şimdi index.php içinde scriptimize giden yolu  yukarıdaki örnekteki gibi belirtelim .


Index.php’de 19.satıra şu kodları ekliyoruz.


<script  type="text/javascript" src="/<?php echo  $mosConfig_live_site;?>/templates/<?php echo  $mainframe->getTemplate(); ?>/js/mootools.svn.js"></script>




Şimdi yapmamız gereken temamızın içerisinde bir panel oluşturmak ve bu panelin içerisine son haberlerimizi gösteren modülü yerleştirmek .


Panelimizin  adı panel olsun yani <div id=”panel”>  </div>

Panelimizi  content taginin hemen altina 43. satira   yerleştirelim aşagıdaki gibi,




ve template_css.css  dosyamızı açarak panel tagimizin emirlerini verelim.


#panel{
   width:100%;
   background-color:#CCCCCC;
   text-align:left;
   }


genişlik bir üst div tagi ile (#content) aynı olsun dedik ve arka plan rengi #cccccc olsun daha sonra bu renk istedigimiz şekilde değiştirile biliriz.(önemsiz bir öğe)


Şimdi sıra geldi  panelimizin içine koyacağımız module bu modulun adı’da son_haber olsun

Yani <div  id=”son_haber></div>


Şimdi görünüm olarak önümüzde şöyle bir  kodlama var


<div  id="panel">
    <div  id="son_haber">
    </div>
    </div>


ve son olarak’da joomlanın latest news  modülünün kodlarını son_haber taginin içine yerleştirelim


<div  id="panel">
    <div id="son_haber">
    <?php mosLoadModules ( 'user1' ,  '-3');  ?>
    </div>
    </div>


şimdi sayfadaki görünüm söyle olmalı ;


user1 ‚den sonra  -3 yazdık çünkü sayfanın kendi modul yapısını  kullanmak istiyoruz.




şimdi rahatsızlık veren tek durum sanırım modülün başlıgı sona kadar vertikal bir şekilde devam etmiyor biz bunu aşağidaki gibi değiştirebiliriz,


#son_haber .module div div div h3 {
    color: #666;
    font-family: Tahoma, Verdana,  sans-serif;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    background:  url(../images/h3.jpg) top left repeat-x;
    font-weight: normal;
    line-height: 26px;
    padding: 0 10px;
    margin: 0 auto;
    }


background grafiği olan h3.jpg’yi repeat-x  olarak vertikal tekrarlattık.




ama siz bunun  yerine kendi grafiğinizi kullanabilirsiniz.


Şimdi sıra geldi  paneli saklamaya ve bir button yardımı ile çağırmaya.


İlk önce butonumuzu herhangi bir grafik programı ile oluşturalım ben bu iş için macromedia fireworks kullandım ve şoyle bir button oluşturdum;




şimdi bu oluşturduğumuz  butonuda index.php içine yerleştirelim.


Yalnız yerleştirmeden önce tema içinde bir küçük düzeltme yapalım ve devam edelim temayı yapan kişi wrapper kısmını yani header’i içerikten 8px ayırmıs biz bunu istemiyoruz cünkü butonumuzun header ile birleşik olması için aşağıdaki kodları template_css.css içinde bulalım ve padding kısmındaki 8px’lik ayırımı 0px yapalım …


#son_haber .module div div div h3 {
    color: #666;
    font-family: Tahoma, Verdana,  sans-serif;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    background:  url(../images/h3.jpg) top left repeat-x;
    font-weight: normal;
    line-height: 26px;
    padding: 0 10px;
    margin: 0 auto;
    }


şimdi butonumuzu  index.php içine yerleştirebiliriz butonumuzun ismi <div  id=”buton”> </div> olsun .


ve bu kodu  hemen panelimizin altına ;


<div  id="panel">
    <div id="son_haber">
    <?php mosLoadModules ( 'user1' ,  '-3');  ?>
    </div>
    </div>


şu şekilde <div  align=”center”>ortalayarak</div> yerleştirelim aşağıdaki gibi;


<div  id="panel">
    <div id="son_haber">
    <?php mosLoadModules ( 'user1','-3' ); ?>
    </div>
    </div>
    <div  align="center">
    <div  id="buton"></div>
    </div>


ve sonrasında  hemen css kodlarımız’a donelim,


#buton{
    width:139px;
    height:35px;
    background-image:url(../images/panel_button.jpg);
    background-repeat:no-repeat;}


css ile  alakalı kodlarımızı’da template_css.css dosyamıza ekledikten sonra elimizdeki  görüntü şu şekilde olmalı.




şimdi önceden eklediğimiz scriptimizi artık calıştıralım bunun için mootools sayfasındaki fx.slide kodlarından yararlanacagiz. http://demos.mootools.net/Fx.Slide


eklememiz  gereken kodumuz aşağıdaki gibi; bu kodu <head> ile </head> taglari arasına yerleştirmemiz  gerekiyor.


<script  type="text/javascript">
    window.addEvent('domready',  function(){
    var mySlide = new Fx.Slide('panel');
    mySlide.hide();
    $('toggle').addEvent('click',  function(e){
    e = new Event(e);
    mySlide.toggle();
    e.stop();
    });
    });

    </script>


 



var  mySlide = new Fx.Slide(‘panel’); bu kısma panel dedik çünkü açılır kapanır elementimiz panel olacak.


mySlide.hide();  buraya “hide” dedik çünkü  panel sayfa ilk yüklendiğinde görünmesin istiyoruz.


Ve bu  kodu’da ekledikten sonra panelimizin ortadan kaybolması gerekli aşağıdaki gibi;




şimdi sırada  paneli açmamızı sağlayan kod gerekli aşağıdaki gibi;


<a  href="#" id="toggle"></a>


bu kodu  butonumuza entegre edecegiz,


<div  align="center">
    <a  href="#" id="toggle">
    <div  id="buton"></div>
    </a>
    </div>


evet hepsi bu kadar arkadaşlar umarım sizler de evlerinizde pc başında bu anlattıklarımı tekrarlar ve başarılı bir şekilde sayfalarınıza web 2.0 nin getirdiği güzellikleri katarsınız.


Saglik mutluluk ve esenlikle kalin.

				


				
Tags: , 
 Posted in 懒得分类 |   No Comments »


			


				

				
Joomla Temel CSS Yapısı, Joomla Dersleri

				星期二, 七月 1st, 2008

				

					
Sevgili arkadaslar bir derste daha birlikteyiz bu derste sizlere kisaca joomlanin temel css yapisindan söz etmeye calisacagim joomla tema yapimina yeni giren arkadaslar icin umarim bir klavuz kaynagi olacak tabiki css üzerine anlatilacak daha bir düzine sey var ilerleyen zamanlarda bunlari tek tek inceleme firsati bulacagiz.




Menü


#active_menu{} Secili olan menu , Aktif menü

.mainlevel {} Ana menüde yer alan menü noktalari

.sublevel {} Menü noktalarinin alt menüleri








Üye girisi


#mod_login_password{} Parola alani

#mod_login_remember{} Hatirlatma alani

#mod_login_username{} Kullanici adi alani








Haberlesme formu


.contact_email {} Haberlesme formu genel yapisi

#emailForm{} Haberlesme form ID’leri „Adiniz , mail adresiniz vb.“

#contact_email_copy{} Checkbox, gönderilen mesajin kopyasini alma

#contact_text{} Mesaj alani








Arama ve Arama sonuclari


.search {} Arama DIV tag’i

.searchintro {} Arama sonuclari:  “Toplam XX sonuç bulundu”

#search_ordering{} Dropdownmenü  siralama alani

#search_searchword{} Arama yazi alani , input

#searchphraseall{} Radiobutton filtre “Herhangi bir kelime”

#searchphraseany{} Radiobutton filtre “Tüm kelimeler”

#searchphraseexact{} Radiobutton filtre  “Cümlenin tamami”











Butonlar


.button{} Genel buton yapisi

.back_button {} Geri butonu

.buttonheading{} PDF, PRINT- ve Email-Buton

.blog_more {} „devam”-gösterimi Blog altinda

.blogsection{} Blog görünümünde daha fazla link en altta

.readon {} devamini oku butonu








Blog görünümü


.blog {} Blog görünümü tabelasi

.article_seperator {} Ayirac Blog icerikleri icin






Liste ve tabela görünümleri


.category {} Kategori ve bölüm listeleri

.sectionentry1 {} tekli liste  görünümü (tabela seklinde)

.sectionentry2 {} ciftli liste  görünümü (tabela seklinde)

.sectionheader {} liste görnümü basligi






Mainbody bölümü


.pathway {} sayfa klavuzu „su an  buradasiniz“

.componentheading {} Bilesen  basliklari

.content_rating {} Degerlendirme  (iceriklerde)

.content_vote {} Degerlendirme  Sonuclari

.contentheading {} Icerik  basliklari   .contentpagetitle {} Sayfa basligi










Icerik


.createdate {} Icerik olusturus tarihi

.modifydate {} Icerik degistirilis tarihi

.small {} Kücük yazilar „yazar:admin“








Bir icerige ait diger sayfalar (mospagebreak)


.contenttoc {} Liste (mospagebreaks )

.toclink {} Listenin linkleri (mospagebreaks )

.pagenavbar {} Bir icerik icindeki nagigasyon(mospagebreak)

.pagenavcounter {} Icerik icindeki sayfa gösterimi  „3 sayfadan 2.si”( mospagebreak )








Coklu sayfalar


.pagenav {} Sayfa navigasyonu  << Basa dön< Önceki 1 Sonraki > Sona git >>

.pagenav_prev, .pagenav_next {} Kategorilerin navigasyonlari






Modüller – Son haberler , Popüler


.moduletable {} Modul tabelasi

.mostread {} Popüler icerikler

.latestnews {} Son icerikler






Modüller – Anketler ve Anket sonuclari


#poll{} DIV anket sonuclari  icin

.polls {} Anket modulu

.pollstableborder {} Anket tabelasi  (modul icinde)

.smalldark {} Modul yazilari

#voteid1,#voteid2, … {} Radiobutton Anket secenekleri icin






Modüller – RSS


.syndicate {} RSS feed grafiklerinin Gösterimi

.syndicate_text {} Modul icindeki basliklar






Weblinkleri


.weblinks {} Weblinkleri bileseni






Modüller – RSS


.wrapper {} Bagli olan sayfa

#blockrandom{} Wrapper icindeki sayfa görünümü “iframe”






Moduller genel


table.moduletable{} Modullerin  genel bicimleri

table.moduletable th{} Modul  basliklari  table.moduletable td{} Modul icerigi








Wrapper


.wrapper {} Bagli olan sayfa

#blockrandom{} Wrapper icindeki sayfa görünümü “iframe”






Evet sevgili arkadaslar bu dersimiz’de burada son noktayi bulurken hepinize saglik , mutluluk ve esenlikler diliyorum .

				


				
Tags: , 
 Posted in 懒得分类 |   No Comments »


			


				

				
Joomla 1.0 Tema Yapımı, Joomla Dersleri

				星期二, 七月 1st, 2008

				

					
Sevgili joomla dostlari,kullanicilari ve joomla yapimi ve gelistirilmesi konusuna gonul vermis tum arkadaslar yaklasik 1 veya 1,5 seneden beridir joomla ile ilgileniyorum ve bu sure icerisinde joomla gelisti ve sinirlari zorlar bir CMS haline geldi onunla birlikte benimde yeteneklerim gelisti ama bu demek degilki hersey burada bitmistir teknoloji,bilim vb. konularin gelisimine paralel olarak internet dunyasida hayatimizin vazgecilmez bir parcasi haline gelmis durumdadir ve kendisini devamli yenilemektedir eskiden insanlarin buyuk paralar verip’de bir internet sitesi sahibi olmasi seyrek gorunen bir olaydi ve yapanlar kendileri ile gurur duyup hatta bunu bir reklam araci olarak bile kullanirlardi , simdi ise artik durum oyle bir hal aldiki herkez kendi internet sitesini kendisi yapabilecek duruma gelmistir ve tabiki bu hayal joomla vb CMS sistemler sayesinde olmustur.

Iste bu baslik adi altinda siz sevgili forum uyelerimize elimden geldigi kadar joomla template yapimini daha dogrusu bir PSD sablonunu nasil joomla’ya uyarlayacagimizi kendi tekniklerimle anlatmaya calisacagim tabiki anlatim suresi uzun ve icerik hatali olabilir bunun icin simdiden sizlerden ozur diliyorum .


Anlatima baslamadan once kisadan gerekli olan arac ve gerecleri asagiya listeleyecegim;


a) Joomla uniform server (localhost) Bilgisayarinizda virtuel server olusturmanizi saglar…

b) Macromedia dreamweaver yada wordpad veya herhangi bir html editor …

c) Adobe photoshop Grafik programi…

d) Nattyware renk kodu programi http://www.nattyware.com/pixie.html

e) Multiple IE’s tum Internet Explorer’lar bir arada http://tredosoft.com/Multiple_IE


Onemli not: anlatimda kullanilacak olan PSD sablon sadece ve sadece bir anlatim araci olarak kullanilmistir .


Hedef sablonumuz asagidaki gibidir sonuc 100% olmayacak cunku sol menu jomlanin standart sol menusu ile uymuyor tabiki biraz ugrasilirsa 100% sonuc alinabilir onda suphe yok ama bizim amacimiz temayi 100% cevirmek degil tersine joomlaya ne sekil uyarlayabilcegimizi ogrenmek…


 


Bu konuda tema’yi bastan kendimiz yapmaya calisacagiz zaten temanin kendi index’i tablolar’ile cizilmis ve bizi cok ugrastirir en bastan temiz bir sekilde yapmak daha iyi olacaktir…


Bugun vaktimin yettigi kadar hazirliklar ile baslayip ilerlemeye devam edecegiz..


Ben herzaman yeni bir temaya baslarken soyle bir yol izliyorum : elimdeki herhangi bir temayi kobay olarak kullaniyorum daha dogrusu kurban ediyorum nasilmi?  mesela elimde x temasi var localhostuma bu temayi kuruyorum kurduktan sonra temalarin oldugu dizine girip kurdugum x temasinin icini oldugu gibi bosaltiyorum index’ini images klasorunun icindeki grafikleri css dosyasini yani herseyi sifirliyorum sonuc olarak elimde sifir bir tema var ve simdi calismaya baslayabilirim…


Bu arada dersleri takip etmek isteyen arkadaslar sizlere PSD sablonununda vereyim …

http://volkann.vo.funpic.de/ders/joomladersleri.rar


flash entegrasyonu’na gecmeden evvel beni izleyen arkadaslar icin hemen buradan flash dosyamizi’da vereyim http://volkann.vo.funpic.de/ders/jd.rar

evet simdi flash entegrasyonu icin bize iki kutu gerekli birincisi container gorevini ustlenecek (flash_con) ikincisi flash’i kutulayacak (flash) ve birde flash tarzi animasyonlari joomlanin icine sokmak icin gerekli olan kodumuz var onuda asagida vereyim,


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="genislik yazican" height="uzunluk yazican">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/temanin adi/images/ekleyecegin animasyon.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/temanin adi/images/ekleyecegin animasyon.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="genislik yazican" height="uzunluk yazican"></embed>
   </object>


devam edelim …ilk once container’mizi yerlestirelim…


<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
</div>
</div><!-- flash container baslangici -->
</div><!-- ana container bitisi -->


dikkat ederseniz simdiye kadar daha template_css.css dosyasini hic ellemedik ama birazdan bu konuyada girecegiz. Simdi sira geldi flash dosyamizi eklemeye bunun icin sizlere yukarida verdigim kodu kullanacagiz…

not: flash genislik:740px

flash uzunluk :161px


<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container baslangici -->
</div><!-- ana container bitisi -->


Buraya kadar yaptiklarimizdan sonra bendeki HTML editor ve tarayicimdaki goruntuleri sizlere gostereyim ve devam edelim…

tarayici goruntusu


 


HTML editor goruntusu


 


evet buraya kadar simdilik hersey yolunda gitti ama bu zaten isin kolay kismiydi …

dilerseniz devam edelim… simdi yapmamiz gereken yine bir container olusturmak olusturacagimiz bu container sol menumuzu (left) ve icerigimizi(mainbody) tasiyacak buna ek olarak birkac’da grafik tasiyacak container’mizin ismi ‘main‘ olsun …


<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->

</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->


main container’mizi yerine yerlestirdikten sonra simdi icindeki elementleri yerlestirmeliyiz ama bu bolume gecmeden once artik template_css.css dosyasina bir el atmanin zamani geldi…

css dosyamiz’daki kodlama su sekilde ;


 /* genel html ayarlari####################################################################################### */

/* html yuksekligi */
html {
height:100%;
}/* html yuksekligi bitis */

body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.8em;/* yazi buyuklugu */
}
/* genel html ayarlari bitti######################################################################################### */

/* sayfa icindeki div'lerin ayarlari baslangic ######################################################################## */
#ana_con{
border-right:1px solid #000000; /* sag taraf kanarlik siyah*/
border-left:1px solid #000000; /* sol taraf kanarlik siyah*/
background-color:#ffffff;/* arka plan beyaz*/
width:740px;/* genislik*/
text-align:center;/* hack sayfayi ortalamamizi saglar margin auto oldugu takdirde*/
margin:auto;
}
#flash_con{
width:740px;/* genislik*/
height:161px;/* yukseklik*/
}
#flash{
/* bos kalabilir*/
}
#main{
width:740px;
margin:auto;
}


Bu arada beni takip eden arkadaslar belki farkina varmislardir temamizin index.php’sinde actigimiz <body> ve <html> tag’larini kapatalim ben unutmusum.

index.php’deki son gorunum soyle olmali…


 


ve devam…

son olarak main adli container’mizi yerine yerlestirmistik ve simdi sirada onun icine girecek olan elemanlari isimlendirme ve ekleme islemi var…

solmenumuzu yine bir container icine sokalim ve bu container’mizi sol_con olarak adlandiralim daha sonra bu container’nin icine’de solmenu’yu sokalim…


 <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


simdi sirada solmenu’nun icine joomla’nin left menu icin yazdigi php tagini eklemek var… left menu php kod asagidaki gibi;


<?php mosLoadModules ( 'left' ); ?>


ve gorunum soyle olmali;


<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


simdi sablonumuza dikkat ederseniz flash animasyonun hemen altinda icerik’in oldugu kismin ust tarafinda bir bombe var asagida gostereyim;


bu bombeyi psd sablonundan kesmemiz gerekli bunun icin elinizdeki psd sablonunu adobe photoshop yardimi ile acin bu arada kucuk bir hesap yapmak istiyorum bu gerekli cunku sayfa genisligimiz 740px sol menu genisligimiz 171px olacak geriye kalan genisligi icerik bolumu icin kullanacagiz yani 569px olacak oyleyse actigimiz PSD sablonun’da bombeli bolumden 569px genisliginde bir parca kesecegiz uzunlugu ise hemen hemen bombenin bittigi yere kadar olabilir atiyorum 20px diyelim…


oyle ise PSD sablonumuzu acalim ve strg+shift+e tuslari ile grafigimizi bir tabanda sabitleyelim;

yukarida’da goruldugu gibi butun resim bir tabanda birlesti simdi kesime hazir

rectangle selection tool’u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi’de 20px olarak ayarlayalim…rectangle selection tool’u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi’de 20px olarak ayarlayalim…


 


ve bombeli kismi strg+x yardimi ile keselim strg+n yeni bir tabela acalim ve ismini bombe_bg yapalim enter deyip gecelim ve acilan pncerede strg+v tuslari ile kestigimiz grafigi yapistiralim son olarak web icin kaydet diyelim ve localhost’da temalar bolumundeki temamizin icine images klasorune kaydedelim…

yapamayan arkadaslar buradan imaj’i alabilirler

imaj


 


butun bunlardan sonra yine index.php’ye geri donuyoruz ve kaldigimiz yerden devam ediyoruz en son olarak left menumuzu ekledik ve simdi sirada left menunun solunda belirecek olan alan kaldi yani icerik kismi bu alan icin yine bir container aciyoruz ismi ‘icerik_con’ olsun ve bu container’nin icine sirasi ile bombe’li grafigimizi ve mainbody kismini ekleyecegiz bombeli grafigimizi ekleyecegimiz div taginin ismi yine ‘bombe’ olsun ve mainbody’i ekleyecegimiz tagin ismide ‘icerik’ olsun …


<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitis -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


ve icerik div taginin icerisine joomlanin mainbody kodunu ekleyelim;


<?php mosMainBody(); ?>


<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitis -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


ve simdi tekrar css kodlarimiza donelim yeni ekledigimiz div taglarini sekillendirelim…


/* genel html ayarlari####################################################################################### */

/* html yuksekligi */
html {
height:100%;
}/* html yuksekligi bitis */

body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.8em;/* yazi buyuklugu */
}
/* genel html ayarlari bitti######################################################################################### */

/* sayfa icindeki div'lerin ayarlari baslangic ######################################################################## */
#ana_con{
border-right:1px solid #000000; /* sag taraf kanarlik siyah*/
border-left:1px solid #000000; /* sol taraf kanarlik siyah*/
background-color:#ffffff;/* arka plan beyaz*/
width:740px;/* genislik*/
text-align:center;/* hack sayfayi ortalamamizi saglar margin auto oldugu takdirde*/
margin:auto;
}
#flash_con{
width:740px;/* genislik*/
height:161px;/* yukseklik*/
}
#flash{
/* bos kalabilir*/
}
#main{
width:740px;
margin:auto;
}
#sol_con{
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
#sol_menu{
/* bos birakiyoruz*/
}
#icerik_con{
text-align:left;/* yazilari sol'a yanastiriyoruz*/
float:right;/* bu container sag tarafa yanasik olmali*/
width:569px;
}
#bombe{
background-image:url(../images/bombe_bg.jpg);
background-repeat:no-repeat;
height:20px;
width:569px;
}
#icerik{
/* bos kalabilir*/
}


tum bu yaptiklarimizdan sonra bendeki son gorunumler

HTML editor

index.php


 


template_css.css


 


tarayici


 


arkadaslar önceki yaptigimiz css calismalarina dair ;

#sol_con{

width:171px;/* genislik*/

height:100%;/* yukseklik*/

float:left;/* sol tarafa yanastirmak icin*/

}


satirlarini soyle degistirelim


#sol_con{

text-align:left;

width:171px;/* genislik*/

height:100%;/* yukseklik*/

float:left;/* sol tarafa yanastirmak icin*/

}


eklenti olarak sadece text-align eklentisi yaptik nedeni ise #ana_con kodlarini yazarken text-align:center demistik ve diger container’lerde text-align:left demedigimiz takdirde yazilar ortada cikmaya devam edeceklerdir…


simdi sablonu dikkatlice inceledigimiz takdirde bizim sol menu olarak kullandigimiz bolumu sablonu cizen kisi en ustte login bolumu ve onun altinda newsletter olarak kullanmis orjinalligi bozmamak icin bizde o bolumde solmenumuzun uzerine mesela arama bolumu ekleyebiliriz ne dersiniz?

o zaman baslayalim …kullanacagimiz alan PSD sablonumuzda login bolumu icin kulanilan alan olmaktadir ve bizim temamizda solmenumuzun ustune gelecek…

Hep birlikte PSD sablonumuzu acalim ve member login kismini oldugu gibi bosaltalim sonuc olarak asagidaki gibi bir gorunum elde edecegiz;


 


simdi sablonumuzu tekrar kesime hazir hale getirmek icin strg+shift+e tuslarina basalim ve sablonumuzu bir tabana sabitleyelim,

ve yine her kesimde oldugu gibi rectangle selection tool’u secelim ve sabit buyukluk kisminin genislik ayarini 171px yukseklik ayarini 110px yapalim asagidaki gibi;


 


bu kismi strg+x ile keselim strg+n ile yeni bir tablo acalim ve adini arama_con_bg olarak degistirelim enter ile gecelim strg+v ile acilan pencerede yapistiralim ve web icin kaydet diyelim temalar bolumundeki temamizin images klasorune yapistiralim…


yapamayan arkadaslar icin asagida tekrar bu imaj’i veriyorum ;


 


grafigimiz hazir simdi diledigimiz gibi bir arama alani olusturmamiz gerekli bunun icin iki kutuya ihtiyacimiz olacak birincisi container olup arama kutusunu icinde barindiracak adi ‘arama_con’ olsun ikincisi ise arama bolumunun kodlarini icinde barindiracak adi ‘arama’ olsun bu iki kutuda sol_con adli div container’mizin icinde solmenunu adli divtaginin uzerinde yer alacaklar…


simdi hepberaber arama_con adli div container’mizi yerine yerlestirelim asagidaki gibi;


<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="arama_con"><!-- arama_con container baslangici -->
</div><!-- arama_con container bitisi -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


arama kutusunun container’nisini temamizin index’ine yerlestirdikten sonra simdi sirada arama kutusu var onuda herzamanki gibi onun icin hazirladigimiz container’nin icine sokacagiz yani arama_con’un icine asagidaki gibi;


<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="arama_con"><!-- arama_con container baslangici -->
<div id="arama"><!-- arama baslangici -->
</div><!-- arama bitisi -->
</div><!-- arama_con container bitisi -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


arama kutumuzu’da bu sekilde ekldikten sonra simdi sirada joomlanin search kodlarini arama kutusunun icine yerlestirmeliyiz asagidaki gibi;


<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="arama_con"><!-- arama_con container baslangici -->
<div id="arama"><!-- arama baslangici -->

<form action="index.php" method="post">
 <div align="center">
  <input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>" onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
  <input type="hidden" name="option" value="search" />
 </div>
</form>

</div><!-- arama bitisi -->
</div><!-- arama_con container bitisi -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>


buraya kadar index.php ile olan isimiz simdilik bitti ve simdi css dosyamizi acalim ve yeni ekledigimiz div taglarini sekillendirelim asagidaki gibi ;


#icerik{
/* bos kalabilir*/
}
#arama_con{
width:171px;/* genislik*/
height:110px;/* yukseklik######## yukseklik grafigimizin yuksekligi dikkat ederseniz*/
background-image:url(../images/arama_con_bg.jpg);
background-repeat:no-repeat;
}
#arama{
width:100%;/* genislik bolumu container'nin icinde oldugu icin 100% kalabilir*/
height:auto;/* genislik orjinal olarak biraktik */
padding-top:50px;/*yukaridan 50px uzaklastirdik boylece kutunun tam ortasinda izlenimini almis olduk*/
}


icerik kodunu dunku calismada unutmusuz onuda simdi ekledim


simdi dilerseniz yavas yavas solmenumuzu css ile sekillendirelim ama buna gecmeden once PSD sablonumuzdan bir grafik daha kesmemiz gerekecek bu grafigi modul header olarak kullanacagiz hep beaber PSD sablonumuzu acalim ve newsletter bolumunun icini bosaltalim ve bu bolumdeki grafigi keselim boyutlari en:171px boy:40px olmak uzere ve keserken yaklasik 5px kadar yukari kaydiralim yani kutuyu tam olarak degilde biraz yukari kaydirip keselim asagidaki gibi;


 


asagida tekrar imajimizi yapamayan arkadaslar icin vereyim;


 


ve simdi yine css dosyamiza donelim kestigimiz imaji yerine yerlestirelim hepimizin bildigi gibi modul sekillendirme islemleri icin kullanilan birtakim css kodlari var onlar hakkinda biraz bilgi vereyim ve devam edelim


a) table.moduletable{} : modul tablosunu sekillendirir

b) table.moduletable th{}: modul header kismini sekillendirir

c) table.moduletable td{} : modul icerigini sekillendirir

d) table.moduletable td a{}: modul icindeki linkleri sekillendirir

e) table.moduletable td a:hover{}: modul icindeki linklerin mouse uzerine geldigindeki durumu sekillendirir

f) table.moduletable td a:visited{} : modul icindeki ziyaret edilen linkleri sekillendirir,


simdi butun bu bilgilerden sonra yine css dosyamiza donup modulmuzun header kismini ayarlayalim bunun icin gerekli kodumuz neydi ?

tabiki table.moduletable th{} o halde asagidaki gibi bir ayar yapalim;


#solmenu table.moduletable th{/* modul header ayarlari */
  text-align:left;/* yazilar solda */
	color: #FFAA00;/* yazi rengi */
	width: 171px;/* genislik*/
	background-image:url(../images/solmenu_th_bg.jpg);
	background-repeat:no-repeat;
	padding:15px 0 0 10px; /* yukaridan 15px sagdan 0px asagidan 0px soldan 10px ayirik */
}


simdi dilerseniz modul tablomuzu sekillendirelim tabiki table.moduletable{} kodumuz ile asagidaki gibi ;


#solmenu table.moduletable {
	width: 171px;
}


simdide modullerimizin icindeki elemanlari sekillendirelim bunun icin gerekli kodumuz table.moduletable td{} asagidaki gibi;


#solmenu table.moduletable td{
	width: 171px;/* genislik*/
  padding-left:5px;/* soldan 5px ayri*/
	padding-bottom:2px;/* asagidan 2px ayri*/
}


Buradan sonra geriye kalan kodlari kullanmamiza gerek yok cunku geriye kalan td:a,hover,visited kodlarini sayfanin genel ayarlari ile birlestirecegiz ama mouse linkin uzerine geldiginde grafik ciksin veya ziyaret edilmis linkler grafik ile gosterilsin istiyorsak tabiki bu kodlari kullanmamiz sart olurdu bunun yerine biz asagidaki kodlari css temamizin genel HTML ayarlari bolumune ekleyelim;


a {
 color: #800000;
 text-decoration:none;
}
a:hover {
text-decoration:underline;
color: black;
}

evet modullerimiz hemen hemen sekillendi daha sonra belki gerek gorursek bu konuya tekrar donup bir iki degisiklik yapabiliriz...

				


				
Tags: , 
 Posted in 懒得分类 |   1 Comment »


			


		
		

			
« Older Entries