Mobil aygıtlar veya akıllı telefonlar için web siteleri oluşturmayı öğrenmek için bu makaleyi okuyun.

Not:

Adobe Muse artık yeni özellikler eklemeyecek ve 26 Mart 2020'de desteği sonlandıracak. Ayrıntılı bilgi ve yardım için bkz. Adobe Muse hizmet sonu sayfası.

Adobe Muse'daki uyumlu web tasarımını kullanarak mobil aygıtlar için web siteleri oluşturup tasarlayabilirsiniz. Uyumlu mizanpaj sayesinde, mobil aygıtlar dahil olmak üzere tüm aygıtlara yönelik web siteleri oluşturmak için tek bir Muse dosyasını kullanabilirsiniz.

Önce sitenizi uygun şekilde tasarlamak istediğiniz tarayıcı genişliğini belirlemeniz gerekir. Daha sonra sitenizi tasarlamaya devam edebilirsiniz. Uyumlu mizanpaj kullanarak mobil siteler oluşturmayla ilgili daha fazla bilgi için bkz. Uyumlu siteler oluşturma.

Yalnızca mobil aygıtlara yönelik siteler için alternatif mizanpaj tasarlamak istiyorsanız bu makaleyi okumaya devam edin.

Yalnızca mobil aygıtlar için web siteleri tasarlama

Adobe Muse'u kullanarak masaüstü bilgisayarlar, akıllı telefonlar ve tabletlerde görüntülenecek web içerikleri için site mizanpajları oluşturabilirsiniz. Mobil tasarım özelliklerini kullanarak telefonlar, tabletler ve masaüstü bilgisayarlar için alternatif mizanpajlar oluşturabilirsiniz.

Adobe Muse, %100 genişlikte öğeler ve Yapışkan Altbilgi işlevi gibi ayarlar sayesinde tasarımınızın bugün piyasada bulunan çeşitli aygıtların ekranlarında mükemmel şekilde görüntülenmesini sağlar. Adobe Muse, olası tüm ekran boyutları için etkileyici tasarımlar oluşturmanızı sağlayacak, yakından tanıdığınız iş akışlarını kullanmanıza olanak tanır.

Mobil aygıtlara yönelik alternatif bir mizanpaj oluşturmak için:

  1. Adobe Muse'u açın ve Dosya > Yeni Site öğesini tıklatın.

    Belirli aygıtlara yönelik siteler oluşturmak için Sabit Genişlik'i seçin.
    Mobil web siteleri oluşturmak için Sabit Genişlik'i seçin.

  2. Sabit Genişlik'i seçin, ardından aynı iletişim kutusunda Gelişmiş Ayarlar öğesini tıklatın.

    Yeni site için gelişmiş ayarlar
    Yeni bir site oluştururken Gelişmiş Ayarlar.

  3. Maks. Sayfa Genişliği veya maksimum sayfa genişliğini belirtin.

    Cep telefonları için uygun tarayıcı genişliğini belirleyin ve değeri belirtin.

  4. Mobil sitenizin Kenar Boşluğu ve Dolgu değerlerini girin. Aşağıdaki ayrıntıları girin:

    • Sayfa Genişliği ve Yüksekliği: Sayfanın Başlangıç boyutlarını ayarlamanıza olanak tanır. İçerik eklemeye devam ettikçe Muse sayfa yüksekliğini otomatik olarak artırdığı için sayfa yüksekliğinin maksimum değeri belirlenmemiştir.
    • Sütunlar ve Sütun Genişliği: Sütunlar, bir Muse web sayfasını eşit bölümlere ayırarak tasarım öğelerini doğru bir şekilde hizalamanızı sağlar. Muse, Sütun Genişliğini belirtilen Sütun sayısı ve Sütun Aralığı değerine göre otomatik olarak ayarlar.
    • Kenar Boşlukları ve Dolgu: Kenar Boşlukları, web sayfasında tasarım alanı dışında kalan alanın temizlenmesini sağlar. Dolgu, web sayfasının tasarım alanı içindeki bölgenin temizlenmesini sağlar.

    Tamam'ı tıklatın.

    Mobil web sitesi için mizanpajlarınızı tasarlamaya başlayabilirsiniz.

Mevcut bir Adobe Muse sitesine telefon mizanpajı ekleme

Yeni bir proje oluştururken öncelikle istediğiniz bir mizanpajı tasarlayabilir, ardından aynı Muse dosyası içinde ek mizanpajlar oluşturabilirsiniz.  Bir siteyi yayınladığınızda veya dışa aktardığınızda, Adobe Muse otomatik olarak tüm mizanpajlar için tüm sayfaların listesini içeren sitemap.xml adlı bir dosya oluşturur. sitemap.xml dosyası, diğer site varlıklarıyla birlikte yüklenir. Bu dosya, sayfaların arama sonuçlarında doğru bir şekilde sıralanması için arama motorlarının siteyi dizinlemesini sağlayarak bir sitenin Arama Motoru Optimizasyonunu (SEO) iyileştirir.

