Пример верстки для петухов

Лучшие комментаторы

Сегодня рассмотрим пример верстки несложного сайта на основе блочной и не совсем блочной верстки. Для этого будем использовать функционал бедного фронтенда, чтобы привести в порядок блочное расположение проекта. Стоит понимать, что разбросанные блоки это одно, а сложенные на свои места — другое. В этом примере рассмотрим только составляющею макета, который потянет даже бомж из помойки, если он бывший фронтенд.

Чтобы усвоить этот урок верстки, нужно обратить внимание на свойства другого обычного проекта, который иногда кишит рекламой, особенно рекламой памперсов. Нас же интересует модель проекта, а не его содержимое. Чтобы проанализировать модель проекта, который мы нашли, зажимаем стопами клавишу ф12 (смотря у кого как пишет на кнопке), и анализируем. Все увиденное вами после нажатия ф12 — это буквально недры фронтенда.

Пример верстки для петухов и чайников

Примерно так выглядит макет простого сайта в 52% случаев после длительных (и нудных) поисков правильного сайта:

пример верстки здеся

Дело в том, что блочное сопоставление всегда разное, и как правило — разной сложности. Что иногда не радует глаз. А иногда просто набор содержимого без CSS вмешательств. Как вы уже догадались, содержимое пишут на ХТМЛ и нигде больше. Все остальное (если вы про редакторы), то они только упрощают верстку. На фото можно увидеть два сайдбара, но можно делать и один, если конечно вы полный петух этого не знать, делать на усмотрение.

Выбираем редакторы для выполнения заливки, кому-то подойдет Notepad++, но если сойдет и туалетная бумага — тоже можно. Далее пишем разметку, да и так понятно, что там писать:

пример верстки здесь

Но это только самая малая часть проекта, где основную информацию мы запиливаем в дивы с классами. Вернемся к боковой части панели ф12, именно к боковой. Там вы увидите большой срач в плане подачи контента. И от этого срача в будущем зависит правильное выкладывание сайта в поиске. Продолжение следует, теперь вы на единицу больше знаете. Кстати про скрипты js из фото-примера, они выводятся в отдельную папку (не путать с попкой), куда загружается два js файла с названием после src=js/, их можно найти.

Пример верстки на примере HTML

Начинаем мягко говоря с заполнения ХТМЛ содержимого, используя базовые знания языков фронтенда. В этом нам поможет: 1) справочник кода; 2) линейка с карандашом; 3) редактор. Начинаем создание первого говна на палочке, то есть блоков с outline для понимания отображения блоков сайта. Пример будет на новом текст-примере, учитывать нужно и то, с каким браузером работаем. Лучшее решение — браузер хром.

Все что нужно сделать — заполнить идентификаторы и классы. Идентификаторы мы относим к div, классы к class и span. Спан участвует только в заполнении некоего участка содержимого, ой короче вот пример — красный текст между содержимого. Понятное дело, что для блоков мы применим идентификаторы, которых должно быть как можно больше. Иначе если применяются только классы, то этот макет выбрасывать.


<!DOCTYPE html>
<html lang=»en»>
<head>

<meta charset=»UTF-8″>

<title>Название для тайтла</title>

<link rel=»stylesheet» type=»text/css» href=»css/style.css»>

<script type=»text/javascript» src=»js/jquery-1.8.0.min.js»></script>

<script type=»text/javascript» src=»js/equal-height.js»></script>

</head>
<body>

<div id=»container»>

<div id=»header»>

<p>это будет хедер сверху</p>

</div>

<div id=»sidebar»>

<p>это будет левый сайдбар</p>

</div>

<div id=»sidebars»>

<p>это будет правый сайдбар</p>

</div>

<div id=»content»>

<p>это будет контент блок</p>

</div>

<div id=»footer»>

<p>это будет подвал блок</p>

</div>

<div id=”clear”></div>

</div>

</body>
</html>


Все уже сделано, однако мы видим вместо заливки блочного проекта какой-то текст, ведь это только первая часть. А сами линии блоков мы зададим в стилях CSS, чтобы видеть их в браузере. А это будет сделано исходя из того, насколько у вас ровные руки. Переходим далее, нужно все-таки заливку отобразить визуально, и поможет в этом тот же язык (а пример верстки далее, не забываем расставлять пробелы везде).

Пример верстки на примере CSS свойств

Для отображения блоков нам понадобиться использование CSS свойств, исходя из выбранного макета. В нашем случае — первый фото-пример с макетом двух сайдбаров. Написать сложновато, хотя если вы собрались хорошо учиться (а не так себе), то стоит применять каждый параметр, как говорят знатоки. Это будет простой пример для петухов, то есть первого уровня. Особая подача стилизации не означает, что она относится к стандарту.

body {

background: #eee;

position: absolute;

overflow-y: hidden;

}

#header {

background: orange;

height: 25px;

width: 1200px;

text-align: center;

padding: 2em 0;

margin: 4em 10em;

}

#sidebar {

width: 250px;

height: 350px;

background: green;

text-align: center;

position: absolute;

padding: 3em 0;

margin: -4em 10em;

}

#header p {

font: 23px Arial;

cursor: default;

color: white;

}

#sidebar p {

font: 20px Arial;

cursor: default;

color: white;

}

#sidebars {

width: 250px;

height: 350px;

background: red;

text-align: center;

position: relative;

float: right;

padding: 3em 0;

margin: -4em 10em;

}

#content {

width: 700px;

height: 350px;

background: gray;

position: absolute;

text-align: center;

padding: 3em 0;

margin: -4em 25.6em;

}

#sidebars p {

font: 20px Arial;

cursor: default;

color: white;

}

#content p {

font: 28px Arial;

letter-spacing: 8px;

cursor: default;

color: white;

}

#content h4 {

font: 18px Arial;

letter-spacing: 1px;

padding: 1em;

line-height: 26px;

cursor: default;

color: blue;

}

#footer {

position: relative;

width: 1200px;

height: 120px;

background: black;

margin: 27.9em 10em;

}

#footer p {

font: 32px Arial;

text-align: center;

cursor: default;

padding: 1.2em 0;

word-spacing: 15px;

color: #eee;

}

#clear {

clear: both;

}

 #container {

 

}

После этого в окне браузера (не IExplorer) открываем содержимое ХТМЛ файла с помощью своих фалангов. Должны появиться такие атрибуты окна:


пример верстки

  • На открытой вкладке надпись вашего тайтла
  • На странице полный макет из фото-примера 1
  • Ничего не должно съехать или улететь куда-то
  • Между блоками макета отступов нету
  • Небольшие отличия от первого примера
  • Разнообразные стили шрифтов макета
  • Разноцветные блоки, также макет по центру

Если этим атрибутам соответствуют изменения в окне вашего браузера, тогда руки выросли из правильного места…

Подсказка для инвалидов

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

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Пост опубликован: