A-PDF Split DEMO : Purchase from to remove the watermark

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 3 Bağlantı Oluşturmak Benzersiz bir araç olan Web sitelerinin gücü, metinleri ve resimleri diğer belgelerle doğrusal ya da sıralı olmayan bağlantılar aracılığıyla bağlama becerilerinden ileri gelir. Web tarayıcısı, bağlantı olduklarını göstermek için bu bölgeleri vurgulayabilir (genellikle belirli bir renkle ya da altçizgiyle). HTML de bağlantılar iki parçadan oluşur: Kendisine bağlanılacak olan dosyanın adı ve yolu (ya da URL i - Uniform Resource Locator) ile tıklanabilir alan olarak görev yapan metin ya da resim. Kullanıcı bir bağlantıya tıkladığında Web tarayıcısı bağlı belgeyi yükler. Bazı Web tarayıcılarında imleç üzerine geldiğinde bağlantının yolu, tarayıcı penceresinin durum alanında (pencerenin sol alt köşesinde yer alır) görüntülenir. Bağlantılar kullanıcıları diğer HTML dosyalarına, resimlere ve diğer medya dosyalarına, indirilebilir dosyalara yönlendirebilir. Metin tabanlı bağlantılarla bu derste çalışmaya Bu derste, gezinti bağlantılarıyla birlikte tüm Yoga Sangha proje sitesine ait yer tutucuların yer aldığı işlevsel bir test sitesi oluşturacaksınız.

2 başlayacak ve sonraki derslerde ilerlemeye devam ederken öğrendiklerinizi diğer araçlara da uygulamaya devam edeceksiniz. Bu derste Yoga Sangha proje sitesinin sayfaları için yer tutucular hazırlayarak site yapısının ilk temelini oluşturacaksınız. Düzgün çalışan bir test sitesi yaratmak için bu sayfaları Dreamweaver ın görsel site eşleme araçlarını kullanarak birbirlerine bağlayacaksınız. Sitenin çıplak fakat işlevsel bir sürümü şeklinde sayfalar ve bağlantılar aracılığıyla böyle bir temel oluşturmak, geliştirdiğiniz gezinti sistemini test etmenizde işinizi kolaylaştırabilir. Site yapısını tasarımdan önce test etmek, temel sorunları geliştirme aşamasının başındayken görmenizde ve çok daha etkin bir şekilde çözmenizde size yardımcı olacaktır. Tamamlanmış sayfalara ait bir örnek görmek isterseniz Lesson_03_Links/Completed klasöründeki dosyaları inceleyebilirsiniz. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Bağlantıların farklı durumlarda alacakları renkleri belirleyeceksiniz. Metin içinde diğer belgelere giden bağlantılar oluşturacaksınız. Sayfanın farklı bölümlerine atlamayı sağlamak için yer imlerinden faydalanacaksınız. e-posta bağlantıları oluşturacaksınız. Yaklaşık Süre Bu dersin tamamlanması yaklaşık 2 saat sürecektir. Ders Dosyaları Başlangıç Dosyaları: Lesson_03_Links/index.html Lesson_03_Links/definitions.html Lesson_03_Links/sanskrit.html Tamamlanmış Proje: Lesson_03_Links/Completed/ (dosyaların tümü) 72 DERS 3

3 Bağlantı Rengini ve Biçimlendirme Özelliklerini Ayarlamak Sayfanızdaki metin tabanlı bağlantıların varsayılan rengini belirleyebilirsiniz. Belgedeki normal gövde metninden farklı bir bağlantı rengi seçtiğinizde kullanıcılar bağlantıları kolayca ayırt edebileceklerdir. Belgenizin varsayılan bağlantı özellikleri Page Properties iletişim kutusunda belirtilir. Eğer bağlantı renklerini belirlemezseniz, sayfa kullanıcının Web tarayıcısında görüntülendiğinde tarayıcının varsayılan ayarları kullanılacaktır. Bu varsayılan ayarlar tarayıcıdan tarayıcıya farklılık gösterebilir. Sitenizin görünümü üzerinde çalışmaya başladığınızda sitenin renk düzenini bir bütün olarak hesaba katmak en iyisi olacaktır. Sitenin tamamında kullanılacak stillere ve renklere karar verirken bağlantı renklerini değiştirerek bu renklerin sayfalarınızda kullanılan diğer renklerle uyumlu olmasını sağlayabilirsiniz. Bağlantıların kolayca okunabilmesi için, seçtiğiniz renklerin arka planla ve diğer elemanlarla kontrast oluşturması (ama uyumsuzluk yaratmaması) gerekir. Dreamweaver, sadece bağlantılara uygulanan renk, font ve punto özelliklerini ayarlamak için CSS (Cascading Style Sheets) kullanarak bağlantıların görünümünü kontrol edebilir. CSS bağlantı stilleri, sınıfımsı (pseudoclass) olarak bilinir. Bu, sadece belirli koşullarda uygulanan parametrelerle oluşturulan bir stil tipidir. CSS konusunu Ders 4 te göreceğiz. 1. Lesson_03_Links klasöründe yer alan index.html belgesini açın. Modify > Page Properties (Cmd+J/Ctrl+J) komutunu ve ardından Links kategorisini seçin. Bu uygulamada Link font seçeneğini varsayılan ayarında (Same as page font) bırakmanız gerekiyor. Bu ayardan dolayı sayfanızdaki bağlantılar bir sonraki derste belgeniz için ayarlayacağınız stillerin özelliklerini kullanır. Bir sonraki derste yapacağınız gibi bağlantı içeren bir metne bir CSS stili uygularken, bağlantı, varsayılan belge stilleri yerine bu stilin özelliklerini alır. Bağlantı Oluşturmak 73

4 Bağlantılar farklı durumlara sahiptir. Örneğin tıklanan ve tıklanmayan bağlantıların durumu farklıdır. Bir bağlantının her durumu için ayrı görünüm nitelikleri kullanabilirsiniz. Kullanıcının davranışına göre değişen dört farklı bağlantı durumu için renk tanımlayabilirsiniz. Link Color: Bağlantının, üzerine tıklanmadan önceki yani başlangıçtaki rengidir. Bağlantılar için kullanılan standart Web tarayıcısı rengi mavidir. Visited Links: Kullanıcı bir bağlantıya tıkladığında bağlantının aldığı renktir. Tıklanmış bir bağlantı için kullanılan standart Web tarayıcısı rengi mordur. Rollover Links: Kullanıcı imleci bir bağlantının üzerinde bir süre tuttuğunda bağlantının aldığı renktir. Bu, bir öğenin tıklanabilir olduğunu gösteren ikinci bir işaret olarak tanımlanabilir. Bu seçenek boş bırakılırsa rollover kullanılmaz. Active Links: İmleç üzerindeyken farenin düğmesine basıldığında bağlantının aldığı renktir. Etkin bağlantılardan, ziyaretçiye ilgili bağlantıya tıklandığını gösteren etkileşimli bir işaret olarak faydalanılabilir. Bununla birlikte, kullanıcıların Internet erişiminin hızlanmasıyla etkin bağlantıların eskisi kadar rağbet görmediğini hatırlatmak isterim. Bu seçenek boş bırakılırsa etkinlik durumunu göstermek için bir etkin renk kullanılmaz. CSS bağlantı stilleri, kendisine uygulanabilen farklı durumlara ait belirli niteliklerle link (bağlantı) etiketini (<a>) kontrol eder. <a> etiketinin farklı durumları, kullanıcı belirli bir işlem gerçekleştirdiğinde etkinleşir (bağlantıya tıklamak gibi). Durumlar şu CSS seçicileriyle tanımlanır: bağlantı rengi a:link ile, tıklanan bağlantılar a:visited ile; imlecin üzerinde tutulduğu bağlantıları a: hover ile ve etkin bağlantılar a:active ile. 2. Renk kutularının yanındaki metin kutularını kullanarak bağlantılarınızda kullanacağınız renk seçeneklerini şu şekilde ayarlayın: Link Color için #FF3300, Rollover Links için #FF9900, Visited Links için # ve Active Links için #FFCC DERS 3

