1 / 102

Web Tasarımı

Web Tasarımı. Web sayfasının yapısı. Web sayfası <html> etiketi ile başlar ve </html> ile biter. İki bölümden oluşur. <head> …. </head>: Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada görüntülenmez.

christmas
Download Presentation

Web 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. Web Tasarımı

  2. Web sayfasının yapısı Web sayfası <html> etiketi ile başlar ve </html> ile biter. İki bölümden oluşur. <head> …. </head>: Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada görüntülenmez. Örneğin; <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> koduyla sayfasının karakter kodlamasının hangi dil ile olacağını belirtmiş oluruz. (“iso-8859-9” ve “windows-1254” sayfanın Türkçe karakterlerle görüntüleneceğini belirtir.) <title>…</title> etiketi de web tarayıcısının başlık çubuğunda görüntülenecek metni belirler. <meta name="author" content="Hazırlayan"> Sayfayı hazırlayan veya sahibi olan kişi veya kuruluşu belirtir. <body>…</body>: Sayfada görüntülenecek metin, resim, tablo vb. nesnelerin bulunduğu bölümdür.

  3. Basit bir web sayfasının görünümü şöyledir: <html> <head> …. (Sayfayı tanımlayan kodlar.) </head> <body> … (Sayfanın içeriği: metin, resim vb.) </body> </html>

  4. HTML HTML HyperText Markup Language kelimelerinin ilk harflerinden oluşur. Hipermetin İşaretleme Dili diye Türkçeleştirilebilir. HTML de web tarayıcısına tag (etiket) denilen komutlarla istekler bildirilir. Etiketlerle verilen komutlar web tarayıcısı tarafından yorumlanır ve görüntü oluşturulur. Etiketlerin yapısı şöyledir: <etiket özellik1(Parametre1)= "değer" özellik2="değer" özellik3="değer">… </etiket> Etiketler genelde <etiket …> şeklinde açılıp </etiket> şeklinde kapatılır. Ancak kapatılmayan etiketler de vardır. Etiketleri bir örnekle açıklayacak olursak: <otomobil marka="tofaş" model="dogan" uretim_tarihi="2003" renk="beyaz"> Bunlarla “2003 yılında üretilmiş, doğan model beyaz renkli tofaş bir otomobil istiyorum” demiş oluruz. Gerçek bir örnek verecek olursak: < font face="verdana" size="4" color="red" align="center">Paragrafın içerdiği metin</font> Bu kodlarla da şunu demiş oluruz: “Yazacağım metnin yazıtipi verdana , boyutu 4, rengi kırmızı olsun ve ortaya hizalansın.”

  5. Başlıca HTML etiketleri

  6. Örnek Uygulamalar

  7. Metin Biçimlendirme

  8. Liste Oluşturma Yukarıdaki listeyi oluşturmak için aşağıdaki kodlar yazılmalıdır. Yukarıdaki kodlarda <ol> sıralı, <ul> sırasız bir liste oluşturulacağını belirtir. “type” parametresi ise oluşturulacak listedeki liste belirtecinin ne olacağını (a, A, i, I, kare, içi dolu daire, içi boş daire vb.) belirler.  <li> listeye öğeler ekler.)

  9. Tablo Oluşturma Bir haftalık ders programı hazırlayacağımızı varsayalım. Tablomuzda 6 sütun ve 7 satır bulunmaktadır. 

  10. Sırasıyla şunlar yapılmalıdır: <table> yazarak bir tablo oluşturulacağı belirtilir. <tr> ile birinci satır oluşturulur. <td> ile birinci hücre oluşturulur ve </td> ile kapatılır. Yukarıdaki tabloya bakarsak her satırda altı hücre olduğu görülür. Bu nedenle yine aynı şekilde diğer 5 hücre oluşturulur. (Tablonun doğru görüntülenebilmesi için hücreler boş bırakılacak olsa bile boşlukla doldurulmalıdır. Boşluğun karşılığı ise “&nbsp;” dir.) Birinci satır bittiğinden </tr> ile kapatılır. Bu durumda görünüm şöyle olur:

  11. 2, 3 ve 4. maddedekiler altı defa tekrarlanarak diğer satırlar oluşturulur. • Tablo </table> ile kapatılır. • Artık içlerini doldurabiliriz. İlk satırın 2-6 arası hücrelere günleri yazabiliriz. 2-7 arası satırların ilk hücrelerine de sayıları yazalım. • Görünümün yukarıdaki örnek gibi olması için tablonun özellikleri üzerinde değişiklik yapmamız gerekir. <table border="1" bordercolor="black" cellspacing="0" cellpadding="0" width="500"> diyerek tabloya siyah renkli kenar çizgisi verelim. Hücre çizgileri arasındaki boşluk 0, hücre ile içindeki nesneler arasındaki boşluk da 1 olsun. Genişliğini de 500 piksel olarak belirtelim. • Hücreler için genişlik belirtmediğimizden sütunların genişlikleri farklı görünecektir. “Width” etiketiyle hücrelere uygun genişlikleri verdiğimizde istediğimiz görüntüye ulaşabiliriz.

  12. Resim Ekleme • "images" klasörü içerisinde resim1.jpg adlı dosyayı sayfamıza eklemek istediğimizi varsayalım. Bunun için aşağıdaki kod yazılmalıdır: • <img src="images/resim1.jpg" width="200" height="150" hspace="10" vspace="10" border="2" align="left"> • (Yukarıdaki kodda “src” klasörün adresini, “width” genişliğini,  “height” yüksekliğini, “hspace” resim ile çevresindeki nesneler arasında bırakılacak yatay boşluğu, “vspace” resim ile çevresindeki nesneler arasında bırakılacak dikey boşluğu, “border” resme verilecek kenar çizgisinin kalınlığını, “align” resmin sayfada hizalanacağı konumu belirtmektedir.)

  13. Sonuç:

  14. Çerçeve Oluşturma Yukarıdaki görüntüyü oluşturmak için aşağıdaki kodlar kullanılmalıdır:

  15. CSS • CSS web sayfasını biçimlendirmede HTML den daha geniş imkânlar sunar. Örneğin div etiketiyle bir katman oluşturabiliriz ama hizalama dışında başka bir özelliğini değiştiremeyiz. Ancak CSS ile katmanın sayfa içindeki konumu, arka plan rengi, kenarlık tipi, yazı rengi, kanlınlığı vb. pek çok özelliğini belirleyebiliriz.

  16. CSS kullanım şekilleri • Style komutlarını üç yerde tutabiliriz: • Ayrı bir metin dosyası olarak: Bu durumda head bölümüne CSS dosyasına bağlantı kurulur. (<link type="text/css" rel="stylesheet" href="style_dosyasi.css"> gibi) • CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek:<html><head><style>P {font-family:arial; font-size:12px;}</style></head>.... • CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek:<p style="font-family:arial; font-size:12px;font-color:black;">...</p>

  17. Style komutları sadece bir yerde kullanılacaksa doğrudan etiket içinde kullanılması uygun olur. Ancak pek çok yerde aynı style özellikleri kullanılacaksa, tekrardan kaçınmak için şu metodlar kullanılabilir. • Sınıf (class) tanımlanabilir: Style dosyasında etiket isminden ve . dan sonra sınıf adı yazılır ve {} işaretleri arasına style komutları yazılır. span.vurgulu {color:red; background-color:yellow;}Sayfa içinde kullanımı da aşağıdaki gibi olur:<p>Cümlede <span class="vurgulu">burası</span> çok önemli.</p>Görünüm aşağıdaki gibi olur.

  18. id tanımlanabilir: Yukarıdaki gibidir. Ancak . yerine # kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez.#vurgulu {color:red; background-color:yellow;}<p>Cümlede <span id="vurgulu">burası</span> çok önemli.</p> • Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak id ve class kullanmadan doğrudan etiketi yazabiliriz.b {font-family: arial; font-size: 9pt; font-weight: bold; color: blue;} Bu durumda bütün <b></b> etiketi içerisindeki metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi mavi olacaktır.

  19. Başlıca CSS Komutları

  20. Örnek Uygulamalar

  21. Alt çizgisi olmayan linkler

  22. Katman

  23. AÇIKLAMA: Burada: • Position: Katmanın yerinin neye göre belirleneceğini (absolute, pencere esas alınarak belirlensin), • Top: Pencereye göre kaç piksel aşağıda olacağını, • Left: Pencereye göre kaç piksel solda olacağını, • Width: Katmanın genişliğini, • Height: Katmanın yüksekliğini, • Background-color: Arkaplan rengini, • Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli kalsın, gösterilmesin), • Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1. katmana 1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir), • Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında bırakılacak boşluğu, • Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini belirtmektedir.

  24. Liste

  25. AÇIKLAMA: • "list-style-image" parametresi listeye HTML ile veremeyeceğimiz bir özellik kazandırmakta ve liste simgesi olarak bir resmi kullanmamızı sağlamaktadır. "list-style" parametresi için verilebilecek alternatif değerler ise şunlardır: • disc (Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.) • circle (Liste biçiminin çember şeklinde olmasını sağlar.) • square (Liste biçiminin kare olmasını sağlar.) • decimal (Liste biçiminin rakamlardan oluşmasını sağlar.) • lower-roman (Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.) • upper-roman (Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.) • lower-alpha (Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.) • upper-alpha (Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.) • none (Listenin simgesiz olmasını sağlar.)

  26. WEB PROGRAMLAMA DİLLERİ • İnternette yaygın olarak kullanılan iki dil vardır. Javascript ve VBScript. • Bunların kullanım alanları da ikiye ayrılabilir: İstemci üzerinde veya sunucu üzerinde çalışmaları. • İstemci üzerinde çalıştığında kodlar genelde sayfanın <head> bölümüne <script></script> etiketleri içine yazılır. • Sunucu üzerinde çalışmaları ise ASP veya PHP ile olabilir. Örneğin ASP de script kodları <% … %> işaretleri arasına yazılır ve sunucu tarafında çalışarak sonucu sayfa üzerinde istemciye ulaştırır.

  27. WEB TASARIM PROGRAMLARI Web tasarım programları görsel ve kod tabanlı olarak ayrılabilir. GÖRSEL: WYSIWYG (What you see is what you get / Ne görürseniz onu alırsınız) olarak nitelendirilen bu tür programlarda kullanıcı kendisi HTML kodu yazmaz, sayfa web browser’daki gibi görüntülenir, kullanıcılar Word’de yazı yazar gibi sayfayı oluştururlar, HTML kodları program tarafından oluşturulur. Bu tür programlara Microsoft Frontpage, Macromedia Dreamweaver vs. örnek verilebilir. (Bu programlar çoğu zaman kod tabanlı programların yeteneklerine de sahip olabilir.)

  28. FrontPage Dreamweaver

  29. KOD TABANLI: Kullanıcının kod yazarak sayfayı oluşturduğu programlardır. Macromedia HomeSite, HotDog Pro vb. Bu tür programlar genelde PHP, ASP, VBScript gibi dilleri otomatik tanırlar ve kod tamamlamayı önerme özelliklerine sahiptirler.

  30. Hotdog Professional Homesite

  31. DREAMWEAVER

  32. Site tanımlamak • Site menüsünden New site'ye tıklanır. • Site name başlıklı metin kutusuna sitenin adı yazılır. • Local root folder başlıklı metin kutusuna sitenin yolu yazılır. (Bunun için simgesi kullanılabilir.) • Default images folder başlıklı metin kutusuna resimlerin konulacağı klasör yazılır. • İsteğe bağlı olarak da diğer bölümler doldurulabilir. Bundan sonra oluşturduğumuz her sayfa varsayılan olarak buraya kaydedilir.

  33. Sitenin bulunuduğu klasörün dizin yapısını Window / Files (F8) menüsüne tıklayarak görebiliriz. Böylece istediğimiz dosyaya kolayca ulaşabilir, internete göndermeyi kolaylaştırabilirsiniz. • Yeni dosya oluşturmayı da Dosya / New menüsünden veya site haritasına sağ tuş / New File menüsüne tıklayarak yapabiliriz. • NOT: • Dosyalara isim verirken aşağıdakilere dikkat edilmelidir: • Dosyanın adı ve uzantısı küçük harflerden oluşmalı ve link verirken aynen, olduğu gibi yazılmalıdır. (resim.jpg ile resim.JPG linux server'lar için farklı dosyalardır ve olduğundan farklı yazıldığında doğru görüntülenmez.) • Türkçe karakterler kullanılmamalıdır. (ı, İ, ş, ç, ğ, ö, ü) • Kelimeler arasında boşluk birakılmamalıdır. (Boşlukların alt tire ile doldurulması gelenek halini almıştır. "resim adi.jpg" yerine "resim_adi.jpg" yazılabilir.)

  34. Dökuman özelliklerini ayarlamak Oluşturulan sayfanın özelliklerini değiştirmek için Modify/Page Properties (Ctrl+J) kullanılabilir.

  35. Appearance bölümünde şu özellikleri değiştirebiliriz: • Page Font: Sayfada kullanılacak yazıtipi. • Size: Yazının boyutu. • Text Color: Yazı rengi. • Background color: Arkaplan rengi. • Background image: Arkaplana yerleştirilecek resim. • Repeat: Arkaplan resminin hangi yönde tekrarlanacağı. • Left Margin: Sayfa içindeki nesnelerin sol kenara uzaklığı. • Right Margin: Sayfa içindeki nesnelerin sağl kenara uzaklığı. • Top Margin: Sayfa içindeki nesnelerin üst kenara uzaklığı. • Bottom Margin: Sayfa içindeki nesnelerin alt kenara uzaklığı.

  36. Links bölümünde şu özellikleri değiştirebiliriz: Link font: Sayfadaki köprülerin yazıtipi. Size: Sayfadaki köprülerin yazı boyutu. Link color: Sayfadaki köprülerin rengi. Rollover links: Fare ile üzerine gelindiğinde köprünün yazı rengi. Visited links: Ziyaret edilen sayfaları ait köprünün yazı rengi. Active links: Üzerine tıklandığında köprünün yazı rengi. Underline style: Köprünün alt çizgisinin olup olmayacağı.

  37. Headings bölümünde başlıkların yazıtipi, boyut ve renkleri belirlenir.

  38. Title/Encoding bölümünde şu özellikleri değiştirebiliriz: • Title: Sayfanın başlık çubuğunda görüntelecek metin. • Document Type: Belge türü. • Encoding: Dil kodlaması.

More Related