Занятие 3. Верстка сайтов. Frame, FORM, CSS

Содержание

Слайд 2

Тег FRAME

Разбивает экран на различные страницы.
Помогает делать дублирующие части.

Тег FRAME Разбивает экран на различные страницы. Помогает делать дублирующие части.

Слайд 3

Тег FRAME. Применение.



Простой документ с фреймами



Тег FRAME. Применение. Простой документ с фреймами В этом документе содержится: Миленький текстик Еще славный текстик
src="contents_of_frame1.html">



<br> <P>В этом документе содержится:<br> <UL><br> <LI><A href="contents_of_frame1.html">Миленький текстик</A><br> <LI><IMG src="contents_of_frame2.gif" alt="Симпатичная картинка"><br> <LI><A href="contents_of_frame3.html">Еще славный текстик</A><br> </UL><br>


Слайд 5

Правда о FRAME

Изживший тег для использования, был популярен в 90-е.
Подходит для

Правда о FRAME Изживший тег для использования, был популярен в 90-е. Подходит
ленивых(не нужно интегрировать сайт с CMS).
Плохо индексируется поисковиками.

Плюсы
При помощи конструкции frameset существует возможность подключать какие-либо формы от других источников (например формы регистрации в CRM системах).

Слайд 6

Тег FORM

Даёт возможность взять с пользователя информацию.
Да, анкеты, формы обратной связи, авторизации

Тег FORM Даёт возможность взять с пользователя информацию. Да, анкеты, формы обратной
и т.д. сделаны с помощью тега
и элементов управления

Слайд 7

Тег FORM. Применение.

Синтаксис
...
Параметры
action Адрес программы или документа, которые обрабатывает

Тег FORM. Применение. Синтаксис ... Параметры action Адрес программы или документа, которые
данные формы.
enctype MIME-тип информации формы.
method Метод протокола HTTP.
name Имя формы.
target Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Слайд 8

Тег FORM. INPUT.

Основной параметр тега , определяющий вид элемента — type. Он

Тег FORM. INPUT. Основной параметр тега , определяющий вид элемента — type.
позволяет задавать следующие элементы формы:
текстовое поле (text),
поле с паролем (password),
переключатель (radio),
флажок (checkbox),
скрытое поле (hidden),
кнопка (button),
кнопка для отправки формы (submit),
кнопка для очистки формы (reset),
поле для отправки файла (file) и кнопка с изображением (image).

Слайд 9

Текстовое поле

Параметры:
name - имя элемента,
type - тип элемента (в данном случае -

Текстовое поле Параметры: name - имя элемента, type - тип элемента (в
text),
size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.
Возможны еще два параметра:
disabled - блокирует поле от любых изменений,
readonly - делает поле доступным только для чтения.

Слайд 10

Флажки

Параметры:
type - тип элемента (в данном случае - checkbox),
name - имя

Флажки Параметры: type - тип элемента (в данном случае - checkbox), name
элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",
checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

Слайд 11

Переключатели

В отличии от флажков, можно выбрать только один пункт. В связи

Переключатели В отличии от флажков, можно выбрать только один пункт. В связи
с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio", все остальные такие же, как у флажков.
Пример:
Укажите ваш пол:
мужской
женский

Слайд 12

Многострочное текстовое поле

Для объемных текстов, например для почтовых сообщений, удобно использовать

Многострочное текстовое поле Для объемных текстов, например для почтовых сообщений, удобно использовать
именно этот элемент. Он создается тегами и имеет следующие параметры:
name - имя поля,
cols - ширина поля в символах,
rows - количество строк текста, видимых на экране,
wrap - способ переноса слов:
off - переноса не происходит,
virtual - перенос отображается, но на сервер поступает неделимая строка,
physical - перенос и на экране и при поступлении на сервер.
disabled - неактивное поле,
readonly - разрешено только чтение.

Слайд 13

Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным

Раскрывающиеся списки Списки бывают с возможностью выбора одного элемента и с множественным
выбором. Задаются и те, и другие с помощью тегов , внутри которых располагаются элементы значений, заданных тегом