A-PDF Split DEMO : Purchase from to remove the watermark

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 6 Tablo Oluşturmak 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 biriydi. CSS (Cascading Style Sheets) kullanmanın sayfaların tasarımını ve yerleşim düzenini ve Bu derste metin ve resimler içeren tablolar oluşturacak ve sayfa düzeninizi tablolarla nasıl geliştireceğinizi ve CSS ile birlikte nasıl kullanacağınızı öğreneceksiniz.

2 geliştirmek için daha iyi bir yöntem olabileceğini aklınızdan çıkarmayın, çünkü CSS pek çok yerleşim düzeni ve görünüm seçeneği sunar, ayrıca tasarımcılara ve geliştiricilere tüm sitenin görünümü ve yarattığı his üzerinde daha iyi bir kontrol imkânı sunar. Tablo tabanlı yerleşim düzenleri genelde daha kısıtlayıcıdır. CSS kullanarak daha esnek bir şekilde çalışabilirsiniz. Ayrıca CSS etkinlik ve erişilebilirlik açısından daha iyidir ve W3C nin Web geliştirme için tanımladığı mevcut standartları karşılamaktadır. Her Web tarayıcısı en yeni CSS sürümünü desteklemez (özellikle eski Web tarayıcılarının CSS desteği çok iyi değildir), bu yüzden tablolar yine de kullanışlı bir seçenek olabilir. Sonuç olarak, üzerinde çalışacağınız eski sitelerin birçoğunda tasarım için muhtemelen tablolardan faydalanılmaktadır. Bu yüzden tablo tabanlı yerleşim düzeni tasarımıyla ilgili kavramları ve teknikleri öğrenmeniz sizin açınızdan iyi olacaktır. Bu derste elde edilen sonucu görmek isterseniz, Lesson_06_Tables klasöründe yer alan Completed/Schedule alt klasöründeki index.html dosyasını açın. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Sayfalarınızın yerleşim düzenini kontrol etmek için nasıl tablo oluşturacağınızı öğreneceksiniz. Tablo özelliklerinde (kenarlık, arka plan, boşluk, renk, hizalama ve büyüklük) değişiklik yapacaksınız. Erişilebilir tablolar oluşturacaksınız. Hesap tablolarından sekmeli (tabular) veriler aktaracaksınız. Satırları ve sütunları ayarlayarak bir tabloda değişiklik yapacaksınız. Bir tablonun içeriğini sıralayacaksınız. Bir tabloyu dışarıya aktaracaksınız. Yerleşim düzeninizin optimum büyüklüğünü belirleyeceksiniz. Layout modunu kullanarak sayfa tasarımınızı oluşturacaksınız. Dreamweaver a bir taslak resim aktaracaksınız. Yaklaşık Süre Bu dersin tamamlanması yaklaşık 2 saat sürecektir. 208 DERS 6

3 Ders Dosyaları Ortam Dosyaları: Lesson_06_Tables/Images/ (dosyaların tümü) Başlangıç Dosyaları: Lesson_06_Tables/schedule/index.html Lesson_06_Tables/schedule/events.html Lesson_06_Tables/explorations/poses.html Lesson_06_Tables/Text/schedule.txt Lesson_06_Tables/Text/short-schedule.txt Lesson_06_Tables/Text/events.txt Tamamlanmış Proje: Lesson_06_Tables/Completed/index.html Lesson_06_Tables/Completed/yoga-table.html Lesson_06_Tables/Completed/schedule/index.html Lesson_06_Tables/Completed/schedule/events.html Lesson_06_Tables/Completed/explorations/poses.html 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. Macromedia Dreamweaver 8, tablo oluşturmak için kullanabileceğiniz çeşitli araçlar ve seçenekler sunar. Bu araçlara şu üç görünüm moduyla erişebilirsiniz: Standard, Layout ve Extended. Her bir görsel düzenleme modu, tablo oluşturma ve tabloları düzenleme imkânının yanında, tablo tasarımı ve yapısıyla ilgili farklı bir perspektif sunar. Bu uygulamada Standard görünüm modunu kullanarak Yoga Sangha proje sitesinde bir sayfa oluşturmaya başlayacaksınız. Tablo Oluşturmak 209

4 Tablolar ve CSS HTML de tablolar aslında bilgileri düzenlemek için kullanılan bir yöntem olarak tasarlanmıştır. Başta bir tasarım aracı olarak kullanılmaları düşünülmemiştir. Yıllar içinde Web tasarımcıları görsel olarak daha çekici ve daha işlevsel Web siteleri hazırlamaya başladıkça tablolar da yerleşim düzeni için temel bir araç haline geldi. Sonuç olarak Web sayfalarının içeriği ve yapısı birbirine daha bağımlı hale geldi. CSS, tasarımcılara içeriği Web sayfalarının yapısından ayırma imkânı sağlar. Bu da, erişilebilirlik ve esneklik, indirme süresini kısaltma ve sayfaları oluşturma ve bunların devamlılığını sağlama süresini kısaltma açısından faydalı olabilir. Web sayfalarınızın yerleşimini kontrol etmek için tablo ve CSS arasında yapacağınız seçim; Web tarayıcısı desteği, sayfalarınızın farklı platformlarda ve tarayıcılardaki görüntüsü ve kullanılması istenen yerleşim düzeni gibi çeşitli faktörlere bağlıdır. CSS desteği giderek yaygınlaşmaktadır, ama istediğiniz yerleşim düzenini oluşturmanız için CSS yeterli olamayabilir. Web sitenizin gereksinimlerini düşünmeniz, CSS ve/veya tablo kullanımıyla ilgili seçenekleri tartmanız, sayfalarınızı her ikisiyle de test etmeniz ve yerleşim düzeni için kullanacağınız yöntemi ya da yöntemleri buna göre belirlemeniz gerekir. 1. Lesson_06_Tables/Schedule klasöründeki index.html dosyasını açın. Bu sayfada bir içerik mevcuttur. Sayfada ayrıca temel biçimlendirme özellikleri ayarlanmıştır ve sayfadaki elemanların (metinler ve resimler de dahil olmak üzere) görünümünü kontrol etmek için CSS kullanılmaktadır. Bu sayfayı oluşturmak için kullanılan teknikleri önceki derslerde öğrenmiştiniz. İlave uygulama yapmak isterseniz, yeni ve boş bir belge açıp bu sayfayı kılavuz olarak kullanarak aynı sayfayı yeniden oluşturabilirsiniz. 2. Insert araç çubuğunda Layout kategorisini seçin ve Standard mod düğmesinin seçili olduğundan emin olun. Varsayılan durumda Standard mod seçeneği etkin olmalıdır. Etkin mod, vurgulu bir düğmeyle gösterilir. Etkin tablo modu olarak Standard mod seçili değilse, Standard düğmesine tıklayın. View > Table Mode komutunu kullanarak da modu kontrol edebilir ya da diğer bir moda geçebilirsiniz. Menüde bir modun yanında onay işareti varsa, bu, o modun etkin olduğunu gösterir. 210 DERS 6

