http://www.yakuter.com

Öncelikle kendimize bir tasiyici belirliyoruz. Tasiyici nedir derseniz ,

resimdeki "container" tasiyicidir. Tasiyici bütün ögeleri içine alir. Yazacagimiz her sey bunun içinde yer alir ve sayfayi hizalarken bunu kullaniriz.

Sayfayi ortalamanin ilk yolu kodda göründügü gibidir.

Duz Metin
#container {width: 760px; margin: 0 auto; }
Css dosyanizda bu sekilde bir kullanim opera ve firefox gibi tarayicilarda sorunsuz görünse de internet explorer’da sorun çikartacaktir. Bütün tarayicilarda ortalanmis sorunsuz bir görüntü elde etmek istiyorsak yapmamiz gereken css dosyamizdaki body seçicisini su sekilde düzenlemek.

Duz Metin
body {text-align: center; }
Böylece sayfadaki her sey ortalanacaktir. Fakat bizim istedigimiz sadece tasiyicinin (container) ortalanmasi ve digerleri nesnelerin(yazir, resim…) tasiyicinin içinde sola yaslanmasi. Kodumuza son halini verip bütünlestirirsek css dosyamiz söyle olmalidir

Duz Metin
body {text-align: center; }
#container {width: 760px; margin: 0 auto; text-align: left; }
Artik tamamen ortalanmis bir sitemiz var 

Not: Bu resmi de iyiki zamaninda hazirlamisim. Her makalede isime yariyor

Stil (CSS) Optimizasyonu
Yakuter
http://www.yakuter.com

Günümüzdeki sitelerin tasarimlari artik CSS ile olusturuluyor. Bantgenisliginden Konusalim baslikli makalede bantgenisligini ekonomik kullanmak ve paramizin cebimizde kalmasi yapmamiz gereken islemlerden birisinin de stil dosyamizi optimize etmek oldugunu belirtmistim. Her ne kadar stil dosyalari, sitede kullanilan resimler kadar bantgenisligine etki etmese de sitemizin her bakimdan sade kodlarla olusturulmasi bizim için her zaman avantajdir.

 Soluk Görünümlü Resim Baglantilar  22 Agustos
t-infection.com

Basligin çok karisik oldugunun farkindayim. Bu yazimda sizlere anlatmak istedigim sey birçok blog sitemizin kullandigi küçük soluk resimlerin fare ile üzerine gelince asil rengini almasi ve baglanti alani olarak kullanilmasi. (Örnek olarak, Sesebian ve Fikirbozan‘in sidebar bölgesine bakabilirsiniz) Fikirbozan.net’in gönderisinden esinlenerek yazdigm bu makalede hem geçerli (valid) bir kod yazimi ve kolaylikla sitemize uygulayacagimiz bir örnek yapacagiz. Aslina bakarsaniz bu isi filter parametresi ile de yapabiliyoruz ancak bu yöntem W3C’nin Xhtml Validation alanindan geçemiyor. Bu yüzden hali hazirda DynamicDrive.com üzerinde kullanilan suradaki scripti geçerli bir hale getirdim. Localde yaptigim denemelerde scriptin hem çalistigini hem de Geçerlilik Testinden geçtigini gördüm. Bu küçük ön bilgiden sonra hemen uygulamamiza geçelim.

Öncelikle bu uygulamayi bir blog sitesinde kullanacaksaniz header.php dosyanizi açin ve asagidaki kodlari girin. Sayet bunu html/css bazli bir sitede kullanacaksaniz head etiketinin bitiminden önce asagidaki kodu yazin.
Yaziyi Kapat ?

<script type=”text/javascript”>
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>

Bu kodu yazdiktan sonra resim baglantilarimizi göstermek istedigimiz alana ise asagidaki kodu yaziyoruz. (Blog sitelerinde sidebar.php dosyasi içine bu kodu yerlestirebilirsiniz)

    * <div class=”baglantikutusu”>
      <a href=”whatever.html”><img src=”resminiz.gif” style=”filter:alpha(opacity=20);-moz-opacity:0.2? onmouseover=”makevisible(this,0)” onmouseout=”makevisible(this,1)” alt=”" /></a>
      </div>

Böylelikle ilgili alandaki resimleriniz soluk bir sekilde görünecek ve verdiginiz link özelligi nedeniyle fare ile üzerine gelince asil rengini alacak. Bu islemi yaparken ben baglantiyi bir div sinifi içine aldim. Bu sinifi siz kendinize göre de degistirebilirsiniz. (div sinifi içine almadiginiz linkler geçerlilik testinden geçemeyebilir) Resimlerinizin (baglanti vereceginiz resimlerin) ayni ebatta olmasi bu uygulamanin daha kolay ve daha güzel olmasini saglar. (Tipki verdigim örneklerdeki gibi)

Böylece istediginiz kadar baglantiyi belli bir alanda gösterebilir ve ziyaretçilerinize farkli bir görünüm sunabilirsiniz. Umarim faydali olmustur… (Sayet bu uygulamayi bir blog üzerinde uygulayan arkadaslar olursa lütfen sitelerini geçerlilik testine tabi tutsunlar)

22 Agustos 2007 tarihinde wolkanca yazdi.
http://blog.wolkanca.com

Mark W. Lewis, bir web tasarimcisi iseniz müsterilerin size söylemesi olagan tam 10 büyük yalani siralamis ve Hasan Yalçin’da bunu bizim için Türkçeye çevirmis. Maddelere bakinca hepsinin altina imza atabilecegimi gördüm. Bu bizim ülkeye hasmi yoksa dünyada da böylemidir bilemiyorum. Diger sektörlerde de bu tarz yazlanlar mevcuttur diye düsünüyorum.

« Newer Posts