Верстка подвала сайта HTML+CSS.

Актуальность HTML верстки очень высока. На всех фриланс-биржах всегда висит по 10-20 заказов на срочную верстку, также HTML+CSS+JS позволяют клепать пусть плохие, но приложения под Android и WinPhone. Да и любой компании нужен работающий сайт, а не только красивые дизайны. Что такое обычный проект для верстальщика? Это 5-10 страниц в psd/pdf (InDesign/illustrator), которые нужно очень качественно сверстать за 2-3 дня со всеми правками и спонтанными идеями клиента.

Давайте сверстаем подвал для сайта и поймем, удастся ли получить удовольствие и деньги от процесса верстки своих же макетов.

Самое важное — заранее продумать структуру сайта, расставить div’ы в необходимой последовательности и с правильной вложенностью. Если вы верстаете страницу сразу, без дизайна (например, клепаете 5-10 лэндингов за рабочий день), то лучше набросать структуру хотя бы на листочке, иначе вы будете переверстывать страницы сайта по несколько раз.
Итак, начинаем верстать. Создаем пустой html документ со следующей шапкой.

<!DOCTYPE html>
<HTML>
<head>
<title>Your-scorpion lesson footer</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style/style.css">

И верстаем. Элементы бывают блочные (структурное форматирование), текстовые (строчные). Под элементом подразумевается конструкция вида <p>Заголовок</p>. Сделать из блочного элемента строчный можно с помощью display: inline. Строчные элементы используются для оформления текста. Блочный элемент это прямоугольник с контентом. К блочным относятся контейнеры<div>,<h1>,</h1> и др. Один блочный внутрь другого можно вложить, и это помогает реализовать большинство работ концептуальных дизайнера. Не надо вкладывать блочный элемент в строчный, это не соответствует стандартам. Ещё есть контейнер , который служит для определения строчных элементов документа, он поможет применить отдельный css к отдельной буковке.

Думаю, что наиболее важно рассмотреть display. Display это свойство, которое определяет, как элемент будет показан на странице. Самые распространенные и надежные значения это block, inline, list-item и none. Block делает элемент блочным, inline делает элемент строчным, inline-block делает элемент внутри блочным, но при этом он обтекается другими элементами страницы подобно строчному, list-item делает элемент блочным и добавляет маркеры списка, none прячет элемент (а hidden со свойством visibility позволит элемент скрыть, но оставить место пустым).

Вооружившись этим знанием, накидываем вложенность div’ов и общую структуру, не забывая все грамотно оформлять отступами. Ах да, и никаких таблиц, только блоки. В этом и заключена основная суть HTML-верстки: правильная расстановка divов и грамотное их оформление через классы CSS. Конечно, верстальщик должен прикрутить js скрипты. Но эта работа выходит за рамки данного урока, да и бОльшая часть скриптов требует всего-то прописать класс. Получаем примерно такой HTML код:


Набросав структуру, вставляем картинки и текст, смотрим в браузерах на получившееся безобразие. Показываем клиенту по требованию результат, даем скидку что бы ужаснувшийся клиент не отдал заказ конкуренту на 8 лет младше вас, начинаем писать классы CSS.

жизнь верстальщика — боль

CSS 3 позволяет очень красиво и дёшево сделать страницу красивой и соответствующей дизайну. Плавные смены оттенков текста, сложные градиенты, отступы от краев, тени/свечение, отрицательные значения, прозрачность и многое другое позволяет сделать огромное количество распространенных элементов дизайна с помощью кода. Пара важных моментов. Firefox плохо отрабатывает transparent, используйте rgba. IE8 прекрасно отрабатывает transparent, но не знает что такое rgba.

Важно сразу усвоить принцип использования позиционирования: абсолютное используется для наложения одного элемента на другой (картинка в галерее, стрелки для листания контента и т.п.) и для декоративных элементов. Относительное используется редко, помогает внедрить абсолютный элемент в другой элемент (принцип ребенок/родитель) с привязкой координат.
Float: блочные элементы обычно начинаются с новой строки, и хорошим способом изменить тип обтекания является float. Например, float: left; выровняет картинку по левому краю, и текст будет её обтекать. Также элементы встанут в один ряд с переносом строки.

И несколько маленьких советов: лучше использовать P, чем BR. Лучше использовать text-transform:uppercase/lowercase, чем писать капсом. Не используйте inline styling, лучше сделайте все через один style.css. Используйте normalize.css. Элементы, которые встречаются в документы только один раз внутри документа, делайте через идентификаторы, в противном случае используйте классы. Вот CSS код:

