Photoshop ve Dreamweaver ile tasarım (2. bölüm)

1. Photoshop'un oluşturduğu sayfaya bakalım

Tüm gördüğünüz şeyler birer resim, yani ortadaki beyaz alan da beyaz bir resim parçası...

Photoshop'un oluşturduğu parçaları rahat görebilmek için, CellPad'e 5 piksel değer girdim, border'ı 1piksel ve yeşil yaptım.
Buradan bakabilirsiniz 2.

Photoshop'un oluşturduğu sayfayı DreamWeaver'da açıyoruz.

Resmin
kesilen tüm parçaları web sayfamızda işe yaramayacak... İşi bu
parçaları silmekle başlıyoruz. Kolaylık olması için CellPad'e bir değer
girin ki parçalar birbirinden ayrılsın, böylece işe yaramayacakları
daha kolay saptarsınız... (aşadığaki örnekte 5 piksel değer
girilmiştir)

Bu kontrol sırasında bazı gereksiz hücreler de gözünüze çarpacaktır. Sağdaki hücreler gereksiz, o bölümü tümüyle siliyoruz....


Silinmiş hali aşağıda...

Fazlalıkları silinen sayfaya buradan bakabilirsiniz

3.

Background ile alanları dolduralım
Tekrar eden resim parçalarıyla gereken yerleri doldurmayı biliyorsunuz.

background="images/xx.gif"

Bu parçaları 1-2 piksel olarak hazırlamak en uygunu. Çünkü amacımız sayfayı olabildiği kadar küçük boyutta hazırlamak...

Sağ taraftaki bölüm
Üst taraftan başlayalım. Aşağıda gördüğünüz bölümü 1_06.gif adlı resmi kullanarak background olarak doldurdum.

1_06.gif



Alt tarafta devam edelim:

1_19.gif

Ayrı bir parça olarak kestiğimiz çizgili bölümleri resim olarak çağırıp ilgili yerlere ekliyoruz.

1_14.gif



Kullandığımız parçalar bunlar:


Tüm yerleştirmeler tamamlanınca sağ bölümün görünümü aşağıdaki gibi olacak...



Sol taraftaki bölüm

Burada kullanacağımız parçalar da bunlar:
Bitmiş hali de bu:



Baktığınız zaman 3. Hali ile Photoshop'un oluşturduğu arasında fark yok gibi görünüyor. Ama önemli bir fark var.