Автор:WebForMySelf
Как вы знаете, при создании сайтов этап верстки идет после этапа дизайна. В курсе по верстке сайта для начинающих мы с вами приблизимся к реальной разработке, и будем верстать html страницу из готовой картинки формата psd, созданной дизайнерами.
Курс по верстке сайта для начинающих рассчитан на новичков в сайтостроении и верстке, но так же будет полезен и тем, у кого уже есть знания по html, есть знания по css, но при верстке реальных макетов с нуля испытывает затруднения.
Макет, который мы будем верстать, имеет очень распространенную, двухколоночную структуру. Поэтому выполнив верстку данного макета и полностью разобравшись с ней, у вас больше не будет сложностей с версткой сайтов подобной структуры.
В курсе мы с вами пошагово выполним верстку: определимся с разметкой страницы, опишем ее с помощью html, далее назначим стили и оформим внешний вид страницы, протестируем и доработаем верстку.
Урок 1. Определение разметки
При верстке макета очень важно, как можно лучше продумать разметку страницы. Для этого необходимо внимательно исследовать макет. Если сайт включает несколько разновидностей страниц, то необходимо сразу просмотреть все макеты всех страниц, чтобы все, как можно лучше спроектировать и дальнейшая верстка страниц двигалась быстро и без «переделок». В данном начальном уроке курса мы с вами спроектируем разметку нашей страницы, продумаем и подготовим все необходимое для дальнейшей верстки.
Урок 2. Описание разметки
Во втором уроке курса мы перейдем непосредственно к описанию нашей разметки, с которой мы определились в предыдущем уроке, на html. Пошагово опишем каждый блок нашей разметки. Установим логотип, меню, опишем блок с баннером, блок с основным контентом, правую колонку и блок footer-а.
Урок 3. CSS шапки сайта
В прошлом уроке мы полостью написали html код нашей страницы. Но, как вы уже знаете, html отвечает только за разметку страницы, а за внешний вид и оформление отвечает css. И в данном уроке мы начнем описывать стили css и приводить внешний вид нашей страницы в соответствие с макетом. В уроке подключим css к странице, а так же назначим стили для шапки сайта: выстроим логотип и меню.
Урок 4. CSS области контента
В предыдущем уроке мы с вами описали стили шапки страницы. В данном уроке мы продолжим назначать стили и оформлять страницу. Назначим стили для области основного контента. Выстроим правую и левую колонки. Назначим стили для заголовков, абзацев. Так же поработаем с блоком footer-а. Соответственно у нас будут описаны стили для каждого блока нашей страницы, поэтому верстку страницы можно будет считать завершенной.
Урок 5. Доработка верстки
В предыдущих уроках курса мы с вами полностью закончили верстку нашей страницы. Но в дальнейшем, когда страница будет наполняться реальным контентом и перерастать в полноценный сайт, выяснятся некоторые мелкие недоработки. Их можно будет исправлять походу расширения сайта, но лучше все постараться учесть на этапе верстки, чтобы потом как можно меньше правок вносить в готовую страницу. В данном уроке мы с вами доработаем страницу, чтобы она могла дополняться и расширяться без неприятных последствий.
Было полезно? Ставь лайк
#версткасайтов #верстальщик #webразработки #html #css
