Цвет текста и фона Web-страницы
белый – white
бирюзовый – teal
желтый – yellow
зеленый
– green
золотой – gold
красно-коричневый – maroon
красный – red
лимонный – lime
морской волны – aqua
фуксиновый – fuchsia
черный – black
пурпурный –purple
серебряный – silver
серый- gray
синий – blue
темно-голубой - navy
оливковый – olive
- цвет шрифта
- цвет фона страницы
Слайд 25
Слайд 26
Бегущая строка
BEHAVIOR — способ выполнения эффекта бегущей строки:
scroll —
текст исчезает за краем Web-страницы;
slide — после выполнения заданного числа циклов, текст остается у левого или правого поля Web-страницы;
alternate — направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла.
BGCOLOR — цвет фона бегущей строки
Direction— направление перемещения текста:
left — влево;
right — вправо.
HEIGHT — высота бегущей строки.
hspace — отступ в пикселях текста бегущей строки от левого и правого полей Web-страницы.
Бегущая строка — это анимационный эффект, при котором строка текста перемещается по странице один (несколько ) раз, или постоянно. Атрибуты этого дескриптора определяют параметры перемещения текста.
Слайд 27
LOOP — число показов текста в строке:
? — целочисленное значение, указывающее
число повторов;
infinite — бесконечное повторение эффекта по циклу.
SCROLLAMOUNT — смещение текста в пикселях за один шаг.
SCROLLDELAY — временной промежуток между смещениями в миллисекундах, по умолчанию 60 мс. Используйте этот атрибут, чтобы замедлить перемещение текста в строке
vspace — отступ в пикселях по вертикали от текста до рамки бегущей строки.
TRUESPEED — минимальное значение смещения текста, по умолчанию 60 мс.
WIDTH — ширина бегущей строки в пикселях.
Слайд 28
Эффект бегущей строки поддерживается только в обозревателе
Internet Explorer.
В других обозревателях текст будет отображаться как обычная строка.
Текст, заключенный между дескрипторами можно форматировать так же, как обычный текст Web-страницы.
Слайд 29
Специальные символы
Вам может понадобиться использовать в тексте Web-страницы символы, которые зарезервированы
в качестве служебных в языке HTML, например <, > и &,
или символы, которые не могут быть введены непосредственно с клавиатуры.
Для добавления в текст специальных символов используется числовой или именной код. В обоих случаях код символа начинается с символа амперсанда (&), за которым следует номер символа (числовой код из кодовой таблицы ASCII) или сокращенное имя (именной код).
код ASCII
< меньше
> больше
Слайд 30
Вставка рисунка
Web-страница с рисунком ALIGN=‘right’>
Выравнивание
по левой стороне
Ссылка на файл
Слайд 31
Выравнивание рисунка и текста страницы
Для выравнивания рисунка относительно текста документа атрибуту
ALIGN присваивается следующие значения:
LEFT – рисунок выравнивается по левому краю
RIGHT – рисунок выравнивается по правому краю
Для выравнивания текста абзаца, в который добавлен рисунок, атрибуту ALIGN присваивается следующие значения:
TOP – текст выравнивается по верхнему краю рисунка
MIDLE – текст выравнивается по средней линии рисунка
BOTTOM – текст выравнивается по нижнему краю рисунка
Слайд 32
Текст по середине
middle
Текст по верхнему краю
top
Текст выровнен по нижнему краю
bottom
Выравнивание
рисунка и текста страницы
Слайд 33
Слайд 34
Гиперссылка
гиперссылка
Гиперссылка на другие Гиперссылка на другие Web-Гиперссылка на другие
Web-страницы
Гиперссылка на графические файлы
Гиперссылка на звуковые файлы видеоклипы
Цвет гиперссылки
Далее
Назад
Слайд 35
Моя почта
http:// - важный элемент адреса гиперссылки (
ftp:// )
В то время как www можно опустить:
Моя почта Назад
Гиперссылка на другие Web-страницы
Слайд 36
(от 72 до 150 пикселей/дюйм)
Щелкните здесь, для просмотра изображения
Назад
Слайд 37
Гиперссылка на звуковые файлы и видео клипы
MIDI – музыкальные произведения в
файлах с расширением .mid
MP3 – музыка, звуковые сообщения в файлах с расширением .mp3
RealAudio – интерактивное радио и звукозапись в файлах с расширением .ra
WAV – звуковые эффекты в файлах с расширением .wav
AVI – клипы с расширением .avi
MPEG – клипы с расширением .mpg или .mpeg
QuickTime – небольшие клипы в файлах с расширением .mov или .gt
Например:
Назад
Слайд 38
Цвет гиперссылки
Web-страница с гиперссылкой Новая гиперссылка
Посещенная
гиперссылка
Активная гиперссылка
Назад
Слайд 39
Оглавление
Первая гиперссылка – активная.
Вторая – посещенная.
Третья - новая.
Слайд 40
Разметка Web-страниц
с помощью таблиц
В коде HTML каждая строка и ячейка
таблицы создается индивидуально.
До начала создания таблицы ее надо обязательно нарисовать, подсчитать количество строк и ячеек, определить, какие ячейки надо объединить.
Слайд 41
Дескрипторы создания таблицы:
…
- новая строка
… | - ячейка заголовка
… | - обычная ячейка
По умолчанию текст в ячейках заголовка показан полужирным шрифтом с выравниванием по центру
Текст в обычных ячейках не выделяется и выравнивается по левому краю
Слайд 42
Пример простейшей пустой таблицы
Слайд 43
Создание таблицы с различным числом ячеек в строках
Слайд 44
Добавление заголовка таблицы
Заголовок таблицы можно создать с помощью известных вам дескрипторов
<Н1>—<Н6>
Но поскольку ширина таблицы может отличаться от ширины окна обозревателя, выровнять текстовый заголовок относительно таблицы может оказаться довольно сложно.
Слайд 45
Поэтому для создания заголовков лучше использовать дескриптор
, который создает заголовок
непосредственно в таблице.
Слайд 46
По умолчанию заголовок выравнивается по центру таблицы.
Чтобы изменить выравнивание влево
или вправо, присвойте атрибуту ALIGN в дескрипторе
значение left или right.
Атрибуту ALIGN также можно присвоить значение bottom. В этом случае заголовок появится под таблицей.
В принципе в таблице допускается создание нескольких заголовков, но лучше этого не делать. Так, в обозревателе Netscape Navigator дескриптор может произвольно изменить порядок заголовков.
Слайд 47
Заливка ячеек цветом
Для установки цвета ячейки таблицы применяется атрибут BGCOLOR.
Окрашивание ячеек используется для выделения важных блоков данных в таблице.
Чтобы установить цвет фона сразу для группы ячеек, выполните группировку столбцов или строк.
Слайд 48
Использование в таблице фоновых изображений
Фоновый рисунок устанавливается в атрибуте BACKGROUND.
Этот
атрибут можно установить как для всей таблицы в дескрипторе
, так и для отдельной ячейки в дескрипторах и <тн>. Соответственно, если в первом случае рисунок будет помещен в фоне всей таблицы, то во втором случае — только в фоне данной ячейки. Если разные фоновые рисунки были назначены таблице и ячейке, то фоновый рисунок ячейки появится поверх рисунка таблицы.
Требования к фоновым рисункам таблицы такие же, как и к фону Web-страницы, — фон не должен мешать чтению текста и восприятию информации.
Слайд 49 Однако!
Следует учесть, что разные обозреватели по-разному отображают фоновые рисунки, назначенные всей
таблице.
Если Internet Explorer заполняет копиями изображения все пространство таблицы, так же, как фоновый рисунок страницы заполняет все окно обозревателя, то Netscape Navigator повторит рисунок в каждой ячейке.
В связи с этим лучше воздержаться от использования фоновых рисунков таблицы.
Слайд 50 Разметка макета страницы с помощью таблицы, содержащей фоновые рисунки
Слайд 51 Размеры ячеек устанавливаются с помощью атрибутов width и height и две
ячейки в первом столбце объединяются с помощью атрибута ROWSPAN.
Обратите внимание на следующий важный момент: в дескрипторе атрибутам border, cellpadding и CELLSPACING
присвоено значение 0.
Благодаря этому не видны границы между фоновыми рисунками в ячейках и выравнивание текста заголовка в верхней панели совпадает с выравниванием фонового рисунка.
Слайд 52 Прорисовка границ таблицы
По умолчанию обозреватели не показывают границы вокруг таблицы и
между ячейками. Это вполне подходит, если таблица используется для разметки макета документа. Если же нужно представить данные в форме таблицы, то прорисовка границ усилит зрительный эффект и поможет пользователям лучше понять взаимосвязи данных в ячейках таблицы.
Слайд 53 Границы таблицы
с помощью атрибута BORDER в дескрипторе мы устанавливаем показграниц таблицы.
Данному атрибуту присваивается значение ширины внешней границы таблицы в пикселях.
Слайд 54 Обратите внимание, что атрибут BORDER изменяет вид только внешней границы вокруг
таблицы, тогда как внутренние границы между ячейками не меняются. Для изменения внутренних границ используются атрибуты CELLPADDING и CELLSPACING. По умолчанию обозреватели показывают границы серым цветом. Чтобы изменить цвет, воспользуйтесь атрибутом BORDERCOLOR. Установка данного атрибута изменит цвет как внешних, так и внутренних границ. При этом исчезнет эффект объемности границ Чтобы убрать границы, присвойте атрибуту BORDER значение 0, или просто удалите этот атрибут из дескриптора .
Слайд 55 Выборочная прорисовка границ
Установив атрибут BORDER, можно либо показать все границы,
либо не показывать границ. Однако, часто нужно показать только внешние или только внутренние границы, но лишь вокруг определенных ячеек. Для выборочной прорисовки границ используются атрибуты FRAME и RULES в дескрипторе
Слайд 56 Слайд 57 Выборочная прорисовка границ
♦ FRAME — устанавливает показ внешних границ таблицы: void — нет внешних границ; above — граница по верхнему краю таблицы; below — граница по нижнему краю таблицы; rhs — граница по правому краю таблицы; lhs — граница по левому краю таблицы; • hsides — границы по верхнему и нижнему краям таблицы; vsides — границы по левому и правому краям таблицы; border — все границы (задано по умолчанию).
♦ RULES — устанавливает показ внутренних границ таблицы: none — нет внутренних границ; cols — границы между столбцами; rows — границы между строками; groups — границы между группами столбцов и строк; all — все внутренние границы (задано по умолчанию).
Слайд 58 Группирование и объединение ячеек таблицы
Существует ряд дескрипторов кода HTML, которые предназначены
для группирования ячеек таблицы. Это удобная функция, позволяющая форматировать группы ячеек как одно целое, вместо того чтобы устанавливать атрибуты в дескрипторе каждой индивидуальной ячейки. Установки атрибутов форматирования в индивидуальных ячейках имеют более высокий приоритет и отменяют установки для всей группы. Кроме того, можно объединить несколько ячеек в одну ячейку, которая будет занимать несколько столбцов или строк.
Слайд 59 Объединение ячеек
Иногда бывает необходимо создать в таблице ячейку, занимающую несколько столбцов
или строк. Это особенно важно при выполнении разметки макета страницы с помощью таблицы.
Для объединения ячеек в дескрипторах и <ТН> устанавливаются следующие параметры: COLSPAN - число столбцов, занятых ячейкой; ROWSPAN — число строк, занятых ячейкой.
Слайд 60 Группирование столбцов
Для группирования столбцов используются следующие дескрипторы: ♦ < COLGROUP > -
структурная группа столбцов, применяется для разбивки таблицы на столбцы разных типов, например: столбец заголовков и столбцы данных; ♦ — неструктурная группа столбцов, применяется для произвольного группирования столбцов таблицы, имеющих общий формат данных.
Дескрипторы И содержат набор атрибутов форматирования ячеек. Так, установка атрибута BGCOLOR в дескрипторе группы столбцов изменит цвет фона во всех ячейках, относящихся к группе.
Слайд 61 |
|