Web Geliştirme Eğitimi Dersleri, 003

Folder / File Yapısı

Amacımız, dosya isimleri, dizin isimleri, dosya türlerini düzgün ve anlaşılır bir şekilde oluşturmak. Style-sheet’leri ( CSS ), Javascript’leri, resimleri, html’leri ve varsa diğer script dosyalarını ( asp, php vs... ) düzenli bir şekilde saklamak.

1. css
2.  default.css
3. files
4. images
5.  backgrounds
6.   body.gif
7.  clip-arts
8.   clown-01.gif
9.  icons
10.   loading.gif
11.   warning.gif
12. js
13.  default.js
14. pages
15.  about
16.   index.html
17.  news
18.   index.html
19. index.html

“BLOCK-LEVEL” Elementler

İçinde bulunduğu elemente göre boyunu otomatik olarak 100% yapan ( width ) elementler.

“IN-LINE” Elementler

width’i olmayan, bulunduğu yeri bozmayan elementler.

Tasarım ( Design ) , HTML ( Code ) ve Mizampaj ( Layout ) Ayrılması

• CSS’ler ayrı dosyalardan include edilecek!
• Javascript’ler ayrı dosyalardan include edilecek!
• Sunucu tarafındaki yazılım ( asp, php, .net vs... ) sadece “pure / plain” ( düz ) html üretecek.
• IN-LINE CSS yada Javascript“’”den kaçınılacak!
• Tüm projede, kod ( html yada dinamik ) ve tasarım ( CSS ) ayrı ayrı duracak!

Gerekli Yazılımlar

Web Development ( Web Geliştirme ) için başvuracağımız faydalı yazılımlar.

• Firefox
• HTML Validator Eklentisi
• Firebug Eklentisi
• Web Developer Eklentisi

D.O.M : “Document Object Modelling” - Minimal Bakış

• HTML aslında XML NODE’lardan oluşur.
• NODE’lar birbiriyle organik bir şekilde bağlıdır. ( firstChild, lastChild, parent, child, sibling gibi... )
• Javascript ile document.element nesnesinden istediğimiz her elemente ulaşabilir, modifiye edebilir, yeni elementler oluşturabilir / yok edebiliriz.

Koleksiyonlar ( Objeler )

• document.images
• document.forms
• document.links
• document.anchors
• document.styleSheets
• document.plugins
• document.applets

document.FORM_NAME.FORM_ELEMENT_NAME

1. <form name="testForm" action="#">
2.  <input type="text" name="user_name"/>
3. </form>

1. var formObject = document.testForm;
2. alert( formObject.user_name.value );

Detaylı bilgiler ileriki derslerde...

ID ve CLASS Tanımı

• id, unique ( tekil ) olan elementler için kullanılır. Aynı id’ye sahip birden fazla element OLAMAZ!
• class birden fazla olandır. Birbirlerinden özellikleri miras alabilirler. ( inheritance )

1. <div id="boxes">
2.  <div class="box">
3.   <p>Kutu 1</p>
4.  </div>
5.  <div class="box">
6.   <p>Kutu 1</p>
7.  </div>
8. </div>

PATH Tanımlamaları

ABSOLUTE

Sunucu üzerinden çalışan uygulamalar için kullanılır. / = Root anlamındadır.

1. <a href="/">Ana Sayfa</a> <!-- Path = root -->
2. <a href="/about-us/">Hakkımızda</a> <!-- Path = root’un altındaki about-us dizini -->
3. <img src="/photos/private/vigo.jpg" alt="Resim"/> <!-- Path = root’un altındaki photos’un altındaki private’ın altındaki vigo.jpg dosyası -->

RELATIVE

Göreceli tanımlama. Genelde lokal çalışmalarda kullanılır. İstenirse sunucu tarafında da kullanılabilir. Özellikle UNIX / LINUX tabanlı web uygulamalarında ( php, perl gibi ) path tanımlamaları hep relative’dir

. : Bulunduğumuz path. ( nokta )

.. : Parent ( bir üst ) path. ( yan yana iki nokta )

1. <a href=".">Ana Sayfa</a> <!-- Path = Bulunduğu yer -->
2. <a href="../about-us/">Hakkımızda</a> <!-- Path = Bulunduğu yer’in üstündeki ( parent’daki ) about-us dizini -->
3. <img src="../photos/private/vigo.jpg" alt="Resim"/> <!-- Path = Parent’daki photos’un altındaki private’ın altındaki vigo.jpg dosyası -->

** İlgili örnek yaptık!

İlk Sayfamız! ve CSS’e Giriş

shorthand’ler;

background:

• background-color:
• background-image:
• background-repeat:
• background-attachment:
• background-position: