Question

Перед вами сайт, оформленный для обычных посетителей. Сделаем так, чтобы его можно было адаптировать для людей с плохим зрением. 1. Добавьте в шапку кнопку “Версия для слабовидящих” 2. Создайте файл script.js и подключите его к страничке 3. сделайте так, чтобы после нажатия на нее все шрифты менялись с 14px на 20px, а цвета текста в шапке и подвале становились более контрастными относительно цветов фона (оттенки выберите сами). СКИНУ ГОТОВЫЙ САЙТ, ТОЛЬКО НАПИШИТЕ

Answer 1

Начнем с самого легкого, 2 пункта. Создаем js файл.

на рабочем столе нажимаем правую кнопку мыши -> создать текстовый документ. Затем заходим в него -> файл -> сохранить как. Пишем наше название и в конце добавляем .js.

1. Добавить кнопку можно по разному, но выберем путем ссылки.

html

<div class="ButtonBack">

 <a class="Button" href="указываем ссылку на главную страницу">Версия для слабовидящих</a>

 </div>

первым мы создаем задний фон кнопки, вид и ее форму. Вторым мы управляем ссылкой на страницу. Далее мы сделаем ссылку целым элиментом.

css

.ButtonBack{

}

.Button{

}

.ButtonBack:hover{

}

.ButtonBack:active{

}

И так,  в первом мы настраиваем ширину , высоту и т.п. Во втором мы описываем шрифт ссылки, что бы у нас получилась полноценая кнопка добавим display:inline-block; это сделает целый div одной ссылкой на страницу. Так же в двух последних стилях описываем hover - стиль кнопки при наведении и active при нажатии.

Что касаемо 3 пункта, просто на новой странице задайте необходимый размер шрифтa.

Надеюсь помог, удачи в обучении;)

Answer 2

Я могу объяснить вам, как это сделать, но я не могу прямо создать файлы и применить их к сайту, так как я не имею доступа к вашему веб-серверу. Вот как вы можете реализовать вашу задачу:

1. Добавление кнопки "Версия для слабовидящих" в шапку:

Добавьте следующий HTML-код в ваш сайт, где вы хотите разместить кнопку:

htmlCopy code
<button id="accessibility-button">Версия для слабовидящих</button>

2. Создание файла script.js:

Создайте файл script.js в каталоге вашего проекта и добавьте следующий код:

javascriptCopy code
// Получаем ссылку на кнопку
const accessibilityButton = document.getElementById("accessibility-button");

// Функция для изменения шрифтов и цветов
function enableAccessibilityMode() {
  // Изменяем размер шрифтов на 20px
  document.body.style.fontSize = "20px";

  // Устанавливаем более контрастные цвета для шапки
  const header = document.querySelector("header");
  header.style.backgroundColor = "black";
  header.style.color = "white";

  // Устанавливаем более контрастные цвета для подвала
  const footer = document.querySelector("footer");
  footer.style.backgroundColor = "black";
  footer.style.color = "white";
}

// Добавляем обработчик события на кнопку
accessibilityButton.addEventListener("click", enableAccessibilityMode);

3. Подключение script.js к вашей странице:

В вашей HTML-странице добавьте следующую строку перед закрывающим тегом </body> для подключения файла script.js:

htmlCopy code
<script src="script.js"></script>

После выполнения этих шагов, при нажатии на кнопку "Версия для слабовидящих" шрифты увеличатся до 20px, а цвета текста в шапке и подвале станут более контрастными. Пожалуйста, убедитесь, что ваши цветовые настройки соответствуют требованиям доступности для слабовидящих людей.