Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Web Tasarımının Temelleri Sibel Öztan

Benzer bir sunumlar


... konulu sunumlar: "Web Tasarımının Temelleri Sibel Öztan"— Sunum transkripti:

1 Web Tasarımının Temelleri Sibel Öztan

2 Giriş  World Wide Web Consortium   .dtd document type declaration

3 Ders Programı  Genel Bakış  HTML (HyperText Markup Language) - XHTML  Cascading Style Sheets (CSS), JavaScript, Web Siteleri, XML Temelleri  Site Kurmak  Sayfa ve İçerik Hazırlamak  Kod Yazmak  Site Yayınlamak  İstatistik Raporları

4 HTML - XHTML  HTML web sayfaları oluşturmak için kullanılan etiket tabanlı bir dildir  XHTML, XML (Extensible Markup Language) kurallarının uygulandığı HTML’dir  Etiketler (tags) küçük harf olmalıdır  Öznitelikler (attributes) tırnak içine alınmalıdır  Öznitelikler küçültülemez (nowrap gibi)  Boş etiketler /> ile kapanmalıdır ( gibi)

5 HTML  HTML web sayfaları oluşturmak için kullanılan etiket tabanlı bir dildir  XHTML, XML (Extensible Markup Language) kurallarının uygulandığı HTML’dir  Etiketler (tags) küçük harf olmalıdır  Öznitelikler (attributes) tırnak içine alınmalıdır  Öznitelikler küçültülemez (nowrap gibi)  Boş etiketler /> ile kapanmalıdır ( gibi)

6 CSS’in Temelleri Bir sayfadaki içeriğin nasıl görüneceğini tanımlama yöntemidir.  Basamakli stil sayfaları  W3C standardı  Stil sayfaları bir web sayfasındaki içeriğin nasıl görüntüleceğini yöneten kurallar kümesi tanımlar. Sunumu içerikten ayırmak için kullanılır.  En son versiyon 2.1

7 W3C Önergelerinde Bulunan Doctypes  HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.  HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.  HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

8 W3C Önergelerinde Bulunan Doctypes  XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.  XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.  XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.  XHTML 1.1 This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

9 HTML Etiketleri  yorum   - 

10 HTML Etiketleri 

11 JavaScript’in Temelleri  Tarayıcıdaki web sayfası üzerinde çalışan betik dili  1995 yılında Netscape tarafından icat edildi ve LiveScript olarak adlandırıldı  Her türlü istemci tarafı eylemleri gerçekleştirmek için kullanılr: form doğrulama, interaktivite, hesaplamalar function validateFormOnSubmit(theForm) { var reason = ""; var error = ""; reason += validateAD(theForm.AD); reason += validateTELEFON(theForm.TELEFON); reason += validate (theForm. ); if (reason != "") { alert("Bazı bilgilerde hatalar var:\n" + reason); return false; } return true; }....

12 XML Temelleri  XML, yapılandırılmış belgeler (örneğin XHTML) oluşturmak için kullanılan bir etiket tabanlı bir sözdizimi  Hiyerarşik bilgi depolamanın genel amaçlı bir yolu  Farklı sistemler arasında köprü oluşturmak için kullanılır  XHTML’den başka XPath, XSLT, XForms gibi diller için temel oluşturur

13 Expression Web  

14 Websitesinin Temelleri  Web sitesi nedir?  Web sitesi yaratmak  Page properties (File – Properties)  Tools – Page Editor Options  Web sitesinin yapısı  Root klasörü  index page

15 Belge Düzenleme Esasları  Yeni bir belge yaratmak  Sayfa özelliklerini ayarlama  DOCTYPES hakkında  Metin eklemek  Resim eklemek  Diğer içerikleri eklemek  Tasarım yüzeyinde çalışmak

16 Kod İçerisinde Çalışmak  Intellisense  ctrl l  Code hyperlink ( css’e -div id- ya da javascript’e –div onclick gibi)  Code view  Setting code view preferences (kod görünümü tercihleri)  Using code snippets (kod parçacıkları)  Ctrl enter – link  Page editor option (add or edit code snippets)

