Вёрстка макетов сайтов HTML, CSS
(2-й Курс, ИИИТ)
Под версткой сайта понимают определенную последовательность действий, заключающуюся в преобразовании созданных в одном из графических редакторов макетов в веб-страницы с заполнением последних иллюстрациями, анимацией и текстом, который создается в текстовом или WYSIWYG редакторах. Говоря простым языком, с помощью HTML верстки из графического макета формируются страницы сайта, которые способны распознаваться интернет – браузерами. Создание сайта - процесс увлекательный и довольно непростой.
Для того, чтобы создать сайт, для начала необходимо разобраться в тонкостях языка HTML, а также в принципе построения CSS – таблиц. Кроме того, для создания интересного для посетителей сайта, сайта с приятным интерфейсом и увлекательным наполнением, нужно очень большое терпение, много времени и профессиональных навыков. Именно поэтому истинно качественные сайты создаются командами, состоящими из дизайнера, программиста и верстальщика, ведь только при совместной работе специалистов можно добиться действительно потрясающего результата.
Сайт создается в несколько этапов. Все этапы верстки сайта важны, а потому следует предметно рассмотреть каждый из них.
Первым пунктом после принятия решения о создании сайта становится определение функциональной нагрузки, которая ляжет на этот сайт. В преобладающем большинстве случаев создаются сайты, которые преследуют коммерческие цели – распространение информации о компании, поиск клиентов, общение с партнерами и клиентами и так далее. Назначение сайта может быть самым разнообразным, но с основными целями необходимо разобраться именно на первом этапе, поскольку от этого будет зависеть и оформление сайта, и его структура, и его контент.
Следующим этапом создания сайта становится оформление макета в одном из графических редакторов. Чаще всего используют Photoshop, но это не принципиально. Одновременно с этим необходимо подготовить контент будущего сайта, определиться с ключевыми словами и словосочетаниями, которые составят семантическое ядро и будут способствовать оптимизации сайта под поисковые системы. Ключевые слова должны обязательно отражать суть той веб-страницы, на которой они будут размещаться, должны быть выражены в той форме, в которой ее будет искать простой человек и, в идеале, должны быть максимально популярны при одновременной мизерной конкуренции в поисковых системах.
После подготовки макета, создания семантического ядра и подготовки контента можно перейти к наиболее важному этапу в создании сайта - HTML верстке.
HTML верстка – это сложный и очень трудоемкий процесс. Суть его заключается в том, что при помощи специального кода задаются определенные параметры, благодаря которым и выдается указание браузеру – что и в каком месте необходимо расположить на определенной веб-странице.
Для того, чтобы создаваемый сайт был « привлекательным» для посетителей, поисковых систем, браузеров, необходимым условием является соответствие HTML верстки следующим критериям:
· стопроцентная валидность HTML - кода, то есть соответствие всем принятым стандартам
· стопроцентная кроссбраузерность, то есть способность веб - страницы абсолютно идентично отображаться в различных версиях всех браузеров
· качественная верстка безусловно должна обеспечивать максимальную скорость загрузки каждой веб - страницы.
От этих параметров будет зависеть корректность работы сайта, качественная индексация, быстрота загрузки сайта и так далее.
Существует несколько видов HTML верстки, основными из которых являются блочная верстка (верстка дивами) и табличная HTML верстка. Каждый из них имеет свои преимущества и недостатки, но наиболее прогрессивным считается именно блочный метод верстки. В ряде случаев, появляется необходимость в использовании обоих методов, а потому актуальность работы над проектом именно квалифицированных в данной области профессионалов очень высока, тем более, если речь идет о создании сайта высокой сложности.
Преимуществами блочной верстки являются:
· упрощение HTML-кода благодаря тому, что определенные свойства каждому блоку задаются в таблице стилей
· облегчается расположение различных элементов в определенных местах веб-страницы за счет накладывания слоев-блоков друг на друга
· более быстрая индексация поисковыми роботами страниц сайта, созданных при помощи блочной верстки, что достигается благодаря возможности располагать HTML - коды наиболее важных слоев впереди менее значимых
· более высокая скорость загрузки веб-страниц за счет относительно меньшего размера страницы, что влечет за собой уменьшение нагрузки на сервер и уменьшение интернет- трафика
· при необходимости сменить оформление всего сайта или конкретной страницы, использование блочной верстки значительно упрощает задание, ведь практически нет необходимости менять HTML-код
· код страницы с дивовой версткой имеет более приятный вид, поскольку отсутствуют многочисленные теги.
Блочная HTML верстка базируется на знании таблиц каскадных стилей – CSS. Табличный метод верстки имеет свои преимущества, например, имеется возможность с максимальной точностью расположить определенный элемент в нужном месте; любой созданный однажды элемент можно подгонять под разные макеты по мере необходимости. Поскольку размеры элементов задаются в пикселях или процентах, а также имеется возможность создавать довольно сложные конструкции, благодаря способности управлять колонками, дополнять дизайн декоративными рамками, тенями.
В то же время табличная верстка известна своими недостатками, как то:
· создать сложный сайт практически невозможно, так как нет возможности накладывать таблицы друг на друга
· в процессе создания сайта появляется огромное множество таблиц, что влечет за собой увеличение веса документов, увеличение шанса на допущение ошибки, уменьшение скорости загрузки страниц сайта, поскольку браузеры воспринимают сайт как единый объект и разрешают просмотр сайта только после полной загрузки на компьютере.
При создании сайта особое внимание необходимо уделить соответствию стандартам качества, поскольку, используя стандарт w3, периодически дополняемый и исправляемый, путем разрешения или запрещения определенных действий создаются все необходимые условия для того, чтобы продукт был универсальным, понимал все нужные команды и мог работать даже спустя длительное время. Новинкой в сфере HTML верстки стало обновление предыдущей и создание более современной версии HTML 4.01. Появление более современных методов приводит к упрощению создания сайтов, созданию более привлекательных интерфейсов, более удобной навигации. HTML-язык является уникальным и в то же время универсальным языком, который осуществляет связь между созданным сайтом и различными браузерами, а потому от того, насколько качественно сделана верстка сайта будет зависеть и эта связь.
Для успешного функционирования сайта необходимо следовать следующим условиям:
· длинный текст, состоящий из сложных предложений, сложно читается и воспринимается, поэтому желательно разбивать его на небольшие фрагменты
· обязательно необходимо выделять различными способами наиболее важные участки текста
· желательным условием является наличие на веб-страницах ярких, интересных, привлекающих внимание изображений.
Заканчивается процесс создания сайта заполнением страниц контентом, а также исправлением допущенных багов. Таким образом, HTML верстка - это сложный процесс, но благодаря ему существует возможность объединить текст, различные графические изображения, анимацию, привлекающие внимание логотипы и многое другое в единое целое и сделать частью веб - страниц и всего сайта.
Создание сайтов высокого качества – это прерогатива специалистов в данной области, создать же собственный, пусть небольшой и простой в оформлении сайт доступно каждому, стоит только захотеть.
Список литературы
1. Свободная энциклопедия - http://www. wikipedia. org/
2. Учебники по HTML, CSS - http://*****/
