Kim korkar FrontPage'den...

Web tasarımı yapmaktan çekinmeye, korkmaya gerek yoktur. Bu yazının amacı web tasarım programı olan FrontPage'i hiç kimseye danışmadan, sormadan öğretmektir. Gerçekten bilgisayarınıza bu programı (FrontPage) yükledikten sonra en geç 2 saat içinde aşama aşama öğrendiğinizi görecek ve şimdiye kadar neden öğrenmediğinize şaşıracaksınız. Evet sadece 2 saatinizi ayıracaksınız. 150 sayfalık kitaplara yada 1 aylık kurslara ihtiyacınız kalmadan sadece bu metni okuyarak ve uygulayarak öğreneceksiniz. Şimdiden başarılar...

BİR WEB SİTESİ NASIL OLUŞTURULUR?

Bir web sitesi oluşturmak için menü çubuğunda File’ı, sonra New’ı tıklayınız. New Task Bar (Yeni Görev çubuğu), ekranın sağ kenarında görünecektir. Burada imleci (cursor) One Page Web Site’nin üzerinde tıklayınca, Web Site Templates ekranı (diyalog penceresi) görünecektir. Bu ekranda ilk olarak One Page Web Site’ ın işaretlenmiş olması gerekiyor. İkinci olarak. Options’ın altındaki boşluğa Save edilecek alanı belirleyelim, (Örnek: C:\ webfehmi) sonra OK’yi tıklayalım. OK’ yi tıkladığımız zaman ekranımız bir an için duracak ve sonra yanıp sönmeye başlayacaktır. Yeni çıkan ekranımızın sol üst köşesine bakarsanız yeni web sitemizin oluşturulmuş olduğunu (C:\ webfehmi) göreceksiniz. Burada oluşturduğumuz web sitemizin içeriğini (içindekiler) gösterdiğini farkedeceksiniz. Web sitemizi oluşturduğumuz bu süreç içerisinde web sitemizin içeriğinde index.htm (Home Page - Ana Sayfa) adlı bir sayfa oluşturduğumuzu göreceksiniz. Bu sayfa web sitemizin Ana Sayfa'sıdır. Ekranımızın sol altına bakınca Folders (Klasörler)’ ın işaretlenmiş olduğunu göreceksiniz. Folder List, yeni web sitemizin webtest klasöründe (Folder webtest) C: sürücüsünde yerleştirildiğini gösterir. Burada FrontPage 2003 tarafından index.htm’ye ilave olarak 2 yeni klasör daha oluşturduğuna dikkat edelim. Bunlarda birisi Private, diğeri de İmages’dır.

WEB SİTEMİZİ KAYDEDELİM

Menü çubuğunda File’ın altında Save opsiyonunun olmadığını göreceksiniz. FrontPage 2003 (FP 2003)’ün özelliklerinden biriside web sitemizde yaptığımız her değişikliği otomatik olarak kaydetme özelliğidir. Bunu deneyebiliriz. Menü çubuğunda File’ı ve sonrada Edit’i tıklayınca FrontPage kapanacaktır. Şimdi tekrar FrontPage’yi açınca bilgilerimizin silinmediğini göreceğiz.
Eğer web sitemiz görünmezse yada web sitemizin nasıl açılacağından emin değilsek aşağıda anlattığımız gibi yaparız.
İlk olarak ekranımız sağında Task Pane (Görev Bölmesi)’nin görünmesi gerekir. Task Pane’de Open alanında Websites’ın altında websitemizin adını göreceğiz. Web sitemizin adının üzerinde tıklayınca web sitemiz açılacaktır. (Eğer Task Pane’i göremezsek, menü barda View’de Task Pane’i işaretleyelim. Task Pane göründüğü zaman yukarıdaki işlemi uygulayalım.)
Yukarıdaki uygulamalarımız başarısız olursa aşağıdaki işlemleri yapalım:
File <>’ı tıklayınca Open File ekranı görünecektir. Bu ekranda C: sürücüsünü tıklayınca Webtest Folder’ı görebiliriz. Burada Webtest Folder’ı , sonra Open’ı tıklayarak websitemizi açabiliriz. Open File ekranımızda index.htm dosyasını tıklayarak web sitemizi açabiliriz. Ekranımızın sol üst köşesinde hem Web Site sekmesini ve hem de index.htm sekmesini görürüz. (Eğer Task Pane’den web sitemizi açarsak sadece web site sekmesini görebiliyorduk.)

WEB SİTEMİZİ NASIL OLUŞTURABİLİRİZ?

Şimdi web sitemizi yapmaya başlayabiliriz. Bunun için Navigation View’e geçmemiz gerekecektir. Ekranımızın altında bulunan Navigation butonuna tıklayınca ekranımızın ortasında index.htm görünecektir. Bunun altındaki yazıda : “ Bu görüntü, sizin web sitenizin navigation yapısını gösterir. Bu sayfalara butonlarını otomatik olarak ekeyiniz. Format menüsünde Shared Borders’ları seçiniz.” İfadesi önemlidir. (Bu bölümde çalışırken bireysel web sayfalarındaki değişiklikleri Save etmemiz gerekecektir.) Navigation bölümü, web sitemizin örgütsel şemasının , işleyiş mekanizmasının merkezi hatta dümenidir.

ÖRNEK WEB SİTESİ OLUŞTURMA

Burada ilk olarak Navigation View’de ekranın ortasındaki index.htm’de sol tıklayalım. Tıklamadan önce açık sarı görünen ikon (index.htm), tıkladıktan sonra maviye dönüşecektir. Bu bizim çalışmak istediğimiz sayfayı gösterir.
Bu aşamada ana sayfamızın altında 3 ek sayfayı ekleyeceğiz ve otomatik olarak bağlantı oluşturacağız.
Eğer yanlışlıkla ana sayfa ikonunda (index.htm) çift tıklarsak, FrontPage’nin Design View bölümünde bu sayfada düzeltme yapmak istediğimizi gösterir ve bu nedenle sayfamızı Design View bölümüne yükler.
Şimdi bu yanlışlıktan kurtulmak için ekranımızın altında bulunan Navigation butonunu tekrar tıklayalım. Fakat bundan önce Web Sitesi sekmesini tıkladığımızdan emin olalım. İndex.htm ikonunu sol tıklayalım. İkon mavi olunca index.htm’nin altında ilk sayfayı eklemek için üst sağ köşesinde New Page butonunu tıklayalım. Tıklar tıklamaz ekranımızda index.htm’nin altında New Page 1’i (Yeni Sayfa 1) oluşturduğumuzu göreceğiz.
Benzer şekilde index.htm’nin altına 2 sayfa daha ekleyelim. Sonra New Page 3’ün altına 2 sayfa daha ekleyelim. Eğer bu sayfaları oluştururken yanlış yaparsak, yanlış sayfaların üzerinde sağ tıklarız. Bu durumda Delete Page ekranı görünür. Bu menüde seçimimizi yapar ( Delete this page from the web site veya diğeri) ve sonrada OK’yi tıklarsak ilgili sayfayı web sitemizden silebiliriz.

PAYLAŞILAN KENARLIKLAR ( SHARED BORDERS )

