Frontpage ile Site Yapımı

Frontpage, web sitesi yapımı için tercih edilen kullanımı en kolay html düzenleyicilerden birisidir. İçeriğindeki hazır butonlar, seyir çubukları ve hazır siteler ile sitenizi dakikalar içinde oluşturabilirsiniz. İçeriğindeki hazır araçları kullanarak sitenize saat sayaç gibi çeşitli araçlar ekleyebilirsiniz. Ancak Frontpage'ye özgü bu araçların sorunsuz çalışması için web sitenizin Frontpage eklenti paketinin kurulu olduğu bir sunucuda depolanması gerekir.

Frontpage, bir site haritasına dayalı olarak çalışır. Önce sitenizin sayfaları arasındaki bağlantılara göre bir harita oluşturursunuz, daha sonra oluşturduğunuz haritadaki sayfaları açıp düzenlersiniz. Aşağıdaki resim, FP site haritasına bir örnektir.

Resimde görüldüğü gibi bir ana sayfa ve ana sayfaya bağlı diğer sayfalar siteyi oluşturuyor. Fotoğraf galerisi ise iki ayrı sayfaya açılıyor. Bu yapı ileride sayfalarımız için seyir çubuğu oluşturmakta işimize yarayacak. Örneğin 3. seviyedeki sayfaların sadece Fotograf galerisi sayfasında görüntülenebilmesi gibi ayarlamaları yapabileceğiz. Frontpage'nin nasıl çalıştığını ve özelliklerini kısaca açıklamaya çalıştım. Şimdi site yapımına başlayabiliriz.

1. Sitemizi Frontpage'ye ekleyelim

Bu anlatımda fıkralar ve komik resimler içeren basit bir web sitesi yapacağım. Anasayfaya bir tane fıkra ve bir tane komik resim koyacağım. Ben aşağıdaki şablonu kullanmayı seçtim. Siz dilerseniz farklı bir şablon kullanabilir veya sitenizi kendiniz tasarlayabilirsiniz. Ayrıca Frontpage'nin kendi şablonlarını da kullanarak bir kaç değişiklik ile sitenizi yapabilirsiniz.

Şablon içerisinden çıkan dosyaları, C diskinde Websitem adında bir klasör açıp içine kopyaladım. Buradaki websitem klasörüne (yani sitemizin içerisinde olduğu klasöre) kök klasör denir. Sitenizde kullandığınız içeriğin (resim, müzik, video vb.) kök klasörünüz içerisinde olması gerekir. Aksi halde siteniz bilgisayarınızda sorunsuz çalışır ancak sunucuya gönderdiğinizde kök klasör içinde olmayan içerik görüntülenemez.

Şimdi bu şablonu Frontpage'ye ekleyelim. Frontpage'yi açalım ve sol üst köşedeki menüden Dosya>Site Aç'a tıklayalım. Açılan pencereden sitemizin içinde olduğu klasörü (yani websitem klasörünü) açalım.

Aç butonuna tıkladıktan sonra Frontpage sitenize dosya eklemek için izin isteyecek. Evet seçeneğine tıklayalım ve sitemizin sorunsuz çalışması için gerekli dosyaların eklenmesine izin verelim. Yaptığımız son işlemle sitemizi Frontpage'ye eklemiş olduk. Artık sitemizin sayfalarında değişiklik yapabiliriz. index.html dosyasına çift tıklayarak açalım.

2. Tabloları Kullanmak

Sitemize içerik eklemeden önce tablo ekleyeceğiz ve içeriği bu tabloların sütun ve satırlarına ekleyeceğiz. Çünkü html sayfalarda her satıra sadece bir farklı içerik eklenebilir. Ayrıca tablo ekleyerek içeriğin konumunu sabitlemiş oluruz. Böylece farklı çözünürlükteki bilgisayarlar sitemizi görüntülediğinde sayfalarda hata oluşmaz. Tablo kullanmazsak resimler ve yazılar iç içe geçebilir. Aşağıdaki resimde tabloların nasıl kullanıldığını görebilirsiniz. Tabloların görülebilmesi için rengini kırmızı yaptım ama siz tabloların kalınlığını sıfır yaparak görünmemesini sağlayabilirsiniz. Her sitede mutlaka tablo kullanılır. Kaliteli siteler tablolar üzerine kuruludur.

Tabloların nasıl kullanıldığını ve faydalarını öğrendik. Şimdi sayfadakileri temizleyip bir tablo ekleyeceğim. Tabloda site başlığı, fıkralar sayfası ve komik resimler sayfası için birer satır olacak. Tablo eklemek için üstteki menüden Tablo>Ekle>Tablo'ya tıklıyorum. Tablonun özelliklerini ayarlayacağım pencere açılıyor. Tablo ekledikten sonra üzerine sağ tıklayarak da ayarlarını değiştirebilirsiniz.

Tamam butonuna tıkladıktan sonra tablo sayfaya ekleniyor. Fareyi kullanarak tablonun ve hücrelerin genişliğini ve yüksekliğini değiştirebilirim. Şimdi en üst satıra sitenin başlığını ekleyip diğer iki satırı ikiye böleceğim ve her sütuna resim veya yazı ekleyeceğim. Yaptığım işlemi aşağıdaki resimden görebilirsiniz.

Aynı yöntemle Eğlence Merkezi yazısı altındaki iki hücreyi de böldüm. Şimdi bu hücrelere resim ve yazı ekleyelim.

3. Resim Ekleme

Resim eklemek için ilk önce ekleyeceğimiz resimleri site klasörümüzün içine kopyalamamız gerekecek. Anasayfaya koyacağım resmi kök klasör içindeki img klasörüne kopyalıyorum. Önce resmi eklemek istediğim yere bir kere tıklıyorum sonra üstteki menüden Ekle>Resim>Dosyadan... yolunu izliyorum. Açılan sayfadan resmi seçip ekle butonuna tıklıyorum.

Aynı yöntem ile ama Ekle>Resim linklerine tıkladıktan sonra dosyadan... seçeneği yerine video veya flash seçerek video veya flash ekleyebilirsiniz.

Eklediğiniz resimlerin adında boşluk, özel karakter ve ç,ş,ğ,ü gibi Türkçe karakterler olmadığından emin olun. Adında boşluk ve özel karakter bulunan dosyalar bilgisayarınızda açılır ama sitenizi sunucuya gönderdiğinizde açılmayabilir.

Bu yöntem ile sayfaya eklediğim tablolara resimler ekledim ve yanındaki hücrelere yazılar ekledim. Böylece anasayfamızı tamamlamış olduk. Önizleme sekmesine tıklayarak sitenizin tarayıcıda nasıl görüneceğine bakabilirsiniz. Ayrıca Dosya>Kaydet yolunu izleyerek (veya Ctrl+S tuşlarına basarak) çalışmalarınızı kaydetmeyi unutmayın.

Şimdi sitemize fıkralar ve komik resimler için iki farklı sayfalar eklemek için ikinci derse geçelim.

4. Yeni Sayfalar Oluşturalım

Sitemize yeni sayfalar eklemek için site haritasına yeni sayfalar eklememiz gerekiyor. Ancak bu yöntemi kullanırsak içi tamamen boş bir sayfa elde ederiz. Biz farklı bir yöntem kullanarak daha kısa sürede yeni sayfalar ekleyeceğiz. Sitemizin anasayfasının bir kopyasını alıp tekrar sitemize ekleyeceğiz ve adını Fıkralar olarak değiştireceğiz. Daha sonra da kopyaladığımız bu sayfanın içeriğini silip fıkralar ekleyeceğiz. Bunu yapmak için web sitesi sekmesine tıklayarak sayfanın altındaki Gezinti sekmesine gelelim. Burada görülen sayfa anasayfamızdır. Üzerine sağ tıklayarak yeniden adlandır seçeneğine tıklayalım ve adını Eğlence Merkezi olarak değiştirelim.

