3 Разработка дизайна и оформления для веб-страницы

Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна. В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей.

Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств (см. юзабилити — «удобство использования»), а также кроссплатформенность (в данном случае — т. н. кросс-браузерность) вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в Интернете (интернет-маркетинг), то есть продвижение и реклама созданного ресурса, поисковая оптимизация.

Уникальный дизайн стоит дороже, но и предполагает отрисовку с нуля, полностью уникальную разработку под конкретный заказ. В зависимости от профессионализма и/или политики компании веб-дизайнер либо разрабатывает идею и концепцию дизайна полностью самостоятельно, либо получает ряд требований (цвет, стиль и т. п.), ожиданий и идей от заказчика или креативного директора (арт-директора) и старается держаться этого направления при разработке макета. Большинство заказчиков ошибочно отождествляют веб-дизайнера и веб-мастера, поручая ему и публикацию сайта.

4 Верстка макета веб-страницы

Вёрстка веб-страниц — процесс формирования (вёрстка) веб-страниц в текстовом либо WYSIWYG-редакторе, следующий этап после веб-дизайна или прототипирования; а также результат этого процесса, то есть собственно веб-страницы.

Первым делом, необходимо было определить границы сайта. Макет должен быть пригоден для адаптивной верстки, а при просмотре на мониторах Full HD полезное пространство сайта не должно растягиваться на всю ширину экрана, дабы сохранить читабельность и адекватное восприятие небольших изображений. Таким образом, при ширине монитора больше 1280 пикселей, сайт будет сохранять фиксированную ширину полезного пространства, а при меньших разрешениях, полезное пространство будет пропорционально уменьшаться. А также следует учитывать кроссбраузерность сайта – близкое к исходному дизайнерскому и функциональному виду отображение параметров страниц при использовании разных браузеров и их различных версий и модификаций.

Следующим шагом является распределение блоков. В данном случае я выбрал блочную верстку. При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили. Совершенно не значит, что применяется только один этот тег, ведь нужно и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв, тег <div> является кирпичиком вёрстки, её базовым фундаментом.

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Верхним блоком будет панель меню для навигации по сайту, здесь же будет размещаться логотип компании, в панели меню будут размещены 4 кнопки перехода на веб-страницу компании, предоставляющие информацию непосредственно о самой компании, веб-страницу, предоставляющую информацию о контактах компании, и на страницу авторизации для зарегистрированных пользователей и регистрации для новых пользователей данным веб-сайтом.

Следующим блоком я решил расположить небольшой слайдер с сопутствующими блоками изображений для придания веб-сайту динамичности,

следом за ним располагается главный блок, в котором и будет отображаться вся необходимая для компании информация. Нижним блоком будет подвал сайта.

Все веб­–страницы в рамках данного проекта имеют аналогичное строение и дизайн, за исключением страниц с авторизацией и регистрацией.

Эти страницы вдобавок имеют формы, установленные с помощью тега <form>.

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Для отправки формы на сервер используется кнопка «Submit», того же можно добиться, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом «action» тега<form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом «name» тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию.

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.