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 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 Site komutunu veriyoruz. Bu aşamada önemli olan Web Site Templates diyalog penceresinden Yeni Web Sitesinin konumunu belirtmeliyiz. Browse komutunu veriyoruz. Kullanacağımız web alanı yoksa, New Folder komutu vererek site alanımıza My Web Site adını veriyoruz. 2

4 gelince Open 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. New page komutu altından Page seçilince, üç sekmeli diyalog kutusu açılır. Genel çerçevesiz genel kullanım sayfalarıdır. Style Sheets ise kendinden stilleri olan sayfa şekilleridir. Frames Pages bölümün de ise bize çerçeveli sayfalar yapmamıza olanak sağlayan çeşitler vardır. Frames Pages modelleri içinde beğendiğimiz ya da amacımıza en uygun olan stili seçiyoruz. Nested Hierarchy 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 Set Initial Page 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 Set Initial Page komutunu veriyoruz. Ekrana Insert Hyperlink penceresinden doğru linki takip ederek sol.htm dosyamızı bulup OK 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 New Page seçimi yapmamız gerekir. Bu seçimi ise üst bölüm için uyguluyoruz. 5

7 New Page 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 Change title 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 Frame Properties komutunu veriyoruz. Options bölümünde Show scrollbars: If Needed seçeneğini Never olarak değiştiriyoruz. Aynı şekilde sol taraf için de tam tersi uygulamayı Never olan kaydırma çubuğunu If Needed olarak değiştiriyoruz. 8

10 Arka Plan Renklendirme Geri planda renklendirme ya da resim istediğiniz zaman Format-Background 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. Insert-Picture-From File 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 Insert-Hyperlink komutunu veriyoruz. 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 Target Frame ile hedef çerçeveyi mutlaka belirtmemiz gerekir. Insert Hyperlink diyalog penceresinden link olan dosya seçilir. Link belirlerken gelecek olan sayfanın nerede görüntülenmesini istediğimize de karar vermeliyiz. ders.htm dosyasının görüneceği alanı belirtmeliyiz. Target Frame 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 Layer kullanmak en uygun çözümdür. Insert-Layer komutunu veriyoruz. Sayfa üzerinde istediğiniz yere kaydırabilir, istediğiniz genişlikte tutabilirsiniz. Ancak Layer eklendikce kendini sıralar. İç içe geçmiş Layer kullanılırsa arada ya da başta Layer silmek istediğinizde tamamı silinebilir. Bağımsız Layer 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 Insert Hyperlink 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 Layer 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, Insert Hyperlink penceresinde Adres bölümüne direk olarak adres yazılır. Insert Hyperlink 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 New Window 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 Insert-Web Component komutunu veriyoruz. 13

15 Insert Web Component diyalog penceresinden Dynamic Effects-Marquee komutunu veriyoruz. Slide: Sağdan kayarak gelip solda durur. Scroll: Devamlı bir taraftan ekrana girip diğer taraftan çıkar Alternate: İki yana gider-gelir. Yazı geri planına renk de verilebilir. Text 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 Alignment Middle olarak ayarlarsak ekranda şık bir görünüm sağlayabiliriz. 15