Как-то меня попросили провести малый семинар в лицее, где я когда-то учился, по созданию веб-сайта. В процессе написания речи я подумал, что она может вылиться в вещество, что, вероятно, довольно полезен многим начинающим в области веб-дизайна, вёрстки веб-страниц и пр. Я не претендую для истину в первой инстанции и всё изложенное носит чисто личностный лицезрение для работу с дизайном и кодом. Сочинение даёт поверхностный воззрение на понятия и средства, которые, на мой лицезрение, могут стать неплохим стартом ради того, который соглашаться направляться дальше.
Условно процесс создания сайта (web-проекта) дозволительно разделить на 3 этапа:
Планирование
Дизайн
Разработка
Планирование
Данный остановка дозволительно разделить на маломальски подэтапов:
Существо идеи
Разработка структуры проекта
Проработка макета проекта
Существо идеи
На данном этапе нам нуждаться определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.
Разработка структуры проекта
Когда мы определились с темой проекта, подобрали вынужденный вещество, следующим этапом довольно разработка структуры проекта. Устройство проекта подразумевает около собой разделы сайта, в соответствии с которыми будет формироваться навигационное список и строиться дизайн проекта. Для данном этапе можно разбирать
Разработка сайта визитки под ключ вещество по темам и разделам.
Проработка макета проекта
После того, наравне мы определились со структурой проекта дозволительно составить макет проекта (схематично).
Для отрисовки наброска можно пользоваться бумагу и ручку, Photoshop, всякий второй редактор графики (прежде нередко использовали Adobe Fireworks). Гордо отметить, сколько данный остановка – это не отрисовка готового дизайн-макета, а только лишь схематичный эскиз, выполненный ради понимания того, как на сайте будут помещаться основные информационные блоки, графика и прочие элементы дизайна.
Основные элементы страницы
Зачастую основными элементами страницы являются: содержащий блок (dressing-gown, container), логотип, навигация, контент, футер (нижний колонтитул), свободное место (сообразно сути свободное место — это не элемент дизайна, только мысль, помня о котором около составлении макета страницы, наш проект не довольно казаться как нагромождение блоков).
Содержащий блок (контейнер)
Занятие контейнера на странице может исполнять прямо элемент main part сиречь же div. Ширина содержащего блока может быть резиновой (mutable), а может непременно фиксированной (definite).
Логотип
Текстовая alias графическая составляющая проекта и выделяющая его среди других. Логотип чаще только располагается в верхнем левом углу страницы тож же посередине (в зависимости через идеи, макета).
Навигация
Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель почасту располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).
Контент
Контент – это основная составляющая веб-страницы. Он занимает главенствующую занятие в дизайне страницы, следовательно занимает большее место, подкреплён, помимо текста, графикой.
Нижний колонтитул (footer)
Определенный элемент располагается внизу страницы и обычно содержит информацию о правообладателе, контактные и юридические данные, ссылки для основные разделы сайта (зачастую дублирует основную навигацию), ссылки на социальные сети, форму обратной связи и пр.
Фиксированный макет подразумевает под собой, что в независимости через разрешения экрана пользователя ваш сайт ввек будет интересовать одинаковую ширину.
Резиновый макет
«Резиновый» макет подразумевает, сколько страница сайта будет напружиться овладевать всё доступное ей место для экране пользователя, подстраиваясь под разрешение.
В данном контексте стоит уяснить такие понятия, вроде отзывчивый веб-дизайн (Responsive Cobweb Chart aka. RWD) и адаптивный веб-дизайн (Adaptive Snare Desing aka. AWD). Первое мысль укладывается в концепцию «резинового» и означает, который около изменении размера экрана ваш сайт подстраивается почти него, второе идея подразумевает, что присутствие разработке вы определяете основные разрешения (размеры экрана), почти которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не безраздельно, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Зачастую создаётся 3 макета почти разрешения iPhone (Android Phone), iPad (Android Bolus) и Desktop.