Sitenize görsel ipuçları ekleyin

Sep 14, 2025

Nasıl Yapılır

Web sitesi kullanıcılarının yalnızca web sayfasının ilgi çekici olmadığını, zamanlarını boşa harcadığını bulmak için bir bağlantıya tıklamaları can sıkıcı. Sayfa arka planında bir resim kullanmak, kullanıcılara, sayfayı yüklemeyi yapmadan önce bir linkten ne bekleyeceğini gösteren bir gösterge vermek için harika bir yoldur. Kullanılan bu tekniğin büyük bir örneğini görebilirsiniz. Ivan Aivazvsky Life Site .

Sayfa arka planını kullanarak disleksik okuyuculara veya ek bir dil olarak İngilizce konuşanlara da yardımcı olabilir. Bu durumlarda, ek bilgileri kullanıcıya çok fazla metinle aşırı yüklemeden iletişim kurabilirsiniz.

Bir ilgi çekici kullanıcı deneyimi oluşturma için 10 adım

Metni arka plan görüntüleriyle birleştiren herhangi bir etkiyle olduğu gibi, metninizin her zaman okunabilmesini sağlayın. Bu, navigasyon bağlantılarınıza yarı saydam bir renk yerleştirilerek sağlanabilir. Ayrıca, kullanıcıların renkli metni nasıl yorumlayabileceğini etkileyen renk körlüğü gibi konular için UX okunabilirliğini de dikkate alınız.

İşte size yararlı ve etkileşimli bir navigasyon ekranı oluşturmayı göstereceğiz ve erişilebilir görsel ipuçları.

Bu öğretici için dosyaları indirin İşte .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Ivan Aivazvsky Life sitesi, arka plan görüntülerini, bağlantıların üzerinden ulaştığınız gibi değiştirir (web sitesine gitmek için resme tıklayın)

01. HTML belgesini oluşturun

Baş ve gövde bölümünü depolayan HTML konteynerinden oluşan ana HTML belge şablonunu oluşturun.

Baş bölümü, belge başlığı gibi açıklama bilgilerinin yanı sıra dış kaynaklara bağlantıların yanı sıra, yani CSS ve JavaScript.

Vücut belge içeriğini saklar. Vücudun önemli bir özelliği, CSS sunum değişikliklerini tetiklemek için JavaScript ile uygulandığı 'veri temalı' niteliğidir.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; unvanı ve GT; navigasyon arka planı; / unvan & gt;
& link rel = "Stylesheet" Type = "Metin / CSS" href = "styles.css" / & gt;
& lt; script type = "metin / javascript" src = "code.js" & gt; & lt; / script;
/ head & gt;
& lt; vücut veri teması ve gt;
*** ADIM 2
& lt; / body & gt;
& lt; / html & gt;

02. Navigasyon HTML Ekle

Sayfa içeriği, bağlantıları içeren bir navigasyon kabından oluşur. Navigasyonun kimliği ve çocuk bağlantılarının başlıkları, JavaScript'i etkileşimleri dinlemek ve vücut kabının bir parçası olarak tanımlanan 'veri temalı' özniteliğini değiştirecek şekilde kullanılacaktır.

 & lt; nav id = "Mainnav" & gt;
& lt; a href = "#" title = "sayfa 1" & gt; sayfa 1 / A & GT;
& lt; a href = "#" title = "Page 2" & gt; sayfa 2; / a & gt;
& lt; a href = "#" title = "sayfa 3" & gt; sayfa 3

03. CSS dosyasını başlat

HTML içeriği şimdi tamamlandı, bu yüzden 'styles.css' adlı yeni bir dosya oluşturun. Bu dosya, görsel sunumu kontrol eden CSS biçimlendirme kurallarını saklar. Beyaz bir arka plan ve siyah metin kullanarak tam ekran boyunca görünmesini sağlamak için bu dosyayı HTML belgesini ve vücudunu sunmak için kurallarla başlatın.

 html, body {
  Ekran bloğu;
  Genişlik:% 100;
  Yükseklik:% 100;
  Marj: 0;
  Dolgu: 0;
  Yazı Tipi-Ailesi: Helvetica, Sans-Serif;
  Renk: # 000; }

04. Görseller için kurallar ayarlayın

Etkisi için önemli bir bileşen, belge gövdesine uygulanan 'veri temalı' niteliğinin kullanımıdır. Bir kural, veri varsayılan davranışını tanımlamak için ayarlanmıştır - bu, arka plan konumlandırma ve geçiş yapma için kullanacağız.

Bu, her bir tema için bu kural tanımlarını tekrarlama ihtiyacını önler, bu da web sayfalarınızın bakımı kolaylaştırır.

 [Data-tema] {
  Geçiş: arka plan 1s;
  Arka plan: tekrarlama merkezi merkezi;
  Arka plan boyutu: Kapak; }

05. Temayı tasarlayın

Her temanın tasarımı, veri tema niteliğinin değeri kullanılarak ayarlanır.

İstenilen etkiyi elde etmek için, temanın her sürümü için farklı bir arka plan görüntüsü belirliyoruz. Önceki adım, bu temaların devraldığı tüm varsayılan ayarlarla ilgilenir.

 [Veri-tema = "Sayfa 1"] {
  Arkaplan-Image: URL (Image1.jpg);
}
[Data-tema = "Sayfa 2"] {
  Arka plan-resim: URL (image2.jpg);
}
[Veri-tema = "Sayfa 3"] {
  arka plan-resim: URL (Image3.jpg);
}

06. Bir navigasyon kabı ekleyin

Navigasyon kabı, bağlantıların ekranın ortasına yerleştirilmiş tutarlı bir genişlikte sunulduğundan emin olmak için kullanılır. % 50 genişlik ve yatay marji için kullanılan otomatik hesaplama uygulanır. Bu yaklaşım, kullanıcının ekran çözünürlüğü / boyutundan bağımsız olarak tutarlılık garantisi sağlar.

 #mainnav {
  Ekran bloğu;
  Genişlik:% 50;
  Marj: 0 Otomatik 0 Otomatik; }

07. Stil navigasyon bağlantıları

Navigasyon kabının içindeki bağlantılar, kabın genişliğine uyum sağlamak için Bloklar olarak görüntülenecektir. Bu,% 100 genişliğinin konteynerin genişliği ile tanımlandığı anlamına gelir. Dolgu, kenarlıklar ve arka plan boyama, arka plan görüntülerinden ayağa kalktıklarından emin olmak için de uygulanır.

 #mainnav a {
  Ekran bloğu;
  Genişlik:% 100;
  Arka plan: RGBA (255,255,255, .3);
  Renk: # 000;
  Dolgu: 1EM;
  Marj-Top: .5EM;
  Sınır: 1px katı; }
#mainnav a: hover {
  Arka plan: RGBA (0,0,0, .5);
  Renk: #FFF; }

08. Link olay dinleyicileri

CSS şimdi tamamlandı, bu yüzden JavaScript için 'Code.js' adlı yeni bir dosya oluşturun.

Etki, kullanıcının bir link üzerinde durduğu bir fare olayına dinlemek ve tepki vermek için navigasyonun içindeki her bağlantıyı gerektirir. Bu dinleyici, bağlantının 'başlık' değerini, belge gövdesinin veri tema niteliğine - bu nedenle CSS'deki tetikleme stilleri uygular.

Sayfa penceresinin yüklendikten sonra, navigasyon bağlantısı düğümleri bir diziye yerleştirilir, üzerine bir döngü, olay dinleyiciyi uygulamak için kullanılır.

 window.addeventlistener ("yük", işlev () {
  var düğümleri = belge.queryselectorall ("# Mainnav a");
  için (var i = 0; i & lt; nodes.length; i ++) {
  düğümler [i] .addeventlistener ("Mouseover", Function () {
  document.body.setattribute ("veri teması", this.getattribute ("başlık"));
  });
  }
});

Bu makale başlangıçta Web Tasarımcısı Sayı 262'de ortaya çıktı. Buradan satın al K!

İlgili Makaleler:

2017 için 10 web sitesi navigasyon eğilimleri
Bir ilgi çekici kullanıcı deneyimi oluşturma için 10 adım
Erişilebilirliğin neden web tasarım süreçlerinin ayrılmaz bir parçası olması gerektiğinde Léonie Watson

Sitenize görsel ipuçları ekleyin

01. HTML belgesini oluşturun

02. Navigasyon HTML Ekle

03. CSS dosyasını başlat

04. Görseller için kurallar ayarlayın

05. Temayı tasarlayın

06. Bir navigasyon kabı ekleyin

07. Stil navigasyon bağlantıları

08. Link olay dinleyicileri

Nasıl Yapılır - En Popüler Makaleler

Hakemli bir tasarım kısa çözme

Medya sorguları olmadan uyarlanabilir düzenler oluşturun

Google'ın bulut vizyonuna yönelik bir rehber

Otantik bir manga çizgi roman şeridi nasıl oluşturulur

Kendi karakterinizi nasıl yapılır?

Bir guaş paleti nasıl karıştırılır

Daz Studio ve ZBrush arasında nasıl taşınır

EL-Çizilmiş İllüstrasyon Tekniklerinizi Kabul Etmek İçin En İyi İpuçları

Kategoriler