Microsoft FrontPage Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Transkript

1 Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça

2 Microsoft FrontPage 2003 Web Sitesi Hazırlama Birinci Bölüm Microsoft FrontPage 2003 i Yeni Web Sitesi Oluşturmak 2 Dosyanın Kaydedilmesi 7 Çerçeve Düzenlemesi 8 Çerçeve Özellikleri 8 Arka Plan Renklendirme 9 Resim Ekleme: 9 Link Düzenlenmesi 10 Sayfaya Katman Ekleme: 11 E. Mail adresi eklemek: 12 Başka bir Web Sayfasına yönlendirme: 12 Kayan Yazı Eklemek: 13 i

3 Microsoft FrontPage 2003 Yeni Web Sitesi Oluşturmak Web sayfası düzenlerken öncelikle dosyalarımızın bir arada durabilmesi için bir alan açmamız gerekir. FrontPage da daha rahat çalışabilmemiz için bir web Sitesi alanı açıyoruz. Tüm dosyalarımızı bu alana aktaracağız. Yeni Web Sitesi komutunu veriyoruz. Bu aşamada önemli olan Web Sitesi Şablonları diyalog penceresinden Yeni Web Sitesinin konumunu belirtmeliyiz. Gözat komutunu veriyoruz. Kullanacağımız web alanı yoksa, yeni klasör komutu vererek site alanımıza My Web Site adını veriyoruz. 2

4 gelince Aç komutunu veriyoruz. Aşağıdaki ekran görünümüne Dikkat etmeniz gerek en önemli unsur Web Sitesi adresi olarak C:\Documents şeklinde yeni oluşturduğunuz alanın yazması olacaktır. My Documents altında hazırladığımız web alanına bakarsak klasör işareti de değişecektir. Daha sonra web sayfasını hazırlarken kullanacağımız tüm dosyaları bu web alanına aktarmamız gerekir. Aktarma işlemlerini yaptıktan sonra web alanını hazırlamak üzere yeni bir sayfa açmalıyız. 3

5 Sayfa şablonları içinden hangi türü yapmak istediğimize karar veriyoruz. Sayfamız iç içe çerçevelerden oluşacaktır. Yeni Sayfa komutu altından Sayfa seçilince, üç sekmeli diyalog kutusu açılır. Genel çerçevesiz genel kullanım sayfalarıdır. Stil Sayfaları ise kendinden stilleri olan sayfa şekilleridir. Çerçeve Sayfaları bölümün de ise bize çerçeveli sayfalar yapmamıza olanak sağlayan çeşitler vardır. Çerçeve Sayfaları modelleri içinde beğendiğimiz ya da amacımıza en uygun olan stili seçiyoruz. İç İçe Hiyerarşi tipi çerçeve Üst başlık, yan bölüm ve orta bölüm olarak 3 çerçeve açacaktır. 4

6 Mevcutta hazır bir sayfamız varsa her çerçeve için Başlangıç Sayfası Ayarla seçimi yapabiliriz. Ana sayfamıza koymak için önceden hazırladığımız sayfalar Sol.htm ve Orta.htm dir. Öncelikle sol taraf için Başlangıç Sayfası Ayarla komutunu veriyoruz. Ekrana Köprü Ekle penceresinden doğru linki takip ederek sol.htm dosyamızı bulup Tamam komutu veriyoruz. Aynı şekilde orta bölüm için de orta.htm dosyasını seçiyoruz. Ancak kendimiz yeni bir sayfa düzenlemek istiyorsak Yeni Sayfa seçimi yapmamız gerekir. Bu seçimi ise üst bölüm için uyguluyoruz. 5

7 Yeni Sayfa komutu beyaz boş bir sayfa açacaktır. Bu sayfaya yazımızı yazdıktan sonra üzerinde yapacağımız link düzenlemelerini daha rahat belirleyebilmek için, çalışmamızı daha fazla ilerlemeden kaydediyoruz. 6