5 Kullanmak istediğiniz renklerin onaltılık tabanlı değerlerini (Web de renkleri temsil etmek için kullanılan kodlar) biliyorsanız bağlantı renklerine ait metin alanlarına bu değerleri doğrudan girebilirsiniz. Bu işlemi yaptığınızda Dreamweaver renk kutusuna ilgili değere karşılık gelen rengi otomatik olarak ekleyecektir. Ayrıca, metin alanının sol tarafındaki renk kutusuna tıklayarak çeşitli renk numunelerini içeren bir paleti açabilirsiniz. Paletten bir renk numunesi seçtiğinizde Dreamweaver metin alanına, karşılık gelen onaltılık tabanlı değeri otomatik olarak yazacaktır. Bu değer, siz imleci renk numunelerinin üzerine getirdiğinizde paletin üst tarafında görüntülenir. Renk paletini kullanırken fare imleci bir renk seçicisine dönüşür. Bu aracı kullanarak ekranda görünen renklerden istediğiniz birini ilgili alanın üstüne gelip tıklayarak seçebilirsiniz. Bu yöntem, diğer belgelerdeki, resimlerdeki ve araçlardaki mevcut renkleri kolayca eşleştirmenizi sağlar. Daha fazla renk görmek isterseniz, açılır renk penceresinin sağ üst köşesindeki oka tıklayın ve açılan menüden başka bir renk paleti seçin. Diğer paletlerin platformlar arası uyumlu, Web uyumlu renklerle sınırlı olmadığını unutmayın. Web uyumlu renkler, hem Macintosh, hem de Windows işletim sistemlerinde aynı olan ve 216 renkten oluşan bir renk grubudur. Bu paletteki renk seçenekleri ciddi ölçüde sınırlı olsa da Web uyumlu renkler kullanmak, 256 renk kullanan sistemlere sahip kullanıcıların (günümüzde birçok insan milyonlarca renk görüntüleyebilen ekran kartlarına sahip olduğu için artık bu çok sık karşılaşılan bir durum değildir) sayfalarınızı sizin istediğiniz renklerde görmesini sağlar. PDA gibi alternatif Web erişim araçları hâlâ sınırlı sayıda renk kullanmaktadır, dolayısıyla bu tür cihazlarla erişilmesi düşünülen siteler geliştirirken Web uyumlu renkleri kullanmak isteyebilirsiniz. Bu, Ders 1 de öğrendiğiniz gibi sitenizin ziyaretçileriyle ilgili araştırma yapmanın ve bu ziyaretçilerin büyük bir kısmı tarafından en çok kullanılan sistemleri ve konfigürasyonları belirlemenin neden önemli olduğunu gösteren bir örnektir. Bağlantı Oluşturmak 75

6 Onaltılık Tabanlı Renk Kodları HTML de renkler RGB (Red/Green/Blue Kırmızı/Yeşil/Mavi) kullanılarak onaltılık kodlarla tanımlanır. Onaltılık sistemde rakamlar (0-9) ve harfler (A-F) kullanılır. HTML de renkleri tanımlamak için kullanılan altı basamaklı kodda ilk iki basamak kırmızıyı, ikinci iki basamak yeşili ve son iki basamak da maviyi temsil eder. Örneğin #00FF00 ifadesiyle gösterilen renkte kırmızı ve mavi yoktur ve parlak bir yeşil kullanılmıştır. # ifadesiyle gösterilen renkte ise ne kırmızı, ne yeşil, ne de mavi kullanılmıştır. Bu, siyah rengi gösterir. Bunun tersine, #FFFFFF ifadesi de kırmızı, yeşil ve mavinin maksimum derecelerini gösterir ve bunlar birleştiğinde ekranınızda beyaz rengi oluşturur. Bilgisayar ekranlarının sizin gördüğünüz renkleri oluşturmak için ışıktan faydalandığını hatırlayın. Işığın renk özellikleri (eklenen renk sistemine dayanır ve bu sistemde tüm renkler birleşerek beyazı oluşturur), basılı medyada (çıkarılan renk sistemine dayanır ve bu sistemde tüm renkler birleşerek siyahı oluşturur) kullanılan pigmentlerin özelliklerinden çok farklıdır. Diyez işareti (#), kendisini takip eden ifadenin bir renk ismi (siyah, beyaz, kırmızı, vs. gibi) değil, onaltılık tabanlı bir değer olduğunu gösterir. Her ne kadar Dreamweaver değerleri diyez işareti olmadan da kabul etse bile, siz yine de bu işareti kullanın. Bir renk numunesini seçmek için renk kutusunu kullandığınızda diyez işaretinin de göründüğüne dikkat edin. Bağlantılarınız için renk seçerken standart bağlantı renklerinin (bu uygulamanın ilk adımında her bağlantı için liste halinde verilmişti) dışına pek çıkmayın. Örneğin standart bağlantı (henüz tıklanmamış bağlantı) rengi olarak, daha önce tıklanmış olan bağlantılar için kullanılana benzer bir mor renk kullanırsanız ziyaretçilerinizin kafası karışabilir. Sitenizi tasarlarken standart haline gelmiş Internet alışkanlıklarınızı kullanmanız ve ziyaretçilerinizin beklentilerini dikkate almanız çok önemlidir. Page Properties iletişim kutusunun Link bölümündeki son seçenek Underline Style dır. Bu seçeneği, sayfanızda kullanacağınız altçizgi stilini tanımlamak için kullanırsınız. Buradaki uygulamada varsayılan ayar olan Always Underline ı (Her zaman altını çiz) değiştirmeyin. Bu menüdeki diğer seçenekler Never Underline (Asla altını çizme), Show Underline Only On Rollover (Altçizgiyi sadece rollover durumunda göster) ve Hide Underline On Rollover (Rollover durumunda altçizgiyi gizle). Bütün bağlantılarda görünen varsayılan alt çizgiyi kaldırmak isterseniz Never Underline seçeneğini kullanabilirsiniz. Ama Web sitesi oluştururken ziyaretçilerinizin beklentilerini de her zaman dikkate alın. Pek çok kullanıcı, bağlantıların altçizgiyle gösteriliş şekline alışıktır. Alt çizgileri kaldırırsanız kullanıcılarınız bağlantıları atlayarak ilgili bilgilerden mahrum kalabilir. Bunun tersi olarak metninizdeki diğer sözcüklerin altını çizerseniz, bu kez de kullanıcılar bunların bağlantı olduğunu düşünerek üzerlerine tıklamaya çalışabilir. 76 DERS 3

