Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода? Чтобы можно было делать там независимые (основной текст, меню, врезки, пояснения) части страницы, собирая их вместе хоть ручной склейкой, хоть SSI/include?
Желательно, чтобы на выходе получались просто фрагменты HTML-кода, без тэгов html/body, метаинформации и прочего.
Как вообще принято делать страницы, на которых отображается несколько независимых (например, разложенных по div) частей?
Здравствуйте, Евгений Музыченко, Вы писали:
ЕМ>Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода? Чтобы можно было делать там независимые (основной текст, меню, врезки, пояснения) части страницы, собирая их вместе хоть ручной склейкой, хоть SSI/include?
ЕМ>Желательно, чтобы на выходе получались просто фрагменты HTML-кода, без тэгов html/body, метаинформации и прочего.
Спасибо, попробовал. Но навскидку он ничем не лучше FrontPage 2000, которым я пока пользуюсь, а местами и хуже. Он также не может работать с "голым" HTML-кодом (без html/body), а в полных HTML-документах, в отличие от FP, не понимает CSS. Ну и глючноват.
Здравствуйте, Marty, Вы писали:
M>А в чем проблема? Редактируй фрагменты, как полные документы, а потом собирай свой, вырезая только нужные части
Проблема в обилии лишних телодвижений. Я думал наделать фрагментов в виде голого кода, а в файлах страниц наставить SSI/include, чтобы при перезагрузке страницы в браузере она сразу собиралась в готовом виде. А с предложенным подходом придется и по два файла держать для каждого фрагмента, и после каждой правки запускать руками скрипт для преобразования. Для эпизодических правок это еще туда-сюда, но мне еще нужно придумать дизайн и раскладку, а я не настоящий сварщикдизайнер, поэтому итераций потребуются сотни.
Здравствуйте, Евгений Музыченко, Вы писали:
ЕМ>Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода?
Если уж с WYSIWYG-редакторами все так плохо, то на что имеет смысл посмотреть из локального (под винду), где можно редактировать исходник HTML с автоформатом (например, обернул фрагмент в div/section/article — оно автоматом сделало отступы), и чтобы в параллельном окне (без специального переключения туда-сюда) оперативно отображался результат?
Здравствуйте, Евгений Музыченко, Вы писали:
ЕМ>Если уж с WYSIWYG-редакторами все так плохо, то на что имеет смысл посмотреть из локального (под винду), где можно редактировать исходник HTML с автоформатом (например, обернул фрагмент в div/section/article — оно автоматом сделало отступы), и чтобы в параллельном окне (без специального переключения туда-сюда) оперативно отображался результат?
В обшем случае пробелы в HTML являются значимыми.
Т.е. если в C это вот:
int v;
int v;
одно и то же и результатом будет один и тот же код, то в HTML
<section>
v
</section>
и
<section>
v
</section>
будут два разных DOM.
Поэтому auto indentation для HTML это вещь в себе.
Здравствуйте, Евгений Музыченко, Вы писали:
ЕМ>Здравствуйте, Евгений Музыченко, Вы писали:
ЕМ>>Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода?
ЕМ>Если уж с WYSIWYG-редакторами все так плохо, то на что имеет смысл посмотреть из локального (под винду), где можно редактировать исходник HTML с автоформатом (например, обернул фрагмент в div/section/article — оно автоматом сделало отступы), и чтобы в параллельном окне (без специального переключения туда-сюда) оперативно отображался результат?
CS>В обшем случае пробелы в HTML являются значимыми.
CS>Поэтому auto indentation для HTML это вещь в себе.
Полагаю, это сделано для редких тегов, вроде pre. Верстальщикам же совершенно побоку, сколько пробелов между откр и закр тегами, пока верстка не сползает.
Здравствуйте, c-smile, Вы писали:
CS>В обшем случае пробелы в HTML являются значимыми.
Они имеют значение только в отдельных и редко используемых тэгах, о чем уже упомянули. Изрядное количество (если вообще не большинство) страниц успешно использует отступы.
По сути, отступы не нужны при наличии нормального WYSIWYG-редактора. Но с ними все почему-то очень странно, а работать с HTML без выравнивания очень некомфортно.
Здравствуйте, Михaил, Вы писали:
М>Посмотрите vscode с плагином, например,
Спасибо, смотрю. Какой-то этот VS Code убогий — удивительно, почему от него все фанатеют. Очевидно, в основном потому, что бесплатный. На маленький HTML-файл насоздавал аж семь процессов. Как номера строк отключить — навскидку не поймешь, эта зона на правый клик не реагирует. То же самое — с полосой макронавигации справа, где в уменьшенном виде отображается текст. Превьюшка отобразилась в виде полоски шириной в полсантиметра на самом правом краю, расширить ее никак не удается (там нигде не видно зоны для зацепа курсором). В общем, очередное поделие альтернативно одаренных для себе подобных. Пойду изучать описание, чтобы понять, как это чудо управляется.
Здравствуйте, Евгений Музыченко, Вы писали:
ЕМ>Здравствуйте, Михaил, Вы писали:
М>>Посмотрите vscode с плагином, например,
ЕМ>Спасибо, смотрю. Какой-то этот VS Code убогий — удивительно, почему от него все фанатеют. Очевидно, в основном потому, что бесплатный. На маленький HTML-файл насоздавал аж семь процессов. Как номера строк отключить — навскидку не поймешь, эта зона на правый клик не реагирует. То же самое — с полосой макронавигации справа, где в уменьшенном виде отображается текст. Превьюшка отобразилась в виде полоски шириной в полсантиметра на самом правом краю, расширить ее никак не удается (там нигде не видно зоны для зацепа курсором). В общем, очередное поделие альтернативно одаренных для себе подобных. Пойду изучать описание, чтобы понять, как это чудо управляется.
Это ссылка на один из плагинов который вылез в поиске, достаточно старый. Этих html live превьюверов много:
Open the Extensions view (⇧⌘X) and search on 'live preview' or 'html preview' to see a list of available HTML preview extensions.
Мне vscode нравится тем, что очень хорошо заточен под web разработку (есть хорошие плагины для автоформата html кода, всякие автоподсказчики при работе с css/js (например, цвета), python) и, вроде как, не тормозит, в отличие от java сред типа pycharm. Могу ошибаться, но по моим представлениям, vscode это де факто стандарт сейчас для верстки, соответственно под него пишется много плагинов именно для этих задач.
Если очень хочется минимализма, попробуйте Sublime и плагины, которые на лету обновляют окно браузера с результатами вашего html кода (или можете даже самостоятельно написать — там достаточно простой Python API)
Здравствуйте, Михaил, Вы писали:
М>Здравствуйте, c-smile, Вы писали:
М>Полагаю, это сделано для редких тегов, вроде pre. Верстальщикам же совершенно побоку, сколько пробелов между откр и закр тегами, пока верстка не сползает.
pre отличается от, скажем, div одним единственным правилом pre { white-space:pre; }.
Т.е. надо не забывать что к HTML может применяться CSS.
Даже и без white-space:pre; наличие пробела(ов) может по разному обрабытваться для разных display моделей.
<html>
<head>
<title>Test</title>
<style>
section.a div { background: red; width:max-content; }
section.b span { background: red; }
</style>
</head>
<body>
<section class=a>foo<div> bar </div>zop</section>
<section class=b>foo<span> bar </span>zop</section>
</body>
</html>
Здравствуйте, c-smile, Вы писали:
CS>Т.е. надо не забывать что к HTML может применяться CSS. CS>Даже и без white-space:pre; наличие пробела(ов) может по разному обрабытваться для разных display моделей.
А в чем, собственно, проблема? Если кто-то генерирует HTML-код инструментами, и не трогает его руками, никакого дополнительного форматирования в коде не появится. Если же приходится работать с кодом вручную, то нет смысла использовать приемы, которым форматирование мешает. И задачей правильного редактора является полная управляемость форматирования.
Самое противное это код вида <span>bla</span><span>bla</span>. Тут нет пробела между тегами, поэтому всё хорошо. Добавляешь пробел и элементы расползаются на 8 пикселей (в зависимости от размера шрифта) и фиг что с этим сделаешь. Часто в меню вылазит такое. Поэтому порой приходится писать код
Здравствуйте, vsb, Вы писали:
vsb>Самое противное это код вида <span>bla</span><span>bla</span>. Тут нет пробела между тегами, поэтому всё хорошо. Добавляешь пробел и элементы расползаются
А для чего может потребоваться использовать именно span (потоковый тэг), но оформлять им элементы, которые непременно должны стоять вплотную?
Здравствуйте, Евгений Музыченко, Вы писали:
vsb>>Самое противное это код вида <span>bla</span><span>bla</span>. Тут нет пробела между тегами, поэтому всё хорошо. Добавляешь пробел и элементы расползаются
ЕМ>А для чего может потребоваться использовать именно span (потоковый тэг), но оформлять им элементы, которые непременно должны стоять вплотную?
Да без разницы, какой тег. Обычно это вообще li (т.к. меню принято оформлять через ul почему-то). Ну вот меню делаешь горизонтальное. Тебе надо, чтобы каждый прямоугольник шёл один за другим без разрывов. Самый простой способ это сделать это поставить display: inline-block и сделать так, чтобы в разметке между ними не было пробелов. С пробелами есть разные способы их убрать, но все они несут свои минусы, например можно проставить этим прямоугольникам float: left (или right), но тогда они могут порядок менять ну и вообще немного нестандартно реагировать. Можно проставить родительскому элементу font-size 0, тогда пробел будет нулевой ширины и не отобразится, но это вообще каким-то хаком мне кажется.
Возможно решается новомодными лэйаутами вроде flex или grid, но я в них не очень разбираюсь и лепить такое просто для меню, имхо, как-то оверкил.
Здравствуйте, Михaил, Вы писали:
М>Это ссылка на один из плагинов который вылез в поиске, достаточно старый.
Так он вроде самый популярный, судя по количеству установок. И я пока не понял, должен ли он использовать для отображения какую-то стандартную панель, которую создает сам редактор, или же плагин самостоятельно мухлюет с выделением пространства в окне и отображением панели, и нормально работает только в определенных версиях редактора (у меня 1.41.1).
М>Этих html live превьюверов много
То есть, каждый сам перебирает все, и ищет наименее глючный?
М>Мне vscode нравится тем, что очень хорошо заточен под web разработку (есть хорошие плагины для автоформата html кода, всякие автоподсказчики при работе с css/js (например, цвета)
А есть где-нибудь список наиболее популярных/стабильных плагинов для статической верстки, чтобы не ходить по граблям самостоятельно?
М>Если очень хочется минимализма, попробуйте Sublime и плагины, которые на лету обновляют окно браузера с результатами вашего html кода
Да у Sublime тоже минимализм какой-то странный — все на клавиатурных комбинациях, для фанатов...
Здравствуйте, vsb, Вы писали:
vsb>Тебе надо, чтобы каждый прямоугольник шёл один за другим без разрывов. Самый простой способ это сделать это поставить display: inline-block и сделать так, чтобы в разметке между ними не было пробелов. С пробелами есть разные способы их убрать
Блин. Мне пока нигде не требовалось отображать слепленные элементы, поэтому я просто был не в курсе этих тонкостей. Я потому удивился, что вчера и сегодня днем как раз игрался с выравниванием контейнеров в онлайн-редакторе w3schools.com, и у меня там элементы, выводимые в режиме inline-block, получались слепленными вплотную, без промежутков, хотя определены они были каждый в своем div на отдельной строке. И я точно помню, что никаких трюков я там не использовал, даже float, и искренне считал, что так оно и надо. А сейчас попытался воспроизвести — получается только с промежутками.
Если высота элементов, которые нужно вывести без промежутков, одинакова, то проще всего, наверное, выводить в режиме table-cell. Оно вроде как даже не требует контейнера с режимом table, но я в разных браузерах не проверял.
ЕМ>То есть, каждый сам перебирает все, и ищет наименее глючный?
Похоже на то. Или пишут под себя — там все на JS или typescript, веб разработчикам не привыкать).
ЕМ>А есть где-нибудь список наиболее популярных/стабильных плагинов для статической верстки, чтобы не ходить по граблям самостоятельно?
Тут не подскажу, сам недавно занялся вебом.
ЕМ>Да у Sublime тоже минимализм какой-то странный — все на клавиатурных комбинациях, для фанатов...
Из редакторов есть еще Atom, говорят, неплохой. Возможно лучше зайдет, чем sublime.