Пример: Макет на основе DIV-элементов
- Попробуй сам »
Шапка сайта
- HTML Элементы
- HTML Атрибуты
- HTML Таблицы
Основной контент...
Новые элементы макета в HTML5
Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов
Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы.
С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе 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 , и записываем в нем первоначальный код:
Теперь между тегами
создайте блок при помощи тега :
Тег
Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:
Самостоятельно добавьте текст между этими тегами.
Теперь в контейнере
пропишите путь к файлу со стилями:
Стилизация веб-страницы
Если вы откроете index.html в браузере, то увидите веб-страницу, написанную на чистом HTML. Она очень отличается от той, что изображена на макете. Это мы исправим при помощи каскадных таблиц стилей.
Откройте файл style.css и сбросьте все отступы при помощи универсального селектора звездочки:
* { margin: 0; padding: 0; }
Теперь давайте запишем свойства для тега
:Body { background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; }
Как узнать цвет фона веб-страницы в программе Adobe Photoshop? Для этого нужно кликнуть по одному из двух квадратиков с цветом:
Затем кликнуть пипеткой по фону макета, и скопировать шестнадцатеричный код, представленный в окне Color Picker :
Как узнать размер, межстрочный интервал, начертание, семейство шрифтов и цвет текста? Для этого нужно выбрать слой с текстом, затем открыть панель Character . На этой панели будут отображены следующие параметры:
Обратите внимание, что для цвета текста вместо шестнадцатеричного кода мы записали имя оттенка: color: white; . Имена оттенков удобно применять для черного black и белого цвета white , так как имя записать гораздо быстрее, чем шестнадцатеричный код. Все имена оттенков цветов можно посмотреть в этой таблице .
Свойства для блока
Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:
У многих свойств вы будете видеть запись значений в следующих вариантах:
- 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
:
- Здесь 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, теги
и
(берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в 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 . Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:
В 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;
}
Остальные свойства: цвет, семейство шрифтов, размер, межстрочный интервал данный тег будет наследовать от родительского элемента, т.е. тега
.
Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:
Группирование селекторов
Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:
H1,p.last-p {
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p .
Видео к уроку
Часть 1
Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:
У многих свойств вы будете видеть запись значений в следующих вариантах:
- 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 :
- Здесь 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, теги
и
(берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в 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 . Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:
В 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; }
Остальные свойства: цвет, семейство шрифтов, размер, межстрочный интервал данный тег будет наследовать от родительского элемента, т.е. тега
.Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:
Группирование селекторов
Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:
H1,p.last-p { text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p .