1 / 138

Web Tasarımının Temelleri

Web Tasarımının Temelleri. Sibel Öztan s .moyano @ iku . edu.tr. Giriş. World Wide Web Consortium http://www.w3.org/ http://www.w3.org/QA/2002/04/Web-Quality .dtd document type declaration. Ders Programı. Genel Bakış HTML ( HyperText Markup Language) - XHTML

gay-everett
Download Presentation

Web Tasarımının Temelleri

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. Web TasarımınınTemelleri SibelÖztan s.moyano@iku.edu.tr

  2. Giriş • World Wide Web Consortium • http://www.w3.org/ • http://www.w3.org/QA/2002/04/Web-Quality • .dtd document type declaration

  3. DersProgramı • GenelBakış • HTML (HyperText Markup Language) - XHTML • Cascading Style Sheets (CSS), JavaScript, Web Siteleri, XML Temelleri • Site Kurmak • SayfaveİçerikHazırlamak • KodYazmak • Site Yayınlamak • İstatistikRaporları

  4. HTML - XHTML • HTML web sayfaları oluşturmak içinkullanılan etiket tabanlı bir dildir • XHTML, XML (Extensible Markup Language)kurallarınınuygulandığı 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 ( <img .../> gibi)

  5. HTML • HTML web sayfaları oluşturmak içinkullanılan etiket tabanlı bir dildir • XHTML, XML (Extensible Markup Language)kurallarınınuygulandığı 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 ( <img .../> 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 StrictThis DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML 4.01 TransitionalThis DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • HTML 4.01 FramesetThis DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  8. W3C Önergelerinde Bulunan Doctypes • XHTML 1.0 StrictThis 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.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML 1.0 TransitionalThis 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.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML 1.0 FramesetThis DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> • XHTML 1.1This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  9. HTML Etiketleri • <!--> yorum • <!DOCTYPE> • <a> • <abbr> • <acronym> • <address> • <applet> • <area> • <b> • <base> • <basefont> • <bdo> • <big> • <blockquote> • <body> • <br> • <button> • <caption> • <center> • <cite> • <code> • <col> • <colgroup> • <dd> • <del> • <dfn> • <dir> • <div> • <dl> • <dt> • <em> • <fieldset> • <font> • <form> • <frame> • <frameset> • <head> • <h1> - <h6> • <hr> • <html> • <i> • <iframe> • <img> • <input> • <ins> • <kbd> • <label> • <legend> • <li> • <link> • <map>

  10. HTML Etiketleri • <menu> • <meta> • <noframes> • <noscript> • <object> • <ol> • <optgroup> • <option> • <p> • <param> • <pre> • <q> • <s> • <samp> • <script> • <select> • <small> • <span> • <strike> • <strong> • <style> • <sub> • <sup> • <table> • <tbody> • <td> • <textarea> • <tfoot> • <th> • <thead> • <title> • <tr> • <tt> • <u> • <ul> • <var>

  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 <script type="text/javascript"> function validateFormOnSubmit(theForm) { var reason = ""; var error = ""; reason += validateAD(theForm.AD); reason += validateTELEFON(theForm.TELEFON); reason += validateEMAIL(theForm.EMAIL); if (reason != "") { alert("Bazıbilgilerdehatalarvar:\n" + reason); return false; } return true; } .... </script>

  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 • http://expression.microsoft.com/tr-tr/cc136534 • http://expression.microsoft.com/en-us/dd571513

  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 • <div> 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) verigösterimi • Tabloeklemek • Tabloyubiçimlendirmek • Apply style, valign, tabluautoformat, bg image • Hücreleribirleştirmek (modify menü) • Hücreleriayırmak • Tablonunboyutları • Tabloyuyenibirsayfadaincelemek (properties panelindentakipedilebilir) • Pixel(kesin) veyüzde (göreceli) tabanlıboyutlandırma • Mixed boyutlandırmakullanmak (table %75, td 134 pxgibi) • Browser’ıboyutlarınaparaleldeğişim • Div içerisinealmak (wrap, fixed & % width uygulamak) • CSS biçimlendirme • Table border (top-left-right) • Cell border (bottom) • Yenibir 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

  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 <h1 style=“color:red;font-family:arial”></h1> • 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; } <p class=“uyariMetni”> Bir hata oluştu!</p> • 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; } <div id=“navigationBar”></div>

  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:<body bgcolor="#FF0000"> CSS ile aynı sonucu bu şekilde elde edebiliriz: body {background-color: #FF0000;}

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

  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. <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html>

  33. Yöntem 2: İç (etiket stili) Başka bir yol, CSS kodlarını HTML <style> etiketi kullanmak suretiyle eklemektir. Örneğin: <html> <head> <title>Örnek Site</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html>

  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: <link rel="stylesheet" type="text/css" href="style/style.css" />

  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 <head> ve </ head> etiketleri arasına yani başlık bölümüne eklenmelidir. Bu gibi: <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...

  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 <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html> 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 <h1> ögesi ile işaretlenir. Aşağıdaki kod <h1> 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.<body> ö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 <body> ö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 <body> ve <h1> ögelerine uygulanmaktadır.

  43. background-color özelliği body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } <h1> ö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, http://office.microsoft.com/en-us/images/results.aspx?&ex=2&qu=butterfly#ai:MC900438041|mt:1| kullanabilir. Bir web sayfası için bir arka plan olarak kelebek resmini eklemek için, sadece <body> ö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.") ilediğ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

  49. Arka plan resmini[background-repeat] tekrarlama Örneğin, bir arka plan resminintekrarını önlemek içincss 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 resminintekrarını önlemek içincss 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; }

More Related