Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.

Transkript

1 12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için oluşturduğunuz çerçevedir. Düzen hücreleri ise bu çerçevede sayfanın içeriğini (metin, resimler, Web parçaları ve diğer öğeler dâhil) barındıran bölgelerdir. Düzen tabloları ve hücreleri bir araya geldiğinde, kullanıcıların Web sayfalarına ekleyebileceği ve içeriğiniz için karmaşık bir görsel yapı sağlayabilen, yatay ve dikey bölgeleri temsil eder. Aşağıdaki örnekte bir düzen tablosu ve hücrelerinin ilk aşamaları gösterilmektedir; burada düzen tablosu daha açık bir arka plan rengiyle, hücreler ise tablo içinde koyu renkli dikdörtgenler görüntülenmektedir. 62 Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir. Web sayfanıza hızlı bir başlangıç yapmanıza yardımcı olmaları için, Düzen Tabloları ve Hücreleri görev bölmesinde bulunan önceden tanımlanmış düzen tablolarını kullanın. Ayrıca, çizim tabloları ve hücreleri aracılığıyla özel düzen tabloları da oluşturabilirsiniz. Bunun yanı sıra, FrontPage veya Macromedia Dreamweaver gibi başka bir Web yazma aracı kullanarak eklediğiniz düzen tablolarını ve hücrelerini içeren bir Web sayfasını düzenleyebilirsiniz. Üstbilgi grafiğini barındırmak üzere sayfanın üst kenarı boyunca bir hücre içeren bir düzen tablosu, sayfanın sol kenarında bir bağlantı çubuğu içeren bir hücre ve Web sayfasının ana içeriğini barındırmak üzere sayfanın sağ kenarına yerleştirilen başka bir hücre çizebilirsiniz. Gereksinimlerinize bağlı olarak basit veya karmaşık düzen tabloları oluşturabilirsiniz.

2 63 Düzen tablosu, HTML tablosunun FrontPage'de oluşturduğunuz özel bir türüdür. Bu çizimde, Tasarım görünümünde seçilmiş bir düzen tablosu örneği gösterilmektedir. Düzen tabloları, şimdiye kadar çalıştığınız normal tablolardan farklı olarak, sayfa düzeni tasarlamanıza yardımcı olan özel yararlar sağlar. Belirgin bir yararı şudur: Her sütunun üst ve alt kısmında, piksel olarak ne genişlikte olduklarını bilmenizi sağlayan etiketler vardır. Tablonun yan taraflarında, satırların piksel olarak yüksekliklerini gösteren etiketler de vardır Önemli bir yararı, düzen hücrelerini bir düzen tablosu içinde serbestçe konumlandırabilmeniz ve yeniden boyutlandırabilmenizdir 12.1 Düzen Tablolarının Yapısı Düzen tablosunun anatomisi aşağıdaki gibidir: Düzen tablosu, düzenin ana temeli veya "tuval"idir. Tasarım görünümünde seçildiğinde yeşil bir kenarlıkla tanımlanır. Düzen tablosu düzen hücrelerini içerir. Düzen hücreleri, düzen tablosunun içindeki, içeriğin (metin, görüntüler, vb.) bulunduğu bölgelerdir. Seçildiklerinde mavi kenarlıkla tanımlanırlar. Düzen tablosunun içinde ayrıca ayırıcı hücreler bulunur. Ayırıcı hücrelerde içerik bulunmaz; yalnızca, tablo içindeki sütun genişlikleri toplandığında tablonun genel genişliği oluşturulacak şekilde bulunurlar. Ayırıcı hücreler bej renkle tanımlanır. Ancak, bej renk tarayıcıda görünmez, yalnızca Tasarım görünümünde görünür.

