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.
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
6
A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
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.
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.
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ı plat- formlarda 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.
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
• 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
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
ü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.
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.
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.
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.
Tabular Data düğmesi
İ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.
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.
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.
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.
2. Properties denetçisindeki Bg (Arka plan) renk metin alanına #CCCCFF onaltılık kodunu yazın.
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.
Bg (Arka plan) renk metin alanı
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.
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.
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.
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 İç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
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.
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.
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
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
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.
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
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.
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.
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.
9. Insert araç çubuğunda Layout kategorisinde yer alan Standard düğmesine tıklayarak tekrar Standard moda geçin.
Standard modda sütunların resimlerle tam olarak hizalandığına dikkat edin. Aşağıdaki uygulamalarda Standard modu kullandığınızda tablolarla resimlerin birlikte güzel bir yerleşim düzenini nasıl oluşturduğunu göreceksiniz. Oluşturduğunuz tablolarda ekstra boşluklar oluşmasına izin vermeyin. Bunu Expanded modunda takip etmek zordur. Çünkü bu görünüm modu ilâve boşlukların ortaya çıkmasına sebep olur.
Eğer tablolarınızda buradaki gibi birbiriyle tam olarak hizalanan resimler varsa, siz resim eklerken, bu resimler hücreleri ayıran noktalı çizgilerin görünmesini engelleyebilirler.
Tablolarla çalışırken, Dreamweaver’ın hücre ve tablo kenarlıklarını göstermek için kullandığı noktalı çizgilerin her birinin bir piksellik yer kapladığını
unutmayın. Belge bir Web tarayıcısında görüntülenirken, noktalı çizgilerin oluşturduğu bu ekstra boşluklar görünmez. Ancak bu pikseller, tabloların Dreamweaver’da normalden biraz daha büyük görünmesine sebep olabilir.
Örneğin bir belgede aynı genişlikte iki tablonuz olduğunu kabul edelim. İlk tablonun beş sütunu ve ikinci tablonun da sadece tek bir sütunu olsun. Ama bir Web tarayıcısında her iki tablo da aynı genişlikte gözükse bile ikinci tablo Dreamweaver’da birinciye göre dört piksel daha geniş gözükecektir. View >
Visual Aids > Table Borders komutunu kullanarak tablo kenarlıklarının etkinliğini istediğiniz zaman kapatabilirsiniz. Diğer yandan, tablo kenarlıkları genellikle çok faydalıdır ve kapatıldıklarında tablolarla çalışmak çok zor olabilir.
10. Ekleme noktasını üçüncü sütunun ikinci satırındaki hücreye yerleştirin ve alternatif metin için <empty > seçeneğini kullanarak flower.jpg resmini ekleyin.
Ekleme noktasını üçüncü sütunda ve üçüncü satırda yer alan hücreye yerleştirin ve alternatif metin için <empty > seçeneğini kullanarak tag-bkg.jpg resmini ekleyin. Ekleme noktasını ikinci sütunda yer alan ve tablonun ikinci ve üçüncü satırlarına karşılık gelen hücreye yerleştirin. Images klasöründeki cell-nav.jpg resmini hücreye ekleyin. Ekleme noktasını dördüncü sütunun ikinci satırındaki hücreye yerleştirin ve alternatif metin için “Teachers at Yoga Sangha” ifadesini kullanarak teaching.jpg resmini ekleyin. Bunun altındaki hücreye de alternatif metin için “Classes at Yoga Sangha” ifadesini kullanarak class.jpg resmini ekleyin. Tablonun dışında bir yere tıklayın.
Tablonun dışına tıkladığınızda Dreamweaver tablonun tazelenmesini sağlar ve hücreler resimlerin kenarları etrafına tam olarak oturur. Kimi zaman bir boşluk resmi (genellikle bir çarpı bir piksel boyutlarında saydam ya da arka planla aynı renkte olabilen küçük bir GIF) kullanmanız gerekebilir. Bu resim, sayfanın son görünümünü oluşturmak üzere tablolardaki satır ve sütunların boyutlarını korumak için kullanılır. Tablolarda istediğiniz boyutları korumak için genellikle bu tür resimler kullanmak gerekir. Boşlukları dolduran bu resimler
olmazsa sütunlarınız kayabilir. Sütunların doğru şekilde boyutlandırılmasını sağlamak için bu boyutları doldurmak üzere uzatılan ve boşluk resmi olarak kullanılan GIF’lerden (genellikle 1 X 1 piksel boyutlarındaki saydam dosyalar) faydalanabilirsiniz.
Tablolarda küçük resimlerle çalışıyorsanız, bu resimleri oluştururken ve üzerlerinde değişiklik yaparken ok tuşlarını kullanarak tablo içinde kolayca gezinebilirsiniz.
Tablonuzun görünümü aşağıdaki örnektekine benzeyecektir.
Eğer tablonuz buradaki gibi görünmüyorsa, Dreamweaver hücrelerinize boşluk ekliyor olabilir. Preferences iletişim kutusunu açın, Code Format kategorisini seçin ve No Break After TD seçeneğinin işaretli olduğundan emin olun.
Tabloları İç İçe Yerleştirmek
İç içe yerleştirilen tablolar denince, bir tablonun içine başka bir tablonun konmasını anlıyoruz.
İç içe yerleştirilen tablolar çeşitli amaçlarla kullanılırlar. Internet’in ilk günlerinde tabloların iç içe yerleştirilmesine kötü bir uygulama olarak bakılıyordu. Çünkü bu uygulama ziyaretçinin Web tarayıcısını çökertmek gibi birtakım sorunlara yol açıyordu. Günümüzde Web tarayıcıları çok gelişmiş durumda. Bugün iç içe yerleştirilen tablolar, normalde çok karmaşık tek bir tablo kullanılmasını gerektiren sayfalarda veya istenen tasarımın başka türlü sağlanamayacağı durumlarda sıkça kullanılıyor. Tabloları iç içe yerleştirerek olabildiğince basit tablolarla çok daha karmaşık yerleşim düzenleri oluşturabilirsiniz. Tek bir tablo kullanılacaksa ve bu tablo ne kadar karmaşıksa, onu oluşturmak da o kadar zor olur. Bu ayrıca hataların veya Web
1. yoga-table.html belgesinde önceki uygulamada oluşturduğunuz tablonun dışına tıklayın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Şu ayarlarla yeni bir tablo oluşturun: Satır sayısı = 2, sütun sayısı = 1, genişlik = 176 piksel, Border = 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 Schedule of Classes yazın. OK düğmesine tıklayın.
Başka bir tabloya yerleştirmeyi düşündüğünüz tabloyu büyük tablonun dışında oluşturmak genellikle daha kolaydır. Çünkü bu şekilde resim ve içerik eklerken küçük tablonun kenarlıklarını açıkça görebilir ve küçük tabloyla çalışırken kazara büyük tabloya tıklama ihtimalini ortadan kaldırırsınız.
2. Ekleme noktasını ikinci satıra yerleştirin ve Schedule yazın.
Küçük tablonuz aşağıdaki gibi görünecektir.
3. Tab tuşuna basarak sonuncu satırın altına bir satır ekleyin. Properties denetçisindeki Splits Cell into Rows or Columns düğmesine tıklayın ve Split Cell Into alanında Rows’u işaretleyin. Number Of Rows metin alanına 7 yazın.
Split Cell into Rows or Columns düğmesi
Tabloyu hazırladınız ve bölerek oluşturduğunuz hücreye içeriği yerleştirmeye hazırsınız.
4. Text klasöründeki short-schedule.txt belgesini ve her gün için bir satırı kullanarak ilgili metinleri kopyalayıp yapıştırın.
Bu tür işlemleri geçekleştirmek için Dreamweaver’da kullanabileceğiniz çeşitli yöntemler mevcuttur ve kullanacağınız yöntem verilerin biçimlendirilme şekli gibi çeşitli koşullara bağlıdır. Örneğin metni aktarmak için farklı bir yöntem olarak .txt dosyasını ayrılmış bir dosya olarak kaydedebilir ve bunu bir tablo olarak aktarabilirsiniz. Daha sonra hücreleri kopyalayıp yapıştırarak geçerli tablodakilerle değiştirebilir ya da aktarılan tabloyu bu uygulamada oluşturduğunuz tabloya benzeyecek şekilde değiştirebilirsiniz.
Her satır bir günü temsil etmektedir.
Tablonuzun görünümü aşağıdaki örnektekine benzeyecektir.
5. Üzerinde çalıştığınız ve sınıf programı tablosunu içeren tabloyu seçin, ardından Edit > Cut komutunu seçin. Ekleme noktasını, önceki uygulamada oluşturduğunuz tablonun dördüncü sütununda ve dördüncü satırında yer alan hücreye yerleştirin ve Edit > Paste komutunu seçin.
Belgenizin görünümü aşağıdaki gibi olacaktır.
Artık küçük tablo ilk tablonun içine yerleştirilmiş durumdadır. Bu uygulamada büyük tablolu bir yerleşim düzenini basitleştirmek için bir tabloyu başka bir tablonun içine yerleştirdiniz.
İç içe tablo yerleştirirken beş ya da altıncı seviyeden daha derine inmekten kaçının.
Eski Web tarayıcılarının (özellikle de Netscape’in eski sürümleri) derin bir şekilde iç içe geçmiş tabloları görüntülemede sorun çıkarabileceğini (bazen bu iç içe geçmiş tabloları görüntülemek için gereken aşırı bellek gereksinimi dolayısıyla) unutmayın. İç içe yerleştirdiğiniz tabloların ziyaretçiler tarafından sorunsuzca görüntüleneceğinden emin olmak için sayfalarınızı farklı platformlarda, farklı Web tarayıcılarında test etmeniz gerekir.
Tabloları gereksiz yere iç içe yerleştirmeyin. Tabloları iç içe yerleştirmek; kapsamlı, gelişmiş yerleşim düzenleri oluşturmak için kullanabileceğiniz iyi bir tekniktir, ama dikkatli bir şekilde ve gerekli yerlerde kullanılmalıdır. İç içe yerleştirdiğiniz tabloların seviyesi çok derinlere iniyorsa, muhtemelen yerleşiminizi yeniden gözden geçirmeniz gerekecektir.
Daha basit bir yerleşim düzeni, daha az kod oluşturmak ve dolayısıyla sayfaların daha hızlı yüklenmesi ve problem çıkma olasılığının azaltılması anlamına gelir. Oluşturduğunuz sayfalarla bir Web tarayıcısında istediğiniz görüntüyü alamıyorsanız, çok seviyeli tablolar koddaki hataların sebebini bulmanızı da zorlaştırabilir.
Bilgisayar Ekranları İçin Tasarım Yapmak
Basılı medya dünyasında tasarımcılar sonuçta sabit büyüklükte görülecek olan sayfalar hazırlar. Kâğıt, baskı kalitesi ve boyutlar bütünüyle kontrol altındadır. Diğer yandan bir Web tasarımcısının çok sayıda olasılığı hesaba katması gerekir. Sadece ziyaretçilerin kullanacağı çeşitli Web tarayıcılarını hesaba katmanız yetmez. Bunun dışında,
monitörlerinin büyüklüğünü ve çözünürlüğünü de dikkate almanız gerekir. Kullanıcıların Web sayfalarını görüntülemek için faydalandığı ekran tiplerinin sayısı oldukça artmıştır ve artmaya da devam edecektir. İnsanlar Web sayfalarını bilgisayarlarda, televizyonlarda, cep telefonlarında, PDA’lerde (Palm gibi), vb çeşitli cihazlarda görüntülemektedir.
Bir sayfaya sadece metin koyacaksanız, metnin tarayıcı penceresi büyüklüğüne bağlı olarak sayfada yeniden akacağını unutmayın. Daha sonra bir Web tasarımcısı olarak sayfanın görünümü üzerinde herhangi bir kontrol imkânınız olmayacaktır. Kullanıcı pencereyi ekranı kaplayacak şekilde genişletebilir, metni uzun, okunması zor satırlar halinde görüntüleyebilir. Metnin sayfadaki akışını kontrol etmek isterseniz metnin bir hücredeki satır uzunluğunu sınırlamak için CSS kullanabilir ya da metni bir tabloya yerleştirebilirsiniz.
Sabit genişlikte bir sayfa hazırlarken, tasarımınızı ziyaretçilerinizin kullanacağı ortak monitör büyüklüklerinden en düşük olanına göre yapmanız iyi olabilir. Kullanıcılarınızın çoğunun 13 inç’lik monitörü olduğunu düşünüyorsanız bu büyüklüğü kullanmalısınız.
Kullanıcı pencereyi ekranı kaplayacak şekilde büyütse bile, Web tarayıcısının ekranın solunda ve sağında biraz yer bıraktığını unutmayın. Tarayıcının kullandığı alanın miktarıyla ilgili belirli bir kural yoktur, bu yüzden tarayıcının boşluk bırakmasına izin
(Web tarayıcısı ve işletim sisteminin kullandığı alan hesaba katılmamıştır). Maksimum sayfa genişliğini belirlemek için aşağıdaki tablodan faydalanabilirsiniz.
Çözünürlük (Piksel) Cihaz
160 X 160 Palm tipi cihazlar
240 X 320 Cep bilgisayarı
544 X 372 Web TV
640 X 240 Windows CE
640 X 480 13 inç’lik monitör
800 X 600 15-17 inç’lik monitör
1024 X 768 17- 19 inç’lik monitör
1200 X 1024 21 inç’lik monitör
Ziyaretçilerin Web sayfalarının çıktılarını alabilmesi dikkate alınması gereken önemli bir noktadır. Sayfalarınızı yazdırılabilir hale getirmeniz veya metin ağırlıklı sayfaların ya da ziyaretçilerin yazdırma ihtiyacı duyabileceği sayfaların
yazdırılabilir versiyonlarını siteye dahil etmeniz çok önemlidir. Yazdırılabilir bir sayfa için kullanılan boyut 553 pikseldir. Her ne kadar tablolarla yerleşim düzeni oluşturmak kolay olsa da, birçok nedenden dolayı CSS kullanmak tercih edilir ve çıkış almak da bu nedenlerden biridir. CSS, tasarımda daha fazla esneklik imkânı sunar ve sadece baskı amacıyla kullanılan özel CSS dosyaları oluşturmanızı ve böylece yerleşim düzeninizin kolayca yazdırılabilmesini sağlar.
Window Size Menüsünü Kullanarak Sayfa Düzenini Kontrol Etmek
Window Size menüsünü kullanarak, sayfalarınızın farklı büyüklükteki ekranlarda nasıl görüneceğini belirlemek üzere sayfa düzeninizi doğrudan Dreamweaver içinde kontrol edebilirsiniz.
Belge penceresinin alt kısmında, geçerli pencere büyüklüğü bilgisinin (boyutlar) sağında yer alan siyah oka tıklayın. 760 x 420 (800 x 600 Maximized) seçeneğini işaretleyin.
Windows kullanıcıları için: Önce belge penceresindeki Restore/Maximize (Önceki Boyut/Ekranı Kapla) düğmesine tıklamanız gerekir (uygulamanın Restore/Maximize düğmesine değil). Belge penceresi, küçülerek belge alanında kayar durumdaki bir pencereye dönüşecektir. Bu görünümde sadece pencere büyüklüğünü ayarlayabilirsiniz.
Bu uygulamadan sonra belge penceresinin Restore/Maximize düğmesine tekrar tıklayarak tekrar sekmeli arabirime geçebilirsiniz.
