Adobe Muse web siteleri için köprü oluşturma

Bu makalede, Adobe Muse'da köprülerle çalışma hakkında bilgiler verilmektedir. Köprüleri kullanarak harici web sitelerine, indirilebilir dosyalara, e-posta adreslerine ve daha pek çok içeriğe bağlanabilirsiniz. İndirilebilir dosyalar PDF, DOC, PPT, TXT, zengin medya veya ziyaretçilerinizle paylaşmak istediğiniz, fakat henüz Adobe Muse arabirimine eklenmesi desteklenmeyen diğer dosya türleri olabilir. Adobe Muse ana bilgisayar hesabınıza yüklenmiş olan dosyalara ve üçüncü taraf web sitelerinde barındırılan dosyalara bağlantı oluşturabilirsiniz.

Video | Köprü oluşturma

Sayfaya köprü ekleme

Bu bölümde, Menü öğelerini Bağlantı Bölgelerindeki iki öğeye bağlayarak manuel menüye bağlantı bağları ekleme yöntemleri açıklanmaktadır. Şu adımları uygulayın:

1. Sayfada herhangi bir yeri tıklatarak sayfayı seçin (Seçim Göstergesinde Sayfa sözcüğü görüntülenmelidir). Ardından, widget menü öğesini (widget kabı) iki kez tıklatın. İlk tıklattığınızda tüm Menü widget'ı, ikinci kez tıklattığınızda ise (Kahvaltı) menü öğesi seçilir. Seçim Göstergesinde Menü Öğesi sözcüğü görüntülenir.
2. Köprüler menüsünü tıklatarak sitedeki sayfaların ve bağlantı etiketlerinin tam listesini açın. Masaüstü bölümünde doğru sayfayı bulun. Oluşturduğunuz dört bağlantı etiketinin doğrudan listenin altında sıralandığını göreceksiniz. Uygun bağlantı etiketini seçerek menü öğesine bağlayın.

3. Daha fazla bağlı bağlantı eklemek için 2. adımı tekrarlayın.
4. Dosya > Site Özellikleri'ni seçin. Mizanpaj sekmesinde, Bağlı Bağlantılar İçin Etkin Durumu Etkinleştir onay kutusunun işaretli olup olmadığını kontrol edin. Bu seçenek tüm yeni siteler için varsayılan olarak etkindir, ancak eski bir siteyi düzenliyorsanız onay kutusunu işaretlemeniz gerekebilir.
5. Dosya > Sayfayı Tarayıcıda Önizle'yi seçin.

Farklı sayfa bölgelerini görmek için bağlantıları tıklattığınızda eşleşen etkin durumun gezinme menüsünde görüntülendiğini fark edeceksiniz. Bu site özelliği, ziyaretçilerin hangi bölgeyi görüntülediklerini anlamaları için onları yönlendirmeye yardımcı olur. Tarayıcıdan çıkın ve Adobe Muse'a geri dönün.

Ayrıca, sayfayı aşağı ve yukarı kaydırın ve sayfa her bir sayfa bölgesi boyunca hareket ettikçe sayfadaki kodun her bir bağlantı etiketinin yerini nasıl algıladığını ve manuel menünün etkin durumunu nasıl güncellediğini inceleyin. Bu teknik, hem dikey hem de yatay olarak kaydırılan sayfalarda çalışır.

Not: Bölgeler arasında geçiş yapılmasını sağlayan bağlantı etiketleri arasında aralık bırakabilmek için sayfanın yeterince uzun ve geniş olması gereklidir. Sayfa bölgeleri, içeriklerin tümü kaydırma yapmadan tarayıcı penceresine sığacak şekilde birbirine çok yakınsa bağlantı etiketleri bir sonraki bölgeye geçiş yapamaz.

6. Tarayıcıdan çıkın ve Adobe Muse'a geri dönün.

Bir sonraki bölümde, ziyaretçilerin PDF, DOC, MP3, MOV, PSD ve yüksek çözünürlüklü JPEG dosyaları gibi dosya formatlarını indirebilmeleri için indirme bağlantıları ekleme yolları hakkında bilgi edineceksiniz.