Şimdi anasayfa üzerine sağ tıklayarak Kopyala seçeneğine tıklayalım. Tekrar anasayfa üzerine sağ tıklayarak Yapıştır seçeneğine tıklayalım. Böylece sitemizin anasayfası altında farklı bir sayfa oluşturmuş olduk. Aynı işlemi bir kez daha tekrarlayarak 2. alt sayfamızı oluşturalım.

Resimde gösterilen değişiklikleri yaptıktan sonra Klasörler sekmesine (4) gelelim. Burada sitenizin dosyalarını görebilirsiniz. Yeni oluşturduğumuz sayfalar index1.html ve index2.html adında kaydedilmiştir. Bu isimleri fikralar.html ve komik_resimler.html olarak (yani sayfa içeriği ile alakalı kelimeler ile) değiştirmeniz arama motorlarındaki sıranızı olumlu yönde etkiler. Dosya üzerine sağ tıklayıp yeniden adlandır seçeneğine tıklayarak dosya isimlerini değiştirebilirsiniz. Sayfaları yeniden isimlendirirken boşluk bırakmamaya, özel karakter ve ç,ş,ö,ğ gibi Türkçe karakterler kullanmamaya dikkat edin. Sayfa isimlerini de değiştirdikten sonra buradan sitenizin sayfalarını açabilirsiniz. Anasayfayı oluşturduğumuz gibi Fıkralar ve Komik Resimler sayfalarını düzenleyebilir; tablolar, resimler ve yazılar ekleyerek sayfalar oluşturabilirsiniz. Şimdi sitemize seyir çubuğu ekleyerek ziyaretçilerin bir sayfadan diğerine gitmesini sağlayalım.

Web sayfalarının uzantısı html dir. Örneğin müzik dosyalarının uzantısı genellikle mp3, resim dosyalarının uzantısı genellikle jpeg olur. Web sayfalarının uzantısı da genellikle html veya htm olur. Hazırlayacağımız her sayfanın sonuna .html ekleyeceğiz. Örn: fikralar.html index.html dosyasını anasayfanız olarak tasarlayın ve sayfa adını değiştirmeyin. Çünkü bir siteye girdiğinizde, tarayıcınız size o sitenin index.html sayfasını gösterir. Örneğin Internet Explorer'de www.siteadi.com yazarsanız tarayıcınız www.siteadi.com/index.html adresini açar. Daha sonra oluşturacağınız sayfalarınız için farklı isimler yazacaksınız örneğin: sayfaadi.html gibi... Oluşturduğunuz sayfalara isim verirken veya site içerisinde kullandığınız resimlerin adlarında Türkçe karakter veya boşluk kullanmamaya dikkat edin. Örneğin ödev.html isimli bir sayfa yaparsanız bu sayfa görüntülenemez.

5. Sayfalara Bağlantılar Ekleyelim

Şimdi sayfalara bağlantılar ekleyerek ziyaretçilerin sitemizin sayfalarını dolaşabilmesini sağlayalım. Linkler için ayrılmış bölümün altında boş bir yere tıklıyorum ve Ekle>Gezinti butonuna tıklıyorum. Açılan pencereden gezinti yapısında çubuk seçeneğini işaretleyip İleri butonuna tıklıyorum.

Diğer iki adımda seyir çubuğu stilini ve şeklini seçip Son butonuna tıklıyorum. Açılan sayfadan hangi linklerin gösterileceğini seçiyorum. Burada link eklerken site haritası esas alınır. Hangi kademedeki sayfaların linklerinin gösterileceği burada seçilir. Deneme yanılma yöntemi ile linkler düzgün açılana kadar deneyebilirsiniz

Seyir çubuğunu ekledikten sonra kırmızı kare içinde kalan bölümü silebilirsiniz. Diğer sayfalara da seyir çubuğu eklemeyi unutmayın. Aksi halde diğer sayfaya giden bir ziyaretçi anasayfaya veya diğer sayfalara ulaşamaz.

