Forum Ana Sayfası  »  Web Tasarım Kursu
 »  Dreamweaver Tablo Oluşturmak....

Yeni Başlık  Cevap Yaz
Dreamweaver Tablo Oluşturmak....   
(gösterim sayısı: 2.983)
Yazan Konu içeriği
[Hakkı ÇETİN]
Hakkı Çetin
Kullanıcı Resmi
Kayıt Tarihi: 23.02.2012
İleti Sayısı: 399
Şehir: İstanbul
Durum: Forumda Değil


E-Posta Gönder
Web Adresi
Özel ileti Gönder

Konu Tarihi: 27.03.2012- 18:05
Alıntı yaparak cevapla  


  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 vetablo içeriğini bu hücrelere yerleştirirsiniz. Hücreleri birleştirerek daha büyükhü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ı tipteiçerik sunmak için kullanılabilir. Tablolar yerleşim düzenini kontrol etmek içinkullanılabilir. İçeriği tablo hücreleri içinde düzenleyerek nesneleri sayfaüzerinde belirli konumlara yerleştirebilir ve daha karmaşık görsel tasarımlaroluşturabilirsiniz. Tablolar, tasarımcılara ve geliştiricilere sitelerinin yerleşim düzeni üzerinde kontrol imkânı sağlayan HTML elemanlarından biridir.

Bu Bölümde Neler Var?

Yerleşim düzeni.

Tablo ekleme ve özellikleri.

Harici tabloları almak.

Satır ve sütun özellikleri

Tablo içeriğini sıralama.

Yerleşim düzeni boyutu.

Mizanpaj modu.

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.


Eklearaç Çubuğun da

Mizanpaj kategorisini seçin ve
Standart mod düğmesinin
seçili olduğundan emin olun.
Varsayılan durumda Standart mod seçeneği etkin olmalıdır. Etkin mod,
vurgulu bir düğmeyle gösterilir. Etkin tablo modu olarak Standart mod seçili
değilse, Standart düğmesine tıklayın.

Daha sonra ekleme noktanızı sayfanızın içinde istediğiniz bir noktaya koyarakyeni bir tablo eklemek için Ekle panelindeki Mizanpaj modundaki yada Ortak modundaki Tablo düğmesine tıklayın.

Table iletişim kutusu üç bölüme ayrılmıştır Table Boyutu, Üstbilgi veErişebilirlik. Tablo Boyutu 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ürTable 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ızvarsayılan Dreamweaver değeri 200 piksel olacaktır.Border: Tablo kenarlığının genişliğini (kalınlığını) gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan  

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ızdanemin olun. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaverdeğeri boştur. Metin alanının sağında söz konusu boşluğu göstermek içinmavi rengin kullanıldığı küçük bir tablo resmi göreceksiniz.
Cell Spacing: Tablo hücreleri arasındaki boşluk miktarıdır (kenarlık bunadahil değildir). Bu seçeneği boş bırakırsanız varsayılan değer olan 1 pikselkullanılır. Bunun için herhangi bir boşluk kullanmak istiyorsanız metin alanına0 yazdığınızdan emin olun. Daha önce bir tablo oluşturmadıysanız varsayılanDreamweaver 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 tabloseçildiğinde Tablo Boyutu bölümündeki seçeneklere Özellikler denetçisindenulaşabilirsiniz. Tablo iletişim kutusunu daha önce kullandıysanız buseç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.  