.my__link_big,.my__link {
    color:#525252;
    font-size:14.4px;
}
 
.footer_main {
    margin-top:10px;
    background-color:#7e7e7e;
	background:url("bg.jpg");
	font-family: 'Scada', sans-serif;	
}
 
.footer {
    width:1000px;
    margin:0 auto;
}
 
.clear_footer,.b-footer__social,.bem_sitemap {
    margin-top:12px;
    margin-left:18px;
    padding-left:26px;
    float:left;	
}
 
.logo_align {
	float:right;
}
 
.size_block {
    width: 150px;
}
 
.description {
    width:295px;
}
 
.tet_header,.footer-title,.b-networks__header {
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
	color: #C5C5C5;
	border-color: rgba(0,91,173,.3);
    font-size:17px;
    width:100%;
	letter-spacing: 1px;
}
 
.btext {
    margin-top:3px;
    font-size:14.6px;
    color:#f5f5f5;
	list-style-type: none;
}
 
.clear_footer {
    height:23px;
}
 
.b-sitemap__links {
    float:left;
}
 
.glow_undecorate {
	color: #ffffff;
	text-shadow: 2px 2px 10px #5ab3f7, -4px 2px 14px #2784d3;
}
 
.b-link_block {
    margin-top:12px;
    display:block;
}
 
.b-sitemap__links_right {
    float:right;
    margin-right:-10px;
    letter-spacing: 1px;
}
 
.b-footer-logo__copyright {
    clear:right;
	text-shadow: 0 0 20px #ff6632, 0 0 30px #ff6632;
	color: #ffb762 !important;
	padding-top:8px;
}
 
.b-footer-logo__copyright {
    font-size:21px;
    color:#f5f5f5;
    text-align:right;
}

В итоге мы получаем фиксированную верстку, которая не разъезжается и смотрится симпатично. Конечно, демонстрация некоторых возможностей CSS не прошла бесследно. Такое количество эффектов не годится для высоконагруженных сервисов, но для большинства задач пойдёт.

Результат

