Widget Kitaplığı panelini açın (Pencere > Widget Kitaplığı). Paneller'i genişletin ve Sekmeli Paneller widget'ını seçin. Widget'ı Widget Kitaplığı'ndan Tasarım panelinize sürükleyin.
Adobe Muse'da Sekmeli panelleri veya Akordiyon panellerini kullanarak ilişkili bir içerik kümesini görüntülemeyi ve bu kümeye stil uygulamayı öğrenin.
Widget Kitaplığı panelini açın (Pencere > Widget Kitaplığı). Paneller'i genişletin ve Sekmeli Paneller widget'ını seçin. Widget'ı Widget Kitaplığı'ndan Tasarım panelinize sürükleyin.
Sağ tarafta bulunan en üstteki sekmeyi üç kez tıklatın. İlk tıklattığınızda Sekmeli Panelin tamamı, ikinci kez tıklattığınızda Sekme Kabı, üçüncü kez tıklattığınızda ise sağ taraftaki Sekme seçilir.
O sırada widget'taki hangi alt öğenin seçili olduğunu görmek için Seçim Göstergesini kontrol edin. Üçüncü sekmeyi silmek için Delete (Mac) veya Geri Alma (Windows) tuşlarına basın. Bu değişikliği yaptıktan sonra, geriye yalnızca iki sekme kalacaktır. Sayfada herhangi başka bir yeri tıklatın.
Widget'ı bir kez daha tıklatarak Sekmeli Panelin tamamını seçin. Tutamaçları sürükleyerek tüm widget'ın boyutlarını genişlik değeri 840, yükseklik değeri 645 olacak şekilde ayarlayın. Tutamaçları sürüklediğiniz sırada görünen ölçülere başvurabilirsiniz.
Ayrıca, Dönüştür panelini kontrol ederek G (genişlik) ve Y (yükseklik) alanlarındaki değerlere de bakabilirsiniz.
Seçim aracını kullanarak Sekmeli Paneller widget'ını sayfanın üst kısmına yakın bir konuma dikey olarak ortalayarak yerleştirin.
Kontrol panelinde İğnele arabiriminin üst orta kısımdaki konumunu tıklatarak Sekmeli Paneller widget'ını yerine iğneleyin. Nesnelerin kaymaması amacıyla bir konuma sabitlenmesi hakkında daha fazla bilgi için bu bağlantıya bakın.
Sekmeli Paneller widget'ı halen seçiliyken, soldaki sekmeyi tıklatarak Sekme Kabı'nı (üstteki her iki sekmeyi kapsayan öğe) seçin. Seçim aracını kullanarak yükseklik yaklaşık 98 piksel değerine gelene kadar ortadaki tutamacı aşağı doğru sürükleyin.
Aralık panelinde şu değerleri, aşağıdaki görüntüde gösterilen şekilde ayarlayın:
Bu değişiklikleri yaptıktan sonra, Seçim aracını kullanarak Sekmeli Paneller widget'ının tamamını Sekmeli Panelin üst kısmı, üstbilgi dikdörtgeninin alt kısmıyla üst üste gelecek ve aralarında dikey yönde boşluk kalmayacak şekilde sayfanın en üstüne kadar sürükleyin.
Gerekirse yakınlaşarak öğelerin nasıl hizalandığına daha yakından bakabilirsiniz. İşleminizi tamamladıktan sonra büyüteç değerini tekrar %100 olarak ayarlayın.
Sekmeli Paneller widget'ını ekledikten sonraki bölümde, iki sekmeyi tasarlamak için stilleri güncelleme işlemlerini göreceğiz.
Soldaki sekmeyi üç kez tıklatarak sol Sekme'yi seçin. Durumlar panelini açarak Normal durumunu seçin. Dolgu menüsünü kullanarak dolgu rengini ayarlayın. Kontur genişliğini 0 olarak ayarlayın.
Durumlar panelinden Rollover durumunu seçin. Sekmenin Rollover durumunun dolgu rengini 571E00 olarak ayarlayın. Rollover durumunun dolgu rengini ayarladığınızda, Fare Tuşu Basılı durumunun da otomatik olarak güncellendiğini göreceksiniz.
Etkin durumunu seçin ve Etkin durumundayken sekmeye aynı dolgu rengini uygulayın. Artık Normal durumu bir önceki adımda seçtiğiniz dolgu rengiyle doldurulmuş ve diğer üç durum 571E00 ile doldurulmuştur.
Soldaki sekmeyi bir kez daha tıklatarak Etiket'i seçin. Etiket seçildiğinde Seçim Göstergesinde Etiket sözcüğü görüntülenir. Durumlar panelinden Normal durumunu seçin ve ardından Metin panelini kullanarak şu nitelikleri, aşağıdaki görüntüde gösterilen şekilde ayarlayın:
Etiket halen seçiliyken, Paragraf Stilleri panelinin alt kısmındaki Yeni Stil düğmesini tıklatın. Bu format ayarını istediğiniz zaman tek bir tıklatmayla yeniden uygulamak için bu yeni paragraf stilini yeniden adlandırın. Örneğin, head-tabs.
Durumlar paneline baktığınızda, Normal durumu seçiliyken Etiket'e uyguladığınız formatın Rollover ve Fare Tuşu Basılı durumlarına da uygulandığını göreceksiniz. Etkin durumunu seçin, ardından head-tabs adlı paragraf stilini bir kez daha tıklatarak formatı Etkin durumuna uygulayın. Artık her iki sekmedeki tüm durumların stili belirlenmiştir.
Normal durumunu tekrar seçin.
Metin aracını kullanarak bütün sekmelerin hepsindeki etiket metnini seçin ve etiketleriniz için uygun adları girin.
Soldaki Sekmeyi seçip Durumlar paneline baktığınızda, son formatın her bir sekme ve etikete uygulandığını göreceksiniz. Sağdaki sekmeyi tıklattığınızda, her bir sekmedeki metin içeriği dışında durumların aynı şekilde göründüğünü göreceksiniz.
Etiketleri farklı olan iki farklı sekmeyi tekrar tekrar tıklatarak inceleyin. Sekmelerin her birinin yer tutucu metni farklıdır, böylece bir kabın görüntülendiğini ve diğerinin gizlendiğini anlayabilirsiniz.
Widget'ınızın sağında bulunan sekmeyi tıklatın. Sağdaki sekme seçildiğinde, ilgili içerik alanı sekmenin alt kısmında görüntülenir. Bu davranış, sayfa düzenleme sırasında Tasarım görünümünde ve yayındaki web sitesinde sergilenen davranıştır. Sekmeli Paneller widget'larının yararlı olmalarının nedeni budur. Bu şekilde, tek bir sayfada birden fazla içeriği verimli bir şekilde görüntüleyebilirsiniz.
Sekmeleriniz için İçerik Alanı'nı seçin. İçerik Alanı seçildiğinde Seçim Göstergesinde İçerik Alanı sözcüğü görüntülenir. Yer tutucu görüntü dosyasını seçin ve Delete (Mac) veya Geri Alma (Windows) tuşlarına basarak dosyayı silin.
Metin aracını kullanarak varolan yer tutucu üstbilgi metnini seçin. Kalın üstbilgi metnini (Mauris sit amet) seçip silin.
Geçici olarak Adobe Muse'dan masaüstünüze geçin. Örnek dosyalar klasörünü açın ve text-about-ourstory.txt adlı dosyayı bulun. Dosyayı çift tıklatarak bir metin düzenleyicide açın. Sayfanın ... crafted through years of baking for friends and family yazan satıra kadar olan ilk bölümünü kopyalayın.
Muse'a geri dönün. Metin aracını kullanarak varolan yer tutucu metni seçin. Kopyaladığınız metin içeriğini metin çerçevesine yapıştırın. Fazladan bir satır bırakın ve metin çerçevesinin üst kısmına dönün.
Metin çerçevesi seçiliyken Metin panelini kullanarak metninizi formatlayacağınız ayarları seçin. Örneğin, şu ayarları seçebilirsiniz:
Metin halen seçiliyken Paragraf Stilleri panelinin alt kısmındaki Yeni Stil düğmesini tıklatın. Yeni paragraf stilini çift tıklatın ve yeniden adlandırın. Örneğin, body. Böylelikle, aynı formatı diğer metin içeriğine yeniden uygulamanız kolaylaşır.
Renk Örnekleri panelinde, #222222 kodlu renk değerini çift tıklatın ve bu rengi yeniden adlandırın. Örneğin, katieblack.
Kontrol panelinde, metin alanının Kontur rengini #222222 (katieblack) koduna, Kontur Genişliği'ni ise 5 piksele ayarlayın.
Dolgu menüsünü kullanarak metin alanının dolgu rengini açık bej rengine (#F8F3E2) ayarlayın. Görüntü bölümünün yanındaki klasörü tıklatın ve örnek dosyalar klasöründeki bg-texture.png adlı dosyayı bulup seçin. Sığdırma menüsünü Döşe olarak ayarlayın.
Aralık panelinde Sol ve Sağ aralığı ayarlayın. Örneğin, Sol aralığı 24 ve Sağ aralığı 15 değerine ayarlayabilirsiniz.
Bir sonraki adımda, sekmelere denk gelen içerik alanı kaplarının her birine içerik ekleyeceksiniz.
Seçim aracını kullanarak metin alanını yeniden boyutlandırın. Kabın sol tarafına sürükleyin ve tutamaçları kullanarak genişliğini mevcut metin alanı aralığının yaklaşık yarısına ayarlayın (yaklaşık genişlik 390 piksel, yükseklik 381 piksel olacak şekilde).
Bir sonraki adımda, mevcut metin çerçevesini çoğaltarak içerik alanının sağ tarafını dolduran ikinci bir metin çerçevesi oluşturacaksınız.
Seçim aracını kullanarak metin çerçevesini seçin. Option (Mac) veya Alt (Windows) tuşunu basılı tutarak metin çerçevesinin çoğalttığınız kopyasını içerik alanının sağ tarafına sürükleyin (aşağıdaki görüntüye bakın).
Sağdaki metin çerçevesini soldaki metin çerçevesiyle yatay olarak hizalamak için açılan hizalama kılavuzlarını kullanın.
Geçici olarak Muse'dan Sekmeli Panellerin içeriğini barındıran metin düzenleme programına geçin. Çoğaltılan sekmenize yapıştırmak istediğiniz içeriği kopyalayın.
Muse'a geri dönün. Çoğaltılan sağ metin çerçevesinde bulunan tüm metinleri silin. Panodan kopyaladığınız yeni metin içeriğini yapıştırın.
Metin aracını kullanarak her iki metin çerçevesini istenen konumda içerik alanı içinde hizalanacak ve ortalanacak şekilde yerleştirin.
Metin çerçevesi halen seçiliyken Escape tuşuna bir kez basarak çoğaltılan sekmedeki İçerik Alanı'nı seçin. Kontur genişliğini 0, dolgu rengini ise Yok olarak ayarlayın.
Metin çerçevelerini kopyalama işlemi tamamlanmak üzeredir. Son bölüm, soldaki metin çerçevesinin içindeki metnin çevresine sarılan küçük bir görüntü ekleme işleminden oluşmaktadır.
Akordiyon Paneli widget'ları, bir ekranın küçük bir alanına çok fazla içerik sığdırmanıza yardımcı olur. Daraltma ve genişletme davranışı, ziyaretçilerin bir etiket panelini tıklatarak ilgili içerik alanını görüntülemesini sağlar. Akordiyon Paneli widget'ları, masaüstü sitelerin yanı sıra mobil mizanpajlarda da içerik görüntülemek için sıklıkla kullanılır.
Bu bölümde, sitenizdeki her bir sayfaya içerik ekleme yöntemleri açıklanmaktadır. Bu işlem için Akordiyon widget'ı adında başka bir widget türüyle çalışılacaktır. Panel widget'ları (Akordiyon ve Sekmeli Paneller widget'ları), ekran alanının küçük bir bölgesindeki sayfada daha fazla içerik görüntülenmesini mümkün kılmaları nedeniyle oldukça kullanışlıdırlar.
Projenizi Tasarım görünümünde açın ve düzenlemeye başlayın.
Dosya > Yerleştir öğesini seçin. İçe Aktar iletişim kutusunda, varlıklarınızın bulunduğu klasöre gidin ve ihtiyacınız olan görüntü dosyasını seçin. Seç'i tıklatın ve sayfanın üst kısmını bir kez tıklatıp görüntüyü üstbilgi metni olarak sayfaya orijinal boyutunda yerleştirin. Akordiyon widget'ını bu üstbilginin altına ekleyeceksiniz.
Widget Kitaplığı'nı açın. (Açmak için Pencere > Widget Kitaplığı'nı seçin. Zaten açıksa en üstteki sekmeyi tıklatarak Widget Kitaplığı'nı yerleştirilmiş paneller kümesinde etkin hale getirin.)
Paneller'i tıklatarak Panel widget'ları listesini genişletin. Akordiyon widget'ını seçin. Akordiyon widget'ını sayfaya sürükleyerek sayfa içerik bölgesinin sol üst köşesine yerleştirin.
Seçim aracını kullanarak widget'ın çeşitli bileşenlerini seçin. Widget'ın tamamını seçtiğinizde, Kontrol panelinin sol üst köşesindeki Seçim Göstergesi “Widget” sözcüğünü gösterir. Bir daha tıklattığınızda Seçim Göstergesi'nin bir kap ya da metin çerçevesi seçtiğinizi göstererek güncellendiğini göreceksiniz. Seçim Göstergesi, widget'ın şu anda seçili olan bölümünü gösterir.
Widget'ın bu öğesinin işaretini kaldırmak için Escape tuşuna basarak geçerli seçimi bir düzey yukarı getirebilir veya tuşa sürekli olarak basarak iç içe öğelerden bir düzey yukarı çıkabilirsiniz. Alternatif olarak, sayfanın başka bir bölümünü tıklatarak widget'tan ayrılabilirsiniz.
Akordiyon widget'ında varsayılan olarak iki panel bulunur. Üst panelde yer tutucu etiket adı Lorem 1, alt panelde ise yer tutucu etiket adı Ipsum 2 görüntülenir.
Yuvarlak mavi ok simgesini tıklatarak Widget Seçenekleri iletişim kutusunu açın. Birlikte Düzenle seçeneğinin işaretli olduğundan emin olun. Bu seçenek, Akordiyon'da bir sekme adında yapacağınız tüm değişikliklerin tüm sekmelere uygulanmasını sağlar.
Seçim aracıyla widget'ı bir kez tıklatarak seçin, ardından sağ tutamacı sağa sürükleyerek widget'ın genişliğini artırın ve aşağıda resimde gösterilen şekilde iki sütunu birden kapsayacak genişliğe getirin.
Widget'ın en alt kısmında, Ipsum 2'nin altında bulunan artı (+) işaretini tıklatarak üçüncü bir panel ekleyin. Üçüncü panel yer tutucu sekmesi adı olarak Ipsum 3 şeklinde görüntülenir.
Bir sonraki bölümde, Akordiyon widget'ının bir paneline metin içeriği ekleyerek doldurma yöntemleri açıklanacaktır. Ancak öncelikle Akordiyon widget'ındaki birinci panelin üzerinde görünen üst sekme adını güncelleyeceğiz.
En üstteki sekmenin şu anda Lorem 1 adını taşıyan metin çerçevesini seçmek için Seçim aracını kullanın. “Lorem 1”i bir defa tıklatarak widget'ın tamamını seçin ve en üst sekmeyle ilgili kabı genişletin, ardından “Lorem 1” metnini tıklatarak metin çerçevesini seçin. Metin çerçevesi seçildiğinde, Seçim Göstergesi'nde "Metin Çerçevesi" sözcükleri görüntülenir.
Düzenlemek için "Lorem 1" yazılı yer tutucu metni çift tıklatın ve istediğiniz metni yazın.
Birinci sekmenin altındaki açık gri büyük kabı seçin. Metin aracını kullanarak büyük kaptaki bir metin çerçevesini sürükleyip açın.
Yeni metin çerçevesine üstbilgi metninizi yazın.
Akordiyon widget'ının üstbilgiyi görüntüleyen üst sekmesini seçin.
Yuvarlak mavi ok düğmesini tıklatarak Seçenekler menüsünü açın. Birlikte Düzenle seçeneğinin işaretini kaldırın. Seçenekler menüsünün dışında bir yeri tıklatarak menüyü kapatın.
Seçim Göstergesi "Metin Çerçevesi" sözcüklerini görüntüleyene kadar üst sekmeyi iki defa tıklatın. Üst sekmenin metin çerçevesi seçiliyken Kontrol panelindeki Dolgu bağlantısını tıklatarak Dolgu menüsünü açın. Renk seçiciyi tıklatıp arka plan dolgu rengini, varsayılan koyu gri rengi yerine Yok olarak ayarlayın.
Görüntü bölümündeki klasör simgesini tıklatıp İçe Aktar iletişim kutusunu açın. Varlıklar klasörünüze gidin ve eklemek istediğiniz görüntüyü seçin.
Aralık panelini açın. Dolgu: L (Sol) bölümündeki yukarı oku basılı tutarak üst bilgiden önceki aralığı artırın ve metnin sekmenin arka plan görüntüsünün üzerinde ortalanmasını sağlayın.
Akordiyon widget'ının ilk sekmesi tamamlanmıştır.
İlk sekmeyi düzenlediğinizde Birlikte Düzenle ayarının seçimini kaldırdıysanız değişiklikler diğer sekmeler için görünmez. Akordiyon Panelinizdeki diğer sekmelere ayrı ayrı stil uygulamanız gerekir.
Akordiyon Paneli widget'ları, varsayılan olarak üstteki etiket panellerini ve alttaki içerik alanlarını dikey yönde görüntüleyecek şekilde ayarlanmıştır.
Akordiyon widget'ını kullanarak yatay yönde bir ayar düğmesi oluşturmak için şu adımları uygulayın:
Tasarım görünümünde, Widget Kitaplığı'nı açın ve Paneller bölümünü genişletin.
Paneller bölümünden Akordiyon seçeneğini belirleyin ve sayfaya sürükleyin.
Seçim aracını kullanarak bir kez tıklatıp widget'ın tamamını seçin. Kontrol panelinin sol üst köşesindeki Seçim Göstergesi, Akordiyon sözcüğünü görüntüler.
Döndürürken Shift tuşunu basılı tuttuğunuzda, orantılar sınırlı kalır ve widget'ı 45 derecelik artışlarla döndürmenizi sağlar. Widget döndürülürken geçerli döndürme değerini görüntüleyen bir araç ipucu gösterilir.
Widget'ı döndürdükten sonra Önizleme bağlantısını tıklatarak veya sayfayı tarayıcıda önizleyerek Akordiyonun panelleri halen beklenen şekilde genişletip daralttığını görebilirsiniz. Etiket kaplarının, tıklatıldığında ilgili içerik alanını görüntüleyecek şekilde yazılıp yazılmadığını kontrol edin.
Artık geriye bir tek etiketleri ve içerik alanı kaplarını yana doğru değil de, "yüzü yukarı bakacak şekilde" görüntülenecek içeriklerle doldurmak kaldı.
İçerik alanlarındaki metin içeriğini görüntülemek için şu adımları izleyin. Bir içerik alanı kabındaki metin alanını döndürmek için yukarıda açıklanan tekniği kullanacaksınız.
İçerik alanındaki varsayılan metni iki kez tıklatın. İlk tıklattığınızda tüm Akordiyon widget'ı, ikinci kez tıklattığınızda ise içerik alanı kabı seçilir. İçerik alanı seçiliyken Seçim aracını kullanarak ve yeniden boyutlandırma tutamaçlarını tıklatıp sürükleyerek içerik alanının boyutunu genişletin.
İçerik alanı halen seçiliyken içerik alanının içindeki metin çerçevesini seçmek için bir kez daha tıklatın. Dönüş imlecinin görüntülendiğini görmek için imlecinizi metin çerçevesi köşelerinden birinin üzerine getirin. Shift tuşunu basılı tutarak metin çerçevesini dış widget ile aynı 90 derecelik dönüş açısıyla döndürün.
Metin çerçevesini döndürdükten sonra Seçim aracını kullanarak içerik alanının içinde yeniden konumlandırın. Metin aracını kullanarak yer tutucu metnini görüntülenmesini istediğiniz asıl metinle değiştirin ve Kontrol paneli ile Metin panelindeki metin formatlama seçeneklerinden yararlanarak metne stil verin (veya görünümünü güncellemek için paragraf stilleri uygulayın).
İçerik alanı kaplarını istediğiniz şekilde doldurmak için görüntü yerleştirin, dikdörtgenler çizin veya HTML gömün. Döndürülen kabın içine otomatik olarak dik bir şekilde yerleştirildiği için bu içeriği döndürmenize gerek yoktur.
Etiket kaplarındaki metni güncellemek için çeşitli seçenekler sunulur.
Etiketler kısaysa ve metnin "yana doğru" kalmasını istiyorsanız (örneğin, bir kitap rafındaki kitaplar gibi görünmesi için) Metin aracını kullanarak mevcut yer tutucu metnini seçip istediğiniz etiketleri yazabilirsiniz (aşağıdaki görüntüye bakın).
Metin etiketleri kullanmak istemiyorsanız etiket kaplarındaki mevcut yer tutucu metnini silebilir ve Kontrol paneli ya da Dolgu panelindeki (Durumlar paneliyle birlikte) formatlama seçeneklerinden yararlanarak her bir etikete farklı bir renk uygulayabilirsiniz (aşağıdaki görüntüye bakın). Her bir etiket kabının görünümünü ayrı ayrı güncellemek için mavi ok düğmesini tıklatarak Seçenekler menüsüne erişin ve Birlikte Düzenle seçeneğini devre dışı bırakın.
Bir başka seçenek de bir görüntü düzenleme programı kullanarak etiket panellerine eklenecek görüntüler oluşturmaktır. Görüntüleri sayfaya yerleştirin, kesin, metin aracıyla etiket metnini seçin ve görüntüleri etiket kaplarına yapıştırın. İsterseniz görüntülerin dikey yönde metin içermesini sağlayabilirsiniz (aşağıdaki görüntüye bakın).
Akordiyon panellerinde bağlayıcı bağlantılar ekleyerek Akordiyon widget'larına dilediğiniz sayfa öğesini bağlayabilirsiniz. Akordiyon widget'larına bağlayıcı bağlantıların nasıl ekleneceğini öğrenmek için okumaya devam edin:
Bağlayıcı bağlantıyı eklemek istediğiniz Akordiyon widget'ını seçin. Bağlayıcı bağlantıyı eklemek istediğiniz sekmeyi tıklatın.
Yerleştirme Tabancasına bir bağlayıcı bağlantı yüklemek için Bağlayıcı aracını tıklatın.
Bağlayıcı bağlantıyı Akordiyon widget'ına yerleştirin.
Bağlayıcıyı yeniden adlandırmak üzere bir açılır pencere görüntülenir. Bağlayıcınız için uygun bir ad yazın ve Tamam'ı tıklatın.
Artık bu bağlayıcıyı web sitenizde herhangi bir sayfadaki bir sayfa öğesine bağlayabilirsiniz.
Bu bağlayıcıya bir sayfa öğesi bağlamak için bağlamak istediğiniz sayfa öğesini seçin. Üstteki Köprüler açılır menüsünden oluşturduğunuz bağlayıcıyı seçin.
Yayındaki sitenizde sayfa öğesine tıkladığınızda sayfa, bağlayıcı bağlantıyı yerleştirdiğiniz Akordiyon sekmesini görüntüler.