Microsoft Office Frontpage

... konulu sunumlar: "Microsoft Office Frontpage"— Sunum transkripti:

1 Microsoft Office Frontpage
Arş. Gör. Burcu Güven

2 Web Sitesi Hakkında…

3 WEB SİTESİ HAKKINDA Yayın Alanı: Hazırlanan sitenin 24 saat yayınlanabilmesi için özel şirketlerin ya da kurumların bilgisayarlarında kapladığı alandır. Bu alanın kiralanması işlemine hosting denir. Malzeme: Site yapmak için konu ile ilgili resim, makale ya da form gibi materyallerin yanı sıra bilgilerinizi dizayn edebileceğiniz bir programa ihtiyaç duyulur. Bu programlardan bazıları ise; Microsoft Office Frontpage, Flash gibi programlardır. Bu programlar ile görsel olarak web sayfası tasarlarken programlar arka planda yaptığınız tüm görsel işlemleri sizin için HTML koduna çevirirler. Yani otomatik olarak HTML kodları yazarlar. Alan adı: ….com.tr, gov.tr, gen.tr, bel.tr, pol.tr vb. isim adı altında sitenizin adresidir. Bir internet sitesinin yapımını üstlenen kişiye ise webmaster denir.

4 İki çeşit internet sayfası vardır.
1. Statik Sayfa : Genelde bilgi vermeye yönelik sayfalarda kullanılır. Sayfa ziyaretçisi ile herhangi bir interaktif iletişim yoktur. Yapım maliyeti daha düşüktür. Güncellemek veya yapı değişiklikleri daha zordur Sayfa ziyaretçilerinin sayfaya katılımları sağlanamaz. 2. Dinamik Sayfa: Genelde .asp, .php, .jsp, .shtml gibi sunucu taraflı dil uzantılarından oluşur. Sayfa ziyaretçisi ile interaktif iletişim vardır. Yapım maliyeti daha yüksektir. Sayfa ziyaretçilerinin siteye katılımları sağlanabilir. Site güncellemesi webmaster olmadan da yapılabilir.

5 Web Sitesi Nasıl Yapılır ?

6 World Wide Web (WWW) Web, internet üzerindeki servislerden birisidir
World Wide Web (WWW) Web, internet üzerindeki servislerden birisidir. İnternet üzerinde yazı, grafik, resim, ses ve hareketli görüntülerden oluşan dökümanları uzaktaki bilgisayarlara iletir. Bu hizmetin görülebilmesi için geri planda çalışan bir çok yazılım vardır. Kullanıcı, bunları görmez ve bilmez. Web Sunucuları Internete bağlı olan ve bir IP (Internet Protocol) numarası olan her bilgisayar web sunuculuğu yapabilir. Hazırlanan bir web sayfasının internette yayımlanabilmesi için sunumu yapan bir yazılımın olması gerekir. Bunu yapan çeşitli yazılımlar vardır. En yaygın olanı ‘Apache Server’ adıyla bilinen yazılımdır. Bir web sunucu bir çok web sayfasını ve web sitesini yayımlayabilir. Bu işi yapan bilgisayarlara web sunucuları denir. Web sunuculuğu yapan bir çok ticari ve resmi kuruluş vardır. Web Tarayıcıları Web dökümanlarını (web sayfalarını) görüntüleyen yazılımlardır. Web tarayıcıları arasında en yaygın olanları Lynks, Mosaic, MS Internet Explorer ve Netscape Navigator ’dür. Bunlara ek olarak yeni web tarayıcıları ortaya çıkmıştır. Opera, NeoPlanet gibi web tarayıcıları bunlara gösterilebilecek iyi örneklerdir. Bunlar hemen hemen benzer işlevlere sahiptir. Web tarayıcıları ücretsizdir. İnternet’ten indirilebilir.