17 Table Etiketi  Tabular (sekmeli) veri gösterimi  Tablo eklemek  Tabloyu biçimlendirmek  Apply style, valign, tabluautoformat, bg image  Hücreleri birleştirmek (modify menü)  Hücreleri ayırmak  Tablonun boyutları  Tabloyu yeni bir sayfada incelemek (properties panelinden takip edilebilir)  Pixel(kesin) ve yüzde (göreceli) tabanlı boyutlandırma  Mixed boyutlandırma kullanmak (table %75, td 134 px gibi)  Browser’ı boyutlarına paralel değişim  Div içerisine almak (wrap, fixed & % width uygulamak)  CSS biçimlendirme  Table border (top-left-right)  Cell border (bottom)  Yeni bir style tanımlamak (td { border-bottom…})  td :cellspacing=0 cellpadding=10

18 CSS Temelleri  Bir web sayfasının içeriğine sunum özellikleri uygulamak için kullanılır  Birkaç şekilde tanımlanabilir ve uygulanabilir  Doğrudan bir sayfa öğesinin “satır içi” stili olarak  Çoklu elemanlara uygulanabilir bir “sınıf” olarak  Sayfada tüm ilgili etiketlerin stil özelliklerini almak için kullanılacak bir etiket adı olarak  Kimlik tabanlı (id-based) bir tarz olarak

19 CSS Sözdizimi (Syntax)  Stiller özel bir sözdizimi kullanılarak tanımlanır Etiket-tabanlı (tag-based) Sınıf-tabanlı (class-based) Kimlik-tabanlı (id-based) h1 { color:red; font-size: 18pt; } h2, h3 { color:#0000FF; font-size: 12pt; }.class1 { color:red; font-size: 18pt; } class2{ color:#0000FF; font-size: 12pt; } #id1 { color:red; font-size: 18pt; } #id2{ color:#0000FF; font-size: 12pt; }

20 Satıriçi Stiller  Satır içi stiller, etkilemek istenilen sayfa öğesinde doğrudan tanımlanır  “style” özniteliği kullanılarak tanımlanır  Lokalize biçimlendirme için yararlıdır fakat içerikle sunumu doğrudan birbirine karıştırdığından kaçınılmalıdır

21 Etiket-tabanlı Stiller  Belirli bir isme sahip tüm etiketlerin nasıl görüntüleneceğini merkezi olarak kontrol etmek için yararlı  Etiketi ile aynı ada sahip bir stil kuralı oluşturarak tanımlanır h1 { color:red; font-size: 18pt; }  Bir etiketin tüm durumlarını tanımlamak için yararlı, ancak istisnalar varsa zorlayıcı olabilir

22 Sınıf Tabanlı Stiller  Anlamlı bir ad tanımlanan stiller sayfada herhangi bir unsura uygulanabilir.uyariMetni { color:red; font-family: sans-serif; } Bir hata oluştu!  Birden fazla türde kullanılacak öğelerin biçimlerinin tanımlanması için yararlı

23 ID-tabanlı Stiller  Web sayfasında sadece bir öğe için uygulanmak üzere bir stil tanımlar #navigationBar{ background-color:silver; font-family:sans-serif; }

24 CSS Stiller Tanımlamak  Attach Style Sheet (Stil sayfası eklemek)  New Style  Selector .yeniStil  Overline  Courier New  Manage Styles  Mavi, kırmızı, yeşil, sarı (inline)  Apply Styles  CSS Control (Manual-Auto)  CSS Layouts

25 CSS Nedir? CSS Cascading Style Sheets (Basamaklı stil sayfaları) için bir kısaltmadır.

26 CSS ile neler yapabilirim? CSS, HTML belgelerinin düzenini tanımlayan bir stil dilidir. Örneğin, CSS yazı tipi, renk, kenar boşlukları, satır, yükseklik, genişlik, arka plan resimleri, gelişmiş pozisyonları ve diğer pek çok şeyi kapsar. HTML web sitelerine düzeni eklemek için (yanlış) kullanılıyor olabilir. Ama CSS daha fazla seçenek sunar ve daha doğru ve karmaşıktır. CSS günümüzde tüm tarayıcılar tarafından desteklenmektedir.

27 CSS ve HTML arasındaki fark nedir? HTML içeriği yapılandırmak için kullanılır. CSS yapılandırılmış içeriği biçimlendirmek için kullanılır.

28 CSS’in Yararları CSS, web tasarım dünyasında bir devrimdir. CSS somut yararları şunlardır:  Tek bir stil dosyası ile birçok belge düzenini denetlemek,  Daha net bir mizanpaj (layout) kontrolu yapabilmek,  Farklı medya-tiplerine (ekran, yazıcı, vb) farklı mizanpajlar uygulayabilmek.

29 CSS nasıl çalışır? Cascading Style Sheets (CSS)’de kullanılan birçok özellik HTML’e benzemektedir. Temel CSS sözdizimi Diyelim ki bir web sayfasının arka plan olarak güzel bir kırmızı renk istiyorsunuz: HTML kullanarak böyle yapmış olabiliriz: CSS ile aynı sonucu bu şekilde elde edebiliriz: body {background-color: #FF0000;}

30 CSS nasıl çalışır? seçici { özellik: değer} Özellik, hangi HTML etiket(lerine) uygulanacak? (Örnek “body”) Özellik, örneğin arka plan rengi için olabilir. (“background-color”) Örneğin arka plan renk özelliğinin değeri “FF0000” (kırmızı) olabilir

31 Bir HTML sayfasına CSS uygulamak Bir HTML sayfasına CSS uygulamanın üç yolu vardır. Bu yöntemlerin tümü aşağıda özetlenmiştir. Üçüncü yöntem, yani harici stil dosyasına bağlantı verilmesi önerilmektedir.

32 Yöntem 1: In-line (style özniteliği) HTML’e CSS uygulamak için bir yol HTML style özniteliği (attribute) tarzını kullanmaktır. Example This is a red page

33 Yöntem 2: İç (etiket stili) Başka bir yol, CSS kodlarını HTML etiketi kullanmak suretiyle eklemektir. Örneğin: Örnek Site body {background-color: #FF0000;} This is a red page

34 Yöntem 3: Harici (bir stil sayfası için link) Önerilen yöntem, harici (dış) bir stil sayfasına link vermektir. Harici bir stil sayfası sadece.css uzantılı bir metin dosyasıdır. Diğer dosya ya da sayfalarda olduğu gibi, web sunucusuna veya sabit disk üzerinde stil dosyasını yerleştirebilirsiniz. Örneğin, stil sayfanıza style.css adını verdiğinizi ve style adlı bir klasörde bulunduğunu varsayalım. Bu durum, aşağıdaki gibi gösterilebilir:

35 Yöntem 3: Harici (bir stil sayfası için link) Hüner, HTML belgesinden (default.htm) stil sayfasına (style.css) bir bağlantı oluşturmaktır. Böyle bir bağlantı aşağıdaki HTML kod satırı ile oluşturulabilir:

36 Yöntem 3: Harici (bir stil sayfası için link) Stil yolunun (path) href özniteliği kullanılarak nasıl belirtildiğine dikkat edin. Stil bağlantısı için olan kod satırı, HTML kodunun ve etiketleri arasına yani başlık bölümüne eklenmelidir. Bu gibi: My document...

37 Yöntem 3: Harici (bir stil sayfası için link) Bu bağlantı, tarayıcıya, HTML dosyasını görüntülerken bu CSS dosyasından gelen mizanpajı (layout) kullanması gerektiğini söyler. Akıllıca olan birden fazla HTML sayfasının aynı stil dosyasına bağlanabilmesidir. Diğer bir deyişle, bir CSS dosyası birçok HTML sayfasının yerleşimini (mizanpajını) kontrol etmek için kullanılabilir.

38 Uygulama default.htm My document My first stylesheet style.css body { background-color: #FF0000; }

39 Renkler ve arka plan  color  background-color  background-image  background-repeat  background-attachment  background-position  background

40 Ön plan rengi: “color” özelliği “color” özelliği bir öğenin ön plan rengini tanımlar. Örneğin, bir sayfadaki tüm başlıkların koyu kırmızı renkte olmasını istediğinizi düşünelim. Başlıklar, tüm HTML sayfalarında ögesi ile işaretlenir. Aşağıdaki kod ogesinin rengini kırmızı olarak ayarlar. h1 { color: #ff0000; }

41 “color” özelliği Renkler yukarıdaki örnekte olduğu gibi (# ff0000) onaltılık olarak girilebilir veya renklerin adları (“red") veya rgb-değerleri (rgb (255,0,0)) kullanılabilir. h1 { color: red; }

42 background-color özelliği background-color özelliği ögelerin arka plan rengini tanımlar. ögesi bir HTML belgesinin tüm içeriğini kapsar. Böylece, tüm sayfanın arka plan rengini değiştirmek için, background-color özelliği ögesine uygulanmalıdır. Ayrıca, başlıklar ve metinler dahil olmak üzere diğer ögelere arka plan renkleri uygulayabilirsiniz. Aşağıdaki örnekte, farklı bir arka plan rengi ve ögelerine uygulanmaktadır.

43 background-color özelliği body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } ögesine noktalı virgül ayıracı ile iki özellik uygulandığına dikkat edin.

44 Arka plan resmi [background-image] background-image CSS özelliği arka plan resmi eklemek için kullanılır. Bir arka plan resmini gösteren bir örnek olarak, us/images/results.aspx?&ex=2&qu=butterfly#ai:M C |mt:1| kullanabilir. Bir web sayfası için bir arka plan olarak kelebek resmini eklemek için, sadece ögesine background-image özelliğini uygulamak ve resmin konumunu belirtmek yeterlidir.

45 Arka plan resmi [background-image] body { background-color: #FFCC66; background-image: url("butterfly.png"); } h1 { color: #990000; background-color: #FC9804; }

46 Arka plan resmi [background-image] url ("butterfly.gif") olarak resmin yerini nasıl belirttiğimize dikkat edin. Bu, resmin stil sayfası ile aynı klasörde bulunduğu anlamına gelir. Ayrıca url ("/images /butterfly.png.") ile diğer klasörlerdeki resimleri de uygulayabilirsiniz ve hatta Internet üzerindeki dosyanın tam adresini belirtebilirsiniz: url ("http://www.html.net/butterfly. gif ").

47 Arka plan resmini [background-repeat] tekrarlama Yukarıdaki örnekte, varsayılan şekilde (default) yatay ve dikey olarak kelebek resmi tüm ekranı kapsayacak şekilde tekrarlanmıştır, fark ettiniz mi? background-repeat özelliği bu davranışı kontrol eder. Aşağıdaki tablo background-repeat için dört farklı değeri göstermektedir.

48 Arka plan resmini [background-repeat] tekrarlama DeğerTanım background-repeat: repeat-xResim yatay olarak tekrarlanır background-repeat: repeat-yResim dikey olarak tekrarlanır background-repeat: repeatResim hem yatay hem de dikey olarak tekrarlanır background-repeat: no-repeatResim tekrarlanmaz

49 Arka plan resmini [background-repeat] tekrarlama Örneğin, bir arka plan resminin tekrarını önlemek için css kodu aşağıdaki gibi olmalıdır: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }

50 Arka plan resmini [background-repeat] tekrarlama Örneğin, bir arka plan resminin tekrarını önlemek için css kodu aşağıdaki gibi olmalıdır: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }

51 Arka plan resmini kilitlemek[background-attachment] background-attachment özelliği bir arka plan resminin sabit duracağını veya içeren elemanı ile birlikte hareket edeceğini belirtir. Sabit (kilitli) bir arka plan resmi, okuyucu sayfayı kaydırdığında metin ile beraber hareket etmeyecektir, kilitsiz bir arka plan resmi ise web sayfasının metin ile birlikte hareket edecektir. Aşağıdaki tablo background-attachment için kullanılabilecek iki farklı değeri özetlemektedir. Kaydırma ve sabit arasındaki farkı görmek için örnekler tıklayın.

52 Arka plan resmini kilitlemek[background-attachment] DeğerTanım background-attachment: scrollKilitsiz – resim sayfaya beraber kayar background-attachment: fixedResim kilitlidir

53 Arka plan resmini kilitlemek[background-attachment] Örneğin, aşağıdaki css kodu arka plan resmini sabitler: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }

54 Arka plan resminin konumu [background-position] Varsayılan (default) olarak, bir arka plan resmi ekranın sol üst köşesinde bir konumda olacaktır. background-position özelliği arka plan resminin ekrandaki konumunu değiştirmenizi sağlar. background-position değerlerini ayarlamak için çok çeşitli yollar vardır. Bunların tümü bir dizi koordinatlar olarak biçimlendirilir. Örneğin, '100px 200px‘ değeri, tarayıcı penceresinin sol tarafından 100px ve üst tarafından 200px mesafede olacak şekilde konumlandırır. Koordinatlar tarayıcı penceresinin yüzdesi olarak, sabit birimler cinsinden (piksel, cm, vb) olarak belirtilebilir veya top, bottom, center, right ve left sözcükleri kullanılarak verilebilir.

55 Arka plan resminin konumu [background-position]

56 DeğerTanım background-position: xpos yposİlk değer yatay ve ikinci değer dikey pozisyonu belirler.Sol üst köşede 0 0'dır. Birimler piksel (0px 0px) veya başka bir CSS birimleri olabilir. background-position: x% y%İlk değer yatay ve ikinci değer dikey pozisyonu belirler. Sol üst köşede 0% 0% dir.Sağ alt köşe 100% 100%'dür. Yalnızca bir değer belirtirseniz, diğer değer 50% olacaktır. Varsayılan değer: 0% 0% background-position: 2cm 2cmResim, sayfada soldan 2 cm ve alttan 2 cm olacak şekilde konumlandırılır background-position: 50% 25%Resim, sayfanın altından dörtte biri mesafede merkezi olarak konumlandırılır background-position: top rightResim sayfanın sağ üst köşesinde konumlandırılır

57 Arka plan resminin konumu [background-position] Aşağıdaki kod, resmi sağ alt köşeye konumlar: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

58 [background] derleme background özelliği önceden listelenen tüm arka plan özellikleri için bir kısaltmadır. background ile birçok özellik bir araya getirilebilir ve böylece daha kolay okunmasını sağlayacak şekilde bir style yazılabilir.

59 [background] derleme Örneğin, bu beş satıra bakalım: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; background kullanılarak aynı sonuç sadece tek bir satırda ile elde edilebilir: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

60 [background] derleme Sıralama şu şekilde olmalı: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] Eğer bir özellik dışarıda bırakılırsa, otomatik olarak varsayılan değer olarak ayarlanır. Örneğin, background-attachment ve background- position dışarı alınırsa: background: #FFCC66 url("butterfly.gif") no-repeat; Varsayılan değerler: scroll ve top left

61 Yazı tipleri (fonts)  font-family  font-style  font-variant  font-weight  font-size  font

62 Yazı tipi ailesi [font-family] font-family özelliği, web sayfasını veya ilgili ögeyi görüntülemek için kullanılacak yazı tiplerinin öncelik listesini ayarlamak için kullanılır.

63 Yazı tipi ailesi [font-family] Yazı tiplerini kategorize etmek için kullanılan terimlerin iki çeşidi vardır. Aile adı Bir aile adı (genellikle “font" olarak bilinir) "Arial", "Times New Roman" veya "Tahoma“ gibi olabilir. Genel (generic) aile Genel aileler benzer (uniform) görünümlere sahip aile adı grupları olarak tanımlanabilir. Örnek olarak “çıkıntısız“ yazı tipi koleksiyonu sans-serif verilebilir.

64 Yazı tipi ailesi [font-family] Farklar şu şekilde gösterilebilir: “serif” –”çıkıntılı” genel ailesine ait olan yazı tipleri Times New Roman Garamond Georgia

65 Yazı tipi ailesi [font-family] “sans-serif” –”çıkıntısız” genel ailesine ait olan yazı tipleri Trebuchet Arial Verdana

66 Yazı tipi ailesi [font-family] “monospace” –” eşaralıklı yazıtipi” genel ailesine ait olan yazı tipleri (Tüm karekterlerin eni eşit uzunlukta) Courier

67 Yazı tipi ailesi [font-family] Web sitesi için yazı tiplerini listelemek, doğal olarak en çok tercih edilen yazı tipi ile başlar ve bazı alternatif yazı tipleri bunu takip eder. Listenin genel bir font ailesi ile tamamlanması tavsiye edilir. Bu şekilde belirtilen yazı tiplerinden hiçbiri yoksa sayfa en azından aynı ailenin bir yazı tipi kullanılarak gösterilecektir.

68 Yazı tipi ailesi [font-family] Fontların öncelik listesi örneği şu şekilde olabilir: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

69 Yazı tipi stili[font-style] font-style özelliği, yazı tipi için normal, italik veya eğik seçeneklerini tanımlar. Aşağıdaki örnekte, olan tüm başlıklar italikle gösterilecektir. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}

70 Yazı tipi değişkeni[font-variant] font-variant özelliği normal ya da small-caps değişkenleri arasında seçim yapmak için kullanılır. small-caps yazı tipi küçük ölçekle büyük harf kullanan bir yazı tipidir. Font-variant, small-caps harf olarak ayarlı ve bilgisayarda small-caps yazı tipi yoksa tarayıcı büyük olasılıkla karekterleri büyük harf olarak gösterecektir.

71 Yazı tipi değişkeni[font-variant] Örnek: h1 { font-family:"AGaramond RegularSC", Garamond, sans- serif; font-variant: small-caps;} h2 {font-variant: normal;} … Heading 1 - Small Caps And heading 2 - normal

72 Yazı tipi genişliği [font-weight] font-weight özelliği bir yazı tipinin ne genişlikte gösterileceğini belirtir. Bir yazı tipi normal veya koyu olabilir. Bazı tarayıcılar yazı genişliğini tarif etmek için (yüzlük olarak) arasında numara kullanımı destekler. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}

73 Yazı tipi boyutu[font-size] Bir yazı tipinin boyutu font-size özelliğine göre ayarlanır. Yazı tipi boyutlarını tanımlamak için seçebileceğiniz birçok farklı birimler (örneğin piksel ve yüzde vardır. Örneğin; h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

74 Yazı tipi boyutu[font-size] Yukarıdaki dört birim arasında bir temel fark vardır. ‘px’ ve ‘pt’ birimleri yazı tipi boyutunu mutlak olarak verir, “%” ve “em” ise kullanıcının boyutları kendisinin ayarlamasına olanak verir. Birçok kullanıcı, yaşlı, özürlü, zayıf görme yetisine sahip veya kötü kaliteli bir monitör kullanmaktadır. Web sitenizi herkes için erişilebilir kılmak için, örneğin ‘%’ veya ‘em’ gibi ayarlanabilir birimleri kullanmalısınız. 16px 1em 100% 12pt

75 Yazı tipi boyutu[font-size] h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} Heading <h1> size 30px Heading <h2> size 1cm Heading <h3> size 120% Paragraph <p> size 1em

76 Yazı tipi derleme[font] font özelliğini kullanarak tek bir özellikle farklı yazı tipi özelliklerini tek kalemde karşılamak mümkündür. Örneğin, için font-özelliklerini tanımlamak üzere kullanılan bu dört satıra bakalım: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

77 Yazı tipi derleme[font] Yalnızca font özelliği kullanıldığında tek satır halinde aşağıdaki şekilde ifade edilebilir: p { font: italic bold 30px arial, sans-serif; } Font için değer sırası: font-style | font-variant | font-weight | font-size | font-family

78 CSS’e yorum ekleme /* bu bir yorumdur*/ p { text-align:center; /*bu başka bir yorumdur*/ color:black; font-family:arial; }

79 Metin(text) Metni biçimlendirmek ve stil katmak web tasarımcısı için önemli bir konudur. CSS metnine düzen eklemek için kullanılan özellikler :  text-indent  text-align  text-decoration  letter-spacing  text-transform

80 Metin girintisi(text-indent) text-indent özelliği, bir paragrafın ilk satırına girinti uygulamak için kullanılır. Aşağıdaki örnekte ile işaretlenmiş tüm metin paragraflarına 30 px uygulanır: p { text-indent: 30px; }

81 Metin hizalama [text-align] “text-align” CSS özelliği HTML’in eski sürümlerinde kullanılan “align” özniteliğine karşılık gelmektedir. Yazı sağa, sola veya ortaya hizalanabilir. Bunlara ek olarak, justify değeri sağ ve sol kenarları düz bir hat olacak şekilde hizalar. Aşağıdaki örnekte tablo verileri ortalanmış, tablo başlıkları sağa hizalanmış ve normal metin paragrafları “justify” olarak gösterilecektir.

82 Metin hizalama [text-align] th { text-align: right; } td { text-align: center; } p { text-align: justify; }

83 Metin dekorasyonu [text-decoration] text-decoration özelliği metne farklı "süsleme" veya "efektler" eklemeyi mümkün kılar. Aşağıdaki örnekte başlıklarının altı çizili, başlıklarının üstü çizili ve başlıklarının ortası çizili olarak gösterilecektir.

84 Metin dekorasyonu [text-decoration] h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

85 Karakterlerin arasındaki boşluk [letter-spacing] Metin karakterleri arasındaki boşluk letter-spacing özelliği kullanılarak belirtilebilir. Özelliğinin değeri sadece istenilen genişliktir. Örneğin, manşetteki (headlines, başlık)) harfler arasına 6px ve normal paragraftaki harflerin arasındaki 3px boşluk bırakmak için aşağıdaki kodu kullanabilirsiniz.

