SDÜ ULUBORLU SELAHATTİN KARASOY MYO İNTERNET PROGRAMCILIĞI-I 2007-2012
2 İÇİNDEKİLER Sayfa 1. HTML DİLİ 3 1.1. Html Nedir?...3 1.2. Bir Html (Web) Sayfasının Bölümleri.3 1.2.1. <HEAD> </HEAD> Arasında Yapılacak Tanımlamalar.3 1.2.2. <BODY> </BODY> ARASI 6 1.2.2.1 Linkler.7 1.3. Html de Form Kullanımı.8 1.4. Duyuru Panosu Oluşturmak.9 1.5. Html İle Visual Basic Script Kullanımı.12 1.6. Html İle JavaScript Kullanımı...15 1.8. Web de Multimedya (Ses,Video) İşlemleri...17 1.8 Stiller Ve Css Dosyaları.14 1.8.1. Dahili Stiller...14 1.8.2. Harici Stiller...15 1.9. <FRAMESET> Tagı İle Bölüntülü Sayfa Tasarımı..16 1.9.1. Düşey Bölüntü Oluşturmak (Cols).16 1.9.2. Yatay Bölüntü Oluşturmak (Rows) 16 1.9.3. Karışık (hem düşey hem de yatay) Bölüntü Oluşturmak 17 2. FLASH ANİMASYONLARI..19 2.1. Bir Movie Clip Nesnesinin Kod ile Hareketlendirilmesi...19 2.2. Maskeleme (Mask) Kullanımı...20 2.3. Web Menü Yapımı 21 2.4. Harici Dosya Kullanımı.23 3.1. Div tagının Php ile kullanımı Örnek-1 30 3.2. Div tagının Php ile kullanımı Örnek-2 34
3 1. HTML DİLİ 1.1. HTML Nedir? HTML (Hyper Text Markup Language) Hareketli Metin İşaretleme Dili dir. Html komutları (tagları) < ve > işaretleri arasında kullanılırlar. Tagları sonlandırmak için / işareti kullanılır. Büyük-küçük harf ayrımı yoktur. Yalnız İngilizce dil yapısından kaynaklanan durumlara dikkat edilmelidir. Örneğin ALIGN kelimesinin küçük yazımı alıgn değil align dir. Herhangi bir text editör programı ile yazılabilirler. Kayıt yapılırken uzantı olarak htm veya html verilmelidir. 1.2. Bir HTML (Web) Sayfasının Bölümleri <html> <head> </head> <body> </body> </html> 1.2.1. <HEAD> </HEAD> Arasında Yapılacak Tanımlamalar Bu bölümde, 1. Browser dil seti tanımlaması, 2. Browser başlık tanımlaması, 3. Arama motorları için meta tanımlamaları, 4. Standart dışı işlemler için stil tanımlamaları yapılır. a) Browser Dil Seti Tanımlaması Web sayfamızı ziyaret edecek farklı dillerdeki browserlar için, sitemizde kullandığımız karakterlerin aynen korunması için dil seti tanımlaması yapılmalıdır. Türkçe karakter setine(iso) ayarlamak için, <META Equiv= content-type CONTENT= text/html ; charset=iso-8859-9 >, Windows Türkçe için <META Equiv= content-type CONTENT= text/html ; charset=windows-1254 > kodları yazılmalıdır. b) Browser Başlık Tanımlaması Browserin en üst (caption) bölümüne bir metin çıkartmak için <title> Browserin üst bölümüne çıkartılacak metin </title> tanımlaması yapılabilir (Şekil-1).
4 Şekil-1 Browser Başlık Alanı c) Arama Motorları İçin Meta Tanımlamaları Arama motorlarının (Google, Yahoo,.) yaptığınız web sitenizi bulabilmesi için aşağıdaki meta taglarının tanımlanması gerekmektedir. <META NAME= Keywords CONTENT= Uluborlu, Isparta, myo,.. > böylece bu tanımlanan anahtar kelimeler (Uluborlu,Isparta,myo,..), arama sitelerinden aratıldığında sitemiz bulunabilecektir. Webmaster ın tanımlanması için, <META NAME= Author CONTENT= Webmaster ın Adı Soyadı > yazılmalıdır. Site içerik bilgisi için ise, <META NAME= Description CONTENT= Site İçeriğine ilişkin ifadeler > şeklinde tanımlanmalıdır. d) Standart Dışı İşlemler İçin Stil Tanımlamaları Bazı tagların normal davranışını (akışını) değiştirmek için stil tanımlamaları yapılabilir. Örneğin link tagı a normalde linklendirilmiş kelimenin altını çizer. Bunu, ilk etapta altı çizgisiz olsun, mouse üzerine gelince alt çizgi çıksın şeklinde düzenleyebiliriz. <style> a{text-decoration:none; a:hover{text-decoration:underline; <style> bütün bu tanımlamalar <head </head> arasında yapılmalıdır. <html> <head> <title> Uluborlu Selahattin Karasoy Meslek Yüksekokulu</title> <meta equiv= content-type content= text/html; charset=iso-8859-9 > <meta name= keywords content= Uluborlu, Isparta, myo, uskmyo, sdü, kiraz > <meta name= author content= > <meta name= description content= Her türlü program arşivi, mp3 köşesi, mizah, e- eğitim >
5 <style> a{text-decoration:none; a:hover{text-decoration:underline; body{background-attachment:fixed; </style> </head> <body> </body> </html>
6 1.2.2. <BODY> </BODY> ARASI Şimdiye kadar olan bölümlerde ön tanımlamalar yapılmaktadır. Esas web sayfamızın dizayn kısmı burada başlamaktadır. Zaten body kelimesi de gövde esas anlamındadır. <body> tagını bu şekilde kullandığımızda sayfamızın zemin (fon) rengi beyaz kabul edilmektedir. Zeminini renklendirmek için <body bgcolor= renk adı veya kodu > şeklinde yazmamız gerekmektedir. Örneğin zemini kırmızıya boyamak için kod, <body bgcolor= red > veya <body bgcolor= #ff0000 > şeklinde olmalıdır. Renk kodlarının mantığı RGB (Red Green Blue) formatındadır. Renkler kırmızı, yeşil ve mavi karıştırılarak elde edilmektedir. Her ana renk için 0-255 arası bir değer kullanılabilir. kkyymm şeklinde altı basamaklı yer ayrıldığından hexodecimal (16 lık sistem) yazılmalıdır. Mesela Turquaz rengi için 40e0d0 yazılmalıdır (Şekil-2). Şekil-2 Turquaz Renginin Hex Kodu Fon a renk değil de grafik koymak içinse <body background= grafik dosyasının yeri adı ve uzantısı > şeklinde yazmak gerekir. Örneğin, <body background= c:\windows\kur.bmp > gibi. Grafiğin zeminde çakılı kalması için <body {background-attachment:fixed; background= c:\windows\kur.bmp > olarak düzenlenmelidir.
7 1.2.2.1 Linkler (<a>) Sayfalar arası veya internet adresleri arasında kullanılan bağlantılardır. Linkleri iki grupta inceleyebiliriz. 1. Sayfa içi linklendirme 2. Sayfalar arası veya internet adreslerine linklendirme 1. Sayfa içi linklendirme Aynı web sayfası içerisinde bir noktadan başka bir noktaya harekettir. Tek ekrana sığmayan uzun boylu web sayfalarında kullanılır. Gidilecek yer tanımlaması için <a name= yer adı > şeklinde tanımlama yapılır. Tanımlanan yere götüren linkin koduna ise, <a href= #yer adı >Link ifadesi </a> şeklinde tanımlama yapılır. Burada # karakterinin yazılması önemlidir. Bu karakter, gidilecek hedefin başka bir web sayfası olmadığını, sayfa içerisinde bir yer adı olduğunu anlatır. 2. Sayfalar arası veya internet adreslerine linklendirme Linke tıklandığında başka bir web sayfası çağrılacaksa, kod <a href= çağrılacak web sayfası > Link ifadesi </a> şeklinde olacaktır. Eğer çağrılacak web sayfası internet üzerinde bir adres ise, kod <a href= http://adres > Link ifadesi </a> şeklinde olacaktır.
8 Linklerde target (hedef konumu) kullanımı Link tıklandığında, hedefin yeni browser penceresinde, bir çerçevede (frame) yada bir iç çerçevede (iframe) açtırılabilmesi için kodda target kullanarak konum belirtmek gerekir. Konum belirtmek için kullanılabilecek dört standart deyim vardır. Bunlar _blank, _parent, _self ve _top dır. _blank, hedefin yeni browser penceresinde açtırılması için, _parent, çerçeve(frame) yada iç çerçeve (iframe) de ana sayfada açtırmak için, _self, bulunulan çerçeve (frame) yada iç çerçevede (iframe) açtırmak için, _top, Frame li sayfalarda, hedefi aynı browser ekranında frame den çıkarak açtırır Çerçeve (frame) yada iç çerçeve (iframe) kullanan sayfalarda ise, açtırılacak frame/iframe ismi target a yazılmalıdır. Örneğin, hedef orta isimli iframe de açılacaksa kod, <a href= açılacak sayfa target= orta >Link </a> şeklinde olmalıdır. Linklerle ile ilgili bazı uygulamalar Link üzerine gelinince arka plan rengi değişsin; <a href="#" onmouseover=document.bgcolor="#345678">link1</a> <a href="#" onmouseover=document.bgcolor="#9012ac">link2</a> <a href="#" onmouseover=document.bgcolor="#13dc67">link3</a> Linklere title (açıklama etiketi) atanması <a href="#" title= Açıklama Metni1 Açıklama Metni2>Link</a> ( 
) yeni satır başı için kullanılmıştır.
9 Tablolar (<table>) ÖRNEK-1: <table border=1> <tr onmouseover=bgcolor="white" onmouseout=bgcolor="333366"><td>merhaba</td></tr> </table> ÖRNEK-2: <TR onmouseover="this.bgcolor='yellow'" onmouseout="this.bgcolor='white'"> Statusbar da sabit mesaj <body onload= window.defaultstatus= mesajınız > Resimlere transparanlık vermek (<img>) <img src= resim.jpg style= fitler:alpha(opacity=70) > <IMG style="filter:alpha(opacity=50,style=0)" src="resim buraya"> efect 2. <IMG style="filter:alpha(opacity=80,style=1)" src="resim buraya"> <marquee> transparanlık uygulamak <marquee style="filter:alpha(opacity=100,finishopacity=0,style=1,startx=200,starty=0,finishx=0,f inishy=0) >
10 1.3. HTML de FORM KULLANIMI Web Sayfalarında, ziyaretçiden bilgi alınması gereken durumlarda formlar kullanılır.<form> ve </form> tagları arasında bilgi giriş dizaynı yapılır. <form> tagı içerisinde method ve action tanımlamaları yapılmalıdır. method ile, hazırlanan formdan verilerin hedef sayfaya ne şekilde gönderileceği tanımlanır. Buraya Get yada Post yazılabilir. Get metodu, verileri browserin adres satırında tek bir string de toplayarak açıkta gönderir (yani girilen bilgiler adres satırında görülebilir!!), Post metodu ise verileri adres satırında görüntülemeden hedef sayfaya gönderir. Gizlilik gerektiren bilgi alımlarında (şifre gibi) Post metodunun kullanılması daha doğru olacaktır. Şekil-3 Form Görüntüsü
11 1.4. DUYURU PANOSU OLUŞTURMAK 3. Photo impact programı ile 250x200 ebatlarında yeni bir sayfa açılır. Şekil-4 deki gibi bir tasarım hazırlanır. Şekil 4 Duyuru Panosu 2. Slice aracı ile Şekil-5 deki gibi, tasarım bölüntülere ayrılır ve File menüsündeki Save For Web seçeneği ile sayfa HTML olarak kaydedilir. Photo impact, kaydedilen ortama images klasörü oluşturur, kesilen parçaları bu klasöre depolar. Şekil 5 Slice Aracı İle Kesim 3. Sayfanın kaynak kodları açılır. Duyurularımızın kayarak geçeceği beyaz çerçevenin kodlardaki yeri bulunarak; <TD WIDTH=250 HEIGHT=200><Marquee height=200 direction= up onmouseover= this.stop() onmouseout= this.start() scrolldelay=100 scrollamount=2> Duyuru1 <br> Duyuru2 <br> Duyuru3 </marquee> </TD> olacak şekilde düzenlenir. Eğer duyurular linklendirilecekse, duyuru metinleri <a href=#> Duyuru1 </a> gibi <a href> </a> blokları arasına alınır.
12 1.5. HTML İLE VISUAL BASIC SCRIPT KULLANIMI HTML kodlarımız içerisinde Visual Basic Script (vbscript) veya Java Script (javascript) kullanabiliriz. <html> <body> <script language= vbscript/javascript>... </script> </body> </html> Örnek: Şekil-6 daki gibi bir form a veriler girilip Kaydet butonuna basılınca Kaydınız İşleme Alınmıştır. Teşekkür ederiz mesajını vbscript ile yazdıralım. <html> <body> <form name="uye" method="post" action=""> <pre> Şekil 6 Kayıt İşlemi Adınız<input type="text" size=20 name="ad"> E-mail <input type="text" size=20 name="email"> Şifre <input type="password" size=20 name="sifre1"> Şifre Tekrar <input type="password" size=20 name="sifre2"> Mesaj <textarea rows=5 cols=17 name="mesaj"></textarea> <input type="submit" value="kaydet" name="kaydetbutonu"> <input type="reset" value="temizle"> </form> <script language="vbscript" event="onclick" for="kaydetbutonu"> msgbox "Kaydınız İşleme Alınmıştır.Teşekkür Ederiz...",48 </script> </body> </html> Örnek: Form a girilen verilerin doğruluk kontrolünün yapılması <html> <body> <form name="uye" method="post" action=""> <pre> Adınız <input type="text" size=20 name="ad"> E-mail <input type="text" size=20 name="email"> Şifre <input type="password" size=20 name="sifre1">
13 Şifre Tekrar <input type="password" size=20 name="sifre2"> Mesaj <textarea rows=5 cols=17 name="mesaj"></textarea> <input type="submit" value="kaydet" name="kaydetbutonu"> <input type="reset" value="temizle"> </form> <script language="vbscript" EVENT="onclick" FOR="Kaydet"> hata=0 if form1.uyead.value="" then msgbox "Lütfen Üye adi belirleyiniz!" hata=1 end if if form1.sifre1.value="" then msgbox "Lütfen Sifre1'i belirleyiniz!" hata=1 end if if form1.sifre2.value="" then msgbox "Lütfen Sifre2' belirleyiniz!" hata=1 end if if form1.email.value="" then msgbox "Lütfen E-mail adresinizi belirleyiniz!" hata=1 end if Şekil 7 Doğruluk Kontrolü if form1.sifre1.value>< form1.sifre2.value then msgbox "Sifrelerinizi Kontrol Ediniz" hata=1 end if if instr(form1.email.value,"@") =0 then msgbox "Lütfen email adresinizi kontrol ediniz" hata=1 end if if instr(form1.email.value,".com") =0 and instr(form1.email.value,".net") =0 and instr(form1.email.value,".org") =0 and instr(form1.email.value,".gov") =0 and instr(form1.email.value,".mil") =0 then msgbox "E-mail adresinizi kontrol ediniz!(.com,.net..)" hata=1 end if if hata=0 then form1.submit </script></body> </html> Örnek: Web sitemizin ziyaret saatine göre gece ve gündüzü algılamasını sağlayalım. <html>
14 <body> <script language="vbscript"> saat=hour(now) if saat>6 and saat<19 then document.bgcolor="white" document.fgcolor="black" document.write "İyi Günler. Web Siteme Hoşgeldiniz" else document.bgcolor="black" document.fgcolor="white" document.write "İyi Akşamlar. Web Siteme Hoşgeldiniz" end if </script> </body> </html> Örnek: Vize-Final-Ortalama hesabı <html> <body> <pre> Şekil 8 Not Hesap <form name="hesap_form" method="post" action=""> Vize <input type="text" size=5 name="vize"> Final <input type="text" size=5 name="final"> <input type="button" name="hesapla" value="hesapla"> <hr> Ortalama<input type="text" size=5 name="ort"> Durum<input type="text" size="10" name="durum"> </form> <script language="vbscript" EVENT="onclick" FOR="hesapla"> ortalama=(document.hesap_form.vize.value) * 0.4 + 0.6 * (document.hesap_form.final.value) document.hesap_form.ort.value=ortalama if ortalama<69.5 then document.hesap_form.durum.value="kaldiniz" else document.hesap_form.durum.value="geçtiniz" end if </script> </body> </html>
15 HTML İLE JAVASCRIPT KULLANIMI JavaScript ile açılır kapanır menü yapımı için, ana seçenekler ve alt seçenekler aşağıdaki şekilde hazırlanır. Alt seçenekler div tagı içerisine alınır. Alt seçeneklerin ilk etapta kapalı olmaları için, Div taglarına style="display:none;" ifadesi ile stil tanımı yapılır. <div id= 1 style= display:none; > Ana seçeneklerin önüne yerleştirilen grafikler linklendirilerek, javascript çağırılır. <a href="javascript:goster(1)"><img src="images/ana_simge.png" width="15" height="15" border="0" /></a> goster isimli javascript fonksiyonuna div taglarının id si parametre olarak verilmektedir. Böylece hangi menünün alt seçeneklerinin açılacağı veya açıksa kapatılacağı tanımlanmış olur. Fonksiyonun kodları ise şu şekilde olacaktır; <head> <script language="javascript" type="text/jscript"> function goster(id) { menu=document.getelementbyid(id); if(menu.style.display = ="block") menu.style.display = "none";
16 else menu.style.display="block"; </script> </head> Fonksiyon içerisinde getelementbyid methodu ile, fonksiyona gönderilen id değerinin, web sayfasındaki bu id ye sahip tag olarak algılanması sağlanmaktadır. menu=document.getelementbyid(id); alt menülerin açıksa kapatılması, kapalıysa açılması için if(menu.style.display = ="block") menu.style.display = "none"; else menu.style.display="block"; kodları kullanılır. menu.style.display = "none"; ifadesi ile menu divinin kapatılması, menu.style.display = "block"; ifadesi ile de gösterilmesi sağlanır.
17 1.6. WEB DE MULTİMEDYA (SES,VİDEO) İŞLEMLERİ Web ortamında multimedya işlemleri için kullanılan iki tag bulunmaktadır. Bunlar 1. <img dynsrc=.. > ve 2. <embed src= > taglarıdır. Web sayfamızın arka planında bir fon müziği çalsın istiyorsak; <embed src= fon.mp3 autostart= true loop= true > şeklinde kod yazılmalıdır. Buradaki autostart özelliği müziğin otomatik olarak çalmaya başlamasını sağlamak için ve loop işlemi de müzik bittiğinde otomatik olarak tekrar başlatmak için konulmuştur. Embed tagının kontrolorü (play,pause,stop,ileri,geri,ses seviye butonları) vardır. Tagın çalışırken görünmemesi için hidden= true eklenebilir. Embed tagıyla Flash swf dosyalarıda çalıştırılabilir. Şekil 9 <embed> tagı
18 1.7. STİLLER ve CSS DOSYALARI (CSS-Cascading Style Sheets- Kategorize edilmiş Stil Şablonları) Stiller, en basit tanımıyla tagların standart davranışlarını değiştirmektir. Şekil 10 Stiller Şekil-10 daki gibi kategorize edilebilirler. Şimdi bunları detaylıca inceleyelim. 1.7.1. DAHİLİ STİLLER a) Yerel (local) Stiller: Yerel stiller bir html tagı için özel olarak kullanılırlar. <h1 style= font-size:20pt; color:blue; >Web Dersleri</h1> Yukarıda <h1> tagı için özel olarak bir stil tanımlaması yapılmıştır. Bu stilde, font büyüklüğü 20pt. ve yazı rengi mavi olarak ayarlanmıştır. Görüldüğü gibi, yerel stiller o tagın içerisinde style= ifadesi ile tanımlanmaktadır. Doğal olarak sadece o tagın özelliğini değiştirir. b) Genel (global) Stiller: Genel stiller yerel stillerden farklı olarak, tanımlandıkları tagın o sayfada her kullanılışında etkili olurlar. Tanımlama yerleri de <head> </head> blokları arasında <style> </style> blokları açılarak yazılır. Şimdi yukarıda yerel olarak tanımlaması yapılan <h1> tagını genel olarak tanımlayalım. <html> <head> <style >
19 h1{font-size:20pt; color=red; </style> </head> <body> <h1> Web Dersleri</h1> <h1> Bu da 2. Başlık </h1> </body> </html> Görüldüğü gibi, genel stiller bir sefer tanımlanmakta ve sayfa içerisinde o tag her kullanıldığında stil özelliği çalışmaktadır. 1.7.2. HARİCİ STİLLER Bu tür stil kullanımında stiller, uzantısı css olan ayrı bir dosyaya yazılır. Sonra, bu stilleri kullanacak her sayfanın <head> </head> bloğu arasına <Link href="dosya_ismi.css rel="stylesheet" type="text/css"> kodu yazılarak stiller çağırılır. Örnek olarak deneme.css dosyasını oluşturalım. deneme.css içerisindeki kodlar; Şimdi, deneme.css stil şablonunu kullanacak olan web sayfasında bu dosyayı çağıralım. <html> <head> <Link href="deneme.css rel="stylesheet" type="text/css"> </head> <body> <a href= # > Bu bir Linktir </a> </body> </html> Artık bu web sayfasındaki linkler, deneme.css dosyasındaki stil tanımlamalarına göre davranacaktır.
20 1.8. <FRAMESET> TAGI İLE BÖLÜNTÜLÜ SAYFA TASARIMI <FRAMESET> Tagı, birden fazla web sayfasını, tek bir sayfada toplamak için kullanılır. Sayfa, yatay (Rows), düşey (Cols) ve karışık (hem yatay hem de düşey) şekilde bölünebilir. 1.8.1. Düşey Bölüntü Oluşturmak (Cols) Şekil-11 de, a.htm ve b.htm sayfaları düşey bölüntülü index.htm sayfasında birleştirilmiştir. index.htm sayfasının kodu şu şekilde olacaktır; <FRAMESET COLS= 100,400 > <FRAME NAME= sol SRC= a.htm > <FRAME NAME= sag SRC= b.htm > </FRAMESET> Buradaki 100 ve 400 değerleri piksel cinsinden sayfaların genişlik ölçüleridir. Ziyaretçinin, bölüntü çizgilerini genişletip daraltamamasını sağlamak için kod içerisine noresize ifadesi eklenir. O zaman kod aşağıdaki gibi olacaktır; <FRAMESET COLS= 100,400 > <FRAME NAME= sol SRC= a.htm noresize> <FRAME NAME= sag SRC= b.htm noresize> </FRAMESET> Şekil 11 Düşey Bölüntü Ara bölüntü çizgisinin tamamen ortadan kaldırılması için ise frameborder= no ve framespacing= 0 kodları eklenmelidir. Kodun son hali aşağıdaki gibi olacaktır; <FRAMESET frameborder= no framespacing= 0 COLS= 100,400 > <FRAME NAME= sol SRC= a.htm noresize> <FRAME NAME= sag SRC= b.htm noresize> </FRAMESET> 1.8.2. Yatay Bölüntü Oluşturmak (Rows) Düşey bölüntüden tek farkı Cols yerine Rows yazılmasıdır. O halde kod aşağıdaki gibi olacaktır. <FRAMESET frameborder= no framespacing= 0 ROWS= 100,400 > <FRAME NAME= sol SRC= a.htm noresize> <FRAME NAME= sag SRC= b.htm noresize> </FRAMESET> Şekil-12 Yatay Bölüntü
21 1.8.3. Karışık (hem düşey hem de yatay) Bölüntü Oluşturmak Şekil 13 Karışık Bölüntü Bu durumda sayfayı tam bölen taraftan başlanır. Kod aşağıdaki gibi olacaktır; <FRAMESET COLS= 100,* > <FRAME NAME= sol SRC= c.htm > <FRAMESET ROWS= 100,* > <FRAME NAME= ust SRC= a.htm > <FRAME NAME= orta SRC= b.htm > </FRAMESET> </FRAMESET> Burada kullanılan * karakteri, ekran çözünürlüğünden geri kalanı kullan anlamındadır. Bölüntü ölçüleri için pikselden başka % şeklinde ölçülendirme de kullanılabilir. % li kullanılırsa kod aşağıdaki gibi olacaktır; <FRAMESET COLS= 20%, * > <FRAME NAME= sol SRC= c.htm > <FRAMESET ROWS= 20%, * > <FRAME NAME= ust SRC= a.htm > <FRAME NAME= orta SRC= b.htm > </FRAMESET> </FRAMESET>
22 Dreamweaver programı ile Frameset oluşturulacaksa Şekil-14 deki gibi, File New Framesets menüsünden hazır bölüntüler seçilebilir. Şekil-14 Dreamweaver İle Frameset Oluşturmak
23 2. FLASH ANİMASYONLARI Flash, vektör tabanlı grafik ve animasyon hazırlama programıdır. Bu program ile Şekil-15 de gösterilen formatlarda grafik ve animasyon oluşturulabilir. Web siteleri için bileşen hazırlanabilir. Ya da başlı başına web sitesinin tamamı flash ile hazırlanabilir. Flash animasyonları içerisinde kod da kullanılabilmesi (action script) programı oldukça güçlü kılmaktadır. Şekil 15 Flash Formatları 2.1. Bir Movie Clip Nesnesinin Kod ile Hareketlendirilmesi Örnekte, iki layer kullanılarak, bulut movie clip inin kodla manzara üzerinde hareketlendirilmesi sağlanmıştır. Bulut movie clip inin Actions ına şu kodlar yazılmalıdır; Şekil-16 Katmanlar (Layer) onclipevent(enterframe) { _x+=10; Bu kod ile, flash çalıştığı sürece (onclipevent(enterframe) bulut nesnesi, x ekseninde (_x) sağa doğru 10 ar artarak ilerler. Bu şekilde nesne sürekli ilerleyeceği için, sahneden çıktıktan sonra geri dönüş sağlanmalıdır. Geri dönüş için, sahne dışına bulut nesnesinin doğrultusuna bir engel nesnesi (movie clip i)
24 çizilir. Örneğimizde bu nesne bir dikdörtgendir ve adı duvar olarak verilmiştir. Bulut nesnesi duvara çarptıktan sonra geri dönüşün sağlanabilmesi için hittest komutundan yararlanılacaktır. Bu komut iki nesnenin çarpışmasını yakalamaktadır. Kodumuzun yeni hali şu şekilde olacaktır; onclipevent(enterframe) { _x+=10; if(hittest(_root.duvar)) _x=-100; 2.2. Maskeleme (Mask) Kullanımı Maskeleme iki katman(layer) arasında oluşmaktadır. Üstteki katman maskeleyen, alttaki katman ise maskelenen nesnedir. Maskeleyen katmanda sağ klik yapılarak mask seçilir. Maske nesnesine (create motion tween) ile maskelenmesini istediğimiz nesne üzerinden geçecek şekilde düzgün doğrusal hareket verilir. Örnekte, çizgiler üzerinde beyaz ışıklı bir alanın yürütülmesi animasyonu mask ile yapılmıştır. Şekil-17 Ekran Görüntüsü Şekil-18 Mask İşlemi
25 Şekil-19 Katmanlar Şekil-20 Ekran Görüntüsü Son Hali 2.3. Web Menü Yapımı Flash ile web sitelerimizde kullanabileceğimiz her türlü bileşeni yapmak mümkündür. Basit bir menü tasarımını şu şekilde gerçekleştirebiliriz; Menü çalıştırıldığında ilk etapta kapalı hali ekrana gelecektir (Şekil-21). Üçgen butona tıklandığında menü sağa doru açılarak seçenekler görüntülenecektir (Şekil-22). Tasarımın katmanları (layer) ise Şekil-23 de gösterilmiştir. Şekil-21 Menü Kapalı
26 Şekil 23 Katmanlar Kodlar ise şu şekilde olacaktır; Fon katmanının actions ına stop( );, layer4 ün 20. Zamanına stop( );, sağa butonun kodu; On(press) { gotoandplay(5); Sola butonun kodu; On(press) { gotoandplay(1); Resimler, Mp3, Videolar ve Linkler şeklinde butonlar oluşturulup, bunların actions ına on(pres) { geturl( resimler.htm, sag ); Şeklinde kod yazılmalıdır. Not: Flash linklerinin ilgili frame de açılmama problemi ile karşılaşırsanız http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04 a.html internet adresinden çalıştığınız swf klasörünü eklemeniz gerekmektedir.
27 2.4. Harici Dosya Kullanımı Bu uygulamada, harici bir dosyada tutulan fatura bedelinin flash içerisine okutularak, kullanıcının ödeme yaptığı tutarla karşılaştırılıp sonuç raporu (Eksik, Tam veya Fazla Ödeme) verilmesi sağlanmaktadır. Uygulama ara yüzü PhotoImpact programıyla Jpeg dosya formatında hazırlanmış ve Flash içerisindeki arka_plan katmanına import edilmiştir (Şekil- 24). Tasarımın katmanları (layer) ise Şekil-25 de gösterilmiştir. Şekil-24 Arayüz Şekil-25 Katmanlar
28 Kodlar ise şu şekilde olacaktır; Kod katmanının actions ına dosya=new LoadVars(); dosya.load("elektrik.txt"); dosya.onload=function(){ tutar_nesnesi.text=dosya.bedel; Ödeme Yap butonunun kodu; on(press) { tutar=number(tutar_nesnesi.text); odenen=number(odenen_nesnesi.text); fark=number(odenen-tutar); if(fark==0) {mesaj_nesnesi.text="tam Ödeme Yaptınız.Teşekkürler."; damga_klip.gotoandstop("tam"); else if(fark>0) {mesaj_nesnesi.text=fark + " YTL Fazla Ödeme Yaptınız.Emin misiniz?" damga_klip.gotoandstop("fazla"); else {mesaj_nesnesi.text=fark + " YTL Eksik Ödeme Yaptınız!!!!" damga_klip.gotoandstop("eksik"); damga_klip isimli MovieClip bilgileri ise şöyledir; Şekil-26 damga_klip Katmanları Damgalar katmanının tasarımları
29 BEKLE katmanında ise kod olarak sadece stop(); kodu bulunmaktadır.
30 Div Kullanımı (Php ile) Örnek-1: Div yapısı aşağıdaki gibi olan web sayfasını oluşturalım. Sayfanın div stil kodları şu şekildedir #ana_div { background-color: #333; height: 600px; width: 800px; margin-right: auto; margin-left: auto; padding: 10px; #banner { background-color: #CFC; height: 150px; width: 780px; margin-right: auto; margin-left: auto; body { margin-top: 0px; background-image: url(images/fon_urun.jpg);
31 #alt { background-color: #333; height: 425px; width: 780px; margin-right: auto; margin-left: auto; margin-top: 5px; #firsat { background-color: #4A0F00; height: 200px; width: 200px; background-image: url(images/urun_firsat.png); background-repeat: no-repeat; #ana_div #alt #sol #firsat #firsat_icerik { height: 141px; width: 166px; padding-left: 20px; padding-top: 44px; #sol { float: left; height: 425px; width: 200px; background-color: #F30; #sag { background-color: #FFB9A8; float: right; height: 425px; width: 575px; Günün Fırsatı bölümü için FireWorks programında yandaki grafik hazırlanır ve urun_firsat.png olarak sitenin images klasörüne kaydedilir. background-image: url(images/urun_firsat.png); Stil kodu ile firsat divinin arkaplanı olarak belirlenir.
32 Sayfanın internet explorerdaki görüntüsü İndex.php ana sayfasındaki firsat divi içerisine yerleştirilen firsat_icerik divine gunun_firsati.php sayfası çağırılır (include edilir). <div id="firsat"> <div id="firsat_icerik"><?php include("gunun_firsati.php");?></div> </div> Günün fırsatı bölümü içerisindeki Ürün resmi, ürün adı ve fiyat bilgileri, Php yardımıyla firsat.txt dosyasından günün tarihine göre getirilir.
33 Firsat.txt dosyasının yapısı aşağıdaki gibidir. gunun_firsati.php sayfasının kodları: <?php $dosya="firsat/firsat.txt"; $dd=fopen($dosya,'r'); $bugun=date("j"); while(!feof($dd)) { $veri=fgets($dd,1024); $dizi=explode(":",$veri); if($dizi[0]==$bugun) { echo " &n bsp; <img src='firsat/$bugun.jpg'><br>"; echo $dizi[1]; echo " <font class='yazi' >".$dizi[2]. "</font> TL.<br>"; echo " &n bsp; <font class='yazi2' >".$dizi[3]. " TL."; fclose($dd);?>
34 Div Kullanımı (Php ile) Örnek-2: Goldaş kuyumculuk web sitesi Günün Fırsatı bölümü Php kodları: <?php $gun=date("j"); echo "<center><a href='satis.php?id=$gun'><img src='firsat/$gun.jpg'></a></center>"; $dosya=fopen("firsat/firsat.txt","r"); while(!feof($dosya)) { $veri=fgets($dosya,1024); $dizi=explode(":",$veri); if($dizi[0]==$gun) { echo $dizi[1]."<br>"; echo "<font class='cizik'>".$dizi[2]." TL</font><br><br>"; echo "<font class='fiyat'><center>".$dizi[3]. " TL</center></font>";?>
35 En çok satılan Popüler Ürün Php kodları: <?php //en çok satılan ürün $dosya=fopen("firsat/firsat.txt","r"); $enbuyuk=1; while(!feof($dosya)) { $veri=fgets($dosya,1024); $dizi=explode(":",$veri); $dizi[4]=(integer) $dizi[4]; if($enbuyuk<$dizi[4]) { $enbuyuk=$dizi[4]; $coksatan=$veri; fclose($dosya); $dizi=explode(":",$coksatan); echo "<center><img src='firsat/$dizi[0].jpg'></center><br>"; echo $dizi[1];?> Firsat.txt dosyasının içeriği: 1:HP DeskJet 2400 Series Yazıcı:280:140:0 2:SONY HDMI Kamera:2000:1000:0 3:Nokia N100 Cep Telefonu:200:100:0 4:3.5" HD Disket:10:5:0 5:Seagate 520 GB HDD :260:130:0 6:Acer Aspava PC:1120:560:0 7:JVC Mp3 Player:480:240:10 8:Dec Telefon + 17" LCD Monitör:680:340:0 9:Mustek Scanner:80:40:0 10:HP LaserJet 1100 Series Yazıcı:440:170:0 11:Seagate 520 GB HDD :260:130:0 12:Acer Aspava PC:1120:560:0 13:JVC Mp3 Player:480:240:0 14:Dec Telefon + 17" LCD Monitör:680:340:0 15:Mustek Scanner:80:40:5 16:HP LaserJet 1100 Series Yazıcı:340:170:0 17:HP DeskJet 2400 Series Yazıcı:280:140:0 18:SONY HDMI Kamera:1000:500:0 19:Nokia N100 Cep Telefonu:400:200:0 20:3.5" HD Disket:15:5:0 21:HP DeskJet 2400 Series Yazıcı:280:140:2
36 22:SONY HDMI Kamera:2000:1000:0 23:Nokia N100 Cep Telefonu:200:100:0 24:3.5" HD Disket:10:5:0 25:Seagate 520 GB HDD :260:130:0 26:Acer Aspava PC:1120:560:0 27:JVC Mp3 Player:480:240:0 28:Dec Telefon + 17" LCD Monitör:640:340:0 29:Mustek Scanner:80:40:0 30:HP LaserJet 1100 Series Yazıcı:340:170:0 31:Seagate 520 GB HDD :260:130:0
37 Ürün Satış (satis.php) Php Kodları: Günün firsatı bölümündeki ürün resmine tıklandığında, o ürünün dosyadaki satış adedini 1 artıracak şekilde kodlar düzenlenir. Bunun için, satılacak ürün hariç diğer ürün bilgileri yedek dosyaya (firsat_yedek.txt) yazdırılır. Satılacak ürün ise, dosyadaki satış rakamına 1 ilave edilerek yedek dosyaya yazdırılır. 1 ilave için, $satir[4]=(integer) $satir[4] ; $satir[4]++; kodları kullanılır. satis.php sayfasının toplam kodları aşağıdaki gibi olacaktır. <?php $dosya="firsat/firsat.txt"; $dosya2="firsat/firsat_yedek.txt"; $dd=fopen($dosya,'r'); $dd2=fopen($dosya2,'w'); while(!feof($dd)) { $veri=fgets($dd,1024); $satir=explode(":",$veri); if($satir[0]==$urun_no) { $satir[4]=(integer) $satir[4] ; $satir[4]++; $tum_bilgi=$satir[0].":".$satir[1].":".$satir[2].":".$satir[3].":".$satir[4]; fwrite($dd2,$tum_bilgi); // satılan ürün bilgisini güncelleyip yazdırıyoruz else fwrite($dd2,$veri); fclose($dd); fclose($dd2); unlink("firsat/firsat.txt"); //firsat.txt dosyasını siler! Yedeğini oluşturduk rename("firsat/firsat_yedek.txt","firsat/firsat.txt"); // yedek dosyanın ismini firsat.txt yapıyoruz include("index2.php");?>