| » Меню сайта |
Разделы сайта
Шаблоны
Скрипты
Статьи
Графика
|
|
Главная » 2008 » Сентябрь » 10 » Верстка по макету
Верстка по макету | 10.Сен.2008 | 17:47:21 |
Написано к этой теме.
Попытаюсь сделать страницу по рисунку (кто хочет, может использовать PSD).
Создаю
каталог. В него буду складывать все файлы. CSS будет внутренний (пока),
т.е. все в одном HTML файле. Теперь создаю HTML файл с именем
talk.html. Пишу предварительный код, т.е. определяюсь с элементами на
странице. Меню – это список ссылок. Три заголовка – будут заголовками
второго уровня. Заголовка первого уровня – не увидел. Два абзаца с
текстом и один со ссылкой на копирайт. Для себя решил, что контент
будет тянуться по вертикали. Теперь нужно все это закодировать.
Открываю talk.html и пишу предварительный код документа.
 1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
2.<html>
3.<head>
4.<title>Test</title>
5.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
6.<style type="text/css">
7.</style>
8.</head>
9.<body>
 10.<ul>
11. <li><a href="#">home</a></li>
12.<li><a href="#">about us</a></li>
13.<li><a href="#">tickets</a></li>
14.<li><a href="#">concerts</a></li>
15.<li><a href="#">cocktails</a></li>
16.<li><a href="#">contacts</a></li>
17.</ul>
18.<h2>welcome to talk-mania.com</h2>
19.<p>
20.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing<br>
21.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum.
22.</p>
23.<h2>tickets</h2>
24.<p>
25.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing<br>
26.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et
27.</p>
28.<h2>here you can add text or images</h2>
29.<p>
30.<a href="#">Copyright Talk-Mania.com 2007</a>
31.</p>
32.</body>
33.</html>
Всего 33 строки.
Запускаю шоп и открываю в нем картинку.
Основная
часть имеет фиксированную ширину. Ставлю вертикальную направляющую в
центр. Ее координата: Х 380рх. Нахожу, где заканчиваются, лучи от шара
(слева картинки). Ставлю еще вертикальную направляющую. Ее координата:
Х 50рх. Расстояние между этими направляющими: 330рх. От центральной
направляющей, вправо, ставлю еще направляющую через 330рх. Получается
710рх. Все лучи, с двух сторон, уместились. Теперь ставлю
горизонтальную направляющую. Ее место на границе между меню и полом на
картинке. Координата: Y 329рх. Выделяю область с координатами: Х 50рх Y
329рх, и Х 710рх Y 0рх. Выделенную часть сохраняю в файл с именем 1gif.
Размер, полученной картинки, должен быть:
660х329рх.
Теперь
открываем наш HTML файл. Ставим курсор в конец шестой строки и давим
ENTER. Оказываюсь на пустой строке, в ее начале. Все остальные строки
сместились ниже.
Седьмая строка
7. *{
Восьмая
8. margin: 0;
Девятая
9. padding: 0;
Десятая
10. }
Это
сделает все поля и отступы, у всех элементов, равными нулю (единицы
измерения не указываю – нуль и в Африке нуль). Будет уверенность, что
во всех браузерах, поля и отступы одинаковы. Далее пишем стили для
BODY. (Далее – значит нажать ENTER в конце последней написанной строки
и начинать писать на пустой. Все, что было ниже – смещается.)
Одиннадцатая строка (открываю описание для BODY)
11. body{
В
двенадцатой строке займемся фоном. Буду использовать сокращенную форму
записи для фона (background). Поставлю фоном картинку 1.gif
(url(1.gif). Запрещу ее повторение (no-repeat). Поставлю ее по центру
элемента и прижму к верхнему краю (center top). Получается
12. background: url(1.gif) no-repeat center top;
В тринадцатой строке закрываем стили для BODY
13. }
Весь документ, на данном этапе, уместился в 40 строк
(когда указываю число строк в документе, то можно посмотреть на него в
браузере, попить кофе или пива). Смотрим на творение… Картинка на
месте, но весь текст лежит на ней, нужно его подвинуть.
Картинка
1.gif имеет высоту 329рх. Вот на эту величину и сделаем отступы
(padding). Верхний – 329рх, а остальные: правый, нижний, левый - равны
нулю. В НАЧАЛЕ тринадцатой строки давим ENTER. В тринадцатой (13) пишем
13. padding: 329px 0 0 0;
И сразу, для правильных браузеров, поставим минимальную ширину (min-width) страницы. Четырнадцатая строка
14. min-width: 660px;
Весь документ, на данном этапе, уместился в 42 строки. Если не так, то сделана ошибка. Если все нормально, то можно сделать перерыв и насладиться проделанной работой.
Отдохнули,
насладились? Пора заняться основным фоном страницы. Открываем шоп с
макетом. Вся страница должна быть залита мелкой клеткой. Эта клетка
должна совпадать с установленным 1.gif фоном. Клетки начинаются с
самого верха, но самая верхняя клетка не полная, а половинчатая.
Значит, наша бесшовная текстура должна начинаться с пол клетки (верхний
край). Фон 1.gif расположили по центру страницы, значит и текстуру
нужно подбирать, отталкиваясь от центра макета. Уже выяснили. Что
начинаться текстура должна с пол клетки (верх), значит и заканчиваться
должна этим. Делаю горизонтальную направляющую: Y 765рх, подбираю место
для второй горизонтальной направляющей. Помню, что при вертикальном
повторении, куски должны совпадать. Место для второй направляющей: Y
768рх. Делаю внизу картинки… просто чтоб не мешало в дальнейшем. Ведь
все эти направляющие могут еще пригодиться. Теперь нужно поставить две
вертикальные направляющие. Они должны быть на равном расстоянии от
центральной вертикальной направляющей. Полученный кусок должен
совпадать при повторении от центра (центральная направляющая и центр
html страницы) влево и вправо по горизонтали. Ура, увидел, вот их
координаты: Х 376рх и Х 383. Выделяю фрагмент размером 6х3рх и сохраняю
в файл 2.gif.
Теперь скорей поставить этот фон на страницу. Открываю свой HTML документ и начинаю ваять.
Фоном
(background) будет 2.gif (url(2.gif)). Будет повторяться (repeat) по
всем осям. Начало фона должно быть в центре и в верху страницы (center
top). Ё мое, а куда его этот фон, пихать? Контейнер BODY уже занят… Не
беда, ведь есть еще контейнер HTML. Чем он плох для фона? И находится
под BODY. Пытаюсь. В конце десятой строки давлю ENTER. В одиннадцатой
пишу
11. html{
В двенадцатой
12. background: url(2.gif) repeat center top;
В тринадцатой – закрываем описание
13. }
Весь документ, теперь, 45 строк. Пьем кофе и наслаждаемся проделанной работой, смотрим правильное (или не правильное) совпадение этих (1.gif и 2.gif) фонов.
Вроде все правильно.
Теперь
строю меню. Открываю шоп. Добавляю две вертикальные направляющие по
бокам основного рисунка: Х 102рх и Х 658рх. Ширина получилась: 556рх.
Одна горизонтальная направляющая уже есть, отделял меню от фоновой
картинки Y 329рх. Добавляю горизонтальную направляющую, под меню: Y
363рх. И еще одну направляющую ставлю на начало вертикальной пунктирной
линии (она разделяет колонки с текстом): Y 400рх. Общая высота
получилась: 71рх, высота меню: 34рх, высота до пунктира: 37рх.
Теперь
займемся фоном самого меню. В PSD скрываем слой «HOME ABOUT US
TICKETS». Я делаю из GIF’а. Закрашиваю надписи в меню, соответствующим
цветом, т.е. очищаю меню от надписей. Ищу повторяющуюся часть
(повторение будет слева направо) и ставлю вертикальные направляющие: Х
106рх и Х 146рх. Выделяю эту часть размером 40х34рх и сохраняю с именем
3.gif. Заодно посмотрю ширину серого бордюра у меню – она составляет
4рх.
Перехожу к HTML документу. У меня меню – это список (ul) ссылок, буду его оформлять. В конце 18 строки давлю ENTER. В 19 пишу
19. ul{
Все
меню имеет ширину (width) 556рх вместе с бордюрами (border). Бордюры по
4рх. Высотой (height) меню будет 71рх. Далее (т.е. пишем на новой
строке)
20. width: 548px;
Т.е. указал ширину меню без бордюров. Далее (т.е. пишем на новой строке) указываю высоту
21. height: 71px;
Теперь
нужно описать левый (border-left) и правый (border-right) бордюры. Они
имеют ширину 4рх, стиль - solid и цвет - #919191. Далее
22. border-left: 4px solid #919191;
23. border-right: 4px solid #919191;
Фон
(background)меню имеет цвет #919191, фоновым рисунком будет 3.gif
(url(3.gif)), повторять его буду по оси Х (repeat-x), расположен он
будет слева и вверху (left top). Далее
24. background: #919191 url(3.gif) repeat-x left top;
Теперь
нужно поставить меню под фоновую картинку 1.gif. Это сделать не сложно,
для этого достаточно сделать левое и правое поле (margin), от меню,
одинаковыми. Указание точных размеров не годится. Указывать проценты
нет возможности. Ведь я не знаю ширину окна у пользователя. Есть выход
– поставлю auto.
Получается: верхнее 0, правое auto, нижнее 0,
левое auto. Значит верхнее и нижнее равны нулю, а правое и левое –
auto. Можно сократить запись. Далее
25. margin: 0 auto;
Закрываю. Далее
26. }
На данном этапе получилось 53 строки.
Пункты списка (li) – элементы блочного уровня, т.е. они располагаются
друг под другом. Мне нужно их расположить (визуально, на экране
дисплея) в линию. В конце 26 строки- ENTER и пишу в 27, 28 и 29
строках, соответственно
27. li{
28. display: inline;
29. }
Ссылки
находятся внутри пунктов списка. Для них (для ссылок) нужно подобрать
насыщенность шрифта, размер шрифта и гарнитуру. Насыщенность: bolder,
размер:
12рх, гарнитура: MS Sans Serif или Geneva без засечек: sans-serif. Получается, далее
30. li a{
31. font: bolder 12px "MS Sans Serif", Geneva, sans-serif;
Подчеркиваний ссылок мне нужно. Далее
32. text-decoration: none;
Ссылки
написаны заглавными буквами, а в HTML коде нет. Нужно перевести все
символы в верхний регистр. Лезть никуда не нужно. Достаточно
трансформировать, ссылки, визуально. Далее
33. text-transform: uppercase;
Ой, забыл цвет текста ссылок указать. Не беда, далее
34. color: #424242;
Шрифт почти совпадает, попробую уменьшить расстояние между символами. Далее
35. letter-spacing: -1px;
расстояние между словами поставлю 4рх. Далее
36. word-spacing: 4px;
Надписи
не центрированы по вертикали. Для их центровки буду использовать
межстрочный интервал (line-height). Более подробно, о нем, в следующий
раз. Пока для ссылок дам значение равное 34рх. И закрою описание стилей
для элемента А внутри LI. Далее
37. line-height: 34px;
38. }
Теперь
нужно расположить ссылки, примерно, равномерно по меню. Для этого
поставлю пунктам списка (li), слева и справа, поля по 17рх. В конце 28
строки давлю ENTER. Далее
29. margin: 0 17px;
На данном этапе – 66 строк.
Начинаю просматривать в Opera 9.23 – нормально, в Firefox 2.0.0.6 –
нормально. В Internet Explorer 6 и 7 – не нормально. При изменении
размера окна просмотра, по горизонтали, появляется сдвиг.
Ну вот, приплыли, суши весла. Что теперь делать? Сильно мудрить не буду, а пойду примитивным путем.
Сдвиг
составляет 1рх. Всегда сдвигается влево. Попытаюсь его спрятать от
глаз, сделать так, чтоб не бросался сильно в глаза. Только как его
замаскировать?
Можно посмотреть, как выглядит скругление, у
основной части макета. Оно из одно пиксельных квадратов. Если провести
вертикальную линию, шириной в 1рх, отступив от последнего угла на 2рх
вниз, должно получиться. Попробую. Добавлю горизонтальную направляющую
Y61, посмотрю как это выглядит.
Линию убираю, а направляющую оставлю.
Вперед,
к HTML файлу. Сделаю сейчас оболочку для основной части. Для нее
использую свободный элемент блочного уровня DIV. И так, выкидываю:
двадцатую строку (width: 548px)
двадцать четвертую строку (margin: 0px auto).
Меняю значения в
двадцать первой и двадцать второй строках. Ставлю ширину бордюра в 3рх.
двадцать первая (border-left: 3px solid #919191)
двадцать вторая (border-right: 3px solid #919191)
В 16 строке меняю, для BODY, верхний отступ. Ставлю значение равное 61рх. Стала выглядеть так
16. padding: 61px 0 0 0;
Документ стал 64 строки. Заключу содержимое в тег div, с идентификатором shell. В конце 40 строки давлю ENTER. В 41 открываю контейнер
41. <div id="shell">
Закрываю его после последнего абзаца. В конце 63 строки ENTER. В 64 пишу
64. </div><!--окончание shell-->
Теперь опишу стили для оболочки. В конце 37 строки ENTER. В 38, пишу имя идентификатора и открываю описание
38. #shell{
Далее
39. width: 555px;
40. border-left: 1px solid #919191;
41. border-right: 1px solid #919191;
42. margin: 0 auto;
43. padding: 268px 0px 0px;
44. }
Тут
уже все понятно, за исключением одного. Ширина должна быть 554рх, а она
555. Сделал не четный размер. Теперь Internet Explorer не будет
спотыкаться, а остальные начнут, но бордюр будет это компенсировать.
Ведь общая ширина оболочки стала 557рх (не четная) и браузеры пытаются
ее отцентрировать.
Пора заняться содержанием, т.е. той частью, где
заголовки и текст. Сделаю блок с идентификатором content. В конце 56 –
ENTER. В 57 открываю блок с id content.
57. <div id="content">
В конце 71 – ENTER. В 72 закрываю этот блок.
72. </div><!--окончание content-->
В документе стало 75 строк.
Открываю шоп с макетом. Нахожу горизонтальную направляющую Х 400рх, и
под ней вертикальную пунктирную линию. Эту линию сделаю фоновым
рисунком. Нахожу повторяющийся фрагмент, сохраняю его с именем 4.gif
Направляющие: Х 400 рх, Х 403 рх, Y 339 рх, Y 340рх. Фрагмент получился
1х3рх.
Переходим к HTML. В конце 44 строки давлю ENTER. В 45 пишу ID content и открываю описание
45. #content{
Фоновым
цветом будет #919191, фоновым рисунком будет 4.gif, рисунок будет
повторяться по оси Y, располагаться будет с отступом от левого края на
237рх и прижат к верхнему краю блока.
Получаем, далее
46. background: #919191 url(4.gif) repeat-y 237px top;
47. }
Документ
стал 78 строк. Визуальное разбиение на две колонки сделано. Приступаю к
физическому воздействию. Делаю два блока, левый и правый.
Соответственно left и right. В конце 60 строки давлю ENTER. В 61
открываю блок с id left.
61. <div id="left">
В конце 66 строки давлю ENTER. В 67 закрываю этот блок
67. </div><!--окончание left-->
В конце 67 строки давлю ENTER. В 68 открываю блок с id right.
68. <div id="right">
В конце 74 строки давлю ENTER. В 75 закрываю этот блок
75. </div><!--окончание right-->
Документ – 82 строки.
Нужно сделать эти блоки свободно перемещаемыми (float). Только один
будет прижат к левой (left) стороне, а другой к правой (right).
Позиционировать
буду их разными способами. Левому дам относительное (relative)
позиционирование, а правый размещу при помощи отрицательного поля
(margin).
Ширину задаю, как обычно, учитывая поля и отступы. В конце 47 строки давлю ENTER. В 48 пишу
48. #left{
Далее
49. width: 211px;
50. float: left;
51. padding: 0 12px 0 14px;
52. position: relative;
53. top: -37px;
54. }
55. #right{
56. width: 297px;
57. float: right;
58. padding: 0 9px 0 11px;
59. margin-top: -37px;
60. }
Вот, разными способами, поднял эти блоки на высоту 37рх от их нормального положения. Документ 95 строк.
Посмотрю на творение. Левая колонка не вся закрашена и вылетела за
нижний край основного контейнера, абзац с копирайтом тоже не на месте.
Попробуйте закрасить левую , правую колонки и абзац с копирайтом,
разными цветами. Красиво получается. Так и должно быть. Это нормальное поведение плавающих блоков.
Оставлю
их в покое и займусь оформлением заголовков второго уровня (h2) и
абзацев (р), находящихся внутри колонок. Двойную пунктирную линию, в
конце параграфа, сделаю фоновым изображением. Запускаю шоп.
Направляющие: Х 353рх, Х 356рх, Y 521рх, Y 525рх. Сохраняю с именем
5.gif. Размер картинки 3х4рх.
Возвращаюсь к документу. В конце 18 строки давлю ENTER. В 19 пишу
19. h2{
Далее
20. font: bold 12px Arial, Helvetica, sans-serif;
21. text-transform: uppercase;
22. height: 30px;
23. padding: 8px 0 0 1px;
24. }
В конце 66 строки давлю ENTER. В 67 пишу
67. #left p, #right p{
68. color: #953514;
69. font: lighter 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
70. padding-bottom: 12px;
71. letter-spacing: -1px;
72. word-spacing: 3px;
73. background: url(5.gif) repeat-x bottom;
74. }
Тут уже все понятно. Документ 109 строк.
На
странице три заголовка второго уровня. Два темных и один светлый. Стили
для H2 уже написаны, остается внести поправку для светлого заголовка.
Он на странице один, значит, могу использовать для него идентификатор.
В конце 53 строки давлю ENTER. В 54 пишу
54. #edit{
Далее
55. color: #fff;
56. font-family: Verdana, sans-serif;
57. margin: 48px 0 0 16px;
58. word-spacing: 3px;
59. }
Стили описаны. Теперь идем на 107 строку. Она имеет вид
<h2>here you can add text or images</h2>
Добавляю идентификатор и, получаю такой результат
<h2 id="edit">here you can add text or images</h2>
Документ 115 строк.
Для оформления низа страницы, запускаю шоп. Нужны скругления, надпись
копирайта и девушка. Я сделаю низ из трех картинок. Первая будет
скркгления, вторая – девушка и третья – ссылка на копирайт. Приступаю.
Направляющие
на Y 709рх и Y 719рх. Начинаю выделение их с точки с координатами
Х102рх Y 709рх, заканчиваю в точке с координатами Х 658рх Y 719рх.
Выделенная область 556х10рх. В нее попала часть девушки и кусочки фона
под скруглениями. Убираю это лишнее. Сохраняю с именем 6.gif. Ай,
ширина оболочки «shell» равна 555рх. Ладно, открою, для редактирования
файл 6.gif и сделаю размер картинки 555рх (высота не страдает),
сохраняю. Теперь все нормально.
Силуэт девушки. Направляющая Y
638рх, а направляющая Y 765рх. уже есть. Направляющая Х 568рх и Х
673рх. Выделяю полученный прямоугольник (105х127рх).
В
этом выделении оставляю силуэт, а остальное убираю. Сохраняю в файл с
именем 7.gif. Теперь копирайт. Направляющие: Х 111рх, Х 279рх, Y 723рх,
Y 744рх. Полученный прямоугольник сохраняю в файл с именем 8.gif.
Размер 168х21рх.
С рисованием закончено, перехожу к talk.html.
Заключу
параграф с копирайтом в свободный элемент блочного уровня DIV. Присвою
ему идентификатор copyright. В конце 108 строки давлю ENTER. В 109 пишу
109. <div id="copyright">
В конце 112 строки давлю ENTER. В 113 пишу
113. </div><!--окончание copyright-->
Теперь
само описание для этого блока. Блок будет шириной 555рх, ведь контейнер
shell имеет ширину 555рх. Высотой сделаю 10рх потому что пунктирная
линия, разделяющая колонки, не должна доходить до низа. Фоновой
картинкой будет 6.gif. Ах, да, ведь низ левой колонки вылетает за
окрашенную часть. Левый и правый блоки – имеют плавающее положение,
находятся внутри контейнера content. Блок copyright, тоже находится
внутри этого контейнера. Значит нужно расположить контейнер copyright
ниже всех блоков с float. Этим заведует clear. Потом нужно задать
смещение, относительно родительского элемента, вниз на 10рх. Это
добавит скгругление. В конце 53 строки давлю ENTER. В 54 пишу
54. #copyright{
55. width: 555px;
56. height: 10px;
57. background: url(6.gif) no-repeat bottom;
58. clear: both;
58. position: relative;
60. bottom: -10px;
61. }
Параграф,
внутри этого блока, будет иметь фоновое изображение 7.gif. Шириной
будет 105рх, высотой 127. Это изображение должно выходить за границы
copyright.
Относительным позиционированием уже пользовался.
Плавающие тоже делал и позиционировал. Сделаю абсолютным
позиционированием. При абсолютном позиционировании, объект вылетает из
общего потока. Он перемещается в верхний левый угол контейнера BODY,
если не был вложен в блок с относительным позиционированием. У меня он
находится внутри относительно позиционированного элемента. Значит,
отсчет будет от границ контейнера copyright. Смещать буду от верхнего и
правого краев.
В конце 61 строки давлю ENTER. В 62 пишу
62. #copyright p{
63. background: url(7.gif);
64. width: 105px;
65. height: 127px;
66. position: absolute;
67. top: -71px;
68. right: -15px;
69. }
Документ 133 строки.
Теперь ссылка на копирайт. Ее сделаю картинкой 8.gif. Сама надпись не
нужна, верней ее не должно быть видно на дисплее. Для скрытия использую
свободный строчный элемент span. Надпись «Copyright Talk-Mania.com
2007» заключу в этот элемент. Строка 127 имеет вид
<a href="#">Copyright Talk-Mania.com 2007</a>
Придам ей такой
<a href="#"><span>Copyright Talk-Mania.com 2007</span></a>
Теперь напишу класс для этого элемента. В конце 43 строки давлю ENTER. В 44 пишу
44. .none{
45. display: none;
46. }
Класс создан, нужно сказать, что надпись принадлежит ему. Строка 130 имеет вид
<a href="#"><span>Copyright Talk-Mania.com 2007</span></a>
Придам ей такой
<a href="#"><span class="none">Copyright Talk-Mania.com 2007</span></a>
Займусь
самой ссылкой. Она должна находиться под левым нижним углом. Буду
использовать абсолютное позиционирование. Нужно сделать этот элемент
блочным (block), шириной 168рх, высотой 21рх, фоновым изображением, как
уже сказал, будет 8.gif. Остается посмотреть координаты и все. В конце
72 строки давлю ENTER. В 73 пишу
73. #copyright p a{
74. display: block;
75. width: 168px;
76. height: 21px;
77. background: url(8.gif);
78. position: absolute;
79. top: 84px;
80. left: -457px;
81. }
Документ 145 строк.
Должен быть готов. Смотрю. Ну вот, силуэт прилипает к белому заголовку.
Я забыл сделать отступ от нижнего края колонки. Сейчас сделаю.
Отступ
составляет 104рх, но я смещал колонки на 37рх, значит, нужно увеличить
отступ на 67 рх. Нахожу, в стилях, идентификатор content и добавляю
нижний отступ. В конце 55 строки давлю ENTER. В 56 пишу
56. padding-bottom: 67px;
Такое же расстояние нужно прибавить к смещению copyright. Строка 64 имеет вид
bottom: -10px;
Придам ей такой
bottom: -77px;
Еще,
первый заголовок не весь написан в верхнем регистре, последние три
буквы маленькие. Заключу эти буквы в свободный строчный элемент span и
создам для него класс. В конце 43 строки давлю ENTER. В 44 пишу
44. .lowercase{
45. text-transform: lowercase;
46. }
Строка 127 имеет вид
<h2>welcome to talk-mania.com</h2>
Придам ей такой
<h2>welcome to talk-mania.<span class="lowercase">com</span></h2>
Документ 149 строк.
Теперь вынесу все стили в отдельный файл. Будет внешняя таблица стилей
для экрана. Создаю файл screen.css. Открываю его. Копирую из talk.html
все стили и переношу их в screen.css. Вырезаю (из talk.html) со строки
7 (включая ее), по строку 112 (включая ее). Удаляю строки 6, 7, 8. Документ talk.html 41строка. Документ screen.css 106 строк. Теперь подключаю внешнюю таблицу к документу. В конце 5 строки давлю ENTER. В 6 пишу
6. <link rel="stylesheet" type="text/css" media="screen" href="screen.css">
Экран обеспечен. Теперь создам еще один файл со стилями, но для принтера. Имя будет print.css.
В talk.html подключу этот файл. В конце 6 строки давлю ENTER. В 7 пишу
7. <link rel="stylesheet" type="text/css" media="print" href="print.css">
Документ 43 строки.
Открою print.css. И напишу в нем следующее:
1. ul, #edit, #copyright{
2. display: none;
3. }
4. h2{
5. text-transform: uppercase;
6. }
7. .lowercase{
8. text-transform: lowercase;
9. }
Документ 9 строк. Ну, вот и все. Вот что вышло.
Для печати
Архив с эти всем.
Это сообщение отредактировал Pupil - 11 Сентября 2007, 22:15
Присоединённые файлы
talk.rar ( 59.75к )
Кол-во скачиваний: 865
|
|
Категория: Статьй и уроки |
Просмотров: 580 |
Добавил: CorsaR
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
Копирование материалов разрешено,