| » Меню сайта |
Разделы сайта
Шаблоны
Скрипты
Статьи
Графика
|
|
Главная » 2008 » Сентябрь » 10 » Верстка былинного макета
Верстка былинного макета | 10.Сен.2008 | 17:43:33 |
Захотел сделать страницу. За основу можно взять готовый макет, а можно
все сделать самому. Разницы нет. Возьму минимальный набор элементов:
логотип, заголовок, текст, меню и копирайт. У меня текстом будет былина
в пересказе для детей И. В. Карнауховой.
Можно нарисовать макет, а можно отложить на некоторое время.
Теперь нужно написать предварительный HTML-код. Если есть макет, то весь текст нужно брать с него.
Элементы использовать по их назначению.
Не использовать свободные элементы DIV и SPAN.
Графика в коде – только иллюстрации.
Получилось так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>ИЛЬЯ МУРОМЕЦ И СОЛОВЕЙ–РАЗБОИНИК</title>
</head>
<body>
<p><img src="#" title="Логотип" alt="Логотип"></p>
<h1>Илья Муромец и Соловей–разбойник</h1>
<p>Скачет Илья Муромец во всю конскую прыть.</p>
<p>И вышел Илья из гридни вон.</p>
<ul>
<li><a href="#" title="Переход к сказкам">Сказки</a></li>
<li><a href="#" title="Переход к былинам">Былины</a></li>
<li><a href="#" title="Переход к легендам">Легенды</a></li>
</ul>
<p>© <a href="#" title="Переход на страницу
автора">И. В. Карнауховой </a></p>
</body>
</html>
По
этому коду можно попросить высказаться на форуме (правильное
использование и расположение элементов, замена символов мнемониками,
установка атрибутов и т.д.).
Посмотреть. Контрольная точка 65 строк.
Дальше понадобится макет. На макете все выглядит так, как будет на странице.
Я делал макет по этому уроку.
Макет
Теперь нужно оформить предварительную разметку в соответствии с макетом. Последовательность такая
Задать
всем элементам HTML нужные шрифты (семейства шрифтов, насыщенность,
размер шрифта, стиль шрифта) и их цвет. Можно сразу указать высоту
строки. Делается это при помощи CSS.
----------------------------------------
Сокращения:
end 1 ENTER – это: в конце первой строки нажать ENTER, писать в строке номер два.
Такая запись:
end 10 ENTER
11. <style type="text/css">
12. p{
13. float: right;
14. }
15. </style>
Означает,
что в конце десятой строки давить ENTER, написать код одиннадцатой
строки, нажать ENTER, написать код двенадцатой строки и т.д. В
пятнадцатой строке, ENTER давить не нужно.
----------------------------------------
Открываю HTML-документ. Создам в нем внутреннюю таблицу стилей, обнулю поля и отступы для всех HTML-элементов.
5 end ENTER
6. <style type="text/css">
7. *{
8. margin: 0;
9. padding: 0;
10. }
11. </style>
Основной
шрифт на странице – «Verdana». Его цвет 81693C (указывая цвет шрифта,
нужно указывать цвет фона, на котором будет хорошо виден текст). Размер
шрифта…
На странице несколько элементов и все они имеют разный
размер шрифта. Для сохранения пропорций буду указывать точные размеры,
но используя относительные единицы (em, %).
10 end ENTER
11. body{
12. background: #fff;
13. font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
14. color: #81693C;
15. }
Задал для всей страницы:
цвет фона FFF
размер шрифта 10рх
выбрал шрифт Verdana, через запятую указал варианты замены
цвет текста 81693C
Посмотреть. Контрольная точка 76 строк
Первый
элемент на странице – логотип. Рисунок (img) – строчный элемент,
поэтому он находится внутри абзаца. Логотип должен присутствовать на
странице, он не является элементом оформления. Элементов Р, на странице
много. Этот абзац нужно выделить из общей массы. Сразу, для лучшего
представления, окрашу элемент Р.
Девятнадцатая строка имеет вид
<p><img src="logo.gif" title="Логотип" alt="Логотип"></p>
Придам ей такой
<p id="logo"><img src="logo.gif" title="Логотип" alt="Логотип"></p>
Добавил атрибут идентификатора со значением logo.
15 end ENTER
16. #logo{
17. background: #D69A0B;
18. }
Добавил блок определений для селектора идентификатора.
Посмотреть. Контрольная точка 79 строк .
Дальше идет заголовок первого уровня Н1. Таких заголовков больше не
будет, выделять особым образом нет необходимости. Шрифт Izhitsa не
стандартный. Нужно найти такой размер шрифта у Verdana, при котором
высота букв (желательно и ширина) будут одинаковыми. Я подобрал высоту
букв, получился размер шрифта 30рх. Подберу высоту строки (на макете
это все видно), получилось 34рх. Для лучшего представления окрашу этот
заголовок. Сразу напишу, что все символы в верхнем регистре.
15 end ENTER
16. h1{
17. background: #25A326;
18. font-size: 3em;
19. line-height: 1.1333em;
20. text-transform: uppercase;
21. }
Нужно подробней остановиться на указании размера шрифта, ведь он задан в относительных единицах. И так по порядку.
Для BODY задан размер шрифта 10рх.
Элемент
H1 является прямым потомком BODY. Если, для элемента размер шрифта не
указан, то он наследует его от родителя. В данном случае беру размер
относительно родителя.
Значит, для Н1 1em равен 10px.
В свойстве
селектора Н1 указан размер шрифта 3em, что равно 30рх. Значит, теперь,
для Н1, 1em равен 30рх. Не трудно посчитать коэффициент для высоты
строки. Еще раз. Для элемента задан размер шрифта, все отсчеты ведутся
от этого размера. Если 1em равен 30рх, сколько нужно em, чтоб получить
34рх? 34 разделить на тридцать получу 1,13333333
Посмотреть. Контрольная точка 85 строк .
Дальше
идет текст былины. Это большая куча абзацев. Выделять каждый абзац нет
смысла, можно выделить всю группу. Для этого воспользуюсь свободным
элементом блочного уровня DIV, с атрибутом. Значением атрибута будет
TEXT. Этот контейнер будет родителем для всех абзацев, можно стразу
задать нужный размер шрифта (18рх) и высоту строки (26рх). Шрифт уже
задан, наследуется от родителя TEXT и передается по наследству. Сразу
задам расстояние между абзацами (нижний отступ).
29 end ENTER
30. <div id="text">
78 end ENTER
79. </div><!--окончание text-->
24 end ENTER
25. #text{
26. background: #ADD8E6;
27. font-size: 1.8em;
28. line-height: 1.4444em;
29. }
30. #text p{
31. padding-bottom: 1.4444em;
32. }
Посмотреть. Контрольная точка 95 строк .
Теперь
список ссылок. Для него идентификатор не нужен, т.к. он один. Ссылки
находятся внутри пунктов списка. Шрифт не стандартный, поэтому подбираю
подходящий размер букв, и высоту строки. Подчеркивание не нужно. Нужно
задать цвет ссылок.
32 end ENTER
33. ul{
34. background: #C374D8;
35. font-size: 2.2em;
36. line-height: 1.1818em;
37. }
38. li a{
39. background: #FEFF0D;
40. color: #81693C;
41. text-decoration: none;
42. }
Посмотреть. Контрольная точка 105 строк .
Остался абзац с копирайтом. Его выделю. Строка 103 имеет вид
<p>© <a href="#" title="Переход на страницу
автора">И. В. Карнауховой </a></p>
Придам ей такой
<p id="copyright">© <a href="#"
title="Переход на страницу
автора">И. В. Карнауховой </a></p>
21 end ENTER
22. #copyright{
23. background: #7FFF00;
24. font-size: 1em;
25. line-height: 1.2em;
26. }
27. #copyright a{
28. color: #81693C;
29. background-color: inherit;
30. text-decoration: none;
31. }
Посмотреть. Контрольная точка 115 строк .
Элементы раскрашены. Имеют высоту.
Следующий шаг – задать нужную ширину. По возможности, расположить внутренние элементы правильно.
Я
решил, что страница будет занимать все окно просмотра по горизонтали.
Логотип будет находиться по центру страницы. Заголовок будет находиться
по центру страницы. Меню будет фиксированной ширины. Текст будет
занимать все свободное место справа от меню. Копирайт будет находиться
по центру страницы.
Максимальная ширина страницы сто процентов.
Нужно определиться с минимальной. Минимальной будет 900рх. Для этого
достаточно задать min-width для body. Internet Explorer 6 не понимает
свойство min-width. Чтоб было меньше писанины, пропущу это. Перейду к
элементам страницы.
Логотип, заголовок и копирайт должны находиться
по центру страницы. Логотип – картинка. Заголовок и копирайт – текст.
Для этих элементов достаточно задать выравнивание текста (строчные
элементы).
20 end ENTER
21. text-align: center;
26 end ENTER
27. text-align: center;
35 end ENTER
36. text-align: center;
Ширину текста былины я не знаю. Меню имеет фиксированную ширину 125рх.
49 end ENTER
50. width: 125px;
Посмотреть. Контрольная точка 119 строк .
Теперь
нужно поставить меню на свое место, а текст былины должен занимать
оставшееся место справа от меню. Можно задать, для TEXT левое поле, а
меню вытащить из потока и позиционировать в нужном месте ( пример ). Но этот способ годится только для этой страницы. Если на другой странице, текста будет меньше, а пунктов меню больше то ( пример ).
Значит нужно сделать TEXT и UL плавающими. TEXT будет плыть вправо, а
UL влево. Копирайт прижался к TEXT, а в Opera 9.23 стала появляться
горизонтальная полоса прокрутки (при изменении размеров окна просмотра)
пример . Если бы оба элемента имели определенную ширину, то было бы просто, и полоса в опере исчезает ( пример ). Ну полосу можно убрать, задав для TEXT величину, например 100% ( пример ).
Как теперь укоротить TEXT, чтобы освободить место? Можно задать
отрицательное левое поле. По идее он не должен вылететь за левый край
окна, ведь ему дано направление для плавания вправо. Тогда меню должно
подняться вверх и ему не нужно плавать. Все правильно. Получилось.
Только меню лежит поверх текста былины ( пример ).
А как сделать свободное место для меню? Какую ширину, в процентах,
должен занимать TEXT, я не знаю. Сто процентов плюс место под меню,
будет много, полоса прокрутки появится во всех браузерах. Вот если
заключить эти два элемента в один контейнер. Этому контейнеру задать,
слева, нужный отступ, то должно получиться
(контейнер окрасил в красный цвет). Теперь нужно сдвинуть меню влево на
нужное расстояние. Можно сместить меню при помощи отрицательного левого
поля, а можно относительным позиционированием. Сделаю отрицательным
полем, так меньше писать ( пример ).
Получилось, только вот копирайт прилип к низу меню и контейнер для двух
элементов не полностью охватывает нужные мне элементы. Это нормальное
поведение. Ведь TEXT являются плавающими. Чтобы он полностью умещался в
контейнере можно для него (контейнера) задать плавающее положение. Но я
не смогу задать для него сто процентную ширину, ведь он имеет левый
отступ. Какое свойство следит за границами контейнера? За ними следит
OVERFLOW. Попробую дать ему значение AUTO – это должно заставить
следить за содержимым и границами. Ну вот, получилось, только не для
Internet Explorer 6 ( пример ).
мало того, в нем меню может проваливаться под TEXT. Что делать? Нужно
все-таки задать левое плавание для меню. Смещать его при помощи
относительного позиционирования, т.к. он удвоит отрицательное левое
поле. А для контейнера shell_content задать высоту равную ста
процентов. На других браузерах это не отразиться.
Так, подведу
итого. Нужно создать контейнер для двух элементов. Эти элементы
являются основным содержимым страницы. Дам ему идентификатор
shell_content. Этот контейнер должен иметь отступ слева. Этот отступ
будет равен расстоянию от края страницы до начала TEXT. Меню будет
позиционироваться от левого края TEXT, влево.
61 end ENTER
62. <div id="shell_content">
117 end ENTER
118. </div><!--окончание shell_content-->
37 end ENTER
38. #shell_content{
30. background: #FF2626;
40. padding-left: 307px;
41. overflow: auto;
42. height: 100%;
43. }
47 end ENTER
48. float: right;
49. width: 100%;
50. margin-left: -307px;
59 end ENTER
60. margin-left: -230px;
61. position: relative;
62. left: -230px;
Посмотреть. Контрольная точка 133 строки .
Высоту
строк я уже задал. Теперь нужно задать правильные расстояния между
элементами по вертикали. От верхнего края до логотипа 100рх.
14 end ENTER
15. padding: 10em 0 0 0;
От нижнего края логотипа до заголовка 50рх
37 end ENTER
38. margin: 0 0 5em 0;
От нижнего края заголовка до текста былины и меню 72рх
22 end ENTER
23. margin: 0 0 2.4em 0;
От последней строки былины, с учетом расстояния между абзацами, до копирайта 32рх
29 end ENTER
30. margin: 3.2em 0 0 0;
От нижнего края копирайта до низа страницы 78рх. Строка 15 имеет вид
15. padding: 10em 0 0 0;
Добавлю недостающее значение для нижнего отступа. Стала такой
15. padding: 10em 0 7.8em 0;
На
макете страница лежит на белом фоне – этот белый фон часть дизайна. Фон
шириной 50рх с каждой стороны. Обозначу его на странице.
10 end ENTER
11. html{
12. background: #006400;
13. padding: 50px;
14. }
Теперь видно, сколько каждый элемент занимает места. Ничего не забыл? Забыл убрать маркеры у списка.
70 end ENTER
71. list-style: none;
Посмотреть. Контрольная точка 142 строки .
Осталась самая малость – распределить фрагменты дизайна по странице.
Заголовок
и пункты меню, не стандартным шрифтом. Буду делать картинкой. Логотип,
понятно, картинка. Фон и реалистичные края, тоже картинка. Все
картинки. Страница не имеет фиксированной ширины. Можно менять размеры
окна просмотра у браузера и попытаться представить поведение. А можно,
страницу сделал один к одному как макет, сохранить макет как рисунок,
убрать всю раскраску из HTML-документа и запихнуть картинку с макета в
BODY как фоновое изображение. Попытаться изменять размеры окна. Тоже
будет видно, как и что. Какой кусок может принадлежать одному элементу,
а какой нескольким.
Начну с фона. Сделал бесшовной текстурой, сохранил в файл fon_page.jpg. Им залью фон документа. И сразу поменяю цвет окантовки.
Двенадцатую строку меняю на такую
12. background: #fff;
Шестнадцатую на
16. background: #fff url(fon_page.jpg) repeat left top;
Число
строк не изменилось. Теперь заголовок (файл heading.gif). Он будет
фоновым изображением. Повторяться не будет. Будет находиться по центру
контейнера (H1). Этот контейнер будет иметь высоту равную высоте
строки, но в пикселях. Шириной будет по размеру фонового изображения.
Центрироваться на странице будет при мощи равных полей. Текст, внутри
H1, нужно скрыть. Для скрытия использую свободный элемент строчного
уровня SPAN.
Строка 82 имеет такой вид
82. <h1>Илья Муромец и Соловей–разбойник</h1>
Добавлю в нее дополнительную разметку. Стала такой
82. <h1><span>Илья Муромец и Соловей–разбойник</span></h1>
Посмотреть. Контрольная точка 142 строки .
Дальше заменяю строку 22 на такую
22. background: url(heading.gif) no-repeat center;
Двадцать третью на такую
23. font-size: 30px;
Двадцать четвертую на такую
24. height: 34px;
24 end ENTER
25. width: 678px;
Внимание. Двадцать шестую и двадцать седьмую строки, удаляю. Теперь, в двадцать шестой строке написано
26. margin: 0 0 2.4em 0;
Меняю содержимое двадцать шестой строки на такое
26. margin: 0 auto 72рх;
27 end ENTER
28. h1 span{
29. display: none;
30. }
Посмотреть. Контрольная точка 144 строк .
Между
меню и текстом есть вертикальная линия (файл line.gif). Поставлю ее
фоном для shell_content. Отступлю от левого края 248рх. Повторять буду
по вертикали. От начала линии до начала первой строки (по вертикали)
24рх. Нужно задать для shell_content верхний отступ равный этому
расстоянию. А расстояние от заголовка до shell_content, сократить на
эту величину. Внизу все нормально.
Меняю содержимое двадцать шестой строки на такое
26. margin: 0 auto 48px;
Сорок девятую строку меняю на такую
49. background: url(line.gif) repeat-y 248px
Пятидесятую строку меняю на такую
50. padding: 2.4em 0 0 307px;
Посмотреть. Контрольная точка 144 строки .
Так,
что осталось поставить? Верхний край страницы, правый, нижний и левый.
Плюс два загнутых уголка. Получается 6 элементов. Что под них можно
задействовать? Все края должны тянуться значит, нужны элементы на всю
ширину для верха и низа, и на всю высоту для левой и правой сторон.
Вверху
есть логотип, а внизу копирайт. В общем, подходят для верхнего и
нижнего краев. Для верха нужно два элемента (край страницы и уголок).
Меню растянуть не выйдет, его просто так не выпустит shell_content.
Тогда добавлю свободный элемент строчного уровня в лого. Восемьдесят
третья строка была такой
83. <p id="logo"><img src="logo.gif" title="Логотип" alt="Логотип"></p>
Стала такой
83. <p id="logo"><span><img src="logo.gif" title="Логотип" alt="Логотип"></span></p>
Посмотреть. Контрольная точка 144 строки .
Для
logo фоновым изображением будет border_top.gif. Начинаться справа
сверху, повторяться по Х. А уголок будет фоном для дополнительного
элемента SPAN (повторяться не будет, положение будет слева вверху).
Блок логотипа (Р) не доходит до верха (нужного места), нужно растянуть.
Я
буду тянуть за счет вложенного в него дополнительного элемента. Этот
элемент станет блочного уровня. Отступ от логотипа до верха убираю.
Девятнадцатая строка была такой
19. padding: 10em 0 7.8em 0;
Становится такой
19. padding: 0 0 7.8em 0;
Сорок четвертая строка имела вид
44. background: #D69A0B;
Теперь будет такой
44. background: url(border_top.gif) repeat-x right top;
Вверху получились одни картинки. У меня они не масштабируются, поэтому расстояния между ними могу поставить не масштабируемыми.
Сорок шестая строка выглядела так
46. margin: 0 0 5em 0;
Теперь так
46. margin: 0 0 50px 0;
47 end ENTER
48. #logo span{
49. background: url(corner.gif) no-repeat left top;
50. display: block;
51. padding-top: 100px;
52. }
Посмотреть. Контрольная точка 149 строк .
Низ страницы буду делать также, только размеры оставлю относительные.
Сто сорок седьмая строка была
147.
<p id="copyright">© <a href="#"
title="Переход на страницу
автора">И. В. Карнауховой </a></p>
Стала
147.
<p id="copyright"><span>© <a href="#"
title="Переход на страницу
автора">И. В. Карнауховой
</a></span></p>
Тридцать вторая строка была
32. background: #7FFF00;
Стала
32. background: url(border_bottom.gif) repeat-x left bottom;
42 end ENTER
43. #copyright span{
44. background: url(corner_bottom_right.gif) no-repeat right bottom;
45. display: block;
46. padding-bottom: 7.8em;
47. }
Девятнадцатую строку удаляю за ненадобностью.
Посмотреть. Контрольная точка 153 строки .
Осталось
сделать правый и левый реалистичные края. Элементов тянущихся на всю
высоту нет. Делить эти части на несколько, мне показалось, нет смысла.
Просто добавлю два свободных элемента блочного уровня и задам в них
нужное фоновое изображение.
91 end ENTER
92. <div id="shell_border_left">
152 end ENTER
153. </div><!--окончание shell_border_left-->
92 end ENTER
93. <div id="shell_border_right">
153 end ENTER
154. </div><!--окончание shell_border_right-->
56 end ENTER
57. #shell_border_left{
58. background: url(border_left.gif) repeat-y left bottom;
59. }
60. #shell_border_right{
61. background: url(border_right.gif) repeat-y right top;
62. }
Посмотреть. Контрольная точка 163 строки .
С
этим разобрался. Теперь, если посмотреть на текст, то но прилипает к
правому краю. Чем его отодвинуть? Он находится внутри контейнера text.
Этот контейнер имеет сто процентную ширину, значит, он не подходит.
Можно указать для всех абзацев внутри этого контейнера нужный отступ
справа ( пример ).
Но в этом контейнере могут находиться не только абзацы. Тогда можно
указать нужный отступ для shell_content (окрасил красным) ( пример ). Так и сделаю.
Уберу
фоновый цвет из text. Удаляю строку семьдесят. А в блок определений для
идентификатора класса shell_content, в свойство padding, добавлю нужное
значение.
Строка шестьдесят пятая была такой
65. padding: 2.4em 0 0 307px;
Стала такой
65. padding: 2.4em 60px 0 307px;
Ну и иллюстрацию пущу в плавание к правому берегу
78 end ENTER
79. #text p img{
80. float: right;
81. }
Посмотреть. Контрольная точка 165 строк .
Осталось оформить меню.
Текст
ссылок заменю картинками. Поэтому нужно скрыть этот текст. Поставить
точный размер для самих ссылок, а пункты списка будут масштабируемыми.
Для одной ссылки будет три картинки объединенных в один файл (так для
каждой ссылки). Объединяю для того , чтоб быстрей отображались. Каждая
ссылка будет иметь свой идентификатор. Ссылка на страницу, на которой
нахожусь в данное время, будет иметь класс.
Строки 156, 157 и 158 имеют вид
156. <li><a href="#" title="Переход к сказкам">Сказки</a></li>
157. <li><a href="#" title="Переход к былинам">Былины</a></li>
158. <li><a href="#" title="Переход к легендам">Легенды</a></li>
Заменю на такие, соответственно.
156. <li><a id="link1" href="#" title="Переход к сказкам"><span>Сказки</span></a></li>
157.
<li><a class="valid" id="link2" href="#" title="Переход к
былинам"><span>Былины</span></a></li>
158. <li><a id="link3" href="#" title="Переход к легендам"><span>Легенды</span></a></li>
Удаляю строку восемьдесят семь.
90 end ENTER
91. li{
92. height: 1em;
93. padding-bottom: 0.0909em;
94. padding-top: 0.0909em;
95. }
Девяносто седьмая строка имеет вид
97. background: #FEFF0D;
Сделаю такой
97. background: no-repeat -256px;
99 end ENTER
100. height: 22px;
101. display: block;
102. border: none;
103 end ENTER
104. li a span{
105. display: none;
106. }
107. li a:visited{
108. background-position: 0px;
109. }
110. li a:hover{
111. background-position: -128px;
112. }
113. a.valid, a.valid:hover, a.valid:visited{
114. background-position: -256px;
115. cursor: default;
116. border-bottom: 2px solid Red;
117. }
118. #link1{
119. background-image: url(link1.gif);
120. }
121. #link2{
122. background-image: url(link2.gif);
123. }
124. #link3{
125. background-image: url(link3.gif);
126. }
Контрольная точка 195 строк .
Забыл о минимальной ширине.
18 end ENTER
19. min-width: 900px;
Теперь можно вынести стили во внешний файл.
Создаю
файл style_all.css. В HTML-документе выделяю часть кода со строки
(включая ее) 7 по строку (включая ее) 127. Вырезаю этот кусок и
вставляю в style_all.css. В HTML-документе удаляю строки шесть, семь и
восемь. Подключаю внешнюю таблицу стилей.
5 end ENTER
6. <link rel="stylesheet" type="text/css" media="screen" href="style_all.css">
Посмотреть. Контрольная точка 74 строки . И 121 строка style_all.css. Можно оптимизировать CSS.
Минимальную
ширину для Internet Explorer 6, можно сделать при помощи дополнительных
свободных элементов блочного уровня. Недостающие стили вынести в
отдельный файл и подключать его, как дополнение, только для Internet
Explorer 6.
Посмотреть.
Вот и все. Вариантов куча. На мой взгляд, на первых порах, главное последовательность:
Предварительный HTML-код.
Задать
всем элементам HTML нужные шрифты (семейства шрифтов, насыщенность,
размер шрифта, стиль шрифта) и их цвет. Можно сразу указать высоту
строки.
Следующий шаг – задать нужную ширину
Задать нужную высоту.
Задать правильные расстояния между элементами по горизонтали.
Задать правильные расстояния между элементами по вертикали.
Распределить фрагменты дизайна по элементам страницы.
Это сообщение отредактировал Pupil - 14 Октября 2007, 00:16
Присоединённые файлы
example.rar ( 83.59к )
Кол-во скачиваний: 309
|
|
Категория: Статьй и уроки |
Просмотров: 592 |
Добавил: CorsaR
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
Копирование материалов разрешено,