Professional Documents
Culture Documents
Siparifl için:
http://abone.vogel.com.tr
ÅCD yaz›c› testi Å205 Dolardan bafllayan DVD yaz›c›lar ÅCD Klonlama ÅÇekim ÅRötufllama ÅBask› ÅTEST: 45 dijital foto¤raf makinesi ÅSat›n
yöntemleri ÅCD Etiketi haz›rlama ÅAudio, MP3, Foto¤raf CD’si yazma alma dan›flman› ÅBenzersiz Plug-in efektleri ÅTV’nizde foto¤raf gösterisi
ÅFilm kopyalama ÅYaz›labilir CD’lerin teknik ayr›nt›lar›... ÅProfesyonel çekim için foto¤raf kursu ÅPortre, Sualt›, Do¤a, Ürün çekim
yöntemleri...
F
rame’ler web sayfalar›nda faydaland›- görünecek html sayfalar› ise farkl› arka plan sol.html
¤›m›z önemli ve bir o kadar da kulla- rengine sahipler. <html>
n›fll› unsurlardand›r. Baz› durumlarda Bu en temel frameset yap›s›n› olufltur- <head>
olmazsa olmazd›rlar. Ayn› pencere içerisinde mak için üç adet HTML sayfas› yazmam›z ge- <title>sol</title>
birden fazla web sayfas›n› gösterebilmenin rekir. Birincisi her iki sayfay› da ekranda gös- </head>
en kolay yolu frameset kullanmaktan geçer. terecek olan frameset’i kullanacak sayfa (fra-
Ayr›ca çok kompleks kod yazmak gerektiren me.html), di¤er ikisi ise ekran›n solunda ve <body bgcolor="#cccccc">
baz› ifllevleri frameset kullanarak basit bir fle- sa¤›nda iki ayr› frame olarak görünecek olan <h2>Soldaki sayfa</h2>
kilde çözebilmemiz mümkün olmaktad›r. Bu iki ayr› html sayfas› (sol.html ve sag.html). Bu
bak›mdan frame’ler baz› durumlarda web üç sayfan›n kodlar› ise afla¤›daki gibidir.
tasar›mc›lar›n s›kça baflvurduklar› yöntem- </body>
lerdir. Ancak web ziyaretçileri aç›s›ndan du- frame.html </html>
rum her zaman öyle olmayabilir. Özellikle <html>
geçmifl y›llarda baz› kullan›c›lar›n frame kul- <head> sag.html
lan›lan sayfalardan hiç hofllanmad›klar› bi- <title>frame</title> <html>
linmektedir. Ne var ki baz› durumlarda frame </head> <head>
kullanmak kaç›n›lmaz oluyor. Bu bak›mdan <title>sag</title>
olsa gerek taray›c› üretici firmalar›n ve web <frameset cols="130,*" rows="*"> </head>
tasar›mc›lar›n frame’lerden vazgeçmeye hiç <frame src="sol.html" name="soldaki">
de niyetleri yok. Hatta üstüne üstlük bir de <frame src="sag.html" name="sagdaki">
frame’lerin bir türevi olan IFRAME’lerin web </frameset> <body bgcolor="#aaaaaa">
standartlar›na ilave edildi¤ini hemen belirte- <h2>Sa¤daki sayfa</h2>
lim. Bu ayki StudioWeb’de web sayfalar›m›z- <noframes> </body>
daki frame’leri nas›l tam kontrolümüz alt›n- <body bgcolor="#ffffff"> </html>
da tutabilece¤imizi ve nas›l daha kullan›fll› </body> Fark ederseniz frameset’i içerisinde bar›n-
hale getirebilece¤imizi ö¤renece¤iz. </noframes> d›ran sayfam›z›n <body> tak›lar› aras›nda hiç
bir bilgi yok. Çünkü bu sayfan›n içeri¤i zaten
Frame’leri kontrol </html> iki farkl› HTML sayfas›n›n bir kombinasyonu
JavaScript’in html elementlerini kontrol ede-
bilme meziyetinden frame’ler de nasibini al-
d›lar. Di¤er tüm HTML elementlerini oldu¤u
gibi frame’leri de JavaScript ile kontrol edebi-
liriz. Böylece sadece HTML sayfalar›m›zdaki
elementleri de¤il, bir frameset içerisinde ta-
n›mlanm›fl frame’lerdeki sayfalar›n element-
lerini de frameset’teki di¤er bir sayfadan
kontrol edebilmemiz söz konusu oluyor. Bu
bak›mdan zaten önemli bir ifllevi yerine geti-
ren frame’lerimiz JavaScript sayesinde daha
dinamik, etkileflimli ve de kullan›fll› bir hal
alabilirler. Daha öncesinde frame’lerin yap›s›
hakk›nda biraz bilgi sahibi olal›m isterseniz.
Frame’ler ayn› taray›c› penceresi içerisin-
de birden fazla sayfay› göstermek amac›yla
kullan›l›rlar. Pencerede, görünecek her bir
sayfa için ayr›lan alana frame ad› verilir. Pen-
cerenizde hangi frame’in hangi alanda hangi
web sayfas›n› gösterece¤inin tan›m›n› ise
frameset ad› verilen element ile yapar›z. Afla-
¤›da görülen sayfan›n kodlar›nda bir frame-
set yer almakta. Frameset’imiz dikey olarak Basit bir frameset yap›s›
ayr›lm›fl iki adet frame’e sahip. Frame’lerde
✂
olacak. Frame’lerin sayfada nas›l görünece¤i- ript’in gözüyle görmeye çal›flal›m. E¤er tara-
nin tan›m› ise frameset tak›lar›nda yap›l›yor. y›c›lar›n obje yap›s›n› gösteren DOM tablosu- Windows
<frameset cols="130,*" rows="*"> na bakacak olursak frame objesinin hiyerar- Frame Self Top Parent
<frame src="sol.html" name="soldaki"> flik olarak frame içinde gösterilen html sayfa-
<frame src="sag.html" name="sagdaki"> lar›ndan daha üst pozisyonda oldu¤unu gö-
</frameset> rürüz.
Bunun neden böyle oldu¤unu düflünür- document history location
Buradaki cols="130,*" ifadesi sayfan›n sü- sek, bir frameset, alt›nda birden fazla html
tun olarak iki parçaya bölünmesi gerekti¤ini, sayfas›n› bar›nd›rabilir gerçe¤iyle frame’lerin
sol parçan›n 130 piksellik bir geniflli¤e sahip sayfalardan daha üst pozisyonda olmalar›
ancher link image form
olmas› gerekti¤ini, sayfan›n geri kalan›n› ise mant›kl›. Bizim örne¤imiz de bir frameset ve
sa¤daki sayfan›n kaplamas› gerekti¤ini ta- bunun alt›nda bulunan iki adet sayfadan button
n›ml›yor. Pencerenizi yatay olarak iki parçaya olufluyor. frame.html sayfas› içerisinde Ja- checkbox
bölmek isterseniz vaScript’in gözünde canlanan fley afla¤›daki-
radio
ne benzer bir diyagram asl›nda.
<frameset rows="130,*" cols="*"> Dikkat edecek olursan›z JavaScript’in ta- textarea
<frame src="ust.html" name="ustteki"> n›d›¤› fley solda ve sa¤da görünen sayfalar›n hidden
<frame src="alt.html" name="alttaki"> html doküman isimleri de¤il frameset içeri-
password
</frameset> sinde tan›mland›klar› referans isimleridir. Ya-
gibi bir frameset tan›m› iflinizi görürdü. ni ‘soldaki’ ve ‘sagdaki’ diye adland›r›lan reset
<frameset> tak›lar›n›zda kullanabilece¤i- isimleri. Bu diyagramdan anlafl›lmas› gere- select
niz çeflitli öznitelikler de mevcuttur. Bunlar ken ise flu:
submit
frame’ler aras›nda s›n›r koyup koymama gibi Frameset (ya da framesetin bulundu¤u
çeflitli özellikleri kontrol ederler. Bunlardan sayfa) üst obje iken frame’lerde gösterilen Dom tablosu text
baz›lar› flunlard›r: sayfalar alt obje olarak kabul ediliyor. Bir üst
border obje parent,en üst obje top anahtar kelime- }
bordercolor leri ile tan›mlan›rken alt objeler child ya da
cols frameset içinde alm›fl olduklar› referans </script>
frameborder isimleri ile tan›n›yorlar. Yani frameset örne- </head>
framespacing ¤imizdeki üst obje iki adet alt objeye sahip,
id soldaki ve sagdaki. <body bgcolor="#cccccc">
Bu yap› kullan›larak bir frameset içinde <h2>Soldaki sayfa</h2>
Ayn› flekilde <frame> tak›s›n›n da alabile- bulunan sayfalara ve ilgili sayfalar›n nesnele-
ce¤i baz› öznitelikler flunlard›r. rine ulaflarak bu nesnelerin özelliklerini de- <form>
bordercolor ¤ifltirmemiz mümkün olabilmektedir. <input type="button" value="fon rengi" p
frameborder onClick="renklendir()">
framespacing Frame’deki bir sayfadan </form>
id di¤erini kontrol edin
marginheight fiimdi gelelim bir frame içinde bir sayfadan </body>
marginwidth bir di¤erine nas›l ulaflabilece¤imizi ö¤renme- </html>
name ye. Bunun için üç sayfadan oluflan yukar›daki
scrolling ilk frame’i kullanarak ilginç bir örnek yapaca- fiimdi frame.html sayfas›n› web taray›c›-
src ¤›z. fiimdi sol.html sayfan›z›n kodunu aynen n›zda aç›n. Sol frame’deki dü¤meye t›klay›n.
afla¤›da görüldü¤ü gibi güncelleyip kayde- E¤er kodlarken bir hata yapmad›ysan›z sa¤
‹flin buraya kadar olan bölümü s›rf html’- din. frame’deki sayfan›n arka plan renginin her
di. fiimdi bu frame yap›s›n› bir de JavaSc- bas›flta de¤iflti¤ini göreceksiniz.
sol.html Bu, JavaScript kullanarak frame içindeki
<html> bir sayfadan bir di¤erinin arka plan rengini
Frameset <head> kontrol ediyorsunuz anlam›na geliyor! fiimdi
top, parent
<title>sol</title> kodumuzu biraz inceleyelim.
(frame.html)
frame.html sayfas›nda dikkat edilecek tek
<script language="javascript"> nokta frameset içerisinde kullan›lan sayfala-
r›n isimleri (soldaki ve sagdaki). As›l ifllem ise
fonrengi = new Array("red", "blue", p sol.html sayfas›ndaki kodda gerçeklefliyor.
Frame Frame "yellow", "green", "gray", "white", "black")
soldaki sa¤daki fonrengi = new Array("red", "blue", p
(sol.html) (sag.html) function renklendir() { "yellow", "green", "gray", "white", "black")
rastgelesayi = Math.floor(7*Math.random()) sat›r› ile 7 adet eleman› olan bir dizi yara-
parent.sagdaki.document.bgColor= p t›yoruz. Elemanlar ise standart html renk
Frameset içindeki hiyerarflik yap›
fonrengi[rastgelesayi] isimlerinden olufluyor (Tabii ki ‹ngilizce ol-
<< CHIP Workshop • 105
Web Programc›l›¤›
<<
mak zorundalar). Kullan›c› dü¤meye bast›¤› objeye ç›kmam›z daha sonra da sagdaki
anda JavaScript renklendir() fonksiyonunu isimli sayfaya ulaflmam›z gerekiyor. Frameset
ça¤›r›yor. bu fonksiyonun içerdi¤i koda bir DOM modeline göre bir alt objeden (yani top, parent
bakal›m flimdi. frame içindeki bir sayfadan) üst frame obje- (frame.html)
sini parent ya da top anahtar kelimesi ile Ja-
rastgelesayi = Math.floor(7*Math.random()) vaScript’e ifade edebiliyoruz. Bu ifade bizi bir
üst seviyeye ç›karacakt›r. Bundan sonraki
Sat›r›n›n yapt›¤› ifl 0 ile 6 aras›nda rasgele ad›m ise bir afla¤› seviyeye yani ulaflmay› Frame Frame
bir tamsay› üretip rastgelesayi de¤iflkenin amaçlad›¤›m›z sagdaki sayfas›na olacak soldaki sa¤daki
de¤eri olarak kaydetmek. Yani bu de¤iflken (sol.html) (sag.html)
alabilece¤i de¤erler sadece 0 ile 6 aras›nda parent.sagdaki
bir tamsay›d›r. Bir sonraki ad›mda ise Art›k framesetteki di¤er sayfaday›z. Ama-
Bir frame’den bir di¤erine DOM kullana-
script’imizin as›l can al›c› noktas› gerçeklefli- c›m›z bu sayfan›n arkaplan rengini de¤ifltir- rak geçebilmek için önce üst (parent) ob-
yor. Script’imiz bu bildiri sayesinde sa¤daki mekti. Bunu document objesinin bgColor jeye ulaflmak gerekir
sayfan›n fon rengini de¤ifltiriyor. property’sine de¤er vererek gerçeklefltirece-
¤iz. Yapaca¤›m›z son fley ise ilgili sayfa obje- ‹ç içe iki frameset’te kontrol
parent.sagdaki.document.bgColor= p sini ve property’sini adres listemizin devam›- mekanizmas›
fonrengi[rastgelesayi] na yazmak olacak. ‹lk bölümdeki örne¤imiz en basit frame yap›-
s›n› kaps›yordu. Ama bazen iç içe frame-
Bu bildirideki eflitli¤in sa¤ taraf› fonrengi parent.sagdaki.document.bgColor set’lerden oluflan yap›lar da kullanmak zo-
dizisinin herhangi bir eleman›n› yani bir ren- runda kalabiliriz. fiimdiki örne¤imiz böyle ya-
gi ça¤›r›r. Diyelim ki rastgele say›m›z 0 olarak Arka plan rengi yerine sayfan›n baflka bir p›lar söz konusu oldu¤unda frame’deki say-
üretildi. O zaman eflitli¤in sa¤ taraf› fonren- özelli¤ini de¤ifltirmek isteyebilirsiniz. Bu du- falar aras› kontrol mekanizmas›n›n nas›l iflle-
gi[0] de¤erini al›r ki bu da fonrengi dizimizin rumda yapman›z gereken ilgili obje ve ilgili di¤ini görmemizi sa¤layacak.
ilk eleman› olan "red", yani k›rm›z› de¤eri de- property ya da metodu seçip kullanmak ola- Bu sefer sa¤ taraftaki sayfam›z da içinde
mektir. cak. Diyelim sag.html sayfam›zda form1 is- bir frameset yap›s› bar›nd›r›yor olacak. Yine
Konumuz olan frame’leri as›l ilgilendiren minde bir formun button1 isimli dü¤mesinin öncelikle bu yap›y› oluflturacak html kodlar›-
olay ise eflitli¤in sol taraf›nda gerçeklefliyor. üzerindeki yaz›y› de¤ifltirmek isteseydik yaz- n› görelim.
De¤eri red , yani k›rm›z› olacak fleyi burada mam›z gereken adres listesi afla¤›daki gibi
bildiriyoruz. ‹ste¤imiz frameset içindeki sag- olacakt›. anaframe.html
daki isimli sayfan›n arka plan rengini de¤ifl- <html>
tirmek oldu¤u için, DOM tablosuna göre ilgili parent.sagdaki.document.form1. p <head>
nesnenin yol adresini yazarak o nesneye ula- button1.value="merhaba"; <title>anaframe</title>
fl›yoruz. Script’imiz frame objesinin iki alt ob- </head>
jesinden biri oldu¤undan di¤er alt obje olan fiimdi dilerseniz bir de iç içe iki frame-
sagdaki sayfas›na ulaflmak için önce bir üst set’ten oluflan bir örnekle devam edelim. <frameset cols="130,*" rows="*">
<frame src="sol2.html" name="soldaki">
<frame src="sagframe.html" p
name="sagdaki">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
sol2.html
<html>
<head>
<title>sol</title>
</head>
<body bgcolor="#cccccc">
<h2>Soldaki sayfa</h2>
Sol frame’deki dü¤meye her bas›flta sa¤ frame’in arka plan rengi de¤iflmekte </body>
</html>
✂
rastgelesayi = Math.floor(8*Math.random())
parent.sagdaki.ustteki.document. p
bgColor=fonrengi[rastgelesayi]
}
</script>
</head>
<body bgcolor="#cccccc">
<h2>Soldaki sayfa</h2>
<form>
<input type="button" name="kendi renk"p
value="kendi rengi"onClick="renkkendi()">
<p>
<input type="button" name="ust enk" p
value="üst renk" onClick="renkust()">
</form>
</body>
</html>
onClick="parent.soldaki.p
renklendir()">
</form>
</body>
</html>
Frame Frame
soldaki sa¤daki » eCHIP
(sol.html) (sag.html) StudioWeb+’da bu ay:
???????
Bu ayki uygulamalar›m›z›n çal›flmaya haz›r
birer kopyas›n› dergimizin CD’sindeki Studi-
oWeb+ bölümünde bulabilirsiniz. Studi-
Frame Frame oWeb+’›n bu ayki say›s›nda yine frame’lerle
soldaki soldaki ilgili ilginç bir uygulama bulacaks›n›z. Ja-
(sol.html) (sol.html) vaScript yard›m›yla sayfalar›n›z› bedava ser-
vis veren sunucular›n banner ve reklamlar›n›
Bir frame alt objesine ulaflabilmek için önce alt objenin parent üst objesine ulaflmam›z gerekir. içeren framelerinden kurtarabilirsiniz
Soru 1 Merhaba, yaz›lar›n›z› ve sitenizi ilgiy- yöntem daha bulunmaktad›r. Bu da, List- rüntüsü fiekil-3’deki gibi olmal›.
le takip ediyorum. Ben sorular›n cevaplar›n› Box’un RowSource özelli¤idir. ‹lk olarak AddI- Yukar›da, Initialize olay›na yazd›¤›m›z kod-
kendim yapabiliyorum. Yaln›z daha farkl› tem metodunun nas›l kullan›ld›¤›n› çeflitli lar› silin ve yerine afla¤›daki kodlar› ekleyin.
yöntemlerin olup olmad›¤›n›, aralar›ndaki yöntemlerle inceleyelim.
farklar› ö¤renmek istiyorum. Hangi yöntemi UserForm1 üzerine bir adet ListBox1 nesnesi Private Sub UserForm_Initialize()
tercih etmeliyiz, bunu aç›klaman›z› istiyo- ekleyin. (fiekil-1) Dim i As Integer
rum. Sorum flu: AddItem yöntemiyle User- UserForm1’in Initialize (bafllama) olay›na For i = 1 To 9
Form üzerine çizdi¤imiz bir Listbox nesnesi- afla¤›daki kodu yaz›n. ListBox1.AddItem Cells(i, 1).Value
ne veri ekleyebiliyoruz, bundan baflka daha Private Sub UserForm_Initialize() Next i
kolay yöntem var m› varsa yukar›da belirtti- ListBox1.AddItem "M. Temel Korkmaz" End Sub
¤im gibi aralar›ndaki fark nedir? Hangisini ListBox1.AddItem "Cemil Gökmen" Kodu çal›flt›rd›¤›n›zda fiekil-4’deki görün-
tercih etmeliyiz? (Cafer Aktun) ListBox1.AddItem "Cafer Ulusoy" tü ile karfl›laflacaks›n›z. Bu da istedi¤imiz bir
ListBox1.AddItem "Hasan Akyüz" sonuçtur.
Cevap 1: Öncelikle hemen belirteyim ki, ge- ListBox1.AddItem "Nevzat Adagide" Art›k ikinci metoda geçmenin zaman› gel-
nelde ListBox ve ComboBox nesneleri hemen ListBox1.AddItem "Mustafa Öztürk" di demektir. ListBox’un RowSource Özelli¤ini
hemen bir çok ifllemde ayn› görevi yüklenir ListBox1.AddItem "Mehmet Yetim" kullanaca¤›z. Biraz önce Form’a yazd›¤›n›z
ve ayn› özellikleri kullan›rlar. Benim burada End Sub kodlar› tekrar silin ve bu defa Initialize olay›-
size aktaraca¤›m örnekler sadece ListBox na afla¤›daki kodu yaz›n.
nesnesi için olacakt›r. E¤er uygun özellikleri Run dü¤mesine t›klay›p formu çal›flt›rd›¤›n›z- Private Sub UserForm_Initialize()
siz ComboBox nesnesinde bulabilirseniz ora- da fiekil-2’deki görüntüyü elde edeceksiniz. ListBox1.RowSource = "Sayfa1!A1:A9"
da da kullanabilirsiniz. Buraya kadar olan yöntemde hemen flu- End Sub
fiimdi sorular›n›za cevap bulmaya çal›fla- nun fark›na vard›k ki, e¤er verilerimizi AddI-
l›m. Sizin de anlad›¤›n›z gibi, asl›nda AddI- tem metodu ile kod sayfas›na yaz›p listeye Kodu çal›flt›rd›¤›n›zda elde edece¤iniz gö-
tem metodundan farkl›, s›k kullan›lan bir ekleyeceksek, bütün verileri tek tek bir defa- rüntü fiekil-4’deki görüntüden farkl› olmaya-
ya mahsus girmemiz gerekecektir. cakt›r. Ben yine de size son örnek olarak Row-
Bu defa, verilerimizi Excel çal›flma sayfa- Source’yi kod kullanmadan nas›l gerçekleflti-
s›ndan yine AddItem metodu ile ListBox1 rebiliriz, bunu göstermek istiyorum. Bu defa
nesnesine ald›ral›m. Çal›flma sayfas›n›n gö- yazd›¤›n›z bütün kodlar› silin. Yani User-
Form1’in kod sayfas›ndaki Initialize olay› da-
hil, bütün kodlar› silin.
1) Tasar›m modunda iken, yani VBA pencere-
sinde iken, UserForm1’i aç›n.
2) ListBox1 nesnesini fare ile t›klayarak seçin.
3) Sol tarafta bulunan Properties penceresin-
den RowSource özelli¤ini seçin. (Nesnelere
ait özelliklerin kullan›m›n› detay› ile ö¤rene-
bilmek için elinizde bulunan “Excel ‹le Prog-
ramlama | Makrolar” adl› Kitab›m›z›n “User-
Form” bölümüne bak›n›z.)
4) RowSource özelli¤inin hemen sa¤›ndaki
bofl hücreye “Sayfa1!A1:A9” yaz›n.
5) Formu çal›flt›r›n.
Formu çal›flt›rd›¤›n›zda hiç kod yazmad›-
¤›n›z halde A1:A9 hücreleri aras›ndaki verile-
rin ListBox1 nesnesine atand›¤›n› göreceksi-
fiekil-1: UserForm1 nesnesi üzerindeki fiekil-2: ListBox1 nesnesine AddItem me- niz. (fiekil-5)
ListBox1 nesnesi. todu ile eklenen veriler.
✂
Kutu 1
FORMÜLÜ KEND‹S‹ YAZDI
fiekil-8: Project penceresinde o an aç›k olan dosya haricinde bir de Personal.XLS dosyas›n›n
aç›k oldu¤unu görüyoruz.
erkese yeniden merhaba! Üç say›d›r Geçen hafta verilen uygulaman›n çözümü Su dolu bardagi sahibine getir