Шаг 5
Web-страница оформление внешнего вида
(правило элемента body)
- Пишем правило для элемента body между тэгами:
<style type="text/css"></style>. - Параметры элемента body определяют, как «тело» документа (содержание страницы) будет отображаться на экране компьютера.
Ставим курсор сразу после тэга <style type="text/css">,
перед закрывающим тэгом </style>.
Нажимаем на клавишу Enter на клавиатуре компьютера, после
чего закрывающий тэг </style> переместится на одну строку ниже.
Нажимаем еще раз на клавишу Enter, после чего тэг
</style> перемещается еще на одну строку ниже, оставляя после себя свободную, пустую строку.
Ставим курсор в начало пустой строки и пишем кодовое слово body
после которого ставим открывающую фигурную скобку ({).
Курсор должен находиться сразу после открывающей фигурной скобки (если
Вы после написания фигурной скобки нажмете на клавишу пробел, то «фокус» не
получиться), нажимаем на клавишу Enter, при этом появляется
выскакивающее меню. В выскакивающем меню с помощью полосы прокрутки ищите и выделяете
курсором font-family.
Нажимаем на клавишу Enter и программа автоматически печатает
на нашей web-странице font-family:, при этом появляется еще
одно выскакивающее меню, в котором мы выделяем курсором Verdana,
Arial, Helvetica, sans-serif.- Нажимаем на Enter, на странице появляется Verdana, Arial, Helvetica, sans-serif, после чего нужно поставить точку с запятой (;).
- В итоге у нас появилась следующая запись:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;- Элемент font-family – тип шрифта.
- Verdana, Arial, Helvetica, sans-serif – это шрифты, которыми будет напечатан текст страницы сайта. На самом деле мы выбрали шрифт Verdana, но шрифты всегда пишутся сериями, на случай, если на компьютере посетителя, который зайдет на наш сайт не будет установлен шрифт Verdana, то высь текст у посетителя будет воспроизводиться шрифтом Arial и т.д.
- Продолжаем наше кодовое письмо, в конце только что написанной строки, ставим курсор сразу после точки с запятой и нажимаем на Enter и на следующей строчке пишем: font-size: 100%;
- Элемент font-size – размер шрифта.
- В нашем документе во всех элементах, где не указано иного размера, шрифт будет по умолчанию - 100%.
- Не забывайте ставить в конце каждой строчки точку с запятой (;).
- С начала следующей строки пишем: color: #666666;
- Элемент color – цвет шрифта.
- Код цвета шрифта - #666666 (темно-серый).
- После того, как Вы напечатаете код color, должна появиться выскакивающая цветовая палитра, где Вы можете выбрать любой цвет для шрифта, который вам больше всего подходит. Для этого достаточно навести стрелку курсора на квадрат с понравившимся вам цветом, и кликнут левой кнопкой мышки. В результате кодовая запись цвета появится на вашей странице.
- С начала следующей строки пишем: margin: 0px;
- Элемент margin – размер полей внешнего отступа.
- Значение размера - 0px.
- На следующей строке пишем: padding: 0px;
- Элемент padding - размер полей отступа со всех четырех сторон внутри элемента body. Размер внешних полей отступа равен нулю.
- На следующей строке пишем: background-color: #666666;
- Элемент background-color – цвет заднего фона, на котором будет находиться наша страница.
- Код цвета заднего фона - #666666.
- На следующей строке ставим закрывающую фигурную скобку (}).
- Итак, у нас есть правило элемента body, находящееся между тэгами отделения стиля:
- Вы можете просто набрать кодовый текст правила элемента body на клавиатуре компьютера в блокноте или в Windows.
- Потом Вы можете скопировать набранный текст, а так же любой кусок кода или текста и вставить его в Вашу веб страницу.
- Для копирования: выделяем курсором набранный текст, необходимый для размещения на странице, помещаем
курсор на выделенный текст, щелкаем правой кнопкой мышки, в выскакивающем меню щелкаем, но уже левой
кнопкой мышки на Копировать. Затем переходим в Dreamweaver на нашу
web страницу, в режиме Код, ставим курсор между тэгами
<style type="text/css"></style>, нажимаем правую кнопку мышки, в выскакивающем меню левой кнопкой мышки щелкаем Вставить. Все как в Windows. - Шаг 6 >>>
