13 DİNAMİK ÖĞELERLE ÇALIŞMA

Transkript

1 69 13 DİNAMİK ÖĞELERLE ÇALIŞMA Çoğu internet sitesinde sayfa solunda tüm linklerin (köprülerin) bulunduğu bir bölüm vardır. Ziyaretçi web tasarımcının sunduğu bu bölümlerdeki etkileşimli düğmeleri kullanarak sitenin tüm sayfalarını ziyaret edebilir 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çelim. 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. Bağlantı kısmında Gözat diyerek Bu düğme tıklandığında açılacak web sayfasına köprü oluşturun.

2 Özgün Yazı Tipi Rengi: Sayfa ilk açıldığında görünen yazı rengidir. 70 Vurgulanan Yazı Tipi Rengi: Fare üzerine geldiğinde yazının alacağı renktir. Bastırılmış Yazı Tipi Rengi: Fare ile düğme tıklandığında yazının alacağı renktir. 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. Resim sekmesinin yükseklik ve genişlik bölümünde düğmenin büyüklüğü belirlenir. Buradaki Oranları Koru bölüm seçilirse, genişliği değiştirilen bir düğmenin yüksekliği de aynı oranda değişecektir. Yine yüksekliği değişen bir düğmenin de genişliği otomatik olarak değişecektir. Genişlik ve yükseklik bölümünün hemen altında yer alan Vurgulu resim oluştur, Bastırılmış resim oluştur ve Düğme resimlerini önceden yükle uygulamaları yazı özelliklerinin düğme resimleri içinde geçerli olup olmayacağını ifade etmektedir. Düğmeyi JPEG resmi yap ve bu arka plan rengini kullan bölümü ile Düğmeyi GIF resmi yap ve saydam arka plan kullan bölümlerinde düğmemizin hangi resim formatında olmasını istiyorsak o seçeneği aktif hale getiriyoruz. GİF ve JPEG arasındaki fark aşağıda izah edilmiştir JPEG resminin özelliği resimleri diğer formatlara göre daha fazla sıkıştırmasıdır. GIF formatı ise resimleri JPEG (JPG) formatı kadar sıkıştırmasa da yinede resimleri sıkıştırır. GIF formatı JPG formatından ayıran özellikler ise saydam ve hareketli resimlerde kullanılabilmesidir. Uygulamada saydamlık özelliği arka planı beyaz renkli sayfalarda fark edilmez.

3 JPEG formatlı düğme resmi 71 Düğme resimlerinin JPG olmasından dolayı saydam olmayan bölüm Sayfa rengi (arkaplan rengi) Resimde de görüldüğü gibi saydam olmayan bölüm renkli sayfa üzerinde beyaz renkte kendisini göstermiştir GIF formatlı düğme resmi Düğme resimlerinin GIF olmasından dolayı saydam bölüm sayfa rengiyle bütünleşmiş durumda. Sayfa rengi (arkaplan rengi) Bu dokümanımızda GIF formatını seçerek düğmemizi sayfamıza yerleştiriyoruz. Sayfamızın rengini ise diğer sayfalarımızın rengi ile aynı olması için beyaz olarak tercih ettik. Bu düğmemizi kopyala/yapıştır yöntemi ile çoğaltıyoruz. Menü resminin üzerinde çift klikleyerek açılacak olan Etkileşimli Düğmeler penceresinin Metin bölümünden ismini değiştiriyoruz.

