Yazılım ve Tasarım üzerine herşey..

Metin Biçimleme

yazilimtasarim — Sat, 26 Sep 2009 10:55:38 +0000

Arkadaşlar sizlere bu dersimizde metin biçimlemeyi anlatacağım… Yani bir metnin yazı tipi, rengi, şekli her şeyiyle ilgili anlatımları şimdi anlatıyorum:

İlk Önce Metnimizi Kalınlaştıralım.

Bunu Kodunu kullanarak yapıyoruz:

Örneğin:

Bu Yazı Kalın Yazıdır

Şimdi ise yazımızı altı çizili yapalım…

Örneğin:

Bu Yazı Altı çizili Yazıdır

Evet, şimdi ise yazımızı italik yapalım..

Örneğin:

Bu Yazı İtalik Yazıdır

Şimdi İse yazımzın tipini rengini ve boyutlarını değiştirelim.

Bu Yazının tipi Verdanadır,2 punto büyüklüğündedir ve Kırmızı Renktedir

Burda yazımızın büyüklüğünü size=”2″ paranemetresiyle 2 yaptık
Rengini color=”red” paranametresiyle kırmızı yaptık
Tipini face=”Verdana” paranametresiyle Verdana yazı tipi yaptık

Size= Büyüklük color= Renk Face= Yazı Tipi

Html’de tablo yapımı

yazilimtasarim — Sat, 26 Sep 2009 10:54:49 +0000

Ewet bu dersimizde html tablo nasıl yapılır onu anlatıcam.

Tablolar
…..
Kodları arasına yazılır
kodu yeni bir satır oluşturur. bu sırada kodu ile hücrelere bölünür

Şimdi basit bir tablo yapalım:

Not: “ kodumuzu yazarken 1tab boşluğu kodumuzu yazarken ise 2tab boşluğu bırakınız.”

kod: Tablo

Elma Muz

Mavi Yeşil

Burada basit bir tablo yaptık örnek site için:
Tıkla

Şimdi ise tek satırlı ve 4 hücreli bir tablo yapalım ama bu sefer yazının fonları tablonun boyunu ve tablonun backgroundları ile oynayalım.

Tablonun hangi hücrenin boyutu ile oynucaksak, onun içine yazıcaz kodumuzu, yani:

Sarı

Bu şekilde olucak. Fon ile oynamak için yine hücreye gidiyoruz;

kırmızı

Buradaki hücremizin kırmızı yazısının boyutunu 35 px yaptık ve boyutunu ise 20 px yaptık, şimdi 3. hücremize background ekleyelim. Bunun için ise hücremizin içine gidiyoruz ve

background="resimadi.jpg"

kodumuzu ekliyoruz, yani:

Siyah

Bu şekilde diğer 4.hücreyi kırmızı yapalım; bunun içinse bgcolor=”red” kodumuzu kullanıcaz. Yeşil
Bu şekilde tablamuzu görelim.

kod:

Tablo

Sarı kırmızı Siyah Yeşil

Örnek site:Tıkla

Peki, şimdi ise yine tek satırlı, 3 hücreli bir tablo yapalım. Bu sefer tabloların ikisinde resim olsun, ortadakinde ise Sanalkurs yazsın. Resim px’leri ise 150×150 olsun. İki td arasına resmimizi cağırıyoruz:

İki hücreye de:

kod:

Tablo

Sanalkurs

Örnek Site : Tıkla