İpucu: Bir site projesinde başka tasarımcılarla birlikte çalışıyorsanız .Muse kaynak dosyalarına yönlendirilen bağlantılar oluşturup ekip üyelerinin bunları doğrudan web sitenizden indirmelerini sağlayabilirsiniz.

Bağlantı etiketi bölgeleri ve etkin durumlarla çalışma

Bir web sayfasında Bağlantı Bölgeleri oluşturduğunuzda, sayfanın farklı bölümlerini görsel olarak kolaylıkla ayırabilirsiniz. Bu bölümlerin her birine, bir sayfada gezinmeyi kolaylaştıracak şekilde tasarlanmış Bağlantı Bağları ile kolayca erişilebilir.

Bitmiş bir tasarımda en ideal olan, web sayfasının ziyaretçilerin ilgili menünün görüntülendiği bölgeye dikey olarak geçebilmelerini sağlayan bağlantı bağları içermesidir. Eklediğiniz bağlantı etiketlerinin, sayfaya iliştirdiğiniz birer işaret gibi olduğunu düşünün. Ziyaretçiler bu bağlantıya yönlendirilen bir bağlantıyı tıklattığında, bağlantı uzun sayfalar boyunca kayarak işaretin bulunduğu belirli bölüme atlar.

1. En üst kısımdaki gezinme alanında bulunan Bağlantı düğmesini tıklatarak Bağlantı aracını yükleyin.

2. Sayfanın, Üstbilgi alanındaki en üst düzeyde yer alan site navigasyonunun üstündeki en üst kısmını bir kez tıklatın. İsterseniz üstbilgi dikdörtgenini geçici olarak başka bir yere taşıyabilirsiniz. Üstbilgi içeriğini taşırsanız, işlemlerinizi tamamladığınızda tekrar yerine yerleştirmeyi unutmayın.
3. Açılan Bir Bağlantıyı Yeniden Adlandır iletişim kutusuna, bağlantının adını girin.

4. Bağlantı Bölgelerini tanımlamak ve daha fazla Bağlantı Bağı eklemek için 1 ile 3 arasındaki adımları tekrarlayın.

Bir sonraki adımda bir manuel Menü widget'ı ekledikten sonra, düğmeleri bağlantı etiketlerine bağlayarak ziyaretçilerin her bir menüyü okumak için sayfanın alt kısımlarına geçiş yapmalarını sağlayan gezinme öğesi oluşturacaksınız.

İndirilebilir dosyalara bağlantılar ekleme

1. Tasarım görünümünde bir sayfa düzenlerken Yazım aracını kullanarak Breakfast (Kahvaltı) menüsü metin çerçevesinin sağ üst köşesine yakın bir konumda yeni bir metin çerçevesi oluşturun. Download Menu (Menüyü İndir) sözcüklerini yazın.
2. Metin çerçevesi halen seçiliyken, Metin panelini kullanarak aşağıdaki ayarları uygulayın:
   • Web fontu: Kaushan Script (ya da tercih ettiğiniz bir font)
   • Font boyutu: 14
   • Renk: #EEE5C4 (3. Bölümde cream-menu olarak yeniden adlandırdığınız renk örneği)
   • Satır Aralığı: %57
   • Hizalama: Ortalanmış
3. Dolgu menüsünü kullanarak dolgu rengini Yok olarak ayarlayın. Görüntü bölümünün yanındaki klasörü tıklatın ve örnek dosyalar klasöründeki download-bg.png adlı dosyayı bulup seçerek arka plan görüntüsünü ayarlayın. Sığdırma menüsünün Orijinal Boyut olarak ayarlandığından ve Konum seçeneğinin ortalanmış olduğundan emin olun.

4. Dolgu menüsünün dışında bir yeri tıklatarak menüyü kapatın. Gerekirse Seçim aracını kullanarak metin çerçevesini yeniden boyutlandırın ve orta noktası Breakfast (Kahvaltı) menüsü metin çerçevesinin sağ üst köşesine denk gelecek şekilde yerleştirin.

5. Metin çerçevesi halen seçiliyken Kontrol panelindeki Bağlan menüsünü kullanarak Dosyaya Bağla seçeneğini işaretleyin. Açılan İçe Aktar iletişim kutusunda, dosyayı bulun ve Aç'ı tıklatarak seçin

Not: Dosyaya Bağla özelliğini kullanarak bir dosyayı bulup seçtiğinizde, dosya site yayınlandığında yüklenen veya site dışa aktarıldığında site dosyalarına dahil edilen site varlıklarından biri haline gelir. Bağlantı oluşturmak istediğiniz her dosyayı, sitenizde kullandığınız diğer görüntü dosyalarının yanı sıra siteden sitenin yerel klasörüne kopyalamak en iyi uygulama yöntemlerinden biridir.

Bağlantı, PDF dosyasına eklenmiştir. Varlıklar paneline baktığınızda, dosyanın artık site varlıklarından biri olarak listelendiğini göreceksiniz.

6. Seçim aracını kullanarak metin çerçevesini seçin. Download Menu (Menüyü İndir) metin çerçevesini kopyalayın ve Lunch (Öğle Yemeği) menüsünün sağ üst köşesine denk gelecek şekilde yerleştirerek yapıştırın. Bu adımı iki kez tekrarlayarak Dinner (Akşam Yemeği) ve Dessert (Tatlı) menülerinin sağ üst köşelerine denk gelecek şekilde yerleştirilmiş kopyalar oluşturun.

Gerçek bir projede, ziyaretçilerin menüleri inceleyebilecekleri ve yazdırabilecekleri indirilebilir dört ayrı menü dosyasına yönlendirilen bağlantılar oluşturabilirsiniz. Ancak bu eğitimin amacı doğrultusunda, İndir düğmesi her bir sayfa bölgesinde aynı PDF dosyasına bağlanır.

7. Dosya > Sayfayı Tarayıcıda Önizle'yi seçin. Yatay menüdeki menü öğelerinden birini tıklatarak sayfada söz konusu menüye geçin. Dinner (Akşam Yemeği) ve Dessert (Tatlı) menülerini görmek için ekranı aşağı doğru kaydırdığınızda, üstbilginin diğer sayfa içeriklerinin üst kısmında görüntülendiğini göreceksiniz. Bu davranış, food (yiyecek) sayfası Ön Plan kalıp sayfayı kullandığı ve bu sayfadaki üstbilgi içeriği ön plana taşındığı için oluşur.
8. Download Menu (Menüyü İndir) bağlantısını tıklatın ve PDF dosyasını makinenize indirin.

Kullandığınız tarayıcıya ve tarayıcı tercihlerine bağlı olarak farklı davranışlarla karşılaşacaksınız. Bazı tarayıcılar PDF dosyasını tarayıcı penceresinde görüntüler, bazılarıysa dosyayı masaüstüne indirerek Acrobat Pro veya Acrobat Reader kullanarak açmanızı sağlar.

E-posta adreslerine bağlantı oluşturma

Bir süredir Adobe Muse kullanıyorsanız Bağlantılar menüsünün kısa bir süre önce bölümler halinde yeniden düzenlenerek bağlantı oluşturabileceğiniz sayfa adlarının ve öğelerinin bulunmasının kolaylaştırıldığını fark etmiş olmalısınız. Bu bölümde, Bağlantılar menüsünün yapılandırılma şekli ve menü listesindeki öğeleri nasıl filtreleyebileceğiniz hakkında daha kapsamlı bilgiler edineceksiniz. Ayrıca, e-posta bağlantıları ekleme yöntemlerini de göreceksiniz.

1. Bağlantılar menüsündeki aşağı oku tıklatarak tam listeyi görüntüleyin.

2. Bağlantılar menüsü bölümler halinde yapılandırılmıştır. Son Kullanılan Bağlantılar seçeneği, siteye eklenmiş olan harici web sitelerine yönlendirilen tüm bağlantıları gösterir. Harici web sitelerine bağlanmak için dilediğiniz URL'yi doğrudan Bağlantılar alanına girebilirsiniz.
3. Masaüstü bölümünde geçerli sitede bulunan sayfalar vardır. Food (yiyecek) sayfasına eklediğiniz bağlantı etiketlerinin food sayfasının alt kısmında alfabetik olarak listelendiğine dikkat edin. Bu alfabetik liste, bir sitedeki birden fazla sayfada aynı adı taşıyan bağlantıları oluşturabileceğiniz ve bağlantı oluşturduğunuzda bunları yine de kolaylıkla tanımlayabileceğiniz anlamına gelir. Bu örnek sitede, sadece Masaüstü mizanpajı bulunmaktadır. Ancak, site Telefon veya Tablet için alternatif mizanpajlar içeriyorsa bu bölümler ilgili sayfa gruplarıyla görüntülenir.
4. Alt kısımdaki Dosyalar bölümünde, Dosyaya Bağla özelliği ve geçerli siteye eklenmiş olan tüm indirilebilir dosyalar bulunur. Daha önce KatiesCafeMenu.pdf dosyasına bir bağlantı eklediğiniz için dosyanın adı bu bölümde yer almakta ve sitedeki birden fazla sayfada bulunan sık kullanılan varlıklara yönlenen bağlantıları yeniden oluşturmak kolaylaşmaktadır.
5. Bir e-posta bağlantısı (tıklatıldığında, ziyaretçinin e-posta istemcisinin açılmasını ve Alıcı alanına girilen e-posta adresiyle birlikte yeni bir mesaj başlatılmasını sağlar) eklemek istiyorsanız Bağlantılar menüsü alanında aşağıda gösterildiği gibi mailto: önekiyle başlayan e-posta adresini girin:
   
   mailto:e-posta@adres.com
   
   
6. Bazen Bağlantılar menüsündeki öğe listesi oldukça uzun ve büyük web sitelerinde gezinme açısından zorlayıcı olabilir. Belirli bir sayfayı, bağlantıyı, dosyayı veya bağlanacağınız harici bir URL'yi arıyorsanız bağlantının ilk birkaç harfini Bağlantılar menü alanına yazın. Böylelikle, eşleşen öğeler görüntülenecektir. Bu özellik, listedeki bağlanmak istediğiniz öğeleri hızla filtrelemenizi ve bulmanızı sağlar.

Harici web sitelerine bağlantı ekleme

Sosyal medya simgesi düğmeleri yerlerine yerleştirildiğine göre, şimdi de sıra her bir sosyal ağ sitesine harici bağlantılar eklemeye geldi.

1. Facebook simgesini seçin ve Bağlantılar menüsü alanında Katie's Cafe Facebook sayfasına yönlendirilen şu bağlantıyı yazın (veya kopyalayıp yapıştırın): http://www.facebook.com/KatiesCafeSF
2. Google+ simgesini seçin ve Google+ alanında Katie's Cafe sayfasına yönlendirilen şu bağlantıyı yazın (veya kopyalayıp yapıştırın): https://plus.google.com/u/1/117800212967830061444/posts
3. Twitter simgesini seçin ve Twitter'da Katie's Cafe sayfasına yönlendirilen şu bağlantıyı yazın (veya kopyalayıp yapıştırın): http://twitter.com/katiescafesf
4. Tekrar Facebook simgesini tıklatarak seçin. Bağlantılar menüsünün sol tarafında bulunan altı çizili Bağlantılar sözcüğünü tıklatın. Açılan iletişim kutusunda Bağlantıyı yeni pencerede veya sekmede aç etiketini taşıyan onay kutusunu işaretleyin.
5. 4. adımı tekrarlayarak Google+ ve Twitter bağlantılarını da yeni bir tarayıcı penceresinde açılacak şekilde ayarlayın.

Bu, sık kullanılan bir web tasarımı düzenidir. Aynı sitedeki diğer sayfalara yönlendirilen bağlantılar aynı tarayıcı penceresinde açılır (Adobe Muse'da varsayılan olarak ayarlanmıştır); diğer dış web sitelerindeki sayfalara yönlendirilen bağlantılar ise yeni bir pencere veya sekmede açılır.

Bağlantı eklemeye hazırlanırken bir dosyanın URL'sini belirleme

Bağlantıyı Adobe Muse sitenizde bir sayfa eklemeden önce hazırlamak için bir tarayıcı kullanarak yayındaki yüklenmiş dosyayı ziyaret etmeniz gerekir. Aşağıdaki adımları uygulayın.

1. İstediğiniz bir tarayıcıyı başlatın.
2. Sitenize veya yüklenen bağımlı dosyayı içeren bir üçüncü taraf sitesine gidin. Google gibi bir arama motoru kullanabilir ya da sitenin etki alanı adını doğrudan tarayıcının Adres Çubuğuna yazabilirsiniz.

3. İstediğiniz sitenin ana sayfasına eriştikten sonra, sitede gezinmek için tıklatın veya söz konusu bağımlı dosyaya erişmek için tarayıcının adres çubuğuna tam URL'yi yazın. Bu adımı tamamladıktan sonra, tarayıcınız eriştiğiniz dosyayı görüntüler, oynatır veya indirir.
4. Yüklenen dosyaya erişmek için doğru URL'yi girdiğinizden emin olduktan sonra, tarayıcının Adres Çubuğundaki içeriğin tamamını seçin ve Düzenle > Kopyala seçeneğini belirleyin. Alternatif olarak Command+C (Mac) veya Control+C (Windows) kısayol tuşlarını da kullanabilirsiniz.

Bu noktada, bağımlı dosyaya yönlenen URL panoya kopyalanmıştır. Bağımlı dosyanın URL'sini bir sonraki bölümde anlatılan şekilde Köprü alanına yapıştırana kadar başka bir öğe kopyalamamaya dikkat edin.

Harici dosyalara bağlantılar ekleme

Bağımlı dosyayı başarıyla yükleyip tarayıcı aracılığıyla dosyaya erişerek dosyanın URL'sini kopyaladıktan sonra, uygulayacağınız son adım Adobe Muse sitenizin bir sayfasında bağlantıyı oluşturmaktır. Şu adımları uygulayın:

1. Adobe Muse'u başlatın. Sayfa minik resmini çift tıklatarak sayfayı Tasarım görünümünde açın.
2. Bir metin, yerleştirilmiş bir görüntü veya ziyaretçilerin bağımlı dosyayı indirmek veya dosyaya erişmek için tıklatacağı "düğme" olmasını istediğiniz bir dikdörtgen şekil seçin.
3. Metin veya sayfa öğesini seçtiğinizde Köprü alanı açılır menüsünü tıklatıp URL'yi (tam yolu) daha önce kopyaladığınız bağımlı dosyaya yapıştırın.

Bağlantıyı yeni bir tarayıcı penceresinde açılacak şekilde ayarlamak istiyorsanız Köprü penceresinin hemen solundaki Köprü etiketini tıklayın. Açılan iletişim kutusunda Bağlantıyı yeni pencerede veya sekmede aç seçeneğinin yanındaki onay kutusunu etkinleştirin.

Sayfayı kaydedin ve değişiklikleri sayfada yayınlayın.

Sayfayı bir tarayıcıda ziyaret edin. Bağlantılı metni veya düğmeyi tıklatıp bağlantının beklenen şekilde çalıştığını doğrulayın.

Adobe Muse ile çalışmaya yönelik daha fazla ipucuna Adobe Muse Yardım ve Eğitimler sayfasından veya Adobe Muse Events (Adobe Muse Etkinlikler) sayfasındaki canlı ve kaydedilmiş web seminerlerinden ulaşabilirsiniz.