Программы сайта «Мир Дальних Дорог»
Здравствуйте. Материалы нашего сайта готовятся «полуавтоматически»: программа даёт заготовку, а творческие операции с HTML-кодом выполняются вручную.
Программы написаны на языке PHP. Работа программы создания HTML-кода проверена при PHP версий 5.6 и 7.1 (локальный компьютер, Open Server, HTTP – Apache 2.4). Поисковые программы успешно функционируют на сайте.
Что нужно для создания готовых страниц?
Хотя бы минимальное знание HTML (и готовность работать с HTML-кодом).
Для поисковой системы – представления о базах данных MySQL. В файлы поисковых программ нужно внести небольшие изменения – указать индивидуальные параметры базы данных и сайта.
Что ещё нам понадобится?
Учитывая, что операционная система Windows сама по себе не работает с PHP-скриптами, устанавливаем сервер (обработчик PHP). У автора: Open Server (бесплатный).
HTML-код можно редактировать и в обычном «Блокноте». Но рекомендую установить бесплатный Notepad++, Brackets или аналогичный редактор. Подсветка синтаксиса значительно снижает вероятность ошибки.
Для передачи файлов на сайт установите FTP-клиент (FTP = File Transfer Protocol – протокол передачи файлов). Автор использует бесплатную программу FileZilla.
Описания и загрузка
Программы создания HTML-кода
ЗАГРУЗИТЬ ПРОГРАММУ ПОДГОТОВКИ МАТЕРИАЛОВ САЙТА «МИР ДАЛЬНИХ ДОРОГ»
Программа создаст HTML-код с любыми из следующих элементов:
Заголовок.
Рисунки (фотографии и любые другие). Рисунки могут быть гиперссылками (при нажатии на малый рисунок открывается большой) – программа автоматически добавит код гиперссылки к изображению.
Текстовое описание (рассказ).
Таблицы:
а) Таблица расписания. Может использоваться для собственного графика движения, для расписания транспорта (и подобной информации).
б) Таблица с разным содержимым имеет другую структуру строки.
Меню (набор гиперссылок, включённый через HTML-тег iframe).
«Что есть что» в папке программы
index.htm – главная страница.
file.css – таблица стилей (для оформления программы, а не создаваемых страниц).
text-risunok.php – первая страница программы. Ввод параметров.
text-risunok-2.php – создаёт HTML-код. Страница с готовым кодом откроется в новой вкладке; ранее введённые значения сохранятся.
parametry1.php – файл стандартных параметров, отображаемых при открытии: адрес сайта, стандартные размеры рисунков… Их можно изменить в полях формы.
parametry2.php – файл параметров, непосредственно влияющих на готовый HTML-код.
Папка primer – примеры файлов, созданных программой. Их 7. HTML-код сохранён строго в том виде, в котором создала программа. Правильность 6 из 7 файлов проверена: Document checking completed. No errors or warnings to show (ошибок и предупреждений нет). zhavoronki-ershovo-fragment.txt – это фрагмент для добавления на уже имеющуюся страницу.
Пустая папка risunki – для временного размещения рисунков, чьи параметры читает программа.
Создание HTML-кода
Подготовка к работе
Распакуйте архив в папку, доступную для программы-сервера. Запустите сервер.
Внимание! Open Server запускается в 2 шага. После открытия выбираем в меню пункт «Запустить» (значок на панели задач должен быть зелёным).
Файлы конфигурации – parametry1.php, parametry2.php – можно (и даже рекомендуется) редактировать. Файлы содержат комментарии – разъяснения. Перед редактированием сделайте, пожалуйста, копию.
Переименование большого количества рисунков (в Windows)
Выделяем рисунки. На первом из них: правая кнопка мыши – «Переименовать» – шаблон имени. Файлы получат имена вида «File (1)», «File (2)»… Однократно повторяем процедуру – удаляем пробел перед скобкой.
Существуют программы для пакетного переименования файлов (пример: Ant Renamer). Установите при необходимости.
Работа с программой
Важно! Не открывайте программу из папки. Только через браузер (обозреватель) или меню программы-сервера.
На время работы поместите изображения в папку risunki.
HTML-теги будут удалены оттуда, где их быть не должно (функция strip_tags). Теги, введённые в поля «Рассказ», «Стандартная видимая подпись к рисунку» (и аналогичные), сохранятся.
Из большинства полей удаляются лишние пробелы в начале и конце введённой строки (но не внутри неё).
К рассказу (описанию) автоматически добавятся переносы строк.
Отдельный вопрос – выбор таблицы стилей (CSS). Используя наши CSS-файлы, обратите внимание на вариант расположения рисунков и класс заголовка.
Особенности CSS изложены чуть ниже.
Заполнив форму, нажимаем зелёную кнопку. Если ошиблись – красная кнопка для сброса.
Помимо основного результата, программа предложит имя страницы и гиперссылки.
Что остаётся сделать?
Скопировать и сохранить готовый код.
Выполнить творческие работы: добавить подписи к фотографиям, заполнить таблицу расписания.
Добавить файл (-ы) на сайт по FTP.
Файлы стилей (CSS)
CSS – внешняя таблица стилей. Набор параметров оформления документа: шрифты, цвета, свойства таблиц, рисунков и многое другое. Они же используются для оформления «Мира Дальних Дорог».
О файлах CSS
Исторически у нас есть 2 типа страниц:
1) Страницы с рассказами о походах и путешествиях назовём «походными».
2) «Непоходные» страницы содержат фотографии (и другую информацию) из разных походов.
Выбор таблицы стилей
Обращаем внимание на расположение рисунков.
Если выбран вариант «Параграфы» или «Рисунки отделяются переносами строк», можно использовать любой из предложенных CSS-файлов.
Изображения располагаются в блоках div? Подойдут stili2.css, stili3.css, flex.css; менее предпочтителен stili.css.
Рисунки будут располагаться в таблице? Используйте любой из 7 оставшихся файлов (имя не содержит слов «stili» и «flex»). Отмечу, что табличная вёрстка считается устаревшей, но… таблица стала другой – адаптируемой для мобильных устройств. В строке: 1 маленький рисунок + текст справа.
Файл stili.css используется для оформления главной страницы, поиска, списка «Все походы» (и страницы, которую вы читаете). Обращаю внимание: там заголовки не имеют классов (исключение – «glavstranica»: более крупный заголовок главной страницы).
Файлы stili2 и stili3 предлагают блоки div со свойством display: inline-block и шириной, позволяющей – на большом экране – разместиться соответственно 2 и 3 малым изображениям на строке. На малом экране рисунки разместятся в 1 столбец.
Именно в этих файлах содержится основное «богатство» цветов.
stili2.css – пример со всеми вариантами цветов
stili3.css – пример со всеми вариантами цветов
flex.css предлагает новый вариант вёрстки – Flex. Но статистика показала неожиданно высокий процент старых браузеров, используемых для просмотра нашего сайта. Internet Explorer 9 и предыдущие версии не поддерживают вёрстку Flex; блоки div расположатся в 1 столбец. Это «экспортная» таблица стилей.
Посмотреть пример Flex
Заголовок. Шрифтовые и цветовые классы
Если используем stili2 или stili3.css: заголовку (другому текстовому блоку) можно назначить 2 класса – шрифтовой и цветовой. Первый отвечает за шрифт, его размер и особенности. Второй – за цвета фона и текста.
Классы, начинающиеся с буквы B, имеют белый фон. Последующие буквы обозначают цвет текста. Примеры: BSZ – белый фон, сине-зелёный текст. BFIOLET – белый фон, фиолетовый текст.
Первая буква отличается от B? И дефис есть? Значит, фон цветной. До дефиса – цвет фона, после – цвет текста. Пример: SZ-ZHELT – сине-зелёный фон, жёлтый текст.
7 файлов для «непоходных» страниц не содержат отдельных цветовых классов (у каждого – единая цветовая гамма).
А шрифтовые классы одинаковы:
TNR = шрифт Times New Roman
GRM = Garamond
MCR = Monotype Corsiva
Чуть не забыл.
Для 7 оставшихся файлов создана интерактивная страница-пример – можно выбрать любой из 7 стилей
Имена файлов тоже несут информацию:
zelenoe1 и zelenoe2.css – в зелёном стиле
sin-fiolet.css – сине-фиолетовый стиль
nebo-voda.css. Вы уже догадались, что это синие и голубые цвета. Именно так выглядят небо и вода при солнечной погоде.
malin-roz.css – малиново-розовый стиль
bezh-zhelt.css – бежевый со светло-жёлтым фоном
oranzh-zoloto.css – золотисто-оранжевый стиль
Другие особенности файлов CSS
Пороговая ширина экрана для переключения в «мобильный» режим: 800 точек (800 px). Исключение – stili3.css с порогом в 920 px (блок из 3 столбцов шире).
«Что ещё не поддерживается старыми браузерами»? Градиентные фоны. Таким цветовым классам назначены цвета, позволяющие легко прочесть текст при отсутствии фона.
Файлы stili2, stili3 и flex содержат исключительно классы с белыми и одноцветными фонами. Другие – с градиентными фонами.
Цветовые классы из файлов stili2 и stili3 можно собрать в 1 файл: имена классов уникальны (не пересекаются).
Основные параметры 7 файлов для «непоходных» страниц (например, максимальная ширина таблицы) одинаковы. Отличаются только цвета.
Поиск
Файлы в папке poisk
napravlenie.php, reki.php – программы поисковой системы:
Выбор походов по направлению (предполагает выбор из ограниченного набора значений).
Поиск по названиям рек, морей и озёр.
oshibka.php – файл, выполняющийся при нулевых результатах поиска. К предыдущим подключён функцией include.
newtable.xlsx, newtable.csv – заготовка таблицы базы данных. В разных форматах: книга Excel и CSV. Для загрузки в базу данных используйте CSV.
Подготовка базы данных
Следующие действия выполняются в панели управления хостингом. Доступ предоставляет хостинг-провайдер при создании сайта.
Создаём базу данных, добавляем пользователя. Пользователю, чьё имя используется в программе, назначаем полномочия только на запрос SELECT.
Подключение к базе данных выполняется через расширение MySQLi – убедитесь, что оно включено.
Далее: программа PHP My Admin. Создаём таблицу newtable. Заголовки столбцов копируются из файла Excel.
Работа с файлами программ
Читая комментарии, вписываем индивидуальные параметры: адрес сайта, база данных, имя пользователя, пароль.
Наполнение базы данных
Открыв таблицу в Excel, вносим нужную информацию. Сохраняем в CSV, загружаем в базу данных: PHP My Admin, кнопка «Импорт». Перед загрузкой рекомендуется открыть файл в Notepad++ и преобразовать в кодировку UTF-8 (в PHP My Admin она используется по умолчанию).
Внимание!
К сожалению, сайт могут посетить злоумышленники. SQL-инъекции (включение в запрос «лишней» информации) – распространённый способ взлома сайтов.
Напомню: пользователь, указанный в поисковой программе, должен иметь полномочия только на запрос SELECT. Категорически не рекомендуется использовать имя администратора (пользователя, могущего добавлять, изменять и удалять информацию).
Наша база данных не содержит информации, которая должна быть скрыта от посторонних глаз. Защита конфиденциальной информации – тема отдельного разговора.
ГЛАВНАЯ СТРАНИЦА