Я тут где-то уже писал о своих скитаниях по разного рода текстовым редакторам, мнениям и т.д. Когда начинал делать html. Постепенно выработалась некая технология, если так ее можно назвать.

Скажу сразу, что именно о том, как создавать, к примеру, адаптивный макет, разные меню, и т.д., и т.п. – я здесь говорить не буду, речь совсем не о том. Какие-то начала этому есть, скажем, в нашем электронном учебнике по html/CSS. А остальное – это уже определенные (точнее, детальные; без этого - не стоит и садиться за html) понимания позиционирования элементов на странице, дизайна (с последним у меня, к сожалению, слабовато). Т.е. здесь я заведомо полагаю, что уже есть тот или иной адаптивный (не менее, чем на 98%) макет, универсальный для ВСЕХ устройств, способных выходить в интернет и открывать вебстраницы.

1. Итак, беру макет (для того или иного сайта). Туда вставляю, собственно, вебстраницу, точнее, ее оформленный контент.

Оформление можно, конечно, делать вручную (при помощи какого-нибудь редактора html или IDE), но, все-таки, это – достаточно волокитно. Ибо, как минимум, придется прописывать основные теги (для абзацев и т.д.). Это… можно, но как-то долго и нудно. Особенно, когда речь идет из серии «сделать быстро и качественно».

2. Заготовку статьи создаю в Word

В Word2003, если кому интересно. А еще недавно работал себе в 1997. Никаких этих «современных» Word-ов, у которых заголовки наверху занимают чуть ли не третью часть дисплея. Зачем так сделали в Microsoft, как вернуть нормальные панели в Word, можно ли это сделать и т.д. – конечно, можно поразмыслить. Но, не нужно. Эффективнее пользоваться тем, что позволяет удобно получить быстрый и качественный результат. Это для меня – аксиома. Остальное оставим «любителям современных новых технологий».

Хотя, после того, как сделал себе WYSIVYG-редактор, то к Word уже практически не обращаюсь. Недавно (зима 2023 г.) вдруг обратил внимание, что уже довольно редко его использую, если делаю страницу по готовому шаблону-макету. Т.е. текст, вставку рисунков, основные метатеги делаю сразу в браузере. Это как-то нагляднее и удобнее. Ну, а для мелких, окончательных действий (если надо дополнить или поправить верстку) - для этого использую Notepad++. Тогда как PHPStorm использую теперь больше по его основному назначению: для написания программных кодов.

3. Далее, при помощи дополнения DocToHtml создаю html-код из написанного в Word

Текст. таблицы создаются очень даже изумительно, а вот с рисунками/картинками – проблема. Их, увы, приходится вставлять вручную (хотя, это несложно, просто - времени тратится чуть больше). Об этом позже. Html-код создается, как правило, в течение нескольких секунд, после выделения текста и нажатия на одну кнопку в Word. Однако, проблема в том, что после DocToHtml код получается хотя и относительно чистый, но, все-таки, не без погрешностей. Например, там нет нужных мне универсальных классов (мною разработанных); присутствует устаревший тег <font>, иногда присутствуют некие word-овские классы, ну, и кое-что еще. Эти огрехи следует исправить, причем, автоматически, конечно же.

4. Этот код копирую в заранее созданный макет страницы

Открытый в PнрStorm. Важно: копирую код не куда-нибудь, а между особенными (одинаковыми для всех макетов) комментариями. В чем особенность – поясню позже. Место между ними и представляет собой место для контента будущей вебстраницы.

5. Запускаю виртуальный сервер (если он еще не был запущен).

6. В браузере открываю специальную страницу, которая позволяет (при помощи формы загрузки файлов) загружать файлы с моего компьютера и загружаю, собственно, только что созданный файл. Далее – нажимаю кнопку «Очистить» и через миг на экране – чистый html-код (т.е. очищенный от огрехов, допущенных DocToHtml). Этот код автоматически выделяется, поэтому все, что мне остается сделать – это нажать на клавиатуре Ctrl + C.

7. Возвращаюсь в PнрStorm, там нажимаю кнопку «Отменить» (предыдущую операцию). При этом, естественно, отменяется вставка из буфера html-кода, ранее вставленного в макет после работы DocToHtml. Пространство между особенными комментариями вновь оказывается пустым, т.е. передо мной – вновь пустой макет. Так вот, туда и вставляю только что очищенный код.