Web sitemizi yaparken, web sayfalarında “ görmek“ istediğimiz “şeyi”i , FrontPage’e “anlatmaya” ihtiyacımız var.
Öncelikle Format < shared="">’ı tıklayınca (Eğer Shared Borders aktif değilse menü barda Tools’ı ve sonra Page Options’ı tıklarız. Page Options ekranı göründüğünde Authoring sekmesini tıklarız. Sonra ekranın aşağısında Shared Borders’ın solundaki kutuyu işaretler ve OK butonunu tıklarız.) Shared Borders ekranı görünecektir.
Herbir web sayfasının başlıklarını ve bağlantılarını (link) yapmak için Shared Borders ekranındaki all pages, top, left vs. gibi küçük daire yada kareleri işaretleyerek OK’ye tıklarız.
Web sitemizin www’de nasıl görüntüleneceğini görmek için index.htm ikonuna hızlı bir şekilde çift tıklamamız gerekir yada imleç, index.htm’de iken fareyi sağ tıkladıktan sonra açılan menüde Open’a tıklayalım. Bu, index.htm’yi FrontPage’de Design View’e yükleyecektir.
Tarayıcıda (browser) web sitemizi açmadan önce Display View’de iki şeye dikkat edelim. Birincisi, Display View’de sayfanın en üstünde görünen index.htm başlığını gözlemleyelim. Tıpkı FrontPage’nin web sitemizi ilk oluşturduğu zamanki gibi görünür. İkincisi index.htm başlığının sol alt kenarındaki New Page 1, 2 ve 3’e bakalım. Bunlar Display View’de düzeltme yapabileceğimiz sayfaların bağlantılarıdır (link). Biz daha sonra Navigation View’de bu sayfaları yeniden isimlendireceğiz. Böylece web sitemizi daha anlamlı hale getireceğiz. Özetleyecek olursak bu sayfalar, FrontPage tarafından oluşturulan “otomatik köprü bağlantılar (hiperlink)”dır. Bu ekranda görünen tire (-) şeklindeki çizgiler ise Display View’de bize sonra gerekli olacaktır. Tarayıcımızda, web sitemizi görüntülediğimiz zaman, bu tireler görünmeyecektir.

TARAYICIDA WEB SAYFALARIMIZI GÖRÜNTÜLEMEK

Design View’de buton çubuğunda browser (tarayıcı) butonunu veya menü barda File < preview="" in="">’i tıklayalım. Şimdi biz, bir tarayıcıdayız ve bizim “boş” web sitemiz herhangibir web sitesi gibi tepki verecektir. İmleci New Page 1, 2 ve 3’ün üzerinde hareket ettirdiğimiz zaman bir “hiperlink”i gösteren “küçük işaretli el” in göründüğünü fark edeceksiniz New Page 1’i (Yeni sayfa 1) tıklayınca, New Page 1 ekranı açılacaktır. Ekranın en altında [Home] New Page 1 [New Page 2] [New Page 3] şeklinde “metin butonları” görünecektir. Altı çizili olan metin butonları ise Home Page, New Page 2 ve New Page 3’e bağlantı kurmamıza yardımcı olan hiperlinklerdir.

WEB SİTEMİZDEKİ WEB SAYFALARI İÇİN BAŞLIKLAR

Navigation View’i açalım. İndex.htm ikonunu (kutusu) hafif bir şekilde tıklayalım. İkon, maviye dönüşecektir. Şimdi tekrar index.htm ikonunu hafif bir şekilde tıklayalım ve birkaç saniye bekleyelim. Başlığın (index.htm) şimdi mavi renkte işaretlendiğini göreceğiz. Bir windows programında bu durum, bize metni düzeltebileceğimizi gösterecektir. Şimdi index.htm’mize isim verebiliriz. Yazdığımız isim, index.htm’nin yerine geçecektir.( yada metni silebilir yerine başka bir isim yazabiliriz.) Bu işlemden sonra Enter’a basarak işlemimizi tamamlayabiliriz.
Bu aşamadan sonra menü çubuğunda View’i, sonrada Refresh’i tıklarsak, index.htm sayfasındaki değişikliği güncelleyebiliriz.
Folders butonunu tıklayınca sayfanın başlığının değiştiğini görebiliriz. Organizasyon şemasındaki “kutunun” ve title sütunundaki ismin değiştiğini görebiliriz.
Şimdi benzer şekilde diğer kutulardaki başlıkları isimlendirebiliriz. Navigation View’e tekrar dönelim ve her bir sayfanın isimlerini verelim.
İndex.htm’ye FEHMİ DİNÇER WEB SİTESİ yazmıştık. New Page 1’ “MAKALELERİM”, 2’ye “RESİMLERİM” , 3’e “HOBİLERİM” , 4’e “SPOR”, 5’ “MÜZİK” başlıklarını yazarak işlemimizi tamamlayalım. Sonra menü çubuğunda View’i sonra Refresh’i tıklayalım.
Web sitemizin www’de nasıl görüntülendiğini görmek için menü çubuğunda File < preview="" in="">’ı tıklayalım.(Veya FEHMİ DİNÇER WEB SİTESİ –FDWS-ikonunda çift tıklayalım. Yada imleç FDWS’de iken farenin sağ butonuna tıkladıktan sonra açılan menüde Open’a sol tıkladığımız zaman Design View’de FDWS’yi yükleyecektir. Design View’de buton çubuğunda Browser’ı tıklayalım.) Şimdiye kadar yaptığımız düzenlemeleri web sayfamızda görebiliriz.

