Transkript

1 FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni Oluştur Fireworks Belgesi (PNG) düğmesine basılır. Karşımıza gelen Yeni Belge penceresinden Genişlik, Yükseklik, Tuval rengi ayarları yapılarak Tamam düğmesine basılır. Menü oluşturulurken menünün yatay olması durumunda Genişliği yüksek pixel, menünün dikey olması durumunda ise Yüksekliği yüksek pixel değerli olmalıdır. 1

2 3 Örnekte biz Genişliği:140 pixel Yüksekliği:600 pixel boyutunda, Tuval Rengi Saydam olan bir PNG dosyası oluşturuyoruz. 4 Menü için gerekli butonları Oluşturmak için tasarım alanına ekrandaki gibi dikdörtgen çizilecektir. Dikdörtgeni çizebilmek için aşağıdaki şekilde yuvarlak içerisine alınmış araç düğmesinin Yuvarlak Köşeli Dikdörtgen aracı seçilir ve tasarım alanına bir buton çizilir. 2

3 5 Buton çizildikten sonra Butonun ismine İsimlik yazılması gerekir. Bu yüzden Araç kutusundan A düğmesine basılarak butonun üzerine Butonun ismi yazılır. Yukarıdaki şekilde buton üstüne yazılan metin, butonun içerisine ortalanmış olarak yerleştirilmek istenirse aşağıdaki hizalama işlemleri yapılır. Aşama 1: Dreamweaver ekranının sağındaki panellerden Hizala paneli açılır. Aşama 2: İki nesne de (buton, metin) fare ile seçilir. Aşama 3: Hizala: bölümündeki yatay hizala ( ve dikey hizala ( ) bölümlerinden yuvarlak içerisine alınmış düğmelere basılır. 6 Hizalama işlemi bittikten sonra her iki nesne tekrar seçilir (Farenin sol tuşu basılı tutularak her iki şekil dikdörtgen içerisine alınarak seçilebilir). Neden seçme işlemi yapılır? Çünkü,Nesneleri DÜĞME sembolüne dönüştürmemiz gerekir. 3

4 7 Klavyeden F8 fonksiyon tuşuna basarak Sembole dönüştür penceresi açılır. Açılan pencereden sırasıyla aşağıdaki işlem sırası takip edilir. Sembole bir isim verilir. Bu isim ekranda görünmez.ismi yazılı Sembole türü seçilir. (Düğme) Onaylı seçenek seçilir. 8 TAMAM düğmesine basıldıktan sonra buton yapılmak istenen nesne aşağıdaki gibi görünecektir. 9 Çift tıklanınca buton1 sembolünün içerisine girilmiş olunur. Bu düğmenin üzerinde farenin sol tuşuna çift tıklanılır. 4

5 Buton1 sembolü 5 bölümden oluşur. Yukarı : Düğmenin web sayfasında iken ilk açılıştaki halidir. Üzerinde : Düğmenin üzerine farenin gezdirilmesi sonucunda oluşacak görüntüdür. Aşağı : Düğmenin üzerinde farenin sol tuşuna basıldığı andaki oluşacak görüntüdür. Aşağıdayken Üzerinde : Etki Alan : Farenin düğmenin üzerinde iken gezerken, düğmenin neresinde el işareti çıkacağını gösteren alandır. Bu bölümleri görevlerini öğrendikten sonra aşağıdaki işlemler gerçekleştirilir. 1 Şekil ayarlandıktan sonra bakıldığında, Üzerinde, Aşağı, Aşağıdayken Üzerinde sekmelerinin içerisinde buton düğmesi görünmez. Düğme görüntüsünün 9 çizgili kılavuz çizgilerinin içerisinde yer alması için (aşağıdaki görüntüde olduğu) Yukarıda Grafiğini Kopyala düğmesine basılarak Yukarıda bölümündeki düğmeyi Üzerinde bölümüne kopyalanır. Aynı işlem 9 dilimli ölçekleme kılavuz çizgileri dağınık görünür. Bu çizgiler yan taraftaki gibi farenin sol tuşuna basılı tutarak düğme boyutuna göre ayarlanır. 5

6 sırasıyla Aşağı bölümünde iken Üzerinde Grafiğini Kopyala düğmesine basarak Aşağı bölümüne; Aşağıyken Üzerinde bölümünde iken Aşağıda Grafiğini Kopyala düğmesine basarak Aşağıyken Üzerinde bölümüne de kopyalanır. 2 ÜZERİNDE bölümüne geçilir. Butonun üstüne tıklanılır (kırmızı kısmına) ve dikdörtgenin rengi Özellikler panelinden değiştirilir. (Örnekte: Sarı renkli). Metin seçilir. Özellikler panelinden yazı rengi değiştirilir. (Örnekte: Kırmızı renk yapılmıştır.) Düğmenin rengi ayarlanır. 3 BİTTİ düğmesine basarak düğme oluşturulmuş olur. 10 Buton oluşturma işlemi bittikten sonra Düzen menüsü Çoğalt komutu veya CTRL+ALT+D komut sırasını kullanarak düğmeyi çoğaltırız. Düğmelerin isimlerini değiştirdikten sonra menü dosyamızın görüntüsü aşağıdaki gibi olacaktır. Metnin rengi ayarlanır. 6

7 Bu menü dosyasında aşağıdaki fazla boşluklar Özellikler panelinden Tuvali Sığdır düğmesi ile yok edilir. Bu boşlukları yok etmemizin sebebi, oluşturulan menünün Dreamweaver programına aktarıldığında tablo halinde gösterilmesinden dolayı, tabloda menülerin altında fazla satır oluşacaktır. 11 Hazırladığımız menüyü Dosya menüsünden Dışa Aktar komutu ile HTML programlarında tablo halinde kullanabiliriz. Bunun için aşağıdaki aşamaları takip ediniz. Fazla Boşluklar 7

8 Sağ fare tuşu Yeni Klasör ile Dizin oluşturulur. Sonra bu dizinin üzerine çift tıklayarak girilir. Menü ismiyle bir klasör oluşturulur. Çünkü menünün içinde bulunan buton ve yazılar ayrı birer dosya oluşturacağından çok fazla dosya yerel site klasörünü işgal edecektir. Dosya adını menu1 (konu menülerle ilgili olduğundan dolayı) yazılır. Kaydet düğmesine basılır. 8