Подписка
Email
Fb
RSS
Twitter
Email

Верстка сайта. Начинаем курс

верстка сайтаПриветствую Вас, уважаемые посетители DenWeb.Ru! Данным постом я хочу продолжить серию уроков под названием «Путь веб-мастера». Для того, чтобы все было понятно в последующих уроках, нужно сначала освоить предыдущие, а именно — уроки html и уроки css. После изучения html и css нам нужно как-то использовать их в создании сайта. Поэтому следующим нашим шагом будет верстка сайта.

Что такое верстка сайта? Верстка сайта — это процесс создания веб-страницы по готовому макету. Обычно в качестве макета используется графический шаблон, созданный в программе Adobe Photoshop, он называется PSD (PhotoShop Document) шаблоном. Процесс верстки включает в себя создание кода страницы при помощи понятного браузерам языка разметки гипертекста (html), и оформление её с помощью каскадных таблиц стилей (CSS).
Существует два способа верстки страниц:

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

Мы будем применять как раз таки блочную верстку. Блоком можно назвать все видимые элементы, которые задают структуру документа.

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

Но при этом не нужно злоупотреблять данным тегом. Списки оформляются тегом <ul> или <ol>, таблицы — <table>, заголовки <h1…h6> и так далее. Здесь уже речь идет о «семантической верстке».

Семантика — это тема отдельной статьи, пока лишь скажу, что семантическая верстка — это верстка при которой все элементы html кода несут структурный смысл. То есть не нужно, к примеру, заключать заголовки в тег <div> и оформлять их с помощью css. Для заголовков в html  есть специальный тег <h1…h6>, его и нужно использовать.

Вернемся снова к нашим блокам. Любой блочный элемент состоит из набора накладываемых друг на друга свойств, об этом я рассказывал в уроке — блочная модель.

При блочной верстке практически всегда применяется позиционирование, эту тем можете повторить в уроке — css позиционирование.

Если что-то пока кажется не совсем понятным — не расстраивайтесь, все будет подробнее объяснено на практике, в видео уроках.
И в конце хочу немного забежать вперед и наметить план будущих уроков.

В ближайших уроках мы с Вами на практическом примере сверстаем html макет сайта из PSD исходника. В процессе верстки я постараюсь объяснить различные приемы верстки, покажу как исправлять ошибки.

После того как макет будет сверстан мы будем кодировать его в WordPress шаблон. Это будет как бы небольшой мини-курс по созданию шаблонов для WordPress. В процессе нужно будет так же изучить основы PHP, так как движок WordPress написан именно на нем. Следовательно будут и уроки по PHP.

Так что впереди много интересной работы, до встречи!

Вы можете оставить комментарий.

13 комментариев к записи “Верстка сайта. Начинаем курс”

  1. Однозначно подписываюсь=) Удобнее следить по мере развития, чем читать у кого-то старые уроки. Буду с нетерпением ждать уроков.

  2. Ок спасибо за статью буду учится верстать сейчас без знаний нечего не сможеш сделать. А для получение новых навыков они очень необходимы.

  3.    Лучше учиться на чужих ошибках, чем на своих. Просьба: побольше примеров и поменьше теории.

  4. Очень интересно. подписываюсь на обновления, буду следить за новыми уроками...

  5. Татьяна:

    Здравствуйте, статья очень интересная, но скажите пожалуйста, когда будут уроки по кодированию шаблона под WordPress? Или если они уже есть,помогите найти на сайте

  6. Алексей:

    Когда будут уроки по PHP?

    • Алексей, уроков php скорее всего не будет, так как я программированием теперь не занимаюсь.

      Теперь я больше в сфере заработка на сайтах работаю.

  7. Владимир:

    Здравствуйте,DenWeb! Сайты на движках тащат с собой мешок плагинов и расширений и грузятся поэтому на порядок дольше. Потратил кучу времени на Joomla и решил отказаться от движков,т.к. оптимизация сайта и движок, на мой взгляд, что то не совместимое. Вы сказали,что Ваш сайт(или блог) сделан на WordPress. Но при Вашем профессионализме сайт на движке...? Что то у меня не складывается. Извините.

    • Когда запускаешь по несколько сайтов каждый месяц, то речи о том, чтобы писать отдельно каждый сайт, не идет.

      Плюс после настройки о оптимизации мои сайты на WordPress грузятся быстрее, чем 70−80% сайтов. И главное для меня, не то, на каком движке сделан сайт, а сколько времени я трачу на его разработку и развитие и доходы, которые он приносит. В этом плане сайты на движке намного впереди)

  8. Евгений Несмелов:

    Хорошо написано.

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика