Yapay Zeka Nedir ?

İnsanın düşünme yapısını anlamak ve bunun benzerini ortaya çıkaracak bilgisayar işlemlerini geliştirmeye çalışmak olarak tanımlanır. Yani programlanmış bir bilgisayarın düşünme girişimidir. Yapay Zeka bilgi edinme, algılama, görme, düşünme ve karar verme gibi insan zekasına özgü kapasitelerle donatılmış bilgisayardır.

Her hangi hesaplanabilir bir fonksiyonun  sinir hücrelerinden oluşan  ağlarla hesaplanabileceği  ve mantıksal “VE”  ve “VEYA” işlemlerinin  gerçekleştirebileceğini gösterildi.(MC Collach)

İnsan gibi düşünen sistemler yapmak,
Rasyonel karar verebilen  sistemler üretmek amaçlandı.

1. İnsan Gibi Düşünen Sistemler : İnsanın nasıl düşündüğü saptanmalıdır. Psikolojik deneylerle  yapılır. Elde edilen bilgilerden bir kuram oluşturulur. Buna göre program üretilir.

2. İnsan  Gibi Davranan Sistemler : Ulaşılmak istenen amaçtır. Turing Testi ile ” sorgulayıcı ile bir terminal arcılığı ile haberleşilir. İnsan mı? Bilgisayar mı? anlayamazsa testi geçmiştir.” anlaşılır.

3. Rasyonel Düşünen Sistemler : Temeli mantıktır. Çözülmesi istenen sorun  mantıksal bir gösterimle  betimlendikten sonra  çıkarım kurallarını kullanarak çözüm bulmaktır.

4. Rasyonel Davranan  Sistemler : Amaçlarına ulaşmak için  inançlarına uygun davranan  sistemlere  rasyonel denir. Ajan, algılayan ve  harekette bulunan şeydir. Doğru çıkarımlar yapmak  ve bu çıkarımların  sonuçlarına göre hareket etmektir.

Yapay Zeka Yaklaşımları :

1.Matematiksel yaklaşım : Tüme varım, kaos teorisi, parçadan tüme yönelme, beynin tümü bir problem çözmede olguya katılıyor.

2.Fiziksel Yaklaşım : Bilginin nerede olduğu tam saptanamamıştır. İnsan beynindeki hücrelerde depolanan bilgilerin  harekete geçirilmesi.(İrade-i Külliye , İrade-i Cüziye )

3. Psikolojik Yaklaşım : Gelişme, beyne sahip olanlar çevreleri ile etkileşime girmeleri, bu sayede  yeni şeyler öğrenerek bunları daha sonra  hatırlayabilmeleri. Öğrenme, bellek, bilgi edinme, deneyimlerden  yararlanmayı sağlar.

4.Felsefi Yaklaşım : Bilgisayar düşünebilir mi? Bunun cevabı üzerinde durmaktadır.

YAPAY ZEKANIN UYGULAMA ALANLARI

1.Bilgisayar Bilimlerinde :  Yazılım ve donanım üzerinde odaklaşmıştır. Çünkü Y.Z  uygulamaları için  çok güçlü süper bilgisayarlar üretilmelidir. İlk Aşama : Zeki Bilgisayarlar üretmektir. Optimum seviyede  mantıksal anlam çıkarma işlemi için tasarlanmalıdır. Nümerik işlem yerine  sembolik işlem kullanılması gerekir. Resimleri tanıyabilmektedir.
2.Robotik sistemlerde : Mühendislik ve psikoloji robot iği. İnsan gibi fiziksel kapasitelere sahip, bilgisayar  kontrollü  robot üretiminin gerçekleştirilmesi. Robotlar : Görme, dokunsal algılama, idare etme, beceri, hüner, hareket kabiliyeti, yol bulma zekası…vb.
Rabatlar: Stutgart Üniversitesinde , monte edilmiş kol, yük taşıyıcı, stereo kameraya sahip ve grubun sözcüsünden oluşturuluyor.
Konpereson Yeteneğine “kimin hangi görevi hangi sıra ile yapacağını aralarında          kararlaştırarak “  sahip.
Örnek olarak : Robot örümcek tasarımı, 23 motor, 10 cpu, 150 adet algılayıcıdan ibaret. Bu robot yukarı aşağı çıkıyor, refleks hareketi yapıyor, gerile, avı izle özelliklerine sahip.

3.Doğal ara birimlerde : İnsanın konuşma dilinde bilgisayarlar ile robotlarında konuşmaya başlaması. Bizim onları anlayabildiğimiz gibi onlarında bizi anlayabilmesidir.

•Dil biliminde
•Bilgisayar bilimleri
•Psikoloji
•İnsan dilini anlama, konuşmayı tanıma
• Bilgisayarlarla ilişki kurmak için ana dilin kullanılması
Yazılı ana dilin uygula işlemesi uygulamaları çoktur.
•Bilgisayarla tercüme
•Metin özetlerini çıkarma
•Metinlerin otomatik üretilmesi
•Dokümanların hazırlanmasında

Natural speaking : sesi nötr sinyallere çeviriyor, ince ayarları yapıyor, söylenen bir kelimenin ardından hangi kelimenin geleceğini tahmin edebiliyor.

4.Sinirsel Ağlar da : Çeşitli yollarla bir birine bağlı  birimlerden oluşmuş topluluklardır. Nöron Ağları : sinir sisteminin parçalarından olup  ;
•Biteni taklit etme
•İşe yarar ticari cihazlar yapmakta
•Beyim işleyişine ilişkin  genel kuramları sınamakta kullanılır
•Sınıflama
•Duyu-veri işleme
•Çok duyulu makine

Ağların eğitimi için algoritmalar kullanılır.

Yapay sinir ağı uygulamaları :Ya bilgisayar üzerinde  yazılım simulatörleri kullanarak ya da özel donanım içeren  bilgisayarlarla tasarlanır.

•İmza kontrolünde
•Mevduat tahmini
•İmalat kalite kontrolü

5.Bulanık Mantık (Fuzzy Logic ) : Belirsizliklerin anlatımı ve belirsizlikler ile çalışılabilmesi için kurulmuş katı bir matematik düzenidir. İnsanın yaşadığı ortam belirsizliklerle doludur. Bulanık mantık micro işlemcileri üretilmeye başlanmıştır(Japonya da )
Fotoğraf makinesi, klimalar, çamaşır makineleri, otomatik iletim hatları, civatalama tekniği ….vb.

6.Sanal Gerçeklik : Bilgisayar ortamında  oluşturulan bir gerçekliktir.
•Gözlük, stereo kulaklık tan oluşan başlık seti
•Vücut hareketlerini algılayan özel bir giysi
•Eldivenler ve çok sayıda algılayıcı giriş – çıkış cihazına bağlı bir sisitemle
Üç boyutlu sanal dünyayı görebilir, dokunabilirsin.
•CAD (ev tasarımı)
•Tıbbi teşhis, tedavi, pilot ve astronotların eğitiminde
•Fobilerin (korkuların) tedavisinde. (uçağa binme korkusu giderilebilir.)

Powerpoint 2007 kısa yol tuşları nelerdir?

kes :CTRL+X

kopyala:CTRL+C

yapıştır:CTRL+V

tümünü seç:CTRL+A

geri al:CTRL+Z

yeniden yap :CTRL+Y

sunu aç :CTRL+O

kalınlaştırma:CTRL+K

italik:CTRL+T

bul:CTRL+F

yazdırma:CTRL+P

sözcük sil:CTRL+BACKSPACE

büyük harf yap:CTRL+F3

TAMAMINI BÜYÜK-KÜÇÜK-ESKİ HALİNE GETİRMEK İÇİN :SHİFT+F3

SLAYT AÇMA : F5 ; KAPATMA :ESC

YENİ SLAYT EKLEME : CTRL+M

bilgisayarın giriş-çıkış birimleri

Donanım  : fiziksel parçalara donanım denir.

Giriş  : mause, klavye, tarayıcı , kamera

Çıkış : yazıcı, monitör, hoparlör

Hem Giriş+Hem Çıkış : harddisk , flash disk, modem dir.

windows da sistem geri yükleme nasıl yapılır?

Windows 7 de geri yükleme noktası oluşturma :

1-      bilgisayarım üzerinde sağ tuş – özellikler

2-      sistem koruması

3-      oluştur butonuna bas. Ve isim gir.

Windows 7 de geri yükleme :

1-      başlat – tüm programlar – donatılar

2-      sistem araçları

3-      sistem geri yükleme

4-      ileri de ve uygun tarihi seç….

Windows XP de geri yükleme :

1-      başlat – tüm programlar – donatılar

2-      sistem araçları

3-      sistem geri yükleme

4-      1- bilgisayarımı önceki bir zamana geri yükle ( ayarları yüklemek için)

2- geri yükleme noktası oluştur.

5-      takvim  den istediğin bir günü seçip o güne dönebilieceksin…

6-      ileri ileri //// yeniden başlıyor.

Kapasite birimleri nelerdi bit byte kavramları

En küçük kapasite birimi

TERABYTE

GİGABYTE

MEGABYTE

KİLOBYTE

BYTE

BİT

8 BİT           -     1 BYTE

1024 BYTE -     1 KB

1024 KB      -     1 MB

1024 MB     -     1 GB

1024 GB      -     1 TB

1 DİSKET – 1,44 MB X

1 CD   - 700 MB

1 DVD – 4.7 GB

1 FLASH DİSK -      1,2,4,8 GB

1 TAŞINABİLİR HARDDİSK – 160 GB

HARDDİSK – 160 GB

1 MÜZİK DOSYASI – MP3  ------ 5 MB

1 RESİM DOSYASI – JPG---- 2MB

1 WORD DOSYASI – DOC ---- 1 MB DEN AZ

Dosya ve uzantıları-dosya uzantıları

Bir takım dosya ve bu dosyaların uzantıları kısaltmaları nelerdir onlardan bahsedelim :

Dosyanın adı . uzantısı

Word              - doc

Excel               - xls

Power point    - ppt

Access            - mdb

Müzik             - mp3, wav

Film                -mpg, divx ,avi

Resim             -pg, gif, png , tif ,bmp

Bilgisayarda arama yaparken dosyanın ismini unuttuk ama uzantıstını biliyoruz örneğin vatan.jpg diye bir resim dosyasını aratacağım ama ben bunun ismini unuttum nasıl bulabilirim işte o zaman yıldızımız (*) devreye girecek yani arama alanına yazacağım şey kısaca şu :  *.jpg bu bilgisayarımda kayıtlı olan tüm resimleri karşıma getirecektir.

Kısaca uzantısını bildiğimiz dosyalarda genel arama yaparken hep aynı mantığı kullanırız.

Örneğin : *.jpg,*.xlsx,*.docx,*.txt vb gibi 

Dos komutları

dos komutlarından bazılarını bu dersimizde sizlerle paylaşıyorum ilerleyen zamanlarda da bununla ilgili görsel videolar ve görsel makale ile dökümanlar yayınlayacağım

Dir ; içeriği görüntüleme komutu

cd.. ;bir üst klasöre geçmek için kullanılır.

Cd/ ; ana klasöre döner

Md ; yeni klasör oluşturma komutu

Rd ; klasör silme komutu

Ren ; klasör ismi değiştirme komutu

Date ; tarih çıkarır

Time ;saat çıkarır 

Cd nasıl çekilir?

Cd çekmek  (nero)

1-       nero isimli program açılır

2-       sık kullanılanlar başlığı altından cd yada dvd oluştur butonuna basılır

3-       açılan boş alan cd içeriğidir çekmek istediğin program yada dosyaları bu bölüme sürükle ve bırak

4-       ileri butonuna bas ve cd ye isim ver

5-       yak butona bas ve cd çekme işini başlat.

6-       Tamam butonuna bas ve bitir.

Cd den cd ye kopyalamak

1-       Nero açılır ve cd kopyala seçeneğine tıklanır

2-       içi dolu olan cd takılır

3-       kopya butonuna basılır

4-       içeriği hafızaya geçiçi olarak kaydeder

5-       boş bir cd ister

6-       cd takıldan sonra hiçbir tuşa basılmaz sadece cd içeri gönderilir

7-       tamam

Run-çalıştır komutlar

Word – winword

Excel – Excel

Power point – powerpnt

Hesap maskinası – calc

Paint – mspaint

Çalıştırın klavye kısayolu

Windows  + R

10 Derste Frontpage-7

Ders 7: Sitenizi Sınayın ve Yayınlayın

İşte bu kadar.. Sitemizi, büyük ölçüde FrontPage’in yardımıyla ve oldukça kolay inşa ediverdik. Fakat Internet’te herşey her zaman planlandığı gibi yürümez. Bunun için sitemizi Internet’e koyarak, kamuoyuna açmadan önce kendi sabit diskimizde sınamamız gerekir. Sitemizin gerçek bir Server’da olması halinde işleyecek FrontPage Extensions programıyla yapılacak form bilgilerini işleme ve arama işi dışında, diğer unsurlarının işlediğini, bağlantıların gerçek hedeflerini bulduğu, ses ve video dosyalarının yerli yerinde olduğunu sınamak zorundayız.

Bu kitapçıktaki örnekleri birlikte yaptıysak, sizin siteniz de şu görünümü almış olmalı:

<FP00055.tif>

Navigation görünümünde sitenizin planını bu şekilde görebilmek için boş bir yeri sağ-tıklayın ve açılacak menüden Rotate/Döndür maddesini seçin. Sağdaki menülerle alttaki klasör ve dosya listesni çerçevelerini sağa ve alta iterek kapatabilirsiniz.

Sitenin sınanması ve yayınlanması, bir kaç aşamadan oluşur. Şimdi sırasıyla bu işleri yapabiliriz.

Bağlantıları Doğrulatma

Sitemizi oluşturan sayfaların kendi aralarında ve sayfaların içinde başka sitelere çeşitli bağlantılar bulunur. Önce bu bağlantıların geçerli ve şler vaziyette olduğunu denetmemiz gerekir. FP’in Hyperlinks görünümünü seçerseniz, sayfalarınızın kendi aralarında ve başka yerlerle bağlantılarını şema halinde görebilirsiniz:

<FP00056.tif>

Bu görünümde her sayfanın ana sayfaya göre konumu gösterilir. Sayfaların üzerindeki artı işaretini tıklarsanız, o sayfadan aşağı doğru veya başka yerlere bağlantıları da görebilirsiniz. Örneğin burada, Yeni Filmler sayfasının Yenilikler sayfasına iki bağlantısı, Yeni Teçhizat sayfasına ise bir bağlantısı bulunuyor.

Bağlantıları şema olarak görmek hangi sayfanın hangi sayfaya bağlantısı olduğunu gösterir; ama bu bağlantının  kopuk olup olmadığını göstermez. Bunu sağlamak için, FP’in Tolls/Araçlan menüsünden Verify Hyperlinsk/Bağlantıları Doğrula maddesini seçmemiz gerekir. FP, site içi bağlantıları kolayca denetleyecektir; fakat site dışı bağlantıları, başkalarının sitelerine verdiğiniz linkleri sınayabilmesi için, bulunduğu bilgisayarın Internet bağlantısı olması gerekir. Bilgisayar Internet ile bağlantı kurabiliyorsa, FP, tıpkı bir Browser gibi telefonu çevirerek, link sağladığınız bir bütün URL adreslerini kontrol edecektir. FP içinde kopuk bağlantıları nasıl onardığımızı daha önce ele almıştık.

Siteyi Internet’e Yerleştirme

Ve beklediğiniz az geldi; bütün emeklerinizin karşılığını şimdi alacaksınız. Tabiî herşeyden önce, FP’in sizin kişisel Web Server’ınızı kurduğu bilgisayarın Internet bağlantısı olması ve ISS aracılığıyla Internet ile bağlantınız olması gerektiğini belirtmemiz gerekiyor. Bu bağlantı ile sitenize Internet’te ev sahipliği yapmak üzere bulduğunuz firma ile bağlantınızı karıştırmayın.

İlk derste ele aldığımız gibi, sitenin planlama aşamasında, bulduğunuz Web Server Evsahibi firma, FrontPage uyumlu bir Server işletiyorsa, bütün yapacağınız şey, yeni sitenizin HTTP adresini Frontpage’e vermekten ibarettir. Sitenizin büyüklüğüne ve bağlantınızın hızına göre, siteniz evsahibi Server’a bir kaç dakika içinde aktarılmış olacak,

Bu ana kadar bir evsahibi firma bulmadıysanız, FP’i kapatıp; ya bilgisayar dergilerindeki ilanları karıştırmaya başlamalısınız, ya da Internet Browser programınızı açıp, kendisine bir Web Server Hosting (Evsahibi) firma bulmalısınız.

Bu konuda çeşitli seçenekleriniz var: evsahibi firma ücretsiz Web sitesi alanı veren bir kurum olabilir; sitelere belirli bir ücret karşılığı evsahipliği yapıyor olabilir. Ücretsiz site alanı verenler, sizin sitenize koymanızı zorunlu tutacakları reklamlarla para kazanırlar. Hatta evsahibi firmasının Server’ı, kendi reklamlarını sizin sayfalarınıza otomatik olarak koyar; sayfanızın bütün tasarım incelikleri, bu otomasyona bir anda kurban gider. Eğer ücretsiz site edinmekten başka çareniz yoksa, sayfalarınızı bu reklamları dikkate alarak tasarlayabilirsiniz. Bu tür evsahibi firmalar, ne kadar çok kişiye ücretsiz alan sağlarlarsa, kendi sitelerinin de o kadar çok kişi tarafından ziyaret edileceğini düşünerek kendi sitelerini iyi bir reklam aracı olarak pazarlayabilirler. Yani bu işten herkes kazançlı çıkar!

Ne var ki, bedava site alanı veren evsahipleri, sayfalarınıza zorla reklam sokmanın yanı sıra, çoğu zaman sınırlı CGI programı imkanı tanırlar, ve genellikle FP Extensions, Index Server ve hele elektronik ticaret gibi gelişmiş türde hizmetleri sunmazlar. Bu tür hizmetlerden yararlanabilmek için, ayda 30 Dolar’dan başlayan bir kira ödemek gerekebilir.

FrontPage ile site oluşturduktan sonra, ev sahibi Web Server’da bazı imkanlar yok ve özellikle evsahibi firma sayfalarınıza koyduğunu otomatik form işleme ve arama motorunu çalıştıracak FrontPage Extensions imkanı sağlamıyor diye üzülmenize gerek yok. FP, yeni sitenizin adresini arayarak Server ile ilk teması kurduğunda, Server’ın uyumlu olmadığını anlayacak ve sitenizi otomatik yüklemekten vazgeçerek, klasik FTP (File Transfer Protocol) yöntemine başvuracaktır.

Siteniz Internet’e açılmaya hazır durumda ise şimdi, daha önce sitemizden sınama maksadıyla kopya aldığımız gibi File/Dosya menüsünden Publish FrontPage Web/FrontPage Web’i Yayınla maddesini seçelim ve açılacak kutuda More Webs (Başka Web’ler) düğmesini tıklayalım. Açılacak kutuda sitenize ev sahipliği yapacak firmanın size verdiği HTTP adresini yazalım:

<FP00057.tif>

Bu adres “benim_sitem.ev_sahibi.com” şeklinde bir URL olmalı; fakat bu adres firmadan firmaya değişebilir. OK’i tıkladığınızda, FP, evsahibi Server’da FP Extensions bulunup bulunmadığını sınayacak ve varsa sitenizi kendiliğinden Server’a kopyalayacaktır. FP, FP Extensions’ı bulamazsa, kendiliğinden Microsoft Web Yayınlama Sihirbazı’nı çalıştırarak, sizden ek bilgiler isteyecektir. Bu bilgiler arasında evsahibi Server firmasının size vermiş olması gereken FTP adresi, FTP için kullanıcı adı ve şifresi ve sitenizi oluşturacak dosyaları çıkartacağınız (upload) klasörün adı bulunur.

Bundan sonrası, sitenizi “hedef kitleye” duyurmaya kalıyor!

10 Derste Frontpage-6

Ders 6: Formlar

Internet’te herşey, siteden ziyaretçinin bilgisayarına doğrudur. Ya da öyle görünür. Gerçekte bir Browser, bir site ile bağlantı kurduğu anda, siteden aldığı kadar olmasa bile belirli bir miktarda, o da siteye, ya da sitenin bulunduğu Web Server’a bilgi verir. Form, Browser’dan Server’a, daha doğru ifadesiyle ziyaretçiden site sahibine bilgi akışını bir şekle bağlar; bu bilgileri kullanılır hale getirir.

Site sahibi olarak ziyaretçilerinizden bazen bir konuk defterini doldurmasını, sitenizle ilgili görüşlerini ve düşüncelerini size bildirmesini istersiniz; bazen sitenize girebilmek için ziyaretçi adını ve şifresi yazmak zorundadır. Bütün bu ziyaretçiden site sahibi olarak size doğru akacak bilgiler, form arıcılığıyla siteye ulaşır.

Form ile siteye (siteye evsahipliği yapan Web Server’a) gelen bilgilerin bir program tarafından karşılanıp, işlenmesi gerekir. FrontPage piyasaya sürülünceye kadar Web Server programları CGI işlemleri için Perl ve benzeri dillerle yazılmış, ek programları yardıma çağırırlardı. CGI ve işlevlerine daha önce değinmiştik. Şimdi bir form yapacağız ve bu formla ilgili bilgileri nasıl işlemesini istediğimizi FP’e bildireceğiz. FrontPage, sitemizi daha sonra kendisiyle uyumlu bir Server’a ev sahipliği yapması için verirken, bu talimatlarımızı Server’a aynen aktaracaktır.

Örnek sitemizde FP bizim için bir değil, bir kaç form oluşturdu. Fakat bu önemli konuyu daha iyi kavrayabilmek için, biz kendi formumuzu tamamen sıfırdan inşa edelim. Önce FP Explorer’da Navigation görünümünde, “Öneriler Tartisma Sorular ve Cevaplar” sayfasının adını kısaltıp Öneriler yapın; bu sayfanın dosya adını da Oneriler.htm olarak düzeltin. Bu sayfaya bağlı üç sayfadan Öneriler sayfasının adını Görüşleriniz; HTML dosyasının adını Gorusform.htm olarak değiştirin. Yeni Görüşler sayfasını iki kere tıklayın ve Editör’de açıldığında sayfanın içinde göreceğiniz “Use the form..” diye başlayan metni ve altındaki form unsurlarının tümünü tarayıp, klavyede Delete tuşuna basarak silin. Silemediğiniz unsur kalırsa, sayfanın altındaki HTML sekmesini tıklayarak, açılacak sayfada <FORM>...</FORM> etiketlerinin arasında kalan herşeyi, etiketler dahil, silin. Normal sekmesini tıklayarak sayfaya geri döndüğünüzde eski formdan hiç bir iz kalmayacaktır. Şimdi, sıfırdan bir form inşa edebiliriz.

Formun Unsurları

Internet’te bir çok sitede gördüğünüz gibi, formlarda genellikle metin girmeye mahsus kutular, seçme yapmaya yarayan, adına radyo düğmesi denen ve içine bir nokta konan seçenek maddeleri, yine tercih belirtmekte kullandığınız fakat içine çarpı işareti konan kutular, yanındaki seçme okunu tıkladığınızda açılan ve içinde tercih etmeniz için çeşitli seçenekler bulunan listeler, ve nihayet bu formu göndermeye veya içindeki silmeye yarayan düğmeler bulunur. Şimdi örnek formumuzda “Form Field” (Form alanı) denen bu unsurların hepsini kullanalım.

Metin imlecinin durduğu yere şu kısa sunuş paragrafını yazabilirsiniz:

“Görüşleriniz benim için çok önemli

Sitemi ziyaret ettiğiniz ve görüşlerinizi benimle paylaşmak istediğiniz için teşekkür ederim. Bu formu doldurarak eleştirilerinizi veya arzularınızı bana iletebilirsiniz. Sitemde yayınlanmasını arzu ettikleriniz dışında, vereceğiniz bilgileri hiç bir kişi veya kuruluşla paylaşmayacağımı bildirir, saygılar sunarım.”

“..sunarım.” kelimesinden sonra  klavyede Enter’a basın ve imleç yeni paragrafın başında iken Insert/Ekle menüsünden Form Field’i, onun açacağı menüden de “One-line Text Box” (Tak satırlık metin kutusu) maddesini seçin. Bu maddeyi tıkladığınız anda, boş paragrafın altında, kesik çizgili bir kutu içinde boş bir metin kutusu ile iki düğme belirecektir. Kesik çizlgili kutu, sayfanızdaki formun tümünü kapsayan alandır; bunun içinde de şimdilik üç form alanı bulunuyor. Her form, en az bir (Gönder), genellikle iki (Gönder ve Sil) komutu içermelidir. Formun içine komut düğmesi koymayabilirsiniz; ama o zaman ziyaretçi bu forma yazacağı şeyleri veya yapacağı tercihleri size (sitenize, sitenizin ev sahibi Web Server’a) ulaştıramaz. Gönder düğmesi (üzerinde ne yazarsa yazsın) formdaki bilgileri göndermeye yarar; yine üzerinde ne yazarsa yazsın Sil düğmesi ise ziyaretçinize formu yeniden doldurması için bir kolaylık sağlar. Formunuza Sil düğmesi koymazsanız, ziyaretçi yanlış yazdığı şeyler tek tek düzeltmek zorunda kalacaktır. FP, bir form alanı açtığınız ve içine bir metin kutusu koyduğunuz anda, bu formun size ulaştırılması için bir Gönder (Submit) ve bir de Sil (Reset) düğmesi koyarak, formunuza işlevsellik kazandırmış oldu.

Form alanının içini tıklar ve klavyede sağ-sol, aşağı-yukarı tuşlarına basarsanız, imlecin form alanı içinde hareket ettiğini göreceksiniz. Bu suretle imleci, metin kutusunun soluna getirin ve (tırnak işaretlerini yazmadan) “Adınız:” yazın ve bir boşluk verin. Sonra, sağ ok tuşuna basarak, imleci metin kutusunun sağına geçirin ve klavyede Shift tuşunu tutarak Enter’a basın. Böylece imleci tam bir paragraf boşluğu vermeden aşağı satıra değil, sadece bir satır aşağı geçirmiş olursunuz. Şimdi “Soyadınız:” yazın ve bir boşluk verdikten sonra, Insert menüsü yoluyla bir tek satırlık metin kutusu daha girin. Bu kutunun da sağında Shift+Enter’a basın. Fakat iki metin kutusu tam alt alta gelmedi! “Adınız:” kelimesinden sonra bir kaç boşluk vermeyi deneyin. Form tasarımının en güç tarafı kutuların etiketlerini (Adınız, Soyadınız gibi kelimeleri) ve bunların metin kutularını hizalamaktır. Siz kendi ekranınızda bu hizalamayı başarsanız bile, ziyaretçinizin Browser programının kullandığı varsayılan harflere göre, form unsurlarınızın hizası yine bozulabilir. Yol yakınken, böyle boşluklarla hiza tutturma yerine, tablodan iskelet unsuru olarak yararlanma yoluna gidelim.

Metin imlecini, “Adınız:” kelimesinin tam soluna getirin ve Table (Tablo) menüsünden Insert Table (Tablo ekle) maddesini seçin ve açılan kutuda Rows (Sıralar) hanesine 15, Columns (Sütunlar) hanesine de 2 yazın. Layout (Konum) ayarlarını değiştirmeden, Width (Genişlik) hanesindeki 100 rakamını 95 olarak değiştirin. OK’i tıkladığınızda Form’un içinde bir tablo belirecektir. Tablonun altındaki metin kutuları ile “Adınız:” ve “Soyadınız:” kelimelerini silin. Düğmeler kalsın. Şimdi sırasıyla şu işleri yapabilirsiniz (tırnak içinde gösterilen yazıları yazarken tırnak işaretini yazmayacaksınız):

1. Birinci sıra-birinci sütuna “Adınız:” yazın;

2. İkinci sıra-birinci sütuna “Soyadınız:” yazın;

3. Üçüncü sıra-birinci sütuna “E-Adresiniz:” yazın;

4. Dördüncü sıradaki iki kutuyu birleştirin (iki kutuyu birden tarayın; herhangi birini sağ-tıklayın, açılacak menüden Merge Cells (Hücreleri birleştir) maddesini seçin. Sonra bu ku ktunun içine “Amatör fotoğrafçı mısınız?” yazın;

5. Altıncı sıradaki iki kutuyu birleştirin ve bu kutuya “Sitemden yararlandınız mı?” yazın;

6. Sekizinci sıradaki iki kutuyu birleştirin ve bu kutuya “Beğendiğiniz fotoğraflar:” yazın;

7. 10’ncu sıradaki iki kutuyu birleştirin ve kutuya “Duyurmak istediğiniz bir sergi ve gösteri varsa, aşağıdaki kutuya yazabilirsiniz:” yazın;

8. 12’nci sıradaki iki kutuyu birleştirin ve bu kutuya “Fotoğraflarımla ilgili eleştirilerinizi belirtmek isterseniz, aşağadaki kutuya yazabilirsiniz:” yazın;

9. Üzerinde “Submit” yazılı düğmeyi tıklayın ve Mouse işaretçisiyle tutarak, 15’nci sırada birinci sütundaki kutunun içine bırakın. Aynı şekilde üzerinde “Reset” yazılı düğmeyi, aynı sırada ikinci sütuna taşıyın;

10. Birinci sırada ikinci sütunu tıklayın; Insert/Form Field/One-line Text Field’i seçin; aynı şekilde ikinci sırada, ikinci sütuna ve üçüncü sırada ikinci sütuna tek satırlık metin kutusu koyun;

11. Beşinci sırada ikinci sütunu tıklayın; Insert/Form Field/Check Box (İşaret kutusu) maddesini seçin. Hücrede kare şeklinde kutu belirince, bir aralık verin ve “Evet” yazın; aynı yolla ikinci bir İşaret Kutusu ekleyin ve onun yanına “Hayır” yazın.

12. Yedinci sırada ikinci sütunu tıklayın; Insert/Form Field/Radio Button (Radyo düğmesi) maddesini seçin. Hücrede içi boş küçük daire belirince, bir aralık verin ve “Evet” yazın; aynı yolla ikinci bir Radyo Düğmesi ekleyin, yanına “Hayır”; üçüncü bir radyo düğmesi ekleyin ve yarına “Kısmen” yazın;

13. Dokuzuncu sırada ikinci sütunu tıklayın; Insert/Form Field/DropDown Menu (Açılan menü) maddesini seçin. Hücrede solunda seçme oku olan bir kutu belirince, bu kutuyu sağ-tıklayın ve açılacak menüden Form Field Properties (Form Alanı Özellikleri) maddesini seçin. DropDown Menu Properties kutusunda, sağdaki Add (ekle) düğmesini tıklayın; açılacak kutuda Choice (Tercih) hanesine “Bir tercih yapın” yazın; Specify Value: (Bir değer belirt) kutusuna işaret koyun ve bu satırın altındaki haneye “Tercih yok” yazın; OK’i tıklayın. Tekrar Add’i tıklayın, Choice olarak “Hiçbirini,” yazın; Value kutusuna işaret koyduğunuzda Value hanesinde “Hiçbirini” kelimesi belirecektir. OK’i tıklayın. Aynı yöntemle Doğa, Gezi, Portre ve Diğer seçeneklerini ve değerlerini girin. Properties kutusunun Height (Yükseklik) hanesine 1 yazın. “Allow multiple selections” (Çok tercihe izin ver) sorunun karşısında No (Hayır) seçeneğinin işaretli olmasına dikkat edin; ve kutunun OK düğmesini tıklayın.

14. Önce 11’nci, sonra 13’ncü sıradaki iki hücreyi birleştirin ve bu hücrelere Insert/Form Field/Scrolling Text Box (Kaydırılan metin kutusu) ekleyin. Kutu belirince, sağ ve altındaki tutamakları kaydırarak, ebadını genişletin.

Formunuzun oluşturulması bitti; fakat görünümle ilgili bir kaç iş daha yapılabilir. Örneğin, önce tablonuzun çerçevelerini kaldırın (Herhangi bir hücreyi sağ tıklayın ve açılacak menüden Table Properties’i seçin; Border Size’ı sıfır yapın), sonra tablonun hücreleri sağ tıklayarak ve açılacak menüden Cell Properties (Hücre Özellikleri) maddesini seçerek hücrenin içindeki unsurun zevkinize göre ortada, solda veya sağda olmasını sağlayın.

<FP00050.tif>

Alanlar ve Değerler

Sıra geldi, ziyaretçilerin bu formla sitenize (sitenize ev sahipliği yapan Server’a) göndereceği bilgilerin kullanışlı hale getirilmesine. Forma koyduğunuz bütün alanların (işaret kutuları, radyo düğmeleri, seçmeli liste unsurları ve metin kutuları) bir değeri vardır, ve bu değer Server’a bir ad altında gönderilecektir. Bu ad ve değer çifti size ya bir metin dosyasına eklenerek ya da bir elektronik mektup ulaştırılacaktır; bu bilgiler elinize geldiği zaman anlamlı olması gerekir. T1=Ali veya T2=Veli pek anlamlı sayılmaz; Adı=Ali, Soyadı=Veli ise çok daha kullanışlı bilgidir. Aynı şekilde R1=V2 yerine “Yararlı=Hayır” çok daha anlamlı olur. Bunu, beğenilen fotoğraf türleri sorusunun cevabı olan seçenek listesinde kısmen yaptık; seçeneklere uygun değerler verdik, Şimdi Insert yoluyla formunuza eklediğiniz alanları sırasında sağ tıklayarak ve Form Field Properties maddesini seçerek yapalım.

1. Adınız’ın karşısındaki metin kutusunun Name/Adı hanesine “Ad” yazın. Bu kutudaki Tab Order hanesine 1 yazın. (Tab Order/Sekme sırası, ziyaretçinin formun haneleri arasında klavyesindeki sekme tuşuna basarak ilerlemesi halinde hangi kutudan hangi kutuya gideceğini belirler.) Sonra OK’i tıklayın.

2. Soyadınız’ın karşısındaki metin kutusunun Name/Adı hanesine “Soyad” yazın. Tab Order, 2 olacak.

3. E-adresiniz’in karşısındaki metin kutusunun Name/Adı hanesine “Eadres” yazın. Tab Order, 3 olacak.

4. “Amatör Fotoğrafçı mısınız?” “Sitemden yararlandınız mı?” ve “Beğendiğiniz fotoğraflar?” sorularına istediğimiz cevaplarda olduğu gibi, ziyaretçinin tercih yapacağı durumlarda bize ulaşacak bilginin adı ile tercih edilen seçeneğin değeri birleştirilecektir. Bu sebeple, bu soruların cevapları olacak seçeneklerin hepsini adı aynı olmalıdır. Buna göre, Amatör fotoğrafçı mısınız?” sorusunun cevap şıklarından olan Evet’in önündeki kutuyu sağ tıklayın; açılacak menüden Form Field Properties’i seçin ve Name/Adı hanesine “Amator” yazın. (Bu kelimeyi ne tür bir Browser’ın Server’a yollayacağını ve Server’ın ne tür bir sistemde çalışacağını bilmiyoruz. Browser ve Server’ın Türkçe’yi desteklemeyeceği ihtimalini dikkate alarak, sistem değişkeni olacak bu kelimeyi Türkçe yazmaktan kaçındık!)  Value/Değer hanesine “evet” yazın. Tab Order, 4 olacak. Hayır kutusu sağ-tıklayın; açılacak menüden Form Field Properties’i seçin ve Name/Adı hanesine yine “Amator”; Value/Değer hanesine “hayir” yazın (yine Türkçe harften kaçındık); Tab Order’ı 5 yapın. Şimdi, ziyaretçi Evet’i de işaretlese, Hayır’ı da işaretlese, Browser, Server’a aynı bu kutuların değerlerini aynı ad’la gönderecektir. (Dikkat: “Amator” kelimesini her iki kutuda da aynı şekilde yazın!)

5. Bu işlemin benzerini, “Sitemden yararlandınız mı?” sorusunun karşılıklarına da yapacağız. Burada Name/Adı hanesine “Yarar” ve Value/Değer hanesine her üçü için sırasıyla “evet,” “hayir” ve “kismen” yazacağız. (Dikkat: “Yarar” kelimesini bazı kutularda büyük harfle, bazılarında küçük harfle yazmayın!) Evet’in sekme sırası 6, Hayır’ın 7 ve Kısmen’in 8 olacak.

6. “Beğendiğiniz fotoğraflar” sorusunun cevap seçenekleri kutusunu sağ tıklayın; açılacak menüden Form Field Properties’i seçin ve Name/Adı hanesine “Begeni” yazın. Bu kutunun Valu/Değer bölümünü daha önce doldurmuştuk. Tab Order, 9 olacak.

7. Duyurulmak istenen olaylarla ilgili metin kutusunun adını “Duyuru,” sekme sırasını 10 yapın.

8. Eleştiri metin kutusunun adını “Elestiri,” sekme sırasını 11 yapın,

9. Submit düğmesinin adını “Gonder,” Value/Label (Değer/Etiket) hanesini “Gönder” ve sekme sırasını 12 yapın.

10. Reset düğmesinin adını “Sil,” Value/Label hanesini “Sil” (kelimenin önüne ve arkasına üç boşluk koyun!) ve sekme sırasını 13 yapın.

Form Bilgilerini İşleme

Formun bilgi alıp-verme işinin teknik bölümünü artık sonuçlandırabiliriz. Bunun için formun bir yerini sağ tıklayın; açılacak menüden Form Properties (Form Özellikleri) maddesini seçin:

<FP00051.tif>

FrontPage, sitenizi FrontPage Extensions yüklenmiş bir Server’da  ziyaretçilerinize açacağınızı varsayarak, formla elde edeceğiniz bilgilerin tabi tutulacağı işlemleri FP Extensions’a göre belirliyor. Ancak arzu ederseniz, FP, formunuzun sağlayacağı bilgileri, özel bir programa, CGI programına, Active Server Pages teknolojisi ile çalışan bir programa veya Netscape Server API denen bilgi işlem araçlarına da gönderebilir. Burada FP Extensions üzerinde duralım.

FrontPage Extensions (FPE) adı verilen ve Server’da çalışan programcıklar, bir ziyaretçinin Browser’ın Server’a bilgi akışı olduğu zaman (ziyaretçi formdaki Gönder düğmesini tıkladığı zaman) bir kaç iş yapabilirler. Kısaca bu işlemlere değinelim:

1. FPE, önce, ziyaretçinin formu doğru doldurup doldurmadığını denetler. Form Field Properties kutularında gördüğümüz Validation düğmesi ile açabileceğini denetleme ve doğrulama kutularında bu alana örneğin sadece harf veya sadece rakam yazılmasını, yazılacak metnin belirli bir harf toplamını, yazılacak rakamın belirli bir büyüklüğü  geçmemesini sağlayabilirsiniz. Formda boş bırakılmasını arzu etmediğiniz alan varsa, bunu belirtebilirsiniz. FPE, formun Validation/Doğrulama şartlarını uygun olup olmadığını denetledikten sonra, uygunsuzluk bulursa, ziyaretçiyi sizin vereceğiniz bir metni Browser’ına göndererek uyarır. (Bu metnin HTML koduyla yazılmış olması gerekir.) Bu denetleme işlemini sitenizin güvenliğini arttırmak için kullanabilirsiniz. Örneğin bazı kötü niyetli kişilerin elektronik posta adresi olarak bazı işletme sistemlerinde çalışan Web Serverların anlayacağı dilden komut kelimeleri gönderdikleri bilinir. Mesela içinde boşluk olan elektronik adresi reddetmek adresin doğruluğunu sağlamak için de iyi olur.

2. FPE, form doğru doldurulmuşsa, ziyaretçinize sizin belirleyeceğiniz bir teşekkür mesajı gönderebilir. (Bu metnin de HTML koduyla yazılmış olması gerekir.)

3. FPE, doğru bir form bilgisinin kendisine ulaştığını farkedince formla Server’a gelen bilgileri, ya kendisi basit kayıt işlemine tabi tutar, ya yine kendisine ait Tartışma Grubu İşlemcisine aktarır, ya da bir başka programa devreder. Bu bilgilerin FPE tarafından basit kayıt işlemine tabi tutulacaksa, başlıca iki işlem yapılır: bu bilgiler bir veya iki metin dosyasına eklenir; ve/veya  bir elektronik posta adresine gönderilir. Bu işlemlerden hangisinin yapılmasını istiyorsanız, bunu Form Properties kutusundaki ayarlarla belirtirsiniz. Bu işlemlerden hangisini seçeceğinizi bilmiyorsanız, kutudaki ayarlara dokunmayın.

Form bilgisi işlemleri göründüğü kadar karışık değildir. Bir kere FP, bu bilgileri ziyaretçilerin giremeyeceği, sadece Server’ı işletenlerle Site sahibi olarak sizin ulaşabileceğiniz “_private” adlı bir klasör oluşturacaktır. Bu klasöre, FP Editör’ü kullanarak, “Teşekkür ederim.. Formunuzu aldım.. Gerekeni yapacağız..” anlamında bir içeriği bulunan ve adı tesekkur.htm olan; “Formun doldurulmasında hata var. Lütfen tekrar doldurun” gibi bir cümle içeren, ziyaretçiye forma geri dönmesini sağlayan bir bağlantı veren ve adı hata.htm olan iki dosya kaydedin. Form Properties kutusunda Options/Seçenekler düğmesini tıklayarak açacağınız kutuda bu dosyalara bağlantı sağlayın:

<FP00052.tif>

Options kutusunda dört sekme göreceksiniz. Birinci sekmede formdan gelen bilgilerin kaydedileceği dosya ile ilgili ayrıntılar bulunur. Bu dosyanın düz yazı, Web sayfası veya herhangi bir veritabanı biçiminde olmasını buradan sağlayabilirsiniz. Ayrıca formdaki alan adlarının alan değerleri ile birlikte kaydedilip edilmeyeceği sonuçların dosyanın baş tarafına mı, sonuna mı ekleneceği gibi ayrıntıları da burada göreceksiniz. Form bilgilerini iki ayrı dosyaya kaydettirmek istiyorsanız, bunu da burada belirteceksiniz. Form sonuçlarının bir elektronik adrese elektronik posta olarak gönderilmesini de istiyorsanız, bunun ayrıntılarını ikinci sekmede belirtebilirsiniz. Alıcı elektronik posta adresi, formun oluşturacağı mesajlara verilecek ortak konu adı, mesaja nelerin dahil edileceği gibi unsurlar bu sekmededir. Üçüncü sekme olan Confirmation/Onaylama bölümünde ise hatalı ve doğru formlara gönderilecek karşılık sayfaların adlarını belirtebilirsiniz. Formunuzun herhangi bir alanında Validation kuralı yoksa, bu sekmedeki ikinci bölüm etkin olmaz. Ve nihayet dördüncü sekme olan “Saved Fields” (Kaydedilecek alanlar) bölümünde formun hangi alanlarının kayıtlara geçirilmesini istediğinizi belirtmeniz mümkündür. Bu son sekmede ikinci bölümde, formda olmayan ama her Browser’ın formla birlikte Server’a otomatik olarak gönderdiği saat, tarih, ziyaretçinin bilgisayarının adı, ziyaretçinin adı ve kullandığı Browser’ın türü gibi bilgileri de kaydettirme imkanınız vardır.

Arama Formu

FP, sadece ziyaretçilerinizin dolduracağı formlar oluşturmakla kalmaz, fakat bir de Arama Formu (Search Form) oluşturmanız için araç sağlar. Arama formu ile ziyaretçi formu arasındaki başlıca fark, arama formunun FrontPage Extensions’ın bir parçası, yani bir program arayüzü olmasıdır. Bu form ve ona bağlı program, elde edeceği sonuçları site sahibi olarak size ulaştırmaz, ziyaretçiye gönderir.

Sayfanıza koyacağınız Arama Formu’nun işleyebilmesi için sitenize evsahipliği yapan Server’da mutlaka FP Extensions’ın kurulu ve çalışır olması gerekir. FPE, arama formu ile ziyaretçinin sitenize göndereceği arama emrini icra eder ve sonuçları (hazır verilen fakat sizin istediğiniz gibi değiştirip yeniden biçimlendirebileceğiniz) bir şablona yazarak, ziyaretçiye gönderir.

Bu kitapçıktaki örnekleri birlikte yaptı isek, oluşturduğunuz sitede, Ara adlı bir sayfa ve içinde (henüz değiştirmediğimiz için) İngilizce bir metin ve arama formu var.

Sitenize, bugüne kadar çok yüksek ek ücretlerle kazanılabilen Arama Motoru imkanını iki tıklamayla kazandırmak istiyorsanız, ya bu sayfayı düzeltin, ya da yeni bir sayfa açıp, arama formu girin. Arama Formu, sayfanıza Insert menüsünde Active Elements maddesinden Search Form (Arama Fodrmu) maddesi seçilerek konulur. İster boş bir sayfaya yeni bir Arama Formu girin ve oluşacak kutuyu sağ tıklayın; isterseniz, mevcut Ara sayfasındaki arama formunu sağ tıklayın; açılacak menüden FrontPage Componet Properties (FrontPage Unsuru Özellikleri) maddesini seçin ve arama moturu bağlantınızın başlıklarını verin:

<FP00053.tif>

Bu kutunun ikinci sekmesinde değişiklik yapmak gerekmez. Tamam’ı tıkladığınızda verdiğiniz başlıkların yer aldığı Arama Moturu bağlantısını göreceksiniz. Arama moturunun üstüne, ziyaretçilerinize bu bağlantının nasıl kullanıldığını anlatan bir kaç cümlelik bir açıklama notu da yazabilirsiniz. Bu metinde anlatmak istediğiniz bilgiler, Microsoft Query Language ile aramanın nasıl yapıldığına ilişkin olmalıdır. Query Language denen arama dilinde, AND, girilen bütün kelimelerin birden bulunduğu metinlerin bulunmasını; OR, girilen kelimelerin herhangi birinin bulunmasını; NOT, kendisinden sonra gelen kelimenin bulunmamasını sağlar. “*” harfi ile baştarafı verilen karakterleri içeren bütün kelimelerin bulunmasına imkan verir:

<FP00054.tif>

Sayfanıza koyacağınız arama formunun sonuç elde edebilmesi ve bu sonuçları ziyaretçiye bildirebilmesi için sitenize ev sahipliği yapan Server’da FrontPage Extensions’ın yüklü ve çalışır durumda olması gerekir. Server’ı işleten firma veya kişi size FP Extensions’ın arama sonuçlarını yazacağı şablonu oluşturma veya düzeltme imkanı verecektir. Fakat genel olarak bu sayfada, sitenizde bulunan ve arama yapılan kelime veya kelimelerin içinde geçtiği ve ziyaretçilerden gizlenmemiş olan bütün belgelerin bir listesi bulunacak ve ziyaretçi bu listedeki bir belge adını tıkladığında belgenin içeriği ziyaretçinin bilgisayarında görüntülenecektir.

10 Derste Frontpage-5

Ders 5: Sayfalarımızı Hareketlendirelim

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!)

Web’de Grafik

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.

Sayfaya Grafik Koymak

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.

Şeffaf (Transparan) Grafik

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.)

Anime (Hareketli) Grafik

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.

Alternatif Metin

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.

Grafiklerde Bağlantı

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>

Grafiklerde Hotspot

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?

Ses ve Video

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.

Sayfalara ses yerleştirmek

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.

Sayfalara video yerleştirmek

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.

Hover Düğmesi ile Video ve Ses

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.

10 Derste Frontpage-4

Ders 4: Sayfaları İşleyelim

Bu derste FrontPage’nin hazır sayfalarının görünümlerini değiştirmeyi, sayfadaki yazıları düzenlemeyi ve sayfanın temasını değiştirmeyi ele alacağız.

Web sayfaları “bilgi vermek” amacıyla vardır. Internet ziyaretçileri yeni oyunlar hakkında bilgi edinmek istiyor da olsalar, sonuç itibariyle bilgi edinmek istedikleri için sitenize geleceklerdir. FrontPage’nin hazır sayfalarında yapacağınız en önemli değişiklik, içi boş sayfalara vermek istediğiniz bilgileri koymak ve sırf yer tutması için konulmuş metinleri kendi metinlerinizle değiştirmek olacaktır. Sonra sıra her yayın organının sayfası gibi, Web sitenizin sayfalarında görsel etki bakımından arzu ettiğiniz düzenlemeyi yapmaya gelecektir.

Internet siteleri, gazete, dergi gibi bilgi vermekle birlikte, yazılı yayın aracı ile televizyon arasında bir noktada bulunuyorlar. Yani bir Web sitesi, gazete veya dergi gibi metne dayalı unsurlara yer verebildiği gibi, bunlardan farklı (ve üstün) olarak, televizyon unsurlarına da yer verebilir; bir Web sayfasında hareketli görüntü ve ses unsurları bulunabilir.

Bu web sitesi sahibi ve sitenin tasarımcısı olarak karşısına ciddi bir durum çıkartıyor demektir. Gazetecilik okullarında, yazılı yayın araçları ile televizyonda görsel tasarım birbirinden çok farklı dersler olarak okutulur. Bunun sebebi iki aracın, yazılı ve görüntülü yayın organlarının okuyucu veya izleyici üzerindeki etkilerinin birbirinden farklı olmasıdır. Bu ikisi başlı başına uzmanlık alanlarıdır. Şimdi siz Web tasarımcısı olarak, bir kaç saat içinde bu iki alanda da uzmanlaşmak zorundasınız!

İşte bu işi FrontPage ile yaptığınız için mutlu olmanız gereken bir an daha! FrontPage’i tasarlayanlar, hemen her türlü ihtimale ve zevk türüne göre farklı temalar ve multimedya dediğimiz hareketli veya sabit imajlara (fotoğraf, resim veya video gibi) ve sese dayanan malzemenin sayfalarda kolay ve etkili kullanımını sağlamış bulunuyorlar. Bize kalan, kendi zevkimize uygun bir tema ve Internet’te yayınlamamızda hukukî sakıncası olmayan malzemeyi bulmaktan ibaret.

“FrontPage uzmanları her zevki dikkate almışlar,” dedik, ama Internet’in ortak dili olan HTML ve Internet ziyaretçilerinin bu amaçla kullandıkları Browser programların bu dili yorumlama yetenekleri, bize görsel etki amacıyla sayfalarımızda istediğimiz herşeyi yapma imkanı da vermiyor, veremiyor. Bir kere, sayfalarımızın PC ve Mac gibi farklı bilgisayar cihazları ve bu cihazlarda bulunan farklı işletim sistemleri yüzünden asgarî ortak bir noktada tasarlanması gerek. HTML dili, bu sebeple, oldukça sınırlı imkanlara sahiptir.

Oluşturduğu sayfaları HTML dosyası olarak kaydetmek zorunda olan FrontPage, bir masaüstü yayıncılık veya grafik tasarım programı gibi, sayfalarınızı çok fazla işlemenize izin veremez. Bununla birlikte şu anda 4’ncü sürümüne ulaşmış bulunan HTML dilini de pek yabana atmamak gerekir. Dikkatli ve becerikli bir kullanımla FrontPage Editör’de masaüstü yayıncılık programlarına yakın güzellikle sayfalar yapabilirsiniz. Üstelik bu sayfalarda masaüstü yayıncılık programlarının ürünlerinde hiç bir zaman bulunamayacak video ve ses unsurları bulunabilir.

Yazıları Biçimlendirme

Web, yayın aracı olarak gazete ile televizyon ortasında bir konuma sahiptir. Şimdi Web sayfasının gazete-dergi niteliği ile ilgili görsel araçlara bakalım.

Şimdi, FrontPage’de Navigation görünümünde, daha önce üzerinde çalıştığımız Fotoğraflarım sayfasını iki kere tıklayın; sayfa Editör’de açılsın.

<FP00034.tif>

Dikkatlice incelerseniz, bu sayfanın hiç de albenisi olmadığını göreceksiniz. Evet, tema bakımından, ortak başlıklar, site içinde sayfadan sayfaya hareket bağlantıları gibi teknik özellikleri açısından sayfamız kusursuz görünüyor; hele sayfanın gerisindeki 250 satırlık HTML kodunun tek kelimesini bile biz yazmamış olduğumuza göre, bundan iyisi can sağlığı sayılabilir.

Fakat yine de bu sayfada bir başlık yok ve metin yazıları çok “normal” görünüyor. Normal görünmesinin sebebi, bu yazıların stilinin “Normal” olmasından geliyor!

//////////////////KUTU///////////////////////

Sitenizi arada bir yayınlıyor musunuz?

Fotoğraflarım sayfasının buradaki görünümünün FP Editör’deki görünümü olmadığını farketmiş olmalısınız. Bir kere bu görüntünün FP Editör veya MS Internet Explorer değil, Netscape Communicator programına ait olduğunu görüyorsunuz. FP ile oluşturduğunuz sayfalarınıza, projenin çeşitli aşamalarında FP Web’i IE ve Netscape ile gerçek bir Internet sayfası zilaret ediyormuş gibi bakmanızda yarar var. Bir kere sayfalarınızın farklı browserlerda nasıl görüntülendiğini görmek, işin başında iken hoşunuza gitmeyen şeyleri düzeltmeniz için size zaman kazandırır. Bunu sağlayabilmek için, henüz bitmemiş de olsa, sitenizi arada bir, sanki gerçek Web’e gönderiyormuş gibi, sabit diskinizde geçici bir klasöre “yayınlamanız” gerekir. FP, bir sitenin FP Web’den gerçek Internet’e gönderilmesine “yayınlamak” (Publish) diyor. Sitenizi gerçek Internet’e ulaştırmanız için yapmanız gereken işleri ilerde ele alacağız. Fakat burada sitemizi bütün sayfalarıyla ve sayfalardaki unsurları ile birlikte Internet’e değil, sabit diskte başka bir klasöre göndermek istiyoruz. FP Web’de iken sayfalarımızda belirgin olan otomatik unsurların komutları, sayfalar başka bir klasöre kaydedildiğinde yerini ya gerçek düğmelere bırakacaktır, ya da kullanılmayan düğmeler ve bağlantı yerleri silinecektir. Bu, sayfaların “bitmiş şeklini” görme imkanı verir.

FP Explorer’da, Araç Çubuğu’ndaki  Publish düğmesini tıkladığınızda açılacak diyalog kutusunda FP’in kendi Web’i (çoğunlukla “Root Web” adıyla gösterilir) ve yanında More Webs (Başka Web’ler) düğmesi bulunur. “Başka Webler,” sabit diskinizde bir klasör olabileceği gibi, Internet’te siteize evsahipliği yapacak firmanın Web Server’ı da olabilir. Şimdilik sitenizi sadece sabit diskte başka bir dizine kopyalamak istiyoruz. More Web düğmesini tıkladığınızda açılan kutuya sitenizin şu andaki haliyle tamamlanmış şeklinin kopya edilmesini istediğiniz klasörü yazın ve OK’i tıklayın.

<FP00035.tif>

Şimdi, bu yeni dizindeki sayfalarınızı gerçek bir Internet sitesi gibi, sayfadan sayfaya geçerek, istediğiniz Browser ile denetleyebilirsiniz.

/////////////////////////KUTU BİTTİ/////////////////////////

Stiller

HTML, en sabit şekliyle, Web tasarımcısına 15 adet önceden tanımlanmış stil kullanma imkanı veriyor. Normal de bu stillerden biri ve en temel olanı. Stil, bir yazının harf türü, harfin koyu, normal, italik veya altı çizgili oluşu, harfin büyüklüğü, harfin rengi, yazının Browser penceresine veya bir çerçeve içinde ise çerçevenin iki kenarına göre sağ mı, sola mı hizalanacağı veya ortalanacağı, gibi özelliklerine topluca verilen addır. HTML, ilk günlerinde sadece alıp-vermeye yaradığı (grafik unsurlar bile şifrelenmiş düz yazıya çevrilerek verilebildiği) için, Web Browser programlarının temel metin stilleri çok sınırlıdır. Oysa günümüzde Web Browser’lar (Cascading Stil Sayfaları denen yöntem sayesinde) bu temel 15 stilden daha fazla metin görüntüleme imkanına sahiptir. (FrontPage, Format/Biçimle menüsünden Steylesheet maddesini seçerseniz, size kendi stillerinizi oluşturma imkanı verir. Fakat bunu yapabilmek için, burada yerimiz yok.)

Yine teoriye fazla zaman ayırmadan, uygulamaya geçelim. Mevcut 15 stilin genel hatları ile metinlerimize nasıl biçimler kazandırdığına değinelim. Bunu yapabilmek için, biraz önce açtığımız Fotoğraflarım sayfasındaki yazının birinci kelimesinden önce, “Eleştirilerinizi Bekliyorum” yazın ve Enter tuşuna basın. Bu iki kelime şimdi bağımsız bir paragraf oluşturdu.

Metin imleci bu paragrafın içinde iken (yani iki kelimeden birini tıkladıktan sonra) Change Style/Stil Değiştir penceresinin seçme okunu tıklayın; açılacak listeden, Heading1 (Başlık 1) stilini seçin. İki kelimebüyük bir şekilde neredeyse sayfanın sağından soluna tümünü kaplayacak büyüklüğe ulaştı. Aşağıda, FP’in altı başlık büyüklüğünü bir arada görüyorsunuz:

<FP00036.tif>

Sayfalarımızda dikkat çekmek istediğimiz başlıklara, ara başlıklara, alt başlıklara, bu listeden uygun bir başlık stili seçerek, metin yazılarının stili olan Normal’den farklı bir nitelik kazandırabiliriz. Başlık stili seçmede gözetilecek ilke, başlığın sayfanın bilgi düzenlemesi açısından sadece bölüm değiştiği mesajını verebilmektir. Başlıklar dikkati tümüyle kendisinde toplarsa, sitenizi ziyaret edenin gözü, başlığın belirttiği asıl metin yazısına kaymaz. Sayfadaki tüm başlıkların birbirini dengelemesi, başlıkların büyükten küçüğü doğru gitmesi gerekir. Küçük bir başlıktan sonra büyük bir başlığın gelmesi, gazete-dergi okuyucularının bunca yıldır göregeldikleri sayfa düzenlemelerinden alıştıkları şekilde, konunun değiştiği izlenimine kapılmalarına yol açabilir.

FP’in stil listesinde daha başka stillerin adlarını da gördünüz. Bunları uygulayabilmek için, bir alıştırma daha yapalım. Fotoğraflarım sayfasındaki birinci paragrafın sonuna “Bu sayfalarda” kelimelerini yazın ve klavyede Enter tuşuna basın. Yeni paragrafa “Gezi” yazın, Enter’a basın. Sonra “Doğa,” “Portre” ve “ve Diğer” kelimelerinin bulunduğu üç paragraf daha yapın. Ve nihayet eski ikinci paragrafın başına “fotoğraflarımdan örnekler var.” yazın. Şimdi, Mouse işaretçisiyle Gezi kelimesinin başınhdan “Diğer” kelimesinin sonuna kadar tarayın; ve stil listesinden “Bulleted list” (Noktalı liste) maddesini seçin. Dört kelimenin de başına sitemize uyguladığımız temanın ortak nokta grafiği geldi ve kelimeler Normal paragrafa göre, bir santimetre içeri kaydı:

<FP00037.tif>

Bu kelimeleri seçerek ve listeden diğer liste türlerini tıklayarak, aralarındaki stil farklarını inceleyebilirsiniz.

Yerel Biçimlendirme

Yukarıda FP’in temel ve bütün Web Browser programları tarafından anlaşılan stilleri ile yaptığımız biçimlerdirmeye genel biçimlendirme denir; çünkü bu yolla bütün paragrafın genel stilini değiştirmiş oluyorsunuz. İster tek kelime, ister 200 satır olsun, paragrafın bütün üyeleri seçtiğiniz stilin bütün özelliklerini topluca kazanmış oluyorlar. Kimi zaman böyle genel biçimlerdirmeye değil, paragraf stili ne olursa olsun, sadece bir veya bir kaç kelimeyi, bir ya da bir kaç harfi biçimlendirmek isteyebilirsiniz. Buna yerel biçimlendirme denir.

Yerel biçimlerdirme, özellikle Normal stildeki metin yazılarında bir ya da bir kaç kelimeye dikkat çekmek için uygulanabilir. Mesela, buradaki örnek sayfamızda ziyaretçilerimize, fotoğraf sayfamızın amacını vurgulamak için, dikkatlerini özellikle “beğenilerinize ve eleştirilerinize” kelimelerine çekmek isteyebiliriz. Bu iki kelimeyi tarayarak seçin ve Stil seçme kutusunun bulunduğu Araç Çubuğu’ndaki B harfiyle gösterilen simgeyi tıklayalım. Seçili iki kelimenin türü koyu harf oldu. Bu simgenin yanındaki öne eğit I harfi şeklindeki italik, ve altı çizili U harfi şeklindeki Underline/Altını Çiz simgelerini tıklayın; değişiklikleri inceleyin. Aynı sırada ressam paletine benzeyen renk seçme simgesini tıklayarak, bu iki kelimeye bir de renk verin:

<FP00038.tif>

Yerel biçimlendirme, teknik anlamda yerel sayılsa bile, bütün bir sayfaya, uzun bir yazının tümüne uygulanabilir. Buradaki değişiklikleri yapmak için yararlandığınız simgelerin yanında içinde muhtemelen Arial yazılı harf seçme kutusunu farketmiş olmalısınız. Bu kutunun yanındaki seçme okunu tıklayarak, seçili metinlerinize (veya yeni yazmaya başladığınız bir yazıya) arzu ettiğiniz fontu verebilirsiniz. Fakat bunun bir sınırı var: FrontPage, burada sizin bilgisayarınızda bulunan harf türlerini sıralamaktadır. Bu listeden seçeceğiniz harfler, ziyaretçilerinizin hepsinin bilgisayarında bulunmayabilir. Özellikle şimdi bir çok bilgisayarın Windows kurulu olarak satıldığını ve bu bilgisayarlarda Microsoft’un temel Web harfleri dediği farklı harflerin yüklenmiş olduğunu düşünürseniz, sayfalarınızda bütün bir yazıyı seçerek, listeden hoşunuza giden ve Windows 95/98 kurulu bilgisayarların çoğunda bulunabilecek bir harf türünü seçerek, yerel imkanları kullanmak suretiyle genel biçimlendirme yapabilirsiniz. Ama tekrar edelim; sizin bilgisayarınızda bulunan her harf ziyaretçilerinizin bilgisayarında bulunmayacaktır; ziyaretçinin Browser programı ziyaretçinin bilgisayarında bulunmayan bir harf talep edildiği zaman kendi varsayılan harfine dönecektir. Bu harf, sizin sayfanızda oluşturmak istediğiniz görsel etkiye uygun olmayabilir.

Yaptığınız bir genel (stil değiştirerek), veya yerel biçimlendirmeyi beğenmezseniz, Edit/Düzen menüsünden Undo/Geri Al maddesini seçerek, eski biçime geri dönebilirsiniz.

Sayfa Biçimlendirme Unsurları

HTML dili, bütün basitliğine rağmen, sayfalarınızda bir çok görsel etkiye imkan verecek araçlara sahiptir. Yatay çizgi, tablo ve çerçeve bu unsurların başında gelir. Burada yatay çizgi ve tabloyui ele alalım; çerçevelere kapsamı geniş olduğu için ayrı bir derste değinelim. Ayrıca FP, sitemizin tümüne uygulamayı öğrendiğimiz temaları, sayfalara tek tek de uygulayabilir ve sayfalarımıza birbirden farklı temalar seçebiliriz. Bu dersin sonunda tüm sitenin değil sadece bir sayfanın temasını değiştirme konusunu ele alacağız.

Yatay Çizgi:

Sayfanızda yer alan bilgileri gruplandırarak birbirinden ayırmak ve ziyaretçinizin dikkatini yeni bir grup bilginin başladığına çekmek istiyorsanız, yatay çizgiden yararlanabilirsiniz.

Örnek sayfamızda, iki paragrafı birbirinde bir yatay çizgiyle ayırarak, alıştırma yapabiliriz. Birinci paragrafın son kelimesinden sonra klavyede Enter tuşuna basın; metin imleci yeni paragrafın başında iken, Insert/Ekle menüsünden Horizontal Line (Yatay çizgi) maddesini seçin. İki paragrafın arasına, yazının paragraf eni kadar uzunlukta bir yatay çizgi belirecektir. Bu çizgi, FP’e sayfalarınıza uygulattığınız ortak temanın gerektirdiği görsel nitelikte olacaktır.

Burada bir parantez açalım; HTML’de dikey çizgi olmadığını belirtelim. Bunun sebebi, HTML’in Browser tarafından “satır satır” icra edilmesidir. Dikey çizgi, yanındaki metnin birden fazla satırının kapladığı alanı kaplayacağı için, Browser önce çok-satırlı bir unsuru, ardından da tek satırlı bir başka unsuru görüntüleyemez. Sayfalarınıza dikey çizgi koymak için tablodan yararlanabilirsiniz.

Tablo:

Bir Web sayfasında bilginin sunuluşunu düzenleyen iki araç vardır: liste ve tablo. FP’de bir metnin nasıl liste haline getirileceğini yukarıda ele aldık. Tablo, HTML’de hem bilginin sunuluşuna tertip-düzen getiren ve anlamayı kolaylaştıran bir araçtır; hem de HTML sayfalara yapısal iskelet kazandırır. Burada kısaca tablonun bu iki kullanım alanına değinelim.

Sayfalar dolusu tanımlama yazısı yerine bu yazıda yer alan bilginin sütun ve sıralar halinde dizilen kutulara bölünerek sunulması, kavramayı arttıran bir araçtır. Sayfalarınızda bir çok bilgiyi tablolar halinde sunarak, yer kazanabilirsiniz.

Şimdi bir örnek yapalım. Önce, FP Explorer’da Navigation görünümünde iken Yenilikler sayfasını bir kere tıklayarak seçin ve Araç Çubuğu’nda New Page (Yeni Sayfa) simgesini tıklayın. Yenilikler sayfasının altına bir yeni sayfa eklenecektir. Şiemdi bu yeni sayfayı sağ-tıklayın ve menüden Rename/Yeniden Adlandır maddesini seçin. Yeni sayfanın adını, “Yeni filmler” yapın. Bu sayfada ziyaretçilerimize yeni çıkan filmler hakkında bilgi vereceğiz. Navigation görünümünde, altta dosya adlarının bulunduğu bölümde bu sayfaya Yeni.html adının verildiğini göreceksiniz; bu adı da film.htm yapın.

İster kelime-işlem programınızda yazarak ve RTF biçiminde kaydederek ve daha sonra sayfanıza Insert menüsü yoluyla ithal ederek, ister doğruca sayfanın içinde yazarak, (isterseniz, PC World sitesinden indirerek) şu metni sayfanıza girin:

“Burada piyasaya yeni sürülen filmlerle ilgili bilgiler veriyoruz. Bu bilgiler, denediğim ve aldığım sonuçları yansıtmaktadır. İmalatçı firmaların tavsiyeleri ve sizin alacağınız sonuçlar farklı olabilir.”

Şimdi, “olabilir” kelimesinden sonra klavyede Enter tuşuna basın ve yeni bir paragraf açın. Metin imleci yeni paragrafta iken Araç Çubuğu’nda Insert Table/Tablo Ekle simgesini tıklayın; fakat Mouse’un düğmesini bırakmayın. Simgenin hemen altında boş bir tablo görüntüsü oluşacaktır; şimdi Mouse’u, üç kutu aşağı, üç kutu sağa yürütün. Tablo görüntüsünün altında “3 by 3 table” (3’e 3 tablo) kelimelerini görüyor musunuz? Bu şu anda oluşturmak üzere bulunduğunuz tablonun kaç sütunu, kaç sırası olduğunu gösteriyor. Şimdi Mouse’un düğmesini bırakın; yeni paragrafınızın olduğu yerde üç sütunlu, üç sıralı ve kutuları boş bir tablo oluşacaktır. (Kendinizi kutlayın; şu anda tam 16 satırlık bir HTML kodu yazmış bulunuyorsunuz!)

<FP00039.tif>

Sonra bu tablonun birinci sütundaki kutularına film adlarını, ikinci sütundaki kutulara türünü ve üçüncü sütuna bu film hakkındaki izlenimlerinizi yazın. Tabii amatör fotoğrafçı değilseniz, bu kutulara “nmnmnmnmn” veya “ababababa” yazmanız da mümkün! Sonuçta ortaya şöyle bir tablo çıkacaktır:

<FP00040.tif>

Tablunuzun kutularındaki metinlere, stil yoluyla veya yerel biçimlendirme yöntemiyle istediğiniz şekli verebileceğinizi; isterseniz yazıları renklendirebileceğinizi, hizalarını değiştirebileceğini söylemek bile gereksiz. Fakat belirtememiz gereken bir iki nokta var:

Tablonun özellikleri: Mouse işaretçisini tablonun yazı bulunmayan bir yerine getirdiğiniz zaman, simgenin metin imleci değil ok halini aldığını farkettiniz mi? Bu durumda iken Mouse’u sağ tıklayın; açılacak menüden Table Properties (Tablo Özellikleri) maddesini seçin. Açılacak kutuda, tablonun kendisini biçimlendirmekte kullanacağımız bir çok kontrolle karşılaşacaksınız:

<FP00041.tif>

Bu kutuda önce tablonun kendisinin sayfada hiza durumu ve konumu, ve çerçeve çizgisinin piksel olarak kalınlığı (0, çerçeve çizgisi olmasın demektir), tablonun kutularında çerçeve ile içerik arasında bırakılacak boşluk ve kutuların arasındaki tamponun genişliği gibi özelliklerini ayarlama imkanı veren Layout (Yerleşim) bölümü vardır. Alignment (Hizalanma) kutusunun yanındaki oku tıklarsanız, tablonun tümünün bulunduğu yerde sola (left), sağa (right) ve ortaya (center) hizalanmasını sağlayan veya bunu browser’ın varsayılan ayarlara bırakan 8default) seçenekleri göreceksiniz. Aynı bölümdeki Float (Yüzme) kutusu ise tablonun çevresindeki unsurlar tarafından sağa mı, sola mı itileceğini tayin eder.

Layout bölümünün yanında Minimum Size (Asgarî büyüklük) bölümü bulunur. Tabloların ölçüsü, varsayılan ölçü olan yüzde ile, içinde bulunduğu sayfanın veya çerçevenin (tablo, tablo içinde ise içinde bulunduğu kutunun) yüzde 100’ünü kaplayacak şekilde oluşturulur. Fakat çoğu zaman tablonuzun eninin bulunduğu yerde asgari ne ölçüde olmasını istediğinizi belirtebilirsiniz. Bunu yüzde olarak da yapabilirsiniz; piksel olarak da.

/////////////KUTU////////////////////////

YENİ ÖLÇÜ BİRİMİNİZ PİKSEL

