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

[Mustafa38]

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


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. [/b]




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

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.