Ders 11 : Fireworks ile web sitesi hazırlama

By:
11 Yorum

Fireworks programının photoshop’ a göre en büyük artılarından birisi web tasarıma olan yakınlığıdır. Bunu ilk dersimizde kısaca özetlemeye çalışmıştım. Grafik animasyon dersinde sınav sorusu olarak sorduğum fireworks ile web sitesi hazırlama konusunu bu derste işleyerek Fireworks ile ilgili anlatacağım konuları bitireceğim. 

Anlatıma başlamadan önce bu dersin önceki 10 derse göre biraz daha zor ve karışık gelebileceğini söylemeliyim. Faydalı olmaası dileğiyle, çalışmaya başlıyoruz 🙂

  1. İlk olarak ders sonunda yapacağımız web sayfamızın ön izlemesini görmek içinde buraya tıklayabilirsiniz.
  2. Eğer bu uygulamayı bilgisayarınızda yapmak isterseniz sınav sorusunu, kaynak dosyaları ve uygulamanın son halini buraya tıklayarak indirebilirsiniz.
  3. Yukarıdaki 2 adımı geçtiyseniz ve bu satırları okuyorsanız fireworks ile web sayfası yapma konusunda hala ısrarlısınız demektir: ) 600*500 boyutlarında istediğiniz arka plan renginde bir Fireworks belgesi açınız. Açmış olduğunuz belgenin orta bölümünde aşağıda gibi bir içerik alanı oluşturunuz. Bu bölümü beyaz renkli yada daha açık renkli oluşturabiliriz. Sayfa tasarımını tamamen size bırakıyorum:) Ben ortadaki beyaz renkli içerik alanı için sayfaya uygun bir kare ekledim, eklemiş olduğum karenin köşelerini özellikler panelinden yuvarlıklık değerini 20 yaparak oval hale getirdim. Sağ kısmı sayfanın dışında kalacak şekilde belgeye ekledim. Yani karenin bir bölümü çalışma alanının dışında kaldı. Buraya kadar olan kısmın önizlemesini aşağıdan görebilirsiniz.

    Fireworks ile web sitesi hazırlama

  4. Sonraki adımda logoyu içerik alanın sol üst köşesine, başlığı ise içerik alanının üzerindeki boşluğa gelecek şekilde ekliyorum. Renk uyumunu yakalamak adına, logoda yer alan sarı renk ile içerik alanını belirleyen kareye 4px kalınlığında bir çerçeve kenarlığı ekliyorum. Yukarıdaki başlığıda yine aynı renk ile yazıyorum. Bu yazıya yansıma efektini nasıl vereceğinizi bilmiyorsanız Fireworks dersleri sayfasından 7 numaralı derste cd görüntüsüne yansıma efekti verdiğimiz bölüme bakabilirsiniz.
  5. Artık ana menünün yer alacağı butonları eklemeye başlayalım. Logo nun altında yer alan boşluğa yine aynı sarı tonlarda köşeleri oval olan bir dikdörtgen ekliyoruz. Bu dikdörtgeni kopyala yapıştır yöntemiyle çoğaltarak 5 tane olacak şekilde sayfaya ekliyoruz. Web sayfamızda yer alacak alt sayfa isimlerini bu butonların üzerine ekliyoruz. Menü için eklemiş olduğunuz dikdörtgenlerin içerisini stil panelinden seçeceğiniz stillerle de doldurabilirsiniz.
  6. Sitenin alt bölümünde bütün sayfalarda görünecek olan site tasarım şeridini ekleyip, bu bölüme istediğiniz yazıyı yazabilirsiniz. Ana araç çubuğu üzerinde ve alt bölümde yer alan web grubu araçları içerinden dikdörtgen sıcak nokta aracını seçiniz. (Aşağıdaki resimde bu aracın işaretlendiğini göreceksiniz) Bu araç seçili iken yine aşağıdaki resimde olduğu gibi butonların üzerine yaklaşık olarak aynı büyüklükte bir dikdörtgen çiziniz. Bu durumda özellikler panelinde aşağıdaki resimde görülen Bağ, alt ve hedef alanlarının aktif hale geldiğini göreceksiniz. Bu bölümde bağ alanına ilgili sayfayı ne olarak isimlendireceksiniz onun ismi . htm şeklinde dosya ismi girmelisiniz. Yukarıdaki örnek sayfa için söyleyecek olursam : ana sayfa için index.htm, resimler.htm, hakkimizda.htm, personel.htm ve iletisim.htm verilerini girebilirsiniz. Sizde web sayfanızın alt sayfalarına isim verirken Türkçe karekter kullanmamaya dikkat edin ve ana sayfasını her zaman index ismiyle kaydetmeyi unutmayın.
  7. Sayfaya eklemiş olduğunuz bütün butonlar için yukarıdaki işlemi mutlaka peşinen yapmalısınız. Sonradan yapacağınız değişikliklerde problem yaşama ihtimalinizin yüksek olduğunu unutmayın. Artık sitenizin sabit kalacak olan bütün bölümlerini oluşturduk. Yani şu ana kadar hazırladığımız bölümler bütün alt sayfalarda sabit olarak kalacaktır. Biz bu noktadan sonra içerik için boş bıraktığımız beyaz alana istediğimiz içeriği ekleyip Dosya menüsünden dışa aktar diyerek kaydedeceğiz. Kayıt ekranında dosya adı kısmına butonlarda kullandığımız sayfa isimlerini kullanmayı unutmayın. Tek harfi bile yanlış yazsak linklerin çalışmayacağını bilmeliyiz. Dosya adı altında yer alan Dışa aktar  kısmını Html ve Görüntüler olarak seçiyoruz. Bu şekilde kaydet dediğimizde istediğimiz isimde bir htm sayfası bir tane de resim oluşturması gerekiyor. Site içeriğinin olduğu yeri temizleyerek yeni bir içerik ekleyip bu işlemi 5 defa (yada kaç tane buton kullandıysanız o sayıda) yapıyoruz.. Benim sayfamda 5 tane buton olduğu için ben beyaz alanı 5 defa değiştirerek farklı kaydet yöntemiyle 5 adet htm dosyası oluşturuyorum.
  8. Bilgisayarınızda index.htm ye tıklayarak sayfanızı kontrol edebilirsiniz. Eğer bütün bağlantılarınız sorunsuz çalışıyorsa bütün bu dosyaları web servere aktararak sitenizi yayına koyabilirsiniz. Bu yöntemle 1-2 saat gibi kısa bir sürede basit bir web sayfasını kendiniz hazırlayıp, yayınlayabilirsiniz. 🙂
  9. Bütün sayfaları farklı kaydederken aynı zamanda Fireworks belgesi olarak (*.png) formatında da kaydederek yedeklerini alabilirsiniz. Böylelikle küçük değişiklikler yapmak istediğinizde png formatındaki sayfayı değiştirip tekrar farklı kaydet yöntemiyle htm formatına dönüştürabilirsiniz.
  10. Aşağıda yer alan yorum formu ile aklınıza takılan bölümleri paylaşabilirsiniz. İlk bölümde paylaşmış olduğum linki tekrar paylaşayım. Bu derste yapmış olduğumuz 5 safyalık web sitesinin bitmiş halini buradan görebilirsiniz.

11 Yorum

Your Thoughts