HOÞGELDÝNÝZ

Flash-Mx`den Flash-Mx 2004 `e geçiþ çok sancýlý olmuþtu. AS1 terkedilip AS2`ye geçildiðinde kodlara alýþmak çok zaman almýþ hatta birçok kullanýcý Flash-MX versiyonunu uzunca bir süre kullanmaya devam etmiþti.

Ama Flash 8 versiyonunu incelediðimizde bu tür sýkýntý yaþamayacaðýnýzý söyleyebilirim. Arayüzde düzenlemeler yapýlmýþ,resim ve video çalýþmalarýna ciddi bir destek gelmiþ ve herzaman sýkýntý duyulan action****** panelinde bazý kod eklentileri ve alýþkanlýðýmýzý fazla etkilemeyen bir sýnýflama dýþýnda çok fazla deðiþiklik yapýlmamýþtýr.

Kod deðiþikliklerine daha sonra deðineceðiz. Burada arayüz deðiþiklikleri yeni yapýlan eklentilerden bahsedilecektir. Önce Macromedia`nýn sayfasýnda yeni eklentilere özetleyerek bakacak olursak tanýmlanan deðiþiklikler þöyledir:

Filtreler :

Drop shadow, blur, glow, bevel, gradient bevel, ve color adjust gibi filtrelerle deðiþik tasarýmlar oluþturabilirsiniz . Örneðimizde bu filtrelerin iþlevini gözleyebilirsiniz.

Blend modu

Photoshop`tan hatýrlayacaðýnýz blend modu ile çizim ve semboller üzerine etkili deðiþik görüntüler elde edebilirsiniz. Yukarýdaki örnekteki menüden bu modlarýn nasýl fonksiyon gördüðünü inceleyebilirsiniz.

FlashType—yüksek kalitede font oluþturma motoru

Önceki versiyonlarda her zaman sorun olan küçük ebadlý fontlarda temiz yüksek kalitede sonuçlar elde edilir. Çalýþma türünüze göre birden fazla seçenek sunulur.Ayrýca font optimizasyonu için özelleþtirebileceðiniz anti-alising eklentisi de yapýlmýþtýr.Buradan font kalitesini arzu ettiðiniz þekilde planlayabilirsiniz.

Bitmap caching

Objeler bir Bitmap olarak ön belleðe alýnmasýna raðmen vectorel veriler korunur ve tekrar bir vektor oluþum olarak geri alýnabilirler. Bu yöntem flash`ta sýk þikayet konusu olan hýz problemini ortadan kaldýrýr. Yukarýdaki örnekte alt kýsma eklenen true ve false metinlerine týklayarak aradaki hýz farkýný görebilirsiniz.

Dreamweaver bir WYSIWYG*(What You See Is What You Get) web sayfasý oluþturma programý olduðu için oluþturacaðýmýz sayfalarýn HTML kodlarýný görmeden tasarlayabiliriz. Tabi bir yere kadar :)

Görsel düzenleyicide yapamayacaðýmýz iþler için ya da HTML kodlarýný kod yazarak düzenlememiz için Dreamweaver'ýn Code Inspector(Kod Denetçisi)'ý vardýr. Kod Denetçisi'ne ulaþabilmek için Window>>Code Inspector menüsünü kullanýrýz.

Code Inspector'a bu yolla ulaþtýðýmýzda Document pencerisi haricinde Code Inspector isimli bir pencere açýlmýs olur. Fakat DreamWeaver MX, bize HTML kodlarýný Document penceresi içerisinde görüntüleme imkaný verir. Document penceresinin sol üstünde asaðýdaki gibi 3 tuþ vardýr.

Bunlardan ilki pencerede sadece kodlarýn görünmesini, ikincisi pencereyi ikiye bölerek hem kodlarýn hem görsel düzenleyicinin görünmesini, üçüncüsü ise sadece görsel düzenleyicinin görünmesini saðlar.

