FRONT PAGE Danışman: Uzman Mustafa Küçükali. Hazırlayanlar

Transkript

1 WEB TASARIMI için html ve FRONT PAGE 2000 Danışman: Uzman Mustafa Küçükali Hazırlayanlar Ayşe HAYLAMAZ Esin TANDOĞAN Ankara Ocak 2001

2 2 ĐÇĐNDEKĐLER Web Tasarımının Temelleri...4 BÖLÜM 1. HTML PROGRAMLAMAYA GĐRĐŞ HTML NEDĐR? HTML E GĐRĐŞ? Başlıca HTML Komutları <HTML> Komutu <HEAD> Komutu <TITLE> Komutu <BODY> Komutu <H1> Komutu Komutu Komutu <CENTER></CENTER> Komutu Komutu Komutu <HR> Komutu BACKGROUND Komutu BGCOLOR Komutu <A HREF> Komutu <IMG SRC> Komutu LI Komutu Komutu <BLINK> Komutu HTML ile WEB SAYFASI HAZIRLAMA...10 BÖLÜM 2. FRONT PAGE 2000 ĐLE WEB TASARIMINA GĐRĐŞ FRONT PAGE Đ TANIMA FRONT PAGE IN GENEL YAPISI: Görünüm Düğmeleri Sayfa Đçerik Görünümleri FRONT PAGE 2000 MÖNÜLERĐ File Mönüsü Edit Mönüsü View Mönüsü Insert Mönüsü Format Mönüsü Tools Mönüsü Table Mönüsü Frames Mönüsü Window Mönüsü Help Mönüsü ADIM ADIM WEB TASARIMINA GĐRĐŞ Front Page Đle Web Oluşturma; SAYFALAR ARASI BAĞLANTILAR Bağlantılar (Links) : Bookmark: WEB SAYFASINA RESĐM ve MULTĐMEDĐA DOSYALARINI EKLEME Web Sayfasına Resim Formatlı Dosya Ekleme: Web Sayfasına Clipart Gallery de Yer Alan Resimleri Ekleme:...28

3 2.6.4 Resim Dosyalarına Ait özelliklerin düzenlenmesi: Web Sayfasına Multimedia Dosyalarını Ekleme: Web Sayfasında Ses Dosyaları ile Çalışma: Web Sayfasında Video Formatlı Dosyalar ile Çalışma: Resim ve Multimedia dosyalarını sayfaya eklerken dikkat edilmesi gereken hususlar: ÇERÇEVE SAYFALARI ve ÖZELLĐKLERĐ Çerçeveler Çerçeve Yerleşimi ve Özellikleri Çerçeve Özelliklerin Düzenlenmesi Çerçeveler Arası Bağlantı Oluşturma Çerçevelerin Silinmesi AKTĐF NESNELERĐN KULLANIMI Aktif Elemen Nedir? Office Nesneleri ve Özellikleri FrontPage in Aktif Nesneleri ve Özellikleri HAREKETLĐ SAYFA ve NESNELER OLUŞTURMA Metne Dinamik HTML Efekti Uygulama FRONT PAGE SAYFASINDA FORMLARLA ÇALIŞMA Form Nedir? Form Araçları ve Özellikleri: Form Özelliklerinin Kaldırılması Form Özelliklerinin Düzenlenmesi SĐTE ÜZERĐNDE SON KONTROLLER ve SĐTENĐN YAYIMLANMASI Web Dizini Đçersindeki Dosya Đsimlerinin Kontrolü SĐTENĐZĐN YAYIMLANMASI...51 KAYNAKÇA

4 4 INTERNET Word wide web (dünya çapında kütüphane) projesi, internet ile hızla büyümektedir. Her an, her yerde elinizin altındaki bir diz üstü bilgisayarı ve taşınabilir telefon ile istediğiniz bilgi kaynaklarına ulaşmanız mümkündür. Web aracılığı ile bilgileri dağıtmak ve herkese hizmet verebilmek, internet ve servisleri aracılığı ile mümkündür. Đnternet üzerindeki sayfalarda istediğiniz bilgilere ulaşabilmeniz için, bu sayfaları düzenlemek için araçlara ihtiyacınız vardır. Bu araçlar internet sayfaları; çok yönlü metin dokümanları tasarımı ile internet çok yönlü metin sunucuları ile mümkün olmaktadır. (Karahoca A., s.2 ) Web Tasarımının Temelleri Web sayfalarının gerçekte programlama dili gibi bir kaynak kodu bulunur. Web sayfaları bu doğrultuda iki türlü hazırlanmaktadır. Bunlardan ilki WYSIWYG (what you see is what you get - Ne görürsen onu alırsın) denilen yöntemdir. Visual Page, Front Page, Dream Viewer ve Flash gibi programlar web sayfalarının ekranda yazıların ve resimlerin istenilen yere görsel olarak yerleştirilmesini sağlayan programlardır. Web sayfası oluşturmak için bu programlar kullanılarak HTML dili bilmeye gerek duymadan bir web sayfası yapılabilir. Web sayfası hazırlamanın diğer yoluysa Notepad gibi bir metin editörü ya da HTML editör programı kullanmaktır. Kaynak kodundan web sayfası hazırlamak her zaman için daha avantajlıdır. WYSIWYG programları web sayfasına gereksiz kodlar ekler ve çoğu zaman sayfayı hazırlayan kişinin kafasını karıştırır. Bazen de sayfaya istenildiği gibi müdahale etme kapasitesine sahip olunamaz. BÖLÜM 1. HTML PROGRAMLAMAYA GĐRĐŞ 1.1 HTML NEDĐR? HTML, yani Hyper Text Markup Language kısaca bir yazı işaretleme dilidir. Yazının göze hoş gelmesi için şekillendirilmesi, HTML'nin amacıdır. Ancak yazıyı şekillendirirken arada resim, ses gibi öğeler de hoş olacağından HTML bunları da kapsar. HTML, belgelerin metinler, tablolar, listeler, fotolar içerecek şekilde internette yayımına izin verir. (Karahoca, A.s.7) Basit bir web sayfası hazırlamak için temel olarak HTML komutlarını bilmeniz yeterlidir. Bu bölümde sadece temel HTML komutlarına değinilmiştir. Çeşitli web dizayn programlarında görsel olarak objelerle hazırlanan sayfaların HTML kodlarını da görüntüleyebilirsiniz. Ayrıca Browser ların View Source özelliği ile internette gördüğünüz ilginç sayfaların HTML sine ulaşabilirsiniz. 1.2 HTML E GĐRĐŞ? HTML ile dokümanlar oluşturulurken diğer programlama dillerinde olduğu gibi mantıksal ünitelerden oluşur. Başlıklar, paragraflar veya listelerden oluşabilir. Normal bir editörde yazdığınız HTML kodları için compiler(derleyici) bulunmadığından dolayı hata yapmamaya dikkat etmeniz gerekmektedir. Tarayıcı program (browser: yani Netscape, Internet Explorer vs.) küçüktür (<) ve büyüktür (>) işaretlerinin arasına yazılan her şeyi HTML komutu olarak yorumlar. Şimdi temel HTML komutlarından örnekler verelim. Bunun için örneğin note pad i kullanabilirsiniz.

5 5 <HTML> <H1>BU BIZIM SAYFAMIZ</H1> ILK DENEME SAYFASIDIR. BU ITALIK BIR YAZI BU DA KALIN BIR YAZI </HTML> Bu dosyayı ilk.html adıyla boş bir dizine kayıt (save) edin ve tarayıcı programınızla bu dosyayı çağırın. (Kaydettiğiniz dosyaya çift tıklayarak ya da "file" mönüsünden "open" ile bu dosyayı seçerek) Önünüzde şöyle bir ekran olması lazım: Yazdıklarımıza dikkat ederseniz komutlar "<KOMUT>Komuttan etkilenecek yazı</komut>" şeklindedir. "kalın" kalın(bold), "italik" italik yazı yazmamızı sağladı. Hemen hemen tüm HTML komutlarında aynı mantık hakimdir. Ancak bazı komutlarda "</KOMUT>" ile komutu kapatmak gerekli değildir. Bunlardan ilk akla gelenler ve <IMG> komutlarıdır. Bu komutlar bir yazı grubunu etkilemediğinden ile kapatılmasına gerek yoktur. Aynı şey<img>, yani resim ekleme komutunda da geçerlidir. 1.3 Başlıca HTML Komutları HTML ile ilgili en temel komutlara bakalım, ayrıntılı açıklama ve örnek sayfa, tablodan sonra: KOMUT <HTML> <HEAD> <TITLE> AÇIKLAMA Metnin HTML olduğunu belirtir. Dokümanın içreği hakkında bilgi verir. Sayfaya başlık verir.

6 6 <BODY> Dokümanın içindeki tüm paragrafları listeler. <H1> Metne ana başlığını verir. Kalın Yazı Đtalik yazı <CENTER></CENTER> Ortalamak Satır başı Paragraf başı <HR> Yatay çizgi <BACKGROUND> Arkaya plana yayılacak resmi seçer. <BGCOLOR> Renk ayarlar. <A HREF="hakkımda.html"></A> Diğer sayfalara bağlantı <IMG SRC="images/sahil.gif" ALT="sahil Resim yerleştirmek resmi"> Yazının özellikleri. <LI> Listeleme yapar. <BLINK> Yazının yanıp sönmesini sağlar <HTML> Komutu HTML, en dıştaki elemandır. Bu eleman metnin bir HTML dokümanı olduğunu işaret eder. Ayrıca bu eleman web sayfasını gösteren programa HTML dilinin versiyonunu belirtir. (Karahoca.A,s.15) <HEAD> Komutu HEAD komutu dokümanın içeriği hakkında bilgi verir. Bu bilgi dokümanın bir parçası gibi Web tarayıcısından (Nescape ve Internet Explorer) görünemez. (Karahoca.A,s.15) <TITLE> Komutu "TITLE" sayfaya başlık vermek için kullanılır. Bu başlık tarayıcınızın en üstündeki kutucukta ve taskbar'da yazar <BODY> Komutu HTML dokümanının içerisindeki tüm paragrafları listeler ve diğer elemanları içerir. (Karahoca.A,s.15) <H1> Komutu <BODY> elemanından sonra gelen <H1> komutu en büyük fontlu başlıktır. H1-H6 arasındaki başlıkların büyüklükleri azalan sıradadır. (Karahoca.A,s.15) Kullanımı:<HTML> <BODY> <H1>ANA BASLIKTIR</H1> Komutu Yazının koyu renkte yazılmasını sağlar. Kullanımı: buraya yazılan metin koyu renk basılır Komutu Yazının italik yazılmasını sağlar. Kullanımı: buraya yazılan metin italik basılır

7 7 <CENTER></CENTER> Komutu Yazı, resim, çizgi, tablo ve listelerin ortalanmasını sağlar. Kullanımı: <center> bu aradakiler tüm sayfayı ortalamış olarak ekrana görüntülenir. </center> Komutu Satır başı yapar. Kullanımı: Komutu "" komutu paragraf başı yapar ancak bu paragraf başı Türk yazı standartlarına uymaz. Türk standartlarına göre yeni paragrafın ilk satırı biraz içeriden başlar. Ancak HTML deki paragrafta yeni paragraf içeriden başlamaz. Đçeriden başlamaması çok önemli bir sorun değildir. "" komutunun bir tane seçeneği vardır: "ALIGN". Eğer şeklinde kullanırsanız işaretine kadar olan yazılar hem paragraf başı yapılmış olacaktır, hem de yazı sağa yanaşık görünecektir. <PALIGN="JUSTIFY"> şeklinde kullanırsanız satır sonları hizalanacaktır. <HR> Komutu Yatay bir çizgi çizer. Bu çizgi ayırıcı olarak kullanılabilir. Yazıların sonuna eklenemez. HR komutu otomatik olarak yeni satırdan başlayacaktır. Seçenekleri ise şu şekildedir: <HR WIDTH=80% SIZE=5> Burada "WIDTH" yatay çizginin tüm sayfaya olan oranıdır. Eğer % işaretini koymazsanız piksel cinsinden sabit bir uzunlukta çizgi çizersiniz. "SIZE" piksel cinsinden çizginin kalınlığıdır. (Pixel'i açıklamayacağım arası değerler vererek kendiniz görebilirsiniz). Bunun yanında "HR" komutunda kullanılan bir seçenek de "NOSHADE"dir. <HR NOSHADE> yazarsanız yatay çizgi üç boyutlu görünmeyecektir BACKGROUND Komutu Arka plan resmi sayfanıza oldukça güzel bir görüntü veren bir özelliktir. Sayfanızın arka plan resmi olarak gif, jpg, jpeg uzantılı resim dosyaları kullanabilirsiniz. Kullanımı: <BODY BACKGROUND= c:\ucak.jpg > BGCOLOR Komutu BGCOLOR sayfanın arka plan rengi (# = siyah); Kullanımı: <BODY BGCOLOR= #FFFFF > ya da <BODY BGCOLOR= Yellow > <A HREF> Komutu Bağlantılar, HTML DE çok kullanılan komutlardandır. Bu yüzden mantığını iyi anlamanız gerekir. Yapmanız gereken tek şey <A HREF="URL">Açıklama</A> komutunu sayfanızda herhangi bir yere yerleştirmek. Burada URL olayı çok önemlidir. URL; html, jpg, gif, js, wrl vb. uzantılı herhangi bir dosya adı olabilir; şeklinde bir web sayfası adresi olabilir; news://news.metu.edu.tr şeklinde bir news sunucusu adresi olabilir;

8 8 ftp://ftp.gazi.edu.tr şeklinde bir ftp adresi olabilir; gopher://gopher.metu.edu.tr şeklinde gopher adresi olabilir; telnet://narwhal.cc.metu.edu.tr şeklinde telnet adresi olabilir ya da şeklinde bir e-posta adresi olabilir. Görüldüğü gibi birçok seçenek bulunuyor. Eğer web sayfanızın bulunduğu sunucudaki dosyalara ulaşmak istiyorsanız doğrudan dosya adını yazacaksınız, yoksa protokol://adres şeklinde bir yapı kullanacaksınız; ya da bağlantıya tıklandığında e-posta atılmasını istiyorsanız mailto: yazısını kullanacaksınız. Örnekler: <A HREF="yeni.html">Bir başka sayfanız</a> <A HREF="../index.html">Bir üst dizindeki başka bir sayfanız</a> <A HREF=" Sayfası</A> <A HREF=" Üniversitesi</A> <A HREF="ftp://ftp.metu.edu.tr/pub">ODTU ftp sitesinde istediğiniz programları bulabilirsiniz</a> <A HREF="gopher://gopher.gazi.edu.tr">Gazi Üniversitesi gopher servisi</a> <A HREF="telnet://bbs.bilkent.edu.tr:3000">Buces BBS</A> <A me</a> <A HREF="dene.jpg">Deneme resmi</a> <IMG SRC> Komutu Sayfanıza herhangi bir resmi eklemek için <IMG SRC="dene.gif"> gibi bir satır yazmanız gerekiyor. Ancak dene.gif adlı bir dosyanın bulunması ve bu dosyanın yazmakta olduğunuz html uzantılı dosya ile aynı dizinde bulunması lazım. (örneğin deneme.html dosyası C:\WebProjects\ dizinindeyse dene.gif de o dizin altında bulunmalı). Aksi taktirde resim yerine, resmin bulunamadığını ifade eden garip bir işaret çıkar. Sayfanıza resim eklemeye başladığınız zaman çok fazla resim dosyası olduğunda bunları bir alt dizinde toplamak isteyebilirsiniz. Örneğin deneme.html dosyası C:\WebProjects\ altındayken dene.gif dosyasını (ve diğer resimleri) C:\WebProjects\resimler\ altına koyduysanız: <IMG SRC="resimler/dene.gif"> şeklinde bir komut yazmanız gerekecektir. Aynı DOS'ta cd komutunu kullanmak gibi ama burada \ yerine / kullanacaksınız. Aynı şekilde C:\Windows\ altındaki bir resmi çağırmak için: <IMG SRC="../windows/dene.gif"> komutunu yazmanız gerekir. (.. bir üst dizin demek. Aynı mantıkla../.. iki üst dizin oluyor) Diyelim ki DENE.GIF adlı bir resminiz var ve bu resmi sayfanıza yerleştirmek istiyorsunuz. Eklemek istediğiniz html dosyasının adı da "resim.html" olsun. Şimdi öncelikle DENE.GIF dosyasını resim.html dosyasının bulunduğu dizine (directory ya da folder) kopyalayın. Sonra da resim.html dosyasının herhangi bir yerine <IMG SRC="DENE.GIF"> yazın. Burada dikkat edilmesi gereken nokta resim dosyasının tam adıdır. Örneği resim dosyanızın adı dene.gif olsaydı <IMG SRC="dene.GIF"> şeklinde yazmanız gerekir. Böylece web

9 9 sayfanıza resim eklediniz. Şimdi tarayıcı programınızla açıp sayfanıza bakın. Komutu yazdığınız yerde resmin çıktığını göreceksiniz. Resimlerle ilgili birçok seçenek vardır. Tüm seçeneklerin kullanıldığı bir IMG komutu örneği şu şekildedir: <IMG SRC="images/dene.jpg" BORDER=2 WIDTH=20 HEIGHT=35 ALT="Bu deneme adlı resim" ALIGN="LEFT" LOWSRC="images/dene-dusukcozunurluk.gif"> "SRC" seçeneğinde resim dosyasının ismi yazılır. "BORDER" seçeneği ile resminize çerçeve verebilir ya da "BORDER=0" yazarak var olan çerçeveyi kaldırabilirsiniz. "WIDTH" ve "HEIGHT" ile resimlerinizin boyutlarını değiştirebilirsiniz. Ancak bu durumda resim kalitesi düşebilir. Eğer PhotoShop ya da PaintShop gibi resim editörlerinden birini kullanmayı biliyorsanız resmin boyutlarını WIDTH - HEIGHT ile değil editörle küçültünüz. Çünkü editörle küçültüldüğünde resmin byte olarak büyüklüğü düşecektir, bu da sayfanızın daha çabuk yüklenmesini sağlayacaktır. "ALT" ile resminize alternatif bir yazı koyabilirsiniz. Bu yazı herhangi bir nedenden dolayı resim görünmediğinde ve yeni tarayıcı programlarda fare imleci resmin üzerine geldiğinde görünecektir. Bütün resimlerinize bir alternatif yazı yazmayı alışkanlık haline getirmelisiniz. "ALIGN" seçeneği resmin yazıya göre konumunu belirtir. Eğer "LEFT" yazarsanız resim sola yanaşacak ve "IMG" komutundan sonra yazılan tüm yazılar resim bitene kadar resmin sağına yazılacaktır. Ancak resim bitmeden yazının resmin solundan kurtulmasını istiyorsanız yazmalısınız. Burada "LEFT" ya da "RIGHT" kullanabilirsiniz LI Komutu Liste oluşturulmasını sağlar Komutu Sayfanızda kullandığınız yazıların büyüklüğünü, rengini ve yazı tipini seçebilirsiniz. Yazıların her türlü özellikleri "FONT" komutu ve bu komutun içine yazılan seçeneklerle belirlenir. Seçenekler şu şekildedir: Seçenek Açıklama Örnek SIZE Yazı büyüklüğü ... COLOR Yazı rengi ... FACE Yazı türü ... SIZE seçeneğini iki türlü kullanabilirsiniz. (+,-) ile o anki yazı büyüklüğüne göre değer verebilirsiniz, ya da doğrudan 1 ile 7 arası bir rakam ile büyüklüğünü belirtebilirsiniz. Yazıya müdahale etmediğiniz sürece yazı büyüklüğü "3"tür. Örneğin "FONT SIZE=+1" komutunu kullanırsanız yazı büyüklüğü 4 olacaktır. Aynı sonucu "FONT SIZE=4" yazarak da elde edebilirsiniz. COLOR seçeneği için BODY komutunu referans alın. Oradakine benzer bir şekilde seçili olan (yani ve arasında kalan) yazının rengini değiştirebilirsiniz. Renklerin tanımı için renk referansı kısmına bir bakın. Face seçeneği için; standart olarak kullanabileceğiniz yazı türleri arasında Arial, Helvetica, Times New Roman, Comic Sans, Courier, Tahoma ve Verdana yer alır.

10 <BLINK> Komutu Yazının yanıp sönmesini sağlar. Kullanımı: <BLINK>YANIP SONEN YAZI</BLINK> 1.4. HTML ile WEB SAYFASI HAZIRLAMA Aşağıdaki kodu not padde Anasayfa.html olarak kaydedin. <HTML><head> <title> html öğreniyorum </title> <center>bu BĐZĐM SAYFAMIZ <BODY BACKGROUND="C:\webtas\resim\star.jpg" TEXT="white" LINK="yellow" VLINK="cyan" ALINK="red"> <center> <div align><img src="c:\webtas\resim\sahil.gif" width=500 height=300 alt="hayat Bir Sahildir."> <a href=" >Universitemiz </a> <a href=" > Web'de Kolay Arama </a> <a href=" > Komik Bir Site </a> <a <img src="c:\webtas\resim\letter.gif" border=0 alt="mail align=bleedleft> <a </a> <center> Son Güncelleme Tarihi 3.Kasım.2000 Ankara

11 11 Bu sayfadan bir link seçilip ayrıldığında bu sayfaya geri dön mek için aşağıdaki kodu yazmak gerekir. <a href=" > Ana sayfaya dön </a> Burada önemli olan dönmek istediğiniz html uzantılı dosyanın isminin doğru verilmesidir.

12 12 BÖLÜM 2. FRONT PAGE 2000 ĐLE WEB TASARIMINA GĐRĐŞ 2.1. FRONT PAGE Đ TANIMA Piyasada birçok görsel HTML editör programı bulabilirsiniz. Ancak Front Page programının bunlar arasında gerçekten önemli bir yeri vardır. Bunun birkaç sebebi; Front Page programı ile basit bir doküman dosyası hazırlar gibi web sitenizi hazırlayabilir, sitenize ait sayfaları şema halinde oluşturup, şemaya göre sitenizi düzgün temellere oturtabilirsiniz. Sitenizi oluştururken yerleştireceğiniz web alanına ait dizini tanımlayarak bir yığın FTP işlemi ile uğreşmadan kendi dizin yapısyla sitenizi yayımlayabilirsiniz. Front page programında hazırladığınız sayfaların web alanında görünümünü Front Page programını WYSIWYG (whatyouseeiswhatyouget) özelliğiyle anında görebilirsiniz. Bu işlem yardımıyla sürekli web dosyasını kaydedip, browser ile bakmaktan kurtuluyorsunuz.(gümüştepe Y.,s.6,1999) 2.2. FRONT PAGE IN GENEL YAPISI: Mönü Çubuğu EDĐTÖR ALANI Araç Çubukları Sayfa Đçerik Görünümleri Görünüm Düğmeleri Durum Çubuğu

13 Görünüm Düğmeleri Site görünüm mönüsünde yer alan gösteri düğmeleri ile oluşturulan site hakkında bir çok özelliği takip edebilir, sitenin bağlantılarını, görevlerini, sayfaların genel dizilişini ve web sayfasında kullanılan dosyalar hakkında çeşitli rapor dökümlerini öğrenebilirsiniz Page (Sayfa) Gösteri Düğmesi : Bu düğmenin genel amacı front page sayfalarını düzenlemek için editör penceresini açmaktır Folders (Klasör) Gösteri Düğmesi: Bu düğmenin asıl amacı site için kullanılan dizin ve dosyaları görüntülemektir. Herhangi bir dizin içinde yer alan dosya ve alt dizinleri görmek için, dizin adı üzerinde tıklamanız yeterli olacaktır Reports (Raporlar) Gösteri Düğmesi: Bu düğmeyi tıklayarak webi oluşturan bileşenler hakkında bilgileri raporlayabilirsiniz. HTML uzantılı web dosyaları ve bu dosyalara ait bağlantılar, resim dosyaları, bağlantı oluşturulmayan dosyalar, bağlantı sağlanan dosyalar, web içerisinde oluşturulan ancak kullanılmayan dosyalar, web içerisi ve web dışına yapılmış bağlantılar gibi birçok istatistiksel bilgiye ulaşabilirsiniz Navigation (Dümen) Gösteri Düğmesi : Bir anlamda Front Page programının düzmenidir. Bu gösteri düğmesini tıklayarak webi oluşturacak sayfaların maketini tasarlayabilirsiniz. Oluşturduğunuz bu sayfalar arasında bağlantı hiyerarşisini sağlayabilirsiniz Hyperlinks (Yüksek Bağlantılar) Gösteri Düğmesi : Sayfalar arasında oluşturulan veya web sayfalarının dışında herhangi bir adrese yapılan bağlantıların durumunu şema halinde gösteren, gösteri düğmesidir Tasks (Görevler) Gösteri Düğmesi : Web sayfalarınız için yapmak istediğiniz ancak uygulamaya henüz geçiremediğiniz görevleri bu alana yazarak siteyi yayımlayana kadar görevleri takip edebilirsiniz. Oluşturulan görevin tarih ve zamanı, Front Page tarafından otomatik olarak tutulur. (Gümüştepe Y.,s:24,1999)

14 Sayfa Đçerik Görünümleri Bir sayfanın içeriği 3 değişik biçimde görüntülenebilir Normal : Çalışılan ekran üzerinde düzenlemelerin yapılabildiği görünümdür HTML : Düzenlenen sayfanın HTML kodlarının görüntülenmesini sağlar. Buradan deneme yanılma yoluyla HTML de öğrenebilirsiniz Preview : Düzenlenen sayfanın browser da görüntüleneceği biçimde görülmesini sağlar. 2.3 FRONT PAGE 2000 MÖNÜLERĐ Front Page aşağıdaki gibi on adet mönü içermektedir. Bunlar; File, Edit, View, Insert, Format, Tools, Table, Frames, Window ve Help mönüleridir. Yukarıdaki ekranda mönü çubuğu ve araç çubuğu görülmektedir. Araç çubuğu üzerindeki butonlar HTML taglarını sayfaya eklemek için ve metinleri hizalamak için kullanılabilecek butonları toplu halde içermektedir File Mönüsü File mönüsü, dosyalama işlemlerinin yapıldığı mönüdür. Yandaki ekran, bu mönünün alt başlıklarını göstermektedir.

15 New Yeni bir sayfa oluşturmak için kullanılır. Yeni bir sayfa çok çeşitli şekillerde başlatılabilir. Bu seçenekler bir liste şeklinde yandaki gibi ekrana gelecektir Page seçeneği boş bir sayfa açar. Front Page 2000 ilk açıldığında boş bir sayfa ile açılır Web ; yeni bir web düzeneği oluşturur. Front Page oluşturacağınız web sitesi için, 8 adet şablon dosyadan herhangi birini seçme hakkı tanıyor. Belirtilen şablon dosyaları kullanılarak fazla uğraşmadan orijinal web sitesi hazırlanabilir. ( Gümüştepe Y., s:27,1999) web şablonları webin oluşturulacağı dizin ve konumu

16 One Page Web (Bir Sayfalık Web); Sadece bir sayfadan oluşan web düzeneğidir. Ana sayfadan sonra oluşturulan bu bir sayfalık web içeriği tamamen boştur Corporate Presence Web Wizard (Şirket Web Sihirbazı); Bir şirket için web sitesi hazırlanacaksa, ilgili seçeneklerle bilgi toplayarak sitesinin wizard ile oluşturur Customer Support Web (Müşteri Destek Sitesi); Bu şablon da şirket için hazırlanmış bir taslaktır. Ancak corporate Presence web gibi adım adım takip edilen ve oluşturulan bir tasarım değildir. Özellikle, müşteri hizmetleri için tasarlanmış bir şablondur. (Gümüştepe Y., s:38,1999) Discussion Web Wizard (Görüşmeli Web Sihirbazı); Web tasarımcısının belirlediği konuda site ziyaretçileriyle tartışma gerçekleştirmek amacıyla oluşturulan bir dizi form düzeneğidir. Web sihirbazı formların oluşturulmasında ve site düzeneği hakkında web tasarımcısına rehberlik eder. (Gümüştepe Y., s:38,1999) Empty Web (Boş Web); Tamamen boş bir şekilde oluşturulan web sitesidir Import Web Wizard (Web Nakil Sihirbazı); Internet ortamında veya disk alanında mevcut bulunan web dosyalarını front page ortamına naklederek düzeltilmesini sağlayan bir şablondur. (Gümüştepe Y., s:47,1999) Personel Web (Kişisel Web) ; şahısların kendilerini tanıtmalarını sağlamak için oluşturulmuş web şablonudur Project Web (Tasarım Web); Bir çok web bileşenini bir arada bulundurur. Tasarımcıya kolaylık sağlamak amacıyla oluşturulan bu şablonda web için istenecek hemen hemen bütün bileşenler mevcuttur. Şablonun temel konuları aşağıdaki gibi sıralanabilir: Members (Üyeler); Site üyelerini gösteren bir liste yer alıyor. Bu liste A dan Z ye alfabetik bir sıralamayı içeriyor. Ayrıca kullanıcıya ait isim için bağlantı oluşturulmuş durumdadır. Bu bağlantı tıklanarak üye hakkında daha geniş bilgi almak mümkündür. Schedules (Listeler); site içerisinde gerçekleştirilecek değişikliklerin bir listesi bulunur. Bu listeyi web tasarımcısı, aylık hatta haftalık belirleyebilir. Ayrıca ürünler hakkında oluşturduğunuz veriler için veri tabanı ve raporlar hazırlar. Status (Durum) ; Olaylar ve projelerin planlanmış durumunu gösterir. Planın tarihe verilerin bağlantı tıklanarak plan görülebilir. Archive( Arşiv); Üyeler ait dokümanların bulunduğu dosyadır. Search (Arama); arama formunun bulunduğu sayfadır. Sitede herhangi bir metne göre arama gerçekleştirilebilir. Discussion (Tartışma); Web ziyaretçisini tasarımcıya formlar doğrultusunda ulaştıracağı bilgiler için aracı görevini gören formların bulunduğu sayfadır Open mevcut bir sayfayı çağırmak için kullanılır. Bu sayfa disk üzerinde saklı bir dosya olabileceği gibi herhangi bir URL deki sayfa da olabilir Close Üzerinde çalışılan sayfayı kapatır. Sayfa üzerinde kaydedilmeyen değişiklik varsa, Front Page değişikliklerin kaydedilip kaydedilmeyeceğini sorduktan sonra sayfayı kapatır.

17 Open Web Daha önceden disk üzerinde oluşturulmuş web düzeneğine ulaşmayı sağlar Save Sayfayı kaydetmek için kullanılır Save As Farklı olarak dosyayı farklı bir isimde kaydetmek için kullanılır. Bu şekilde dizinde hem eski dosya ve yeni isim ile kaydedilmiş dosya mevcut olacaktır Publishing Web Hazırlanan siteyi internet ortamına taşır.ayrıntılı bilgi Sitenin Yayımlanması bölümünde verilecektir Preview in Browser Düzenlenen sayfanın browser da görüntülenmesini sağlar Page Setup Sayfanın yazıcı çıktısı ile ilgili düzenlemelerin yapılabileceği bir diyalog penceresi açar. Diyalog penceresinde sayfa başlığı ve dipnotu, sağ ve sol boşlukları gibi ayarlamaları yapabilirsiniz Print Preview Sayfanın yazıcı çıktısını yazıcıya göndermeden ekranda görebilmek için kullanılır Print Sayfayı yazıcıya göndermek için kullanılır Send Üzerinde çalışılan aktif sayfayı (elektronik posta) olarak göndermek için kullanılır Exit Front Page programından çıkar Edit Mönüsü Undo ; Yapılan son düzenlemeyi geri alır Redo ; Undo ile yapılan değişikliği geri alır Cut; Đşaretlenen alanı ekrandan kesip, hafızaya alır Copy; Đşaretlenen alanı ekrandan kesmeden, hafızaya alır Paste; Hafızadaki alanı ekrana taşır Delete; Đşaretlenen alanı hafıza ve ekrandan siler.

18 Select All; Ekrandaki tüm alanları seçer Find ; Đstenen kelimeyi bulunulan sayfada arar Replace; Đstenen kelimeyi istenilen kelimeyle değiştirir Tasks; Yeni bir görev ekler View Mönüsü Page; Ekranda sadece düzenleme sayfasının görüntülenmesini sağlar Folders; Ekranda çalışılan dizin yapılarının da görüntülenmesini sağlar Reports; Raporların görüntülenmesini sağlar Navigation; Sayfa maketinin görüntülenmesini sağlar Hyperlinks; Sayfalar arası bağlantıların görüntülenmesini sağlar Tasks; Tasarlanan ancak henüz uygulamaya geçirilmemiş görevleri gösterir Views Bar; Görünüm düğmelerinin görüntülenmesini sağlar Folder List; Liste dosyasının görüntülenmesini sağlar Toolbars; Araç çubuklarının görüntülenmesini sağlar Refresh; Yapılan son değişikliklerle hazırlanan sayfayı günceller Insert Mönüsü Break; Cursor un bulunduğu yerden sonraki kalan kısmı bir sonraki satırdan başlatır. HTML karşılığı break ın dır Horizontal Line; Sayfaya çizgi çizmek için kullanılır. HTML karşılığı <HR> dır Date and Time; Sayfaya günün tarih ve saatini ekler Component; Seçildiğinde, açılan aşağıdaki bileşenleri aktif sayfaya ekler.

19 Database; Sayfaya veri tabanı ekler Form; Seçildiğinde, açılan aşağıdaki form bileşenleri aktif sayfaya ekler Advanced; Seçildiğinde, açılan aşağıdaki bileşenlerin sayfaya dahil edilerek daha dinamik web sayfalarının hazırlanmasına imkan sağlar Picture; Sayfaya resim ekler Hyperlink; Metne,resme ya da seçili nesneye link verilmesini sağlar Format Mönüsü

20 Font; Yazı fontu ile ilgili değişikliklerin yapıldığı seçenektir. HTML de tagına karşılık gelir Paragraf; Hazırlanan sayfanın paragraf ile ilgili özeliklerini değiştirilmesini sağlar. Html de tagı ile yapılan iş bu seçenekten ayarlanabilir Bullets and Numbering; Metne madde imi ve numaralandırma ekler Borders and Shading; Metne çerçeve ve gölgelendirme ekler Dynamic HTML Effects; Seçilen yazı yada nesneye çeşitli effect ekler. Seçildiğinde effect seçilmesi için pencereden özellikler ayarlanabilir Style; Yazı sitilini seçer Theme; Sayfanın arka zeminin seçilmesini sağlar. Front Page in kendi kütüphanesinde zengin temalar bulunmaktadır Properties; Seçili nesnenin özellikleri görüntülenir. Nesneye göre, ekrana gelen pencere içeriği değişmektedir Tools Mönüsü Spelling; yazım denetimi yapar. Front Page kütüphanesinde bulunmayan sözcük yazım hatalarını bildirir ve doğru yazım için öneriler sunar Customize; Toolbars, command,options sekmeleri bulunan bir pencere açılır ve bunların özelleştirilmesi sağlanır Options;General, Configure Editör,Reports View sekmeleri bulunan bir pencere açılır ve seçenekler değiştirilebilir Page Options; Sayfa düzeninin değiştirilmesini sağlar Table Mönüsü Web sayfasına istenilen satır ve sütun sayısına sahip tablo ekleme mönüsüdür. Yine bu mönü yardımıyla tablo üzerinde değişiklik yapılabilir.

21 Frames Mönüsü Normalde yapılan tüm işlemler bir tek web sayfası üzerinde yapılmaktadır. Bu mönü üzerinde çalışılan sayfa birkaç satır ve sütuna ayrılarak her hücre ayrı bir web sayfası gibi davranır. Bu mönü ayrıca anlatılacaktır Window Mönüsü New window; Yeni bir pencere açar Help Mönüsü Bu mönü ile Front Page versiyonu hakkında bilgi alabilir, komutların kullanımı hakkında örnekler görebilirsiniz.

22 ADIM ADIM WEB TASARIMINA GĐRĐŞ Bu bölümde Front Page 2000 in Web Şablonlarını kullanarak hızlı ve düzeyli bir web sitesinin oluşturulması anlatılmıştır Front Page Đle Web Oluşturma; Front,page ile web sitesi ilk oluşturulduğunda Web içersinde bulunan bileşenler, Front Page tarafından bir dizine aktarılacaktır. Bu dizine Web dizini diyoruz. Bu aşamadan sonra artık oluşturulan her Web sayfası bu dizin içine yazılacak, eklenen her nesne (resim, video, ses dosyaları vb.) bu dizine saklanacaktır. Site için yapılan denetimler yine bu dizin içerisinde yer alan dosya ve alt dizinlere göre yapılacaktır. Sitenin yapım aşaması bittikten sonra yine bu dizinler web alanında yayımlanacaktır.( Gümüştepe Y.,s:27,1999 ) FrontPage başlatıldıktan sonra bir web düzeneği oluşturmak için, File (dosya) mönüsünden New(yeni) ve buradan da web seçeneğini tıklamamız gerekiyor. Web Seçenekleri: 1. One Page Webs 2. Corporate Presence Wizard 3. Customer support Web 4. Discussion Web Wizard 5. Empty Web 6. Import Web Wizard 7. Personel web 8. Project Web One Page Wizard Sadece bir sayfadan oluşan Web düzeneğidir. Ana sayfadan sonra oluşturulan bu bir sayfalık Web içeriği tamamen boştur. Đşe temelden sağlamak ve bütün site tasarımını kendi yapmak isteyenler için oluşturulmuştur Corporate Presence Web Wizard(Şirket Web Sihirbazı) Oluşturacağınız web sitesi, herhangi bir şirket içinse bu şablon kullanılarak web sitesi hazırlayabilirsiniz. 13 farklı iletişim kutusunda oluşan bu sihirbazla ; Web üzerinden tanıtılacak ürünler ve hizmetler, Ziyaretçilerden geribildirim alınıp alınmayacağı, Web in kendi arama motoruna gerek olup olmadığı, Web de gösterilecekse, firmanın misyonunun ifadesi, Katalog talepleri gibi toparlanacak diğer tür bilgiler, Firma için ve Web üzerinden sorgularla kullanılacak tüm irtibat bilgileri(rogers s.48) bilgileriyle istenilen dinamik bir şirket web sitesi kurulabilir Customer support Web (Müşteri Destek sitesi) Bu şablon da şirket için hazırlanmış bir şablondur. (Gümüştepe Y., s:38,1999) Şablonda belli başlı olarak, What s New? (Ne yeni?), FAQ (ürünler hakkında en çok sorulan sorular), Bugs(Arıza ve problemler), Suggestions(teklifler), download(çeşitli programları yükleme), Discussion(tartışma) ve Search (arama) gibi konularda rehberlik eder.

23 Discussion web Wizard (Görüşmeli Web sihirbazı) Web tasarımcısının belirlediği konuda site ziyaretçileri ile tartışma gerçekleştirmek için bir dizi form örneğidir Empty Web (Boş Web) tamamen boş bir şekilde oluşturulan bir web sitesidir. Aslında bir şablon değildir. Oluşturulacak sayfalar ve sayfalar içerisindeki gerçekleştirilecek bitin işlemler web tasarımcısına aittir. Tabandan en yüksek boyuta kadar bütün işlemlerin kullanıcıya bırakıldığı bu seçenekle işe başlamak için; Front Page ile ilgili önemli bilgileri bilmek gerekiyor. (Gümüştepe Y., s:47,1999) Import Web (Web Nakil sihirbazı) Đnternet ortamında veya disk alanında mevcut bulunan web dosyalarını, Front Page ortamına naklederek düzeltilmesini sağlayan bir şablondur. Ancak tüm bileşenleri front page ortamına nakledemezsiniz. Örneğin geribildirim formları gibi. Download işlemi yapılırken, Front Page e çeşitli şartlar verebilirsiniz. Belirli bir büyüklük şartı verebilir ya da kaç düzey içeriye kadar yükleme işlemi yapılacağını belirtebilirsiniz Personel Web (Kişisel Web) Şahısların kendilerini tanıtmak için kullanılan web şablonudur. Kişisel bir site için her şey düşünülmüş ve başlangıç sayfasından linkler hazırlanmış durumdadır Project Web (Tasarım Webi) Project web birçok web bileşenini bir arada bulunduruyor. Tasarımcıya kolaylık sağlaması amacıyla oluşturulan bu şablonda, web için istenecek hemen hemen bütün işlemler mevcut. Tasarımcı bir çok dosyadan oluşan bu şablon üzerinde değişiklikler yaparak orijinal bir site oluşturabilir. Members(Üyeler): Site üyelerini gösteren bir liste yer alıyor. Schedules (Listeler): site içerisinde gerçekleştirilecek değişikliklerin bir listesi bulunur. Bu listeyi tasarımcı aylık hatta haftalık olarak belirleyebilir. Satatus(Durum): olaylar ve projelerin planlanmış durumunu gösterir. Search(Arama) : Arama formunun bulunduğu sayfadır. Sitede herhangi bir metne göre arama yapılabilir. Discussion (Tartışma): Web ziyaretçisinin tasarımcıya formlar doğrultusunda ulaştıracağı bilgiler için aracı görevini gören formların bulunduğu web sayfasıdır SAYFALAR ARASI BAĞLANTILAR Bu bölümde web sayfaları arasında bütünlük sağlama ve bağlantılar(links) hakkında bilgiler verilecektir. Ayrıca sayfa içerisinde belli yerlere konumlama sağlayan, Bookmark kavramı üzerinde durulacaktır Bağlantılar (Links) : Web sayfalarını birbirlerine yönlendirerek bağlantıyı sağlayan temel unsur, bağlantılar dır. Web sayfaları bu şekilde bir bütünlük ifade eder. Bunun için bağlantıların önemi büyüktür. Đyi bir web sayfasında bağlantılar çıkmaza girmez, mutlaka bir yeri gösteren bağlantı içerir. Web içersinde oluşturulan bir bağlantı, web içerisinde başka bir dosyayı, web dışında yer alan herhangi bir Đnternet adresini, elektronik posta adresini veya download etmek üzere bağlantı kurulan html harici çeşitli dosyaları gösterebilir.( Gümüştepe Y., s:109,1999) Bağlantı kurmak için Insert(ekle) mönüsünde Hyperlink seçeneği kullanılır. Kısa yolu ise Ctrl+K tuş kombinasyonudur. Ayrıca araç kutusundan

24 24 seçeneği ile de hyperlink oluşturula bilinir. Örneğin aşağıdaki Front Page ekranındaki hakkımda yazısına bağlantı kurmak için; yazı fare veya klavye yardımıyla seçilir. Daha sonra bağlantı kurmak için yukarıdaki seçeneklerden birisi seçilir. Mesela, metin seçiliyken farenin sağ tuşuna basılarak karşımıza gelen iletişim kutusundan Hyperlink seçilebilir. Böylece Bağlantı kurma penceresi karşımıza gelecektir. Bağlantı bir Đnternet adresi ise adres bu alana girilir Đlgili browser ı açarak Đnternet bölgesinde yer alan herhangi bir sayfaya bağlantı oluşturmak için, browser kısa yolunu (1) tıklayın ve Đnternet bölgesinde bulunan adresi browser yardımı ile belirleyin. Aynı işlemi diske göz atmak için, gezgin(2) kısa yolunu tıklayın ve diskinizde yer alan dosyayı belirtin. Oluşturacağınız bağlantıya tıklandığında belirttiğiniz bir elektronik posta adresine ileti göndermek istiyorsanız, ileti kısa yolunu(3) tıklayın ve açılan pencereye elektronik posta adresini giriniz. Eğer bağlantı yapacağınız sayfayı henüz oluşturmadıysanız, yeni sayfa oluşturma kısa yolunu (4) seçin. Bu işlemle yeni bir sayfa oluşturacak ve oluşturduğunuz sayfaya link tanımlamış olacaksınız.

25 25 Bağlantıyı sayfa içerisinde yer alan herhangi bir yere konumlandırabiliriz. Bu işleme sayfa içi bağlantıda bookmark diyebiliriz Bookmark: Eğer sayfanız çok geniş bir bilgi birikimi içeriyorsa, ana başlıklara koyduğunuz bağlantılar yardımıyla sayfa içerisinde hızlı bir şekilde o konu üzerine konumlanabiliriz. Bu işleme bookmark denir. (Gümüştepe Y., s:111,1999) Đşaretli metne veya seçili nesneye bookmark oluşturmak için, Insert mönüsünden bookmark seçeneği tıklanır. Hyperlink in ayarlandığı şekilden ilgili Bookmark ikonu seçilir. Karşımıza aşağıdaki gibi bir iletişim kutusu gelecektir. Bookmarka verilecek isim Sayfada yer alacak diğer bookmark isimleri bu alanda yer alacaktır. Seçili bookmarkı siler. Bookmark oluşturulan yerdeki metnin altı kesik çizgilerle çizilecektir. Ancak bu çizgiler herhangi bir browser da veya preview seçeneği ile gözükmeyecektir. Bağlantı Tanımları 1- Web alnı içerisinde bulunan htm dosyalarına yapılan bağlantılar: sayfaların birbirlerine bağlanması için kullanılan bağlantı seçeneğidir. Front Page e ait bağlantı penceresi açıldığında web dizini içersinde yer alan html uzantılı dosyalar gözükecektir. Bu dosyalar tıklanarak bağlantı sağlanabilir. 1. Web alanı dışında bulunan, başka adreslere yapılan bağlantılar:

26 26 Kendi web sitenizden, diğer web sitelerinin adresleri, bağlantı yardımıyla çağrılabilir. Bu tür bağlantıyı gerçekleştirmek için bağlantının yapılacağı adres, URL bölümünde yer alan boşluğa girilmelidir. 2. Elektronik Posta adresleri için oluşturulan bağlantılar : Bu tür bağlantılar genellikle sizin belirttiğiniz bir posta adresine tanımladığınız bağlantılardır. Sitenizi ziyaret eden kişilerin belirttiğiniz e-posta adresini kullanarak sizinle iletişimini amaçlar. 3. Bookmarklarla yapılan bağlantılar : Uzun metin bilgilerinden oluşan web sayfalarını, sayfa içerisinde hızlı konumlanmayı sağlayan bağlantılardır. 4. Diğer Dosya Türlerine Yapılan bağlantılar : HTML dilinin doğrudan yorumlayabildiği dosyalara tanımlanan bağlantılara eklenen dosyalar direk olarak başka bir sayfa içerisinde yorumlanır. Bunun yanı sıra HTML dilinin doğrudan yorumlayamadığı dosyaları download işlemi dediğimiz web ortamından diske yükleme imkanı sağlayacaktır. (Gümüştepe Y., s:114,1999) 2.6 WEB SAYFASINA RESĐM ve MULTĐMEDĐA DOSYALARINI EKLEME Bu bölümde web sayfasına resim ve multimedia dosyalarını ekleme işlemi anlatılacaktır Web Sayfasına Resim Formatlı Dosya Ekleme: HTML dili,resim dosyaları doğrudan yorumladığı için resim dosyaları üzerinde etkili ve hızlı işlemler gerçekleştirilebilir. Front Page sayfasına ekleyeceğiniz resimleri birçok yerden elde edebilirsiniz. Front Page ile birlikte gelen birçok resim dosyasından faydalanabileceğiniz gibi internet ortamından Download ettiğiniz resimleri de sayfanıza uygulayabilirsiniz.ayrıca Scanner(Tarayıcı) isimli donanım aygıtını kullanarak albümünüzde yer alan herhangi bir fotoğrafı, bilgisayar ortamına aktarıp kullanabilirsiniz. Office ile birlikte gelen ve diğer Office üyelerini desteklediği gibi Front Page ide destekleyen Microsoft Clip Art Gallery içerisinde gerçekten hoşunuza gidecek resimler çıkacaktır. Front Page sayfasına resim dosyası eklemek için, Insert(ekle) mönüsünden Picture(resim) ve buradan da From File(dosyadan) seçeneğini tıklayın. Açılan pencerede resim dosyasının konumunu belirleyin.

27 27 Clipart gallery i açar Scanner donanımına ait programı açarak, tarama sağlar. Sayfanıza eklemek istediğiniz resim dosyasını seçmeniz için Front Page, web dizini açacaktır. Dizin içerisinde yer alan resim dosyalarından herhangi birisi üzerine tıklayarak sayfaya ekleyebilirsiniz. Daha önce sayfanız ile hazırlık yapıp resim dosyalarını Images dizinine kopyaladıysanız, bu dizin içerisine girip dosyayı oradan ekleyebilirsiniz. Site için önceden herhangi bir hazırlığınız olmadıysa, disk alanında veya ağ sürücülerinde yer alan herhangi bir resim dosyasına, gezgin düğmesine tıklayıp erişebilirsiniz. Eğer resim dosyası Đnternet alanında yer alıyorsa, aktif browser ı açmak için browser tanımlı düğmeyi tıklayın ve dosyayı Đnternet bölgesinden seçin. Web dizini dışında yer alan herhangi bir dosyayı sayfaya eklediğinizde Front Page bu dosyayı web dizinine kopyalamak için sizden onay isteyecektir. Eklenecek resim dosyası Resim dosyasının ön görünümü

Daha göster