Photoshop ile yaptığımız bir tasarımı Dreamweaver'a aktarma (2. Bölüm - Dreamweaver'a aktarma)

1. bölümde tasarladığımız tasarımı sitemize uygulayacağız...

Dersimizin 1. bölümünde Photoshop'ta sitemizi tasarlamıştık. Şimdi de bu tasarımı Dreamweaver'da kullanmada.

Sitemizi tasarlayıp Photoshop'ta kaydetmiştik ve elimizde images adlı bir klasör ve sitemiz.html oluşmuştu. Sitemiz.html bizi fazla alakadar etmiyor. images klasörü içerisindeki parçaladığımız resimleri sitemizde uygun yerlere koyacağız.



Şimdi Dreamweaver?ı açıyoruz, sıfırdan başlıyoruz. Layout Table ile 800?e 600lük bir alan hazırlıyoruz. Arka plan rengimizi kırmızının tonlarından bir tanesini seçtim. Şimdi resimleri üzerine yerleştirme zamanı geldi.





Şimdi tek yapmamız gereken ölçülerle Layout Table oluşturmak. En önde 190 piksellik bir kare vardı. Oraya logomuzu koyacaktık. Öncelikle onun için bir tablo oluşturalım.



Şimdi de arka plan için üst tarafta oluşturduğumuz bölümü yapalım. Onun da yüksekliği 90 pikseldi. Aşağıda göründüğü gibi çizelim.



Şimdi arka plan belirlemek için Standard görünüme geçiyoruz.



Properties bölümünde bulunan Bg bölümünden resmimizi buluyoruz.



Resmi bölerken üst bölümdeki geçişi 2 piksellik bir resim olarak kaydetmiştim. Resim kendisini devam edeceği için bu resmi seçiyoruz.



Sitemiz şu hâli aldı. Oluşan çizgiler de çizdiğimiz tabloların kılavuz çizgileri. Siteyi kaydettiğimizde bu çizgiler gözükmeyecek.



Butonlarımız vardı. Draw layout cell ile butonların büyüklüğü kadar bölümler oluşturuyoruz. İstersek bu alanı tek bir bölme olarak hazırlayıp öyle de butonları yerleştirebiliriz.



Alanı seçip Common menüsünde Image seçeneği ile ekliyoruz. Diğer seçenekleri de kullanabiliriz ama dersin içeriği bakımından yüzeysel olarak anlatıyorum.



Resmi ekledikten sonra butonları seçip Properties bölümünden bağlantıyı sağlıyoruz.



Üstteki butonlara isim verdikten sonra kabaca sitemiz bitmiş oluyor. Şimdi metinlerin bulunacağı bölümü yapmaya başlıyoruz.



Şimdi şöyle bir detay verelim. Layout bölümünde ?Layout Table? ve ?Draw Layout Cell?i inceleyelim. Sitemizin temelini buradan oluşturuyoruz. Layout Table ile sitemizdeki tabloları oluşturuyoruz. Draw Layout Cell ile de yazı alanımızı oluşturuyoruz. Her ikisini de gerektiği yerde kullanabiliyoruz. Layout Table?ın içerisine Layout Table tekrar çizebiliyoruz. Ama Draw Layout Cell içerisine Layout Table veya Draw Layout Cell çizemiyoruz. Bu mantığı oturttuktan sonra alanımızı çizelim.



Şimdi Photoshop ile tasarladığımız klasörden gerekli parçaları buluyoruz. Soldaki menü için anlatmak gerekirse, 3 parçadan oluşmaktadır. Bir tane gelişigüzel bir Layout Table çiziyoruz. Genişliğimiz 200 pikseldi. Gölgelendirme verdiğimiz için 200 pikselden biraz daha büyük olmayacaktır. Resmimizin üzerine geldiğimizde bir bilgilendirme kutusu çıkıp resmin boyutlarını görmemize yardımcı olacaktır. Resmimiz gördüğünüz gibi 205 piksel genişliğinde ve 9 piksel uzunluğundaymış.



Üstte ve altta bulunan oval köşeli bölüm için bir tane uygun boyutlarda Layout Table çizip arka plana gerekli resmi koyacağız. Ama önce dediğimiz gibi menü uzunluğunda bir Layout Table çiziyoruz. Resmimiz 205 piksel genişliğindeydi. Bu Layout Table da 205 piksel genişliğinde olmalı. Yüksekliği de şimdilik önemli değil. Gelişi güzel bir uzunlukta bırakıyoruz.



Deminki resmimizi yerleştireceğiz. Bir tane daha Layout Table çizeceğiz. 9 piksel uzunluğunda, table?ın içerisine ve en üstüne sabitlemeliyiz.

Tablomuzu oluşturduktan sonra Standart görünüme geçip arka planımızı bu bölgeye atıyoruz. Aşağıdaki Properties bölümünden yapıyoruz. Ardından aynı işlemi aşağıdaki bölüm için de yapıyoruz. Bu resmimizin uzunluğu da 15 pikselmiş. Onun için tablomuzun alt tarafına 15 piksel uzunluğunda bir tablo çizip bu resmimizi yine arka plan olarak atıyoruz. Bu işlemden sonra işimiz bitti gibi.



Ön izleme yaparak yerleştirdiğimiz şekilde bulunduğunu görebiliriz. Şimdi Layout bölümüne gelerek ortada bulunan alanı yapıyoruz. Bu bölgeye yazı yazacağımız için bu bölgeyi Draw Layout cell ile yapacağız. Arada kalan bölgeyi tamamen Draw Layout cell ile oluşturup arka planı belirlediğimiz 2-3 piksel olarak kaydettiğimiz aradaki bölümü arka plan olarak atıyoruz buraya.



