Анализ требований к проекту сайта (см табл. 9) 18 Согласование выработанной идеи проекта сайта с заказчиком (преподавателем) 18

Вид материала

Курсовой проект

Содержание Интерактивные Web-страницы. Формы Поля ввода Списки выбора Многострочный текстовый блок Каскадные таблицы стилей Синтаксис таблиц стилей Включение стилевых таблиц в HTML-документ Использование нескольких стилей в одном документе

Подобный материал:

• План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
• Техническое задание на разработку туристического сайта сайта, 140.48kb.
• Данная статья посвящена теме того, как правильно спланировать техническую концепцию, 219.36kb.
• Коммерческое предложение по созданию сайта для организации цели и задачи проекта, 83.72kb.
• Название доклада, 56.02kb.
• Расчет эффективности создания сайта, 52.25kb.
• Как повысить эффективность сайта и рекламной кампании. Seo оптимизация в примерах, 175.09kb.
• Составление семантического ядра сайта, 26.35kb.
• Техническое задание на выполнение работ по созданию сайта листов, 1081.26kb.
• Проектирование и размещение в сети Интернет административных сайтов образовательных, 1528.71kb.

Необходимо описать ее следующим образом:





























Кадры отображать не могу!!!!!

Интерактивные Web-страницы. Формы

Формы предназначены для организации интерактивного режима работы пользо­вателя, обеспечивая взаимодействие между пользователем, работающим на кли­ентской машине, и web-приложениями, выполняющимися на стороне сервера.

Для создания формы используется пара тегов

и

. Между ними распо­лагаются строки, описывающие различные элементы управления: кнопки, поля ввода, флажки и т. п.

Совместно с тегом

практически всегда используются атрибуты ACTION и METHOD:

• атрибут ACTION предназначен для указания URL-адреса программы (сцена­рия), которая будет выполнять обработку данных, введенных пользовате­лем;
  
• атрибут METHOD определяет метод, с помощью которого данные, введенные пользователем, будут передаваться на сервер. Данный атрибут может прини­мать одно из двух значений: GET или POST.
  

Основные элементы управления создаются с помощью тега , который ис­пользуется без закрывающего тега. Тип управляющего элемента задается с помо­щью атрибута TYPE данного тега. Кроме атрибута TYPE тег содержит ряд других атрибутов, определяющих параметры элемента управления.

Поля ввода

Для создания полей ввода атрибуту TYPE следует присвоить значение "TEXT" (ка­вычки обязательны). Параметры поля ввода задаются следующими атрибутами тera :

• NAME – идентификатор элемента управления;
  
• VALUE – начальное значение, отображаемое в поле ввода сразу после загрузки документа;
  
• SIZE – максимальное количество отображаемых символов;
  
• MAXLENGTH – максимальное количество символов, которые могут быть введены с помощью данного поля ввода.
  

Например, приведенный ниже фрагмент кода создает форму, содержащую тексто­вое поле txt1 длиной 20 символов:


ACTION="scripts/test.cgi">

Имя:

Имеется еще одна разновидность полей ввода – поля, предназначенные для ввода пароля. Для создания такого поля ввода атрибуту TYPE следует задать значение "PASSWORD". Все символы, вводимые в этом поле ввода, будут отображаться на эк­ране в виде звездочек (*). В остальном этот элемент управления ничем не отлича­ется от обычного поля ввода.

Флажки

Для создания флажка атрибуту TYPE тега задается значение "CHECKBOX". Параметры флажка определяются следующими атрибутами:

• NAME – идентификатор элемента управления;
  
• VALUE – атрибут, определяющий значение, которое передается на сервер в слу­чае, если флажок установлен;
  
• CHECKED – атрибут, указывающий, что после загрузки документа флажок дол­жен быть установлен. Данному атрибуту не задается никакого значения.
  

Например, следующий код создает флажок, передающий на сервер значение "YES" и по умолчанию являющийся установленным:

ACTION-"scripts/test.cgi">



Запомнить

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

Переключатель представляет собой группу элементов управления, подобных флаж­кам. Однако в отличие от последних в установленном состоянии может находить­ся только один из элементов управления, входящих в группу. Для создания пере­ключателей атрибуту TYPE задается значение "RADIO" . Параметры переключателей определяются следующими атрибутами:

• NAME – идентификатор переключателя. Он должен быть одинаковым для всех элементов управления, входящих в одну группу;
  
• VALUE – значение, передаваемое серверу при установленном значении элемента управления;
  
• CHECKED – атрибут, указывающий, какой из элементов управления должен быть установлен в группе при загрузке документа.
  

Следующий фрагмент HTML-кода содержит описание переключателя с тремя положениями:

ACTION="scripts/test.cgi">



сегодня




за последнюю неделю




за последний месяц

Кнопки

Различают два вида кнопок:

• кнопка SUBMIT производит передачу введенных пользователем данных на сервер;
  
• кнопка RESET сбрасывает все элементы управления в исходные состояния.
  

Для создания кнопок атрибуту TYPE задается значение либо "SUBMIT", либо "RESET" – в зависимости от того, какую кнопку требуется создать. Надпись на кнопке задается с помощью атрибута VALUE.

Приведенный ниже фрагмент кода создает пару кнопок, одна из которых имеет тип SUBMIT, а вторая – RESET:

Списки выбора

Парный тег позволяет создавать обычные и раскрывающиеся списки. Отдельные пункты задаются при помощи парного тега , который допустим только внутри данного элемента (закрывающийся тег можно опускать). Параметры элементов списка описываются следующими атрибутами:

• NAME – идентификатор элемента списка;
  
• MULTIPLE – наличие этого атрибута, позволяет пользователю одновременно выбрать несколько элементов списка;
  
• SELECTED – атрибут, использующийся для пометки элементов списка, которые будут выбраны.
  

Например, следующий код создает выпадающий список из трех элементов, а пункт «Второй элемент» выбран по умолчанию:

ACTION-"scripts/test.cgi">

Первый элемент

Второй элемент

Третий элемент

Многострочный текстовый блок

Парный тег определяет прямоугольное окно, для ввода текстовой информации. Если определено значение по умолчанию, оно выводится при открытии формы, в противном случае поле появится незаполненным. Параметры текстовой области определяются следующими атрибутами:<br /> <ul> <li> NAME – идентификатор текстового блока;<br /> <li> R<img src="images/12150-nomer-6ba88ded.gif">OWS, COLUMNS – атрибуты, имеющие целочисленные аргументы, определяющие число строк в текстовом блоке и количество символов в строке;<br /> </ul> <br /> Этот пример иллюстрирует применение тега <TEXTAREA>:<br /> <br /> <FORM METHOD="POST"<br /> <br /> ACTION-"scripts/test.cgi"><br /> <br /> <TEXTAREA NAME="ta1" ROWS=5 COLUMNS=40>Я поступил в этот ВУЗ потому что…<br /> <br />



В заключение приведем пример формы, содержащей все основные элементы управ­ления:

Пример создания форм

Имя:

Запомнить

сегодня


за последнюю неделю


за последний месяц



Первый элемент

Второй элемент

Третий элемент

Введите в это поле свои комментарии:


Я поступил в этот ВУЗ потому что…<br /> <br />

Вид приведенного HTML-документа в окне браузера Internet Explorer показан на рис. 1.

По щелчку на кнопке отправки данные из формы передаются в виде пар текущих значений атрибутов NAME и VALUE, соединенных знаком равенства. Информация о флажке передается только в том случае, если он установлен. Если атрибуты NAME и VALUE определены для использованной кнопки отправки, соответствующие данные также передаются (это позволяет включать в форму несколько кнопок отправки). Данные, поступающие в таком виде, удобны как для ручной, так и для автомати­ческой обработки.

Каскадные таблицы стилей

Стиль – это правило, которое определяет внешний вид того или иного элемента в документе. Используя технологию CSS, вы можете задавать стиль для тегов, т.е. в стилевых таблицах вы определяете, как будет выглядеть web-страница на экране браузера.

Преимущества стилевых таблиц:

1. Таблицы стилей позволяют отделить логическую структуру страниц от визуального представления (оформления).
   
2. Созданная таблица стилей может применяться ко всем страницам сайта, благодаря чему соблюдается единство его оформления.
   
3. Если сайт оформлен с помощью единственной стилевой таблицы, случае внесения изменений в оформление тегов в стилевой таблице эти изменения вступят в силу на всех страницах сайта. Тем самым CSS позволяют гибко управлять внешним представлением страниц на экране.
   

Синтаксис таблиц стилей

Все объявления стилей называются правилами, каждое из которых состоит из двух частей (рис.2): селектора (Н1), определяющего тег в НТML-документе (заголовок, параграф и т.д.) и определения (color:red), устанавливающего стиль, применяемый к данному селектору (тегу).


свойство значение



H1 {color:red}


селектор определение стиля

Рис.2.Синтаксис CSS.

Определение, в свою очередь, состоит из двух частей: свойства (color) и значения (red). Они записываются в фигурных скобках и отделяются друг от друга двоеточием. Для уменьшения размеров таблиц стилей селекторы группируются через запятую, а определения – через точку с запятой. Например:

H1, H2 {color:red; font-family:Arial}

В данном примере задается одинаковое оформление для заголовков первого и второго уровня: красный цвет и шрифт Arial.

Кроме того, стилевые таблицы поддерживают свойство наследования, благодаря которому вы не должны определять стили для всех тегов, которые используете при создании HTML-страниц, достаточно определить стиль по умолчанию для всего документа в теге BODY. Однако важно помнить, что на практике наследование не всегда корректно поддерживается браузерами.

Для большей гибкости при оформлении страниц можно создать свои собственные классы и задать для них стили⁶.

Включение стилевых таблиц в HTML-документ

Существует три способа добавления CSS в HTML-документ, описанных в таблице 7.

Очевидно, что использование внешней таблицы стилей – наиболее предпочтительный вариант, поскольку вы можете подключить эту таблицу ко всем документам сайта и таким образом получите достаточно гибкий механизм управления его внешним видом. При внесении изменений в один файл (в нашем примере site.css) они вступят в силу сразу на всех страницах, использующих внешнюю стилевую таблицу, описанную в этом файле (site.css). Создать внешнюю стилевую таблицу можно с помощью простейшего текстового редактора, допустим Notepad, сохранив файл с расширением .css.

Таблица 7. Включение CSS в HTML–документ.
Приоритетность стилей при перекрывании установок

Способ	Тег и распо-ложение	Пример	Приоритетность стилей	Использование нескольких стилей в одном документе
Подключение внешней стилевой таблицы	помещается в заголовочную часть HTML-документа			TYPE=”text/css”>
Использова-ние внутренней стилевой таблицы
Указание стиля непосред-ственно внутри тега		…		А текст будет красным