Меню
Спросить
???

Учимся верстать сайты. Часть 1. Подготовка.

28 августа 2017
Учимся верстать сайты. Часть 1. Подготовка.

Привет, мы познакомились из далека с языком html, так же и с каскадными таблицами стилей языком css. Теперь мы будем применять все это на практике, возьмем за пример конкретный сайт и будем учится верстать, так же уже на первых этапах познакомимся с JavaScript и библиотекой JQuery. На улице август, но я так жутко замерз, так что давайте поскорее перейдем к делу.

Страница Вконтакте

За конкретный пример, мы возьмем сайт Вконтакте. Почему мы будем верстать именно этот сайт? Потому что, у каждого из нас на сегодняшний день есть своя страница в этой социальной сети и KNLNT не исключение. Так что, открывай свою страницу ВК и начнем урок по верстке.

Верстка

Перейдем непосредственно к верстке. Создаем папку и называем ее произвольно, кому как угодно. Создаем в ней файл index.html, открываем его в любом редакторе, желательно в том которые может кодировать файлы. Ставим кодировку UTF-8. Дальше, создаем папку resource, в ней будут хранится ресурсы сайта, а именно стили css, javascript файлы, библиотеки, картинки и тд, все то что понадобится во время верстки сайта. В папке resource создаем файл style.css, открываем и так же кодируем наши таблицы стилей. Тут же создаем папку img - это для картинок. В итоге у нас должна получится такая структура:

  1. /Папка "САЙТ" - произвольное название
  2. /САЙТ/index.html
  3. /САЙТ/resource
  4. /САЙТ/resource/style.css
  5. /САЙТ/resource/img
  6. /САЙТ/resource/img/картинки

Если у тебя так же, то ты все сделал правильно! =)
Поехали дальше, открываем index.html и начинаем тут писать код. Напишем тип страницы html, укажем три тега основных тело сайта, шапка и сам тег html. Так же укажем тег title и напишем туда Имя и Фамилию как это сделано в ВК.

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Алексей Повольнов</title>
  5. </head>
  6. <body>
  7. </body>
  8. </html>

Это мы все знаем, теперь в теге body пишем наши элемента. Сегодня мы начнем с шапки сайта и ее элементов, напишем html код, а в следующей части простилизуем все это дело.
И так приступим, для начала укажем непосредственно саму шапку сайта, это будет блок div с классом head.

  1. <body>
  2. <div class = "head">
  3. </div>
  4. </body>

Это и будет наша шапка сайта. Дальше расположим в ней элементы. Пересмотрим эти элементы - логотип ВК, строка поиска, оповещения и музыка и менюшка с именем и аватаркой.
Создадим логотип, это будет блок div с классом logo. Запишем.

  1. <body>
  2. <div class = "head">
  3. <div class = "logo">
  4. </div>
  5. </div>
  6. </body>

Дальше добавляем строку поиска, это будет тег input c классом search_head.

  1. <body>
  2. <div class = "head">
  3. <div class = "logo"></div>
  4. <input class = "search_head">
  5. </div>
  6. </body>

Так же укажем нашему инпуту тип и замещающий текст, с помощью атрибутов type и placeholder соответственно.

  1. <body>
  2. <div class = "head">
  3. <div class = "logo"></div>
  4. <input class = "search_head" type = "text" placeholder = "Поиск">
  5. </div>
  6. </body>

Отлично, теперь добавим следующим элемент в нашу верстку - значки оповещения и музыки. Это будут блок div с классом head_coloc (оповещения) и блок div с классом head_muz.

  1. <body>
  2. <div class = "head">
  3. <div class = "logo"></div>
  4. <input class = "search_head" type = "text" placeholder = "Поиск">
  5. <div class = "head_coloc"></div>
  6. <div class = "head_muz"></div>
  7. </div>
  8. </body>

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

  1. <body>
  2. <div class = "head">
  3. <div class = "logo"></div>
  4. <input class = "search_head" type = "text" placeholder = "Поиск">
  5. <div class = "head_coloc"></div>
  6. <div class = "head_muz"></div>
  7. <div class = "headom"></div>
  8. </div>
  9. </body>

Теперь добавим в этот блок текст со своим именем и добавим картинку с помощью тега img и блок с классом headom_str, который будет играть роль стрелочки.

  1. <body>
  2. <div class = "head">
  3. <div class = "logo"></div>
  4. <input class = "search_head" type = "text" placeholder = "Поиск">
  5. <div class = "head_coloc"></div>
  6. <div class = "head_muz"></div>
  7. <div class = "headom">
  8. Алексей
  9. <img src = "">
  10. <div class = "headom_str"></div>
  11. </div>
  12. </div>
  13. </body>

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

Заключение

На этом все. Часть не была сложной и длинной, в следующей части мы загрузим картинки и простилизуем шапку и ее элементы. Смотри внизу видео версию и учись верстать сайты самостоятельно.
Всем спасибо пока! =).

Следующая статьяПредыдущая статья