docBağlantı Oluşturmak - BITEFO FETHIYE 2007
download 
Şikayet Transkript
Bağlantı Oluşturmak - BITEFO FETHIYE 2007
A-PDF Split DEMO : Purchase from www.A-PDF.com 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. 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 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 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 #993300 ve Active Links için #FFCC00. 74 DERS 3 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 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. #000000 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 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 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 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 (http://www.yogasangha.com 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 5. Belgenin en alt kısmında yer alan www.yogasangha.com metnini seçin. Properties denetçisindeki Link metin alanına http://www.yogasangha.com 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 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 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 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 Ç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 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 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 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. 9. 6’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 www.yogasangha.com/about 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). 10.3’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ı Dosyalar schedule faq.html, events.html, download-schedule.html, index.html teachers jayne.html, katchie.html, sierra.html, index.html community outreach.html, mission.html, green.html, forums.html, index.html training explorations 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 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 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 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. 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. 90 DERS 3 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 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 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 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 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 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 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 İ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 #993300 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 İ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 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 6. Belgenin alt kısmına yakın bir konumda bulunan Kripalu sözcüğünün önüne bir yer imi ekleyin ve bu yer imini kripalu olarak adlandırın. Böylece ikinci bir yer imi oluşturmuş oldunuz. Eğer yanlış konuma yerleştirildiyse yer imini sürükleyerek yeni bir konuma taşıyabilirsiniz. 7. Belgenin üst tarafında yer alan yoga stilleri listesinde Kripalu sözcüğünü seçin. Point to File simgesini (Properties denetçisindeki Link metin alanının yanında yer alır) yeni oluşturduğunuz kripalu adındaki isimli yer imine doğru sürükleyin. İmleç isimli yer iminin üzerine gelince farenin düğmesini bırakın. Point to File aracına ilk tıkladığınızda başlangıçta Link metin alanında seçtiğiniz bağlantıyla değiştirilecek olan açıklayıcı bir metin yer alır. İmleci isimli yer iminin üstüne getirdiğinizde Link metin alanında #kripalu ifadesi belirecektir. Bağlantı oluşturmak için Point to File simgesini kullanmak yazım hatası yapmanıza engel olabilir. Files paneli açıksa, Point to File simgesini sitenizdeki diğer dosyaları bağlamak için de kullanabilirsiniz. Bağlantı atamak istediğiniz metin ya da resim seçili durumdayken Point To File simgesini üzerine tıklayarak Files panelinin üzerine sürükleyin. Files paneli belge penceresinin ya da diğer panellerin arkasındaysa öne gelir ve işaretleyiciyi bağlamak istediğiniz dosyanın üzerine getirene kadar sürükleme işlemine devam edebilirsiniz. Bağlantı Oluşturmak 101 8. Belgenin başında oluşturduğunuz geri kalan gezinti başlıkları için isimli yer imlerini ve bağlantıları ekleyin. Yer imi isimleri olarak kendilerine karşılık gelen yoga tipleri için hatha, anusara, ashtanga, bikram, dynamic, integral ve iyengar yazın. İstediğiniz bir yer iminin adını, ilgili yer iminin üzerine tıklayarak düzenleyebilirsiniz. Siz bu işlemi yaptıktan sonra Properties denetçisindeki seçenekler, isimli bir yer iminin seçildiğini gösterecek şekilde değişecektir. Properties denetçisinin Name metin alanını kullanarak istediğiniz ismi değiştirebilirsiniz. 9. Sayfanın en üstünde Yoga metninin önüne bir isimli yer imi ekleyin ve bunu top olarak adlandırın. Sayfanın en alt kısmında yeni bir satır oluşturun, Back To Top yazın ve Properties denetçisindeki Link metin alanını kullanarak bunu #top’a bağlayın. Tanım listesi oluşturmamak ve yeni bir satır oluşturmak için iki paragraf sonu kullanmanız gerektiğini unutmayın. Uzun belgelerde her bölümün sonuna sayfanın başındaki bir yer imine ya da gezinti özelliklerine sahip bir “İçindekiler Tablosu”na giden bir bağlantı atamak sık kullanılan bir tekniktir. Sık rastlanan bu yer imi genellikle #top olarak adlandırılır. Bu tipte bir bağlantı kullandığınızda ziyaretçiler, diğer bölümlere atlamak için bu bağlantıları kullanmaya devam etmek isterlerse, ekranı sayfanın en üstüne kadar kaydırmak zorunda kalmazlar. Bir sayfada istediğiniz kadar bağlantıyı aynı isimli yer imine atayabilirsiniz. İsimli yer imi bir bağlantının içindeyse, bu yer imine gitmesi gereken bir bağlantının ziyaretçileri yanlış bir yere götürmesi ya da çalışmaması gibi sorunlar ortaya çıkabilir. Bu tür sorunların ortaya çıkmasını engellemek için, bir yer iminin bir bağlantıya eklenmesi durumunda Dreamweaver otomatik olarak bağlantıyı isimli yer iminin hemen önünde sonlandırır ve yer iminin hemen arkasında aynı hedefe giden ikinci bir bağlantı oluşturur (orijinal bağlantını bittiği yerde sonlanır). Böyle durumlarda, isimli yer imi aynı değere sahip iki ayrı bağlantı arasında kalır. Sonuç olarak, imleci bağlantı metninin başına yerleştirip bağlantı değerinde değişiklik yaptığınızda sadece bu bağlantının ilk örneği değişir. Yaptığınız değişiklikleri isimli yer iminden sonra yer gelen bağlantının ikinci örneğinde de tekrarlamayı unutmayın. 10. Dosyayı kaydedin ve Web tarayıcınızda önizleyin. Sayfanın başında yer alan gezinti terimleri artık kendilerine karşılık gelen bölümlere bağlanmış durumdadır. definitions.html dosyasını kapatabilirsiniz. 102 DERS 3 İsimli yer imleri tablolara ya da katmanlara yerleştirildiklerinde beklendiği şekilde çalışmayabilirler. En iyi şekilde sonuç almak için yer imlerini tabloların ve katmanların dışında tutun. Tablo oluşturmayı Ders 6’da, katmanları da Ders 9’da göreceksiniz. Bir sonraki adımda isimli bir yer imi kullanarak başka bir belgenin belirli bir bölümüne nasıl bağlanıldığını öğrenme konusuna devam edeceksiniz. 11. Lesson_03_links klasöründe en üst düzeyde bulunan index.html dosyasını açın. “Anusara Yoga, a form of hatha yoga…” şeklinde başlayan paragrafta “hatha yoga” sözcüklerini seçin. Properties denetçisindeki Link metin alanına definitions.html#hatha yazın. Link metin alanındaki orijinal diyez işaretini (#) girdiğiniz bağlantıyla değiştirdiğinizden emin olun. Önceki adımlarda definitions.html dosyasının “hatha” bölümünde bir isimli yer imi oluşturmuştunuz. Burada da index.html dosyasında, sayfanın üstüne bağlamak yerine (bağlantı olarak definitions.html’i kullanmanız durumunda böyle yapacaktınız) doğrudan definitions.html dosyasındaki hatha bölümünü işaret eden bir bağlantı oluşturuyorsunuz. index.html dosyasını Web tarayıcınızda önizleyebilir ve bu yeni bağlantıyı test edebilirsiniz. Diğer sayfaların belirli bölümlerine bağlanmak için yer imleri kullandığınızda ziyaretçilerinizi hemen aradıkları başlıklara yönlendirerek ve uzun belgelerde ekranı kaydırmayla vakit kaybetmelerini engelleyerek sitenizin daha işlevsel olmasını sağlayabilirsiniz. Siteniz ne kadar işlevselse ve kullanımı ne kadar kolaysa, yeni ziyaretçiler kazanma ve mevcut ziyaretçilerin sitenize tekrar gelme ihtimali o kadar fazla olur. Point to File aracını kullanarak başka sayfalara yönlendiren yer imlerinin yer aldığı bağlantılar oluşturmanız da mümkündür (önceki adımlarda aynı belge içinde bağlantılar oluşturmak için bu aracı kullanmıştınız). Örneğin hem index.html, hem de definitions.html belgeleri ayrı ayrı pencerelerde açıkken index.html belgesinde bir bağlantı seçebilir, Link metin alanının sağındaki Point to File simgesine tıklayabilir ve definitions.html belgesindeki istediğiniz bir isimli yer imini hedef olarak tanımlayabilirsiniz. Bir sonraki uygulama için index.html belgesini açık bırakın. Bağlantı Oluşturmak 103 E-posta Bağlantıları Eklemek Bağlantı atanmış bir e-posta adresi vererek ziyaretçilerinizin size bir Web sayfası üzerinden kolayca erişmelerini sağlayabilirsiniz. Her zaman ziyaretçilerin çalıştığınız organizasyondan birileriyle yazışmasını ya da etkileşime girmesini sağlayan bir yöntem kullanmalısınız. Dreamweaver’da bir e-posta bağlantısını iki şekilde ekleyebilirsiniz. Bağlantıya ait e-posta adresini ve metni aynı anda ekleyebilir ya da sayfanızdaki mevcut bir metne bağlantı ekleyebilirsiniz. Şimdiki uygulamada bu yöntemlerin her ikisini de göreceğiz. 1. index.html belgesinin alt kısmında yer alan tarihin sonuna tıklayın, boşluk tuşuna basın ve by yazarak bir boşluk daha ekleyin. Bir sonraki adımda buraya bir e-posta bağlantısı ekleyeceksiniz. 2. Insert araç çubuğundaki Common kategorisinde bulunan Email Link düğmesine tıklayın ya da Insert > Email Link komutunu seçin. Email Link Metin (Text) ve e-posta (E-Mail) seçeneklerini içeren Email Link iletişim kutusu açılacaktır. Insert araç çubuğu varsayılan durumda açık olmalıdır. Eğer görünmüyorsa bu araç çubuğunu açmak için Window > Insert komutunu seçin ya da panelleri, denetleyicileri ve araç çubuklarını varsayılan konumlarına getirmek için Window > Arrange Panels komutunu seçin. 3. Text metin alanına adınızı yazın. Email metin alanına e-posta adresinizi yazın ve OK düğmesine tıklayın. Metin sayfada bir bağlantı olarak belirecektir. Siz ekleme noktasını bağlantının içine yerleştirdiğinizde Properties denetçisindeki Link metin alanında “mailto:” ifadesi ve hemen sonra da e-posta adresi görüntülenecektir. 104 DERS 3 Sayfadaki mevcut bir metni seçer ve sonra Insert Email Link iletişim kutusunu açarsanız, seçtiğiniz metin Text metin kutusunda belirecektir. İletişim bilgileri genellikle sayfanın en altında, telif hakkı bilgisine yakın bir konumda bulunur. Properties denetçisindeki Link metin alanına mailto: ve bunun hemen arkasına e-posta adresinizi yazarak da e-posta bağlantıları oluşturabilirsiniz. Bu yöntemi kullanırken iki nokta üst üste işaretini kullanmayı unutmayın ve iki nokta üst üste işaretiyle e-posta adresinizin arasında boşluk bırakmayın. index.html dosyasını kaydedip kapatabilirsiniz. Bağlantılarla Tek Başınıza Çalışın Bu derste öğrendiğiniz gibi, gezinti bağlantıları içeren bir test sitesi oluşturarak site içinde belirli yerlere tıklayıp ziyaretçilerin sitede takip ettikleri yolların çalışıp çalışmadığını görebilirsiniz. Gezinti öğelerini bu aşamada test etmek, geliştirme anlamında çok ilerlemeden gereken ayarlamaları yapmanızı sağlar. Bu uygulamada kendi siteniz için bir test sitesi hazırlayacaksınız. 1. Ders 1’de siteniz için geliştirdiğiniz dosya yapısını kılavuz olarak kullanarak bölüm klasörlerini ve sitenizde kullanacağınız sayfa yer tutucularını oluşturun. Bölüm klasörlerini ve yer tutucu dosyaları hazırlamak, test sitesi oluşturmanın ilk adımıdır. Bu yeni klasörleri ve dosyaları siteye eklemek üzere genişletilmiş Files panelini kullanarak çok sayıda yeni dosyayı hızlı bir şekilde oluşturabilirsiniz. 2. Bu derste daha önce öğrendiğiniz beceri ve teknikleri kullanarak sitenizin yer tutucu sayfalarında bir bağlantı sistemi oluşturun. Files panelinin Site Map yani site haritası görünümünü kullanmak, her dosyayı açmak zorunda kalmadan sitenizdeki sayfalar arasında bağlantılar oluşturmanızı sağlar. Yeni sayfalarınıza herhangi bir bağlantı rengi atamayın. Bir sonraki derste, belgelerinizde kullanılan bağlantı renklerinin tüm site için tek bir dosya aracılığıyla nasıl kontrol edildiğini öğreneceksiniz. 3. Sayfalarınıza metin tabanlı içerik eklemek için Ders 1’de geliştirdiğiniz içerik taslağını kullanın. Her sayfada görünecek içeriğe ait taslakları ya da listeleri kullanabilir veya sayfalara içeriğin kendisini ekleyebilirsiniz. Geliştirme sürecindeki farklı aşamalarda sitenize içerik eklemeye ve değişiklik yapmaya devam edeceksiniz. Bununla birlikte, şu anda içerik Bağlantı Oluşturmak 105 eklemek nelerin mevcut ya da nelerin eksik olduğunu ve sitede içeriğin nasıl bir akış izleyeceğini ve çalışacağını görmenize yardım edecektir. Gerekiyorsa bağlantı hedeflerini ayarlayabilir, bunlara isimli yer imleri ve bağlantılar ekleyebilir ve e-posta bağlantıları oluşturabilirsiniz. Sitenizin geliştirilmesi sürecinde bu bağlantılarla çalışmaya devam edeceksiniz. Şu anda hepsini tamamlamanız gerekmiyor. 4. Ana sayfanızı bir Web tarayıcısında önizleyin ve geliştirdiğiniz site yapısını ve gezinti öğelerini test sitenizin içinde muhtelif yerlere tıklayarak test edin. Ziyaretçilerinizin sitenizi nasıl kullanabileceklerini gözünüzün önüne getirmeye çalışın. Sitenizin içinde takip edebilecekleri muhtemel yollar neler olabilir? Buna göre gereken değişiklikleri yapın. Ne Öğrendiniz? Bu derste şunları öğrendiniz: • Normal bağlantıların, ziyaret edilen ve etkin durumdaki bağlantıların renklerini tanımladınız (Sayfa 73–77). • Proje sitesi içindeki sayfalara giden metin bağlantıları ve dışarıdaki bir siteye giden bir bağlantı oluşturdunuz (Sayfa 77–81). • Bölüm klasörleri ve yer tutucu dosyalar oluşturdunuz (Sayfa 82–88). • Bağlantı oluşturmak ve bunları görüntülemek için Files panelinin ve site haritası özelliğinin nasıl kullanıldığını öğrendiniz (Sayfa 89–96). • Bir bağlantı hedefini yeni bir pencerede açılacak şekilde ayarladınız (Sayfa 96–97). • Bir belgenin her bölümü için isimli yer imleri eklediniz ve bu bölümlere ait karşılık gelen başlıkları isimli yer imlerine bağladınız (Sayfa 98–103). • Insert araç çubuğuyla otomatik olarak ve Properties denetçisindeki Link metin alanını kullanarak elle e-posta bağlantıları oluşturmayı öğrendiniz (Sayfa 104–106). 106 DERS 3