3 Düzen tabloları, standart Tablo özellikleri ve Hücre özellikleri iletişim kutularına ek olarak, düzenlerin tasarlanması üzerinde odaklanan özel görev bölmelerini kullanmanızı sağlar. 64 Bu görev bölmelerinden biri, burada gösterilen Hücre Biçimlendirme'dir. Bu görev bölmesi; genişliği, yüksekliği, vb. değiştirmenizi sağlar. Doldurma uygulama ve arka plan renkleri ile kenarlıklar gibi ayrıntıları ekleme seçeneklerini de elde edersiniz Düzen tabloları ve HTML kodları Şekil 12-1 Düzen tablosunun bölümleri, önceden tanıdığınız HTML etiketlerini kullanır Düzen tabloları HTML tablolarıdır. Kod içinde, düzen tablosu bir <table> etiketiyle temsil edilir, düzen hücresi <td> etiketiyle temsil edilir, ayırıcı hücre de aynı şekilde <td> ile temsil edilir. Tahmin ettiğiniz gibi. Bu, tarayıcıların yıllardır desteklediği standart HTML kodudur. Koddaki tek fark, FrontPage'in düzen tablosu koduna bunun gibi açıklamalar koymasıdır: <!--MSTableType="layout"--> Bu açıklamalar, düzen için kullanılmayan normal tablolara karşı, hangi tabloların düzen tabloları olduğunu FrontPage'e anlatır. FrontPage'in, söz ettiğimiz yararları (genişlik ve yükseklik sekmeleri, hücreleri yeniden boyutlandırma ve konumlandırma becerisi ile Hücre Biçimlendirme görev bölmesi) sağlamasına da olanak verir. Not: Bu açıklamalar, sayfanın tarayıcıdaki görünümünü etkilemez.

4 12.3 Düzen Tablosu Eklemek 65 Ancak, bir sayfa düzeni için tablo oluşturmak istediğinizde Düzen Tabloları ve Hücreleri görev bölmesine erişmeniz gerekir. Bunun için: Tablo menüsünde......düzen Tabloları ve Hücreleri'ni tıklatın. Sonra, düzen tablolarını ve hücrelerini oluşturmak için bu görev bölmesini kullanın 12.4 Düzen Tablosu Kullanarak Sayfa Tasarlama. Şekil 12-2 Düzen tablolarıyla sayfa düzeni oluşturmanın beş adımı 1. Adım Düzen Tablosu Oluşturmak Düzen oluşturmanın birinci adımı, düzen tablosunu oluşturmaktır. Bunu çizerek veya istediğiniz boyutlara "sürükleyerek" yaparsınız. Düzen tablosunu çizme hakkında bazı ipuçları: Başlamadan önce Düzen için aklınızda bir genişlik olsun. Bazılarının ekran çözünürlüğünün sizinkinden daha az olabileceğini ve düzeniniz çok geniş olursa, bazı parçaların kesilebileceğini unutmayın. Cetveller, izleme görüntüsü veya kılavuz size yol göstersin Hangisini kullanırsanız kullanın, bu özellikleri kullanarak düzeninizi yerleştirmek size çok daha kolay gelecektir

