Sitenize görsel ipuçları ekleyin

Feb 2, 2026

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

Reels Eğitimi: Bir Acemi Kılavuzu

Portre boyama yağları ile mücadele

WordPress'i başsız bir CMS olarak kullanın

Miktar belirli CSS stilleri ve düzenleri oluşturun

Üç.j içeren etkileşimli 3D görseller oluşturun

Kendi tuval panolarınızı nasıl yapılır

Ressamın suluboya setlerini nasıl birleştireceğiniz

Gerçekçi kırışıklıklar ve kıvrımlarla 3D kıyafetler oluşturun

Kategoriler