Site Rengi

Web Editörü Ders Notları – Çerçeve İşlemleri

Web Editörü Ders Notları – Çerçeve İşlemleri

Web Editörü Ders Notları – Çerçeve İşlemleri
06.04.2021
236
A+
A-

Web Editörü Ders Notları – Çerçeve İşlemleri

Durağan web sayfaları tasarlanırken sitenin tamamına hâkim olan görsel tasarımın bir gereği olarak her sayfada bulunması gereken bazı ögeler vardır. Web sitesinin logosu, başlığı ve her sayfaya kolayca erişim sağlayan menüler bunlardan bazılarıdır. HTML sayfaları oluştururken bu ögelerin her sayfada bulunması için teker teker uygun yerlere yerleştirilmesi gerekmektedir. Ancak bu işlem hem çok zahmetli, hem de hata yapmaya elverişlidir. Her ne kadar bilgisayar ortamında kopyala / yapıştır yöntemi ile birçok şey kolay bir şekilde yapılsa da içerisinde onlarca sayfa bulunan bir web sitesi için bile bu yol yine de çok zaman ve emek isteyen bir durumdur. Bütün sayfalar bu yolla hatasız bir şekilde oluşturulsa bile daha sonra yapılacak bir güncelleme ihtiyacı doğduğunda benzer işlemi tekrarlamak gerekir. Bu tür durumlarda emek israfını önlemek ve daha kullanışlı bir sayfa tasarlamak amacıyla HTML’nin sunduğu çerçeve imkânından faydalanılabilir.

Çerçeveler bir HTML sayfasını birbirinden bağımsız alanlara ayırarak sadece ihtiyaç duyulan alanı değiştirmeye imkân verir. Böylece sayfa, ihtiyaca göre iki veya daha fazla çerçeveye bölünerek farklı amaçlar için kullanılabilir. Örneğin çerçevelerden bir tanesi sayfanın üst tarafında bulunarak logo ve arama çubuğunu barındırırken, bir diğeri sol tarafında bulunarak menüleri barındırabilir. Orta kısım ise değişebilen sayfa içeriği için kullanılır. Çerçeveli bir HTML sayfası oluşturmak için ilk önce çerçeve yapısını iyice kavramak gerekir.

ÇERÇEVE GRUBU (FRAMESET) OLUŞTURMA

Farklı HTML dosyaları şeklinde tasarlanan üst bilgi, menü bölgesi ve ana sayfa dosyalarını çerçeveler şeklinde tek bir sayfada birleştiren HTML sayfasına çerçeve grubu denir. Birden fazla HTML sayfasını çerçeve yapısı ile bir araya getirmek için ilk önce bu sayfaları bir arada tutan bir çerçeve grubu oluşturmak gerekir. Çerçeve grubu sayfanın tablo yapısına benzer şekilde satırlara veya sütunlara bölünmesiyle elde edilir. Tek bir çerçeve grubu ile satır sayısı x sütun sayısı kadar çerçeve elde edilebilir.

Resimde üst, sol ve orta olmak üzere üç alandan oluşan bir çerçeve grubu görülmektedir. Burada her satırdaki sütun sayısının eşit olmadığı göz önüne alındığında bu tür yapılar nasıl oluşturulabilir?

Web Editörü Ders Notları – Dreamweaver Çerçeve Grubu
Web Editörü Ders Notları – Dreamweaver Çerçeve Grubu

Burada aslında iç içe iki adet çerçeve grubu oluşturulmuştur. İlk önce sayfa yatay bir şekilde ikiye bölünür. Daha sonra alt çerçeve dikey bir şekilde yine ikiye bölünür. Böylece üç çerçeveli bir çerçeve grubu oluşturulmuş olur. Burada oluşturulan çerçeve grubu aslında tek bir HTML dosyası içerisinde oluşmaktadır. Bunu bir örnekle uygulamaya çalışalım.

  • Yeni bir HTML dosyası oluşturun.
  • Ekle > HTML > Çerçeveler > Üst Yuvarlanmış Sol yolunu izleyin.
Web Editörü Ders Notları – Dreamweaver Çerçeve Grubu Oluşturma
Web Editörü Ders Notları – Dreamweaver Çerçeve Grubu Oluşturma

Her bir çerçeve için başlık bilgisi girebileceğiniz bir diyalog penceresi açılır. Burada Çerçeve isimli açılır menüden sırayla çerçeve isimlerini seçerek Başlık metin Kutusuna uygun başlık bilgileri girebilirsiniz.

Sırasıyla mainFrame için ‘Ana Sayfa’, leftFrame için ‘Menü Sayfası’ ve topFrame için ‘Üst Bilgi Sayfası’ değerlerini girip Tamam düğmesini tıklayın. Böylece üç çerçeveli bir çerçeve grubu oluşturmuş oldunuz.