Kod Denetçisine ait özellikleri View>>Code View Options menüsü yardýmýyla ya da Kod Denetçisi penceresinde yer alan View Options ( ) düðmesi ile ulaþýlan menü ile düzenleriz. View Options'ta su seçenekler vardýr.

Word Wrap: Sözcük kaydýrma, kod satýrlarýnýn uzumasý halinde satýrýn devamýnýn alt satirdan devam etmesini saðlar.

Line Numbers: Satýr numaralarý, satýrlarýn baþýnda satýr numaralarýnýn gözükmesini saðlar.

Highlight Invalid HTML: Yanlýþ yazýlmýþ HTML kodlarýnýn etrafinda sarý renkli bir kutu olusmasýný saðlar.

Syntax Coloring: HTML kodlarýnýn diðer kod ve yazýlardan farklý renkte olmasýný saðlar. Böylece HTML kodlarý ile sayfanýzda yer alan metin ya da ******leri birbirinden ayýrmanýz daha kolay olur.

Auto Indent: Otomatik girintileme, görsel düzenleyicide eklenen nesnelere ait kodlarýn kendiliðinden girintili olarak yazýlmasýný saðlar. Örneðin bir tablo eklediðinizde bu seçenek iþaretli deðilse tabloya ait bütün kodlar sola yaslý olur. Eðer bu seçenek iþaretliyse aþaðýdaki resimdeki gibi bir girintileme yapýlýr. Bu, sayfalara ait kodlar incelenirken büyük kolaylýk saðlar.

Dreamweaver derslerinin devamýnda uzun süre daha bu pencereyi kullanmayacaðýz. Yine de yerinin bilinmesinde fayda var ;)

*Ne Görürsen Onu Alýrsýn þeklinde Türkçeye çevirilebilir.

Dreamweaver'da baslangýçta File>>New ile bir dosya açtýðýmýz da beyaz bir çaliþma alanýmýz vardýr. Bu alandaki nesneleri yerleþtirirken konumlarýný belirlemek için genellikle Properties panelini kullanýrýz.

Bunun yanýnda Dreamweaver'ýn hizalama ve konumlandýrma iþlemlerinde bize yardýmcý olacak görsel araçlarýda vardýr.

Gerçek hayatta uzunluk ve mesafe ölçümü için kullandýðýmýz cetveller Dreamweaver bünyesinde de yeralýr. Cetveller(Rulers) View>>Rulers>>Show menüsü ile görünür hale getirilir.

Cetvel için seçebileceðiniz 3 ölçü birimi vardir. Bu üç ölçü birimini Rulers menüsün altýnda görebiliriz. Web için döküman hazýrlanýrken genellikle piksel kullanilir. Fakat eðer istersek inç ya da santimetreyi de kullanabiliriz.

Cetveller ilk görüntülendiðinde sýfýr noktalarý sayfanýn sol üst köþesindedir. Yapacaðýmýz sayfa tasarýmý için sýfýr noktasýný deðistirmek istersek bu durumda yatay ve dikey cetvelin kesiþtiði yerdeki sýfýr noktasýna fare ile sol týklayýp, farenin tuþunu býrakmadan istediðimiz yere taþýyýp býrakabiliriz. Artýk yeni bir sýfýr noktamýz vardýr.

Eðer sýfýr noktasýný ilk konumuna döndürmek istersek View>>Rulers>>Reset Origin menüsünü kullanabiliriz ya da faremizle sýfýr noktasýna iki kez týklarýz ;)

Düzen için kullanýlacak bir diðer araç Izgara(Grid)'dýr. View>>Grid>>Show Grid menüsü ile Izgara'yý görünür hale getiririz.

Bu iþlem sonrasý sayfamýz üzerinde bir ýzgara belirir. Bu ýzgaranýn özelliklerini deðiþtirmek için Grid Settings penceresini kullanýrýz. Bu pencereye View>>Grid>>Edit Grid... menüsünden ulaþýlýr.