Seyir çubuğu eklediğinizde anasayfa için verilen linkte Giriş Sayfası yazacaktır. Bunu değiştirmek için Araçlar>Site Ayarları seçeneğine tıklayın. Açılan pencereden Gezinti sekmesine gelin. Buradaki Giriş Sayfası yazısı yanındaki bölümü Anasayfa veya sitenizin adı şeklinde değiştirebilirsiniz.

6. Link Ekleme

Şimdi sitemize nasıl link (bağlantı, köprü) ekleyeceğimizi öğrenelim. Link ekleyeceğimiz yazıyı veya resmi seçelim. Ekle>Köprü yolunu izleyerek açılan pencereden link vermek istediğimiz sayfayı seçelim. Başka bir siteye link vermek istiyorsanız adres bölümüne link vermek istediğiniz siteyi yazın.

7. Sayfamıza kod ekleyelim

Ssayfamıza herhangi bir yerden aldığımız kodu ekleyebiliriz. Bu herhangi bir yerden aldığımız sayaç kodu da olabilir, reklam kodu da olabilir, site linki de olabilir.

Kod eklemek istediğiniz yere sağ tıklayarak kodu yapıştırın. Kod önce yazı halinde sitenize eklenecektir ve kodun bittiği yerde klasör resmi çıkacaktır. Bu klasöre tıklayarak "Html etiketi gibi davran" seçeneğine tıklayalım. Böylece kod eklenecektir. Aşağıdaki resimde eklediğim Extreme sayaç kodunu görebilirsiniz.

Kod eklemek için şu yöntemi de kullanabilirsiniz:

Kod eklemek istediğiniz yere "Kodu ekle" yazın. Bölünmüş ekran sekmesine tıklayarak sayfayı hem kod hem tasarlama penceresi ile açın. Tasarlama penceresindeki kodu ekle yazısına çift tıklayarak yazıyı fosforlu hale getirin. Böylece kod ekranında "kodu ekle" yazısının nerede olduğunu görebileceksiniz. Artık yapmanız gereken kod ekle yazısını silip buraya kodu yapıştırmak.

8. Sayfa Özellikleri

Şimdi sayfa özelliklerine göz atalım. Sayfanın herhangi bir yerine sağ tıklayarak Sayfa Özellikleri seçeneğine tıklayın.

Buradaki bilgiler arama motoru sıralamanıza olumlu yönde etki edebilir. Siteniz arama motoru sonuçlarında listelendiğinde site başlığı ve açıklaması olarak yukarıdaki bölüme yazdıklarınız çıkacaktır. Anahtar kelime olarak sitenizin içeriğini özetleyen kelimeleri seçin. Yirmi kelimeden fazla yazmamaya dikkat edin. Arama motorlarında daha iyi sonuçlar alabilmek için arama motoru optimizasyonu sayfasını ziyaret etmeyi ihmal etmeyin.

9. Logoyu Değiştirelim

Son olarak sitemizin logosunu değiştirelim. Sitemizin logosunda Company Logo yazısı resim olduğu için yazıyı değiştiremeyiz. Ama şablonlarda genellikle bu logoların yazısız olanı veya yazısı değiştirilebilen formatta bir resim olur. Logonun yazısız olanı şablon içerisindeki sources klasöründen çıktı. Bu logoya bir resim düzenleyici ile yazı ekleyeceğim.

Şimdi yapmam gereken tek şey yeni logoya eski logonun adını verip eski logonun olduğu yere koymak. Böylece sayfalarda hiç bir değişiklik yapmadan yenisi ile eskisini yer değiştirmiş olacağım.

Frontpage ile web sitesi yapımını anlaşılır ve en kısa şekilde anlatmaya çalıştım. Aklınıza takılan bölümleri veya anlatımda eksik gördüğünüz yerleri forumumuz aracılığı ile paylaşırsanız hem sorularınıza cevap bulur hem diğer ziyaretçilerin aynı sorunları yaşamaması için katkıda bulunmuş olursunuz.

Şimdi web sitenizi yayınlamak için Bedava Hosting sayfasını ziyaret edebilir, ücretsiz hosting veren en kaliteli sitelere ulaşabilirsiniz.