Как работает CSS (часть 2)
Продолжение о том, как делаются стили...
Составляем css-код дизайна
По прочтении всего, изложенного ранее, с составлением кодов может быть только одна проблема - как вычислить нужный селектор?
Ведь любые свойства и значения CSS можно всегда подглядеть или спросить, а селекторы везде разные.
Секрет составления кода дизайна во внимательном просмотре HTML кода.
Рассмотрим этот процесс на примере последовательности фоновых изображений в текущем дизайне.
На самый задний фон необходимо поставить текстурку (http://uploads.ru/i/c/o/H/coHy9.jpg).
Заглядываем в HTML-код страницы и ищем самый первый тег, с которого начинается код (он, кстати, везде и всегда одинаковый):
Код
<html>
....
</html>
....
</html>
Мы можем вписать тектуру в данный тег:
Код
html {background: url("http://uploads.ru/i/c/o/H/coHy9.jpg") repeat scroll 0 0 #000000;}
Следующим "слоем" у нас идет эльфийки с цветочками (http://uploads.ru/i/M/I/V/MIVB8.jpg). Смотрим, какие теги идут следующими:
Код
<html>
<head>
....
</head>
<body>
....
</body>
</html>
<head>
....
</head>
<body>
....
</body>
</html>
С помощью FireBug видно, что тег HEAD не подсвечивается, а при наведении курсора на BODY - выделяется вся страница (потому как тег body в html отвечает за тело форума/сайта, собственно, body и переводится с английского как "тело" - в нем хранятся все коды, отвечающие за содержимое страницы).
вписываем фон в body:
Код
body {background: url("http://uploads.ru/i/M/I/V/MIVB8.jpg") no-repeat scroll center bottom transparent;}
следующим слоем нужно вписать верхние цветочки, которые должны отображаться под фоном таблиц и под шапкой (http://uploads.ru/i/d/q/J/dqJp6.png)
Разворачиваем тег BODY и ищем ближайший тег содержимого страницы:
Код
<html>
<head>....</head>
<body>
<div id="pun_wrap">
....
</div>
</body>
</html>
<head>....</head>
<body>
<div id="pun_wrap">
....
</div>
</body>
</html>
вписываем фон в контейнер с идентификатором pun_wrap:
Код
#pun_wrap {background: url("http://uploads.ru/i/d/q/J/dqJp6.png") no-repeat scroll center top transparent;}
следующим этапом идет фон форумного контента (http://uploads.ru/i/U/Z/g/UZgKV.png)
разворачиваем контейнер pun_wrap и сразу же видим контейнер pun
Код
<html>
<head>....</head>
<body>
<div id="pun_wrap">
<div id="pun">
....
</div>
</div>
</body>
</html>
<head>....</head>
<body>
<div id="pun_wrap">
<div id="pun">
....
</div>
</div>
</body>
</html>
на этот раз нужно не только вписать фон, но и задать ширину контейнера:
Код
#pun {
background: url("http://uploads.ru/i/U/Z/g/UZgKV.png") repeat-y scroll center top transparent;
margin: auto;
padding: 0 40px;
position: relative;
width: 918px;
}
background: url("http://uploads.ru/i/U/Z/g/UZgKV.png") repeat-y scroll center top transparent;
margin: auto;
padding: 0 40px;
position: relative;
width: 918px;
}
Вот таким образом, анализируя HTML-код, можно задавать настройки.
С помощью FireBug можно экспериментировать, например, редактировать CSS-коды до того, как вставлять изменения в стиль - если что-то пойдет не так или что-то перекосится, вы всегда можете обновить страницу и попробовать написать код заново.
Сам процесс подбора размеров форумных элементов и вставки картинок с помощью Firebug у меня занял 40 минут.
>> 
И еще раз о верстке дизайна при помощи FireBug
Для наглядности предлагаю вам ознакомиться с данным видео.
Вы увидите:
- как происходит верстка дизайна с нуля
- как вставлять фоновые элементы
- как добавлять в стиль новые селекторы страницы
- как использовать функционал FireBug
- как позиционировать элементы
- (забегая вперед) как делать свои блоки для элементов дизайна
| Всего комментариев: 0 | |