5 66 Şekil 12-3 Önce, düzen tablosunu çizin. Bu, diğer her şey için başlangıç "tuvali"dir 2. Adım Düzen hücrelerinin çizilmesi Şekil 12-4 Sonraki adım: İçeriğin eklenmesini istediğiniz düzen hücrelerini çizme İkinci adım, düzen hücrelerinin çizilmesidir. Bunlar, düzende içeriğinizin ekleneceği bölümleridir. Hücrelerin çizilmesiyle ilgili birkaç ipucu: Hücreleri mükemmel çizmeye uğraşmayın Yalnızca düzen hücrelerinizi çizin ve daha sonra gerekirse taşıyın ve yeniden boyutlandırın. Genişlik ve yükseklik yalnızca piksel cinsinden olabilir Bunun nedeni, düzen hücresi özelliğinin yalnızca sabit, piksel tabanlı tablo tasarımları için kullanılabilmesidir. (Bu konuda, otomatik esneme denen bir özel durum vardır; burada, kullanılabilir alana kaydırılması için genişliği veya yüksekliği %100 olarak ayarlayabilirsiniz. 3. Adım Düzen Hücrelerini Ayarlama Düzen hücrelerini az da olsa ayarlamak zorunda kalmanız kaçınılmazdır: Bazılarının biraz yeniden boyutlandırılması gerekirken, diğerlerinin taşınması veya küçük dokunuşlarla doğru yere yerleştirilmesi gerekebilir. Düzen hücresini yeniden boyutlandırırken, yeniden boyutlandırma tutamaçlarını sürüklemek için fare işaretçinizi kullanabilirsiniz. Yerine taşımak için tüm hücreyi de sürükleyebilirsiniz. Önemli Bir hücreyi yeniden boyutlandırmak veya taşımak için sürüklediğiniz sırada, FrontPage her hareketi veya yeniden boyutlandırmayı 10 piksellik artışla yapar. Bu bazen yararlıdır, ancak gerekmediği de olur. Yaslama özelliğini geçersiz kılmak için hücreyi yeniden boyutlandırırken veya taşırken ALT tuşunu basılı tutun.

6 Düzen Tabloları ve Hücreleri görev bölmesi hakkında Düzen Tabloları ve Hücreleri ve Hücre Biçimlendirme görev bölmeleri, düzen tabloları ve hücreleriyle çalışırken kullanılan birincil araçlardır. Bu görev bölmelerinde aşağıdaki görevleri gerçekleştirebilirsiniz: Düzen tablosu çizebilirsiniz. Düzen hücresi ekleyebilirsiniz. Tablo veya hücrenin genişlik ve yüksekliğini ayarlayabilirsiniz. Sayfa kenar boşluklarını ayarlayabilirsiniz. Düzen tablosunun veya hücresinin hizalamasını ayarlayabilirsiniz. Düzen araçlarını açabilir veya kapatabilirsiniz. Önceden tanımlanmış bir düzen tablosu seçebilirsiniz. 4. adım Hücreleri doldurma ve Biçimlendirme Şekil 12-5 Düzen hücrelerini görüntülerle doldurmanın kolay bir yolu, onları sürüklemektir Düzen tablolarınızı ve hücrelerinizi çizdikten sonra, doğal olarak onları içerikle doldurmak istersiniz. Bunu yapabileceğiniz çeşitli yollar vardır. Metin yazabilir, Ekle menüsündeki çeşitli seçenekleri kullanabilir veya bu çizimde gösterildiği gibi, görüntüleri sürükleyip bırakabilirsiniz. Ayrıca, düzen tablonuzu ve hücrelerinizi arka plan renkleri, doldurma, kenarlıklar, vb. ile biçimlendirmek de istersiniz. 5. Adım Sayfanızı Önizleme Düzeninizi doldurma ve biçimlendirme işini bitirdikten sonra, iyi göründüğünden emin olmak için daima Dosya menüsünde Tarayıcıda Önizleme komutunu kullanmalısınız.

7 68 Belge sayfasının alt kısmında Önizleme düğmesini sayfanın nasıl olduğunu görmenin hızlı bir yoludur). tıklatarak da sayfayı önizleyebilirsiniz (bu, Ancak, Önizleme görünümünde, Internet Explorer'ın sayfanızı nasıl görüntüleyeceğinin esas alındığına dikkat edin. Dolayısıyla, sayfanızın diğer tarayıcıları da bulundurmasını istiyorsanız, onları yüklemeyi ve Tarayıcıda Önizleme komutunu kullanarak sayfalarınıza önizleme uygulamayı unutmayın Uygulamalar Düzen tabloları ile ilgili alıştırmalar için Office Online Eğitim sayfasında yer alan aşağıdaki eğitimleri kullanabilir. Uygulama 1: HTM L Tablo ları III: D üzen tablo larıy la sayfa tasarlam a ( Uygulama 2. HTML T ablo ları III: D üzen tablo larıy la sayfa tasarlam a (