5. MASKELEME VE AÇILIR MENÜLER

5.1. Bir Şablon Oluşturma

Oluşturulan ana sayfanın üst kısmını kullanarak yeni bir sayfa hazırlanacak. Bu üst kısım sitenin diğer sayfaları içinde kullanılabilir. Diğer sayfalarda kullanmak için, yeni sayfa diğer sayfalarda da kullanılabilecek bir şablon olarak kaydedilir. Kullanılacak olan bir resim maskelenebilir.

Şablon oluşturmak için daha önceden oluşturduğunuz bir ana sayfa çalışmanız olabilir veya yeniden şablon olarak kullanmak istediğiniz bir belge oluşturabilirsiniz.

Şablon olarak kullanılacak belge oluşturulduktan sonra kaydedilir. İstenirse bütün sayfalarda kullanılabilir.

5.2. Bir Resmi Maskeleme

Maskeleme (masking) bir nesnenin şeklini ve dolgusunu kullanarak başka bir nesneyi kontrol etme işlemidir. Bir maske, vektör veya Bitmap formatında bir resim olabilir. Daha önceki derslerimizde Paste Inside (içine yapıştır) komutunu bir şekli diğerinin içine yapıştırılmıştı. Kullanılan Paste Inside komutu da bir maskeleme biçimidir. Dış taraftaki şekil içerdeki şeklin kenarlarını kontrol eder.

Maske uygulanacak olan resmi belge içerisine yerleştiriniz, resim yerleştirildikten sonra resim üzerine resimden biraz daha büyük olabilecek bir dikdörtgen çiziniz. Maskelemenin görünmesi için dikdörtgenin rectangle roundness değerini 50 yapınız. Dikdörtgenin köşeleri yuvarlak olur. Dikdörtgenin dolgu rengini beyaz yapınız.

Dikdörtgen ve maske uygulanacak olan resmi seçiniz, Modify/Mask/Group as Mask menüsünü kullanarak resme maske uygulayınız.

Resme maske uygulandığında resmin dikdörtgen içerisine yerleştirildiği görülecektir. Maske uygulanmış resmin ortasında ki tutamaç kullanılarak dikdörtgen içerisinde hareket ettirilebilir.

Resme maske uygulandıktan sonra Layers katmanında resim ve dikdörtgenin yan yana yerleştiği görülecektir. Layers katmanında maskelenmiş olan dikdörtgen veya resim seçilerek Özellikler (Properties) penceresinde özellikleri değiştirilebilir. Örneğin filtre, dolgu, kenar çizgilerin görünmesi ya da boyutlarının değiştirilmesi gibi ayarlar yapılabilir.

Fireworks Maske Özellikleri

Yukarıdaki şekilde özellikler (Properties) penceresinde maske uygulanmış olan resmin özellikleri görülmektedir. Özellikler penceresinde Path outline ve Show fill and stroke özelliği seçilmiş durumdadır.

5.3. Katman Panelini Kullanarak Maskeleme Yapma

Maske oluşturmanın diğer bir yolu da Layers panelini kullanmaktır. Layers panelini kullanmak, resme beyaz bir Bitmap maske eklemenin hızlı bir yöntemidir. Bitmap araçlarından herhangi birini kullanarak maske üzerinde boyama yaparak görünüşü değiştirilebilir.

Layers panelini kullanarak maskeleme yapmak için yeni bir belge oluşturunuz. Belge içerisine maske uygulanacak olan resmi yerleştiriniz ve resmi seçiniz. Resmi seçmek için araç kutusunda İşaretçi (Pointer) seçili durumda iken fare göstergecini resim üzerine getiriniz ve farenin sol tuşuna basarak resmi seçiniz.

Resmi seçtikten sonra Layers katmanını kullanarak maskeleme yapmak için Layers katmanındaki Add Mask düğmesine farenin göstergeci üzerinde iken sol tuşuna tıklanarak resme maske uygulanır.

Katman Paneli ile Maske Uygulama

Maske uygulanmış resmi boyamak için araç kutusunda (Tools) Brush simgesi seçilerek resim maske uygulanmış resim üzerinde boyama yapılabilir. Boya rengi beyaz olduğunda resim tamamen görünür. Boya rengi siyah seçildiğinde resim görünmez olur. Gri tonlar kullanıldığında resim kısmen görünür.

5.4. Metni Bir Maske Olarak Kullanma

Metni maske olarak kullanmak için, metin içerisine yerleştirilecek olan resim belge içerisine yerleştirilir resim yerleştirildikten sonra text aracı kullanılarak resim üzerine metin yazılır.

Metin yazıldıktan sonra araç kutusunda işaretçi (Pointer) simgesi seçili durumda iken fare göstergeci metin üzerinde iken metin seçilir, metin seçildikten sonra Edit/Cut (Ctrl + X) kullanılarak metin kesilerek hafızaya alınır.

Metin kesildikten sonra metin içersine yerleştirilecek olan resim seçilir, resim seçiminden sonra Edit/Paste as Mask komutu kullanılarak resim metin içerisine yerleştirilir ve metin maskelenmiş olur.

5.5. Metin Dilimi Oluşturma

Belge içerisine metin yerleştirildikten sonra internete aktarıldığında grafiğe dönüşür. Metin grafiğe dönüştüğünde güncelleme yapmak zaman alır. Metin dilimleri oluşturulduğunda internette güncelleme yapmak daha kolay olur.

Metinler Fireworks programında text aracını kullanarak oluşturulabileceği gibi Not defteri gibi kelime editör programları kullanılarak *.txt dosyaları oluşturularak belge içerisine yerleştirilebilir ya da kelime editör programları kullanılarak zengin metin biçimi (*.rtf) oluşturularak belge içerisine yerleştirilebilir.

Word programında oluşturulmuş olan zengin metin biçimi veya not defterinde oluşturulan *.txt metnini program içerisine yerleştirmek için File/Import (Ctrl + R) kullanılarak metin belge içerisine eklenir. İstersek metni Fireworks programında Text aracını kullanarak da oluşturabiliriz.

Metin belgeleri oluşturulduğunda özel karakterler eklenmek istenirse Window/Special Characters menüsü kullanılarak özel karakterler eklenebilir.

Metin dilimi oluşturmak için, belge içerisine araçlar panelinde Slice (dilim) simgesi seçilerek belge içerisinde bir dilim oluşturulur.

Dilim oluşturulduktan sonra özellikler (Properties) penceresinde Type açılır menüsünde dilimin tipi HTML yapılır, Edit düğmesine tıklanır.

Edit HTML Slice penceresi açılır, pencere içerisinde oluşturulan metin kes / kopyala yöntemi kullanılarak yerleştirilir. Oluşturulan metin HTML olarak aktarılacağından metin başlığı koyu yapılmak istendiğinde başlığın başlangıcına <b> sonuna </b> konularak koyulaştırılır. Yani HTML komutları burada kullanılabilir. Metin düzenleme işlemi tamamlandıktan sonra OK düğmesine tıklanarak işlem onaylanır.

Oluşturduğumuz belgede grafik dilimleri var ise Özellikler penceresinde dilimi isimlendirmek gerekir. İsim, özellikler penceresindeki Slice bölümüne yazılan isimdir. Metin dilimlerine isim vermeye gerek yoktur.

Oluşturulan dilim internete aktarıldığında metin olarak aktarılmış olur.

Oluşturulan belgenin internette nasıl göründüğüne bakmak için File/Preview in Browser/Preview in iexplore.exe (F12) menüsü kullanılarak oluşturulan belge tarayıcıda ön izleme yapılır.

5.6. Açılır Menü Ekleme

Açılır menüler (pop-up menus) WEB sayfalarında çok yaygınlaştı. WEB sayfasında bulunan bir açılır menü sayfadaki bir düğmenin veya resmin altında gizlenen bir gezinti aracıdır.

Menüler başlangıçta gizlendiği için, küçük bir alana birçok bağlantı sıkıştırılabilir. Ayrıca alt menüleri de kapsayarak, bunları daha gelişmiş hale getirilebilir. Açılır menüler oluşturmak için JavaScript kodu yazmak sıkıcı olabilir. Fireworks bu işlemi iletişim kutusunda adları yazmak kadar kolay bir işlem haline getirmiştir.

Açılır menüler oluşturmak için belge içerisine dilimler eklemek gerekir. Yeni bir belge oluşturalım. Belgeye bir dikdörtgen çizin, dikdörtgene efektler uygulayabilirsiniz. Örneğin Inner Bevel, Outer Bevel veya gölgeler ekleyebilirsiniz. Dikdörtgeni çizdikten sonra dikdörtgen üzerine text aracını kullanarak metin ekleyin. Metinin özelliklerini de istediğiniz gibi değiştirebilirsiniz.

Metin ve dikdörtgeni çizdikten sonra birlikte hareket etmeleri için Modify/Group (Ctrl + G) menüsünü kullanarak gruplayınız.

Açılır menü oluşturabilmek için, dilim eklemek gerekir. Araç kutusunda Slice (dilim) simgesini kullanarak oluşturulan dikdörtgen ve metin üzerine bir dilim çizebilirsiniz ya da dikdörtgen seçili iken Edit/Inser/Rectangular Slice (Alt + Shift + U) menüsü kullanılarak dikdörtgen üzerine bir dilim yerleştirilir.

Özellikler (Properties) penceresinde dilim isimlendirilir.

