Пиктограмма с приветствием СпокаУчаствовать в бесплатном спринте «База для верстальщика»28 июня — 4 июля 2021
1/4

Как сделать собственный сайт-визитку

Уровень: для новичков

Следующий шаг

Прочитать инструкцию по работе с сайтом-визиткой

В предыдущей домашней работе мы научились запускать сайты, написанные на PHP, на домашнем компьютере. Мы установили и запустили OpenServer, после чего создали папку для собственного сайта и открыли в браузере обновлённый сайт-визитку.

В этой домашней работе мы разберём, как настроить сайт-визитку и как опубликовать его в интернете.

Если вы ещё этого не сделали, скачайте архив с сайтом и распакуйте его.

Если вы следователи инструкции из прошлой домашней работы, то откройте созданную нами папку mysite.

Файлы в папке mysite
Файлы в папке mysite

В папке с сайтом находятся:

  • index.php - главный сценарий,
  • style.css - стилевой файл,
  • script.js - скрипт, который переключает темы,
  • папка img с картинками,
  • папка components с компонентами сайта.

В этом задании вы узнали, что такое сценарий и компоненты. Откроем сценарий index.php в редакторе кода и посмотрим, как он устроен.

Сценарий index.php в редакторе кода
Сценарий index.php в редакторе кода

После открывающего PHP-тега объявлены пять переменных с данными о сайте и его владельце. Ниже с помощью команды require подключаются различные компоненты.

Откроем сайт в браузере. Если вы следовали инструкции из прошлой домашней работы, то для этого вам нужно запустить OpenServer и набрать в адресной строке браузера http://mysite.

Cайт-визитка
Cайт-визитка

Обратите внимание, имя владельца — «Неопознанный енот» — встречается в нескольких местах на странице: в блоке с основной информацией, в контактах и в подвале.

Вернёмся в редактор кода и изменим значение переменной $name.

Изменим значение переменной $name
Изменим значение переменной $name

Обновим страницу в браузере. Мы изменили значение переменной в одном месте, а имя владельца поменялось на всей странице!

Имя владельца изменилось на всей странице
Имя владельца изменилось на всей странице

Теперь поэкспериментируем с порядком подключения компонентов. Поменяем местами вторую и третью команды require.

Меняем местами команды require
Меняем местами команды require

Обновим страницу. Теперь блок со статусом идёт перед основной информацией. Вот она — сила PHP!

Компоненты поменялись местами
Компоненты поменялись местами

В следующем шаге мы подробно разберём, как управлять сайтом-визиткой и настроить его под себя.

Следующий шаг