MyBB Depo Forum

Orjinalini görmek için tıklayınız: 960 Grid Sistemi
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Merhabalar

Tasarımda(Temada) çözünürlük konusu can sıkan konulardan birisidir. Her evdeki bilgisayar ? artık bilgisayar kısıtlaması yok tablet, telefon, televizyon gibi çeşitli ekranlardan internete internetten sayfalara giriyoruz herkesin materyali farklı.

Bizde bugün bu işin tasarıma düşen kısmındaki önemli detay çözünürlük konusunu ( bunu yazarken buraya devam edecek cümle bulamadım üzgün ) halledelim.

Birden çok materyal saydım internet sitelerine girebilmek için, ama hepsi aynı boyutta değil. 

Siteleri nasıl yapacağız ? 
Siteler her materyalde aynı boyutta mı çıkıyor ?

Siteleri nasıl yapacağız sorusu çok çeşitli isteğinize bakar "Blog, forum, sosyal medya, video vb." budarada kullandığınız sistemi belirlersiniz ve hazırlarsınız bizim konumuz diğer soru..

Siteler her materyalde aynı boyutta mı çıkıyor ?

Eveeeeeeeeet sayın seyirciler biz sitemizi kurduk ( şuanda MyBBDepo Forumundayız -size özel yazıyorum başka sitelerde paylaşmıyorum- )
Sitemizin güzelliği için bir tema lazım (Beyaz sayfaya girecek halimiz yok) size bu yazıda tema yapmayı öğretiyormuyum ? azıcık Açık Ağızlı Gülümseme
Sistemleri bilen neye tema yapacağını bilen kişilere yazıyorum aslında daha iyi bir tema yapmaları için.

960 Grid Sistemi

 Kullanacağımız sistem "960 Grid" bu sistemi şöyle tanımlayalım;

Dünyadaki insanların interneteki sitelere erişim sağladığımız araçların ekran boyutlarını tek bir ekrana sınırlandıramayız bu bir kuraldır. Kuralı bozmamak için 960 Grid sisteminden yardım alabiliyoruz.

-Net bir cümle kurmak yerine halk dili ile anlatmak sizi sıkmayacağını düşündüm Gülümseme

Bu sistemi ;

1-Tema Tasarlarken Kullanacağız - Adobe Photoshop -
2-Tema Kodlarken Kullanacağız - HTML & CSS -

*Programlar / Diller önerdiklerim (benim bildiklerim anlatacaklarım) sisteminize göre değişir programlar/diller


Nasıl kullanacağımızıda anlattık hafiften bu sistemi indire koyulalım

Kod:
http://960.gs/

siteye girelim zaten anlarsınız ama ben tarif edeyim.

resim

"Big ol'DOWNLOAD button Gülümseme" yazan butona basıyorum ve indiriyoruz bulamadıysanız aşağı linkliyorum up up Açık Ağızlı Gülümseme

Kod:
https://github.com/nathansmith/960-Grid-System/archive/master.zip

.zip dosyamızı indirdik içindeki hediyelere bakalım yupppi Açık Ağızlı Gülümseme

"960-Grid-System-master" klasörünün içinde ;

1- "app_plugins" - "Uygulama Eklentileri"
2- "code" - "Kod"
3- "licenses" - "Lisanslar"
4- "logo_files" - "Logo Dosyaları"
5- "sketch_sheets" - "Kroki(Taslak) Sayfaları"
6- "templates" - "Temalar"
7- iki tane zımbırtı var kusura bakmayın bilmiyorum anlatacaklarımla da alakası yok Açık Ağızlı Gülümseme

Bu klasörleri aşama aşama içindekileri açıklayarak gideceğim sizde kullanırken zorluk çekmeyeceksiniz.

**
1- "app_plugins" - "Uygulama Eklentileri"

İki tane program dosyası çıkıyor içlerindeki dosyalar ile uygulamamzda 960 Grid sisteminin sütunlara ulaşa biliriz.

2- "code" - "Kod"

Burada bir kaç tanım ekliyorum 960 Grid sistemi ile alakalı

