Yeni deneyim
Web Araçları > Deneyimler > Web Kişiselleştirme > Yeni Bir Deneyim Yayınla
Uyarı:
Tıkladığınızda Kaydet ve Tamam, ve değişiklikler doğrudan web sayfanıza uygulanır.
Yeni Bir Deneyim Oluşturma
üzerinde işlemleri tamamladıktan sonra Kurulum ve kurallar web kişiselleştirme deneyiminiz için, deneyimlerinizi oluşturmaya başlayabilirsiniz Değişiklik Ekle düğmesi Kurallar / Değişiklikler bölümü.
Yerleşim özelliklerini ve metin hizalamasını ayarlamaktan arka plan görsellerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Kişiselleştirme size benzersiz ve ilgi çekici dijital ortamlar oluşturma gücü verir.
Bu kılavuz, Netmera Web Kişiselleştirme aracında bulunan çeşitli CSS özelleştirmelerini inceleyerek, web sayfalarınızı etkileyici görseller ve etkileşimlerle zenginleştirmenin yöntemlerini ortaya koyar. Bu tekniklerden yararlanarak gerçekten kişiselleştirilmiş ve dinamik çevrimiçi deneyimler oluşturabilir ve ziyaretçileriniz üzerinde kalıcı bir etki bırakabilirsiniz.
Herhangi bir değişiklik yapmadan önce, değiştirmek istediğiniz öğeyi seçmeniz gerekir. Seçildikten sonra, tüm CSS ayarlarını sol menüde ve değişikliklerinizi sağ menüde takip edebilirsiniz. Ayrıca, HTML ayarlarını sağ tıklayarak öğe üzerinde değiştirebilirsiniz.
CSS Özelleştirmeleri
Boyut ve Konum
Sol menüde, Metin İçeriği girişini kullanarak metni doğrudan değiştirebilirsiniz. Öğelerin boyutlarını ayarlamak için Boyut ayarını kullanın. Öğelerin konumunu ayarlamak için Konum ayarından yararlanın.
Arka Plan
Arka Plan ayarlarında, öğelerinizin arka plan rengini özelleştirebilir, arka plan görselini değiştirebilir ve arka plan görselinin nasıl davranacağını belirtebilirsiniz.
background-repeat, arka plan görselinin arka plan boyutuna veya öğe boyutuna sığmadığında nasıl davranacağını tanımlar. Aşağıdaki değerleri alır:
no-repeat: Arka plan görseli yalnızca bir kez gösterilir ve tekrarlanmaz.
repeat: Arka plan görseli dikey ve yatay yönde tekrarlanır. Görsel sığmazsa son görsel kırpılır. Bu varsayılan davranıştır.
repeat-x: Arka plan görseli yalnızca yatay olarak tekrarlanır.
repeat-y: Arka plan görseli yalnızca dikey olarak tekrarlanır.
space: Arka plan görseli kırpılmadan mümkün olduğunca tekrarlanır. İlk ve son görseller öğenin iki yanına sabitlenir ve boşluklar görseller arasında eşit olarak dağıtılır.
round: Arka plan görseli tekrarlanır ve boşluk kalmayacak şekilde alanı doldurmak için ayarlanır; bunun için uzatılması veya sıkıştırılması gerekse bile.
Yerleşim
Yerleşim bölümünde düzen özelliklerinizi belirleme özgürlüğüne sahipsiniz.
Bu float özelliği, bir öğenin sola, sağa veya hiç yüzer konumda olup olmayacağını belirler. Aşağıdaki değerlerden biri atanabilir:
none: Öğe yüzer konumda değildir ve metinde geçtiği yerde tam olarak görüntülenir. Bu varsayılan davranıştır.
left: Öğe kapsayıcısının solunda yüzer.
right: Öğe kapsayıcısının sağında yüzer.
Bu vertical-align özelliği, bir öğenin dikey hizalamasını ayarlamak için kullanılır. Aşağıdaki değerleri alabilir:
middle: Öğe, üst öğesinin ortasına yerleştirilir.
top: Öğe, aynı satırdaki en yüksek öğenin üst kenarıyla hizalanır.
bottom: Öğe, aynı satırdaki en alt öğenin alt kenarıyla hizalanır.
baseline: Öğe, üst öğesinin taban çizgisiyle hizalanır. Bu varsayılan davranıştır.
sub: Öğe, üst öğesinin alt simge taban çizgisiyle hizalanır.
super: Öğe, üst öğesinin üst simge taban çizgisiyle hizalanır.
text-top: Öğe, üst öğenin yazı tipinin üst kısmıyla hizalanır.
text-bottom: Öğe, üst öğenin yazı tipinin alt kısmıyla hizalanır.
Bu overflow özelliği, bir öğenin belirtilen alanını aşan içeriğin nasıl işleneceğini belirler. Aşağıdaki değerlerden birini alabilir:
visible: Taşma kırpılmaz ve içerik öğenin kutusunun dışına taşar. Bu varsayılan davranıştır.
hidden: Taşma kırpılır ve belirtilen alanı aşan tüm içerik görünmez.
scroll: Taşma kırpılır ve belirtilen alanı aşan içeriğin geri kalanını görüntülemek için bir kaydırma çubuğu eklenir.
Bu opacity özelliği, bir öğenin saydamlık düzeyini ayarlamak için kullanılır; bu, şeffaflığını belirler. Saydamlık düzeyi 0 ile 1 arasında bir değer olarak belirtilir; burada:
1: Öğe hiç şeffaf değildir (tamamen opaktır).
0.5: Öğe %50 saydamdır.
0: Öğe tamamen şeffaftır ve dolayısıyla görünmez.
Bu z-index özelliği, bir web sayfasındaki öğelerin üst üste gelme sırasını kontrol etmek için kullanılır. Bir öğenin z ekseni üzerindeki konumunu tanımlar; bu da öğelerin üç boyutlu alanda nasıl katmanlandığını veya birbirinin üzerine nasıl yığıldığını belirler.
Daha yüksek bir z-index değere sahip z-index öğeler, daha düşük değerlere sahip öğelerin önünde görünür. Ekranda iki öğe üst üste gelirse, daha yüksek z-index değere sahip olan, diğerinin üstünde görüntülenir.
Tipografi
Bu font-family özelliği, bir öğe için yazı tipini tanımlamak için kullanılır. Birden fazla yazı tipi adını bir "yedek" sistemi olarak içerebilir. Tarayıcı ilk yazı tipini desteklemiyorsa, desteklenen bir yazı tipi bulana kadar listedeki sonraki yazı tipini dener.
Yazı tipi adları iki türde olabilir:
Aile Adı: Times New Roman, Courier New, Arial vb. gibi belirli bir yazı tipi ailesinin adı.
Genel Aile: "serif", "sans-serif", "cursive", "fantasy" veya "monospace" gibi genel bir yazı tipi ailesi kategorisinin adı.
Yazı tiplerini belirtirken, istediğiniz özel yazı tipiyle başlamanız ve ardından sona bir veya daha fazla genel aile eklemeniz iyi bir uygulamadır. Bu, belirtilen yazı tipleri mevcut değilse tarayıcının genel aileden benzer bir yazı tipi seçmesine olanak tanır. Bu da farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı görüntüleme sağlar.
Bu font-size özelliği, bir öğedeki yazı tipinin boyutunu tanımlamak için kullanılır. Öğedeki metin içeriğinin ne kadar büyük veya küçük görüntüleneceğini belirler. Boyut piksel (px) kullanılarak belirtilebilir.
Bu font-weight özelliği, metindeki karakterlerin kalınlığını veya koyuluğunu kontrol etmek için kullanılır. Yazı tipinin ne kadar kalın veya ince görüneceğini belirler. Bu font-weight özelliği, farklı kalınlık düzeylerini belirtmek için çeşitli değerler veya anahtar kelimeler kabul eder.
normal: Varsayılan yazı tipi kalınlığıdır; genellikle normal veya standart kalınlıktır.
bold: Kalın bir yazı tipi ağırlığı belirtir. Metin normalden daha kalın görünür.
lighter: Kalıtılan yazı tipi kalınlığına göre daha ince bir yazı tipi ağırlığı belirtir.
Bu text-align özelliği, bir öğe içindeki metnin yatay hizalamasını ayarlamak için kullanılır. Metnin öğenin içerik kutusu içinde nasıl konumlanacağını belirler.
text-align için kullanılabilen değerler text-align şunlardır:
left: Metni içerik kutusunun soluna hizalar.
right: Metni içerik kutusunun sağına hizalar.
center: Metni içerik kutusu içinde yatay olarak ortalar.
justify: Metin satırlarını her satır eşit genişlikte olacak şekilde uzatır; böylece hem sol hem sağ tarafta düz bir kenar oluşur. Bu, daha düzenli bir görünüm elde etmek için genellikle gazetelerde ve dergilerde kullanılır.
Bu text-align özelliğini farklı öğelere uygulayarak, web sayfanız genelinde metin hizalamasını kontrol edebilirsiniz.
Metin Dekorasyonu: Metne altı çizili, üstü çizili veya çizgi üstü gibi eklenen dekorasyonu belirtmek için kullanılan özelliktir.
Satır Yüksekliğiözelliği: line-height özelliği, bir metin satırının yüksekliğini belirler. Bir metin bloğu içindeki satırlar arasındaki dikey boşluğu ayarlar. Daha büyük bir line-height değer satırlar arasındaki boşluğu artırır, metni daha seyrek hale getirirken; daha küçük bir değer satırlar arasındaki boşluğu azaltır, metni daha sıkı hale getirir.
Kelime Aralığıözelliği: word-spacing özelliği, bir metin bloğundaki kelimeler arasındaki boşluğu ayarlamak için kullanılır. Belirtilen değere bağlı olarak kelimeler arasındaki boşluğu artırabilir veya azaltabilir.
Bu özellikleri kullanarak, istediğiniz tasarım ve yerleşimi elde etmek için web sayfanızdaki metin öğelerinin görünümünü ve aralığını kontrol edebilirsiniz.
Kenarlık
Bu CSS özelliklerini kullanarak, öğelerin boşluklarını, kenarlıklarını ve köşelerini kontrol etme esnekliğine sahip olursunuz; böylece web sayfalarınız için görsel açıdan çekici ve iyi yapılandırılmış düzenler oluşturabilirsiniz.
Boşluk: CSS margin özellikleri, tanımlanmış kenarlıkların dışında öğelerin etrafında boşluk oluşturur.
İç Boşluk: Bir öğenin iç boşluğu, içeriği ile kenarlığı arasındaki alandır. T
Kenarlık Kalınlığıözelliği: border-width özelliği, bir öğenin dört kenarlığının (üst, sağ, alt ve sol) genişliğini ayarlar. Her bir kenarlığın genişliğini ayrı ayrı şu özelliklerle ayarlayabilirsiniz: border-top-width, border-right-width, border-bottom-width, ve border-left-width.
Kenarlık Rengiözelliği: border-color özelliği, bir öğenin dört kenarlığının rengini ayarlar.
Köşe Yarıçapıözelliği: border-radius özelliği, öğenin köşelerinin yarıçapını tanımlar ve yuvarlatılmış köşeler oluşturmanıza olanak tanır.
Bu border-style özelliği, bir öğenin dört kenarlığının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her kenarlık kendi stiline sahip olabilir. İçin kullanılabilen değerler border-style şunlardır:
none: Varsayılan değerdir. Kenarlık olmadığını belirtir.
hidden: "none" ile aynıdır, ancak tablo öğeleri için kenarlık çakışması çözümlemesinde farklıdır.
dotted: Küçük noktaların aralıklı olduğu noktalı bir kenarlık belirtir.
dashed: Küçük boşluklarla ayrılmış kısa çizgilerden oluşan kesik çizgili bir kenarlık belirtir.
solid: Sürekli bir çizgi olan düz bir kenarlık belirtir.
double: İki düz çizgiden oluşan çift çizgili bir kenarlık belirtir.
groove: 3B oluklu bir kenarlık belirtir. Etkisi, border-color değere bağlıdır.
ridge: 3B sırtlı bir kenarlık belirtir. Etkisi, border-color değere bağlıdır.
inset: 3B içe gömük bir kenarlık belirtir. Etkisi, border-color değere bağlıdır.
outset: 3B dışa taşkın bir kenarlık belirtir. Etkisi, border-color değere bağlıdır.
Farklı border-style değerleri kullanarak, öğelerinizin kenarlıkları için çeşitli görsel etkiler elde edebilir; web sayfası düzeninizde çok yönlü ve çekici tasarımlar oluşturabilirsiniz.
HTML Menüsü
Bir öğeye sağ tıkladığınızda, bir HTML düzenleme menüsü görünür.
Bu menüden "Kaldır" seçeneğini seçerek seçili öğeyi silebilirsiniz.
Mevcut HTML kodunu değiştirmek istiyorsanız, "Değiştir" seçeneği gerekli değişiklikleri yapmanızı sağlar.
Mevcut kod bloğuna yeni kod eklemek için, sadece "Ekle" seçeneğini seçebilirsiniz.
Ayrıca, "Ekle" seçenekleri, istediğiniz herhangi bir konuma yeni HTML girdileri ekleme esnekliği sağlar.
Ayrıca, "JavaScript Ekle" adlı bir seçenek de vardır; bu seçenek, JavaScript kodunu HTML yapısı içinde tam olarak ihtiyaç duyduğunuz yere eklemenize olanak tanır.
Deneyiminizi Yayınlama
Tüm değişiklikleri tamamladığınızda, sağ üst köşede bulunan "Kaydet" düğmesine tıklayarak panele geri dönebilirsiniz. Once click "Kaydet, bir "Tamam" düğmesi görünecektir. Düzenleme modundan çıkıp panele dönmek için "Tamam" düğmesine tıklayın. Değişiklikleriniz kaydedilecek ve içeriğe uygulanacaktır.
Son güncelleme
Bu yararlı oldu mu?