WEB EDİTÖRÜ 1 - FORMLAR. Öğr.Gör. Serkan KORKMAZ MART 2015

Transkript

1 WEB EDİTÖRÜ 1 - FORMLAR Öğr.Gör. Serkan KORKMAZ MART

2 GİRİŞ Sevgili Öğrenciler İnternet kullanımının hızla yaygınlaşması, web sayfalarının ve dolayısıyla sayfa tasarımının öneminin artmasına sebep olmuştur. 2

3 GİRİŞ Sevgili Öğrenciler İnternet ortamında gezinirken ziyaret etmiş olduğunuz tüm sayfalar web tasarım editörleri kullanılarak hazırlanmaktadır. Bunların kaynak kodlarına baktığınızda her birinin arkasında HTML komutlarının yer aldığını görebilirsiniz. 3

4 GİRİŞ Sevgili Öğrenciler Sayfalar içinde hayranlıkla izlediğiniz resimler, ziyaretçiler ile iletişime olanak sağlayan formlar gibi sayfada tüm elemanların kodları mutlaka vardır. 4

5 GİRİŞ Sevgili Öğrenciler Bu modülde web sayfaları içinde sıkça rastlanılan formları ve form nesnelerinin kullanımını öğreneceksiniz. 5

6 FORMLAR Formlar, Web sayfas ı tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. 6

7 FORMLAR Formlar iki yönlü olarak çalışır; Web taray ıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir. Web taray ıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar. 7

8 Bir form oluşturmak için; <form> <form> </form> etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir. 8

9 FORMLAR Genel Kullanımı, <FORM ACTION=url METHOD= get - post TARGET=pencere>.. </FORM> 9

10 Action Action, Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir. 10

11 Method Method, Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye yönlendirir. 11

12 Target Target, Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri bağlantılar konusunda da gösterdiğimiz _blank, _top gibi değerlerden biri olabilir. 12

13 <input> <input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. 13

14 Genel Kullanımı, <input> <INPUT ALIGN=tip [CHECKED] MAXLENGTH=uzunluk NAME=isim SIZE=boyut SRC=adres 14 TYPE=tip VALUE=değer>

15 <input> Align Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır. (left, center, right). Eğer type değeri bir resim olarak atanırsa bir sonraki satırın resme göre nasıl yerleştirileceğini belirler. Top, middle veya bottom değerlerinden birini alabilir. 15

16 <input> CHECKED Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar. 16

17 <input> MAXLENGTH text ve password elemanlar ında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Ön tanımlı değeri sınırsızdır. 17

18 <input> NAME Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. 18

19 <input> SIZE text ve password elemanlar ında karakter sayısını belirtmek için kullanılır. Diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. 19

20 <input> SRC "image" elemanında resim dosyasını belirtmek için kullanılır. 20

21 <input> TYPE Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. 21

22 Form Nesneleri CheckBox Formumuza onay kutuları eklemek için kullanılır. 22

23 Form Nesneleri <HTML> <body > <FORM ACTION=' METHOD=POST> <input type="checkbox" name="kutu1" checked="on"> HTML<br> <input type="checkbox" name="kutu2"> PHP<br> <input type="checkbox" name="kutu3"> MySQL </FORM> </body> </HTML> 23

24 24 Form Nesneleri

25 Form Nesneleri Radio Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine atanmalıdır. 25

26 Form Nesneleri 26 <HTML> <body > <FORM ACTION= form1.html' METHOD=POST> <input type="radio" name="kutu" value="1"> HTML<br> <input type="radio" name="kutu" value="2"> PHP<br> <input type="radio" name="kutu" value="3">mysql </FORM> </body> </HTML>

28 Form Nesneleri Text Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu kontrolle birlikte kullanılabilir. 28

29 Form Nesneleri Adı: <input type="text" name= adi"><br> Soyadı: <input type="text" name= soyadi"> 29

30 Form Nesneleri Image Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu URL'yi göstermelidir. 30

31 Form Nesneleri Password Formumuza parola yazılabilecek alan eklemek için kullanılır. text elemanından farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilir. Bu * işareti de olabilir. 31

32 Form Nesneleri Kullanıcı: <input type="text" name="username"><br> Parola: <input type="password" name="password"> 32

33 Form Nesneleri <HTML> <HEAD> <TITLE>Formlar</TITLE> </HEAD> <BODY> <FORM ACTION="form.html" METHOD="GET"> Adınız: <INPUT TYPE="TEXT" NAME="adi"><br> Soyadınız: <INPUT TYPE="TEXT" NAME="soyadi"><br> 33 </FORM> </BODY> </HTML>

34 34 text

35 Form Nesneleri Textarea Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır. 35

36 <HTML> <HEAD> <TITLE>Textarea</TITLE> </HEAD> <BODY> textarea <FORM ACTION="form.html" METHOD="GET"> Yorumlar: <br> <textarea NAME="yorumlar" rows="6 cols="40"></textarea><br> </FORM> </BODY> </HTML> 36

37 37 textarea

38 Form Nesneleri Reset Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar. 38

39 Form Nesneleri Submit Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir. 39

40 <HTML> <HEAD> <TITLE>Textarea</TITLE> </HEAD> <BODY> reset & submit <FORM ACTION="form.html" METHOD="GET"> Yorumlar: <br> <textarea NAME="yorumlar" rows="6 cols="40"></textarea><br> <INPUT TYPE="SUBMIT" VALUE="Gönder"> <INPUT TYPE="RESET" VALUE="Vazgeç "> </FORM> </BODY> </HTML> 40

41 41 textarea

42 select option Form Nesneleri Çok fazla seçenek gerektiren durumlarda menü diğer adıyla açılır liste kullanmalısınız. Bir menü gereken tüm seçenekleri içerebilir ve formda çok az yer kaplar. Bir menü yaratmak için çift taraflı bir <select> etiketiyle başlanır. Bu etiket içine her seçenek kendi <option> etiketinin içinde olacak şekilde yerleştirilir. 42 Eğer <option> tagında selected parametresi kullanılmışsa form ekrana görüntülendiğinde bu seçenek, seçili (varsayılan) olarak görüntülenmesi demektir.

43 select option Form Nesneleri Bir menü istediğimiz uzunlukta olabilir. size bağımsız değişkeni açılır liste oluşturan değer olan 1 e ayarlanmıştır. Size değişkeninin değerini artırırsanız, liste kutusu oluşturursunuz. Oluşturduğunuz listenin uzunluğundan daha fazla seçenek varsa, kutunun hemen sağında bir kaydırma çubuğu görünür. 43

44 Form Nesneleri select option Renkler: <select name="renkler" size="1"> <option>kırmızı</option> <option>mavi</option> <option>sarı</option> 44

45 45 select option

46 Form Nesneleri select option <p>renkler: <select name="renkler" size="4"> <option>mavi</option> <option>kırmızı</option> <option>sarı</option> <option>yeşil</option> </select> </p> 46

47 47 select option

48 Form Nesneleri select optgroup Menü seçenekleri kategoriler halindeyse seçenekleri kısımlara bölmek isteyebiliriz. 48

49 Form Nesneleri Bir menüyü yukarıdaki gibi biçimlendirmek için seçenek gruplarını <optiongroup> etiketleri içine alırız. 49 Her seçenek grubu için başlık belirleyen bir label bağımsız değişkeni ekleriz.

50 50 <FORM ACTION="form.html" METHOD="GET"> <p>yazıcı Modelini Seçiniz: <select name="yazicilar" size="1"> <optgroup label="inkjet"> <option>superjet 1400</option> <option>superjet 1405</option> <option>superjet 1405 Plus</option> </optgroup> <optgroup label="lazer"> <option>superlaser Value Edition</option> <option>superlaser Pro</option> <option>superlaser Plus</option> </optgroup> </select> </p> </FORM>

52 52

53 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 1. Aşağıdakilerden hangisi elemanın form üzerinde nasıl hizalanacağını belirtmek için kullanılır? A size B type C src D align 53

54 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 2. Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanıyan form nesnesi hangisidir? A radio B checkbox C text D submit 54

55 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 3. Formunuza yazı yazılabilecek alan eklemek için kullanılan form nesnesi hangisidir? A text B submit C textarea D image 55

56 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 4. Bir forma personel adını vermek için hangi HTML satırı kullanılır? A <form title=personel> B <form name=personel> C <form name id=personel> D <form id=personel> 56

57 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 5. Hangisi form üzerinde bir onay kutusu (checkbox) oluşturmayı sağlar. A <input type="click"> B <input type="check"> C <input type="confirm"> D <input type="checkbox"> 57

58 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 6. Hangisi bir resim linkidir? A <img src="c:\resim\araba.jpg"> B <image href="c:\resim\araba.jpg"> C <image src="c:\resim\araba.jpg"> D <a src="c:\resim\araba.jpg"> 58

59 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 7. Hangi tür HTML düğmesi tıklandığında form içeriğini temizler? A reset B submit C send D call 59

60 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 8. Hangi tür HTML düğmesi tıklandığında form içeriğini sunucuya gönderir? A reset B submit C send D call 60

61 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 9. Aşağıdaki form elemanlarından hangisi input type larından değildir? A password B text C textarea D select 61

62 Web Editörü h1 {font-size:13pt; color:green} h2 {font-size:20pt; color:blue} h3 {font-size:15pt; color:red} Stil Şablonları (CSS) Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu 1

63 GİRİŞ Sevgili Öğrenciler Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. 2

64 GİRİŞ Sevgili Öğrenciler Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız. 3

65 GİRİŞ Sevgili Öğrenciler Bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz. 4

66 GİRİŞ Sevgili Öğrenciler Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz. 5

67 GİRİŞ Stil Şablonları (CSS Cascading Style Sheets) Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir. 6

68 GİRİŞ Stil Şablonları (CSS Cascading Style Sheets) Sayfalarınız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. 7

69 GİRİŞ Stil Şablonları (CSS Cascading Style Sheets) CSS kodları HTML kodlarının içine yazılır. 8

70 GİRİŞ Stil Şablonları (CSS Cascading Style Sheets) Türüne göre body veya head bölümlerinde yer alabilir. 9

71 GİRİŞ Stil Şablonları (CSS Cascading Style Sheets) Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilir. 10

72 CSS Komut Yapısı Bir stil dokümanı; <style type="text/css">..</style> ifadeleri arasına yazılır. 11

73 CSS Komut Yapısı Stil kısmı HTML dokümanının <head> </head> aralığında tanımlanır. Stil tanımlaya başlarken istenirse  işaretleri kullanılır. Bu işaretler, CSS tanımayan tarayıcıların bu kısmı geçmesini sağlar. 12

74 <html> <head> CSS <style type= text/css >  </style> </head>. </html> 13

75 CSS CSS kodu oluşturmanın en basit yolu; HTML kodlamasında olduğu gibi herhangi bir metin editöründe (Note Defteri vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin style.css ) da dahil olmak üzere CSS kodları da HTML dokümanları gibi ASCII (plain-text) formatındadır. Bu nedenle CSS kodlaması basit text editörleri yardımıyla yapılabilir. 14

76 CSS HTML ile web sayfası tasarımcılığında CSS kavramı önemli yer tutar. İyi bir tasarımcı olmanın koşullarından birisi de CSS konusunu bütün yönleriyle iyice öğrenmektir. 15

77 Bir style sheet ifadesi, CSS selektör ve bildirim olmak üzere 2 ana kısımdan oluşur. Selektör (selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS lerde hangi etiket ile ilgili işlem yapacağımızı seçmeye yarar. 16

78 CSS H1 {color:green} Selektör (Selector) Bildirim (Declaration) 17

79 CSS Bildirim (decleration) kısmı da kendi içinde özellik ve değer olarak 2 temel bileşene ayrılmaktadır. 18

80 CSS H1 {color:green} Özellik (Property) Değer (Value) 19

81 CSS Temel bileşenlerin bir araya getirilmesinde kullandığımız { } ve : şeklindeki işaretler yalın haldeki kod satırının tamamlayıcı öğeleridir. 20

82 CSS NOT: Burada önemli bir konu da; <style>... </style> etiketi arasındaki stil ifadelerinde, değer ataması yapmak için yazılan sözcükler " veya ' işaretleri ile sınırlandırılmaz. Örneğin H1 {color: "blue"} ifadesi yanlıştır. CSS2 ile kurallaşan bu hususa özen göstermek gerekmektedir. 21

83 Stil Şablonlarının Çeşitleri Stil şablonları üç çeşittir. Bunlar, Yerel CSS Genel CSS Harici CSS 22

84 Yerel Stil Şablonu Yerel stil şablonları, HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur. 23

85 Yerel Stil Şablonu <html> <head> <title>css</title> </head> <body> <h2>css Kullanımı</h2><br> <h2 style=font-size:20pt; color:blue>css Kullanımı</h2> </body> </html> 24

86 Yerel Stil Şablonu 25

87 Yerel Stil Şablonu Verilen kodları tarayıcıda çalıştırdığımızda iki tane CSS Kullanımı ifadesiyle karşılaşırız. Bunların her ikisi de h2 olmasına rağmen yazım şekilleri farklıdır. Çünkü ikinci etikete etki etmek üzere bir stil şablon eklenmiştir. 26

88 Genel Stil Şablonu HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler. 27

89 Genel Stil Şablonu <html> <head> <title>css</title> <style type="text/css">  </style> </head> <body> <h2>web Tasarımı</h2><br> <h2>web Tasarımı</h2> </body> </html> 28

90 Genel Stil Şablonu 29

91 Genel Stil Şablonu Bu örneği genel şablon kullanarak yazdık. Sonuçta her ikisi de şablonda belirttiğimiz özelliklerle görüntülendi. 30

92 Harici Stil Şablonları Global stil şablonunu, sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız. Uygularken, stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız. Fakat bu stil listesini html dosyamızın içerisinde değil de boş bir sayfaya yazarız ve css uzantılı bir şekilde kaydederiz. 31

93 Harici Stil Şablonları Ardından da html dosyamızın içerisine <head> </head> etiketleri arasına <link rel="stylesheet type="text/css" href="dosya_ismi.css"> şeklinde ekleriz. 32

94 Harici Stil Şablonları Aşağıda verilen kodları not defterine yazıp stil.css olarak kaydediniz. h1 {font-size:13pt; color:green} h2 {font-size:20pt; color:blue} h3 {font-size:15pt; color:red} 33

95 Harici Stil Şablonları Daha sonra HTML dosyasını hazırlıyoruz. 34

96 Harici Stil Şablonları <html> <head> <title>css</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <h1> Stil Şablonları </h1> <h2> Stil Şablonları </h2> <h3> Stil Şablonları </h3> </body> </html> 35

97 Harici Stil Şablonları HTML dosyasının kodları arasında geçen <link rel="stylesheet" type="text/css href="stil.css"> kodu ile harici olarak hazırladığınız stil.css dosyasındaki stil özelliklerini kullanmanızı sağlar. Aynı stilleri kullanmak istediğiniz diğer HTML dosyalarına bu satırı eklemeniz yeterlidir. Böylelikle her sayfada tek tek stil özellikleri tanımlamamış ve başlangıçta tanımladığınız stil özelliklerini kullanarak koddan tasarruf etmiş olursunuz. 36

98 Harici Stil Şablonları 37

99 <html> <head> <title>css</title> <style type="text/css">  </style> </head> <body> <p>stil Şablonları</p> </body> </html> Örnek - 1 font-family: Font tipini belirler. (Arial,Courier, Verdana ) font-weight: Fontun kalınlık incelik durumunu belirler. bold: Fontu kalın yapar. normal: Fontun normal halde olmasını sağlar. Bu özellik yazılmadığında normal özellik alınır. font-style: Fontun stilini belirler. italic: Yazının sağa doğru yatık olmasını sağlar. color: Fontun rengini belirler. 38

100 Örnek

101 Örnek - 2 text-transform : lowercase: Yazının tümünü küçük harf yapar. uppercase: Yazının tümünü büyük harf yapar. capitalize: Yazıyı istenilen şekilde bırakır. text-decoration : underline: Yazının altının çizili olmasını sağlar. overline: Yazının üstünün çizili olmasını sağlar. line-through: Yazının üzerinin çizili olmasını sağlar. none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar. text-align: left: Yazının sola bitişik olmasını sağlar. center: Yazının ortada olmasının sağlar. right: Yazının sağa bitişik olmasını sağlar. line-height: Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır. text-ident: Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır. 40

102 <html> <head> <title>css</title> <style type="text/css">  </style><head> <body> <p>stil Şablonları</p> </body> </html> Örnek

103 Örnek

104 Seçiciler (Selectors) Seçiciler bize oluşturduğumuz <h1>, <h2>... gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verir. Aynı zamanda istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, id seçicisi ve sınıf seçicisi 43

105 Id Selectors (Id Seçicileri) Id seçicilerini tanımlayıcı adlarının önündeki # işaretinden tanırız. HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır. 44

106 Id Selectors (Id Seçicileri) <html> <head><title>id seçicileri</title> <style type="text/css">  </style></head><body> <u id=idsecici>id Seçiciler</u> </body></html> 45

107 Id Selectors (Id Seçicileri) 46

108 Class Selectors (Sınıf Seçicileri) Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf seçicisinin iki türü vardır. 47

109 Class Selectors (Sınıf Seçicileri) <html> <head> <title>css</title> <style type="text/css">  </style> </head> <body> <h2 class=yesil>yeşil sınıf seçicisi ile </h2><br> <h2 class=gri>gri sınıf seçicisi ile </h2> </body> </html> 48

110 Class Selectors (Sınıf Seçicileri) 49

111 Class Selectors (Sınıf Seçicileri) Burada sınıf seçicisini sadece h2 için tanımladık. Sınıf seçicisinin ikinci türü de genel bir sınıf seçicisi tanımlamaktır. 50

112 Class Selectors (Sınıf Seçicileri) <html> <head> <title>css</title> <style type="text/css">  </style> </head> <body> <h3 class=yesil>yeşil sınıf seçicisi ile </h3> <br> <h4 class=gri>gri sınıf seçicisi ile </h4> </body> </html> 51

113 Class Selectors (Sınıf Seçicileri) 52

114 Stil Şablonlarının Genel Kullanım Şekilleri CSS i HTML üzerinde kullanmak için 3 yöntem (yerelgenel-harici) olduğunu daha önce belirtmiştik. Şimdi ise komple bir CSS dosyasını HTML üzerinde nasıl kullanacağımızı görelim. 53

115 A Etiketinin CSS ile Kullanımı Bildiğiniz üzere a etiketi HTML ye çok büyük bir özellik katan link etiketidir. Bu etiket ile diğer bir web sayfasına veya bir mail adresine gönderme yapabiliriz. Bu etiketin belli durumlarda aldığı değişik değerler vardır. Yani link tıklandığında etiket artık visited (ziyaret edilmiş) pozisyonuna geçecektir. Biz CSS yardımıyla a etiketinin aldığı pozisyonlara istediğimiz biçimi verebiliriz. 54

116 A Etiketinin CSS ile Kullanımı Şimdi a etiketinin aldığı pozisyonları görelim: İlk pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir. Visited : Link tıklandıktan sonra etiketin aldığı değerdir. Active : Linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur. Hover : Linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir. 55

117 A Etiketinin CSS ile Kullanımı <html><head><title>css</title> <style type="text/css"> <!- A.normal { background-color:white; color:blue; } A.ziyaret:visited { background-color:white; color:maroon; font-weight:normal; } 56

118 A Etiketinin CSS ile Kullanımı A.aktif:active { background-color:white; color:red; font-weight:normal; } A.degisken:hover { background-color:blue; color:white; font-weight:bold; } --> </style> </head> 57

119 A Etiketinin CSS ile Kullanımı <body> <a href="#" class="normal">linkin normal durumu</a><br> <a href="#" class="ziyaret">linki tıklayın ve degiştiğini görün</a><br> <a href="#" class="aktif">linkin aktif durumu</a><br> <a href="#" class="değisken">linkin üzerine geldiğinde stil değişecek</a><br> </body> </html> 58

120 A Etiketinin CSS ile Kullanımı 59

121 CSS Bazı stil özelliklerinin sonunda gördüğünüz!important ifadesi ile ziyaretçi kendi bilgisayarındaki tarayıcı özelliklerini değiştirmiş olsa dahi bu değerleri kullanmamasını, bizim belirttiğimiz değerleri kullanmasını söylemiş oluyoruz. Font özelliklerinde çoğu zaman birden çok font ismi kullandık. Bunun nedeni eğer ziyaretçinin makinesinde ilk font yoksa ikincisi o da yoksa üçüncü font kullanılır. 60

122 CSS Bazı stil özelliklerinin sonunda gördüğünüz!important ifadesi ile ziyaretçi kendi bilgisayarındaki tarayıcı özelliklerini değiştirmiş olsa dahi bu değerleri kullanmamasını, bizim belirttiğimiz değerleri kullanmasını söylemiş oluyoruz. Font özelliklerinde çoğu zaman birden çok font ismi kullandık. Bunun nedeni eğer ziyaretçinin makinesinde ilk font yoksa ikincisi o da yoksa üçüncü font kullanılır. Şayet o font da yoksa tarayıcının kendi standart fontu kullanılır. Böylelikle bizde değişik ziyaretçi makinelerinde sayfamızın nasıl görünebileceğini öncelikle kontrol altına almış oluruz. 61

123 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 1. Stil kısmı HTML dokümanının hangi aralığında tanımlanır? A <head> </head> B <title> </title> C <body> </body> D <form> </form> 62

124 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 2. Belgenin tümünde etkili olan stil çeşidi hangisidir? A Dahili B Genel C Harici D Yerel 63

125 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 3. Sadece bir kereliğine, yazıldıkları yerde etkili olan stil çeşidi hangisidir? A Dahili B Genel C Harici D Yerel 64

126 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 4. Id seçicilerinin tanımlayıcı adlarının önünde hangi işaret tanımlanır? A # B. (nokta) C & D $ 65

127 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 5. Sınıf seçicilerinin tanımlayıcı adlarının önünde hangi işaret tanımlanır? A # B. (nokta) C & D $ 66

128 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 6. h1 {color:green} css tanımlamasında h1 ile gösterilen kısım nedir? A selector B bildirim C özellik D değer 67

129 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 7. h1 {color:green} css tanımlamasında {color:green} ile gösterilen kısım nedir? A selector B bildirim C özellik D değer 68

130 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 8. h1 {color:green} css tanımlamasında color ile gösterilen kısım nedir? A selector B bildirim C özellik D değer 69

131 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 9. h1 {color:green} css tanımlamasında green ile gösterilen kısım nedir? A selector B bildirim C özellik D değer 70

132 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 10. Css tanımlamasında yazının tümünü küçük harf yapmak için texttransform özelliğine hangi değer verilir? A B C D uppercase lowercase capitalize overline 71

133 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 11. Css tanımlamasında yazının tümünü büyük harf yapmak için texttransform özelliğine hangi değer verilir? A B C D uppercase lowercase capitalize overline 72

134 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 12. Css tanımlamasıda yazıyı değiştirmeden istenilen şekilde bırakmak için text-transform özelliğine hangi değer verilir? A B C D uppercase lowercase capitalize overline 73

135 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 13. Aşağıdakilerden hangisi başlık için tanımlanmış bir stildir? A B C D p {font-size: 20pt; color: red} u {font-size: 20pt; color: red} s {font-size: 20pt; color: red} h3 {font-size: 20pt; color: red} 74

136 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise D, yanlış ise Y yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 14. h1 {color: "blue"} şeklindeki css ifadesi geçerli bir ifadedir. ( D / Y ) 75

137 UYGULAMA FAALİYETİ İşlem Basamakları Web sayfanızda kullanacağınız ve bütün sayfalarında geçerli olacak yazının tipi, boyutu, sayfanın düzeni, rengi ile ilgili stil şablonu oluşturunuz ve kaydediniz. Hazırlamış olduğunuz stil şablonunun bazı sayfalarda belli özelliklerini değiştirerek kullanınız. Öneriler Genel stil şablonu tanımlayarak hazırlamış olduğunuz stilin tüm web sayfasında geçerli olmasını sağlayabilirsiniz. Sınıf seçicilerini kullanarak ve mevcut özellikleri koruyarak istediğiniz değişikliği yapabilirsiniz. 76

138 ÖLÇME VE DEĞERLENDİRME PERFORMANS TESTİ Bir arkadaşınızla birlikte yaptığınız uygulamayı değerlendirme ölçeğine göre değerlendirerek, eksik veya hatalı gördüğünüz davranışları tamamlayınız. 77

139 KONTROL LİSTESİ Değerlendirme Ölçütleri 1 Stil şablonlarının komut yapısını öğrendiniz mi? 2 Stil şablon çeşitlerini öğrendiniz mi? 3 Sayfanızda yerel stil şablonunu tanımladınız mı? 4 Sayfanızda genel stil şablonunu tanımladınız mı? 5 Sayfanızda harici stil şablonunu tanımladınız mı? 6 Sayfanızda Id seçicileri kullandınız mı? 7 Sayfanızda sınıf seçicileri kullandınız mı? 8 Stil şablonlarının genel kullanım şekillerini öğrendiniz mi? 78

140 Web Editörü Çoklu Ortam Araçları Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu 1

141 GİRİŞ Sevgili Öğrenciler Bir web sayfası içerisinde metin ve resimlerden daha fazlası olabilir. 2

142 GİRİŞ Sevgili Öğrenciler HTML de video ve ses klipleri gibi çeşitli çoklu ortam içerikleri kullanılabilir. 3

143 GİRİŞ Sevgili Öğrenciler HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için mükemmel bir ortamdır. 4

144 GİRİŞ Sevgili Öğrenciler Ses ve video görüntülerinin HTML sayfalarında kullanılabilmesi bu ortamı daha da çekici bir konuma getirir. 5

145 GİRİŞ Sevgili Öğrenciler Ses ve video dosyaları çok yer kapladığından ve internet bağlantısının yavaş olduğu durumlarda indirilmesi çok zaman aldığından önceleri web tasarımcıları çoklu ortam web içerikleri kullanmaktan kaçınmışlardır. 6

146 GİRİŞ Sevgili Öğrenciler Geniş bantlı kullanımı olmayan ve aradıkları bilgiye çabuk ulaşmak isteyen ve hemen ulaşamayan ziyaretçiler siteyi gezerken sıkılıp siteden çıkarlar. 7

147 GİRİŞ Sevgili Öğrenciler Ancak geniş bantlı kullanım yaygınlaştıkça web tasarımcıları da bu tür içerikleri kullanmayı tercih etmeye başlamışlardır. 8

148 GİRİŞ Sevgili Öğrenciler Bu bölümde bir web sayfasına ses ve video eklemenin çeşitli yöntemleri anlatılacaktır. 9

149 GİRİŞ Sevgili Öğrenciler Bu bölümde çoklu ortam içeriklerini planlamayı,web sitenize ses ve video klipler eklemeyi ve onlara bağlantı eklemeyi öğreneceksiniz. 10

150 Ses ve Video Kullanımını Planlamak Bazı sitelerde ses ve video kliplerinin diğerlerinden daha iyi olduklarını fark etmişinizdir. Bir ses veya video klipinin bir web sitesinde gerekli veya gereksiz olacağına karar verirken aşağıdaki hususlara dikkat edilmesi gerekir. 11

151 Ses ve Video Kullanımını Planlamak Yapın Ziyaretçilerin ses veya videoyu kontrol edebilmesini sağlayın. Klipleri iyi bilinen ve genelde desteklenen dosya biçimlerinde oluşturun. Windows un desteklemediği bir dosya biçimini kullanıyorsanız bu dosya biçimini çalıştıracak programın indirilebildiği bir siteye bağlanan bir köprü oluşturun. Dosya boyutu ve kalitesi arasında uygun bir denge kurun. Çoklu ortam olmayan bir alternatif sağlayın veya en azından klipin ne tür bir içeriğinin olduğunu gösteren bir ekran ipucu hazırlayın. Yapmayın Ses dosyalarını sayfa yüklendiğinde otomatik olarak açılacak şekilde ayarlamayın. Klipleri çoğu tarayıcının desteklemediği tanınmamış dosya biçimlerinde oluşturmayın. Herkeste sizdeki dosya türlerini destekleyecek tarayıcılar olmadığını unutmayın. Dosya boyutunu indirilmesinin uzun sürmemesi için çok büyük ayarlamayın. Gerekli bilgileri sadece klipte vermeyin. 12

152 Kliplerin Görüntülenmesini Sağlamak Bir web sayfasına ses veya video klipleri koymanın çeşitli yöntemleri vardır. 13

153 Kliplerin Görüntülenmesini Sağlamak Çevrimiçi ortam (inline media); Ses veya video klipleri ziyaretçilerin sayfada bir düğmeyi tıkladığında oynayacak şekilde sayfanın içine eklenebilir. Bunun için ziyaretçinin tarayıcısının klip dosyasının türünü desteklemesi veya destekleyen bir program indirmesi gerekir. Bunun için Internet Explorer 5.5 veya üstü sürümler kullanan ziyaretçiler için <object> etiketi kullanılır. Diğer sürümler için <embed> etiketi kullanılır. 14

154 Kliplerin Görüntülenmesini Sağlamak Harici ortam (External media); Ses veya video klipler ziyaretçi bir köprüyü tıkladığında Windows Media Player gibi harici bir uygulamada oynayacak şekilde bağlanılabilir. Bunun için ziyaretçilerin klip dosyasının türünü destekleyen bir harici uygulamasının olması veya destekleyen bir program indirmesi gerekir. Bu yöntemin yararı tüm tarayıcılarda aynı şekilde işlemesidir. Tıpkı diğer köprülerde olduğu gibi bağlantı için <a> etiketi kullanılır. 15

155 Kliplerin Görüntülenmesini Sağlamak Arka plan sesi (background sound); Sayfa yüklendiğinde otomatik olarak oynamaya başlayan ses klipidir. Sadece Internet Explorer kullanan ziyaretçilerin tarayıcılarında çalışır. Bunun için <bgsound> etiketi kullanılır. Ziyaretçi sesi kontrol edemez be başlamasını durduramaz. Sesi kapatamamanın rahatsızlık verici olduğu durumlar olabilir. 16

156 Kliplerin Görüntülenmesini Sağlamak Akıcı ses veya video (streaming audio or video); Ses veya video kliplerini ziyaretçilerin bilgisayarına aşamalı olarak aktarılacak şekilde ayarlayabilirsiniz. Örneğin, ziyaretçinin bilgisayarına klipin 30 saniyelik kısmı yüklendikten sonra klip oynamaya başlar ve oynarken klipin aktarımı devam eder. Bu bölümde bu tür kliplere değinilmemiştir. Gerekli yazılımlar ve sunucular olmadan ayarlanmaları zordur. 17

157 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Hangi yöntemle klipi sunacağımıza karar verdikten sonra sıra hangi biçimin kullanılacağına karar vermeye gelir. Tüm biçimler aynı değildir. Dosya boyutu ve, görüntü ve ses kalitesi, popülerlik bakımından farklılık gösterirler. Popülerlik çok önemlidir. Çünkü genelde ziyaretçilerin bilgisayarında popüler olan klip biçimlerini oynatacak yazılımlar bulunur. 18

158 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Bir bilgisayar bir ses veya video dosyasının biçimini iki yolla destekler. Tarayıcısında bir eklenti veya ayrıca bir oynatıcı vardır. Eklenti (plug-in) tarayıcının web sayfasının içeriğini açmasını sağlayan yardımcı dosyadır. Oynatıcı (player) ise klipi ayrı bir pencerede açan harici bir programdır. 19

159 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Biçim Artıları Eksileri Oynatıcı WAV(ses) Neredeyse tüm tarayıcılar tarafından desteklenmesi, kalitesi Dosya boyutunun büyüklüğü; bu yüzden sadece küçük klip dosyaları veya akış Tarayıcı eklentisi veya Windows Media Player En Uygun Olduğu Ses efektleri gibi küçük dosyalar 20

160 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Biçim Artıları Eksileri Oynatıcı En Uygun Olduğu MIDI (ses) Neredeyse tüm tarayıcılar tarafından desteklenmesi; dosya boyutunun küçüklüğü Bilgisayar tarafından oluşturulmuş müzik olması; yapay ses olması Tarayıcı eklentisi veya Windows Media Player Arka plan müziği veya elektronik klavye ile bestelediğimiz müzikler 21

161 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Biçim Artıları Eksileri Oynatıcı MP3 (ses) İndirilebilir müzik klipleri dağıtmak için en popüler biçim olması; dosya boyutunun küçüklüğü Çoğu tarayıcı tarafından desteklenmediği için ziyaretçilerin başka bir oynatıcıya ihtiyaç duyması Windows Media Player veya diğer MP3 çalabilen müzik oynatıcıları En Uygun Olduğu İndirilebilen müzik kipleri 22

162 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Biçim Artıları Eksileri Oynatıcı AVI (video) Video dağıtımı için popüler bir biçim olması, Windows Media Player ile de oynatılabilir olması İşletim sistemi Windows olmayan ziyaretçilerin ayrı bir oynatıcı indirmek zorunda kalmaları Windows Media Player En Uygun Olduğu İndirilebilir video 23

163 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Biçim Artıları Eksileri Oynatıcı WMV (video) Video için popüler biçim olması; Windows Media Player ile oynatılabilir olması; varsayılan biçimin Windows Movie Maker ile oluşturulması İşletim sistemi Windows olmayan ziyaretçilerin daha önceden bir oynatıcı yükleme olasılıklarının az olması Windows Media Player En Uygun Olduğu İndirilebilir video 24

164 Sık Kullanılan Klip Biçimleri ve Oynatıcıları Not Biçimler arası geçiş için farklı kaydet özellikleri olan çok sayıda ses ve video düzenleme programı vardır. Bu yüzden klipin ilk biçiminin bir engel olmadığına dikkat edin. 25

165 Dosya boyutunu ve kalitesini düzenlemek Bir video klipinde boyut sözcüğünün iki anlamı vardır: Dosya boyutu ve görüntü boyutu (yatayda ve dikeydeki piksel sayısı) Bu iki etken doğru orantılıdır. Büyük görüntü boyutu için büyük dosya boyutu. Web sayfasındaki bir klipin tüm ekranı kaplamasına gerek yoktur. 2 veya 3 inçlik bir pencere yeterli olur. 26

166 Dosya boyutunu ve kalitesini düzenlemek Dosya boyutu üzerindeki tek etken görüntü boyutu değildir. Bazı dosya biçimleri çeşitli derecelerde sıkıştırma (compression) uygulayarak dosya boyutunu küçültebilir. Bir video klipi içindeki fazladan boşlukları kaldırmak için kullanılan bir dizi matematiksel formül olan sıkıştırma algoritması ile sıkıştırılır. Sıkıştırılmış bir klipi oynatmak için uygun codec (compression / decompression kısaltılması) gerekir. Codec ortam oynatıcı (media player) programıyla birlikte çalışan bir yardımcı dosyadır. Bir video klipi oynatmak için sadece uygun oynatıcı yetmez, oynatıcıda uygun codec olması da gerekir. 27

167 Dosya boyutunu ve kalitesini düzenlemek Not Bir sıkıştırma algoritması veri dosyasındaki tekrarlanan karakterleri veya kalıpları belirleyerek işler. Örneğin, bir algoritma yerine 20*0 belirtir. 28

168 Ses ve video klipleri bulmak İnternette çok geniş ses ve video klip depoları vardır. Ama çoğu klipin özellikleri ihtiyaçlarınızı karşılamaz. Ses ve video kullanmaktaki temel amaç gösteriş yapmaktan çok bilgi vermek olmalıdır. Gerekli bilileri içermeyen bir klip vermek gereksizdir. Bu nedenle en yararlı ve etkili klipler kendi hazırlayacağınız kliplerdir. Örneğin, müşterilerinizi işinizi anlatan görsel bir tura çıkarabilir veya onlara işin ustalık gerektiren yerlerini gösterebilirsiniz. 29

169 Ses Araçları Ekleme Seçiminize göre geri planda WAV,.AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND etiketini kullanabilirsiniz. <BGSOUND SRC=' deneme.midi' LOOP=5> komutunu kullandığınızda deneme.mid adlı MIDI dosyası sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra duracaktır. 30

170 Ses klipine bağlantı oluşturmak Ses klipine köprü oluşturmak kullanışlı bir yoldur. Bunun için standart <a> etiketi kullanılır. Ancak burada web sayfası adı değil ses dosyası belirtilir. <p> Şirketimizin Genel Müdürü <a href= hosgeldiniz.wav > hoşgeldiniz</a> diyor. Ziyaretçi bu bağlantıyı tıkladığında bilgisayarında bu tür dosyalar için hangi program varsa ses klipi açılır. Windows sistemlerinde genelde waw dosyaları için varsayılan oynatıcı Windows Media Player dır. 31

171 Ses klipine bağlantı oluşturmak Bir ortam dosyasına bağlantı oluşturmak ziyaretçiye bir takım seçenekler sunması açısından dosyayı doğrudan eklemekten daha iyi bir tercihtir. Klipi açmayabilirler. Daha sonra açmak üzere indirebilirler. Klipi indirmek için farenin sağ düğmesiyle tıklayıp Hedefi Farklı Kaydet i seçebilirler. Web kullanıcılarının çoğu bunu yapmayı bilirler. 32

172 Ses klipine bağlantı oluşturmak Ziyaretçiler dosyayı indirmeden önce dosyanın biçimini ve boyutunu bilmek isterler. Bir bağlantı ile bu bilgileri ziyaretçilere gösterebilirsiniz. Klipin iki veya daha fazla dosya biçiminde ve kalite seviyesinde olması şu yararları sağlar. Kullanıcıların sahip oldukları oynatıcı tipine uygun biçimi seçebilmeleri İndirmek için gereken süreyi tercih etmeleri 33

173 Ses Klipi Katıştırmak Ses klipi eklemenin diğer bir yolu klipi sayfaya katıştırmaktır (embed). Bir sayfaya çoklu ortam içeriği katıştırılırsa harici bir uygulamayla değil sayfadaki bir eklenti ile oynatılır. Eklenti (plug-in) tarayıcının web sayfasının içeriğini açmasını sağlayan yardımcı dosyadır. Tarayıcılarda küçük bir eklentiler kümesi olur ama istenirse daha fazlası indirilebilir. QuickTime, Java, Flash, Shockwave ve Adobe PDF yaygın olarak bilinen ve kullanılan eklentilerdir. 34

174 Ses Klipi Katıştırmak Sayfaya ses katıştırmak için kullanılabilecek iki farklı etiket vardır. <embed> Netscape kaynaklı standart olmayan bir etikettir. HTML de resmi olarak desteklenen bir etiket değildir ama çok uzun bir süredir kullanıldığından Internet Explorer dahil çoğu tarayıcı tarafından desteklenir. <object> HTML ile uyumlu standart bir etikettir. Sadece video ve ses klipleri için değil tüm nesneleri eklemek için kullanılabilir. 35

175 <embed> Etiketini Kullanmak <embed> etiketini kullanmak için otomatik olarak autostart= ile yürütüllecek olsa da olmasa da kaynağı src= ile belirtilir. Örneğin; <embed src= hosgeldiniz.wav autostart= false /> autostart= bağımsız değişkeni kullanılmazsa klip sayfa yüklendiği zaman otomatik olarak başlar. Oynatıcı veya eklenti belirtmeye gerek yoktur. Tarayıcı klip dosyasının uzantısına göre ayarlar. 36

176 <embed> Etiketini Kullanmak Arzu edilirse ses düzeni için yükseklik (height) ve genişlik (width) belirtilebilir. Örneğin; <embed src= hosgeldiniz.wav autostart= false width= 140 height= 60 /> 37

177 <embed> Etiketini Kullanmak Not Klipler üzerinde kullanıcıların kontrolünü azaltabilirsiniz ama bundan hoşlanmayacaklardır. Kullanıcılar gerekirse sesi kapatabilmek isterler. 38

178 <embed> Etiketini Kullanmak Klipin çok kez oynatılabilmesi için loop= bağımsız değişkenini kullanabilirsiniz. loop için geçerli olan değerler; true false infinite bir tamsayı değeri 39

179 <embed> Etiketini Kullanmak Örneğin; Sonsuz defa tekrar oluşturmak için aşağıdaki gibi bir loop= değişkeni girilir. <embed src= hosgeldiniz.wav autostart= false loop= infinite /> 40

180 <embed> Etiketini Kullanmak Not infinite ve true ayarları arasında işlevsel bir fark yoktur. İkisi de sonsuz tekrar sağlar. 41

181 <object> Etiketini Kullanmak <object> etiketi, <embed> gibi özel etiketlerin yerine konabilecek ve tüm işlevlerini karşılayabilecek standart bir etiket olarak HTML de yerini almıştır. Ama kullanımı çok hızlı bir şekilde yaygınlaşmamıştır. Çünkü kodlamada kullanımı <embed> etiketinden zordur. Bazı tarayıcılar tarafından desteklenmez. 42

182 <object> Etiketini Kullanmak Sayısal kodlama veya MIME türü kodlama olarak da dosya adını belirtmek için classid= bağımsız değişkeni, nesne türünü belirtmek için type= bağımsız değişkeni kullanılır. Örneğin; <object classid= hosgeldiniz.wav type= audio/wav height= 20 width= 100 > </object> 43

183 ses klipleri için mime türü Dosya Türü AU WAV RA MID MP3 MIME türü audio/basic audio/wav audio/x-pn-realaudio audio/x-midi audio/mpeg 44

184 <object> Etiketini Kullanmak Yukarıdaki örneklerde <object> etiketi çift taraflıdır. Açılış ve kapanış etiketleri arasına klibin parametrelerini tanımlamak için <param> etiketi yerleştirilebilir. Örneğin; Klipi sadece tıklandığı zaman çalışacak (otomatik olarak açılmayacak) şekilde ayarlamak için aşağıdaki gibi bir parametre eklenir. 45

185 <object> Etiketini Kullanmak <object classid= hosgeldiniz.wav type= audio/wav height= 20 width= 100 > <param name= autostart value= no valuetype= data > </object> 46

186 <object> Etiketini Kullanmak Ortam kliplerini eklemek için <object> etiketini kullanmayı bilmenize rağmen, biraz daha deneyim kazanana kadar <embed> etiketini kullanmayı tercih edebilirsiniz. 47

187 Arka Plan Sesi Kullanmak Bir ses eklemenin en basit yolu klipi sayfaya arka plan sesi olarak yerleştirmektir. Sayfa yüklendiğinde otomatik olarak çalışır. Arka plan sesi kontrol edilemediği için kullanıcılar bu sesten rahatsız olduğu durumlarda kapatamazlar. Ayrıca arka plan sesleri sadece Internet Explorer da çalışır. Tüm bunları aklımızda bulundurarak arka plan sesinin nasıl yapıldığına bakalım. 48

188 <bgsound> etiketi ses dosyasını belirten src= bağımsız değişkeni ile birlikte kullanılır. Loop= bağımsız değişkeni ile ses klipinin kaç kez tekrarlanacağı ve volume= bağımsız değişkeni ile klipin sesi 0 dan e kadar ayarlanabilir. Örneğin; Arka Plan Sesi Kullanmak <bgsound src= hosgeldiniz.wav loop= 1 volume= 1000 /> 49

189 Video Ekleme Bir AVI veya MOV dosyasını oynatmak için ise yine sadece Explorer'da işe yarayacak DYNSRC komutunu kullanmalısınız. Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanabilirsiniz. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır. <IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE > 50

190 Video Ekleme Çoklu ortam dosyalarını Netscape'de gösterebiliriz. Fakat görsel açıdan Explorer'daki kadar başarılı olmuyor. EMBED komutuyla Netscape penceresine gömülen dosyalar beraberinde çerçeve kaydırma çubuğunu da birlikte getiriyor. Netscape için komut şöyle: <EMBED SRC=' deneme.avi' > 51

191 Web Editörü Dreamweaver Temelleri Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu 1

192 ADOBE DREAMWEAVER CS4

193 BÖLÜM 1 Dreamweaver Temelleri Dreamweaver Temelleri Başlangıç Sayfası Siteyi Geliştirmek Üzere Hazırlık Yapmak Yerel Bir Site Tanımlamak Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Dosya Adlandırma Standartları Araçlar ve Arayüz Paneller Sayfaya Başlık Atamak

194 GİRİŞ Adobe Dreamweaver CS4 Web sitelerinin oluşturulmasını, yönetilmesini, bakımının ve devamlılığını sağlanmasını mümkün kılmak için güçlü görsel tasarım araçlarıyla metin tabanlı HTML düzenleme özelliklerini bir araya getirmiştir. 4

195 GİRİŞ Dreamweaver CS4 Yazılım, acemi kullanıcıların Web sayfaları oluşturmak için gereken araçlara kolayca ulaşmasını sağlarken, elle kod yazmaya alışkın deneyimli kullanıcılara da gerektiğinde doğrudan kodla çalışma imkânı sağlar. 5

196 GİRİŞ Dreamweaver CS4 Bu esnek program, gelişmiş teknikleri erişilebilir ve kolay kullanılır hale getirir. 6

197 GİRİŞ Dreamweaver CS4 Güçlü tasarım, kod ve etkileşim özelliklerinin bir arada sunulması hem acemiler, hem de deneyimli kullanıcılar için sayısız fayda sağlar. 7

198 Dreamweaver CS4 Adobe Dreamweaver CS4, pek çok Web geliştiricisinin tercih ettiği bir araçtır. Bir yandan kolayca erişilebilir ve standartlara uygun siteler hazırlama ihtiyaçlarına karşılık verir. Diğer yandan da mevcut ve gelişmekte olan pek çok teknolojik çözümle çalışma imkânı sağlayan bir ortamda hem görsel tasarım, hem de kod düzenleme araçları sunar. 8

199 Dreamweaver CS4 Dreamweaver, üretim sürecini hızlandırır ve site yönetimi ve sitenin devamlılığını sağlamak için gereken araçları sunar. Web geliştirme yazılımları sektöründe liderdir. Web siteleri oluşturma ve bunların devamlılığını sağlama, ayrıca sürekli değişen standartlar, yeni teknolojiler ve kullanıcı ihtiyaçlarını karşılama konularındaki zorlukları aşmanıza yardımcı olmak için ihtiyaç duyduğunuz araçları sağlar. 9

200

201 Başlangıç Sayfası Dreamweaver CS4 ü açtıktan sonra bir başlangıç sayfası göreceksiniz. Bu sayfada şu araçlar bulunmaktadır: En son açılan belgelere ait hızlı bağlantılar Farklı dosya tiplerinde yeni belgeler oluşturmak için kullanabileceğiniz seçenekler Dreamweaver ile ilgili sihirbaz ve bilgiler Kaynaklar Dreamweaver Exchange Bağlantısı 11

202 12

203 Başlangıç Sayfası Yeni bir sayfa oluşturma işlemine başladığınızda veya Başlangıç Sayfası ndaki diğer seçenekleri seçtiğinizde Başlangıç Sayfası kendiliğinden kapanır. 13

204 Siteyi Geliştirmek Üzere Hazırlık Yapmak Bir Web sitesi oluşturmak için gereken ayrıntılı araştırma ve planlama aşamalarına zaman ayırmak çok önemlidir. Geliştirme için bir strateji oluşturmak daha verimli olmanıza, fikirlerinizi daha iyi ve daha ayrıntılı bir şekilde geliştirmenize ve projenizin kapsamını daha iyi anlamanıza yardım edecektir. Ayrıca zamanı ve kaynakları daha verimli kullanmanızı sağlayacaktır. İyi bir Web sitesi sezgisel olmalı ve kullanıcılara olumlu ve benzersiz bir deneyim sunmalıdır. 14

205 Siteyi Geliştirmek Üzere Hazırlık Yapmak Etkin bir Web sitesi hazırlarken işe; ilgili siteyi oluşturma nedenini tanımlama ve özetleme, rekabet analizi, akış grafiği ya da taslak hazırlama, site özelliklerinin nasıl çalışacağını yazılı olarak tanımlama, sitenin görüntüsünü ve insanlarda oluşturacağı hissi tasarlama gibi işlemlerle başlarsınız. 15

206 1. Aşama: Araştırma Herhangi bir sayfa üzerinde çalışmaya başlamadan önce; kendinize ya da müşterinize şu soruları sorun. Siteniz hangi amaçlara hizmet edecektir? Sitenizin ne gibi içerikler barındırması gerekir? 16

207 2. Aşama: Planlama ve Yapılandırma Web sitenizle ziyaretçileriniz arasındaki bağlantı, kısmen sitenizin yapısına bağlıdır. Açıklık ve kullanım kolaylığı iyi bir Web sitesi için hayati özelliklerdir. Geliştirme sürecinin bu önemli aşaması, bu derste göreceğiniz ilk konudur. 17

208 2. Aşama: Planlama ve Yapılandırma Web sitelerinin temelini site yapısı oluşturur. İyi yapılandırılmamış bir Web sitesinde dolaşmak ve böyle bir siteyi kullanmak kafa karıştırıcı ve zor olabilir. Ayrıca böyle bir sitenin devamlılığını sağlamak da pek kolay olmayabilir. Anlaşılır, iletişim sorunu olmayan ve ziyaretçilerinin kolayca kullanabileceği bir site oluşturmak için, herhangi bir HTML belgesi oluşturmadan önce; Sitenin yapısının nasıl olacağını ve sitede kullanılacak dosya ve klasörlerin hiyerarşisini eksiksiz olarak planlamanız gerekir. 18

209 3. Aşama: Sitenin Tasarlanması Bir Web sitesi tasarlarken çalışmaya, genel tasarımı gösteren küçük resimler oluşturarak başlayabilirsiniz. Bu, fikirlerinizi kâğıt üzerinde görmek için kullanabileceğiniz hızlı bir beyin fırtınası yöntemidir. Bu süreç boyunca; 1. Aşama da sorulan soruların cevaplarını, yaptığınız araştırmanın sonuçlarını göz önünde bulundurmaya devam etmeniz gerekir. 19

210 3. Aşama: Sitenin Tasarlanması Tasarımınızı geliştirirken uygulamanız gereken ikinci adım, Başlangıçtaki fikirlerinizin en iyilerini ayıklayarak çok daha ayrıntılı taslaklar oluşturmaktır. Son olarak, Seçilen tasarıma göre oluşturulan sayfaların nasıl görüneceğini gösteren eksiksiz örnek(ler) oluşturulabilir Bu tasarım sürecinde işin sahibi ile sürekli olarak görüşmeniz gerekir. 20

211 3. Aşama: Sitenin Tasarlanması Düşüncelerinizin teknik olarak Web sitesinde de aynen gerçekleştirileceğinden emin olmak için yapacağınız görsel tasarım bileşenlerini test etme işleminin de bu aşamada gerçekleştirilmesi gerekir. Etkin bir Web tasarımının temelini, sitenin tümüyle işlevsel teknik özelliklerine aktarılabilen görsel kavramlar oluşturur. Bir Web sitesinde gerçekleştirebileceğiniz şeylerle ilgili bilginiz ne kadar fazlaysa, sitede kullanacağınız öğelerin etkin bir şekilde tasarımı için o kadar donanımlısınız demektir. Bu derste, oluştururken Dreamweaver dan yardım alabileceğiniz birçok teknik Web özelliğini öğreneceksiniz. 21

212 3. Aşama: Sitenin Tasarlanması Sitenin görüntüsü ve insanlarda oluşturduğu his, görünüm ve sitede kullanılacak stiller ve renklerle ilgili özel ayrıntıları içeren stil kılavuzu da genellikle bu aşamada oluşturulur. Bir Web sitesi oluşturulurken, geliştirme aşamalarının büyük ölçüde iç içe geçtiği pek çok durumla (aşamaların her birinde sık sık tekrarlanan çalışmalar) karşılaşılır. 22

213 4. Aşama: Test Web sitesini tasarlama işlemini bitirdikten sonra, ziyaretçilerin kullanımına sunmadan önce onu test etmek de çok önemlidir. En basit Web sitelerinin bile mantıklı bir şekilde test edilmesi gerekir. Örneğin Web sitenizi, popüler Web tarayıcılarının hepsiyle test etmeniz gerekmektedir. Her ne kadar Windows ta kullanılan Microsoft Internet Explorer günümüzde en çok kullanılan tarayıcı olsa da, Mozilla Firefox, Google Chrome, Opera ve Safari nin pazardaki payları da azımsanmayacak ölçüdedir. 23

214 4. Aşama: Test Internet Explorer gibi bir tarayıcının bile, Bırakın Windows ve Macintosh sürümleri arasındaki farkları, 5, 5.5 ve 6 sürümleri arasında ciddi farklar vardır. Farklı tarayıcıların sayfalarınızı görüntüleme şekillerindeki farklar dışında, her sayfayı ve her bağlantıyı da test ettiğinizden emin olmalısınız. 24

215 5. Aşama: Devamlılığın Sağlanması Birçok Web sitesi geliştiricisi, bir Web sitesi geliştirmenin asla sona ermeyen bir işlem olduğunu düşünür. Yeni sayfalar eklemek, bağlantıları güncellemek, içerikte değişiklik yapmak ve resimleri değiştirmek, bir Web sitesinin devamlılığını sağlamak için uygulanan standart işlemlerdir. Dreamweaver CS4, kütüphane öğeleri, şablonlar ve diğer araçlar yardımıyla Web sitelerinin devamlılığını sağlama işlemini kolaylaştırmak için birçok özellik sunar. 25

216 Site Klasör Yapısı Nasıl Olmalıdır? Siteniz içinde dosyalarınız ile çalışırken düzenli bir çalışma ortamı için, site klasörünüz içinde aşağıdaki klasörleri oluşturmalısınız. images: Bu klasör sizin sitenizin içinde resimlerinizi barındıracağınız klasördür. css: Css klasörü sitenizin içinde stil dosyalarınızı saklayacağınız klasördür. varliklar: Sitenizin içinde ham dosyalarınızı saklayacağınız (ileride kolay bulmanız için) klasördür. Bu klasörün içine fla, psd gibi sitenizi içinde direk olarak kullanılmayan, fakat çıktılarının kullanıldığı ham dosyaları yerleştirebilirsiniz. 26

217 Site Klasör Yapısı Nasıl Olmalıdır? Klasörlerinizi adlandırırken Türkçe karakter kullanmamaya özen göstermelisiniz. Varliklar klasör ismi bu nedenle varlıklar şeklinde kullanılmamıştır. Benim_Sitem images css varliklar 27

218 Yerel Bir Site Tanımlamak Herhangi bir sayfa oluşturmaya başlamadan önce bir Web sitesi hazırlamanın ilk adımı; Bilgisayarınızda sitenin içinde yer alacak her şeyi içerecek olan klasörün oluşturulmasıdır. Bu işlem yerel bir site tanımlamak olarak adlandırılır. Hedef klasör, yerel kök klasörü (local root folder) olarak bilinir. Sabit diskinizde yer alacak olan yerel sitenin sınırlarını belirler ve uzak sitenin adeta bir temsili gibidir. Uzak site, ziyaretçilerinizin erişeceği Web sunucusunda bulunacak olan asıl sitedir. 28

219 Yerel Bir Site Tanımlamak Yerel bir site tanımlamak size yerel ve uzak sürümler arasında aynı klasör hiyerarşisini koruma imkânı sağlar. Bu da işlevsel bir site yaratmak ve bunun sürekliliğini sağlamak için çok önemlidir. 29

220 Yerel Bir Site Tanımlamak İçinde sitenin dosyaları ve klasörlerinin yapısıyla ilgili ayarlar bulunan yerel kök klasörüyle birlikte bir yerel site oluşturduğunuzda; Siteye ait dosyaların yerel kök klasörünün dışında bir yerde saklanması önlenmiş olur. Sabit diskinizde yer alan ama yerel kök klasörünüzün dışında bulunan dosyalar uzak sunucuya aktarılamaz. Bu kısıtlama, siz sitenizi geliştirirken site çevrimiçi olarak erişilebilir hale getirildiğinde kullanılamaz durumda olan dosyalara erişmenizi engeller. 30

221 Yerel Bir Site Tanımlamak Sitedeki farklı bir konuma taşınmış olan bir dosyaya ait bütün referansların güncellenmesi gibi pek çok Dreamweaver özelliği gerçek anlamda çalışabilmek için yerel bir site tanımına ihtiyaç duyar. Elemanları daima yerel siteler içinde oluşturma ve yine aynı yerde çalışma alışkanlığını edinmeniz gerekir. Bu alışkanlığı kazanmazsanız bağlantılar, yollar ve dosya yönetimi konularında sorun yaşayabilirsiniz. 31

222 Yerel Bir Site Tanımlamak Bilgisayarınızda siteniz için bir klasör oluşturun. Bu klasör için en uygun yer sürücünüzün kökünde bir klasör oluşturmaktır. (Ör: C:\WebSitem) Yerel kök klasörünün adı, ilgili sitenin adı ya da sizin seçtiğiniz başka bir ad olabilir. Birden fazla site hazırlıyorsanız, siteleri birbirinden kolayca ayırmanızı sağlayacak açıklayıcı isimler seçmeniz işinizi kolaylaştıracaktır. Yerel kök klasörünün adı sadece dosya yönetimi açısından önemlidir ve sitenin ziyaretçileri tarafından görünmeyecektir. 32

223 Yerel Bir Site Tanımlamak Dreamweaver içinde site oluşturmak için aşağıdakileri yapın: Dreamweaver başlangıç sayfasından Dreamweaver Sitesi menü nesnesini seçin. 33

224 34

225 Yerel Bir Site Tanımlamak veya Site > Yeni Site menü nesnesini seçin. 35

226 36

227 Yerel Bir Site Tanımlamak Temel ve Gelişmiş adındaki iki sekmesiyle birlikte Site Tanımı iletişim kutusu açılacaktır. Bu sekmeleri kullanarak bir site tanımlama işlemini nasıl gerçekleştirmek istediğinizi seçebilirsiniz. 37

228 38

229 Yerel Bir Site Tanımlamak Temel, iletişim kutusunu açtığınızda varsayılan olarak görünen moddur ve işlem boyunca size adım adım yardımcı olur. Gelişmiş modu, yapılandırmada kullanabileceğiniz bir dizi ilave seçenek ve ayar sunar. Temel modundaki açıklayıcı metinler burada görüntülenmez. 39

230 40

231 Yerel Bir Site Tanımlamak Bu uygulamada henüz seçili durumda değilse Temel sekmesine tıklayın. Dreamweaver, Site Tanımı iletişim kutusunun Temel sekmesinde Sitenizi nasıl adlandırmak istersiniz? ifadesiyle sitenizin adının ne olacağını soracaktır. Site adı kutusuna Dreamweaver yazın ve İleri düğmesine tıklayın. Anlaşılır ve mantıklı isimler her bir siteyi diğerlerinden kolayca ayırmanızı sağlar ve birden fazla siteyle çalışırken bunların yönetimini kolaylaştırır. Yerel kök klasöründe olduğu gibi site ismi sadece sizin Dreamweaver ın tanımlanmış siteler listesinde referans olarak kullanacağınız bir araçtır ve sitenizin kullanıcıları tarafından görülmez. 41

232 Yerel Bir Site Tanımlamak ColdFusion, ASP.NET, ASP, JSP, yada PHP gibi bir sunucu teknolojisi ile çalışmak ister misiniz? ifadesiyle ColdFusion, ASP.NET, ASP, JSP ya da PHP gibi bir sunucu teknolojisiyle çalışıp çalışmayacağınızı soracaktır. Hayır, sunucu teknolojisi kullanmak istemiyorum seçeneğine ait radyo düğmesine tıklayarak Bir sunucu teknolojisi kullanmak istemediğinizi belirtin. İleri düğmesine tıklayarak bir sonraki bölüme geçin. 42

233 43

234 Yerel Bir Site Tanımlamak Makinemdeki yerel kopyaları düzenle sonra hazır olduğunda sunucuya yükle (önerilen) seçeneğine tıklayın. Şu anda makinenizdeki dosyalarla çalışacaksınız ve bir uzak sunucuya erişmeniz gerekmiyor. Böyle durumlarda bilgisayarınızda bulunan dosyaları düzenlersiniz. 44

235 45

236 Yerel Bir Site Tanımlamak İleri düğmesine tıklayarak bir sonraki bölüme geçin. Uzak sunucunuza nasıl bağlanacağınızı soran Uzak sunucunuza nasıl bağlanıyorsunuz? sorusunun altındaki Yok seçeneğini işaretleyin. Şu anda yerel bir site üzerinde çalışıyorsunuz ve bir uzak sunucuya erişmeniz gerekmiyor. 46

237 47

238 Yerel Bir Site Tanımlamak İleri düğmesine tıklayarak bir sonraki bölüme geçin. Yeni tanımladığınız site bilgilerini gözden geçirin. İletişim kutusunun alt kısmındaki Bitti düğmesine tıklayın. 48

239 49

240 Yerel Bir Site Tanımlamak Dosyalar panelinde kendi dosyalarınızı görebilirsiniz. 50

241 51

242 Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Yerel sitenizi tanımladıktan sonra Web sayfalarınızı oluşturmaya ve bunlarla çalışmaya hazırsınız demektir. Yeni bir sayfa oluşturduğunuzda ilk yapmanız gereken şey belgenizi kaydetmek olmalıdır. Yeni dosya oluşturmak için aşağıdakileri yapın: Dosya - > Yeni komutunu seçin. Yeni Belge iletişim kutusu açılacaktır. 52

243 53

244 Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Açılan pencereden HTML seçeneğini seçin. Oluştur butonuna tıklayarak HTML dokümanı oluşturun. 54

245 55

246 Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Dosya > Kaydet seçeneğini seçerek oluşturduğunuz dokümanı kayıt edin. Sayfanızı kaydetmek için sayfanın üzerine metin ya da resim yerleştirmeyi beklemeyin. Yeni belgeleri açar açmaz sayfalarınızı kaydedin. Dosyanızı zamanında kaydettiyseniz, resim ya da başka medya elemanları aktardığınızda bu elemanların sitenizdeki konumlarını gösteren bütün yollar düzgün olarak oluşturulacaktır. 56

247 57

248 Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Eğer belgenizi kaydetmezseniz, eklediğiniz elemanın konumunu sabit diskinize göre tanımlayan ve file:// şeklinde başlayan bir yol kullanılacaktır. Belgeyi kaydetmeden bir nesne eklemeye kalktığınızda Dreamweaver bu eleman için file:// şeklinde bir yol kullanması gerektiğini belirterek sizi uyaracaktır. Bu file:// yolları uzak sunucularda çalışmaz, çünkü dosyaların bilgisayarınıza özgü konumlarını tanımlarlar. 58

249 Dosya Adlandırma Standartları Bir Web sunucusunda kullanılacak dosyaları adlandırma işleminin, sabit diskinizdeki dosyaları adlandırmaya göre biraz farklı olduğunu unutmayın. Sunucuda hangi işletim sisteminin kullanıldığını bilmeniz işinizi kolaylaştıracaktır. Bunun için en çok kullanılan sistemler Unix, Linux, Windows NT ve Mac OS tur. Windows taki adlandırma yapısı, diğer UNIX tabanlı işletim sistemlerinden farklıdır. 59

250 Dosya Adlandırma Standartları Örneğin Unix BÜYÜK/küçük harflere duyarlıdır. Yani dosyam.html ile DOSYAM.HTML aynı değildir. Dosyalarınızın isimlerini sadece küçük harflerle yazarak dosya adlandırma işlemini basitleştirmiş ve tutarlılık sağlamış olursunuz. Dosyalarınızı adlandırırken sadece alfabedeki harfleri (A-Z) ve rakamları (0-9) kullanmalısınız. Aşağıda hem dosya, hem de klasörlerin isimlerinde uymak gereken diğer önemli adlandırma standartları verilmiştir. 60

251 Dosya Adlandırma Standartları Boşluklar: Dosya isimlerinde asla boşluk kullanmayın. Sözcükleri ayırmanız gerekiyorsa, boşluğun işlevini görmesi için alt çizgi veya tire karakterini kullanın. Boşluk karakteri kullandığınızda sorun çıkabilir, çünkü tarayıcılar boşluk karakterlerini %20 karakterleriyle değiştirirler. 61

252 Dosya Adlandırma Standartları Özel karakterler:?, %, *, > ya da / gibi özel karakterleri kullanmayın. Virgül kullanmayın. 62

253 Dosya Adlandırma Standartları Sayılar: Dosya isimlerinin en başında sayı kullanmaktan kaçının. 63

254 Dosya Adlandırma Standartları Uzunluk: Klasör ve dosya isimlerinin olabildiğince kısa olmasına gayret edin. Klasör isminin sayfaya erişmek için yazdığınız URL in bir parçası haline geldiğini unutmayın. 64

255 Araçlar ve Arayüz Web sayfası oluşturma işinde daha fazla ilerlemeden önce Dreamweaver CS4 arabiriminde yer alan ve verimli bir şekilde Web siteleri oluşturmanızı sağlayan çeşitli araçları ve panelleri tanımanız gerekir. Tasarım ve kod yazma çalışmalarınızın büyük bir kısmı belge penceresi içinde gerçekleşecektir. Bu alan sayfanın gövde kısmı olarak bilinir. Burada bir Web sayfasını oluşturan çeşitli elemanları ekleme, düzenleme ve silme işlemlerini yapabilirsiniz. 65

256 Araçlar ve Arayüz Siz çalışmaya devam ederken belge penceresi sayfanızın bir Web sayfasında nasıl görüneceği hakkında yaklaşık olarak size bir fikir verir. Burada yaklaşık olarak bir fikir edinirsiniz. Çünkü tarayıcıların Web sayfalarını yorumlama şekilleri arasında bazı farklar vardır. 66

257 67

258 Araçlar ve Arayüz Dosya ismi başlık çubuğunda belirecektir. Windows ta dosya adı, belge penceresinin üst kısmında bir sekmede gösterilir. Varsayılan durumda bu sayfa başlangıçta Belge araç çubuğundaki Başlık metin alanında gösterildiği gibi Başlıksız-1 olarak adlandırılır. Görünüm > Araç Çubukları komutu kullanılarak görünür ya da gizli hale getirilebilen Belge araç çubuğunda çeşitli işlemlere kolayca erişebilmenizi sağlayan bazı düğmeler ve menüler bulunur. 68

259 Araçlar ve Arayüz Varsayılan durumda araç çubuğu belge penceresinin bir parçasıdır. Windows kullanıcıları belge penceresinden ayırmak için araç çubuğunun sol kenarındaki taşıma noktasına (tutamaç) çift tıklayabilir veya bunu sürükleyebilirler. Böylece o da ayrı bir panel halinde gelir. 69

260 Araçlar ve Arayüz Dreamweaver da üç tane görünüm modu mevcuttur: Tasarım, Kod Böl 70

261 71

262 Araçlar ve Arayüz Böl modunda hem Tasarım görünümü, hem de Kod görünümü yer alır. Bu modlara ait düğmeler Belge araç çubuğunun sol tarafında yer almaktadır. İmleci bu düğmelerin üzerine getirip bir süre tutarak görünüm modlarının isimlerini görebilirsiniz. Burada Tasarım görünüm modunu kullanmanız gerekiyor. Etkin düğme vurgulu hale gelerek Dreamweaver ın sayfayı o görünüm modunda görüntülediğini gösterir. 72

263 Araçlar ve Arayüz Belge penceresinin sol alt köşesinde Etiket Seçici düğmesi bulunur. Etiket Seçici daima <body> etiketinden başlar. Hiyerarşik olarak, o anda seçili durumdaki elemana uygulanan HTML etiketlerini görüntüler. Etiket Seçici, bu elemanlara karşılık gelen HTML etiketlerinin aracılığıyla kod hiyerarşisinde hızlı bir şekilde hareket eder. Böylece hangi elemanlarla çalıştığınızı görmenizi ve diğer elemanları kolayca seçmenizi sağlar. 73

264 74

265 Araçlar ve Arayüz Ekle araç çubuğu; resimler, tablolar, özel karakterler, formlar ve HTML gibi sayfanıza ekleyebileceğiniz pek çok nesne ya da elemanı içerir. Bunlar tiplerine göre yedi gruba ayrılmıştır: Ortak Mizanpaj Formlar Data Spry Metin Sık Kullanılanlar 75

266 Araçlar ve Arayüz Etkin grubun ismi menüde görüntülenir. Varsayılan durumda Ortak grubu etkindir. Menüyü kullanarak farklı bir nesne grubuna geçebilirsiniz. Bu gruplardaki farklı nesnelerin çoğunun ilâve araçlar, seçenekler ve ilişkili diğer nesnelerle birlikte kendi özel menüsü vardır. Bunlara küçük siyah bir okla erişilir. 76

267 77

268 Araçlar ve Arayüz Sayfanızın altında, Kullandığınız nesneler ve metinlerle ilgili özellikleri değiştirebileceğiniz Özellikler panelini görebilirsiniz. 78

269 79

270 Paneller Dreamweaver daki panellerin büyük bir kısmı kenetlenmiş bir haldedir. İşlevlerine göre sekmeli pencereler şeklinde panel gruplarında yer alır. Varsayılan panel grupları; CSS Uygulama Etiket Denetimi Dosyalar 80

271 Paneller Dreamweaver daki panellerin büyük bir kısmı kenetlenmiş bir haldedir. İşlevlerine göre sekmeli pencereler şeklinde panel gruplarında yer alır. Varsayılan panel grupları; CSS Uygulama Etiket Denetimi Dosyalar 81

272 82

273 Sayfaya Başlık Atamak Oluşturduğunuz her HTML belgesinin bir başlığı olmalıdır. Bu başlık öncelikle belgenin tanınması için kullanılır. Web tarayıcısının başlık çubuğunda görüntülenir, sayfanın içeriğini gösterir ve Sık Kullanılanlar (Favorites) listelerinde isim olarak görünür. Başlık bölümünde Başlıksız Belge olarak görünür. Bu başlığı sayfanızı uygun bir başlıkla değiştirin. Bu değişikliği yaptıktan sonra dosyayı kaydedin. 83

274 84

275 Web Editörü Dreamweaver CS4 İçerik Eklemek Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu 1

276 ADOBE DREAMWEAVER CS4

277 BÖLÜM 2 İçerik Eklemek Metin Eklemek Satır Arası Eklemek Bölünmez Boşluk Eklemek Metni Hizalamak ve Madde İmleri Özel Karakterler Eklemek Sayfayı Önizleme ile Tarayıcıda Görüntülemek

278 GİRİŞ Dreamweaver CS4 İçeriğin hiyerarşisini ve yapısını geliştirmek, bir Web sitesi oluşturma sürecinde bir sonraki adımdır. Yapıyı oluşturarak ve çatıyı kurarak sitenin temel bileşeni olan içeriği hazırlamış olursunuz. 4

279 Metin Eklemek Sayfaya metin eklemek için birkaç farklı yöntem bulunmaktadır. Metni oluşturduğunuz boş sayfa içine yazmak. Başka bir metin düzenliyicisinden kopyalayarak yapıştırmak. TXT gibi düz metinleri Dreamweaver içinde açmak Herhangi bir metni Dreamweaver sayfasına eklediğinizde ya da yazdığınızda Özellikler denetçisi ile özelliklerini değiştirebilirsiniz. 5

280

281 Metin Eklemek Metin için özellikler denetçisi iki bölümü ayrılmıştır: HTML ve CSS 7

282 Metin Eklemek HTML alanında metnin HTML özelliklerini düzenleyebilirsiniz. Metninizin görsel özelliklerini düzenlemek için CSS seçeneğini seçmelisiniz. Dreamweaver CS4 sürümünden itibaren tüm metin düzenlemeleri için CSS tekniğini kullanmaktadır. 8

283 Satır Arası Eklemek Yazılarınızı yazarken bir alt satıra inmek istediğinizde CTRL + Enter kısayolunu kullanarak bir line break ekleyebilirsiniz. Sadece Enter tuşuna basarak yeni bir paragraf oluşturabilirsiniz. 9

284 10

285 Bölünmez Boşluk Eklemek HTML dokümanlarında artarda bir tane boşluk verilebilir. Artarda birden fazla boşluk vermek için CTRL + SHIFT + BOŞLUK tuşuna basmalısınız. Eğer bu kısayol yerine her seferinde boşluk tuşuna bastığınızda birden fazla boşluk vermek isterseniz Düzen > Tercihler seçeneğini seçin. Genel sekmesinde Birden çok ardışık boşluğa izin ver seçeneğini seçin ve Tamam butonuna basarak pencereyi kapatın. 11

286 12

287 Metni Hizalamak ve Madde İmleri Paragrafları hizalamak metin hizalama butonlarını Özellikler denetçisinde CSS sekmesi altında kullanabilirsiniz. 13

288 Metni Hizalamak ve Madde İmleri Metinlerinizden madde imi oluşturmak için yine Özellikler paneli HTML sekmesinde bulunan madde imi butonlarını kullanabilirsiniz. 14

289 Metni Hizalamak ve Madde İmleri HTML dokümanlarında her bir paragraf bir madde imi olarak kabul edilmektedir. Eğer madde imi içinde bir alt satıra inmek isterseniz CTRL + ENTER tuşlarına basmalısınız. Oluşturduğunuz madde imlerinin (numaralı ya da numarasız) görünümü değiştirmek için listenin içindeyken Format -> Liste -> Özellikler seçeneğini seçin. 15

290 16

291 17

292 Özel Karakterler Eklemek Özel karakterler eklemek için Ekle panelinde Metin seçeneğini seçin. 18

293 19

294 Özel Karakterler Eklemek En alttaki açılır menüden dilediğiniz özel karakterleri sayfanıza ekleyebilirsiniz. 20

295 21

296 Sayfayı Önizleme ile Tarayıcıda Görüntülemek Dreamweaver içinde çalışırken oluşturduğunuz sayfaları tarayıcıda önizleyerek içindeki hataları görmek ya da yapmış olduğunuz sayfanın neye benzediğine bakmak isteyebilirsiniz. Bu durumda yapmanız gereken klavyenizden F12 tuşuna basarak yapmış olduğunuz sayfanın tarayıcıda açılmasını sağlamak olacaktır. F12 tuşuna bastığınızda sayfa varsayılan tarayıcıda açılacaktır. Eğer varsayılan tarayıcıyı değiştirmek yada alternatif bir tarayıcıyı önizleme seçeneklerine eklemek istiyorsanız Dreamweaver menüsünden Dosya > Tarayıcıda Önizleme > Tarayıcı Listesini Düzenle... seçmelisiniz. 22

297 23

298 Sayfayı Önizleme ile Tarayıcıda Görüntülemek Açılan iletişim kutusundan istediğiniz ikincil tarayıcıyı ekleyebilir yada var olan birincil tarayıcı ile ilgili değişiklikler yapabilirsiniz. 24

299 25

300 ADOBE DREAMWEAVER CS4 Kullanıcı El Kitabı

301 ADOBE DREAMWEAVER CS4 Kullanıcı El Kitabı

302

303 İÇİNDEKİLER Dreamweaver Temelleri İçerik Eklemek Stil Sayfaları Oluşturmak Bağlarla Çalışmak Resimlerle Çalışmak Tablolarla Çalışmak Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Formlarla Çalışmak Şablonlar Siteyi Yönetmek

304 BÖLÜM 1 Dreamweaver Temelleri Dreamweaver Temelleri Başlangıç Sayfası Siteyi Geliştirmek Üzere Hazırlık Yapmak Yerel Bir Site Tanımlamak Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Dosya Adlandırma Standartları Araçlar ve Arayüz Paneller Sayfaya Başlık Atamak

305 Bölüm 1 Dreamweaver Temelleri 1 Dreamweaver Temelleri Dreamweaver CS4, Web sitelerinin oluşturulmasını, yönetilmesini, bakımının ve devamlılığını sağlanmasını mümkün kılmak için güçlü görsel tasarım araçlarıyla metin tabanlı HTML düzenleme özelliklerini bir araya getirmiştir. Yazılım, acemi kullanıcıların Web sayfaları oluşturmak için gereken araçlara kolayca ulaşmasını sağlarken, elle kod yazmaya alışkın deneyimli kullanıcılara da gerektiğinde doğrudan kodla çalışma imkânı sağlar. Bu esnek program, gelişmiş teknikleri erişilebilir ve kolay kullanılır hale getirir. Güçlü tasarım, kod ve etkileşim özelliklerinin bir arada sunulması hem acemiler, hem de deneyimli kullanıcılar için sayısız fayda sağlar. Adobe Dreamweaver CS4, pek çok Web geliştiricisinin tercih ettiği bir araçtır. Bir yandan kolayca erişilebilir ve standartlara uygun siteler hazırlama ihtiyaçlarına karşılık verirken, diğer yandan da mevcut ve gelişmekte olan pek çok teknolojik çözümle çalışma imkânı sağlayan bir ortamda hem görsel tasarım, hem de kod düzenleme araçları sunar. Dreamweaver, üretim sürecini hızlandırır ve site yönetimi ve sitenin devamlılığını sağlamak için gereken araçları sunar. Web geliştirme yazılımları sektöründe lider olan Dreamweaver, Web siteleri oluşturma ve bunların devamlılığını sağlama, ayrıca sürekli değişen standartlar, yeni teknolojiler ve kullanıcı ihtiyaçlarını karşılama konularındaki zorlukları aşmanıza yardımcı olmak için ihtiyaç duyduğunuz araçları sağlar Başlangıç Sayfası Dreamweaver CS4 ü açtıktan sonra bir başlangıç sayfası göreceksiniz. Bu sayfada şu araçlar bulunmaktadır: En son açılan belgelere ait hızlı bağlantılar Farklı dosya tiplerinde yeni belgeler oluşturmak için kullanabileceğiniz seçenekler

306 2 Bölüm 1 Dreamweaver Temelleri Dreamweaver ile ilgili sihirbaz ve bilgiler Kaynaklar Dreamweaver Exchange Bağlantısı Yeni bir sayfa oluşturma işlemine başladığınızda veya Başlangıç Sayfası ndaki diğer seçenekleri seçtiğinizde Başlangıç Sayfası kendiliğinden kapanır. Siteyi Geliştirmek Üzere Hazırlık Yapmak Bir Web sitesi oluşturmak için gereken ayrıntılı araştırma ve planlama aşamalarına zaman ayırmak çok önemlidir. Geliştirme için bir strateji oluşturmak daha verimli olmanıza, fikirlerinizi daha iyi ve daha ayrıntılı bir şekilde geliştirmenize ve projenizin kapsamını daha iyi anlamanıza yardım edecek, ayrıca zamanı ve kaynakları daha verimli kullanmanızı sağlayacaktır. İyi bir Web sitesi sezgisel olmalı ve kullanıcılara olumlu ve benzersiz bir deneyim sunmalıdır. Etkin bir Web sitesi hazırlarken işe ilgili siteyi oluşturma nedenini tanımlama ve özetleme, rekabet analizi, akış grafiği ya da taslak hazırlama, site özelliklerinin nasıl çalışacağını yazılı olarak tanımlama ve sitenin görüntüsünü ve insanlarda oluşturacağı hissi tasarlama gibi işlemlerle başlarsınız. Bu süreç çeşitli şekillerde bölümlere ayrılabilir. Bir Web sitesi hazırlamanın temel bileşenleri bu kitapta beş geliştirme aşamasında gerçekleştirilen adımlar olarak anlatılmıştır. Gerçekten etkin bir site (ister kendi sitenizi hazırlarken, ister bir müşteri için ya da bir ekiple birlikte çalışırken) hazırlamak için bu bileşenlerin hepsini kullanmak gerekir.

307 Bölüm 1 Dreamweaver Temelleri 3 1. Aşama: Araştırma Herhangi bir sayfa üzerinde çalışmaya başlamadan önce kendinize ya da müşterinize sitenizin hangi amaçlara hizmet edeceği ve ne gibi içerikler barındırması gerektirdiği ile ilgili soruları sorun. 2. Aşama: Planlama ve Yapılandırma Web sitenizle ziyaretçileriniz arasındaki bağlantı, kısmen sitenizin yapısına bağlıdır. Açıklık ve kullanım kolaylığı iyi bir Web sitesi için hayati özelliklerdir. Geliştirme sürecinin bu önemli aşaması, bu kitapta göreceğiniz ilk konudur. Web sitelerinin temelini site yapısı oluşturur. İyi yapılandırılmamış bir Web sitesinde dolaşmak ve böyle bir siteyi kullanmak kafa karıştırıcı ve zor olabilir, ayrıca böyle bir sitenin devamlılığını sağlamak da pek kolay olmayabilir. Anlaşılır, iletişim sorunu olmayan ve ziyaretçilerinin kolayca kullanabileceği bir site oluşturmak için, herhangi bir HTML belgesi oluşturmadan önce sitenin yapısının nasıl olacağını ve sitede kullanılacak dosya ve klasörlerin hiyerarşisini eksiksiz olarak planlamanız gerekir. 3. Aşama: Geliştirme Sitenin Tasarlanması Bir Web sitesi tasarlarken çalışmaya, genel tasarımı gösteren küçük resimler oluşturarak başlayabilirsiniz (bu, fikirlerinizi kâğıt üzerinde görmek için kullanabileceğiniz hızlı bir beyin fırtınası yöntemidir). Bu süreç boyunca, 1. Aşama da sorulan soruların cevaplarını ve yaptığınız araştırmanın sonuçlarını göz önünde bulundurmaya devam etmeniz gerekir. Tasarımınızı geliştirirken uygulamanız gereken ikinci adım, başlangıçtaki fikirlerinizin en iyilerini ayıklayarak çok daha ayrıntılı taslaklar oluşturmaktır. Son olarak, seçilen tasarıma göre oluşturulan sayfaların nasıl görüneceğini gösteren eksiksiz örnek(ler) oluşturulabilir. Bu tasarım sürecinde işin sahibi ile sürekli olarak görüşmeniz gerekir. Ayrıca, düşüncelerinizin teknik olarak Web sitesinde de aynen gerçekleştirileceğinden emin olmak için yapacağınız görsel tasarım bileşenlerini test etme işleminin de bu aşamada gerçekleştirilmesi gerekir. Etkin bir Web tasarımının temelini, sitenin tümüyle işlevsel teknik özelliklerine aktarılabilen görsel kavramlar oluşturur. Bir Web sitesinde gerçekleştirebileceğiniz şeylerle ilgili bilginiz ne kadar fazlaysa, sitede kullanacağınız öğelerin etkin bir şekilde tasarımı için o kadar donanımlısınız demektir. Bu kitapta, oluştururken Dreamweaver dan yardım alabileceğiniz birçok teknik Web özelliğini öğreneceksiniz. Sitenin görüntüsü ve insanlarda oluşturduğu his, görünüm ve sitede kullanılacak stiller ve renklerle ilgili özel ayrıntıları içeren stil kılavuzu da genellikle bu aşamada oluşturulur. Bir Web sitesi oluşturulurken, geliştirme aşamalarının büyük ölçüde iç içe geçtiği pek çok durumla (aşamaların her birinde sık sık tekrarlanan çalışmalar) karşılaşılır.

308 4 Bölüm 1 Dreamweaver Temelleri 4. Aşama: Test Web sitesini tasarlama işlemini bitirdikten sonra, ziyaretçilerin kullanımına sunmadan önce onu test etmek de çok önemlidir. En basit Web sitelerinin bile mantıklı bir şekilde test edilmesi gerekir. Örneğin Web sitenizi, popüler Web tarayıcılarının hepsiyle test etmeniz gerekmektedir. Her ne kadar Windows ta kullanılan Microsoft Internet Explorer günümüzde en çok kullanılan tarayıcı olsa da, Mozilla Firefox, Opera ve Safari nin pazardaki payları da azımsanmayacak ölçüdedir. Internet Explorer gibi bir tarayıcının bile, bırakın Windows ve Macintosh sürümleri arasındaki farkları, 5, 5.5 ve 6 sürümleri arasında ciddi farklar vardır. Farklı tarayıcıların sayfalarınızı görüntüleme şekillerindeki farklar dışında, her sayfayı ve her bağlantıyı da test ettiğinizden emin olmalısınız. 5. Aşama: Devamlılığın Sağlanması Birçok Web sitesi geliştiricisi, bir Web sitesi geliştirmenin asla sona ermeyen bir işlem olduğunu düşünür. Yeni sayfalar eklemek, bağlantıları güncellemek, içerikte değişiklik yapmak ve resimleri değiştirmek, bir Web sitesinin devamlılığını sağlamak için uygulanan standart işlemlerdir. Dreamweaver CS4, kütüphane öğeleri, şablonlar ve diğer araçlar yardımıyla Web sitelerinin devamlılığını sağlama işlemini kolaylaştırmak için birçok özellik sunar. Site Klasör Yapısı Nasıl Olmalıdır? Siteniz içinde dosyalarınız ile çalışırken düzenli bir çalışma ortamı için, site klasörünüz içinde aşağıdaki klasörleri oluşturmalısınız. images: Bu klasör sizin sitenizin içinde resimlerinizi barındıracağınız klasördür. css: Css klasörü sitenizin içinde stil dosyalarınızı saklayacağınız klasördür. varliklar: Sitenizin içinde ham dosyalarınızı saklayacağınız (ileride kolay bulmanız için) klasördür. Bu klasörün içine fla, psd gibi sitenizi içinde direk olarak kullanılmayan, fakat çıktılarının kullanıldığı ham dosyaları yerleştirebilirsiniz. Klasörlerinizi adlandırırken Türkçe karakter kullanmamaya özen göstermelisiniz. Varliklar klasör ismi bu nedenle varlıklar şeklinde kullanılmamıştır. Benim Sitem images css varliklar

309 Bölüm 1 Dreamweaver Temelleri 5 Yerel Bir Site Tanımlamak Herhangi bir sayfa oluşturmaya başlamadan önce bir Web sitesi hazırlamanın ilk adımı, bilgisayarınızda sitenin içinde yer alacak her şeyi içerecek olan klasörün oluşturulmasıdır. Bu işlem yerel bir site tanımlamak olarak adlandırılır. Hedef klasör, yerel kök klasörü (local root folder) olarak bilinir ve sabit diskinizde yer alacak olan yerel sitenin sınırlarını belirler ve uzak sitenin adeta bir temsili gibidir. Uzak site, ziyaretçilerinizin erişeceği Web sunucusunda bulunacak olan asıl sitedir. Yerel bir site tanımlamak size yerel ve uzak sürümler arasında aynı klasör hiyerarşisini koruma imkânı sağlar. Bu da işlevsel bir site yaratmak ve bunun sürekliliğini sağlamak için çok önemlidir. İçinde sitenin dosyaları ve klasörlerinin yapısıyla ilgili ayarlar bulunan yerel kök klasörüyle birlikte bir yerel site oluşturduğunuzda, siteye ait dosyaların yerel kök klasörünün dışında bir yerde saklanması önlenmiş olur. Sabit diskinizde yer alan ama yerel kök klasörünüzün dışında bulunan dosyalar uzak sunucuya aktarılamaz. Bu kısıtlama, siz sitenizi geliştirirken site çevrimiçi olarak erişilebilir hale getirildiğinde kullanılamaz durumda olan dosyalara erişmenizi engeller. Sitedeki farklı bir konuma taşınmış olan bir dosyaya ait bütün referansların güncellenmesi gibi pek çok Dreamweaver özelliği gerçek anlamda çalışabilmek için yerel bir site tanımına ihtiyaç duyar. Elemanları daima yerel siteler içinde oluşturma ve yine aynı yerde çalışma alışkanlığını edinmeniz gerekir. Bu alışkanlığı kazanmazsanız bağlantılar, yollar ve dosya yönetimi konularında sorun yaşayabilirsiniz. Bilgisayarınızda siteniz için bir klasör oluşturun. Bu klasör için en uygun yer sürücünüzün kökünde bir klasör oluşturmaktır (Ör: C:\WebSitem) Yerel kök klasörünün adı, ilgili sitenin adı ya da sizin seçtiğiniz başka bir ad olabilir. Birden fazla site hazırlıyorsanız, siteleri birbirinden kolayca ayırmanızı sağlayacak açıklayıcı isimler seçmeniz işinizi kolaylaştıracaktır. Yerel kök klasörünün adı sadece dosya yönetimi açısından önemlidir ve sitenin ziyaretçileri tarafından görünmeyecektir. Dreamweaver içinde site oluşturmak için aşağıdakileri yapın:

310 6 Bölüm 1 Dreamweaver Temelleri 1 Dreamweaver başlangıç sayfasından Dreamweaver Sitesi menü nesnesini seçin veya Site > Yeni Site menü nesnesini seçin.

311 Bölüm 1 Dreamweaver Temelleri 7 2 Temel ve Gelişmiş adındaki iki sekmesiyle birlikte Site Tanımı iletişim kutusu açılacaktır. Bu sekmeleri kullanarak bir site tanımlama işlemini nasıl gerçekleştirmek istediğinizi seçebilirsiniz. 3 Temel, iletişim kutusunu açtığınızda varsayılan olarak görünen moddur ve işlem boyunca size adım adım yardımcı olur. Gelişmiş modu, yapılandırmada kullanabileceğiniz bir dizi ilave seçenek ve ayar sunar. Temel modundaki açıklayıcı metinler burada görüntülenmez.

312 8 Bölüm 1 Dreamweaver Temelleri 4 Bu uygulamada henüz seçili durumda değilse Temel sekmesine tıklayın. Dreamweaver, Site Tanımı iletişim kutusunun Temel sekmesinde Sitenizi nasıl adlandırmak istersiniz? ifadesiyle sitenizin adının ne olacağını soracaktır. Site adı kutusuna Dreamweaver yazın ve İleri düğmesine tıklayın. Anlaşılır ve mantıklı isimler her bir siteyi diğerlerinden kolayca ayırmanızı sağlar ve birden fazla siteyle çalışırken bunların yönetimini kolaylaştırır. Yerel kök klasöründe olduğu gibi site ismi sadece sizin Dreamweaver ın tanımlanmış siteler listesinde referans olarak kullanacağınız bir araçtır ve sitenizin kullanıcıları tarafından görülmez. 5 Dreamweaver, ColdFusion, ASP.NET, ASP, JSP, yada PHP gibi bir sunucu teknolojisi ile çalışmak ister misiniz? ifadesiyle ColdFusion, ASP.NET, ASP, JSP ya da PHP gibi bir sunucu teknolojisiyle çalışıp çalışmayacağınızı soracaktır. Hayır, sunucu teknolojisi kullanmak istemiyorum seçeneğine ait radyo düğmesine tıklayarak bir sunucu teknolojisi kullanmak istemediğinizi belirtin. İleri düğmesine tıklayarak bir sonraki bölüme geçin. 6 Makinemdeki yerel kopyaları düzenle sonra hazır olduğunda sunucuya yükle (önerilen) seçeneğine tıklayın. Şu anda makinenizdeki dosyalarla çalışacaksınız ve bir uzak sunucuya erişmeniz gerekmiyor. Böyle durumlarda bilgisayarınızda bulunan dosyaları düzenlersiniz.

313 Bölüm 1 Dreamweaver Temelleri 9 7 İleri düğmesine tıklayarak bir sonraki bölüme geçin. Uzak sunucunuza nasıl bağlanacağınızı soran Uzak sunucunuza nasıl bağlanıyorsunuz? sorusunun altındaki Yok seçeneğini işaretleyin. Şu anda yerel bir site üzerinde çalışıyorsunuz ve bir uzak sunucuya erişmeniz gerekmiyor.

314 10 Bölüm 1 Dreamweaver Temelleri 8 İleri düğmesine tıklayarak bir sonraki bölüme geçin. Yeni tanımladığınız site bilgilerini gözden geçirin ve iletişim kutusunun alt kısmındaki Bitti düğmesine tıklayın. Dosyalar panelinde kendi dosyalarınızı görebilirsiniz

315 Bölüm 1 Dreamweaver Temelleri 11 Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek Yerel sitenizi tanımladıktan sonra Web sayfalarınızı oluşturmaya ve bunlarla çalışmaya hazırsınız demektir. Yeni bir sayfa oluşturduğunuzda ilk yapmanız gereken şey belgenizi kaydetmek olmalıdır. Yeni dosya oluşturmak için aşağıdakileri yapın: 1 Dosya > Yeni komutunu seçin. Yeni Belge iletişim kutusu açılacaktır. 2 Açılan pencereden HTML seçeneğini seçin ve Oluştur butonuna tıklayarak HTML dokümanı oluşturun.

316 12 Bölüm 1 Dreamweaver Temelleri 3 Dosya > Kaydet seçeneğini seçerek oluşturduğunuz dokümanı kayıt edin. Sayfanızı kaydetmek için sayfanın üzerine metin ya da resim yerleştirmeyi beklemeyin. Yeni belgeleri açar açmaz sayfalarınızı kaydedin. Dosyanızı zamanında kaydettiyseniz, resim ya da başka medya elemanları aktardığınızda bu elemanların sitenizdeki konumlarını gösteren bütün yollar düzgün olarak oluşturulacaktır. Eğer belgenizi kaydetmezseniz, eklediğiniz elemanın konumunu sabit diskinize göre tanımlayan ve file:// şeklinde başlayan bir yol kullanılacaktır. Belgeyi kaydetmeden bir nesne eklemeye kalktığınızda Dreamweaver bu eleman için file:// şeklinde bir yol kullanması gerektiğini belirterek sizi uyaracaktır. Bu file:// yolları uzak sunucularda çalışmaz, çünkü dosyaların bilgisayarınıza özgü konumlarını tanımlarlar. Dosya Adlandırma Standartları Bir Web sunucusunda kullanılacak dosyaları adlandırma işleminin, sabit diskinizdeki dosyaları adlandırmaya göre biraz farklı olduğunu unutmayın. Sunucuda hangi işletim sisteminin kullanıldığını bilmeniz işinizi kolaylaştıracaktır. Bunun için en çok kullanılan sistemler Unix, Linux, Windows NT ve Mac OS tur. Windows taki adlandırma yapısı, diğer *NIX tabanlı işletim sistemlerinden farklıdır. Örneğin Unix BÜYÜK/küçük harflere duyarlıdır. Yani dosyam.html ile DOSYAM.HTML aynı değildir. Dosyalarınızın isimlerini sadece küçük harflerle yazarak dosya adlandırma işlemini basitleştirmiş ve tutarlılık sağlamış olursunuz. Dosyalarınızı adlandırırken sadece alfabedeki harfleri (A-Z) ve rakamları (0-9) kullanmalısınız. Aşağıda hem dosya, hem de klasörlerin isimlerinde uymak gereken diğer önemli adlandırma standartları verilmiştir.

317 Bölüm 1 Dreamweaver Temelleri 13 Boşluklar: Dosya isimlerinde asla boşluk kullanmayın. Sözcükleri ayırmanız gerekiyorsa, boşluğun işlevini görmesi için alt çizgi veya tire karakterini kullanın. Boşluk karakteri kullandığınızda sorun çıkabilir, çünkü tarayıcılar boşluk karakterlerini %20 karakterleriyle değiştirirler. Özel karakterler:?, %, *, > ya da / gibi özel karakterleri kullanmayın. Virgül kullanmayın. Sayılar: Dosya isimlerinin en başında sayı kullanmaktan kaçının. Uzunluk: Klasör ve dosya isimlerinin olabildiğince kısa olmasına gayret edin. Klasör isminin sayfaya erişmek için yazdığınız URL in bir parçası haline geldiğini unutmayın. Araçlar ve Arayüz Web sayfası oluşturma işinde daha fazla ilerlemeden önce Dreamweaver CS4 arabiriminde yer alan ve verimli bir şekilde Web siteleri oluşturmanızı sağlayan çeşitli araçları ve panelleri tanımanız gerekir. Tasarım ve kod yazma çalışmalarınızın büyük bir kısmı belge penceresi içinde gerçekleşecektir. Bu alan sayfanın gövde kısmı olarak bilinir ve burada bir Web sayfasını oluşturan çeşitli elemanları ekleme, düzenleme ve silme işlemlerini yapabilirsiniz. Siz çalışmaya devam ederken belge penceresi sayfanızın bir Web sayfasında nasıl görüneceği hakkında yaklaşık olarak size bir fikir verir. Burada yaklaşık olarak bir fikir edinirsiniz, çünkü tarayıcıların Web sayfalarını yorumlama şekilleri arasında bazı farklar vardır.

318 14 Bölüm 1 Dreamweaver Temelleri Dosya ismi başlık çubuğunda belirecektir (Windows ta dosya adı, belge penceresinin üst kısmında bir sekmede gösterilir). Varsayılan durumda bu sayfa başlangıçta Belge araç çubuğundaki Başlık metin alanında gösterildiği gibi Başlıksız-1 olarak adlandırılır. Görünüm > Araç Çubukları komutu kullanılarak görünür ya da gizli hale getirilebilen Belge araç çubuğunda çeşitli işlemlere kolayca erişebilmenizi sağlayan bazı düğmeler ve menüler bulunur. Varsayılan durumda araç çubuğu belge penceresinin bir parçasıdır. Windows kullanıcıları belge penceresinden ayırmak için araç çubuğunun sol kenarındaki taşıma noktasına (tutamaç) çift tıklayabilir veya bunu sürükleyebilirler. Böylece o da ayrı bir panel halinde gelir. Dreamweaver da üç tane görünüm modu mevcuttur: Tasarım, Kod ve Böl. Böl modunda hem Tasarım görünümü, hem de Kod görünümü yer alır. Bu modlara ait düğmeler Belge araç çubuğunun sol tarafında yer almaktadır. İmleci bu düğmelerin üzerine getirip bir süre tutarak görünüm modlarının isimlerini görebilirsiniz. Burada Tasarım görünüm modunu kullanmanız gerekiyor. Etkin düğme vurgulu hale gelerek Dreamweaver ın sayfayı o görünüm modunda görüntülediğini gösterir. Belge penceresinin sol alt köşesinde Etiket Seçici düğmesi bulunur. Etiket Seçici daima <body> etiketinden başlar ve hiyerarşik olarak, o anda seçili durumdaki elemana uygulanan HTML etiketlerini görüntüler. Etiket Seçici, bu elemanlara karşılık gelen HTML etiketlerinin aracılığıyla kod hiyerarşisinde hızlı bir şekilde hareket ederek hangi elemanlarla çalıştığınızı görmenizi ve diğer elemanları kolayca seçmenizi sağlar.

319 Bölüm 1 Dreamweaver Temelleri 15 Ekle araç çubuğu; resimler, tablolar, özel karakterler, formlar ve HTML gibi sayfanıza ekleyebileceğiniz pek çok nesne ya da elemanı içerir. Bunlar tiplerine göre yedi gruba ayrılmıştır: Ortak, Mizanpaj, Formlar, Data, Spry, Metin, Sık Kullanılanlar. Etkin grubun ismi menüde görüntülenir. Varsayılan durumda Ortak grubu etkindir. Menüyü kullanarak farklı bir nesne grubuna geçebilirsiniz. Bu gruplardaki farklı nesnelerin çoğunun ilâve araçlar, seçenekler ve ilişkili diğer nesnelerle birlikte kendi özel menüsü vardır ve bunlara küçük siyah bir okla erişilir.

320 16 Bölüm 1 Dreamweaver Temelleri Sayfanızın altında, kullandığınız nesneler ve metinlerle ilgili özellikleri değiştirebileceğiniz Özellikler panelini görebilirsiniz. Paneller Dreamweaver daki panellerin büyük bir kısmı kenetlenmiş bir halde, işlevlerine göre sekmeli pencereler şeklinde panel gruplarında yer alır. Varsayılan panel grupları CSS, Uygulama, Etiket Denetimi ve Dosyalar dır. Panellere bu gruplardan ya da Pencere menüsünden erişebilirsiniz. Panel grupları, en çok kullandığınız panellere kolayca erişmenizi ya da bunları gizlemenizi mümkün kılar. Kenetleme işlemi, ekran alanını maksimum büyüklüğe getirmenizi ve aynı zamanda ihtiyacınız olan panellere çabucak erişmenizi sağlar. Her panel grubu, etkin paneli ve içindeki diğer panellerin sekmelerini görüntüleyecek şekilde genişletilebilir ya da sadece grubun adı görünecek şekilde küçültülebilir.

321 Bölüm 1 Dreamweaver Temelleri 17 Sayfaya Başlık Atamak Oluşturduğunuz her HTML belgesinin bir başlığı olmalıdır. Bu başlık öncelikle belgenin tanınması için kullanılır. Web tarayıcısının başlık çubuğunda görüntülenir, sayfanın içeriğini gösterir ve Sık Kullanılanlar (Favorites) listelerinde isim olarak görünür. Başlık bölümünde Başlıksız Belge olarak görünür. Bu başlığı sayfanızı uygun bir başlıkla değiştirin. Bu değişikliği yaptıktan sonra dosyayı kaydedin.

322 BÖLÜM 2 İçerik Eklemek Metin Eklemek Satır Arası Eklemek Bölünmez Boşluk Eklemek Metni Hizalamak ve Madde İmleri Özel Karakterler Eklemek Sayfayı Önizleme ile Tarayıcıda Görüntülemek

323 Bölüm 2 İçerik Eklemek 19 İçeriğin hiyerarşisini ve yapısını geliştirmek, bir Web sitesi oluşturma sürecinde bir sonraki adımdır. Yapıyı oluşturarak ve çatıyı kurarak sitenin temel bileşeni olan içeriği hazırlamış olursunuz. Metin Eklemek Sayfaya metin eklemek için birkaç farklı yöntem bulunmaktadır. Metni oluşturduğunuz boş sayfa içine yazmak. Başka bir metin düzenliyicisinden kopyalayarak yapıştırmak. TXT gibi düz metinleri Dreamweaver içinde açmak Herhangi bir metni Dreamweaver sayfasına eklediğinizde ya da yazdığınızda Özellikler denetçisi ile özelliklerini değiştirebilirsiniz. Metin için özellikler denetçisi iki bölümü ayrılmıştır: HTML ve CSS

324 20 Bölüm 2 İçerik Eklemek HTML alanında metnin HTML özelliklerini düzenleyebilirsiniz. Metninizin görsel özelliklerini düzenlemek için CSS seçeneğini seçmelisiniz. Dreamweaver CS4 sürümünden itibaren tüm metin düzenlemeleri için CSS tekniğini kullanmaktadır. Satır Arası Eklemek Yazılarınızı yazarken bir alt satıra inmek istediğinizde CTRL + Enter kısayolunu kullanarak bir line break ekleyebilirsiniz. Sadece Enter tuşuna basarak yeni bir paragraf oluşturabilirsiniz. Bölünmez Boşluk Eklemek HTML dokümanlarında ardarda bir tane boşluk verilebilir. Ardarda birden fazla boşluk vermek için CTRL + SHIFT + BOŞLUK tuşuna basmalısınız. Eğer bu kısayol yerine her seferinde boşluk tuşuna bastığınızda birden fazla boşluk vermek isterseniz Düzen > Tercihler seçeneğini seçin. Genel sekmesinde Birden çok ardışık boşluğa izin ver seçeneğini seçin ve Tamam butonuna basarak pencereyi kapatın.

325 Bölüm 2 İçerik Eklemek 21 Metni Hizalamak ve Madde İmleri Paragrafları hizalamak metin hizalama butonlarını Özellikler denetçisinde CSS sekmesi altında kullanabilirsiniz. Metinlerinizden madde imi oluşturmak için yine Özellikler paneli HTML sekmesinde bulunan madde imi butonlarını kullanabilirsiniz. HTML dokümanlarında her bir paragraf bir madde imi olarak kabul edilmektedir. Eğer madde imi içinde bir alt satıra inmek isterseniz CTRL + ENTER tuşlarına basmalısınız. Oluşturduğunuz madde imlerinin (numaralı ya da numarasız) görünümü değiştirmek için listenin içindeyken Format > Liste > Özellikler seçeneğini seçin.

326 22 Bölüm 2 İçerik Eklemek Özel Karakterler Eklemek Özel karakterler eklemek için Ekle panelinde Metin seçeneğini seçin.

327 Bölüm 2 İçerik Eklemek 23 En alttaki açılır menüden dilediğiniz özel karakterleri sayfanıza ekleyebilirsiniz.

328 24 Bölüm 2 İçerik Eklemek Sayfayı Önizleme ile Tarayıcıda Görüntülemek Dreamweaver içinde çalışırken oluşturduğunuz sayfaları tarayıcıda önizleyerek içindeki hataları görmek ya da yapmış olduğunuz sayfanın neye benzediğine bakmak isteyebilirsiniz. Bu durumda yapmanız gereken klavyenizden F12 tuşuna basarak yapmış olduğunuz sayfanın tarayıcıda açılmasını sağlamak olacaktır. F12 tuşuna bastığınızda sayfa varsayılan tarayıcıda açılacaktır. Eğer varsayılan tarayıcıyı değiştirmek yada alternatif bir tarayıcıyı önizleme seçeneklerine eklemek istiyorsanız Dreamweaver menüsünden Dosya > Tarayıcıda Önizleme > Tarayıcı Listesini Düzenle... seçmelisiniz. Açılan iletişim kutusundan istediğiniz ikincil tarayıcıyı ekleyebilir yada var olan birincil tarayıcı ile ilgili değişiklikler yapabilirsiniz.

329 Bölüm 2 İçerik Eklemek 25

330 BÖLÜM 3 Stil Sayfaları Oluşturmak Sayfa Arkaplan Rengini Değiştirmek Sayfa Karakterini Değiştirmek Dâhili Stiller Dahili Stilleri Harici Stillere Dönüştürmek Mevcut Bir Harici Stil Sayfasını Bağlamak Harici Stiller Oluşturmak Dreamweaver ın CSS Düzenleme Özelliği Eklediğiniz Stilleri Kullanmak Bir Etiket İçin Stil Oluşturmak

331 Bölüm 3 Stil Sayfaları Oluşturmak 27 Cascading Style Sheets (CSS) olarak adlandırılan stil sayfaları, metinler ve resimler gibi çeşitli elemanların Web sayfalarınızda nasıl görüneceğini tanımlamanızı sağlar. Cascading (basamaklı) terimi, stillerin sırasını ve öncelik düzeyini tanımlar. Stil (style), tek bir isimle tanımlanan bir dizi biçimlendirme niteliğidir. Bu da Web tarayıcısına bir elemanı nasıl görüntülemesi gerektiğini bildirir. HTML belgelerindeki stiller, biçimlendirme, görünüm ve yerleşim düzeni üzerinde geniş bir kontrol imkânı sağlar. Stillerden faydalanmanın avantajını şöyle özetleyebiliriz: Bir stilin niteliklerinden birinde bir değişiklik yaptığınızda, bu stil tarafından kontrol edilen bütün elemanlar otomatik olarak güncellenir (stili nasıl oluşturduğunuza bağlı olarak tek bir belgede ya da bütün site genelinde). Font, büyüklük ve renk gibi standart niteliklerden sadece CSS ile erişilebilen gelişmiş metin niteliklerine (satır aralıkları [leading] gibi) kadar pek çok ayarda değişiklik yapabilirsiniz. Stil sayfalarını kullanarak örneğin 1,25 cm lik kenar boşluğuna sahip bir paragraf oluşturabilir, satırlarının arasını 20 punto yapabilir ve metinde kullanılan fontun puntosunu 12 olarak ayarlayabilirsiniz. Böyle bir şeyi CSS olmadan yapamazsınız. Web tarayıcılarının 4.0 ya da daha yeni sürümleri CSS desteğine sahiptir. Internet Explorer 3.0 bazı stil niteliklerini tanısa da eski Web tarayıcıları CSS i görmezden gelir. En iyi sonucu, sürümü 5.0 ve daha üst versiyonu olan Web tarayıcıları verir. Bunlar pek çok özelliği destekler. Tek bir sayfayı biçimlendirmek için belgede saklanan bir dahili stili kullanabilirsiniz. Çeşitli belgeleri birden fazla sayfada (aynı metin biçimlendirme özelliklerini koruyacak şekilde) bir bütün olarak kontrol etmek isterseniz bir harici stil sayfasından da faydalanabilirsiniz. Çeşitli belgelerin görünümünü, aynı metin biçimlendirme özelliklerini birden fazla sayfada koruyacak şekilde bir bütün olarak kontrol etmek isterseniz bir harici stil sayfasından da faydalanabilirsiniz. Bu stil sayfası Web sayfasının dışında bulunur ve geçerli sayfaya bağlanır. Böyle durumlarda metinlerin ve sayfa yerleşim düzeninin bütün site içinde tutarlı olmasını sağlamak en iyisidir. Çünkü bu öğeler sayfadan sayfaya ciddi ölçüde değişiklik gösterirse, ziyaretçileriniz başka bir siteye geçtiklerini düşünebilir. Stil sayfalarını kullanmanın diğer bir avantajı da, Web sayfalarının içeriğini biçimlendirmeden ayrı tutabilmeyi sağlamasıdır. Sonuç olarak bu, içeriğinizin görünümü üzerinde daha hassas bir kontrol imkânı sağlar ve Web sitenize içerik eklemek daha hızlı ve daha az karmaşık bir işlem halini alır. İçeriği bu şekilde izole etmek, sitenin güncellenmesi ve devamlılığının sağlanmasını çok daha basit bir hale getirir. Web sayfalarınızın biçimlendirme özelliklerini stil sayfalarıyla kontrol ederek farklı platformlar ve Web tarayıcıları arasında daha uyumlu sayfalar oluşturabilirsiniz. Sayfa Arkaplan Rengini Değiştirmek Sayfa arkaplan rengini değiştirmek için sayfa özellikleri penceresini açmalısınız. Sayfa özelliklerini açmak için Dreamweaver menüsünden Değiştir > Sayfa Özellikleri seçeneğini seçin.

332 28 Bölüm 3 Stil Sayfaları Oluşturmak Sayfa özelliklerini iki şekilde ayarlayabilirsiniz: CSS ve HTML

333 Bölüm 3 Stil Sayfaları Oluşturmak 29 Açılan iletişim penceresinde görünüm alt menüsü içindeki arkaplan rengi alanından kendi sayfanıza özgü bir renk seçebilirsiniz. Burada seçmiş olduğunuz renk sayfanız içinde bir CSS olarak Dreamweaver tarafından tanımlanacaktır. Sayfa Karakterini Değiştirmek Sayfanızın içinde bütün metinlerinizin aynı fontta olmasını istiyorsanız yine sayfa özellikleri penceresi içinde Sayfa Fontu seçeneğini dilediğiniz bir fontu yansıtacak şekilde düzenleyebilirsiniz. Sayfa fontunu belirlemek için Sayfa Özellikleri penceresini açın. Sayfa özelliklerini açmak için Dreamweaver menüsünden Değiştir > Sayfa Özellikleri seçeneğini seçin.

334 30 Bölüm 3 Stil Sayfaları Oluşturmak Açılan pencerede Görünüm (CSS) seçeneğini seçerek sayfanız içindeki metinlerin stil görünümlerini düzenleyebilirsiniz. Bu seçiminiz de sayfa içinde bir CSS olarak gözükecektir. Sayfanızın kod görünümüne geçtiğinizde yapmış olduğunuz seçimlere göre aşağıdaki gibi gözüktüğünü göreceksiniz (Sizin seçimleriniz farklı olabileceğinden aşağıdaki kodun aynısını göremeyebilirsiniz). <style> body { } body,td,th { } background-color: #003333; font-family: Arial, Helvetica, sans-serif; </style> Yine aynı sayfa özellikleri penceresi içinde sayfanıza ait font rengini de belirleyebilirsiniz.

335 Bölüm 3 Stil Sayfaları Oluşturmak 31 Dâhili Stiller Dahili stiller sadece geçerli belgede tanımlanan, kullanılan stillerdir. Sitenizdeki tek bir sayfa için bir stil tanımları oluşturacaksanız dahili stilleri kullanabilirsiniz. Eğer tanımladığınız stilin siteniz içinde birden fazla sayfada kullanılmasını istiyorsanız, harici bir stil sayfası oluşturmanız ve bu stil sayfasını aynı görünüme sahip olmasını istediğiniz her belgeye bağlamanız gerekir. Mümkün olan her yerde harici stil sayfaları kullanmanız tavsiye edilir. Harici stiller diğer belgelerdeki stilleri kullanabilmenizi sağladığı için çok kullanışlıdır. Ayrıca, harici stiller için kullanılan biçimlendirme kodu ortak bir harici belgede saklandığı için bu stil sayfasını kullanan Web sayfaları biçimlendirme bilgilerini tekrar tekrar yüklemek zorunda kalmaz. Bu da daha az kod kullanılmasını sağlar ve böylece sayfalar daha hızlı yüklenir. Bunlara ek olarak, hepsi aynı yerde bulunduğu için stillerin güncellenmesi de daha kolay olur. Dahili stil oluşturmak için CSS panelinden yararlanacağız. Bu panel içinde hem dahili hem de harici stilleri bir arada görebilirsiniz. Bu panel açık değilse açmak için Pencere > CSS Stilleri seçeneğini seçin.

336 32 Bölüm 3 Stil Sayfaları Oluşturmak CSS Styles panelinde, sayfa özelliklerini tanımladığınızda oluşturulan stillerin bir listesi bulunur. CSS panelinin altındaki yeni CSS kuralı butonuna basın. Karşınıza yeni stil oluşturma penceresi çıkacaktır. Dremaweaver içinde kullanabileceğiniz 4 çeşit stil vardır. Bunlar Sınıf, Kimlik, Etiket ve Bileşiktir.

337 Bölüm 3 Stil Sayfaları Oluşturmak 33 Sınıf: Bu seçici tipi, belirli bir elemana bağlı olmayan sınıflar yaratmanızı sağlar. Tek bir sınıfı pek çok farklı elemana uygulayabilirsiniz. Sınıflar, başlarına konan nokta işaretiyle gösterilirler. Kimlik: Bu seçici tipi ID ler oluşturmanızı sağlar ve önemli bir istisna dışında sınıflara benzerler: ID ler belirli bir elemanı benzersiz bir şekilde tanımlama yöntemi olarak sayfa başına sadece tek bir kez kullanılabilirler. Benzersiz yapılarından ötürü ID ler genellikle script yazma amacıyla kullanılır ve bir diyez işaretiyle (#) gösterilirler. Etiket: Bu seçici tipi, stil tarafından yeniden tanımlanacak olan bir eleman olarak bir HTML etiketinin görsel özelliklerini belirlemenizi sağlar. Etiketin varsayılan görünümü stil tarafından değiştirilir. Bileşik: Bu seçici tipi, özel etiket birleşimleri için kullanılan stiller oluşturmanızı sağlar (bağlamsal seçiciler). Bu seçici tipi ayrıca ID ler oluşturmanızı sağlar ve önemli bir istisna dışında sınıflara benzerler: ID ler belirli bir elemanı benzersiz bir şekilde tanımlama yöntemi olarak sayfa başına sadece tek bir kez kullanılabilirler. Benzersiz yapılarından ötürü ID ler genellikle script yazma amacıyla kullanılır ve bir diyez işaretiyle (#) gösterilirler. Sınıf türü bir stil oluşturmak için aşağıdakileri yapın: Sadece dahili bir stil oluşturacaksanız o zaman açılan pencere içinde Sadece bu belge seçeneğini seçmelisiniz. Ad alanına bu stile vermek istediğiniz ismi yazmalısınız. Yazmış olduğunuz ismin başına bir. nokta koyarak ismi yazabilirsiniz. Nokta işaretini koymasanız da Dreamweaver bunu sizin için koyacaktır.

338 34 Bölüm 3 Stil Sayfaları Oluşturmak Tamam butonuna bastıktan sonra açılan pencerede bu stil ile ilgili özellikleri düzenleyebilirsiniz.

339 Bölüm 3 Stil Sayfaları Oluşturmak 35 Dahili Stilleri Harici Stillere Dönüştürmek Stil sayfaları harici olarak saklanabilir ve bir ya da daha fazla belgeye bağlanabilir. Bir harici stil sayfası, sadece CSS spesifikasyonları içeren bir dosyadır. Harici stil sayfalarını birden fazla Web sayfasında kullanarak sayfaların tutarlı olmasını sağlayabilirsiniz. Dahili stiller içeren bir belgeniz varsa ve bu stilleri diğer sayfalarda da kullanmak istiyorsanız, bunları harici bir stil sayfasına kolayca aktarabilirsiniz. Dahili stil sayfanızı harici bir stil olarak kayıt etmek için seçtiğiniz stil üzerinde sağ tıkladıktan sonra CSS Kuralını taşı... komutunun seçmeli ve ve Yeni bir stil sayfası... seçeneğini işaretlemelisiniz. Bu aşamadan sonra Dreamweaver size yeni stil sayfanızı kayıt edeceğiniz yeri soracaktır. Harici stil sayfalarınızı tutacağınız en uygun yer siteniz altındaki CSS klasörünün içindir. Bu nedenle siteniz içinde oluşturduğunuz CSS klasörünü kullanabilirsiniz.

340 36 Bölüm 3 Stil Sayfaları Oluşturmak Mevcut Bir Harici Stil Sayfasını Bağlamak Eğer harici bir stil dosyanız varsa ve bunu siteniz içindeki diğer sayfalarda da kullanmak istiyorsanız o zaman sayfalarınızı bu stil sayfalarına bağlamalısınız. Harici var olan bir stil sayfanızı bir sayfaya bağlamak için o sayfayı Dreamweaver içinde açtıktan sonra, CSS panelinin altında bulunan Stil Sayfasını Ekle seçeneğini işaretlemelisiniz. Bu seçeneği seçtiğinizde karşınıza yeni bir iletişim kutusu açılacak ve sizden harici stil sayfanızın yerini soracaktır. Bu açılan pencerede stil sayfanızı seçtiğinizde artık içindeki css tanımlarını sayfanız içinde de kullanabilirsiniz. Harici stil sayfaları ile çalışırken unutmamanız gereken şey, bu stillerde bir değişiklik yaptığınızda buna bağlı olan tüm sayfalardaki bu stilin görünümü de değişecektir. Harici Stiller Oluşturmak Font, font büyüklüğü, rengi gibi çeşitli biçimlendirme niteliklerini ayrı ayrı belgelerde kolayca değiştirebilirsiniz. Ancak harici stil sayfalarının seçeneklerinizi artırabileceğini ve bu stilleri sitenizdeki diğer belgelerde de kolayca uygulamanızı sağladığını unutmayın. Stillerinizi, onları kullanmak istediğiniz her sayfada yeniden yaratmak yerine, bütün stillerinizi saklamak üzere bir harici stil sayfası kullanabilir ve böylece bu stilleri söz konusu stil sayfasının bağlı olduğu her belge tarafından erişilebilir kılabilirsiniz. Bu da biçimlendirme işlemini önemli ölçüde hızlandırabilir. Harici bir stil oluşturmak için CSS panelinde Yeni CSS Kuralı butonuna bastıktan sonra açılan pencerede Tanımla alanında (Yeni Stil Sayfası Dosyası) seçeneğini seçmeli veya daha önce harici bir stil sayfanız varsa açılan pencereden onu seçmelisiniz.

341 Bölüm 3 Stil Sayfaları Oluşturmak 37 Dreamweaver ın CSS Düzenleme Özelliği Dreamweaver varsayılan davranış olarak CSS sayfalarını düzenlediğinizde onları açar ve yaptığınız değişiklikleri içine ekler ancak otomatik olarak kayıt etmez. Bu durumda yaptığınız son değişiklikleri sayfanızda göremeyebilirsiniz. Bu durumu engellemek için yapmanız gereken Dreamweaver içinde Düzen > Tercihler seçeneğini seçin.

342 38 Bölüm 3 Stil Sayfaları Oluşturmak CSS Stilleri menüsünden Değiştirildiğinde CSS dosyalarını aç kutucuğundaki işareti kaldırmaktır.

343 Bölüm 3 Stil Sayfaları Oluşturmak 39 Eklediğiniz Stilleri Kullanmak Stil olarak eklediğiniz Sınıf ları sayfanızın içinde kullanmak için onların etki edecekleri metinleri seçmelisiniz. Bu işlem için sayfanızın içinde bir metni ya da başka bir nesneyi işaretlemeli ve ona oluşturmuş olduğunuz stili seçerek yeni görünümünü vermelisiniz. Yazıyı işaretledikten sonra Özellikler panelindeki Stil penceresinden eklemiş olduğunuz bu stili seçmelisiniz. Unutmayın bu stili CSS panelinde değiştirdiğinizde sayfa içinde uygulandığı her yerde değişecektir. Bir Etiket İçin Stil Oluşturmak Eğer sayfanızın içinde bir etiketin geçtiği yerlerdeki özelliklerini bir seferde düzenlemek istiyorsanız o zaman, o etiket için bir stil tanımlayabilirsiniz. Bunu yapmak için yeni stil ekleme butonuna bastıktan sonra Etiket seçeneğini seçmeli ve buradan hangi etiket için işlem yapacaksanız onun seçili olduğundan emin olmalısınız. Örneğin dokümanlarınızın içindeki tüm paragrafların sizin seçtiğiniz şekilde gözükmesini istiyorsanız o zaman açılan menüden p etiketini seçmelisiniz (HTML bir etiketler dilidir. Sayfa içindeki tüm gösterimler ile ilişkili bir etiket bulunmaktadır. Paragraf için kullanılan etikette <p> dir.

344 40 Bölüm 3 Stil Sayfaları Oluşturmak Oluşturduğunuz yeni stil, paragraf etiketleriyle biçimlendirilen metnin görüntülenme şeklini yeniden tanımlayacaktır. Bileşik Stil Hazırlamak Bileşik stili kullanabileceğiniz yerlerden biri sayfanızın içindeki bağlantılara efekt eklemektir. Bileşik modu içinde hazır olarak tanımlanmış 4 adet link seçeneği bulunmaktadır.

345 Bölüm 3 Stil Sayfaları Oluşturmak 41 Bunlar: a:link Sayfa içinde daha önceden ziyaret edilmemiş linklerin görünümü ile ilgili görsel ayarlamaları yapabileceğiniz tanımlama. a:hover Sayfa içindeki linklerin üzerine geldiğinizde nasıl bir görünüm alacağını ayarlayabileceğiniz tanımlama. a:active Eğer çerçeveli sayfalar kullanıyorsanız tıklanmış olan linkin nasıl bir görünüm alacağını ayarlayabileceğiniz tanımlama. a:visited Daha önce ziyaret edilmiş bir linkin nasıl bir görünüm alacağını ayarlayabileceğiniz tanımlama.

346 BÖLÜM 4 Bağlarla Çalışmak Bağlara Farklı Renk Atamak Onaltılık Tabanlı Renk Kodları Hipermetin Bağlantıları Oluşturmak Sayfa İçinde Link Vermek E-Posta Bağlantıları Eklemek

347 Bölüm 4 Bağlarla Çalışmak 43 Benzersiz bir araç olan Web sitelerinin gücü, metinleri ve resimleri diğer belgelerle doğrusal ya da sıralı olmayan bağlantılar aracılığıyla bağlama becerilerinden ileri gelir. Web tarayıcısı, bağlantı olduklarını göstermek için bu bölgeleri vurgulayabilir (genellikle belirli bir renkle ya da altçizgiyle). HTML de bağlantılar iki parçadan oluşur: Kendisine bağlanılacak olan dosyanın adı ve yolu (ya da URL i - Uniform Resource Locator) ile tıklanabilir alan olarak görev yapan metin ya da resim. Kullanıcı bir bağlantıya tıkladığında Web tarayıcısı bağlı belgeyi yükler. Bazı Web tarayıcılarında imleç üzerine geldiğinde bağlantının yolu, tarayıcı penceresinin durum alanında (pencerenin sol alt köşesinde yer alır) görüntülenir. Bağlantılar kullanıcıları diğer HTML dosyalarına, resimlere ve diğer medya dosyalarına indirilebilir, dosyalara yönlendirebilir. Bağlara Farklı Renk Atamak Sayfanızdaki metin tabanlı bağlantıların varsayılan rengini belirleyebilirsiniz. Belgedeki normal gövde metninden farklı bir bağlantı rengi seçtiğinizde kullanıcılar bağlantıları kolayca ayırt edebileceklerdir. Belgenizin varsayılan bağlantı özellikleri Sayfa Özellikleri iletişim kutusunda belirtilir. Bağ renklerini değiştirmek için Değiştir > Sayfa Özellikleri menü nesnesini seçin. Açılan sayfa özelliklerinde Bağlar (CSS) başlığını seçin.

348 44 Bölüm 4 Bağlarla Çalışmak Eğer bağlantı renklerini belirlemezseniz, sayfa kullanıcının Web tarayıcısında görüntülendiğinde tarayıcının varsayılan ayarları kullanılacaktır. Bu varsayılan ayarlar tarayıcıdan tarayıcıya farklılık gösterebilir. Sitenizin görünümü üzerinde çalışmaya başladığınızda sitenin renk düzenini bir bütün olarak hesaba katmak en iyisi olacaktır. Sitenin tamamında kullanılacak stillere ve renklere karar verirken bağlantı renklerini değiştirerek bu renklerin sayfalarınızda kullanılan diğer renklerle uyumlu olmasını sağlayabilirsiniz. Bağlantıların kolayca okunabilmesi için, seçtiğiniz renklerin arka planla ve diğer elemanlarla kontrast oluşturması (ama uyumsuzluk yaratmaması) gerekir. Bağlantılar farklı durumlara sahiptir. Örneğin tıklanan ve tıklanmayan bağlantıların durumu farklıdır. Bir bağlantının her durumu için ayrı görünüm nitelikleri kullanabilirsiniz. Kullanıcının davranışına göre değişen dört farklı bağlantı durumu için renk tanımlayabilirsiniz. Bağ Rengi: Bağlantının, üzerine tıklanmadan önceki yani başlangıçtaki rengidir. Bağlantılar için kullanılan standart Web tarayıcısı rengi mavidir. Ziyaret Edilen Bağlar: Kullanıcı bir bağlantıya tıkladığında bağlantının aldığı renktir. Tıklanmış bir bağlantı için kullanılan standart Web tarayıcısı rengi mordur. Rollover Bağlar: Kullanıcı, imleci bir bağlantının üzerinde bir süre tuttuğunda bağlantının aldığı renktir. Bu, bir öğenin tıklanabilir olduğunu gösteren ikinci bir işaret olarak tanımlanabilir. Bu seçenek boş bırakılırsa rollover kullanılmaz. Etkin Bağlar: İmleç üzerindeyken farenin düğmesine basıldığında bağlantının aldığı renktir. Etkin bağlantılardan, ziyaretçiye ilgili bağlantıya tıklandığını gösteren etkileşimli bir işaret olarak faydalanılabilir. Bununla birlikte, kullanıcıların Internet erişiminin hızlanmasıyla etkin bağlantıların eskisi kadar rağbet görmediğini hatırlatmak isterim. Bu seçenek boş bırakılırsa etkinlik durumunu göstermek için bir etkin renk kullanılmaz.

349 Bölüm 4 Bağlarla Çalışmak 45 Onaltılık Tabanlı Renk Kodları HTML de renkler RGB (Red/Green/Blue Kırmızı/Yeşil/Mavi) kullanılarak onaltılık kodlarla tanımlanır. Onaltılık sistemde rakamlar (0-9) ve harfler (A-F) kullanılır. HTML de renkleri tanımlamak için kullanılan altı basamaklı kodda ilk iki basamak kırmızıyı, ikinci iki basamak yeşili ve son iki basamak da maviyi temsil eder. Örneğin #00FF00 ifadesiyle gösterilen renkte kırmızı ve mavi yoktur ve parlak bir yeşil kullanılmıştır. # ifadesiyle gösterilen renkte ise ne kırmızı, ne yeşil, ne de mavi kullanılmıştır. Bu, siyah rengi gösterir. Bunun tersine, #FFFFFF ifadesi de kırmızı, yeşil ve mavinin maksimum derecelerini gösterir ve bunlar birleştiğinde ekranınızda beyaz rengi oluşturur. Bilgisayar ekranlarının sizin gördüğünüz renkleri oluşturmak için ışıktan faydalandığını hatırlayın. Işığın renk özellikleri (eklenen renk sistemine dayanır ve bu sistemde tüm renkler birleşerek beyazı oluşturur), basılı medyada (çıkarılan renk sistemine dayanır ve bu sistemde tüm renkler birleşerek siyahı oluşturur) kullanılan pigmentlerin özelliklerinden çok farklıdır. Diyez işareti (#), kendisini takip eden ifadenin bir renk ismi (siyah, beyaz, kırmızı, vs. gibi) değil, onaltılık tabanlı bir değer olduğunu gösterir. Hipermetin Bağlantıları Oluşturmak Hipermetin bağlantıları (hypertext links) ziyaretçileri Web sitenizin içindeki belgelere ya da Internet teki başka sayfalara yönlendirmenizi sağlar. Aynı site içindeki diğer belgelere ya da sayfalara giden bağlantılara göreceli bağlantılar (relative links) denir. Göreceli bağlantıları tek bir sitenin klasör yapısı içinde farklı konumlarda yer alan pek çok farklı dosyaya atayabilirsiniz. Bu tür bağlantıları oluşturmak için birçok farklı yöntemden faydalanabilirsiniz. Aşağıdaki uygulamada bu yöntemleri göreceksiniz. Herhangi bir bağlantı oluşturmadan önce yeni belgeleri kaydetmek önemlidir. Böylece Dreamweaver a belgenizin nerede olduğunu bildirerek bağlantı yollarını belirlemesini sağlarsınız. Dreamweaver ın bağlı dosyanın bağlantıyı yerleştirdiğiniz dosyaya göre olan konumunu belirlemesi gerekir. Belgenizi ilk kez kaydetmeden önce bir bağlantı oluşturmaya çalışırsanız bu bağlantıya ait yol file:// ifadesiyle bağlanacak ve uzak sitelerde kullanılamayacaktır, çünkü bunlar sabit diskinize göre tanımlanmıştır, bağlantının bulunduğu dosyaya göre değil. Siz belgelerinizi kaydettiğinizde Dreamweaver bağlantıları otomatik olarak günceller. Ama sorunlu yolların ortaya çıkma ihtimalini ortadan kaldırmak için, dokümanınız oluşturduğunuzda kayıt etmeniz en iyisidir. Site oluştururken bağlantıları göstermek için kullanacağınız ifadeleri seçerken dikkatli olun. Buraya Tıklayın ifadesini kullanmaktan kaçının. Çünkü bu belirsiz bir ifadedir ve gezintiyle ilgili zorluklar da dahil olmak üzere çeşitli sorunlara yol açabilir. Örneğin görme engelli ziyaretçiler (özellikle de sesli Web tarayıcısı kullananlar) Buraya Tıklayın ifadesini kullanan birden fazla bağlantıyı birbirinden ayırt edemeyebilir ve bunun sonucunda sitenizde gezinirken ciddi anlamda zorlanabilirler. Ayrıca, sayfalarınıza ilgilerini çekecek bir bağlantı var mı diye göz atan ziyaretçiler genellikle bağlantıları gösteren alt çizgilere dikkat ederler. Güzel bir açıklama yerine Buraya Tıklayın ifadesini kullanmak durumu zorlaştırır. Bağlantı içeren ifadeler yazarken her zaman konuyu açıklayıcı ifadeler kullanmaya dikkat edin.

350 46 Bölüm 4 Bağlarla Çalışmak Yerel sitenizdeki bir başka sayfa ya da dosyaya bağlantı oluşturmak için bağlantı vereceğiniz yazıyı işaretledikten sonra, Özellikler panelinde, HTML sekmesine tıklayın ve Bağ metin kutusunun sağındaki klasör işaretine tıklayın ve sitenizin içinden ilgili dosyayı seçin. Bu alana eğer başka bir siteye link verecekseniz bu sitenin adresini başında http bulunarak yazmalısınız. (Ör: Eğer sayfanızın yeni bir pencerede açılmasını istiyorsanız Hedef menüsünden _blank seçeneğini seçmelisiniz. Kendi siteniz içinde başka bir dosyaya link verdiğinizde, eğer link verdiğiniz dosyalar, içinde link bulunan sayfa ile aynı klasördeyse, diğer dosya ismini Bağ alanında görürsünüz. Örneğin index. hmtl dosyasının içinden aynı klasördeki iletisim.html dosyasına link veriyorsanız Bağ penceresinde iletisim.html dosya ismini görürsünüz. Eğer bir klasör daha altta ise bu alanda örneğin sayfalar/ iletisim.html yazısını görürsünüz. Eğer bir klasör üstteyse../iletisim.html yazısını görürsünüz. Daha alt klasörlere gitmek için yolunuz üzerindeki tüm klasör isimleri linkinizin içinde olmalıdır. Eğer daha üste gitmek istiyorsanız çıktığınız her üst seviye için linkinize ayrı bir../ eklemelisiniz. Sitenizin içinde yeni bir klasör oluşturmak isterseniz Dosyalar panelindeki boş beyaz alanda sağ butona basarak yeni klasör seçeneğini seçin. Sayfa İçinde Link Vermek Bir belge çok uzunsa ya da birden fazla bölümden oluşuyorsa, kullanıcının belge içindeki belirli yerlere atlamasını sağlayan çeşitli bağlantılar oluşturmanız gerekebilir. Bu teknik, kullanıcıları uzun metin pasajlarıyla dolu bir ekranı sürekli kaydırma zorunluluğundan kurtarır. Adlı bağlantı (named anchor), sayfada belirli bir bağlantının atlayacağı yeri işaretler. Adlı bağlantı eklemek için Ekle panelinden çapa butonuna basın.

351 Bölüm 4 Bağlarla Çalışmak 47 İsimli bağlantı eklemek için Ekle > Adlı Bağlantı seçeneğini seçin. Açılan pencerede yer imine bir isim verin. Bu ismi kullanarak sayfa içinde link verebilirsiniz. İsimde boşluk, noktalama işareti veya özel karakter (telif hakkı sembolü, diyez işareti vs gibi) kullanmayın. Aynı belgede aynı isme sahip birden fazla isimli yer imi asla kullanılmamalıdır. Aksi takdirde Web tarayıcısı kullanıcıyı doğru yer imine götüremez. Sayfada, isimli yer imini göstermek için sarı bir simge belirecektir. Sayfada ilk belirdiğinde bu simgeyi seçebilirsiniz (seçilen yer imi simgelerinin rengi maviye döner). Bu simge, Web tarayıcısında görünmeyen bir elemandır. Adlı bağlantı simgesini göremiyorsanız Görünüm > Görsel Yardımcılar > Görünmez Öğeler komutunu seçerek görünmez öğelerin göründüğünden emin olun.

352 48 Bölüm 4 Bağlarla Çalışmak Sayfa içinde yer imlerini oluşturduğunuza göre onlara artık link verebilirsiniz. Sayfa içinde bir bağlantıya tıkladığınızda gitmek istediğiniz yere yer iminizi yerleştiriniz. Bağlantı vermek istediğiniz metni işaretleyin ve Bağ penceresine yer iminin adının önüne # işareti koyarak yer iminin adını yazın. Örneğin yer imi olarak bolum1 koyduysanız bu imi gitmek için link alanına #bolum1 yazmalısınız. E-Posta Bağlantıları Eklemek Sayfanız içinde tıkladığında çalışan bir eposta linki istiyorsanız bunun için yapmanız gereken linki vermek istediğiniz metni işaretlemek ve Bağ kutucuğunun içine eposta linkini mailto:bilgi@ example.com şeklinde yazmaktır. Böylece bir eposta linki oluşturmuş olursunuz.

353 Bölüm 4 Bağlarla Çalışmak 49

354 BÖLÜM 5 Resimlerle Çalışmak Resim Türleri Sayfalarınıza Arkaplan Resmi Eklemek Sayfalarınıza Resim Eklemek Dreamweaver İçinde Temel Resim Düzenleme İşlemleri Resim Özellikleri Resimlere İsim Atamak Varlıklar Panelini Kullanarak Resim Eklemek Bir Resim Yer Tutucusu Eklemek Resim Düzenleme Tercihlerini Ayarlamak Resim Tabanlı Bağlantılar Oluşturmak Resim Haritası Oluşturmak

355 Bölüm 5 Resimlerle Çalışmak 51 Resimler izleyicilerinizin dikkatini çekmede ve Web sitenizde vermeyi düşündüğünüz mesajı etkin bir şekilde iletmede önemli bir rol oynayabilir. Adobe Dreamweaver CS4 deki özellikler, sitenizde kullandığınız resimler üzerinde önemli ölçüde kontrol imkânı sağlar. Böylece resim özelliklerini Dreamweaver içinden hızlı bir şekilde değiştirebilir ve resimleri harici bir resim editöründe açabilirsiniz. Varlıklar paneli, sitenizde kullandığınız ya da kullanmanız gereken bütün resimler için kataloglar hazırlamanızı sağlayarak resimlerin yönetimini basitleştirir. Resim Türleri Web sitenizi geliştirirken sayfalarınızın içinde resimleri kullanarak etkiyi arttırabilirsiniz. Sayfalarınızın içinde kullanabileceğiniz resim türleri aşağıdakiler gibidir: JPG GIF PNG İnternet te en çok ve en yaygın şekilde kullanılan resim formatı GIF (Graphic Interchange Format) ve JPEG dir (Joint Photographic Experts Group). Resimleri Internet te kullanmak üzere kaydetme işlemi optimizasyon olarak adlandırılır ve Adobe Fireworks ya da Adobe Photoshop gibi bir resim editörüyle gerçekleştirilebilir. Bir resmi GIF olarak mı yoksa JPEG olarak mı kaydedeceğinize karar verirken en yüksek resim kalitesini ve olası en düşük dosya boyutunu hedefleyin. Genel bir kural olarak, resimde düz renklerden oluşan geniş alanlar varsa ve renk harmanları yoksa veya çok azsa GIF formatını kullanın. GIF ler metinlerde, vektör tabanlı resimlerde, ayrıca sınırlı renge ve çok küçük boyutlara sahip resimlerde çok kullanışlıdır. GIF resimleri maksimum 8-bit renk modu kullanılarak kaydedilebilir. Bu modda sadece 256 renk görüntülenebilir. GIF dosyaları daha hızlı yüklenir, daha fazla optimizasyon seçeneğine sahiptir, ayrıca saydamlık ve animasyonu destekler. GIF dosyaları için.gif uzantısı kullanılır. Fotoğraflarda ya da ton aralığı büyük olan resimlerde JPEG formatını kullanmalısınız. JPEG formatı renk harmanlarını çok iyi görüntüleyebilir ve bir GIF resminin kesri kadarlık bir boyutta çok daha kaliteli fotografik resimler oluşturabilirsiniz. JPEG formatında resimler 24-bit modunda kaydedilir, bütün renkler korunur ve fazlalık verilerin atıldığı kayıplı bir sıkıştırma tipi kullanılır. JPEG kalitesi düştükçe, bahsettiğimiz atılan verilerden dolayı resme ait daha fazla bilgi kaybı olur. JPEG lerin kayıplı özelliğinden dolayı resmin kalitesini düşürmemek için bütün düzenleme işlemleri kaynak dosyası üzerinde yapılmalı ve tekrar JPEG olarak kaydedilmelidir. JPEG dosyalarının uzantısı.jpg dir. İnternet te PNG (Portable Network Graphic) adında üçüncü bir format daha kullanılır.

356 52 Bölüm 5 Resimlerle Çalışmak PNG formatı, GIF in yerini alması için tasarlanmıştır; JPEG ve GIF formatlarının özelliklerini birleştirir. PNG dosyaları kayıpsızdır, GIF dosyalarından daha iyi sıkıştırır ve renk kontrolü açısından daha fazla seçeneğe sahiptir, ayrıca JPG gibi bütün renkleri koruyabilir ya da bir GIF dosyası gibi sınırlı sayıda renk kullanabilir. PNG JPEG lerin yerini alması için tasarlanmamıştır. PNG, animasyon desteğine sahip değildir ve eski Web tarayıcıları tarafından desteklenmez. Dosya uzantısı.png dir. Sayfalarınıza Arkaplan Resmi Eklemek Sayfalarınıza arkaplan resmi eklemek için Dreamweaver menüsünden Değiştir > Sayfa Özellikleri seçeneklerini seçin. Açılan iletişim kutusunda Arka plan görüntüsü seçeneğinden uygun bir resmi seçebilirsiniz. Bu seçimi Görünüm (CSS)

357 Bölüm 5 Resimlerle Çalışmak 53 veya Görünüm (HTML) seçeneklerinden birini kullanarak yapabilirsiniz. Sayfalarınıza Resim Eklemek Sayfalarınıza resim eklemek için imlecinizi sayfa içinde resmi eklemek istediğiniz yere yerleştirdikten sonra Ekle panelinden Resim düğmesine tıklamalısınız.

358 54 Bölüm 5 Resimlerle Çalışmak

359 Bölüm 5 Resimlerle Çalışmak 55 Açılan iletişim kutusundan eklemek istediğiniz resmi seçin. Eğer seçtiğiniz resim sitenizin içinde değil de bilgisayarınızda başka bir yerde ise resmi seçtikten sonra Dreamweaver size bu dosyayı sitenizin içine kopyalamayı isteyip istemediğinizi soracaktır. Bu soruya Evet olarak cevap vermeli ve dosyayı sitenizin içindeki images klasörü içine kayıt etmelisiniz. Sonraki iletişim kutusunda karşınıza çıkan alanlardan Alternatif metin alanına bu resimle ilgili açıklayıcı bir başlık, uzun açıklama bölümüne ise görme özürlü ziyaretçilerin sayfalarınızı kolaylıkla ekran okuyucu programlarla okuyabilmeleri için açıklama metnini yazabilirsiniz. Dreamweaver İçinde Temel Resim Düzenleme İşlemleri Dreamweaver içinde temel resim düzenleme işlemlerini yapabilirsiniz. Bu işlemleri yapmak için özellikler panelindeki Düzenle buton grubunu kullanabilirsiniz. Bu butonlar sırasıyla aşağıdaki gibidir:

360 56 Bölüm 5 Resimlerle Çalışmak Düzenle: Harici bir resim düzenleme programını açar ve düzenlemek için hazırlar En İyileştir...:Resminizin KB cinsinden boyutunu optimize etmek için optimizasyon penceresini açar. Kırp: Başka bir düzenleme programına ihtiyaç duymaksızın resimleri kırpmanızı sağlar. Parlaklık ve Kontrast: Resimlerinizin parlaklık ve kontrastlarını ayarlamanızı sağlar. Keskinleştir: Resimlerinizin keskinliğini arttırır. Resim Özellikleri Sayfalarınıza eklediğiniz resimlerin özelliklerini özellik panelini kullanarak düzenleyebilirsiniz. G: Resmin genişliği Y: Resmin yüksekliği Kaynak: Resmin sabit diskiniz üzerindeki yeri Bağ: Resmin linki Alt: Resmin üzerine gelindiğinde çıkacak yazı D Boşluk: Resmin altında ve üstündeki boşluğu Y Boşluk: Resmin solunda ve sağındaki boşluğu Hedef: Resmin linkinin hangi pencerede açılacağı Düşük Kaynak: Resim yüklenene kadar gösterilecek düşük boyutlu versiyonu Kenarlık: Resmin çerçeve kalınlığını ifade etmektedir. Resminizin genişlik yada yüksekliğini, G yada Y değerini veya resminizin kenar tutamaçlarından tutarak boyutunu değiştirdiğinizde iki birim arasında bir yenile ikonu çıkacaktır. Bu ikona tıklayarak resmin orijinal boyutlarına dönmesini sağlayabilirsiniz.

361 Bölüm 5 Resimlerle Çalışmak 57 Resmin boyutlarını büyütürken kalitenin düştüğüne dikkat edin. Resimler Web tarayıcılarında ekran çözünürlüğünde (72 dpi) görüntülenir. Bu çözünürlük değeri, resmi orijinalinden daha büyük boyutlarda görüntülemek için yeterli değildir. Bu yüzden, mümkün olan en küçük dosya boyutunu elde etmek üzere bir resim editöründe (Adobe Fireworks ya da Adobe Photoshop gibi) boyutları ayarlamanız gerekecektir. Resimlere İsim Atamak Resim isimleri, her ne kadar çoğunlukla görünmeseler de Web sayfalarının önemli bileşenlerindendir. Resimlere birer isim atamak genel olarak iyi bir alışkanlıktır ve bu isimler script yazarken nesneyi tanımlamak için kullanılır. Varlıklar Panelini Kullanarak Resim Eklemek Varlıklar paneli, sitenizin bileşenlerini Dreamweaver içinden düzenleme imkânı sağlar. Bu aracı, çeşitli medya ve sayfa elemanlarını görmek ve düzenlemek için kullanabilirsiniz. Örneğin bütün resimlerinizi düzenlemeniz zor olabilir; özellikle de büyük bir site üzerinde çalışıyorsanız. Varlıklar paneli ile bu resimleri kolayca takip edebilirsiniz. Varlıklar panelinin sol tarafında yer alan diğer düğmeler sitenizde kullanabileceğiniz farklı varlık (asset) tiplerini temsil eder. Bunların içinde renkler de yer alır. Varlıklar paneliyle iki şekilde çalışabilirsiniz. Paneli, Site listesiyle (sitenizdeki bütün resimlerin tam bir listesini içerir) ya da Sık Kullanılanlar listesiyle (sadece sizin sık kullanılan olarak işaretlediğiniz resimleri gösterir) görüntüleyebilirsiniz. Her iki görünümde de seçtiğiniz bir resmi sayfanıza ekleyebilirsiniz. Bir Resim Yer Tutucusu Eklemek Asıl resim henüz hazır değilse bir resim yer tutucusu da ekleyebilirsiniz. Belgenize bir resim yer tutucusu ekleyerek asıl resmin sayfada metinler, tablolar veya diğer elemanlarla birlikte nasıl görüneceği hakkında yaklaşık olarak bir fikir elde edebilirsiniz. Görüntü yer tutucusu eklemek için Ekle Paneli içinde Görüntüler açılır menüsünü seçin.

362 58 Bölüm 5 Resimlerle Çalışmak Açılan menüden Görüntü Yer Tutucuyu seçin

363 Bölüm 5 Resimlerle Çalışmak 59 Görüntü Yer Tutucu iletişim kutusu açılacaktır. Bu pencere içinde gerekli değerleri girebilirsiniz. Resim yer tutucusu belge penceresinde belirecektir. Resim Düzenleme Tercihlerini Ayarlamak Dreamweaver ile Web sayfaları oluştururken, kullandığınız resimlerde değişiklik yapma gereği duyabilirsiniz. Kapsamlı düzenleme işlemleri için resmi harici bir resim düzenleme programında açmanız ve gereken ayarlamaları o şekilde yapmanız gerekir. Dreamweaver bu işlemi, ilgili resmi, tanımladığınız bir programda hızlı bir şekilde açmanızı sağlayarak basitleştirir. Dreamweaver Düzen > Tercihler menü nesnesini seçin.

364 60 Bölüm 5 Resimlerle Çalışmak Tercihler iletişim kutusundaki Kategori listesinde Dosya Türleri / Düzenleyiciler i seçin.

365 Bölüm 5 Resimlerle Çalışmak 61 Gerekli tanımlamaları bu pencereden yapabilirsiniz. Resim Tabanlı Bağlantılar Oluşturmak Kendi sitenizdeki ya da diğer sitelerdeki belgelere bağlanmak için resimlerden de faydalanabilirsiniz. Bu uygulamada harici bir bağlantının nasıl oluşturulduğunu göreceksiniz. Resimleri sitenizdeki dosyalara bağlamak için önceki uygulamada kullandığınız teknikleri kullanabilirsiniz. Resimlere bağlantı oluşturmak için, bağ bilgisini gireceğiniz resmi seçin ve özellikler denetçisi içindeki bağ bölümüne dosya adını yazın. Resim Haritası Oluşturmak Önceki uygulamada bir resme bağlantı uygulamanın ne kadar kolay olduğunu görmüştünüz. Bağlı sayfaya gitmek için kullanıcının resmin herhangi bir yerine tıklaması yeterliydi. Resmi, aktif alan (hotspot) adı verilen çeşitli bağlı alanlara da bölebilirsiniz. Burada resme aktif alanları yerleştirmek için bir resim haritası (image map) kullanırsınız. Söz konusu aktif alanlar ille de dikdörtgen şeklinde olmak zorunda değildir, farklı şekillerde de olabilirler. Kavramsal olarak bakıldığında, resim haritaları coğrafi haritalarda kolayca kullanılabilir. Bununla birlikte herhangi bir resmi de resim haritası olarak kullanabilirsiniz. Özellikler denetçisindeki Eşlem metin alanına istediğiniz ismi yazabilirsiniz.

366 62 Bölüm 5 Resimlerle Çalışmak Bu alandaki şekil araçlarını seçerek resminiz üzerine resim alanları çizebilirsiniz. Resim alanını çizdikten sonra erişilebilirlikle ilgili bir uyarı görüntülenecektir. Resim haritası resim üzerinde belirecek ve özellikleri de özellikler denetçisinden erişilebilir olacaktır. Resmin bu bölümünde, isimlerin etrafında tutamaçlarla birlikte mavi-yeşil renkli yarı saydam bir alan belirecektir. Özellikler denetçisinde aktif alan özelliklerinin belirdiğine dikkat edin. Dreamweaver, Özellikler denetçisindeki Bağ metin alanına otomatik olarak bir boş bağlantı (#) yerleştirecektir. Yerine hemen bir bağlantı yazmayacaksanız bu karakteri silmeyin. Bu karakter, ilgili alanın tıklanabilir olduğunu göstermek için bir yer tutucu olarak görev yapar. Oluşturduğunuz aktif alanlar kolayca düzenlenebilir. Bunları istediğiniz zaman yeniden boyutlandırabilir, taşıyabilir ya da silebilirsiniz. Resim haritasıyla işiniz bittikten sonra İşaretçi Etkin Nokta Aracıyla resmin üzerinde aktif alan dışında başka bir yere tıklayabilirsiniz. Resim üzerinde resim alanının dışında farklı bir yere tıkladığınızda Özellikler denetçisindeki seçenekler resim özelliklerini gösterecek şekilde değişecektir. Bir aktif alanı taşımak isterseniz imleci aktif alanın içine yerleştirin ve sürükleyin. Aktif alan İşaretçi Etkin Nokta aracıyla seçildikten sonra ok tuşlarını kullanarak da aktif alanın konumunu ayarlayabilirsiniz. İşlemi gerçekleştirdikten sonra F12 ye basarak sayfalarınızı önizleyebilirsiniz.

367 Bölüm 5 Resimlerle Çalışmak 63

368 BÖLÜM 6 Tablolarla Çalışmak Tablo Oluşturmak Harici Tabloları Aktarmak Tablo Hücrelerini Kopyalamak ve Yapıştırmak Tablo Hücrelerini Seçmek ve Biçimlendirmek Tablo Özellikleri Hücre Özellikleri Tablo İçeriğini Sıralamak Tabloda Satır yada Sütünları Silmek Tablolara Satır yada Sütün Eklemek İçiçe Tablolar Farklı Ekran Çözünürlükleri İçin Uygun Boyutlar

369 Bölüm 6 Tablolarla Çalışmak 65 Tablolar, bilgileri düzenli bir şekilde sunmanızı sağlar. Tablolarda yer alan satırlar (rows) ve sütunların (columns) kesişimi hücreleri (cells) oluşturur ve tablo içeriğini bu hücrelere yerleştirirsiniz. Hücreleri birleştirerek daha büyük hücreler elde edebilirsiniz. Tablolar, hesap tablolarıyla sunulması gereken sekmeli (tabular) verilerden resimler ve HTML metinlerinin kombinasyonlarından oluşan görsel tasarımlara kadar pek çok farklı tipte içerik sunmak için kullanılabilir. Tablolar yerleşim düzenini kontrol etmek için kullanılabilir. İçeriği tablo hücreleri içinde düzenleyerek nesneleri sayfa üzerinde belirli konumlara yerleştirebilir ve daha karmaşık görsel tasarımlar oluşturabilirsiniz. Tablolar, tasarımcılara ve geliştiricilere sitelerinin yerleşim düzeni üzerinde kontrol imkânı sağlayan HTML elemanlarından biridir. Tablo Oluşturmak Bir tablonun tüm içeriği her zaman bir hücre içinde yer alır ve her tabloda bir ya da daha fazla hücre bulunur. Hücre (cell), bir satır (row) ve bir sütunun (column) kesişmesiyle oluşan alana verilen isimdir. Bir tabloda en az bir satır ve bir sütun olmalıdır; böylece bir hücre elde edilir. Ekle araç çubuğunda Mizanpaj kategorisini seçin ve Standart mod düğmesinin seçili olduğundan emin olun.

370 66 Bölüm 6 Tablolarla Çalışmak Varsayılan durumda Standart mod seçeneği etkin olmalıdır. Etkin mod, vurgulu bir düğmeyle gösterilir. Etkin tablo modu olarak Standart mod seçili değilse, Standart düğmesine tıklayın. Daha sonra ekleme noktanızı sayfanızın içinde istediğiniz bir noktaya koyarak yeni bir tablo eklemek için Ekle panelindeki Mizanpaj modundaki yada Ortak modundaki Tablo düğmesine tıklayın.

371 Bölüm 6 Tablolarla Çalışmak 67 Tablo iletişim kutusu üç bölüme ayrılmıştır Table Boyutu, Üstbilgi ve Erişebilirlik. Tablo Boyutu bölümünde şu seçenekler yer alır: Satırlar: Tablodaki satırların sayısını gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri 3 tür. Sütunlar: Sütun sayısını gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri 3 tür Tablo Genişliği: Piksel ya da Web tarayıcısı penceresinin bir yüzde değeri cinsinden tablo genişliğidir. Piksel cinsinden tanımlanan tablolar metin ve resimlerin hassas bir şekilde yerleştirilmesi açısından iyidir. Yüzde cinsinden tanımlanan tablolar ise sütunların orantıları asıl genişliklerinden daha önemliyse ideal bir seçenektir. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri 200 piksel olacaktır. Kenarlık Kalınlığı: Tablo kenarlığının genişliğini (kalınlığını) gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri 1 olacaktır. Hücre Dolgusu: Hücre içeriği ve hücre duvarları arasındaki boşluk miktarını gösterir. Bu seçeneği boş bırakırsanız, varsayılan değer olan 1 piksel kullanılır. Böyle bir boşluk kullanmak istemiyorsanız metin alanına 0 (sıfır) yazdığınızdan emin olun. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri boştur. Metin alanının sağında söz konusu boşluğu göstermek için mavi rengin kullanıldığı küçük bir tablo resmi göreceksiniz. Hücre Boşluğu: Tablo hücreleri arasındaki boşluk miktarıdır (kenarlık buna dahil değildir). Bu seçeneği boş bırakırsanız varsayılan değer olan 1 piksel kullanılır. Bunun için herhangi bir boşluk kullanmak istiyorsanız metin alanına 0 yazdığınızdan emin olun. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri boştur. Metin alanının sağında söz konusu boşluğu göstermek için mavi rengin kullanıldığı küçük bir tablo resmi göreceksiniz.

372 68 Bölüm 6 Tablolarla Çalışmak Bu özellikleri daha sonra da değiştirebilirsiniz. Belge penceresinde bir tablo seçildiğinde Tablo Boyutu bölümündeki seçeneklere Özellikler denetçisinden ulaşabilirsiniz. Tablo iletişim kutusunu daha önce kullandıysanız bu seçeneklerin varsayılan değerleri farklı olabilir. Bu durumda varsayılan değerler bir tablo için en son tanımladığınız değerler olacaktır. Üstbilgi bölümü üstbilgi için dört farklı yerleşim seçeneği içerir: Yok, Sol, Üst ve Her ikisi. Üstbilgi (header), içeriğinizi etiketlemek için kullandığınız bir satır ya da sütun başlığıdır. Üstbilgiler tasarım/yerleşim tablolarından (tasarım amacıyla görsel elemanların düzenlenmesi ve yerleştirilmesi için kullanılan tablolar) ziyade çoğunlukla veri tabloları (hesap tabloları gibi işlev gören tablolar) için kullanılır. Bir hücreyi (ya da hücreleri) üstbilgiye dönüştüren bu seçeneğe Özellikler denetçisi aracılığıyla da erişebilir ve istediğiniz zaman üzerinde değişiklik yapabilirsiniz. Sayfalarınızın ziyaretçileriniz açısından erişilebilirlik durumunu sürekli olarak dikkate almanız önemlidir. Erişilebilir sayfalar hazırlamanın amacı, olabildiğince çok ziyaretçi için (engelli olanlar da dahil olmak üzere) işlevsel bir içerik oluşturmaktır. Dreamweaver, Erişilebilirlik bölümü aracılığıyla erişilebilirlik özelliklerini en baştan itibaren dahil etmeyi çok kolay bir hale getirmektedir. Bu bölümde şu seçenekler yer alır:

373 Bölüm 6 Tablolarla Çalışmak 69 Resim Yazısı: Siz bir tablo açıklaması (caption) tanımladığınızda bu açıklama bütün kullanıcılar tarafından görülür ve tablonun üstüne, altına, soluna ya da sağına hizalanabilir. Bu seçeneği boş bırakırsanız herhangi bir tablo açıklaması eklenmez. Bu seçenek sadece Tablo iletişim kutusunda bulunur. Daha ileride bu özelliği dahil etmek isterseniz, HTML kodunu düzenleyerek bunu gerçekleştirebilirsiniz. Özet: Tablo özeti sayfada görüntülenmez. Ekran okuyucular tarafından okunur ve tablonun kullanılma amacını ve içeriğini açıklamak için kullanılır. Özet (summary), tablodaki materyali özlü, açıklayıcı ve olabildiğince kısa bir şekilde tanımlamalıdır. Tablonun içeriğinin ne olduğunu göstermelidir. Bu seçeneği boş bırakırsanız özet dahil edilmez. Sayfada, belirlediğiniz özelliklerle oluşturulmuş bir tablo belirecek ve otomatik olarak seçili durumda olacaktır. Tablonun üst kısmına bir tablo üstbilgisi (açık renkli gri çubuk) eklendiğine dikkat edin. Tablonun sol ve sağ sınırlarını gösteren yeşil renkli düşey çizgiler bu çubuğun iki yanında görüntülenir.

374 70 Bölüm 6 Tablolarla Çalışmak Çubuğun üst veya alt kısmı boyunca, ortasında tablonun genişlik değeri yazan ve bir menü oku bulunan yeşil bir çizginin uzandığını göreceksiniz. Çubuğun tabloya en yakın kısmında bir dizi kısa yeşil çizgi yer almaktadır. Sütunların genişliğini gösteren bu çizgilerin her biri kendi menü okuna sahiptir. Siz tablonun dışında bir yere tıkladığınızda tablo üstbilgisi kaybolur, tablo tekrar etkin duruma geldiğinde ya da seçildiğinde yine belirir. Tablo üstbilgisi, tablonun üst kısmındaki içeriği örtebilir. Eğer tablo belgenizdeki ilk öğeyse, tablo üstbilgisi tablonun alt kısmına eklenebilir. Çubuğun nerede görüntüleneceğini kontrol edemezsiniz. Görünüm > Görsel Yardımcılar > Tablo Genişlikleri komutunu seçerek tablo üstbilgisi görsel yardımcısını açabilir ya da kapatabilirsiniz.

375 Bölüm 6 Tablolarla Çalışmak 71 Onay işareti söz konusu seçeneğin etkin durumda olduğunu gösterir. Eğer yanında onay işareti yoksa seçenek kapalı durumda demektir. Tabloyla tablo açıklamasını çevreleyen ve alt ve sağ yanında seçim tutamaçları bulunan siyah düz bir dış hat (outline), tablonun seçili durumda olduğunu gösterir. İki satır ve dört sütun, tablo açıklamasını çevrelemeyen gri bir kenarlıkla gösterilir. Varsayılan Hücre Dolgusu değerinin uygulanmasından dolayı hücrelerin arasında bir boşluk görebilirsiniz. Çünkü Hücre Boşluğu seçeneği boş bırakılmıştı. Siz yazıp diğer hücrelere geçmeye devam ettikçe tablo metni sığdırmak için sütunların genişliğini otomatik olarak değiştirebilir. Hücreler arasında hareket etmek için Tab tuşunu ya da ok tuşlarını kullanabilirsiniz. Tab tuşu, sağda yer alan bir sonraki hücreye ya da satırın en sonundayken alttaki satırın ilk hücresine (en soldaki hücre) geçmek için en hızlı yöntemdir. İçeriği bulunan bir hücreye Tab tuşunu kullanarak geçtiğinizde o hücrenin içeriği seçili hale gelir. Eğer tabloyu eklerken en üst satırı üst bilgi satırı olarak tanımladıysanız içine yazdığınız metinler koyu renkte ve ortalanmış olarak karşınıza çıkacaktır. Tablonun dışına tıkladığınızda sütunlar genişlikleri değişerek hafifçe kayabilirler. Harici Tabloları Aktarmak Dreamweaver içine harici tabloları, Microsoft Office programlarından aktarabilirsiniz. Bunun için yapmanız gereken ilgili tabloyu kopyalamak ve HTML sayfanızın içine yapıştırmaktır.

376 72 Bölüm 6 Tablolarla Çalışmak Tablo Hücrelerini Kopyalamak ve Yapıştırmak Hücreler, ekleme noktasının bulunduğu bir konuma yapıştırılabilir ya da mevcut bir tablodaki seçimin yerine konabilir. Birden fazla tablo hücresini yapıştırmak istiyorsanız panonun (clipboard) içeriği tablonun ya da yapıştırılan hücrelerin tabloda yerine geçeceği seçimin yapısına bütünüyle uymalıdır. Bir hücreyi kopyalayıp bunu seçili bir hücrenin yerine geçecek şekilde yapıştırabilirsiniz. Bütün satırları bir tablonun sonuna yapıştırırsanız satırlar tabloya eklenir. Yapıştırma işlemini bir ya da daha fazla hücreyi değiştirmek amacıyla yapıyorsanız, pano içeriğinin seçilen hücrenin (ya da hücrelerin) yapısına uyması durumunda seçilen hücrenin (ya da hücrelerin) içeriği kopyalanmış olanlarla değiştirilir. Hücreyi ya da hücreleri bir tablonun dışına yapıştırıyorsanız, satırlar, sütunlar veya hücreler yeni bir tablo tanımlamak için kullanılır. Hücrelerin içeriğini silmeniz, ama aynı zamanda hücrelerin kendisini aynı şekilde bırakmanız gerekiyorsa bir ya da daha fazla hücreyi seçin (tüm satırı ya da sütunu değil), ardından da Düzen > Temizle komutunu seçin veya Sil tuşuna basın. Bütün bir satırı silmeniz gerekiyorsa imleci sürükleyerek satırdaki bütün hücreleri seçin ve Sil tuşuna basın. Silmek için önce bu tabloyu seçmeniz gerekir. Dreamweaver, tablo seçmek için kullanabileceğiniz birkaç yöntem sunar. Tablo yapısının karmaşıklığına bağlı olarak bazı yöntemler diğerlerine göre daha kolaydır. Bir tabloyu, sol üst köşesine veya sağ ya da alt kenarında bir yere tıklayarak da seçebilirsiniz. Kenarlardan birine yaklaştırdığınızda imleç okunun yanında bir tablo simgesi belirecektir. Tıklamadan önce imleci görene kadar bekleyin. Bir tabloyu seçmek için kullanabileceğiniz bir diğer yöntem de tablonun içinde bir yere tıklayıp ardından Değiştir > Tablo > Tablo Seç komutunu seçmek şeklindedir.

377 Bölüm 6 Tablolarla Çalışmak 73 Tabloyu seçmek için gri çubuk boyunca uzanan yeşil renkli yatay tablo genişlik çizgisine de tıklayabilirsiniz. Seçildikten sonra tablonun etrafında seçim tutamaçları belirir ve bütün tabloyu siyah bir kenarlık çevreler. Siyah kenarlık sadece bir ya da birden fazla hücrenin etrafını sarmaz, tüm tabloyu kapsar. Eğer ekleme noktası tablonun içindeyse ve tablo seçili durumda değilse Etiket Seçici de <table> etiketinin yanında <tr> ve <td> etiketlerini de görebilirsiniz. <tr> etiketi, tablo satırını temsil eder. <td> etiketi tablo verisini temsil eder ve hücre olarak da bilinir. Bir <td> etiketini seçtiğinizde ilgili hücre seçili hale gelir ve Özellikler denetçisini kullanarak bu hücre üzerinde değişiklik yapabilirsiniz. İmleç bir hücrenin içindeyken Ctrl+A klavye kısayolunu kullandığınızda hücre seçili hale gelir. Bu kısayolu ikinci kez kullandığınızda tüm tablo seçilir. Tablo Hücrelerini Seçmek ve Biçimlendirmek Bir tablodaki tek bir satırı, tek bir sütunu ya da tablodaki bütün hücreleri kolayca seçebilirsiniz. Bunun için satır a soldan yada sütuna üstten yaklaştığınızda ok işareti çıkar. Bu ok işareti çıktığında tıklamanız satırı seçmenizi sağlayacaktır. Bir tablodaki komşu olmayan hücreleri de (birbirine değmeyen hücreler) seçebilir ve bunların özelliklerinde değişiklik yapabilirsiniz. Ancak komşu olmayan hücreleri kopyalayıp yapıştıramazsınız. Bir tablo içinde birbirine komşu olmayan hücreleri seçmek istediğinizde klavyeden CTRL tuşuna basılı tutarak hücrelere 1 kere tıklayın. Böylece birbirine komşu olmayan hücreleri seçmiş olursunuz. İmleci bir hücrenin üzerinde hareket ettirirken Ctrl tuşunu basılı tuttuğunuzda, ok imlecinin yanında birden fazla hücre seçtiğinizi göstermek üzere dış hatları belirgin bir kare belirebilir.

378 74 Bölüm 6 Tablolarla Çalışmak Tablo Özellikleri Herhangi bir tabloyu seçtiğinizde özellik denetçisi içinde bu tablo ile ilgili özellikler belirecektir. Bu özellikler aşağıdaki gibidir. Tablo Kimliği: Tablonun başlığını girebileceğiniz alandır. Bu alan sizin tablonuzu sayfa içinde eşsiz bir şekilde tanımlayabileceğiniz alanı belirler. Satırlar: Tablolarınızın satır sayısını ayarlayabileceğiniz alan. Sütunlar: Tablolarınızın sütun sayısını ayarlayabileceğiniz alan. G: Tablolarınızın genişliğini ayarlayabileceğiniz alan. Buradan tablo genişliğinizi piksel yada yüzde olarak ayarlayabilirsiniz. Hücre Dolgusu: Hücrelerinizin içindeki nesnelerle duvarları arasındaki uzaklığın piksel olarak değeri. Hücre Boşluğu: Hücre arası boşluklarınızın piksel olarak değeri. Hizala: Tablonuzun sayfanız içindeki yatay hizalaması Kenarlık: Tablolarınızın kenar kalınlığı. Bu kalınlık değeri, eğer tablolarınızı tasarım elemanı olarak kullanıyorsanız 0 olarak ayarlanmalıdır. Hücre Özellikleri Tablo özelliklerini düzenleyebileceğiniz gibi, tablolarınızın her bir hücresinin yada çoklu seçim yaptıysanız hepsinin özelliklerini de bir arada değiştirebilirsiniz. Bunun için özelliklerini değiştirmek istediğiniz hücreye tıklamalı veya birden fazla hücre için bu işi yapacaksanız o hücreleri CTRL tuşuna basarak seçmelisiniz. Seçilen hücreleri yayılmaları kullanarak birleştir: Bu seçenekle birbirine komşu iki hücreyi birleştirebilirsiniz. Seçilen hücreleri satır yada sütunlara böler: Bu seçenek ile seçilen hücreleri satır yada sütunlara bölebilirsiniz. Yatay: Hücre içindeki yatay hizalamayı belirler. Dikey: Hücre içindeki dikey hizalamayı belirler. Gen: Sütünün genişliğini belirler.

379 Bölüm 6 Tablolarla Çalışmak 75 Yük: Satırın yüksekliğini belirler. Bg: Hücre arkaplan renginizi belirler. Burada vermiş olduğunuz değer tabloya vermiş olduğunuz arkaplan değerinin üzerinde gözükür. Sarma Yok: Yazılarınızın tablo küçüldüğünde bir alt satıra inmesini engeller. Üstbilgi: İşaretlendiği hücrenin başlık formatında gözükmesini sağlar. Tablo İçeriğini Sıralamak Tek bir sütunun içeriğini alarak basit bir tablo sıralaması yapabilirsiniz. İki sütunun içeriğini temel alarak daha karmaşık bir sıralama işlemi de gerçekleştirmek mümkündür. Birleştirilmiş hücreler içeren tablolarda sıralama yapamazsınız. Sıralama yapmak için, tabloyu seçin ve arkasından Komutlar > Tabloyu Sırala komutunu seçin. Tabloyu Sırala penceresi açılacaktır.

380 76 Bölüm 6 Tablolarla Çalışmak Bununla Sırala: Sıralamada temel alınacak sütunu seçmek için kullanabilirsiniz. Sıralama: Sütunu alfabetik olarak mı yoksa sayısal olarak mı sıralayacağınızı belirler. Bu seçeneğin önemi, içeriği sayısal olan sütunlarda ortaya çıkar. Bir ve iki basamaklı sayılarla numaralandırılmış bir listeyi alfabetik olarak sıralarsanız, normal bir sayısal sıralama yerine (1, 2, 3, 10, 20, 30 gibi) alfanümerik bir sıralama elde edersiniz (1, 10, 2, 20, 3, 30 gibi). Sıralama düzeni için azalan (A dan Z ye veya artan) seçeneğini işaretleyin (varsayılan). Sonra Bununla: Bu uygulamada bu seçeneği boş (varsayılan) bırakın. Sonra Bununla ile farklı bir sütunda ikincil bir sıralama gerçekleştirebilirsiniz. Menüdeki sıralama seçenekleri Bununla Sırala dakilerle aynıdır. Sıralama ilk satırı içerir: Bu seçenekle ilk satırın sıralamaya dahil edilip edilmeyeceğini belirleyebilirsiniz. Eğer ilk satır başka bir yere taşınmaması gereken bir üstbilgiyse bu onay kutusunu işaretlemeden bırakın (varsayılan). Üst bilgi satırlarını sırala: Üstbilgi satırlarını göster. Alt bilgi satırlarını sırala: Altlık satırlarını göster. Sıralama tamamlandıktan sonra tüm satır renklerini aynı şekilde koruyun: Bir satırın herhangi bir niteliğini değiştirdiyseniz, bu seçeneği işaretleyerek satırdaki ilgili niteliğini eski değerine getirebilirsiniz. İlk satırına belirli bir renk atanmış olan bir tabloyu sıraladığınızı farz edelim. Sıralamadan sonra ilk satırdaki veriler ikinci satıra kayar. Bu seçenek işaretlendiğinde verilerle birlikte renk de ikinci satıra kayar. Eğer bu seçenek işaretli değilse renk ilk satırda kalır. Tabloda Satır yada Sütünları Silmek Tablonuzdan satır yada sütunu seçtikten sonar klavyenizden sil butonuna basarak yada menüden Değiştir > Tablo > Satır Sil yada Sütun Sil seçeneğini seçerek silme işlemini gerçekleştirebilirsiniz.

381 Bölüm 6 Tablolarla Çalışmak 77 Tablolara Satır yada Sütün Eklemek Tablolarınıza satır yada sütun eklemek isterseniz yapmanız gereken eklemek istediğiniz satır yada sütun içinde bir hücreye tıkladıktan sonra Değiştir > Tablo > Satır Ekle yada Sütun Ekle seçeneğine tıklamaktır.

382 78 Bölüm 6 Tablolarla Çalışmak Eğer aynı menüden Satır veya Sütun ekle seçeneğini işaretlerseniz aşağıdaki gibi bir iletişim kutusu karşınıza çıkacaktır. İçiçe Tablolar Tabloları tek başına kullanabileceğiniz gibi aynı zamanda içiçe olacak şekilde de kullanabilirsiniz. Bu işlem ile tablolarınızı sayfa tasarımı için daha gelişkin olarak kullanabilirsiniz. Bu işlemi yapmak için bir tablo ekledikten sonra tablonun içinde herhangi bir hücreye tıklayarak farklı özelliklerde bir başka tablo daha ekleyebilirsiniz. Farklı Ekran Çözünürlükleri İçin Uygun Boyutlar Ziyaretçilerinizin ekran çözünürlükleri birbirinden çok farklı olabilir. Bu durumda bu farklı çözünürlüklere hitap edecek farklı boyutlarda tablolar hazırlamanız gerekebilir. Bu durumda yapmanız gereken hedef kitlenize uygun bir tablo genişliği seçmektir. Tablo genişlikleri ile ilgili uygun boyutlar aşağıdaki gibidir. Çözünürlük (Piksel) Cihaz 160 X 160 Palm tipi cihazlar 240 X 320 Cep bilgisayarı 544 X 372 Web TV 640 X 240 Windows CE 640 X inç lik monitör 800 X inç lik monitör 1024 X inç lik monitör 1200 X inç lik monitör

383 Bölüm 6 Tablolarla Çalışmak 79

384 BÖLÜM 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Sayfalarınıza Flash Animasyonları Eklemek Kullanıcı Etkileşimi Bir Rollover Resmi Eklemek Bir Durum Çubuğu Mesajı Oluşturmak Yeni Bir Tarayıcı Penceresi Açmak Ajax Eklentileri

385 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 81 Adobe Flash ve QuickTime filmleri gibi multimedya elemanları, sitenizde sunduğunuz içeriği geliştirmenizde size yardımcı olabilir. Bu elemanları kullanarak sitenizin ziyaretçilerine mesajınızı iletmek üzere sitenize animasyonlar ve videolar ekleyebilirsiniz. Sayfalarınıza Flash Animasyonları Eklemek Sayfalarınıza Flash animasyonu eklemek için Ortak sekmesindeki çoklu ortam bileşenleri menüsüne tıklayarak Flash ı seçmeniz yeterli olacaktır. Resimlerde olduğu gibi Varlıklar panelini kullanarak belgelerinize Flash animasyonları da ekleyebilirsiniz. Flash animasyonu eklemek için Ekle panelinden Ortam açılır menüsüne tıklayın ve Flash seçeneğini seçin. Flash animasyonu eklenirken erişilebilirlik penceresi açılacaktır.

386 82 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Herhangi bir Flash animasyonunu sayfanıza eklediğinizde özellikler paneli aşağıdaki gibi değişir. Buradaki alanlar: Gen: Genişlik Yük: Yükseklik Dosya: Dosyanın sitenizdeki yeri Kaynak: Bu dosya için orijinal FLA dosyanız varsa onun yeri Düzenle: Bu dosyanın orijinal FLA dosyasını açıp düzenlemeniz için gerekli buton D Boşluk: animasyonun sağında ve solunda verilecek dikey boşluk Y Boşluk: Animasyonun üstünde ve altında verilecek yatay boşluk Kalite: Animasyonun hangi kalitede oynayacağı. Bu ayarı eğer ziyaretçilerinizin düşük bilgisayar konfigürasyonları olduğunu düşünüyorsanız değiştirin. Oynat/Çal: Animasyonu DW içinde önizlemek istiyorsanız gerekli buton Parametreler: Flash animasyonuna göndermek istediğiniz parametreleri burada belirtebilirsiniz. Hizala: Flash animasyonunu etrafındaki başka bir nesneye göre hizalama seçeneği Wmode: Flash ın görünüm parametresi Ölçek: Flash animasyonunun genişliğinin %100 olması durumunda bu boyuta gelirken eğer deforme olmasını istemiyorsanız Kenarlık Yok seçeneğini, eğer deforme olmasında sakınca yoksa Tam Sığma seçeneğini seçebilirsiniz.

387 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 83 Kullanıcı Etkileşimi Etkileşim ve kullanıcı geribildirimi, Web sitelerinin önemli bileşenleridir. Bunları etkin bir şekilde kullanarak çeşitli avantajlar elde edebilirsiniz. Bu bileşenleri kullanarak örneğin ziyaretçilerinizin sitenizin içeriğini ve amacını daha iyi anlamalarına yardımcı olabilir, sayfalarınızda dolaşmalarını kolaylaştırabilir ve sitenizde gezmeyi onlar için daha hoş ve faydalı bir deneyim haline getirebilirsiniz. Bir Web sitesine etkileşim eklemenin pek çok yolu vardır. Etkileşimli sayfalar oluşturmak için kullanabileceğiniz birçok araca örnek olarak dinamik ve veritabanı destekli sayfalar, Adobe Flash ve QTVR ı (Quick Time Virtual Reality) verebiliriz. QTVR, 360 panoramik görünümleri ve etkileşimli bileşenleri destekleyen filmlerdir. Etkileşimli Web siteleri oluşturmak için kullanılan araçların en yaygın ve etkili olanlarından biri (özellikle istemci taraflı script lerin yazılmasında kullanılan) JavaScript tir. İstemci taraflı script ler, Web sayfalarında bulunan ve tarayıcı tarafından işlenen script lerdir. JSP (Java Server Page) tarafından kullanılan script ler de dahil olmak üzere diğer script ler, sunucu taraflı script lerdir. Bunlar sunucu tarafından işlenir ve kullanıcıya gönderilir. Adobe Dreamweaver, standart JavaScript fonksiyonlarının kullanılma sürecini ve davranışlarını kullanıma sunarak basitleştirir. Davranışlar (behavior) Web sitenize kolaylıkla dahil edebileceğiniz önceden yazılmış JavaScript kod rutinleridir. Davranış, bir kullanıcı olayını (örneğin imlecin Web tarayıcısındaki grafik tabanlı bir düğmenin üzerine getirilmesi), bu olayın sonucu olarak gerçekleşen bir eylemle ya da bir dizi eylemle birleştirir. Davranışları sayfalarınıza etkileşim eklemek, kullanıcıların eylemlerine bağlı olarak geribildirim almalarını ve gördükleri bilgileri değiştirmelerini ya da değiştiremiyorlarsa kontrol etmelerini sağlamak için kullanabilirsiniz. Dreamweaver da önceden tanımlanmış bir dizi davranış bulunmaktadır. İlave davranışlar ekleyerek Dreamweaver ı geliştirebilir ya da JavaScript konusunda yeterli bilgiye sahip iseniz kendi davranışlarınızı oluşturabilirsiniz. Bir Rollover Resmi Eklemek Web sayfalarında JavaScript en çok rollover oluşturmak için kullanılır. (Rollover, kullanıcı imleci üzerine getirdiğinde değişen bir resimdir.) Rollover lar, iki resmin kullanımını aynı alanda birleştirir. Bir ziyaretçi rollover ların kullanıldığı bir sayfaya ilk girdiğinde, bu resim kombinasyonları orijinal durumlarında görüntülenir. İmleç rollover resminin üzerine getirildiğinde, bunun yerini yeni bir resim alır. Yeni resim, bazen resmin on ya da over durumu olarak adlandırılır. Kullanıcı imleci resimden uzaklaştırdığında, resim orijinal haline geri dönebilir ya da değişmiş olarak kalır. Rollover, etkileşimin temel bir uygulamasıdır. Kullanıcının imleci resmin üzerine getirme işlemine bir yanıt verir. Bu yanıt, genellikle mevcut resimde görsel bir efekt (örneğin bir düğmenin aydınlatılması, bir sekmenin vurgulanması ya da bir gezinti elemanının etkin görünmesini sağlamak için derinliğin değiştirilmesi) olarak görünür. Rollover yanıtında ayrıca, yeni resme içeriğin tanımı ya da açıklaması gibi ilave bilgiler de eklenebilir.

388 84 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Web sitesindeki etkileşim, özellikle kullanıcı açısından önemlidir. Bu, ziyaretçi ile Web sitesi arasında gerçekleşen bir şeydir. Etkileşimin sağlanması için bir hareket ve bir yanıt gerekir; yani bu iki yönlü bir iletişim sürecidir. Sayfalarınıza etkileşim eklemeniz (yani ziyaretçilerin eylemlerine sitenizin vereceği yanıtı belirlemeniz), sitenize yapılan ziyaretlerin karmaşıklık derecesini ve derinliğini artırabilir. Ziyaretçileri belirli eylemler gerçekleştirmeye ya da katılımda bulunmaya teşvik eden Web siteleri, kullanıcı üzerinde yaratılan etki açısından, kullanıcıyı pasif bir konumda tutan sitelere göre muhtemelen daha başarılı ve işlevseldir ve akılda daha çok kalır. Dreamweaver da, hiç HTML ya da JavaScript kodu kullanmadan rollover lar oluşturabilirsiniz. Rollover, Ekle çubuğunun Ortak kategorisinde yer alan basit bir davranıştır. Bu yöntemi kullandığınızda, davranış Dreamweaver tarafından oluşturulur. Sayfanıza Rollover resmi eklemek için öncelikle Ekle panelindeki Ortak sekmesine tıklayın. Bu panelde daha önce resim eklediğiniz butona tıklayın ve açılan menüden Rollover Görüntüsü seçeneğini seçin. Dreamweaver, rollover oluşturma işleminde bu iletişim kutusu aracılığıyla size adım adım yardımcı olur. Rollover oluşturmak için kullanacağınız resimleri henüz sayfaya yerleştirmediyseniz bu yöntemi kullanmayı tercih edebilirsiniz, çünkü bu yöntemle aynı anda hem resmi ekleyebilir, hem de bunu rollover olarak tanımlayabilirsiniz.

389 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 85 Bir rollover resmi eklemek için ayrıca Ekle > Görüntü Nesneleri > Rollover Görüntüsü komutunu seçip yine aynı iletişim kutusunu kullanmanız da mümkündür. Görüntü adı bölümüne bir isim yazarak resmi adlandırabilirsiniz. Buraya bir isim yazmazsanız Dreamweaver resimleri kendisi adlandıracaktır. Orijinal Görüntü alanındaki Gözat... butonunu seçerek orijinal resim olarak gözükecek resmi seçin. Rollover Görüntüsü, imleç orijinal resmin üzerine geldiğinde değişeceği ikincil halinin dosyasıdır. Rollover görüntüyü önceden yükle kutucuğunu işaretlediğinizde ikincil resim daha ona ihtiyaç olmadan sayfanızın içine ön yükleme ile yüklenir. Böylece kullanıcıların resmin üzerine geldiğinde ikincil resmin çıkması için beklemesi engellenmiş olunur. Alternatif metin, resimler için kullandığımız ALT alanı ile aynı işlevi görmektedir. Tıklandığında URL ye git seçeneği ise resme verdiğiniz linki göstermektedir.

390 86 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Resme eklediğiniz davranışlar, Davranışlar panelinde görülmektedir. Eğer daha önceden eklenmiş resimleriniz varsa onlara da rollover davranışını ekleyebilirsiniz. Bunun için yapmanız gereken rollover ekleyeceğiniz resmi seçmek ve Davranışlar panelini açmak olacaktır. Daha sonra resminiz halen seçili iken Davranışlar panelinden + butonuna basarak, Görüntü Değiştir seçeneğini seçmelisiniz. Açılan iletişim kutusunda seçtiğiniz resim liste içinde seçili olarak karşınıza gelecektir. Kaynağı buna ayarla seçeneğinin yanındaki Gözat... butonuna tıklayarak yeni ikincil resminizi seçebilirsiniz. Bu eklemiş olduğunuz davranış da, resmi seçtiğinizde, Davranışlar panelinde gözükecektir. Bir davranışı silmeniz gerekirse, belge penceresinde davranışı içeren nesneyi ve Davranışlar panelinde silmek istediğiniz eylemi seçin, sonra da Davranışlar panelinin üst kısmındaki eksi ( ) işaretli düğmeye tıklayın. Bir davranışı, seçtikten sonra Backspace tuşuna basarak da silebilirsiniz. Bir davranış eklediğinizde bu davranışın ortaya çıkması için bir olayın meydana gelmesi gereklidir. Örneğin kullanıcının imlecini bir resmin üzerine götürmesi yukarıda anlattığımız rollover işlemi için gerekli bir olaydır. Bu tür olaylara bir tetikleyici olay yada tetik deriz. Rollover davranışını eklediğiniz resmi seçtiğinizde Davranışlar panelinde soldaki sütunda bu işlemin gerçekleşmesi için gerekli tetikler görünmektedir. Rollover davranışı için varsayılan tetik onmouseover, yani farenin nesnenin üzerine gitmesidir. Ancak isterseniz açılan menüden bu davranışı değiştirebilirsiniz ve kendi çalışmanıza uygun başka bir tetik seçebilirsiniz. Sayfanıza bir davranış eklediğinizde bu davranış ile ilgili javascript kodları sayfanızın içine eklenir. Böylece amaçladığınız etkileşim oluşturulmuş olur. Davranışları ekledikten sonra sayfanızın Kod görünümüne dönerek davranışlarla ilgili javascript kodlarını inceleyebilirsiniz. Bir Durum Çubuğu Mesajı Oluşturmak Durum çubuğu mesajı, kullanıcılara bağlantıların onları nereye götüreceği konusunda ek bilgi vermek için kullanılabilir. Tarayıcı penceresinin alt kısmındaki durum çubuğunda görünen bu mesaj, bağlı sayfaya giden URL ya da yolun yerini alır. Oluşturacağınız durum çubuğu mesajı sadece sayfanın Internet Explorer ya da Mozilla tarayıcılarda açılması durumunda görünür. Bu mesajın görünmesi için hangi nesneye bu etkileşimi ekleyecekseniz o nesneyi seçmelisiniz (resim, link yada sayfanın body etiketi). Daha sonra Davranışlar penceresinden + işaretine tıklayın ve Metni Ayarla > Durum Çubuğu Metni Ayarla seçeneğini seçin. Açılan iletişim kutusunun içine gözükmesini istediğiniz mesajı yazdıktan sonra tamam butonuna basarak pencereyi kapatabilirsiniz. Böylece sayfanızı bu davranışı eklemiş olursunuz.

391 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 87 Yeni Bir Tarayıcı Penceresi Açmak Sayfanız içinde en çok kullanabileceğiniz davranışlardan bir tanesi bir linke tıkladığınızda bu linkin içeriğinin yeni bir pencerede açılmasını sağlamaktır. Bu yeni pencereyi reklamlar, terimler ya da başka bilgileri görüntülemek için kullanabilirsiniz. _blank hedefini standart bir bağlantı ile birlikte kullanarak bir tarayıcı penceresi açabilirsiniz, ama bu yeni pencerenin niteliklerini hiçbir şekilde kontrol edemezsiniz. Diğer yandan, Tarayıcı Penceresini Aç seçeneği, yeni tarayıcı penceresinin büyüklüğü ile birlikte kaydırma çubukları ve menü çubukları gibi çeşitli niteliklerini kontrol etmenize imkân sağlar. Tarayıcı Penceresini Aç seçeneğini eklemek kolay olsa da, bunu bir Web sayfasında kullanmadan önce iyi düşünün. Ekstra bir pencerenin gerekli olduğundan emin olun. Kullanıcılar Web de dolaşırken sürekli olarak açılan yeni pencerelerden genellikle rahatsız olurlar. Bunları makul bir seviyede tutmak önemlidir. Yeni tarayıcı pencereleri oluştururken ya da başka davranışları kullanırken, ziyaretçilere sunduğunuz geribildirim ya da etkileşim seçeneklerinin miktarını göz önünde bulundurmayı unutmayın ve çok az (bu durumda kullanıcıya yeterli bilgi sunulmaz) ve çok fazla (bu da genellikle zorlayıcı olabilir) arasında gereken dengeyi kurun. Ziyaretçilerin Web siteleriyle ve diğer ortamlarla ilgili daha önceki deneyimlerini anlamanız, onların sitenizi ziyaret ettiklerinde ve sitenizle etkileşime girdiklerinde karşılaşacakları şeyleri daha iyi belirlemenize yardımcı olacaktır. Yeni bir davranış eklemek için Davranışlar panelindeki artı düğmesine (+) tıklayın ve ardından açılan listeden Tarayıcı Penceresini Aç ı seçin.

392 88 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Bu işlem sonrasında yeni tarayıcı penceresi iletişim kutusu karşınıza çıkacaktır. Gezinti araç çubuğu: Aralarında Back (Geri), Forward (İleri), Home (Giriş) ve Reload (Yenile) düğmelerinin de bulunduğu tarayıcı düğmeleri. Konum araç çubuğu: Aralarında location (konum) alanının da bulunduğu tarayıcı seçenekleri. Durum çubuğu: Tarayıcı penceresinin alt kısmında bulunan ve mesajların (kalan yükleme süresi ve bağlantılarla ilişkili URL ler gibi) görüntülendiği alandır. Menü çubuğu: Tarayıcı penceresinin (sadece Windows ta) File (Dosya), Edit (Düzenle), View (Görünüm), Go (Git) ve Help (Yardım) gibi menülerin göründüğü alanıdır. Kullanıcıların yeni pencerede gezinti imkânına sahip olmalarını istiyorsanız bu seçeneği ayarlamanız gerekir. Eğer bu seçeneği ayarlamazsanız, kullanıcılar yeni pencerede sadece pencereyi kapatma ya da minimum boyuta getirme seçeneklerine sahip olurlar.

393 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 89 Gerektiğinde kaydırma çubuklarını görüntüle: İçeriğin görünür alanın dışına taşması durumunda kaydırma çubuklarının görüntülenmesi gerektiğini belirtir. Bu seçeneği ayarlamadığınız takdirde, kaydırma çubukları görüntülenmeyebilir. Bunun yanında Yeniden Boyutlandırma Tutamaçları seçeneğinin etkinliği de kaldırılırsa, ziyaretçiler içeriğin pencerenin orijinal boyutlarına sığmayan kısmını hiçbir şekilde göremeyebilir. Eğer durum böyleyse, pencerenin sayfanın içeriğine uygun olacak şekilde boyutlandırıldığından emin olmanız gerekir. Pencerenin çok küçük ya da çok büyük olması ve kaydırma çubuklarının bulunmaması ziyaretçiler açısından sinir bozucu bir durumdur. Bazı Web tarayıcıları bu ayarı (yeniden boyutlandırma tutamaçları ayarıyla birlikte) dikkate almaz ve gerektiğinde kullanır. Yeniden boyutlandırma tutamaçları: Kullanıcıların pencerenin boyutlarını, pencerenin sağ alt köşesini sürükleyerek ya da sağ üst köşedeki Maximize (Ekranı Kapla) düğmesine (Windows ta) veya boyutlandırma kutusuna (Macintosh ta) tıklayarak değiştirebilmeleri gerektiğini belirtir. Bu seçeneği ayarlamadığınız takdirde, boyut değiştirme kontrolleri genellikle kullanılamaz durumda olur ve kullanıcı pencerenin boyutlarını değiştiremez. Pencere ismi: Yeni pencerenin ismidir. Yeni pencereyi bağlantılar için hedef olarak tanımlamak ya da JavaScript ile kontrol etmek istiyorsanız, bu pencereyi adlandırmanız gerekir. Ajax Eklentileri Dreamweaver yeni sürümü ile birlikte kolay Ajax uygulamaları geliştirebileceğiniz Spry Framework özelliği ile gelmektedir. Spry, Adobe tarafından dünya üzerinde en çok kullanılan Ajax yöntemlerinin içinden özenle seçilmiş bir koleksiyondur. Dreamweaver içinde gelen Spry aslında bir JavaScript kütüphanesidir. Aynı davranışlar gibi size birkaç adımda kolay olarak sayfalarınıza Ajax kontrolleri eklemenizi sağlarlar. Spry Akordeonu, Spry Sekmeli Paneller, Spry Daraltılabilir Panel Spry kütüphanesi içinde veri ile çalışabileceğiniz özellikler olduğu gibi görsel öğeler de bulunmaktadır. Bu görsel öğelerden herhangi birini eklemek için yapmanız gereken Ekle panelindeki Spry grubunu açmaktır.

394 90 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Spry sekmesinde eklemek Spry Akordeonu butonuna tıklayın. Diğer görsel öğelerin kullanımı da benzer şekildedir.

395 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 91 Bu butona bastığınızda sayfanızın içine bir akordeon menü eklenecektir. Bu menü ile sayfalarınız içinde sınıflandırmak istediğiniz alanları açılır kapanır bir menü şeklinde kullanabilirsiniz. Sayfanızı Dosya > Kaydet seçeneği ile kayıt ettiğinizde Dreamweaver size bu eklentiyi ilk kez kullandığınızda ilgili Javascript dosyalarını kopyalamanız gerektiğini söyleyecektir. Bu pencerede Tamam seçeneğini seçin. Bu dosyalar SpryAssets klasörü altına yerleştirilecektir. Bu dosyalar SpryAssets klasörü altına yerleştirilecektir. Sitenizi sunucunuza atarken, bu dosyaları atmayı unutmayın.

396 92 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri Yukarıdaki resimde akordeon kontrolü eklediğinizde sayfanın içeriğini görmektesiniz. Yeni bölümler eklemek için Paneller başlığının yanındaki + işaretine tıklayabilir var olan bir bölümü silmek için işaretine tıklayabilirsiniz. Yukarı ya da aşağı okları ile bölümlerin sırasını değiştirebilirsiniz. F12 ye basarak dosyanızı varsayılan tarayıcınızda önizleyebilirsiniz. Diğer Spry görsel panelleri de aynı özelliklere sahiptir.

397 Bölüm 7 Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri 93

398 BÖLÜM 8 Formlarla Çalışmak Formun Oluşturulması Form İçeriğini Gruplamak Tek Satırlı Metin Alanları Eklemek Radyo Düğmeleri Eklemek Onay Kutuları Eklemek Liste ve Menü Öğeleri Eklemek Çok Satırlı Metin Alanları Eklemek Buton Eklemek Gizli Alanlar Oluşturmak

399 Bölüm 8 Formlarla Çalışmak 95 Kimi zaman Web sitenizi ziyaret eden insanlardan bilgi almanız gerekebilir. Bu bilgiler içinde insanların siteyle ilgili düşünceleri, kullanıcı kayıt verileri, anket cevapları ve ürün satın alma bilgileri (e-ticaret) sayılabilir. Farklı tipte bilgiler toplamaktan ziyaretçilerin siteyle etkileşime girmesini sağlamaya kadar pek çok işleve sahip olan formlar, veri elde etmenizi sağlayan kullanıcı arabirimleridir. Formlarla ziyaretçilerinizden belirli konularla ilgili bilgi alabilir ya da onlara geribildirim, soru ya da istek gönderme imkânı tanıyabilirsiniz. Ziyaretçi kayıt işlemleri ve ürün siparişleri genellikle formlarla sağlanan bir işlevselliği gerektirir. Formlar veritabanlarıyla sıkça kullanılır ve ziyaretçilerin arama yapmalarını ve bir veritabanına dahil edilecek bilgileri göndermelerini sağlayabilir. Formlar alan (field) adı verilen ve ziyaretçinin bilgi girdiği bazı bileşenler içerir. Bu alanların arasında metin alanlarını, radyo düğmelerini, onay kutularını, menüleri ya da listeleri sayabiliriz. Form verileri genellikle bir sunucu üzerinde yer alan bir veritabanına, bir e-posta adresine ya da kendilerini işleyecek bir uygulamaya gönderilir. Formların işlenmesi, dinamik sayfaların (bu sayfalar veritabanları gibi dinamik içerik kaynaklarına erişmek için PHP, JSP, ColdFusion vb dilleri kullanırlar) ya da CGI (Common Gateway Interface) script lerinin kullanımıyla gerçekleştirilir. CGI, formdaki verilerle sunucu arasında iletişim bağlantısı olarak görev yapan standart bir protokoldür. Bu bölümdeki konuların içinde veritabanı yada bir sunucu ile iletişim olmadığından, sunucu erişimine ihtiyaç duymayacaksınız Formun Oluşturulması Bir sayfaya alanlar ve düğmeler gibi elemanlar eklemeden önce bu elemanları içerecek olan formu oluşturmak gerekir. Form; alanlar, düğmeler, menüler ve ziyaretçilerin bilgi girmek ya da seçim yapmak için kullandığı diğer nesneler için bir taşıyıcı görevi üstlenir. Formlar ayrıca gönderildiklerinde verilere ne olacağını belirler. Form nesnelerinin çalışabilmesi için mutlaka bir form ile çevreli olmaları gereklidir. Bunun için sayfanıza ilk olarak form etiketini yada çevreleyicisini eklemelisiniz. Sayfanızın içinde formunuzu ekleyeceğiniz noktayı seçin. Form etiketleri blok elemanları olduğundan içinde bulundukları çerçevenin (Bir tablo hücresi yada bir div etiketi veya sayfanın tamamı) tamamını doldururlar. Bu nedenle bir formu başka bir nesne ile yan yana koymak istiyorsanız iki nesneyi de bir çevreleyicinin (tablo yada div etiketi) içine koymalısınız. Ekleme noktanıza imlecinizi koyduktan sonra Ekle panelinin Formlar kategorisindeki Form düğmesine tıklayın.

400 96 Bölüm 8 Formlarla Çalışmak Bu düğme en soldaki düğmedir. Böylece bir formu sayfanızın içine eklemiş oldunuz. Bu eklediğiniz sadece formun genel çerçevesidir. İçinde herhangi bir form elemanı barındırmamaktadır.

401 Bölüm 8 Formlarla Çalışmak 97 Form tarafından kaplanan alan, belge penceresinde kırmızı noktalı çizgilerle gösterilir. Bu alan kodda <form> ve </form> etiketleriyle tanımlanır. Söz konusu kırmızı çizgiler sadece Dreamweaver da görüntülenen görünmez elemanlardır. Sayfayı bir Web tarayıcısında açtığınızda form alanını gösteren herhangi bir işaret göremezsiniz. Ayrıca bu kırmızı çizgileri tutup sürükleyemezsiniz. Eğer görünmez elemanlar etkin değilse bir mesaj kutusu belirecek ve formu göremeyeceğinizi belirtecektir. OK düğmesine tıklayarak mesaj kutusunu kapatın ve Görünüm > Görsel Yardımcılar > Görünmez Öğeler komutunu seçerek formun kırmızı noktalı sınırlarını görüntüleyin. Eğer görünmez elemanlar etkin durumdaysa bu uyarı mesajını görmezsiniz. Dreamweaver ın Tercihler iletişim kutusunda yer alan Görünmez Öğeler kategorisindeki Form Ayırıcı seçeneğinin de işaretli olması gerekir. Bu seçenek varsayılan durumda işaretlidir. Bir sayfaya birden fazla form yerleştirebilirsiniz. Ancak HTML de bir formu diğer bir formun içine yerleştiremezsiniz. Bu kısıtlamadan dolayı Dreamweaver formların yanlışlıkla iç içe yerleştirilmesini engeller. Bunu da bir formun diğer formun içine yerleştirilmesini imkânsız kılarak gerçekleştirir. Form ekleme seçeneği iptal edilmez, ama bir formu diğer bir formun içine yerleştirmeye kalktığınızda bu işlem gerçekleşmez. Form etiketlerinin başka bir forma elle eklenmesi durumunda Dreamweaver hatalı etiketleri vurgulayarak dikkatinizi hatanın bulunduğu konuma çeker. Eklemiş olduğunuz bir form çerçevesini ya da etiketini seçtiğinizde özellikler denetçisinde bu formun özellikleri gözükür. Bu pencere içindeki form1 yerinde formunuzun ismini yazabilirsiniz. Eylem alanı, formunuzun altındaki gönder butonuna (henüz nasıl ekleneceğini söylemedik) basıldığında sayfanın hangi sayfaya yönleneceğini söylediğimiz yerdir. Bu alana genelde formunuzu işleyecek ve sunucu ile bağlantılı bir dinamik sayfanın adresini girersiniz. Ancak statik bir sayfa yaptığınızda ve bir sunucu ile iletişiminiz yoksa buraya mailto:birisi@example.com gibi bir eposta adresi girerseniz, form içerikleri ziyaretçinin bilgisayarındaki varsayılan eposta istemcisi aracılığı (Outlook, Outlook Express, Thunderbird, vb) ile gösterdiğiniz eposta adresine gönderilir. Dreamweaver formlar için genel tipte isimler oluşturur. Siz her form oluşturduğunuzda bu formların isimleri sayısal olarak otomatik bir şekilde artar (form1, form2, vb). Bütün form isimlerinin benzersiz olması ve ayrıca özel karakter içermemesi gerekir. Form isimleri önemli tanımlayıcılardır (identifier); özellikle de bir sayfada birden fazla form varsa veya form aracılığıyla istenen ya da toplanan bilgileri içeren bir veritabanı kullanıyorsanız. Form isimleri ayrıca, JavaScript gibi script dilleri aracılığıyla formları kontrol etmek için de kullanılır. Tablo, formun yerleşim düzenini geliştirir. Tablo kullanmak, etiketlemek üzere metin ya da resimlerin form alanlarıyla hizalanmasını kolaylaştırır. Bir formun içine bir tablo ya da bir tablonun içine bir form yerleştirebilirsiniz. Ama burada söz konusu tablo, formu tamamen kapsamalı ya da form tarafından tamamen kapsanmalıdır.

402 98 Bölüm 8 Formlarla Çalışmak Form İçeriğini Gruplamak Formunuzun içeriğini oluşturmaya başlamadan önce biraz zaman ayırarak içeriğin ayrıntılı bir taslağını oluşturmanız gerekir. Ziyaretçilerden isteyeceğiniz bilgilerin bir taslağını oluşturduktan sonra bu bilgileri içerik benzerliğini temel alarak mantıksal gruplara ayırabilirsiniz. Formunuzun bölümlerini belirledikten sonra formun içinde bu bölümleri oluşturmak için alan kümelerini (fieldsets) kullanmaya hazırsınız demektir. Alan kümeleri, bir form içinde ayrı ayrı içerik bölümleri oluşturmak için kullanılan form elemanlarıdır. Formunuzun içeriğini küçük ve bağımsız bölümler halinde grupladığınızda ziyaretçilerin formu anlaması ve doldurması daha kolay olur. Böylece ziyaretçileriniz formun genel yapısını hemen kavrayabilirler. Formunuzun içine grup eklemek için imlecinizi eklemek istediğiniz noktaya tıklatın ve Formlar kategorisi altından Alan Kümesi ni seçin. Fieldset iletişim kutusu açılacaktır. İçine başlığınızı yazın ve Tamam tuşuna basın. Bir alan kümesi, kullanabileceği bütün alanı kaplayacak kadar genişler. Formlarda olduğu gibi alan kümesini bir tabloya veya bir tabloyu bir alan kümesine yerleştirmek mümkündür. Ama tablo alan kümesini tamamen kapsamalı ya da alan kümesi tarafından tamamen kapsanmalıdır. Vermiş olduğunuz alan başlığı form içinde gözükecek ve kullanıcılarınızın formunuzu kolay anlaması için kullanılacaktır. Bu nedenle alanlarınıza açıklayıcı başlıklar verin.

403 Bölüm 8 Formlarla Çalışmak 99 Tek Satırlı Metin Alanları Eklemek Metin alanları, ziyaretçinin yazarak girebileceği bilgileri toplamak için kullanılır. Kısa, özlü cevaplar (bir sözcük ya da sözcük grubu gibi) için tek satırlı metin alanları kullanılır. Normalde kullanılan tek satırlı metin alanları; ziyaretçinin isim, kısa adres ve e-posta gibi bilgilerini girmesi için kullanılır. Bu metin alanları ayrıca temel arama işlemleri için de kullanılır. Burada ziyaretçi, ilgili alana istenen bilgiyi tanımlayan sözcükleri girer. Bütün form alanlarını ve düğmeleri kırmızı noktalı çizgilerin içine yerleştirmeniz gerekir, aksi takdirde bunlar formun bir parçası olmaz. Form alanlarını kırmızı çizgilerin dışına yerleştirmeye kalkarsanız Dreamweaver size bu alanı kapsayan bir form alanı oluşturup oluşturmak istemediğinizi sorar. Hayır derseniz ilgili alan ya da düğmeler herhangi bir formun bir parçası olarak işlev görmez. Formunuza tek satırlı bir metin alanı eklemek için Formlar panelinden metin alanı seçeneği seçin. Herhangi bir form nesnesi eklediğinizde Erişilebilirlik Özellikleri penceresi açılabilir. Bu pencere formlarınızın erişilebilir olması için kullanabileceğiniz özellikleri barındırır.

404 100 Bölüm 8 Formlarla Çalışmak Bu pencerede ilgili alanları doldurabilir yada İptal seçeneğine tıklayarak devam edebilirsiniz. Eğer Dreamweaver Girdi Etiketi Erişebilirlik Nitelikleri iletişim kutusunu otomatik olarak açmazsa, form nesneleri için erişilebilirlik özelliklerini etkinleştirmeniz gerekebilir. Bunun için Düzen > Tercihler komutunu seçin. Erişebilirlik kategorisine geçin ve Form nesneleri onay kutusunu işaretleyin.

405 Bölüm 8 Formlarla Çalışmak 101 Sonra da Tamam düğmesine tıklayın. Eğer her seferinde bu iletişim kutusu ile uğraşmak istemiyorsanız bu özelliği kapatmak için bu sefer ilgili alanlardaki işareti kaldırmanız yeterli olacaktır. Formunuza tek satırlı metin alanını ekledikten sonra ona ait özellikleri değiştirebilirsiniz. Bunu yapabilmek için metin kutusuna tıkladıktan sonra özellikler penceresi içinde özelliklerini belirleyin. En soldaki kutucuk içinde yer alan textfield kelimesi yerine bu alanı form içinde eşsiz (tekil) olarak niteleyecek bir ismi özel karakterler olmadan ve Türkçe karakterleri(ççööşşğğüüıi) kullanmadan yazın. Karakter alanı bu metin kutusunun aynı anda kaç karakteri gösterebileceğini ayarladığınız seçenektir. Maks kar, bu metin kutusunun içinde en fazla kaç karakter barındırabileceğini belirttiğiniz alandır. Bu alandaki rakam ile karakter alanındaki rakamlar birbirinden farklı olabilir. Örneğin bir metin kutusu aynı anda 10 karakter gösterebilirken, içinde en fazla 20 karakter bulundurabilir. Bu durumda bu alanı dolduran ziyaretçiler yazmaya devam ederken yazılar sola doğru kayacaktır. Yazım seçeneği bu alanın tek satırlı mı yoksa çok satırlı mı olacağını seçtiğiniz alandır. Burada aynı zamanda bu alanı bir şifre alanı olarak da gösterebileceğiniz bir seçenek bulunmaktadır. Şifre seçeneğini seçerseniz metin alanının içine yazılan yazıların yerinde noktalar gözükecektir. Başlangıç değeri, seçeneği ile bu alanın, sayfa ilk yüklendiğinde hangi metinle dolacağını seçebilirsiniz. Radyo Düğmeleri Eklemek Radyo düğmelerini (radio buttons) kullanıcıların bir dizi seçenek arasından sadece birini seçmesini istediğiniz durumlarda kullanırsınız. Bir seçeneği işaretlediğinizde diğer seçenekler otomatik olarak geçersiz kılınır. Radyo düğmeleri genellikle kredi kartı seçimi ve Evet ya da Hayır şeklinde cevaplanan sorular için kullanılır. Bir radyo grubu eklemek için Formlar panelinde Radyo Grubu butonuna tıklayın. Radyo Grubu iletişim kutusu açılacaktır. Bu penceredeki etiket alanları sayfa içinde ziyaretçilerin göreceği değerleri, Değer alanı ise sayfa ile gönderilecek değerleri göstermektedir. Eğer bu grubun satır atlatılarak sıralanmasını istiyorsanız, satır kesmelerini, tablo ile gösterilmesini istiyorsanız Tablo seçeneğini seçmelisiniz.

406 102 Bölüm 8 Formlarla Çalışmak Varsayılan durumda her grup (Radyo Grubu) en az iki radyo düğmesi içerir. İstediğiniz kadar radyo düğmesi ekleyebilir, silebilirsiniz. Girişleri seçip ok tuşlarının yardımıyla listede yukarıya ya da aşağıya doğru taşıyarak girişlerin sıralamasını da değiştirebilirsiniz. Bir form gönderildiğinde buradaki değerler, sunucuda formu işleyen script e gönderilir. Ziyaretçinin hangi seçeneği işaretlediğini anlayabilmek için her bir radyo düğmesine farklı bir değer verdiğinizden emin olun. Onay Kutuları Eklemek Onay kutuları (checkboxes), ziyaretçilerin birbiriyle alâkalı bir grup öğe arasından bir ya da birden fazla öğe seçmesini sağlar. Ziyaretçinin istediği sayıda seçeneği işaretleyebilmesine izin vermek istediğiniz yerlerde genellikle onay kutularını kullanırsınız.

407 Bölüm 8 Formlarla Çalışmak 103 Eğer ziyaretçinin sadece tek bir seçenek işaretlemesini istiyorsanız, bundan sonraki uygulamada olduğu gibi radyo düğmelerinden faydalanırsınız. Onay kutusu eklemek için Ekle araç çubuğunun Formlar kategorisinde yer alan Onay kutusu düğmesine tıklayın. Liste ve Menü Öğeleri Eklemek Kaydırılabilir bir liste (scrolling list) ya da menü oluşturarak ziyaretçilerin buradaki öğelerin arasından seçim yapmasını sağlayabilirsiniz. Kaydırılabilir bir listeyle ziyaretçilerinize birden fazla bitişik ya da bitişik olmayan öğeyi seçme imkânı tanıyabilirsiniz. Menülerde ziyaretçiler tek bir seçim yapabilir. Bunların her ikisinde de, ziyaretçinin seçtiği öğeler vurgulu hale gelir. Liste veya menü öğeleri eklemek için Ekle araç çubuğunun Formlar kategorisinde yer alan List/Menu düğmesine tıklayın.

408 104 Bölüm 8 Formlarla Çalışmak Eklediğiniz form nesnesine tıkladığınızda karşınıza bununla ilgili özellikler denetçisi çıkacaktır. Tür alanında bu form elemanının Menü mü Liste mi olacağını seçebilirsiniz. Liste olan nesneler aynı anda birden fazla içeriği gösterebilirler ve bunların içinden birden fazlası aynı anda seçilebilir. Yükseklik değeri eğer tür olarak Liste yi seçerseniz aktif olacaktır. Çokluya izin ver seçeneği de yine eğer tür olarak Liste yi seçerseniz aktif olacaktır. Liste değerleri butonu ile bu listenin içini dolduracak değerleri seçebilirsiniz. Başlangıçta seçili seçeneği ile sayfanız yüklendiğinde formunuzun içinde başlangıç olarak hangi değerin seçili olduğunu ayarlayabilirsiniz Çok Satırlı Metin Alanları Eklemek Ziyaretçilerin metin girebileceği birden fazla satıra sahip metin alanları aracılığıyla ziyaretçilerinizden daha büyük miktarda bilgi alabilirsiniz. Çok satırlı metin alanları genelde ziyaretçilerden yorum ve geribildirim almak için kullanılır. Çok satırlı bir metin alanını Ekle > Form > Metin Bölgesi komutunu seçerek de ekleyebilirsiniz.

409 Bölüm 8 Formlarla Çalışmak 105 Çok satırlı metin alanları ile tek satırlı metin olanlarının özellikleri birbirine benzemektedir. Çok satırlı metin alanlarında ek olarak Sar(wrap) seçeneği ve satır sayısı seçeneği bulunmaktadır. Sar (wrap) menüsündeki seçenekler şunlardır: Varsayılan(Default), Kapalı(off), Sanal(virtual) ve Fiziksel(physical). Varsayılan seçeneği, tarayıcının varsayılan ayarını kullanır. Yazım alanında Çok Satırlı yı işaretlediğinizde otomatik olarak bu seçenek ayarlanır. Kapalı seçeneği, metnin bölünerek bir sonraki satıra geçmesini engeller. Metin, siz Return ya da Enter tuşuna basana kadar aynı satırda devam eder. Ziyaretçi yazarken metin görünebilir alanın sınırını aştığında sola doğru kayar. Sanal seçeneği, metni bölerek bir sonraki satırdan devam etmesini sağlar. Ama sözcük sarma özelliği, form gönderildiği zaman verilere uygulanmaz. Fiziksel seçeneği, metni bölerek bir sonraki satırdan devam etmesini sağlar ve sözcük sarma özelliği, form gönderildiğinde verilere uygulanır. Buton Eklemek Formlarda, biri form verisini göndermek (Gönder-Submit), diğeri de formu temizlemek (Temizle- Reset) için olmak üzere genellikle iki düğme kullanılır. Gönder(Submit) düğmesi Web tarayıcısına veriyi göndermesi gerektiğini bildirir. Temizle(Reset) düğmesi ise sayfadaki alanlarda bulunan bütün bilgileri siler. Temel arama işlevi için oluşturulan bir formda genellikle sadece tek bir Gönder(Submit) düğmesi bulunur. Bu da çoğunlukla Ara ya da Git şeklinde adlandırılır. Sayfanıza bir buton eklemek için yapmanız gereken imlecinizi formunuzun içinde uygun bir yere koyduktan sonra, formlar sekmesinden buton elemanını eklemektir. Butonun işlev özelliklerini değiştirebilirsiniz. Bir butonun Gönderme, silme yada görevsiz özelliğinde olmasını ve içinde yazacak olan başlık yazısını özellikler denetçisinden ayarlayabilirsiniz.

410 106 Bölüm 8 Formlarla Çalışmak Gizli Alanlar Oluşturmak Kimi zaman formunuza, ziyaretçiler tarafından görülmeyen ya da ziyaretçi tarafından doldurulacak bazı bilgileri dahil etmeniz gerekebilir. Böyle durumlarda Web tarayıcısında görüntülenmeyen gizli alanlardan faydalanabilirsiniz. Gizli alanlar (hidden fields) genellikle, formun işlenmesi için (isim, sipariş numarası ya da satılan ürünle ilgili başka bir bilgi almak, form bir e-posta adresine gönderilecekse bir e-posta adresi ve konu başlığı eklemek, formu doldurduktan sonra ziyaretçilerinizi yönlendirmek istediğiniz bir sayfanın URL sini dahil etmek, bilgileri bir formdan başka bir forma aktarmak ya da belirli alanların ziyaretçi tarafından doldurulmasını sağlamak için) belirli bilgiler gerektiğinde sunucu taraflı script lerle birlikte kullanılır. Böyle durumlarda gizli alanların işlenebilmesi için sunucu taraflı script ler (server side scripting) gerekir. Sunucu taraflı script lerin gerekmediği ya da kullanılamadığı durumlarda gizli alanlarla birlikte JavaScript de (istemci taraflı script olarak da bilinir) kullanılabilir. İstemci taraflı script (client side scripting) kullanımında script leri ziyaretçinin Web tarayıcısı (istemci) işler. Gizli alan eklemek için Formlar sekmesinden gizli alan butonuna basmalısınız.

411 Bölüm 8 Formlarla Çalışmak 107

412 BÖLÜM 9 Şablonlar Şablon Oluşturmak Bir Şablona Düzenlenebilir Alanlar Eklemek Belirli Bir Şablonu Temel Alan Sayfalar Hazırlamak Şablonda Değişiklik Yapmak

413 Bölüm 9 Şablonlar 109 Şablon (template), diğer belgeleri oluşturmak için temel olarak kullanabileceğiniz bir belgedir. Şablon kullanılarak oluşturulan her belge, bu şablonla aynı yerleşim düzenini ve yapıyı kullanır. Bir şablon oluşturulurken, bu şablonu temel alan belgelerde düzenlenebilir durumda olması gereken alanların gösterilmesi gerekir. Şablonun diğer kısımları kilitli durumdadır ve ebeveyn şablon tarafından kontrol edilir. Şablonlar, birden fazla sayfanın yapısını ve içeriğini güncellemek için kullanılabilecek hızlı bir yol sunmaları açısından kütüphane öğelerine benzer. İster pek çok bölümden oluşan büyük bir Web siteniz, ister ortak bir tasarımı kullanan birden fazla sayfanız olsun, bir şablon oluşturarak prodüksiyon sürecini hızlandırabilirsiniz. Bir şablon kullanırsanız, birkaç dakika içinde birden fazla sayfada değişiklik yaparak sitenizin görünümünü değiştirebilir ya da güncelleyebilirsiniz. Sitenin belirli bir bölümünü hazırlayan bir ekiple çalıştığınız durumlarda şablonlar çok faydalı olur. Web tasarımcısı bir şablon oluşturabilir ve sayfanın düzenlenebilecek olan kısımlarına yer tutucular ekleyebilir. Sayfanın genel tasarımı kilitli durumda kalır. Ekip üyeleri, bir şablonu temel alıp Adobe Dreamweaver ya da Adobe Contribute kullanarak sayfaları hazırlayabilir ve düzenleyebilirler. (Adobe Contribute, Web sitelerini oluşturma konusunda çok az deneyime sahip olan ya da hiç deneyimli olmayan içerik editörleri gibi teknik konularla ilgilenmeyen kullanıcılara yönelik bir programdır.) Şablonların avantajları iki durumda net olarak ortaya çıkar: Bir bölüm ya da sayfa grubunda aynı tasarımın ve yerleşim düzeninin kullanılması gereken durumlarda ya da sayfanın görünümünün tasarımcı tarafından oluşturulduğu, ama sayfa içeriklerinin içerik editörleri tarafından eklendiği durumlarda. Şablon Oluşturmak Şablonlar, sayfaların yerleşim düzenini ve tasarımını tanımlar. Bir şablon oluştururken uygulamanız gereken ilk adım, genellikle sayfa tasarımının hazırlanmasını içerir. Şablonlarla tasarım yaparken öncelikli olarak boş bir HTML sayfası oluşturmalı ve bu sayfayı Şablon olarak kayıt etmelisiniz (Dosya > Şablon Olarak Kayıt Et). Bu seçenekten sonra karşınıza çıkan iletişim kutusundan şablonu kaydetmek istediğiniz siteyi seçebilirsiniz. Dreamweaver otomatik olarak şablona bir isim verecektir. Siz isterseniz bunu değiştirebilirsiniz. Şablonun ismini değiştirmek istiyorsanız, yeni ismi Save As (Farklı Kaydet) metin alanına yazın. Şablonun ismi sadece ekibiniz ve sizin için bir referans niteliğindedir. Bu ismi sitenizin ziyaretçileri görmeyecektir. Şablonlarınız için mümkün olduğu kadar açıklayıcı isimler kullanmaya gayret edin. Kaydet düğmesine tıklayarak iletişim kutusunu kapatın. Dreamweaver Bağlantıları Güncelleyeyim mi? diye soran bir uyarı kutusu görüntülediğinde Evet düğmesine tıklayın. Bağlantıların güncellenmesi, Dreamweaver ın bağlantılara ve resimlere giden yolları doğru olarak muhafaza etmesini sağlayacaktır. Artık şablonunuz sitenize eklendi ve.dwt uzantısıyla Templates klasörüne kaydedildi. Templates adında bir klasör mevcut değilse, Dreamweaver bu klasörü otomatik olarak ekler. Templates klasörünü görmek için, Dosyalar panelindeki Yenile (Refresh) düğmesine tıklamanız gerekebilir. Bu dosyayı bir sonraki uygulamada kullanmak üzere açık bırakın. Bir Şablona Düzenlenebilir Alanlar Eklemek

414 110 Bölüm 9 Şablonlar Bir şablonun oluşturulmasında ikinci adım, bu şablon temel alınarak oluşturulan belgelerde düzenlenebilir durumda olması gereken alanları tanımlamaktır. (Düzenlenebilir alanlar, belgenin şablon temel alınarak oluşturulan sayfalardaki değiştirilebilen bölümleridir.) Kural olarak, bir şablondaki bütün alanlar başlangıçta kilitli durumdadır. Şablonu kullanan sayfalardaki bilgileri değiştirmek istiyorsanız, düzenlenebilir alanlar ya da bölgeler oluşturmanız gerekir. Birçok Web sitesinde, bu bölgeler genellikle içerik alanlarıdır. Şablonda açıkça düzenlenebilir olarak tanımlanmayan her şey, şablonu temel alan sayfalarda kilitli durumdadır. Orijinal şablonu düzenlerken hem düzenleyebilir, hem de kilitli alanlarda değişiklik yapabilirsiniz; ama şablon kullanılarak hazırlanmış olan bir sayfada sadece düzenlenebilir bölgelerde değişiklik yapabilirsiniz. Bir şablona düzenlenebilir alan eklemek için şablon içinde içerik geliştiriciler tarafından düzenlenebilir alana imlecinizle tıklamanız yada bu bir tablo yada hücre ise bu nesneyi seçmeniz gereklidir. Bu seçimi yaptığınız alan düzenelenebilir alan olarak atandığında şablondaki değişikliklerden etkilenmeyecektir. Sadece bu alanın dışındaki bölgeler orijinal şablon değiştiğinde değişecektir. İstediğiniz alanı seçtikten sonra yapmanız gereken Ortak sekmesinden Şablonlar butonu altındaki Düzenlenebilir Bölge butonuna basmaktır. Böylece imlecinizin bulunduğu yer yada tablo artık düzenlenebilir bir alan olarak kullanılacaktır. Düzenlenebilir alanlarınıza anlamlı bir isim verirseniz sonraki aşamalarınızda işiniz kolay olacaktır. Düzenlenebilir alan başlıkları görünmez nesnelerdir yani ziyaretçiler tarafından görünmezler.

Daha göster