8 Dosyanın Kaydedilmesi Dosyayı kaydetmek için Save komutunu veriyoruz. Daha önce kaydedilmediği için Save As diyalog penceresi ekrana gelecektir. Çerçeveli bir dosya üzerinde çalıştığımız için tüm çerçeveleri ayrı ayrı kaydetmemiz gerekir. FrontPage bu kayıtları kendisi yapacaktır. Bizim yapmamız gereken konumuna göre dosyaya isim vermemiz gerekir. Buna göre aşağıdaki isimleri dosyamıza veriyoruz: Dosya adı: Sol Sol.htm Sağ Sag.htm Orta Orta.htm gibi FrontPage, önceden kayıt edilmemiş olan dosyaları kaydeder bunun için tek tek sorgulama yapar. Kayıt sırasında Başlık çubuğunda gözükmesini istediğimiz sayfalara Başlığı değiştir komutu ile yeni sayfamıza isim veriyoruz. Tüm sayfalar kaydedildikten sonra son olarak ana sayfa bir bütün olarak kaydedilecektir. Bu sayfaya index adını vermemiz gerekir çünkü bu ana sayfamız olacak ve ana sayfa internet ortamında genel olarak index.htm ya da index.html adını alır. 7

9 değiştirme seçeneğine onay vereceğiz. Daha önceden Web Site yarattığımız için mevcutta bir index.htm olduğu için onu değiştirip değiştirmeyeceğimiz sorgulanacaktır. Onun için Çerçeve Düzenlemesi Çerçeve Özellikleri Internet Explorer da index.htm sayfamızı kontrol edince sol tarafta belgede görünmeyen alanlar olduğunu üstte ise olmaması gereken bir kaydırma çubuğu olduğunu görüyoruz. Bunun için Çerçeve özellikleri mutlaka kontrol edilmelidir. Üst çerçevede alt alta bilgi girişi olacağı için browser da görünmesini sağlamak amacıyla kaydırma çubuğu ekliyoruz. Üst çerçeve üzerinde iken sağ Mouse tuşuna basıyoruz. Kısa yol menüsünden Çerçeve Özellikleri komutunu veriyoruz. Seçenekler bölümünde kaydırma çubuklarını göster: gerekirse seçeneğini Hiçbir zaman olarak değiştiriyoruz. Aynı şekilde sol taraf için de tam tersi uygulamayı hiçbir zaman olan kaydırma çubuğunu gerekirse olarak değiştiriyoruz. 8

10 Arka Plan Renklendirme Geri planda renklendirme ya da resim istediğiniz zaman Biçim-Arka Plan komutunu vermeniz gerekir. Resim, yazı rengi, metin renkleri ve link renkleri burada belirlenir. Burada dikkat etmemiz gereken konu eklediğimiz arka plan resminin mutlaka Web Sitesi alanımızın altında olan klasör içinden seçilmesidir. Resim Ekleme: Sayfamıza hareketli ya da düz resim ekleyebiliriz. Resmi veya objeyi eklemek istediğimiz noktaya geliriz. Ekle-Resim- Dosyadan komutunu veriyoruz. Burada da dikkat etmemiz gereken kullandığımız resimlerin de web sitesi alanımız altında olmasıdır. Eklediğimiz resmin boyutunu istediğimiz gibi düzenleriz. Resim eklerken dikkat edilmesi gereken husus, eğer jpeg ise geri planı beyaz zemin üzerindeyse bizim kullandığımız geri plan resmi ile uyumsuzluk yapabilir. Bunun için.gif resimler tercih edilmeli ki geri plan şeffaf olsun. Aynı şekilde orta.htm de hareketli resim ekleyebiliriz. Gif dosyalar içinden Welcome.gif resmini seçip orta bölümde en üste yerleştiriyoruz. 9

11 Link Düzenlenmesi Çerçeve içindeki yazılı bölümlere yönlendirilmesini istediğimiz adresleri belirtiriz. Sol pencereye girdiğimiz başlıkların her biri bir pencereye karşılık gelmelidir. Üzerine tıklandığında başka bir sayfanın açılması için Ekle-Köprü komutunu veriyoruz. ders.htm dosyasının görüneceği alanı belirtmeliyiz. Burada dikkat etmeniz gereken ise link yapacağınız yazının tamamının seçilmesidir. Sadece üzerine tıklarsanız verdiğiniz link araya yazılacaktır. Unutulmamalıdır ki çerçevelerle çalıştığımız zaman Hedef Çerçeve ile hedef çerçeveyi mutlaka belirtmemiz gerekir. Köprü ekle diyalog penceresinden link olan dosya seçilir. Link belirlerken gelecek olan sayfanın nerede görüntülenmesini istediğimize de karar vermeliyiz. Hedef çerçeve komutunu vererek diyalog penceresini açıyoruz. Hedef çerçeve nin ne olacağına karar veremezsek direk olarak görünen geçerli çerçeve sayfası ön izlemeden üzerine tıklayarak da seçim yapabiliriz. Bu şekilde sol tarafta yer alan tüm başlıklara bir link veriyoruz. Ve bu linklerin görüneceği hedef alanlarını da doğru olarak giriyoruz. 10