Color: Izgara çizgilerinin rengini deðiþtirmemizi saðlar.

Show Grid: Seçeneðini seçersek ýzgara görünür hale gelir.

Snap to Grid: Bu seçeneði seçtigimizde sayfamýza yerleþtirdiðimiz katmanlar(Layers) ýzgara çizgilerine kenetlenir.

Spacing: Buradaki sayý deðeri ile ýzgaranýn çizgilerinin aralýðýný deðistirebilirsiniz. Ayrýca bu aralýk deðeri için piksel, inç ya da santimetre gibi birimler belirleyebiliriz.

Display: Izgara baslangýçta düz çizgilerden oluþur. Bunun sebebi baslangýçta Lines seçeneðinin seçili olmasýdýr. Eðer ýzgara çizgilerinin noktalý çizgilerden oluþmasý istenirse Dots seçeneðinin iþaretlenmesi gerekir.

Aþaðýdaki ilk resim mavi renkli ve 20 piksel aralýk deðeri olan noktalý bir Izgara'nýn görünümüdür. Ýkinci resim ise açýk yeþil renkli, 10 piksel aralýk deðeri olan düz çizgili bir ýzgaranýn görünümüdür.

Izgara çizgisi ve cetveller sadece tasarým aþamasýnda görüntülenen elemanlardýr. Yaratýlan Html sayfasýna yansýmazlar.

Yapacaðýmýz sayfalarýn Dreamweaver MX çalýþma alanýndaki görünümü bazen tarayýcýdaki görünümünden farklý olur. Ayrýca animasyonlar, roll over image efekti ve ******lerin oluþturduðu etkiler çalýsma alanýnda görülemez. Bu sebeple sayfalarýmýzý tasarlarken her defasýnda kaydedip bir tarayýcý ile açmak yerine F12 tuþuna basarak önizleme yaparýz. F12 tuþuna bastýgýmýzda üzerinde çalýþtýðýmýz sayfamýz, seçmis olduðumuz tarayýcýnýn açýlmasýyla bu tarayýcýda görüntülenir. Peki biz bu tarayýcýyý nasýl seçeriz?

Ýste bu tarayýcýyý seçmemizi saðlayan Edit>>Preferences... menüsü ile ulaþtýðýmýz Preferences penceresindeki Preview in Browser kategorisidir.

Bu pencere ilk açtýðýmýzda geçerli web tarayýcýmýz görülür. Windows kullanýcýlarý için bu Internet Explorer'dýr çogunlukla. :) Fakat eger istersek baska tarayýcýlarýda bu listeye ekleyebiliriz.

Yeni tarayýcý eklemek için Browsers: etiketinin yanýndaki düðmesine týkladýðýmýzda Add Browser penceresi açýlýr. Bu pencerede Name metin alanýna seçeceðimiz tarayýcý(browser)nýn hangi isimle görünmesini istiyorsak onu yazarýz. Application metin alanýnýn yanýndaki Browse... düðmesini týklayarak önizleme için kullanacaðýmýz tarayýcýyý seçeriz. Ben bilgisayarýmda kurulu bulunan Netscape Navigator'i seçiyorum.

Add Browser penceresinde Defaults: etiketli bölümde 2 seçenek vardýr. Bunlar seçilen tarayýcýnýn birincil ya da ikincil tarayýcý olarak seçilmesine olanak tanýr. Ben eklediðim Netscape Navigator'ýn birincil tarayýcým olmasýný istediðim için "Primary Browser" seçeneðini iþaretliyorum.

Bu iþlemi yapýp tamam dediðimde Tarayýcýlarýn listelendiði pencerede Netscape.exe ismi yanýnda F12 yazar. Bu önzileme yapmak için kullanýlan kýsayol tuþudur. Birincil tarayýcý olarak Netscape Navigator'ý seçtiðimden baslangýçta Internat Explorer yanýnda olan F12 yazýsý kaybolmuþtur. Bu durumda Ýnternet Explorer'ý ikincil tarayýcý olarak belirlememiz için Ýnternet Explorer'ý seçip Edit... düðmesine týklayarak bunu yapabileceðimiz gibi tarayýcýmýzýn ismi liste/menü alanýnda seçýlýyken Defaults: etiketli bölümden "Secondary Browser" seçeneðinide seçebiliriz.

Edit... düðmesini týkladýðýmýzda açýlan Edit Browser penceresi Add Browser penceresi ile ayný görünüme sahiptir. Açýlan Edit Browser penceresesinde "Secondary Browser" seçeneðini seçip tamam dediðimizde tarayýcýlarýn adlarýnýn bulunduðu liste/menü alanýnda iexplorer alaný yanýnda Ctrl F12 yazýsý görülür. Ctrl F12 kýsayol tuþlarý üzerinde çalýþtýðýmýz sayfayý ikincil tarayýcý ile önizlememizi saðlar.
Edit Browser penceresini kullanarak mevcut bir tarayýcýya ait isim ve dosya konumunu da seçebilirsiniz.

Mevcut tarayýcýlardan herhangi birini listeden silmek istediðimizde düðmesini kullanýrýz.

düðmesini kullanarak daha pek çok tarayýcý ekleyebiliriz bu listeye. Fakat eklediðiniz tarayýcýlardan sadece ikisini kýsayol tuþlarý ile çalýþtýrabilirsiniz. Üzerinde çalýþtýðýmýz bir sayfayý birincil ve ikincil olan tarayýcýlar haricindeki bir tarayýcý ile önizlememiz için Document araç çubuðundaki Prewiev/Debug in Browser düðmesine týkladýðýmýzda açýlan menüden seçebiliriz.

Son olarak Preferences penceresinin Prewiev in Browser kategorisinde Options: etiketli bölümde "Prewiev Using Temporary File" diye bir seçenek vardýr.

Bu seçeneði seçili ise çalýstýðýnýz dosyayý kaydetmeseniz de yaptýðýnýz degiþiklikleri önizleme yaptýðýnýzda görebilirsiniz çünkü Dreamweaver MX yaptýðýnýz deðiþikliklerinde yer aldýðý geçici bir dosya olusturur ve biz önizleme yaptýðýmýzda bu dosyayý görürüz. Eðer bu seçenek seçili deðilse yaptýðýmýz deðiþiklikleri görmek için her önizleme iþleminden önce sayfamýzý kaydetmemiz gerekir. Kabul etmek gerekir ki bu da büyük bir zaman kaybýna neden olur ;)

Not:
Netscape Navigator programýný www.netscape.com sitesinden ücretsiz olarak indirebilirsiniz.

Mozilla web tarayicisini programýný www.mozilla.org sitesinden ücretsiz olarak indirebilirsiniz.

Opera 7.0 web tarayýcýsý ücretli bir program olmasýna karþýn, shareware sürümü içerisinde yer alan bir reklam bannerýyla birlikte süresiz olarak kullanýlabilmektedir. Opera 'yý www.opera.com sitesinden indirebilirsiniz.

Türkçe karakterlerin görünmesini saðlayan karakter kodlarý, Mac ve Windows için ayrýdýr.

Yaptýðýmýz sayfanýn Machintosh'da sorunsuz görünebilmesi için, iso kodunu önce yazmalýyýz. Windows kullanýcýlarý, zaten 8859-9 setini göremeyecekleri için otomatik olarak 1254'e geçecektir. Ancak 1254 önce yazýlýrsa, Mac'de (Turkish Windows) olmadýðý için sorun yaþanmaktadýr.

Dreamweaver MX'te Türkçe karakterleri göremiyorsanýz, Viev>>Preferences menüsüyle ulaþacaðýnýz Preferences penceresindeki Fonts kategorisinde yer alan ayarlarý aþaðýdaki resimdeki gibi yapýn. (crtl+u)

Ayrýca ayný penceredeki New Document kategorisinde yer alan Default Encoding çekme menüsünden Turkish(windows-1254)'ü seçin.

Ayrýca bir sayfa ile çalýþmaya baþlamadan önce Modify>>Page Properties... menüsüyle ulaþacaðýnýz Page Properties penceresinde Document Encoding çekme menüsünden Turkish(Windows-1254) seçeneðini seçin, tabii eðer seçili deðilse(Bu seçenek çekme menüde yoksa nasýl ekleyeceðinizi konu sonundaki Not bölümünden öðrenebilirsiniz.). Bu þekilde Türkçe karakterleri Dreamweaver MX üzerinde göreceðiniz gibi, sayfanýzý kaydedip kapattýktan sonra tekrar açtýðýnýzda metniniz bozulmayacaktýr.

Sayfada metin giriþini mutlaka, yukarýdaki meta kodlarýný ekleyip, Encoding ayarýndan sonra gerçekleþtirin. Bu iþlemlerden önceki metin giriþlerinde, encoding (harflerin karþýlýklarýný kodlama) iþlemi sorunlu olacaktýr ve tarayýcýda Türkçe karakter görünmeyecektir.

View>>Head menüsüyle sayfamýzdaki standart Meta'yi görebiliriz.

Buradaki meta simgelerine týkladýðýnýzda Properties penceresinde o metanýn içeriði görüntülenir. Properties penceresinden meta üzerinde deðiþiklik yapabilirsiniz.

**Not**

Dreamweaver MX (6.0 ve 6.1) içeriðinde dil kodlamasý bulunmayan sayfalarý geçerli olarak Western Latin(1) Dil kodlamasýný kullanarak görüntülemektedir. Türk alfabesindeki bazý karakterler bu kodlamayla görülemediði için sayfalarýnýza mutlaka bir dil kodlamasý eklemeniz gerekmektedir.

Sayfalarýnýza Page Properties penceresindeki Document Encoding çekme menüsünü kullanarak Türkçe dil kodlamasi ekleyebilmek için www.abi.com.tr sitesi tarafindan yayýmlanan aþaðýdaki baði týklayarak indireceðiniz Extension'ý kullanabilirsiniz.

Tr Encoding Extension

Bir extension'ý nasil kuracaðýnýzý bilmiyorsanýz Eklentiler bölümündeki Extension Kurmak/Kaldýrmak dersine bakabilirsiniz.

Daha önceki derste Site Tanýmlama sihirbazý ile bir site tanýmlamýþtýk. Bu defa Advanced sekmesini kullanarak bir site tanýmlayacaðýz. Fakat sitemiz yine bilgisayarýmýzda çalýþan lokal bir site olacak.

Site>>New Site.. menüsü ile Site Definition pencersine ulaþýp Advanced sekmesini týklarýz. Karþýmýza ilk kategori olan Local Info kategorisinin içeriði gelir. Sýrayla buradaki alanlarý tanýyalým ve Cizik Roman sitesini oluþturmak için kullanalým.

Site Name: Buraya sitemizin adýný yazarýz. Bu ad Site panelinde görüntülenecek addýr.

Local Root Folder: Sitemize ait dosyalarýmýzý saklayacaðýmýz ve sitemizin Root Folder(Kök Dizin)'ý olacak dizini seçtiðimiz yerdir. Bu dizin bilgisayarýmýzda yer alan bir dizin olacaðýndan yolunu doðrudan yazabileceðimiz gibi Folder(Dizin) ( ) simgesini týkladýðýmýzda açýlacak olan Choose Local Root Folder for Site pencersinden bir dizin seçebiliriz.
Örneðin aþaðýdaki resimde görüldüðü gibi CizikRoman dizini benim kök dizinimdir.

