|
№
|
Задание
|
|
Количество строк
|
Количество столбцов
|
Объединение
|
|
1
|
6
|
4
|
2 и 3 столбцы имеют объединение в 3 строке
|
|
2
|
10
|
3
|
4 и 5 строки имеют объединение в 2 столбце
|
|
3
|
3
|
7
|
1 и 2 столбцы имеют объединение в 6 строке
|
|
4
|
6
|
6
|
4 и 5 строки имеют объединение в 3 столбце
|
|
5
|
5
|
8
|
6,7 и 8 столбцы имеют объединение в 5 строке
|
|
6
|
12
|
3
|
2,3,4 и 5 строки имеют объединение в 1 столбце
|
|
7
|
8
|
4
|
3 и 4 столбцы имеют объединение в 5 строке
|
|
8
|
9
|
5
|
4,5 и 6 строки имеют объединение в 5 столбце
|
|
9
|
10
|
6
|
2 и 3 столбцы имеют объединение в 7 строке
|
|
10
|
12
|
2
|
10 и 11 строки имеют объединение в 1 столбце
|
|
11
|
4
|
8
|
3 и 4 столбцы имеют объединение в 3 строке
|
|
12
|
5
|
9
|
2 и 3 строки имеют объединение в 8 столбце
|
|
13
|
6
|
10
|
6 и 7 столбцы имеют объединение в 3 строке
|
|
14
|
8
|
4
|
4, 5 и 6 строки имеют объединение в 2 столбце
|
|
15
|
4
|
5
|
2 и 3 столбцы имеют объединение в 4 строке
|
|
16
|
7
|
2
|
1 и 2 строки имеют объединение в 2 столбце
|
|
17
|
9
|
3
|
2 и 3 столбцы имеют объединение в 6 строке
|
|
18
|
4
|
7
|
3 и 4 строки имеют объединение в 4 столбце
|
|
19
|
5
|
8
|
5,6 и 7 столбцы имеют объединение в 3 строке
|
|
20
|
10
|
4
|
7,8,9 и 10 строки имеют объединение в 3 столбце
|
6. Язык гипертекстовой
разметки страниц HTML. Создание фреймов
Цель работы: научиться создавать в HTML-документах фреймы.
Теоретический материал
Бродя по Интернету, наверняка не раз
видели странички разбитые на несколько частей. Эти части и называются фреймами.
Программно разбиение окна браузера на фреймы реализуется так:
. Создается html файл (обычно это
первая страничка сервера по имени index.htm) в котором задаются размеры и
количество фреймов, а также имена файлов соответствующих фреймам и некоторые
атрибуты для каждого фрейма.
. Создаются отдельные html странички
для каждого фрейма.
Создадим html файл реализующий
разбиение экрана на две части. Для этого нам понадобится два обычных html файла
с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm,
вот как он должен выглядеть:
<html>
<title>Название вашей
странички</title>
<frameset cols=
"*, 140»>
<frame src=
«homepage.htm» name= «frame1»>
<frame src=
«menu.htm» name= «frame2»>
</frameset>
</html>
Рассмотрим каждый тэг по
отдельности:
<html></html>
и <title><title>
- стандартные тэги для всех html файлов
<frameset> в этом тэге задается количество рядов или столбцов rows и cols соответственно,
а также их размеры и расположение. Существует три способа задания их размера:
по пикселям - просто
напишите высоту или ширину в пикселях.
процентами - пишите
сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите
знак% Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все
оставшееся место в окне равняется значку *. Например вы можете написать 20%,
20%, 60% или 20%, 20%,* и никакой разницы не будет.
В этом же тэге можно
задать толщину разграничительной линии и окаймляющей рамки командами frameborder= «X» и border=
«Y» где x и y толщина в пикселях.
В нашем случае (<frameset cols= "*, 140»>) разделяем окно на два столбца, правое
шириной в 140 пикселов, а левое шириной во весь оставшийся экран <frame> - здесь задаются атрибуты для каждого фрейма персонально.
Команда src задает имя файла который загрузится в этом фрейме, в нашем случае
имя файла homepage.htm (<frame src= «homepage.htm»…).
Команда name задает имя данного фрейма, в нашем случае имя «frame1». Имя
необходимо для того чтобы в последствии указать к какому фрейму использовать
ссылку. К примеру хотим чтобы нажимая на ссылку в фрейме содержащем файл
menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл
homepage.htm. Для этого нам необходимо откорректировать html код ссылки:
<a
href= «file.htm»>file</a> - что
было
<a
href= «file.htm» target= «frame1»>file</A> - что
должно быть
А если хотите чтобы файл
загрузился в главном окне браузера то напишите в ссылке target= "_top»
Также в этом тэге можно
задать величину границ и фрейма. Это делается командами marginwigth= «x» и marginheight=
«y», где x и y величина в пикселях.
</frameset> закрывающий тэг.
Рассмотрим несколько
пример использования фреймов.
Расположим документы в
окне следующим образом:
В первом ряду будет
располагаться logo.html, а второй ряд поделим на две колонки, в которых будут
располагаться документы menu.html и content.html.
<html>
<head>
<title>Хождение
по фреймам</title>
<frameset
rows= «100,*»>
<frame
src= «logo.html»>
<???>
</frameset>
</head>
</html>
Принцип построения ясен,
только вот как обозначить ряд, разбитый на две колонки? Тут нам поможет
господин Frameset.
<html>
<head>
<title>Хождение по
фреймам</title>
<frameset
rows= «100,*»>
<frame
src= «logo.html»>
<frameset
cols= «150,*»>
<frame
src= «menu.html»>
<frame
src= «content.html»>
</frameset>
</frameset>
</head>
</html>
С помощью параметра cols
тэга <frameset></frameset> делим второй ряд на две колонки (первая
шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А
тэги <frame>, которые содержит <frameset></frameset>
определяют какие документы будут показаны в колонках (menu.html и
content.html).
Теперь разберем другой
вариант:
Здесь будем делить окно
на колонки. Вторая колонка будет содержать в себе документ content.html
(содержание), а первую колонку мы разобьем на два ряда, и поместим в них
документы logo.html и menu.html.
<html>
<head>
<title>Хождение
по фреймам</title>
<frameset
cols= «100,*»>
<frameset
rows= «100,*»>
<frame
src= «logo.html»>
<frame
src= «menu.html»>
</frameset>
<frame
src= «content.html»>
</frameset>
</head>
</html>
Далее избавимся от
полосы прокрутки (скрулинга) во фрейме с logo.html.
<html>
<head>
<title>Хождение
по фреймам</title>
<frameset
cols= «100,*»>
<frameset
rows= «100,*»>
<frame
src= «logo.html» scrolling= «no»>
<frame
src= «menu.html»>
</frameset>
<frame
src= «content.html»>
</frameset>
</head>
</html>
-
параметр тэга <frame>. Он
может принимать несколько значений: no - это значит совсем не будет полосы
прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки
будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр
scrolling= «auto», можно не прописывать, т. к. если параметр scrolling не
задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
Теперь давайте избавимся
от рамок между фреймами. Для этого мы используем параметр border, с которым
раньше уже встречались. Итак, border= «0».
<html>
<head>
<title>Хождение
по фреймам</title>
<frameset
cols= «100,*» border= «0»>
<frameset
rows= «100,*»>
<frame
src= «logo.html» scrolling= «no»>
<frame
src= «menu.html»>
</frameset>
<frame
src= «content.html»>
</frameset>
</head>
</html>
Прижмем картинку в левый
верхний угол:
<html>
<head>
<title>Хождение
по фреймам</title>
<frameset
cols= «100,*» border= «0»>
<frameset
rows= «100,*»>
<frame
src= «logo.html» scrolling= «no» marginwidth= «0» marginheight= «0»>
<frame
src= «menu.html»>
</frameset>
<frame
src= «content.html»>
</frameset>
</head>
</html>
определяет ширину (в
пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину
левого и правого полей фрэйма. В нашем примере избавились от полей во фрейме,
содержащим logo.html, задав значение marginheight и marginwidth равное нулю.
Задание
Согласно вариантам в
таблице 11 лабораторной работе 5 создать HTML-документ,
в которой строки - горизонтальные фреймы, столбцы - вертикальные. Размеры строк
и столбцов, ссылки, а также обрамление произвольное.
. Создание стилей. CSS.
Границы и рамки
Цель работы: научиться
создавать стили CSS, используя таблицы
стилей и использовать в HTML-документах.
Теоретический материал
Cascading Style Sheets (Таблицы
Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего
вида любых HTML документов. С его помощью дизайнер имеет полный контроль над
стилем и расположением каждого элемента Web страницы, что проще и
гораздо функциональнее использования обычного набора HTML тегов.
Существует три вида таблиц стилей,
Внутренние таблицы стилей (Inline
Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.
Глобальные (Global Style Sheets)
определяют стиль элементов во всем документе.
Связанные (Linked Style Sheets)
могут быть использованы для нескольких документов сразу и хранятся во внешнем
файле.
Селекторы (Selectors):
селектор {свойства}
Любой элемент HTML - это возможный
CSS селектор. Свойства селектора определяют стиль элемента, для которого он
определен.
Например:
h1 {color:red;
size:20pt;}
Все элементы h1 в документе будут красного цвета,
размером в 20 точек (pt, point).
Классовые селекторы
(Class Selectors):
селектор. класс {cвойства}
class - атрибут элемента в HTML, определяющий его класс. В CSS можно
описать собственные стили для различных классов одних и тех же элементов.
Например:
h1.blue {color:blue;
size:20pt;}
Все элементы h1 с атрибутом class= «blue» станут синими.
ID селекторы (ID
Selectors):
#id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать
стилистические исключения среди элементов одного класса.
Например:
<html>
<head>
<title> Пример CSS </title>
</head>
<style>{color:blue;
font-style:italic}
#boldunderline
{text-decoration:underline; font-weight:bold}
</style>
<body>
<p>
<p></p>
<p id=
«boldunderline»>… Но скоро
откроется
</p>
</body>
</html>
Как видно из примера, атрибут ID
может быть использован без указания класса (последний параграф примера. Тогда
параграф будет обладать только свойствами ID «boldunderline» (в примере -
жирный, подчеркнутый текст).
Контекстуальные
селекторы (Contextual Selectors):
Контекстные селекторы - это
сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в
заданной последовательности в зависимости от каскадного порядка.
Например:
p EM {color:silver;}
В данном примере все элементы EM
внутри элементов p будут иметь заданный стиль.
Внутренние таблицы
стилей
Как уже говорилось, использование
Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они
задают стиль только одному элементу документа при помощи атрибута style в HTML теге.
Например: <font color= «blue» size= «3» face= «Arial»> Вперед в будущее </font>.
Например Inline Style Sheet:
<font style=
«color:blue; font-size:12pt; font-family: Arial»> Вперед в будущее </font>.
Как можно заметить, код Inline Style
Sheet получился больше чем HTML. Поэтому ISS следует использовать только если
необходимо задать определенному элементу свой индивидуальный стиль,
существующий в классификации CSS и нереализованный в HTML. Или же при
необходимости абсолютно позиционировть данный элемент.
Глобальные таблицы
стилей
Глобальные стили задают вид
элементов всего документа. Для этого используется тег <style type= «text/css»>.
Он размещается в заголовке документа.
Например:
<html>
<head> <title> Пример
Глобальных Таблиц Стилей </title>
</head>
<style type=
«text/css»>{color:red; font-style:italic; font-size:32px}{color:blue}
#bold {font-weight:bold}
</style>
<body>
<h1> Этот заголовок написан
крупным красным курсивом </h1>
Вот <font>
</body>
</html>
В данном примере все элементы h1 будут написаны крупным красным
курсивым, все элементы с указанным классом blue будут синими, а все
элементы с идентификатором id= «bold» станут жирными. Для простоты вместо <style type= «text/css»>
можно использовать просто тег <style>, что менее грамотно.
Связанные таблицы стилей
Связанные таблицы стилей
используются для придания нескольким документам одного стиля и хранятся в
отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном
стиле, не утруждая себя составлением таблиц для каждого документа.
Например:
Файл styles.css
#bold {font-weight:bold}
</style>
В самих же HTML документах делается
ссылка на этот файл при помощи тега <link>. Выглядит это так:
<link rel= «stylesheet» type= «text/css» href= «путь до файла»>
Например:
Файл Index.html
<html>
<head>
<title> Просто еще один пример
</title>
</head>
<link rel=
«stylesheet» type= «text/css» href= «styles.css»>
<body>
Содержание Документа
</body>
</html>
Свойства CSS
В CSS используется модель представления
визуально отображаемых элементов документа в виде прямоугольных блоков,
возможно, вложенных друг в друга.
Каждый такой блок имеет
информационное содержимое (текст, изображения и т.д.), а также может иметь
отступы (padding), границы (border) и поля (margin). Соответствующие свойства
CSS позволяют оформить блок желаемым образом.
В таблице 13, приведенной ниже,
содержатся полный список атрибутов [4].
Таблица 13. Список атрибутов CSS
|
Название
|
Описание
|
|
Свойства цвета и фона
|
|
color
|
Css-свойство color определяет базовый цвет элемента
|
|
background
|
Css-свойство background применяется для сокращенного задания
свойств фона
|
|
background-attachment
|
Css-свойство background-attachment определяет, должно ли
изображение фона быть зафиксированным
|
|
background-color
|
Css-свойство background-color устанавливает цвет фона или делает
цвет фона прозрачным
|
|
background-image
|
Css-свойство background-image определяет графический ресурс,
используемый в качестве фона
|
|
background-position
|
При помощи css-свойства background-position дизайнер может
указать расположение фона
|
|
background-position-x
|
При помощи css-свойства background-position-x дизайнер может
указать расположение фона по горизонтали.
|
|
background-position-y
|
При помощи css-свойства background-position-y дизайнер может указать
расположение фона по вертикали
|
|
background-repeat
|
Css-свойство background-repeat определяет метод размещения
фонового изображения
|
|
layer-background-color
|
Css-свойство layer-background-color используется только
браузерами Netscape Navigator версий 4.x.
|
|
layer-background-image
|
Css-свойство layer-background-image используется только
браузерами Netscape Navigator версий 4.x.
|
|
-moz-opacity
|
Css-свойство - moz-opacity позволяет указать прозрачность в
браузерах Netscape Navigator версий 6.x и выше.
|
|
Свойства шрифтов
|
|
font
|
Css-свойство font применяется для сокращенного задания свойств
шрифта: font-style, font-variant, font-weight, font-size, line-height и
font-family
|
|
font-family
|
Значением css-свойства font-family является список имен семейств
шрифтов и групп шрифтов
|
|
font-size
|
Css-свойство font-size позволяет задать размер шрифта
|
|
font-size-adjust
|
Css-свойство font-size-adjust задает отношение высоты строчной
буквы x к высоте шрифта
|
|
font-stretch
|
Css-свойство font-stretch позволяет задать расстояние между символами
|
|
font-style
|
Значением css-свойства font-style является список имен семейств
шрифтов и групп шрифтов
|
|
font-variant
|
Css-свойство font-variant позволяет выводить текст малыми
заглавными
|
|
font-weight
|
Css-свойство font-weight позволяет задать жирность шрифта
|
|
Свойства текста
|
|
letter-spacing
|
Css-свойство letter-spacing указывает дополнительное расстояние
между буквами
|
|
line-height
|
Css-свойство line-height задает высоту строки символов
|
|
text-align
|
Css-свойство text-align используется для указания, как будет
выравниваться текст внутри элемента
|
|
text-align-last
|
Css-свойство text-align-last используется для указания
выравниваться последней или единственной строка в блоке
|
|
text-decoration
|
Css-свойство text-decoration описывает эффекты, которые будут
применены к текстовому содержимому элемента
|
|
text-indent
|
Css-свойство text-indent используется для формирования отступа
красной строки
|
|
text-overflow
|
Css-свойство text-overflow используется для задания режима
усечения текстовых строк
|
|
text-transform
|
Css-свойство text-transform позволяет взаимно преобразовывать
строчные и заглавные буквы
|
|
vertical-align
|
Css-свойство vertical-align позволяет настроить выравнивание
относительно высоты родительского элемента
|
|
white-space
|
Css-свойство white-space определяет алгоритм преобразования
последовательностей пробельных символов
|
|
word-spacing
|
Css-свойство word-spacing указывает на дополнительное расстояние
между словами
|
|
word-wrap
|
Css-свойство word-wrap определяет, будут ли разрываться слова
для переноса или нет
|
|
writing-mode
|
Css-свойство writing-mode используется для указания алгоритма
разметки
|
|
Свойства списков
|
|
list-style
|
Css-свойство list-style применяется для сокращенного задания
свойств list-style-type, list-style-image и list-style-position
|
|
list-style-image
|
Css-свойство list-style-image определяет графический элемент,
который будет выступать в качестве маркера списка
|
|
list-style-position
|
Css-свойство list-style-position определяет расположение маркера
по отношению к содержимому элемента
|
|
list-style-type
|
Css-свойство list-style-type определяет тип маркера списка
|
|
Свойства таблиц
|
|
border-collapse
|
Css-свойство border-collapse позволяет выбрать используемую
модель построения таблицы
|
|
border-spacing
|
Css-свойство border-spacing определяет расстояние между ячейками
таблицы.
|
|
caption-side
|
Css-свойство caption-side определяет положение поля заголовка
относительно поля таблицы.
|
|
empty-cells
|
Css-свойство empty-cell определяет метод отображения пустых
ячеек таблицы в модели с раздельными границами ячеек.
|
|
table-layout
|
Css-свойство table-layout позволяет выбрать алгоритм отображения
таблицы.
|
|
Свойства отступов
|
|
margin
|
Css-свойство margin применяется для сокращенного задания свойств
отступов
|
|
margin-bottom
|
Css-свойство margin-bottom определяет размер нижнего отступа
элемента
|
|
margin-left
|
Css-свойство margin-left определяет размер левого отступа
элемента
|
|
margin-right
|
Css-свойство margin-right определяет размер правого отступа
элемента
|
|
margin-top
|
Css-свойство margin-top определяет размер верхнего отступа
элемента
|
|
Свойства набивок
|
|
padding
|
Css-свойство padding применяется для сокращенного задания
свойств набивок
|
|
padding-bottom
|
Css-свойство padding-bottom определяет размер нижней набивки
элемента
|
|
padding-left
|
Css-свойство padding-left определяет размер левой набивки
элемента
|
|
padding-right
|
Css-свойство padding-right определяет размер правой набивки
элемента
|
|
padding-top
|
Css-свойство padding-top определяет размер верхней набивки
элемента
|
|
Свойства границ
|
|
border
|
Css-свойство border используется, что бы установить одинаковые
ширину, стиль и цвет бордюра для всех четырех сторон
|
|
border-bottom
|
Css-свойство border-bottom используется для задания в одном
месте стиля, цвета и толщины нижней части бордюра
|
|
border-bottom-color
|
Css-свойство border-bottom-color используется для задания цвета
нижней части бордюра
|
|
border-bottom-style
|
Css-свойство border-bottom-style используется для задания стиля
нижней части бордюра
|
|
border-bottom-width
|
Css-свойство border-bottom-width определяет размер нижней части
бордюра элемента
|
|
border-left
|
Css-свойство border-left используется для задания стиля, цвета и
толщины левой части бордюра
|
|
border-left-color
|
Css-свойство border-left-color используется для задания цвета
левой части бордюра
|
|
border-left-style
|
Css-свойство border-left-style используется для задания стиля
левой части бордюра
|
|
border-left-width
|
Css-свойство border-left-width определяет размер левой части
бордюра элемента
|
|
border-right
|
Css-свойство border-left используется для задания стиля, цвета и
толщины правой части бордюра
|
|
border-right-color
|
Css-свойство border-right-color используется для задания цвета
правой части бордюра
|
|
border-right-style
|
Css-свойство border-right-style используется для задания стиля
правой части бордюра
|
|
border-right-width
|
Css-свойство border-right-width определяет размер правой части
бордюра элемента
|
|
border-top
|
Css-свойство border-left используется для задания стиля, цвета и
толщины верхней части бордюра
|
|
border-top-color
|
Css-свойство border-top-color используется для задания цвета
верхней части бордюра
|
|
border-top-style
|
Css-свойство border-top-style используется для задания стиля
верхней части бордюра
|
|
border-top-width
|
Css-свойство border-top-width определяет размер верхней части
бордюра элемента
|
|
border-style
|
Css-свойство border-style применяется для сокращенного задания
стиля бордюра
|
|
border-color
|
Css-свойство border-color применяется для сокращенного задания
цветов четырех сторон
|
|
border-width
|
Css-свойство border-width применяется для сокращенного задания
ширины бордюра
|
|
Свойства-квалификаторы
|
|
clear
|
Css-свойство clear запрещает размещение плавающих (float)
элементов справа и слева
|
|
float
|
Css-свойство float позволяет задать режим обтекание элемента
|
|
display
|
Css-свойство display используется что бы явно указать тип блока,
порождаемого элементом
|
|
overflow
|
Css-свойство overflow определяет поведение блочного элемента в
ситуациях, когда содержимое такого элемента превышает его размеры.
|
|
overflow-x
|
Css-свойство overflow-x определяет поведение блочного элемента в
ситуациях, когда содержимое такого элемента превышает его размеры по ширине.
|
|
overflow-y
|
Css-свойство overflow-y определяет поведение блочного элемента в
ситуациях, когда содержимое такого элемента превышает его размеры по высоте.
|
|
position
|
Css-свойство position используется для выбора одного из четырех
алгоритмов, использующихся для вычисления положения блока элемента.
|
|
z-index
|
Css-свойство z-index определяет порядок перекрытия элементов.
|
|
Свойства позиционирования
|
|
bottom
|
Css-свойство bottom определяет смещение нижней стороны блока
элемента относительно нижней стороны контейнера данного элемента.
|
|
left
|
Css-свойство left определяет смещение левой стороны блока
элемента относительно левой стороны контейнера данного элемента
|
|
right
|
Css-свойство right определяет смещение правой стороны блока
элемента относительно правой стороны контейнера данного элемента.
|
|
top
|
Css-свойство top определяет смещение верхней стороны блока
элемента относительно верхней стороны контейнера данного элемента
|
|
width
|
Css-свойство width определяет ширину элемента
|
|
height
|
Css-свойство height определяет высоту элемента
|
|
min-width
|
Css-свойство min-width определяет минимальную ширину элемента
|
|
max-width
|
Css-свойство man-width определяет максимальную ширину элемента
|
|
min-height
|
Css-свойство min-height определяет минимальную высоту элемента
|
|
max-height
|
Css-свойство man-height определяет максимальную высоту элемента
|
|
Свойства scrollbar
|
|
scrollbar-3dlight-color
|
Css-свойство scrollbar-3dlight-color задает цвет для верхней и
левой внешней границы бегунка полосы прокрутки и концевых кнопок.
|
|
scrollbar-arrow-color
|
Css-свойство scrollbar-arrow-color определяет цвет активных
стрелок
|
|
scrollbar-base-color
|
Css-свойство scrollbar-base-color задает цвет, на основе
которого строится цветовая схема для полосы прокрутки.
|
|
scrollbar-darkshadow-color
|
Css-свойство scrollbar-darkshadow-color задает цвет для нижней и
правой внешней границы бегунка полосы прокрутки и концевых кнопок
|
|
scrollbar-face-color
|
Css-свойство scrollbar-face-color задает цвет фона для бегунка
полосы прокрутки и концевых кнопок
|
|
scrollbar-highlight-color
|
Css-свойство scrollbar-highlight-color задает цвет для верхней и
левой внутренней границы бегунка полосы прокрутки и концевых стрелок
|
|
scrollbar-shadow-color
|
Css-свойство scrollbar-shadow-color задает цвет для нижней и
правой внутренней границы бегунка полосы прокрутки и концевых стрелок
|
|
scrollbar-track-color
|
Css-свойство scrollbar-track-color определяет цвет фона для
полосы прокрутки
|
|
Разное
|
|
behavior
|
Css-свойство behavior позволяет назначать dhtml-сценарий
|
|
cursor
|
Css-свойство cursor позволяет задать для элемента типа курсора,
когда курсор находится над элементом
|
|
zoom
|
Css-свойство zoom применяется для задания коэффициента
масштабирования элемента
|
|
accelerator
|
Css-свойство accelerator используется для выделения части
текста, которая обозначает горячую клавишу
|
Дополнения
Меры длины
Синтаксис: «+» (можно опустить) или «-» затем [число] плюс [единица
измерения] (без пропусков)
Например:
-566pt
Единицы длинны: ex -
x-height, ширина буквы «x» используемого элементом шрифта
px - pixels, пикселы
in - inches, дюймы
cm - centimeters, сантиметры
mm - millimeters, миллиметры
pt - points, точка (1pt = 1/72in)
pc - picas (1pc = 12pt)
Процентные меры
Синтаксис: «+» или «-» затем [число]
плюс «%» (без пропусков)
Например:
-566%
Цвета
Синтаксис: [color]
Например:
magenta
Значением цвета может быть его
название (red, lightgreen, coral и т.д.) или RGB значение
Способы выразить цвет в RGB (red
green blue):
· #rrggbb
(например, #00cc00)
· rgb (x,
x, x) - где «х» число от 0 до 255 (например, rgb (0,204,0))
· #rgb
(например, #0c0)
· rgb
(x%, x%, x%) - где «х%» число от 0.0 до 100.0 (например, 0%, 80%, 0%)
Все примеры отображают один и тот же
цвет
Ссылки
Синтаксис: «URL», потом в скобках
приводится ссылка. Ссылку также можно, помимо скобок, заключить в одинарные или
двойные кавычки (без пропусков)
Например:
URL ('cool.gif')
Задание
Используя HTML-документ, созданный в
лабораторной работе 2, создать стили, используя внутренние, глобальные и
связанные таблицы стилей.
Список литературы
гипертекстовый страница список фрейм
1. Гончаров А. Самоучитель HTML. СПб.:Питер, 2002 -240
с.
2. Панфилов И.В. Самоучитель. Создание Web-сайтов. М.:
Триумф, 2008 - 464 с.
. Хольшлаг. Языки HTML и CSS. М, Триумф, 2006.
. Глушаков С.В., Жакин И.А., Хачиров Т.С. Программирование Web-страниц. - Харьков:
Фолио, 2005 -390 с.
. Слепцова Л.Д., Бидасюк Ю.М. JavaScript. Самоучитель. М.:
Издательский дом «Вильямс», 2007 - 448 с.
. Соколов С.А. JavaScript в примерах, типовых решениях и
задачах. Профессиональная работа. М.: ООО «И.Д. Вильямс», 2006 - 592 с.
. Пауэлл Т. Web-дизайн. 2-е изд.: Спб: БХВ-Петербург,
2005-1072 с.
. Павлова В.И. Методическое пособие «Гипертекстовый язык
разметки документов» по курсу «WEB-технологии». Тольятти, 2005 - 32 с.
. Тубольцев М.Ф., Путивинцева Н.П., Гурьянова И.В.,
Немыкина О.В. Лабораторный практикум по Web-технологиям. Часть 1.
Основы HTML технологий. Белгород: Изд-во БелГУ, 2003 - 49 с.
. Дж. Скляр. Актуальные принципы Web-дизайна. М.: ЭКСМО,
2007 - 464 с.
. Климов А. HTML в примерах, http://changer.newmail.ru.
. Хейз, Дидре. Освой самостоятельно HTML. 10 минут на урок.
М.: ООО «И.Д. Вилямс», 2007 - 272 с.
. Шегар А.М. CSS - Cascading Style
Sheet в примерах. - Internet, http/www.yandex.
14. Модель событий JavaScript -
Internet, http/www.rambler.
15. Обработчики событий JavaScript - Internet,
http/www.rambler.
. Бельтикова Н.А. Методы и функции JavaScript - Internet,
http/www.rambler.
. Байенс Д. Примочки программирования WEB. / Пер. с англ. -
М.: «ЭКОМ», 2000- - 341 с., ил.
. Каллахан И. Ваша WEB-страница. Проблемы и решения. / Пер
с англ. - М.: «ЭКОМ», 2002- - 290 с., ил.