4 Kayan Yazı Ekleme İnternet sayfalarının çoğunda kullanılan kayan yazı, FrontPage tarafından sınırlı bir şekilde yapılmaktadır. Yazılar sadece sağa ya da sola kayabilmektedir. Aşağı ve yukarı kayan yazılar FrontPage tarafından desteklenmemektedir. 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2. Kayan yazı eklemek istediğiniz yeri tıklatın, metni yazın ve yazdığınız metni seçin. 3. Ekle menüsünde Web Bileşeni'ni tıklatın. 4. Bileşen türü altında Dinamik Efektler'i tıklatın. 5. Efekt seç altında Kayan yazı öğesini çift tıklatın. 6. Kayan yazı için istediğiniz özellikleri belirleyip Tamam'ı tıklatın. Özellikler: Yön bölümünde yazının sola mı yoksa sağa mı akacağı belirtilir. Hız bölümünde yazının hızını ayarlayabilirsiniz. Davranış bölümünde yazının nasıl kaydırılacağı ayarlanır. o Kaydır: Yazı kayarak ekrandan kaybolur hemen yerine aynı yazı tekrar kaymaya başlar. o Bir Noktaya Kaydır: Yazı kayarak son noktaya kadar gelir burada durur, yazı ekrandan kaybolmaz. o Sağa Sola Kaydır: Yazı kayarak son noktaya kadar gelir ve burada durur tekrar geriye kaymaya başlar. Yinele bölümünde yazının kaç defa kaydırılacağı belirtilir. Yazı sürekli kaydırılacaksa Devamlı bölümü seçilir. Arka plan rengi bölümünde ise yazının hangi renk üzerinde kayacağı belirtilir. Boyut bölümünde yazının genişliği ve yüksekliği ayarlanabilir. Bu efekt Frontpage in önizleme bölümünden ya da internet tarayıcıdan önizlenebilir. Frontpage in tasarlama bölümünden kayan yazı izlenemez. Kayan yazı üzerinde değişiklik yapmak istenirse, Kayan yazı üzerine çift tıklanarak Kayan Yazı Özellikleri penceresinden değişiklik yapılabilir. Kayan Yazı Özellikleri penceresinin sol alt tarafında bulunan Stil düğmesini kullanarak kayan yazının Yazı tipini, büyüklüğünü ve rengini değiştirebilirsiniz.

5 14 ÇERÇEVELER (FRAME) Çerçeveler hakkında Çerçeve sayfası, tarayıcıda görüntülendiğinde içinde çerçeveler olarak adlandırılan, birden çok bölge bulunan bir tür Web sayfasıdır. Bu çerçevelerin her biri farklı bir Web sayfasında görüntülenebilir. Çerçeve sayfasında görünür bir içerik yoktur. Bu, yalnızca diğer web sayfalarının çerçevede gösterileceğini ve nasıl görüntüleneceğini belirten bir kapsayıcıdır. Çerçeve sayfasını, Microsoft FrontPage'deki Web sitesi şablonlarındanbirini kullanarak oluşturabilirsiniz. Bu şablonların her birinde, çerçeveler arasında gezinti sizin için önceden kurulmuştur. Örneğin, Başlık ve İçindekiler çerçeve sayfası şablonu kullanılarak oluşturulan bir çerçeve sayfası, gerçekte tarayıcıda aynı anda dört sayfa göstermektedir: kapsayıcı çerçeve sayfası ve bu üç çerçevede gösterilen üç sayfa. Aşağıdaki örnekte, sol tarafta bulunan içindekiler çerçevesindeki bir köprüyü tıklattığınızda, bu köprüyle ulaşılan sayfa ana çerçeve içinde açılır. Çerçeve sayfası Başlık çerçevesi İçindekiler çerçevesi Ana çerçeve Çerçeveler sayfasını şablondan oluşturduktan sonra, yapmanız gereken her çerçevede görünmesini istediğiniz başlangıç sayfasınıayarlamanızdır. Varolan bir sayfayı seçebilir veya yeni bir sayfa oluşturabilirsiniz. Daha sonra sayfayı doğrudan çerçevesi içinde düzenleyebilirsiniz. Çerçeve sayfaları nasıl kullanılır? Başlık ve İçindekiler çerçeve sayfası şablonunu temel alan çerçeve sayfalarında, birçok şirket, logosunu ve temel bölümlerini göstermek için başlık çerçevesi kullanır. Çerçeve sayfaları genellikle kataloglar, madde veya bilgi listeleri veya çerçevedeki bir köprünün tıklatılmasıyla başka bir çerçevedeki sayfanın gösterildiği diğer sayfa türleri için kullanılır. Yazarlar çerçeve sayfalarını yerleşik gezinti özelliğini içerdikleri ve tutarlı bir kullanıcı arabirimi sundukları için kullanmaktadır.

6 74 Kullanıcı başlık çerçevesindeki bağlantıyı tıklatır İçindekiler çerçevesinde bir liste görünür; kullanıcı içindekiler çerçevesindeki bağlantıyı tıklatır Ana çerçevede bir sayfa görüntülenir Çerçevelerin görünümünü denetleme Herhangi bir çerçeve sayfasında, iki çerçeve oluşturmak üzere çerçeveyi yatay ve dikey olarak bölebilirsiniz. Çerçeveyi eşit olarak satır veya sütunlara bölebilir ya da her çerçevenin kenarlığını, belirli bir boyut belirlemek üzere sürükleyebilirsiniz. Çerçeve kenarlıklarını seçerek ve sürükleyerek çerçeveleri yeniden boyutlandırabilir ve silebilirsiniz. Çerçeveler arasındaki kenarlıkları göstermeyi veya gizlemeyi de seçebilirsiniz. Çerçeveyi bölme Çerçeveyi yeniden boyutlandırma Çerçeveyi silme Çerçeve kenarlıklarını gösterme veya gizleme

7 75 Ayrıca aşağıdakileri denetleyebilirsiniz: Çerçeveler arasındaki boşluk sayısı Çerçeve içindeki kenar boşluklarının boyutları Çerçevenin kullanıcı tarafından tarayıcıda yeniden boyutlandırılıp boyutlandırılamayacağı Çerçevede kaydırma çubuklarının gösterilip gösterilmeyeceği 14.2 Çerçeve Oluşturma Çerçeve sayfalarını site yapma sürecinin herhangi bir anında gerçekleştirmeniz mümkündür ama site içerik sayfalarınızı önceden tasarlamanız daha iyi olacaktır. 1. Dosya menüsünde Yeni'yi tıklatın. 2. Yeni görev bölmesindeyeni sayfa altında yer alan Ek sayfa şablonları seçeneğini tıklatın. 3. Çerçeve Sayfası sekmesini tıkatın. 4. Yerleşimin önizlemesini görüntülemek için bir şablon seçin ve Tamam'ı tıklatın.

8 76 Şekil 14-1 Her çerçevede gösterilecek olan başlangıç sayfasını belirlemek için istenilen çerçeve içinde yer alan Başlangıç Sayfası Ayarla veya yeni Sayfa komutları kullanılır. 5. Her çerçevede gösterilecek başlangıç sayfasınıbelirleyin. Bunu yapmak için 1. Başlangıç sayfasını ayarlamak istediğiniz çerçeveyi tıklatın. 2. Aşağıdakilerden birini yapın: a. Önceden oluşturulmuş sayfa seçme: Çerçeve içinde Başlangıç Sayfası Ayarla'yı tıklatın ve göstermek istediğiniz sayfayı seçin. b. Yeni sayfa oluşturma ve bunu ilgili çerçevede gösterilecek başlangıç sayfası olarak ayarlama Çerçeve içinde Yeni Sayfa'yı tıklatın. Microsoft FrontPage, çerçevede yeni bir sayfa oluşturur ve bu yeni sayfa otomatik olarak başlangıç sayfası olarak ayarlanır.

9 77 MS Frontpage 2003 Bu çerçeve sayfanızı kaydedin. İPUCU: Web sitenizi düzenlerken çerçeve sayfası ve çerçeve kullanıyorsanız, paylaşılan kenarlıklarkullanmamaya özen gösterin. Çerçevelerle birlikte paylaşılan kenarlıklar veya bağlantı çubukları kullanımı, Web sitenizde gezinmeyi güçleştirir Çerçeveleri birbirine bağlama Bir menü çerçevesinde yer alan bağlantılara tıklandığında bu bağlantının içeriğinin açılması için köprü eklememiz gerekir. Bunu yapmak için 1. Köprü olarak kullanmak istediğiniz metni seçin. 2. Standart araç çubuğunda, Köprü Ekle'yi tıklatın. 3. Bununla ilişkilendir altında Varolan Dosya veya Web Sayfası'nı tıklatın. 4. Hedef olarak kullanmak istediğiniz sayfayı seçin.

10 Hedef çerçeveyi değiştirme 1..Sayfa görünümünde, belge penceresinin altındaki Tasarım düğmesini tıklatın. 2. Köprü olarak kullandığınız metin veya resmi seçip Standart araç çubuğunda Köprü Ekle düğmesini tıklatın. 3. Köprü Ekle iletişim kutusunda Hedef Çerçeve 'yi tıklatın ve sonra aşağıdakilerden birini yapın: a. Geçerli çerçeve sayfanızın içindeki bir hedef çerçeveyi özellikle seçme: Hedef Çerçeve iletişim kutusunda, Geçerli çerçeve sayfası alanı çerçeve sayfanızın bir eşlemesini gösterir. Hedef çerçeve olarak belirlemek istediğiniz çerçeveyi tıklatın. b. Geçerli çerçeve sayfanız içinde bir hedef çerçeve seçme veya çerçeve sayfanızın dışında yeni bir pencere açma: Hedef Çerçeve iletişim kutusunda, Genel hedefler listesi size birçok hedef çerçeve seçeneği sunar. Bir hedef çerçeve seçmek için aşağıdaki seçeneklerden birini tıklatın: Sayfa Varsayılanı (yok) Köprü, yeni belgeyi, eylemin kaynaklandığı aynı tarayıcı penceresinde veya çerçevede açar. Aynı Çerçeve Köprü, yeni belgeyi, eylemin kaynaklandığı aynı tarayıcı penceresinde veya çerçevede açar. Hedef öznitelik _self olarak ayarlanır. Çerçeve tabanlı bir site kullanıyorsanız, _self değeri genel olarak atanmış veya varsayılan BASE öğe hedefini geçersiz kılar. Tüm Sayfa Köprü, yeni belgeyi, eylemin kaynaklandığı çerçevede açmak yerine belgenin tümünü değiştirerek tam pencerede açar. Hedef öznitelik _top olarak ayarlanır. Yeni Pencere Köprü her zaman yeni, boş bir pencerede açılır. Hedef öznitelik _blank olarak ayarlanır. Üst Çerçeve Köprü, geçerli belgenin FRAMESET üst öğesinde veya varsayılan çerçeve düzeninde açılır. Hedef öznitelik _parent olarak ayarlanır. Hiçbir üst öznitelik atanmazsa, _parent değeri _self özniteliği (veya Aynı Çerçeve seçeneği) ile aynı varsayılan davranışı sergiler ve eylemin kaynaklandığı pencerede açılır. 4. Hedef Çerçeve iletişim kutusunu kapatmak için Tamam'ı tıklatın. Köprü Ekle iletişim kutusunu kapatmak için bir kez daha Tamam'ı tıklatın Çerçeveleri Düzenleme 14.6 Çerçeve boyutlarını Ayarlama Çerçeveyi, kenarlıklarını sürükleyerek veya tam istediğiniz ayarı belirterek yeniden boyutlandırabilirsiniz. Yeniden boyutlandırmak istediğiniz çerçeveye ait sayfayı açın ve aşağıdakileri yapın: 1. Sayfa görünümünde, belge penceresinin altındaki Tasarım düğmesini tıklatın. 2. Çerçeve içinde sağ tıklatın ve kısayol menüsünde Çerçeve Özellikleri öğesini tıklatın. 3. Çerçeve boyutu alanında, Genişlik (veya Sütun genişliği) ve Yükseklik (veya Satır yüksekliği) ayarlarını belirleyin. Yeniden boyutlandırdığınız çerçeve bir başka çerçeveyle aynı satırdaysa, Yükseklik kutusu Satır Yüksekliği olarak değişir. Geçerli çerçevenin satır yüksekliğinin değiştirildiğinde bu satırdaki diğer tüm çerçevelerin satır yüksekliği de değişir.

11 79 Genişlik kutusu, çerçeve aynı efektlere sahip bir sütunun parçası olduğunda da Sütun Genişliği'ne dönüşür. 2. Çerçeve boyutunu sabit bir piksel sayısı olarak, tarayıcı penceresinin yüzdesi olarak veya aynı satır veya sütundaki diğer çerçevelerin göreli değerleri cinsinden boyutlandırılmış olarak belirleyin. Şekil 14-2 Çerçeve Özellikleri iletişim kutusu Çerçeve Boyutlarını ayarlamanıza imkân sağlar. Notlar Çerçeveyi çerçeve sayfasını düzenlerken yeniden boyutlandırdığınızda, bitişik çerçeveler boşluğu doldurmak üzere buna uygun olarak yeniden boyutlanırlar. Çerçeve sayfasındaki bir çerçeveyi yeniden boyutlandırmanın bu çerçevede gösterilen diğer sayfalar üzerinde etkisi yoktur; yalnızca bir kerede sayfanın ne kadarının gösterildiğini değiştirir. Çerçeve Özellikleri iletişim Kutusunu Çerçeve Menüsünden de açabilirsiniz Çerçevelerin görüntü özelliklerini ayarlama Microsoft FrontPage çerçeve özelliklerini kişisel gereksinimlerinize göre belirlemenize olanak veren bir esneklik sunar. Sayfa görünümünde, belge penceresinin altındaki Tasarım birini veya birkaçını yapın: düğmesini tıklatın ve aşağıdakilerden

12 Çerçevelerin etrafındaki kenarlıkları gösterme veya gizleme Sayfanızın nasıl görünmesini istediğinize bağlı olarak, çerçeve sayfanızın çerçeveleri etrafındaki kenarlıkları göstermeyi veya gizlemeyi seçebilirsiniz. 1. Çerçeve sayfasında herhangi bir yeri sağ tıklatın. 2. Kısayol menüsünde Çerçeve Özellikleri'ni tıklatın. 3. Seçenekler altında, Çerçeve Sayfası'nı tıklatın. 4. Kenarlıkları göster onay kutusunu seçin veya temizleyin. NOTLAR: Kenarlıkları göstermeyi veya gizlemeyi seçtiğinizde, bu ayar çerçeve sayfanızdaki tüm çerçevelere uygulanır. Kenarlıkları göster onay kutusu seçiliyse, kenarlıkların genişliği Çerçeve aralığı kutusundaki ayar tarafından belirlenir Çerçeveler arasındaki aralığı ayarlama Bitişik çerçevelerin dış kenarları arasındaki aralık miktarını belirleyebilirsiniz. 1. Çerçeve sayfasında herhangi bir yeri sağ tıklatın. 2. Kısayol menüsünde Çerçeve Özellikleri'ni tıklatın. 3. Seçenekler altında, Çerçeve Sayfası'nı tıklatın. 4. Çerçeve aralığı kutusuna aralık miktarını piksel cinsinden yazın. Web tarayıcılarının çoğunda varsayılan değer iki pikseldir. NOT: Kenarlıkları göster onay kutusu seçiliyse, kenarlıkların genişliği Çerçeve Aralığı kutusundaki ayar tarafından belirlenir

13 Çerçeve kenar boşluklarını ayarlama 81 Çerçeve kenarlığıyla çerçevenin içeriği arasındaki mesafeyi ayarlayabilirsiniz. 1. Çerçevede sağ tıklatın. 2. Kısayol menüsünde Çerçeve Özellikleri'ni tıklatın. 3. Kenar boşlukları altında, Genişlik ve Yükseklik ayarlarını belirleyin. NOT: Çerçevede gösterilen sayfanın da kenar boşlukları varsa, çerçevenin kendisi için belirlediğiniz kenar boşluğu boyutu var olan sayfanın kenar boşluğu boyutuna eklenir. Örneğin, önceden oluşturulmuş bir çerçevede kenar boşluğu üç olarak ayarlanmış bir sayfa kullanıyorsanız ve çerçevenizin kenar boşluklarını iki olarak ayarlarsanız, toplam çerçeve kenar boşluğunuz beştir Görünmez çerçeve oluşturma Sayfanızı, çerçeve kullanarak, ancak sayfanızda çerçeve yokmuş gibi görünecek şekilde tasarlayabilirsiniz. 1. Çerçevede sağ tıklatın. 2. Kısayol menüsünde Çerçeve Özellikleri'ni tıklatın. 3. Seçenekler altında, Çerçeve Sayfası'nı tıklatın. 4. Kenarlıkları göster onay kutusunu temizleyin. 5. Çerçeve aralığı değerini sıfır (0) olarak ayarlayın Çerçeve kaydırma çubuklarını gösterme veya gizleme Her bir çerçeveniz için kaydırma çubuklarını, içeriğe bağlı olarak gerektiğinde, hiçbir zaman veya her zaman göstermeyi seçebilirsiniz. 1. Çerçevede sağ tıklatın.

14 82 2. Kısayol menüsünde Çerçeve Özellikleri'ni tıklatın. 3. Seçenekler altındaki Kaydırma çubuklarını göster listesinde, Gerekirse, Hiçbir zaman veya Her zaman'ı tıklatın. Not Çerçevenin yüksekliği genişliğinden daha fazlaysa, kaydırma çubukları aşağı ve yukarı kaydırma yapacaktır. Çerçevenin genişliği yüksekliğinden daha fazlaysa, kaydırma çubukları sola ve sağa kaydırma yapacaktır Çerçeve bölme Değiştirmek istediğiniz çerçeve sayfasını açın ve aşağıdakileri yapın: Sayfa görünümünde, belge penceresinin altındaki Tasarım düğmesini tıklatın Kenarlığını sürükleyerek çerçeve bölme CTRL tuşunu basılı tutarak herhangi bir çerçeve kenarlığını sürükleyin. CTRL tuşuna basarken çerçeve kenarlığını sürükleyerek yeni bir çerçeve oluşturabilirsiniz. Çerçeveyi eşit iki sütuna veya satıra bölme 1. Bölmek istediğiniz çerçeveyi tıklatarak seçin. 2. Çerçeveler menüsünde Çerçeve Böl'ü tıklatın, ardından da uygun seçeneği belirleyin. Not Bir çerçeveyi böldüğünüzde, özgün içerik özgün çerçevede korunur ve yeni bir çerçeve oluşturulur Çerçeve Silme Çerçeve sayfasından çerçeve sildiğinizde, bu çerçevede gösterilen sayfa silinir, ancak çerçeve sayfasının geri kalan içeriği silinmez. Çerçeveden silinen sayfa bu çerçeveler sayfasından kaldırılır, ancak Web sitesi klasörlerinizde kalır. Çerçeve silindikten sonra, geri kalan çerçeveler kaldırdığınız çerçeveden arta kalan boşluğu doldurmak üzere genişler. 1. Sayfa görünümünde, belge penceresinin altındaki Tasarım düğmesini tıklatın. 2. Silmek istediğiniz çerçeveyi tıklatarak seçin. 3. Çerçeveler menüsünde Çerçeve Sil'i tıklatın.

15 Not Çerçeve sayfasında yalnızca bir çerçeve varsa, bu çerçeveyi silemezsiniz. Bu çerçevede gösterilen sayfa, sitenizin ziyaretçisi tarafından görüntülendiğinde tarayıcı penceresinin tamamını dolduracaktır WEB YAYINLAMAK Frontpage 2003 de hazırlanan web sitesi Dosya menüsünden Siteyi Yayımla komutu ile yayımlanır. (Web sitenizi hazırlamaya başlamadan önce yeni web sitesi oluşturmuş olmanız gerekir.) Uzak Web Sitesi Özellikleri penceresinden FTP (dosya transfer protokolü) komutu seçilerek sayfamızı yayınlayacağımız sitenin ftp adresi yazılır ve Tamam düğmesine basılır. Gerekiyorsa ad ve parola yazıldıktan uzaktaki siteye bağlantı sağlanır. Değişen tüm sayfaları yayımla bölümünden Yerelden uzağa seçeneği seçilir ve Web sitesi yayımla düğmesine tıklanarak site yayımlanır. Şekil 15-1 Uzak Web Sitesi Özellikleri