- •16. Описание фрейма на языке html. Задание логики взаимодействия фреймов. Проблемы фреймовой организации страницы.
- •20. Основные понятия и определения. Типы данных css. Применение стилей и классов к элементам документа html.
- •21. Типы простых селекторов. Использование псевдоклассов и псевдоэлементов.
- •22. Селекторы. Принципы наследования, каскадирования и группировки. Специфичность селектора.
- •23. Цвет элемента и цвет фона. Свойства шрифта. Свойства текста.
- •Свойства текста в css: letter-spacing
- •24. Создание слоев при помощи css. Границы, заполнители и рамки. Позиционирование элементов.
- •25. Приемы верстки с помощью тега “div”.
- •Css свойства тега div
- •26. Фильтры изображений. Эффекты перехода.
- •Эффекты перехода между страницами в html
- •27. Особенности восприятия цвета человеком. Понятие цветовой модели. Модели rgb и cmyk. Цветовой куб модели rgb.
- •28. Понятия цветового тона, насыщенности и яркости. Цветовые модели hsb, hls.
- •29. Формирование изображения с помощью компьютера. Оцифровка изображений. Устройства цифрового ввода и вывода изображений. Векторный и растровый способ формирования изображений.
- •30. Требования к иллюстрациям в Интернет. Методы сжатия. Обзор форматов иллюстраций jpeg, gif, png, swf, svg... Выбор формата графического файла.
- •Форматы изображений:
- •31. Понятие палитры. Формат gif. Выбор палитры.. Gif-анимация. Оптимизация изображений. Использование графики в ссылках.
16. Описание фрейма на языке html. Задание логики взаимодействия фреймов. Проблемы фреймовой организации страницы.
Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация.
Очень удобно использовать фреймы когда необходимо отображать на экране данные из разных источников. Чтобы сделать фрейм, надо создать новую Вэб-страницу, с тэгами <FRAMESET> <FRAME>.
Дескриптор <FRAMESET> формирует набор фреймов, которые делят пространство окна на строки и столбцы. Далее необходимо задать значения высоты/ширины всех строк/столбцов, выраженные в процентах относительно текущих габаритов окна браузера, пикселях или в виде символа звездочки. Символ звездочки говорит о том, что размеры фреймов зависят от габаритов остальных фреймов страницы.
Дескриптор <FRAME> служит для определения структуры и содержимого конкретного фрейма.
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<frameset rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</frameset>
</html>
17. Элементы форм. Типы управляющих элементов. Ввод данных: элемент INPUT. Меню. Многострочный текст.
Элементы формы представляют собой стандартные элементы управления, используемых для заполнения значений, которые затем передаются веб-сереверу.
В HTML определены следующие типы управляющих элементов:
1. кнопки
Авторы могут создавать три типа кнопок:
кнопки отправки
кнопки сброса
прочие кнопки: Для таких кнопок действие по умолчанию не определено.
2. флажки
3. кнопки с зависимой фиксацией
4. меню
Предоставляют пользователям варианты на выбор. Меню создается с помощью элемента SELECT, а также элементов OPTGROUP и OPTION.
5. текстовый ввод
6. выбор файлов
7. скрытые управляющие элементы
8. объекты
Тип управляющего элемента, определяемый элементом INPUT, зависит от значения атрибута type:
text Создает элемент для ввода текста из одной строки.
password Аналогичен значению "text", но вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек).
checkbox Создает флажок.
radio Создает кнопку с зависимой фиксацией.
submit Создает кнопку отправки.
image Создает графическую кнопку отправки.
reset Создает кнопку сброса.
button Создает другую кнопку.
hidden Создает невидимый управляющий элемент.
file Создает управляющий элемент выбор файла.
Элемент 'Select" создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента "Form" и иметь как начальный, так и конечный тэги. Содержит несколько элементов "Option".
Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Синтаксис создания следующий.
<textarea параметры> текст </textarea>
18. Кнопки. Группы управляющих элементов. Правила работы с формами.
Кнопки
<input type="submit"> Отправляет данные из формы на сервер (предполагается, что серверная программа их сможет принять и правильно обработать)
<input type="reset"> Очищает форму, восстанавливая значения по умолчанию
<input type="button"> Выглядит как системная кнопка, но нажатие на нее всего лишь запускает клиентский сценарий JavaScript (этого же эффекта можно и достичь использованием обработчика onClick для любого элемента HTML-документа)
<input type="image"> Как и кнопка типа "submit", отправляет данные на сервер, но выглядит нестандартным образом - например, просто как картинка
Элементы ввода: BUTTON – кнопка контейнер
Внутри: блочные и строчные элементы, текст (но не элементы ввода)
Атрибуты: стандартные
Элемент FIELDSET определяет группу управляющих элементов формы. Объединяя взаимосвязанные управляющие элементы в группы, авторы могут разбить форму на несколько частей, облегчая пользователю ее заполнение. Содержимым этого элемента является элемент LEGEND, задающий титул группы элементов, за которым могут следовать любые блочные и/или текстовые элементы, включая другой элемент FIELDSET.
Элемент LEGEND задает титул группы элементов. Он может содержать любые текстовые элементы и может употребляться только в начале элемента FIELDSET. Необязательный атрибут accesskey задает символ Unicode в качестве клавиши быстрого доступа к элементу.
Элементы ввода INPUT, TEXTAREA, SELECT обычно располагаются внутри элемента FORM, который обеспечивает передачу введенных пользователем данных на сервер.
Элементы ввода могут располагаться и вне FORM, но в этом случае они никак не связаны с транзакциями браузер-сервер и могут использоваться только при помощи вложенных в документ скриптов.
Элементы LABEL, FIELDSET и LEGEND не имеют значения для взаимодействия браузер-сервер, а используются для улучшения интерфейса пользователя, структурирования совокупности элементов ввода.
19. Каскадные таблицы стилей (CSS). Эволюция. Операторы, директивы и правила. Поддержка браузерами CSS.
История:
В мае 1995 года (сам недавно образованный – 1994) консорциум W3C, объявил о выборе технологии CSS для форматирования документов HTML.
Уже в третьей версии своего браузера MS реализовала первую попытку внедрения поддержки CSS. Впервые компания включила частичную поддержку таблиц стилей только в четвертом поколении браузера.
В декабре 1996 года, Консорциум W3C уже рекомендует стандарт CSS Layer1.
В мае 1998 г. им была принят стандарт второго уровня таблиц стилей (CSS2), который существенно расширил возможности таблиц стилей (CSS 2.1 - 25.02.04)
Основными особенностями CSS2 являются следующие:
CSS2 — это язык, который позволяет присоединять стили к любым структурированным документам. На сегодня таковыми являются HTML-документы и XML-приложения.
CSS2 распространил понятие стиля отображения на печатающие устройства, синтезаторы речи и другие устройства отображения документов.
В настоящее время обсуждается CSS3.
Расширяемый Язык Таблиц Стилей (XSL), 2001 г.
Таблица стилей состоит из набора операторов. При этом каждый оператор является либо директивой, либо правилом.
Директива (at-rule) начинается с символа at (@) и соответствующего ключевого слова. CSS2 содержит следующие директивы:
@font-face – задает описания шрифтов.
@import – включает другую таблицу стилей в текущую.
@media – задает имена устройств отображения.
@page – задает свойства страницы для печати.
Правило (rule) состоит из селектора и блока деклараций, заключенного в фигурные скобки
Директива @import позволяет включать в свою таблицу стилей другие таблицы стилей. Она должна содержать URL импортируемой таблицы стилей. Директивы @import должны располагаться в таблице стилей перед первым правилом и не могут находиться внутри блока; в противном случае они игнорируются обозревателем.
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera).
Бывший когда-то самым распространённым браузером Internet Explorer 6 поддерживает CSS далеко не полностью.