Form Oluşturmak - BITEFO FETHIYE 2007
Transkript
Form Oluşturmak - BITEFO FETHIYE 2007
A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark 11 Form Oluşturmak 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, Bu projede çeşitli metin alanları, onay kutuları, radyo düğmeleri, Submit (Gönder) ve Reset (Sıfırla) düğmeleri ve menü içeren bir form oluşturacaksınız. 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 derste ziyaretçilerin göreceği bir form oluşturacaksınız. Dinamik sayfalar ya da CGI kullanmayacağınız için bu dersi tamamlamak için bir sunucu erişiminizin olması gerekmeyecek. Bu derste elde edilen sonucu görmek için Lesson_11_Forms/Completed/Training klasöründeki training.html dosyasını açın. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: • Bir Web sayfasında form oluşturacaksınız. • Form içeriğini gruplara böleceksiniz. • Erişilebilir formlar oluşturacaksınız. • Tek satırlı metin alanları ekleyeceksiniz. • Çok satırlı bir metin alanı ekleyeceksiniz. • Onay kutuları ekleyeceksiniz. • Radyo düğmeleri ekleyeceksiniz. • Liste/menü öğeleri ekleyeceksiniz. • Gizli alanlar ekleyeceksiniz. • Düğmeler ekleyeceksiniz. • CSS kullanarak bir formu biçimlendireceksiniz. • Bir sıçrama menüsü oluşturacaksınız. • Bir formu test edeceksiniz. Yaklaşık Süre Bu dersin tamamlanması yaklaşık 1 saat sürecektir. Ders Dosyaları Başlangıç Dosyaları: Lesson_11_Forms/training/training.html Tamamlanmış Proje: Lesson_11_Forms/Completed/training/training.html 378 DERS 11 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. Bu uygulamada form alanını oluşturacaksınız. 1. Lesson_11_Forms/Training klasöründeki training.html belgesini açın. Ekleme noktasını Yoga Teacher Certification Program Application metninin altındaki boş paragrafın içine yerleştirin. Insert araç çubuğunun Forms kategorisindeki Form düğmesine tıklayın. Insert > Form > Form komutunu kullanarak da form ekleyebilirsiniz. Forms kategorisi Form düğmesi 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. Form alanının büyüklüğü, forma koyduğunuz elemana bağlıdır ve içeriği kapsayacak şekilde yatay (tam genişlikte) ve düşey yönde (içerik sığacak şekilde) büyür. Sayfaya yerleştirdiğiniz form, taşıyıcı elemanın (bu bir div, bir tablo hücresi ya da sayfanın kendisi olabilir) tüm genişliğini kaplayacak kadar genişler. Kırmızı noktalı çizgiler form tarafından işgal edilen alanı belirtmektedir. Form Oluşturmak 379 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 View > Visual Aids > Invisible Elements 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 Preferences iletişim kutusunda yer alan Invisible Elements kategorisindeki Form delimiter 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. 2. Kırmızı noktalı çizgiye tıklayarak formu seçin. Eğer ekleme noktası formun içindeyse, formu seçmek için Etiket Seçici’yi de kullanabilirsiniz. Properties denetçisi, form özelliklerini görüntüleyecek şekilde değişecektir. Eğer Properties denetçisi görünür durumda değilse, Window > Properties komutunu seçin. 3. Properties denetçisinde yer alan Form metin alanındaki varsayılan isim olan form1‘in yerine training yazın. 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. 380 DERS 11 4. Ekleme noktasını forma yerleştirin ve Insert > Table komutunu seçin. Tablonun satır sayısını (Rows) 3, sütun sayısını da (Columns) 1 olarak ayarlayın. Tablo genişliği değeri (Table width) yüzde (percent) 90 olmalıdır. Border thickness değerini 0, Cell padding değerini 0 ve Cell spacing değerini de 10 olarak ayarlayın. Header menüsünde None seçeneğini işaretleyin ve OK düğmesine tıklayın. 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. 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. Bu derste oluşturduğunuz form üç bölüme ayrılabilir: Contact Information, Experience and Interests ve Send Your Answers. 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. 1. Ekleme noktasını önceki uygulamada oluşturduğunuz tablonun ilk satırına yerleştirin. Insert araç çubuğunun Forms kategorisinde yer alan Fieldset düğmesine tıklayın. Fieldset Fieldset iletişim kutusu açılacaktır. Form Oluşturmak 381 2. Legend metin alanına Contact Information yazın ve OK düğmesine tıklayın. Bir alan kümesi, kullanabileceği bütün alanı kaplayacak kadar genişler. Önceki uygulamada oluşturduğunuz tablonun en üstteki hücresi alan kümesinin sınırlarını oluşturma ve yerleşimi kontrol etme görevini üstlenir. 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. 3. Ekleme noktasını ikinci satıra yerleştirin ve Insert araç çubuğundaki Fieldset düğmesine tıklayın. Legend metin alanına Experience And Interests yazın ve OK düğmesine tıklayın. Bir alan kümesi için belirlediğiniz not, gösterge (legend) olarak da bilinir. Bu öğe, bölümle ilgili bir açıklama olarak görev yapar (içeriğin tanımlanması için kullanılan bir yöntem). Kendi formlarınızda alan kümeleri için gösterge oluştururken olabildiğince açık ifadeler kullanın. Bu notların alan kümelerinin içeriğini tam olarak yansıtması gerekir. 4. Ekleme noktasını üçüncü satıra yerleştirin ve Insert araç çubuğundaki Fieldset düğmesine tıklayın. Legend metin alanına Send Your Answers yazın ve OK düğmesine tıklayın. Alan kümesi, içeriğini soluk gri bir çizgiyle çevreler. 5. Dosyayı kaydedin ve Web tarayıcınızda önizleyin. Bir sonraki uygulama için bu dosyayı açık bırakın. 382 DERS 11 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 Yes ve No seçeneklerini içeren bir uyarı kutusu görüntüleyerek bir form etiketi (form tag) eklemek isteyip istemediğinizi sorar. No derseniz ilgili alan ya da düğmeler herhangi bir formun bir parçası olarak işlev görmez. 1. training.html belgesinde ekleme noktasını Contact Information metninin içine yerleştirin. Etiket Seçici’yi kullanarak <legend> etiketini seçin, sağ ok tuşuna bir kez basın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Form nesnelerinin alan kümelerine eklenmesi gerekir (ama göstergenin içine değil). Ekleme noktasını göstergenin sonuna ekler ve Return tuşuna basarsanız, ikinci bir legend etiket grubu oluşturulur. İkinci bir legend etiket grubu olmamalıdır. Form Oluşturmak 383 2. Insert araç çubuğunun Forms kategorisinde yer alan Text Field düğmesine tıklayın. Bunun için Insert > Form > Text Field komutunu da kullanabilirsiniz. Text Field düğmesi Input Tag Accessibility Attributes iletişim kutusu açılacaktır. Erişilebilir formlar oluşturmak daha fazla ziyaretçiye ulaşmanızı sağlar. Ekran okuyucu gibi yardımcı teknolojiler kullanmak zorunda olan kullanıcılar için erişilebilir nitelikler kullanmak önemlidir. Eğer formunuzda bu nitelikler yoksa, bazı ziyaretçilerin formunuzu doldurması zorlaşabilir. Varsayılan durumda Dreamweaver form eklerken erişilebilirlik özelliklerini dahil etmeniz gerektiğini size bildirecektir. Eğer Dreamweaver Input Tag Accessibility Attributes iletişim kutusunu otomatik olarak açmazsa, form nesneleri için erişilebilirlik özelliklerini etkinleştirmeniz gerekebilir. Bunun için Dreamweaver > Preferences (Macintosh’ta) ya da Edit > Preferences (Windows’ta) komutunu seçin. Accessibility kategorisine geçin ve Form objects onay kutusunu işaretleyin. Sonra da OK düğmesine tıklayın. 384 DERS 11 3. Label metin alanına Full Name: yazın. Notlar (labels) form nesnelerinizin (metin alanları, onay kutuları, vs) ne amaçla kullanıldığını açık olarak tanımlayan bilgileri içerir. Böylece ziyaretçileriniz bu alanlara hangi bilgiyi gireceklerini bilir. Notlarla tanımlamadığınızda formlar kafa karıştırabilir. Not, hem ilgili metin alanının görsel bir açıklaması olarak belge penceresinde, hem de bir nitelik olarak metin alanını tanımlayan HTML kodunda yer alır. Mümkün olan her yerde kısa ve açıklayıcı notlar kullanmaya çalışın. 4. Style bölümünde Wrap with label tag seçeneğini işaretleyin. Position bölümünde Before form item seçeneğini işaretleyin. Access key ve Tab index metin alanlarını boş bırakın. Wrap with label tag seçeneği, form nesnelerini bir not etiketiyle çevreler. Bu seçeneği kullandığınızda form nesnesi her zaman belge penceresindeki metin notunun yanında kalacaktır. Eğer form nesnesi taşınırsa, bu seçenek onun not etiketinden ayrılmasını önler. Bu seçeneği kullanmadığınızda ekran okuyucu kullanan ziyaretçiler açısından ciddî bir karışıklık söz konusu olabilir. Çünkü bu durumda not, taşınan form nesnesiyle artık ilişkili olmaz. Kodda, bu yöntemle oluşturulan bir metin alanı belirecektir: <label>Full Name: <input type=”text” name=”textfield” /></label>. Attach label tag using for attribute seçeneği, karşılık gelen metin alanıyla tanımlanan (bir id aracılığıyla) bağımsız bir not oluşturur. Bu seçeneği kullandığınızda, form Form Oluşturmak 385 nesnesini belge penceresinde kendisini açıklayan metinden ayırabilirsiniz. Böyle bir işleme, yerleşim düzenini ayarlamak amacıyla gerek duyulabilir. Bu yöntem daha esnektir, çünkü form nesnesinin kendine karşılık gelen metinden ayrılıp ayrılmamasına bağlı olmaksızın çalışmaya devam eder. Hangi Style yöntemini kullanacağınıza karar veremiyorsanız bunu seçin. Kodda, bu yöntemle oluşturulan bir metin alanı belirecektir: <label for=”textfield”> Full Name: </label> <input type=”text” name=”textfield” id=”textfield” />. No label tag seçeneğini işaretlediğinizde Label (Not) seçeneği kullanılmaz. Bu seçeneği kullanırsanız, daha sonra Insert araç çubuğunun Forms kategorisinde yer alan Label düğmesini kullanarak notlar ekleyebilirsiniz. Kullanabileceğinizi iki ilâve erişilebilirlik niteliği daha vardır. • Access Key: Access key metin alanını kullanarak belirli bir form nesnesi için bir klavye kısayolu oluşturabilirsiniz. Bunu, ziyaretçilerin Option (Macintosh’ta) ya da Alt (Windows’ta) tuşuyla birlikte kullanabileceği bir karakter belirleyerek yaparsınız. Ziyaretçiler bir nesneden sonraki nesneye geçmek için Tab tuşunu kullanabilir, ama erişim tuşları (Access keys) sayfadaki herhangi bir form nesnesine çok daha hızlı bir şekilde geçmenizi sağlar. Erişim tuşları oluştururken standart klavye kısayollarıyla uyuşmazlık yaratabilecek karakterleri kullanmamaya özellikle dikkat edin. Erişim tuşları kullanırsanız, ziyaretçileriniz için formun üst kısmında ya da bir açılır pencerede (Ders 8’de görmüştük) gereken açıklamaları sunmanız ve ilgili metin alanının yanında klavye kısayolunu vermeniz iyi olacaktır. Klavye kısayollarını gösteren ifadeler olabildiğince açık olmalı ve dikkat çekmemelidir. Macintosh’ta klavye kısayolları menü öğelerinin yanında ilgili değiştirici tuşu gösteren bir simgeyle birlikte listelenir. Windows’ta ise ilgili karakterin altı çizilerek bunun bir kısayol olduğu gösterilir. Hangi yöntemi kullanırsanız kullanın, tutarlı ve anlaşılır olun. Ayrıca ziyaretçilerinizin açıklamalarla ya da Yardım bilgisini kullanarak bu konuyla ilgili açıklamalara erişebilmesini sağlayın. • Tab Index: Pek çok Internet kullanıcısı form doldururken Tab tuşunu kullanır. Tab tuşu, hızlı bir şekilde etkinlik durumunu (odak) bir form nesnesinden diğerine geçirmeyi ya da bir form nesnesinden diğer bir form nesnesine bağlanmayı sağlar. Tab tuşunun etkinlik durumunu değiştirme sırası nesnelerin ve bağlantıların kodda göründüğü sıraya bağlıdır. Etkinlik durumunun değişme sırası genellikle beklediğiniz şekilde gerçekleşse de bir formun görsel yerleşimi, görülen sıra bu nesnelerin koddaki asıl sırasından farklı olacak şekilde de sunulabilir. Böyle durumlarda Tab Index alanını kullanıp form nesnelerine sayılar atayarak etkinlik durumu sırasını belirlemeniz, formda ilerlerken ziyaretçilerin işini kolaylaştırabilir. Alternatif olarak Tab Index özelliğini sadece gereken alanlar için ayarlayabilirsiniz. Bir Tab Index belirlerken 1 sayısıyla başlamanız, ardından 2 sayısını kullanmanız ve bu şekilde devam etmeniz gerekir. Bu işlemde herhangi bir sayıyı atlamayın. 386 DERS 11 Form nesneleri eklerken erişilebilirlik özelliğini kullanmayacaksanız, sizden bir not tanımlamanız istenmeyecektir. Belge penceresine form nesnesi için bir not ekleyebilirsiniz. Ancak bu metin, siz <label> ve </label> etiketlerini elle koda eklemedikçe ya da Insert araç çubuğunun Forms kategorisinde yer alan Label düğmesini kullanmadıkça <label> ve </label> etiketlerinin içine alınmaz. 5. OK düğmesine tıklayarak metin alanını ekleyin. Tek satırlı metin alanı, metin notuyla birlikte forma eklenecektir. Her ikisinin de otomatik olarak seçili olduğuna dikkat edin. 6. Belge penceresinde, sağında bir yere tıklayarak metin alanının ve notun seçimini kaldırın. Üzerine tıklayarak sadece metin alanını seçin. Properties denetçisindeki TextField metin alanında yer alan varsayılan textfield metninin üzerine fullName yazın. Bütün alanlarda isim kullanmak gerekir. Dreamweaver otomatik olarak sayısal bir sırayla genel tipte isimler atar: textfield, textfield2, vs. form gönderildiğinde metin alanının adı, bu alana girilen bilgiyi tanımlar. Burada “fullName”, söz konusu alana girilen bilginin ziyaretçinin tam adı olduğunu belirtir. İsimlerde boşluk veya özel karakterler kullanmayın. Unutmayın ki bu isimler script’lerle (CGI script’leri ya da JavaScript gibi) kullanıldığında BÜYÜK/küçük harf duyarlılığı önemli hale gelir. Bütün alanları kısa ve açıklayıcı bir şekilde adlandırmak çok önemlidir. Bir sayfada yanlarında notlarıyla birlikte iki tane metin alanı olduğunu ve bu alanlardan birine ev numarasının, diğerine de iş numarasının girilmesi gerektiğini düşünün. Eğer bu alanlar textfield ve textfield2 şeklinde adlandırılırsa bu isimler hangi alana ev numarasını, hangisine iş numarasını girmek gerektiği konusunda bir ipucu vermezler. Diğer taraftan, alanlara daha açıklayıcı isimler vererek (işnumarası ve evnumarası gibi) karışıklıkları önleyebilirsiniz. Ziyaretçiler alan isimlerini görmez ve bu isimlerden etkilenmez. Alanları adlandırmak sizin ve Web ekibinizin iyiliği içindir. 7. Metin alanı form nesnesi seçili durumdayken Properties denetçisindeki Char Width metin alanına tıklayın ve 40 yazın. Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Form Oluşturmak 387 Char width (karakter genişliği), metin alanında görüntülenecek olan görünür karakter sayısıdır. Metin alanının genişliği kullanılabilir alanı büyüterek yaklaşık 40 karakter görüntüleyebilir. Metin alanının başlangıçtaki genişliği yaklaşık 24 karakterdir. Metin alanının asıl boyutları, ilgili metin alanı için kullanılan metnin büyüklüğüne bağlı olarak tarayıcıdan tarayıcıya farklılık gösterir. Bu da CSS aracılığıyla tanımlanabilir veya Web tarayıcısının varsayılan değerleri kullanılabilir. Metin alanının yüksekliği de metin büyüklüğüne bağlıdır. Bir metin alanı seçili durumdayken Properties denetçisindeki Class menüsünden istediğiniz stili seçerek bu metin alanına bir CSS stili uygulayabilirsiniz. 8. Metin alanı form nesnesi seçili durumdayken Properties denetçisindeki Max Chars metin alanına tıklayın ve 50 yazın. Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Max Chars (maksimum karakter seçeneği), ziyaretçinin girebileceği toplam karakter sayısını sınırlar. Başlangıçta bu metin alanı boştur ve ziyaretçinin girebileceği karakter sayısı sınırsızdır. Eğer Max Chars değeri Char width değerinden büyükse, ziyaretçiler yazmaya devam edebilir ve ziyaretçi görünür alanın dışında yazarken metin, alan içinde sola doğru kayar. Kaydırılabilir alan Max Char değerinde sona erer. Eğer formunuz bilgileri bir veritabanına gönderiyorsa, maksimum karakter değerinin, veritabanında buna karşılık gelen alanın maksimum değeriyle aynı olduğundan emin olmanız gerekir. 9. Ekleme noktasını belge penceresindeki Full Name notunun üzerine yerleştirin. Etiket Seçici’de <label> etiketini seçin, sağ ok tuşuna bir kez tıklayın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunda yer alan Text Field düğmesine tıklayın ve Input Tag Accessibility Attributes iletişim kutusundaki Label metin alanına Email: yazın. Style alanında Wrap with label tag seçeneğinin, Position alanında da Before form item seçeneğinin işaretli olduğundan emin olun, diğer alanları boş bırakın ve OK düğmesine tıklayın. Metin alanını seçin ve Properties denetçisini kullanarak alanın adını email, Char width değerini 40 ve Max Chars değerini de 70 olarak ayarlayın. Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak veya belge penceresinin içine tıklayarak bu değişiklikleri uygulayın. Bu alan ziyaretçinin e-posta adresini almak için kullanılacaktır. Yeni bir paragrafı önceki form nesnesini çevreleyen <label> etiketlerinin dışında oluşturmak önemlidir. Aksi takdirde yeni form nesnesi önceki nesnenin label (not) etiketleri içinde yer alır ya da etiketler üst üste binebilir veya başka zorluklar çıkabilir. 388 DERS 11 Etiket Seçici’de <label> etiketlerini seçtikten sonra ok tuşlarını kullanıp bu etiketlerin dışına çıkarak bu durumu önleyebilirsiniz. Bu adımda zaten bunu uygulamıştınız. Bu nesneleri eklerken Split görünümünü kullanmak işinizi kolaylaştırabilir. E-posta adresi ve URL gibi bilgilerin girildiği alanlar için Max Char değerini ayarlarken dikkatli olun. Ziyaretçiler, girecekleri bilginin karakter sayısı Max Char değerinden daha büyükse URL’i ya da ilgili bilgiyi tam olarak yazamaz, çünkü sizin belirlediğiniz değerden daha fazla karakter giremezler. 10. email metin alanı seçili durumdayken Properties denetçisindeki Init val metin alanına Enter Your Email Address yazın. Init val ya da başlangıç değeri (initial value), ziyaretçi sayfayı yüklediğinde ilgili metin alanında belirecek olan metni ayarlamanızı sağlar. Init val seçeneği, ziyaretçiye kendisinden istenen bilgiyle ilgili bir örnek görüntüleyerek yardımcı olabilir. Ziyaretçiler başlangıç değerini kendi yazdıkları metinle değiştirebilir. Başlangıç değerlerinden, ziyaretçilerden bilgi girmelerini istemek veya örnek metinler görüntülemek için faydalanabilirsiniz. Her ne kadar ziyaretçiler bu metni değiştirebilseler de, bu seçeneği dikkatli kullanın. Çünkü formu hemen doldurup geçmek isteyen ziyaretçiler, içinde metin bulunan bir alanı, daha önce doldurmuş olduklarını düşünerek kolayca atlayabilirler. Başlangıç değerleri ziyaretçilerin atlayıp geçmesi durumunda sorun yaratabilir. Çünkü bu değerlerin bulunduğu alanlar doldurulmuş gibi durur. 11. Ekleme noktasını belge penceresindeki Email notunun üzerine yerleştirin. Etiket Seçici’de <label> etiketini seçin, sağ ok tuşuna bir kez tıklayın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunda yer alan Text Field düğmesine tıklayın ve Input Tag Accessibility Attributes iletişim kutusundaki Label metin alanına Phone: yazın. Style alanında Wrap with label tag seçeneğinin, Position alanında da Before form item seçeneğinin işaretli olduğundan emin olun, diğer alanları boş bırakın ve OK düğmesine tıklayın. Metin alanını seçin ve Properties denetçisini kullanarak alanın adını Phone, Char width değerini 40 ve Max Chars değerini de 50 olarak ayarlayın. Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak veya belge penceresinin içine tıklayarak bu değişiklikleri uygulayın. Dosyayı kaydedin ve Web tarayıcısında önizleyin. Bu dosyayı bir sonraki uygulama için açık bırakın. Form Oluşturmak 389 Normal bir metin alanı Web tarayıcısında girdiğiniz metni siz yazarken görüntüler. Şifre için kullanılan metin alanı da diğer metin alanlarına benzer, ancak buradaki metin, siz yazarken ekranda madde imleri veya yıldız şeklinde görüntülenir. Password (şifre) seçeneği alandaki metni sadece, siz yazarken tepenizde birileri varsa onların görmesini engellemek için gizler. Verileri şifreleme veya koruma gibi bir işlem yapmaz. Verileri şifrelemek için Web sunucunuzda bir güvenli sunucu yazılımının çalışıyor olması gerekir. SSL (Secure Sockets Layer) ile veri güvenliğini sağlama konusuyla ilgili ayrıntılı bilgi almak için, birlikte çalıştığınız Web sorumlusuyla ya da sistem yöneticisiyle konuşabilirsiniz. Bir şifre alanı oluşturmak isterseniz, standart bir tek satırlı metin alanı ekleyin ve Properties denetçisindeki Type alanında Password seçeneğini işaretleyin. Bu seçenek, ziyaretçi söz konusu alana giriş yaparken ekranda yıldız işaretlerinin ya da madde imlerinin görüntülenmesini sağlar. Password seçeneğinin kullanıldığı metin alanları sadece tek satırlı metin alanı tipinde olabilir. Max Chars değeri, sunucunuzdaki şifre sınırı değerine eşit olacak şekilde ayarlanmalıdır. 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. Buradaki uygulamada tabloya bir radyo düğmesi grubu ekleyeceksiniz. 1. Ekleme noktasını belge penceresinde Phone notunun bulunduğu konuma yerleştirin. Etiket Seçici’de <label> etiketini seçin, sağ ok tuşuna bir kez basın ve ardından Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Bir sonraki adımda bu yeni paragrafa birkaç radyo düğmesi ekleyeceksiniz. 2. Insert araç çubuğunun Forms kategorisinde yer alan Radio Group düğmesine tıklayın. Aynı işlemi Insert > Form > Radio Group komutunu kullanarak da gerçekleştirebilirsiniz. Radio Group iletişim kutusu açılacaktır. 390 DERS 11 3. Radio Group iletişim kutusunda Name metin alanına contact yazın. Radyo düğmeleri kullanırken aynı gruptaki her bir radyo düğmesi için aynı adı kullanmanız gerekir. Radyo düğmeleri, sadece tek bir seçeneğin işaretlenmesine izin verildiğini gösterir. Radyo düğmelerini birer birer ekliyorsanız (Insert araç çubuğundaki Radio Button düğmesini ya da Insert > Form > Radio Button komutunu kullanarak), hepsine aynı ismi vererek bu düğmeleri aynı grubun birer parçası haline getirebilirsiniz. Birden fazla radyo düğmesi için aynı ismin kullanılması, bu düğmelerin aynı gruba dahil olduğunu gösterir. Eğer isimler aynı değilse radyo düğmeleri farklı gruplar olarak değerlendirilir ve radyo düğmeleri kullanmanın bir anlamı kalmaz. Tek bir radyo düğmesi de ekleyebilirsiniz. Ama ziyaretçinizin düğmeye tıkladıktan sonra bu düğmenin seçimini kaldırması için tek yolun formu sıfırlamak olduğunu unutmayın. Bu durumda ziyaretçinin daha önce diğer form nesnelerine yazarak girdiği ya da seçtiği bilgiler de silinecektir. CGI ve JavaScript ile birlikte kullanıldığında form nesnelerinin isimlerinin BÜYÜK/ küçük harfe duyarlı hale geldiğini de unutmayın. Örneğin bu durumda “contact” ile “Contact” aynı olmayacaktır. 4. Radio Buttons listesinde ilk “Radio” örneğine tıklayın ve bu metni Email ile değiştirin. Buna karşılık gelen Value metin alanında da aynı ismi kullanın. “Radio” sözcüğünün ikinci örneğine tıklayın ve bunu da Phone ile değiştirin. Buna karşılık gelen Value metin alanında da aynı ismi kullanın. Varsayılan durumda her grup (Radio Group) en az iki radyo düğmesi içerir. İstediğiniz kadar radyo düğmesi ekleyebilirsiniz. Label ya da Value listesindeki bir örneğe tıkladığınızda ilgili metin vurgulu hale gelir ve bu metni değiştirebilirsiniz. Artı (+) ve eksi (-) düğmelerini kullanarak yeni girişler ekleyebilir veya mevcut girişleri 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. 5. Lay Out Using alanında Line breaks seçeneğini işaretli olarak bırakın ve OK düğmesine tıklayarak Radio Group iletişim kutusunu kapatın. En son radyo düğmesinin altında beliren satır sonunu silin. Line breaks seçeneği radyo düğmelerini belgenize her bir giriş ayrı bir satırda olacak şekilde yerleştirir. Table seçeneği ise, her bir giriş ayrı bir satırda olacak şekilde bir tablo ekler. Form Oluşturmak 391 6. Sayfayı Web tarayıcınızda önizleyin ve radyo düğmelerini her birine tıklayarak test edin. Seçmek üzere bir radyo düğmesine tıkladığınızda diğer radyo düğmesinin seçiminin kaldırılması gerekir. Bunu görmek için dosyayı Web tarayıcınızda önizlemeniz gerekir. Form nesneleri Dreamweaver’ın belge penceresinde seçilmiş ya da işaretlenmiş olarak görünmez. training.html belgesini kaydedin ve bir sonraki uygulama için açık bırakın. 392 DERS 11 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. 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. Şimdiki uygulamada bir dizi onay kutusu ekleyeceksiniz. 1. Ekleme noktasını, Experience And Interests göstergesinin içine yerleştirin, Etiket Seçici’de <legend> etiketini seçin. Sağ ok tuşuna bir kez basın ve ardından da Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. I am interested in specific training segment(s): yazın. Shift+Return (Macintosh’ta) ya da Shift+Enter (Windows’ta) tuşlarına basarak metinden sonra bir satır sonu ekleyin. (check all that apply) yazarak bunun sonuna da bir satır sonu ekleyin. Ders 2’den de hatırlayacağınız gibi satır sonu, ekleme noktasını boş bir satır eklemeden bir sonraki satıra götürür (normal bir paragraf sonunun yaptığı gibi). 2. Insert araç çubuğunun Forms kategorisinde yer alan Checkbox düğmesine tıklayın. Aynı işlem için Insert > Form > Check Box komutunu da kullanabilirsiniz. Checkbox düğmesi Input Tag Accessibility Attributes iletişim kutusu açılacaktır. 3. Label metin alanına Anusara Yoga Immersion yazın. Style bölümünde Wrap with label tag seçeneğini ve Position bölümünde de After form item seçeneğini işaretleyin. Diğer alanları boş bırakın ve OK düğmesine tıklayın. Forma, ilgili not metniyle birlikte bir onay kutusu eklenecektir. 4. Sadece onay kutusunu seçin. Properties denetçisinde yer alan CheckBox name metin alanındaki “checkbox” metninin yerine segment yazın. Checked Value metin alanına immersion yazın. Hem not, hem de onay kutusu seçiliyse, Properties denetçisinde onay kutusu özellikleri görüntülenmez. Form Oluşturmak 393 Bir ziyaretçi Anusara Yoga Immersion onay kutusunu işaretlerse immersion değeri buna karşılık gelen onay kutusunun seçili durumda olduğunu gösterir ve segment değeri, onay kutusu grubunu tanımlar. Bir dizi onay kutusuna aynı ismi vererek bunları bir grup olarak tanımlayabilirsiniz. Bu onay kutularına ayrı ayrı anlaşılır ve doğru değerler verdiğinizden emin olun. 5. Anusara Yoga Immersion notundan sonra gelen boşluğun arkasına bir satır sonu ekleyin. İkiden beşe kadar olan adımları tekrarlayarak yeni onay kutuları oluşturun ve bunların not metinlerini In-Depth Asana Training & Practice, Yoga Philosophy Series ve Satsang: Kirtan, Meditation and Discussion olarak ayarlayın. Her onay kutusu ve her onay kutusuna ait not kendi satırında olmalıdır. Properties denetçisinde yer alan CheckBox name metin alanındaki “checkbox” yazısını bütün onay kutularında segment ile değiştirin. Her bir Checked Value metin alanına sırasıyla asana, philosophy ve satsang yazın. Ekleme noktasını notlardan sonra gelen boşluğun arkasına yerleştirmek önemlidir. Çünkü ekleme noktası, onay kutusu ve metni çevreleyen label etiketinin dışına yerleştirilecektir. Bunu Etiket Seçici’ye bakarak kontrol edebilirsiniz. <p><label> dizisi etiket hiyerarşisinin sonunda (sağda) yer alıyorsa ekleme noktası hâlâ label (not) etiketlerinin arasında demektir ve onu taşımanız gerekir. Burada sadece <p> etiketini görürseniz, bir sonraki onay kutusu için satır sonunu eklemeye hazırsınız demektir. Ekleme noktasının bulunduğu konuma ait kod hiyerarşisindeki en son etiket, Etiket Seçici’nin en sağında görüntülenir. Etiket Seçici hiyerarşisi her zaman <body> etiketiyle başlar. Eğer etiket hiyerarşisi, tamamı görüntülenemeyecek kadar uzunsa Etiket Seçici’nin sol tarafında (baş taraf) <body> etiketini göremeyebilirsiniz. Daha sonra eklenen etiketlere yer açmak için Etiket Seçici’deki etiketler sol tarafta gözden kaybolmaya başlar. Diğer etiketleri de görmek isterseniz, belge penceresini genişleterek Etiket Seçici’ye biraz daha yer kazandırabilirsiniz. Tablo, siz form nesneleri eklemeye devam ederken içeriğine yer açmak üzere aşağıya doğru büyüyecektir. Bu durumda formun kırmızı noktalı çizgisi tabloyu örtüyormuş gibi görünebilir ve tablonun alt kısmıyla birlikte aşağıya doğru inmeyebilir. Bu durumla karşılaşırsanız, belge penceresinde tablonun dışında bir yere tıklayarak Dreamweaver’ın görüntüyü tazelemesini sağlayın. 6. Sayfayı Web tarayıcınızda önizleyin ve her birine tek tek tıklayarak onay kutularını test edin. Belgeniz burada gösterilen örneğe benzeyecektir. 394 DERS 11 training.html belgesini kaydedin ve bir sonraki uygulama için açık bırakı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. 1. Experience and Interests alan kümesinin içinde Satsang onay kutusunu çevreleyen label etiketinden hemen sonra Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunun Forms kategorisinde yer alan List/Menu düğmesine tıklayın. Aynı işlemi Insert > Form > List/Menu komutunu seçerek de gerçekleştirebilirsiniz. List/Menu düğmesi Input Tag Accessibility Attributes iletişim kutusu açılacaktır. Form Oluşturmak 395 2. Label metin alanına What type(s) of yoga have you studied and/or practiced? yazın. Style alanında Wrap with label tag seçeneği, Position alanında da seçeneği işaretli olmalıdır. Geri kalan alanları boş bırakın ve OK düğmesine tıklayın. Forma küçük bir menü ve buna karşılık gelen not eklenecektir. Dreamweaver varsayılan olarak bir açılır menü ekler. 3. Not metni ve menünün arasına bir satır sonu ekleyin. Sadece menüyü seçerek Properties denetçisinde bununla ilgili seçeneklerin görüntülenmesini sağlayın. Properties denetçisinde List/Menu özellikleri görüntülenecektir. 4. Properties denetçisindeki Type alanında List seçeneğini işaretleyin ve Height değerini 4 yapın. Selections alanındaki Allow multiple onay kutusunu işaretleyin. Böylece eklediğiniz nesnenin biçimini kaydırılabilir bir liste olarak değiştirdiniz. Form nesnesini menüden listeye dönüştürebilmeniz için yükseklik (Height) seçeneğini 1’den büyük bir değere ayarlamanız gerekir. List ayarı, menülerde olmayan ilâve bir seçeneğe daha sahiptir. Selections bölümündeki Allow multiple onay kutusunu kullanarak birden fazla seçim yapılmasına izin verebilir ya da vermeyebilirsiniz. Bu seçenek varsayılan durumda işaretli değildir. Selections bölümündeki bu kutuyu işaretlerseniz, ziyaretçiler Cmd (Macintosh’ta) ya da Ctrl tuşunu (Windows’ta) basılı tutup tıklayarak bitişik olmayan birden fazla seçeneği işaretleyebilir. Ziyaretçiler hem Macintosh’ta, hem de Windows’ta Shift tuşunu basılı tutup tıklayarak bitişik birden fazla seçim yapabilir. Birden fazla seçim yapılabilmesine izin verecekseniz, ziyaretçilerinize birden fazla seçim yapabileceklerini (ve bunu nasıl yapacaklarını) bildirmeniz iyi olacaktır. Pek çok ziyaretçi bu komutları bilemeyebilir. En iyisi, ziyaretçilerinize sitenizle etkileşime girmek için kullanabilecekleri bilgileri ve araçları sağlamaktır. Height metin alanına görülmesini istediğiniz satır sayısını girerek kaydırılabilir liste için bir yükseklik değeri ayarlayabilirsiniz. Height değeri için 1’den büyük bir sayı kullandığınızdan emin olun. Aksi takdirde kaydırılabilir liste bir menü olarak görüntülenecektir. 396 DERS 11 5. Properties denetçisindeki List/Menu metin alanında yazan select sözcüğünü yogaTypes ile değiştirin ve ardından List Values düğmesine tıklayın. List Values iletişim kutusu açılacaktır. Bu iletişim kutusu, hem liste, hem de menü girişleri için aynıdır. 6. Item Label alanına Anusara yazın ve Tab tuşuna basın. Value alanına anusara yazın. List Values iletişim kutusundaki en uzun öğe listenin ya da menünün genişliğini belirler. Bir listeyi ya da menüyü sürükleme ya da boyutlarını tanımlama yöntemiyle yeniden boyutlandıramazsınız. 7. Menüye yeni bir seçenek eklemek için Tab tuşuna basın ya da iletişim kutusunun sol üst köşesindeki artı işaretli düğmeye (+) tıklayın. List Values iletişim kutusundan bir öğe silmek için eksi işaretli düğmeyi (-) kullanabilirsiniz. 8. Altıncı ve yedinci adımı tekrarlayarak listeye Ashtanga, Bikram, Dynamic Hatha, Hatha, Integral, Iyengar, Kripalu, Vinyasa, Other Western-style ve Other Eastern-style öğelerini ekleyin. Value alanındaki değerleri de her bir bölge adıyla eşleşecek şekilde sırasıyla ashtanga, bikram, dynHatha, hatha, integral, iyengar, kripalu, vinyasa, otherWest ve otherEast olarak değiştirin. Listenin sırasını değiştirmek isterseniz Value alanının üstündeki ok düğmelerini kullanabilirsiniz. Form Oluşturmak 397 9. OK düğmesine tıklayarak iletişim kutusunu kapatın. Listede yeni eklediğiniz öğeleri görüntülenecektir. Properties denetçisinde liste/menü öğeleriyle ilgili Initially selected adında ilâve bir seçenek vardır. Sayfa yüklendiğinde seçili halde görüntülenmek üzere listedeki öğelerden istediğiniz birini ayarlayabilirsiniz. Bu seçenek kaydırılabilir listelerde pek tercih edilmeyebilir. Ama menü öğelerinin ilk satırında “Birini seçin...” gibi bir komutun ya da örnek bir seçimin belirmesi ziyaretçiler açısından faydalı olabilir. Başlangıçta seçili halde görüntülenmek üzere bir öğe seçerseniz, bunun seçimini doğrudan kaldırmak için kullanabileceğiniz herhangi bir yöntemin olmadığını unutmayın. Bu öğenin seçimini kaldırmak isterseniz, List Values iletişim kutusunu açmanız, seçilen öğeyi silmeniz ve tekrar listeye eklemeniz gerekir. 10. Listeden sonra bir satır sonu ekleyin ve (select the most appropriate options——make multiple selections with Cmd-Click on the Macintosh and Ctrl-Click on Windows) yazın. Öğelerin seçilmesiyle ilgili yardımcı komutlar sunmak her zaman için iyi bir alışkanlıktır. Bu, özellikle birden fazla seçim yapmayı bilmeyen ziyaretçiler için çok faydalıdır. Böylece ziyaretçilerinize kolaylık sağlamış olursunuz ve ayrıca ziyaretçilerin formu eksiksiz olarak doldurma ihtimali de artar. Ç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. Bu uygulamada formun içindeki tabloya çok satırlı bir metin alanı yerleştireceksiniz. 1. Ekleme noktasını liste kontrolünün altındaki metnin içinde herhangi bir yere yerleştirin. Etiket Seçici’yi kullanarak <label> etiketini seçin, sağ ok tuşuna bir kez basın ve ardından Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Ekleme noktası artık olması gereken yerde, yani alan kümesinin içinde, fakat liste kontrolünün dışındadır. 2. Insert araç çubuğunun Forms kategorisinde yer alan Textarea düğmesine tıklayın. Çok satırlı bir metin alanını Insert > Form > Textarea komutunu seçerek de ekleyebilirsiniz. Textarea düğmesi 398 DERS 11 Input Tag Accessibility Attributes iletişim kutusu açılacaktır. Dreamweaver’da çok satırlı bir metin alanı textarea olarak adlandırılır. 3. Label metin alanına “Have you had any teaching experience in general? Please describe.” yazın. Style alanında Wrap with label tag seçeneğinin, Position alanında da Before form item seçeneğinin işaretli olması gerekir. Geri kalan alanları boş bırakın ve OK düğmesine tıklayın. Belge penceresinde çok satırlı bir metin alanı ve buna karşılık gelen not metni belirecektir. 4. Not metniyle çok satırlı metin alanının arasına bir satır sonu ekleyin. Çok satırlı metin alanını seçin. Doğrudan notla metin alanının arasına bir satır sonu eklemek için metin alanını seçin ve sol ok tuşuna bir kez basın, sonra da satır sonunu ekleyin. Çok satırlı bir metin alanını seçtiğiniz için Properties denetçisinde metin alanı (Text Field) özellikleri görüntülenecektir. Tek satırlı bir metin alanını seçip ardından Properties denetçisindeki Type alanında Multi line’ı seçeneğini işaretleyerek bu alanı çok satırlı bir metin alanına dönüştürebilirsiniz. 5. Properties denetçisindeki TextField metin alanındaki textarea sözcüğünü teachingExp ile değiştirin. Char Width metin alanına 40 yazın. Çok satırlı metin alanları kullandığınızda Properties denetçisinde ilave bir seçenek görürsünüz. Wrap menüsü sadece çok satırlı metin alanlarında kullanılabilir. Tek satırlı ve parola metin alanlarında bu menü seçilemez durumdadır. Wrap menüsü, çok satırlı metin alanına girilen metnin görünür alana sığmaması durumunda bu metnin nasıl görüntüleneceğini belirler. Bu uygulamada Wrap seçeneğini Default ayarında bırakın. Wrap menüsündeki seçenekler şunlardır: Default, Off, Virtual ve Physical. • Default seçeneği, tarayıcının varsayılan ayarını kullanır. Type alanında Multi line’ı işaretlediğinizde otomatik olarak bu seçenek ayarlanır. • Off 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. Form Oluşturmak 399 • Virtual 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. • Physical 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. 6. Properties denetçisindeki Num Lines metin alanına 4 yazın. Bu seçenek, kaydırılabilir alanda kaç satırın görüneceğini bildirir. Ziyaretçinin gireceği satır sayısını sınırlamaz. Ziyaretçi yazı yazarken ayarlanmış olan değeri geçtiğinde metin yukarıya doğru kaydırılır. 7. Ekleme noktasını çok satırlı metin alanına yerleştirin ve Etiket Seçici’de <label> etiketini seçin. Sağ ok tuşuna bir kez basın ve ardından da Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. İkiden altıya kadar olan adımları tekrarlayarak ikinci bir metin alanı oluşturun. Not metni olarak `What do you want to gain from this program? If you have specific goals or areas of interest that you would like to explore, please explain. Please be specific” cümlelerini atayın. Diğer erişilebilirlik seçenekleri 3 numaralı adımdaki gibi kalsın. Alanı gain olarak adlandırın. Önceki çok satırlı metin alanı için 5 ve 6 numaralı adımlarda kullandığınız nitelikleri ayarlayın. Belgeniz burada gördüğünüz örnektekine benzeyecektir. 8. Sayfayı Web tarayıcınızda önizleyin ve farklı seçenekleri işaretleyerek listeyi test edin. training.html belgesini kaydedin ve bir sonraki uygulama için açık bırakın. 400 DERS 11 Düğme Eklemek Formlarda, biri form verisini göndermek (Submit-Gönder), diğeri de formu temizlemek (Reset) için olmak üzere genellikle iki düğme kullanılır. Submit düğmesi Web tarayıcısına veriyi göndermesi gerektiğini bildirir. 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 Submit düğmesi bulunur. Bu da çoğunlukla Search (Ara) ya da Go (Git) şeklinde adlandırılır. 1. Ekleme noktasını, üçüncü alan kümesinde bulunan Send Your Answers metninin içine yerleştirin. Etiket Seçici’yi kullanarak <legend> etiketini seçin, sağ ok tuşuna bir kez basın ve ardından Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunun Forms kategorisinde yer alan Button düğmesine tıklayın. Aynı işlemi, Insert > Form > Button komutunu seçerek de gerçekleştirebilirsiniz. Input Tag Accessibility Attributes iletişim kutusu açılacaktır. 2. Label metin alanını boş bırakın ve Style alanında No label tag seçeneğini işaretleyin. Position seçeneklerinin mevcut ayarını değiştirmeyin ve geri kalan alanları boş bırakın. OK düğmesine tıklayın. Forma bir Submit düğmesi yerleştirilecek ve Properties denetçisinde düğme özellikleri görüntülenecektir. Burada erişilebilirlik niteliklerini kullanmak gereksizdir; çünkü not, düğmenin üzerinde yer almaktadır. Varsayılan olarak kullanılan düğme Submit olduğu için, bu düğmeyle ilgili seçeneklerde herhangi bir değişiklik yapmanız gerekmez. 3. Ekleme noktasını Submit düğmesinin sağına yerleştirin. Insert araç çubuğundaki Button düğmesine tıklayın ve ikinci adımı tekrarlayarak erişilebilirlik niteliklerini Submit düğmesi için kullanılan değerlere ayarlayın. Forma ikinci bir Submit düğmesi yerleştirilecektir. Aradaki tek fark, bu düğmenin Submit2 olarak adlandırılmasıdır, çünkü iki düğme aynı isme sahip olamaz. Form nesnelerinde aynı ismi sadece aynı grupta yer alan radyo düğmelerinde ve aynı grupta bulunan onay kutularında kullanabilirsiniz. Bu uygulamada üzerinde çalıştığınız düğme farklıdır, çünkü diğer düğmelerle gruplanamaz ve bir sonraki adımda göreceğiniz gibi kendi eylemini içerecektir. 4. İkinci Submit düğmesi seçili durumdayken Properties denetçisindeki Action seçenekleri arasından Reset Form’u seçin. Label metin alanında yer alan metin otomatik olarak Reset’e dönüşecektir. Bu düğmenin eylemi, bütün metin alanlarında, onay kutularında ve radyo düğmelerinde yapılan ayarları sıfırlar ve bunları orijinal durumlarına (sayfa Web tarayıcısına ilk yüklendiği zamanki durum) döndürür. Form Oluşturmak 401 Action bölümündeki üçüncü seçenek None’dır. Submit ve Reset seçeneklerinden farklı olarak None düğme seçeneğine iliştirilmiş bir eylem yoktur. Bu düğme başka bir işlem gerçekleştirmek için bir script’le birlikte kullanılabilir. Örneğin bir JavaScript rutini, toplam ya da kazanç hesabı gibi işlemleri gerçekleştirmek için kullanılabilir ve sonuç değerini ziyaretçiye gönderebilir. 5. Label metin alanında Reset sözcüğünü Clear Form yazarak değiştirin. Button Name metin alanında varsayılan ismi reset olarak değiştirin. Düğmeleri açık bir şekilde, ziyaretçinin beklentilerini göz önüne alarak adlandırmak en iyisidir. Submit ve Reset, ziyaretçilerin ne anlama geldiğini bildiği ve her yerde kullanıldıkları için standart haline gelmiş form düğmesi notlarıdır. Ziyaretçiler formu göndermeye kalktıklarında yanlışlıkla tıklamalarını önlemek için Reset düğmesini doğru dürüst bir konuma yerleştirin ve not metninin açıkça görülmesine dikkat edin. Insert araç çubuğundaki Image Field düğmesini kullanarak standart düğmelerin yerine resimlerden de faydalanabilirsiniz. Bunun için ilgili resmi bir form elemanı olarak ekler ve koda da uygun değeri yerleştirirsiniz (value=”Submit” gibi). Düğmelerin görünümünü özelleştirmek için resim kullanmak isteyebilirsiniz. Bu şekilde kullanılan bütün resimlerin açıkça düğmeleri temsil ettiğinden emin olmak gerekir. 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’ini 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. JavaScript konusunu Ders 8’de görmüştük. 402 DERS 11 Form işlenmek üzere gönderildiğinde gizli alanlarla ilişkilendirilmiş herhangi bir script kullanılmamışsa, forma gömülen gizli alanlar, diğer form nesnelerindeki değerler gibi dahil edilir. 1. Ekleme noktasını tablonun ikinci satırının en altına yerleştirin. Ekleme noktası şu anda Send Your Answers alan kümesini içeren hücrenin hemen üstündeki hücrede bulunmaktadır. Gizli alanları belgede istediğiniz yere yerleştirebilirsiniz. Ekleme noktası ikinci hücrenin alt kısmındaki satırda olduğu için artık Experience and Interests yazısının bulunduğu alan kümesinin içinde değildir. Bu durum şimdi yaptığımız uygulamada sorun yaratmaz, çünkü aşağıdaki adımlarda ekleyeceğimiz gizli alan ziyaretçi tarafından görülmeyecektir. Burada yerleşim önemli değildir. 2. Insert araç çubuğunun Forms kategorisinde yer alan Hidden Field düğmesine tıklayın. Hidden Field düğmesi Belgeye bir gizli alan eklenecektir. Gizli alan simgesi, (isimli yer imi simgeleri gibi) görünmeyen elemanlar için kullanılan görsel bir yardımcıdır. Bu simge de Web tarayıcısında görünmez. Form Oluşturmak 403 3. Gizli alan seçili durumdayken HiddenField metin alanındaki varsayılan isim olan hiddenfield’ı webRequest yazarak değiştirin. Properties denetçisindeki Value metin alanına true yazın. Burada, bu formun başlığını gizli alan için önceden tanımlanmış bir değer olarak dahil ediyorsunuz. Sürekli sabit kalan bilgiler bu tür gizli alanlar vasıtasıyla dinamik sayfalara ve CGI script’lerine aktarılabilir. Bu şekilde ayarlanan değerlerin kullanıldığı gizli alanlar şifrelenmez ya da güvenlik altına alınmaz. Bunlar Web tarayıcısı aracılığıyla belge kaynak kodunda kolayca görülebilir. Önemli bilgileri (şifre gibi) bu tür gizli alanlara yerleştirmeyin. Dinamik sayfalar ya da CGI script’leri aracılığıyla alanın değeri dinamik olarak üretilirken güvenlik altına alınmış gizli alanlar oluşturulabilir. Gizli alanların ismi ve değeri genellikle bunları işlemek için kullanılan script’e bağımlıdır. Örneğin veriyi bir e-posta adresine gönderen bazı script’ler gizli alanın ismi olarak alıcıyı, değer olarak da verinin gönderilmesi gereken e-posta adresini kullanabilir. Bu isim-değer çifti, sunucunuzda alıcı alanını işleyen script olmadığı sürece bir işe yaramaz. Formlarda kullanabileceğiniz bir diğer alan tipi de dosya alanıdır. Bir dosya alanı kullanarak ziyaretçilerinizin formunuz aracılığıyla size dosya gönderebilmesini mümkün kılarsınız. Bu özellik, formdaki verilerle ilgili belgeleri almanız gerektiğinde faydalı olabilir. Örneğin ziyaretçilerin CV’lerini göndermesini istediğiniz bir iş başvuru formunda bir dosya alanı kullanabilirsiniz. Dosya alanları kullanıldığında, formla alınan verilerin işlenmesi ve dosyanın yüklenmesi ya da uygun bir konuma yönlendirilmesi için sunucudan destek alınır. Formları Biçimlendirmek Formları sitenizin görünümü ve genel yapısı açısından daha uyumlu hale getirmek için CSS stillerinden (Ders 4’te görmüştük) faydalanabilirsiniz. 1. Ekleme noktasını ilk alan kümesindeki Contact Information göstergesinin içine yerleştirin. Etiket Seçici’de <fieldset> etiketini seçin. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type seçeneği olarak Tag’i işaretleyin. Metin alanında görünmüyorsa, fieldset’i seçmek için Tag metin alanının sağındaki menüyü kullanın. Define In bölümünde This document only seçeneğini işaretleyin ve OK düğmesine tıklayın. CSS Rule definition for fieldset iletişim kutusu açılacaktır. Formun farklı bölümlerini çevreleyen dış hatların görünümünü kontrol etmek amacıyla alan kümesi için bir stil oluşturabilirsiniz. 404 DERS 11 2. Category listesinde Box’ı seçin. Padding bölümünde Top metin alanına 5 yazın ve Same for all kutusunu işaretli olarak bırakın. Padding ayarı, form nesneleri için biraz boşluk bırakır. Böylece nesneler alan kümesi dış hattının üzerine gelmez. 3. Category listesinde Border’ı seçin. Style bölümünde, Top menüsünde solid’i işaretleyin ve Same for all kutusunu işaretli olarak bırakın. Width bölümünde Top metin alanına 1 yazın, birim olarak pixels seçeneğinin işaretli olduğundan emin olun ve Same for all kutusunu işaretli olarak bırakın. Color bölümünde Top metin alanına #CCCC99 yazın ve Same for all kutusunu işaretli olarak bırakın. OK düğmesine tıklayın. Her alan kümesinin etrafında birer kenarlık belirecektir. Form Oluşturmak 405 4. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type alanında Tag’i seçin. Tag metin alanının sağındaki menüyü kullanarak H5’i seçin ve Define In alanında This Document Only seçeneğini işaretleyin. CSS Rule definition iletişim kutusunda Type kategorisini seçin ve renk seçeneğini #999999 olarak ayarlayın. OK düğmesine tıklayın. Bu stil, formun farklı bölümlerini gösteren göstergeler için kullanılacaktır. 5. Contact Information gösterge metnini seçin. Properties denetçisinde Format seçeneğini değiştirerek Heading 5 yapın. Diğer iki alan kümesine ait göstergeler için de aynı stil ayarını kullanın. Aynı işlemi, ekleme noktasını metnin içine yerleştirip Properties denetçisindeki Format menüsünden H5’i seçerek de gerçekleştirebilirsiniz. Burada metni seçmeniz gerekmez. Çünkü başlıklar (headings) metin bloğunun tamamına uygulanır. Formunuzun renk ve stil açısından Yoga Sangha proje sitesinin geri kalanıyla uyumlu göründüğüne dikkat edin. Dosyayı kaydedip Web tarayıcınızda önizleyebilirsiniz. Formların İşlenmesi Formunuzun bir veritabanına bilgi göndermesi ya da bir veritabanından bilgi alması, bir arama işlemi gerçekleştirmesi veya diğer bir şekilde veri işlemesi gerekiyorsa, formunuzu işlevsel hale getirmek için söz konusu verilerle ne yapılacağını ve bu verilerin nasıl değerlendirileceğini tanımlamanız gerekir. Bu tanımlama işlemi, form seçili durumdayken Properties denetçisindeki Action ve Method seçenekleri kullanılarak yapılır. Formu seçmek için ekleme noktasını formun içinde herhangi bir konuma yerleştirin ve Etiket Seçici’de <form#training> etiketine tıklayın. Formları işlemek için kullanılabilen ve veritabanlarından faydalanan uygulamalar ve dinamik Web sayfaları geliştirmek için Dreamweaver’ı kullanabilirsiniz. Veritabanıyla çalışma özelliğine sahip dinamik bir Web sitesi oluşturarak bununla çalışmak için bir sunucu bağlantısı gerekir. Hangi script dilinin (PHP, ASP, JSP ve ColdFusion gibi) kullanılacağını, sunucunun tipi ve yapılandırma ayarları belirler. Dinamik sayfalar ve veritabanlarından faydalanan bir site oluşturma konusu bu kitabın kapsamı dışındadır ve bu dersi tamamlarken formları işlemek üzere dinamik sayfalar veya CGI script’leri kullanan bir sunucuya erişiminiz olmayabilir. Bu yüzden aşağıda verilen bilgiler sadece referans malzemesi olarak sunulmuştur. ISS’nize (Internet Servis Sağlayıcı) ya da birlikte çalıştığınız Web sorumlusuna başvurarak, sunucunuzda kullanılan script’lerle çalışmak üzere Action ve Method seçeneklerini ayarlamak için gereken bilgilere ulaşabilirsiniz. • Action seçeneği, Web tarayıcısına form verileriyle ne yapması gerektiğini söyler. Konuma ait URL veya yolla birlikte ziyaretçi Submit düğmesine tıkladığında bilgileri işleyen sunucu taraflı uygulamanın (bu genellikle bir CGI script’i ya da bir dinamik sayfadır) ismini tanımlar. CGI script’leri, ilgili form tarafından gönderilen verileri işleyen Web sunucusunda bulunur. 406 DERS 11 • Method seçeneği, form verisinin nasıl değerlendirileceğini belirler (GET, POST ya da Default). Form tarafından gönderilen veri, ziyaretçinin girdiği bilgilerden türetilen bir sürekli metin katarıdır. GET metodu, form içeriklerini, Action metin alanında tanımlanan URL’e ekler. Bu yüzden bu bilgi Web tarayıcısının adres çubuğunda görünür. GET, veri aktarımında güvenli bir metot değildir. Kredi kart bilgileri ya da sosyal güvenlik numaraları gibi önemli bilgilerin aktarılmasında kullanılmamalıdır. GET metodu sadece sınırlı bir miktarda bilgi gönderebilir. Bunun sebebi, Web tarayıcılarının ve sunucuların URL uzunluğuyla ilgili getirdiği kısıtlamalardır. Bu sınırlılık farklılık gösterebilir. Bu yüzden de GET metodu, ziyaretçilerin uzun bilgiler girebileceği formlar için de iyi bir seçenek değildir.(Uzun formlarda kısıtlamayla belirlenen sınırın aşılması durumunda bilgilerin geri kalanı kaybedilir.) Diğer yandan POST metodu, çok daha fazla bilgi gönderebilir ve çok güvenilir ve güvenlidir. Script’lerde form verisi göndermek için en sık kullanılan metottur. POST, form değerini bir mesajın gövde bölümünde göndermek için bir HTTP talebi kullanır. Default ise Web tarayıcısının varsayılan metodunu kullanır. Bu da genellikle GET’tir. Formları Test Etmek Form eylemi için, eğer sunucunuzda çalışan bir CGI script’i yoksa, bir “mailto” öğesi (Ders 3’te gördüğümüz bir e-posta bağlantısı) kullanarak bir formu belirli bir e-posta adresine gönderebilirsiniz. Bu işlem sadece formları test etmek için yapılmalıdır. Bu yöntemin çeşitli kusurları vardır (e-posta mesajı gönderecek şekilde yapılandırılmayan Web tarayıcılarından dolayı ortaya çıkan hatalar ya da bir e-posta programına bağlanamama ve güvenliğin olmaması gibi). Formları işlemek için her zaman dinamik sayfalar ya da CGI script’leri kullanmalısınız. mailto eylemi başlangıç için formunuzu test etmenizi sağlasa da, formu ilgili sunucu script’leriyle test etme işleminin yerini tutamaz. Sayfalarınızı her zaman canlı bir ortamda ayrıntılı bir şekilde test edin. Böylece ziyaretçilerinizin kullanımına sunmadan önce script’lerinizin beklendiği şekilde çalıştığından emin olabilirsiniz. 1. training.html belgesinde Etiket Seçici’de <form#training> etiketine tıklayarak formu seçin. Properties denetçisindeki forma ait Action metin alanına mailto: ve bunun arkasına da e-posta adresinizi yazın. İki nokta üst üste işaretinden sonra boşluk bırakmayın. İki nokta üst üste işaretini eklemeyi ve boşluk bırakmamanız gerektiğini unutmayın. Ders 3’te de e-posta bağlantılarını bu şekilde elle eklemiştiniz. 2. Method açılır menüsünden POST’u seçin ve Properties denetçisindeki Enctype metin alanına text/plain yazın. Form Oluşturmak 407 Burada kodlama tipini düz metin olarak ayarladınız. Aksi takdirde, gönderilen metin neredeyse okunamayacak bir şekilde kodlanacaktı. Enctype seçeneği, formdaki verilerin nasıl kodlanacağını tanımlar. text/plain değeri, her bir form nesnesine ait bilgiyi ayrı bir satırda biçimlendirir. Bu değeri kullanarak bir e-posta mesajındaki verilerin daha kolay bir şekilde okunmasını sağlayabilirsiniz. Siz bir kodlama tipi tanımlamazsanız, Web tarayıcısı verileri biçimlendirmek için varsayılan bir değer kullanır. Bu varsayılan değer çoğu durumda kullanılması gereken değer olduğu için genelde sizin bir enctype değeri belirlemeniz gerekmez. Buradaki örnek istisnadır. Çünkü e-posta mesajında formu test etmek için kullanılacak olan verileri gönderiyorsunuz. Formunuza bir konu satırı eklemek için Action metin alanındaki değeri aşağıdaki ile değiştirin: mailto:YourEmailAddress?Subject=Title for Subject goes here. ?Subject= ifadesi, arkasından gelen metni Konu (Subject) olarak tanımlar. Konuda boşluk kullanabilirsiniz. Ama tırnak işareti, kesme işareti, nokta ya da bölü gibi özel karakterler kullanmayın (?Subject= ifadesinde yer alan karakterler hariç, çünkü bunlar e-posta ile konuyu birbirinden ayırır). Zira bu karakterler HTML koduyla uyuşmazlık çıkarır. Bu, her Web tarayıcısında çalışmayabilir ve formun test edilmesi dışında başka bir şey için kullanılmamalıdır. mailto eyleminin bütün Web tarayıcılarında güvenli olarak çalışmayabileceğini unutmayın. Bunu sadece test amacıyla kullanın. Eğer Web tarayıcınız e-posta mesajı gönderecek şekilde yapılandırılmamışsa, formunuzu bu şekilde test edemezsiniz. 3. Dosyayı kaydedin ve Web tarayıcınızda test edin. Önizleme için kullandığınız tarayıcıya bağlı olarak e-posta mesajı göndermeyle ilgili uyarı mesajları alabilirsiniz. Bu mesajı onayladığınızda form sonuçları belirttiğiniz e-posta adresine gönderilecektir. 4. Etiket Seçici’yi kullanarak <form#training> etiketini seçin. Action metin alanındaki yazıyı silin ve Method seçeneğini GET olarak değiştirin. Dosyayı kaydedin ve Web tarayıcınızda test edin. Bu, formlarınızı test etmek için kullanabileceğiniz diğer bir yöntemdir. Burada sonuçlar epostayla gönderilmez. Web tarayıcısında formun bulunduğu sayfa kalır ve formdaki sonuçlar tarayıcı pencerenizdeki Address (Adres) alanında yer alan URL’e eklenir. Bu dosyayı kapatabilirsiniz. 408 DERS 11 Sıçrama Menüleri Oluşturmak Sıçrama menüsü (jump menu), sitenizdeki ya da diğer Web sitelerindeki sayfalara giden bağlantıları içeren bir menü tipidir. Normal bağlantılara benzer şekilde sıçrama menüsü de her tip dosyaya (resim ya da PDF dosyaları da dahil olmak üzere) bağlanabilir. Sıçrama menüsü, sitenizdeki sayfalara bağlantı atamak için kullanımı kolay bir arabirim sunar (tabii eğer listeyi çok uzun tutmazsanız). Forma gömülen bir sıçrama menüsü, Web tarayıcısında bir menü listesi gibi görünür. Önceki kısımda anlatıldığı gibi herhangi bir eyleme ya da yönteme ihtiyaç duymaz. Çünkü sıçrama menülerinde verilerin gönderilmesi, alınması ya da işlenmesi söz konusu değildir. 1. Lesson_11_Forms/Training klasöründeki training.html dosyasını açın. Ekleme noktasını sayfanın sağ üst köşesinde yer alan “Anusara Yoga in the Heart of San Francisco’s Mission District” metninin içinde herhangi bir yere yerleştirin. Etiket Seçici’de <table.tagline> etiketine tıklayın. Sağ ok tuşuna basın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak yeni bir satır oluşturun. Choose a Program yazın. Insert araç çubuğunun Forms kategorisinde yer alan Jump Menu simgesine tıklayın. Aynı işlemi, Insert > Form > Jump Menu komutunu seçerek de gerçekleştirebilirsiniz. Insert Jump Menu iletişim kutusu açılacaktır. Varsayılan durumda menüde “unnamed1” adında tek bir öğe bulunur. Dreamweaver bu öğeler için otomatik olarak sayısal sırayla genel tipte isimler atar (unnamed1, unnamed2, vb). Form Oluşturmak 409 2. Insert Jump Menu iletişim kutusundaki Text metin alanına Pick One yazın. When selected, go to URL metin alanına # yazın. Menü öğeleri listesindeki ilk öğe menünün ilk satırında belirecektir. Ziyaretçi menü listesinde ilk bu öğeyi gördüğü için, ilk satır, listenin kısa bir açıklaması ya da ziyaretçiye bunun bir sıçrama menüsü olduğunu bildiren kısa bir ipucu niteliğinde olmalıdır. 3. Options alanında Select first item after URL change seçeneğini işaretleyin. Bu seçim, ziyaretçi bu sayfaya geri döndüğü zaman, menü listesinin listedeki ilk öğeyi görüntülemesini sağlar. Aksi takdirde listede en son işaretlenen seçenek görüntülenir. Open URLs in menüsü, Ders 10’da yaptığınız gibi bağlantıları belirli frame’lere yönlendirmek için kullanılabilir. Bu uygulamada varsayılan Main Window seçeneğini değiştirmeyin. 4. Yeni bir menü öğesi eklemek için artı işaretine (+) tıklayın. Text metin alanına Anusara Yoga Immersion yazın, Tab tuşuna basın ve When selected, go to URL metin alanına immersion.html yazın. In-Depth Asana Training, asana. html; Yoga Philosophy Series, philosophy.html ve Satsang: kirtan, meditation, satsang.html değerlerini girerek bu adımı tekrarlayın. İşiniz bittikten sonra OK düğmesine tıklayın. Tarayıcı penceresinde bu öğeler seçildiğinde her bir öğe kendisine karşılık gelen sayfaya bağlanacaktır. Bir bağlantı, ziyaretçi buna karşılık gelen öğeyi seçtiğinde etkinleşir. Listenize bir Go (Git) düğmesi eklemek isterseniz Insert go button after menu onay kutusunu işaretleyin. 410 DERS 11 Siz sıçrama menüsünü dahil ettikten sonra Dreamweaver gereken formu otomatik olarak ekler. Bunu kırmızı noktalı çizgilerden de anlayabilirsiniz. Ekleme noktası satırın sonunda bulunduğu için sıçrama menüsü metnin hemen altında oluşturulur. Eğer “Choose a program” metninin sıçrama menüsüyle aynı satırda görünmesini isterseniz, bu metni formun içine taşımanız gerekir. Tablo kullanımı, formlarınızın yerleşimi üzerinde size daha fazla kontrol imkânı sağlar. Menüdeki öğelerin sırasını ayarlamak için yukarı ve aşağı ok düğmelerini kullanabilirsiniz. OK düğmesine tıkladığınızda, eklemiş olduğunuz menü çok kısa görünebilir. Ziyaretçilerin bunu nasıl gördüğünü anlamak için bir sonraki adımda sayfayı Web tarayıcınızda önizleyeceksiniz. 5. Dosyayı kaydedin ve Web tarayıcınızda önizleyin. Sıçrama menüsünü oluşturduktan sonra Properties denetçisini kullanarak bazı değişiklikler yapabilirsiniz. Properties denetçisi sınırlı bir düzenleme imkânı sağlar (ziyaretçinin göreceği metni ve metnin listedeki sırasını değiştirmek gibi). Daha ayrıntılı düzenleme imkânı için sıçrama menülerini JavaScript’le birlikte kullanabilirsiniz. Formlarınızı Tek Başınıza Oluşturun Form, Web sitenizi ziyaret eden insanlar hakkında bilgi toplamak için kullanabileceğiniz mükemmel bir araçtır. Sitenizin içeriğini gözden geçirin ve ziyaretçilerinizden ne tür bilgiler toplamanız gerektiğini belirleyin. İşe, ihtiyacınız olan bilgi tiplerini bir taslak şeklinde belirleyerek başlayın. Formlarla hangi verileri toplayacağınızı belirledikten sonra daha işlevsel ve etkin bir form oluşturabilirsiniz. Gereken metin alanlarını, menüleri ve düğmeleri oluşturmak için bu derste öğrendiğiniz teknikleri kullanabilirsiniz. Formlarınız zamanında ve sık sık test edin. Formların kullanılabilirlik ve işlevsellik özelliklerini değerlendirin. Form Oluşturmak 411 Ne Öğrendiniz? Bu derste şunları öğrendiniz: • Bir Web sayfasında, üzerine form alanları yerleştirmek üzere bir form oluşturarak ziyaretçilerinize size bilgi gönderme imkânı sağladınız (Sayfa 379–381). • Form içeriğini gruplara ayırdınız ve bunların form nesneleri için alan kümeleri kullandınız (Sayfa 381–382). • Genişlik ve maksimum karakter sayısı gibi seçenekleri kullanarak tek satırlı metin alanları eklediniz (Sayfa 383–390). • Geniş bir ziyaretçi kitlesi tarafından kullanılabilecek bir form oluşturmak üzere erişilebilir nitelikler kullandınız (Sayfa 384–390). • Ziyaretçileri tek bir seçenekle sınırlamak için radyo düğmeleri eklediniz (Sayfa 390–393). • Ziyaretçilerin birden fazla seçim yapabilmelerini sağlamak için onay kutuları eklediniz (Sayfa 393–395). • Liste kutuları ve birden fazla öğe içeren menüler eklediniz ve başlangıçta seçili olarak görüntülenecek bir eleman belirlediniz (Sayfa 395–398). • Çok satırlı bir metin alanı eklediniz ve satır sayısı, maksimum karakter sayısı ve metin bölme yöntemiyle ilgili seçenekleri ayarladınız (Sayfa 398–400). • Ziyaretçilerin formu göndermek ya da formdaki bilgileri silmek için kullanabileceği Submit ve Reset düğmelerini eklediniz (Sayfa 401–403). • Ziyaretçilerin görmeyeceği bilgileri forma dahil etmek için bir gizli alan eklediniz (Sayfa 403–404). • CSS kullanarak formu biçimlendirdiniz (Sayfa 404–407). • mailto özelliğine sahip bir formu test ederek doğru çalışıp çalışmadığını kontrol ettiniz (Sayfa 407–408). • Ziyaretçilerin site içinde rahatça gezinebilmesini sağlamak için bir sıçrama menüsü oluşturdunuz (Sayfa 409–411). 412 DERS 11