Přidejte vizuální podněty na vaše stránky

Sep 11, 2025
jak

Je to nepříjemné pro uživatele webových stránek kliknout na odkaz jen proto, aby zjistil, že webová stránka není zájem, plýtvání časem. Pomocí obrázku na pozadí stránky je skvělý způsob, jak dát uživatelům indikaci toho, co očekávat od odkazu před spácháním načítání stránky. Můžete vidět skvělý příklad této techniky při použití na Životnost Ivan Aivazvsky .

Pomocí pozadí stránky může také pomoci dyslexickým čtenářům nebo těm, kteří mluví anglicky jako další jazyk. V těchto případech můžete k uživateli sdělit další informace, aniž byste je přetížili příliš mnoho textu.

  • 10 kroků k vytvoření zápisu uživatelských zkušeností

Stejně jako u libovolného účinku, který kombinuje text s obrázky na pozadí, ujistěte se, že váš text zůstane vždy čitelný. Toho lze dosáhnout umístěním poloprůhledné barvy na navigačních odkazech. Zvažte také UX čitelnost pro problémy, jako je barva slepota, která ovlivňují, jak jsou uživatelé schopni interpretovat barevný text.

Zde vám ukážeme, jak vytvořit interaktivní navigační displej s užitečnými a přístupný vizuální podněty.

Stáhněte si soubory pro tento tutoriál tady .

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 Site mění obrazy na pozadí, jak si přejdete odkazy (kliknutím na obrázek přejdete na webové stránky)

01. Vytvořte dokument HTML

Vytvoření hlavní šablony dokumentu HTML, která se skládá z kontejneru HTML uložení části hlavy a tělesa.

Sekce hlavy ukládá informace o popisu, jako je název dokumentu, stejně jako spojení na externí zdroje - tj. CSS a JavaScript.

Tělo ukládá obsah dokumentu. Významným rysem těla je atribut "datový motiv", který použil - upravit JavaScript pro spouštění změn prezentace CSS. 

 Doctype HTML & GT;
& lt; html & gt;
& lt; hlava & gt;
& lt; Název & gt; navigační pozadí & lt; / titul & gt;
& lt; link rel = "Stylesheet" type = "text / css" href = "styles.css" / gt;
& lt; typ script = "text / javascript" src = "code.js" & gt; & lt; / script & gt;
& lt; / hlava & gt;
& lt; Těleso dat-theme & gt;
*** KROK 2
& lt; / tělo & gt;
& lt; / html & gt;

02. Přidat navigaci HTML

Obsah stránky se skládá z navigačního kontejneru obsahujících odkazy. ID navigace a tituly podřízených odkazů budou používány JavaScript, který poslouchá interakce a změní atribut 'datový motiv' atribut definovaný jako součást kontejneru těla. 

 & lt; Nav ID = "Mainnav" & gt;
& lt; a href = "#" titul = "Page 1" & gt; strana 1 & lt; / A & gt;
& lt; a href = "#" titul = "Page 2" & gt; strana 2 & lt; / a & gt;
& lt; a href = "#" titul = "Strana 3" & gt; strana 3 & lt; / A & gt;
& lt; / NAV & GT;

03. Zahajte soubor CSS

Obsah HTML je nyní dokončen, takže vytvořte nový soubor nazvaný 'Styles.css'. Tento soubor ukládá pravidla pro formátování CSS, která řídí vizuální prezentaci. Spusťte tento soubor s pravidly pro prezentaci dokumentu HTML a jeho tělo se zobrazí přes celou obrazovku pomocí bílého pozadí a černého textu. 

 HTML, tělo {
  Displej: blok;
  šířka: 100%;
  výška: 100%;
  marže: 0;
  Polstrování: 0;
  Font-family: Helvetica, Sans-Serif;
  Barva: # 000; }

04. Nastavení pravidel pro vizuály

Důležitou součástí účinku je použití atributu "datový motiv" aplikovaný na orgán dokumentu. Pravidlo je nastaveno tak, aby definovaly výchozí chování dat, které budeme používat pro umístění pozadí a změnu přechodu.

To se vyhýbá potřebě opakovat tyto definice pravidla pro každého jednotlivého motivu, což usnadňuje udržování vašich webových stránek. 

 [Data-motiv] {
  Přechod: Pozadí 1S;
  Souvislosti: centrum ne-repeat;
  Velikost na pozadí: kryt; }

05. Navrhněte téma

Konstrukce každého motivu je nastaven pomocí hodnoty atributu datového motivu.

Pro dosažení požadovaného účinku nastavujeme jiný obrázek na pozadí pro každou verzi tématu. Předchozí krok se stará o všechny výchozí nastavení, které tyto motivy dědí. 

 [Data-theme = "Page 1"] {
  Obrázek na pozadí: URL (Image1.jpg);
}
[Data-theme = "Page 2"] {
  Image na pozadí: URL (Image2.jpg);
}
[Data-theme = "Page 3"] {
  Obrázek na pozadí: URL (Image3.jpg);
}

06. Přidejte navigační kontejner

Navigační nádoba se používá k zajištění toho, že odkazy jsou prezentovány s konzistentní šířkou umístěnou uprostřed obrazovky. Použije se šířka 50% a automatického výpočtu použitá pro horizontální okraj. Tento přístup poskytuje záruku konzistence bez ohledu na rozlišení obrazovky uživatele / velikost. 

 #mainnav {
  Displej: blok;
  šířka: 50%;
  Margin: 0 Auto 0 Auto; }

07. Styl navigačních odkazů

Spojení uvnitř navigačního kontejneru se zobrazí jako bloky nastavené pro přizpůsobení se šířce kontejneru. To znamená, že jejich 100% šířka je definována šířkou kontejneru. Polstrování, hranice a barvení pozadí jsou také aplikovány, aby se ujistil, že vystupují z obrázků na pozadí. 

 #mainnav a {
  Displej: blok;
  šířka: 100%;
  Pozadí: RGBA (255,255,255, .3);
  Barva: # 000;
  Polstrování: 1em;
  Margin-top: .5EM;
  hranice: 1px pevná; }
#mainnav A: Hover {
  Pozadí: RGBA (0,0,0,0, 0,5);
  Barva: #fff; }

08. Link Posluchače událostí

CSS je nyní kompletní, takže vytvořte nový soubor nazvaný 'Code.js' pro JavaScript.

Účinek vyžaduje, aby každý odkaz uvnitř navigace poslouchal a reagoval na událost Mouseover, kde uživatel se pohybuje přes odkaz. Tento posluchač aplikuje hodnotu "titulu" odkazu na atribut data-motivu dokumentu dokumentu - proto spustí styly v CSS.

Po načtení okna stránky jsou uzly navigačního spojení umístěny do pole, na kterém A pro smyčku slouží k použití posluchače události. 

 window.addeventListener ("zatížení", funkce () {
  VAR uzlů = Document.QuerySelektorall ("# Mainnav A");
  pro (var i = 0; i

Tento článek se původně objevil v Web Designer vydání 262. Koupit to tady Dokázal se!

Související články:

  • 10 webových stránek navigační trendy pro rok 2017
  • 10 kroků k vytvoření zápisu uživatelských zkušeností
  • Léonie Watson, proč musí být přístupnost nedílnou součástí procesů webového designu

jak - Nejoblíbenější články

Jak stáhnout fotky Instagramu: Vše, co potřebujete vědět

jak Sep 11, 2025

(Image Credit: Joseph Foley na Instagram) Stáhněte si Instagram obrázky - Stáh..

Vytvořit textury s nástrojem razítka vzor

jak Sep 11, 2025

(Image Credit: Lino Drieghe) Pokud jste uvízl zíral na prázdné plátno, nebo čelí stručným, který má spoust..

Vyrovnejte svůj VR Umění

jak Sep 11, 2025

Začal jsem používat Cinema 4D několik měsíců poté, co dostal svůj VR headset před rokem. Až do té doby používal ..

Vytvořit reagující uspořádání s CSS Grid

jak Sep 11, 2025

Rozložení mřížky CSS Každý den roste v podpoře prohlížeče a můžeme loď CSS mřížku na výrobu. Rychl�..

Rebuild A 2004 Flash Webové stránky pro rok 2018

jak Sep 11, 2025

V roce 1999 jsem postavil své první webové stránky pomocí webového studia 1.0. Web Studio bylo grafické uživatelské rozhraní. Bylo možné vytvořit nový přistávací str�..

Barva chlupatý pet portrét

jak Sep 11, 2025

Naše hotová kočka portrét Malování domácí zvířata a. kreslení zvířat Může to bý..

Jak navrhnout kryt knihy v aplikaci InDesign

jak Sep 11, 2025

Říkání by mohlo být, "neposuzujte knihu podle jejího obalu", ale design obal může ve skutečnosti udělat nebo zlomit úspěch knihy. Pokud jste jako já, design předního krytu je s..

Jak získat model Zbrush do Maya

jak Sep 11, 2025

Pro tohle Maya tutorial. Ukážu vám, jak jsem dostal tento Grumpy Link model od Zbrushu do Maya za vykreslován�..

Kategorie