22 комментария

  1. VivaAnnet

    А можно расположить в одну строку любое количество элементов, при условии, что ширина контейнера меньше суммы ширины всех элементов?

    • artmax2 (Author)

      Можно
      white-space: nowrap; Это прекрасно работает для текста. Чтобы это сработало с любым объектом, надо делать объекты строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово. Но нужно обращать внимание на baseline (вертикальное выравнивание). Также не забывайте, что все текстовые разделители (пробелы, переносы строк текста) конвертируются в один пробел между inline и inline-block.
      http://jsfiddle.net/dzytwjL1/

  2. Владимир, Red Keds studio

    maximum-scale=1.0
    user-scalable=no
    почему не добавляете? а-я-яй!

    • your-scorpion (Author)

      хм. Эти директивы запретят пользователю масштабировать страницу с мобильных устройств. Как специалист по юзабилити, я категорически против такого подхода. Я использую maximum-scale=1.0, user-scalable=no, когда верстаю страницы под мобильные приложения. В обычной веб-верстке не вижу смысла ставить ограничения для пользователя.

      Лучше использовать content=»width=device-width; initial-scale=1.0″ — приказывает браузеру использовать ширину девайса как ширину окна.
      А user-scalable=no — лучше не трогать.

  3. em.editor

    Скажите, как я могу удалить долбанную функцию X-Pingback, мне её вирус оставил! уже три недели мучаюсь!!!

    • your-scorpion (Author)

      В function.php добавить:

      1
      2
      3
      4
      5
      6
      7
      
      function remove_x_pingback($headers) {
          unset($headers['X-Pingback']);
          return $headers;}
      add_filter('wp_headers', 'remove_x_pingback');
       
      //И больше не ставить плагинов со сторонних ресурсов и ворованных тем...
  4. inoe slovo

    Как использовать Edge Reflow при интеграции с фотошопом?

    • your-scorpion (Author)

      1. Откройте PSD макет в фотошопе и добавьте суффиксы ‘.png’ и ‘.jpg’ к слоям, группам и смарт объектам. Далее зайдите в меню File — Generate — Edge Reflow Project.
      2. Откройте Photoshop Connect panel в Edge Reflow CC и включите Photoshop Asset Sync.

  5. Linnder_design

    Можете человеческим языком объяснить разницу между position: absolute | fixed | relative | static ?

    • your-scorpion (Author)

      Постараюсь)
      Static — отображение по умолчанию. Используется в медиа-запросах.

      В примере применены атрибуты width:15%; и height:130px; а отступы сверху и слева по 10px. Именно такие отступы и будут сохранены относительно родителя.


      Если указать этому же блоку absolute, то позиционирование станет абсолютным относительно родителя или всей страницы. Если дополнительно сместить элемент по горизонтали, получаем горизонтальную прокрутку. Используется для элементов, которые нужно «прибить» к родителю, например какие-нибудь надписи на картинках или стрелки на слайдере.


      relative задает положение элемента относительно его исходного места, хорош для получения pixel perfect. В давние времена использовался для анимации, сейчас его заменил transform: translate(). В отличии от absolute из потока не отключается, точнее relative занимает пространство, сдвигает только изображение блока. Благодаря чему не меняет размеры страницы, так как смещает элемент относительно предыдущего положения.


      fixed зафиксирует элемент, не позволяя его скролить. Система координат начинается от крайней точки браузера, именно через fixed верстаются рекламные объявления.
      Особенности верстки через fixed


      Важно при этом понимать, как работает свойство display. Оно определяет, как элемент должен быть показан в документе. Если указать атрибут block, то объект станет блочным. Блочный элемент образует одну прямоугольную область, перед и после которой строка переводится на новую. А вот none просто не отображает элемент. Как думаете, что будет, если повесить на div display:block, а на ховер: display:none.

      • Алексей Кудря

        Как центрировать?

        • your-scorpion (Author)
          display: flex;
          justify-content: center; /*Центрирование по горизонтали*/
          align-items: center;     /*Центрирование по вертикали */
  6. Александр Мыщцын

    Как верстать рамку , чтобы она ‘расступалась’ перед текстом, который лежит поверх рамки?

  7. Kiselev Pavel

    1. Как убрать подсветку полей?
    2. Как реализовать перенос слов?

  8. Creep Creaper

    У вас проскальзывает единица измерения пиксели в верстке. А как же учет ppi устройства?

    • your-scorpion (Author)

      В некоторых ситуациях можно положиться на устройство и позволить ему самому решать, в каком масштабе показать пиксель, для этого существует параметр devicePixelRatio. Если этот параметр равен единице, то пиксель показывается в масштабе 1 к 1. Если равен двойке, то будет отрисован квадрат 2×2 пикселя. Ведь сайты на ретине не уменьшаются в два раза, они выглядят как на обычном дисплее. А вот с картинками ситуация куда сложнее:

      div {
          background: url(ic_menu.png) no-repeat center top;
      }
      
      @media screen and (-webkit-min-device-pixel-ratio: 2),
             screen and (   -moz-min-device-pixel-ratio: 2),
             screen and (     -o-min-device-pixel-ratio: 2),
             screen and (        min-device-pixel-ratio: 2) {
          div {
              background-image: url(ic_menu@2x.png);
              background-size: 100%;
          }
      }
  9. Игорь Симакин

    Как скачать сайт?

    • your-scorpion (Author)

      Если в ознакомительных целях, то wget (не забудьте прописать путь), или Sitesucker.
      Если вы сомневаетесь в ознакомительных целях вашего заказчика, который скачивает демонстрационную верстку, то CSS подгружаем через абсолютный путь http:// с вашего сервера. Можно использовать минификацию HTML, CSS и Javascript. Мелочь, а приятно.

  10. Artem Originative

    Добрый день.
    Есть ли быстрый способ добавить в CMS защитную штуку на сайт с уникальным контентом, которая к копированному тексту прибавляет ссылку на страницу, с которой текст был скопирован?

    • your-scorpion (Author)

      Написал специальный JS код для вас.

      innerHTML это свойство умеет брать строку с HTML-кодом.
      getSelection и getRangeAt первый возвращает то что шас выделено (объект selection), второй возвращает объект range.
      document.createElement создает элемент который указан в скобочках.
      setTimeout нужен для вызова функции для удаления лишнего в нужное время, т.к. весь код выше добавляет тэг с выделенным текстом в документ.
      document.body.removeChild разрывает все связи между удаляемым узлом и его родителем.

«Нажимая на кнопку Submit Comment, я даю согласие на обработку персональных данных»