diff options
Diffstat (limited to 'files/tr/öğren/css/css_layout/index.html')
| -rw-r--r-- | files/tr/öğren/css/css_layout/index.html | 74 |
1 files changed, 44 insertions, 30 deletions
diff --git a/files/tr/öğren/css/css_layout/index.html b/files/tr/öğren/css/css_layout/index.html index 42a4b4f5c1..1ffe9c03cb 100644 --- a/files/tr/öğren/css/css_layout/index.html +++ b/files/tr/öğren/css/css_layout/index.html @@ -19,52 +19,66 @@ tags: - float translation_of: Learn/CSS/CSS_layout --- -<div>{{draft}}</div> - <div>{{LearnSidebar}}</div> -<p class="summary">Bu zamana kadar Css temellerini, metnin nasıl stillendirileceğini, ve içeriğinizin içindeki kutuların nasıl biçimleneceğini öğrendik. Şimdi, kutuların bir web sayfasına nasıl yerleştireceğimizi öğrenme zamanı geldi. CSS düzenini daha iyi öğrenebilmek için, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bakabilmemiz için gerekli ön koşulları ele aldık.</p> +<p class="summary">Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_Web_ön-uçfront-end_geliştiricisi_mi_olmak_istiyorsun">Bir Web ön-uç(front-end) geliştiricisi mi olmak istiyorsun?</h3> + +<p>Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> -<h2 id="Ön_Koşullar">Ön Koşullar</h2> +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başlayın</a></p> +</div> + +<h2 id="Ön_koşullar">Ön koşullar</h2> -<p>Bu modülü öğrenmeye başlamadan önce şunları bilmelisin:</p> +<p>Bu üniteye başlamdan önce şunları yapmalısınız:</p> <ol> - <li><a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">HTML'e giriş</a> kursunda anlatıldığı gibi temel HTML bilgisine sahip olun.</li> - <li><a href="/tr/docs/Web/Guide/CSS/Getting_started">Introduction to CSS</a> kursunda anlatıldığı gibi CSS konusunda rahat olun</li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeli</a> kavramını anlamak.</li> + <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.</li> + <li><a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a> bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.</li> + <li><a href="/tr/docs/Öğren/CSS/Styling_boxes">Kutuları şekillendirme</a> hakkında bilgi sahibi olun.</li> </ol> <div class="note"> -<p><strong>Note</strong>: Eğer kendi dosyalarınızı oluşturamayacağınız bir bilgisayar, tablet veya başka bir cihazdan çalışıyorsanız <a href="http://jsbin.com/">JSBin</a> veya <a href="https://thimble.mozilla.org/">Thimble</a> gibi bir çevrimci ortam kullanabilirsiniz.</p> +<p><strong>Not</strong>: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.</p> </div> -<h2 id="Guides">Guides</h2> +<h2 id="Dersler">Dersler</h2> -<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS.</p> +<p>Bu dersler, CSS'de bulunan temel düzen araçları ve teknikleri hakkında talimat sağlayacaktır. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anlamanıza yardımcı olacak değerlendirmelerimiz mevcuttur.</p> <dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> - <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> - <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> - <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> - <dd>With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd>A new technology, but with support now fairly widespread across browsers, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> - <dd>Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Introduction">CSS mizanpajına giriş</a></dt> + <dd>bu derste, önceki derslerde değindiğimiz bazı CSS mizanpaj özelliklerini — farklı {{cssxref("display")}} nitelik değerleri gibi — özetleyecek ve bu ünite boyunca ele alacağımız bazı kavramları tanıtacağız.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Normal_Flow">Normal akış(Normal Flow)</a></dt> + <dd>Web sayfalarındaki öğeler, biz bunu değiştirmek için bir şeyler yapana kadar kendilerini normal akışa göre düzenler. Bu derste, nasıl değiştirileceğini öğrenmek için normal akışın temellerini açıklayacağız.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox">Esnek kutular (Flexbox)</a></dt> + <dd><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>, öğelerin satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu derste tüm temelleri açıklayacağız. Bu dersi inceledikten sonra, devam etmeden önce anlayıp anlamadığınızı kontrol etmek için <a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox_skills">flexbox becerilerinizi test</a> edebilirsiniz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Grids">Izgaralar(Grids)</a></dt> + <dd>CSS Izgara(Grid) düzeni, web için iki boyutlu bir düzen sistemidir. içeriği satırlar ve sütunlar halinde yerleştirmenize olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu derste size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek, ardından devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_layout/Grid_skills">ızgara(grid) becerilerinizi test</a> edecektir.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Floats">Yüzen nesneler (Floats)</a></dt> + <dd>Başlangıçta metin blokları içerisindeki görüntüleri konumlandırmak için kullanılan {{cssxref("float")}} niteliği, tüm öğelerin konumlandırılması ve web sayfalarıda sütunlar oluşturmak için kullanılan en yaygın araçlardan biri haline geldi. Fakat Flexbox ve Grid'in kullanıma sokulmasıyla, bu derste açıklandığı gibi asıl kullanım amacına geri döndü.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Positioning">Konumlandırma(Positioning)</a></dt> + <dd>Konumlandırma, öğeleri normal belge mizanpajı akışından çıkarmanıza ve bunların farklı şekilde davranmasını sağlar. örn öğelerin birbirinin üstüne durabilmesini ve/veya taryıcı görünüm alanı içinde her zaman aynı konumda kalmasını sağlar. Bu derste farklı {{cssxref("position")}} değerlerinin nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Multiple-column_Layout">Birden çok sütun düzeni</a></dt> + <dd>Çok sütunlu düzen özelliği, bir gazetede görebileceğiniz gibi, içeriği sütunlar halinde yerleştirmek için bir yöntem sunar. Bu derste, bu özelliğin nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Responsive_Design">Duyarlı tasarım</a></dt> + <dd>Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıkmıştır: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmesine izin veren bir dizi uygulama. Bir web sayfasının farklı cihazlarda tasarım şeklimizi değiştiren bir fikirdir ve bu derste, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Media_queries">Acemiler için medya sorguları klavuzu</a></dt> + <dd><strong>CSS Medya Sorugusu</strong> size, tarayıcı ve cihaz ortamının genişliğinin belirttiğiniz kural ile eşleştiğinde uygulamak istediğiniz CSS tanımlarını uygulamanıza olanak tanır. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından, duyarlı web tasarımının önemli bir parçasıdır, ayrıca sitenizin üzerinde çalıştığı ortamla ilgili diğer bilgileride size sağlayabilir, örneğin kullanıcı fare yerine dokunmatik ekran kullanıyor. Bu derste önce medya sorgualraında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren işlenmiş bir örnekte kullanmayı deneyeceksiniz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Legacy_Layout_Methods">Eski düzen yönetmleri</a></dt> + <dd>Izgara sistemleri, CSS mizanpajlarında kullanılan çok yaygın bir özelliktir ve CSS Grid Layout'tan önce kayan öğeler veya diğer mizanpaj özelliklerinde kullanılmaktaydılar. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edin ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırın. Bu derste, daha eski bir projede çalışıyorsanız nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyceğiz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Supporting_Older_Browsers">Eski tarayıcıları desteklemek</a></dt> + <dd>Bu derste, tasarımlarınız için ana yerleşim yöntemleri olarak Flexbox ve Grid'i kullanmanızı öneririz. Bununla birlikte, sitenize, kullandığınız yöntemleri desteklemeyen eski tarayıcıları kulllanan ziyaretçiler olacaktır. Bu, web'de her zaman geçerli olacaktır — yani özellikler geliştirildikçe, farklı tarayıcılar farklı şeylere öncelik verecektir. Bu derste, eski teknoloji kullanıcılarını engellemeden modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Fundamental_Layout_Comprehension">Değerlendirme: Temel düzeni anlama</a></dt> + <dd>Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.</dd> </dl> -<h2 id="Assessments">Assessments</h2> - -<p>The following assessments will test your ability to lay out web pages with CSS.</p> +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> <dl> - <dt>Creating a flexible multicolumn layout (TBD)</dt> - <dd>This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.</dd> - <dt>Creating a fixed control widget (TBD)</dt> - <dd>This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Practical_positioning_examples">Pratik konumlandırma örnekleri</a></dt> + <dd>Bu derst, konumlandırmayla ne tür şeyler yapabilceğinizi göstermek için bazı gerçek dünya örneklerini nasıl oluşturacağınızı gösterir.</dd> </dl> |