Примечание 1. Специальная страница, которая очищает файл от огрехов, допущенных DocToHtml, - самописная, работает на РНР. Так как огрехи эти – одни и те же, нетрудно запрограммировать автоматическую их компенсацию, если так это можно назвать.

Примечание 2. Особенность комментариев состоит в том, что исправлению на специальной странице подвергается только та часть html-кода, которая находится между этими самыми комментариями. И, что важно – именно она отображается после очистки на экране, она же и выделяется. И она, уже в очищенном (исправленном) виде копируется обратно в макет, взамен «грязноватого» кода.

8. Если необходимо как-то выделить места текста, например, пометить жирным или курсивным шрифтом, выделить некоторые области цветом, вставить рисунок в определенном месте, сделав ему необходимое (стандартное для конкретного сайта) оформление – то для этой цели у меня существуют сборники оформительских шаблонов (самописные).

9. Итак, открываю страницу, на которой находятся шаблоны, причем в виде образцов – с типичным текстом, рисунками и т.п. Там вначале через меню выбираю нужный (один клик), затем – нажимаю клавишу Escape – и шаблон уже передо мной на экране. Кликаю по нему мышкой дважды (dblclick) – его разметка (очищенная от текста) появляется на панели справа и автоматически выделяется. Остается, опять-таки, лишь нажать на клавиатуре Ctrl + C и можно вставлять скопированный шаблон в нужное место html-кода вебстраницы.

Примечание 1. Эта страница – самописная. Она позволяет добавление новых шаблонов. Делается это легко: в соответствующее место сборника просто вставляется готовый html-код шаблона, который бы хотел видеть где-нибудь в html-коде (ну, и небольшая обертка вокруг него), и все. Далее – он автоматически появляется в сборнике шаблонов и уже готов к применению. Разве что – возможно, потребуется прописать еще соответствующие классы в файле стилей (css), если такие классы еще не использовались.

Примечание 2. Если надо, можно кликнуть на одну кнопку – показывается разметка в виде html-тегов, их классов и т.д. для конкретного шаблона вместе с образцом контента. Повторный клик убирает разметку, оставляя лишь оформленный в соответствии с нею контент.

На данном этапе как раз и вставляю рисунки, видео и прочий аналогичный контент.

10. Далее, уже заключительные небольшие штрихи, доводка страницы, заполнение метатегов и др. – и она готова

Таким образом, основное время уходит, собственно, на то, чтобы набрать текст и, возможно, сделать рисунки. А оформление в html-код и превращение этого текста в вебстраницу занимает, в среднем, минут 30. Это при том, что я никогда не скуплюсь на оформление (чем, к сожалению, уже не блещут многие современные сайты и оттого их, банально, не всегда приятно читать). Благо, вышеописанные инструменты это позволяют делать быстро и удобно.

Еще удобнее было бы, конечно, примерно следующее: выделил кусок контента в браузере, щелкнул мышью не более 2…3 раз – и контент автоматически обернулся требуемым шаблоном (если надо – по еще одному щелчку мыши могут быть показаны теги разметки), а html-код - сохранился. Может, когда-нибудь реализую и это.

А ведь когда-то, помнится, да, набирал код вручную в простом html-редакторе типа Notepad++ (потом перейдя на PhpStorm). Шаблоны, опять же, выделял и копировал вручную. Это было долго. И непроизводительно. А сейчас стало как-то удобно. Главное - ничего лишнего и все под рукой. Например, эту страницу я создал за примерно 20 минут (специально засекал время). Пока слушал концерт Андрея Гаврилова, любезно предоставленный А. Сотником.

Послушайте и Вы, читатель. Прекрасная музыка. Правильно пишут в комментариях, цитирую: "Спасибо Андрею Гаврилову и вам Sotnik! Пробрало до мозга и костей,до слёз! Вот если бы такую музыку транслировали по российским каналам,то и расчеловечивание такого не было бы! Андрею Гаврилову низкий поклон за исполнение и прекрасный вечер!".

От себя добавлю: в самом деле, это - МУЗЫКА, а не та противная козлятина, которую транслируют по радио, да еще постоянно перебивая то "рекламой", то прочей ахинеей. А вот А. Гаврилов - это Мастер, да.

С уважением, Салимоненко Д.А.