Web’i Web yapan unsurların başında bilgisayarlar arası
iletişimi kolaylaştırmak gelirse, iki sırada Web sitelerinin içeriğini
sayarsak, hata etmemiş oluruz. Web, hem yazılı iletişim araçlarının durgun fakat
derinlemesine içerik bulunabilen sayfalarına, hem de televizyonun sesli ve
hareketli, buna karşılık sathî içeriğine sahip olabilir. Kısaca bir Web sitesi,
hem dergi, hem televizyondur. Buraya kadar bir Web sitesinin inşaatına
başlamayı ve yaptığımız sayfalara duragan içeriği koymayı ele aldık. Şimdi
sitemizi biraz televizyona benzetebiliriz!
Bu amaçla sayfalarımıza grafik bağlantı unsurları,
ziyaretçinin Mouse işaretçisini üzerine getirdiği zaman bazı özellikleri
değişen bağlantılar ile ses ve video unsurlar koyacağız. FP’de bu işin
tekniğini görmeden önce işin zevkle ilgili unsurları üzerine bir iki uyarıda
bulunalım.
Mimarlar, “İyi tasarım, göze görünmeyen tasarımdır,” derler.
Gerçekten de iyi bir gazete veya dergi sayfası mizanpajı da dikkati kendisine
çekmeyen, tersine okuyucunun içeriğin vermeyi amaçladığı mesajı kolay ve en az
hata ile almasını sağlayan mizanpajdır. Yazılı basın-yayın araçlarında sayfa
tasarımcısının sayfasını görsel olarak daha zengin hale getirmek ve sözgelimi
ofset baskı tekniğinin inceliklerine ne kadar hakim, usta bir mizanpör
olduğunu göstermek için, sayfasını içeriğin gerekli kılmadığı çizgiler,
kutular, renkler ve grafiklerle doldurur veya olur-olmaz yerlere boşluklar
koymaya kalkması halinde ortaya nasıl hatalı sayfalar çıkarsa, aynı tuzağa Web
sayfasında da düşebilirsiniz.
Renk verme imkanınız var diye hiç de ihtiyaç olmayan
metinlere veya çizgilere renk vererek, resim koyma imkanınız var diye içeriğin
gerektirmediği yerlere—sırf süs olsun diye—grafik unsurlar koyarak, Web sayfalarınızı
“ne dediği belirsiz” hale getirmeniz çok kolaydır. Başka bir deyişle bu
teknikleri dikkatle, itidalle ve vermek istediğiniz mesajın gerektirdiği ölçüde
kullanmazsanız, sayfalarınız gerçekten televizyona dönebilir! (Ve bu siteniz
için bence hiç de olumlu bir puan sayılmaz!)
FrontPage programını kurduğunuz CD-ROM’da çok sayıda sabit
ve hareketli grafik unsur bulacaksınız. Ayrıca Internet’te de istemediğiniz
kadar çok grafik (resim, fotoğraf, animasyon), video ve ses dosyalı bulabilir
ve sabit diskinize kaydedebilirsiniz. Ancak bir kere daha hatırlatmak gerekir
ki, sanat eserlerinin kullanımı, daima izne tabidir.
Grafik dosyaları bayt ölçüsüyle çok büyük dosyalardır.
Web’de grafik kullanacağınız zaman grafiğin ziyaretçinin bilgisayarına
aktarılma zamanını hesaba katmalısınız. Hiç kimsenin saatlerce sizin
grafiklerinizin kendi bilgisayarına indirilmesini beklemeye tahammülü yok.
Sayfalarınıza ekleyeceğiniz her grafik ögenin, ses ve video dosyasının
sayfalarınızın ziyaretçilerin bilgisayarına aktarılmasını biraz daha
zorlaştıracağını unutmamalısınız. Sitenizi, özel nitelik ve özel amaçlarla inşa
ediyorsanız, mesele yok; istediğinizi doldurun, sayfalarınızın
ziyaretçilerinizin bilgisayar ekrarında görüntülenmesi isterse 20 dakika alsın!
Fakat özel bir firmaya ait bile olsa, bir Web sitesi halka hizmet amacıyla
kurulmuş ise, sayfaların sür’atli aktarılması gerekir. İyi bir Web tasarımcısı,
sayfalarında sadece sitenin mesajının gerektirmediği görsel unsurlara yer
vermemekle kalmaz, fakat aynı zamanda sayfalarını yavaş bir modem bağlantısı
olan bilgisayarla, ülkenin farklı köşelerinden sınar veya sınattırır.
Dolayısıyla Web’de kullanılan grafiklerin sıkıştırılması
gerekir. Bir grafik, video veya ses dosyasının sıkıştırılması ebadının veya
süresinin değişmesi anlamına gelmez. Sadece bayt olarak dosya büyüklüğü
azaltılır.
Grafik alanında Web’de yaygın olarak kullanılan üç
sıkıştırma tekniği kullanılınır: Grafics Interchange Format (GIF), Joint
Photographic Expert Group (JPG) ve Portable Network Graphic (PGN). Bunlardan
JPG en kaliteli ve kalitesine göre oldukça dosya halindedir. GIF, hem kalite
bakımından zayıf, hem de dosya ölçüsü bakımından büyük olduğu halde, PNG’ye
göre daha sık kullanılır. Hangi sıkıştırma tekniğini kullanacağınıza geçmeden,
grafiklerle ilgili bir kaç teknik bilgiyi tekrarlayalım:
Bir grafiğin bilgisayar ekranında görüntülenmesinde
kullanılan iki ölçü vardır: grafiğin ekranda bir inçkarede kaç nokta yoğunluğu
olacak; grafiğin oluşturulmasında bilgisayarın ekran kartı kaç adet renk
bulunan bir model kullanacak? Ekran kartının ve fizikî ekranın çözünürlüğü
konusunu ele alırken, grafik unsurların çözünürlüğü ile ilgili temel bilgileri
gözden geçirmiştik. Şimdi bu bilgiler ışığında, bir fotoğrafın bir inçkarede 72
adet nokta kullanılarak oluşturulması ile bir inçkarede 300 nokta kullanılarak
oluşturulması arasında fark olduğunu görebiliyorsunuz. Bir grafik bir inçkarede
ne kadar çok nokta ile tanımlanırsa, grafik dosyası o kadar büyük olur. Web
sayfalarında yer alan unsurların çoğu sadece ekranda izlenmek üzere
hazırlandığına göre, grafiklerinizi 72 dpi olarak üretmeniz veya taramanız
yeterli olacaktır.
Renk modeli ise, kabaca tanımlarsak, bir grafiği ekranda
oluşturabilmek için ekran kartının, fizikî ekranda kaç renk meydana getirmesi
gerektiğini gösterir. Televizyon ekranı gibi bilgisayar ekranı da katot
ışınları ile çalışır ve bütün renkler üç temel rengin (kırmızı, mavi ve yeşil)
birbirine belirli oranlarda karıştırılması ile elde edilir. Teknik ayrıntıya
girmeden ifade etmek gerekirse, standart ekran kartları, teknik özelliklerine
göre ekranda 256, 65 bin 536 veya 16 milyon renk oluşturabilirler. Gelişmiş
ekran kartları, gerçek renk diye adlandırılan modelle, daha çok renk
sağlayabilir. Her grafik dosyasının içinde bu grafiğin görüntülenebilmesi için
ekran kartının ekranda asgari kaç renk oluşturması gerektiği belirtilir.
Grafiğinizde 256’dan fazla renk varsa, JGP olarak kaydetmeniz gerekir; çünkü
GIF sıkıştırma tekniğinde 256’dan fazla renge yer verilemez. Ayrıca GIF
modelinde, zemini saydam (yani arkasındaki unsuru gösterebilen) grafikler
oluşturulabilir.
Çok ayrıntılı bir fotoğrafın bile aslına yakın biçimde
ekranda görüntülenebilmesi için 256 renk yeter! Burada, aynı fotoğrafın değişik
renk modelleri ve değişik kayıt biçimlerinde iken ekranda nasıl
görüntülendiğini görüyorsunuz:
<FP00042.tif>
Bu sayfayı, gördüğünüz fotoğraflardan sadece birini
kullanarak yaptığımız zaman, 28.8 K’lık bir modemle sayfanın ziyaretçinin
bilgisayarına aktarılması için gerekli süreler ise şöyle:
16 Renk GIF: 3 saniye
216 Renk GIF: 9 saniye
256 Renk GIF: 11 saniye
16 Milyon Renk JFP: 32 saniye
Web’de birinci sayfanın aktarılması süresinin 20 saniyeyi
geçmemesi geleneğini hatırlatırsak, tasarımcı olarak grafik konusunda ne denli
sınırlamalar altında olduğunuz, çok daha iyi anlaşılabilir.
FP Editör’de sayfanıza grafik koymak için, imleç, grafiğin
görünmesini istediğiniz yerde iken, ya Insert/Ekle menüsünden Image (Grafik)
maddesini seçerek, ya da doğruca araç çubuğunda Insert Image (Grafik ekle)
simgesini tıklayarak grafik dosyasını seçmenizi sağlayacak diyalog kutusunu
açabilirsiniz. Bu kutuda seçtiğiniz grafiğin gerçekten istediğiniz grafik olup
olmadığını önizleme penceresinde görebilirsiniz.
HTML sayfada bir grafik, diğer bir grafiğin veya metnin ya
yanında, ya da altında yer alabilir. Yani, bu grafiğin yeri, yanındaki unsurun
ebadına veya uzunluğuna göre değişir. Grafiklerin sayfada sabit bir yerde
durmasını istiyorsanız, sayfaya tablo ile bir iskelet kazandırmanız gerekir.
Tablonun herhangi bir hücresine grafik koyabilirsiniz. Böylece yandaki hücrenin
içeriği ne kadar geniş veya uzun olursa olsun, grafiğinizin bulunduğu hücrenin
ebadı ve yeri, sizin tabloya verdiğiniz biçim değişmedikçe, aynı kalacaktır.
Grafikleriniz, bilgisayarınızda sıkıştırılmamış grafik
biçimleri olan BMP, TIFF, TGA, RAS, EPS, PCX ve WMF biçimlerinde kaydedilmiş
olabilir. FrontPage’de bu biçimlerdeki bir grafiği sayfanıza koymak istediğiniz
zaman, FP, grafikte 256’dan fazla renk varsa JPG’e, 256’dan az renk varsa GIF’e
çevirecektir. Bu kitapçıkta grafik oluşturma konusuna giremeyiz; ama bir
noktayı belirtmemiz gerekir. Başka bir programda yaptığınız ve GIF olarak
kaydettiğiniz bir grafiği, FP’de şeffaflaştırabilirsiniz. FP Editör’de sayfanızda
bulunan herhangi bir GIF grafiği bir kere tıklayın; Editör penceresinin alt
kenarında Grafik editing araç çubuğu belirecektir. Bunlardan Make Transparent
(Şeffaflaştır) aracını seçin; ve grafiğinizin şeffaf olmasını, yani arkasındaki
unsurların görünür hale gelmesini istediğiniz yerini tıklayın. Burada, aynı
grafiğin üstte saydamlaştırılmamış, altta saydamlaştırılmış örneğini
görüyorsunuz:
<FP00043.tif>
Sitenizde kullanmak istediğiniz grafikleri bir klasörde
biriktirdiyseniz, bu klasörü tümüyle FP Web’e ithal edebilirsiniz. FP, sitemizi
oluştururken, kendi grafiklerini, IMAGES adlı bir klasöre koymuştu; biz de
fotoğraf örneklerimizi bu klasöre kopyalamıştık. Ancak siteniz çok sayıda
grafik kullanacaksanız, bulunduğu klasörü, Web’e aktarmak daha kolay olabilir.
(FP, sitenizi gerçek Internet’e aktarırken, bu klasörleri de aktaracaktır.)
GIF biçiminde grafiklerin diğer biçimlerde olmayan bir
özelliği, aynı dosya içinde birden fazla sabit grafiğin kaydedilmesi ve
bunların tayin edilen sırayla gösterilmesidir. Tıpkı sinema tekniğinde olduğu
gibi, gözümüz, kısa aralıklarla birbiri ardına gördüğü sabit resimleri
hareketli imiş gibi algılar.
Anime (Hareketli) GIF dosyası üretebilmek için önce bir
grafik programı yardımıyla hareketi yansıtacak GIF dosyaları üretmeniz gerekir.
FP’i kurduğunuz CD-ROM’da bir Anime (hareketli) GIF yapma programı
bulacaksınız. Bu program, bir çok GIF dosyasını belirli bir sırayla ve her biri
arzu ettiğiniz bir süre ile gösterilecek şekilde tek GIF dosyası haline
getirecektir.
Sayfalarınıza anime grafik koymakla, düz grafik koymak
arasında işlem bakımından hiç bir fark yoktur.
Dosya büyüklüğünü ne kadar sınırlı da tutsanız, grafiklerin
sizin sitenizden ziyaretçinin bilgisiyarına aktarılması metne göre çok zaman
alır. Kimi zaman da bu aktarma, ne sizin, ne de ziyaretçinin kusuru olmaksızın,
kesilir. Aktarma sırasında ziyaretçinin Browser’ı, grafiğe ayırdığınız kutuyu
çizecek ve içini boş bırakacaktır. Grafik bir sebeple aktarılamadığı zaman, bu
kutunun içinde kırmızı bir çarpı işareti veya kopuk grafik bağlantısı simgesi
görülecektir. Aktarma sırasında ve aktarma kesildiği hallerde bu kutuda bir
yazı görünmesini sağlayabilirsiniz. Bazı Internet meraklıları ise Browser
programlarının grafik gösterme özelliğini iptal ederler ve ziyaret ettikleri
sitelerdeki grafiklerin kendi bilgisayarlarına aktarılmasını durdururlar. Bu
durumda da grafiğin yerine bir yazı görüntülenebilir.
FP’de sayfanıza koyduğunuz bir grafiği sağ-tıklayın; açılan
menüden Image Properties (Grafik özellikleri) maddesini seçin:
<FP00044.tif>
Açılacak kutuda, resmin kaynağını, dosya adını ve diğer
özelliklerini sıralayan birinci bölümün altında “Alternative Representations”
(Alternatif gösterimler) bölümünü göreceksiniz.
Bu bölümde önce, sitenizin yapısı gereği, sayfalarınıza
yüksek çözünürlükte, çok renkli modellerde, ziyaretçiye aktarılması uzun
sürecek grafikler koymak zorunda iseniz, bu grafik aktarılıncaya kadar,
ziyaretçinin boş ekranı seyretmesi yerine resmin düşük çözünürlükte az renkli
bir örneğini çabucak görmesini sağlayan “Low Res” (Düşük çözünürlük)
alternatifi bulunur. Bu kutunun yanındaki Browse düğmesini tıklayarak, gerçek
grafik aktarılıncaya kadar çabucak görüntülenmesini istediğiniz düşük
çözünürlükteki grafik dosyasını seçebilirsiniz. Aynı bölümde “Text” (Metin)
kutusunun içine yazacağınız yazı ise grafik ziyaretçinin bilgisayarında
görüntüleninceye kadar veya grafik bir
sebeple aktarılamazsa (veya ziyaretkçinin Browser’ında grafik gösterme imkanı
kapatılmışsa) grafiğin yerine gösterilir. FP, otomatik olarak grafik dosyasının
adını ve büyüklüğünü metin olarak seçer; isterseniz bu metni silerek yerine
arzu ettiğiniz herhangi bir yazılı yazabilirsiniz. (Bu yazı, ziyaretçinin bilgisayarının sistem
harfleriyle görüntüleneceği için, mesela sizin bilgisayarınızda mevcut Türkçe
harfleri içeren bir yazı yazarsanız ve ziyaretçinin bilgisayarında bu harfler
yoksa, yazınız çok çirkin bir görünüm alabilir!)
Image Properties (Grafik özellikleri) kutusunun üçüncü
bölümü olan Default Hyperlink (Varsayılan Bağlantı) bölümü dikkatinizi çekmiş
olmalı. Bu bölümü kullanarak neler yapabileceğimizi aşağıda göreceğiz.
Web sayfasında nasıl bir veya birden fazla kelimeyi
tıklandığı zaman ziyaretçiyi başka bir sayfaya veya başka bir siteye götüren
bağlantı kazandırabiliyorsak, aynı işlemi grafiklerle de yapabiliriz. Başka bir
deyişle, sayfamızdaki grafiklere, tıklandıkları zaman ziyaretçiyi, sayfamızda
başka bir bölüme, başka bir sayfaya veya başka bir URL adresine götürme imkanı
kazandırabiliriz.
Bunu, Image Properties (Grafik özellikleri) kutusunun üçüncü
bölümü olan Default Hyperlink (Varsayılan Bağlantı) bölümüne bir URL yazarak
yapabileceğimiz gibi, FP Editör’ün ana penceresinde de yapabiliriz. Her iki
yönteme de kısaca değinelim.
Önce bir film, bir de fotoğraf makinası grafiği (veya
onların yerini tutacak iki örnek grafik) bulun. Tabii yine bunun en kestirme
yolu, PC World sitesinden örnek dosyaları indirmektir. Sonra, FP Explorer’da
Navigation görünümünde iken Yenilikler sayfasını ve Araç Çubuğu’nda New Page
(Yeni Sayfa) simgesini birer kere tıklayın. Yenilikler sayfasına yeni bir sayfa
eklenmiş oldu. Bu sayfanın Navigation görünümündeki simgesinin adını “Yeni
Techizat” olarak değiştirin. (Dosyalar bölümünde bu sayfanın Yeni1.htm olarak
adlandırıldığını göreceksiniz; bu adı da techizat.htm yapın) Yenilikler
sayfasını iki kere tıklayarak FP Editör’de açtığınız zaman, sol taraftaki
Navigation bölümüne Yeni Filmler satırının altına Yeni Techizat sayfasının da
eklendiğini göreceksiniz. Fakat sitemiz amatör fotoğrafçılıkla ilgili olduğuna
göre, düz metin bağlantılara ek olarak, biz sayfamıza biraz daha görsel
bağlantı düğmeleri de koymak istiyoruz.
Şu ana kadar örnekleri birlikte yaptı isek, bu sayfadaki
metin, “...arşvini yapmakta kullanabilirsiniz.” Şeklinde bitiyor olmalı. Mouse
işaretçisini son kelimenin sonunda tıklayın ve klavyeden Enter tuşuna basın.
İmleç şimdi yeni bir paragrafın başında duruyor ve son paragraf noktalı liste
olduğu için, yeni paragrafın da başında nokta var. Klavyede’de Backspaçce
(Geri) tuşuna basarak, bu paragrafı Normal hale getirin. Insert menüsünden
Clipart maddesini seçerseniz, FP’in kendi grafik arşivi açılacaktır. FP
kurulurken bazı örnek fotoğraflarla size bir grafik arşivi kurmuş olmalı. Fakat
siz şimdi kendi sağladığınız grafiği kullanacağınız için bu listeden Image
(Grafik) maddesini seçin ve açılacak kutuda altta URL hanesinin sağındaki üstü
büyüteçli klasör simgesini (sabit diskte dosya seçme aracı) tıklayın.
Hazırladığınız vepa PC World sitesinden indirdiğiniz dosyayı (film.gif) sabit
diskinizde bulun; OK’i tıklayın. Grafik yerine göre biraz büyükse, bir kere
tıklayarak dört tarafında belirecek tutamaklardan köşelerde bulunanlardan
birini Mouse işaretçisiyle tutarak, çaprazlama sürükleyin; resim oranları
değişmeden küçülecektir. Gözünüze uygun büyüklüğe inince, Mouse’un düğmesini
bırakın. Resim hala seçili iken, Editör pencerisinin alt kenarındaki Grafik
Editing Araç Çubuğu’ndan resmi şeffaf (transparan) hale getirme aracını seçin
ve grafiğin boş bir yerini bu araçla tıklayın. (Resmin çevresindeki beyaz
boşluk kayboldu ve sayfanın zemin grafiği görünür hale geldi.) Şimdi resmin
sağındaki boşluğu tıklayın ve klavyeden aralık çubuğuna iki üç kere basın.
Şimdi ikinci resmi (kamera.gif) koymak üzere harekete geçin. Gerekiyorsa bu
resmi de küçültün; şeffaf hale getirin. Grafikleri sayfamıza koymuş olduk.
Sıra, bu iki grafiğe bağlantı kazandırmaya geldi. Fakat bu arada bir şeyi not
etmemiz gerekiyor. Mouse işaretçisini sayfada soldaki seyir metinlerinden “Yeni
Filmler” satırına götürün ve bu sırada Editör penceresinin alt kenarında
belirtilen bağlantıyı bir kenara yazın (film.html); sonra aynı işlemi “Yeni
Teçhizat” bağlantısı için de yapın (techizat.html).
Tekrar birinci grafiği (film resmini) tıklayın; Araç
Çubuğu’ndan “Create or Edit Hyperlink” (Bir bağlantı oluşturun ve düzenleyin)
simgesini (çevresinde zincir halkaları bulunan dünya simgesi) tıklayın. Filk
resmi tıklandığında ziyaretçimiz Yeni Filmler sayfasına (film.htm) gitsin
istediğimize göre, açılan diyalog kutusunda üstteki listede film.htm dosyasını
iki kere tıklamanız yeterli. Aynı işlemi diğer grafik için de yapın ve bu kez
techizat.html dosyasını seçin.
Grafiklerin bağlantılı olduğunu göstermek üzerde
çevrelerinde ince bir mavi çerçeve oluştuğunu göreceksiniz. Bu çerçeve bazı
tasarımcıların hoşuna gitmez ve ziyaretçilerin grafiklerde bağlantı olduğunu
Mouse işaretçisini bu grafiğin üzerine getirdiğine imlecin el görünümü
almasından anlamasını isterler. Eğer siz de bu çerçevenin grafiğinizin
görünümünü kötü etkilediğini düşünüyorsanız; resmi sağ-tıklayın; açılacak
menüden Image Properties (Grafik özellikleri) maddesini seçin; açılacak kutuda
Appearance (Görünüm) sekmesine gidin ve
Border Tickness (Çerçeve kalınlığı) kutusuna 0 rakamını yazın.
İşte bu kadar. Sayfanızda artık grafikli bağlantı veya
bağlantılı grafik var!
<FP00045.tif>
Diyelim ki ziyaretçiniz grafiğin tümünü tıklayınca belirli
bir yede değil de, grafiğin belirli bir yerini tıkmayınca bir sayfaya, başka
bir yerini tıklayınca başka bir sayfaya gitsin istiyorsunuz. Teknik deyimiyle
bir grafiğin üzerinde Hotspot’lar (kelime anlamı “sıcak noktalar” olan
bağlantılı bölgeler) oluşturmak istiyorsunuz. FrontPage, grafiklerinize
dikdörtgen, daire, veya çok kenarlı bağlantılı bölgeler oluşturabilir; veya
grafiğiniz GIF biçiminde ise üzerine bir yazı yazmanıza ve bu yazıya bağlantı
kazandırmanıza imkan verebilir. Bu işleme bir grafik üzerinde bağlantı haritası
yapmak denir.
Bunu sağlamak için tabii biraz büyükçe ve üzerinde bölge
oluşturmak için anlamlı bir grafiğe ihtiyacımız var. Bağlantı haritası için iyi
örnek bir harita grafiği olabilir. Elinizde güzel bir Türkiye haritası dosyası
varsa, sabit diskinizdeki Web’de grafiklerinizin durduğu yere kopyalayın; veya
PC World sitesindeki örnekler dosyasından Türkiye.gif’i indirin.
Şimdi, diyelim ki, Sergiler sayfamızda yer alacak fotoğraf
sergileri ve gösterileri bölgeler itibariyle (Doğu ve Güneydoğu Anadolu ile Ege
ve Marmara bölgeleri birleştirmek suretiyle) beş sayfa halinde vereceğiz; sergi
ve gösterilerin listesini yapıldığı illere göre bu beş sayfaya ayıracağız. O
halde, Sergiler sayfasını bir kere, New Page simgesini de beş kere tıklayın;
sonra yeni sayfaların adlarını Doğu, Batı, Kuzey, Güney ve Orta diye
değiştirin. Bu noktada klavyeden F5 tuşuna basarsanız, yeni yaptığınız
sayfaların dosya adları sayfa başlıkları ile uyumlu şekilde düzeltilecektir
(doğu.htm’i dogu.htm ve batı.htm’i bati.htm yapmayı unutmayın). Şimdi, Sergiler
sayfasını iki kere tıklayarak FP Editör’de açın.
Ortak unsurları bulunan buna karşılık içeriği henüz olmayan
bu sayfaya, “Sergi listesini görmek istediğiniz bölgeyi aşağıdaki haritada
tıklayın” yazın, klavyede Enter tuşuna iki kere basın ve “Eklemek istediğiniz
sergiler için lütfen Öneriler sayfasındaki formu doldurun” yazın. Sonra, imleci
iki paragrafın ortasındaki boş paragrafa götürüp, Insert/Ekle menüsünden
Image/Grafik maddesini seçin, ve harita dosyanız nerede ise bulup, OK’i
tıklayın. Harita, ebad olarak sayfanız için çok büyükse, köşelerinden tutarak
küçültebilirsiniz.
İki paragrafın ortasında belirince haritayı bir kere
tıklayın ve Editör penceresinin alt kenarında beliren Grafik Editing Araç
Çubuğu’na bakın. Çubuğun ilk simgesi olan okdan sonra, sırasıyla dikdörtgen,
daire ve çok kenarlı (poligon) simgelerini görüyor musunuz? Bunlar, grafik
üzerinde tıklanabilir bağlantılı bölge çizmek için kullanacağımız araçlar. Aynı
yerde, çizdiğiniz bölgeleri topluca görmenizi sağlayan “Highlight Hotspots”
(Bağlantı bölgelerini göster) ve grafik üzerine metin yazma ve bu metne
bağlantı vermeye yarayan A harfi şeklindeki Text (metin) aracı da yer alıyor.
Bağlantı bölgeleri haritasını harita üzerine çizeceğimize ve
illerimizin sınırları düz çizgi şeklinde olmadığına göre, bize çok kenarlı
(poligon) aracı gerekiyor. Bu aracı tıkladığınızda Mouse işaretçisinin kalem
şeklini aldığını göreceksiniz. Başlayın dikkatli bir şekilde ekrandaki harita
üzerinde tayin ettiğimiz beş bölgenin sınırlarını denk geldikleri coğrafî
bölgelere uygun şekilde çizmeye! (Maalesef, FP’de sayfayı ve grafiği büyütme
imkanı yok! Ve küçük bir harita üzerinde il sınırlarını doğru şekilde
çizebilmek zor olsa gerek!)
Çok kenarlı bir bağlantı bölgesi çizebilmek için, önce kalem
şeklindeki imleci bölgenin başlayacağı bir noktaya getirerek, Mouse’un sol
düğmesini tıklatın; Mouse işaretçisini yürüttüğünüzde tıkladığınız noktadan
itibaren düz bir çizgi çizildiğini göreceksiniz; çizginin köşe yapmasını
istediğiniz noktada Mouse düğmesini tıklayın ve Mouse’u sürüklemeye devam edin.
Bölgeyi çizmeye başladığınız roktaya gelip de ilk noktanın üzerini
tıkladığınızda, Create Hyperlink (Bağlantı Oluştur) kutusu açılacaktır.
Çizdiğiniz bölge örneğin Ege ve Marmara’nın bileşimi idiyse, açılacak listeden
bati.htm’i seçin. Diğer bölgeleri de harita üzerinde çizerek bu bölgeye ait
bağlantının HTML dosyasını seçin. Bu işlem bittiği zaman ortaya şöyle bir
görünüm çıkacaktır:
<FP00046.tif>
Mouse işaretçisini çizdiğiniz bölgelerin üzarine
sürüklediğiniz zaman FP Editörün alt çerçevesinde bağlantı kurulmuş sayfanın adını
görebilirsiniz. İsterseniz, klavyede CTRL tuşunu tutarak bölgelerinizi
tıklarsanız, bağlantıyı sayfaya gidebilirsiniz.
Sitemizin giderek “usta işi” halini aldığını görüyorsunuz,
değil mi?
Web sayfalarımızı zenginleştiren unsurlar arasında
sayabileceğimiz ses ve videonun sitenin ve sayfanın genel içeriğine uygun
olmaması halinde, ziyaretçileri en şaşırtan unsur olması da mümkündür. Ayrıca
müzik ve video eserlerinin de telif hakkı bulunduğunu unutmamak gerekir.
FrontPage, en sık kullanılan MIDI, AU, WAV biçimleri dahil
bir çok farklı ses dosyası türünü tanır ve kullanabilir. Ancak
ziyaretçilerinizin Internet programları, sizin kullanacağınız bütün dosya
biçimlerini tanımayabilir. Bu sebeple, bu üç ortak biçimdeki dosyaları
kullanmalısınız. Ses dosyaları da grafik dosyaları gibi sıkıştırılabilir.
Microsoft Active Media teknolojisi ile üretilecek projeler ve Real Audio (RA)
bunlar arasında sayılabilir.
Web sayfasında ses dosyası, bir bağlantı olarak konulabilir;
ziyaretçi bu bağlantıyı tıkladığı zaman Browser’ı bağlantılı ses dosyasını
indirerek, çalacaktır. Amatör fotoğrafçılık sitemize fotoğrafçılık dersleri ile
ilgili bir bölüm koyar ve bölüme “Ders 1,” “Ders 2” şeklinde ses dosyaları
bağlantıları yaparsak, ziyaretçinin bu bağlantılardan birini tıklaması halinde,
Browser programının bağlantılı ses icra programı devreye sokarak, ziyaretçinin
ses dosyalarını dinlemesini sağlayacaktır.
Bunun dışında ses unsurundan arka-plan unsuru olarak da
yararlanabiliriz. Bu durumda ses dosyası, içinde bulunduğu sayfa ile birlikte
ziyaretçiye aktarılar ve sizin vereceğiniz ölçülere göre ya bir kere ya da
sayfa açık olduğu sürece biteviye çalınır. Ziyaretçi, Netscape browser
kullanıyorsa ve gerekli plug-in denilen ek programları kurmamışsa, arka-plan
seslerini duyması mümkün olmayabilir.
Sitemiz, amatör de olsa fotoğrafçılıkla ilgili olduğuna
göre, sayfalarımız açıldığı zaman bir fotoğraf makinasının deklanşör sesi
duyulması, fena olmayabilir. Ana sayfamıza söyle bir ses ekleyerek, alıştırma
yapabiliriz. Bunun için bize bir fotoğraf makinası deklanşör sesi içeren ses
dosyası gerekiyor. Bilgisayarınızda ses kartı varsa (aslında ses kartı olmayan
bilgisayar kalmı mı, diye sormak gerekir!) ve ses kartına bir mikrofon bağlı
ise, istediğimiz sesi kaydedebiliriz. Filanca şarkıcının şarkısını müzik
setinde çalıp, bu sesi kaydedersek, telif hakkı bize ait bir ses elde etmiş
olmayız, ama kendi fotoğraf makinamızın çıkarttığı sesi kaydedersek, bunun
telif hakkı bize ait olur. Bu sesi diyelim ki sabit diskimize “deklansor.wav”
adıyla kaydettik. (Bu dosyayı PC World sitesinde bulabilirsiniz, veya alıştırma
maksadıyla Windows’un kendi ses dosyalarından herhangi birini
kullanabilirsiniz.)
FP Explorer’da Navigation görünümünde, Ana Sayfa’yı iki kere
tıklayalım. Sayfamız FP Editör’de açıldığında herhangi bir boş yeri sağ
tıklayarak, açılacak menüden Page Properties (Sayfa Özellikleri) maddesini
seçelim. Açılacak kutunun birinci sekmesinde (General), “Background Sound”
(Arka-plan sesi) başlıklı bölüme dikkat edin. Location (Mahal) kutusu boş, ve
yanında Browse (Gözat) düğmesi var. Bu düğmeyi tıklayarak, ses dosyasının
bulunduğu klasöre gidin ve dosyayı seçin. OK düğmesini tıklayarak Sayfa
Özellikleri kutusuna geri döndüğünüzde, Location hanesinde seçtiğiniz dosyanın
adının yazılı olduğunu göreceksiniz. Merak etmeyin, sayfayı ilk kaydettiğinde
ve siteyi güncelleştirdiğinde FP bu dosyayı Web klasörüne koplayalayacaktır:
<FP00047.tif>
Bu kutuda Loop (döngü) hanesini görüyorsunuz. Buraya
yazacağınız sayı, sayfa ziyaretçinin bilgisayarında görüntülendiğinde arka-plan
ses dosyasının kaç kere çalınacağını gösterir. Bu kutuya 9999’a kadar bir rakam
yapabilirsiniz; veya yandaki Forever (Sonsuz) kutusuna bir işaret koyarak
sürekli çalınmasını sağlayabilirsiniz.
Sayfanıza arka-plan sesi yerleştirdikten sonra FP Editör’de
Preview (Önizleme) sekmesine giderek, sesi dinleyebilirsiniz. Eğer ses sizin
bile sinirinize dokunuyorsa, Normal sekmesinde sesi koyarken izlediğiniz yolu
izleyip, Location hanesindeki dosya adını silmeniz, sesi kaldırmanız için
yeter.
Sayfanıza ses dosyası koymak, sayfanızı yeterince
televizyona çevirmedi ise, bir de video koymaya ne dersiniz? Buna geçmeden
dijital video konusuna kısaca değinelim.
Televizyonda izlediğiniz, televizyondan ya da kameradan
kasete kaydettiğiniz, kasette kayıtlı olup da VCR/VTR aracılığıyla oynattığınız
video, analog şekilde kaydedilmiştir. Analog video kaydının özel bir aygıt
yardımıyla bilgisayarın sabit diskine aktarılmasına videonun dijitale çevrilmesi
veya dijitalize edilmesi denir. Günümüzde doğrudan bilgisayara (veya
bilgisayarın okuyabildiği bir ara ortama) kayıt yapabilen dijital video
kameralar vardır. Dijital video da grafik ve ses gibi bir çok biçimde
kaydedilebilir. Microsoft’un Windows için geliştirdiği dijital video biçimine
AVI (Audio/Visual Interleaved) denir. Daha başka dijital video kayıt ve
sıkıştırma biçimi de vardır. FP, AVI dosyalarını okuyabilir. Ayrıca AVI, Web
Browserlar arasında da en yaygın tanınanıdır. Intel Firmasının Indeo Video,
Apple Firmasının QuickTime ve Microsoft Firmasının Active Media video
teknolojileri, RealAudio-Video firmasının RA sıkıştırma yöntemi,
Internet’te ücretsiz ve telif hakkından vazgeçilmiş video
dosyalar bulunabilir. Fakat herhangi bir sinema filminin bir bölümünü bile
dijitale çevirip, sitenize koyamazsınız. Film yapımcıları telif haklarını
koruma işini çok ciddiye alırlar! Yeni ve giderek ucuzlayan dijital video
kameraları ile kendi filminizi kendiniz çekip, sitenize koyarsanız, buna kimse
bir şey diyemez! Fakat alıştırma maksadıyla PC World’ün CD Magazin’indeki
herhangi bir AVI dosyasını kullanabilirsiniz. PC World sitesinde bu kitapçıkla
ilgili dosyalar arasında Test.avi adlı bir örnek dosya bulacaksınız.
Web sitesinde video ile ilgili son uyarımız, video
dosyalarının çok büyük yer tutması ve dolayısıyla ziyaretçinizin bilgisayarına
indirilmesinin çok uzun zaman almasıdır. 800 KB’dan büyük video dosyalarına
sitenizde yer vermemeniz gerekir.
Şimdi bir örnek uygulama yapalım. Web sitemizin Navigation
görünümünde Yeni Teçhizat sayfasını iki kere tıklayın; açılan sayfada metin
imlecinin bulunduğu yeri değiştirmeden, Insert/Ekle menüsünden Active Elements
(Hareketli Unsurlar) maddesini, onun alt menüsünden de Video maddesini seçin.
Sabit diskte dosya bulma düğmesini tıklayarak, video dosyasının bulunduğu yere
gidin. Aradığınız videoyu bularak, ve OK’i tıklayarak, sayfaya geri dönün. FP,
seçtiğini videonun birinci karesini görüntüleyecektir. Preview sekmesini
tıklarsanız, videoyu izleyebilirsiniz.
Sayfanıza koyduğunuz videonun nasıl gösterileceğini
denetlemeniz mümkündür. Halâ Preview sekmesinde iseniz Normal’i tıklayın ve
video kutusunu sağ-tıklayarak açılacak menüden Image Properties maddesini
seçin. Açılacak kutuda ikinci sekme olan Video’da sayfanızdaki videonun nasıl
görüntüleneceğine ilişkin kontrolleri göreceksiniz:
<FP00048.tif>
Video Source (Video kaynağı) olarak dosyanızın adı yazılı
olacaktır. Hemen altında, ziyaretçinizin Browser ekranında bu videonun
oynatılması ve durdurulmasına ilişkin kontrol düğmelerinin görüntülenip
görüntülenmemesini sağlayan “Show Controls in Browser” (Browser’da Kontrolleri
Göster) kutusunu görüyorsunuz. Bu kutuya işaret koyarsanız, ziyaretçi videoyu
istediği zaman oynatabilir, istediği zaman durdurabilir. Çok uzun ve özellikle
eğitim-öğretim amacıyla verdiğini videolarda ziyaretçiye kontrol imkanı vermek
gerekir. Videonun ne zaman gösterileceğini belirleyen iki kontrol göreceksiniz.
“On File Open” (Dosya açılınca) maddesini işaretlerseniz, sayfanız ziyaretçinin
bilgisayarına indirildiği anda video oynayacaktır. “On Mouse Over” (Mouse
üstüneyken) maddesi ise ziyaretçinin Mouse işaretçisini videonun üzerine
sürüklediği zaman videonun gösterilmesi sağlar. Bu maddeyi seçerseniz,
ziyaretçi Mouse işaretçisini uzaklaştırdığı anda video durur; işaretçiyi
videonun üzerine getirdiği anda video baştan başlar. Eğitim-öğretim amaçlı
videoda bunu yapmak doğru olmaz.
Sayfalarınıza video (veya ses) dosyalarını Hover düğmesi
olarak da yerleştirebilirsiniz. İngilizce “üzerinden geçmek, üzerinden uzmak,
üzerinde dolaşmak” gibi bir anlama sahip olan bu kelimele nitelenen düğme, FP
tarafından Java programcığı vasıtasıyla çalıştırılan bir dinamik HTML (DHTML)
uygulamasıdır. Java programını ve bu programın gerektirdiği parametreleri FP
kendisi oluşturacaktır.
Web sitemizin Navigation görünümünde Yeni Teçhizat sayfasını
tekrar iki kere tıklayın; açılan sayfa biraz önce koyduğunuz videoyu tıklayın
ve klavyede Delete tuşuna basın. İmlecinin bulunduğu yere örneğin “Bu video ile
netlik ayarı yapmak için gerekli bilgiler verilmektedir.” Yazın ve iki kere
Erter’a basın. Sonra, “Netlik ayarları fotoğraf makinalarında ve objektiflerde
farklı konumlarda bulunabilir” yazın. İmleci iki paragraf arasındaki boşluğa
getirin ve Insert/Ekle menüsünden Active Elements (Hareketli Unsurlar)
maddesini, onun alt menüsünden de Hover Button maddesini seçin. “Button Text”
(Düğme metni) kutusundaki “Button text” kelimelerini silip yerine Video yazın.
“Link to” kutusunun sağındaki Browse düğmesini tıklayarak, düğmenin kontrol
edeceği video dosyasını bulun (Bizim örneğimizde Test.avi dosyası). Hover
Button kutusunda ziyaretçinin tıklayarak videoyu açacağı ve içinde “Video”
kelimesinin bulunacağı dinamik düğmnin diğre bazı özelliklerini de göreceksiniz.
Düğmenin asıl rengi, ziyaretçi Mouse işaretçisini düğmenin üzerine getirdiği
zaman düğmede ulaşacak etki (Effect) ve bu sırada düğmenin alacağı farklı renk
gibi özellikleri buradan ayarlayabilirsiniz. FP, etki olarak düğmenin ortasında
bir alanın parlaması şeklindeki Glow (Parla) etkisini seçecektir. İsterseniz bu
etkiyi ve renkleri değiştirebilirsiniz. Bu kutuda işiniz bittiği zaman OK’i
tıklayın. Bu suretle oluşturduğunuz düğme, ziyaretçinin Browser’ında üzerine
Mouse işaretçisi geldiği zaman tıklandığında bir başka eylem olacağı veya bir
başka bağlantının sağlanacağı belirtisi olarak şekil değiştirerek ziyaretçinin
dikkatini çekecektir. Mouse işaretçisi bu düğmenin üzerinde olduğu sırada,
Browser perceresinin alt çerçevesinde, “test.avi” dosya adı okunacaktır.
<FP00049.tif>
Bir videoyu sayfanıza bir Hover düğmesi yardımıyla
koyarsanız, bu düğme tıklandığında video ziyaretçinin bilgisayarına sayfadan
ayrı olarak indirilir ve Browser programının bağlı olduğu aracı program (Real
Player, MS Media Player, vs.) aracılığıyla gösterilir. Bu aracı programın
penceresi, Browser’dan bağımsız ve sizin videonuz yüklenmiş olarak, ziyaretçi
tarafından kapatılıncaya kadar açık kalır. Eğitim-öğretim veya gösteri amacıyla
ziyaretçilerinize göstermek istediğiniz videoları sayfanıza Hover düğmesi
yardımıyla koymanın daha uygun olduğu bir çok durum düşünebilirsiniz.