Arkaplanı aldığım siteden resmin küçük kare halini kaydettim bilgisayarıma ve fotoğraf programında düzenleyip yeni bir arkaplan oluşturdum. Bu yeni arkaplanım şöyle.
Görüldüğü gibi arkasında başlangıçta seçtiğim arkaplanın resminin olduğu ortasında ise yazı alanının arkaplan renginde doldurulmuş uzun bir resim. Bu resim yine kendini enine ve boyuna sonsuza kadar tekrarlıyor. Ancak biz bunun yatay düzlemde tekrarlandığını görmüyoruz sadece düşey düzlemde tekrar ediyor. İnternetten aldığım kırmızı arkaplan resmi 199*200 piksel uzunluğundaydı. Önce resim programında 2000*200 piksel boyutlarında bir boş resim açtım. İçine kırmızı küçük resmi kopyalayıp yapıştırarak enine tekrarladım. Daha sonra da başka bir boş sayfa oluşturdum ve içini yazı alanının renginde doldurdum. Bunun genişliğini 930 piksel ayarladım (yazı alanım 900 pikseldi yanlardan da biraz gölge için taşma payı verdim). Sonra bu resmi uzun kırmızı resmin tam ortasına yapıştırıp gölgeler verip kaydettim. Daha sonra da kodda bu yeni resmi arkaplan olarak atadım. Koda top (yukarı) ve center (ortaya) komutlarını eklemeyi unutmayalım.
body { background: url(http://gece.fezaneverd.com/pic/arka1.jpg) top center;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center; }
Yeni oluşturduğum bu arkaplan resmini 2000 piksel uzunluğunda seçmemin sebebi ise şu. Google Analytic kullanıyorsanız ziyaretçilerin hangi kapasitede ekran çözünürlükleriyle size geldiğinin bilgilerine erişebilirsiniz. Çoğunluk 1024 piksel genişilik olmasına rağmen en fazla 1900 piksel genişlikteki bilgisayarlardan bloguma bakılmış. Ben de onların da düzgün görüntülemesi için 2000 yaptım. Eğer 1500 falan yapsaydım, sağ taraftan yeniden tekrarlandığını ve yarım bir arkaplan göreceklerdi.
Bu arkaplanı ekleyip bannerimde biraz düzeltmeler yaptıktan sonra şablonum tamamlandı ve
haline geldi. Şimdi sidebar ve yazı alanının tamamı aynı renkte ve yan taraflardaki gölgeler biraz derinlik kattı. Yan taraflarda gölge yerine, kurdele, noktalar, çerçeve, küçük süsler, çiçekler gibi bir sürü şey kullanılabilir. Yaratıcılığınıza kalmış.
Yapmış olduğumuz değişikliklere buradan bakabilirsiniz.
Buraya kadar öğrendiklerinizi hayal gücünüzü de kullanarak geliştirebilirsiniz. Web tasarımında işin %50 si bilgi ise %50 si de tasarıma kalmıştır. Her kişi bu kodları öğrenebilir uygulayabilir. Ancak görsel objeleri kullanma becerisi herkeste aynı değildir. Sanatsal yatkınlığa bağlı. Bu yüzden teknoloji ve yaratıcılığın kullanıldığı web tasarımı benim her zaman ilgimi çekiyor.
Bu yaptığım tasarımı üzerinde çok düşünmeden yaptığım için çok hoşuma gitmese de, elimizdeki malzemelerin her zaman uygun bir kombinasyonla güzel görünür hale getirilebileceğinin ispatıdır. Bundan sonra anlatımdan ziyade, boş zamanlarımda yaptığım şablonları yayınlayacağım ve ilave olarak yeni bilgiler varsa bundan bahsedeceğim.
Ellerine emegine bilgine saglik
YanıtlaSilcok tesekkur ederim kendi adima
sevgiler
Tamam ablacım,yarın veya ne zaman boş olursan o zaman bakarsın. Bu arada şablon yapma fikrini aslaaa red etmem kii :))) Ben sana bırakmak istiyorum rengini herşeyini. Sen benim blog şablonumu nasıl görmek isterdin ona göre ayarla kendin bişiler olmazmı? Şimdi ben kararsızım bu şablon konularında o yüzden çook vakit gecer ben begene kadar :) Anne kazınki çok hoş olmuş, sana güveniyorum :)
YanıtlaSilHarika bir iş başarmıssın. Ellerine sağlık.
YanıtlaSilİyi günler kullandığınız arka planları hagi siteden aldığınızı çok merak ettim. Acaba yazılarınız da arka plan aldığınız sitenin veya sitelerinde adını yayınlarmısınız bize yararlanabilelim diye yayınlarsanız seviniriz.. Ayrıca çalışmalarınız çok faydalı bunun için de çok teşekkürler...
YanıtlaSilAybeniz
Oleeyyy bitti iştee. Bundan sonrası bize kalmış yaratıcılığıza. Çeşit çeşit şablonlar yapabiliriz. Sayende canım teşekkürler.
YanıtlaSilarkapalnaları aldığım birkaç siteden 2 ci yazıda bahsetmiştim. Ancak bu tarz bir çok site var. Google ararsanız hemen bulursunuz.
YanıtlaSilCanım senin bloga 5 denemede geldim çok kasıyor bilesin.Sana kolay gelsin ben de o kelebekler tam çıkmakta ama sanırım ekran ayarlarından herkesin bir ara el atıcam değiştiricem canım sevgiler.
YanıtlaSilSağol Babuş öğretici insan güzel insan hoş insan teşekkür edenzi yani
YanıtlaSilyazılarınız için çok teşekkür ederim.benim gibi çok acemibir blogcuya yardımcı olurmusunuz diye bir ricada bulunsam.
YanıtlaSilmerhaba, bütün dersi baştan itibaren uygulayarak buraya kadar geldim, ama burda takıldım kaldım, dediğiniz gibi resmimi 2000*935 yani kendi istediğim gibi ayarladım imageshack apload ettim,kodu aldım dediğiniz yere aynen yapıştırdım, top center' da ekledim gösterdiğiniz gibi ama olmuo, okuma alanı boyut olarak kaplamaması gerkirken bütün ekranı kaplıo benbeyaz oluo sayfa, top center'ı çıkatıp denedim o zaman da arka planın sol tarafını görüyorum fakat sağ taraf yine görünmüyor. yardımcı olurmusun. teşekkürler.
YanıtlaSilpardon 2000*200 tamamı. okuma alanıda tam ortaya gelecek şekilde 935*200.yukarda yanlış yazmışım.
YanıtlaSiladsız arkadaşım eğer denediğin blogun adresini verirsen kodlarına bakar neden olamadığını söyleyebilirim
YanıtlaSilMerhaba;
YanıtlaSiloncelikle tum dersleriniz icin cok tesekkur ederim. Sayenizde pek cok sey ogrendim ve kendi kendime bunlari deneyerek pekistirmeye cabaliyorum.
Ben size tasarimla ilgili bir soru daha soracaktim izniniz olursa:
Aslinda tam tasarimla mi ilgili pek bilmiyorum ama gonderdiginiz yazilarin altinda 12 yildiz parladi. sende geceyi aydinlat diyor. bu sanirim kodlar icindeki bir oynamayla gerceklesiyor fakat ben nasil olacagini yada yapilacagini anlayamadim. Sanirim dersleriniz arasinda da yok. Mumkunse ve eger vaktinizi almayacaksa bunun nasil yapildigini anlatabilir misiniz?
simdiden tesekkurler.
sevgiyle
benim blogumuda böyle güzel düzenliyen biri olsa :D bir türlü beceremiyorum iş yogunluğumdan ..:(
YanıtlaSilEllerinize sağlık güzel çalışma olmuş
YanıtlaSil