Bugüne kadar santimetre ile düşünmeye alışıktınız. Önce televizyon sonra da bilgisayar ekranları sizi inç ölçüsüne alıştırdı. Ama bir Web tasarımcısı olarak bundan sonra Piksel diye birimle düşünmek zorundasınız. İşin kötüsü, mesela 10 piksel bazen 1 milimetre olabilir, bazen yarım! Bu ne biçim ölçü demeyin. Piksel, ekran kartınızın ekranda (monitör), bir “ekran dolusu” bilgiyi (yazıyı, resmi, çizgiyi ve ekranda gördüğünüz herşeyi) yatay ve dikey olarak kaç nokta ile canlandırdığını belirten bir ölçüdür. Başka bir deyişle, ekranınızdaki en küçük birim, piksel’dir. Ekran kartı, standart VGA ölçüleriyle çalışıyorsa, “bir ekran dolusu” görüntüyü yatay 640, dikey 480 nokta ile oluşturur. Yok eğer yeni ve marifetli bir ekran kartınız varsa, aynı fikizî ekrana, yatay 1600, dikey 1200 nokta da koyabilir. Buna ekranın çözünürlüğü denir. Çözünürlük ne kadar büyük olursa, ekrandaki “cisimler” o kadar büyük olur, dolayısıyla ekrana o kadar “az şey” sığar. Çözünürlüğü 640x480 olan bir ekran kartı, diyelim ki çaprazlama ölçüsü 14 inç olan bir ekranda, bir fotoğrafı sağdan sola, yukarıdan aşağıya ekranı dolduracak ölçüde görüntülüyor. Aynı ekranı, 1280x860 piksel olan bir grafik kartına bağlar ve aynı fotoğrafı görüntülerseniz, bu kez fotoğraf ekranın sadece dörtte birini dolduracaktır. Web tasarımcısı olarak ölçülerinizi piksel olarak vermekle, tablolarınızın, çerçevelerinizin veya grafiklerinizin, izleyicinin grafik kartına ve ekranının büyüklüğüne göre kaçta kaçında oluşturulmasını istediğinizi nisbî (rölatif) olarak belirtmiş oluyorsunuz. Bu aslında size tasarladığınız sayfanın ziyaretçinin bilgisayarında  nasıl görünmesini istiyorsanız öyle görünmesini sağlama imkanı veriyor.

Bu arada Web sayfalarında “Bu sayfa en iyi şu çözünürlükte, şu renk derinliğinde görünür,” veya “Şu browser’ı kullanırsanız daha iyi olur!” gibi uyarılar, Internet ahlâkına aykırıdır; ziyaretçiyi sitenizden soğutmak istemiyorsanız, bu tür “uyarılardan” kaçının.

//////////////////////////KUTU BİTTİ///////////////////

Tabloların yüksekliği de ölçü olarak belirtilebilir. Ancak tablo yüksekliğini genellikle içeriği belirler. Tablodan iskelet unsuru olarak yararlanmak istiyorsanız, yükseklik ölçüsü verebilirsiniz.

Tablo özellikleri kutusunun Custom Background (Özel zemin) bölümünde Use Background Image (Arka-plan resmi kullan) kutusuna işaret koyar ve yanındaki Browse (Gözat) düğmesini tıklayarak bir grafik dosyası seçerseniz, seçtiğiniz grafik (fotoğraf veya resim) tablonun tümüne arka-plan olarak yerleştirilir. İsterseniz tablonun tümüne, Bacground Color (Zemin rengi) kutusunun seçme okunu tıklayarak açılacak tablodan zemin rengi de seçebilirsiniz.

Bir tablonun unsurlarının ayarlanması için imkanlarınız bununla sınırlı değil. Bir tablonun hücrelerinin özellikleri de ayrı ayrı belirlenebilir. Tablonun herhangi bir hücresini tıkladığınızda açılacak menüden Cell Properties (Hücre Özellikleri) maddesini seçerek, sadece içini tıkladığınız hücrenin özelliklerini belirleyebilirsiniz. Tablonun tümünün özelliklerini belirlemeye yarayan kutudan farklı olarak bu kez Layout bölümünde Header Cell (Başlık hücresi) ve No Wrap (Kelimeleri Kaydırma) kutularını göreceksiniz. Bir hücreyi başlık hücresi olarak tayin ederseniz, içeriği yazı ise harf türü olarak koyu harf seçilir ve yazı ortalanır.

Tabloların her sırada ve sütunda eşit sayıda hücresi olması gerekmez. Başka bir deyişle, komşu iki veya daha fazla hücreyi birleştirebilirsiniz. Bunun için birleştireceğiniz iki veya daha fazla hücreyi birlikte tarayın; herhangi birini sağ-tıklayın. Açılacak menüden Merge Cells (Hücreleri birleştir) maddesini seçin. İçinde ayrı ayrı yazılar bulunan hücreleri birleştirirseniz, sağdaki yazı soldakinin, alttaki yazı üsttekinin altına eklenir.

Herhangi bir hücreyi iki veya daha fazla hücreye bölebilirsiniz. Bunu yapabilmek için herhangi bir hücreyi sağ-tıklayın; açılacak menüden Split Cells (Hücreleri böl) maddesini seçin. Açılacak diyalog kutusunda hücrenin sütun (column) olarak mı, sıra (row) olarak mı bölüneceği ve kaça bölüneceğini (Number of...) belirtebileceğiniz kontrolleri göreceksiniz. Bir hücrenin içeriği bölündükten sonra solda veya üstteki hücrede kalır.

Tablo hücrelerine, bir HTML sayfasına giren herşey girebilir. Başka bir ifadeyle, bir hücre kutusuna yazı, resim, multimedya unsuru ve başka bir tablo koyabilirsiniz. Hücrelerin içerdiği yazılarda bağlantı olabilir.

Özellikleri böylesine inceden inceye kontrol edilebilen ve hücrelerine bir Web sayfasında bulunabilen her türlü malzeme konulabilen bir araç olarak hücre, sayfalarınıza, HTML’de olmayan bir özellik kazandırabilir; sayfanın iskeletini sağlayabilir. FP’in bizim için hazırladığı bütün “boş” sayfalarda, başlık grafiği, Navigation düğmeleri veya kelimeleri gibi unsurların aynı yere denk gelmesini sağlayan yapısal iskelet de aslında bir tablodan ibarettir. Yukarıdaki örnekte sayfamıza tablo yerleştirdiğimiz “yer” de gerçekte sayfanın çatısını oluşturan tablonun bir hücresinden ibaret! FP’in sayfanın tümünde yaptığını, biz de, sayfamızın içeriğini koymamız için bize sağlanan yerde yapabiliriz.

Hatırlıyorsanız, yukarıda, HTML’de dikey çizgi unsuru olmadığını belirtirken, HTML komutlarının yukarıdan aşağıya doğru satır-satır icra edildiğini söylemiştik. Yani, Browser, sizin sayfanızı oluştururken, HTML kodunuzu satır-satır okuyacak ve emrettiğiniz işi yukarıdan aşağıya doğru yapacaktır. Buna göre, Browser’a, mesela, ekranın sol kenarına üstten 3 santim aşağıya bir resim koymasını, sonra üst kenara soldan 3 santimetre içeri bir başka resim koymasını emredemezsiniz. Browser, üstten 23 santimetre aşağıda görüntü oluşturacak bir emir icra ettikten sonra, tekrar yukarı çıkarak başka bir görüntü oluşturamaz. Buna, yani ekranı bir gazete veya dergi sayfası gibi kutu-kutu işlemenize imkan veren, tablodur. Örneğin, üç sütunlu üç sıralı bir tablonun, birinci sütun-ikinci sırasındaki hücresine, ikinci sütun-birinci sırasındaki hücresine, ve üçüncü sütun- üçüncü sırasındaki kutusuna resim veya diğer mültimedya unsurlarını koyabilirsiniz; diğer hücrelere de yazılarınızı ve başlıklarını yerleştirirseniz, sayfanız bir dergi sayfası gibi, sütunlar halinde işlenmiş olur.

Bir Sayfanın Teması Değiştirmek:

FP’de sitemizi oluşturan sayfaların tümüne ortak bir tema vermeyi ilk derste öğrendik. Bu sayede, içi boş sayfalarımız bile, sitemizin ortak bütün özelliklerine sahip olarak oluşturuluyor. Fakat öyle bir an olabilir ki, sitenin tümü için seçtiğiniz tema, bir sayfaya uygun görünmeyebilir; bazı sayfalarda farklı bir tema ugyulamak isteyebilirsiniz.

Bizim sitemiz için seçtiğimiz tema, gerek zemininde yağlı boya tuvaline benzeyen grafiği, gerekse başlığında ve yatay çizgilerindeki “resim” havası ile amatör fotoğrafçılık konusuna uygun göründü. Fakat mesela fotoğraf örneklerimizi verdiğimiz sayfalarda daha sade bir tema belki dikkatin fotoğraflarda toplanması açısından daha uygun olabilir. Hatta belki bu sayfalarda hiç tema uygulamasak ziyaretçinin dikkatini daha çok fotoğraflara çekme imkanı bulabiliriz.

Bir sayfanın temasını değiştirmek veya temayı tümüyle kaldırmak için sayfayı Editör’de açın. FP Editör’ün Format/Biçimle menüsünden Themes/Temalar maddesini seçin. Karşınıza, FP Explorer’da tema görünümünü seçtiğiniz zaman gelen tema diyalog kutusu gelecektir. Sol taraftaki listede adını seçtiğiniz temanın, uygulandığı sayfanın ana unsurlarını nasıl biçimlendireceğini sağdaki büyük panoda görebilirsiniz. Tema diyalog kutusunun sol üst tarafında en üstteki seçeneğe dikkatinizi çekerim: “This Page Does Not Use Themes” (Bu sayfada tema kullanılmaz) maddesini işaretlerseniz, tema önizleme penceresindeki görüntü kaybolacaktır. Bu, sayfadan da tema unsurlarının kaldırılacağı anlamına gelir. Bu durumda iken tema kutusunun OK düğmesini tıklarsanız, açık sayfadan tema unsurları kaldırılacaktır. Şimdi ya farklı bir tema seçin, ya da tema uygulanmamasına karar verin; ve OK’i tıklayın. Sayfanız, seçeneğinize göre ya yeni temaya uygun hale getirilecektir; ya da tema tümüyle kaldırılacaktır.

Bir sayfadan tema unsurlarını kaldırma yolunu seçerseniz, temanın gerektirdiği zemin grafiği kaldırılacak, Navigation düğmeleri düz yazıya çevrilecek, çizgilerin grafik değil, gerçekten HTML’in düz çizgisi şeklini alması sağlanacaktır; fakat sayfanızda FrontPage’in sağladığı otomasyona ait unsurlar aynen korunacaktır. Sayfanızın diğer sayfalara ve ana sayfaya bağlantısı ile ortak başlık grafiği yerinde kalacak; sayfalardaki ortak metinler aynen korunacaktır.