makale etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
makale etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

15 Mart 2007

BLOG’UMUZA ARKA PLAN RESMİ YERLEŞTİRMEK


Dostlar biliyorsunuz bundan önce bir tane arka plan resmi yapmayı öğrendik. Şimdide yaptığımız arka plan resmini BLOG ‘umuzun arka planına nasıl yerleştireceğimizi görelim. Yaptığımız arka plan resmini kullandığım resim host sitesine yani PHOTOBUCKET e upload ediyorum. Yani bilgisayarımdan yüklüyorum. Blog ’umuzu template sekmesinde edit html bölümünde açalım. Burada blogumuzun html kodlarını göreceğiz. Tarayıcımızın toolbarında Düzen sekmesinde bu sayfada bul ibaresini seçelim. Açılan arama kutusuna body kelimesini yazalım. Aşağıda yazdığımız kod grubunu bulalım.



*/

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Bu css property tabir edilen bölümde body sınıfının özelliklerini belirleyen kod grubudur. Burada aşağıdaki gibi değişiklikler yapacağız ve resmimizi buraya yerleştireceğiz. Resmimi yüklediğim host sitesinden aldığım resmimin URL adresini buraya aşağıdaki gibi css kodlarında diğer değişiklikleri de yaparak yerleştiriyorum.



*/