ÇERÇEVE GRUBUNU KAYDETME

Çerçeve grubu oluşturduğunuzda aslında her bir çerçeve ve çerçeve grubu için ayrı ayrı HTML dosyaları oluşturmuş olursunuz. Dolayısıyla bu dosyaların teker teker isimlendirilerek kaydedilmesi gerekmektedir.

  • Dosya > Tümünü Kaydet komutunu verin. Bu komut ile oluşturulan ve daha önce kaydedilmemiş sayfaları sıra ile kaydetmek için her bir sayfanın ismini girmenizi isteyen diyalog pencereleri açılmasını sağlar.
  • İlk önce çerçeve grubunu kaydetmek için Cerceve.html ismini vererek Kaydet düğmesini tıklayın.
  • Orta sayfa için AnaSayfa.html ismini vererek Kaydet düğmesini tıklayın. Üst ve sol tarafı kaydetmek için ayrıca seçip kaydetmek gerekir.
  • Üst çerçeveye tıklayarak seçin.
  • Dosya > Çerçeveyi Kaydet komutunu verin.
  • Açılan Farklı Kaydet diyalog penceresinde üst çerçeve için UstBilgi.html ismini verdikten sonra Kaydet düğmesine tıklayarak kaydedin.
  • Sol çerçeveye tıklayarak seçin.
  • Tekrar Dosya > Çerçeveyi Kaydet komutunu verin.
  • Açılan Farklı Kaydet diyalog penceresinde sol çerçeve için
  • Menu.html ismini verdikten sonra Kaydet düğmesine tıklayarak kaydedin.
  • Böylece bir çerçeve grubunu kaydetmiş oldunuz.

ÇERÇEVE GRUBU İÇİNDEKİ ÇERÇEVELERİ YENİDEN BOYUTLANDIRMA

Yeni bir çerçeve grubunu oluşturduğunuzda varsayılan olarak belirli genişlik ve yüksekliğe sahip olurlar. Web sayfanızda kullandığınız içeriğe bağlı olarak bu değerler daha büyük veya daha küçük olabilir. Bu tür durumlarda çerçeveleri yeniden boyutlandırmak gerekir.

Bunu yapmanın en kolay yolu tasarım ekranında çerçeveleri ayıran çizgileri fare ile sürüklemektir. Çerçeve çizgileri görünmüyorsa Görünüm > Görsel Yardımcılar > Çerçeve Kenarlıkları yolu izlenerek gösterilebilir, aynı yolla gizlenebilir. Sol çerçevenin boyutunu değiştirmek için fare ile çizgi tutularak sağa veya sola doğru kaydırılabilir. Ancak bu yöntem ile hassas ayarlama yapmak zordur. Aşağıdaki adımları izleyerek çerçeveleri yeniden boyutlandıralım. Eğer açık değilse Böl düğmesine tıklayarak bölünmüş ekran görüntüsüne geçin

Web Editörü Ders Notları – Dreamweaver Bölünmüş Ekran Görüntüsü
Web Editörü Ders Notları – Dreamweaver Bölünmüş Ekran Görüntüsü

Tasarım ekranında çerçeve çizgilerinden birine tıklayın. Çerçeve grubunun bulunduğu Cerceve.html dosyasını seçmiş, kod ekranında Cerceve.html dosyasının içeriğin görüntülemiş olursunuz. HTML kodları içerisinde yer alan ve resimde verilen kod parçası çerçeve grubunu oluşturur.

Web Editörü Ders Notları – Dreamweaver Çerçeve Grubuna Ait HTML Kodları
Web Editörü Ders Notları – Dreamweaver Çerçeve Grubuna Ait HTML Kodları

Burada dikkat edilmesi gereken nokta iç içe iki adet etiketinin kullanılmış olmasıdır. Dış çerçeve grubunun iki adet alt elemanı vardır. Bunların biri üst çerçeveyi temsil eden iken, diğeri ise iç grubu oluşturan etiketli çerçeve grubudur. İç çerçeve grubu ise yine iki çerçeveden (Menu, AnaSayfa) oluşmaktadır.

Web Editörü Ders Notları – Dreamweaver İç İçe Çerçeve Grubu Yapısı
Web Editörü Ders Notları – Dreamweaver İç İçe Çerçeve Grubu Yapısı

Dış çerçeve grubu iki çerçeveden oluşmaktadır. Yatay bir bölünme olduğu için bu çerçeveler satır olarak düşünülmektedir. Bu satırların yüksekliği rows özelliği ile ayarlanır. Burada varsayılan olarak 80,* değeri verilmiştir. Bunun anlamı ilk satırın 80 pixel yüksekliğinde olduğu ikinci satırın ise pencerenin geri kalanını aldığıdır. Dış çerçeve grubuna ait sütun değeri yani cols özelliğinin değeri ise tek sütun olduğu için * değerini almaktadır. Yani pencerenin genişliğinin tamamını almaktadır.