12 Her bir başlık bir pencereye denk gelmelidir. Başlığı seçip istediğimiz linki belirtiriz. Ana Sayfa linki haricinde diğerlerinin hepsine orta sayfayı link olacak şekilde link veriyoruz. Ana sayfa nın ise üzerine tıklandığı zaman sayfanın blok olarak açılması için hedef çerçevenin tüm sayfa olması gerekiyor. Ancak diğer başlıklar başka bir adrese referans vermiyorsa orta penceremizde görüntülenebilir. Sayfaya Katman Ekleme: Sayfa genel formatından ayrı bağımsız bölümler eklemek isteyebilirsiniz. Bunun için Katman kullanmak en uygun çözümdür. Ekle-Katman komutunu veriyoruz. Sayfa üzerinde istediğiniz yere kaydırabilir, istediğiniz genişlikte tutabilirsiniz. Ancak katman eklendikce kendini sıralar. İç içe geçmiş katman kullanılırsa arada ya da başta katman silmek istediğinizde tamamı silinebilir. Bağımsız katman yerleştirmesi yapmanız daha sonra düzenleme yaparken kolaylık sağlar. Eklediğimiz katman içine yerleştireceğimiz resim, hareketli görüntü veya yazı istediğimiz yere yerleştirilebilir. Katman içine yerleştirilen resme link atayabiliriz. 11

13 E. Mail adresi eklemek: Eklediğiniz bir resim üzerine gelen kullanıcının size mail göndermesini isterseniz. Resim seçildikten sonra Köprü Ekle komutunu verip gelen diyalog penceresine Adres olarak mailto: ile başlayarak adres yazıyoruz. adresinizden önce mailto: komutu ile başlamanız gerekir. İstediğiniz kadar Katman ekleyebilirsiniz. Diğer katmanların içine başka sayfaları açabilmek üzere adres linkleri verebiliriz. Başka bir Web Sayfasına yönlendirme: İstediğiniz zaman sizin sayfanızdan başkaları tarafından hazırlanmış Web sayfalarına yönlendirme yapmak isteyebilirsiniz. Hacettepe Üniversitesi ana sayfasına yönlendirme yapmak isterseniz, Ekle-Köprü penceresinde Adres bölümüne direk olarak adres yazılır. Ekle-Köprü komutu verip diyalog penceresine ile başlayan sayfa adresini yazıyoruz. Ve bu adresin hedef çerçevesinin mutlaka başka bir Internet Explorer programında görülmesi gerekir. Ancak bu sayfalar ayrı bir pencere altında görüntülenmesi daha uygun olacaktır. Hedef çerçeve olarak Yeni Pencere ya da _blank tercih edilmelidir.. 12

14 Kayan Yazı Eklemek: Sayfada her hangi bir yere kayan yazı eklemek isteyebilirsiniz. Ancak bu sayfa üzerinde hoş görünmeyebilir. İstediğimiz gibi yerleştirme yapabilmek için kayan yazımızı katman içine yazarsak daha uygun yerleştirme yapabiliriz. Öncelikle Katman yapmanız iyi olacaktır. Bu size hareket esnekliği sağlayacaktır. Katman girdikten sonra Ekle-Web Bileşeni komutunu veriyoruz. 13

15 Web Bileşeni Ekle diyalog penceresinden Dinamik Efektler-Kayan Yazı komutunu veriyoruz. Kaydır: Devamlı bir taraftan ekrana girip diğer taraftan çıkar Bir noktaya kaydır: Sağdan kayarak gelip solda durur. Sağa sola kaydır: İki yana gider-gelir. Yazı geri planına renk de verilebilir. Metin kısmına ekranda kaymasını istediğimiz metni giriyoruz. Daha sonra yazımızın başına bir hareketli resim eklersen ekranda yazımızın bir dişli tarafından çekiliyormuş görüntüsünü verecektir. 14

16 Kayan yazımızı da çerçeveye sığacak şekilde ayarlayalım. Son olarak resim özelliklerine geçerek Hizalamayı orta olarak ayarlarsak ekranda şık bir görünüm sağlayabiliriz. 15