7 URL (Uniform Resource Locator) İnternet üzerindeki bir web sayfasının bulunabilmesi için iyi ve sistemli bir adresleme sistemi gereklidir. Bunu yapmak kolaydır. Çünkü, internetteki her web sunucusunun bir IP (Internet Protocol) numarası olduğunu biliyoruz. Anımsamayı kolaylaştırmak için, IP numarası yerine alan adı (domain name) kullanılır. Web sayfasının sunucuda hangi adla hangi dizine konulduğu da bilinmektedir. Bunların belirtilmesiyle web sayfasının adresi kesinlikle ortaya konmuş olur. Web sayfasının bu yöntemle oluşturulan adresine URL denir. Kullanıcı kendi makinasındaki web tarayıcıyı açıp, uzakta bir sunucudaki web sayfasının adresini (URL) ilgili yere yazdığında, tarayıcı o sayfayı görüntüler. Bir web sayfası için URL adresinin üç temel bileşeni vardır ve şöyle yazılır: <servis>://<adres>[:port_numarası]/<dizin>/dosya_adı şeklindedir. HTTP HyperText Transfer Protocol sözcüklerinin baş harflerinden oluşur. İnternet üzerinde HTML ile yazılan dökümanların iletimini sağlayan protokoldur. Başka bir deyişle web’in dilidir. URL adresinde en başa yazılan ifadesi, HyperText Transfer Protocol servisi alınacağını belirtir. FTP FTP (File Transfer Protocol) internet üzerinde dosya alışverişi yapmayı sağlayan bir protokoldür. Web sunucuları gibi FTP sunucuları vardır. Bunların bir kısmı herkese açık dosyaları sunarlar. Anonymous kullanıcı adıyla bu sunuculara erişilebilir ve istenen dosyalar indirilebilir. Bazı ftp sunucuları yalnız yetki verilen kullanıcılara hizmet sunar. Bu tür sunuculardan herkes servis alamaz.

8 Web Sayfası Web istemcisinin bir Web Servisine bağlandıktan sonra tek seferde transfer ettiği tüm verilerden oluşan html sayfasıdır. Bu sayfadaki bilgiler kompozittir, çünkü grafik/resim bilgileri, normal text, ses, başka merkezlere ve başka dökümanlara ait linkler olabilir. Bir web servisine bağlandığımızda gelen ilk sayfaya "home page" denir. home page'ler için dosya adı genellikle "default.html" ya da "index.html" olmaktadır. Yandaki şekilde, bir web sitesi ve içindeki hiyerarşi gösterilmektedir.

9 Microsoft Office Frontpage

10 Microsoft Office Frontpage 2003 programını ilk çalıştırdığımızda dört bölümden oluşan bir sayfa (yeni_sayfa_1.htm) açılacaktır. 1. Tasarla : Sayfanın görsel olarak tasarlandığı bölümdür. Yani bu bölümde yazı yazma, resim ekleme ve düzenleme işlemleri görsel olarak yapılır. 2. Böl : Tasarlama bölümü ile kodlama bölümünün birlikte gösterildiği bölümdür. 3. Kod : Tasarlama bölümünde yapılan her türlü işlem bu bölümde HTML kodlarına çevrilir. Yani Frontpage arka planda otamatik olarak HTML kodları oluşturur. 4. Önizleme : Tasarlanan sayfanın internette nasıl görüneceğinin öngörünümüdür.

11 Frontpage penceresinin hemen sağ tarafında açılan pencereden faydalanarak yeni bir web sitesi açılabildiği gibi daha önceden hazırlanıp kaydedilen web siteleri de bu pencereden açılabilir.

12 Aynı işlemler Dosya menüsü içerisinden de yapılabilir.

13 ARAÇ ÇUBUKLARI Microsoft Office 2003’ün diğer programlarında olduğu gibi Frontpage 2003’de de benzer araç çubukları mevcuttur. Bunlardan sık kullanılanlar aşağıda gösterilmiştir.

14 Site aç komutu verdiğimiz zaman frontpage penceresinin en sol tarafında site içerisinde bulunan klasörler yer alacak ve düzenlediğimiz her sayfa bu klasör içerisine kaydedilecektir. Frontpage tarafından Private (özel) ve image (görüntü, şekil, resim vs.) isimli klasörler oluşturulur. Özel olarak tasarlanan dosyalarımızı private klasörüne, resimlerinizi image klasörüne depolayabilirsiniz. Bu klasörlerin haricinde yapacağınız çalışmalara göre yeni klasörler oluşturabilirsiniz. ***Bu klasörleri public_html isminde bir klasör açıp içerisine atmanız gerekiyor !!!

15 BOŞ BİR WEB SAYFASI OLUŞTURMA
İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açılabilir.

16 FRONT PAGE SAYFASI NIN ÖZELLİKLERİ
Açılan sayfa üzerinde sağ klik yapılarak Sayfa özellikleri penceresi açılır. Bu pencerenin Biçimlendirme sekmesinden sayfanın rengi ve arka plan resmi belirlenebilir. Sayfa Arka Plan Resmi : Arka plan resmi yanındaki kutuyu işaretleyerek arka plan bölümünü aktif hale getirilir ve sağ taraftaki gözat düğmesine tıklanır.

17 2. Gözat düğmesine tıklanarak açılacak olan “Arka Plan Resmi Seç” isimli pencereden sayfa arka planı olarak kullanılacak resim public_html klasörü içerisinden bulunur ve işaretlenir. Aç düğmesini kullanarak işlem onaylanır.

18 TABLOLAR 1. Tablo Ekleme : Araç çubuklarından ya da Tablo/Ekle menüsünden tablo eklenebilir. 2. Tablo Özellikleri : Sayfada oluşan tablonun üzerinde sağ tıklanarak tablo özellikleri penceresinden tabloya ait tüm özellikleri düzenlenir.

19 3. Kenarlık Kalınlığı : Tablonun kenarlık kalınlığını değiştirebilir hatta kenarlık boyutunu (0) yaparak kenarlıkları gizleyebilirsiniz. Kenarlık boyutunu sıfır olarak belirlediğinizde tasarım görünümünde kenarlıklar kılavuz çizgisi halini alacaktır. Önizlemede ise klavuz çizgileri görünmeyecektir. 4. Kenarlık Rengi : Renk bölümünden ise kenarlık rengini değiştirilir. Buradan açılan renk paletini kullanarak istediğiniz bir rengi kenarlık rengi olarak belirlenir. 5. Arka Plan Resmi : Tablo özellikleri penceresinden Arka Plan Resmi Kullan bölümünü aktif hale getirerek Gözat bölümünden bilgisayarınızda yüklü bulunan resimlerden birini tablo arka planı yapabilirsiniz.

20 RESİM EKLEME Sayfaya eklenen resimler ayrı bir yerde (public_html klasörü içinde) depolanır. Bu özellik internet sayfalarının hızını arttırır. Sayfaya resim yerleştirebilmek için önce bu resmin public_html klasöründe ya da bilgisayarda bulunması gereklidir. Not: Sayfaya eklenen resimler public_html klasörü içerisinden silinirse, resimleri web sayfasında da göremezsiniz. 1. Ekle/Resim/Dosyadan… menüsünü kullanarak Resim penceresini açılır. Aynı işlem araç çubuklarında bulunan resim ekle düğmesi kullanılarak daha hızlı açılabilir.

21 3. Açılan Resim penceresinden sayfaya eklemek istediğiniz resmi seçerek sağ altta bulunan ekle düğmesi seçilir.

22 KAYIT Kayıt işlemi varsayılan olarak hazırlanan web isimli klasörün içerisine yapılacaktır. Frontpage ilk açılan sayfanın ismini geçici olarak yeni_sayfa_1 olarak belirleyecektir. Kayıt işlemi sırasında sayfayı istediğimiz gibi isimlendirebiliriz. Üzerinde çalıştığımız sayfada kayıt edilmeyen bilgilerin varlığı halinde sayfa üzerinde “ * ” işareti yer alacaktır. Sayfa üzerinde yaptığımız en küçük değişiklikte bu işaret aktif olacak, kayıt işlemi sonrasında kaybolacaktır.

23 Kayıt Özellikleri • Kayıt isminin kısa olmasına özen gösterilmeli. • Mümkün olduğunca tek kelimeden oluşmalıdır. Çift kelime kullanılmak zorunda kalınırsa kelimeler birleştirilmeli ya da kelime aralarında alt tire ( _ ) kullanılmalıdır. (örnek : foto_galeri.htm, form_sayfasi.htm vb.) • Kesinlikle Türkçe karakter kullanılmamalıdır.

24 TARAYICIDA ÖNİZLEME Üzerinde çalışılan ya da yayınlanmaya hazır hale gelen bir sayfanın tarayıcıda (browser) nasıl yayınlandığını görebilmek için Dosya/Tarayıcıda Önizleme menüsünden istenilen ekran ayarı seçilerek yapılan sayfanın internette nasıl görüneceği izlenebilir.

25 LİNK (KÖPRÜ) EKLEME İki sayfa arasında köprü görevi yapan işlemdir. Bir sayfadan diğer sayfaya geçmek için kullanılır. Köprü işlemi klasörümüzün içerisindeki sayfalar arasında yapılabildiği gibi internet ortamında bulunan diğer sayfalarla yapılabilir. Public_html klasörü içerisinde link verebilmek için öncelikle link vermek istediğiniz sayfa oluşturulmalıdır. Önce yeni bir sayfa açılır. Bu sayfaya sitenize giren kişileri yönlendirilecek site isimlerini yazılır. Sonra araç çubuklarından link kısayolunu kullanarak Köprü Ekle penceresini açın. Köprü Ekle penceresinin alt tarafındaki Adres bölümüne yönlendirilmek istenilen sayfanın adresini yazın. Tamam düğmesini tıklayarak işlemi onaylayın.

