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.

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...

  • 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!

Hocam buraya kadar sorunsuz tamam da. Mesela link verme olayında üzerine gelince şekli felan değişiyor. Altı çizili oluyor yazının veya arkaplanındaki resme lienar uygulanmışsa tersine dönüyor efectli oluyor bu nasıl yapılıyor. Bu konuda da devamını yazarsanız memnun olurum. Bu arada makele için teşşekkürler.
ben dilimledikten snra tablolara yerleştiriorum fakat aralarında boşluk oluşuo.:agla:
Tablolardan ziyade bu tür çalışmalarda CSS kullanmanızı öneririm. O zaman en ince ayarları dahi sıkıntısız bir şekilde yapabileceğinizden problemlerle pek karşılaşmayacaksınız.
hocam resimler görünmüyor , silinmiş sanırım yenilerseniz sevinirim. kolay gelsin
Derslere ait resimlerde bir sorun yok. Yenileyerek tekrar bakmanı öneririm.
evet resimler görün müyor ama sorun baglantıdadır ben ce diger sitelere de bakmanızı öneririm eger onlardada görünmezse sorun baglantıdadır:uzul:
ya şimdi böyle tema yapınca dreamveawerda bu yazıları editleyemiyoz nasıl oluyor bi anlatsanız
Arkadaşlar, ben yukarıdaki dilimlenmiş siteyi css ile yaptım. İsteyen arkadaşlar indirebililer. Css ile dilimlemeye örnek olması açısından faydalı olacağını düşündüm.. http://rapidshare.com/files/307567046/digitalarts_sablon.rar
@asker258 . kardeş verdiğin css dosyasına baktım. burdaki stilleri falan html dosyamıza çağırıp, divlerin yerini, iç içe geçenleri falan bulmamız gerekiyor değil mi?
unutmadan siracel'e de teşekkürler böyle bir ders hazırladığı için.

Yukarı Git