"Refresh Local File List" seçeneði iþaretliyken kök dizinimize eklediðimiz ya da kök dizinden çýkarttýðýmýz her dosya/dizin Dreamweaver tarafýndan kaydedilir ve Site panelinde eklediðimiz her dosyayý/dizini eklediðimiz an görebiliriz.
Sitemizdeki dosyalarý daha kolay takip edebilmemiz de bu seçeneðin iþaretli olmasýnýn faydasý vardýr ;)

Default Images Folder metin kutusuna sitemizdeki resimleri sakladýðýmýz dizinin adresini yazarýz. Metin kutusunu yanýndaki Folder simgesini týkladýðýmýz da açýlan Choose Local Image Folder for Site penceresinden de klasörümüzü seçebiliriz.

Bu klasörü belirtmenizde þöyle bir yarar vardýr. Örneðin sayfanýza kök dizin dýþýnda bir dizinden resim eklediðimizde ve sayfamýzý kaydetmek istediðimizde eklediðiniz resmin kök dizin dýþarýnda olduðu ve kök dizin içerisine kaydetmek isteyip istemediðimiz soran bir mesaj kutusu çýkar ve eðer biz resimlerimiz için bir dizin tanýmlamýþsak, resmin bir kopyasý belirlediðimiz dizin içerisine kopyalanýr. :)

HTTP Address metin kutusuna sitemizin web adresini yazarýz. Ben http://www.cizikroman.net yazýyorum.

Cache etiketi yanýndaki "Enable Cache" seçeneði sitemiz için bir Cache(Önbellek) oluþturmamýzý saðlar. Bu seçeneðin seçili olmasý çok önemlidir. Bu seçenek sayesinde Dreamweaver MX sizin için bütün baðlara ait bir index oluþturur. Herhangi bir baðý deðiþtirdiðimizde, bir dosya adýný deðiþtirdiðimizde sitedeki bu baðý ya da dosyayý kullanan dosyalrýmýzda otomatik olarak güncellemeler yapar.

Örneðin A.htm doyasýndan B.htm dosyasýna bir bað tanýmlamýþsak, B.htm doyasýnn adýný C.htm yaptýðýmýzda bize "Siz a.htm'den B.htm dosyasýna bað tanýmlamýþtýnýz, bu baðý C.htm'e dönüþtürmek ister misiniz?" diye sorar.

Yine A.htm ve B.htm sayfalarýna yerleþtiriðimiz Kaplum.gif resminin adýný kaplumbik.gif olarak deðiþtirdiðimizde bize "Kaplum.gif dosyasýný yerleþtiriðiniz A.htm ve B.htm dosyalarýnýn Kaplum.gif yerine Kaplumbik.gif resmini kullanmasýný istermisiniz?" diye sorar.

Bütün bu iþlemler sonrasýnda Tamam dediðimizde eðer "Enable Cache" seçeneðini iþaretlemiþsek karþýmýza aþaðýdaki mesaj kutusu çýkar.

Bütün bu iþlemler sonrasýnda Tamam(OK) diyerek sitemizi tanýmlamýþ oluruz.

Dreamweaver MX'te çalýþmaya baþlamadan önce, yapacaðýmýz çalýsmalarýn derli toplu olmasý için bir site tanýmlamasi yapmakta fayda vardýr. Dreamweaver MX gerek sayfalarýmýzý kaydederken gerekse sayfalarda kullandýðýmýz resim, stil veya animasyonlar için bize kaydetmek istediðimiz dosyalarýn ait olduðu siteyi soracaktýr. Bir site için dosyalar tasarlýyor olmasak da tanýmlanmýþ bir sitemizin olmasý iþimize yarayacaktýr.

Site tanýmlamak için Site>>New Site... menüsünü kullanýrýz. Bu menü ile içerisinde Basic ve Adavanced sekmeleri bulunan Site Definition for Unnamed Site 1 penceresine ulaþýrýz.