Üstbilgi bölümü üstbilgi için dört farklı yerleşim seçeneği içerir: Yok, Sol, Üstve Her ikisi. Üstbilgi (header), içeriğinizi etiketlemek için kullandığınız bir satırya da sütun başlığıdır. Üstbilgiler tasarım/yerleşim tablolarından (tasarımamacıyla görsel elemanların düzenlenmesi ve yerleştirilmesi için kullanılantablolar) ziyade çoğunlukla veri tabloları (hesap tabloları gibi işlev görentablolar) için kullanılır. Örneğin Üst seçeneğini kullanırsanız ve ilk sütunun enüstteki hücresine Sipariş yazarsanız bu sütundaki diğer hücreler içeriklerigösterilmek üzere bir ekran okuyucu (görme özürlü ziyaretçiler tarafından yada 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 Sipariş kelimesi daha sonra da hücrenin içeriği okunacaktır.   Bir hücreyi (ya da hücreleri) üstbilgiyedönüştüren bu seçeneğe Özellikler denetçisi aracılığıyla da erişebilir ve istediğiniz zaman üzerinde değişiklik yapabilirsiniz.


Sayfalarınızın ziyaretçileriniz açısından erişilebilirlik durumunu sürekli   larakdikkatealmanı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.




Title: Siz bir tablo açıklaması (caption) tanımladığınızda bu açıklamabütün kullanıcılar tarafından görülür ve tablonun üstüne, altına, soluna ya dasağına hizalanabilir. Bu seçeneği boş bırakırsanız herhangi bir tablo açıklaması eklenmez. Bu seçenek sadece Tablo iletişim kutusunda bulunur. Daha ileride bu özelliği dahil etmek isterseniz, HTML kodunu düzenleyerek bunugerçekleştirebilirsiniz.  


ID: Tablo özeti sayfada görüntülenmez. Ekran okuyucular tarafındanokunur 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.

Sayfada, belirlediğiniz özelliklerle oluşturulmuş bir tablo belirecek ve otomatikolarak seçili durumda olacaktır. Tablonun üst kısmına bir tablo üstbilgisi (açıkrenkli 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 birmenü oku bulunan yeşil bir çizginin uzandığını göreceksiniz. Çubuğuntabloya en yakın kısmında bir dizi kısa yeşil çizgi yer almaktadır. Sütunlarıngenişliğini gösteren bu çizgilerin her biri kendi menü okuna sahiptir. Siztablonun dışında bir yere tıkladığınızda tablo üstbilgisi kaybolur, tablo tekraretkin 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.


Görünüm > Görsel Yardımcılar > Tablo Genişlikleri komutunu seçerek tablo üstbilgisi görsel yardımcısını açabilir ya da kapatabilirsiniz. Onay işareti sözkonusu seçeneğin etkin durumda olduğunu gösterir. Eğer yanında onayişareti yoksa seçenek kapalı durumda demektir.


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ğunugösterir. İki satır ve dört sütun, tablo açıklamasını çevrelemeyen gri birkenarlıkla gösterilir. Varsayılan Hücre Dolgusu değerinin uygulanmasındandolayı hücrelerin arasında bir boşluk görebilirsiniz. Çünkü Hücre Boşluğu seçeneği boş bırakılmıştı.





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 ensonundayken alttaki satırın ilk hücresine (en soldaki hücre) geçmek için enhızlı yöntemdir. İçeriği bulunan bir hücreye Tab tuşunu kullanarakgeçtiğinizde o hücrenin içeriği seçili hale gelir. Eğer tabloyu eklerken en üst satırı üst bilgi satırı olarak tanımladıysanız içine yazdığınız metinler koyu
renkte ve ortalanmış olarak karşınıza çıkacaktır. Tablonun dışına tıkladığınızda sütunlar genişlikleri değişerek hafifçe kayabilirler.



Harici Tabloları Aktarmak
Dreamweaver içine harici tabloları, Microsoft Office programlarındanaktarabilirsiniz. Bunun için yapmanız gereken ilgili tabloyu kopyalamak ve HTML sayfanızın içine yapıştırmaktır.


Tablo Hücrelerini Kopyalamak ve Yapıştırmak
Hücreler, ekleme noktasının bulunduğu bir konuma yapıştırılabilir ya damevcut 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 birhücrenin yerine geçecek şekilde yapıştırabilirsiniz. Ama iki hücreyi kopyalayıpbunu tek hücrelik bir seçimle değiştiremezsiniz. Kopyaladığınız hücrelerinsayı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çtaaşağıdaki örnekte göreceğiniz gibi çok sayıda hücre elde edersiniz.

Bütün satırları bir tablonun sonuna yapıştırırsanız 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ınauyması durumunda seçilen hücrenin (ya da hücrelerin) içeriği kopyalanmışolanlarla değiştirilir. Hücreyi yada 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ı yada sütunu değil), ardından da Düzen > Temizle komutunu seçin veya Siltuşuna basın. Bütün bir satırı silmeniz gerekiyorsa imleci sürükleyereksatırdaki bütün hücreleri seçin ve Sil tuşuna basın.


Silmek için önce bu tabloyu seçmeniz gerekir. Dreamweaver, tablo seçmekiçin kullanabileceğiniz birkaç yöntem sunar. Tablo yapısının karmaşıklığına bağlı olarak bazı yöntemler diğerlerine göre daha kolaydır.


Bir tabloyu, sol üst köşesine veya sağ ya da alt kenarında bir yere tıklayarak daseç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 Değiştir > Tablo > Tablo Seç komutunu seçmekşeklindedir. Tabloyu seçmek için gri çubuk boyunca uzanan yeşil renkli yataytablo genişlik çizgisine de tıklayabilirsiniz.


Seçildikten sonra tablonun etrafında seçim tutamaçları belirir ve bütüntabloyu siyah bir kenarlık çevreler. Siyah kenarlık sadece bir ya da birden fazlahücrenin etrafını sarmaz, tüm tabloyu kapsar.


Eğer ekleme noktası tablonun içindeyse ve tablo seçili durumda değilse EtiketSeç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 vehücre olarak da bilinir. Bir <td> etiketini seçtiğinizde ilgili hücre seçili halegelir ve Özellikler denetçisini kullanarak bu hücre üzerinde değişiklik yapabilirsiniz.

İmleç bir hücrenin içindeyken Ctrl+A 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.




KURS IÇERIGINI GÖRMEK IÇIN TIKLA

http://www.bilgiegitim.com
0212 291 72 02 - 0212 572 34 00
__________________

Bu ileti en son hakki tarafından 27.03.2012- 18:08 tarihinde, toplamda 2 kez değiştirilmiştir.

Yeni Başlık  Cevap Yaz



Forum Ana Sayfası  »  Web Tasarım Kursu
 »  Dreamweaver Tablo Oluşturmak....
-- Telif Bilgisi -

Yukari

  • Online
  • : 11
  • Bugun Tekil
  • : 446
  • Bugun Cogul
  • : 1.600
  • Dun Tekil
  • : 939
  • Dun Cogul
  • : 4.518
  • Toplam Tekil
  • : 114.626
  • Toplam Cogul
  • : 503.388