Dreamweaver ve Frameler

Konu: Dreamweaver ve Frameler Salı Eyl. 15, 2009 1:19 am

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">
<HTML>
<HEAD>
<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>
<NOFRAMES>
<BODY>
</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.