1 / 29

Tablosuz Tasarım

Tablosuz Tasarım. Div ler. Kutular ( Div ). Amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır. Tasarım Süreci. Tasarımsureci . pps. Div ile kullanılabilecek özellikler. id class

kirby-cotton
Download Presentation

Tablosuz Tasarım

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tablosuz Tasarım Divler

  2. Kutular (Div) • Amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır.

  3. Tasarım Süreci • Tasarımsureci.pps

  4. Div ile kullanılabilecek özellikler • id • class • Position : static, relative, absolute, fixed • Float : top, left, right, bottom • width (35% veya 35px) yüzde veya tam ölçü verilebilir • height (35% veya 35px) yüzde veya tam ölçü verilebilir • z-index • border • background • text-align • Padding : padding-top, padding-bottom, padding-left, padding-right • margin : margin-top, margin-bottom, margin-left, margin-right http://dorukkaraboncuk.com/html-div-etiketi-nasil-kullanilir/

  5. Div- position • Blok parçanızın nasıl durucağını belirtir. • Static: Hiç bir değer girmezseniz div etiketi “static” özelliğini kendi atar ve blok parçanız bir bütün olarak durup, pozisyonu belli olmadığını ve varsayılan değerde gözüküceğini belirtir.  • Relative: Relative özelliğini seçerseniz top, bottom, left veya right seçeneklerini kullanabilirsiniz. Blok düzenini gözüktüğü pozisyondan sağa sola yukarıya veya aşağıya kaydırmanıza yarar. • Absolute: Absolute özelliğini seçtiğinizde blok parçanız sayfaya göre ayarlanır ve relative gibi top, bottom, left veya right özelliklerini alır. İç içe geçmiş bazı divler dışında sayfanızda sabit tutmak istediğiniz parçalar için kullanır. Bir sonraki özellikte başka bir div’in içerisinde nasıl sabit tutulucağınıgörüceksiniz.

  6. Div- position • <divstyle=”position:static;”>İçerik</div> •  <div style=”position:relative;”>İçerik</div> • <div style=”position:absolute; left:10px; right:10px; top:10px; bottom:10px;”>İçerik</div>

  7. Div - position • Relative + Absolute: Bir blok parçasının içerisinde sabit yeri değişmeyen başka bir blok parçası yaratmak istediğimizde dıştaki blok relative özelliğini alır ve içerideki blok absolute özelliğini alır. Daha sonra absolute özelliğinin aldığı top, bottom, left veya right özellikleri dıştaki blok parçasına göre hizalanır. • <divstyle=”position:relative;”><divstyle=”position:absolute; left:10px; top:5px;”>İçerik</div></div>

  8. Div - position • Fixed:Fixed özelliği gözümüzün gördüğü yeri baz alarak hizalama yapar. Sayfayı aşağıya yukarıya oynatmanız blok parçasının yerini değiştirmez. • Ör: • <div style=”position:fixed; left:10px; top:50%;”>İçerik</div>

  9. Div - float • Bazen ölçülerin hepsini tam giremeyiz özellikle dinamik dökümanlarda yükseklik sürekli değişebileceğinden dolayı position özelliğini kullanmak sitede sorunlara yol açabilir. Bloklarımızı birbirine dayamaya yarayan float özelliğini kullanabiliriz. • Float özelliği left ve right olarak iki özellik ile kullanılabilir. Bloklarınızı mümkün olduğu kadar sağa veya sola dayamanıza yarar. • <div style=”float:left;”>İçerik</div>

  10. Div –width-height • <divstyle=”width:450px;”>İçerik</div> • <divstyle=”width:50%;”>İçerik</div> • <divstyle=”height:450px;”>İçerik</div> • <divstyle=”height:50%;”>İçerik</div>

  11. Div- z-index • Üst üste gelen bloklarınız varsa bunların sırasını belirtir. En arkada kalmasını istediğiniz bloklar için genellikle -9999 değeri kullanılır. Apartman katları gibi düşünülebilir. Sayı büyüdükçe blok üst kata çıkar. Z-index’i 1 olan blok, Z-index’i 2 olan blok parçasının altında kalacaktır. • <div style=”z-index:-9999;”>İçerik</div>

  12. Div - border • Blok parçanıza çerçeve eklemek için kullanılır. Çerçevenin kalınlığını, tipini ve rengini ayarlayabilirsiniz. • <divstyle=”border:1px solid #161616;”>İçerik</div> • <divstyle=”border:1px dotted #000;”>İçerik</div>

  13. Div- background • <divstyle=”background:url(adres.jpg) repeat-x;”>İçerik</div> • <divstyle=”background:url(adres.jpg) no-repeat;”>İçerik</div>

  14. Div – text-align • <divstyle=”text-align:center;”>İçerik</div>

  15. Div - overflow • <divstyle=”overflow:auto;”>İçerik</div>

  16. Kutu Modeli

  17. Örnek: Genişliği kaç px’dir? div.kutu { width: 300px; padding: 10px; border: 5px solidgray; margin: 10px }; 320px

  18. Örnek: Genişliği 250 px olan bir kutu ? div.kutu { width: padding: border: margin: }

  19. Örnek : • http://chengchenandzhou.com/ • http://www.csswinner.com/winners

  20. Borderstyle • http://www.w3schools.com/css/css_border.asp

  21. Background • background:url(img/resim.jpg); • background-size: 100% 100%;

  22. Alt Alta Div’ler

  23. Yan Yana Div’ler (id ile)

  24. Soru? • Bu kutuları sağa yaslayın? • Kutuları sayfada ortalayın?

  25. #div {     border: solid 1px black;     height: 100px; margin-left: auto;     margin-right: auto;     width: 100px; } #div {     border: solid 1px black;     height: 100px; margin-left: auto;     margin-right: auto;     width: 100px; } 

  26. Yan Yana Div’ler (class ile )

  27. Web Sayfası Hazır Taslaklar • http://blog.html.it/layoutgala/

  28. Ödev • Divposition video: http://www.adobegunlugu.com/adobe-cs5-eseminerleri-38-css-position-ozelliginin-kullanimi-relative-absolute-fixed-static/

More Related