Bir telefon için yeni bir mobil mizanpaj oluşturmak istediğinizde, varolan bir sitede yapmanız gereken ilk işlem içeriği inceleyip akıllı telefon kullanıcı deneyimi için gerekli olan öğeleri belirlemektir. Akıllı telefon ziyaretçileri genellikle hareket halinde oldukları ve içeriği daha küçük bir ekranda görüntüledikleri için tasarımı basitleştirmeniz ve yalnızca faydalı ve dokunmatik ekranda etkileşim kurması kolay içerikleri görüntülemeniz çok önemlidir.

  1. Alternatif bir telefon mizanpajı eklemek istediğiniz mevcut .Muse dosyasını açın.

  2. Projenizdeki her bir sayfayı açın ve Sayfa > Alternatif Mizanpaj Ekle > Telefon öğesini tıklatın.

    Telefon mizanpajı seçenekleri ekleme
    Mobil site oluşturmak için Telefon mizanpajı ekleyin.

  3. Menüyü kullanarak kopyalamak için varolan bir mizanpajı seçebilirsiniz. Bu makalenin amacı doğrultusunda, Masaüstü'nü seçerek masaüstü mizanpajını telefon mizanpajına kopyalayın.

    Site Planı, Sayfa Nitelikleri ve Tarayıcı Dolgusunu kopyalama seçeneklerinin olduğunu göreceksiniz. Varolan masaüstü site bilgilerini telefon mizanpajına kopyalamak için varsayılan ayarları koruyun.

  4. İletişim kutusunu kapatmak ve telefon mizanpajını eklemek için Tamam'ı tıklatın.

    Muse, telefon mizanpajı için bir site planı oluşturur. Sayfa adları, sitenin yapısı ve kalıp sayfanın nitelikleri buraya kopyalanır. Telefon mizanpajı Muse projesine eklendiği için Telefon mizanpajı düğmesinin adının yanındaki artı (+) işareti artık görünmez.

    Asıl sayfa içeriğinin telefon mizanpajı sayfa minik resmine eklenmediğini göreceksiniz. Bunun amacı, mobil mizanpajın her bir sayfasına gerçekten istediğiniz içerikleri kopyalamanızı sağlamaktır. Her bir yeni sayfaya istediğiniz içerikleri eklerken içeriği mobil ekranın küçük boyutlarına sığacak şekilde yeniden boyutlandırabilirsiniz.

    Ana sayfanın sağındaki artı işaretini tıklatarak yeni sayfalar ekleyebilirsiniz. Site haritasını oluşturduktan sonra, mobil deneyimi tasarlamaya başlayabilirsiniz.

    Telefon mizanpajına yönelik kalıp sayfaları nasıl oluşturacağınızı öğrenmek için sonraki bölümü okuyun.

    Yeni sayfalar ekleyerek mobil mizanpaj için site haritasını oluşturun
    Yeni sayfalar ekleyerek mobil mizanpaj için site haritasını oluşturun.

Kalıp sayfayı hazırlama ve sık kullanılan web sayfası öğelerini ekleme

  1. Plan Görünümünde A-Kalıp telefon sayfasını çift tıklatıp Tasarım görünümünde açın.

  2. Arka plan görüntüsünü ayarlamak için Tarayıcı Dolgusu arabirimini kullanın.

  3. Görüntü bölümünde Görüntü Ekle öğesini tıklatın. Arka plan görüntüsü olarak ayarlamak istediğiniz dosyayı bulun ve seçin.

    Görüntü Ekle seçenekleri
    Telefon kalıp sayfasına bir arka plan görüntüsü ekleyin.

  4. Sığdırma seçeneğini Doldurmak İçin Ölçekle olarak ayarlayın ve merkez konumu tıklatın.

  5. Sayfanın dışındaki gri alanı veya Kontrol panelinde herhangi bir yeri tıklatarak Tarayıcı Dolgusu arabirimini kapatın.

Adobe Muse, Köprüleri kullanarak harici sayfalara, indirilebilir dosyalara, web sayfalarındaki bölümlere ve daha fazlasına kolayca bağlantı oluşturmanızı sağlar. Ziyaretçilerin web sitenizin sayfaları arasında kolayca gezinebilmesi için doğru site navigasyonunun hazırlanması önemlidir. İyi oluşturulmuş bir site navigasyonu, web sitenizi arama motorları için optimize etmenize de yardımcı olur. Daha fazla bilgi için bkz. Köprü Oluşturma.

Köprüler açılır menüsü, site haritanıza eklenen sayfaları veya bağlantı bağlarını listeler. Doğru bağlantıları aramak için sayfanın veya bağın adını yazmaya başlayın. Yalnızca ilk birkaç harfi yazdığınızda Köprüler menüsü sonuçları filtreleyerek açılan bir liste halinde görüntüler. Bu özellik, güncellemek istediğiniz bağlantılara hızla erişmenizi kolaylaştırır.

Köprü seçenekleri
Köprü menüsü alanına ilk birkaç harfi yazarak bağlantılar listesini filtreleyin.

Telefon mizanpajı sayfalarına içerik ekleme

Öncelikle Ana Sayfa sayfasına son halini verelim.

  1. İç (Telefon) sekmesini tıklatın. Dört adet numaralandırılmış düğmeden oluşan grubunun tamamını kopyalayın.
  2. Sayfaya Git özelliğini kullanarak Ana Sayfa (telefon) sayfasına geçin ve grubu yapıştırın. Önceki bölümde eklediğiniz bağlantılar korunur. Böylelikle Ana Sayfa sayfası ve İç kalıp sayfası aynı navigasyonu paylaşmaktadır.
  3. Seçim aracını kullanarak grubu Ana Sayfa sayfasının ortasına, altbilginin alt kısmına yakın bir konuma yerleştirin.
  4. Çalışma (Masaüstü) sekmesini tıklatarak çalışma sayfasına geri dönün. "There's more than one way to solve a problem." (Bir sorunu çözmenin birden çok yolu vardır.) yazan en sol bölmedeki metin çerçevesini kopyalayın.
  5. Ana Sayfa (Telefon) sekmesini tıklatıp metin çerçevesini yapıştırın. Seçim aracını kullanarak metin çerçevesini düğme grubunun üzerinde ortalanacak şekilde yerleştirin.
Ana Sayfa tasarımı tamamlanmıştır
Ana Sayfa tasarımı tamamlanmıştır.

Bundan sonra, Bölüm 01 sayfası için içerik ekleme yöntemleri gösterilecektir.

  1. Çalışma (Masaüstü) sekmesini tıklatarak Çalışma sayfasına geri dönün. Soldaki ikinci bölmede beyaz yuvarlatılmış arka plan dikdörtgenini ve üç metin çerçevesini seçin. Üç metin çerçevesi 01 dairesini, bölüm 01 yer tutucu metnini ve turuncu Telefon düğmesini içerir. Seçilen öğeleri kopyalayın.
  2. Command+J (Mac) veya Control+J (Windows) tuşlarına basıp Bölüm 01'in ilk birkaç harfini yazın. Bölüm 01 telefon sayfasını seçmek için aşağı ok tuşunu tıklatın, ardından Return/Enter tuşuna basarak Tasarım görünümünde açın.
  3. Telefon mizanpajının Bölüm 01 sayfasına öğeleri yapıştırın. Seçim aracı ile geçici olarak görünen kılavuzları da kullanarak sayfanın ortasında konumlandırın.

Bölüm 01 sayfasının amacı, işletmeyi kısaca tanıtmak ve mobil ziyaretçilerin işletmeyi aramalarını kolaylaştırmaktır. Mobil web siteleri tasarlarken, ziyaretçilerin ekranlarına dokunarak akıllı telefondaki telefon çeviricinin bir numarayı aramasını sağlayan yeni bir bağlantı türü ekleyebilirsiniz. Bu özellik, olası müşterilerin bir işletmeyi kolaylıkla aramasını sağladığı için mükemmel bir mobil site özelliğidir.

Bir mobil mizanpajda bir telefon numarasını çevirmeyi sağlayan bir bağlantı eklemek için şu adımları uygulayın:

  1. Seçim aracını kullanarak Telefon düğmesini seçin.
  2. Bağlantılar menüsü alanına başına +1 ekleyerek telefon numarasını yazın, örnek:
    tel:+14155551234

Bu format, mobil tarayıcıların telefon numarası bağlantılarını tanıdığı formattır.

  1. Return veya Enter tuşuna basarak bağlantıyı kaydedin.

Not: Bir e-posta bağlantısı oluşturmayı tercih ederseniz Köprü menüsü alanına şu formatı girebilirsiniz:
mailto:designers@design-is-fun.com

Telefon düğmesi bağlantısını ekledikten sonra Bölüm 01 sayfasının tasarımı tamamlanır.

  1. Çalışma (Masaüstü) sekmesini tıklatarak Çalışma sayfasına geri dönün. Beyaz yuvarlatılmış arka plan dikdörtgenini, yeşil 02 dairesini, Bölüm 02 metin çerçevesini, gömülü haritayı ve yeşil Harita düğmesini seçin. Seçilen öğeleri kopyalayın.
  2. Command+J (Mac) veya Control+J (Windows) tuşlarına basıp Bölüm 02'nin ilk birkaç harfini yazın. Bölüm 02 telefon sayfasını seçmek için aşağı ok tuşunu tıklatın, ardından Return/Enter tuşuna basarak Tasarım görünümünde açın.
  3. 1. adımda kopyaladığınız öğeleri, telefon mizanpajının Bölüm 02 sayfasına yapıştırın. Seçim aracı ile kılavuzları da kullanarak öğeleri sayfanın ortasında konumlandırın.

Bölüm 02 sayfası, etkileşimli bir harita oluşturmak için Google Haritalar web sitesinde oluşturulmuş gömülü HTML kodu içerir.

Muse'u Kullanmaya Başlama başlıklı eğitimi takip ettiyseniz Google web sitesinden Google Harita kaynak kodunu kopyaladığınızı ve Muse'daki gömülü HTML özelliğini kullanarak kodu sayfaya yapıştırdığınızı hatırlayacaksınız.

Google Harita kodu, dokunmatik ekranlarda parmak hareketleri desteğini zaten içerdiği için bu tür aygıtları olan ziyaretçiler haritayla kolaylıkla etkileşim kurabilir. Bu örnek projede, harita boyutları önceden yeniden boyutlandırılmıştır.

Ancak, projelerinizdeki gömülü HTML içeriğinin boyutlarını yeniden ayarlamanız gerekiyorsa içeriği sağ tıklatıp HTML'yi seçerek kodu HTML penceresinde görüntüleyebilirsiniz. Koddaki yükseklik ve genişlik değerlerini düzenleyerek haritayı daha küçük bir ekrana sığacak şekilde yeniden boyutlandırabilirsiniz.

Koddaki gömülü HTML öğelerini yeniden boyutlandırma
Gömülü HTML öğelerini yeniden boyutlandırmanız gerekiyorsa koddaki boyutları güncelleyebilirsiniz.

HTML Düzenle penceresini açtıysanız değişiklik yapmadan kapatmak için Tamam'ı tıklatın.

  1. Harita düğmesini seçin.

Bu defa, mobil ziyaretçilerin haritanın tam sürümünü yeni bir tarayıcı penceresinde görüntülemesini kolaylaştırmak için bir harici web sitesine (Google Haritalar) bağlantı ekleyeceğiz.

  1. Aşağıdaki bağlantıyı kopyalayıp Bağlantılar menüsü alanına yapıştırın:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Bağlantılar menüsünün solundaki Bağlantılar sözcüğünü tıklatın. Açılan iletişim kutusunda Bağlantıyı yeni pencerede veya sekmede aç onay kutusunu işaretleyin. Ayrıca Araç İpucu alanına şu metni girin: Map to Adobe Fremont (Adobe Fremont Haritası).
Köprü seçenekleri
Bağlantıyı yeni bir tarayıcı penceresinde açılacak şekilde ayarlayın ve bir araç ipucu ekleyin.

  1. Bağlantılar iletişim kutusunu tıklatarak kapatın.

Bundan sonra, Bölüm 03 sayfası için içerik ekleme yöntemleri gösterilecektir.

  1. Çalışma (Masaüstü) sekmesini tıklatarak Çalışma sayfasına geri dönün. Beyaz yuvarlatılmış arka plan dikdörtgenini, mor 03 dairesini, Bölüm 03 metin çerçevesini, iletişim formunu ve gönder düğmesini seçin. Seçilen öğeleri kopyalayın.
  2. Command+J (Mac) veya Control+J (Windows) tuşlarına basıp Bölüm 03'ün ilk birkaç harfini yazın. Bölüm 03 telefon sayfasını seçmek için aşağı ok tuşunu tıklatın, ardından Return/Enter tuşuna basarak Tasarım görünümünde açın.
  3. 1. adımda kopyaladığınız öğeleri, telefon mizanpajının Bölüm 03 sayfasına yapıştırın. Seçim aracı ile kılavuzları da kullanarak öğeleri sayfanın ortasında konumlandırın. Masaüstü İletişim Formu widget'ına uygulanan stiller, telefon mizanpajına kopyalanırken de korunur. Formu bir mobil mizanpaj için hazırlarken yapılan tek değişiklik, formu ve form öğelerini daha küçük bir ekrana sığacak şekilde yeniden boyutlandırmaktır.

Bölüm 03 sayfası, gönderilen form verilerini işlemek için Business Catalyst sunucu tarafı komut dosyalarını ve veritabanını kullanan bir İletişim formu widget'ı içerir. Yayınla öğesini tıklatıp Muse'daki site dosyalarını yüklediğinizde, form işlevi otomatik olarak çalışır.

Not: Bitmiş Muse web sitenizi barındırmak için başka hizmet sağlayıcılarını kullanabileceğiniz halde, Business Catalyst sunucularında barındırılmadıkları takdirde iletişim formları oluşturmak için bazı ekstra kodlama işleri yapmanız gerekeceğini unutmayın.

Bu örnek projede, iletişim formunda CAPTCHA etkin değildir. CAPTCHA, formun bir komut dosyası veya "spam bot" tarafından değil, bir insan tarafından gönderildiğini doğrulamak istediğinizde ekleyebileceğiniz, İletişim Formu widget'ları için Seçenekler menüsünde bulunan bir ayardır; CAPTCHA arabirimi, ziyaretçinin form aracılığıyla mesajını başarıyla gönderebilmek için yazması gereken bir dizi karakter içeren bir görüntü gösterir. Spam bot form gönderimleri can sıkıcı olabilir. Ancak sitenin bir cep telefonunda kullanılabilirliğini de göz önünde bulundurmanız gerekir. Formu doldurulması zor şekilde tasarlarsanız ziyaretçiler mesajlarını göndermek istemeyebilirler.

Bölüm 03 sayfası tamamlanmıştır. Gönder düğmesi bağlantısını eklemenize gerek yoktur. Bu düğme, İletişim Formu widget'ının bir parçası olarak önceden oluşturulmuştur.

Telefon mizanpajının son sayfası olan Bölüm 04, bir Slayt Gösterisi widget'ı içerir. Muse'daki widget'lar tüm modern masaüstü ve mobil tarayıcılarla birlikte çalışacak şekilde tasarlanmış ve test edilmiştir. Dolayısıyla, slayt gösterisinin dokunmatik ekranda çalışmasını sağlamak için herhangi bir değişiklik yapmanıza gerek yoktur.

Masaüstü mizanpajının çalışma sayfasındaki içeriği telefon mizanpajındaki Bölüm 04 sayfasına kopyalamak için şu adımları uygulayın:

  1. Çalışma (Masaüstü) sekmesini tıklatarak Çalışma sayfasına geri dönün. Beyaz uzun arka plan dikdörtgenini, kırmızı 04 dairesini, Slayt Gösterisi widget'ını ve Bölüm 04 metin çerçevesini seçin. Seçim aracını kullanarak tüm öğelerin üzerine sürükleyip hepsini aynı anda seçebilirsiniz. Seçilen öğeleri kopyalayın.
  2. Command+J (Mac) veya Control+J (Windows) tuşlarına basıp Bölüm 04'ün ilk birkaç harfini yazın. Bölüm 04 telefon sayfasını seçmek için aşağı ok tuşunu tıklatın, ardından Return/Enter tuşuna basarak Tasarım görünümünde açın.
  3. 1. adımda kopyaladığınız öğeleri, telefon mizanpajının Bölüm 03 sayfasına yapıştırın. Seçim aracı ile kılavuzları da kullanarak öğeleri sayfanın ortasında konumlandırın. Masaüstü İletişim Formu widget'ına uygulanan stiller, telefon mizanpajına kopyalanırken de korunur. Formu bir mobil mizanpaj için hazırlarken yapılan tek değişiklik, formu ve form öğelerini daha küçük bir ekrana sığacak şekilde yeniden boyutlandırmaktır. Muse'da oluşturduğunuz mobil mizanpajlara etkileşimli özellikler içeren widget'lar (Slayt Gösterisi widget'ları gibi) eklediğinizde, Seçenekler panelinde Çekmeyi Etkinleştir seçeneğinin bulunduğunu göreceksiniz. Bu seçenek varsayılan olarak etkindir. Bu sayede, mobil tasarımlarınıza eklediğiniz tüm widget'lar, otomatik olarak ziyaretçilerin dokunmatik ekranlarda dokunma ve hareket özelliklerini kullanmasını sağlayacak şekilde ayarlanır. Bölüm 04 sayfası, bir minik resme dokunulduğunda ilgili görüntüyü gösteren bir Slayt Gösterisi widget'ı içerir. Slayt gösterisi, galerideki görüntüler arasında geçiş yapmak için yatay geçiş özelliğini kullanacak şekilde yapılandırılmıştır. Bu örnekte, fotoğrafların görüntülenmesi için kullanıcı etkileşimi gereklidir; ancak isterseniz Slayt Gösterisi widget'ını otomatik oynatılacak şekilde ayarlayabilir ve sayfa yüklendiğinde görüntüler arasında otomatik olarak geçiş yapılmasını sağlayabilirsiniz.

Not: Slayt Gösterisi widget'larını Soldur, Yatay veya Dikey geçişlerini kullanacak şekilde yapılandırırsanız Muse'daki kod Parmakla çekme hareketini otomatik olarak etkinleştirerek ziyaretçilerin slayt gösterisi görüntülerini çevirmek için dokunmatik ekranlarını kaydırarak çekmelerini sağlar.

Muse'da mobil mizanpaj tasarımları oluşturma başlıklı bir sonraki bölümde, tüm mobil platformlarda varlıkları kolaylıkla güncelleme yöntemleri ve her bir mobil mizanpaj için Muse sitenizi yayınlamanın yolları açıklanmaktadır.

Mobil web siteniz için varlıkları güncelleme ve en iyileştirme

Masaüstü bilgisayarlarla karşılaştırıldığında, tabletler ve akıllı telefonların işlemcileri daha sınırlı, bağlantı hızları daha yavaş, depolama kapasiteleri ise daha küçüktür. Bu nedenle, mobil aygıtlar için yapılan site tasarımları sunulurken belirli noktalara özel olarak dikkat edilmesi gerekir.

Muse'da, sitenin hızla yüklenmesi ve kabul edilebilir bir performans göstermesini sağlamak için mobil mizanpajlarda görüntülenen grafikleri en iyileştirmenize yardımcı olacak özellikler bulunur.

  1. Masaüstü mizanpajını görüntülemek için Command/Control+7 tuşlarına basın ve A-Kalıp masaüstü dosyasını çift tıklatarak Tasarım görünümünü açın.
  2. Panel grubundaki sekmesini tıklatarak Varlıklar panelini açın ve paneli etkinleştirin. Kapalıysa Pencere > Varlıklar öğesini seçin.
  3. Yeşil tepelerin göründüğü büyük arka plan görüntüsünü seçin. Varlık, Varlıklar panelinde vurgulanır.
  4. background.jpg adlı varlığı tıklatın ve sitede kullanılan örnekler listesini genişletin. Arka plan görüntü dosyasının, hem telefon hem de masaüstü mizanpajlarında kullanıldığını belirten iki farklı simgeyle üç kez listelendiğini göreceksiniz.