Bu dersimizde biz Basic sekmesini týklayarak bu sekmeyi kullanarak site tanýmlamayý öðreneceðiz.

Basic sekmesinde ilk olarak "What would you like to name your site?" sorusunun altindaki metin alanýna sitemizin ismini yazmamiz gerekir. Ben DWTurk yazýyorum. Next dediðimizde karþýmýza ColdFusion, JSP, PHP veya ASP gibi bir server teknoloji kullanýp kullanmayacaðýmýza dair bir seçim yapmamýzý gerektiren aþaðýdaki ekran gelir.

Biz su an için html uzantýlý sayfalar tasarlayacaðýmýz için ilk seçenek olan "No, I do not want to use a server technology" seçiyoruz.

Tekrar next dediðimizde sitenin yapým aþamasýnda dosyalarla nasýl çalýþacaðýmýzý seçmemiz istenir. Burada aþaðýda görülen 3 seçenek vardýr.

Biz dosyalarýmýzý tasarladýktan sonra web alanýna yükleyeceðimiz için ilk seçeneði seçiyoruz.
Ýkinci seçenek olan "Edit directly on server using local network" dosyalara yerel bir að üzerindeki bir makineden ulaþarak iþlem yapmak için, üçüncü seçenek ise site dosyalarýna FTP ya da RDS kullanarak ulaþmak içindir.
Bu ekranda "Where on your computer do you want to store your files?" sorusu altýndaki metin alanýnda site dosyalarýmýzý saklayacaðýmýz bir klasör belirtmemiz istenir. Bunun için düðmesine týklarýz ve açýlan pencerede site dosyalarýmýzý saklayacaðýmýz dizini seçeriz.

Next diyerek ulaþtýðýmýz bir sonraki aþamada sitemizi barýndýracaðýmýz sunucuya eriþim yöntemimizi seçmemiz istenmektedir. Biz þimdilik dosyalarýmýzla bilgisayarýmýzda islem yapacaðýmýz için ilk seçenek olan "None"i seçeriz.

Son aþamada ise karþýmýza yaptýðýmýz seçimlerin yer aldýðý "Summary" kýsmý gelir.

Done tuþuna týkladýðýmýzda sitemizi oluþturmuþ oluruz ve Site penceresi açýlýr.

Not: Site penceresi Dreamweaver MX Workspace görünümünde pencerenin saðýnda yer alan Files panelinin içerisindeki Site sekmesinde açýlýr. Bu sekmeyi panelden dýþarýya sürüklediðinizde yukarýdaki resimde görülen pencere haline dönüþür.

Dreamweaver MX programýný anlatýrken biz Dreamweaver MX görünümünü kullanacaðýz. Bu görünümün en önemli özelliklerinden biri daha önceki sürümlerde yer alan pencerelerin artýk paneller ve panel gruplarý içerisinde yer almasýdýr.

Bu derste amacýmýz panellerin içerdikleri özellikleri tanýmaktan ziyade panellerin ne olduðu, nasýl görünür hale getirilip saklý hale getirildiðini göstermektir. Bu sebeple eðer daha önce hiç incelemediyseniz bu ders kýlavuzluðunda bahsedilen bütün panelleri incelemenizi tavsiye ederiz.

En üstte menüler yer alýr.

Hemen onlarýn altýnda Insert araç çubugu yer alýr.

Insert araç çubuðunun altýnda da Document araç çubuðu yer alýr.

Document araç çubuðu altýnda Document Window(Belge Penceresi) yer alýr. Belge penceresinin sol altýnda Tag Selector(Im Seçici) yer alýr. Sað altýnda ise pek çok panel grubunu tek týkla açmamýzý ve kapamamýzý saðlayan Launcher Bar yer alýr. Launcher Bar pek çok küçük düðmeden oluþan düzenlenebilir bir yapýya sahiptir.

