Kim korkar Frontpage' ten...(Son)

Frontpage ile kolay bir şekilde nasıl web tasarımı yapabileceğimizi birinci yazımızda öğrenmiştik. Bu yazının ikinci ve son bölümü ile de tablo ekleme yöntemi ile ana sayfanın başlık kısmının nasıl hazırlanacağını öğreneceğiz.

WEB SİTELERİNİN ANA SAYFASININ TASARIMI

Web sayfası hazırlarken belirli alanlara özellikle de ana sayfanın en üst bölümüne (şirket ismi, resmi yada logosunun bulunduğu bölüm) tablo ekleme yöntemi ile kullanışlı tasarımlar yapabiliriz.

Yine her birinci bölümde anlattığımız gibi Design sekmesinde index.htm’de (Ana sayfa) çift tıklayınca index.htm açılır. Burada menü çubuğunda Table > İnsert > Table’a tıklayınca İnsert Table ekranı (diyalog kutusu) açılır. Bu ekranda Size’ın altında Rows’a 7 ve Columns’e de 1 sayılarını girelim. Layout’ın (yerleşim) altında Alignment’da (hizalama) Center, Float’da (kaydırma) Default, Cell Padding’e (hücre doldurma - hücre arasındaki marj ) 0 ve Cell Spacing’e (hücre aralığı - hücreler arasındaki genişlik) 2 ve Size’a (boyut) 0 ve İn Pixels’e (piksel cinsinden) 750 sayılarını girelim. Borders’ın altında Size’a (web tasarımı amacıyla görünmez tablo - noktalı çizgiler sadece tabloyu biçimlendirmek için görünüyor - oluşturmak için 0’ı seçiyoruz) 0 sayısını girdikten sonra OK’e tıklayalım. Bu yaptığımız işlemlerle 5 satırlı ve 1 sütunlu tablomuzu hazırlamış olduk.

1. Şimdi 1.satırda çizgilerin içinde sağ tuşla tıklayalım. Burada Cell Properties’i seçince, Cell Properties ekranı açılır. Burada Color:’ı (Lacivert) seçelim ve OK ‘ye basalım. 1.satırda lacivert renk kuşağı oluşturmuş olduk.

2. 2.satırın içinde iken menü çubuğundan İnsert > Picture >From Files’ı tıklayınca Picture ekranı açılır. Burada (hazır olan) banner’ın üzerinde çift tıklayalım ve İnsert’e basalım. Banner ikinci satıra yerleşir. Böylece birinci satırda lacivert ince bir renk kuşağı, ikinci satırda ise banner’ı (Örnek: Sol kenarda FENERBEHÇE logosu ve yanında FENERBAHÇE yazılmış olsun) oluşturmuş olduk.

3. 3.satırda iken menü çubuğundan İnsert > Picture > From Files’ı tıklayınca Picture ekranı açılır. Burada ekleyeceğimiz resmin üzerinde çift tıklayalım ve İnsert’e basalım.Resim, 3. satıra yerleşmiş olur.(Örnek: Buraya RÜŞTÜ SARACOĞLU stadının resmini koyalım.)

4. 4.satırda çizgilerin içinde sağ tuşla tıklayalım. Burada Cell Properties’i seçince, Cell Properties ekranı açılır. Burada ekranın içinde Background’ın altında Color:’ı (lacivert) seçelim ve OK ‘ye basalım. 4.satırda lacivert renk kuşağı oluşturmuş olduk.

5. 5.satırın içinde sağ tıklayalım ve burada Split Cells’i (hücreleri satırlara veya sütünlara bölme) seçince Split cells ekranı açılır. Bu ekranda Split into Columns’ı seçelim ve Numbers of Columns’e 2 yazalım (Burada amacımız 5.satırı 2 sütuna bölmektir. Eğer satırı bölmek istiyorsak Split into Rows’ı seçer ve Numbers of Rows’a 2 yazarız.) ve OK’ye tıklarsak 5.satır 2 sütuna (bölüme) ayrılır. Burada iki sütunun genişliklerini fare ile (tut / genişlet yada küçült / bırak) ayarlayabiliriz.

a. 5.satır 1.sütunda sağ tıklayalım.Burada Cell Properties’i seçince Cell Properties ekranı açılır. Burada Background’ın altında Color:’da (Sarı) rengi seçelim.

b. 5.satır 1.sütunda sağ tıklayalım.Burada Cell Properties’i seçince Cell Properties ekranı açılır. Burada Background’ın altında Color:’da (Lacivert) rengi seçelim.

6. 6.satırın içine FENERBAHÇE WEB SAYFASINA HOŞ GELDİNİZ yazalım.

7. Şimdi de 5.satırda yaptığımız hücreleri satır yada sütunlara ayırma işleminin tersini yapalım. 5. satır 1. sütun bölümünü (hücresini) seçelim ve 2. sütunun üzerine doğru fareyi sürükleyelim. Bu işlemden sonra menü çubuğunda Table > Merge Cells’i (bu işlemi satırın içinde sağ tıklayarak da yapabileceğimizi unutmayalım.) tıklayalım.

8. 7.satırda benzer şekilde (1.nolu işlem gibi) lacivert rengi seçelim.

Böylece web sayfamızın ana sayfasının başlık kısmını da hazırlayarak web sitemizi hazırlamış olduk.

Fehmi DİNÇER

Ankara 2006

Bu yazının 1.Bölümü Milliyet Blog http://blog.milliyet.com.tr/Blog.aspx?BlogNo=46254 bağlantısında yayınlanmaktadır.

Microsoft Visio yazısı Milliyet Blog http://blog.milliyet.com.tr/Blog.aspx?BlogNo=46940 bağlantısında yayınlanmaktadır.