Προσθέστε οπτικές συνθήκες στον ιστότοπό σας

Sep 13, 2025

πως να

Είναι ενοχλητικό για τους χρήστες της ιστοσελίδας να κάνουν κλικ σε έναν σύνδεσμο μόνο για να διαπιστώσετε ότι η ιστοσελίδα δεν ενδιαφέρει, σπαταλάει το χρόνο τους. Η χρήση μιας εικόνας στο υπόβαθρο της σελίδας είναι ένας πολύ καλός τρόπος για να δώσετε στους χρήστες μια ένδειξη για το τι να περιμένετε από έναν σύνδεσμο πριν δεσμευτείτε να φορτώσετε τη σελίδα. Μπορείτε να δείτε ένα εξαιρετικό παράδειγμα αυτής της τεχνικής που χρησιμοποιείται στο Ιβάν Aivazvsky Life site .

Η χρήση του φόντου σελίδας μπορεί επίσης να βοηθήσει τους δυσλεξικούς αναγνώστες ή εκείνους που μιλούν αγγλικά ως μια πρόσθετη γλώσσα. Σε αυτές τις περιπτώσεις μπορείτε να επικοινωνήσετε πρόσθετες πληροφορίες στον χρήστη χωρίς να τα υπερφορτώσετε με υπερβολικό κείμενο.

10 βήματα για τη δημιουργία μιας συμμετοχής εμπειρίας χρήστη

Όπως συμβαίνει με οποιοδήποτε αποτέλεσμα που συνδυάζει κείμενο με εικόνες φόντου, βεβαιωθείτε ότι το κείμενο σας παραμένει ευανάγνωστο ανά πάσα στιγμή. Αυτό μπορεί να επιτευχθεί τοποθετώντας ένα ημι-διαφανές χρώμα στους συνδέσμους πλοήγησης. Επίσης, εξετάστε την αναγνωσιμότητα UX για θέματα όπως η τύφλωση χρώματος που επηρεάζουν τον τρόπο με τον οποίο οι χρήστες είναι σε θέση να ερμηνεύουν έγχρωμο κείμενο.

Εδώ θα σας δείξουμε πώς να δημιουργήσετε μια διαδραστική οθόνη πλοήγησης με χρήσιμη και προσιτός οπτικά ερεθίσματα.

Κατεβάστε τα αρχεία για αυτό το σεμινάριο εδώ .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Η ιστοσελίδα της ζωής του Ivan Aivazvsky αλλάζει τις εικόνες φόντου καθώς τοποθετείτε πάνω από τους συνδέσμους (κάντε κλικ στην εικόνα για να μεταβείτε στην ιστοσελίδα)

01. Δημιουργήστε το έγγραφο HTML

Δημιουργήστε το κύριο πρότυπο εγγράφου HTML, το οποίο αποτελείται από το δοχείο HTML που αποθηκεύει την ενότητα κεφαλής και σώματος.

Το τμήμα κεφαλής καταστρέφει πληροφορίες όπως ο τίτλος του εγγράφου, καθώς και οι σύνδεσμοι προς εξωτερικούς πόρους - δηλαδή CSS και JavaScript.

Το σώμα αποθηκεύει το περιεχόμενο του εγγράφου. Ένα σημαντικό χαρακτηριστικό του σώματος είναι το χαρακτηριστικό "Θέμα Δεδομένων" που έχει εφαρμόσει - να τροποποιηθεί από το JavaScript για να ενεργοποιήσετε τις αλλαγές παρουσίασης CSS.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; φόντο πλοήγησης & lt; / τίτλος & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; τύπος δέσμης ενεργειών = "text / javascript" src = "code.js" & gt; / script & gt;
& lt; / head & gt;
& lt; Σώμα δεδομένων-Θέμα & GT;
*** ΒΗΜΑ 2
& lt; / Body & GT;
& lt; / html & gt;

02. Προσθήκη πλοήγησης HTML

Το περιεχόμενο της σελίδας αποτελείται από έναν περιέκτη πλοήγησης που περιέχει συνδέσμους. Το αναγνωριστικό της πλοήγησης και οι τίτλοι των παιδικών συνδέσμων θα χρησιμοποιηθούν από το JavaScript για να ακούσουν τις αλληλεπιδράσεις και να αλλάξουν το χαρακτηριστικό "Θέμα Δεδομένων" που ορίζεται ως μέρος του δοχείου σώματος.

 & lt; nav id = "mainnav" & gt;
& lt; a href = "#" τίτλος = "σελίδα 1" σελίδα 1 & lt; / a & gt;
& lt; a href = "#" τίτλος = "σελίδα 2" σελίδα 2 & lt; / a & gt;
& lt; a href = "#" τίτλος = "σελίδα 3 & lt; / a & gt;
& lt; / nav & gt;

03. Ξεκινήστε το αρχείο CSS

Το περιεχόμενο HTML είναι πλέον ολοκληρωμένο, οπότε δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Styles.css'. Αυτό το αρχείο αποθηκεύει τους κανόνες μορφοποίησης CSS που ελέγχουν την οπτική παρουσίαση. Ξεκινήστε αυτό το αρχείο με κανόνες για να παρουσιάσετε το έγγραφο HTML και το σώμα του να εμφανίζεται σε όλη την οθόνη χρησιμοποιώντας ένα λευκό φόντο και ένα μαύρο κείμενο.

 html, σώμα {
  Οθόνη: μπλοκ;
  Πλάτος: 100%.
  Ύψος: 100%.
  Περιθώριο: 0;
  Padding: 0;
  Γραμματοσειρά: Helvetica, Sans-Serif.
  Χρώμα: # 000; }

04. Ορίστε κανόνες για τα οπτικά στοιχεία

Ένα σημαντικό στοιχείο για το αποτέλεσμα είναι η χρήση του χαρακτηριστικού "θέματος δεδομένων" που εφαρμόζεται στο σώμα του εγγράφου. Ένας κανόνας έχει οριστεί για να ορίσει την προεπιλεγμένη συμπεριφορά των δεδομένων - την οποία θα χρησιμοποιήσουμε για την τοποθέτηση φόντου και να αλλάξουμε τη μετάβαση.

Αυτό αποφεύγει την ανάγκη επανάληψης αυτών των ορισμών κανόνων για κάθε μεμονωμένο θέμα, το οποίο καθιστά τις ιστοσελίδες σας ευκολότερες να διατηρηθούν.

 [Θέμα δεδομένων] {
  Μετάβαση: Ιστορικό 1s;
  Ιστορικό: Κέντρο Επαναλαμβανόμενου Κέντρο.
  Ιστορικό μέγεθος: κάλυψη; }

05. Σχεδιάστε το θέμα

Ο σχεδιασμός κάθε θέματος ορίζεται χρησιμοποιώντας την τιμή του χαρακτηριστικού θέματος δεδομένων.

Για να επιτευχθεί το επιθυμητό αποτέλεσμα, ρυθμίζουμε μια διαφορετική εικόνα φόντου για κάθε έκδοση του θέματος. Το προηγούμενο βήμα φροντίζει όλες τις προεπιλεγμένες ρυθμίσεις που αυτά τα θέματα θα κληρονομούν.

 [Data-theme = "Page 1"] {
  Ιστορικό - Εικόνα: URL (image1.jpg);
}
[Data-theme = "Page 2"] {
  Ιστορικό - Εικόνα: URL (image2.jpg);
}
[Data-theme = "Page 3"] {
  Ιστορικό - Εικόνα: URL (image3.jpg);
}

06. Προσθέστε ένα δοχείο πλοήγησης

Το δοχείο πλοήγησης χρησιμοποιείται για να βεβαιωθεί ότι οι σύνδεσμοι παρουσιάζονται με ένα σταθερό πλάτος που τοποθετείται στη μέση της οθόνης. Εφαρμόζεται ένα πλάτος 50% και αυτόματο υπολογισμό που χρησιμοποιείται για την οριζόντια περιθωριακή. Αυτή η προσέγγιση παρέχει εγγύηση συνέπειας ανεξάρτητα από την ανάλυση / μέγεθος οθόνης του χρήστη.

 #mainnav {
  Οθόνη: μπλοκ;
  Πλάτος: 50%.
  Περιθώριο: 0 Auto 0 Auto; }

07. Σύνδεσμοι πλοήγησης στυλ

Οι σύνδεσμοι μέσα στο δοχείο πλοήγησης πρέπει να εμφανίζονται ως μπλοκ που έχουν οριστεί για να προσαρμοστούν στο πλάτος του δοχείου. Αυτό σημαίνει ότι το πλάτος του 100% ορίζεται από το πλάτος του δοχείου. Padding, τα σύνορα και το χρωματισμό φόντου εφαρμόζονται επίσης για να βεβαιωθείτε ότι ξεχωρίζουν από τις εικόνες φόντου.

 #mainnav a {
  Οθόνη: μπλοκ;
  Πλάτος: 100%.
  Ιστορικό: RGBA (255,255,255 ,,3).
  Χρώμα: # 000;
  Padding: 1em;
  Περιθώριο: .5em;
  σύνορα: 1px στερεό. }
#mainnav Α: Τοποθετήστε το {
  Ιστορικό: RGBA (0,0,0, .5);
  Χρώμα: #FFF; }

08. Σύνδεσμοι ακροατών συμβάντων

Το CSS είναι πλέον ολοκληρωμένο, οπότε δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Code.js' για το JavaScript.

Το αποτέλεσμα απαιτεί κάθε σύνδεση μέσα στην πλοήγηση να ακούει και να αντιδράσει σε ένα συμβάν ποντικιού όπου ο χρήστης κινείται πάνω από έναν σύνδεσμο. Αυτός ο ακροατής εφαρμόζει την τιμή «τίτλου» του συνδέσμου με το χαρακτηριστικό θέματος δεδομένων του σώματος εγγράφων - επομένως ενεργοποιώντας τα στυλ στο CSS.

Μετά τη φόρτωση του παραθύρου σελίδας, οι κόμβοι σύνδεσης πλοήγησης τοποθετούνται σε μια συστοιχία, πάνω στην οποία χρησιμοποιείται ένας για βρόχο για την εφαρμογή του ακροατή συμβάντος.

 window.addeventListener ("φορτίο", λειτουργία () {
  var nodes = document.queryselectorall ("# mainnav a");
  για (var i = 0, i & lt; nodes.length, i ++) {
  Κόμβοι [i] .adeventListener ("Mouseover", λειτουργία () {
  document.body.setattribute ("θέμα δεδομένων", αυτό.getattribute ("τίτλος")).
  });
  }
}) ·

Αυτό το άρθρο εμφανίστηκε αρχικά στο θέμα του σχεδιασμού ιστοσελίδων 262. Αγοράστε το εδώ !

Σχετικά Άρθρα:

10 Τάσεις πλοήγησης ιστοσελίδων για το 2017
10 βήματα για τη δημιουργία μιας συμμετοχής εμπειρίας χρήστη
Η Léonie Watson σχετικά με το γιατί η προσβασιμότητα πρέπει να αποτελεί αναπόσπαστο μέρος των διαδικασιών σχεδιασμού ιστοσελίδων

Προσθέστε οπτικές συνθήκες στον ιστότοπό σας

01. Δημιουργήστε το έγγραφο HTML

02. Προσθήκη πλοήγησης HTML

03. Ξεκινήστε το αρχείο CSS

04. Ορίστε κανόνες για τα οπτικά στοιχεία

05. Σχεδιάστε το θέμα

06. Προσθέστε ένα δοχείο πλοήγησης

07. Σύνδεσμοι πλοήγησης στυλ

08. Σύνδεσμοι ακροατών συμβάντων

πως να - Τα πιο δημοφιλή άρθρα

21 βήματα για το Super Speedy JavaScript

Animate SVG με JavaScript

Πώς να εξετάσει ένα πρόσωπο για κινούμενα σχέδια

Πώς να κυριαρχήσει την ανατομία του πλάσματος

Πώς να δημιουργήσετε ένα redshift πληρεξούσιο στον κινηματογράφο 4D

Πώς να καταστήσει έναν φωτορεαλιστικό ουρανό

Δημιουργία εφέ πυρκαγιάς 3D

Πώς να πάρετε το μοντέλο Zbrush σας στο Maya

Κατηγορίες