İç çerçeve grubu ise yine iki çerçeveden oluşmaktadır. Ancak bu grup dikey bir bölünme göstermekte ve sütunlar olarak düşünülmektedir. Bu sütunların genişliği ise cols özelliği ile ayarlanmaktadır. Yine varsayılan olarak 80,* değeri verilmiştir. Bu değerler soldaki çerçevenin genişliğinin 80 pixel olduğunu, sağdaki çerçevenin genişliğinin ise pencerenin geri kalanını aldığını ifade etmektedir.

  • Dış çerçeve grubunun rows özelliğini 100,* şeklinde değiştirin.
  • İç çerçevenin cols özelliğini 120,* şeklinde değiştirin.
  • Tasarım ekranını tıklayarak sonucu gözlemleyin.

Burada vereceğiniz farklı değerlerle farklı sonuçlar elde edebilirsiniz. Üst ve sol çerçevede oluşturduğunuz nesnelerin boyutlarına bağlı olarak vereceğiniz değerler değişebilir.

ÇERÇEVE ÖZELLİKLERİNİ AYARLAMA

Çerçeve özelliklerini farklı şekillerde ayarlayarak farklı görünümde ve işlevsellikte sayfalar elde edebilirsiniz. Örneğin; çerçeve çizgilerini gizleyerek sayfayı bir bütünmüş gibi göstermek mümkün iken, bazı çerçevelere kaydırma çubuğu ekleyerek ekrana sığmayan kısımlarının görüntülenmesi sağlanabilmektedir. Bir çerçeve grubunda özellikler değiştirilebilir.

Web Editörü Ders Notları – Dreamweaver Çerçeve Grubu Özellikleri
Web Editörü Ders Notları – Dreamweaver Çerçeve Grubu Özellikleri
  • Kenarlıklar (frameborder): Bu özellik varsayılan olarak Hayır değerini almaktadır. Bu değer çerçeve kenarlığını görünmez yapar. Çerçeve kenarlığının görünmesini istiyorsanız bu özelliği Evet yapınız.
  • Kenarlık genişliği (border): Bu özellik varsayılan olarak 0 değerini almaktadır. Çerçeve kenarlığının görünmesi için bu değerin en az 1 olması gerekmektedir.
  • Kenarlık rengi (bordercolor): Çerçeve ilk oluşturulduğunda bu özellik varsayılan olarak verilmemektedir. Ancak daha sonra eklenerek çerçeve kenarlığı buradan seçilecek herhangi bir renk ile renklendirilebilir.
  • Satır (rows): Bu özellik, çerçeve grubunu oluşturan çerçevelerin yatay olarak bölünmesi durumunda birden fazla değer alır ve virgülle ayrılır. * değeri pencerenin geri kalanının tamamını ifade eder.
  • Sütun (cols): Bu özellik, çerçeve grubunu oluşturan çerçevelerin dikey olarak bölünmesi durumunda birden fazla değer alır ve virgülle ayrılır. * değeri pencerenin geri kalanının tamamını ifade eder.

Çerçeve grubunda yukarıdaki ayarlamalar yapıldıktan sonra, grubu oluşturan çerçevelerin ayarlaması yapılır. Herhangi bir çerçeveye ait özellikleri Özellikler penceresinde görebilmek için bölünmüş ekran görünümünde bu çerçeveyi seçmek gerekir. Bir çerçevede aşağıdaki özellikler değiştirilebilir.

Web Editörü Ders Notları – Dreamweaver Çerçeve Özellikleri
Web Editörü Ders Notları – Dreamweaver Çerçeve Özellikleri
Web Editörü Ders Notları – Dreamweaver Örnek Hedef Gösterimi
Web Editörü Ders Notları – Dreamweaver Örnek Hedef Gösterimi
  • Çerçeve adı (name): Çerçeveye bir isim vermek için kullanılır. Bu isim daha sonra başka bir çerçevede tıklanan bir köprünün bu çerçevede açılması için hedef göstermede kullanılır.
  • Kaynak (src): Bu özellik, çerçeve içerisinde görünecek olan HTML dosyasının yolunu belirtir. Tüm dosyalar aynı klasörde yer alıyorsa buraya sadece dosyanın adını ve uzantısını yazmak yeterli olur. Aksi durumda içinde bulunduğu klasörün yolunu da eklemek gerekir.
  • Kaydır (scrolling): Çerçeve içerisine sığmayan içeriklerin görüntülenmesi için çerçevenin kenarında kaydırma çubuklarının görüntülenmesi amacıyla kullanılan bir özelliktir. Bu özellik Hayır değerini aldığında, içerik büyük olsa da kaydırma çubukları görünmez.
  • Yeniden boyutlandırma yok (noresize): Bu özellik web sayfasının çalışma zamanında çerçeve boyutlarının değiştirilmesini önler. Bu özellik noresize değerini alır.