Varlıklar paneli
Varlıklar panelinde background.jpg örneklerini inceleyerek varlığın sitede nerede bulunduğuna yönelik bilgi edinin.

Bu küçük örnek sitede, varlıklar listesi oldukça yönetilebilir olsa da daha büyük siteler oluşturduğunuzda daha uzun ve daha güç taranabilir olabilir.

Varlıklar listesini daha kolay gezinilebilir bir hale getirmek için her varlığın ilk öğesini seçip soldaki oku tıklatarak grubu daraltabilirsiniz. Varlığın site projesinde kullanıldığı örneklerin tam listesini görmek için genişletmek istediğinizde oku tekrar tıklatabilirsiniz.

Belirli bir mizanpaj için kullanılan varlıkları bulmak istediğinizde, Varlıklar panelinde Masaüstü, Tablet veya Telefon simgelerinin görüntülendiği en sağdaki sütunun en üst kısmını tıklatın. Böylece varlıklar listesi, her bir mizanpaj birleşik bir grup halinde görüntülenecek şekilde sıralanır.

Varlıklar paneli
Varlıklar panelindeki herhangi bir sütunun üstbilgi başlığını tıklatarak varlıklar listesini ilgili türe göre sıralayın.

Tüm mizanpajlarda kendi örneklerinin tümünü güncelleyecek olan bir grafikte değişiklik yapmak istediğinizde bir varlık adını sağ tıklatarak açılan menüden Orijinali Düzenle öğesini seçin.

Tüm sitenin varlığını güncellemek için Orijinali Düzenle öğesini seçin
Tüm sitenin varlığını güncellemek için Orijinali Düzenle öğesini seçin.

Yerleştirdiğiniz orijinal dosya, Photoshop, Fireworks veya dosyayı oluşturduğunuz görüntü düzenleme programında açıldığı için değişiklikleri kolayca yapabilirsiniz.

Gözden geçirilen orijinal dosyayı kaydedip Muse'a geri döndüğünüzde, Varlıklar panelindeki öğe Eşitleme Dışı simgesini görüntüleyerek sitedeki grafiğin sürümünün artık kaynak dosyayla eşleşmediğini belirtir. Dosyayı tekrar sağ tıklatın ve Güncelle öğesini seçerek yeni sürümü kullanmak için grafiğin tüm versiyonlarını güncelleyin.

Güncelle özelliğini kullanarak sitede kullanılan varlığın tüm örneklerini gözden geçirebilirsiniz
Güncelle özelliğini kullanarak sitede kullanılan varlığın tüm örneklerini gözden geçirebilirsiniz.

Mobil mizanpajları önizleme

Oluşturduğunuz site tasarımlarını önizlemek için kullanabileceğiniz pek çok seçenek mevcuttur:

Masaüstü mizanpajının Tasarım Görünümündeyken, Önizleme öğesini tıklatarak dahili Webkit tabanlı emülatörün HTML, CSS ve JavaScript'i işlemesini görebilirsiniz. Önizleme, siteyi yayınlamadan önce mizanpajların tarayıcıda nasıl göründüğünü görmenizi ve bir aygıtla çevrimiçi ortamda kontrol etmenizi sağlar.

Telefon görünümünün Tasarım görünümündeyken, Önizleme öğesini tıklatarak telefon mizanpajının görüntüsünü görebilirsiniz. Önizleme Boyutu menüsünü kullanarak iPhone 4, iPhone 5, Samsung Galaxy S III ve Nokia Lumia 920 arasından seçim yapabilir ve mizanpajın farklı ekran boyutlarında nasıl göründüğünü görebilirsiniz.

Mobil mizanpajı önizleme
Önizleme Boyutu menüsü, sayfaları telefon veya tablet mizanpajında önizlerken açılır.

Önizleme Boyutu penceresinin sağındaki simgeyi tıklatarak mizanpajı yatay veya dikey modlarda görebilirsiniz.

Önizleme Boyutu menüsünde, en sık kullanılan mobil telefon ekran boyutları için önceden tanımlanmış yükseklik ve genişlik oranları bulunur.

Motorola Droid gibi bazı akıllı telefonların ekranları diğerlerine göre daha geniştir. Bir ziyaretçi geniş ekranlı telefona sahipse Muse'daki Görünüm Penceresi özelliği, telefon mizanpajının genişliğini otomatik olarak mevcut ekrana uygun şekilde ölçekler.

Önizleme modundayken, bağlantıları tıklatabilir ve sitede gezinebilirsiniz. Parmakla çekme hareketini simüle eden kaydırma hareketini yapabilirsiniz. Ancak gerçek testi, bir aygıtta gerçekleştirmelisiniz.

Önizleme modunda Önizleme Boyutu menüsünün yanındaki i düğmesini tıklattığınızda, Edge Inspect adındaki Adobe aracını açıklayan bağlantıyı içeren bir not göreceksiniz. Edge Inspect, bir Chrome tarayıcı uzantısı kullanarak bilgisayarınızdan mobil aygıtlara bağlanmanızı ve bu aygıtları masaüstündeki Chrome tarayıcısında görüntülenen içerikle eşitlemenizi sağlar.

Edge Inspect ile Chrome'u ve Adobe Muse'daki Tarayıcıda Önizle seçeneğini kullanarak masaüstü bilgisayarınızda bir site görüntülediğinizde, aynı sayfa otomatik olarak bağlı aygıtlarda da görünür. (Chrome'u varsayılan tarayıcınız olarak ayarlamanız gerekir).

İsterseniz, aynı ağ bağlantısı kullanılarak bağlantı kurulan aygıtınızın emülasyonunun masaüstü bilgisayarınızın ekranında görünmesini sağlayan Reflection adlı üçüncü taraf aracı da satın alabilirsiniz. Akıllı telefon veya tabletinizle bir sitede gezinirken, emülatör aygıtınızın dokunmatik ekranını yansıtır.

Mobil mizanpajlarla ilgili diğer özellikler

Yapışkan altbilgiler

Muse'un önceki sürümlerinde olduğu gibi kılavuzları sürükleyerek sayfanın alt kısmındaki alanı tanımlayabilir ve altbilgi bölgesini oluşturabilirsiniz. Ayrıca, dilediğiniz içerik öğesini Altbilgi Öğesi olarak da ayarlayabilirsiniz. Bu şekilde, altbilgi öğesi sayfa uzunluğuna göre Site Özellikleri'nde ayarlanan minimum sayfa yüksekliğinin altında veya varolan sayfa içeriğinin altında görüntülenebilir.

Altbilgi, sayfa içeriğinin üzerine bindirilmeden tutarlı bir şekilde sayfaların altına dikey olarak yerleştirildiğinden dolayı, bir sitede farklı boylar bulunduğunda altbilgi içeriğini tanımlamak oldukça faydalıdır.

Yapışkan Altbilgiler seçeneği varsayılan olarak etkindir. Bu özellik, geniş masaüstü monitörlere sahip ziyaretçiler için özel olarak tasarlanmıştır. Yapışkan Altbilgiler, bir Apple sinema ekranında olduğu gibi, tarayıcı penceresi web sayfası tasarımından çok daha büyük olsa bile altbilginin istenen konumda kalmasını sağladığı için çoğu durumda, web siteleriniz için bu seçeneği etkin durumda tutmak isteyebilirsiniz.

Özelliğin nasıl çalıştığını görmek için bir Muse sitesini bir tarayıcıda önizleyerek sayfayı uzaklaştırabilirsiniz. Oluşturduğunuz sayfa içeriği tarayıcı penceresine göre çok küçük olduğunda, altbilgi alt kısma yaslanmaz, altbilgi alanının altında tarayıcı penceresi görüntülenir.

Muse'da yeni siteler oluşturduğunuzda, Yapışkan Altbilgi seçeneğinin Yeni Site iletişim kutusunda etkin olduğunu göreceksiniz.

Yeni Site seçenekleri
Yapışkan Altbilgi onay kutusu yeni siteler oluştururken otomatik olarak işaretlenir.

Genel anlamda, site tasarlarken en iyi uygulama Yapışkan Altbilgiler özelliğini kullanmaktır. Ancak, sayfa boylarının istenenden daha uzun şekilde görüntülendiğini fark ederseniz (bir sitede az miktarda sayfa içeriği olması ve sayfaların oldukça kısa olması nedeniyle), Sayfa Özellikleri iletişim kutusunda onay kutusunun işaretini kaldırarak seçeneği dilediğiniz zaman devre dışı bırakabilirsiniz.

Yapışkan Altbilgi seçeneğini Sayfa Özelliklerinden devre dışı bırakın.
Bir site oluşturduktan sonra, Sayfa Özelliklerini güncelleyerek Yapışkan Altbilgi seçeneğini devre dışı bırakın.

İğnelenmiş öğeler

Muse'un oluşturduğu kod, tüm modern web tarayıcılarda ve platformlarda görüntülendiğinden ve beklenen şekilde davrandığından emin olmak için test edilir.

İğnelenmiş sayfa öğeleri desteği, masaüstü ve mobil aygıt tarayıcılarında farklılık gösteren web standartlarından biridir. Masaüstü aygıt tarayıcıları için site oluştururken, bir öğeyi seçip Kontrol panelinde bu öğeyi tarayıcı penceresine iğneleme seçeneğini kullanabilirsiniz. İğnele, tutarlı bir gezinme deneyimi oluşturmak açısından yararlıdır. Aynı zamanda, ziyaretçi sayfayı ne kadar aşağı kaydırırsa kaydırsın öğeyi uzun bir sayfanın aynı bölgesinde tutmak istediğiniz durumlarda da kullanışlı bir özelliktir.

Bu makale yazıldığı sırada, mobil tarayıcıların hepsi iğnelenmiş nesneleri desteklememektedir. Bu nedenle, telefon ve tablet mizanpajları oluştururken iğnelenmiş nesneler için alternatif stratejilerin geliştirilmesi gereklidir.

Telefon veya Tablet mizanpajları oluştururken İğnele seçeneklerinin soluk ve devre dışı olduğunu göreceksiniz.

İğnelenmiş Öğeler seçenekleri
Kontrol panelindeki İğnele arabirimi mobil mizanpajlar tasarlarken kullanılamaz.

Mobil mizanpajlar içeren bir site yayınlama

Muse'da, masaüstü siteler yayınlamak için normalde kullandığınız yöntemin aynısını kullanarak birden fazla mizanpaj içeren siteler yayınlayabilirsiniz. En iyi uygulama, deneme sürümü siteler yayınlamak ve mobil aygıtları kullanarak sitenin yayındaki sürümünü görmek üzere tasarımları daha küçük ekranlarda test etmektir.

Yayınla'yı tıklatarak veya Dosya > FTP Ana Bilgisayarına Yükle öğesini seçerek site dosyalarını barındırma sunucularına yükleyin.

Birden fazla mizanpaj içeren bir Muse sitesi yayınladığınızda, site tek bir URL ile yayına geçirilir. Dolayısıyla aşağıdaki gibi tek bir etki alanı adı kaydettirmeniz gerekir:

http://www.benim-sitem.com

İki veya üç farklı mizanpaj içeren bir site yayınladığınızda, Muse ziyaretçinin sayfaya erişmek için kullandığı bilgisayar veya aygıt türü ile tarayıcı türünü belirleyen algılama komut dosyalarını içeren, siteye ait bir kod oluşturur.

Algılama kodu, platform ve tarayıcı sürümünü belirledikten sonra otomatik olarak doğru mizanpajı görüntüler. Tablet kullanıcılarının tablet tasarımını, akıllı telefon kullanıcılarının ise telefon tasarımını görmelerini sağlamak için herhangi bir işlem yapmanıza gerek yoktur. Bütün işlemler zaten geri planda yapılmaktadır.

Muse'daki yeni mobil mizanpaj özellikleri, mobil mizanpajlarınızı aygıt kullanıcılarının büyük dosyaları gerekmedikçe indirmemesini sağlayacak şekilde en iyileştirmenizi sağlar. Alternatif mizanpaj özelliği, yalnızca küçük ve yeniden boyutlandırılmış görüntü dosyalarına yöneliktir; bu şekilde, site tüm platformlarda ve tarayıcılarda iyi bir performans sergiler.

Muse ile çalışma hakkında daha fazla bilgi için Adobe Muse Yardım sayfasında yer alan makaleleri ve eğitimleri inceleyin.

Mizanpajlar arasında site içeriğini kopyalamak için Sayfaya Git aracını kullanma

Kalıp (Masaüstü) sekmesini tıklatarak kalıp masaüstü sayfasını Tasarım görünümünde etkin hale getirin.

Muse, sunduğu gezinme aracı Sayfaya Git ile mizanpajlar arasında kolaylıkla geçiş yapmanızı sağlar. Bu düğme, birden çok mizanpaj içeren tüm projelerde Tasarım görünümünde görünür.

  1. Sayfaya Git düğmesini tıklatın.
Sayfaya git düğmesi
Sayfaya Git düğmesi, bir sayfayı işaret eden bir oka benzer.

Birden çok mizanpajla çalışırken iki veya daha fazla sayfa arasında ileri ve geri gitmenizi, böylelikle içeriği kolaylıkla kopyalayıp yapıştırmanızı sağlaması açısından kullanışlıdır.

Not: Sayfaya Git düğmesini tıklatmanın yanı sıra Command+J (Mac) veya Control+J (Windows) klavye kısayolunu da kullanabilirsiniz.

Sayfaya Git iletişim kutusu görüntülenir. Bu iletişim kutusu, sitedeki bir sayfanın adının ilk birkaç harfini yazmak için kullanabileceğiniz bir metin alanı içerir. Bu sayede, Plan görünümüne tekrar tekrar dönmeden ilgili sayfaya kolaylıkla geçebilirsiniz.

  1. Bulmak istediğiniz sayfanın adının ilk üç harfini girin. Bu örnekte, Kalıp sözcüğünün ilk üç harfini yazın: kal.

Alan siteyi tarayarak eşleşen sayfa adlarını bulur ve aşağıdaki listede görüntüler.

  1. Aşağı oka iki defa basarak A-Kalıp (telefon) sayfasını seçin ve açmak için Return/Enter tuşuna basın.

Kalıp (telefon) sayfası, düzenlenmeye hazır bir şekilde Tasarım görünümünde açılır.

Bir sitedeki farklı mizanpajlar arasında geçiş yapmanın diğer mükemmel bir yolu da yeni klavye kısayollarını kullanmaktır:

  • Command/Control+7 masaüstü mizanpajını görüntüler
  • Command/Control+8 tablet mizanpajını görüntüler
  • Command/Control+9 telefon mizanpajını görüntüler

Bu kısayollar, yalnızca ilgili mizanpajı içeren bir siteyi düzenlerken etkindir. Mizanpajlar ve belirli sayfalar arasında geçiş yaparken tercih ettiğiniz bir iş akışını geliştirmek için bu yeni kısayolları kullanarak denemeler yapın.

Bir sonraki adımda ikinci bir kalıp telefon sayfası oluşturularak tasarım öğeleri eklenecektir.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi