Verwenden Sie PHP und CSS, um die Textgröße von Webseiten zu ändern. Beachten Sie bei der Gestaltung Ihrer Website eines: Nicht alle Besucher sind kluge junge Leute und sie sind nicht unbedingt mit den verschiedenen Methoden zur Verwendung von Webbrowsern vollständig vertraut.
Bedenken Sie bei der Gestaltung einer Website eines: Nicht alle Besucher sind kluge junge Leute und sie sind nicht unbedingt mit den verschiedenen Möglichkeiten zur Verwendung eines Webbrowsers vertraut. Kluge Designer haben dies verstanden und integrieren häufig verschiedene spezielle Barrierefreiheitsfunktionen in die Gestaltung von Websites, sodass auch Senioren oder Menschen mit Behinderungen die Website ohne zusätzlichen Aufwand einfach und bequem nutzen können.
Die Textgröße ist eine der effektivsten Barrierefreiheitsfunktionen, die jede Website benötigt. Kurz gesagt, es handelt sich um ein Tool zum Ändern der Textgröße einer Webseite. Es wird normalerweise verwendet, um den Text zu vergrößern, damit er besser lesbar ist Viele Browser verfügen bereits über diese Funktion, aber Anfänger von Webbrowsern wissen nicht, wie sie diese Funktion verwenden, indem sie auf jeder Webseite benutzerfreundlichere Schaltflächen platzieren.
In dieser Anleitung erfahren Sie, wie Sie diese funktionale Textgröße mithilfe von PHP und CSS zu Ihren Webseiten hinzufügen. Fügen Sie also diese Barrierefreiheit zu Ihrer Website hinzu und holen Sie das Beste aus Benutzern heraus, die über 50 Kudos-Punkte verfügen. Lesen Sie weiter und Sie werden es tun lernen Sie, wie man es benutzt.
HINWEIS: In dieser Anleitung wird davon ausgegangen,
dass Sie Apache und PHP bereits installiert haben.
Bevor Sie Code schreiben, ist es hilfreich, sich etwas Zeit zu nehmen, um zu verstehen, wie die Textgrößenanpassung funktioniert. Jede Seite der Website enthält eine Reihe von Steuerelementen, mit denen der Benutzer die Textgröße der Seite auswählen kann: Klein, Mittel und Groß. Jede Schriftgröße entspricht einem CSS-Stylesheet, das den für die Webdarstellung verwendeten Text speichert Seitentextgrößen.
Wenn der Benutzer eine Auswahl trifft, speichert PHP die vom Benutzer ausgewählte Schriftgröße in einer Sitzungsvariablen und lädt dann die Webseite neu. Die Seite liest die ausgewählte Schriftgröße aus der Sitzungsvariablen und ruft dynamisch das entsprechende Stylesheet auf, um es zu aktualisieren . Rendern Sie die Seite mit einer kleineren oder größeren Schriftgröße neu.
Der erste Schritt imProzess
: Das Erstellen einer Webseite
beginnt mit der Erstellung eines HTML-Dokuments. Vervollständigen Sie zunächst den Inhalt des Platzhalters. Liste A ist ein Beispiel:
Liste A:
Textgröße: klein |. href="resize.php?s=medium">mittel groß
|
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
Commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat nicht proident, sunt in culpa qui
amtiert seruntmollitanim id estlaborum.
Achten Sie besonders auf die Text-Hyperlinks oben auf der Seite. Jeder Hyperlink verweist auf eine Skriptdatei namens resize.php und übergibt ihr die ausgewählte Schriftgröße über die URL-GET-Methode.
Speichern Sie dieses Dokument in Ihrem Webserververzeichnis mit der Erweiterung .php, zum Beispiel index.php.
Schritt 2: Stylesheets erstellen
Als nächstes erstellen Sie Stylesheet-Dateien für jede Textgröße: small.css, medium.css und large.css. Dies ist der Dateiinhalt von small.css:
body {.
Schriftart: 10px
}
Ebenso können Sie „medium.css“ und „large.css“ mit 17 bzw. 25 Pixel erstellen und diese Stylesheet-Dateien im selben Verzeichnis wie die im vorherigen Schritt erstellte Webseite speichern.
Schritt 3: Erstellen Sie einen Mechanismus zum Ändern der Textgröße
. Wie oben beschrieben, kann die Webseite „wissen“, welche Stylesheet-Datei geladen werden soll, indem sie die vordefinierten Sitzungsvariablen nachschlägt. Die Sitzungsvariablen werden über die Skriptdatei resize.php gesteuert (siehe Listing B). ), diese Datei wird aktiviert, wenn der Benutzer auf die Schaltfläche zum Ändern der Textgröße oben auf der Webseite klickt. Dies ist der Inhalt von resize.php:
Liste B
// Sitzung starten
// ausgewählte Größe in Sitzung importieren
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("Standort: " . $_SERVER['HTTP_REFERER']);
?>
Dies ist sehr einfach. Wenn der Benutzer eine neue Textgröße auswählt, ruft resize.php den Schriftgrößenwert über die GET-Methode ab, speichert ihn in der Sitzungsvariablen $_SESSION['textsize'] und setzt dann den Browser Direct zurück zur ursprünglich geöffneten Seite.
Natürlich fehlt hier noch eine Komponente: Die Webseite ist intelligent genug, um die aktuell vom Benutzer ausgewählte Textgröße automatisch zu erkennen und das entsprechende Stylesheet zu laden. Um diese Funktion hinzuzufügen, öffnen Sie Ihre Webseitendatei index.php und fügen Sie sie hinzu Fügen Sie am Anfang der Datei die folgende Anweisung hinzu (siehe Listing C):
Listing C
// start session
//Variablen importieren
session_start();
// Standardtextgröße für diese Seite festlegen
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>
Sie sollten auch einen Stylesheet-Link zwischen den ...-Elementen hinzufügen, wie folgt:
type="text/css">
Dies ist Listing D. Die vollständige index.php-Datei sollte wie folgt aussehen:
Listing D:
// Sitzung starten
//Variablen importieren
session_start();
// Standardtextgröße für diese Seite festlegen
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>
type="text/css">
Textgröße: klein |. href="resize.php?s=medium">mittel groß |
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
Commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat nicht proident, sunt in culpa qui
amtiert seruntmollitanim id estlaborum.
Es sollte sehr einfach sein, zu verstehen, wie dies funktioniert. Wenn eine Webseite geladen wird, wird die aktuelle Sitzung fortgesetzt und überprüft, ob die Variable $_SESSION['textsize'] mit der aktuell ausgewählten Schriftgröße übereinstimmt, und dann wird das entsprechende Stylesheet dynamisch geladen durch das Element, wodurch die Webseite automatisch in der richtigen Größe neu gerendert wird. Die kombinierte Verwendung von PHP und CSS unterscheidet sich geringfügig von der herkömmlichen Methode, bei der JavaScript zum dynamischen Ändern des CSS-Stylesheets verwendet wird. Im Vergleich zur JavaScript-Methode besteht der Vorteil der PHP-Methode darin, dass Sie nicht auf die Unterstützung des Clients angewiesen sind Für JavaScript machen Sie sich Gedanken über die Erstellung spezieller Arbeiten für einen bestimmten Browser. Vielleicht funktioniert dieser Ansatz gut, wenn Sie sich das nächste Mal an die Gestaltung einer Website machen. Viel Spaß beim Codieren!