Fireworks ile Grafik Sitesi - 2. Bölüm

Bir önceki dersteki grafik sitesi çalışmamıza açılır menüler ekleyerek devam ediyoruz.

FW'de çalışmamıza açılır menüler ekleyerek devam ediyoruz.

Önceki çalışmamızda üst tarafa yerleştirmek amacıyla küçük bir parça hazırlamış ve üzerine "linear" dolgusu yapmıştık. Şimdi bu parçayı yine kullanacağız. Amacımız üst tarafa başka menüler eklemek.



Yukarıdaki gibi olmalı. Bu parçayı kopyalama yöntemi ile çoğaltarak kullacağız. Ama bu kez iç dolgusunu değiştirmek istiyorum. Parçamızın iç dolgusunu şu şekilde yapıyoruz: Dolgu için "Solid" seçin, "renk": #A4C4E3, "edge": Antialias olsun, "texture" ise önemli değil, ama ben sıfır yaptım. Siz de isteğinize göre ayarlayın. "Effect" bölümündeki "+" işaretine basın, açılan menüden "Shadow and Glow" bölümünden "Drop Shadow" seçin. Böylece küçük bir gölge eklemiş olduk.



Şimdi bu şeklimizi çoğaltacağız, bir önceki derste anlattığımız "Dublicate", "Clone", "Copy+Paste" gibi yöntemlerden biri ile çoğaltıp beş ayrı parça oluşturalım.

Resimdeki gibi çoğalttığımız şeklimizi üst taraflara yerleştirelim. Bu işi yaparken LAYER bölümünde dizilişe dikkat etmelisiniz. İlk çizdiğimiz RECTANGLE (Dörtgen) parçanın üzerinde olmalı.



Artık üst taraflara menülerimizi yapabiliriz. Yazılarımızı hazırlayalım. Bunlar için ben yeni bir LAYER kullanıyorum. Siz de öyle yaparsanız işimiz kolaylaşacak. Evet, "A" simgeli Text Tool'u kullanarak yazılarımızı hazırlayalım.



Ben üstte gördüğünüz gibi yazıları hazırlayıp yerleştirdim ve orta alana da daha önce hazırlanmış efekt verilmiş bir resim koydum. Alt sağ köşeye de hayalî yayınevimizin ismi olan "Osmanoğlu Yayınevi" yazısını yerleştirdim. Siz de kendinize göre bir şey hazırlayabilirsiniz. Hazırladığımız bu yazılara alt menüleri nasıl yerletireceğiz?

Alt menüler için "slice"lar oluşturmamız gerekecek. Çünkü bütün web olayları slice'lar (dilim) ile alakalıdır. Araç paletinden "Slice Tool"u seçiyoruz. "Slice Tool"u aynen RECTANGLE gibi kullacağız.

Mouse'u getirip "eserler" yazısının üzerine bir dörtgen çizelim. Aşağıdaki gibi yeşil bir alan oluşacaktır.



Bütün işlemlerimizi bu yeşil alan üzerinde yapacağız. Ben sadece birinin üzerinde neler yapılabileceğinden bahsedeceğim, diğerlerini de siz aynı şekilde isteğiniz doğrultusunda ayarlayın.



Slice'ı çizdikten sonra seçiyoruz. Seçtiğimiz zaman tam ortasında saat resmine benzeyen bir işaret belirdi. Ayrı bir not: Slice'ların her biri dışarı ayrı bir resim olarak çıkar. Grafik sayfalarından oluşan web sayfalarını indirdiğinizde resimlerin anlamsız parçalar halinde olmasının sebebi de budur. Bu yüzden web sayfalarınızı istediğiniz kadar dilimlere ayırabilirsiniz, ne kadar çok dilim olursa sayfa o kadar hızlı açılır; ancak sayfanın bütünlüğünün bozulmaması için mümkün mertebe orantılı sayıda dilimler oluşturmak daha akıllıca olacaktır.

Geçiyoruz... Şimdi dilimimizi seçtik ve seçili olduğu halde sağ tıklayalım (isterseniz saat işaretinin üzerinde sol tıklarsanız da aynı komut verilecektir). Karşımıza bir menü açılacaktır.



Gördüğünüz gibi birçok özellik var. Çeşitli web olayları buradan yapılıyor. Bunu bilmenizde fayda var. Ancak biz hepsini görmeyeceğiz şimdi, ileride diğerlerini tek tek anlatacağız. Bizim yapmak istediğimiz açılır menüler eklemek. Bu sebeple "Add Pop-up Menu..." komutunu kullacağız, öyleyse tıklayın bu komuta. Şöyle bir iletişim kutusu gelmeli.



Buraya çeşitli yazılar içeren menüler ekleyeceğiz. "Text" yazan kısmın altındaki beyaz alana tıklayın ve bir şeyler yazın. Artı işaretine tıklayarak menü sayısını artırabilirsiniz. "Link" yazan kısmın altına basıldığı zaman gideceği adres, "Target" yazan kısmın altına da web sayfamızın tıklanıldığı zaman aynı sayfada mı, yoksa boş bir sayfada mı (blank) açılacağını belirleyeceğiz. Ben bir kaç menü ekliyorum, siz de kendinize göre ekleyin.



Böyle bir örnek hazırladım, siz de kendi kafanıza göre birşeyler hazırlarsınız. Sonra "Next" butonundan devam edip bir sonraki adıma geçelim. Sonraki adımlar çok kolay, yazı tiplerini, renkleri belirliyor, açılır menünüzün butonun neresinde duracağını tespit ediyorsunuz. "Next" diyerek işlemlerinizi tamamlayın ve en son "Done" diyerek bitirin. Artık açılır menümüz hazır. Web sayfasında görüntüleyerek kontrollerinizi yapabilirsiniz. Program içinde bu işlemleri görmeniz mümkün değil, bu yüzden mevcut browser'ınızda görüntülemelisiniz. F12 kısa yol tuşuna basın veya File > Preview in Browser > .... komutunu verin.

Son durum aşağıdaki gibi oldu:



Elbette menünüzü daha farklı şekillerde yapmanız mümkün. Sayfanızın ahengine ve tasarım özelliklerine göre değişik şekiller, renkler kullanabilirsiniz.

Hepinize iyi çalışmalar ve başarılar diliyorum.
  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

herşey için çok teşekkürler.mükkemmel anlatım .uzun süredir aradığım bilgiler..çok teşekkürler
abicim harika olmuş tşk ederim..:)
çok teşekkürler helal olsun
anlatım için çok teşekkürler.
Menülere yazı yazmadan önceki adımda sorun yaşıyorum.Dersin .png dosyasını paylaşabilir misiniz?
süper anlatim tesekkur ederim.
MÜKEMMEL BİR ANLATIM TEBRİK EDİYORUM SENİ ABİ !!
Bu şekilde yaptığımız dosyaları DreamW. da nasıl kullanabiliriz HOCAM , Benim dreamw. de site hazırlama gibi bir görevim var . Bende dreamw.da böyle bir açılır liste eklemek istiyorum, LÜTFEN! yardımcı olun hocam :uzul: şimdiden çok teşekkürler
gerçekden çok sağol abi ya :D ödevim vardı bu kkonuyla yardımların için çok teşekkür ederim
eliene sağlık arkadaşım..
çok teşekkürler çok yararını göreceğim..:gul:
walla abi helal sana yha bole anlatım okulda bıle yoK ınanki:kirp:
ÇALIŞMA İÇİN TEŞEKKÜR EDERİM ANCAK EXPORT EDİYORUM DW DE SAYFAYI RESİM OLARAK GÖRÜYOR
SİRACEDDİN BEY PROBLEMİ HALLETTİM SİTEME ANKET EKLEMEK İSTİYORUM BU KONUDA YARDIMCI OLURSANIZ SEVİNİRİM
Sorularınızı Forum bölümüne sorun lütfen.
TEŞEKKÜRLER İNANIN BU SİTE ÇOK SAMİMİ GELİYOR BANA... BİZLERE ÇOK ŞEY KAZANDIRIYORSUNUZ .. ALLAH RAZI OLSUN..
ben anlattığınız herşeyi uyguladım fakat sayfanın sağ tarafında boş bir kısım kalıyor. nasıl ortalayabilirim?
Bende yaptım ama arkadaşın dediği gibi sayfanın sağ tarafında boş bir kısım kalıyor onu nasıl ortallayabilirz?
ya sizden bir yardım istesem ben şimdi button yaptıgımda kendim yapıyorum burdaki gibi otamatık olarak deyil ama ben buna link eklemek istiyorum bu yolla yapıyorum ama isim yazmayıncada ufak bir kutucuk cıkıyor oda goze hiç guzel durmuyor bu konuda yardım alabilirmiyim
Hocam gercekten cok guzel calısma eline saglık
bu siteyi normal bir site gibi diğerlerinin görmesi için napıcaz?????

Yukarı Git