Dilim seçili iken Modify/Pop–up Menu/Add Pop–up Menu menüsü kullanılarak açılır menü penceresi ekrana getirilir.

Pencere ekrana geldiğinde Content bölümünde açılır menünün metin, bağlantı (Link) ve hedef bölümleri yazılır.

Text bölümüne açılır menülerin isimleri yazılır. Açılır menü internete aktarıldığında fare göstergeci oluşturulan açılır menü üzerine getirildiğinde Text bölümüne yazılan metinler görülür. Başlangıçta bir satırdan oluşur. Yeni satırlar eklemek için Enter tuşuna basılır ve yeni satır eklenir.

Link bölümüne internette iken text kısmına eklenen metin üzerindeyken fare ile tıklandığında gidilmek istenen bağlantı yazılır.

Target bölümüne sayfada çerçeveler bulunduğunda veya bağlantılı sayfa yeni bir tarayıcı penceresinde açmak istendiğinde kullanılır.

Text veya metin bölümüne veri girmek için farenin sol tuşu ile çift tıklanır. Bilgi girildiğinde diğer hücreye geçmek için Tab tuşu da kullanılır. En son hücre üzerinde iken Tab tuşuna basıldığında yeni satır ekler.

Açılır menüler oluşturulurken bir menüye alt menü eklemek için, alt menü yapılacak satır üzerinde iken Pop-up Menu Editor penceresinde Indent Menu düğmesine tıklanarak alt menü yapılır. Alt menüyü iptal etmek için Outdent Menu düğmesi kullanılır.

Content sekmesinde düzenlemeler yapıldıktan sonra Next düğmesine tıklanarak Appearance sekmesine geçilir.

Apprearance sekmesinde, menülerin görünümü düzenlenir.

Up State seçeneklerinde, öğenin başlangıçtaki metin ve hücre rengi seçilir, Over State seçeneklerinde, imleç öğenin üzerine getirildiğinde görüntülenecek metin ve hücre rengi ayarlanır. Font ta yazı tipi, size metin büyüklüğü ve açılır menüde Vertical menü (dikey menü) ya da Horizontal Menü (yatay menü) ayarlanır.

Menü görünümleri ayarlandıktan sonra Next düğmesine tıklanarak Advanced Sekmesine geçilir.

Advanced sekmesinde, açılır menüdeki görünümü ayarlanır. Advanced sekmesinde de ayarlamalar yapıldıktan sonra Next düğmesine tıklanarak Position sekmesine geçilir.

Position sekmesinde menü ve alt menülerin konumları seçilir.

Açılır menülerin konumları belirlendikten sonra Done düğmesine tıklanarak dileme açılır menü eklenir.

Açılır menünün yerleşimi değiştirilmek istendiğinde, fare göstergeci eklenen açılır menü üzerinde iken el simgesi halini alır, fare göstergeci el simgesi şeklinde iken sol tuş basılı tutulur, fare hareket ettirilerek açılır menü istenen yere yerleştirilir.

Açılır menünün internette nasıl göründüğüne bakmak için File/Preview in Browser/Preview in iexplore.exe (F12) menüsü kullanılarak oluşturulan belge tarayıcıda ön izleme yapılır.

5.7. Açılır Menüyü Düzenleme

Açılır menü tamamlandıktan sonra, bunu işlem yaparken görmek istenebilir. Açılır menü Fireworks ön izleme penceresinde görünmez. Açılır menüyü görmek için tarayıcıda ön izleme yapmak gerekir.

Dosyayı ön izlemeden önce Fireworks’ün dosyayı nasıl ihraç edeceğini belirlemek için bazı ayarlamalar yapmak gerekir. Dosyayı ön izleme yaparken dahi program geçici resimleri ve gerekli HTML’yi oluşturur.

File/ HTML Setup menüsü seçilerek dosyanın ayarları düzenlenir.

HTML Setup penceresinde Document Specific ve diğer sekmelerde gerekli ayarlar yapılır. Include areas without slice objects seçeneği dilimler çizilmemiş olsa dahi bütün nesneleri aktarır. OK düğmesine basılarak işlem onaylanır.

Eğer HTML için dosya biçimi görülmez ise resmi önizlendiğinde aynı resmin tekrarlanan desenleri görülebilir. Dilimler için bir adlandırma biçiminin seçilmesi ile her dilimin ayrı bir ada sahip olması sağlanır.

Açılır menü üzerinde düzenleme yapılmak istendiğinde dilim seçili iken, Modify/Popup Menu/Edit Pop-up Menu menüsü kullanılarak açılır menüde düzenleme yapılır.

Düzenleme yapıldıktan sonra oluşturulan dosyanın ön izleme yapmak için, File/Preview in Browser/Preview in iexplore.exe (F12) menüsü kullanılarak ön izleme yapılır.