86 Karakterlerin arasındaki boşluk [letter-spacing] h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

87 Metin dönüşümü [text-transform] text-transform özelliği bir metnin harflerini kontrol eder.Özgün metnin HTML kodunda nasıl göründüğünden bağımsız olarak ilk harflerin büyük, tüm harflerin büyük ya da küçük görünmesini sağlayabilirsiniz. capitalize: ilk harfler büyük “ Kültür Üniversitesi” uppercase: tümü büyük harf “ KÜLTÜR ÜNİVERSİTESİ” lowercase: tümü küçük harf “kültür üniversitesi” none: HTML kodunda göründüğü gibi görüntüle

88 Metin dönüşümü [text-transform] h1 { text-transform: uppercase; } li { text-transform: capitalize; }

89 Site Hazırlamak  Ayarlar  Resim eklemek  Metin eklemek  Görünümü düzenlemek  Siteyi önizlemek

90 Linkler (Web’in temel yapı taşları)  Temel Hyperlinkler  Sayfalara link vermek  Dosyalara link vermek  linkleri  Adlı bağlantılar (named anchors), bookmarks  Subnav style…  Linkleri biçimlendirmek  Resim haritaları  Highlight hotspots

91 Linkler (Web’in temel yapı taşları)  Sözde sınıflar a:link {color: blue; } a:visited {color: red; } a:active {background-color: #FFFF00; } a:hover { color: orange; font-style: italic; }

92 Linkler (Web’in temel yapı taşları)  Sözde sınıflar a:hover { letter-spacing: 10px; font-weight:bold; color:red; } a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

93 Linkler (Web’in temel yapı taşları)  Sözde sınıflar a { text-decoration:none; } a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

94 Linkler (Web’in temel yapı taşları)  Sözde sınıflar a:link {color: blue;text-decoration:none; } a:visited {color: purple;text-decoration:none; } a:active {background-color: yellow;text- decoration:none; } a:hover {color:red;text-decoration:none; }

95 Kimlik ve ögeleri gruplama (class ve id) Proje Grupları 1: Müzik Spor Eğitim Proje Grupları 2: Enerji Tarım Turizm

96 Kimlik ve ögeleri gruplama (class ve id) Proje Grupları 1: Müzik Edebiyat Resim Proje Grupları 2: Enerji Tarım Turizm

97 Kimlik ve ögeleri gruplama (class ve id) a { color: blue; } a.sanat { color: #FFBB00; } a.sektor { color: #800000; }

98 Kimlik ve elementleri gruplama (class ve id) Konu 1... Konu Konu Konu 2... Konu Konu

99 Kimlik ve elementleri gruplama (class ve id) Konu 1... Konu Konu Konu 2... Konu Konu #c1-2 { color: red;}

100 Ögelerin gruplanması (span ve div) Erken yatmak ve erken kalkmak insanı sağlıklı, varlıklı ve bilge yapar. span.yarar { color:red; }

101 Ögelerin gruplanması (span ve div) Yaşar Kemal Orhan Pamuk Oğuz Atay Ahmet Ümit

102 Ögelerin gruplanması (span ve div) Can Yücel Cemal Süreya Nazım Hikmet

103 Ögelerin gruplanması (span ve div) #yazarlar { background:blue; } #sairler{ background:red; }

104 Kutu modeli margin border padding içerik right top left bottom

105 Kutu modeli Makale 1: Bütün insanlar haysiyet ve haklar bakımından eşit ve hür doğarlar. Akıl ve vicdana sahiptirler ve birbirlerine karşı kardeşlik ruhu ile hareket etmek durumundadırlar.

106 Kutu modeli

107 Margin ve padding

108 Margin komşu elemanın her tarafına olan (veya belgenin sınırları) mesafedir. Padding "dolgu" olarak ifade edilebilir. Padding diğer ögelere olan mesafeyi etkiler ancak ögenin içeriği ile kendi sınırları arasındaki iç mesafeyi tanımlar.

109 Margin ve padding body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } body { margin: 100px 40px 10px 70px; }

110 Margin ve padding p { margin: 5px 50px 5px 50px; } h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }

111 Border (bordür, çerçeve, sınır)  border-width  border-color  border-style  border

112 Border (bordür, çerçeve, sınır)  border-width

113 Border (bordür, çerçeve, sınır)  border-color

114 Border (bordür, çerçeve, sınır)  border-style (groove – oluk, ridge – kabartma)

115 Border (bordür, çerçeve, sınır) h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

116 Border (bordür, çerçeve, sınır) h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

117 Border (bordür, çerçeve, sınır) p { border-width: 1px; border-style: solid; border-color: blue; } p { border: 1px solid blue; }

118 Height (yükseklik) ve width (genişlik) div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

119 Float ögeler (yüzenler) div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

120 Float ögeler (yüzen)

121 sağ alanda yer alacak olan metin

122 Float ögeler (yüzen) Metin 1... Metin 2... Metin 3...

123 Float ögeler (yüzen) Başlık 1 Buradan sonra float left özelliğine son veriliyor...

124 Float ögeler (yüzen) #picture { float:left; width: 100px; }.floatstop { clear:both; } clear: left, right, both veya none

125 Ögelerin Konumlandırılması  CSS konumlandırma ile, sayfanızda tam olarak istediğiniz yere bir öğe yerleştirebilirsiniz.  Konumlandırma, Float’lar ile birlikte, gelişmiş ve hassas bir düzen (layout) oluşturmak için birçok olanaklar sunuyor.