ÇERÇEVE İÇERİĞİNİ OLUŞTURMA VE DÜZENLEME

Çerçevelerin her biri ayrı birer HTML dosyaları olduğu için bunlar birbirinden bağımsız bir şekilde tasarlanır. Ancak bir araya geldiklerinde bir bütün oluştururlar. Aşağıdaki uygulamayı yaparak çerçeve grubumuza içerik ekleyelim.

  • Açık değilse Cerceve.html dosyasını açın.
  • Üst çerçeveye tıklayarak aktif hâle getirin.
  • Buraya “Çerçeve Grubu Oluşturma” metnini yazın.
  • Yazıyı seçerek Format > Paragraf Formatı > Başlık 1 komutunu vererek yazıyı Başlık 1 yapın.
  • Dosya > Çerçeveyi Kaydet yolunu takip ederek dosyayı kaydedin.
  • Sol çerçeveyi tıklayın.
  • Biçim > Liste > Sıralanmamış Liste komutunu vererek bir liste oluşturun.
  • Liste elemanlarını sırasıyla AnaSayfa, Hakkımızda, Ürünler ve İletişim olacak şekilde düzenleyin.
  • Dosya > Çerçeveyi Kaydet yolunu takip ederek dosyayı kaydedin.
  • Dosya > Tarayıcıda Önizleme > (herhangi bir tarayıcı) komutunu vererek sonucu gözlemleyin.

ÇERÇEVE İÇERİĞİNİ YÖNLENDİRME

Çerçeve içerikleri birbirinden bağımsız HTML dosyalarından oluşsa bile bir çerçeve grubu içerisinde birleştiklerinde birbirleri içerisinde açılacak sayfalara yönlendirmeler yapılabilir. Örneğin Menu.html sayfası içerisinde web sitenizdeki sayfalara ulaşacak köprüleri barındırıp, bu köprülere tıklayınca açılacak olan sayfaları AnaSayfa.html dosyasının bulunduğu mainFrame çerçevesinde açılmasını sağlayabilirsiniz. Bunu bir uygulama ile daha iyi anlayalım.

  • Yeni bir HTML dosyası oluşturun.
  • İçerisine Başlık 1 türünde Hakkımızda yazısını ekleyin.
  • Yeni dosyayı Dosya > Kaydet komutunu verip, Hakkimizda.html ismi ile kaydedin.
  • Açık değilse Cerceve.html dosyasını açın.
  • Sol çerçeveye eklediğiniz sırasız listede yer alan Ana Sayfa yazısını seçin.
  • Özellikler penceresinde yer alan Bağ (href) alanına AnaSayfa.html değerini yazın.
  • Aynı pencere üzerinde yer alan Hedef (target) alanında açılan listeden mainFrame değerini seçin.
  • Köprü kurulan sayfanın içinde açılmasını istediğimiz çerçeveye daha önce mainFrame ismi verilmişti. Bu yüzden Hedef özelliğine hedef gösterilen çerçevenin ismini yazmak gerekmektedir.
  • Benzer şekilde Hakkımızda yazısını seçerek Bağ alanına Hakkimizda.html, Hedef alanına mainFrame değerlerini girin.
  • Dosya > Tarayıcıda Önizleme > (herhangi bir tarayıcı) komutunu vererek sonucu gözlemleyin.
Web Editörü Ders Notları – Dreamweaver Köprü İçin Hedef Alanı Belirleme
Web Editörü Ders Notları – Dreamweaver Köprü İçin Hedef Alanı Belirleme

Çerçeve İşlemleriÇerçeve İşlemleri Ders NotlarıÇerçeve İşlemleri Ders Notları PdfÇerçeve İşlemleri DersiÇerçeve İşlemleri Konu AnlatımıÇerçeve İşlemleri Konu Anlatımı PdfÇerçeve İşlemleri NotlarıÇerçeve İşlemleri Notları PdfÇerçeve İşlemleri ÖzetÇerçeve İşlemleri Özet PdfDers NotlarıWeb EditörüWeb Editörü Ders NotlarıWeb Editörü Ders Notları PdfWeb Editörü DersiWeb Editörü Konu AnlatımıWeb Editörü Konu Anlatımı PdfWeb Editörü NotlarıWeb Editörü Notları PdfWeb Editörü ÖzetWeb Editörü Özet PdfWeb Editörü Programları

YORUMLAR

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.