Launcer Bar'in solunda Yükleme Göstergesi yer alýr.

Bu bölümde gözüken ilk deðer sayfanýn K (Kilobayt) cinsinden boyutudur, ikinci deðer sayfanýn seçilen modem hýzýna göre sec(saniye) cinsinden yüklenme süresidir.

Yüklenme Göstergesinin solunda ise Window Size menüsü vardýr, bu menü tasarladýðýmýz sayfa için bir boyut belirlememizi saðlar.

Bu iki bölüm ile ilgili ayarlamalarýPreferences iletiþim kutusundaki Status Bar kategorisinden yapabiliriz.

Properties paneli(Penceresi) Document Window'un altýnda yer alýr. Properties penceresinde o an seçili elemana ait özellikler görünür.

En altta ise Results panel grubu vardýr. Bu panelin içerisinde Search, Validation, Target Browser Check, Link Checker, Site Reports, FTP Log ve Server Debug panelleri yer alýr.

Dreamweaver MX görünümünde pencerenin sað tarafinda panel gruplarý ve paneller yer alýr. Panel gruplarý, içerisinde birden fazla panel barýndýran panellerdir.

Design paneli bir panel grubudur ve içerisinde CSS Styles, HTML Styles ve Behaviors panelleri bulunur.

Code paneli de bir panel grubudur ve Tag Inspector, Snippets ve Reference panellerini içerir.

Application panel grubu Database, Binding, Server Behaviors, Components panellerini içerir.

Files panel grubu Site ve Assets panellerini içerir.

Answers paneli tek bir paneldir.

Panellerin herhangi birini görünür kýlmak için Window menüsünü kullanabiliriz. Window menüsünde isminin sol yanýnda bir seçim iþareti olmayan bir panel görünür durumda deðildir. Açýk olanlarýn sol yanýnda ise seçim iþareti vardýr.

Window menüsündeki Hide Panels ile bütün panelleri gizleyebiliriz. Tekrar görüntülemek için paneller gizliyken ayný menüde yer alan Show Panels'i seçmemiz yeterlidir.

Bir panelin isminin üzerine gelip 1 kez týkladiðimýzda toplanýr, eðer toplanmýþ haldeyse ismin üzerine bir kez týkladýðýmýzda açýlýr.

Bir paneli kapatmak için isminin yer aldýðý baþlýk çubuðunda sað týklayýp açýlan menüden Close Panel Group'u seçmek yeterlidir.

Not: Dersler sýrasýnda Properties paneli yerine Properties penceresi de denmistir. Her iki sekilde de seçili elemanýn özelliklerinin görünür hale geldiði Properties paneli kastedilmiþtir.

Insert/Media/Flash Button'a girin.Karþýmýza sayfayý iþlem yapmadan

önce kaydetmeniz gerekmektedir diye bir mesaj kutusu gelecek.

Ok diyoruz ve belgemizi File/Save 'e basarak kaydediyoruz.

Sample:Bu pencerede örnek butonlarý görüyoruz.

Style:Örnek butonlarýn bulunduðu pencere

Button Text:Butonun  üzerenine yazýlacak yazýyý buradan ayarlýyoruz.

Font:Butonun  üzerenine yazýlacak yazýnýn fontunu buradan ayarlýyoruz.

Size:Yazýmýzýn boyutunu buradan ayarlýyoruz.

Link:Butona týkladýðýmýzada gitmesini istedðimiz sayfanýn linkini burdan

ayarlýyoruz.

Target:Linkimizin hedefini yani butona týklandýðýnda gitmesini istediðimiz

sayfanýn nasýl açýlmasýný (ortada,ayrý sayfada vs) buradan ayarlýyoruz.

Bg Color:Butoumuzun arkaplan rengini burdan ayarlýyoruz.

Save As:Butonumuza isim verip,Browse butonuna týklayarak butonu

kaydetmek istediðimiz yeri belirliyoruz.