26 2. Site İçerisinde Bir Sayfaya Link Verme
Site içerisinde bir sayfaya link verilebilmesi için daha önceden o sayfa hazırlanmış olmalıdır. Köprü ekle penceresini açtıktan sonra klasörün içerisinden link vermek istediğimiz sayfa seçilir. Link verme işlemi bittikten sonra link verilen sayfanın açılacağı yeri seçmek için “Hedef Çerçeve” düğmesine tıklayarak “Hedef Çerçeve” penceresini açın. “Genel Hedefler” bölümünden seçim yapılır.

27 3. Aynı Sayfada Link (Yer imi…) Kullanma
Bir konu hakkında sayfalarca makale yazdınız. Site içerisindeki bilgilere okuyucuların daha kolay ve hızlı bir şekilde ulaşabilmelerini sağlamak için yer imi kullanılmalıdır. İlk olarak İnternet Nedir? Konu başlığını metnin içinden seçerek Ekle/Yer İmi… (Ctrl+G) menüsünden Yer İşareti penceresini açılır.

28 Açılan Yer işareti penceresinde Yer işareti adı bölümüne internet Nedir? başlığı otomatik olarak gelecektir. Tamam düğmesini tıklayarak pencereyi kapatın. İnternet Nedir? İsimli başlığın altı kısa çizgilerle çizilmiş olarak görülecektir.

29 Yer imi verme işlemlerini bitirdikten sonra artık yer imi verdiğimiz başlıklara sayfa başında bulunan konu başlıklarını seçerek link verebiliriz. Bunun için sayfa başında bulunan “İnternet Nedir?” cümlesini seçilir.

30 Köprü ekleme düğmesine tıklayarak Köprü Ekle penceresini açılır
Köprü ekleme düğmesine tıklayarak Köprü Ekle penceresini açılır. Açılan pencerenin sol tarafında bulunan bağla bölümünde Bu Belgede Yerleştir bölümünü seçilir. Yer işaretlerinin bulunduğu bölümde daha önceden yaptığınız yer imleri görülecektir. Buradan hangi bölüme gitmek isteniyorsa o yer imi seçilir. İnternet Nedir? yer imini seçerek onaylanır.

31 FOTOĞRAF GALERİSİ OLUŞTURMA
Ekle menüsünden ya da araç çubuğu üzerindeki web bileşeni penceresini açılır. Bileşen Türü bölümünden de Fotoğraf Galerisi’ni seçilir. Son diyerek Fotoğraf Galerisi Özellikleri penceresine geçilir.

32 Fotoğraf Galerisi Özellikleri penceresindeki Ekle düğmesini kullanarak Dosyalardan Alınan Resimler penceresi açılır. Buradan fotoğrafların bulunduğu klasörü açarak sayfada yer almasını istediğiniz fotoğraflar seçilir ve “Aç” komutunu vererek fotoğrafları galeri penceresine dahil edilir. Fotoğraf Galerisi Özellikleri penceresinde bulunan Düzenle… düğmesini kullanarak açılacak olan Resmi Düzenle penceresinden resimlerin boyutlarını standart hale getirebilir, resimleri döndürebilir ya da kırpabiliriz.

33 En boy oranını koru, özelliğini aktif hale getirilirse seçili resmin boyutlarını değiştirmek istediğimizde resmin genişlik ve yükseklik oranı bozulmayacaktır. Varsayılan Boyut Olarak Belirle, özelliği seçilirse tüm resimler standart olarak aynı boyutta görünecektir.

34 Fotoğraf Galerisi Özellikleri penceresinin Yerleşim bölümünde ise resimlerin sayfadaki düzenine ilişkin birkaç alternatif bulunmaktadır. Bunlardan sayfaya uygun bir tanesini seçin. Genelde resimlerde Slayt Düzeni kullanılmaktadır.

35 KAYAN YAZI EKLEME

36 MENÜ BÖLÜMÜ OLUŞTURMA Etkileşimli Düğme Yeni bir sayfa açarak Ekle/Etkileşimli düğme bölümünden ya da Ekle/Web Bileşeni bölümünden açılan Etkileşimli Düğmeler penceresindeki alternatiflerden istenilen düğme modelini seçelir. Alternatifler arasında gezinirken önizleme bölümünde seçilen düğmenin görüntüsü ekrana gelecektir. Metin bölümüne düğmenin adını yazın. Şimdilik Bağlantı bölümünü boş bırakın. Yazı Tipi bölümünde yazı tipi ve boyutlandırması yapılabilir. Yazı Tipi bölümünün altında Özgün Yazı Tipi Rengi, Vurgulanan Yazı Tipi Rengi ve Bastırılmış Yazı Tipi Rengi bulunmaktadır.

37 Not : Özgün yazı tipi rengini, vurgulanan yazı tipi rengini, bastırılmış yazı tipi rengini Etkileşimli Düğmeler penceresinin önizleme bölümünde de izleyebilirsiniz.

38

39 Not: Son olarak menu sayfamızı menu.htm ismi ile kaydediyoruz.

40 ÇERÇEVE (FRAME) Microsoft FrontPage’in önemli özelliklerinden birisi de çerçevelerdir. Birçok internet sayfasında çerçeveler kullanılır. Bu özellik sayesinde bir, iki, üç yada dört sayfayı aynı sayfa gibi yayınlayabilir ve bir sayfa güncellendiği zaman tüm sayfalar birden güncellenmiş olur. FrontPage’in şablon olarak hazırladığı çerçeveler tasarımcının tercihine göre kullanılabilir. Dosya menüsünden yeni bölümünü tıklayınca sağ tarafta açılacak olan pencereden Ek Sayfa Şalonları tıklanır.

41 Açılan Sayfa Şablonları bölümünden Çerçeve Sayfaları bölümüne geçilir.
Çerçeve Sayfaları bölümünde FrontPage tarafından sunulan çerçeve şablonlarından birini seçin.

42 Tüm internet sayfalarının mutlaka bir başlık bölümleri vardır
Tüm internet sayfalarının mutlaka bir başlık bölümleri vardır. Bu bölümde kurumun ya da kişinin adı veya hizmet alanını belirten ifadeler yer alır.

43 Üst bölümdeki çerçevenin Başlangıç Sayfası Ayarla düğmesine tıklayarak daha önceden klasör içerisine kaydedilen baslik.htm sayfası seçilir ve onaylayarak pencerenden çıkılır. Şekilde de görüldüğü gibi başlık sayfanın üst çerçevesine yerleşmiş durumdadır. Ancak, çerçevenin küçüklüğü nedeniyle sayfanın bir kısmı görünmemektedir. Çerçevenin üzerine gelerek çerçevenin genişliğini sayfanıza göre ayarlanır.

44 Son olarak çerçeve sayfasının kaydı yapılır
Son olarak çerçeve sayfasının kaydı yapılır. Bu sayfamız sitemizin giriş sayfası olacağından tüm internet sitelerinin giriş sayfaları index.htm, index.asp, index.php, default.htm, default.asp, default.php şeklinde yapılır. Bu sayfa genellikle index.htm olarak kaydedilir.

45 Herhangi bir sayfa üzerinde sağ tıklayarak Çerçeve Özellikleri penceresine
geçiş yapılır.

46 Sayfa özellikleri bölümündeki Çerçeveler sekmesine girerek Çerçeve Aralığı kısmından çerçevenin kalınlığını ayarlayabilir ya da Kenarlıkları Göster bölümündeki işareti kaldırarak kenarlıkları gizlenebilir. İsterseniz “çerçeve aralığı” bölümünden çerçevenin kalınlığını arttırarak değişik bir sayfa görünümü oluşturabilinir.

47 KAYDIRMA ÇUBUKLARI Sayfanın boyutu çerçeve dışarısına çıkarsa çerçeve bu sayfa için bir kaydırma çubuğu açacaktır. Eğer sayfanızda kaydırma çubuğu varsa bunu kaldırmak için; Kaydırma çubuğunu kaldırmak istediğimiz sayfa üzerinde sağ tıklayarak Çerçeve Özelliklerine girilir. Bu pencerenin en alt kısmında Kaydırma Çubuklarını Göster açılır kutusundan hiçbir zaman seçeneğini seçerek kaldırılır.

48 KÖPRÜ VE ÇERÇEVELERİN BİRLİKTE KULLANILMASI

49 SES (MÜZİK) EKLEME Microsoft FrontPage ile sayfalarda fon müziği kullanılabilir. *.wav, *.mid, *ram(ra), *.aif,(aif,aifc,aiff), *.au ve *.mp3 formatları desteklenmektedir. Sayfa fonunda kullanmak istediğimiz müzik dosyasını önce public_html klasörümüze kopyalanmalıdır. Hangi sayfanın arka planında müzik çalmasını isteniyorsa o sayfanın Sayfa Özellikleri bölümünü açılır. Sayfa Özellikleri penceresinin alt kısmında Arka Plan Sesi bölümünde Gözat düğmesini kullanarak public_html klasörü içerisinde bulunan müzik dosyası eklenir.

50