Здравствуйте. Отмечу сразу: программа создания HTML-кода даёт заготовку, а творческие операции с HTML-кодом выполняются вручную. Материалы «Мира Дальних Дорог» готовятся полуавтоматически.
Программы написаны на языке PHP. Работа программы создания HTML-кода проверена при PHP версий 5.6 и 7.1 (локальный компьютер, Open Server, HTTP – Apache 2.4). Поисковые программы успешно функционируют на сайте.
В программу и CSS внесены изменения, благодаря которым созданные страницы можно смотреть и с компьютера, и со смартфона. (Ещё недавно «Мир Дальних Дорог» предназначался только для стационарных компьютеров / ноутбуков).
Что нужно для создания готовых страниц?
Хотя бы минимальное знание HTML (и готовность работать с HTML-кодом).
Для поисковой системы – представления о базах данных MySQL. В файлы поисковых программ нужно внести небольшие изменения – указать индивидуальные параметры базы данных и сайта.
Что ещё понадобится?
Учитывая, что операционная система Windows сама по себе не работает с PHP-скриптами, устанавливаем сервер (обработчик PHP). У автора: Open Server (бесплатный).
HTML-код можно редактировать и в обычном «Блокноте». Но рекомендую установить бесплатный Notepad++, Brackets или аналогичный редактор. Подсветка синтаксиса значительно снижает вероятность ошибки.
Для передачи файлов на сайт установите FTP-клиент (FTP = File Transfer Protocol – протокол передачи файлов). Автор использует бесплатную программу FileZilla.
Создание HTML-кода
Загрузить программу подготовки материалов сайта «Мир Дальних Дорог»
Программа создаст HTML-код с любыми из следующих элементов:
Заголовок.
Рисунки (фотографии и любые другие). Рисунки могут быть гиперссылками (при нажатии на малый рисунок открывается большой) – программа автоматически добавит код гиперссылки к изображению.
Текстовое описание (рассказ).
Таблицы:
а) Таблица расписания. Может использоваться для собственного графика движения, для расписания транспорта (и подобной информации).
б) Таблица с разным содержимым имеет другую структуру строки.
Меню (набор гиперссылок, включённый через HTML-тег iframe).
Поиск
Стили (CSS)
CSS – внешняя таблица стилей. Набор параметров оформления документа: шрифты, цвета и многие другие свойства. Они же используются для оформления «Мира Дальних Дорог».
Загрузить таблицы стилей (CSS)
Таблицы стилей содержат 130 (сто тридцать) вариантов оформления заголовков и текстовых блоков.
Заголовку (другому текстовому блоку) можно назначить 2 класса – шрифтовой и цветовой. Первый отвечает за шрифт, его размер и особенности. Второй – за цвета фона и текста.
Шрифтовые классы:
TNR – шрифт Times New Roman
GRM – Garamond
MCR – Monotype Corsiva
Цветовые классы (stili2 и stili3.css)
Классы, начинающиеся на B, имеют белый фон. Последующие буквы обозначают цвет текста. Примеры: BSZ – белый фон, сине-зелёный текст. BFIOLET – белый фон, фиолетовый текст.
Первая буква отличается от B? И дефис есть? Значит, фон цветной. До дефиса – цвет фона, после – цвет текста. Пример: SZ-ZHELT – сине-зелёный фон, жёлтый текст.
Исторически на моём сайте есть 2 типа страниц:
1) Страницы с рассказами о походах и путешествиях назовём «походными».
2) «Непоходные» страницы содержат фотографии (и другую информацию) из разных походов.
Когда-то давно рисунки располагались в таблицах. Но такая вёрстка не подходит для мобильных устройств с малым экраном.
Сейчас. Файлы stili2, stili3 и stili.css предлагают блоки div со свойством display: inline-block и шириной, позволяющей разместиться на строке 2 или 3 малым изображениям. При малой ширине экрана рисунки разместятся в 1 столбец.
Пороговая ширина экрана для переключения в «мобильный» режим: 800 точек (800 px). Исключение – stili3.css с порогом в 920 px (ибо блок из 3 столбцов шире).
Файл stili.css используется для оформления главной страницы, поиска, списка «Все походы». Цветовых вариантов в нём немного. Основное «богатство» цветов – в 2 файлах для «походных» страниц:
stili2.css – расположение рисунков в 2 столбца. Пример со ВСЕМИ вариантами цветов
stili3.css – рисунки в 3 столбца. Пример со ВСЕМИ вариантами цветов
flex.css предлагает новый вариант вёрстки – Flex. Однако ряд старых браузеров (Internet Explorer 9) такую вёрстку не поддерживает.
Остальные 7 файлов – для «непоходных» страниц: интересные / крупные фотографии, сборные путешествия. Они по-прежнему предполагают расположение рисунков в таблице. Да, такая вёрстка считается устаревшей, но таблица стала другой – адаптируемой для мобильных устройств. В строке: 1 маленький рисунок + текст справа.
Интерактивная страница-пример (можно выбрать любой из 7 стилей). Она проверена, результат: «Страница оптимизирована для мобильных устройств»
Файлы для «непоходных» страниц не содержат отдельных цветовых классов. У каждого файла – единый стиль. Шрифтовые же классы одинаковы.
Цветовые гаммы:
zelenoe1 и zelenoe2.css – в зелёном стиле
sin-fiolet.css – сине-фиолетовый стиль
nebo-voda.css. Вы уже догадались, что это синие и голубые цвета. Именно так выглядят небо и вода при солнечной погоде.
malin-roz.css – малиново-розовый стиль
bezh-zhelt.css – бежевый со светло-жёлтым фоном
oranzh-zoloto.css – золотисто-оранжевый стиль
«Что ещё не поддерживается старыми браузерами»? Градиентные фоны.
Файлы stili2, stili3, flex и oranzh-zoloto.css содержат классы с белыми и одноцветными фонами.
Другие – с градиентными фонами. Им назначены цвета, позволяющие легко прочесть текст при отсутствии фона.
Чуть не забыл: инструкция
Предложенные программы и CSS можно редактировать, а также создавать свои программы и стили на основе моих.
Оценил 1 человек
1 кармы