body {
background-image: url(http://i151.photobucket.com/albums/s125/ihtiyarus/ders_6.gif);
background-position: top;
background-repeat: repeat;
background-attachment: fixed;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

daha sonra Save Template düğmesine basıp kaydediyoruz. Daha sonradain a new window ibaresine basıp blogumuzun son halini tarayıcıda aşağıda gibi görüyoruz. Yalnız burada eğer arka plana 1024x768 ebatlarında tek resim koyarsanız şayet background-repeat: none; şeklinde düzeltmeniz gerekiyor. İşlemimimiz bu kadar.


14 Mart 2007

ARKA PLAN RESMİ YAPALIM

Evet dostlar bu gün sizlerle arka plan resmi yapacağız.Bunun için herhangi bir grafik yani resim editörüyle çalışabiliriz. Ben FİREWORKS programını kullanıyorum sizler PHOTOSHOP, PAİNTSHOPPRO veya PAİNT gibi programda kullanabilirsiniz. Şimdi bunlardan elinizin altında hangi program varsa onu açalım. Bizim genelde BLOGGER veya diğer web sayfalarının alan ölçüleri genelde 1024x768 pixel oluyor. Biz bu alana tek bir parça resimde koyabiliriz veya sayfanın çabuk yüklenmesi yani açılması için birkaç parçaya da bölebiliriz. Yine bu alana küçük bir resimde koyabilir kendini tekrarlamasını sağlayarak o alanı kaplayabiliriz. Şimdi biz bu en son söylediğimize bir örnek yapalım.

340 px X 384 px ebadında bir dörtgen çizelim. İçini istediğiniz bir renkle boyayalım. Burada düz renk yerine bir teksture veya pattern de seçebiliriz.




Dörtgenin çerçevesini renksiz yapalım. Yani çerçeve olmasın. Daha sonra bu dörtgenin üzerine herhangi bir büyüklükte başka bir renkte yazı yazalım. Dörtgenin altta yazının üstte olmasını sağlayacak ayarlarımızı yapalım.

Daha sonra yazımızı kopyala yapıştır yöntemi ile çoğaltalım. Her birini değişik fontlarla da yapabiliriz veya aynı font yani karakter biçimi hepsinde aynı da olabilir. Bu tümüyle sizin yaratıcılığınıza ve zevkinize kalmış bir şey.

Son şeklini verdiğimiz çalışmayı PNG, JPEG, GİF resim formatlarından biri olacak şekilde kaydedin. Benim tavsiyem JPEG olmalı. Çünkü en az yer kaplayan yani dosya boyutu en küçük resim formatı olduğu için. Yalnız JPEG resim formatında grafik kalitesi biraz düşük olur. Görüntü kalitesinden ödün veremeyeceğiniz resimlerde ise GİF veya PNG tercih edebilirsiniz. Bir sonraki aşamada yaptığımız resmi BLOG ‘umuzun veya web sayfamızın BACKGROUND una yerleştirmeyi öğreneceğiz.

CANIM SIKILIYOR NE YAPSAM ACABA?

Dostlar web tasarımı işine merak sarmış epeyce insan olduğunu görüyorum. Konuyla ilgili internet 'te ne ararsanız var. Bu konuda oldukça güzel kaynaklar var. Yine oldukça güzel ve de harika olarak değerlendirdiğim emek ürünü çalışmalara rastlıyorum. Onları incelerken sergilenen zeka ve yaratıcılık konusunda hayran olduğum epeyce çalışma var. Bir de bu işe heveslenip de bir şeyler yapma gayreti içinde olan insanlarla tanışıyorum. Bence her alanda beceri gösterme çabası niye onu da anlamıyorum. İnsan hoşlandığı bir şeylerle uğraşmalı. O uğraşıya odaklanıp o işi en iyi şekilde yapmanın yollarını aramalı. Bütün bunları yaparken de mutlaka kendini o konuyla ilgili eğitmeli. Biliyorsunuz eğitimin yolu da okumak ve emek den geçer. Emek harcamadan kısa yoldan bir şeyleri elde etmenin yolu hüsrandır. Bunu denemeyin, diyorum ki bol bol okuyun. Kitap almak için paranız yoksa bu ayıp değil. Şu aralar ülkemizde evine kitap almayı bırakın günlük temel ihtiyaçlarını bile ancak karşılayabilen insanımız o kadar çok ki.. Buradan hareketle kitap almak da çok şart değil. İNTERNET ‘te o kadar çok bedava kaynak var ki. Yeter ki sizler ne aradığınızı bilin ve üşenmeden okuyun. Şimdi bakıyorum çok güzel yazı yazan insanlarla karşılaşıyorum. İnanın kitap yazıp satsalar kitapları yok satar. Her kes becerebildiği, haz duyduğu ve sevdiği işi yapmalı. Herkes grafik, web tasarımı bilmek durumunda değil. Şiir yazmayı deneyebilir, hayat hikayesini yazıya dökebilir insanlarla paylaşabilir. Fotoğraf çekebilir, müzikle uğraşabilir, resim yapabilir veya el becerilerine dayalı birtakım işlerle uğraşabilir. Maket, model gibi işlerle de uğraşabilir. Balık tutabilir, spor yapabilir. Demem o ki insanlar eğer bir şey yapacaklarsa o işle ilgili kendilerini geliştirsinler yada hiç bir şey yapmasınlar. Bölük pörçük oradan buradan yarım yamalak yamalı bohça gibi bir şeye benzemeyen kargacık burgacık. Oradan çal buradan çırp sonra kalk ben yaptım oldu demesinler. Daha çok ben ne yaratabilirim. Başka benzeri olmayan değişik bir şey denemeliyim demeli. Göğsünü gere gere benzeri olmayan yani her şeyiyle bana ait, benim eserim diyebileceği şeyler yapmalı. Yada çok iyi bir izleyici okuyucu ve araştırıcı da olabilir. Çünkü oda bir iş. Bundan sonraki yazılarım bu yazıyı yazmama neden olan konularla ilgili olacak. Bana sorulan sorulara cevap olacak. Biliyorum ki bu soruları utandığı için sormaya cesaret edemeyen dostlarda var. Olsun yalnız soranlar değil onlarda öğrensinler. Bu konular neler olacak tabi ki WeBlog ve de web tasarımı üzerine olacak.

  • Arka plan resmi nasıl oluşturulur?
  • Sayfanızın (BACKGROUND) arka planında ki resmi nasıl koydunuz?
  • Yazı Yazdığımız bölüm şeffaf olabilirmi?
  • BACKGROUND resimleri hangi ebatlarda olabilir?
  • GİF, ANİMATED GİF, JPG, JPEG, PNG, BMP ne demek?
  • GRAFİK TASARIM ne demek?
  • WEB TASARIMI yani Web sayfası tasarımı ne demek?
  • HEADER arka plan (BACKGRAUND) resmi nasıl yapılır?
  • HEADER BACKGRAUND a resim nasıl konur?
  • HTML&XHTML ne demek?
  • Web editörü ne demek?
  • Tarayıcı ne demek?
  • DREAMWEAVER programı ne işe yarar?
  • CSS nedir? Yenir mi yoksa yutulur mu?
  • Başlıkların altına resim veya renk konurmu?
  • Yazı alanımızın arka planı renkli veya resim olabilir mi?
  • Resimlerime çerçeve istiyorum.
  • DROP DOWN MENÜ nasıl yapılır?
  • TAB MENÜ nasıl yapılır? HORİZONTAL veya VERTİCAL MENÜ ne demek?
  • FAVİCON nedir? Nasıl yapılır?
  • Kendime LOGO ve BANNER yapmak istiyorum?
  • FLASH BANNER nasıl yapabilirim?


gibi daha birçok konuda yazılarımız olacak. Sırayla hepsini burada dilimin döndüğünce anlatacağım. Merak edenleriniz varsa eğer ben ne web tasarımcısıyım nede grafiker. Sadece emekli bir teknik öğretmenim. Hoşlandığım ve becerebildiğim işleri yapmaya çalışıyorum. Öğrendiklerimi yine öğretebilirsem şayet işte o zaman mutlu oluyorum. Şu anda DOKTOR dostumun kulaklarını çınlatmadan geçemeyeceğim. Onu seviyor ve de şimdi ikinci baharında çalışmaya başladığı içinde onu özlüyorum. Hem göz Doktoru, hem operatör, hemde bence iyi bir web tasarımcı. He he....Bu arada çok şey öğrendiğim Yunus 'u (EMREX) anmadan da edemeyeceğim. Oda şimdi çalışıyor ve ekmek parasını kazanmaya başlamış bir genç artık.

15 Ekim 2006

MAGAZİNE STYLE DROP CAPS

Evet dostlar bu gün size Magazine Styl Drop Caps uygulamasını anlatacağım. yine nette gezinirken iki şey keşfettim. Bunlar CSS Style uygulamaları. Bunlardan biri Magazine Style Drop Caps. Bu uygulamayı beautifulbeta da HANS anlatmış. Bende size aktarmaya çalışacağım. Önce aşağıda verdiğim kodu Edit Template bölümünde şablonumuzun CSS kodlarının bulunduğu bölümde(ben comments bölümünün üstüne koydum) herhangi bir yere koyacaksınız.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

daha sonra normal postunuzu herzamanki gibi yazacaksınız. Postunuzu yazıp bitirdikten sonra Compose sekmesinden EditHtml sekmesine geçip postunuzun başına aşağıdaki tagları ilave edeceksiniz, taglarınızın arasınada Postun İlk Harfini koyacaksınız. Aşğıda uygulama örneğinde de olduğu gibi.






Uygulama Örneği :

04 Ekim 2006

Web 2.0 Logo Generator



Haydee..!Web2.0 Logomuzu Yapalım
Bu gün Sayın Yassaman Karakoç 'un blogunda Web 2.0 Logo Generator ile ilgili yazısını okudum. Aynen de aşağıya yazdıklarını yazdım. Başka ne yazacağımı da bilemedim. Affına sığınıyorum. Bu günlerde hırsızlama hadiseleri epeyce sayıda ve fütursuz örneklerle doruğa çıktığı için özellikle belirtmek istedim. Keşif Yassaman Karakoç 'a ait. Bende ondan öğrendim hemen bir uygulamasınıda yaptım zaten.

"Web 2.0 logo generator ile, sitenize web 2.0 tarzında logo yapabilirsiniz. İsteğe bağlı “reflection” efekti ve “beta” simgesini seçebilirsiniz."



Esasında Gfx Dizayn 'da daha çok güzel yazılar bulacaksınız. Ziyaret etmenizi tavsiye ederim. Photoshop ve CSS üzerine ve daha neler neler. Sık sık burayı ziyaret etmede yarar var.

26 Eylül 2006

YENİ BİR UYGULAMA (pullquote text)


Eveeet dostlar bu gün wordpress 'in temalarından cutline 'ın yaratıcısı Chris Pearson'ın blogunda Pullquotes la ilgili bir yazı okudum orda yazılan uygulamayıda aşağıda hemen denedim. Şahsen benim çok hoşuma gitti. Dilerseniz sizde deneyebilirsiniz. Nasıl yapacağınıza gelince, gerçi Chris Pearson kendi blogunda anlatıyor ama birde ben anlatayım. Şimdi aşağıdaki CSS Kodu'nu template inizde edit html bölümünde blockquote codunu bulup onun altına yerleştireceksiniz.

CSS kodu:


.pullquote_left { width: 200px; margin: 5px 15px 5px 0; font-size: 1.4em; text-align: center; float: left; }
.pullquote_right { width: 200px; margin: 5px 0 5px 15px; font-size: 1.4em; text-align: center; float: right; }

daha sonra normal postunuzu yazarkende yine postunuzu yazdığınız bölümde bu seferde edit html bölümüne aşağıdaki div kodu'nu yazıp daha sonra postunuzu yazacaksınız. Anlaşılmıştır umarım en aşağıda da uygulamanın nasıl olduğuna dair bir örnekte verdim zaten. Kolay gelsin.
DİV Kodu:

Örnek uygulama:


buraya yazmak istediğini yazacaksın
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.

13 Eylül 2006

FAYDALI SİTELER

Evet dostlar epeydir yazmıyordum. İşden güçten bir türlü vakit bulamadım. Emekli bir adamın ne işi olur demeyin. Her şeyden evvel Kocayım ondan sonrada Babayım. Şu aralar Belçika'da yaşayan kızım ve damadım geldiler. O nedenle meşguliyetim biraz arttı. Her neyse bu gün siz bloggerların çok işine yarayacağını düşündüğüm bazı faydalı siteleri tanıtmaya ve ne işe yaradıklarını anlatmaya çalışacağım. Sizlere de bu sitelere üye olup kurcalıyarak benim bile farkedemediğim özelliklerini keşfetmek kalıyor. Bu sitelere yan tarafda Faydalı Linkler bölümünün altındaki adlarına tıklayarak hemen ulaşabilirsiniz.

Technorati : Bu site bloglines gibi sizin için belli sitelerin, blogların haberlerini takip ediyor ayrıca sizin blog 'unuzun da yayınlarını başkalarına duyuruyor. Bu siteye yalnız üye olmanız gerekiyor. Ondan sonra da size yapmanız gereken bir dizi işlem sunuyor. Weblog'unuzda yayınlamanız için araçlar veriyor. Blog'unuzda arama kutusu, blogroll gibi bir çok şey, buraya girip abone olup kurcalamanızı öneririm. Web 2.0 ailesinin önemli bir sitesi.

Blinklist : Technorati 'ye benzer bir site. Burada tag bulutu yapabilirsiniz. Size verdiği toolbarı browserınıza entegre ediyorsunuz. Feedlerinizi tag larınızı kısa yoldan tutmanızı sağlıyor. Buraya da üye olmanız gerekiyor.

del.icio.us : Bu site de technorati benzeri Web 2.0 ailesinin bir üyesi. Size verdiği browser toolbarı sayesinde internette dolaşırken çok kolay feedlerinizi oluşturabilirsiniz. Size bir çok araç sunuyor. Burada da tag bulutunuzu oluşturabilirsiniz. Tabiki buraya da üye olmanız gerekiyor.

Statcounter : Blog'unuzun ziyaret sayısını sizin için tutan bir site. Üye olmanız gerekiyor.

Feedburner : Adından da anlaşılacağı üzere bir feed sitesi. Bu sitede sizin sitenizin hitini tutuyor ve size bir sürü araç sunuyor. Standard üyelik bedava ancak Pro üyelikParalı.

Photobucket : Bu site Yahoo 'nun Flickr benzeri bir site. Burada yayınlıyacağınız resim ve videolarınızı depoluyor verdiği URL adresini kullanarak yayınlıyorsunuz. Ayrıca göstermek istediğiniz resimlerinizin yanda örnekte olduğu gibi slideshow, collage, stamp, strip gibi Widget oluşturmanızı sağlıyorsunuz ve verdiği kodu sayfanızın uygun yerine koyup yayınlıyorsunuz. Üyelik ve hizmetleri bedava. Birde pro paralı olan üyelik tipi de var.

Meebo : Bedava üye oluyorsunuz. Messanger benzeri bir kutunun kodlarını veriyor size. Siz o kutuyu Blogunuzda uygun bir yere koyuyorsunuz. Sizin blog'unuzu ziyaret edenlerle anında nessanger daki gibi mesajlaşıyorsunuz. Tabi o anda bilgisayarınızı ve meebo sitesini açmanız gerekiyor.

Widgetbox : Widget kutusu veriyor. Bu kutucuk içinde istediğiniz her şeyi yayınlıyorsunuz. Üye olmanız gerekiyor.

Mychingo : Sesli yorum bırakılmasını sağlıyan bir araç. Bırakılan mesajları daha sonra siz dinliyorsunuz. Üye olmanız gerekiyor.

Last Fm : adından anlaşılacağı üzere online radyo sitesi. Sizin için en çok dinlediklerinizin listesini oluşturup yayınlamanızı sağlıyor.

Odeo : Nefis bir site. Size blogunuza veya web sayfanıza konmak üzere bir müsic player veriyor. Tabii başka şeylerde var. Her türlü ses dosyasını çalabilen bir player. Bu player 'ın değişik tipleri ve boylarıda var. Gerisi süpriz kurcalayın bulun. Bunu sevgili EMREX sayesinde keşfettim.

Dailymotion : Video dosyalarınızı depolayıp sitenizde verdiği oynatıcı ile yayınlamanızı sağlayan bir site. Tabikine Üye olmanız gerekiyor. Seveceğinizi umarım.

Stickam : Buda çok değişik bir hadise. Hem slide oynatıcı hem webcam hemde video oynatıcı velhasılı ziyaret edip inceleyin. Yanda yukarıya size fikir vermek için koydum. Tabi ben bir tane resim koydum sizler videolarınızı, resimlerinizi yayınlayabilirsiniz. Tabiki yine üye olmanız gerekiyor.

Şimdilik bu kadar önümüzdeki günlerde daha başka sitelerin marifetlerini, linklerini vereceğim ve yine burada sizlere dilimin döndüğünce sizlere anlatmaya ve aktarmaya çalışacağım.


İNTERNET SANSÜRÜ VE FİŞLEMEYİ AŞMANIN YOLU

      ...MEDYADAN SONRA İNTERNET NEDEN SANSÜRLENİYOR...!     ...