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

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.