Первый слайд презентации: Основы HTML и CSS Фреймы и формы
Слайд 2: Фреймы и формы :
Разбиение окна браузера на фреймы. Описание фрейма на языке HTML. Задание логики взаимодействия фреймов Типичные проблемы сайта с фреймами Зачем нужны формы. Форма и ее элементы Методы отправки информации из полей формы Использование табличных функций при создании формы на примере анкеты
Слайд 4: Задание фреймовой структуры
< html > < head > < title >Пример фреймов</ title > </ head > < frameset cols ="25%, 75%"> < frame src ="menu.html"> < frame src =" content.html"> < noframes > Вы просматриваете эту страницу с помощью браузера, не поддерживающего фреймы. </ noframes > </ frameset > </ html >
Слайд 5: Атрибуты элемента FRAMESET
< frameset cols =" 10%, 60%, 30% "> < frameset rows = " 8 0, 20 0, * "> < frameset cols =" 1 *, 250, 3 * "> < frameset rows = " 3 0 %, 400, *, 2* "> < frameset cols ="200,*" bordercolor =" red " border =" 1 " > Элемент FRAME < frame src =" page.html "> < frame src ="my.html" name =" main "> < frame src ="my.html" name ="main" noresize > < frame src ="my.html" frameborder = " 1 " bordercolor ="red" > < frame src ="my.html" marginwidth =" 5 " marginheight =" 5 "
Слайд 6: Ссылка на другой фрейм
Файл index.html <html> <head>... </head> < frameset cols="200,*"> <frame src="menu.html" name= "menu " noresize> <frame src="content.html" name =" content "> </ frameset > </html> Файл menu.html <html> <head>... </head> <body> <a href="text.html" target =" content ">Текст</a> <a href=" file.html" target =" content ">Файл</a> <a href="te s t.html" target =" content ">Тест</a> </body> </html>
Слайд 7: Лабораторная работа
Создание страницы с фреймами Создание необходимых файлов 1 Создание фреймовой структуры 2 Создание ссылок, указывающих на нужный фрейм 3
Слайд 9: Задание структуры вложенных фреймов
< frameset cols ="25%, 75%"> < frame src ="menu.html"> < frameset rows =" 50 %, 50 %" > < frame src =" top.html"> < frame src =" bottom.html"> </ frameset > </ frameset > Вариант: <frameset rows = " 50%, 50% " cols = " 50%, 50% " >
Слайд 10: Задание атрибута target
_top _parent Имя фрейма _parent _parent _top _top Имя фрейма target = _self|_blank|_parent|_top| имя фрейма
Слайд 11: Встроенный фрейм
< iframe src="main.htm" width="850" height="140"> </ iframe > Атрибуты: name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight
Слайд 13: Атрибуты элемента FORM
action http://specialist.ru/file.php /cgi-bin/handler.cgi enctype text/plain application/x-www-form-urlencoded multipart/form-data method POST GET <form name =" myForm " action =" file.php " method =" GET " enctype =" text/plain ">
Слайд 14: Элементы формы
< input type =" text " name =" login " size =" 20 " maxlength =" 25 " value =" Логин "> < input type =" password " name =" pass " size =" 20 " maxlength =" 25 " value =" Пароль "> < input type =" submit " value =" Послать форму "> < input type =" reset " value =" Очистить форму "> name или(и) id ? Логин < input type =" text " name =" login " size =" 20 " maxlength =" 25 "> Логин
Слайд 15: Элементы формы
< input type =" checkbox " name =" asp " value =" yes ">ASP<br> <input type="checkbox" name="js" value="yes" checked >JavaScript<br> <input type="checkbox" name="php" value="yes">PHP<br> <input type="checkbox" name="html" value="yes" checked>HTML<br> < input type =" radio " name =" subject " value =" asp ">ASP<br> <input type="radio" name=" subject " value="js">JavaScript<br> <input type="radio" name=" subject " value="php">PHP<br> <input type="radio" name=" subject " value="html" checked >HTML<br>
Слайд 16: Элементы формы
< select name ="book" size = " 1 " > < option value =" asp ">ASP</ option > <option value=" js "> JavaScript </option> <option value=" php "> PHP </option> <option value="html" selected >HTML</option> ... </ select > size="5" size="8" закрыт открыт
Слайд 17: Элементы формы
<select name="book" size= " 8 " > < optgroup label =" Английские "> <option value="asp">ASP</option> ... </ optgroup > <optgroup label="Русские"> <option value="asp_rus">ASP по-русски</option> ... </optgroup> </select> <select name="book" size= " 8 " multiple > Что произойдет при <select size =" 1 " multiple > ? < textarea name =" description " cols =" 30 " rows =" 10 ">Какой-то текст</ textarea >
Слайд 18: Элементы формы
< input type =" image " name =" enter " src =" bluehome.gif " width =" 32 " height =" 32 "> < input type =" button " name =" push " value =" Что-то сделать "> <form enctype =" multipart/form-data " action =" file.php " method =" POST " > < input type =" file " name =" userfile " size=" 60 "> < input type =" hidden " name =" uid " value =" 15263 ">
Слайд 19: Элементы формы
<input type="text" name="login" value="Логин" disabled ><br> <input type="checkbox" name="asp" value="yes" checked disabled >ASP<br> ... <input type="radio" name="book" value="php" checked disabled >PHP<br> <input type="button" name="push" value=" Нажми меня " disabled ><br> <input type="text" name="login" value="Логин" readonly ><br> <textarea name="description" cols="30" rows="10" readonly >Какой-то текст</textarea>
Слайд 20: Элементы формы
< fieldset > < legend >Книги</ legend > <input type="checkbox" id="asp">ASP<br> <input type="checkbox" id="js">JavaScript<br> <input type="checkbox" id="php">PHP<br> <input type="checkbox" id="html">HTML<br> </ fieldset > < элемент tabindex = " 1 "> < элемент accesskey = " q ">
Слайд 21: Использование CSS ( опционально)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Формы</title> <style type="text/css"> form { background: #339; color: white; border: 3px double #90A0FF; padding: 6px; width: 250px; } input { color: #1030BB; background: #BBF; } </style> </head> <body> < form action="login.php" method="GET" enctype="text/plain"> Логин < input type="text" name="login" size="20" maxlength="25"><br> Пароль < input type="password" name="pass" size="20" maxlength="25"><br><br> < input type="submit" value=" Послать форму "> </form> </body> </html>
Слайд 22: Лабораторная работа
В файле form.html создайте с помощью таблицы форму регистрации. 1
Последний слайд презентации: Основы HTML и CSS Фреймы и формы: Итоги
Фреймы предназначены для разбиения экрана браузера на несколько независимых прямоугольных областей Ссылки в одном фрейме могут управлять содержимым другого фрейма Использование фрейма позволяет построить удобную навигацию по сайту Фреймы имеют недостатки, которые перевешивают их достоинства Использование формы - единственный способ получить какие-либо данные от пользователя