Gördüğümüz gibi 3 piksellik bir resim ile tüm bölümü oluşturmuş olduk. Bu sayede sitemiz hem hantallıktan kurtulmuş, hem de güzel bir görünüme kavuşmuş olacaktır. Ortadaki bölümü Draw Layout cell ile yaptığımız için yazı yazdığımız zaman biraz fazla menü olursa bölüm kendini otomatik olarak uzatacaktır. Arka plan resmimiz de kendini otomatik olarak uzayan bölgeyle beraber uzamaya devam edecektir. Şimdi Aynı şekilde orta bölgedeki yazılarımızın olacağı bölümü de oluşturuyoruz?



Sitemiz kullanılabilir bir durumda. Size sadece içerisini doldurmak kalıyor.



Mesela bir ayakkabı firmasının sitesi olarak tasarlamış olalım? Sitemizin içeriğini yerleştirdikten sonra işimiz bitmiş oluyor.



Tasarım aşamasındayken transparan çalışmıştık. Şimdi de bu transparan çalışmamızın kolaylıkları sayesinde sitenin görünümünde değişiklikler yapalım?





Gerisi sizin yaratıcılığınıza kalmış bir şey. Başarılar dilerim?

(Unutmayın: Bu dersi tablolarla anlattım. Yeni başlayanlar "Tablolarla anlatılmış, daha kolaydır, divlerle hiç uğraşmayayim" gibi bir düşünceye kapılmasın. 1. dersin başında da bahsettiğim gibi bu 2 ay önce hazırlamış olduğum bir ders. O zamanlar divlerle pek aram olmadığı için tablolarla hazırlamıştım. Kesinlikle divlerle çalışmanızı öneririm. Div mantığını kavradığınız zaman bu tip siteleri yapmanız çok daha basit olabiliyor.)

  • Etiketler;
Eray Karayel
Bilgileri en kısa sürede eklenecektir.
Yorum Yaz

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

Bu çalışma zaten dergide verildi diye hatırlıyorum
:D
Evet, bu çalışma zaten dergide verildi. Dersi dergiye veren kişi ben, siteye dersin eklenmesini isteyen siracel, dersi ekleyen ben. Başka sorun?
Soru sormadım zaten .
Sorun derken, "Başka soru soracak mısın?" anlamında değil, sorunun varmı başka anlamında demiştim. O cevaplanmaz normalde ama cevaplamışsın, o da senin sorunun...
"sorunun varmı ? başka anlamında demiştim" diyorsun. BU cÜmle Soru anlamı içerir . Diyorsun "bu cevaplanmaz cevap larsan o senin sorunun olur" :D bence böyle bir şey demen senin sorunun . . . ben sorun yaratman için o yorumu yazmadım ;)
Sorun nedir ?? :D
:gul:
Allahım yarabbim.!!!
güzel bi çalışma arkadaşım
Selamlar Bir cok siteyi dolastim ama böyle anlatim görmedim, tam aradigim bir konu. cok tesekkürler.
yahu ben bu lay out table olayını anlamadım :S cs4 kullanıyorum. Table oluşturuyorum ama layout table oluşmuyor :S lütfen yardımcı olur musunuz?
ne yorumlarım yayınlanıyor nede sorularıma cevap veriliyor nasıl bir site bu anlamadım :S
siteme sayaç nasıl eklerim bi yardım ederseniz sevirim Eray bey hatta size msn adresimi versem ekler msnz bir müessesede staj yapıormda görevim müessesenin web sayfasını düzenlemek stajımın bitmesi çok kısa bi süre kaldı lütfen.
cx; İki dakika adam ol. Bir şey yazdığını sanıyorsun ama saçmalamaktan öteye gitmemişsin. Şurada millete yardımcı olmak için bulunuyoruz. Senin başka niyetin varsa sorun çıkartanları da beraberinde götürebilirsin. Akıllı ol iki dakika... kerem; Dreamweaver'da cs3'e kadar böyle bir sayaç durumu yok. (en azından bildiğim kadarıyla) Cs4'de varsa bilemiyorum. htrddesign; Bu alanda yapılan yorumlar kontrolden geçtikten sonra yayınlanıyor... Ders ile ilgili sorularını kişinin özeline yazman daha doğru olacaktır ki öyle de yapmışsın... Elimden geldiğince cevaplamaya çalıştım...
Evet okudum. Ayrıntılı açıklaman ve önemli tavsiyelerin için çok teşekkür ederim, Büyüksün! Hemen de işe koyuldum zaten:kirp:
tek tek resim çağırmaya gerek yok bence zaten tasarımı slice ladığımızda html olarak kaydedip,tablolara bölüyor resmin üzerine yazılar veya resimler eklemek içinde bg imageden resmi gömmek yeterlidir.önemli olan tasarımınızın ve flash larınızın kaliteli olmasıdır.Css gibi karmaşık yapılara giremeyenlere tavsiyem slice yöntmiyle çalışmanızdır.Herkeze kolay gelsin
lAYOUT GTABLE BENDE BULAMADIM YAHU YARDIM EDIN KAC KERE SORULMUS AMA
Saçma sapan diyaloglara girileceğine bu tür sorulara cevap verilmesi gerekmezmi? Ben cevap vereyim : Layout sekmesi altında table tıklamanız yeterli.. Eğer Insert Araç çubuğunuz açık DEÐİLSE; Insert - Layout Objects - Layout Table menü yolunu izleyiniz...
super super super cok tesekkur ederim
DERGİYİ TAKİP EDEMEYENLER İÇİN GÜZEL BİR ÇALIŞMA OLMUŞ EYWALLAH:kirp:

Yukarı Git