Этап 1. Планирование сайта
Создание сайта начинается с этапа планирования. Здесь мы определяем целевую аудиторию будущего сайта (его посетителей), задачи, которые он должен решать, и цели (для чего мы создаем сайт). На этапе планирования очень полезным может быть изучение сайтов схожих тематик или сайтов конкурентов.
Определившись с целями сайта, его аудиторией и задачей, а также посмотрев сайты конкурентов, мы можем приступить к планированию контента. Определить, чем мы будем наполнять сайт, какие должны быть у сайта разделы, какие должны быть у сайта функциональные блоки. И после того, как мы все это определили, можем переходить к следующему этапу — этапу дизайна.
Этап 2. Дизайн сайта
На этапе дизайна мы в графической программе прорисовываем внешний вид нашего сайта. Располагаем и оформляем функциональные блоки, размещаем разделы сайта, продумываем цвета и шрифты — для того чтобы создать хорошее впечатление и положительные эмоции у посетителей будущего сайта. Тут кстати можно заказать
создание сайтов в Краснодаре недорого.
Имейте в виду, что веб-дизайн — это огромная отдельная область.
Чтобы стать более-менее хорошим веб-дизайнером, нужно потратить некоторое время на изучение программы Photoshop (или другой графической программы, но чаще всего дизайн создается в Photoshop). Затем необходимо изучить композицию (компоновку различных изображений), сочетания цветов, веб-типографику. Затем — технический дизайн (отрисовка предметов), векторную графику (создание иконок) и узнать еще много других интересных вещей.
По сути, чтобы быть хорошим веб-дизайнером, нужно иметь специфическое внутреннее мироощущение (обладать вкусом, стилем, знать колористику, юзабилити) и, конечно, нужно много-много практиковаться.
Этап 3. Верстка сайта
Верстка сайта — это процесс создания веб-страницы из макета (картинки), получившегося на этапе дизайна. Другими словами, верстка — это процесс перевода изображения в веб-страницу с применением HTML & CSS.
Рассмотрим процесс обучения верстальщика.
Верстальщику, как и веб-дизайнеру, тоже нужно знать основы Photoshop — чтобы нарезать макет и корректировать некоторые изображения по размеру, цвету, контрасту и т.д.
Первым делом, чтобы стать верстальщиком, нужно изучить язык HTML — основу основ. Каждый, кто как-либо связан с веб-разработкой, сайтами или блогами, должен знать этот язык разметки.
Язык разметки HTML.
Что это такое?
HTML (язык разметки) состоит из различных команд. На профессиональном жаргоне вебмастеров они называются «тегами». Всего тегов около 100, но наиболее часто (практически постоянно) приходится работать примерно с 30-ю, поэтому в процессе использования они запоминаются очень быстро. Про остальные тоже необходимо знать, чтобы быть в курсе всех возможностей HTML и при необходимости, возможно, с помощью справочников, воспользоваться ими.
Принцип верстки страниц с помощью HTML в следующем. В каком-нибудь простом текстовом редакторе либо в обычном блокноте пишется статья. Затем части этой статьи разделяются на блоки с помощью тегов.
Допустим, у вас есть строка, которую вы хотите сделать заголовком. И тогда в начале этой строки вам нужно вставить тег заголовка h1. В конце же — вставить закрывающий тег заголовка h1.
Чтобы сделать из части текста абзац, нужно в начале части текста вставить тег p, а в конце — p. Если хотите сделать текст жирным, используйте теги strong. Получившийся документ нужно сохранить в файл с расширением .html.
Откройте этот файл с помощью браузера и — вуаля! — у вас уже готова страница сайта.
Таким образом, с помощью тегов веб-верстальщик создаёт структуру контента HTML-страницы, размечает, где должны быть заголовки, абзацы, ссылки, таблицы, изображения, видео, формы и многое другое.
С помощью тегов также создаётся и структура страницы сайта, размечается, где будет расположена шапка сайта, основной контент, сайдбар и подвал.
Оформление страницы
CSS
CSS — второй основной инструмент верстальщика. Язык HTML и CSS изучают совместно. Они неразлучны, как день и ночь, и составляют в современной веб-вёрстке единое целое.
Рассмотрим CSS.
CSS отвечает за внешний вид страницы. И, если с помощью HTML мы задавали структуру страницы, делали ее разметку, то, используя CSS, мы задаем визуальное оформление страницы. Именно в CSS мы задаем размеры блоков, указываем шрифт, размер шрифта, цвет текста, фоновые цвета и изображения и т.д.
Например, с помощью CSS вы можете изменять цвет, фон, шрифт, ширину, высоту, положение, форму и многое другое у любого элемента страницы.
Помимо изменения тегов контента (заголовков, абзацев, таблиц и т.д.), с помощью CSS форматируется так называемая модульная сетка сайта, благодаря которой создаётся структура сайта и отмечается, где будет шапка, контент, сайдбар и подвал сайта.
Если HTML в качестве основного понятия оперирует тегами, то CSS оперирует понятием CSS-свойства, которые назначаются тегам. Схема назначения CSS-свойства тегу выглядит следующим образом: тег { css-свойство: значение; }, т.е. в CSS-коде мы сперва задаём имя тега, а затем для него мы указываем нужные свойства с нужными значениями.
Современное создание сайтов не обходится без адаптивной вёрстки — когда один и тот же сайт хорошо смотрится и на экранах больших мониторов компьютеров, и на маленьких экранах смартфонов. В адаптивной вёрстке нам тоже помогает CSS, благодаря имеющимся у него медиазапросам.
Например, можно первым делом сверстать сайт на популярное разрешение монитора, а после, используя медиазапросы, указать, чтобы сайт подстраивался под мобильные устройства.
Некоторые сначала верстают под малое расширение экрана, а затем подстраивают вёрстку под большие экраны.
