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

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:

Fazlalıkları silinmiş, background'ları yapılmış olarak hepsini birden görelim. Sayfanın üçüncü hali

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.

Yazı yazmak için alanlarımız oluştu