7 3. OK düğmesine tıklayarak Page Properties iletişim kutusunu kapatın ve ardından index.html dosyasını kaydedin. Artık sayfanızdaki bağlantılar için varsayılan olarak sizin tanımlanmış olduğunuz renkler kullanılacaktır. Bir sonraki uygulamada bağlantıları oluşturmaya başladığınızda bu renklerin kullanıldığını göreceksiniz. Sonraki uygulamalarda çalışmak için index.html belgesini açık bırakın. Hipermetin Bağlantıları Oluşturmak Hipermetin bağlantıları (hypertext links) ziyaretçileri Web sitenizin içindeki belgelere ya da Internet teki başka sayfalara yönlendirmenizi sağlar. Aynı site içindeki diğer belgelere ya da sayfalara giden bağlantılara göreceli bağlantılar (relative links) denir. Göreceli bağlantıları tek bir sitenin klasör yapısı içinde farklı konumlarda yer alan pek çok farklı dosyaya atayabilirsiniz. Bu tür bağlantıları oluşturmak için birçok farklı yöntemden faydalanabilirsiniz. Aşağıdaki uygulamada bu yöntemleri göreceksiniz. Herhangi bir bağlantı oluşturmadan önce yeni belgeleri kaydetmek önemlidir. Böylece Dreamweaver a belgenizin nerede olduğunu bildirerek bağlantı yollarını belirlemesini sağlarsınız. Dreamweaver ın bağlı dosyanın bağlantıyı yerleştirdiğiniz dosyaya göre olan konumunu belirlemesi gerekir. Belgenizi ilk kez kaydetmeden önce bir bağlantı oluşturmaya çalışırsanız bu bağlantıya ait yol file:// ifadesiyle bağlanacak ve uzak sitelerde kullanılamayacaktır, çünkü bunlar sabit diskinize göre tanımlanmıştır, bağlantının bulunduğu dosyaya göre değil. Siz belgelerinizi kaydettiğinizde Dreamweaver bağlantıları otomatik olarak günceller. Ama sorunlu yolların ortaya çıkma ihtimalini ortadan kaldırmak en iyisidir. 1. index.html belgesinde Yoga is a 4,000 year-old satırının başındaki Yoga sözcüğünü seçin. Bu satır, belgenin başındaki Welcome to Yoga Sangha kısmında yer almaktadır. Bu terimde farklı yoga stillerinin tanımlarının yer aldığı sayfaya giden bir bağlantı oluşturacaksınız. Bu dersteki başlangıç dosyaları, önceki derslerde üzerinde çalıştığınız dosyaların birer kopyasıdır. Size kolaylık sağlaması için bu dosyaların tamamlanmış hallerini burada verdik. Bu dosyalar, kitapta şu ana kadar öğrendiğiniz teknikler kullanılarak oluşturulmuştur. Bağlantı Oluşturmak 77

8 Site oluştururken bağlantıları göstermek için kullanacağınız ifadeleri seçerken dikkatli olun. Buraya Tıklayın ifadesini kullanmaktan kaçının. Çünkü bu belirsiz bir ifadedir ve gezintiyle ilgili zorluklar da dahil olmak üzere çeşitli sorunlara yol açabilir. Örneğin görme engelli ziyaretçiler (özellikle de sesli Web tarayıcısı kullananlar) Buraya Tıklayın ifadesini kullanan birden fazla bağlantıyı birbirinden ayırt edemeyebilir ve bunun sonucunda sitenizde gezinirken ciddi anlamda zorlanabilirler. Ayrıca, sayfalarınıza ilgilerini çekecek bir bağlantı var mı diye göz atan ziyaretçiler genellikle bağlantıları gösteren alt çizgilere dikkat ederler. Güzel bir açıklama yerine Buraya Tıklayın ifadesini kullanmak durumu zorlaştırır. Bağlantı içeren ifadeler yazarken her zaman konuyu açıklayıcı ifadeler kullanmaya dikkat edin. Örneğin ziyaretçileri farklı yoga stilleri hakkında bilgi edinebilecekleri bir belgeye yönlendirirken bağlantının Yoga stilleri sözcüklerine atandığı Farklı Yoga stilleri ile ilgili ayrıntılar gibi bir ifadede asıl bağlantı gerçekten açıklayıcı ve bilgilendiricidir. Bu ifade, bağlantının buraya tıklayın sözcüklerine atandığı Farklı Yoga stilleri ile ilgili ayrıntılı bilgi için buraya tıklayın gibi bir ifadeye göre daha mantıklı bir seçim olabilir. 2. Properties denetçisinde Link metin alanının sağında yer alan Browse For File düğmesine tıklayın. Link metin alanı Browse For File düğmesi Select File iletişim kutusu açılacaktır. 3. Lesson_03_Links klasöründeki definitions.html dosyasını seçin ve Choose (Macintosh ta) ya da OK (Windows ta) düğmesine tıklayın. Link metin alanında definitions.html dosya adı belirecek ve index.html belgesinde seçtiğiniz sözcük bir bağlantı olarak işaretlenecektir. Bağlantı altı çizili olarak ve bu dersin ilk uygulamasında bağlantılar için seçtiğiniz renkte görünecektir. İstediğiniz bir bağlantı için sayfanın varsayılan bağlantı rengini kolayca değiştirebilirsiniz. Bunun için bağlantı metnini seçmeniz ve Properties denetçisinden başka bir renk seçmeniz yeterlidir. Dreamweaver bu renk için otomatik olarak yeni bir CSS stili oluşturacaktır. Dreamweaver ın bu yöntemle oluşturduğu CSS stili bir dâhili stildir. Bu konuyla ilgili ayrıntıları Ders 4 te göreceğiz. 78 DERS 3

9 Bu bağlantı, belgeye bağlı yollara bir örnektir. Çoğu Web sitesinde yerel bağlantılar için kullanılabilecek en iyi seçenektir ve bütün kitap boyunca da bu seçenek kullanılmıştır. Belgeye bağlı yol (document-relative path), mutlak URL in geçerli belge ve bağlı belgede aynı olan kısmını göz ardı ederek sadece yolun farklı kısmını alır. Mutlak URL, bir site ya da kaynağın tüm Web adresini gösteren bir URL dir ( gibi). Bağlı belgeyi gösteren yol, başlangıç noktası olarak bağlantının bulunduğu belgenin konumu temel alınarak belirlenir. Örneğin aynı klasördeki bir dosyaya ait yol dosyanın_adı.htm şeklinde ifade edilir. Bir alt klasörde yer alan bir dosyaya ait yol da klasörün_adı/dosyanın_adı.htm şeklinde verilir. Diğer yandan site kök klasörüne bağlı yol (site root-relative path), başlangıç noktası olarak sitenin kök klasörü temel alınarak belirlenir ve geçerli belgenin bulunduğu konum temel alınmaz. Bağlı belge, site yapısı içindeki konumuna göre tanımlanır. 4. Feature: The Eight Limbs of Yoga kısmında, imleci numaralı listedeki 8 numaralı öğenin bulunduğu satırın sonuna yerleştirin. Return (Macintosh ta) ya da Enter (Windows ta) tuşuna iki kez basın ve See the Sanskrit text for the Eight Limbs yazın. 1 den 3 e kadar olan adımları tekrarlayarak Sanskrit sözcüğünü Lesson_03_ Links klasöründeki sanskrit.html dosyasına bağlayın. Ders 2 de öğrendiğiniz gibi, bir listeden çıkmak için Return ya da Enter tuşuna iki kez basmak gerekir. Tek bir paragraf sonu kullandığınızda listede yeni bir öğe yaratmış olursunuz. Bağlantı atamak istediğiniz dosyaların isimlerini ve konumlarını biliyorsanız, dosyaları bulmaya çalışmak yerine isimlerini doğrudan Link metin kutusuna yazabilirsiniz. Bununla birlikte, bağlantıları oluşturma işlemini Dreamweaver a bıraktığınızda da yazım hatası yapma ihtimalini de azaltmış olursunuz. Aynı Dreamweaver oturumunda (yani Dreamweaver ı açtıktan sonra programdan çıkana kadar geçen sürede) aynı bağlantıları birden fazla yerde kullanmanız gerekiyorsa, Properties denetçisindeki Link metin alanının sağında yer alan açılır menüden en son kullanılan bağlantılar arasından seçim yaparak zaman kazanabilirsiniz. Bir bağlantının hedefini düzenlemek gayet basit bir işlemdir. Bunun için mevcut bir bağlantının içinde herhangi bir yere tıklayın ve Properties denetçisindeki Link metin alanında yer alan değerde gereken değişiklikleri yapın (metin alanındaki yolu değiştirerek veya Browse for File simgesine tıklayarak). Bağlantının tamamını seçmek zorunda değilsiniz, çünkü Dreamweaver bağlantıların iç içe yerleştirilmesine otomatik olarak engel olur (yani bir bağlantı diğer bir bağlantının içine yerleştirilemez). Bağlantı uygulamak için seçtiğiniz metin, onu çevreleyen ya da içeren HTML etiketleri ile tanımlanır. Bu yüzden, bağlantıda yaptığınız her değişiklik otomatik olarak bağlantının içinde yer alan tüm metne (tüm bağlantı tiplerini gösteren <a> etiketinin açılış ve kapanış bölümleri arasındaki metin) uygulanır. HTML etiketleriyle ilgili ayrıntılı bilgi için Ders 16 ya bakınız. Bağlantı Oluşturmak 79

10 5. Belgenin en alt kısmında yer alan metnini seçin. Properties denetçisindeki Link metin alanına yazın ve bağlantıyı uygulamak için Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Böylece, kullanıcıları proje sitesi dışında bir siteye yönlendiren bir mutlak bağlantı oluşturdunuz. 6. index.html dosyasını kaydedin ve Web tarayıcısında önizleyin. index.html dosyasını kapatın. Yeni oluşturduğunuz bu üç bağlantı, üzerlerine tıkladığınızda sizi kendilerine karşılık gelen sayfalara götürecektir. Doğru konumlara gittiklerinden emin olmak için oluşturduğunuz bütün bağlantıları mutlaka test edin. Eğer açılırsa Başlangıç Sayfası nı kapatabilirsiniz. Ders 1 de tanımladığınız asıl (birincil) Web tarayıcısında bir pencere açmak üzere F12 tuşuna basarak belgenizi Web tarayıcısında önizleyebilirsiniz. Eğer fonksiyon tuşlarınız sistem işlemleri için ayarlandıysa, bir değiştirici tuş (modifier key) kullanmanız gerekebilir. Bağlantılar ve Dosya Yapısı Oluşturduğunuz bağlantılar, sitenizin dosya ve klasör yapısına bağlıdır. Bağlantı oluştururken yolların nasıl çalıştığını anlamak önemlidir. Aşağıdaki şekilde bir site yapısı örneği görüyorsunuz. Geçerli belgenin bulunduğu klasörün dışında yer alan bir belgeye giden bir bağlantı oluşturduğunuzda bağlantının yolunda (dosya adının önünde)../ karakter grubunun 80 DERS 3

11 kullanıldığına dikkat edin.../ karakter grubu aslında Web tarayıcısına geçerli konumun bir üstündeki klasör düzeyine gitmesi gerektiğini söyleyen bir komuttur.../ karakter grubunun her örneği bir üstteki klasör düzeyine gitmek gerektiğini gösterir. Geçerli dizinin iki klasör düzeyi üstünde yer alan bir belgeye ait bağlantıda../../dosyaadı.html şeklinde bir ifade kullanılabilir. Meselâ bir önceki örnekte books.html sayfasından about.html sayfasına giden bir bağlantının yolu../../about.html şeklinde olur. Dreamweaver da bağlantıları doğrudan Link metin alanına yazarak eklemiyorsanız../ karakter grubunu kullanmanız gerekmez. Doğru yolu tam olarak bilmiyorsanız istenen dosyayı seçmek için dosya yapısına göz atmanız gerekir. Dreamweaver uygun yolu sizin yerinize belirleyecektir. Önceki örnek site yapısında birden fazla index.html dosyasın olduğuna dikkat edin. index, pek çok sunucuda varsayılan dosya ya da klasör için kullanılan standart isimdir. Bu varsayılan dosyaların URL de belirtilmesi gerekmez. Herhangi bir dosya belirtilmediğinde ziyaretçi otomatik olarak ilgili klasörün varsayılan dosyasına gönderilir. Önceki örnekte kullanıcı gardens klasöründeki index sayfasına erişmek için alan adını ve ardından /gardens ifadesini yazabilir. En sık kullanılan index.html dışında, varsayılan dosyalar için yaygın olarak kullanılan diğer isimler arasında default.html ve home.html i sayabiliriz. Pek çok uzantı tipi kullanılabilir. Ama sunucunuzun.html ya da.htm dışındaki uzantılara sahip index dosyalarını tanıyacak şekilde yapılandırılması gerekebilir. Nasıl yapılandırıldığını görmek için sunucunuzu ya da host unuzu kontrol edin. Geçerli belgeyle aynı klasörde bulunan bir belgeye ait bir bağlantı oluştururken bu bağlantının yolu, söz konusu bağlı belgenin ismi olacaktır. Geçerli belgenin bulunduğu klasörün içinde başka bir klasörde yer alan bir belge için bağlantı oluştururken bu bağlantının yolunda (dosya adının önünde) klasöradı/ ifadesi kullanılır. klasöradı/ ifadesi, Web tarayıcısına belirtilen klasörün içine bakması gerektiğini ve bu klasörün de geçerli dizinin içinde yer aldığını bildirir. Sitenizi geliştirirken belirli dosyaları ya da klasörleri bütünüyle farklı konumlara taşımayı gerekli görebilirsiniz. Önceki örnek dosya yapısını kullanacak olursak, containers.html belgesini indoors klasörüne taşıdığınızı farz edelim. containers.html belgesinde yer alan bütün bağlantılar veya diğer yolların ve diğer dosyalardan bu belgeye giden bütün bağlantıların güncellenmesi gerekir. Şayet bu yollar güncellenmezse, yollar geçersiz hale gelir ve bağlantılarla resimler düzgün çalışmaz. Siz dosyaları taşırken Dreamweaver sitenizdeki bütün bağlantıların, resimlerin ve diğer araçların yollarını otomatik olarak günceller. Ama bunun için bütün değişiklikleri Dreamweaver ın Files panelinde yapmanız gerekir. Herhangi bir değişikliği Dreamweaver ın dışında (Mac OS X teki Finder da ya da Windows Explorer da) yaparsanız Dreamweaver dosyalarınızı izleyemez ve devamlılıklarını sağlayamaz. Macintosh kullanıcıları, klasörlerin sabit diskten dosyaya kadar uzanan hiyerarşisini görmek için Command tuşunu basılı tutup belgenin başlık çubuğundaki dosya adına tıklayabilir. Bağlantı Oluşturmak 81

12 Bir Siteye Yeni Klasörler ve Dosyalar Eklemek Yoga Sangha proje sitesinde bağlantılı yer tutucu sayfalar geliştirme yöntemiyle site yapısının başlangıçtaki temelini oluşturmak için bir dizi yeni sayfa ve klasör oluşturmanız gerekecektir. Bu işlemi, bir sitenin dosya ve klasör yapısını oluşturmanızı sağlayan Files panelini kullanarak hızlı ve kolay bir şekilde yapabilirsiniz. Yer tutucu olarak görev yapan sayfaları hemen oluşturabilir ve bunlara daha sonra içerik ekleyebilirsiniz. 1. Files panelindeki Files paneli araç çubuğunda bulunan Expand düğmesine tıklayın. Eğer panellerin arasında Files panelini göremiyorsanız, Window > Files komutunu seçmeniz gerekebilir. Expand düğmesi Yerel ve uzak siteleri görüntülemek için Expand düğmesine tıklayın. Expand düğmesi, araç çubuğunun sağ tarafında, dosya listesinin üstünde yer almaktadır. Files panelindeki diğer seçenekleri Ders 14 te göreceğiz. 2. Files paneli genişledikten sonra Show menüsünde Yoga Sangha nın seçildiğinden emin olun. Ok (Macintosh ta) ya da artı simgesine (Windows ta) tıklayarak Local Files sütununda gösterilen Lesson_03_Links klasörünü açın. 82 DERS 3

13 Show menüsü eğer bir sitenin içindeyseniz sadece Windows ta görünür. Eğer sadece bir sürücü adı (F: gibi) görüyorsanız sadece Manage Sites bağlantısı görüntüleniyor demektir. Local Files sütunu, genişletilen Files panelinin sağ tarafında yer alır. Panelin sol tarafındaki Remote Site sütununda herhangi bir dosya yoktur, çünkü henüz bir uzak site tanımlamadınız. Bu işlemle ilgili ayrıntıları Ders 14 te göreceğiz. Dosyaların görüntülendiği boşluğun miktarını genişletilmiş durumdaki Files panelinin iki yanını ayıran çubuğu taşıyarak ayarlayabilirsiniz. 3. Lesson_03_Links klasörüne sağ tıklayın (Windows ta) ya da Control tuşunu basılı tutarak tıklayın (Macintosh ta). Files panelinde biraz daha yer kazanmak amacıyla açık durumdaki diğer ders klasörlerini küçültmek isteyebilirsiniz. Böylece sitenin içeriğini daha rahat gözden geçirebilirsiniz. Bağlantı Oluşturmak 83

14 Çeşitli seçenekler içeren bir bağlam menüsü açılacaktır. Bu menüde sunulan seçenekler, seçilen öğeye bağlı olarak farklılık gösterir. Bağlam menüsü, Dreamweaver ın işlevlerine erişmek için kullanabileceğiniz hızlı bir yöntemdir ve böylece üretim sürecini de hızlandırabilirsiniz. 4. Bağlam menüsünden New Folder komutunu seçin. Lesson_03_Links klasörünün içine başlıksız yeni bir klasör eklenecektir. Bu klasörü yeni oluşturduğunuz için ismi vurgulu olarak ve metin alanının çevresinde kalınca bir çizgiyle görüntülenecektir. Bu işaretler klasörü adlandırabileceğinizi gösterir. 84 DERS 3

15 5. Yeni klasörü adlandırmak için about yazın ve Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Yeni klasörün üzerinde burada atadığınız ismin görüntülendiğine dikkat edin. Files panelinde başka bir yere tıkladığınızda ismin seçimi kaldırılacaktır. Eğer böyle bir durumla karşılaşırsanız ve klasörü yeniden adlandırmanız gerekiyorsa, klasörün adına tıklamanız, biraz bekleyip tekrar tıklamanız gerekir. Başlığı seçerek düzenleyebilirsiniz. Bu durumda çift tıklamayın, yoksa klasörü açarsınız. 6. Files panelinde, Lesson_03_Links klasöründe yeni oluşturduğunuz about klasörüne sağ tıklayın (Windows ta) ya da Control tuşunu basılı tutarak tıklayın (Macintosh ta). Burada, bir sonraki adımda içinde bir dosya oluşturacağınız klasöre tıklıyorsunuz. Bağlam menüsü açılacaktır. Bağlantı Oluşturmak 85

16 Eğer istemeden yanlış klasörde bir dosya oluşturduysanız, bağlam menüsünü kullanarak ve Edit > Delete komutunu seçerek bu dosyayı silebilirsiniz. Windows kullanıcıları ayrıca bağlam menüsü dışında Files panelinin üst kısmındaki menüleri de kullanabilir. 7. Bağlam menüsünden New File komutunu seçin. about klasörünün içinde isimsiz yeni bir belge oluşturulacaktır. İsim alanı vurgulu olarak görüntülenecektir. Bu, söz konusu belge için bir isim girmeniz gerektiğini gösterir. 8. Yeni dosyayı studio.html olarak adlandırın. Files panelinde yeni klasörler oluşturduğunuzda, içlerinde dosya olmadığı sürece bu klasörler açılmayacaktır. Dosyayı adlandırmadan önce klasörü açmanız gerekebilir. Dosya adı değişikliğini uygulamak için Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Dosya adındaki.html uzantısının kalması gerektiğini unutmayın. Web tarayıcılarının tanıyabilmesi için, bir sitede oluşturduğunuz tüm dosyaların kendi belge tiplerine uygun dosya uzantısına sahip olmaları gerekir. 86 DERS 3

17 Eğer dosya adlarınız Local Files sütunu için çok uzunsa, kesilmiş gibi görünebilirler. Bunun sebebi, Files panelinde kısıtlı bir görüntüleme alanının kullanılmasıdır. İmleci dosya adının üzerinde tutup adın tamamının görünmesini bekleyerek ya da sütunların konumunu ayarlayarak dosyanın tam adını görebilirsiniz. Sütunların konumunu ayarlamak için sütun başlıklarını ayıran düşey çizgileri üzerlerine tıklayıp sürükleyin dan 8 e kadar olan adımlar tekrarlayarak about klasörüne şu dosyaları ekleyin: contact.html, newsletter.html, news.html, location.html, anusara.html ve index. html. Şu anda about klasöründe yedi tane XHTML dosyası olması gerekir. XHTML dosyalarının hâlâ.html uzantısını kullandığını hatırlayın. Bu derste daha önce öğrendiğiniz gibi, her klasörün kendi index.html dosyası olabilir. Bir index.html dosyası kullanmak, ziyaretçilerin sadece gibi bir klasör adı girmeleri durumunda bile index.html dosyasının görüntülenmesini sağlar. Bir dizinin varsayılan belgesi için en çok kullanılan isim index.html dir. Bununla birlikte, kullandığınız Web sunucusuna bağlı olarak bunun için başka pek çok farklı isim kullanmak da mümkündür (default.html, index.cfm, index.jsp ya da index.asp gibi) ten 8 e kadar olan adımları tekrarlayarak aşağıdaki klasörleri ve yine aşağıda belirtilen ve bu klasörlerin içinde yer alması gereken dosyaları oluşturun. Klasörün adı schedule teachers community training explorations Dosyalar faq.html, events.html, download-schedule.html, index.html jayne.html, katchie.html, sierra.html, index.html outreach.html, mission.html, green.html, forums.html, index.html anusara-training.html, instructors.html, training-schedule. html, application.html, resources.html, login.html, index.html philosophy.html, sequences.html, meditations.html, media. html, educational.html, index.html Bağlantı Oluşturmak 87

18 Yoga Sangha projesindeki her sayfa için yer tutucu oluşturma işlemini tamamladınız ve artık bunları birbirine bağlamaya hazırsınız. Files panelindeki klasörler ve dosyalar aşağıdaki örnekteki gibi görünecektir. 88 DERS 3

19 Bir Site Haritası Oluşturmak Site haritası (site map), sitenizin seçilen belirli bir kısmının görsel bir temsilini sunar. Sitenizdeki tüm sayfaları göstermez; ana sayfa (home page) olarak tanımlanan sayfayla başlar ve bu ana sayfanın bağlı olduğu tüm sayfaları gösterir. Bağlantı hiyerarşisinde aşağıya doğru inerek bağlantısı olmayan bir sayfaya ulaşana kadar devam eder. Eğer sitenizde ana sayfadan direkt yollarla ulaşılamayan kopuk sayfalar varsa, bunlar site haritasında görünmezler. 1. Files panelinde, Lesson_03_Links klasöründe yer alan index.html dosyasına sağ tıklayın (Windows ta) ya da Control tuşunu basılı tutarak tıklayın (Macintosh ta) ve açılan bağlam menüsünden Set as Home Page komutunu seçin. Burada Lesson_03_Links klasöründeki en üst düzey index sayfasını ana sayfa (proje sitesinin asıl sayfası) olarak seçiyorsunuz. Site haritasını etkinleştirene kadar bu komutun sonucunu göremezsiniz. Artık ana sayfayı tanımladığınızda göre site haritası görünümüne geçebilirsiniz. Site haritasına bir başlangıç noktası göstermek için bir ana sayfa oluşturmak gerekir. Bağlantı Oluşturmak 89

20 2. Araç çubuğundaki Site Map düğmesine tıklayın ve açılan menüden Map Only komutunu seçin. Site Map düğmesi Site Map düğmesi aynı zamanda bir menü olarak da çalışır. Bu düğmeye tıklayıp farenin düğmesini basılı tuttuğunuzda Map Only görünümü ile Map and Files görünümü arasında seçim yapmanızı sağlayan bir menü açılır. Files panelini Map Only görünümündeyken küçültürseniz, ekranda penceresinin dosya kısmını görebilirsiniz. Bu aşamada index.html, definitions.html ve sanskrit.html belgelerini ve yogasangha.com bağlantısını temsil eden harici bir bağlantı simgesi içeren bir harita görmeniz gerekir. Site haritası, sitenizin grafiksel bir temsilidir. Ana sayfa olan index.html, site haritasının en üst düzeyinde görüntülenir. Bir sayfadan diğerine giden bağlantı, bağlantıyı içeren dosyadan bu dosyanın bağlı olduğu her sayfaya giden bir çizgiyle gösterilir. Bu çizginin uçlarındaki ok başları, bağlı durumdaki her bir sayfayı gösterir. Önceki uygulamada oluşturduğunuz yeni dosyalar bu haritada görüntülenmez, çünkü index. html sayfası bu dosyalara ait hiçbir bağlantı içermemektedir. Ayrıca index.html dosyasının bağlı olduğu dosyalar da bu yeni dosyalara ait hiçbir bağlantı içermemektedir. Bir sonraki uygulamada bu bağlantıları oluşturmaya başlayacaksınız ve dosyalar da yavaş yavaş haritada görünmeye başlayacak. 90 DERS 3 Files paneli genişletilmiş görünümdeyken Files panelinin menüsünden (Windows ta) ya da Files panelinin Options menüsünden (Macintosh ta) View > Site Map Options > Layout komutunu seçerek Map görünümünü ayarlayabilirsiniz. Siz bu komutu seçtikten sonra Site Definition iletişim kutusu açılacaktır. Site Map Layout seçeneklerini görüntülemek için Advanced sekmesine tıklayın. Varsayılan durumda Dreamweaver site haritasını yatay olarak görüntüler. Daha rahat görülmesini sağlamak üzere site haritasını tek bir sayfaya sığdırmak için sütun sayısını ve sütun genişliğini değiştirebilirsiniz. Ana sayfada çok sayıda bağlantı varsa ve site haritasında bütün sayfaları göstermeye yetecek kadar yer yoksa bu işlemi uygulamak isteyebilirsiniz.

21 Site Haritası Görünümünde Bağlantılarla Çalışmak Files panelindeki site haritası görünümü aracılığıyla bağlantı ekleyebilir ve mevcut bağlantılardan istediklerinizi silebilirsiniz. Bağlı dosyalardan istediklerinizi görünecek ya da gizlenecek şekilde ayarlayarak site haritasında hangi dosyaların görüntüleneceğini kontrol edebilirsiniz. Dosyaları gizlediğinizde bu dosyalar sadece Map görünümünde gizlenir ve Local Files listesinde yine görünür durumdadırlar. Ayrıca bağlantı ekleyip silerek de dosyalarda değişiklik yapabilirsiniz. Bağlı durumdaki bir dosyayı gizlemek ya da görüntülemek için değişiklik yapmak istediğiniz dosyaya sağ tıklayın (Windows ta) ya da Control tuşunu basılı tutarak tıklayın (Macintosh ta) ve Show/Hide Link komutunu seçin. Files panel menüsünden (Windows ta) ya da Files panelinin Options menüsünden (Macintosh ta) View > Show Hidden Files komutunu seçerek bütün gizli dosyaları görünür hale getirebilirsiniz. Gizli bağlantıları belirtmek için bu dosyaların isimleri italik olarak görüntülenir. Daha sonra gizli dosyalara sağ tıklayarak (Windows ta) ya da Control tuşunu basılı tutarak tıklayarak (Macintosh ta) Show/Hide Link komutunu seçebilirsiniz. 1. Site Map menüsünden Map and Files komutunu seçin. Map görünüm panelindeki index.html dosyasını simgesini seçin, Point To File simgesine tıklayın ve Point To File simgesini about klasöründeki index.html dosyasına ait simgenin üzerine sürükleyin. index.html dosyası vurgulu hale geldiğinde farenin düğmesini bırakın. Point to File simgesi Site Map düğmesi Siz sürüklerken imleç bir ok ve Point To File simgesine dönüşecektir. Siz imleci en üst düzeydeki index.html dosyasından about klasöründe yer alan index.html dosyasına Bağlantı Oluşturmak 91

22 sürüklerken mavi bir çizgi çizilir. Siz imleci bıraktığınızda, about klasöründeki index. html dosyası Site Haritası (Site Map) görünümünde belirecektir. Bağlantı en üst düzeydeki index.html belgesine eklenmiş durumdadır. Eğer en üst düzeydeki index.html belgesiniz açarsanız bu bağlantıyı görürsünüz. Site > Site Map View alt menüsünü kullanarak bağlantılar üzerinde ekleme, silme ve değiştirme işlemleri uygulayabilirsiniz. Bu menüye Files panel menüsünden (Windows ta) ya da Files panelinin sağ üst kenarında yer alan Options menüsünden (Macintosh ta) erişebilirsiniz. 2. Birinci adımı tekrarlayarak en üst düzeydeki index.html dosyasından şu klasörlerde yer alan diğer index.html dosyalarına giden bağlantıları oluşturun: schedule, teachers, community, training ve explorations. İmleci haritadaki belirli bir dosyanın üzerinde bir süre tuttuğunuzda ilgili dosyanın adını ve konumunu gösteren bir araç ipucu belirir. Bir dosyayı harita (map) görünümünde seçtiğinizde aynı dosya Files görünümünde de vurgulanır ve bunun tersi de doğrudur. Bu adımda sitenin asıl sayfası olan index.html i her bölümün asıl sayfalarına (her klasörde yer alan index.html dosyaları) bağladınız. Bu şekilde oluşturulan bağlantılar aynı satır üzerinde (her biri diğerinden sonra gelecek şekilde), belgedeki mevcut bütün içeriğin altında görünür ve sayfadaki bağlantı metni için dosyanın ismini kullanır. Bu örnekte index.html şeklinde tanımlanan dosya adı çok açıklayıcı değil, bu yüzden bir sonraki adımda bağlantıları gezinti alanına uygulayacaksınız. 3. Lesson_03_Links klasöründeki index.html dosyasını açın. Sayfanın en altındaki ilk index bağlantısını seçin. Ardından Properties denetçisindeki Link alanında bulunan metni seçin. Telif hakkı bilgisinin hemen üzerinde yer alan bölüm listesinden About sözcüğünü seçin ve kopyalanan bağlantıyı Properties denetçisindeki Link alanına yapıştırın. 92 DERS 3

23 Bu derste index.html belgesindeki sayfanın alt kısmında ana gezinti bağlantılarını oluşturuyorsunuz. Tümüyle işlevsel bir sitede bu bağlantı grupları her belgede tekrarlanır. Bir sitenin gezinti bağlantılarının tutarlı olması (her sayfada aynı yerde olması), ziyaretçilerin site içinde kolayca gezinmesini sağlar. Daha sonraki derslerde, proje sitesindeki bütün sayfaların en üst kısmında yer alacak olan ana gezinti sistemini oluşturacaksınız. 4. Kendilerine karşılık gelen bağlantılarla Schedule, Teachers, Community, Training ve Explorations bölümleri için üçüncü adımı tekrarlayın. Sayfanın alt kısmındaki index bağlantıları satırını silin, dosyayı kaydedin ve kapatın. Doğru index bağlantısını doğru (kendisine karşılık gelen) bölüme uygulamak için bağlantıları kopyalarken Properties denetçisinde yer alan Link metin alanındaki bağlantı konumunu kontrol ettiğinizden emin olun. Eğer bu uygulama ile bu derste daha önce klasörleri oluşturduğunuz uygulama arasında herhangi bir anda Dreamweaver ı kapattıysanız, Files paneli alfabetik sırayla düzenlenerek yenilenmiş olabilir. Bu yüzden index bağlantıları bölüm listesiyle aynı sırada olmayabilir. Artık gezinti bağlantılarının ziyaretçiyi götürecekleri konumlar açıkça tanımlanmış durumdadır. Eğer açılırsa Başlangıç Sayfası nı kapatabilirsiniz. 5. Birinci adımı tekrarlayarak schedule klasöründeki index.html dosyasından yine schedule klasöründe bulunan diğer tüm belgelere giden bağlantıları oluşturun. Bu adımda, schedule bölümünün asıl sayfası olan schedule/index.html i schedule bölümündeki geri kalan sayfalara bağladınız. Bağlantı Oluşturmak 93

24 Site haritasında bağlantı içeren sayfalar dosyanın solunda bir artı (+) ya da eksi (-) işaretiyle birlikte görüntülenir. Artı işaretine tıkladığınızda, her biri kendi artı işaretiyle birlikte belgede yer alan bağlantıların yer aldığı bir liste görüntülenir. Kırık bağlantılar (yani çalışmayan bağlantılar) kırmızı harflerle gösterilir. e-posta bağlantısı ve URL gibi harici bağlantılar mavidir ve küçük bir küre simgesiyle gösterilirler. 6. Geri kalan klasörlerdeki (about, teachers, community, training ve explorations) dosyalar için beşinci adımı tekrarlayın. Böylece site içinde gezmenizi sağlayan bağlantıların birçoğunu içeren ve sitenizin yapısı ile gezinti özelliklerini test etmenizi sağlayan bir test sitesine sahip oldunuz. Bu test sitesini tamamlamak için altı klasörde yer alan her bir index.html dosyasından en üst düzeydeki index dosyasına giden bağlantıları ve klasörlerdeki her bir sayfadan aynı klasördeki index. html dosyasına giden bağlantıları eklemeniz gerekiyor. Bu işlemleri yaptıktan sonra site haritanızın görüntüsü aşağıdaki örneğe benzeyecektir. Sitenin Bir Alt Bölümünü Görüntülemek Hazırladığınız siteler büyüdükçe ve karmaşıklaştıkça site haritası da Files panelinde görüntülenemeyecek kadar büyüyebilir. Bu görüntüyü sadece seçilen sayfa ve bu sayfaya ait bağlantılar görünecek şekilde düzenleyebilirsiniz. 1. Files paneli site haritası görünümünde about klasörünün içinde yer alan index. html sayfasını seçin. about klasöründeki index.html belgesini bir alt bölüm olarak görüntülemek, başlangıç noktası olarak about/index.html dosyası kullanılarak erişilebilen bütün sayfalara odaklanmanızı sağlar. Büyük bir siteniz varsa bu yaklaşım işinize yarayabilir. 2. Files panel menüsünü (Windows ta) ya da Files panelinin sağ üst tarafında yer alan Options menüsünü (Macintosh ta) kullanarak View > Site Map Options > View as Root komutunu seçin. 94 DERS 3

25 View as Root seçeneğini alternatif olarak, View As Root u seçmenizi sağlayan bağlam menüsüne erişmek üzere ilgili dosyaya sağ tıklayarak ya da Control tuşunu basılı tutup tıklayarak da ayarlayabilirsiniz. Site haritası, bağlantılarıyla (ikinci düzey) birlikte about/index.html sayfasını kök (harita görünümünde en üst düzey) olarak gösterecek şekilde değişecektir. Files araç çubuğunun altında ana sayfa olarak ayarladığınız dosyayla başlayıp sitenin kökü olarak görüntülenmek üzere seçtiğiniz dosyayla biten site hiyerarşisini gösteren gri bir çubuk yer alır. Bu uygulamada index.html > index.html şeklinde bir ifade göreceksiniz. Eğer dosya yolunun tamamını göstermeye yetecek kadar alan yoksa, bu çubuk üzerinde index.html dosyasından hemen sonra kırmızı bir ok görürsünüz. Bu yapısal site gezinti sistemi, birçok sitede kullanılan ekmek kırıntısı gezinti sistemiyle aynı şekilde çalışır. Ekmek kırıntıları (çok bilinen bir masalda daha sonra geri dönebilmek için çocukların ekmek kırıntılarını gittikleri yol boyunca artlarına bırakmalarından esinlenilmiştir), ziyaretçiye sitenin ana sayfasından bulundukları sayfaya kadar bütün hiyerarşik yolu gösterir. Bunlar genellikle sayfanın üst kısmına yakın bir konumda bulunur. Sitenin ekmek kırıntısı yolunda listelenen her bir parçası normalde bu bölüme bağlıdır. Örneğin about klasöründeki anusara.html sayfasına ait ekmek kırıntısı gezinti yapısı, Main > About > Anusara şeklinde olacaktır. Bu örnekte Main sözcüğü en üst düzeydeki index.html sayfasına, About sözcüğü ise anusara.html sayfasına bağlanan about klasöründeki index.html sayfasına bağlanacaktır. Anusara sözcüğü bağlı değildir ve ekmek kırıntılarının en sonunda bulunmaktadır. Bu da ziyaretçiye ekranda gördüğü sayfanın Anusara olduğunu söyler. Bağlantı Oluşturmak 95

26 3. Site Navigation çubuğundaki ilk index.html yazısının solundaki Dreamweaver dosya simgesine tıklayın. Ana sayfanız (Yoga Sangha proje sitesinde en üst düzeyde yer alan index.html sayfası) yine sitenin kökü haline gelecektir. Site Haritasını Kaydetmek 1. Files panel menüsünü (Windows ta) ya da Files panelinin sağ üst kısmında yer alan panel Options menüsünü (Macintosh ta) kullanarak File > Save Site Map komutunu seçin. Save Site Map iletişim kutusu açılacaktır. Böylece site haritasını bir resim olarak kaydedebilirsiniz. Bazen site haritasını başka insanlarla paylaşmanız gerekebilir. Site haritasını resim olarak kaydetme seçeneği, site haritasını başkalarına göstermenizi kolaylaştırır. Macintosh larda resim PICT formatında, Windows yüklü makinelerde ise PNG veya BMP formatında kaydedilir. Map Only görünümündekinin tersine, Map and Files görünümünü kullanırken eğer Local Files paneli etkinse site haritası işlevlerinin hepsine erişemezsiniz. Eğer Save Site Map seçeneği seçilemez durumda ise Files paneline geri dönün ve etkin olduğundan emin olmak için site haritasının bulunduğu bölmenin beyaz boş alanına tıklayın. Sonra da geri dönüp Save Site Map komutunu tekrar seçin. 2. File name (Dosya adı) metin alanına project_yoga yazın ve dosyayı Lesson_03_ Links klasörüne kaydedin. Site haritası, yazdırılabilen ya da bir resim editöründe görüntülenebilen bir resim olarak kaydedilecektir. Bağlantı Hedefini Ayarlamak Kullanıcılar bir bağlantıya her tıkladıklarında, bağlı sayfa genellikle tarayıcıdaki geçerli sayfanın yerini alır. Standart bağlantı davranışı bu şekildedir ve şu ana kadar bu derste kullanılan tüm bağlantılar da bu şekilde çalışmaktadır. Web tarayıcısına bağlantının nerede görüneceğini bildiren talimat hedef (target) olarak adlandırılır. Bağlantılarınızla birlikte kullanabileceğiniz farklı hedefler mevcuttur. Bazen yeni tarayıcı sayfasının farklı bir pencerede görüntülenmesini isteyebilirsiniz. Örneğin, kendi sitenizin dışındaki bir siteye bağlantı atadığınızda, yeni site tarayıcı pencerenizdeki sitenin yerini alıyorsa, ziyaretçilerinizi sitenizin dışına çıkarmış olursunuz. Ve eğer kullanıcılar sitenizin URL ini Favoriler ya da Yer İmleri arasına eklemediyse, sitenize nasıl dönmeleri gerektiğini hatırlayamayabilirler. Ama dışarıdaki site yeni bir tarayıcı penceresinde açılırsa orijinal sayfa ilk pencerenizde görüntülenmeye devam eder. 96 DERS 3

27 1. Lesson_03_Links klasöründeki index.html belgesini açın ve Yoga Sangha Web sitesine giden bağlantıyı seçin. Properties denetçisindeki Target menüsünden _blank i seçin. Sayfanın alt kısmına yakın bir konumda bulunan Yoga Sangha Web sitesine ait bağlantıyı bu dersin ikinci uygulamasında oluşturmuştunuz. Belgenin alt kısmındaki altı index bağlantısına dikkat edin. Bunlar, bu derste daha önce oluşturduğunuz ve altı klasörde bulunan index.html dosyalarına giden bağlantılardır. Dreamweaver, bağlı sayfanın nerede görüntüleneceğini belirleyebilmeniz için size çeşitli hedef seçenekleri sunar. _blank dışındaki diğer hedef seçenekleri frame lerle birlikte kullanılır. Frame konusunu Ders 10 da göreceğiz. Kullanabileceğiniz hedef seçenekleri şunlardır: _blank: Bağlı belgeyi adlandırılmamış yeni bir tarayıcı penceresinde açar. _parent: Bağlı belgeyi, ebeveyn frameset te ya da bağlantıyı içeren frame in penceresinde açar. _self: Bağlı belgeyi bağlantıyla aynı pencerede ya da aynı frame de açar. Bu hedef seçeneği varsayılan seçenekle aynıdır. Bu yüzden çoğunlukla bu seçeneği belirtmeniz gerekmez. _top: Bağlı belgeyi tam büyüklükte bir tarayıcı penceresinde açar. Tüm frame leri siler. 2. Dosyayı kaydedin ve Web tarayıcınızda önizleyin. yogasangha.com bağlantısına tıkladığınızda bağlı sayfa yeni bir tarayıcı penceresinde açılacaktır. Bu dosyayı kapatabilirsiniz. Bağlantı hedefi için yeni tarayıcı penceresi seçeneğini kullanırken dikkatli olun. Ekranda birden fazla pencere olması ziyaretçilerinizin canını sıkabilir ya da kafasını karıştırabilir. Her yeni pencere ziyaretçinin bilgisayarındaki RAM kullanımını artırabilir. Günümüzde çoğu bilgisayarda kullanılan bellek miktarını düşündüğümüzde bu ciddi bir sorun sayılmaz, ama ziyaretçilerinizin büyük bir kısmı eski makine kullanıyorsa sorun yaratabilir. Bağlantı Oluşturmak 97

28 İsimli Yer İmleri Eklemek ve Bunlara Bağlantı Atamak Bir belge çok uzunsa ya da birden fazla bölümden oluşuyorsa, kullanıcının belge içindeki belirli yerlere atlamasını sağlayan çeşitli bağlantılar oluşturmanız gerekebilir. Bu teknik, kullanıcıları uzun metin pasajlarıyla dolu bir ekranı sürekli kaydırma zorunluluğundan kurtarır. İsimli yer imi (named anchor), sayfada belirli bir bağlantının atlayacağı yeri işaretler. Buradaki uygulamada bir isimli yer imi ekleyecek ve buna bir bağlantı atayacaksınız. Ayrıca Point To File simgesinin yardımıyla bağlantı dosyalarını seçmek için kullanabileceğiniz farklı bir yöntemi öğreneceksiniz. 1. Lesson_03_Links klasöründeki definitions.html dosyasını açın. Modify > Page Properties komutunu seçin ve Page Properties iletişim kutusundaki Links kategorisini seçin. Bağlantı renklerini bu dersin ilk uygulamasında index.html belgesi için kullandığınız şekilde ayarlayın. OK düğmesine tıklayın. Link color seçeneğine ait onaltılık tabanlı değerin #FF3300, Rollover links seçeneğine ait renk değerinin #FF9900, Visited links değerinin # ve Active links renk değerinin de #FFCC00 olduğunu hatırlayacaksınız. Bağlantı renklerinin bütün sitede aynı olmasına dikkat edin. Rasgele bir şekilde değişen bağlantı renkleri ziyaretçilerinizin kafasını karıştırabilir. Bu dosya, ziyaretçinin tüm belgeyi görebilmesi için ekranı kaydırmasını gerektirecek kadar büyük bir metin içermektedir. 2. Ekleme noktasının belgenin alt kısmında yer alan Vinyasa Yoga sözcüklerinin önüne getirin. Insert araç çubuğundaki Common kategorisinde yer alan Named Anchor düğmesine tıklayın. Named Anchor Named Anchor iletişim kutusu açılacaktır. Insert > Named Anchor komutunu ya da Option+Command+A (Macintosh ta) veya Ctrl+Alt+A (Windows ta) klavye kısayolunu kullanarak da isimli bir yer imi ekleyebilirsiniz. 3. Anchor name metin alanına vinyasa yazın ve OK düğmesine tıklayın. 98 DERS 3

29 İsimde boşluk, noktalama işareti veya özel karakter (telif hakkı sembolü, diyez işareti vs gibi) kullanmayın. Aynı belgede aynı isme sahip birden fazla isimli yer imi asla kullanılmamalıdır. Aksi takdirde Web tarayıcısı kullanıcıyı doğru yer imine götüremez. Sayfada, isimli yer imini göstermek için sarı bir simge belirecektir. Sayfada ilk belirdiğinde bu simgeyi seçebilirsiniz (seçilen yer imi simgelerinin rengi maviye döner). Bu simge, Web tarayıcısında görünmeyen bir elemandır. İsimli yer imi simgesi İsimli yer imi (Named Anchor) simgesini göremiyorsanız View > Visual Aids > Invisible Elements komutunu seçerek Invisible Elements seçeneğinin etkin durumda olduğundan emin olun. Siz isimli bir yer imi eklerken Invisible Elements seçeneğini etkinleştirmedikçe yer imini göremeyeceğinizi bildiren bir uyarı penceresi ekrana gelebilir. Ayrıca Preferences iletişim kutusundaki Invisible Elements kategorisinde Named anchors seçeneğinin de işaretli olması gerekir. Edit > Preferences komutunu seçerek ve Invisible Elements kategorisini işaretleyerek hangi seçeneklerin etkin durumda olacağını belirleyebilirsiniz. Named Anchors kutusunun işaretli olması gerekir. Bu kitaptaki uygulamalarda varsayılan konfigürasyonu kullandığınız varsayılmaktadır. Bağlantı Oluşturmak 99

30 4. İmleci, sayfanın en üst kısmında yoga tanımının yapıldığı paragrafın sonuna yerleştirin. Return tuşuna basın ve There are many styles of yoga, including: yazın. Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın ve aralarında birer satır sonu olacak şekilde şu terimleri yazın: Hatha Anusara Ashtanga Bikram Dynamic Hatha Integral Iyengar Kripalu Vinyasa Bu metin, kullanıcıyı sayfanın ilgili bölümüne götürerek bir gezinti elemanı olarak çalışacaktır. Her terim, önceki adımlarda bu sayfanın alt kısmına yakın bir konumda oluşturduğunuz Vinyasa Yoga için oluşturduğunuza benzer şekilde ilgili isimli yer imini işaret eden bir bağlantı olacaktır. 5. Yeni oluşturduğunuz yoga stilleri listesinden Vinyasa sözcüğünü seçin. Properties denetçisindeki Link metin alanına #vinyasa yazın. Diyez işaretini (#) kullanmak, Web tarayıcısına bu bağlantının dahili olduğunu bildirmek için gereklidir. Dahili bağlantı kullanıcıyı aynı sayfadaki bir konuma götürür. Diyez işaretinden sonra yazdığınız ismin yer iminin ismiyle tamamen aynı olduğundan emin olun. Yer imlerini adlandırırken Ders 1 de öğrendiğiniz adlandırma standartlarına uymanız gerekir. İsimli yer imleri BÜYÜK/küçük harfe duyarlıdır (her ne kadar birçok Web tarayıcısı harflerin BÜYÜK/küçük olmasını değiştirme (case change) özelliğine sahip olsa da). Örneğin yer iminizi vinyasa olarak adlandırdıktan sonra Link metin alanına #Vinyasa yazarsanız, bağlantınız bütün Web tarayıcılarında düzgün bir şekilde çalışmayabilir. Yoga stilleri listesinde yer alan Vinyasa sözcüğü, sayfanın alt kısmında yer alan Vinyasa terimine ve tanımına bağlandı. Şimdi aynı işlemi Kripalu sözcüğü için tekrarlayacaksınız. 100 DERS 3