Используйте PHP и CSS для изменения размера текста веб-страниц. При разработке веб-сайта имейте в виду одну вещь: не все посетители — умные молодые люди, и они не обязательно полностью знакомы с различными методами использования веб-браузеров.
При разработке веб-сайта имейте в виду одну вещь: не все посетители — талантливые молодые люди, и они не обязательно полностью знакомы с различными способами использования веб-браузера. Умные дизайнеры понимают это и часто включают в дизайн веб-сайтов различные специальные функции доступности, чтобы даже пожилые люди или люди с ограниченными возможностями могли легко и комфортно пользоваться веб-сайтом, не затрачивая дополнительных усилий.
Размер текста — одна из наиболее эффективных функций доступности, которая может понадобиться любому веб-сайту. Короче говоря, это инструмент, используемый для изменения размера текста веб-страницы. Обычно он используется для увеличения текста, чтобы его было легче читать. Многие браузеры уже имеют эту функцию, но новички в веб-браузерах не знают, как ее использовать. Поэтому дизайнеры веб-сайтов часто реализуют эту функцию, размещая более простые в использовании кнопки на каждой веб-странице.
Это руководство покажет вам, как добавить этот функциональный инструмент для изменения размера текста на ваши веб-страницы с помощью PHP и CSS, поэтому добавьте эту доступность на свой веб-сайт и получите максимальную отдачу от пользователей, которые набрали 50+ баллов Kudos, читайте дальше, и вы все поймете. научитесь его использовать.
ПРИМЕЧАНИЕ. В этом руководстве предполагается, что у вас уже установлены Apache и PHP.
Как это работает?
Прежде чем писать код, полезно потратить некоторое время на понимание того, как работает программа изменения размера текста. Каждая страница сайта содержит ряд элементов управления, которые позволяют пользователю выбирать размер текста на странице: «Маленький», «Средний» и «Большой». Каждый размер шрифта соответствует таблице стилей CSS, в которой сохраняются правила отображения текста на странице. размеры текста страницы.
Когда пользователь делает выбор, PHP сохраняет выбранный пользователем размер шрифта в переменной сеанса, а затем перезагружает веб-страницу. Страница считывает выбранный размер шрифта из переменной сеанса и динамически вызывает соответствующую таблицу стилей для ее обновления. . Повторно отобразите страницу, уменьшив или увеличив размер шрифта.
Первый шаг впроцессе
: Создание веб-страницы
начинается с создания HTML-документа. Сначала заполните содержимое заполнителя. Список A является примером:
Список A:
Размер текста: маленький | href="resize.php?s=medium">средний | большой
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
магна аликва.
Ad minim veniam, quisnostrum упражнение ullamcolaboris nisi utaliquip ex ea
коммодоконсекват.
Duisauteirure скорбь в осуждении в
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat not proident, sunt in culpa qui
судья-серунтмоллитаним id estlaborum.
Обратите особое внимание на текстовые гиперссылки вверху страницы. Каждая гиперссылка указывает на файл сценария с именем resize.php и передает ему выбранный размер шрифта с помощью метода URL GET.
Сохраните этот документ в каталоге вашего веб-сервера с расширением .php, например, index.php.
Шаг 2. Создание таблиц стилей.
Далее создайте файлы таблиц стилей для каждого размера текста: small.css, medium.css и big.css. Это содержимое файла small.css:
body {.
шрифт: 10 пикселей
}
Аналогичным образом вы можете создать medium.css и big.css, используя 17px и 25px соответственно, и сохранить эти файлы таблиц стилей в том же каталоге, что и веб-страница, созданная на предыдущем шаге.
Шаг 3. Создайте механизм изменения размера текста
. Как было сказано выше, веб-страница может «знать», какой файл таблицы стилей загрузить, путем поиска предопределенных переменных сеанса. Переменные сеанса управляются через файл сценария resize.php (см. листинг B). ), этот файл активируется, когда пользователь нажимает кнопку изменения размера текста в верхней части веб-страницы. Это содержимое resize.php:
Список B
// начало сеанса.
// импортируем выбранный размер в сессию
сеанс_start();
$_SESSION['textsize'] = $_GET['s'];
заголовок("Местоположение: ". $_SERVER['HTTP_REFERER']);
?>
Это очень просто. Когда пользователь выбирает новый размер текста, resize.php получает значение размера шрифта с помощью метода GET и сохраняет его в переменной сеанса $_SESSION['textsize'], а затем сбрасывает браузер Direct. на первоначально открытую страницу.
Конечно, здесь все еще отсутствует один компонент: веб-страница достаточно умна, чтобы автоматически определять размер текста, выбранный пользователем, и загружать соответствующую таблицу стилей. Чтобы добавить эту функцию, откройте файл вашей веб-страницы index.php и добавьте ее. следующий оператор в начало файла (см. листинг C):
Листинг C
// начало сеанса
//импортируем переменные
сеанс_start();
// устанавливаем размер текста по умолчанию для этой страницы
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'средний';
}
?>
Вам также следует добавить ссылку на таблицу стилей между элементами ..., как показано ниже:
тип="текст/css">
Это листинг D. Полный файл index.php должен выглядеть так:
Листинг D:
// начинаем сеанс
//импортируем переменные
сеанс_start();
// устанавливаем размер текста по умолчанию для этой страницы
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'средний';
}
?>
тип="текст/css">
Размер текста: маленький | href="resize.php?s=medium">средний большой |
Loremipsum dolor сидит спокойно,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
магна аликва.
Ad minim veniam, quisnostrum упражнение ullamcolaboris nisi utaliquip ex ea
коммодоконсекват.
Duisauteirure скорбь в осуждении в
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat not proident, sunt in culpa qui
судья-серунтмоллитаним id estlaborum.
Понять, как это работает, должно быть очень просто. Когда веб-страница загружается, она возобновляет текущий сеанс и проверяет, соответствует ли переменная $_SESSION['textsize'] текущему выбранному размеру шрифта, а затем динамически загружает соответствующую таблицу стилей. через элемент, что приведет к автоматическому повторному отображению веб-страницы в правильном размере. Совместное использование PHP и CSS немного отличается от традиционного метода, который использует JavaScript для динамического изменения таблицы стилей CSS. По сравнению с методом JavaScript преимущество метода PHP заключается в том, что вам не нужно полагаться на поддержку клиента. для JavaScript. Побеспокойтесь о создании работы специально для определенного браузера, возможно, вы обнаружите, что этот подход хорошо работает в следующий раз, когда вы сядете за разработку веб-сайта, удачного кодирования!