TEMALAR (THEMES)

Temaları uygulamak için FrontPage’de Design View’de olmamız gerekir. Öncelikle Navigation View’de olduğumuzdan emin olalım. Eğer değilsek, Web Site sekmesini, sonrada Navigation butonunu tıklayalım. Web sitemizin organizasyon şemasını gördüğümüz zaman FDWS’i (Ana Sayfa) hızlı bir şekilde çift tıklayalım. Design View’de web sayfamıza götürür.
Bu aşamada menü çubuğunda Format <>’yı tıklayalım. Temayı tıkladığımız zaman ekranımızın sağ kenarında Thema Task Pane görünür. Thema Task Pane (Tema Görev Bölmesi) ilk göründüğü zaman, varsayılan temanın boş olduğuna dikkati çekelim. Tema seçeneklerini görüntülemek için Tema Görev Bölümündeki kaydırma çubuklarını kullanacağız. Burada çeşitli tema seçenekleri vardır. Bunlardan birisini seçelim. Temanın web sitemizde nasıl göründüğünü görmek için seçtiğimiz seçeneğin üzerinde fareyi sağ tıklayalım ve çıkan ekranda Apply as default theme ‘i tıklayalım. Bu aşamada FrontPage uyarı ekranında Yes’i işaretleyelim. (Eğer Apply to add page(s)’i seçersek bu uyarı gelmeyecektir. Uyarı ekranı, tema her sayfaya uygulandığı zaman görünür.) Böylece temayı web sayfalarımızın hepsine uygulamış oluruz. Eğer uyguladığımız bu temayı beğenmezsek diğer temaları yukarıda uyguladığımız süreci tekrarlayarak uygulayabiliriz.
Şimdi ilk olarak menü çubuğunda File < save="">’ı tıklayarak web sayfalarımızı Save edelim. Burada bir hatırlatma yapalım. Design View’de herbir sayfada yapılan değişiklikleri Save ile bütün sayfalarda yapılan değişiklikleri ise Save All ile kaydedebiliriz. Bu nedenle sayfalarımızda düzeltme yaparken sık sık Save etmeyi unutmayalım.
Bu aşamada daha önce yaptığımız gibi File < preview="" in="">’ı tıklayalım ve web sayfamızın www’deki görüntüsünü izleyelim.

WEB SAYFALARIMIZA METİN, RESİM EKLEMEK

Bir web sitesi oluşturmak için temel bütün aşamaları görmüş olduk. Şimdi de FrontPage’de herbir web sayfamıza istediğimiz “şeyleri” (metin, resim, grafik vs.) ekleyelim. Bu normal olarak 3 aşamalı bir süreçtir.

1.İlk olarak Navigation View’de olalım. Değilsek, Web Site sekmesini, sonrada Navigation butonunu tıklayalım.

2. Web sitemizin organizasyon şemasını görüğümüz zaman, şemada çalışmak istediğimiz sayfanın üzerinde hızlı bir şekilde tıklayalım. Daha öncede olduğu gibi bu, bizi Design View’de seçtiğimiz sayfaya götürecektir.

3. Seçtiğimiz sayfaya girdikten sonra metnimizi yazabilir, resimlerimizi ve grafiklerimizi ekleyebilir (metin, resim ekleme süreci Word’de olduğu gibidir.), linkler oluşturabilir, sayfayı kaydedebilir ve tarayıcıda ön izleme yapabiliriz.

CTRL + TIKLA ile WEB SİTEMİZDE BİR WEB SAYFASINDAN DİĞERİNE GEÇMEK