5 3. Ekleme noktasını ilk paragrafla yatay çizginin arasındaki boş paragrafın içine yerleştirin ve Insert araç çubuğunda Layout kategorisindeki Table düğmesine tıklayın. Table düğmesi Insert araç çubuğunun Common kategorisinde de yer alır. Table iletişim kutusunu açmak için alternatif olarak Insert > Table komutunu seçebilir ya da Option+Cmd+T (Macintosh ta) veya Ctrl+Alt+T (Windows ta) klavye kısayolunu kullanabilirsiniz. Table iletişim kutusu açılacaktır. Table iletişim kutusu üç bölüme ayrılmıştır: Table Size, Header ve Accessibility. Table Size bölümünde şu seçenekler yer alır: Rows: 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. Columns: Sütun sayısını gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver değeri 3 tür Tablo Oluşturmak 211

6 Table width: 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. Border thickness: 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. Cell padding: 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. Cell spacing: 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. Bu özellikleri daha sonra da değiştirebilirsiniz. Belge penceresinde bir tablo seçildiğinde Table Size bölümündeki seçeneklere Properties denetçisinden ulaşabilirsiniz. Table 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. Bazı tablo özelliklerini Tag Inspector aracılığıyla da ayarlamak mümkündür. Varsayılan durumda Tag Inspector Application ve Files panel gruplarının arasında yer alır. Tag Inspector a Window > Tag Inspector komutunu seçerek ulaşabilirsiniz. Header bölümü üstbilgi için dört farklı yerleşim seçeneği içerir: None, Left, Top ve Both. Ü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. Header seçeneği, üstbilgi satırlarına ya da sütunlarına yerleştirilen bilgiyi her bir hücre için (kendi satırlarında ya da sütunlarında) tanımlayıcı haline getirmek üzere Scope niteliğinden faydalanır. Örneğin Top üstbilgi seçeneğini kullanırsanız ve ilk sütunun en üstteki hücresine Order yazarsanız bu sütundaki diğer hücreler içerikleri gösterilmek üzere bir ekran okuyucu (görme özürlü ziyaretçiler tarafından ya da standart Web tarayıcılarının kullanılamadığı durumlarda kullanılan bir tür Web tarayıcısı) tarafından sesli olarak okunurken başta Order önekinin 212 DERS 6

7 de söylendiğini duyarsınız. Bir hücreyi (ya da hücreleri) üstbilgiye dönüştüren bu seçeneğe Properties denetçisi aracılığıyla da erişebilir ve istediğiniz zaman üzerinde değişiklik yapabilirsiniz (her ne kadar burada scope niteliği ayarlanmasa da). 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 insanlar da dahil olmak üzere) işlevsel bir içerik oluşturmaktır. Dreamweaver, Accessibility 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: Caption: 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 Table iletişim kutusunda bulunur. Daha ileride bu özelliği dahil etmek isterseniz, HTML kodunu düzenleyerek bunu gerçekleştirebilirsiniz. Bu konuyu Ders 16 da göreceğiz. Summary: 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. Tag Inspector daki Attributes sekmesinin CSS/ Accessibility bölümünü kullanarak bu seçenekte istediğiniz zaman değişiklik yapabilirsiniz. 4. Rows metin alanına 2, Columns metin alanına da 4 yazın. Table width değerini değiştirerek 500 piksel yapın, Border thickness değerini 1 yapın ve Cell padding ile Cell spacing metin alanlarını boş bırakın. Header bölümünde Top u seçin. Accessibility bölümünde Caption metin alanına Class Schedule at Yoga Sangha yazın ve Align caption menüsünde Top seçeneğini işaretleyin. Summary metin alanına Information about the yoga classes available at Yoga Sangha yazın. Her giriş sınıfa ait hocayı, günü ve saati içerecektir. OK düğmesine tıklayarak iletişim kutusunu kapatın. 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. Çubuğun üst 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 Tablo Oluşturmak 213

8 ü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. View > Visual Aids > Table Widths komutunu seçerek tablo üstbilgisi görsel yardımcısını açabilir ya da kapatabilirsiniz. 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. Yine aynı menüyü ya da Cmd+Shift+I (Macintosh ta) veya Ctrl+Shift+I (Windows ta) klavye kısayolunu kullanarak bütün görsel yardımcıları açıp kapatabilirsiniz. Aşağıdaki uygulamada görsel yardımcıların (tablo üstbilgisi de dahil) etkin olduğu varsayılmıştır. 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 Cell padding değerinin uygulanmasından dolayı hücrelerin arasında bir boşluk görebilirsiniz. Çünkü Cell spacing seçeneği boş bırakılmıştı. 5. En üstteki satırla soldaki sütunun kesiştiği hücreye tıklayın. Hücrenin içine Day yazın, ardından Tab tuşuna basarak bir sonraki hücreye geçin. Time yazın ve Tab tuşuna basın. Level yazın ve Tab tuşuna basın. Son hücreye de Instructor yazın. 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. 214 DERS 6

