Бесплатные программы и таблицы стилей (CSS) для создания сайта. Новый выпуск

0 626

Здравствуйте. Отмечу сразу: программа создания 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) такую вёрстку не поддерживает.

Пример в вёрстке flex

Остальные 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 можно редактировать, а также создавать свои программы и стили на основе моих.

Ставка ЦБ и "мы все умрём"

Ладно, раз бегали тут тупые боты с методичками «В России ставка ЦБ высокая, значит России конец», то надо об этом написать. Почему у украинских свидомитов, белорусских змагаров и росс...

Жирной жизни бюргеров пришёл конец, -ец, -ец, -ец!

Здравствуйте, мои дорогие читатели.Когда же немцы поймут, что их санкции убивают не только собственную промышленность, но и всё, что было создано за последние десятилетия? Они уже насто...