- •1. Структура html-документа. Теги. Структра html-документа
- •2. Позиционирование. Фон. Рамки и отступы. Психология дизайна. Позиционирование
- •Отступы (padding)
- •Цвет и фон
- •3. Работа с текстом. Определение стилей.
- •4. Дополнительные возможности html.
- •5. Графические элементы. Фильтры изображений.
- •Фильтры, применяемые к изображению
- •6. Размещение сценариев JavaScript.
- •7. Переменные. Операторы. Встроенные функции.
- •8. Встроенные объекты JavaScript.
- •9. Объекты браузера и документа.
- •10. Свойства формы, как объекта , доступного сценарию JavaScript.
- •11. Кнопки. Флажки. Переключатели. Списки. Текстовая область.
- •12. Каскадные таблицы стилей (css). Виды стилей.
- •13.Общие правила построения php-программ
- •14. Типы данных. Выражения. Функции
- •15. Константы. Переменные. Операторы
- •16. Управляющие структуры.
Цвет и фон
Цвет и фон страницы выбираються по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.
Итак сначала про цвет. Для его вставки в строку с тегом <BODY> Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид.
Тепер о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:
<BODY BACKGROUND="images.gif">
Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологаеться, что графический файл рассположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.
Использование фонового цвета более рационально с соображений быстрой загрузки сайта, рисунки вообще грузяться дольше, даже самые маленькие.
Тег <BODY> может также иметь параметры отступов в документе (определяются числовым значение).
leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу
<BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">
3. Работа с текстом. Определение стилей.
Большинство HTML документов имеют заголовок. Для его создания используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.
<H1>Заголовок</H1>
…
<H6>Заголовок</H6>
Для создания нового абзаца используется тег <P>, а для перехода на новую строчку без создания абзаца - тег <BR>. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге <P> элемент ALIGN, которым может задаватся выравнивание абзаца:
<P ALIGN=LEFT> По левому краю </P>
<P ALIGN=CENTER> По центру </P>
<P ALIGN=RIGHT> По правому краю </P>
<P ALIGN=JUSTIFY> Текст, находящийся между этими элементами выравнивается по ширине </P>
Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами.
COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).
<font COLOR="red"> Красный </font>
<font COLOR="#FF0000"> Красный </font>
С помощью элемента STYLE тега <SPAN> (закрывающийся тег </SPAN> обязателен) можно задавать выделение текста любым цветом:
<SPAN STYLE="BACKGROUND-COLOR: lightgreen"> Светлозеленый </SPAN>
STYLE
Тег <STYLE> применяется для определения стилей элементов веб-страницы. Тег <STYLE> необходимо использовать внутри контейнера <HEAD>. Можно задавать более чем один тег <STYLE>.
Синтаксис
<head> <style type="text/css"> ... </style> </head>
Параметры
Media - Определяет устройство вывода, для работы с которым предназначена таблица стилей.
Type - Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.
Описание параметров тега <STYLE>
Параметр MEDIA
Устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы.
Синтаксис
<style media="all | screen | print | projection | braille | speech">...</style>
Аргументы all
Все устройства . screen
Экран монитора. print
Печатающее устройство вроде принтера. projection
Проектор. braille
Устройства, основанные на системе Брайля, которые предназначены для слепых людей. speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
Можно устанавливать сразу несколько значений, перечисляя их через запятую.
Значение по умолчанию screen
Результат данного примера продемонстрирован на рис. 2, где применяется стиль с параметром media="screen". На рис. 3 показана та же страница, но при этом уже действует стиль для печати, заданный параметром media="print". Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.
Параметр TYPE
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <STYLE>.
Синтаксис
<style type="text/css">...</style>
Аргументы В качестве значения используется MIME-тип — text/css.
Значение по умолчанию text/css