9 En üstteki satır üstbilgi satırı olduğu için, yazdığınız metin ortalanacak ve kalın olarak biçimlendirilecektir (tablo üstbilgilerinin varsayılan özelliği). İlave biçimlendirme özellikleri uygulamak isterseniz CSS kullanabilirsiniz. Bu uygulamada üstbilgileri ellemeden bırakın. 6. Ekleme noktasını tablonun altındaki boş paragraf satırına yerleştirin. Tablonun altında boş bir paragraf satırı yoksa, tablonun sonuna tıklayın ve (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Tablonun dışına tıkladığınızda sütunlar genişlikleri değişerek hafifçe kayabilirler. Ekleme noktası şu anda yeni bir paragrafta olmalıdır. Tablo verilerini doğrudan hücrelere yazarak girebilirsiniz. Bir sonraki uygulamada tablo içeriğini girmek için farklı bir yöntem kullanacaksınız. Hesap Tablolarından Veri Aktarmak Bir hesap tablosundaki, hatta bir Microsoft Word belgesindeki metni Dreamweaver belgelerine kolayca aktarabilirsiniz. Bunun için bir belgeyi Dreamweaver la uyumlu hale getirmek üzere sekmeyle ya da virgülle ayrılmış bir dosya olarak kaydetmeniz gerekir. Microsoft Excel ve Microsoft Word gibi çeşitli programlar kullanılarak oluşturulan sekmeyle ya da virgülle ayrılmış dosyaları kullanabilirsiniz. Bu uygulama için sekmeyle ayrılmış bir metin dosyası sizin yerinize daha önceden hazırlanmıştır. Burada verileri yeni bir tabloya aktaracak, sonra da yeni tablodaki verileri ilk oluşturduğunuz tabloya aktaracaksınız. Tablo Oluşturmak 215

10 1. Ekleme noktası önceki uygulamada index.html belgesinde oluşturduğunuz yeni satırdayken Insert araç çubuğunun Layout kategorisindeki Tabular Data düğmesine tıklayın Aynı iletişim kutusunu açmak için Insert > Table Objects > Import Tabular Data komutunu da kullanabilirsiniz. Tabular Data düğmesi Import Tabular Data iletişim kutusu açılacaktır. 2. Data file metin alanının yanındaki Browse düğmesine tıklayın ve Lesson_06_ Tables/Text klasöründeki schedule.txt dosyasını seçin. Delimiter menüsündeki Tab seçeneğini ellemeyin. Table width bölümünde Set to seçeneğini işaretleyin ve buradaki metin alanına 500 yazın, sonra da menüden Pixels i seçin. Cell padding ve Cell spacing seçeneklerini boş bırakın. Format top row seçeneğini [No Formatting] ayarında bırakın (bu varsayılan ayardır) ve Border ayarını da 1 olarak bırakın. İşiniz bitince OK düğmesine tıklayın. Import Tabular Data iletişim kutusunu açtığınızda Table width bölümünde Set to seçeneği işaretliyse, büyüklük ve/veya ölçü ayarını belirlemek için kullanılan Table width metin alanı seçilemez durumda olabilir. Bu durumla karşılaşırsanız önce Fit to data seçeneğini işaretleyin, ardından tekrar Set to seçeneğine geçin. Yaptığınız ayarlara göre bir tablo oluşturulacak ve aktardığınız sekmelerle ayrılmış schedule.txt dosyasındaki veriler bu yeni tabloya aktarılacaktır. Noktalı virgül (;), iki nokta üst üste (:) gibi başka ayırıcılar da (delimiter) kullanabilirsiniz, ama bunların arasında en çok kullanılanlar sekme ve virgüldür. Delimiter menüsünden Other ı seçtiğinizde bir metin alanı görüntülenir. Bu alana istediğiniz ayrıcıyı girebilirsiniz. 216 DERS 6

11 İkinci tablo seçildiğinde tablo üstbilgisinin gri çubuğu ilk tablonun alt kısmının üstüne gelerek burayı örtebilir. Tabloların dışında bir yere tıkladığınızda tablo üstbilgisi kaybolacaktır. Tablo Hücrelerini Kopyalamak ve Yapıştırmak Şu anda iki tane tablonuz var: her bir sütuna ait başlıkları içeren ilk tablo ve verileri içeren ikinci tablo. Artık bu iki tabloyu birleştirmeniz gerekiyor. Aynı anda birden fazla tablo hücresini kopyalayıp yapıştırabilirsiniz. Bu da hücrenin biçimlendirme özelliklerini (eğer varsa) korur. Hücrenin sadece içeriğini kopyalayıp yapıştırmanız da mümkündür. 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 (bu, hem Macintosh ta, hem de Windows ta bulunan bir sistem özelliğidir ve Dreamweaver a ait bir öğe değildir) 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. Ama iki hücreyi kopyalayıp bunu tek hücrelik bir seçimle değiştiremezsiniz. Kopyaladığınız hücrelerin sayısı ve yönü, değiştirmek istediğiniz hücrelerin sayısı ve yönüyle aynı olmalıdır. Birden fazla hücreyi tek bir hücreye yapıştırabilirsiniz, ama sonuçta aşağıdaki örnekte göreceğiniz gibi çok sayıda hücre elde edersiniz. 1. index.html belgesinde, sol üst köşedeki hücreye tıklayıp imleci sağ alt köşede yer alan hücreye doğru sürükleyerek ikinci tablodaki bütün hücreleri seçin. Seçili hücrelerin etrafında siyah kenarlıkların belirdiğine dikkat edin. Hücreleri bu şekilde seçtiğinizde bütün tabloyu seçmiş olmazsınız, sadece hücrelerin kendilerini seçersiniz. Tablo Oluşturmak 217

12 2. Edit > Copy komutunu seçin. Ayrıca Cmd+C (Macintosh ta) ya da Ctrl+C (Windows ta) klavye kısayolunu da kullanabilirsiniz. Seçilen hücrelerin kopyalanabilmesi ya da kesilebilmesi için bir dikdörtgen oluşturmaları gerekir. Örneğin üst satırda altı hücre, alt satırda da dört hücre içeren bir seçim oluşturamazsınız. 3. Üstteki tabloda yer alan ikinci satırın ilk hücresinin içine bir kez tıklayın. İkinci tablonun üstbilgisi alttaki satırı örtüyorsa, onu ortaya çıkarmak için önce üstteki tablonun görünen bir yerine ya da sayfada iki tablonun dışında kalan bir alana tıklamanız gerekebilir. Kopyalanan hücreleri bu boş hücreye yapıştıracağız. 4. Edit > Paste komutunu seçin. Pano içeriğini (ikinci adımda kopyaladığınız hücreler) yapıştırmak için Cmd+V (Macintosh ta) ya da Ctrl+V (Windows ta) klavye kısayolunu da kullanabilirsiniz. İkinci tablodaki bütün hücreler ilk tabloya eklenecektir. İlk tablonuzun görünümü aşağıdaki gibi olacaktır. Hücrelerin seçimini kaldırmak için tablo dışında bir yere tıklayın. 218 DERS 6

13 Bütün satırları bir tablonun sonuna yapıştırırsanız (buradaki örnekte olduğu gibi) 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 kopyalananlarınkiyle 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 Edit > Clear komutunu seçin ve ya Delete 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 Delete tuşuna basın. Tabloyu Seçmek İkinci tablonun içeriği artık birinci tabloda olduğuna göre ikinci tabloya ihtiyacınız kalmadı. 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öntemlerin diğerlerine göre daha kolay olduğunu göreceksiniz. 1. index.html belgesinde, imleci tablonun içinde bir yere yerleştirip ardından belge penceresinin sol alt köşesindeki Etiket Seçici de <table> etiketine tıklayarak ikinci tabloyu seçin. 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 Modify > Table > Select Table komutunu seçmek şeklindedir. 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. Tablo Oluşturmak 219

14 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 Properties denetçisini kullanarak bu hücre üzerinde değişiklik yapabilirsiniz. Etiketlerle ilgili ayrıntıları Ders 16 da göreceğiz. 2. İkinci tabloyu silmek için tablo seçili durumdayken Delete (Macintosh ta) ya da Backspace (Windows ta) tuşuna basın. İkinci tablo silinecektir. İmleç bir hücrenin içindeyken Cmd+A (Macintosh ta) ya da Ctrl+A (Windows ta) 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. Bu derste daha önce komşu hücreleri (bitişik ya da birbirine değen hücreler) seçmiştiniz. 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. Aşağıdaki adımlarda çeşitli seçim yöntemleri anlatılmaktadır. Her bir hücre için (tekli ya da birden fazla hücreden oluşan seçimlerde) çeşitli seçeneklerde değişiklik yapabilirsiniz. Bu seçenekler içinde arka plan rengini ve hizalamayı sayabiliriz. 1. index.html belgesinde tablonun geri kalan kısmının üst satırındaki komşu olmayan hücreleri seçin. Bunun için önce Cmd (Macintosh ta) ya da Ctrl (Windows ta) tuşunu basılı tutarak Day sözcüğünü içeren ilk hücreyi seçin. Cmd ya da Ctrl tuşunu basılı tutmaya devam ederek Level sözcüğünü içeren hücreyi seçin. İmleci bir hücrenin üzerinde hareket ettirirken Cmd ya da 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. Birbirine komşu olmayan bu iki hücre seçili hale gelecektir. Etraflarındaki siyah kenarlıklardan da bunu anlayabilirsiniz. 220 DERS 6

15 2. Properties denetçisindeki Bg (Arka plan) renk metin alanına #CCCCFF onaltılık kodunu yazın. Bg (Arka plan) renk metin alanı Hücreler seçtiğiniz rengi alacaktır. Değişikliğin uygulanması için tablonun dışında bir yere tıklamanız gerekebilir Yaptığınız seçime bağlı olarak tek bir hücrenin, birden fazla hücrenin ya da bütün bir tablonun arka plan rengini değiştirebilirsiniz. Bu adımda birden fazla hücrenin rengini tek seferde değiştirdiniz. Properties denetçisindeki Header seçeneğinin işaretli olduğuna dikkat edin. Bu derste daha önce en üstteki satırı üstbilgi (Header) olacak şekilde ayarlamıştınız ve dolayısıyla bu satırdaki bütün hücreler üstbilgi olarak biçimlendirilmişti. En üstteki satırda yer alan bütün hücreler için bu seçeneği işaretli olarak bırakmanız gerekmektedir. Tablo Oluşturmak 221

16 Bütün tablonun arka plan rengini değiştirmek için tabloyu seçin ve Properties denetçisindeki Bg seçeneğini kullanarak tablo için bir renk seçin veya ilgili metin alanına istediğiniz rengin onaltılık tabanlı kodunu yazın. 3. Komşu olmayan Time ve Instructor hücrelerini seçin; sonra da arka plan renklerini #9999CC olarak ayarlayın. Tek bir hücreye, birden fazla hücreye veya tablonun tamamına bir arka plan resmi de atayabilirsiniz. Arka plan resmi seçeneği Properties denetçisinde de mevcuttur (arka plan rengi seçeneğinin hemen üzerinde). Tablonun tamamına uygulanan bir arka plan resmi, tablonun içinde birden fazla hücre veya başka tablolar bulunması durumunda beklediğiniz şekilde görünmeyebilir. İstediğiniz şekilde göründüğünden emin olmak için bütün sayfalarınızı daima Web tarayıcılarında önizleyerek test edin. 4. Monday satırının içine tıklayın ve imleci satırın en soluna, tablo kenarlığının üzerine yerleştirin. Seçim oku belirince tıklayın, sonra da arka plan rengini #6699CC olarak değiştirin. Seçim okunun belirmesi için imleci tablonun sol kenarlığı üzerinde yukarı aşağı hareket ettirmeniz gerekebilir. Siz imleci doğru konuma yerleştirdikten sonra bu satırdaki bütün hücrelere kırmızı bir dış hat uygulanacaktır. Seçim okunu kullanmak, bir tablodaki tek bir satırı ya da tek bir sütunu seçmek için hızlı bir yöntemdir. Seçim okunu ya da kırmızı dış hatları göremiyorsanız satırın sol kenarlığına tıklamayı deneyin. Kenarlığa tıkladığınızda tablodaki bütün hücreler seçili hale gelecek ve siyah renkli bir dış hatla görüntülenecektir. 222 DERS 6

17 5. Gün isimlerinin bulunduğu diğer satırların rengini örneğe uygun şekilde değiştirmeye devam edin. Satırların bir beyaz, bir mavi olacak şekilde ayarlandığına dikkat edin. Tabloları, satır renkleri sırayla değişecek şekilde otomatik olarak da çabucak biçimlendirebilirsiniz. Commands > Format Table komutunu seçerek Format Table iletişim kutusunu açın. Bu iletişim kutusunu kullanarak bir dizi hazır biçimlendirme seçeneği arasında seçim yapabilir ve renk, stil, hizalama ve arka arkaya gelen satır seçenekleriyle tablonuzun görünümünü özelleştirebilirsiniz. Ancak Format Table komutu, tablo açıklaması (caption) içeren tablolarda (bu derste üzerinde çalıştığınız tablo gibi) kullanılamaz. 6. Ekleme noktasını tablonun içine yerleştirin, ardından gri tablo genişliği çubuğunda Instructor sütununun üzerindeki yeşil sütun genişliği çizgisine tıklayarak bu sütunu seçin. Böylece bütün sütunu seçmiş oldunuz. Tablo Oluşturmak 223

18 Instructor sütununu, sütunun en üstteki hücresine tıkladıktan sonra Shift tuşunu basılı tutup bu sütunun en alt hücresine tıklayarak da seçebilirsiniz. Yatay hizalamayla ilgili varsayılan ayar, Left seçeneğiyle aynı işi görür, yani seçili hücrelerin içeriğini sola hizalar. Düşey hizalamayla ilgili varsayılan ayar, Middle seçeneğiyle aynı işi görür, yani seçili hücrelerin içeriğini ortaya hizalar. En üstteki satır bir üstbilgi satırı olduğu için bu hücrelerin içerikleri otomatik olarak ortalanır. 7. Properties denetçisinde bütün Instructor sütununun yatay hizalamasını Right olarak ayarlayın. Instructor sütunundaki bütün hücrelerin içeriği sağa hizalanacaktır. 224 DERS 6

19 Properties denetçisinin alt yarısı şu hücre niteliklerini içerir: Merges selected cells using spans: Seçili durumdaki iki ya da daha fazla hücreyi tek bir hücre halinde birleştirir. Splits cell into rows or columns: Tek bir hücreyi birden fazla hücreye böler. Horizontal Alignment of the cell contents (Horz): Hücrelerin içeriğinin yatay hizalamasını Web tarayıcısının varsayılan seçeneğine (Web tarayıcılarında varsayılan durumda normal hücreler genellikle sola, üstbilgi hücreleri de ortaya hizalanır) ya da sola, sağa veya ortaya ayarlar. Vertical Alignment of the cell contents (Vert): Hücrelerin içeriğinin düşey hizalamasını Web tarayıcısının varsayılan seçeneğine (genellikle orta) ya da yukarıya, ortaya, aşağıya veya taban çizgisine göre ayarlar. Width of cells in pixels or percent (Genişlik - W) ve Height of cells in pixels or percent (Yükseklik - H): Bu iki seçenek, seçili durumdaki hücrelerin piksel cinsinden genişliğini ve yüksekliğini belirler. Yüzde kullanmak için ilgili değerin arkasına bir yüzde işareti (%) ekleyin. No Wrap: Metinlerin bölünmesini engeller. Hücreler bütün verileri içerecek şekilde genişler. Normalde hücreler en uzun sözcüğü içerecek şekilde yatay yönde büyüdükten sonra düşey yönde büyür. Header: Seçili durumdaki hücreyi ya da hücreleri tablo üstbilgisi olarak biçimlendirir. Tablo üstbilgisi olarak biçimlendirilen hücrelerin içeriği varsayılan durumda kalın harfle yazılır ve ortalanır. Background URL of cell (üstteki Bg seçeneği): Hücrelerin arka plan resmini ayarlamada kullanılır. Background Color (alttaki Bg seçeneği): Hücrelerin arka plan rengini ayarlamada kullanılır. Hücre arka planları sadece hücrelerin içinde yer alır, yani arka plan hücre boşluğuna ya da tablo kenarlığına taşmaz. Cell Spacing ve Cell Padding seçenekleri sıfır olarak ayarlanmadıysa, kenarlık sıfıra ayarlanmış olsa bile renkli alanların arasında boşluklar oluşur. Bu boşlukları istemiyorsanız, bütün tabloya bir renk uygulamanız ya da Cell Spacing ve Cell Padding değerlerini sıfır yapmanız gerekir. Border Color of cell: Hücrelerin kenarlık rengini ayarlar. Bu seçenekleri göremiyorsanız Properties denetçisinin sağ tarafındaki genişletme okuna tıklamanız gerekir. Sonraki uygulamalarda bu seçeneklerden bazılarını kullanacaksınız. Tablo Oluşturmak 225

20 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 yapmazsınız. Aşağıdaki uygulamada tablolarda nasıl sıralama yapıldığını göreceksiniz. 1. Lesson_06_Tables/Explorations klasöründeki poses.html belgesini açın, tabloyu seçin ve arsından Commands > Sort Table komutunu seçin. Sort Table iletişim kutusu açılacaktır. 2. Aşağıda verilen seçenekleri anlatıldığı şekilde ayarlayın. Sort by: Sıralamada temel alınacak sütunu seçin. Bu uygulamada varsayılan seçenek olan Column 1 i kullanın. Order: Sütunu alfabetik olarak mı yoksa sayısal olarak mı sıralayacağınızı belirleyin. Bu uygulamada Alphabetically seçeneğini işaretleyin (varsayılan). 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 Ascending (A dan Z ye veya alçaktan yükseğe) seçeneğini işaretleyin (varsayılan). Then by: Bu uygulamada bu seçeneği boş (varsayılan) bırakın. Then By ile farklı bir sütunda ikincil bir sıralama gerçekleştirebilirsiniz. Menüdeki sıralama seçenekleri Sort By dekilerle aynıdır. Sort includes the first row: 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 226 DERS 6

21 bir üstbilgiyse bu onay kutusunu işaretlemeden bırakın (varsayılan). Ancak buradaki uygulamada bu seçeneği işaretlemeniz gerekiyor. Sort header rows: Şimdiki uygulamada bu seçenek işaretsiz olarak kalsın (varsayılan). Sort footer rows: Bu seçeneği de bu uygulama için işaretsiz olarak bırakın (varsayılan). Keep all row colors the same after the sort has been completed: Bir satırın herhangi bir niteliğini değiştirdiyseniz, bu seçeneği işaretleyerek satırdaki ilgili niteliği 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. Şimdiki uygulama için bu seçeneği işaretlemeden bırakın (varsayılan ayar). 3. OK düğmesine tıklayın. Tablo, ilk sütundaki veriler kullanılarak alfabetik olarak sıralanacaktır. Belgenizi kaydedin. Tabloda Değişiklik Yapmak Bir tablo oluşturduktan sonra bu tablonun çok büyük ya da çok küçük olduğunu veya yeni sütunlar ve satırlar eklemeniz gerektiğini fark edebilirsiniz. Bu tablo özelliklerini kolayca ayarlayabilirsiniz. 1. index.html belgesinde tabloyu seçin ve Properties denetçisindeki 500 olan genişlik değerini 650 yapın. Değişikliği uygulamak için Return (Macintosh ta) veya Enter (Windows ta) tuşuna basın. Böylece tabloyu büyütmüş oldunuz. Tablonun büyüklüğünü, imleci tablo kenarlığının alt ya da sağ kenarının üzerine getirerek de ayarlayabilirsiniz. İmleç iki uçlu bir ok halini alınca sütun kenarlığını sürükleyerek tablonun büyüklüğünü istediğiniz hale getirin. Yeni değeri, tabloyu seçip Properties denetçisindeki genişlik (W) metin alanına baktığınızda görebilirsiniz. Büyüklüğünü değiştirmek üzere bir tablonun kenarlığını sürüklerken dikkatli olun. Siz kenarlıkları bu şekilde sürüklerken Dreamweaver otomatik olarak genişlik ve yükseklik değerleri atar ve bu değerleri günceller. Kimi zaman burada elde edilen sonuç sizin istediğiniz gibi olmayabilir. Genişlik ya da yükseklik değerini silmek isterseniz, Properties denetçisindeki Clear Column Widths ve Clear Row Heights düğmelerine tıklayabilirsiniz. Bunun için tablonun üst tarafındaki gri çubukta bulunan tablo genişliği menüsünden Clear All Heights ve Clear All Widths komutlarını da kullanabilirsiniz. Tablo Oluşturmak 227

22 2. Tablodaki en son satırda sağ tarafta yer alan hücreye (sağ alttaki hücre) tıklayın ve Tab tuşuna basın. Eğer imleç bir tablonun son hücresindeyse, Tab tuşuna bastığınızda ekleme noktası yeni bir satırın en soldaki hücresine yerleştirilir. Modify > Table komutunu seçip şu seçeneklerden birini kullanarak yeni satırlar ve sütunlar ekleyebilirsiniz. Insert Row (geçerli satırın üzerine bir satır ekler); Insert Column (geçerli sütunun soluna bir sütun ekler); Insert Rows or Columns (bu seçenek, satır mı, yoksa sütun mu ekleyeceğinizi, eklenecek satır veya sütun sayısını belirlemenizi ve bu satırların ya da sütunların nereye ekleneceğini belirlemenizi sağlar). Gri çubuk üzerinde bir sütunun genişliğini gösteren yeşil çizgiye tıklayıp açılan menüden Insert Column Left ya da Insert Column Right komutunu seçerek de yeni sütunlar ekleyebilirsiniz. 3. Yeni eklediğiniz satırın solundaki hücreye tıklayıp imleci sağa doğru sürükleyerek satırdaki bütün hücreleri seçin. Properties denetçisindeki Merges selected cells using spans düğmesine tıklayın. Bu dört hücre, dört sütuna yayılan tek bir uzun hücre haline gelecektir. İlk hücrenin her niteliği (renk ve hizalama gibi) yeni büyük hücreye uygulanacaktır. Benzer şekilde Properties denetçisindeki Split Cell düğmesine tıklayarak veya Modify > Table > Split Cell komutunu seçerek hücreleri bölebilirsiniz. Bu yöntemle hücreleri eski haline döndürebilir (eğer hücreleri birleştirdiyseniz) ya da bir hücreyi istediğiniz sayıda satıra ya da sütuna bölebilirsiniz. Birleştirme yöntemiyle istediğiniz sayıda hücreyi tek bir sütuna ya da tek bir satıra dönüştürebilirsiniz. Birden fazla satırda ve sütunda yer alan hücreleri de birleştirebilirsiniz. Ama bu hücrelerin bir dikdörtgen oluşturması gerekir. Hücreleri birleştirerek bir L şekli oluşturamazsınız. Hücreleri birleştirmek için Modify > Table > Merge Cells komutundan da faydalanabilirsiniz. Satırları birleştirmek için kullanılan klavye kısayolu Option+Cmd+M (Macintosh ta) ve Ctrl+Alt+M dir (Windows ta). Sadece M tuşuna bastığınızda da seçili hücreler birleşir. 4. Birleştirme yöntemiyle oluşturduğunuz hücreye 2006, Yoga Sangha yazın. Hücreleri birleştirme imkânıyla sayfa yerleşimi için kullanabileceğiniz pek çok ilâve seçeneğe kavuşursunuz. 228 DERS 6

23 Bir satırı silmeniz gerekiyorsa ilgili satıra tıkayın ve Modify > Table > Delete Row komutunu seçin. Bunun için tabloya Ctrl tuşunu basılı tutup tıkladığınızda (Macintosh ta) ya da sağ tıkladığınızda (Windows ta) açılan bağlam menüsünden Table > Delete Row komutunu da seçebilirsiniz. 5. Ekleme noktası tablonun en son satırındayken Modify > Table > Insert Rows or Columns komutunu seçin. Ekrana gelen Insert Rows or Columns iletişim kutusunda Insert seçeneklerinden Rows u işaretleyin, Number of Rows metin alanına 1 yazın ve Where alanındaki seçeneklerden Above the Selection ı işaretleyin. OK düğmesine tıklayın. Insert Rows or Columns iletişim kutusunu kullanarak yeni satırı geçerli satırın önüne mi yoksa arkasına mı ekleyeceğinizi belirleyebilirsiniz. Bu iletişim kutusunun yardımıyla yeni satırların veya sütunların yerleştirileceği konumu kontrol edebilir ve istediğiniz sayıda satır veya sütun ekleyebilirsiniz. Modify > Table > Insert Row komutunu seçerseniz yeni satır varsayılan durumda geçerli satırın üzerine eklenir. Bunun için üstteki satıra Ctrl tuşunu basılı tutup tıklayarak (Macintosh ta) ya da sağ tıklayarak (Windows ta) açılan bağlam menüsünden Table > Insert Rows or Columns komutunu seçebilirsiniz. Eklediğiniz bu yeni satır, telif hakkı bilgisi ve onun üzerindeki sınıf programıyla ilgili bilgiler arasında bir boşluk olarak görev yapar. Sayfanızdaki her bölüme ya da bilgi bloğuna biraz boşluk vererek ziyaretçilerin sayfadaki metinleri birbirinden ayırmasını sağlayabilirsiniz. Tamamı bir arada görünen büyük metin bloklarını okumak zordur. Tabloların Dışarıya Aktarılması Bir tablodaki bilgileri bir veritabanı, bir hesap tablosu ya da bir kelime işlem veya sayfa düzenleme uygulamasına aktarmanız gerekiyorsa, metni kopyalayıp yapıştırma yöntemi işinize yaramaz. Bu durumda herhangi bir satır ve sütun biçimlendirmesi olmayan bir metin elde edersiniz. Ama tabloyu aktarabilir ve dosyayı, çoğu kelime işlem ve hesap tablosu uygulamasının okuyabileceği, sekmeyle ayrılmış bir dosya olarak kaydedebilirsiniz. 1. poses.html belgesinde tabloyu seçin. Aşağıdaki adımlarda, seçili durumdaki tabloyu Dreamweaver dan yeni bir dosyaya aktaracaksınız. Tablo Oluşturmak 229

24 2. File > Export > Table komutunu seçin. Export Table iletişim kutusu açılacaktır. 3. Delimiter menüsünden Tab i seçin (varsayılan seçenek). Çoğu kelime işlem ve hesap tablosu programı hem virgül, hem de sekmeyle ayrılmış tabloları okuyabilir. File > Export > Table komutunu seçtiğinizde varsayılan olarak Tab seçilir. Tablo verileri için kullanılan ayırıcı seçenekleri arasında şunlar bulunur: Tab (Sekme), Space (Boşluk), Comma (Virgül), Semicolon (Noktalı virgül) ve Colon (İki nokta üst üste). Hangi seçeneği kullanacağınızdan emin olamıyorsanız Tab i seçin. 4. Line Breaks menüsünde, kullandığınız işletim sistemine ait seçeneği işaretleyin (varsayılan): Windows, Macintosh ya da Unix. Satır sonu, her satırın sonuna eklenene karakterlerin adıdır. Ders 2 de dışarıdan metin aktarırken satır sonlarıyla çalışmıştınız. Kullanılacak satır sonu tipini seçerken dosyayı kendisine aktaracağınız işletim sistemini seçin. Eğer dosya farklı bir platformda kullanılacaksa, kendinizinkinden farklı bir işletim sistemini seçmeniz gerekebilir. 5. Export düğmesine tıklayın. Açılan iletişim kutusunda aktarılan dosyayı yoga_ poses.txt olarak adlandırın ve Lesson_06_Tables/Text klasörüne kaydedin. Bütün tablo, seçtiğiniz isimle yeni bir dosyaya aktarılacaktır. Oluşturduğunuz dosya, bir düz metin dosyasıdır. Bu tür dosyaların dışarıya aktarılmasıyla ilgili ayrıntılar için bu programların Yardım belgelerine başvurabilirsiniz. Tablolarda Resim Kullanmak Tablolar genellikle bir sayfanın yapısını birden fazla resimle desteklemek ya da bölünmüş bir resmi yeniden birleştirmek için kullanılır. Bir resim, Web için optimize edilmek üzere birden fazla küçük resme bölünebilir (optimizasyon işleminde resmin dosya boyutu küçültülürken olabildiğince yüksek bir resim kalitesi sağlanmaya çalışılır). Sonuçta elde edilen parçalar bir tablo vasıtasıyla hizalanmalıdır. Adobe Photoshop ve Macromedia 230 DERS 6

25 Fireworks gibi birçok resim düzenleme programı, ilgili HTML belgesinde tablonun oluşturulmasıyla birlikte aktarılan dilimleri otomatik olarak belirtmenizi sağlar. Bu uygulamada, Yoga Sangha proje sitesinin sayfalarında kullanabileceğiniz bir tablo oluşturacaksınız. Aynı yerleşim düzenini CSS kullanarak oluşturmak da mümkündür. Kitabın geri kalanında bunun üzerinde çalışacaksınız. 1. Yeni bir HTML sayfası oluşturun, yoga-table.html adıyla Lesson_06_Tables klasörüne kaydedin ve bu sayfaya Yoga Sangha başlığını verin. Bu sayfa bir dizi tablo içerecek. 2. Şu ayarlarla yeni bir tablo oluşturun = satır sayısı (Row) = 5, sütun sayısı (Column) = 4, genişlik = 754 piksel, Border thickness = 0, Cell Padding = 0 ve Cell spacing = 0. Header seçeneğini None olarak ayarlayın, Caption metin alanını boş bırakın ve Summary metin alanına Yoga Sangha Content yazın. Table iletişim kutusunu her kullanışınızda Dreamweaver otomatik olarak bütün seçenekleri en son tablo için kullandığınız değerlerle doldurur. Oluşturduğunuz tablonun görüntüsü aşağıdaki örnektekine benzeyecektir. Border thickness, Cell Padding ve Cell Spacinge metin alanlarına 0 yazdığınızdan emin olun. Bu alanları boş bıraktığınızda Cell padding ve Cell spacing için 1 değeri kullanılır. Tablo Oluşturmak 231

26 3. İlk sütundaki beş hücreyi de seçin ve birleştirin (Merge). İkinci sütunda, üstten ikinci ve üçüncü satırlardaki iki hücreyi seçin ve birleştirin. Dördüncü satırda, iki ve üç numaralı sütunlardaki iki hücreyi seçin ve birleştirin. Beşinci satırda da yine iki ve üç numaralı sütunlardaki iki hücreyi seçin ve birleştirin. Dördüncü sütunda, dördüncü ve beşinci satırlarda yer alan iki hücreyi seçin ve birleştirin. Tablonuz aşağıda yer alan şekildeki gibi görünecektir. Tablonuzun yapısının noktalı çizgilerle gösterildiğine dikkat edin, çünkü kenarlık genişliğini 0 olarak tanımlamıştınız. İmleci gri tablo genişliği çubuğunun üzerinde yer alan ve tablo genişliğini kapsayan yeşil çizginin üzerine imleci getirdikten sonra Cmd (Macintosh ta) ya da Ctrl (Windows ta) tuşuna bastığınızda tablo yapısını düz bir kırmızı çizgiyle görüntüleyebilirsiniz. 4. Ekleme noktasını ilk sütundaki tek hücrenin üzerine getirin ve Properties denetçisindeki Vert menüsünü kullanarak hücrenin düşey hizalama ayarını Top olarak değiştirin. Lesson_06_Tables/Images klasöründeki green-bar.gif resmini hücreye ekleyin. Image Tag Accessibility Attributes iletişim kutusunda Alternative text menüsünde <empty> seçeneğini işaretleyin ve Long description alanını olduğu gibi bırakın. Eklediğiniz yeşil çubuk resmi, tablo ne kadar büyürse büyüsün, bu sütunun üst tarafında kalacaktır. Bu resim, bir görsel tasarım elemanı olarak işlev görür, dolayısıyla burada alternatif metin kullanmak gereksizdir. Ders 3 te bahsedildiği gibi, sadece yerleşim düzeni ya da tasarım 232 DERS 6

27 için kullanılan resimlerde alternatif kullanmaktan kaçının. Bu tür resimlerde <empty> seçeneği kullanılmalıdır; Alternative text alanını boş bırakmayın. Dreamweaver da hücrelere resim eklediğinizde boş hücrelerin daralarak sanki yoklarmış gibi görünme eğiliminde olduğunu görürsünüz. Aslında hâla mevcutlardır, ama sıkışarak daralmışlardır. Tablonun dışında bir yere ya da başka bir hücreye tıklayarak bunu görebilirsiniz. Bu aşamada hücreleri yeniden boyutlandırmaya kalkmayın. Hücreler sıkışarak daraldıklarında tablo içinde hareket etmek için kullanabileceğiniz bazı seçenekler mevcuttur. Böyle durumlarda tablonuzun kenarlıklarını ve sütunlarıyla satırlarını tutup sürüklemeye çalışmayın. Tablo içinde ok tuşlarını ve Expanded tables modunu kullanarak ilerleyebilirsiniz. Aşağıdaki adımlarda bunun nasıl yapıldığını göreceksiniz. 5. Insert araç çubuğunun Layout kategorisindeki Expanded düğmesine tıklayın. Bu modu açıp kapatmak için F6 kısayolunu da kullanabilir veya modlar arasında geçiş yapmak isterseniz View > Table Mode komutunu seçip altmenüde istediğiniz görünüm modunu işaretleyebilirsiniz. Getting Started in Expanded Tables Mode adında açıklayıcı bir iletişim kutusu belirecektir. Açıklamayı okuduktan sonra OK düğmesine tıklayarak bu iletişim kutusunu kapatabilirsiniz. Belge penceresinin üst kısmında, araç çubuğunun hemen altında Expanded Tables Mode [exit] yazılı bir çubuk belirecektir. Bu, Expanded Tables modunun etkin durumda olduğunu gösterir. Çubuktaki [exit] bağlantısına tıklayarak ya da Insert araç çubuğunun Layout kategorisinde yer alan Standard düğmesine tıklayarak Standard moda dönebilirsiniz. Expanded Tables modunda tablolarınız biraz büyür ve kenarlıklar, hücre içeriğiyle hücre duvarlarının arasındaki boşluklar (cell spacing) ve hücreler arasındaki boşluk da (cell padding) büyümüş gibi görünür. Görünüşteki bu değişiklikler sadece bu moddadır. Tablonuzun büyüklüğünde ya da Border thickness, Cell Spacing ve Cell Padding özelliklerinde herhangi bir değişiklik olmaz. Bu mod, tabloların Web tarayıcılarındaki görünümünü temsil etmez. Sayfanızı bu modda görüntülediğinizde tablolarınızın boyutlarında herhangi bir değişiklik yapmayın. Mümkünse tablolarınızın boyutlarını Standard modda değiştirin. Tablo Oluşturmak 233

28 6. Ekleme noktasını ilk satırın ikinci sütununa yerleştirin ve Properties denetçisindeki Horz menüsünü kullanarak hücrenin yatay ayarını Center olarak değiştirin. Images klasöründeki above-nav.jpg resmini ekleyin. Image Tag Accessibility Attributes iletişim kutusunda Alternative text menüsünden <empty> yi seçin ve Long description alanını olduğu gibi bırakın. En üstteki satırın ortasına yerleştirilen bu resim, Yoga Sangha sitesinin görsel efektleri için kullanılan küçük bir resimdir. Resmin içerdiği mesajı iletmek için alternatif metin özelliğini kullanmak önemli bir adımdır. Eğer resim herhangi bir bilgi iletmiyorsa <empty> seçeneğini kullanın. 7. Ekleme noktasını yerleştirmek için üçüncü sütunun ilk satırında yer alan hücreye tıklayın. Images klasöründeki yoga-s-header.jpg resmini bu hücreye ekleyin. Alternatif metin olarak Yoga Sangha ifadesini kullanın. Expanded Tables modu etkin durumda olduğu için hücrenin içine kolayca tıklayabilirsiniz. 234 DERS 6

29 Standard modu kullanıyor olsaydınız ok tuşlarını kullanarak daraltılmış bir tablonun içinde gezinmeye devam edebilirdiniz. Bunun için Yoga Sangha başlık resmini seçin ve sağ ok tuşuna bir kez basarak resimden dışarı çıkın. Ekleme noktası, bu resmin hemen sağında nav_titlebar.gif resmini içeren hücrenin içinde olacaktır. Resmin sağ kenarında resimle aynı yükseklikte, yanıp sönen bir imleç göreceksiniz. Sağ ok tuna bir kez daha basarak bir sonraki (üçüncü) sütuna geçin ve ekleme noktasını üçüncü satıra götürmek için alt ok tuşuna bir kez basın. Sütunlar tamamen daraltıldığında hücrelerin sınırlarını gösteren noktalı çizgilerin arasında yanıp sönen imleci görmek zor olabilir. Daraltılmış sütunları görmek için tablonun kenarlıklarını sürüklemeye ve tabloyu yeniden boyutlandırmaya kalkmayın. Tablonuzu yeniden boyutlandırdığınızda yükseklik ve genişlik etiketleri eklenerek tablonun boyutları değişir. Bu etiketlerle tanımlanan boyutlar sorun yaratabilir (resimlerin birbiriyle tam olarak hizalanmaması gibi). Yükseklik ya da genişlik etiketleri oluşturulması durumunda tabloyu seçebilir ve Properties denetçisindeki Clear Row Heights ve Clear Column Widths düğmelerine tıklayabilirsiniz. Sütun genişliklerini temizledikten sonra tablonun genişliğini yeniden tanımlamanız gerekebilir. İmleç doğru hücrenin içine geldikten sonra küçük bir metin yazdığınızda hücre genişler. Bu genişleme, sütunları daha rahat görmenize yardım eder. Bu yöntemi kullanırken daha sonra metni sildiğinizden ya da uygun metinle ya da resimle (veya resimlerle) değiştirdiğinizden emin olmanız çok önemlidir. Bazı tablolarda ekstra karakterler sorun yaratabilir, özellikle de tablo boyutlarını belirli resimlere göre hesapladıysanız. 8. Ekleme noktasını yerleştirmek için dördüncü sütunun ilk satırındaki hücreye tıklayın. Images klasöründeki om.jpg resmini hücreye ekleyin. Alternatif metin olarak OM ifadesini kullanın. Resim hücrenin içinde belirecektir. Tablo Oluşturmak 235