Web sitemizi yaparken Navigation ve Design View arasında yukarıda bahsettiğimiz süreçlerdeki gibi hareket etmeden daha kolay bir şekilde de yapabiliriz. Design View’de olduğumuzda, bağlantıların (link) birisi üzerinde imlecimizi yavaşca hareket ettirelim ve bir bağlantının üzerinde duralım. Bu aşamada küçük bir metin yardım kutusunda: [Use Ctrl + Click to follow a hyperlink] yazısı görülecektir. Bu yazıdaki talimatı uygularsak yani Design View’de Ctrl tuşuna basılı tutarak, gitmek istediğimiz link yada düzeltmek istediğimiz sayfanın üzerinde farenin sol tuşuna tıklayarak geçebiliriz.

WEB SAYFALARIMIZA DİĞER METİNLERİ KOPYALAMAK

Word, Excel, Power Point, Visio vs. gibi programlarımızda daha önceden yazılı olan dökümanlarımızı, seçilmiş web sayfamıza bunları kopyalayabiliriz. Aynen Word vs. de yaptığımız gibi yaparız.

Aşamalar:

1.Word’de dökümanı seçelim.

2.Kopyalayı tıklayalım.

3.FrontPage’de dökümanı eklemek istediğimiz yere gidelim.

4.Menü çubuğunda Edit < paste="">’i tıklayınca Convert Text ekranı açılır. Bu ekranda Normal Paragraphs’ı seçelim.(veya diğerlerini)

5.OK’i tıklayalım.

WEB SAYFASI ARTALANINI BİÇİMLEDİRME

ARTALAN RENGİNİ BİÇİMLENDİRME

Menü çubuğunda File <> seçilir. Page Properties ekranı açılınca Formatting sekmesi seçilir. (Web sayfamıza Tema uygulaması yaparsak bu işlemi uygulayamayız. Tema uyguladığımızda değişiklikleri Tema’da yapmamız gerekir.) Bu sekmede Colours alanında Background’da (artalan) , text’de, hiperlink’te uygulayacağımız renkleri seçip, OK’yi tıklarız.

HİPERLİNK OLUŞTURMA

Hiperlink, aynı web sayfası içinde veya web sayfamızın içinde farklı bir sayfa yada sayfalara veya farklı bir web sitesine hemen bağlantı kuran web sayfasının özel bir kısmıdır. Biz şimdi metin, görüntü yada e-mail hiperlinki oluşturabiliriz.

Metin Hiperlinki oluşturma:

1.Hiperlink oluşturmak istediğimiz metni seçelim.

2.Standart araç çubuğunda bulunan Hyperlink butonunu tıklayalım.(veya İnsert <>’i tıklayalım.)

3.İnsert Hyperlink ekranı (diyalog kutusu) açılır.

4.Text to display: alanında linkte yazacak metin seçilir yada bulunur.(Örnek:Fehmi Dinçer)

5.Address: alanına linkin (bağlantının) adresini yazarız. (Örnek: http://fehmidincer.googlepages.com/ )

6.OK’yi tıklarız.

Böylece hiperlink yapmak için seçtiğimiz metnin, altı çizili bir şekilde bir hiperlinke dönüştüğünü görmüş oluruz. Bu yeni oluşturduğumuz hiperlinki Save ettikten sonra Preview in Browser’a ve sonrada hiperlinke tıklayarak kontrol edebiliriz.

Görüntü Hiperlinki Oluşturma:

1.Hiperlink oluşturmak istediğimiz resmin üzerinde tıklayarak seçelim.

2.Standart araç çubuğunda bulunan Hyperlink butonunu tıklayalım (veya İnsert <>’i tıklayalım.).

3. İnsert Hyperlink ekranı (diyalog kutusu) açılır.

4. Address: alanına linkin adresini yazarız.(veya link vermek istediğimiz web sitediğimiz web sitesinin adresini Browse the web butonunda bularak tıklarız.)

5.OK’yi tıklayınca resim, bizim, için bir hiperlink olur.

Benzer şekilde File < preview="" in="">’ı tıklayalım ve sonrada yeni hiperlinke tıklayarak linkimizi kontrol edebiliriz.

Email Hiperlinki Oluşturma:

1.Hiperlink oluşturmak istediğimiz metnin yada resmin üzerinde tıklayarak seçelim.

2. Hyperlink’i tıklayalım.(İnsert <>)

3. İnsert Hyperlink ekranı (diyalog kutusu) açılır. Link to: yazısının altında E-mail address butonunu tıklayalım.

4.Alanları dolduralım ve OK’yi tıklatyalım.

5.Create Hyperlink ekranında OK’yi tıklayalım.

BOOKMARKS OLUŞTURMA

Bir Bookmarks, aynı web sayfasında bağlantı oluşturan bir hiperlinktir. Bookmark’lar, uzun bir sayfada değişik bölümlere kolayca ulaşabilmemizi sağlar.

Bir Bookmark Oluşturma:

1.FrontPage’de Design View’i seçelim.

2.Bookmark oluşturacağımız yeri fare ile belirleyelim.

3.Menü çubuğunda İnsert <>’ı seçelim. Bookmark ekranı açılır. Bookmark için kısa bir isim yazalım ve OK’yi tıklayalım.

Şimdi bir metni seçelim ve bizi, oluşturduğumuz Bookmark’a götürecek bir hiperlink ekleyelim.

1.Oluşturduğumuz Bookmark’a bağlantı kuracağımız metni seçelim.

2.Standart araç çubuğunda bulunan Hyperlink butonunu tıklayalım. (veya İnsert <>’i tıklayalım)

3.İnsert Hyperlink ekranı (diyalog kutusu) açılır. Ekranın sağındaki Bookmark butonunu tıklayalım. Select Place in Document ekranı açılınca, oluşturduğumuz Bookmark’ı seçelim. OK’yi tıklayalım. Sonra İnsert Hyperlinks penceresinde OK’yi tıklayalım. Yeni hiperlinki kontrol etmek için önce Preview in Browser ve sonrada yeni hiperlinke tıklayalım.

Hiperlinkleri Düzeltmek:

1.Bir hiperlinkin adresini (URL) düzeltmek için hiperlinkleştirdiğimiz alanın üzerinde sağ tıklayalım.

2.Listeden ( down list) Hyperlink Properties’i seçelim.

3.Edit Hyperlink ekranı açılır. Address: metin kutusunda web adresini düzeltip, OK’yi tıklayacağız. Düzelttiğimiz hiperlinki kontrol etmek için önce Preview in Browser ve sonrada yeni hiperlinke tıklayalım.

DİNAMİK EFEKT OLUŞTURMA

SAYAÇ EKLEME

1.Design View’de bulunurken, imleci, sayaç oluşturacağımız yere getirelim.

2.İnsert’de Web Component’i tıklayalım.

3.İnsert Web Component ekranı açılır. Component Type’ın altında Hit Counter’ı tıklayalım. Sağ bölmede, Choose a counter style’ın altında sayaç stillerinden birisini seçerek çift tıklayalım.

İNTERAKTİF BUTON EKLEME

1. Design View’de bulunurken, imleci, buton oluşturacağımız yere getirelim.

2. İnsert’de Web Component’i tıklayalım.

3. İnsert Web Component ekranında Component type’ın altında Dynamic Effects’i tıklayalım. Choose an effect’in altında, İnteractive Buton’u çift tıklayalım. İnteractive Buttons açılır.

4. Text: alanında, buton içi etiket metnini yazalım.

5. Link: alanında, sayfanın adresini (URL) yazalım yada butonu tıkladığımız zaman görünmesini istediğimiz dosyayı yazalım.( Veya sayfa yada dosyayı yerleştirmek için Browse butonu kullanabiliriz.)

WEB SİTESİNİ YAYINLAMAK

1.Web sitemizi açalım.

2.Menü çubuğunda File < publish="">’ı seçelim.

3.Remote Web Site Properties ekranı açılır. Burada “remote web site location”’a adresimizi yazalım.(Örnek:http://staf.tkb.com.tr/username)

4.Bu aşamada kullanıcı adı ve şifremizi girelim.

5.Publish sekmesini seçelim. General bölümünde, All pages, overwritingpages already on destination işaretleyelim.

6.OK’yi tıklayalım.

7.Publish Web Site butonunu tıklayalım.

Fehmi DİNÇER

Ankara 2006

Bu yazının ikinci bölümü http://blog.milliyet.com.tr/Blog.aspx?BlogNo=49346 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.