Вёрстка простого макета

С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.

Настройка рабочего пространства в программе Adobe Photoshop

Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.

Открыв программу Adobe Photoshop, вы увидите примерно следующее:

Обзор программы Adobe Photoshop

  1. Строка главного меню;
  2. Панель параметров;
  3. Панель инструментов;
  4. Дополнительные панели.

Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню WindowNew Workspace:

Настройка рабочего пространства в программе Adobe Photoshop

Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.

Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:

При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:

Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:

Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню FileOpen), и выберите файл.

Включите линейку при помощи горячих клавиш Ctrl+R или через меню ViewRulers:

Теперь кликните два раза по линейке и откройте вкладку Units & Rulers, чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:

Теперь все готово, можно начинать верстать макет.

Создание структуры веб-страницы

Создайте на рабочем столе папку и назовите ее simple text. В этой папке создайте два файла index.html и style.css.

Как вы помните структуру веб-страницы мы создаем на языке HTML. Поэтому сначала открываем файл index.html, и записываем в нем первоначальный код:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple text</title>
    </head>
    <body>

    </body>
</html>

Теперь между тегами <body></body> создайте блок при помощи тега <div></div>:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple text</title>
    </head>
    <body>
        <div>

        </div>
    </body>
</html>

Тег <div> является универсальным блочным элементом, и задает на веб-странице блок.

Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple text</title>
    </head>
    <body>
        <div>
            <h1></h1>
            <p></p>
            <p></p>
            <p></p>
            <p><em></em></p>
        </div>
    </body>
</html>

Самостоятельно добавьте текст между этими тегами.

Теперь в контейнере <head></head> пропишите путь к файлу со стилями:

<link rel="stylesheet" href="style.css">

Стилизация веб-страницы

Если вы откроете index.html в браузере, то увидите веб-страницу, написанную на чистом HTML. Она очень отличается от той, что изображена на макете. Это мы исправим при помощи каскадных таблиц стилей.

Откройте файл style.css и сбросьте все отступы при помощи универсального селектора звездочки:

* {
    margin: 0;
    padding: 0;
}

Теперь давайте запишем свойства для тега <body>:

body {
    background-color: #e35b5b;
    font-size: 16px;
    line-height: 24px;
    color: white;
    font-family: Arial;
}

Как узнать цвет фона веб-страницы в программе Adobe Photoshop? Для этого нужно кликнуть по одному из двух квадратиков с цветом:

Затем кликнуть пипеткой по фону макета, и скопировать шестнадцатеричный код, представленный в окне Color Picker:

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

Обратите внимание, что для цвета текста вместо шестнадцатеричного кода мы записали имя оттенка: color: white;. Имена оттенков удобно применять для черного black и белого цвета white, так как имя записать гораздо быстрее, чем шестнадцатеричный код. Все имена оттенков цветов можно посмотреть в этой таблице.

Свойства для блока <div>

Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:

div {
    width: 724px;
    margin: 43px auto 0;
}

У многих свойств вы будете видеть запись значений в следующих вариантах:

  1. margin: значение1 значение2 значение3 значение4;
  2. margin: значение1 значение2 значение3;
  3. margin: значение1 значение2;
  4. margin: значение1;

В первом случае мы указываем значения для каждой из четырех сторон, например, margin: 10px 12px 20px 15px;: 10px – отступ сверху, 12px – отступ справа, 20px – отступ снизу, 15px – отступ слева. Такую запись обычно используют когда отступы с каждой стороны разные.

Во втором случае записано три значения, например, margin: 10px 12px 20px;: 10px – отступ сверху, отступ справа и слева по 12px, 20px – отступ снизу. Такую запись удобно применять, когда значения справа и слева равны, а значения сверху и снизу различны. Значение auto используют, когда нужно, чтобы браузер автоматически расчитал отступы слева и справа.

В третьем случае используется два значения, например, margin: 10px 12px;: отступ сверху и снизу по 10px, отступ справа и слева по 12px. Если отступы сверху и снизу равны, и равны друг другу отступы справа и слева, то удобно записывать только два значения, как и в нашем примере.

В четвертом случае записано одно значение, например, margin: 10px;: отступ с каждой стороны равен 10px. Когда параметры со всех сторон равны, то удобно использовать именно такую запись.

Как измерить ширину или высоту элемента в программе Adobe Photoshop? Рассмотрим один из способов: берем инструмент Rectangular Marquee Tool (горячая клавиша M):

Затем выделяем область, например, нам нужно узнать отступ от верхнего края макета до начала содержимого, выделяем ее:

В панеле Info смотрим значения высоты H, или значение ширины W, если вам нужно узнать ширину элемента:

Переходим к заголовку

Здесь нам нужно указать размер, межстрочный интервал, тень и отступ снизу. Как прописывать первые два свойства вы уже знаете.

Для указания тени нам потребуется свойство text-shadow:

text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  • Здесь 0 – отступ по оси X;
  • 1px – отступ по оси Y;
  • 0 – радиус размытия тени;
  • rgba(0,0,0,0.3) – цвет тени. В данном случае мы используем формат RGBA, включающий альфа-канал, который задает прозрачность элементу. В скобках первые три значения отвечают за цвет в формате rgb, а последнее значение отвечает за прозрачность. Это значение записывается в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 – непрозрачности.

Как узнать параметры тени в программе Adobe Photoshop? Выбираем нужный слой в панели слоев, и кликаем по иконке ƒx:

Открывается окно Layer Style. В нем нужно выбрать вкладку Drop Shadow:

Здесь параметр Opacity отвечает за прозрачность, параметр Distance отвечает за отступ по оси Y, параметр Size отвечает за размытие, и параметр Angle отвечает за отступ по оси X. Так как наша тень падает под прямым углом, значит отступ по оси X будет равен нулю. Цвет тени можно узнать в квадратике напротив параметра Blend Mode:

Значение цвета в RGB формате и с альфа-каналом в данном случае будет выглядеть таким образом:

text-shadow: 0 1px 0 rgba(0,0,0,0.3);

Осталось записать отступ снизу.

Если вам нужно записать значение для одной из четырех сторон, то используйте такую запись:

  1. margin-top – отступ сверху;
  2. margin-right – отступ справа;
  3. margin-bottom – отступ снизу;
  4. margin-left – отступ слева.

Так как нам нужно указать отступ снизу, то запишем margin-bottom: 30px;

В итоге получим такой код в файле style.css:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e35b5b;
    font-size: 16px;
    line-height: 24px;
    color: white;
    font-family: Arial;
}

div {
    width: 724px;
    margin: 43px auto 0;
}

h1 {
    font-size: 60px;
    line-height: 62px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    margin-bottom: 30px;
}

Первый абзац. Соседние селекторы

Запишем свойства для первого абзаца:

p {
    font-size: 24px;
    line-height: 30px;
    color: #a42727;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    margin-bottom: 42px;
}

Теперь, если вы сохраните изменения и откроете файл index.html в браузере, то увидите, что данные свойства применились ко всем абзацам на странице. Так как нам нужно записать эти свойства только для первого абзаца, то в данном случае можно воспользоваться соседними селекторами. Что это такое? В шаблоне html, теги <h1> и <p> (берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в css соседние селекторы записываются таким образом:

h1+p {
    font-size: 24px;
    line-height: 30px;
    color: #a42727;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    margin-bottom: 42px;
}

Теперь, данные свойства будут применяться только к первому абзацу.

Последний абзац. Классы в CSS

Теперь давайте перейдем к последнему абзацу. Так как он тоже отличается от основного текста, то для него мы зададим класс. В html-шаблоне запишите для последнего абзаца атрибут class со значением last-p. Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:

<p class="last-p"></p>

В CSS классы записываются таким образом:

p.last-p {
    color: #ffbfbf;
    text-align: right;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

Эти свойства будут работать только для последнего абзаца в нашем шаблоне.

В отличии от идентификаторов, класс с определенным значением вы можете использовать на странице сколько угодно раз.

Свойство text-align со значением right применяется в том случае, когда нужно выровнять текст по правому краю. Также можно использовать и другие значения, например, text-align: center; в этом случае текст будет выравниваться по центру блока.

Остальные абзацы

Для остальных абзацев запишем следующее свойство:

p {
    margin-bottom: 30px;
}

Остальные свойства: цвет, семейство шрифтов, размер, межстрочный интервал данный тег будет наследовать от родительского элемента, т.е. тега <body>.

Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:

div {
    width: 724px;
    margin: 43px auto 0;
    padding: 0 20px;
}

Группирование селекторов

Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:

h1,p.last-p {
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p.


Видео к уроку

Часть 1

Часть 2

Комментарии