Dreamweaver 8 tablo oluşturmak için kullanabileceğiniz Layout adında bir moda daha sahiptir. Layout modu, daha çok bir sayfa düzeni programı gibi çalışır. Bu programlarda sayfada birtakım kutular çizer ve sonra da bu kutuları metin ya da resimlerle doldurursunuz.
Bu kutuları yeniden boyutlandırabilir ve sayfada istediğiniz bir konuma yerleştirebilirsiniz.
Katmanlar gibi bazı Dreamweaver özellikleri Layout modunda çalışmaz (katmanlar konusunu Ders 9’da göreceğiz). Bu özellikleri kullanmak için Standard moda geçmeniz gerekir.
Layout modunda, oluşturduğunuz tablolarla hücrelerin genişlik ve yükseklik ayarlarının tam sayısal değerleri, ayrıca bu hücrelerin yerleşimi burada gösterilen örneklerden biraz farklı olacaktır. Bu örnekleri sayfanızın genel yerleşim düzeni için birer kılavuz olarak kullanabilirsiniz.
1. Lesson_06_Tables/Schedule klasöründeki events.html belgesini açın.
Sonraki adımlarda bu belgede bir tablo oluşturmak için Layout modunu kullanacaksınız.
2. Insert araç çubuğunun Layout kategorisindeki Layout düğmesine tıklayın.
Böylece Layout moduna geçmiş oldunuz. Burada gereken elemanları sayfanıza kolayca yerleştirebilirsiniz. Burada “Getting Started in Layout Mode” başlıklı bilgi penceresini görebilirsiniz. Bu pencere kısaca temel araçları tanımlamaktadır: yerleşim hücresi ve yerleşim tablosu. OK düğmesine tıklayarak bu iletişim kutusunu kapatabilirsiniz.
“Don’t Show Me This Message Again” şeklinde bir onay kutusu göreceksiniz.
Bu kutuyu işaretsiz olarak bırakırsanız Dreamweaver’ı bir sonraki açışınızda Layout moduna geçtiğiniz takdirde bu iletişim kutusu yine karşınıza çıkacaktır.
Document araç çubuğunun hemen altında, üzerinde “Layout Mode [exit]” metni ortalanmış
Layout moduna geçmek için View > Table Mode > Layout Mode komutunu seçebilir ya da Cmd+F6 (Macintosh’ta) veya Ctrl+F6 (Windows’ta) klavye kısayolunu kullanabilirsiniz.
3. Insert araç çubuğunda Layout kategorisinin seçili olduğundan emin olun ve buradaki Draw Layout Cell düğmesine tıklayın.
Siz Draw Layout Cell aracını seçtikten sonra, belge penceresine götürdüğünüzde imleç artı
Layout Table aracını, Layout modunda başka bir tablonun hücrelerinden birinde bir tablo çizmek için kullanamazsınız. Tabloları iç içe yerleştirmek için Standard modu kullanmanız gerekir.
4. İmleci sayfanın ortasına yerleştirin, sonra da tıklayıp sürükleyerek yeni hücreyi çizin.
Otomatik olarak hücreyi içeren bir yerleşim tablosu çizilecektir. Yerleşim tablosu yaklaşık belge penceresinin genişliğinde çizilir. Ama siz tabloyu istediğiniz boyutlarda olacak şekilde
ayarlayabilirsiniz. Hücre, yeşil dış hatlı tabloyla karıştırılmaması için mavi bir dış hatla gösterilir. Düz mavi çizgi, ekleme noktasının hücre içinde olduğunu gösterir. Kesikli mavi çizgi ise, ekleme noktasının hücre içinde olmadığının işaretidir. Tablonun hücre dışında kalan bütün bölümleri gri renkle gösterilir. İnce beyaz çizgiler, siz yerleşim hücrelerini çizerken Dreamweaver’ın tabloyu hazırlamak için oluşturduğu satırları ve sütunları gösterir.
İmleci hücre kenarlığının üzerine getirdiğinizde hangi hücrenin üzerinde olduğunuzu göstermek için kenarlığın rengi kırmızıya döner.
Varsayılan durumda yerleşim tabloları üst tarafta, ilgili tablonun tanımlanmasını
kolaylaştıran bir sekmeyle görüntülenir. Bu sekme, tablonun sayfanın üst kısmına göre biraz aşağıda kalmasına sebep olur. Web tarayıcısında bu ekstra boşluk yoktur. Tabloda ayrıca alt tarafta sütunlara ait genişlikler ve menülerle birlikte tablo genişliği ve bir tablo menüsü içeren bir çubuk yer alır. Standard moddaki tablo üstbilgi çubuğuyla aynı işleve sahip olan bu çubuk başlangıçta siz imleci yeni oluşturduğunuz hücrenin alt kenarının üzerine getirmedikçe görünmeyebilir.
Sekmeyi ve çubuğu gizlemek için View > Visual Aids > Table Widths komutunu seçin. Bu dersin geri kalan bölümünde varsayılan görsel yardımcıların etkin olduğu ve yerleşim tablosunda sekmeyle çubuğu görebildiğiniz varsayılmıştır.
5. Lesson_06_Tables/Images klasöründeki yoga_sangha-title.jpg resmini yeni çizdiğiniz yerleşim hücresine ekleyin. Alternatif metin alanına “Yoga Sangha”
yazın.
Assets panelindeki (Image seçeneği etkinken) Site bölümünü kullanarak resmi seçip Assets panelinden sayfadaki hücrenin üzerine
sürükleyebilirsiniz.
Böylece bir resim eklemiş oldunuz. Hücre, resimden küçükse resmi içine alacak şekilde büyüyecektir. Yeni büyüklük değerinin, tablo genişlikleri çubuğundaki orijinal sütun büyüklüğünün yanında parantez içinde görüntülendiğine dikkat edin.
Siz resmi eklediğinizde tablo genişlikleri çubuğu ortadan kaybolabilir. Bu çubuğu tekrar görüntülemek isterseniz imleci hücrenin alt kenarının üzerine getirin.
Tablo Yerleşiminde Değişiklik Yapmak
Layout modunda sayfalarınızı tasarlarken içerik ekleme aşamasında hücreleri taşımak, yeniden boyutlandırmak ya da yeni hücreler eklemek isteyeceksiniz. Yerleşim için kullanılan bir hücre diğer hücrelerin üzerini örtemez ve yerleşim tablosunun dışına taşınamaz.
1. events.html belgesinde imleci kenarlığın üzerine getirip kırmızıya döndüğünde kenarlığa tıklayarak hücreyi seçin.
Hücre kenarlığının rengi maviye dönecek ve tutamaçlar belirecektir. Bu tutamaçları sürükleyerek hücrenin boyutlarını değiştirebilirsiniz.
Boyutlandırma tutamaçlarını, Cmd (Macintosh’ta) ya da Ctrl (Windows’ta) tuşunu basılı tutup bir hücrenin içine tıklayarak da görüntüleyebilirsiniz.
2. Hücre resimden daha büyükse tutamaçlarıyla hücre kenarlığını sürükleyerek hücreyi resmi tam olarak saracak şekilde yeniden boyutlandırın. Hücrenin büyüklüğü resimle aynı olmalıdır.
Tablo genişliği çubuğu hücrenin alt kısmındaki diğer seçim tutamaçlarını örtüyorsa, boyutları yeniden ayarlamak için hücrenin sol alt köşesindeki seçim tutamacını kullanın. Bütün görsel yardımcıları gizlemek için alternatif olarak Cmd+Shift+I (Macintosh’ta) ya da Ctrl+Shift+I (Windows’ta) klavye kısayolunu kullanabilirsiniz. Hücreyi yeniden boyutlandırdıktan sonra aynı komutu tekrar kullanarak görsel yardımcıları etkinleştirin.
Table sekmesinde, parantez içinde gösterilen büyüklük eski büyüklük değerinin yerini
3. Hücrenin kenarlığına (yeniden boyutlandırma tutamaçlarına değil) tıklayın ve hücreyi sayfanın ortasına, yukarıya doğru sürükleyerek taşıyın.
Hücreyi ortalamak üzere sola ya da sağa doğru taşırsanız, yerleşim tablosundaki sütun numaralarının yeni büyüklüğü gösterecek şekilde değiştiğini görürsünüz.
4. Ok tuşlarını kullanarak hücreyi sola taşıyın.
Ok tuşlarına her basışınızda hücre 1 piksel taşınır. Shift tuşunu basılı tutarak hücreyi bir seferde 10 piksel taşıyabilirsiniz. Bu hücreyle tablonun yan tarafı arasında biraz boşluk
5. Draw Layout Cell aracını tekrar seçin ve en üstteki hücrenin altında sayfanın ortasına doğru tek bir sütunda üç hücre daha oluşturun. Aralarında biraz boşluk kalmasına dikkat edin.
Sayfanızın görüntüsü aşağıda yer alan örnektekine benzeyecektir. Tablo genişlik çubuğunda yer alan sütunların büyüklükleri konusunda endişelenmeyin. Bunlar yerleşim için
kullandığınız hücrelerin yerleştirilme şekline göre değişirler.
Sayfada bir hücre çizerken, ilk çizdiğiniz hücreyle hizalamak istediğiniz diğer hücreleri yerleştirmenize yardımcı olan beyaz kılavuz çizgileri belirir. Hücrelerin üst taraflarını hizalamak için yatay kılavuz çizgilerini kullanabilirsiniz.
Draw Layout Cell düğmesine birden fazla kez tıklamadan birden fazla hücre çizmek isterseniz ilk hücreyi çizerken Cmd (Macintosh’ta) ya da Ctrl
(Windows’ta) tuşunu basılı tutun. Yardımcı tuşu bırakana kadar yeni hücreler çizmeye devam edebilirsiniz.
6. Yeni oluşturduğunuz üç hücreden en üsttekini yoga_sangha-title.jpg resmini içeren hücreyle aynı genişliğe sahip olacak şekilde büyütün. Lesson_06_Tables/Text klasöründeki events.txt dosyasını açın. İlk üstbilgi satırını ve altındaki paragrafı kopyalayın, metni yoga_sangha-title.jpg resminin altındaki ilk hücreye yapıştırın.
Hücre gerekirse bu içeriği alacak şekilde büyüyecektir.
7. Lesson_06_Tables/Images klasöründeki om.jpg resmini, metni yapıştırdığınız hücrenin altındaki boş hücreye ekleyin. Hücreyi resimle aynı büyüklükte olacak şekilde ayarlayın ve sayfanın ortasına taşıyın. events.txt dosyasındaki geri kalan metni kopyalayın ve son hücreye yapıştırın.
Sayfanızın görüntüsü buradaki örnektekine benzeyecektir.