Fireworks'te Sitenizi Dilimleme ve Kaydetme

Geçen sayıda başladığımız Digital Arts için hayali web sitesi çalışmasına dilimleme bölümü ile devam ediyoruz. Bu yazıda tasarımımızı internete aktarmaya hazır hale getirmek için dilimlemeyi göreceğiz.



Dilimleme



Web sitemizin grafik anlamında tasarımını tamamladıktan sonra dilimleme safhasına geçiyoruz.



Dilimleme aşaması yeni başlayan pek çok kişinin en fazla takıldığı kısımlardan biridir. Dilimleme Dersimizde dilimleme kısmını en kolay şekilde ve fazla zorlanmadan en hızlı biçimde halletmeye çalışacağız.



Çalışmamızı açalım.








Belli başlı yerlere slice'lar atayarak başlayalım. Öncelikle logo kısmının altındaki beyaz kısmı seçelim ve sağ tıklayalım. Açılan menüden Insert Rectangular Slice seçelim.







Sonra Bu yeşil renkli kısmı seçerek Properties kısmından bir isim girelim. Bu isim daha sonra dosya adı olacaktır. Bunun için biz bu kısmı "logo" diye isimlendiriyoruz.







Sonra üstteki 3 boyutlu dergi resmini seçelim ve aynı işlemi ona da yapalım. "Yeni Sayı!" şeklinde belirttiğimiz başlığa, Flash alanı olarak belirlediğimiz kısma da rectangular slice ekleyelim. Flash alanı kısmını daha sonra Flash kullanarak hareketli hale getireceğiz. Ayrıca "Tıklayın" isimli butonu da slice yapabilirsiniz. Daha sonra logo kısmına yaptığımız gibi Properties kısmından bütün slice'ları isimlendirelim.



Bunları yaptıktan sonra Fireworks her bir slice (dilimleme) için yeşil renkte bir katman oluşturacaktır. Görünüm şu şekilde olacak.








Üst bölümde dilimleme işlemi bitti diyebiliriz. Alt bölüme geçiyoruz şimdi. Üstteki kırmızı şeritli alanı keselim. Araç kutusundan Slice tool'u seçelim.







Tutup çekmek suretiyle üzerinde bir dikdörtgen çizerek slice oluşturuyoruz.







Haberler & Gelişmeler şeklinde başlığı, haberlerdeki resimleri, sağ kısımda yer alan abonelikle ilgili ilanı, programlara ait logoları aynı şekilde sağ tıklayıp Insert Rectangle Slice diyerek dilimliyoruz ve isimlendiriyoruz.








En son olarak da arka planı keselim. Bunun için en soldan yatay olarak 5 px uzunluğunda ve beyaz çizginin sonuna kadar slice oluşturalım. Sitede kullanacağımız arka planı oluşturmuş olduk böylece.







Diğer kısımları tamamen Dreamweaver kullanarak manuel olarak yapacağız. Şimdi sitemizde bu kestiğimiz resimleri export edelim ve Dreamweaver'da kullanılmaya hazır hale getirelim.



Şimdi Fireworks'te File > Export diyelim. Karşımıza gelen iletişim penceresinde aşağıdaki özellikleri göreceğiz.







Bunlardan en önemlileri açıklayalım:




Adobe PDF: Bu özelliği seçtiğinizde sayfanızı veya başka sayfalarınız varsa tamamını belirleme yaparak pdf olarak kaydedebilirsiniz.



HTML and Images: Bu kısmı seçerseniz, tasarımınız html ve resimleri ile birlikte kaydolacaktır. "Include areas without slices" seçeneğini işaretlerseniz, dilimlemediğiniz alanlar da kaydedilecektir. "Put images in subfolder" seçerseniz, resimleriniz html dosyasının yanında oluşturulan images klasörüne kaydedilecektir. HTML bilginiz ileri düzey değilse bu seçeneği kullanabilirsiniz.







Images Only: Bu seçenek sadece dilimlediğiniz kısımları yahut seçiminize göre dilimlemediğiniz alanları da ayrıca kaydeder. Ayrıca bir HTML sayfası kaydedilmez. Eğer tasarımınızdan sadece resimleri kaydederek Dreamweaver'da sitenizi CSS veya tablo ile manuel olarak siz oluşturacaksanız, bu seçeneği kullanabilirsiniz.




CSS and Images: Bu özelliği seçtiğinizde tasarımınız otomatik olarak CSS ile stillendirilir ve layer'larla web sayfanız hazırlanmış olur. Resimler, bir CSS dosyası ve bir HTML dosyası olarak tasarımınız kaydedilir. CSS'ye az çok hâkimseniz bu seçeneği tercih edebilirsiniz. Çünkü Dreamweaver'da açarak tasarımınızın karışıklığına göre bir düzenleme yapmanız gerekecektir. Ancak basit bir tasarım oluşturmuşsanız, çok fazla sıkıntı yaşamazsınız.



Bundan sonra Dreamweaver'da bir site haritası oluşturarak yeni bir html dosyası üzerinde çalışmalara başlayabilirsiniz. İsterseniz Fireworks tarafından kaydedilen HTML sayfasını düzenleyerek istediğiniz şekle sokabilir, yahut da tablolar ve div'ler yardımı ile kaydettiğiniz müstakil resimleri kullanarak tasarımınızı Dreamweaver içinde yeni baştan oluşturabilirsiniz.



Benim en tercih ettiğim nokta, resimler müstakil olarak kaydettikten sonra, Dreamweaver'da sıfırdan bir sayfa açarak div'ler yardımı ile sayfayı oluşturmaktır. Biraz zahmetlidir, ama en hızlı ve en iyi netice bu şekilde elde edilecektir.



Bir başka yazıda görüşmek üzere...