*12 16 24 Sütunlar
*12'li Tek Sutun 60px Genişlik , 16'lı Tek Sütun 40px Genişlik , 24'lü Tek Sütun 30px Genişlik (24'lü sütun yerine 12 ve 16 iş görüyor)
*Her sütun arası sağında 10px solunda 10px boşluk vardır.
*Sütun isimleri grid_numara olarak geçer

Burada 2 Klasör 4 .html sayfası bizi karşılıyor.

-css klasöründe css kodlarının bulunduğu yer
-img klasöründe sütunların .gif hali bulunuyor

ilk önce yapıyı öğrenmek için gözlem yapalım "demo.html" açalım;

12 Column Grid - 16 Column Grid

2 adet bizi şekil karşıladı buna sayfada diyebiliriz.Sayfalarda kolonların ölçüsü ve çeşitleri verilmiş.

Bu kısımda dikkat etmemiz gereken nokta ölçüler ve kaç stun kapladığı

Küçük bir örnekle bunu pekiştirelim;

12 Sütunludan bir örnek vereceğim bu 16 ve 24 içinde geçerlidir...

Forum ya da websitesi fark etmez 

sol tarafta bir panel - sağ tarafda yazı içerikleri forumlar..

resim

Kırmızı: 3 Sütun sol alan 220px - 9 Sütun sağ alan 700px

Mavi: 4 Sütun sol alan 300px - 8 Sütun sağ alan 620px

Biz tasarımı yaparken böyle bölümlere ayırıcaz sonradan kodlara geçireceğiz

ÖRN: 
Grid 960 anlatım sayfasından 2 Kolonlu ilk Örn. (12'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!
Kırmızı içine aldığım yeri 
 " Kırmızı: 3 Sütun sol alan 220px - 9 Sütun sağ alan 700px "

kodlarken şöyle sistem yapıyoruz

Kod:
<div class="container_12">
<div class="grid_3">
220px
</div> 
<!-- end .grid_3 --> 
<div class="grid_9">   
700px
</div>
 <!-- end .grid_9 -->
</div>
<!-- end .container_12 -->

<div class="container_12"> -> Kaçlı sütun kullandığımızı belirtiyoruz [16 ve 24 de eklene bilir, yapmak isteyenler "container_12" 12 yerine 16 ya da 24  dü yazabilirsiniz]
<div class="grid_3"> -> Kaçıncı sırayı sütünu kullanacağımzı belirtiyoruz [ 1. sütundan 3. sütuna kadar, bunu siz istediğiniz noktaya çekebilirsiniz ÖRN: 5. sütuna kadar kullanmak için "grid_3" 3 yazan yere 5 yazıyoruz]
<div class="grid_9"> -> Kaçıncı sırayı sütünu kullanacağımzı belirtiyoruz [ 1. sütundan 9. sütuna kadar, bunu siz istediğiniz noktaya çekebilirsiniz ÖRN: 8. sütuna kadar kullanmak için "grid_9" 9 yazan yere 8 yazıyoruz]

12 li sütun belirttik

3 ve 9 sütun kullandık 12 yi tamamladık pixel ler ile uğraşmak yok sistem hazır Açık Ağızlı Gülümseme

siz istediğiniz gibi sütunların adetini değiştire bilirsiniz çok önemli nokta sütun sayısını kaç belirlediysek okadar 12 ise 12 , 16 ise 16 ,24 ise 24 tane sütun vardır 12 yapıp 9 + 8 yapamazsınız!!

ÖRN:
Grid 960 anlatım sayfasından 3 Kolonlu İlk Örn. (12'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Solda menüler ortada forum sağda istatistik 3 kolonlu bir yapı;

12 li sütun kullanalım

3 + 6 + 3 şeklinde belirledim

Kod:
<div class="container_12">
<div class="grid_3">
220px 
</div> 
<!-- end .grid_3 -->  
<div class="grid_6">   
460 px
</div>
 <!-- end .grid_6 -->
<div class="grid_3">
220px 
</div>
<!-- end .grid_3 -->  
</div>
<!-- end .container_12 -->


16 lı da ise
Grid 960 anlatım sayfasından 3 Kolonlu İlk Örn. (16'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


3 + 9 + 4 şeklinde belirledim

Kod:
<div class="container_16">
<div class="grid_3">
160 px  
</div> 
<!-- end .grid_3 -->  
<div class="grid_9">   
700px
</div>
 <!-- end .grid_9 -->
<div class="grid_4">
220px
</div>
<!-- end .grid_4 --> 
</div>
<!-- end .container_16 -->

Bu kodlarımızı "demo.html" yi notdefteri ya da kullandığınız notepad++ gibi programlarla açıp inceleyiniz.

Html kısım bu (head body taglarını onları siz eklersiniz bilmiyorsanız google amcadan yardım isteyiniz)

Css kısımına bakalım

css klasörümüzü açalım ve içindekilere bakalım ( bir sürü .css Açık Ağızlı Gülümseme )

biz öğrenmek amacıyla buradayız bir kaç farklılık söylemeliyim ;

*rtl ibareli css dosyalarımız (isimlerinde rtl yazanlar ÖRN: 960_rtl.css) sağdan sola doğru kullanımlıdır (ÖRN: biz soldan sağa doğru kullanırız ama arapça sağdan sola kullanılır)
*reset.css text.css gibi dosyalar bizim temamızda kullanıcağımız boşluklar düzetlmeler yazı karekterleri renkler gibi çeşitli ibareleri barındırır onlar sabit durmasını öneririm (renklerde karetketlerler oynama sıkıntı çıkarmayacak pixel (px) değerlerini oynamak sıkıntı olabilir bilmiyorsanız) ama siz farklı bir şekilde kullanım yapacaksınız engellemiyorum.

960.css i açalım

aşağı doğru uzayan bir sürü kod bizi karşıladı bunları açıklaya açıklaya gidelim

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)

burada biz kullandığımız sütunların içine bir başka sütun daha eklersek sayısıda çok olursa sıralama yapmamızı sağlar.

ÖRN: Grid 6 yı kullanıcağım içinde 3 tane grid 2 yerleştiriceğim

Grid 960 anlatım sayfasından ALPHA ve OMEGA (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


grid 6 içindeki;
grid 2 lerin birincisine Alpha
grid 2 lerin sonununcusuna Omega ekliyoruz

ve bir düzen içerisinde hepsi sıralanmış olacaktır.


Kod:
<div class="container_12">
<div class="grid_6">
<div class="grid_2 alpha">  
ALPHA 140 px
</div>
 <!-- end .grid_2 -->
<div class="grid_2">  
140 px
</div>
 <!-- end .grid_2 -->
<div class="grid_2 omega">   
OMEGA 140 px
</div>
 <!-- end .grid_2 -->
</div>
<!-- end .grid_6 -->
<div class="grid_3">
220 px 
</div> 
<!-- end .grid_3 --> 
<div class="grid_3">
220px 
</div> 
<!-- end .grid_3 --> 
</div> 
<!-- end .container_12 -->

size 2 hata çeşidini söylemeliyim bunlar
Grid 960 anlatım sayfasından ALPHA ve OMEGA Hata (12'li Sütun)1- ve [b][i]ALPHA ve OMEGA Hata (12'li Sütun)2-  bakınız!!! [/i][/b]
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


1. Hatalı örnek alpha ve omega kullanmayanlar için
2. Hatalı örnek fazla grid göz çıkartır Açık Ağızlı Gülümseme


/* `Prefix Extra Space >> 12 Columns ve /* `Prefix Extra Space >> 16 Columns
/* `Suffix Extra Space >> 12 Columns ve /* `Suffix Extra Space >> 16 Columns

bu kodlarımızın global olanlarını anlatmayacağım zaten anlatacaklarım size yetecektir.

Bu kodlarımızın amacı bizim gridlerimizin genişlemesini sağlamak.
Farklı bir amacı varsa bana yazınız.

prefix-> soldan genişletir

suffix-> sağdan genişletir

Prefix ÖRN:
Grid 960 anlatım sayfasından  Prefix Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 4 e prefix 2 eklemek istedim ve grid_4 yanına prefix_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4 prefix_2">
prefix 300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6">   
460 px
</div>
 <!-- end .grid_6 -->
</div>
<!-- end .container_12 -->

Suffix ÖRN:
Grid 960 anlatım sayfasından  Suffix Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya suffix 2 eklemek istedim ve grid_6 yanına suffix_2 yazdım;


Kod:
<div class="container_12">
<div class="grid_4 ">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 suffix_2">   
460 px suffix
</div>
 <!-- end .grid_6 -->
</div>
<!-- end .container_12 -->

NOT: 12 ve 16 da kodlar değişmiyor sayısı ve boyutları değişiyor bunları css kodlarından detaylıca bakablirsiniz.


/* `Push Space >> 12 Columns ve /* `Push Space >> 16 Columns
/* `Pull Space >> 12 Columns ve /* `Pull Space >> 16 Columns

bu kodlarımızın global olanlarını anlatmayacağım zaten anlatacaklarım size yetecektir.

prefix ve suffix den farkı genişletmiyor kaydırıyor

push-> sol dan ittirme -Soldan sağa doğru-

pull-> sağdan ittirme -Sağdan sola doğru-

Push Örn:
Grid 960 anlatım sayfasından  Push Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Sağa doğru kaydırma Soldan ittirme
Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya push 2 eklemek istedim ve grid_6 yanına push_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 push_2">   
Push 460 px 
</div>
 <!-- end .grid_6 -->


Pull Örn:
Grid 960 anlatım sayfasından  Pull Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!
Sola doğru kaydırma Sağdan ittirme
Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya pull 2 eklemek istedim ve grid_6 yanına pull_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 pull_2">   
Pull 460 px 
</div>
 <!-- end .grid_6 -->

NOT: 12 ve 16 da kodlar değişmiyor sayısı ve boyutları değişiyor bunları css kodlarından detaylıca bakablirsiniz.
NOT2: ittirme işlemlerini dikkatli yapmanız gerekir yanlış yeri ittirmek alan dışı bıraka bilir sizi!!!


Ve css kısımını bitirdik 
bu kısımda kodlarken grid 960 nasıl kullanacağınızı anlattım.



3- "licenses" - "Lisanslar"

960 grid lisansları vardır.



4- "logo_files" - "Logo Dosyaları"

960 grid logosunun dosyaları



5- "sketch_sheets" - "Kroki(Taslak) Sayfaları"

960 grid sayfaların taslakları



6- "templates" - "Temalar"

burada çeşitli programlara özel grid 960 ın 12 16 ve 24 lü tasarımları vardır.



7- iki tane zımbırtı var kusura bakmayın bilmiyorum anlatacaklarımlada alakası yok Açık Ağızlı Gülümseme



Video olarak tavsiye:
Kod:
https://youtu.be/yhpE4U3acqI

Kaynak
Kod:
http://www.clubosc.com/
Kod:
http://www.w3schools.com/
Kod:
http://960.gs/

Örnek Çalışma Dosyam -Ek'e ekleye bilirsiniz-
"Dosya Code tagında"

Örnek Çalışma Dosyası için adımlara gidiniz 
960-Grid-System-master.rar ı açın içindeki   Sağ Ok 960-Grid-System-master klasörüne giriniz Sağ Ok code klasörüne giriniz Sağ Ok grid960anlatim.html açınız
Kod:
https://drive.google.com/file/d/0B9qLo_2bINfzUjgyWG53YVF2bUU/view?usp=sharing

Eksik Hata kusur varsa bildiriniz Eklemek istediklerinizi yoruma yazarak konuya katkı yaparsınız ve bende bu konuya altıntı yaparım.

Temada (Tasarımda) Çözünürlük Konusu bu işin ayrı parçasıdır buyrunuz ;

Kod:
http://mybbdepo.com/temada-tasarimda-cozunurluk-konusu.html


İyi Günler