Bazı şeyler dikkatinizi çekti mi? İki resim de sola yatık. İşte gelelim asıl konuya. Bunları ayarlamak için hücrenin boyutunu ayarlamamız gerekiyor. Çağırdığımız resimin boyutu kaç px’di? 150px idi değil mi? İşte tablomuzu da 150px yapıcaz. (width=”150px” Bir de Sanalkurs yazımızı ortalayalım, bunun için ise;

Sanalkurs

kodunu kullanıcaz.

kod:

Tablo

Sanalkurs

örnek site :Tıkla
Şimdi ise 2 satırlı, ilk satır 2 hücreli, ikinci satır ise 3 hücreli bir tablo yapalım. Bunu colspan=”" kodu ile yaparız. Ben colspan’a bu tablo için 2 değerini vericem. Bu değer tablodan tabloya değişir.

kod:

Tablo

Elma Muz

Mavi Yeşil Siyah

Örnek Site:Tıkla

Kayan Yazı, Resim Yapma ve Marquee Kullanımı

yazilimtasarim — Sat, 26 Sep 2009 10:53:53 +0000

Birşeyi kaydırmak için gerekli kodumuz

Örneğin Sanalkurs yazısını kaydırmak için
Sanalkurs deriz.

kod:

Kayan Yazı-Sanalkurs Sanalkurs

örnek site: sanalkurs.sitemynet.com/k.html

Ama yazımız sağdan sola doğru kayıyor bunu istersek sağa sola çarptırabiliriz
bunun için behavior=”alternate” kullanıcaz bu kodumuz sağa sola çarptırmak için gerekli olan kodumuzdur.

kod:

Kayan Yazı-Sanalkurs Sanalkurs

örnek site : Tıkla

Eğer kırmızı bir şerit üzerinde kaymasını istiyorsak marquee’nin rengini değiştirebiliriz
bunun için bgColor=”red” kodunu kullanabiliriz.
kod:

Kayan Yazı-Sanalkurs Sanalkurs

örnek site: Tıkla

Yazımızı alttan üste doğru çıkartmak istiorsak direction=”up” kodunu kullanırız eğer üstten alta doğru
kaydırmak istiyorsak direction=”down” deriz ama bir çok sitede görmüşünüzdür duyurular bölümü diye
alttan üste doğru kayan yazılar bizde böyle birşey yapabiliriz. Ben bu durumda behavior=”alternate” kodunu
silicem silmesekde calışır ama ben çarptırmak istemediğim için siliyorum.Şimdi kodumuzu yazalım

kod:

Kayan Yazı-Sanalkurs Sanalkurs

örnek site: Tıkla

Şimdi burada dikkatimizi çeken bir olay var marquee alanı biraz geniş bunu küçültmemiz gerekmezmi
bunun için width=”100″ heigth=”800″ kodlarımızı kullanıyoruz burada width marquee’nin enini heigth ise
boyunun boyutunu belirler.
kod:

Kayan Yazı-Sanalkurs Sanalkurs

örnek site: Tıkla

Şimdi Gelelim resim kaydırmaya aslında bununda yazıdan hiçbir farkı yoktur.
Şimdi bir kırmızı şerit üzerinde bir resmimizi kaydıralım

kod:

Kayan Yazı Sanalkurs

örnek site : Tıkla

Şimdi 3 tane resmi yan yana kaydıralım 3 tane resmimizi çağırıyoruz
kod:

Kayan Yazı Sanalkurs

örnek site: Tıkla

Ben şimdi resimleri aşağıdan yukarı doğru kaydırmak istiyorum bunun içinde kayan yazıdaki gibi direction=”up”
kodumu kullanıcam ama birazda heigth ide genişletcem
kod:

Kayan Yazı Sanalkurs

örnek site: Tıkla

Ama Yukardaki kodumuz da resimler yan yana peki bunu alt alta nasıl yapabiliriz
bunuda resimlerin arasına
kodumuzu koyarak yapabiliriz
kodumuz enter görevini üstlenir burada
ve birazda marqueenin width boyutu ile oynucam
kod:

Kayan Yazı Sanalkurs

örnek site: Tıkla

eğer resimlerin arasına boşluk olmasını istiyorsanız kodu ile koyabilirsiniz
ne kadar çok koyarsanız o kadar boşluk olur.

Zamanla Yenileme

yazilimtasarim — Sat, 26 Sep 2009 10:52:36 +0000

Eğer durum çubuğunda sayfanızın ziyaretçiye bildirilen sürede bir refresh edilmesini istiyorsanız aşağıda kodları sayfanın ……….. tag’leri arasına yazmanız yeter.

Favori Sitelere Eklemek

yazilimtasarim — Sat, 26 Sep 2009 10:51:40 +0000

Favorilerime Ekle

Kodu herhangi bir editörle (Not Defteri, Wordpad, Dreamweaver) açıp yapıştırdığınızda kaydedip Internet Explorer ile açtığınızda Giriş Sayfası linkine tıklarsanız o an bulunduğunuz adresin Sık Kullanılanlar listenize girdiğini göreceksiniz

Adresi Giriş Sayfası Yapmak

yazilimtasarim — Sat, 26 Sep 2009 10:50:51 +0000

Giriş Sayfası Yap

Kodu herhangi bir editörle (Not Defteri, Wordpad, Dreamweaver) açıp yapıştırdığınızda kaydedip Internet Explorer ile açtığınızda Giriş Sayfası linkine tıklarsanız o an bulunduğunuz adresin browser’ınızın giriş sayfası olduğunu göreceksiniz

HTML Genel Bilgiler

yazilimtasarim — Sat, 26 Sep 2009 10:49:31 +0000

Bir Html Web Sayfası tagı ile başlar ve tagı ile bitmelidir yazacağınız tüm kodlamalar …tagları arasına yazılmalıdır

Bir HTML Sayfasında den sonra genellikle tagı kullanılır sayfada görsellenmesini istedigimiz yazı ekranda bu kod ile belirir ve ondan sonra komutu kullanılır. Bu komut ise sayfamızın üst köşesinde ne yazmasını istiyorsak onu yazdırır. Mesela SANALKURS.NET sitesinde sayfanın en üstünde, “SANALKURS.NET web tasarım, php, mysql, dreamveawer, flash, photoshop ücretsiz dersler” yazmaktadır. Yani şu komut kullanılmıştır:</p> <pre><html> <head> <title>SANALKURS.NET webtasarım,php,mysql,dreamveawer,flash,photoshop ücretsiz dersler
Biz bunu kendimize göre degiştirebiliriz.

Ve bir de web sayfamızı kaydederken .htm ya da .html uzantısıyla kaydetmeliyiz. Genellikle index.html, default.html ismiyle kaydedilir, siz bunun ismini ne yaparsanız yapın ama uzantısı kesinlikle .htm ya da .html olmalıdır. .html web sayfamızın soyadıdır. Mesela dosya isminiz ali olsun, soyadı .html dir; yani ali.html’dir.

Evet, temel bilgiyi bu dersimizde verdik, bir dahaki derste link olayları, tabloları ve formları vs. öğreneceğiz.

WordPress Kaynakları

yazilimtasarim — Wed, 23 Sep 2009 22:19:05 +0000

WordPress kaynaklarını biraraya getireyim dedim. Her defasında googla’dan aratmak bayıyo Bildiğiniz başka kaynaklar varsa lütfen yorum olarak yazmaktan çekinmeyin.

WordPress Genel

http://www.wordpress.org

http://www.wordpress-tr.com/

http://wordpress.com/

http://wordpress.de/

http://wiki.wordpress.org/

http://www.alexking.org

Eklentiler

http://wiki.wordpress.org/Plugin

http://wp-plugins.net/

http://codex.wordpress.org/Plugins

http://dev.wp-plugins.org/

Temalar

http://www.alexking.org/software/wordpress/style_browser.php

http://themes.wordpress.net/

http://codex.wordpress.org/Using_Themes/Theme_List

http://wordpress.org/extend/themes/

http://wordpress-themes.net/

Yakuter Tema 1.0

yazilimtasarim — Wed, 23 Sep 2009 22:17:48 +0000

WordPress için kendi temamı hazırladım. Aslında sitemde bu temayı kullanacaktım fakat içeriğe yeterince yanıt vermiyordu. Tema tamamen Türkçedir. Yazının devamında temanın görünümü var. Lütfen yorumlarınızı bildiriniz. Dilediğiniz gibi indirip kullanabilirsiniz

You can see and test the theme at demo site (www.yakuter.com/demo)

Yakuter Tema 1.0 Türkçe — Download

Yakuter Tema 1.0 English — Download

yakuter..

WordPress’te Nasıl Tema Yapılır? (1)

yazilimtasarim — Wed, 23 Sep 2009 22:16:25 +0000

Artık böyle bir makale şart sanırım Hazır tema kullanmaktan bıktıysanız, kendi temanızı yapmanın zamanı gelmiş demektir. Bu makaleyi iki parça halinde hazırlamaya karar verdim çünkü temelden anlatmaya başlayacağım. Önce bunu tamamlayın(zaten fazla uzun değil) daha sonra 2ncisini yazacağım. Haydi başlayalım o zaman

WordPress, temalarında table yerine, günümüzde daha çok geçerliliği olan css kullanmaktadır. Ben size tema yapmayı anlatırken css’in size yetecek kadarından bahsedeceğim. Gelelim temamıza. Her temanın içinde mutlaka bir style.css dosyası bulunur ve sitemizi bu dosya şekillendirir. Sitemizin ana hatlarının “genel olarak” dizilişi resimdeki gibidir.

Yukarıda gördüğünüz gri renkli yazılar (container, content…) sitemizin temel seçicileridir. Bu makale de bunları öğrenmenizi amaçlıyorum. Kendi temanızın bulunduğu klasöre gidip, style.css dosyasını açıp içinde bu seçicileri arayın. Oradan daha iyi takip edebilirsiniz.

container: Bu seçici (yukarıdakilere seçici denir) sitemizin ana şablonudur. Sitenin sayfa içindeki yerini belirlemede(sağdan, soldan ne kadar uzakta olduğu gibi) kullanılır. Örneğin benim kullandığım Blix temasının css dosyasında container seçicisinin olduğu satır şu şekilde:

#container { width:690px; margin:0 auto; padding:30px 30px 0 30px; text-align:left; }

Gördüğünüz gibi width:690px diyor yani sitemin genişliği 690 piksel. Bunu rahatlıkla değiştirebilirsiniz. Diğer seçiciler de aynı bu şekilde rahatlıkla değiştirilebilir.

header: Sitemizin üst kısmıdır. Arkaplan resmini yine style dosyasında header seçicisiyle oynayarak değiştirebilirsiniz.

content: Blogumuzun orta kısmıdır ve yazıların ekranda nasıl görüneceğine bu seçici ile karar veririz.

sidebar: Yan sütundur.

footer: Sitemizin alt kısmıdır. Yine genişlik vb. değişiklikleri style.css dosyasında bu seçiciyi bularak yapabiliriz.

Bu konuda anlamadığınız bir nokta varsa yorumunuzda belirtin.

NOT

Size tavsiyem ise css’in ne olduğunu tam anlamıyla öğrenmeniz. Bunun için yarım saatinizi ayırmanız yeterli. Css öğrenmeye başlamak için tıklayınız.

Css dosyalarını düzenleyebilmek için normal bir notepad bile kullanabilirsiniz. Ama sıf css için yapılmış ve yaptığınız değişiklikleri önizlemeli olarak gösteren bir program da var : TopStyle Lite