126 CSS konumlandırma arkasındaki prensip  Sistem koordinatları içerisindeki herhangi bir yere kutuyu yerleştirebilirsiniz. h1 { position:absolute; top: 100px; left: 200px; }

127 Ögelerin Konumlandırılması

128 Mutlak konumlandırma  Sistem koordinatları içerisindeki herhangi bir yere kutuyu yerleştirebilirsiniz. h1 { position:absolute; top: 100px; left: 200px; }

129 Mutlak konumlandırma  Mutlak konumlandırılmış bir eleman belgede boş yer almaz. Diğer bir deyişle konumlandırma sonrasında belgede boş yer bırakılmaz. Bir ögeyi mutlak olarak konumlandırmak için, position özelliği absolute olarak ayarlanır. Sonrasında kutuyu yerleştirmek için left, right, top ve bottom özelliklerini kullanabilirsiniz.

130 Mutlak konumlandırma

131 #box1 { position:absolute; top: 50px; left: 50px; background: #FA7C00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box2 { position:absolute; top: 50px; right: 50px; background: #FFFF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box3 { position:absolute; bottom: 50px; right: 50px; background: #00FF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box4 { position:absolute; bottom: 50px; left: 50px; background: #00FFFF; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; }

132 Göreceli konumlandırma  Göreceli bir elemanı konumlandırmak için, position özelliği relative olarak ayarlanır. Mutlak ve bağıl (göreceli) konumlama arasındaki fark pozisyonun nasıl hesaplandığıdır. Bağıl olarak konumlandırılmış bir element için pozisyon, belgenin orijinal pozisyonuna göre hesaplanır. Yani ögeyi, yukarı,aşağı, sola veya sağa hareket ettirirsiniz. Öge bu şekilde konumlandırıldıktan sonra belgede hala boş yer elde edilir.

133 Göreceli konumlandırma #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }

134 Göreceli konumlandırma

135 Z-index ile katman katman

136  CSS üç boyutlu olarak çalışır - yükseklik, genişlik ve derinlik. Daha önceki derslerde ilk iki boyutu gördük. Bu derste, farklı unsurların nasıl katman haline geldiğini göreceğiz. Kısacası, z-index ögelerin üst üste olan sıralaması anlamına gelir.

137 Z-index ile katman katman #onlu { position: absolute; left: 100px; top: 100px; z-index: 1; } #vale { position: absolute; left: 115px; top: 115px; z-index: 2; } #kiz { position: absolute; left: 130px; top: 130px; z-index: 3; } #papaz { position: absolute; left: 145px; top: 145px; z-index: 4; } #as { position: absolute; left: 160px; top: 160px; z-index: 5; }

138 CSS Doğrulayıcı validator/


"Web Tasarımının Temelleri Sibel Öztan" indir ppt

Benzer bir sunumlar


Google Reklamları