Бесплатный софт для дизайнера-верстальщика
Традиционно, для верстки и дизайна используется следующая связка программ. Программа для верстки — InDesign/QuarkXpress, векторный редактор — Illustrator/CorelDRAW, растровый редактор — Photoshop. Другие приложения в России менее популярные. Как вы знаете, все эти программы стоят десятки тысяч рублей. Но при желании, коммерческий софт можно заменить на полностью бесплатное ПО.
То есть можно будет эти программы использовать и в коммерческих целях.
Scribus
Скачать последнюю версию Scribus
Это программ для верстки. Последняя на сегодня версия Scribus 1.5.2. Есть интерфейс на русском языке, версии для Windows, Linux, Mac OS и ряд других ОС.
Разумеется, этой программе далеко до InDesign в плане функциональности и удобстве, но сверстать простые публикации можно без особых проблем. Поддержка всех типов шрифтов, русских переносов, изображений в CMYK присутствует.
Inkscape
Скачать последнюю версию Inkscape
Семантическая верстка. Что это и для чего это нужно?!
Это векторный редактор для работы с векторной графикой. Последняя на сегодня версия Inkscape 0.49.2. Есть интерфейс на русском языке, версии для Windows, Linux, Mac OS и ряд других ОС.
По сравнению с Corel, Inkscape работает медленнее, возможностей тоже меньше. Но продукт вполне рабочий и удобный. Умеет открывать формат CDR, но полноценная поддержка не обещана. Поддержка CMYK имеется.
GIMP
Скачать последнюю версию GIMP
Это растровый редактор для обработки фотографий и изображений . Последняя на сегодня версия GIMP 2.8.22. Готовится к выходу GIMP 2.10.0. Есть интерфейс на русском языке, версии для Windows, Linux, Mac OS.
Все основные задачи, решаемые верстальщиками в Photoshop, можно решать и в GIMP. Хотя ряд специфических задач пока невыполнимы.
Источник: dzen.ru
Краткий обзор основных программ верстки Текст научной статьи по специальности «Компьютерные и информационные науки»
Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Пашкова О.В., Ковалева В.В.
Профессиональный библиограф составит и оформит по ГОСТ список литературы для вашей работы
Решение практических задач по подготовке студентами-дизайнерами макета к печати
Верстка книг
Особенности выбора программного обеспечения для процесса обучения cтудентов-дизайнеров правилам верстки полиграфических материалов
Информационная поддержка системы непрерывного образования преподавателей колледжа
Исследование возможностей функции creep в различных программах верстки
i Не можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры?
Вы всегда можете отключить рекламу.
Текст научной работы на тему «Краткий обзор основных программ верстки»
Краткий обзор основных программ верстки
аспирантка кафедры АПП
Программы верстки, в отличие от графических редакторов, предназначены не для создания изображений (хотя и включают некоторые примитивные инструменты рисования), а для интегрирования текста и рисунков в соответствии с макетом, который может ограничиваться только модульной сеткой.
Вёрстка — что это такое?
Другой особенностью программ верстки является наличие в них возможности формирования так называемого аппарата издания: автоматической нумерации страниц (колонцифр), изменяющихся колонтитулов, сносок, перекрестных ссылок, таблиц индексов, оглавлений и т. д.
В среде программ верстки наблюдается относительная специализация: одни подходят для создания разного рода рекламной, журнальной, художественной продукции, другие — обеспечивают необходимыми средствами макетирование специальной технической и справочной литературы, книг и каталогов. В первых (PageMaker, QuarkXPress, InDesign) делается некоторый акцент на работе с графикой, тогда как во вторых (FrameMaker, Ventura Publisher, TeX) — на автоматизации оформления сложных структур текста, нередко насыщенного таблицами, формулами, ссылками.
Компания Adobe продвигает сразу несколько программ верстки. Первой программой в истории настольных издательских систем явилась знаменитая программа PageMaker (приобретенная у фирмы Aldus), которая уже с момента своего появления позволяла довольно
легко компоновать текст (со 2-й версии в ней появилась палитра стилей) и графику. В 1994 году PageMaker вместе с другими разработками Aldus перешел к Adobe, но, несмотря на появление новых версий, PageMaker стал все более уступать Quark в борьбе за профессиональный рынок. В итоге Adobe перевел PageMaker в разряд бизнес-приложений. Таким образом, предлагается использовать PageMaker, в основном, для решения задач оперативной офисной печати, а его преемником в нише профессиональных издательских систем становится InDesign. Adobe PageMaker также используется для цветоделения, т. е. вывода на фотонаборный аппарат.
Программа QuarkXPress фирмы Quark является признанным лидером в области подготовки изданий, отличающихся небольшим объемом и предельной насыщенностью цветными иллюстрациями (журналы, книги, акцидентная продукция). Программа, задуманная фирмой Quark в 1986 году, как текстовый процессор для Mac, вышла в 1987 году в качестве пакета верстки, который скоро отобрал у Aldus львиную долю издательского рынка в мире.
Версия для Windows вышла только в 1992 году. Появление QuarkXPress Passport с поддержкой многоязычных документов позволило XPress распространиться в Восточной Азии, Израиле, арабском мире, где ему практически не было альтернативы. XPress — профессиональный пакет верстки, на протяжении многих лет являющийся фактически отраслевым стандартом.
Исключительная легкость и гибкость, достигаемая во многом за счет большого числа подключаемых расширений. Этому же способствует и сложившаяся в издательской отрасли ориентированность процесса именно на этот пакет. Некоторые из возможностей 5-й версии программы расширили ее функциональность: внедрена часть функций, ранее доступных только в расширениях, улучшена поддержка длинных документов, слоев, управление направляющими, создание собственных таблиц, разработка web-документов. К сожалению, XPress не поддерживает прозрачность (поскольку не имеет доступа к технологии Adobe), однако существует стороннее расширение, позволяющее не только импортировать PSD-файлы, но даже работать с их слоями и каналами.
Компания Adobe самостоятельно разработала программу верстки InDesign, которая позиционируется в качестве основного конкурента программы QuarkXPress. Программа InDesign уже в момент своего появления на рынке издательских программ была агрессивно представлена как «убийца Кварка». Действительно, хотя списывать со счетов важнейшего конкурента еще очень рано, InDesign является программой нового поколения. Программа InDesign не только лучше Quark
интегрирована с такими приложениями как Photoshop и Illustrator, но и импортирует таблицы из Word и Excel, сохраняя форматирование. В InDesign реализованы также такие важные и востребованные средства как создание собственных сложных таблиц, задание теней и прозрачности объектов, улучшена поддержка форматов PDF и PSD. В отличие от Quark, InDesign имеет возможность многочисленных отмен.
В программу встроены функции сбора файлов для удаленной печати и проверка файлов на корректность (preflight). Для InDesign уже создано и продолжает создаваться большое число подключаемых модулей-плагинов. Явно в целях привлечения на свою сторону многочисленных пользователей PageMaker и Quark, в InDesign заявлена возможность открытия публикаций, созданных в этих программах. Общая идеология и взаимная интегрированность продуктов Adobe также сокращают время, необходимое для освоения этой программы. Относительным слабым местом InDesign можно назвать то, что, в отличие от Quark, для нормального функционирования требуются серьезные системные ресурсы.
Выдающимся программным приложением является программа FrameMaker, которая ориентирована на верстку книг огромного объема и сложности. FrameMaker — разработка FrameTechnology, приобретенная Adobe в 1995 году — относительно мало известна в России, однако на Западе используется более активно, чем Corel Ventura. При помощи FrameMaker производится значительная часть объемных документов в мире.
Его используют в книжных издательствах, крупнейших промышленных корпорациях и научных учреждениях. В России FrameMaker был до последнего времени мало распространен ввиду его кажущейся сложности и отсутствия документации и учебной литературы на русском языке. Отличительная черта FrameMaker — автоматизация верстки не только на основе оформления абзацев, но и на основе мощных шаблонов, что делает его привлекательным для повторяемых и серийных публикаций, стиль которых должен быть четко выдержан и, будучи создан один раз, не должен больше отнимать времени на ручную «доводку». Инструкции и руководства, энциклопедические и справочные издания, корпоративная документация — там, где необходима публикация сложных, повторяющихся материалов, создание дизайна на основе и для выявления собственно информационной составляющей -применение этой программы полностью обосновано.
Corel Ventura Publisher
У компании Corel в качестве приобретения оказалась замечательная для своего времени (эпохи DOS) программа Ventura, целый ряд положительных качеств которой, к сожалению, не получил достойного развития. Ventura, созданная вначале для GEM, а затем для Windows
и Macintosh, вскоре после своего возникновения практически догнала по распространенности PageMaker. Программа была создана компанией Ventura Software, затем принадлежала Xerox Desktop Software, пока в 1993 году ее не приобрели канадцы из Corel. Сильными сторонами Ventura являются такие возможности как широко настраиваемые таблицы с возможностью перетекания по полосам, автоматическая генерация и нумерация постраничных сносок, возможность назначения стиля не только абзацу, но и другим элементам дизайна; очень мощная настройка свойств абзаца, причем такие средства оформления как буквица, фон и рамка абзаца определяются именно через стиль; аналогично, подгонка размера изображения под размер бокса определяется как атрибут бокса; отступы внутри текстовых боксов могут быть независимыми, как и размеры колонок, а в межколонник могут быть автоматически помещены линейки; к определенному месту текста может быть привязана группа объектов. Среди других плюсов — встроенный редактор формул, возможность публикации баз данных, собственный текстовый процессор, система визуального контроля спуска полос и цветоделения. Слабыми сторонами этого пакета можно признать то, что он непрост для освоения и неустойчив в работе.
Несмотря на то, что TeX практически не используется для верстки иллюстраций или работы с цветом (он ориентирован на научно-технические тексты), в него заложены некоторые технологические идеи, которые позволят ему работать на любой платформе и системе, а хранение исходных файлов в текстовом формате еще более увеличивает совместимость — по крайней мере, на много лет вперед. Ядро ТеХ остается неизменным и распространяется бесплатно, но поддерживает расширение функций за счет подключаемых утилит. С помощью некоторых из них можно выполнять верстку по методу WYSIWYG, печатать в PDF или просматривать содержимое документов в интернет-браузерах. Ввиду узкой специализации программы, TeX используется в издательствах, выпускающих научно-техническую литературу, где ТеХ считается де-факто стандартом; его пользователи объединены в ассоциацию TeX User Group (TUG), а в России — CyrTUG.
1. О’Квин, Донни. Допечатная подготовка. Руководство дизайнера. Справочное руководство для дизайнеров и операторов печати. — Изд-во: Вильямс, 2001.
Источник: cyberleninka.ru
10 полезных инструментов для HTML-верстки
«Нетология» подобрала 10 полезных инструментов, которые пригодятся при верстке HTML: от текстовых редакторов до генераторов CSS.
Notepad++
Кроссплатформенный редактор, схожий с Notepad++, но обладающий множеством дополнительных функций. Подсвечивает синтаксис, автоматически сохраняет изменения в файлах, поддерживает 27 языков программирования, плагины и макросы на Python. Программа умеет запускать код без переключения в командную строку. Приложение доступно в версиях для Windows, OS X и Linux, лицензия стоит 70 долларов.
Firebug
Расширение для браузера Mozilla Firefox. Консоль и отладчик JavaScript, CSS и HTML, определяет часть кода, которая вызвала ошибку. Умеет редактировать код на стороне клиента в браузере.
PerfectPixel
Удобный бесплатный инструмент под Windows для сравнения разных версий файлов, в том числе макетов верстки. Различия отображаются в визуальной текстовой форме, из которой видно, что изменилось в проекте в новой версии.
WinLess
Бесплатная Windows-программа для работы с препроцессором LESS. Он представляет из себя надстройку над CSS с дополнительными динамическими свойствами. WinLess поможет конвертировать LESS в CSS. Программа автоматически сканирует выбранную папку и выбирает файлы, которые содержат нужный код.
CSS3 Generator
Минималистичный инструмент для генерации CSS-кода под множество предустановленных задач.
Ultimate CSS Gradient Generator
Сервис для генерации градиентов. Результат сразу отображается в боковой панели в виде кода.
Livetools Ui Parade
Подборка из четырех бесплатных генераторов элементов для макета: кнопок, форм, иконок и ленточек. Результат можно выгрузить в виде кода HTML или CSS.
павел федоров
курс для начинающих
Старт в программировании
Узнать больше
- Научитесь писать код за две недели
- Создайте свой первый проект — небольшую игру для индивидуального подсчёта продолжительности жизни и мотивации
- Сделайте шаг к новой профессии
Page Ruler
- Гид по верстке адаптивных писем
- Как работает Flexbox: объясняем на гифках
- 8 текстовых редакторов на все случаи жизни
- Бесплатный курс «Основы HTML и CSS»
- Программа обучения «HTML-верстка: с нуля до первого макета»
- Стать фронтенд-разработчиком с нуля — «Профессия front-end разработчик»
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Источник: netology.ru
Что такое CMS и как под них верстать
Представим, что вы сверстали проект, в котором есть несколько страниц, картинки, стили и скрипты. И тут контент-менеджер решил переписать тексты на главной странице, поменять пару изображений на более «продающие» и создать страницу с ценами.
Если он не знаком с HTML, то вряд ли сможет это сделать — он передаст задачу вам. Но что, если вы в отпуске, заболели или занимаетесь более важными задачами? Как раз для этого и существуют системы управления контентом, или CMS — чтобы менять контент на сайте, не залезая в код.
Почему важно уметь верстать под CMS?
Почти половина сайтов использует CMS, и с каждым годом их число растёт. Согласно отчёту Web Almanac, в 2021 году на CMS работали 45% сайтов — на 7% больше, чем в 2020 году.
По данным W3Techs, этот процент ещё выше. По статистике этого сервиса, в 2021 году на системах управления контентом работали 64,6% сайтов — на 9% больше по сравнению с 2020 годом. Поэтому важно уметь верстать под CMS — высока вероятность того, что ваша вёрстка тоже будет интегрирована в систему управления контентом.
Ещё одна причина — экономия времени разработчика. Без этого навыка доработка вёрстки после интеграции с CMS может занять столько же времени, сколько было потрачено на разработку.
Популярные системы управления контентом
Обо всех CMS рассказать невозможно — их слишком много. Есть платные тиражные системы, в их числе 1С-Битрикс и Canape CMS. Есть бесплатные, например, Drupal и WordPress. Бывают узкоспециализированные системы для создания сайтов электронной коммерции. К ним относят InSales и Zen Cart.
А ещё есть самописные CMS — созданные по заказу владельца сайта.
По статистике iTrack, самые популярные системы в России — WordPress и 1С-Битрикс.
WordPress, или Вордпресс — бесплатная платформа, которая задумывалась для создания личных блогов, но впоследствии стала использоваться и для сайтов компаний.
С помощью плагинов на WordPress можно создать интернет-магазин. Также можно добавить на сайт модальные окна, формы заявок или адаптивные слайдеры. Есть здесь и хостинг: можно бесплатно получить адрес в субдомене wordpress.com.
1С-Битрикс предназначен только для бизнеса. Он платный: стоимость «коробочного» решения интернет-магазина + CRM начинается от 99 тысяч рублей. Достоинство 1С-Битрикс — интеграция с сервисами 1С, которые многие компании используют для ведения бухгалтерии.
Что выбрать? CMS выбирают в зависимости от задач, масштаба проекта и бюджета. WordPress используют для личных блогов, информационных сайтов и небольших интернет-магазинов. Ещё его удобно использовать на старте компании, когда скорость запуска проекта важнее интеграции с 1C-бухгалтерией. Битрикс подходит для крупных проектов и бизнеса.
При этом в Европе сложно найти экспертов 1С-Битрикс, а WordPress-специалисты есть везде.
Особенности вёрстки под CMS
Ограничения и стили
Вёрстка для CMS отличается от обычной количеством ограничений. Например, в обычной вёрстке вы можете выбрать любой способ создания декоративных элементов: через псевдоэлемент или фоновое изображение. В CMS вынести декоративный элемент из CSS-файла не получится — только из HTML. Поэтому декоративные элементы при вёрстке для CMS можно вставлять только как контентное или фоновое изображение.
Ещё один важный момент касается организации стилей: для многих CMS нужно подключать только один CSS-файл на все страницы. Так при увеличении проекта стили из разных файлов не будут перезаписывать друг друга.
WYSIWYG-редактор
В CMS есть WYSIWYG-редактор, который внешне похож на редактор Word — в него выносят блоки с текстом. С его помощью заказчик может менять и форматировать текст, а в некоторых CMS ещё и добавлять изображения, например, в WordPress.
Так выглядит редактор в одной из версий WordPress:
Здесь заказчик может отформатировать текст: изменить размер и толщину шрифта, поменять цвет и высоту строки, добавить ссылки и заголовки.
Что это значит для верстальщика? Что в визуальный редактор будут добавлены различные элементы без классов. Например, в сделанной по макету разметке есть только текст:
Длинный параграф текста
Но заказчик добавит туда список и изображение, и в результате разметка станет такой:
Длинный параграф текста
- Пункт 1
- Пункт 2
Поэтому можно добавить единый класс «wysiwyg» и прописать стилизацию доступных в визуальном редакторе элементов:
Длинный параграф текста
.wysiwyg p < /* стили */ >.wysiwyg ul < /* стили */ >.wysiwyg li < /* стили */ >.wysiwyg img < /* стили */ >.wysiwyg h1 < /* стили */ >
Как минимум, здесь нужно прописать текстовые параметры: размер шрифта, межстрочное расстояние, цвет текста, шрифт. И добавить отступ снизу, чтобы новые элементы не прилипали к другим — расположенным над ними.
.wysiwyg *
Если в техническом задании написано, что в конкретный блок будет интегрирован WYSIWYG-редактор, то внутренним элементам нельзя задавать классы:
То есть можно добавить класс для обёртки, но все дочерние элементы должны быть без классов.
Как узнать, какие блоки будут интегрированы с визуальным редактором? Обычно это указано в техническом задании. Если этой информации нет, стоит обратиться к заказчику. Как правило, в редактор выносят текстовые блоки, например:
Повторяющийся контент
Повторяющийся контент принято выделять в отдельные секции. Особенно часто выделяют и , так как их принято делать одинаковыми на разных страницах.
При разметке шапки сайта нужно быть внимательным: легко ошибиться и добавить в этот блок что-то лишнее. Посмотрите на макет двух страниц, главной и каталога. Какую часть вы бы отнесли к ?
Только повторяющийся контент и будет частью :
Этот вариант правильный, так как выделена часть, которая повторяется на обеих страницах. Вас не должно запутать решение дизайнера визуально соединить шапку и следующую секцию.
Посмотрим примеры неправильного выделения.
Секция со слайдером уникальна для главной страницы, поэтому не должна находиться в .
Ещё один пример неверного выделения:
Секция с названием страницы присутствует не на каждой странице, поэтому не должна находиться в .
Фоновые изображения
У некоторых секций бывают фоновые изображения — их важно подготовить к интеграции с CMS. Для этого нужно поместить путь к файлу в HTML-разметку. Как это сделать? Использовать атрибут style :
Остальные стили для этого фонового изображения можно оставить в CSS:
.promo
Иконки и декоративные элементы
Обычно в техническом задании написано, какие иконки и декоративные элементы будут выносить в CMS. Если этой информации нет, лучше уточнить у руководителя проекта или заказчика.
Чаще всего выносят в CMS иконки социальных сетей, преимуществ и категорий. Это нужно, чтобы при добавлении нового элемента контент-менеджер мог сам загрузить изображения.
При интеграции вёрстки под WordPress, 1С-Битрикс и другие «коробочные» CMS такие иконки должны быть доступны из HTML, поэтому их не стоит верстать псевдоэлементами. Можно сделать через фоновое изображение и вынести в style ссылку на изображение:
Пуховики для длинных собак
Через контентное тоже верно:
Пуховики для длинных собак
И через добавление SVG тоже правильно:
Пуховики для длинных собак
Декоративные элементы обычно не выносят в CMS, но лучше опираться на конкретное техническое задание. Если в CMS их не вынесут, то можно верстать как угодно.
К декоративным элементам относят иконки поиска и корзины:
Иконку у заголовка:
Иконки в формах:
Иконки у пунктов меню:
Элементы, которые не вынесут в CMS, можно верстать любым подходящим способом.
Тестирование вёрстки на переполнение
CMS подразумевает, что контент будет постоянно меняться: заголовки станут короче или длиннее, изменятся тексты в кнопках, увеличится или уменьшится количество элементов списка и фильтра, одни параграфы заменят другие. Поэтому весь контент важно тестировать на переполнение.
Проверить вёрстку можно в браузере с помощью инструментов разработчика — во вкладке Elements. Например, в браузере Chrome можно протестировать так:
Нужно заранее проверить все элементы, чтобы впоследствии не вносить множество правок.
Итоги
Вёрстка под системы управления контентом становится базовым навыком фронтенд-разработчика. В этой статье мы рассмотрели лишь некоторые принципы подготовки вёрстки для CMS.
Источник: htmlacademy.ru