Dreamweaver ve Frameler
Dreamweaver ve Frameler
Frame Kavramı
Türkçeye çevirdiğimizde "çerçeve" olarak karşımız çıkıyor fakat HTML içerisinde Frame dediğimizde bir ana sayfanın (_parent) birden fazla parçaya ayrılarak farklı HTML dosyalarını bünyesinde barındırması olayı diyebiliriz.
Örnek ile anlatmaya çalışırsak web'de sıklıkla gördüğümüz yan veya üst kısımdaki navigasyon menüsünün sabit kalması ve sadece içeriğin olduğu kısmın yüklendiği sayfalarda kullanılan teknik; Framedir. Frame ile hazırlanmış sitelere örnek olarak Ekşi Sözlük'ü gösterebiliriz. (eksizoluk.com)
DW içerisinde Frameler oldukça geniş bir desteğe sahiptir. Özellikle WYSIWYG'in en güzel uygulandığı konulardan biri olan Frameleri DW içinde yönetmek diğer editörlere göre çok daha kolaydır.
Frame kullanımı
Framelerin ne olduğunu öğrendiğimize göre şimdi DW içerisinde nasıl kullanıldığını açıklayalım.
Öncelikle DW içinde boş bir doküman açın ve bunu kaydedin. Burada yeri gelmişken belirtelim; eğer Framelerin içerisine yerleştireceğimiz bölümler önceden hazırsa işlerimiz çok daha kolaylaşacaktır. Öte yandan aynı anda Frameleri sayfaya ekleyip DW'ın güçlü ara yüzü sayesinde Frame içerisinde de tasarım yapabiliriz. Fakat bu pek sağlıklı sonuçlar vermeyebilir.
Sayfamıza ekleyebileceğimiz Framelerin neler olduğunu, Insert / HTML / Frames menüsü ile görebiliriz. Buradan ihtiyacınıza uygun olan Frame türünü seçip sayfaya ekleyebilirsiniz.
Insert / HTML / Frames menüsünden sayfamıza yeni bir freame ekleyebiliyoruz
Ya da Insert Panel (Eski adı ile Object Panel) altındaki Layout sekmesinde yer alan Frames düğmesinden de aynı seçeneklere ulaşabilirsiniz.
Insert panel altındaki Layout sekmesinde yer alan Frames düğmesi ile de Frame eklemek mümkün
Uygun Frame ya da Frameleri sayfaya ekledikten sonra Windows / Frames (Shift+F12) menüsü ile Frameleri yönetebileceğiniz panelin açılmasını sağlayabilirsiniz. Bu sayede Framelerin yönetimi hem çok kolaylaşmakta hem de daha güçlü bir hal almaktadır.
Sayfamızdaki frameleri Frames paneli ile yönetmek oldukça kolay
Bu panel sayesinde Framelerin seçim işlemi oldukça basitleşiyor. Buradan bir Frame seçtiğinizde Properties paneli de bu Frame'e ait ayarları yapacak şekilde değişmektedir. Bunlar sırasıyla;
Seçtiğimiz frame ile ilgili ayarları Properties panelinden yapabiliriz
-
Frame Name: Frame'in adı, bu oldukça önemli bir nokta aslında. Zira frameler ile çalışırken bir link yarattığımızda bu linkin hangi Frame içerisinde açılacağını bu frame isimleri belirtiyor. Örneğin Şu an benim çalıştığım dokümanda soldaki framein ismi leftFrame sağ tarafta yer alan ve içeriğin bulunacağı frame'inki ise mainFrame olarak belirlenmiş. Bu Target kavramını biraz daha ileride daha ayrıntılı inceleyeceğiz.
-
Scroll: Framelerdeki içeriğe göre tarayıcıda kaydırma çubuğu (Scrollbar) çıkıp çıkmayacağı yada nasıl bir hal alacağını belirtir.
-
Src: Bu ise Frame olarak çağrılan HTML dokümanının adresini belirtiyor.
-
Borders: Framein kenarlarında çerçeve olup olmayacağını belirten özellik.
-
Magrin Height: Frame içerisindeki içeriğin kenarlara olan dikey uzaklığı
-
Magrin Witdh: Frame içerisindeki içeriğin kenarlara olan yatay uzaklığı
-
No Resize: Framein daha sonradan ziyaretçi tarafından tekrar boyutlandırılabilmesini belirtir.
-
Border Color: Çerçeve rengini belirtir.
Bu ayarları sizin için uygun şekilde yaptıktan sonra Framelerimizi kaydedip sayfamızı deneyebiliriz.
Her Frame bir HTML dokümanından oluşur ve her birini ayrı ayrı kaydetmeliyiz. İlgili Frame'i seçtikten sonra File / Save Frame menüsü ile Framelerimizi ayrı ayrı kaydedebiliriz. İşe başlarken açtığımız boş doküman şuanda mainFrame'i teşkil ediyor. Birde bu Framelerin hepsini bir arada tutan dış Frame var. Bu Frame Parent Frame'i oluşturup tüm Framelerin bir arada durmasını sağlar.
Frameseti seçmek için kenarındaki ince çerçeveye tıklamanız yeterli
Frames panelinden tüm framelerin dışında bir çerçeve olarak belirtilen bu ana Frame'i (Frameset) seçip File / Save Frameset menüsü ile bunu da kaydedebilirsiniz.
Target Kavramı ve Framelere Link verme
Her zaman Frameler ile çalışırken link verme işlemleri sorun olmuştur. Ama bu yazıda bunlara kesin çözüm getirmeyi garanti ediyoruz.:)
Öncelikle örnek sayfamızı inceleyerek ne yapmaya çalıştığımız bir görelim isterseniz.
Frame kullanılan örnek bir sayfadan görüntü
Burada sol tarafta bir menümüz var bu menüye tıklandıkça değişen bir mainFrame'imiz var.
Target kavramı:
Target HTML içerisinde Frameler ile kullandığımız bir kavramdır. Tabi önce Frameset'e bir açıklık getirmek gerekir. Her Frameset içerisinde bu framesetin sahip olduğu framelerin bilgileri tutulur. (topFrame'in border'ı olsun, leftFramein kaynak adresi main.htm'dir vs vs...)
Örnek bir Frameset kodu:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
-
<TITLE>Örnek Frame Sayfasy</TITLE>
-
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset="iso-8859-1"">
-
</HEAD>
-
-
<FRAMESET ROWS="*" COLS="172,*" FRAMESPACING="0" FRAMEBORDER="NO" BORDER="0">
-
<FRAME src="frame_sol.htm" NAME="leftFrame" FRAMEBORDER="YES" SCROLLING="NO" NORESIZE BORDERCOLOR="#FFFFFF">
-
<FRAME src="frame_main.htm" NAME="mainFrame">
-
</FRAMESET>
-
-
</BODY>
-
</NOFRAMES>
-
-
</HTML>
-
Bu Frameset bilgisi içerisinde her frame'in bir adı vardır ve bu ad o Frame ‘e özgüdür. İşte bu özgünlük bize istediğimiz Frame'e link verebilme özgürlüğü sağlar. Bunun için ise linklere ek bir parametre olarak TARGET kullanılır.
Normalde bir link vermek için şu kod yeterlidir;
-
<a href="http://www.google.com">Google</a>
-
Fakat bu linkin hedefi belli değildir. Yani hangi Frame içerisinde açılacağı belirtilmemiştir. Bu yüzden varsayılan olarak Parent Frame'i yani Ana çerçeve olan dış framei hedef alır ki buda istediğimiz bir şey olmayabilir. Linklere hedef belirtmek için;
-
<a href="http://www.google.com" target="mainFrame">Google</a>
-
Şeklinde kodu değiştirmemiz gerekir. Bu target ayarlarını DW içerisinde Properties panelinden rahatlıkla yapabiliriz.
Linklerin hdeflerini Properties paneli üzerinden değiştirebilirsiniz
Standart tanımlı Targetları şunlardır;
-
_blank: Yeni ve boş bir pencere anlamına gelir. (linki yeni bir tarayıcı penceresinde açar)
-
_parent: Frameset bilgisinin olduğu Parent Frame'i belirtir.
-
_self: Linkin içerisinde bulunduğu frame'i gösterir. Link yine bu frame içerisinde açılacaktır.
-
_top: Sayfayı o an açık olan tarayıcı penceresi içerisinde açar.
-
mainFrame, leftFrame... : Bunlar ise sizin sayfaya eklediğiniz ve özel olarak isimlendirdiğiniz yada DW'ın otomatik olarak isimlendiği frameleri belirtir.
Konuyu toparlarsak örneğimizde yer alan sol menüdeki bir linke tıklandığında sadece sağ tarafın değişmesi için bu linkin Target'ı olarak mainFrame seçmeliyiz.