Евгения Константиновна/ 10 апреля, 2020/ Основы HTML/CSS, Основы JavaScript, Сайтостроение

Основы сайтостроения

Фото ГАЛЕРЕЯ

КОСМИЧЕСКАЯ НЕДЕЛЯ в «Лингва-Клубе»
Присоединимся и мы, создадим фото галерею, используя наши знания и возможности HTML/CSS/JavaScript
1 ЭТАП
Вам необходимо выбрать космическую тему для демонстрации слайдов в галерее
  • Планеты солнечной системы
  • Планета Марс (или любая другая планета)
  • Белка и Стрелка — собаки космонавты
  • Космические корабли
  • Знаменитые космонавты
  • или выбрать свою…
2 ЭТАП
Создаем стандартную папку для нашей будущей web-страницы:
  • создаем папку КОСМОС-ГАЛЕРЕЯ — открываем
  • Создаем текстовый файл index.html
  • Создаем папку сss — в ней текстовый файл style.css
  • Создаем папку img — в ней две папки big и small
  • Создаем папку js — в ней ничего не надо создавать))) пока
3 ЭТАП
По выбранной теме находим фотографии в интернете и сохраняем в папке big, при этом сразу меняем имя файлам 01.png, 02.png, 03.png и т.д. (лучше выбирать разрешение .png, или потом поменять в GIMP на это разрешение), размер выбирайте не очень большой, но и не очень маленький, большие будут долго грузиться, маленькие растягиваться и искажаться (не больше стандартного размера 1920х1080, рекомендую 1500х844, чуть больше, чуть меньше 🙂 )
В галерее будет три ряда по пять фотографий.
Отдельно находим фотографию для фона — размер 1920х1080, размещаем в папку img, даем имя fon.png
Все картинки, которые вы найдете, необходимо уменьшить с помощью GIMP или любого другого графического редактора до размера 150х100. Размер миниатюр должен быть именно таким и у всех одинаковый, иначе нарушиться структура галереи!!!

Как уменьшить картинку в GIMP?

ПОКА ВСЁ!!! МОЛОДЦЫ...остальное завтра 🙂

1+