Forum'da ara:
Ara


Yazar Mesaj
Mesaj04.12.2009, 10:40 (UTC)    
Mesaj konusu: Css Desing Temel Anlatım

Merhaba,

Bu metin; okumak için çok tembel olup da avını arayanlar içindir.
Ve template problemlerinizin azemiye inmesi ayrıca optimize
sorunlarınızın azalmasını taahhüt eder.

Not : Anlatımda eksiklik gören arkadaşlarım ,başlığa katkıda bulunsun lütfen.

Bu başlıkta nelerden faydalanabiliriz ?

+Link,liste,katman,font,text,imleç,zemin,tablo,kaydırma çubuğu css ve
ingilizce terimleri
+Bir tasarımda css ve htlm taglarının hazırlanışı

BEDAVA-SİTEM CSS DESİNG TASARIMI ;

CSS KODU KISMI
Tasarımınıza etki edecek komutları her zaman incelemenizde fayda var.
Örneğin;
}
#asd {
color:#FFFFFF;
background: #000000 url() top right repeat-x;

} bu parantez tagın başlangıcıdır. Yada html için
'<' tag başlangıcı '>' tag kapanışıdır. Çok basitçe kendine etki eden
bu tagı örnek verebiliriz <center> yada <div> ... </div>


Küçük bilgi verdikten sonra geri dönelim...

*Bir tasarım /* yapımcı bilgileri*/ şeklinde başlar ve */ ...*/ arasını
ziyaretçi göremez.

*body ->ziyaretçi gördüğü tüm içeriği bu etikette bulur.Bu etiket içinde
bazı taglarla tasarımın genel görünümü (arkaplan gibi) belirlenir
a {
text özellikleri
}

a:visited {
link,text vs özellikleri
}

...ımg,padding,hover tagları yukarıdaki gibi biçimlendirilir.

*Sonra body içindeki etiketler (tablolar) biçimlenir

h1 {
yazı
font renk,özellikleri
}

yine h1 yukarıdaki gibi(a:visited,hover)sıralanır.Varsa diğer başlıklar
(hx çoğaltılabilir)

(h1 en büyük başlık h6 en küçük başlıktır.)

Ek Bilgiler :

tr : satır
td : sütun u ifade eder
UL bir liste başlıyor demektir...
padding, '' padding-right : ''
border, '' border-top : ''
etiketleri şeklinde görevlendirilebilir(çoğaltılabilir/ -left, vs)

Ayrıca Css ye etki oluşturacak düzenlemeleri;
(Öneğin free tasarımınızın boyutunu büyültmek için;)


repeat-y; resimi enine uzatır,
repeat-x; resimi boyuna uzatır.
no-repeat; resim aynen kalır

bunu top,left,right diye aynı şekilde çoğaltabilirsiniz

top right repeat-x;
vb şeklinde de olur.

Ve body etiketinde bazı değerleri değiştirmeniz gerekiyor .Örneğin
head (başlık resmi) boyutunu değiştirmelisiniz
Width:En
Height :Yükseklik

şeklinde ayarlayabilirsiniz.

Azami bilmeniz gereken terimler :

body: Gövdenin arka planını rengini vs ziyaretçinin gördüğü herşey
burada tanımlanır.
font-family: Yazı çeşidini belirler.(Arial , Comic)
font-style: Yazının normal veya sağa yatmasını sağlar
font-variant: Yazının normal veya tümünün büyük harfler olmasını sağlar
font-weight: Yazının kalınlık-inceliğini ayarlar
Font :yazı karakteri

color:Tabloda geçen karakterlerin rengini belirler
background :Arkasına gelen komutun arkaplanını ayarlar
margin:Toblo ile pencere kenarları mesafesindeki boşluğu ayarlar
padding:Tablo kenarlarıyla tablo içeriği mesafesini ayarlar
text-decoration :Linkin altının veya üstünün çizgili olup olmayacağını ayarlar
a:visited :Linkin tıklandıktan sonraki halidir
a:hover :Linkin imleç üzerine geldiğindeki durumudur.
underline : Karakterlerin altından çizili olmasını sağlar
border: Linkin etrafında kenarlık oluşturur.
text-align: Karakterlerin dikey olarak nasıl hizalanacağını ayarlar
border-bottom: Tablonun alt kenarının şeklini ayarlar
letter-spacing :Karakterlerin arasında bırakılacak karakterleri belirler.
bottom:Bu komuttan önce gelen tagın alt kısmını ve durumunu ayarlar
relative:Bir önceki katmanla yerinin aynı olduğunu belirler
description : Bir tagın arkasına gelir ve Tanımlar(headerimg .description gibi)
display: Linki içeren herhangibir bölümün istenilen alanın seçilmesini sağlar
overflow: Katman genişliği veya yüksekliğinin sığmayan kısımlarının
durumunu ayarlar
transform:dönüştürmek
uppercase:Karakterlerin büyük harfle olmasını sağlar


disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından
oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından
oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ

position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak
belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına
ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin
görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.
1 değeri katmanın en altta olacağını belirtir.
______________
+Css Şablon Çözümleri+Site İçi Arama Motoru+Soldaki Menüyü Sağ Kısma da Ekle
+Butona(Menü' ye)Resim Ekle +Polldady' den Anket+Editör nasıl kullanılır?+Formata Son
+Güvenilir Sayaç+Ücretsiz Toplist Kur+Resimin Köşelerini Yuvarla+Web Yönetici Araçları+Css Desing Temel Anlatım
Mesaj04.12.2009, 10:55 (UTC)    
Mesaj konusu:

Bence çok yararlı bir anlatım olmuş. Zaten bunları öğrenen kişi herhangi bir kod ve kodlama gibi sorunlarla karşı karşıya kalmaz.. Wink
______________
-Kul der ki; "İşlerimi halledip, Rabbime yöneleyim."
Rabbi der ki; "Bana yönelin, işlerinizi halledeyim."
Mesaj04.12.2009, 16:09 (UTC)    
Mesaj konusu:

bu gerçek bi anlatım mı yoksa forumun bi yerinden alınma mı tam anlayamadım ama gerçek olduğunu varsayarak paylaşım için saol diyorum.
ayrıca eksikleri belirteyim ki:

css özellikleriyle değerleri aynı şeymiş gibi aynı yerde incelenmiş mesela:
overflow (bir özellik) ve relative (position özelliğine tanımlanabilecek bir değer) aynı statüde incelenince karmaşa yaratabilir. bi de sadece katman değil nerdeyse tüm html elemanlarına girilebilen tonla özellik var. bazılarına özel özellikler olabilir ama büyük kısmı hepsine girilebilir.
______________
Hey maan
Mesaj04.12.2009, 16:10 (UTC)    
Mesaj konusu:

Güzel Paylaşım.

Css Tasarımda Sorunları Yaşayanlar için Çok Faydalı Bir Paylaşım.. Wink
Mesaj05.12.2009, 14:02 (UTC)    
Mesaj konusu:

Yorumlarınız için teşekkürler...Ayrıca eleştirileriniz bilmeyenleri aydınlatacaktır,Teşekkür ederim.

Örneklere girdikten sonra ,bana sorulan sorular üzerine bu başlığı hazırlamıştım.Gerçek anlatım Razz Alıntı değil

Sevgiler
______________
+Css Şablon Çözümleri+Site İçi Arama Motoru+Soldaki Menüyü Sağ Kısma da Ekle
+Butona(Menü' ye)Resim Ekle +Polldady' den Anket+Editör nasıl kullanılır?+Formata Son
+Güvenilir Sayaç+Ücretsiz Toplist Kur+Resimin Köşelerini Yuvarla+Web Yönetici Araçları+Css Desing Temel Anlatım
Mesaj05.12.2009, 14:05 (UTC)    
Mesaj konusu:

Güzel ve Çogu kişinin işine yarayacak bir paylaşım Smile
______________
Mesaj05.12.2009, 14:09 (UTC)    
Mesaj konusu:

saol tuna abi güzel bir anlatim olmus sendende bu beklenirdi. Wink
Mesaj07.09.2010, 00:42 (UTC)    
Mesaj konusu:

Beyler ben freecsstemplates adlı siteden ücretsiz tasarım kodunu bedava sitemden tasarım alt tasarım üzerine falan bi sitede gördüğüm şekilde yapıştırdım menü gizleme kodunu falanda yaptm..
Şimdi O tasarımda menüsünde değişik şeyler vardı butonlarında falan
ben onların tasarımın üzerindeki yazı bölümünden o yazıları değiştirip kendime yeni bir menü yaptım
Menu
Rap Sözlerim
Rap şarkılar
Rap resimler
RAP nedir
iletişim

bu şekilde değiştirdim baştaki yazıları güzel de oldu fakat örneğin menüdeki rap sözlerim butonuna tıklayınca hicbir sayfaya gitmior hicbise olmuor kalıyor öyle diğerlerine tıklayıncada anasayfada kalıor ben nasıl yapıcam da bunlara basınca Rapsözlerim sayfasına yönelcek yada rapsözlerim die bir sayfa nasıl açacağım acilen yardım
YARDIM ETMEK İSTEYEN ANLAMAYAN ARKADASLAR EKLESİN
king_96_boy( at )hotmail.com acil yardım bekliorm derdimi cözene hediye verecem
Mesaj07.09.2010, 17:04 (UTC)    
Mesaj konusu:

dostum paylaşım için teşekkürler ama madem eleştiriye açıksın hemen ilk gördüğüm yazılanların terminolojiden öteye geçmediğidir. Kişisel görüşüm css öğrenecek kişi önce html hatta xhtml yi oldukça iyi bilmelidir. bildiğini varsayarsak öncelikle css yazım kurallarını ve cssnin bir internet sayfasında nasıl kullanılacağını öğrenmelidir
www.ladasevgisi.tr.gg
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu