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

Gömülü HTML kullanarak Muse sitenizde blog görüntüleme

Gömülü HTML, Google, YouTube, Flickr veya Picasa gibi üçüncü taraf bir web sitesi tarafından oluşturulmuş olan kaynak kod anlamına gelir. Bu web sitelerinde bir hesap oluşturup oturum açabilir ve sitedeki gömme kodunu kopyalayarak kendi sitenize ekleyebilirsiniz.

Gömülü HTML'yi bir sayfaya yapıştırdığınızda, sitenizdeki bir sayfaya, içinde üçüncü taraf sitedeki içerikleri gösteren bir pencere yerleştirmiş olursunuz.

Gömülü HTML, karmaşık bilgileri (haritalar, hava durumu bilgileri, borsa bilgileri gibi) ve zengin medyayı (dijital videolar, slayt gösterileri ve ses dosyaları gibi) hızla ve kolayca eklemenin en iyi yoludur. Bu strateji, üçüncü taraf bir siteyi barındırma hizmeti olarak kullanmanızı ve arabirimi yüklemenizi sağlayan ek avantajlar sunar. Örneğin, YouTube'da ücretsiz bir hesap oluşturduğunuzda, kendinize ait YouTube kanalını oluşturabilir ve sitenize görüntülü içerikler yükleyebilirsiniz. YouTube'da, yükleme işlemlerini kolaylaştıran ve video dosyalarını kendi sitesinde barındıran bir web sayfası bulunur. Sitenizi güncellemek istediğinizde, YouTube kanalınıza daha fazla video ekleyip gömme kodunu kopyalayarak bir sayfaya yapıştırabilir ve Muse sitenize yeni videolar ekleyebilirsiniz.

Bu bölümde, Tumblr'dan kaynak kodu kopyalayacaksınız. Tumblr, hesap oluşturup oturum açtıktan sonra genel kullanıcılara açık blog girişleri yayınlayabileceğiniz ücretsiz bir çevrimiçi hizmettir. Kullanımı son derece kolay olan blog'lar, özellikle kendi sitesini güncelleme konusunda teknik bir eğilimi olmayan kişiler için işlemleri kolaylaştırmak istediğinizde yarar sağlar. Çoğu blog sitesinde çevrimiçi bir arabirim olduğundan, istediğiniz tarayıcıyı kullanarak hesabınızda oturum açabilir ve HTML bilgisi ya da ek yazılımlara ihtiyaç duymadan yeni girişler yayınlayabilirsiniz.

Not: Sayfaya gömdüğünüz blog'u görüntülemek için web sitenizi görüntüleyen ziyaretçilerin Tumblr hesabının olması gerekmez. Web sitenize ekleyeceğiniz özel bir blog ve gömme kodu oluşturmak için yalnızca siteyi tasarlarken sizin hesabınızın olması gerekir.

  1. Bu eğitimde ilerlemek için bir Tumblr hesabı oluşturmanıza gerek yoktur. Ücretsiz bir blog oluşturduktan sonra Tumblr web sitesi tarafından oluşturulmuş olan aşağıdaki kodu kopyalamanız yeterlidir:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  1. Plan görünümünde, events (etkinlikler) sayfasının minik resmini çift tıklatarak sayfayı açın ve Tasarım görünümünde düzenleyin.
  2. Boş sayfanın orta yerini tıklatın ve aşağıdaki yöntemlerden birini kullanarak HTML kodunu gömün:
  • Düzenle > Yapıştır'ı seçerek veya klavye kısayolunu (Mac için Command+V, Windows için Control+V) kullanarak kodu doğrudan sayfaya yapıştırın.
  • Nesne > HTML Ekle'yi seçin. Açılan HTML Düzenle penceresindeki alanın içini tıklatın ve içeriği yapıştırın. Tamam'ı tıklatarak HTML Düzenle penceresini kapatın.

Not: Çoğu durumda, Muse HTML kodunu tanır ve doğrudan sayfaya yapıştırdığınız HTML'yi otomatik olarak gömer. Ancak, sayfada üçüncü taraf web sitesindeki içeriğin yerine kodu görürseniz Nesne > HTML Ekle seçeneklerini kullanmayı deneyebilirsiniz.

HTML kodunu gömdükten sonra, Katie's Cafe Tumblr hesabı için girilen blog gönderilerini çevreleyen tutamaçlara sahip mavi bir sınırlama kutusu göreceksiniz.

  1. Seçim aracını kullanarak tutamaçları sürükleyebilir ve blog içeriğini yeniden boyutlandırabilirsiniz; böylelikle içerik sayfa genişliğinin yaklaşık %80'ine yayılır. Blog içeriğini sayfada ortalayarak döşeme arka plan grafiğinin sol ve sağ taraflardan görünmesini sağlayın. Mavi ölçüm dikdörtgenleri diğer nesnelerden uzaklığı gösterir. Kısa bir süre için görünen kırmızı renkli hizalama kılavuzu, seçilen nesnenin ne zaman dikey olarak ortalandığını belirtir.
Sayfayı yeniden boyutlandırıp yerleştirin
Tumblr blog'unu events (etkinlikler) sayfasında yeniden boyutlandırıp yerleştirin.

Muse sayfalarına HTML gömmek için yapmanız gereken işlemler bunlardır. HTML kodunu düzenlemek istediğinizde, gömülü HTML öğesini sağ tıklatıp açılan bağlam menüsünden HTML Düzenle'yi seçebilirsiniz. Bu işlemle açılan HTML Düzenle penceresinden daha önce yapıştırmış olduğunuz koda erişebilirsiniz.

Şimdi sıra events (etkinlikler) sayfasında yaptığınız değişiklikleri gözden geçirmeye geldi:

  1. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek events (etkinlikler) sayfasını yeni bir tarayıcı penceresinde açın.

Blog girişleri listesini aşağı kaydırdığınızda, üstbilginin diğer sayfa içeriğinin üst kısmında görüntülendiğini göreceksiniz. Bu davranış, event (etkinlikler) sayfası Ön Plan kalıp sayfayı kullandığı ve bu kalıp sayfadaki üstbilgi içeriği ön planda görüntülenecek şekilde ayarlandığı için oluşur.

Events (etkinlikler) sayfası artık tamamlanmıştır. Bir sonraki bölümde, gömülü HTML içeriğini bir widget'ın içine yapıştırarak üçüncü taraf içerikleri kullanıcı etkileşimine bağlı olarak kontrol etme yöntemleri hakkında bilgi edineceksiniz.

Muse web sitenize video gömme

Şu anda, hedef kap gri dolgu rengiyle doldurulmuştur. Ancak, hedef kaba farklı görüntü dosyaları, dolgulu dikdörtgenler, metinler veya başka bir web sitesinden kopyaladığınız gömülü HTML gibi her türlü içeriği yerleştirebilirsiniz.

Bu örnekte, YouTube tarafından oluşturulan gömülü HTML'yi yapıştıracaksınız.

Hesabınızı kullanarak yüklediğiniz bir videoyu görüntülemek için YouTube.com'da bir sayfayı ziyaret ettiğinizi varsayalım. Sırasıyla Paylaş ve Ekle düğmelerini tıklattığınızda, videonun gömme koduna erişip kopyalayabilirsiniz.

Video gömme
İstediğiniz video boyutunu seçtikten sonra, YouTube tarafından oluşturulan gömme kodunu kopyalayın.

Bu videoda, Katie's Cafe videosunun gömme kodu siteyi kopyaladığı için YouTube'a girmenize gerek yoktur. Aşağıdaki gömme kodunu kopyalayarak panonuza yapıştırın:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

Yukarıdaki kodda, YouTube'da yayınlanan video dosyasına yönlenen bağlantıyı çevreleyen i-Çerçeve etiketleri kullanılmaktadır. i-Çerçeve etiketi, web sayfasına eklediğiniz içeriği bir “pencere” içinde göstermenizi sağlayan bir HTML kabıdır.

Yukarıdaki kabı kopyaladıktan sonra Muse'a geri dönün.

  1. Seçim aracını kullanarak sayfanın gri kenarlığını tıklatın; sol üst köşedeki Seçim Göstergesinde Sayfa sözcüğü görüntülenecektir. Bu, sayfanın tamamının seçildiği anlamına gelir.
  2. Gri dolgu renkli büyük hedef kabı tıklatın. Sol üst köşedeki Seçim Göstergesinde Kompozisyon sözcüğü görüntülenir. Gri hedef kabı bir kez daha tıklattığınızda Seçim göstergesinde Kap sözcüğü görüntülenir. Kabı tekrar tıklatın (Hedef yazacaktır), ardından Seçim Göstergesinde Görüntü Çerçevesi sözcüğü görünene kadar bir kez daha tıklatın. Görüntü çerçevesini hedef kaptan kaldırmak için Geri Alma (Windows) veya Delete (Mac) tuşlarına basın.

Bir sonraki bölümde iç hedef kap halen seçiliyken yukarıda kopyaladığınız HTML kodunu hedef kaba yapıştırma işlemleri yapılacaktır.

Not: Kodu widget'ın hedef kabın İÇİNE yapıştırmayı hedeflediğimizden ötürü, kodu hedef kaba yapıştırmak büyük görüntüyü tetik kabına yapıştırma işleminde olduğu gibi biraz zorlayıcı olabilir. Video kodunu doğrudan sayfaya gömülecek şekilde widget'ın dışına yapıştırmak mümkündür (o sırada seçilen öğeye bağlı olarak). Bu nedenle dikkatle ilerlemelisiniz. Önizle düğmesini tıklatarak Işık kutusunu test ettiyseniz ve büyük görüntüyü henüz tıklatmadığınız halde videonun görüntülendiğini görüyorsanız video kodu kaba başarılı bir şekilde yapıştırılmamış demektir; videonun hemen görüntülenmesinin nedeni budur. Video, ancak büyük görüntüyü tıklattıktan sonra görüntülenmelidir.

Video kodunu hedef kaba yapıştırmak için (Seçim Göstergesinde Kap sözcüğü görüntülenirken) aşağıdaki adımları uygulayın.

  1. Nesne > HTML Ekle'yi seçin. Açılan pencerede, varsayılan yer tutucu metni seçin ve Delete (Mac) veya Geri Alma (Windows) tuşlarına basarak metni kaldırın. Düzenle > Yapıştır'ı seçerek yukarıda kopyaladığınız YouTube kodunu HTML Kodu alanına yapıştırın. Tamam'ı tıklatarak HTML Kodu penceresini kapatın.

Not: Çoğu durumda, Muse HTML kodunu yapıştırdığınızı otomatik olarak algılar ve bunun düz bir metin değil bir HTML olduğunu anlar. Bu nedenle, dilerseniz HTML penceresini açmak için Nesne > HTML Ekle seçeneklerini belirlemek yerine iç hedef kap seçiliyken sağ tıklatarak (veya Control tuşunu basılı tutup tıklatarak) açılan bağlam menüsünden Yapıştır'ı seçebilirsiniz. (Veya Düzenle > Yapıştır'ı seçerek ya da klavye kısayolunu kullanarak kaynak kodu hedef kaba yapıştırabilirsiniz). Muse, video kodunu hedef kaba yapıştırma hedefine ulaşmanız için pek çok yöntem sunar.

Kodu hedef kaba yapıştırdıktan sonra, videonun ilk karesinin (bir fincan kahve) görüntülendiğini göreceksiniz. Videonun ilk karesinin görüntülenmesi, HTML gömme kodunu başarıyla yapıştırdığınızı belirtir. Sayfayı Tasarım görünümünde düzenlediğiniz sırada video oynatılmaz. Video, ancak Kontrol panelindeki Önizle düğmesini tıklattığınızda veya sayfayı bir tarayıcıda önizlediğinizde oynatılır.

  1. Gerektiğinde Seçim aracını kullanarak hedef kabı yeniden boyutlandırabilir ve boyutları gömülü HTML video içeriğinin boyutlarına uygun şekilde genişletebilirsiniz. Genişlik yaklaşık 670 piksel, yükseklik ise 415 piksel olmalıdır. Video seçiliyken Seçim Göstergesinde HTML Öğesi sözcüğü görüntülenir.
  2. Hedef kap seçiliyken Escape tuşuna bir kez basarak dış kabı seçin. Dilerseniz uzak bir noktayı tıklatarak Işıklı Kutu Gösterimi widget'ının işaretini kaldırın, ardında üzerini iki kez tıklatın. İlk tıklattığınızda Kompozisyon, ikinci kez tıklattığınızda büyük kap seçilir. Seçim aracını kullanarak kabın tutamaçlarını sürükleyin ve hedef kabı kabın içinde ortalayın. Kabın boyutlarını genişliği 710 piksel, yüksekliği 460 piksel olacak şekilde yeniden boyutlandırın.
  3. Dolgu menüsünü kullanarak kabın dolgu rengini kahverengi (#63301B), dolgu renginin opaklık değerini ise 100 olarak ayarlayın.
Dolgu menüsü
Dolgu menüsünde kap dolgu rengini ve opaklık değerini ayarlayın.

  1. Kabın alt kısmındaki metin çerçevesini seçin ve Delete (Mac) veya Geri Alma (Windows) tuşlarına basarak çerçeveyi kaldırın. Metin çerçevesi hedeflenen içerik için başlıkla doldurulabilir, ancak bu projede başlık kullanılmamaktadır.
  2. Kabın sağ üst köşesindeki Kapat kutusunu (X işaretli) seçin. Kapat kutusunun içini tıklatarak kutunun etiketini seçin ve silin. Dolgu menüsünü kullanarak dolgu rengini Yok olarak ayarlayın. Dolgu menüsündeki Görüntü bölümünün yanında bulunan klasör simgesini tıklatın ve icon-close.png adlı dosyayı bulun. Seçim aracını kullanarak Kapat kutusunu kapat simgesinin görüntüsü tam olarak görüntülenecek şekilde yeniden boyutlandırın.
  3. Seçim aracını kullanarak hedef kabı ve tetik kaplarını sayfada görünmelerini istediğiniz yere taşıyın.
  4. Kompozisyon seçiliyken mavi ok düğmesini tıklatarak Seçenekler panelini açın. Bu örnekte, aşağıdaki ayarları kullanın:
    • Konum: Işık Kutusu
    • Geçiş: Soluk
    • Otomatik Oynat: Devre Dışı
    • Karıştır: Devre Dışı
    • Başta Tümünü Gizle: Devre Dışı
    • Çekmeyi Etkinleştir: Etkin
    • Üst Kısımdaki Tetikler: Devre Dışı
    • Kapat Düğmesi: Etkin
    • Düzenleme yaparken ışık kutusu bölümlerini göster: Etkin
    • Tümünü Tasarım Modunda Göster: Etkin
Kompozisyon seçenekleri
Widget davranışını kontrol etmek için Seçenekler menüsünden ayarları güncelleyin.

Seçenekler menüsünü kapatmak için menünün dışında herhangi bir yeri tıklatın. Bu noktada, widget artık yapılandırılmış ve test edilmeye hazır hale getirilmiştir.

Bu eğitimin ilk bölümlerinde, sayfalara HTML gömerek events (etkinlikler) sayfasına bir Tumblr blog'u ekleme yollarını öğrenmiştiniz. Ayrıca, gömülü HTML'yi bir Işık Kutusu Kompozisyonu widget'ının içine yapıştırarak bir YouTube videosunu ziyaretçi düğmeyi tıklattığında bir ışık kutusu penceresinde görüntüleme yöntemlerini de görmüştünüz. Bu bölümde, Google Haritalar sitesinde sağlanan bir gömülü HTML türünü daha göreceksiniz. Şu adımları uygulayın:

  1. Visit (Ziyaret Edin) sayfası Tasarım görünümünde açık değilse Plan'ı tıklatıp visit sayfasının minik resmini çift tıklatarak sayfayı açın.

Bu kaynak kodu maps.google.com sitesinden kopyalanmıştır. Bir adres için (ya da bu örnekte olduğu gibi, birden fazla konum için) özel bir harita oluşturabilirsiniz. Bu ücretsiz bir hizmettir; adresi (veya adresleri) verip Harita Oluştur düğmesini tıklatmanız yeterlidir.

Harita Oluştur'u tıklatın
Girdiğiniz adrese göre bir harita oluşturmak için Harita Oluştur düğmesini tıklatın.

Haritayı oluşturduktan sonra, Google Haritalar arabirimi ile bir başlık ve açıklama girebilirsiniz. Bunun ardından, Link (Bağlantı) düğmesini tıklatarak koda erişebilirsiniz. Paste HTML (HTML Yapıştır) etiketli alanda verilen HTML kodunu seçerek web sitesine gömün. Bu işlemden sonra Muse'a geri dönerek HTML'yi sayfaya gömebilirsiniz.

Sayfanıza HTML kodu ekleyin
Google Haritalar arabirimini kullanarak haritanın HTML kodunu oluşturun.

Bu eğitimin amacı doğrultusunda, kendi kendinize yeni bir harita oluşturmanıza gerek yoktur. Haritayı test etmek isterseniz herhangi bir adres girdikten sonra haritayı oluşturup kodu kopyalayarak deneme yapabilirsiniz. Ancak, sadece nasıl işlediğini test etmek isterseniz önceden oluşturulmuş bazı HTML kodlarıyla çalışabilirsiniz.

  1. Aşağıdaki kaynak kodunu kopyalayın:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

  1. Kodu, visit (ziyaret edin) sayfasının en üst kısmına yapıştırın. Seçim aracını kullanarak gömülü HTML'yi sayfanın üst kısmına yakın bir konuma, düşey olarak orta noktaya yerleştirerek haritanın yaklaşık dörtte birlik kısmını üstbilgi alanıyla çakıştırın. Harita ile altındaki çiçek grafiği arasında bir açıklama metni girebilecek kadar boşluk bırakmaya dikkat edin.
  2. Metin aracını kullanarak metin çerçevesini gömülü haritanın alt kısmına sürükleyin. Aşağıdaki metni kopyalayıp metin çerçevesine yapıştırın:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

  1. Metin panelini kullanarak aşağıdaki ayarları uygulayıp metni formatlayın:
    • Font: Droid Serif (veya herhangi bir serif fontu)
    • Font Boyutu: 14
    • Font Rengi: #222222
    • Font hizalama: Sol
    • Satır Aralığı: %120

Haritaya açıklama ekledikten sonra, visit (ziyaret edin) sayfası tamamlanmış olur.

  1. Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek visit (ziyaret edin) sayfasının tarayıcıda nasıl göründüğünü kontrol edin.
Haritalı web sayfası
Bitmiş visit (ziyaret edin) sayfasında tam olarak işlevsel bir Google haritası bulunmaktadır.

Gömülü HTML Google haritasının etkileşimli olduğunu göreceksiniz. Okları kullanarak haritayı kendi penceresi içinde döndürebilir, + ve - düğmelerini kullanarak yakınlaştırıp uzaklaştırabilirsiniz.

Artık sitedeki tüm sayfaların tasarımı tamamlanmıştır. Bu eğitimin kalan bölümlerinde, son rötuşları yapma ve siteyi deneme sitesi olarak yayınlama yollarını göreceksiniz.

 Adobe Muse sayfalarınıza HTML gömme

Sitenizin sayfalarına HTML kodu gömerek bir üçüncü taraf web sunucusundan dinamik olarak görünecek karmaşık site özellikleri ekleyebilirsiniz. Bu kod parçaları, Google, Yahoo!, YouTube ve diğerleri gibi web hizmeti sağlayıcılardan kopyalanarak Muse sayfalarına kolayca yapıştırılabilir. Bu bölümde, iki farklı gömülü HTML örneğiyle çalışılacak ve Muse'da oluşturulan bir web sitesine kolayca sosyal medya içeriği ve etkileşimli Google haritası ekleme yöntemleri açıklanacaktır.

Öncelikle Ana Sayfa sayfasının içeriğini tamamlamakla başlayalım. Tüm eğitimi izlediyseniz Ana Sayfa sayfanız Tasarım görünümünde halen açık olabilir. Açık değilse Plan görünümünde, Ana Sayfa minik resmini çift tıklatarak Tasarım görünümünde düzenlemek üzere açın. Gömülü HTML'yi, Ana Sayfa sayfasına daha önce eklemiş olduğunuz slayt gösterisinin üst kısmına ekleyeceğiz.

Gömülü HTML Twitter yayını ekleyerek en son gönderileri görüntüleme

Twitter gibi pek çok web hizmetinde ücretsiz olarak bir hesap oluşturabilir ve bu web hizmetlerinin sitelerinde görüntülenen mesajlar yayınlayabilirsiniz. Ancak, bilgileri Twitter.com sayfasında görüntülemenin yanı sıra hesabınızı kullanarak giriş yapabilir ve gömülü kodu kopyalayarak aynı mesajları kendi oluşturduğunuz web sitesinde de gösterebilirsiniz.

Bu örnekte, Kevin's Koffee Kart için kurgu ürünü bir hesap oluşturulmuştur. Bu hesap, Twitter'da yeni kullanıcı olarak oturum açılmasını ve kayıt formunun doldurulmasını gerektirmektedir. Bu işlemden sonra sitenin arabirimini kullanarak mesaj yayınlayabilir ve gömülü kodu kopyalayarak bu mesajları web'de başka bir ortamda görüntüleyebilirsiniz. Bu işlem, web günlüğü gönderilerini, video içeriğini, RSS beslemelerini, stok bilgilerini, hava durumunu, oyun puanlarını ve diğer farklı türdeki dinamik verileri paylaşmak için kullandığınız işlemin aynısıdır. Bir müşteri için site oluşturuyorsanız müşterinize kendi müşterileriyle paylaşmak için daha önce bu tür web hizmetlerini kullanıp kullanmadığını sorun. Pek çok durumda, giriş yapmak ve görüntülemek istediğiniz verilerin gömülü kodunu almak için müşterinizin hesabını kullanabilirsiniz.

Twitter'a giriş yaparak kendi hesabınızı oluşturma gerekliliğini ortadan kaldırırken kullanacağınız, Twitter'dan kopyalanan Kevin's Koffee Kart hesabının gömülü kodu aşağıda verilmiştir:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

  1. Yukarıda verilen kodu kopyalayın.

  2. Muse'a geri dönün. Çoğu durumda, sayfada istediğiniz konumu tıklatıp sağ tıklatarak açılan bağlam menüsünden Yapıştır'ı seçmeniz yeterlidir. Alternatif olarak, yapıştırma klavye kısayollarını (Mac için Command+V ve Windows için Control+V) kullanabilirsiniz; Muse yapıştırdığınız metnin normal metin içeriği değil, kaynak kodu olduğunu algılar.

    Not:

    Kodun HTML olarak tanınmadığı nadir durumlarda, Nesne > HTML Ekle'yi seçerek HTML Kodu penceresini açabilirsiniz. Ardından, kopyaladığınız kaynak kodunu pencereye yapıştırıp Tamam'ı tıklatarak pencereyi kapatın ve kodu gömün.

  3. Kaynak kodunu gömdükten sonra (bu, temel olarak site sayfasında bir pencere oluşturarak üçüncü taraf bir web sitesindeki bağlantılı içeriği görüntüler), sayfada tam istediğiniz gibi görünmeyebilir. Twitter gömülü HTML içeriğinin varsayılan görüntüsü görüntülenir.

    Kaynak kodunu gömme
    Twitter besleme verileri beklenen şekilde görüntülenir, ancak metne stil uygulanmaz veya metin formatlanmaz.

  4. Twitter beslemesi metin alanının boyutunu, gömülü HTML'nin çevresindeki tutamaçları tıklatarak büyütün ve sayfa genişliğinin çoğunu ve yüksekliğinin yaklaşık üçte birini dolduracak şekilde genişletin.

    Gömülmüş kod kutusunu genişletme
    Twitter beslemesi veri penceresinin genişliğini ve yüksekliğini daha büyük bir boyuta getirin.

    Böylelikle metin halen varsayılan boyutunda olsa da daha büyük bir alan içinde görünür.

    Bir sonraki adımda, HTML Kodu penceresindeki kodu güncelleyerek dinamik metnin nasıl görüneceğini belirleyen bazı CSS stilleri eklenecektir. Bu işlem, yayınlanan mesajların Twitter.com sayfasında görüntülenme şeklini değiştirmez, ancak sitenizdeki metin formatını değiştirir.

  5. Aşağıdaki CSS stil kodunu kopyalayın:

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </style>

    Not:

    Yukarıdaki kodu inceleyerek aşinalık kazanın. Stillerin kodun ne olduğunu belirten bir açılış etiketine () ve tarayıcıların CSS stil kurallarının tamamlandığını bilmesini sağlayan bir kapanış etiketine () sarıldığını göreceksiniz. Kendi gömülü HTML kodunuza her stil uyguladığınızda, bu etiketleri etkilemek istediğiniz stillerin çevresinde köşeli parantez olarak uygulamanız gerekir. Bu durumda, Twitter web sitesi yayınlanan mesajları barındırır ve #twitFeed adında bir CSS kimlik seçici kullanarak metnin sitesinde nasıl görüneceğini kontrol eder. Yani, yukarıdaki kod temel olarak Twitter sitesinden alınan bu stil adını kullanır, ardından metnin sizin sitenizde nasıl görüneceğini tanımlayan bazı kurallar ekler ve Twitter.com tarafından uygulanan stilleri geçersiz kılar. Metin formatlamaya yönelik CSS kuralları hakkında daha fazla bilgi için W3C Schools web sitesini ziyaret edin.

  6. Gömülü HTML Kodu penceresini sağ tıklatın ve açılan bağlam menüsünden HTML'yi seçin. Bu eylem HTML Kodu penceresini açar ve daha önce yapıştırmış olduğunuz kaynak kodunu görmenizi sağlar. Bir site düzenlerken dilediğiniz zaman bu pencereyi açarak HTML kaynak içeriğini güncelleyebilirsiniz. Pencerenin en üst kısmında, daha önce gömmüş olduğunuz HTML kodunun üstündeki alanı tıklatın. 5. adımda kopyaladığınız yeni stil kodunu yapıştırın.

    Gömülmüş HTML kodu
    Stil kodunu, daha önce yapıştırdığınız Twitter kaynak kodunun üst kısmına, HTML Kodu penceresine yapıştırın.

  7. Tamam'ı tıklatarak HTML penceresini kapatın. Twitter metninin stili üzerinde yapılan bu değişiklikten sonra, Twitter sitesinden bağlantı verilen gönderi, Ana Sayfa sayfasındaki slayt gösterisinin üstünde artık beyaz metinde ve daha büyük boyutta görünür.

    Web sayfası Twitter metni gösterir
    HTML nesnesinin boyutu güncellenip metin stilleri formatlandıktan sonra tamamlanan Twitter beslemesi.

Ana Sayfa sayfası neredeyse tamamlandı. Sayfaya eklenecek yalnızca tek bir öğe kaldı.

  1. Dosya > Yerleştir'i seçin. İçe Aktar iletişim kutusunda, Kevins_Koffee_Kart klasöründeki DailyDrip.png adlı dosyayı bulup seçin. Seç'i tıklatın.

  2. Görüntüyü Ana Sayfa sayfasına yerleştirdikten sonra, Seçim aracını kullanarak görüntüyü sol tarafa, slayt gösterisinin üst kısmına yerleştirin ve slayt gösterisinin üst kısmına kısmen bindirin.

  3. Önizleme'yi tıklatarak slayt gösterisi canlandırmasını izleyin ve Daily Drip ile kahverengi damla görüntülerinin altında nasıl göründüğüne bakın.

    Ana Sayfa sayfasının bitmiş tasarımı
    Ana Sayfa sayfasının bitmiş tasarımı.

Ana Sayfa sayfasını gözden geçirmeyi bitirdiğinizde Plan bağlantısını tıklatarak Plan görünümüne dönün.

Bir sonraki adımda, KART MAP sayfasına farklı türde bir gömülü HTML eklenecektir.

  1. KART MAP minik resmini çift tıklatarak sayfayı Tasarım görünümünde açın ve düzenlemeye başlayın.

  2. Metin aracını kullanarak metin çerçevesini KART MAP sayfasına, sayfa içeriğinin üst kısmına, üstbilgi alanının doğrudan altına sürükleyin.

  3. Şu satırı yazın: Looking for the Koffee Kart? Check here for real-time location updates throughout the day.

  4. Metin seçiliyken Paragraf Stilleri panelini açın. Georgia Body Medium adlı stili tıklatarak Paragraf stilini KART MAP sayfasındaki üstbilgi metnine uygulayın.

Gömülü HTML kullanarak web sayfasına Google haritası ekleme

Video eğitimi

Video eğitimi
lynda.com - James Fritz

Bu bölümde, Google Haritalar tarafından oluşturulmuş bir haritanın yüklenmesini sağlayan gömülü HTML ekleyerek KART MAP sayfasına içerik ekleyeceksiniz. Bu, sitenizde gömülü HTML kullanırken karşılaşabileceğiniz olasılıklara gösterilebilecek başka bir küçük örnektir. YouTube, Flickr veya Picasa gibi pek çok üçüncü taraf siteden içerik alabilir ve formlar, web günlükleri ve hesabınıza erişerek ve ilgili sitelerdeki içerikleri yayınlayarak kontrol edebileceğiniz başka karmaşık site özellikleri ekleyebilirsiniz.

  1. Yeni bir tarayıcı penceresi açın ve Google Haritalar'ı ziyaret edin.

  2. Bir adres yazarak veya Adobe SF gibi bir terim arayarak harita oluşturmak için kullanacağınız gerçek bir konum bulun.

  3. Arabirimin sağ üst kısmında görünen Bağlantı düğmesini ve Gömülü Haritayı Özelleştir ve Önizle seçeneğini tıklatın.

  4. Açılan Özelleştir penceresinde, özel harita boyutunu şu şekilde ayarlayın: Genişlik: 850, Yükseklik: 470. Haritayı pencerenin içine yeniden yerleştirin ve adres metninin tamamen göründüğünden emin olun.

  5. Elde edilen HTML'yi Google penceresinden kopyalayın. Kendi Google Harita kodunuzu oluşturmayı tercih etmiyorsanız aşağıdaki kaynak kodunu kopyalayabilirsiniz:

    <!-- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <!-- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge. Removing this code snippet is not enough! -->

    Google Haritalar penceresinden HTML kaynak kodunu kopyalayın
    Google Haritalar penceresinden HTML kaynak kodunu kopyalayın.

  6. Muse'a geri dönün. Sayfayı sağ tıklatın ve Yapıştır'ı seçerek kodu yerleştirin. Ayrıca HTML Kodu penceresini açmak için Nesne > HTML Ekle'yi seçebilir veya standart klavye kısayolunu (Mac için Command-V, Windows için Control-V) kullanarak kodu yapıştırabilirsiniz.

  7. Seçim aracını kullanarak haritayı sayfanın sol tarafına yerleştirin.

  8. Önizleme'yi tıklatarak Google Haritalar'ın yayınlanan sayfada nasıl görüneceğini kontrol edin. Haritanın gezinme düğmelerini tıklatın. Tam olarak etkileşimli olduğunu ve haritaya yakınlaşabildiğinizi veya gömülü pencerenin içindeki harita çevresinde hareket edebildiğinizi göreceksiniz.

Sitenize i-çerçeveler ekleyerek gömülü HTML içeren diğer sayfaları görüntüleme

Üçüncü taraf bir web sitesinden kopyalayarak yapıştırdığınız kodu eklemek için gömülü HTML'yi kullanmanın yanı sıra bir web sayfasının tamamını aynı yöntemi kullanarak bir i-çerçevenin içine gömebilirsiniz. Örneğin, şunun gibi bir kod parçacığı yazabilirsiniz:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

Yukarıdaki kodda, title="" ve url="" bölümündeki metni istediğiniz harici web sayfasının başlığı ve URL'siyle değiştirin. Ayrıca, i-çerçeve penceresinin genişlik ve yüksekliğini site tasarımınıza uygun değerlerle değiştirebilirsiniz.

İsterseniz açılış i-çerçeve etiketine şunu ekleyerek i-çerçevede bir kaydırma çubuğu görüntülenmemesini sağlayacak bir nitelik ekleyebilirsiniz:

scrolling="no"

Nesne > HTML Ekle'yi seçerek yeni bir HTML Kodu penceresi açabilir, sitenizde dilediğiniz yere bir i-çerçeve ekleyebilir ve herhangi bir URL belirleyerek (www.google.com gibi bir site adresi) i-çerçevenin içinde Internet'te yayınlanmakta olan bir site gösterebilirsiniz.

Bir i-çerçeveyi Adobe Edge'de oluşturulmuş HTML5 animasyon gibi bir canlandırma gömmek için de kullanabilirsiniz. Adobe Edge'de oluşturulmuş HTML dosyasının adını bulun ve bu dosya adını i-çerçevenin URL niteliğinde kullanın:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Bir sonraki adımda, Adobe Edge HTML dosyasını (ve bağımlı dosyaları) Muse sitenizin dosyalarıyla birlikte aynı barındırma sunucusuna yükleme bilgileri açıklanacaktır. Sitenizi FTP'ye dışa aktarıyorsanız HTML dosyasını dışa aktarma işlemi sırasında Muse tarafından oluşturulan klasöre kopyalayabilirsiniz. Muse'daki Yayınla bağlantısını kullanarak doğrudan Adobe Business Catalyst® barındırma sunucularına yayınlıyorsanız Adobe Dreamweaver® yazılımını veya herhangi bir FTP istemcisini kullanarak dosyaları yükleyebilirsiniz. Dosyaları FTP yoluyla Business Catalyst barındırma sunucularına yükleme hakkında daha fazla bilgi edinmek için bkz. Web sitelerini yayınlama.

İletişim formu öğelerini biçimlendirme

Standart CSS kurallarından bazılarını kullanarak Business Catalyst Admin Console (Yönetici Konsolu) arabiriminde oluşturduğunuz iletişim formunun öğelerini formatlayabilirsiniz. Formun ve form öğelerinin görüntülenme biçimini sayfa tasarımınıza uygun şekilde düzenleyebilirsiniz.

Formun kaynak kodunu Admin Console'dan Muse'daki sayfaya yapıştırdıktan sonra, form varsayılan stilleriyle görüntülenir.

İsteğe bağlı HTML kodunu yapıştırın
İsteğe bağlı HTML kodu yapıştırıldıktan sonra, form sayfada görüntülenir.

Diğer tüm öğeler gibi, kenar tutamaçlarını kullanarak formu yeniden boyutlandırabilir ve sayfanın içinde dilediğiniz konuma taşıyabilirsiniz.

Formu sağ tıklatın (veya Control tuşuna basıp tıklatın) ve açılan listeden HTML'yi seçin.

HTML'yi seçmek için bağlam menüsünü kullanın
Seçenekler listesinden HTML'yi seçmek için bağlam menüsünü kullanın.

HTML kodu penceresi görüntülenir. Bu pencerede, Admin Console'dan sayfaya yapıştırdığınız kod görüntülenir. İmlecinizi en üste, kodun birinci satırının üstüne getirin ve Enter (Windows) veya Return (Mac) tuşuna birkaç defa basarak form kodunu aşağı taşıyıp stil eklemek için biraz alan açın.

Enter veya Return tuşuna basarak varolan kodun üzerine birkaç satırlık alan ekleyin
Enter veya Return tuşuna basarak varolan kodun üzerine birkaç satırlık alan ekleyin.

Form kodunun üst kısmındaki bu alana form öğelerinin görünümünü etkileyecek CSS kurallarını yapıştırabilir veya yazabilirsiniz.

Bunun nasıl işlediğini görmek için aşağıdaki kodu kopyalayın:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Kodu formun üstündeki HTML penceresinin en üst kısmına yapıştırın.

CSS stillerini HTML penceresinin üst kısmına yapıştırın
CSS stillerini HTML penceresinin üst kısmına yapıştırın.

Tamam'ı tıklatarak HTML penceresini kapatın. Formun görünümünün yeni formatı kullanarak güncellendiğini göreceksiniz. Yayınlanan sitede nasıl göründüğünü görmek için Önizlemeyi tıklatın veya Dosya > Önizleme sayfasını seçin.

Business Catalyst'ten kopyaladığınız iletişim formu kodunu eklediğinizde dahil edilen farklı form öğelerinin çoğunu kontrol etmek için aynı stratejiyi kullanabilirsiniz.

Pencerenin üst kısmına yapıştırdığınız kodu inceleyin. Çevresindeki CSS kurallarının üst ve altındaki iki stil etiketini göreceksiniz. Şu çok önemlidir: CSS kuralları, açılış ve kapanış stil etiketleri olmadan çalışmaz. Aşağıda kendi başlarına görüntülenen iki stil etiketi verilmiştir:

<style type="text/css">

</style>

Bu açılış ve kapanış stil etiketleri, tarayıcıya içindeki kodun CSS formatlama kuralları içerdiğini söyler. İçlerine CSS kurallarını yapıştırmadan önce, pencerenin üst kısmında bu etiketlerin bulunduğundan mutlaka emin olun.

Form öğelerinizde değişiklik yaparak görünümlerini güncellemek istediğinizde, "sınıf" (formdaki çeşitli öğelere atanan addır) öğesini çağırmanız, güncellemek istediğiniz özelliği belirtmeniz, ardından da niteliklerini belirlemeniz gerekir.

Aşağıdaki kod satırını göz önünde bulundurun:

input.textarea {

background-color: #fff;

}

input.textarea, bir metin alanı türüne (“sınıfa”) atanan addır. Bir sonraki satır, değiştirmek istediğiniz özelliği çağırır. Bu durumda, "background-color" metin alanının arka plan rengini ifade eder. Üst üste iki nokta işaretinden sonra gelen bölümdeki #fff, CSS kodunda #ffffff (beyaz rengi belirten onaltılık renk değeri) yazmanın kısa bir yoludur.

Yukarıdaki kural, Türkçede şu anlama gelir: Bu metin alanı türünün arka plan rengini beyaz olarak ayarla.

Formu güncellemek için metin alanının arka plan rengini sık kullanılan bir web rengi değeri olan kırmızı olarak da atayabilirsiniz. Aşağıdaki kod, bu metin alanı türünün arka plan rengini kırmızı olarak atar:

input.textarea {

background-color: red;

}

CSS kuralları kendi dilinde yazılır. Tıpkı yeni bir dil öğrenmek gibi, bu dili de iyi kullanmak için uygulama yapmak gerekir. Söz dizimi (bu kuralları yazmak için kullanılan dilbilgisi) hakkında daha fazla bilgi almak için W3Schools tarafından çevrimiçi olarak sağlanan ücretsiz mükemmel eğitimleri ve CSS referans kılavuzlarını okuyun.

Kendi iletişim formlarınızı düzenlemeye hazır olduğunuzda, sınıf adını ve her bir form öğesi için düzenleyebileceğiniz ilgili özellikleri belirlemek için aşağıdaki listeyi kullanabilirsiniz.

Not:

CSS kuralları listenizin başına ve sonuna açılış ve kapanış stil etiketlerini eklemeyi unutmayın; aksi durumda tarayıcı (ve Tasarım görünümü) kuralları işleyemez:

<style type="text/css">

</style>

İletişim formunun üst kısmından varsayılan öğeleri kaldırma

Varsayılan olarak, sayfaya yapıştırdığınız form aşağıdaki iki öğeyle başlar.

Bu öğelerin herhangi birini veya ikisini birden kaldırmak istiyorsanız HTML penceresini açın ve yapıştırdığınız kaynak koduna bakın (eklemiş olabileceğiniz CSS stil etiketlerinin hemen altında bulunur).

*Gerekli satırını kaldırmak için bu kod satırını bulup silin:

<span class="req">*</span> Gerekli

Başlık etiketini ve menüyü kaldırmak için şu kod satırlarını bulun ve silin:

<td><label for="Title">Başlık</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Not:

Yukarıda gösterilen satırlardan farklı bir etiketi yanlışlıkla silmemek için HTML kodunu düzenlerken dikkatli olun. > gibi tek bir ekstra karakterin bile silinmesi, formun bozulmasına yol açabilir. Böyle bir durumda yeniden Admin Console'a dönerek kodu tekrar kopyalayıp sayfayı yapıştırın ve düzenlediğiniz kodu değiştirin.

CSS kuralları eklemek ve iletişim formlarını formatlamak için sınıf ve özellikler listesi

Renk değerleri atarken, onaltılık renk değerleri oluşturmak için kuler gibi çevrimiçi bir araç veya bir görüntü düzenleme programı (Photoshop veya Fireworks) kullanarak çok daha fazla renk seçeneğine ulaşabilirsiniz Onaltılık renk değerleri, her zaman # sembolüyle başlar, ardından da 3 veya 6 alfasayısal karakter (0-9 ve A-F) gelir.

Varolan tasarımınızdan renk seçmek için Muse'daki Damlalık aracını kullanmanız daha kolay olabilir. Renk Seçici'deki alandan onaltılık renk değerlerini kopyalayarak koda yapıştırabilirsiniz. Ancak, aşağıdaki 16 web rengi adlarına göre belirlenebilir. Bunlar, bir kuralı test etmek istediğinizde oldukça kullanışlıdır:

Aqua (Su), Black (Siyah), Blue (Mavi), Fuchsia (Fuşya), Gray (Gri), Green (Yeşil), Lime (Limon), Maroon (Kahverengi), Navy (Lacivert), Olive (Zeytin Yeşili), Purple (Mor), Red (Kırmızı), Silver (Gümüş), Teal (Camgöbeği), White (Beyaz) ve Yellow (Sarı)

Renkleri adlarıyla belirttiğinizde, renkten önce # sembolünü kullanmayın.

Aşağıdaki liste, tüm seçenekleri kapsamamaktadır. Öğeleri etkileyen birçok farklı kombinasyon (ve kullanabileceğiniz başka birçok özellik) vardır. Başlamak için şu önerilerden yararlanın. Bir kod parçacığını çift tıklatarak seçin ve panonuza kopyalayın.

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