FRONTPAGE

1. FRONTPAGE

2. FrontPage Web Sayfası Oluşturma • Yeni dosya oluşturmak-kaydetmek • Var olan dosyayı Frontpage ile düzenlemek için açmak • Yazı tipi, yazı puntosu, yazı rengi, hizalama vs. ile çalışmak • Tablo ve hücreler ile çalışma • Çizim araçları ve şekiller ile çalışma • Bağlantı oluşturma • Sayfa içi, sayfa dışı • Resim ekleme • Resimlere bağlantı verme, açıklama ekleme, resim üzerine yazı yazma • Resimlerin belirli bir bölümüne bağlantı verme • Arka planı renklendirme, arka plana resim ekleme • Çerçeveler ile çalışma • Sayfayı yayınlama www.8m.com

3. FrontPage Web Sayfası Oluşturma • Bu sayfa tasarım şekli her ne kadar basit gibi görünse de bir süre sonra çok karışık ve içinden çıkılmaz bir hal almaktadır. Bu yüzden web sayfası tasarımı için görsel programlar oluşturulmuştur. Bizler bu programlardan Frontpage programını inceleyeceğiz.

4. FrontPage Web Sayfası Oluşturma

5. FrontPage Web Sayfası Oluşturma • Bu programda aynen Microsoft Word programında olduğu gibi hedef yazısal bir doküman oluşturmaktadır. Ve bu hedef için temel dosya,düzen, görünüm gibi benzer ana menüleri ve hemen altında kısa yol düğmeleri yer almaktadır. Bu nedenle benzer özellikler burada verilmemiştir.

6. Frontpage’te Yer Alan Menüler

7. Frontpage’te Yer Alan Araç Çubukları

8. FrontPage Web Sayfası Oluşturma • Ekranın sol alt köşesinde Microsoft Word programında olmayan Normal, HTML ve Önizleme tanımlarından oluşan bir fonksiyon dizisi görülmektedir. Bu ifadelerden Design basarsanız web sayfasının normal tasarım aşaması aktif olacaktır. Split bölümünde ise hem tasarım hem de kod sayfası birlikte olacaktır. Code bölümünde ise sadece kod sayfası ve Preview bölümünde ise web sayfasının tarayıcı ekranındaki (İnternet Explorer) görünümü bizlere gösterilecektir.

9. FrontPage Web Sayfası Oluşturma • Dosya menüsü içerisindeki yeni kavramı ile yeni boş bir web sayfası oluşturmak mümkün olsa da yan taraf da görülen Görev Bölmesi ile farklı yapıdaki boş web sayfaları oluşturulabilir. Görev Bölmesindeki Sayfa Aç kısmından daha önce çalışılan web sayfalarına ulaşılabileceği gibi Yeni kısmından Boş Sayfa veya Boş Web ile yeni bir boş çalışma alanı oluşturulabilir. • Buradaki Web ile Sayfa arasındaki farklılık temel olarak bir veya birden çok dökümandan oluşma ifadesidir. Web ile birden çok web sayfasını kapsayan bir çalışma sayfası oluşturulmaktadır. • Görev bölmesini görmek için istenilirse Görünüm menüsünden Görev Bölmesi seçilebilir. • Şablonlardan Yeni kısmında bulunan Sayfa Şablonları ile hazırlanmış taslak çalışmalardan istenilen bir taslak sayfa seçilerek web projemiz için zemin oluşturulabilir.

10. SAYFANIN ÖZELLİKLERİNİ DEĞİŞTİRMEK • Sayfanızın adını, arka plan rengini değiştirmek, sayfanıza ses eklemek ya da sayfanızın arka planına resim eklemek istiyorsanız, sayfanızın bulunduğu alana sağ klikleyin ve açılan menüden Sayfa Özellikleri’ni seçin. • Öncelikle açılan menüde Page Properties penceresinde sayfanızın adının ne olmasını istiyorsanız Title kısmına bunu yazmanız gerekiyor. Title kısmına yazacağınız yazı tarayıcınızın üst kısmında ziyaretçilerin göreceği kısımdır.

11. SAYFANIN ÖZELLİKLERİNİ DEĞİŞTİRMEK • Ayrıca sayfanıza ses dosyası da yerleştirebilirsiniz. Ama sayfanızda ses yer alması sayfanızın açılmasını geciktirecektir. Location seçeneğinden sesin olduğu yeri belirleyebilirsiniz. Menüde görülen Loop seçeneği ise ses dosyasının kaç kere çalmasını ayarlamanızı sağlar. Forever seçeneği seçili gelir, bu durumda müzik sürekli olarak çalacaktır. Bu seçeneği iptal ederseniz Loop kısmına ses dosyasının kaç kere çalmasını istiyorsanız yazabilirsiniz.

12. SAYFANIN ÖZELLİKLERİNİ DEĞİŞTİRMEK • Şimdi Formatting seçeneğine klikleyin. Açılan pencerede sayfanızın arka planına resim eklemenize yarayan Background picture seçeneğini göreceksiniz. Eğer arka plana resim eklemek istiyorsanız bu seçeneği seçin ve Browse butonu ile resminizin konumunu bulun. • Colors kısmından arka plan ve metin rengini değiştirebilirsiniz. Eğer arka plana bir resim yerleştirirseniz ve aynı zamanda bir de arka plan rengi seçerseniz, arka plan rengi değişmez. Bu nedenle ya arka plan resim koyun ya da arka planı renklendirin. Linklerin renklerini ayarlayın.

13. SAYFANIN ÖZELLİKLERİNİ DEĞİŞTİRMEK • Advanced seçeneğini kullanarak sayfanıza üst ve soldan boşluklar verebilirsiniz ya da Specify Top Margin ve Specify Left Margin’ i seçtikten sonra her ikisine de “0” yazarak sayfanızın içeriğinin sola ve üste tam yaslanmasını sağlayabilirsiniz. • Custom menüsü ise sayfanıza META komutlarını eklemenize olanak tanır. Örneğin burada “AUTHOR META”sını ekliyoruz. Bunu yapmak için System Variables seçeneği altındaki kısımdaki Add butonuna tıklayıp açılan menüde Name bölümüne Author ve Contents’e de kullanıcı adını yazıyoruz.Bu bilgi FrontPage’in HTML’sinde Head tagı içerisine ekenecektir. OK’e bastıktan sonra artık Custom menüsünde bu yazdığınız bilgilerin yer aldığını göreceksiniz.

14. Görünüm-“Sayfa” Görünümü • Bu düğmenin genel amacı web sayfalarını düzenlemek için editör penceresini açmaktır.

15. Görünüm- “Klasörler” Görünümü • 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ıklamamız yeterlidir.

16. Görünüm- “Raporlar” Görünümü • Bu düğmeyi tıklayarak web’i 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.

17. Görünüm- “Gezinti” Görünümü • Bir anlamda Frontpage programının dümenidir. Bu düğmeyi tıklayarak web’i oluşturacak sayfaların maketini tasarlayabiliriz. Oluşturduğumuz bu sayfalar arasında bağlantı hiyerarşisini sağlayabiliriz.

18. Görünüm- “Görevler” Görünümü • Web sayfalarımız için yapmak istediğimiz ancak uygulamaya henüz geçiremediğimiz görevleri bu alana yazarak siteyi yayımlayana kadar görevleri takip edebilirsiniz. Oluşturulan görevin tarih ve zamanı, Frontpage tarafından otomatik olarak tutulur.

19. Görünüm- “Köprüler” Görünümü • 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.

20. TABLOLAR • Bilgileri satır ve sütun düzeninde göstermek için tablolar kullanılır. Web sayfasında istenilen satır ve sütun sayısına sahip tablo ekleme ve diğer tablo işlemleri “Tablo” menüsünden yapılır. • Tablolar profesyonel sayfaların tasarımında çok fazla faydalanılan resim, metin ve diğer web bileşenlerinin sayfa üzerinde göz alıcı bir şekilde dağıtılmasında yardımcı olurlar. • Ayrıca sayfa içerisinde birkaç yerde arka plan rengi kullanmayı sağlarlar.

21. Tablo Eklemek • Tablo ekleme işlemi menüler ve araçlar kullanılarak yapılabilmektedir. Tablo eklemek için “Tablo/Ekle/Tablo” komutu verilir.

22. Satır Eklemek ve Silmek • Satır eklemek için “Tablo/Ekle/Satırlar veya Sütunlar” komutu verilir. • Hücreleri biçimlendirmek, birleştirmek, hücre silmek, satır ve sütun silmek gibi işlemler Word’deki tablo biçimlendirme ile aynı olduğu için bu kısmı detaylandırmıyoruz.

23. Kenarlık ve Arka Plan Rengi Ekleme • Eklenen tablo kenarlıkları görünür biçimdedir. Bunları kaldırmak için Biçimlendirme araç çubuğunda bulunan kenarlıklar düğmesinden faydalanılır. • Tablo üzerinde İçerik Menü’den “Tablo Özellikleri” komutu verilir.

24. Köprü Oluşturmak • Köprü, bir web sayfasından veya dosyadan diğerine olan bağlantıdır. • Ağ, intranet veya internet üzerindeki bir dosyaya veya web sayfasına gitme, gelecekte oluşturmayı planladığımız bir dosya veya web sayfasına gitme, e-posta iletisi gönderme, FTP yoluyla dosya indirme veya dosya gönderme gibi uygulamalarda kullanılır.

25. Köprü Oluşturmak • Köprü oluştururken Metin veya resim seçelim. Köprü Ekle simgesini tıklayalım. • Bununla ilişkilendir altında Varolan Dosya veya Web Sayfası’nı tıklayalım. İstediğimiz bir sayfayı veya dosyayı seçelim.

26. Köprü Oluşturmak-E-posta adresine Köprü oluşturmak • Metin veya resim seçelim. “Köprü Ekle” simgesine tekrar tıklayalım. Bununla ilişkilendir altında e-posta adresini tıklayalım. E-posta adresi kutusuna istediğimiz e-posta adresini yazıp “Tamam”a tıklayalım.

27. Köprü Oluşturmak-Sayfa içi • Ekle menüsünden Yerimi Ekle ile sayfa içi bağlantı için bölümler belirlenir. Bookmark penceresinden seçili olan metin için yer imi verilir.

28. Köprü Oluşturmak-Sayfa içi • Daha sonra eklene yer imi için köprü oluşturulur. Köprü Ekle menüsünden Yerimi seçeneği aktif edilir.

29. Çerçeve (Frame) İşlemleri • Çerçeve sayfası, tarayıcı penceresini çerçeveler olarak adlandırılan ve her biri ayrı bir sayfayı gösterebilen farklı alanlara bölen özel bir HTML sayfasıdır. Örneğin, Başlık ve İçindekiler çerçeve sayfası şablonu kullanılarak oluşturulmuş bir çerçeve sayfası üç çerçeve içerir: Başlık, İçindekiler ve Ana Çerçeve. • Sayfa görünümündeki Dosya Menüsünde, Yeni’yi işaretleyip Sayfa veya Web’i tıklayalım. Yeni Sayfa veya Web’deki görev bölmesinde, Yeni form şablonu altında yer alan Sayfa Şablonları’nı tıklatın.

30. Çerçeve (Frame) İşlemleri • Burada seçilen şablon tipi İç İçe Hiyerarşi çerçeve sayfasıdır. Bu tip şablon görünümü sayfayı üç ana kısma ayırmakta ve bu görünümü işaretli kısımda görülmektedir.

31. Çerçeve (Frame) İşlemleri • Yukarıda görülen ekran parçasında ise oluşturulan bu frame bölümlerinin tanımlanması ve başlangıç oluşturulması görülmektedir. Yeni Sayfa ile frame dosya haline getirilmektedir.

32. Çerçeve (Frame) İşlemleri • Her bir frame üzerinde Yeni Sayfa buttonuna tıklayarak yukarıda görülen şekildeki kısılmanmış bir web sayfası elde ederiz. Bu frame kısımlarını ayrı ayrı sayfalar olarak düşünebilir ve ayrı ayrı tasarımlarla oluşturabiliriz. Burada yeni_sayfa_2.htm olarak görülen doküman ilmecin olduğu etrafı mavi olarak işaretlenmiş olan yan framedir. Bu isimsel tanımlamanın hemen yanında görülen * karakteri ise bu sayfada yapılan değişikliğin saklanmadığını göstermektedir. Aşağıda bu temel üzerinde yapılmış örnek bir çalışma görülmektedir;

33. Çerçeveli Sayfa Ayarları • Sayfamızın nasıl görünmesini istediğimize bağlı olarak, çerçeve sayfanızın çerçeveleri etrafındaki kenarlıkları göstermeyi veya gizlemeyi seçebiliriz. • Çerçeve sayfasında herhangi bir yeri sağ tıklayalım. Kısayol menüsünde “Çerçeve Özellikleri”ni tıklayalım.

34. Çerçeve (Frame) İşlemleri • Yapılan taslak çalışma üzerinde yapılan değişikleri saklamak ve ek alt sayfaların çalışmaya eklenebilmesi için mutlaka yapının kaydedilmesi gerekmektedir. Bu amaçla Dosya menüsü içerisinden Kaydet menüsü seçilirse aşağıda yer alan Windows standart kaydetme ekranı görülecektir. Burada CTRL+S tuşunun da kaydetme işlemini yapabildiği görülmektedir. Farklı kaydet ile istenilen sayfa veya frame in farklı bir konuma farklı isimle saklanmasını sağlamaktadır.

35. Çerçeve (Frame) İşlemleri • Kaydetme işlemi ile bizlerden nereye ne şekilde kaydedileceğini sorgulayan bir ekran görünümü gelecektir. Burada ilk olarak kaydedilecek hedef klasör seçilmelidir. Örneğin çalışma sıkıntılarını çözebilmek ve yerleşimini doğru atayabilmek için bilgisayarımızda bulunan Belgelerim klasörü içerisine SAYFAM isimli bir klasör altına kaydedilebilir. Birden fazla sayfa yada frameden oluşan sayfalarda kaydetme işlemi ard arda kaydetme şeklinde oluşacaktır. Burada kaydedilen sayfanın hangisi olduğu sağ tarafta gösterilmektedir. Örneğin yukarıdaki şekilde kaydedilen kısmın Yan Frame olduğu görülmektedir.

36. Çerçeve (Frame) İşlemleri • Kaydedilen bütün sayfalar ve üç parçadan oluşan bir çalışmanın dördüncü sayfası görülmektedir:

37. Çerçeve (Frame) İşlemleri • Burada üç frameden oluşan bir çalışmanın dördüncü sayfasının index.htm olduğunu unutmayalım. Bütün sayfalar bir ana sayfaya bağlıdır ve ana sayfa alt sayfaları oluşturmaktadır. • Ana sayfa yukarıda sağ kısımda gösterilmektedir. Dosya adı kısmında ise index olarak isim tanımlaması görülmektedir. Burada Başlığı değiştir ile istenirse sayfa görüntülenmesi sırasında Browser üzerinde görülecek sayfa başlığı(title) değiştirilebilir. • Eğer sayfa isimleri kısa ve öz olarak Türkçe karakterden bağımsız tasarlanırsa upload (internete gönderilmesi) işlemi için yapısal sorunlar aşılmış olunur.

38. Çerçeve (Frame) İşlemleri • Çalışma içerisinde kopyala yapıştır, kes yapıştır yada sürükle bırak tekniği ile getirilen resimler web sayfamızın klasöründe saklanması, dosya olarak oluşturulması gerekir. Bu amaçla yukarıda yer alan soru ekranı ile resmin temel özellikleri ve saklanacağı yer gibi verileri bizlerden istenmektedir. Yine kısa ve öz tanımlamanın kullanılması ve Türkçe karakter kullanılmaması önemlidir.

39. Çerçeve (Frame) İşlemleri • Herhangi bir sayfa yada frame üzerinde boş bir alan üzeride sağ tuşa basarak Sayfa Özellikleri seçilirse yukarıda yer alan sayfa özelliklerinin ayarlanabildiği ekran görünümü gelecektir. Burada Konum ile sayfanın konumu, Başlık ile sayfanın üst başlığı, Ana konum ile web sayfası içerisindeki pozisyonu, Arka Plan Sesi ile web sayfası gösterilirken çalınması istenen müzik ve platform ile de bu sayfanın çalışacağı yapısal taban seçilebilmektedir. Burada bizler için önemli olan Konum bilgisi ile Orta frame sayfasının yeni_sayfa_4.htm olduğudur.

40. Çerçeveli Sayfalarda Sayfanın Açılacağı Çerçeveyi Ayarlamak • Çerçeveli sayfalarda köprü işlemi yapılırken açılacak sayfa için çerçeve belirtmek için “Köprü Düzenle” penceresindeki “Hedef Çerçeve” düğmesine basılarak “Hedef Çerçeve” penceresinden “Geçerli Çerçeve Sayfası” kısmından çerçeve seçilir.

41. Çerçeve (Frame) İşlemleri • Yan frame üzerinde Ana sayfa olarak tanımlanan linke yeni_sayfa_4.htm dosyasını atamak istersek yukarıda yer alan şekilde tanımlama yapılması gereklidir.

42. FORM OLUŞTURMA • Sık Kullanılan Form Türleri • Kişi Bilgileri Formu • İstek Formu • Teslim ve Fatura Bilgisi Olan Sipariş Formu • Görüş Formu • Konuk Defteri • Ziyaretçilerin Web Sitemizi Aramasına İzin Veren Arama Sorgu Formu • Site Ziyaretçilerine Kullanıcı Adını ve Parolasını Soran Oturum Açma Formu

43. FORM OLUŞTURMA • Form Eklediğinizde, Microsoft Frontpage bir Gönder ve bir Sıfırla düğmesi içeren, ana hattı kesikli çizgiyle belirlenmiş bir dikdörtgen alan ekler. • Bu dikdörtgen alanın içine metin ve netin kutuları, seçenek düğmeleri, onay kutuları, aşağı açılır kutular ve basma düğmeleri gibi form alanları ekleyebiliriz.

44. FORM OLUŞTURMA • Bu formu belli bilgileri toplamak için düzenleyeceğiz. Ad, Soyad, Adres, Telefon ve E-posta adreslerini içeren form oluşturalım. Form alanı içerisinde 5x2’lik bir tablo oluşturup bilgileri dolduralım.

45. FORM OLUŞTURMA • Metin kutularını eklemek için “Ekle/Form/Metin Kutusu” komutu verilir.

46. FORM OLUŞTURMA • Eklenen metin kutusunun adını değiştirmek için çift tıklama yapılır. • Adres için metin alanı eklenir.

47. Bilgileri E-posta Adresine Göndermek • Form sonuçlarını (site ziyaretçilerinin formumuza girdiği veriler) e-posta iletisiyle gönderebiliriz. Site ziyaretçisi bir form gönderdiğinde, belirttiğimiz e-posta adresine form sonuçlarını içeren bir ileti gönderilir. • Sayfa görünümünde formu sağ tıklayalım ve kısayol menüsünde “Form Özellikleri”ni tıklayalım. Sonra da “Gönder”i tıklayalım.

48. Bilgileri E-posta Adresine Göndermek • Sonuçların e-postayla gönderilirken bir de dosyaya kaydedilmesini istemiyorsak, “Dosya adı” kutusunu temizlemeliyiz. • “Seçenekler”i ve • “E-postayla Gönder” • sekmesini tıklatalım.

49. Web Bileşeni Ekleme • Kayan yazı, etkileşimli düğme, fotoğraf galerisi gibi bileşenlerin eklenmesini sağlayabilirsiniz.

50. Tema Ekleme • Temalar sayesinde sayfanızı daha göz alıcı bir şekilde tasarlayabilirsiniz.