FIREWORKS DERS NOTLARI

Yeni dosya açalım(FileNew)

Üst Menü’den WindowLibrary seçerek kütüphane penceresini açıyoruz.

Library penceresinin sağ alt köşesindeki üzernde + işareti olan ilk düğmeye
tıklıyoruz(New Symbol düğmesi)
Gelen ekranda aşağıdaki gibi buton’u seçerek devam ediyoruz.

Gelen ekranda butonunuzu çizin. Burada butonunuzun ilk açıldığı andaki durumu
çizilmelidir.
Daha sonra aşağıdaki pencerenin üstünde gördüğünüz “over” sekmesine tıklayın
ve düğmenizin üzerine fare ile gelindiğinde hangi şekil çıkmasını istiyorsanız onu
çizin. Daha sonra yine üstteki “down” sekmesine tıklayıp, fare ile düğmeye
basıldığında hangi şeklin çıkmasını istiyorsanız onu çizin.
Bu işlemlerin ardından Active area sekmesine tıklayın. Aşağıdaki gibi “Set active
area automatically” seçeneği aktifse, Fireworks bizim Photoshop’ta el ile
yaptığımız dilimleme işlemini otomatik gerçekleştirecektir. Daha sonra buton
editörünü, “Done” düğmesine, ya da üst köşesindeki çarpıya basarak kapatalım.

Oluşturduğumuz buton Library penceresinde görünecektir.Butonu sahneye

sürükleyelim. Kopyala-yapıştır yoluyla, navigasyon menünüzde kaç tane buton
olacaksa, sahnede butonları çoğaltalım.
Daha sonra yeni eklediğiniz her buton için şu işlemleri yapın:

1.Butonu ok ile seçin(Selection Tool)

2. Altta properties panelinde text yazan yere menü elemanının ismini yazın

3. Altta properties panelinde link yazan yere menü elemanının linkini yazın(Link
hazır değilse boş bırakıp, Dreamweaver’dan da değiştirebilirsiniz.

Resimleri Optimize Etme ve Export Etme

Üst menüdenWindowsOptimize panelini açtıktan sonra aşağıdaki seçenekleri

uygulayarak imajlarınızı daha çabuk yüklemek için optimize edebilirsiniz.
Eğer ilk kez imaj export işlemi yapıyorsanız; FileHMTL SETUP yoluyla ayar
penceresini açıyoruz.

General sekmesindeki ayarlar şu şekilde olmalıdır.

Daha sonra Document Specific sekmesinden Frame names alanında aşağıdaki
gibi Rollover seçilmelidir.

Aşağıdaki görüntüden görebileceğimiz gibi “quick export” düğmesi ile

Dreamweaver’a aktarma işlemi yapabiliriz. Ekranın sağ üst köşesinde bu butonu
görebilirsiniz.
File > Export yoluyla da aynı işlem yapılabilir.

Export’tan Dreamweaver seçilmelidir.

Site klasörünü seçip kaydetme işlemini tamamlayın.

Bu işlemden sonra FileSave yoluyla png uzantılı dosya olarak kaydedin.(Bu

işlem daha sonra değişiklik yapabilmek için Fireworks formatında kaydetme
işlemidir.)

SIMPLE ROLLOVER EFEKTİ

Yeni bir döküman açalım.Üst MenüWindowFrames tıklayarak, Frames panelini

ekrana ekleyin.

Herhangi bir şekil çizin. Daha sonra çizdiğiniz şekli kopyalayın. Frame paneline
gelerek new frame düğmesine tıklayın(alttaki üç düğmeden ortada olanı).
Frame panelinde yeni açtığınız frame’e tıklayın(Frame 2). Ekran bu durumda boş
görünmeli. Az önce kopyaladığınız resmi buraya yapıştırın ve rengini değiştirin.
Frame panelinden tekrar 1. Frame’e geçin. Çizdiğiniz şeklin üzerine tıklayıp, araç

kutusundan “Slice” aracını seçin. Şeklin etrafını slice aracı ile kesin. Daha
sonra,eğer yoksa Üst MenüWindowBehaviours panelini çalışma alanına
ekleyin. Behaviours panelinden + simgesine tıklayarak Simple Rollover’ı seçin.
Seçtikten sonra görüntü şöyle olmalıdır:

Üst menüden aşağıdaki gibi Preview modunu seçin.

Şeklinizin üzerine fare ile gelindiğinde renk değişikliğini göreceksiniz. Yaptığınız

çalışmayı html dosyası olarak kaydetmek isterseniz, FileExport’u tıklayıp,
aşağıdaki ayarlarla site klasörünün içine kaydedin.
SWAP IMAGE EFEKTİ

Swap Image efektini daha önce baktığınız web sitelerinde, soldan bir linke ya da
resme tıklayınca, sayfanın başka bir yerinde başka bir içeriğin yüklendiği şekilde
görmüşsünüzdür. Bu teknik Javascript kodları kullanmayı gerektirir. Ancak
Fireworks ve Dreamweaver gibi yardımcı programlar gerekli Javascript kodlarını
kendiliğinden üretir(Elle kod yazmamıza gerek yok). Aşağıda bu efektin
Fireworks’te nasıl yapıldığını anlatacağım. Gelecek derste aynı işin
Dreamweaver’da nasıl yapılacağını da göreceksiniz.

Şu özelliklerle bir döküman açın:

Soldaki alana aşağıdaki gibi üst üste 4 adet yazı yazın ve ortaya da şu şekilde
herhangi bir şekil çizin:

Frames panelinde New/Duplicate Frame butonuna(Frames panelinde sağ alt

köşedeki 3 butondan ortadaki) 3 defa tıklayarak 3 frame daha oluşturun.

Frame’lerin adları üzerine çift tıklayarak aşağıdaki gibi isimlendirin.

2. frame’e(daire frame’i) tıklayın. Sağdaki alana bir daire çizin.3. frame(kare)
tıklayın ve sağdaki alana kare çizin.4. kareye tıklayın ve sağdaki alana poligon
çizin. 1.frame’e tıklayın. Shift tuşuna basılı olarak ok ile 3 yazıyı da
seçin(daire,kare,poligon). Sağ tıklayıp “Insert Rectangular Slice” seçeneğini seçin.
Gelen pencerede “Multiple seçeneğini seçin. Ok ile sağdaki şekli de seçtikten
sonra aynı şekilde sağ tıklayıp “Insert Rectangular Slice” komutu verin. Yazılar ve
resim şu şekilde dilimlere ayrılmış durumda olmalı:

Buraya kadar doğru yaptıysanız, daire yazan dilime tıklayın. Ortasında küçük bir
yuvarlak olmalı.

O yuvarlağa basıp, fareyi bırakmadan sağdaki büyük şeklin üzerine sürükleyelim.

Şöyle bir pencere çıkacak:
Buradan daire ismini verdiğimiz frame’i seçip OK düğmesine tıklıyoruz. Aynı
işlemleri diğer yazılara yapın: Yani örneğin Kare yazısının dilimini
tıklayın,ortasındaki yuvarlağa basılı tutarak sağdaki şeklin üzerine sürükleyin ve
kare isimli frame’i seçin. Preview modunda görüntüleyin. Mouse ile yazıların
üzerine geldiğinde şekiller gelmeli. F12 tuşu ile tarayıcınızda da
görüntüleyebilirsiniz.

SET TEXT OF STATUS BAR EFEKTİ

Boş bir sahneye bir şekil çizin. Şeklin etrafına Slice aracı ile bir dilim çizin. Dilimi
tıklayın ve Behaviours panelindeki + düğmesine, oradan da “set text of status
bar” seçeneğine tıklayın. Bu pencerede yazdığınız mesaj, yazının üzerine
gelindiğinde tarayıcınızın altındaki status bar’da görülür.

POP-UP MENU

Pop-Up Menü, web sitelerinde gördüğünüz açılır menülerdir. Bir elemanın üzerine
geldiğinizde başka bir alt menü açılır. Fireworks’de bunu uygulamak için yeni bir
döküman açıp sahneye 3 farklı yazı yazın. Bunlar linklerimiz olacak. Aşağıdaki gibi
yerleştirelim:
Daha sonra Shift’e basılı tutarak ok ile her üç yazıyı da seçelim. Sağ tıklayıp Insert
Rectangular Slice seçeneğini seçelim. Gelen ekranda Multiple seçeneğini seçelim.
Görüntü şöyle olmalıdır.

Hakkımızda yazılı olan dilimi tıklayarak seçili hale getirelim. Behaviours

panelinden + düğmesine tıklayıp Set Pop-up menü seçeneğini seçelim. Gelen
ekranda text yazan kısıma misyon yazalım ve + düğmesine basalım, daha sonra
text alanına vizyon yazalım + tuşuna basalım, sonra da hizmetler yazalım.
Görüntü şöyle olmalıdır:
Bunları yaptıktan sonra Next düğmesine tıklayalım. Bu ekranda, her eleman için,
renk,punto,büyüklük,pozisyon gibi birçok ayar yapabiliriz. İstediğimiz ayarları
yaptıktan sonra OK düğmesine tıklayarak sonucu görelim.