Что такое компьютерная верстка
Суть вёрстки сайта заключается в переводе полученного от дизайнера макета в формат, понятный компьютеру. Этот процесс позволяет «оживить» изображения, цвета и шрифты, перевести их в цифровой код и интегрировать в систему управления контентом, иначе — CMS или движок. Верстают интернет-ресурс, используя разметку и программный код, написанные на языках CSS и HTML. С профессиональной точки зрения, вёрстка — нечто среднее между программированием и дизайном.
История
Начало компьютерной вёрстке было положено в 1985 году, когда вышла созданная корпорацией Aldus программа PageMaker [1] и персональный лазерный принтер LaserWriter компании Apple Computer. Возможность создания WYSIWYG макетов страницы на экране монитора с последующей распечаткой на принтере была новой как для компьютерной индустрии, так и для типографского дела. Термин «desktop publishing» был предложен Полом Брейнердом, основателем Aldus Corporation.
Ранние системы компьютерной верстки на сегодняшний день выглядят весьма примитивными. Связка PageMaker-LaserWriter-Macintosh 512K была не совсем стабильной, часто зависала, использовался чёрно-белый экран, невозможно было контролировать кернинг, трекинг и другие важные для вёрстки параметры. Но в то время отзывы о системе были одобрительными.
Технологии, разработанные Adobe Systems, заложили фундамент для дальнейшего развития компьютерной вёрстки. Принтеры LaserWriter и LaserWriter Plus содержали во встроенной ROM-памяти масштабируемые шрифты от Adobe.
В 1986 году вышла программа Ventura Publisher для компьютеров под ОС MS-DOS. В то время как PageMaker имитировала процесс создания макета страницы вручную, Ventura Publisher автоматизировала этот процесс путем использования тэгов (tags) и таблиц стилей (style sheet), что позволило автоматизировать процесс создания индексов и элементов макета страницы. Таким образом Ventura Publisher была удобнее PageMaker при создании макетов книг и многостраничных документов.
В это время компьютерная верстка воспринималась как непригодная для широкого использования, во многом благодаря пользователям, которые использовали плохо организованные макеты. Тем не менее, профессиональное использование технологий компьютерной вёрстки позволяло уже тогда получить хорошие результаты. Например, журнал Info magazine в конце 1986 года стал первым полноцветным изданием, подготовленным методами компьютерной вёрстки.
Улучшение и расширение инструментов для работы с текстом и графикой для компьютеров привлекло внимание профессионального печатного сообщества к системам компьютерной вёрстки. Переломным моментом стало появление в 1990-х годах программы QuarkXPress, а также расширение базы компьютерных шрифтов. QuarkXPress стала доминирующей системой на рынке. В начале 2000-х набрала популярность программа Adobe InDesign. Это произошло благодаря ее большим возможностям, а также интеграции с другими программами от Adobe, которые были доминирующими в сфере компьютерного дизайна, обработки изображений и фотографий, аудио- и видеоредактирования.
Блочная верстка
Самый актуальный вид верстки сайтов – блочный. Он основан на теге , с помощью которого создаются контейнеры, включающие в себя весь контент страницы или отдельного блока. Например, мы можем разделить сайт на несколько блоков: первый экран, о компании, контакты – для каждого блока будет отведен свой тег .
Внутри тега уже находятся другие теги, отвечающие за те или иные элементы. Вот пример небольшого блока:
Прописав его в HTML-документе, получим следующую страницу:
При таком подходе язык разметки HTML всегда взаимодействует с CSS-стилями, которые преобразуют обычную страницу в стильное дизайнерское решение: добавляются цвета, устанавливаются отступы для элементов, задается базовая анимация и многое другое.
Например, у нас есть тег h1, и мы хотим сделать его красным – для этого в стилях прописывается следующий код:
Заголовок нашей страницы примет следующий вид:
HTML и CSS обычно хранят в разных файлах – такой подход позволяет быстро вносить изменения и не путаться в больших проектах.
Также стоит сказать, что блочная верстка позволяет легко создать адаптивный сайт, что в наше время является обязательным требованием для каждого проекта. Такая разработка позволяет не только создавать сайты для телефонов и планшетов, но и обеспечивает попадание сайта в топ выдачи поисковых систем.
Вот так выглядит типичная схема блочной верстки:
Валидность HTML-верстки
Валидность HTML-верстки — это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа — один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type.
Зачастую, заказчики не уделяют должного внимания такому этапу разработки, их больше интересуют вопросы о CMS сайта и что это такое , согласование дизайна и последующая корректная работа сайта.
Что такое верстка сайта
Все те, кто в той или иной мере касались веб-разработки, вероятно знают, что такое верстка сайта и как происходит данный процесс. Но для тех, кто только начинает свой путь разработчика или просто познаёт мир интернет-технологий мы доступно разъясним все тонкости.
Верстка сайта – это описание программным кодом визуальной части Вашего сайта. Проще говоря – это соединение и расположение всех составных элементов сайта на странице документа. Такими составными элементами являются: текст с заголовками, различные изображения и таблицы.
От того, насколько ответственно и качественно верстальщик выполнит свою работу, будет зависеть многое. Например, если Вы заказываете разработку сайта-визитки , то насколько готовый ресурс будет положительно восприниматься пользователями, покажет профессиональность разработчика. Его работа направлена так же на то, насколько быстрой будет скорость загрузки сайта и будет ли готовый сайт соответствовать требованиям той или иной поисковой системы.
Виды верстки
Существует два вида верстки – блочная и табличная.
Вёрстка с помощью слоёв
Слои представляют собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пикселя. Скрипты позволяют изменять параметры слоя динамически. Это дает возможность создавать на странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и прочее. До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторых проблем [1] , уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов. [2]
Таблицы широко применяются в самых разных случаях: с их помощью делают рамки, задают модульные сетки, создают цветной фон, выравнивают элементы и т. п.
Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.
Вёрстка с помощью таблиц
Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. [3] При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать также и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.
Проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.
«Распорки»
При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.
Подобные техники не только усложняют разработку универсальных веб-страниц, но и ведут к снижению скорости загрузки документа. Браузеру в этом случае приходится загружать элементы, которые не видны пользователю и, по сути, ему не нужны, но они входят в общий трафик сайта.
Что включает в себя верстка сайта
Основная задача верстальщика – переместить прототип в код, который будет в точности отображать проделанную работу дизайнера. Верстку можно сравнить с издательской деятельностью – книги, журналы и газеты содержат структурированную информацию, в них текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Выделяется два типа разработчиков сайтов:
- Backend– занимается разработкой внутренней части сайта, программирует основной функционал;
- Frontend – занимается внешней частью сайта, настраивает отображение всех элементов, добавляет к ним анимацию и так далее.
Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.
HTML позволяет показывать страницы и контент, размещенный на них, в заданном порядке. Работа с языком разметки заключается в описании тегов. Вот основные из них:
- – главный тег, в котором содержатся другие теги;
- – включает в себя различные SEO-элементы, код JavaScript и многое другое;
- – внутри этих тегов находится все содержимое страницы;
- – используется для обозначения заголовка первого уровня;
- – используется для обозначения заголовка второго уровня, после которого следуют заголовки h3, h4, h5, h6;
- – здесь прописывается текстовое описание, например заголовок статьи;
- – придает тексту жирность;
- – текст, написанный внутри этого тега, отрображается курсивом;
- – обозначает маркированный список;
- – обозначает нумерованный список;
- – указывает на пункты внутри списка;
- – позволяет добавить к тексту ссылку на другую страницу, номер телефона, почту или иной элемент с помощью атрибута href;
– используется, чтобы добавить картинку на сайт с компьютера либо из интернета;
- — тег для создания таблицы.
Теги работают следующим образом:
В таком случае на странице будет отображен заголовок h1 со стандартным шрифтом, размером и начертанием.
Аналогичным образом прописываются другие теги, в результате чего получается готовый сайт.
Что нужно для верстки сайтов
Следующий вопрос, который может возникнуть, что нужно для верстки сайтов и с помощью чего это сделать. Для того, чтобы сверстать самую обыкновенную интернет-страницу Вам может понадобиться только блокнот. Но если Вы заглядываетесь на более масштабные проекты, то здесь уже не обойтись без специализированных html-редакторов.
Сегодня мы убедились в том, что при создании сайта, верстке стоит уделять достаточно внимания и находить для этого грамотных специалистов. Если изложенной информации Вам было недостаточно, советуем изучить, что такое онлайн курсы и пройти их для получения новых знаний. Становясь хорошим специалистом, Вы сможете сотрудничать с любыми заказчиками.
Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается. Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.
О том, что включает в себя верстка сайта и какие этапы проходит профессиональный верстальщик, поговорим в сегодняшней статье.
Адаптивная верстка сайта: что это такое
В наше время всё больше и больше отдаётся предпочтение мобильным телефонам и устройствам с широкоформатными экранами, поэтому для профессионала важно знать, что такое адаптивная верстка сайта и насколько она важна.
Многие сталкиваются с такой проблемой, когда заходишь на какой-либо ресурс с мобильного устройства дизайн и функционал сайта превращается в ужасно неудобный для использования. Если клиенту нужно заказать СЕО-продвижение сайтов , а он сталкивается с такой проблемой, естественно, он сразу захочет закрыть такой сайт и перейти на более удобную площадку. Всё это являет собой большую проблему, ведь посетители – это самый ценный ресурс, для которого и создается сам сайт.
Суть адаптивной верстки состоит в том, что при создании сайта используются современные технологии, которые позволяют создать все элементы «плавающими». Проще говоря, такие элементы будут самостоятельно менять свой размер, и располагаться на странице в зависимости от того устройства, на котором будет просматриваться страница.
Содержание
Табличная верстка
Первый вид верстки, с которого началась эпоха сайтов. Именно через таблицы создавались простые веб-ресурсы в далеком 2000-м году. При табличной верстке страница поделена на соседствующие ячейки, что напоминает стандартную работу с таблицами в Excel.
Минус такого подхода состоял в том, что приходилось создавать дополнительные таблицы, которые впоследствии могли остаться пустыми. Например, если требовалось разместить изображение и зафиксировать его положение, то необходимо было создать новую строку и разделить ее на несколько столбцов. Только один из них бы содержал изображение, а другие служили бы для него фиксаторами.
Таким образом, страница могла содержать большое количество пустых таблиц, из-за которых сайт становился «тяжелым». Мало того, что такой сайт долго грузится, на него еще не любят заходить поисковые роботы для индексации страниц.
Верстка сайта: с чего начать
Для того чтобы разобраться с чего начать верстку сайта, рассмотрим её виды. Сегодня мы поговорим только об основных видах, обычно их выделяют три – это табличная, блочная и адаптивная верстки. О последней мы поговорим чуть позже.
Суть табличной верстки заключается в том, что структура сайта представляется в виде таблиц, в свою очередь ячейки в таблице – это каждый элемент страницы. С одной стороны она считается простым вариантом верстки и довольно широко распространена в кругу верстальщиков. Но так же, являет собой объёмную и сложную структуру, в случае чего для изменения, которой понадобится много времени.
Большинство профессионалов уже перешли и продолжают переходить на более гибкую верстку, то есть блочную. Её суть заключается в создании сайта на основе блоков, или как их ещё называют тегов - «div». Они содержат в себе текст, изображения и т.д. Главный их плюс и особенность в том, что при верстке они могут накладываться друг на друга.
Инструменты для верстки сайта
Верстальщик – это не простой разработчик, который работает с блокнотом и пишет в нем теги да атрибуты.
Если говорить об инструментах разработчика, то чаще всего используются:
- Notepad++ – простой редактор кода;
- SublimeText – наиболее используемый редактор;
- Webstorm – самый мощный редактор.
Последняя программа для верстки сайтов платная, однако для обучения можно получить ее студенческую версию даром и с полным функционалом.
Преимущества слоёв
Свойства слоя удобно задавать и настраивать через стили. Возможности CSS расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код.
Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.
Слои можно накладывать друг на друга, что упрощает размещение элементов на веб-странице и предоставляет больше возможностей при верстке.
Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задается двумя координатами относительно любого угла окна браузера, родительского элемента или документа.
Слои по сравнению с таблицами отображаются быстрее. [источник не указан 720 дней] Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их подгрузки.
Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах («кросс-браузерность»). Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей.
Примечания
- ↑Adams, PeterPageMaker Past, Present, and Future (англ.) (16 March 2004). Архивировано из первоисточника 24 марта 2012.Проверено 14 августа 2009.
Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена.
Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники.
Эта отметка установлена 13 мая 2011.
Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.
По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). Например, курсивный текст можно получить как с помощью тега , так и с помощью тега . В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом. Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение. Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц. Если придерживаться логической разметки, то можно использовать один и тот же вариант вёрстки для экрана, печати и КПК, регулируя внешний вид с помощью отдельных файлов стилей.
Кто верстает сайты
Профессия верстальщика (специалиста по вёрстке) известна давно. Вот только ранее она заключалась в правильном расположении текстовых блоков и иллюстраций на страницах книг, газет и журналов. На сегодняшний день верстальщики работают в специальных программах, облегчающих формирование компьютерных страниц на основе готового макета.
Современный специалист по вёрстке ближе к программистам, нежели к дизайнерам, что было ещё не так давно. Перечень его навыков не особенно длинный, но удивительно ёмкий. Он включает:
- Знание CSS и HTML. Это минимальная база, которая постоянно расширяется. Уже сейчас во многих вакансиях от специалиста требуется опыт в использовании PHP, JavaScript, React, CSS3.
- Понимание основ дизайна, чтобы переносить рисованные макеты в Сеть без утраты красоты, чёткости, стиля.
- Умение работать с изображениями, в идеале – знание соответствующих программ (Photoshop, Illustrator , Figma, Sketch).
- Знание наиболее распространённых CMS, понимание особенностей вёрстки под эти движки.
К перечню навыков стоит добавить и определённые черты характера. Вёрстка требует педантичности, внимательности, терпения и способности долго и усидчиво работать.
Выбирая верстальщика, ориентируйтесь на его опыт и портфолио. Высшие учебные заведения
не готовят специалистов по вёрстке сайтов, так что спрашивать диплом нет смысла. Лучшим
же решением будет пригласить для разработки сайта специализированную компанию, в которой
точно есть опытные и квалифицированные специалисты всех нужных направлений.
Компьютерная вёрстка (англ. Desktop publishing — «настольное издательство», сокращённо DTP) — использование персонального компьютера и специального программного обеспечения для создания макета с целью последующей печати в типографии или на принтере.
Пользователь создаёт собственный макет страницы, который может содержать текст, рисунки, фотографии и другие иллюстративные элементы. В зависимости от требуемого количества и качества материалов печать может выполняться на принтере, ризографе или в специализированных типографиях.
Примерами программного обеспечения, специализирующегося на компьютерной вёрстке, являются программы QuarkXPress, Adobe InDesign, Scribus, Microsoft Publisher, Apple Pages.
Под термином компьютерная вёрстка понимают не только создание макета страницы (page layout) для книг и журналов. Этот термин также используется для создания макетов рекламных объявлений, упаковки, дизайна выставочных стендов и т. п.
Верстальщик
Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:
- создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.
- оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS
При этом он часто пользуется следующим ПО:
-
или редактор HTML для написания и редактирования кода для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера
А также иногда прибегает к помощи:
-
редакторов, в которых пользователь располагает все элементы, которые должны были быть получены с помощью HTML, используя графический интерфейс пользователя. После чего программа преобразует визуальное представление в HTML код. В данном случае автору не обязательно обладать исчерпывающим знанием HTML.
- программы автоматической верстки сайтов, которые извлекают слои с изображениями и текстом из дизайн-макета, созданного в графическом редакторе Adobe Photoshop и формируют из этих слоев HTML код. Таким образом создается базовый каркас веб страницы, готовый к последующей доработке.
Использование WYSIWYG редакторов и программ автоматической верстки часто осуждается [4] [5] из-за низкого качества получаемого кода. Тем не менее, зачастую для пользователей их использование удобнее ручного кодирования, а также не требуют глубокого знания HTML, и поэтому широко используются.
Когда верстка считается правильной
Существует множество правил, которых следует придерживаться во время верстки. Нарушение некоторых из них может привести к плохой оптимизации сайта.
- Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
- Весь написанный код должен быть чистым и легко читаемым.
- Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
- Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
- Сайт должен работать одинаково во всех браузерах.
- Используйте заголовки H1-H6, а также знайте, что H1 – единственный заголовок на одной странице. Важно соблюдать это правило, иначе могут появиться проблемы с поисковыми системами.
- Также для поисковиков важно, чтобы были заполнены атрибуты , и .
- Не используйте «тяжелые» изображения, чтобы избежать длительной загрузки сайта.
- Сайт должен быть адаптирован для мобильных устройств.
Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.
Типы вёрстки
Специалисты выделяют табличную, блочную и адаптивную вёрстки.
Табличный тип — устаревший. Состоит он в том, что сайт представляется в виде таблиц, а структурные элементы (кнопки, текстовые блоки, изображения) распределяются по ячейкам каждой таблицы. При таком способе очень сложно внести в код какие-либо изменения. Это требует массы времени и сил, поскольку при малейшей ошибке «съезжает» весь сайт.
При блочном типе ресурс создаётся на основе блоков, ограниченных тегами. Блоки могут быть с текстом, изображением, видео или чем-то ещё. Важное преимущество этого типа — модули могут наползать один на другой, что облегчает и вёрстку, и внесение каких-либо изменений впоследствии.
Адаптивная вёрстка — дитя нового времени. Она возникла при появлении смартфонов. При таком подходе все элементы сайта могут самостоятельно менять положение на странице и свой размер. Сейчас, когда более 70% пользователей заходят в Сеть только с мобильных устройств, этот тип вёрстки незаменим.
Добавим, что любой тип вёрстки должен быть кроссбраузерным. Это значит, что интернет-страница будет выглядеть одинаково, вне зависимости от того, какой браузер использует посетитель web-ресурса.
Валидная верстка
Валидная верстка – это верстка, соответствующая стандарту W3C и означающая корректное отображение сайта на всех пользовательских устройствах. Такой подход обеспечивается строгим соблюдением правил построения кода, его оптимизации и минимизации. В результате это позволяет выводить сайт на более высокий уровень – его репутация в поисковиках сильно улучшается.
При валидной верстке элементы HTML-кода должны находиться строго на своих местах, в начале обязательно прописывается тег , а также , , .
Как проверить верстку
После того как сайт будет сверстан, потребуется проверить его работоспособность. Базовое тестирование включает в себя проверку адаптивности на всех устройствах.
Более обширную информацию можно получить на сервисах Jigsaw.W3 и Validator.W3.
Если требуется узнать, соответствует ли верстка макету пиксель в пиксель, то для этого подойдет сервис WellDoneCode.
Сервис Page Ruler нужен как линейка, чтобы в пикселях измерить сверстанные блоки и прочие элементы страниц.
Window Resizer – расширение для Google Chrome, позволяющее узнать, насколько хорошо страница адаптирована под разные устройства.
Читайте также: