С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.
Настройка рабочего пространства в программе Adobe Photoshop
Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.
Открыв программу Adobe Photoshop, вы увидите примерно следующее:
- Строка главного меню;
- Панель параметров;
- Панель инструментов;
- Дополнительные панели.
Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:
Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.
Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:
При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:
Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:
Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.
Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:
Теперь кликните два раза по линейке и откройте вкладку 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;
}
У многих свойств вы будете видеть запись значений в следующих вариантах:
- margin: значение1 значение2 значение3 значение4;
- margin: значение1 значение2 значение3;
- margin: значение1 значение2;
- 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);
Осталось записать отступ снизу.
Если вам нужно записать значение для одной из четырех сторон, то используйте такую запись:
- margin-top – отступ сверху;
- margin-right – отступ справа;
- margin-bottom – отступ снизу;
- 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.
Комментарии