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ı.

Hiyerarşik kalıp sayfalarla çalışma

Muse, diğer kalıp sayfalara uygulanan kalıp sayfalar oluşturmanızı sağlar. Hiyerarşik kalıp sayfalar, kalıp sayfaları Plan görünümünde bir sayfaya uygulama işlemindeki gibi çalışır. Muse'un önceki sürümlerinde, birden fazla kalıp sayfa oluşturmak mümkündü; ancak, bir web sayfasına bir seferde bir adet sayfa öğeleri kümesi içeren tek bir kalıp sayfa uygulanabiliyordu.

Daha önceki sürümlerde, birbirine benzeyen ancak her biri benzersiz bir görünüme sahip olan iki farklı bölüm içeren bir site oluşturmak istediğinizde, bir kalıp sayfayı çoğaltıp küçük değişiklikler yaparak belirli sayfalara uygulamak mümkündü. Sonuç olarak, her iki tür kalıp sayfa da genellikle aynı öğeleri içerdiği için siteyi her güncellediğinizde tüm öğeleri senkronize şekilde tutmak için her iki kalıp sayfadaki içeriği de düzenlemek gerekiyordu.

Muse 4.0 ve sonraki sürümlerde ise birden fazla kalıp sayfada görüntülenen paylaşan öğeler içeren bir A-Kalıp sayfa hazırlayabilir (önceki bölümlerde açıklanan şekilde arka plan ve altbilgi eklemek gibi) ve A-Kalıp sayfadaki tüm öğeleri devralan ve birinci bölüme özgü tüm öğeleri içeren kalıp sayfalar oluşturabilirsiniz. Üçüncü bir kalıp sayfa oluşturduysanız bu kalıp sayfa, A-Kalıp sayfadaki öğeleri ve ikinci bölüme özgü tüm öğeleri kullanabilir.   

Hiyerarşik kalıp sayfaları kullanmanın avantajı, bir öğenin yalnızca tek bir örnekte bulunmasını sağlamasıdır. Bir siteyi yeniden tasarlarken, her bir öğeyi yalnızca bir kez düzenlemeniz yeterlidir. Öğenin tüm örnekleri otomatik olarak güncellenir.

Kalıp sayfalar Plan görünümünde yönetilir ve uygulanır. Tıpkı kalıp sayfayı bir sayfaya uygulamak için kalıp sayfanın minik resmini tıklatıp bir sayfanın minik resmine sürüklediğinizde olduğu gibi, birden fazla kalıp sayfa oluşturup kalıp sayfayı tıklatarak başka bir kalıp sayfaya sürükleyebilirsiniz. Dilerseniz, bağlam menüsündeki Kalıplar seçeneğini kullanarak Plan görünümünde herhangi bir kalıp sayfanın veya sayfanın minik resmini sağ tıklatabilirsiniz.

Bir sayfa veya kalıp sayfa adının üzerine geldiğinizde, ilgili sayfa veya kalıp sayfa için uygulanan kalıpların hiyerarşisini gösteren bir araç ipucu görüntülenir.

Şu ana kadar, tarayıcı dolgusu döşenmiş arka planı ve altbilgi içeriği içeren bir A-Kalıp sayfa oluşturdunuz. Bir sonraki bölümde, site sayfalarına uygulayabileceğiniz, A-kalıp sayfasının içeriğini devralan yeni bir kalıp sayfa oluşturacak ve üstbilgi ekleyeceğiz. Şu adımları uygulayın:

  1. Plan görünümünde site haritası açıkken, imlecinizi A-Kalıp sayfasının minik resminin üzerine getirin ve her iki tarafta da Artı işareti düğmelerini görüntüleyin. A-Kalıp sayfasının sağındaki Artı işaretini tıklatarak yeni bir kalıp sayfa oluşturun. Yeni kalıp sayfaya varsayılan olarak B-Kalıp adı verilir.
  2. Minik resmin altındaki B-Kalıp metin alanını çift tıklatarak adı düzenleyin. Yeni oluşturduğunuz kalıp sayfaya daha açıklayıcı bir ad yazın: Ana.
  3. Ana kalıp sayfasının minik resmini sağ tıklatın ve açılan bağlam menüsünde Kalıplar > A-Kalıp seçeneklerini belirleyin.
Bu eğitimde, Adobe Muse çalışma alanı gösterilmekte ve kod yazmadan tam özellikli bir web sayfası oluşturma yöntemleri açıklanmaktadır. Ayrıca site haritası oluşturma, kalıp sayfalarla çalışma ve Muse'daki tarayıcı dolgusu seçenekleri hakkında bilgi edineceksiniz.
Menüden A-Kalıp'ı seçip bunu Ana kalıp sayfaya uygulayın.

A-Kalıp sayfa Ana kalıp sayfaya uygulandığında, Ana kalıp sayfanın minik resmi aynı görünümde görüntülenecek şekilde güncellenir. A-Kalıp sayfayı 3. adımda Ana kalıp sayfaya uyguladığımız için Ana kalıp sayfanın minik resminin altındaki etikette, [A-Kalıp] yazar.

Bu ifade, Ana kalıp sayfanın aslında A-Kalıp öğelerini içermediğini ve A-Kalıp sayfayı çoğaltmadığınızı gösteren önemli bir ayrımdır. Burada yapılan işlem, Ana kalıp sayfanın A-Kalıp sayfaya bağlanacak şekilde ayarlanmasıdır. Yani, A-Kalıp sayfaya eklenecek olan herhangi yeni bir içerik, otomatik olarak Ana kalıp sayfada da görünecektir.

Önceki bölümlerde açıklandığı gibi, hiyerarşik kalıp sayfaların en iyi yanı, altbilgi, menü ve durağan arka plan görüntüsünün yalnızca A-Kalıp sayfasında varolmasıdır. İleride bir müşteriniz farklı bir döşenmiş arka plan kullanmanızı isterse sadece A-Kalıp sayfayı güncelleyerek Ana kalıp sayfanın otomatik olarak güncellenmesini sağlayabilirsiniz.

Bu eğitimin ilerleyen bölümlerinde, iki farklı site bölümünde farklı görünüşlerde iki farklı kalıp oluşturulacaktır. Şimdilik sayfalarınızı Plan görünümünde güncelleyerek tümünde A-Kalıp sayfa yerine Ana kalıp sayfayı kullanabilirsiniz.

  1. Ana kalıp sayfayı tıklatarak sol üst köşedeki food (yiyecek) sayfası minik resmine sürükleyin. Ana kalıp sayfa minik resmini sürükleyip food (yiyecek) sayfasının minik resmine bıraktığınızda, food (yiyecek) sayfasının minik resminin altındaki mavi renkli [A-Kalıp] metninin [Ana] olarak güncellendiğini göreceksiniz.

Bu yöntem, Plan görünümünde kalıp sayfaları sayfalara uygulamak için en sık kullanılan yöntemdir. Ancak bunları bağlam menüsünü kullanarak uygulamayı da deneyebilirsiniz:

  1. Etkinlikler sayfasının minik resmini sağ tıklatın ve açılan bağlam menüsünden Kalıplar > Ana seçeneklerini belirleyin.
Bu eğitimde, Adobe Muse çalışma alanı gösterilmekte ve kod yazmadan tam özellikli bir web sayfası oluşturma yöntemleri açıklanmaktadır. Ayrıca site haritası oluşturma, kalıp sayfalarla çalışma ve Muse'daki tarayıcı dolgusu seçenekleri hakkında bilgi edineceksiniz.
Bağlam menüsünü kullanarak Ana kalıp sayfayı etkinlikler sayfasının kalıp sayfası olarak ayarlayın.

  1. En sık kullandığınız yöntemi (4. ve 5. adımlarda açıklanmıştır) kullanarak Ana kalıp sayfayı kalan üç sayfanın (home, about ve visit) kalıp sayfası olarak ayarlayın.

Bu değişiklik yapıldıktan sonra her bir sayfanın minik resminin altındaki mavi metinli etiket [Ana] olarak güncellenir. İmlecinizi mavi etiketlerden herhangi birinin üzerine getirdiğinizde bir araç ipucu görüntülenerek uygulanan kalıp sayfaların hiyerarşisini gösterir.

Bu eğitimde, Adobe Muse çalışma alanı gösterilmekte ve kod yazmadan tam özellikli bir web sayfası oluşturma yöntemleri açıklanmaktadır. Ayrıca site haritası oluşturma, kalıp sayfalarla çalışma ve Muse'daki tarayıcı dolgusu seçenekleri hakkında bilgi edineceksiniz.
İmleci etiketin üzerine getirdiğinizde görüntülenerek hiyerarşi ile ilgili bilgi veren kullanışlı araç ipucu.

Bu örnekte, hiyerarşi yalnızca bir düzeylidir. Başka bir deyişle, Ana kalıp sayfa A-Kalıp sayfa içeriğini devralmaktadır. Ancak dilerseniz, bir kalıp sayfalar zinciri de oluşturabilirsiniz. Örneğin, yalnızca üstbilgi içeriği bulunan Üstbilgi adında bir kalıp sayfa, Üstbilgi kalıp sayfasının içeriğini devralan Altbilgi adında başka bir kalıp sayfa ve Altbilgi kalıp sayfasında bulunan her şeyi devralan ve aynı zamanda üstbilgiyi de içeren Ana adında başka bir kalıp sayfa oluşturabilirsiniz. Site tasarımı ve bazı öğelerin değiştirilebileceği bilgisine dayanarak devralma düzeyleri oluşturup bunu farklı düzeyler halinde ayarlayabilirsiniz. Tasarımı bu şekilde bölümlendirmek, semboller oluşturmak gibidir. Bir tasarımdaki belirli bölümleri ayırabilir ve daha sonra gerektiğinde ilgili bölümü kolayca bulup düzenleyebilirsiniz.

Muse'u kullanarak ilk web sitenizi oluşturma 2. Bölüm başlıklı bir sonraki eğitimde, widget'larla çalışma (sayfalara sürükleyip bırakabileceğiniz önceden oluşturulmuş etkileşimli site özellikleri) yöntemleri açıklanmaktadır. Widget'lar, sayfalara kod yazmadan hızla ve kolayca gelişmiş işlevler eklemenizi sağlar. Widget'ların davranışını ve görünüşünü düzenleyip özelleştirerek bunların site tasarımında nasıl görüntüleneceğini öğreneceksiniz.

Ana kalıp sayfaya üstbilgi içeriği ekleme

Ana kalıp sayfaya bir Menü widget'ı ekleyerek altbilgi alanını tamamladıktan sonra, şimdi de üst düzey navigasyon eklemeyi öğreneceksiniz. Üstbilgi alanına içerik eklemek için şu adımları izleyin.

  1. Plan görünümünde, Ana kalıp sayfanın minik resmini çift tıklatarak sayfayı Tasarım görünümünde açın ve düzenlemeye başlayın (henüz açık değilse).
  2. Dikdörtgen aracını kullanarak görünen tarayıcı alanının sol üst kısmından başlayıp enine yayılarak sağ üst köşeye doğru tüm genişliği kaplayan bir dikdörtgen çizin. Seçim aracını kullanarak tıpkı altbilgiyi oluşturduğunuz gibi, dikdörtgenin %100 genişliğe ayarlandığını belirten kırmızı bir kenarlığın kısa bir süre için göründüğü ana kadar tutamaçları dikdörtgenin üst, sol ve sağ taraflarına sürükleyin.
fig_30_building
Tarayıcı penceresinin üst kısmının tamamına yayılan bir dikdörtgen çizin.

 

Tutamaçları sürükledikten sonra, dikdörtgenin genişliği yaklaşık 1160 piksel, yüksekliği ise 253 piksel olmalıdır. Yatay X değeri -100'dür. Bu değer, dikdörtgenin sol üst köşesinin sayfanın üst sol köşesine göre 100 piksel uzaklıkta bulunduğunu gösterir. Y değeri 0'dır (yani, dikdörtgenin sol üst köşesi, sayfanın sol üst köşesiyle dikey olarak eşleşmektedir). Bu değerleri tam olarak ayarlamak istiyorsanız, dikdörtgen seçiliyken Dönüştürme paneli veya Kontrol panelindeki alanları gözden geçirebilirsiniz.

  1. Kontur genişliğini 0 olarak belirleyin ve Dolgu menüsünü kullanarak dolgu rengini Yok olarak ayarlayın. Görüntü bölümünün sağındaki klasörü tıklatın ve tile-header.png adlı görüntüyü bularak seçin. Sığdırma menüsünü Yatay Döşe olarak ayarlayın.
fig_31_building
Sığdırma menüsünü kullanarak arka plan görüntüsünü yatay olarak döşeyin.

 

Üstbilgi tek bir dikdörtgenden oluşmasına rağmen, bunu dolduran yatay olarak döşenmiş arka plan görüntüsü siyah bir dikdörtgenin üzerinde gri bir dikdörtgen varmış gibi bir etki yaratır.

  1. Dosya > Yerleştir'i seçin veya Command+D (Mac) ya da Control+D (Windows) klavye kısayollarını kullanarak İçe Aktar iletişim kutusunu açın.
  2. Örnek dosyalar klasöründe bg-ribbon.png adlı dosyayı bulup seçin. Aç'ı tıklatarak dosyayı açın ve İçe Aktar iletişim kutusunu kapatın.
  3. Sayfanın üst kısmına yakın yerdeki üstbilgi dikdörtgeninin orta yerini bir kez tıklatın. Bu şekilde, bg-ribbon.png dosyasının orijinal boyutlara sahip tek bir örneği yerleştirilir.
  4. Seçim aracını kullanarak turuncu şerit grafiği üstbilgi alanının yakınında dik olarak ortalanacak ve sayfanın enine yayılacak şekilde hizalayın.
fig_32_building
Üstbilgi alanında ortalanacak şekilde yerleştirilmiş turuncu şerit grafik.

 

Turuncu şerit grafik, bir sonraki bölümde ekleyeceğiniz üst düzey menünün arka planını oluşturacaktır.

Kalıp sayfayı çoğaltma

Ana kalıp sayfadaki üstbilgi içeriği tamamlandı. Ana kalıp sayfayı sitedeki her sayfa için kullanabilirsiniz; ancak bu site tasarımı iki bölüme ayrılmıştır. Ana kalıp sayfa tasarımı birincil olarak Home (Ana Sayfa) ve Visit (Ziyaret Edin) sayfaları için kullanılmaktadır. Küçük farklılıkları olan ikinci kalıp sayfa ise food (yiyecek), events (etkinlikler) ve about (hakkında) sayfaları için kullanılmaktadır.

Ana kalıp sayfayı çoğaltmak için şu adımları uygulayın:

  1. Plan görünümünde, Ana kalıp sayfa minik resmini sağ tıklatın.
  2. Açılan bağlam menüsünde, Sayfayı çoğalt'ı seçin.
fig_38_building
Menüyü kullanarak varolan Ana kalıp sayfayı çoğaltın.

 

Ana kalıp sayfanın sağında, varsayılan adı Ana kopya olan yeni bir kalıp sayfa açılır. Ana kalıp sayfayı çoğalttığınız için, yeni kalıp sayfa da zaten A-Kalıp sayfasını temel almaktadır.

  1. Oluşturduğunuz kalıp sayfanın altındaki alanı çift tıklatın ve Ön Plan olarak yeniden adlandırın.

Bir sonraki bölümde, öğelerin alt kısımda değil, sayfa öğelerinin üst kısmında görüntülenmeleri için bir kalıp sayfadaki öğelerin yerleşimini ayarlama yöntemlerini öğreneceksiniz. Bu noktada, çalışmanızı kaydetmeniz iyi olur.

  1. Dosya > Siteyi Kaydet seçeneklerini belirleyin.

Bir kalıp sayfayı çoğaltmanın avantajlarından biri, bazı içerikleri tıpkı Yerleştir > En Öne Getir'i seçtiğinizde olduğu gibi diğer sayfa içeriklerinin üst kısmında görüntüleyecek şekilde ayarlamanızı sağlamasıdır. Food (yiyecek) ve events (etkinlikler) sayfaları için istenen davranış bu "ön plan" davranışıdır.

Kalıp sayfa öğelerinin yığın sırasını ayarlama özelliği, Muse 4.0 sürümünde sunulan yeni bir özelliktir. Daha önce, sık kullanılan site öğelerini sayfa mizanpajındaki diğer içeriklerin üst kısmına katmanlar halinde yerleştirmek istediğimizde, üstbilgi ve altbilgi öğelerini kalıp sayfa yerine bütün sayfalara yerleştirmek zorunda kalıyorduk.

Kalıp sayfalardaki öğeleri önde görüntülenecek şekilde ayarlama

Muse'daki Tasarım görünümü arabirimi ile bir sayfa öğesini seçip Nesne > En Öne Getir, Öne Getir, En Alta Gönder veya Bir Alta Gönder seçeneklerini belirleyerek bir öğenin sayfadaki başka bir öğenin üst veya alt kısmında görüntülenmesini sağlayabilirsiniz. (Ayrıca bir öğe veya grubu sağ tıklatıp Yerleştir > En Öne Getir, Öne Getir, En Alta Gönder veya Bir Alta Gönder seçeneklerini belirleyerek de yığın sırasını ayarlayabilirsiniz).

Muse'un önceki sürümlerinde site tasarlarken, varsayılan davranış bir kalıp sayfadaki öğelerin sayfa tarandığında sayfadaki tüm öğelerin her zaman arka tarafında görünmesidir. Bilinen tek çözüm, normalde bir kalıp sayfaya yerleştirebileceğiniz öğeleri kopyalayarak üst kısımda görüntülenmesini istediğiniz tüm site sayfalarına yapıştırmak olduğundan arka planda katmanlama zaman zaman sorun çıkarabiliyordu (site tasarımına bağlı olarak).

Muse'da, öğelerin kalıp sayfalardaki yerleşimini kontrol edebileceğiniz yeni bir özellik bulunuyor. Artık, bir kalıp sayfadaki her şeyi sayfa öğelerinin ardında görüntülemek yerine, kalıp sayfalardaki öğeleri seçerek ön plan öğeleri olarak görüntülenecek şekilde ayarlayabilirsiniz. Ön plan öğeleri olarak ayarlanan kalıp sayfadaki öğeler, tüm sayfa öğelerinin üst kısmında görüntülenir.

Bu yeni seçeneğe Nesne > Taşıma Yeri > Kalıp Ön Plan seçeneklerinden ulaşabilirsiniz. Ek olarak, Tasarım görünümünde bir kalıp sayfayı düzenlerken herhangi bir öğeyi sağ tıklatarak açılan menüden Taşıma Yeri > Kalıp Ön Plan'ı da seçebilirsiniz.

Bu örnek projedeki tasarım, Home (Ana Sayfa) ve Visit (Ziyaret Edin) sayfalarındaki içeriklerin varsayılan yığın düzenini kullanmasını gerektirmektedir (sayfa öğeleri, Ana kalıp sayfadaki üstbilgi alanının üst kısmında görüntülenir), ancak Food (Yiyecek), Events (Etkinlikler) ve About (Hakkında) sayfaları için bu geçerli değildir.

Food (Yiyecek) ve Visit (Ziyaret Edin) sayfalarında, Ön Plan kalıp sayfasını, üstbilgi içeriklerinin sayfalar kaydırıldığında ön planda, sayfa içeriklerinin üst kısmında görüntülenmesini sağlayacak şekilde güncellemeniz gereklidir. Şu adımları uygulayın:

  1. Plan görünümünde, Ön Plan kalıp sayfanın minik resmini çift tıklatarak sayfayı Tasarım görünümünde açın ve düzenlemeye başlayın (henüz açık değilse).
  2. Seçim aracını kullanarak döşenmiş arka plan görüntüsü içeren dikdörtgen, yerleştirilmiş turuncu şerit grafik, Menü widget'ı ve orta kısımda animasyonlu GIF logosunun bulunduğu üstbilgi içeriklerini tıklatıp sürükleyerek seçin.
  3. Üstbilgi içeriğinin tamamı seçiliyken, sağ tıklatıp Taşıma Yeri > Kalıp Ön Plan'ı seçin. Seçilen nesnelerdeki olağan mavi kenarlığın tersine, ön planda görüntülenecek şekilde ayarlanan öğelerin seçildiklerinde kırmızı bir kenarlık içerdiğini göreceksiniz.
fig_39_building
Bağlam menüsünü kullanarak üstbilgi içeriğini ön plana taşıyın.

Böylelikle üstbilgi Ön Plan kalıp sayfanın uygulandığı sayfalarda sayfa öğelerinin üst kısmında görüntülenir.

  1. Üstbilginin tamamı halen seçiliyken, üstbilgiyi sayfanın üst kısmına sabitleyin; böylece sayfa kaydırılsa bile üstbilgi sayfayla birlikte kaydırılmayacaktır. 7. Bölümde nesneleri sabitleme hakkında daha fazla bilgi edineceksiniz, ancak şimdilik üstbilgiyi yerine sabitlemek için Kontrol panelindeki üst orta kısma sabitleme konumunu tıklatın.
fig_40_building
Üst orta kısım konumunu seçerek seçilen üstbilgiyi sabitleyin.

  1. Ön Plan kalıp sayfayı tıklatıp food (yiyecek) sayfasına sürükleyerek uygulayın. Ön Plan kalıp sayfayı events (etkinlikler) ve about (hakkında) sayfalarına uygulamak için bu adımı iki kez tekrarlayın.

Bu değişikliği yaptıktan sonra, mavi etiket metninde food (yiyecek), events (etkinlikler) ve about (hakkında) sayfalarında artık Ön Plan kalıp sayfanın kullanıldığını belirten [Ön Plan] sözcüğü görüntülenir. Mavi [Ön Plan] etiketinin üzerine geldiğinizde, bir araç ipucu açılarak Ön Plan kalıp sayfanın A-Kalıp sayfayı temel aldığını belirtir.

Kendi site projelerinizi tasarlarken yeni Ön Plana Taşı özelliğiyle kalıp sayfalardaki öğeleri üst kısımda görüntüleme denemeleri yapabilirsiniz. Bu eğitim dizisinin ilerleyen bölümlerinde, food (yiyecek) ve events (etkinlikler) sayfalarının tasarımını tamamlayacak ve ön plan ayarı ile üstbilgi içeriklerinin sayfadaki diğer içeriklerin üst kısmında görüntüleme yöntemleri hakkında bilgi alacaksınız.

Bu eğitimin Muse ile ilk web sitenizi oluşturma 4. Bölüm başlıklı bir sonraki bölümünde, gömülü HTML ile çalışarak diğer web sitelerinden kopyalanan kodu görüntüleme yöntemleri hakkında bilgi edineceksiniz. Aynı zamanda, ana sayfayı oluşturmak için bir Işıklı Kutu Kompozisyonu widget'ı ekleme yollarını da öğreneceksiniz.

Birden fazla kalıp sayfa kullanma ve animasyon ekleme

Bu bölümde, kalıp sayfalarla çalışma ve bir sitenin farklı bölümlerini oluştururken birden fazla kalıp sayfada sık kullanılan site içeriğini görüntüleyerek tutarlılık sağlama ile ilgili ayrıntılı bilgiler verilmektedir. Bu bölümde ayrıca birden fazla kalıp sayfa oluşturma ve her birine yalnızca belirli grafikler yerleştirme (dört renk kodlu alan içeren bir site gibi) işlemlerinde kullanışlı bulabileceğiniz kalıp sayfalardaki öğeleri taşımaya yönelik stratejiler de açıklanmaktadır. Bunların yanı sıra, normalde bir kalıp sayfada bulunan öğeleri belirli bir bağımsız sayfaya taşıyarak öğeleri birbirinin üzerine katmanlar halinde yerleştirme gibi tasarım efektleri oluşturma yöntemleri de verilmektedir.

Kalıp sayfa içeriğini düzenleme

Bir kalıp sayfaya yerleştirilmiş nesneler, bağımsız bir sayfaya yerleştirdiğiniz herhangi bir içeriğin altında katman halinde görüntülenir. Örneğin, Ana Sayfa sayfasındaki alt ve üstbilgi alanlarına yerleştirdiğiniz nesneler kalıp sayfadaki alt ve üstbilgi alanlarına yerleştirdiğiniz arka planların üst kısmında katmanlanmış şekilde görünecektir. Bu nedenle, kalıp sayfadaki öğeleri taşıyarak bunların sayfadaki diğer öğelerin üstünde görüntülenmesini sağlamak amacıyla bağımsız sayfalara yerleştirmeniz gereken durumlarla karşılaşabilirsiniz.

Kalıp sayfalara eklenen içerikler daha sonra kalıp sayfa açılarak düzenlenmelidir. Bir kalıp sayfayla ilişkili bir sayfayı açıp üstbilgi, altbilgi veya kalıp sayfa içeriğini düzenlemeyi denediğinizde sayfa kilitli görünecektir. Bir kalıp sayfadaki içeriği değiştirmeniz gerektiğinde kullanabileceğiniz iki farklı strateji vardır:

  1. Plan görünümünde kalıp sayfa minik resmini çift tıklatın ve kalıp sayfadaki içeriği Tasarım görünümünde düzenleyin.

  2. Plan görünümünde Kalıp sayfa minik resmini çift tıklatarak sayfayı Tasarım görünümünde açın. Düzenlemek istediğiniz (ancak sitedeki bir sayfaya yerleştirildiğinde diğer öğelerin üstünde olması gereken) öğeleri seçin ve Düzenle > Kes'i seçin ya da Command+X (Mac) veya Control+X (Windows) klavye kısayollarını kullanın.

  3. Plan görünümüne dönün ve içeriğin bulunacağı sayfayı (önceki adıyla kalıp sayfa) çift tıklatın. Düzenle > Yerinde Yapıştır'ı seçin. Böylelikle kalıp sayfadan kestiğiniz öğeler normal bir sayfada benzer bir konuma yerleştirilir. İsterseniz birden fazla sayfa açıp Düzenle > Yerinde Yapıştır'ı seçerek önceden kalıp sayfada olan içeriği sitenizdeki farklı sayfalara dağıtabilirsiniz.

Gerektiğinde, varolan bir kalıp sayfayı da çoğaltabilirsiniz. Sitenizi, çoğu sayfa tek bir kalıp kullanırken özel bir sayfa kalıbın benzer bir sürümü olan kopyayı (bu çoğaltılmış kalıp sayfadan sitedeki özel bir sayfaya kopyalanan belirli öğeleri içeren) kullanacak şekilde yapılandırabilirsiniz. Kalıp sayfaları çoğaltma hakkında daha fazla bilgi için bir sonraki alt bölüme bakın.

Nesne kalıp sayfanız yerine bağımsız sayfalara yerleştirildiğinde, nesneyi gereken şekilde sayfa sayfa düzenleyebilir ve nesnenin üst kısımda görünmesini sağlayabilirsiniz.

Bu örnek projede, sitede Kevin's Koffee Kart logosu (bant reklamlı kırmızı bisiklet) halen üstbilgideki site navigasyonunun doğrudan üst kısmında görüntülenmektedir. Üst ve altbilgi içeriği, Ana Sayfa (ve oluşturduğunuz diğer tüm sayfalar) varsayılan olarak bu içeriğin bulunduğu A-Kalıp sayfasına bağlandığı için her sayfada otomatik olarak görünür. Çoğu durumda, site genelinde tutarlılık sağlamak için aynı kalıp sayfayı kullanan web siteleri oluşturmayı tercih edebilirsiniz.

Ancak, bu site, yalnızca Ana Sayfa sayfasında görüntülenen benzersiz bir animasyonlu logoya sahiptir. Kevin's Koffee Kart sitesinin yayındaki örneğini gözden geçirdiğinizde, Ana Sayfa sayfasında sayfa ilk yüklendiğinde kırmızı bisikletin sanki sayfanın solundan çerçeveye girermiş gibi yalnızca bir kez canlandırıldığını göreceksiniz. Diğer sayfaları ziyaret etmek için tıklattığınızda, animasyonun yalnızca Ana Sayfa sayfasında canlandırıldığını, site sayfalarındaki diğer tüm logoların statik kaldığını göreceksiniz.

Bir sonraki alt bölümde, çoğaltılmış bir kalıp sayfa oluşturma ve Plan görünümünde belirli bir kalıp sayfanın kullanılacağı sayfaları atama yöntemleri açıklanmaktadır.

Kalıp sayfaları çoğaltma ve silme

  1. Plan bağlantısını tıklatarak Plan görünümüne erişin. Plan görünümü arabiriminin alt kısmında yer alan A-Kalıp minik resmini bulun.

  2. İmlecinizi A-Kalıp minik resminin üzerine getirin. Minik resmin üzerine geldiğinizde site haritasına sayfa eklediğinizde gördüğünüz artı (+) işaretinin aynısını göreceksiniz. A-Kalıp minik resminin sağındaki artı (+) işaretini tıklatın. Sıfırdan bir kalıp sayfa oluşturmak istediğiniz her sefer bu tekniği kullanabilirsiniz. Minik resmin boş olduğunu göreceksiniz. Bu, A-Kalıp sayfasına eklediğiniz içeriğin minik resimde bulunmadığı anlamına gelir. Yeni kalıp sayfa varsayılan olarak B-Kalıp olarak adlandırılır. Ancak, minik resmin altındaki alanı tıklatarak adı dilediğiniz şekilde değiştirebilirsiniz.

    Bu örnekte, yeni ve boş bir kalıp sayfa oluşturmak yerine, varolan A-Kalıp sayfasının kopyası oluşturulacaktır.

  3. Sayfayı silmek için B-Kalıp sayfasının sağ üst köşesindeki X simgesini tıklatın. (Bu stratejiyi kullanarak varolan bir kalıp sayfayı yanlışlıkla silerseniz Düzenle > Silmeyi Geri Al'ı seçerek kalıp sayfayı geri yükleyebilirsiniz).

  4. A-Kalıp sayfasının minik resmini sağ tıklatın ve açılan bağlam menüsünden Sayfayı Çoğalt'ı seçin. Çoğaltılan kalıp sayfayı gösteren, A-Kalıp kopya adında yeni bir minik resim görüntülenir.

    fig_59_getting
    Plan görünümünde A-Kalıp sayfasını çoğaltın.

  5. A-Kalıp kopya minik resminin altındaki alanı tıklatın ve çoğaltılan kalıp sayfayı MasterFlash olarak yeniden adlandırın. Bu sayfa, yalnızca Ana Sayfa sayfasında canlandırılacak zengin medya içeriği eklemek için kullanılacak, diğer tüm sayfalar, üstbilgi alanında logonun statik sürümünü gösteren A-Kalıp sayfasını temel alacaktır.

  6. Ana Sayfa sayfasının minik resmini sağ tıklatın. Açılan menüden Kalıplar > MasterFlash'ı seçin. Bu işlem, MasterFlash kalıp sayfasını Ana Sayfa sayfasıyla ilişkilendirir.

    Not:

    Alternatif olarak, MasterFlash minik resmini HOME (ANA SAYFA) sayfasının minik resmine sürükleyerek uygulayabilirsiniz.

Sayfa uygulandığında, Plan görünümünde MasterFlash kalıp sayfasının adı Ana Sayfa sayfasının minik resminin altında köşeli parantez içinde görünür.

Önizleme'yi tıklattığınızda, Ana Sayfa sayfasında herhangi bir farklılık görünmez. MasterFlash, A-Kalıp sayfasının çoğaltılmış bir kopyası olduğu için Ana Sayfa sayfası önceki şekliyle görünür ve statik logo görüntülenir. Ancak, bir sonraki alt bölümde, MasterFlash içeriği düzenlenerek yalnızca Ana Sayfa sayfasında görünecek olan animasyon eklenecektir.

Hemen hemen aynı olan ancak küçük farklılıklar taşıyan çoğaltılmış kalıp sayfalar, web sitesinin belirli bir bölümünü ayırmak ve Ana Sayfa sayfasını bu projenin önceki bölümlerinde açıklanan şekilde benzersiz hale getirmek için mükemmel bir yoldur.

Bu eğitimde, Kalıp Sayfaları kullanma yöntemlerini öğreneceksiniz. Üç site mizanpajını inceleyerek yapılarını değiştirecek, bir Kalıp Sayfadaki sık kullanılan öğelerle ilginç efektler elde etme ve site tutarlılığı sağlama yolları hakkında bilgi alacaksınız.

Öncelikle, Kalıp Sayfanın ne demek olduğunu görelim. Kalıp Sayfa, üst ve altbilgiler, logolar ve navigasyon gibi sık kullanılan öğeleri sitenizde birden fazla sayfaya uygulamanızı sağlar. Siteniz için tek bir Kalıp Sayfa kullanabileceğiniz gibi birden fazla Kalıp Sayfa oluşturarak sitenizdeki farklı bölümlere hızlı ve tutarlı bir şekilde benzersiz stiller uygulayabilirsiniz.

Muse, yeni bir site oluştururken varsayılan olarak boş bir ana sayfa ile boş bir Kalıp Sayfa oluşturur. Bu sayfalar her web sitesinin başlangıç noktasıdır. Boş sayfaları kullanarak sitenizin haritasını oluşturabilir, daha sonra bunlara kalıpları uygulayabilir veya web sitenizi, kalıpla başlayıp bunu tek bir sayfaya uygulayabilir (ana sayfa), ardından da yeni sayfaları bu tasarıma göre oluşturabilirsiniz.

Site mizanpajlarının yapısını değiştirme

Yeni site tasarım stratejilerini öğrenmenin en iyi yolu, farklı Kalıp Sayfa mizanpajlarını incelemektir. Bu makalede, Muse'da oluşturulan üç farklı site mizanpajı incelenmekte ve aslında nasıl oluşturuldukları hakkında bilgi verilmektedir.

Tüm talimatları izlemek ve bu örnek sitelerin her birinin varlıklarını açmak için örnek dosyaları indirin, sıkıştırılmış ZIP dosyasını çıkartın ve her bir .muse dosyasını çift tıklatarak dosyaları Muse'da açın.

Bu örnek siteleri tek tek incelerken site tasarımlarını oluşturmak için gezinmeyi kolaylaştıran ve site içeriğini inceleyen ziyaretçileri yönlendiren bazı özelliklerin kullanıldığını göreceksiniz:

  • Site özelliklerini yapılandırarak tüm sayfaların boyutlarını belirleme
  • Kılavuzları kullanarak Kalıp Sayfada üst ve altbilgi bölgelerini tanımlama
  • Nesneleri tarayıcı penceresine sabitleyerek sayfa mizanpajının dışına yerleştirme
  • Arka plan dolgularını kaydırılan veya sabit pozisyonlara ayarlayarak ilgi çekici efektler oluşturma
  • Dikdörtgenleri %100 genişlikte görüntülenecek şekilde ayarlayarak tarayıcının genişliğine yayma
  • Akordiyon widget'ları ve Slayt Gösterisi widget'ları ekleyerek etkileşimli sayfa içeriği görüntüleme
  • Menü widget'larını özelleştirip stil uygulayarak site navigasyonu sağlama
  • Bağlı bağlantılar oluşturarak sayfanın belirli bölümlerine dikey veya yatay olarak geçme
  • Üçüncü taraf sitelerden kod yapıştırarak (gömülü HTML) sayfalara özellik ekleme

Örnek siteleri tek tek incelerken, tarayıcı pencerenizi kaydırarak ve yeniden boyutlandırarak yayındaki örneğin nasıl çalıştığına bakın. Ardından, her bir .muse dosyasını Muse'da açarak Kalıp Sayfaların site mizanpajlarını standart hale getirmek ve daha tutarlı bir çevrimiçi deneyim oluşturmak için nasıl kullanıldıklarını inceleyin.

1. Örnek: Happy Valley Adventure

fig01.master.b720

Birinci örnekte, altbilgi grafikleri tarayıcı penceresinin alt kısmına sabitlenmiştir. Ayrıca, altbilgi arka planı %100 genişliğe ayarlanarak sayfanın yatay alt kısmına yayılmıştır. Uzun sayfa içeriği altbilgi ön planının arkasında kayarak degradeli bir gökyüzü efekti yaratmaktadır. Sol taraftaki bağlı bağlantıları tıklattığınızda, sayfa dikey yönde ilgili bölüme kayar. Yarı saydam grafik öğeleri ve stratejik yığınlama düzeni, bir balonda havada uçuyormuş gibi bir deneyim oluşturmaktadır.

Bu sitenin .muse dosyasını incelediğinizde şunları göreceksiniz:

Kalıp Sayfada, degrade dolgulu bir dizi dikdörtgen uzun sayfa içeriği için bir fon sağlamaktadır.

  • Ana Sayfa sayfasında, tarayıcı penceresinin alt kısmına sabitlenmiş, %100 genişlikte yayılacak şekilde ayarlanmış, yatay döşemeli arka plan görüntüsü içeren bir altbilgi grafiği bulunmaktadır. İkinci altbilgi grafiği (dağın zirvesi) ortalanarak tarayıcının alt kısmına sabitlenmiştir ve Yerleştir > En Öne Getir seçilerek diğer döşenmiş altbilgi grafiğinin üst kısmında görüntülenecek şekilde yerleştirilmiştir. Bu strateji her monitör boyutuna uygundur.
  • Sol taraftaki gezinme bağlantıları, dikey yöndeki uzun sayfaya eklenen bağlantı etiketlerine atlar. Ziyaretçiler bağlantıları tıklattığında, sayfa kayarak ilgili içeriği görüntüler. Yeni site bölümlerine bakıldığında tasarım oldukça dengeli ve tutarlı görünmektedir.
  • Ana Sayfanın iletişim bölümünde, ziyaretçilerle iletişimi kolaylaştırmak ve gelecek maceraları programlamak için iletişim formu öğelerini görüntüleyen gömülü HTML bulunur.

2. Örnek: Kevin's Koffee Kart

fig02.master.b720
Bu çok katmanlı sitede, bir Menü widget'ı ve gömülü HTML özellikleri kullanılmaktadır.

Kevin's Koffee Kart sitesinin Ana Sayfa sayfasında, üstbilgi alanında bir Flash animasyon ve sabitlenmiş bulut grafikleri bulunmaktadır. Kaydırma çubuklarını kullanarak sitede gezindiğinizde, arka plan görüntüsünün sabitlenmiş olduğunu ve kaymadığını, ancak sayfa içeriğinin bu görüntü üzerinde kaydırılabildiğini göreceksiniz. Slayt gösterisi, gömülü HTML Twitter beslemesinin altında görüntülerin arasında dönerek otomatik olarak oynatılmaktadır.

Üstbilgi alanındaki menü çubuğu, yeni sayfalar eklediğinizde otomatik olarak güncellenen kalıcı site navigasyon düğmeleri oluşturmak için Yatay Menü widget'ı kullanılarak oluşturulmuştur. Bu örnekte, Menü widget'ı, hem üst düzey hem de alt düzey sayfaları görüntüleyecek şekilde yapılandırılmıştır.

Menüyü inceleyerek düğmeleri tıklattığınızda her bir sayfanın nasıl yüklendiğini görebilirsiniz. Üstbilgi ve altbilgi tüm sayfalarda standart olmasına karşın sayfa boyları içeriğe göre değişmektedir. Kahverengi altbilgi alanı %100 genişliğe ayarlanarak tarayıcı penceresinin genişliğinin tamamına yayılan ve her bir sayfanın benzerliğini sağlayan iki dikdörtgenden oluşmaktadır.

Kevin's Koffee Kart sitesi oluşturulurken aşağıdaki tasarım standartları kullanılmıştır:

  • Bu site, çoğu site sayfasına uygulanan Flash medya içermeyen Kalıp Sayfa ve yalnızca Ana Sayfa sayfasına eklenen Flash film içeren ikinci bir Kalıp Sayfa olmak üzere iki benzer Kalıp Sayfa içerir. Her iki Kalıp Sayfa da %100 genişliğe ayarlanmış, saydam tasarım kenarlıkları içeren altbilgiler içermekte ve tutarlılık sağlamak için aynı Menü widget'ını kullanmaktadır. Birinci kalıp sayfa oluşturulduktan sonra, öğeler kopyalanıp ikinci kalıp sayfada yerlerine yapıştırılarak tüm öğelerin birbiriyle mükemmel derecede uyumlu olması sağlanmıştır.
  • Sayfalar Plan görünümünde düzenlenerek sitenin üst ve alt düzey bölümleri oluşturulmuştur. Bu durum, Menü widget'ı açılır öğelerinde görülmektedir.
  • Tarayıcı dolgusu olarak kullanılan arka plan görüntü haritası, döşeme yerine orijinal boyutunda görüntülenecek şekilde ayarlanmıştır. Görüntü ortalanmış ve sayfa içeriğinin alt kısmına kaymayacak şekilde ayarlanmıştır.
  • Sayfanın arka plan dolgusu, arka plandaki haritanın da görüleceği şekilde hafif saydamlık içeren düz beyaz renkte ayarlanmıştır.
  • Home (Ana Sayfa) sayfası, tarayıcıya sabitlenmiş yarı saydam iki bulut görüntüsü içermektedir. Sayfayı dikey yönde kaydırdığınızda sabitlenmiş öğelerin hareket etmediğini ve tarayıcı penceresini yeniden boyutlandırdığınızda yerlerinde kaldıklarını görebilirsiniz.
  • Home (Ana Sayfa) sayfasında, canlı Twitter beslemesi içeriğini göstermek için gömülü HTML kullanılmaktadır.
  • Koffee sayfasında, tıklatıldığında panelleri genişletip daraltan bir Akordiyon widget'ı kullanılarak sayfanın küçük alanında daha fazla içeriğin görüntülenmesi sağlanmaktadır.
  • Origins (Kökenler) sayfasında, etkileşimli fotoğraf galerisini görüntüleyen bir Minik Resim Slayt Gösterisi widget'ı bulunmaktadır. Preparation (Hazırlık) sayfasında, sayfadaki her bir bölüme geçmek için bağlantı etiketi navigasyonu kullanılır, Kart Map sayfasında ise ilgili hesap için kullanılan cep telefonunun konumuna göre canlı bir Google Latitude haritasının görüntülenmesini sağlayan gömülü HTML bulunmaktadır.

3. Örnek: More than Square

fig03.master.b720
Birbiri üzerine binen sabitlenmiş güçlü grafikler kaydırılan sayfa içeriğini çevrelemektedir.

Son örneği incelediğinizde, bina grafiklerinin sayfa içeriğini çevreleyecek şekilde sağ üst ve sol alt köşelere sabitlendiğini göreceksiniz. Sağ üst köşedeki bina, öne yerleştirilerek sayfa içeriğinin üst kısmına bindirilirken, sol alttaki bina sayfanın alt kısmında görüntülenmektedir.

Yarı saydam sayfa içeriği ortalanmış ve yuvarlatılmış köşelerle mimari öğelerden ayrılmıştır. Sayfa içeriği dikey yönde kaydırılmaktadır ve sayfalarda tıklattığınızda yükseklik dalgalanmaktadır. Sosyal ağ bağlantıları (Twitter, Facebook ve YouTube), çapraz bağlantı sağlamak ve tüm sitede tutarlı bir asimetrik tasarım oluşturmak amacıyla sayfanın sol tarafına kalıcı olarak yerleştirilmiştir.

Home (Ana Sayfa) sayfasında, ziyaretçi düğmeleri tıklatmak istemediğinde slaytların geçişinde de kullanılabilen Next ve Previous (Sonraki ve Önceki) düğme navigasyonu içeren bir fotoğraf galerisi bulunmaktadır. How To Get Here (Nasıl Ulaşılır) sayfasında ise Google Haritalar'dan kopyalanan gömülü HTML koduyla oluşturulmuş etkileşimli bir harita yer almaktadır.

Bu örneğin .muse dosyasını incelediğinizde şunları göreceksiniz:

Bu örnekte, sık kullanılan sayfa öğelerinin neredeyse tamamı Kalıp Sayfada yer almaktadır. Bu strateji sayesinde site kolayca güncellenmekte ve her bir sayfa içeriğinde değişiklik yapmak kolaylaşmaktadır.

Kalıp Sayfada altbilgi görüntüsü olarak kaydırılamayan bir arka plan grafiği kullanılmış ve grafik tarayıcının sol alt kenarına sabitlenmiştir. Kalıp Sayfada aynı zamanda site navigasyonu içeren yuvarlatılmış köşeli ve yarı saydam bir sayfa tasarımı bulunmaktadır.

Site sayfalarının hepsinde, bina görüntülerinin oluşturduğu açıyla perspektifli bir görünüm oluşturmak için sayfa içeriğinin ön tarafında görüntülenecek şekilde yerleştirilerek sağ üst köşeye sabitlenmiş bir grafik bulunmaktadır.

Muse, tasarımlarınızı web ortamına aktarmanızı sağlayan kullanımı kolay bir tasarım aracıdır. Öğelerin Kalıp Sayfalara kreatif şekilde yerleştirilmesi ve her sayfada görüntülenen benzersiz içerik, etkileyici mizanpajlar oluşturmanızı sağlar. Müşterileriniz için yenilikçi siteler tasarlarken hayal gücünüzü tam anlamıyla tasarımlarınıza aktarabilirsiniz.

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

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