Разработка Web-страниц
Выбери формат для чтения
Загружаем конспект в формате pdf
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
2. Краткий курс лекций дисциплины
Практикум по разработке Web-страниц
Проработайте курс лекций за компьютером, разбирая каждую тему и
приемы работы в офисных приложениях
Содержание дисциплины
ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ ДОКУМЕНТА HTML.......................2
Лекция 1.Фреймы ...................................................................................................2
Вопросы для самоконтроля ...................................................................................6
Лекция 2. Формы ....................................................................................................8
Вопросы для самоконтроля ................................................................................. 16
Лекция 3. Теги
и . Группировка элементов страницы ................ 18
Вопросы для самоконтроля ................................................................................. 21
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ. ОСНОВЫ CSS. ......................................22
Лекция 1. Форматирование блоков .....................................................................22
Вопросы для самоконтроля ................................................................................. 25
Лекция 2. Управление обтеканием. Атрибуты float и clear ............................... 26
Вопросы для самоконтроля ................................................................................. 27
Лекция 3. Позиционирование объектов Web-страницы ....................................28
Вопросы для самоконтроля ................................................................................. 31
Лекция 4. Позиционирование блока ...................................................................32
Вопросы для самоконтроля ................................................................................. 37
Лекция 5. Колонки одной высоты .......................................................................38
Вопросы для самоконтроля ................................................................................. 45
1
Язык гипертекстовой разметки документа HTML
Лекция1.Фреймы
Фреймы - это области, которые создаются в
одновременного отображения нескольких документов.
окне
браузера
для
Области применения фреймов
создание неподвижной или прокручиваемой навигационной панели
управления (Такая реализация фреймов удобна тем, что она позволяет
посетителю перемещаться по сайту и независимо от его месторасположения
постоянно иметь перед глазами панель управления с перечнем всех или
основных разделов сайта).
одновременное отображение информации в нескольких местах Webстраницы (используется, когда бывает необходимо видеть одновременно
несколько текстовых или иных информационных блоков, расположенных в
разных окнах. Это может быть структура книги (главы, разделы, подразделы и
соответствующее им содержание), перечень товаров и их разнообразные
характеристики и др.).
постоянное
визуальное
присутствие
определенного
текстового,
графического или иного объекта(Иногда веб-разработчики ставят перед собой
задачу размещения конкретного объекта на странице таким образом, чтобы он
был хорошо виден посетителям данного Web-сайта независимо от их
действий. В качестве таких объектов могут выступать фирменные логотипы,
эмблемы, фотографии, рекламные баннеры, навигационные меню, надписи,
рубрикаторы и многое другое).
Структура HTML-документа, содержащего фреймы
Структура HTML-документа с фреймами отличается от обычной структуры.
Заголовокстраницы
Каки в обычном HTML-документе, весь код расположен между тегами
и , а в разделе headрасполагаются заголовки. Основное отличие
документа с фреймами от обычного HTML-документа заключается в том, что
у документа с фреймами отсутствует раздел body ,отсутствует содержимое
2
страницы, а присутствуют только теги, служащие для определения фреймовой
структуры. Иными словами, документ с фреймами не может содержать раздела bodyи наоборот, обычный HTML-документ не может содержать фреймовую структуру. Кроме того, содержать фреймовую структуру может только
документ в формате Frameset. Для объявления формата используется заголовок:
Вместо тега применяется парный тег , описывающий фреймовую структуру. Каждое отдельное окно описывается тегом . Если
Web-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и .
Описание фреймовой структуры
Парный тег описывает фреймовую структуру. Внутри тегов
и могут содержаться только теги или другой
набор фреймов, описанный тегами и .
Тегимеетследующие параметры:
rowsописывает разбиение на строки:
cols описывает разбиение на столбцы:
В качестве значений параметров rowsи cols указываются размеры фреймов.
Должно быть указано как минимум два значения. Все значения в списке
разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
cols=”20%, 80%”
Кроме того, в качестве ширины или высоты может быть указана звездочка
(*), которая означает, что под фрейм нужно отвести все оставшееся пространство:
Rows=”100, *”
Описание отдельных областей
Тег описывает одиночный фрейм и не имеет закрывающего тега. Он
располагается между тегами и и имеет следующие
параметры:
src определяет URL-адрес документа, который должен быть загружен во
фрейм. Может быть указан абсолютный или относительный URL-адрес:
nameзадает уникальное имя фрейма:
3
scrolling запрещает или разрешает отображение полос прокрутки во фрейме. Этот параметр может принимать следующие значения:
o auto – полосы отображаются, только если содержимое не помещается
во фрейме (значение по умолчанию):
o yes – полосы отображаются в любом случае:
o no – полосы не отображаются в любом случае:
marginwidth задает расстояние в пикселях между границей фрейма и его содержимым по горизонтали:
marginheight указывает расстояние в пикселях между границей фрейма и
его содержимым по вертикали:
frameborder включает или отключает показ границы между фреймами. Может принимать одно из двух значений:
o 1 –граница отображается (по умолчанию):
o 0- граница не отображается:
noresize отключает возможность изменения размеров фрейма пользователем. По умолчанию любой пользователь может изменить размер фрейма
путем перемещения границы. Добавляется этот параметр так:
Тег
Если Web-браузер не поддерживает фреймы, то в окне будет отображен текст,
расположенный между тегами и . В противном случае
содержимое этих тегов будет проигнорировано. Например:
Разделение окна Web-браузера на несколько областей
Обычно заголовок и панель навигации для всех страниц сайта содержат одну
и ту же информацию, а изменяется только основное содержание страниц. С
помощью фреймовой структуры можно заголовок поместить в одно окно,
панель навигации – во второе, а основное содержание страницы – в третье.
Это позволит, оставляя в неизменном состоянии два первых окна, изменять
содержание третьего.
Внимание! Все создаваемые Вами файлы фреймовой структуры должны
находиться в одной папке (или должен быть прописан к ним путь,если это не
4
так).
Создадим Web-страницу с такой структурой. Для этого создадим 5 файлов:
header.html – заголовок Web-страницы. Содержимое:
Создание фреймовой структуры
Панель навигации
Глава 1
Глава 2
Пример использования фреймов
Все созданные файлы сохраните в одной папке. Затем в Web-браузере откроем
файл Frame_set.html. На появившейся странице мы видим, что окно разделено
на три прямоугольные области. В верхней части окна находится шапка сайта.
В нижней части окна расположены панель навигации (слева) и основная часть
документа (справа). При переходе по ссылкам содержимое основной части
меняется, а остальные остаются неизменными.
Теперь попробует изменить цвет фона шапки. Для этого необходимо отобразить исходный код Web-страницы. Существуют три способа отображения кода:
по команде Вид, Просмотр HTML-кода (в браузере InternetExplorer);
щелкнуть ПКМ в любом месте окна Web-браузера, в появившемся меню выбрать Просмотр HTML-кода (Исходный код страницы).
Открыть файл, содержащий исходный код, с помощью Блокнота или
другого текстового редактора.
Если документ содержит фреймы, результаты первых двух действий будут
разными. Первый способ отобразит только код структуры Web-страницы, а не
исходный код каждого из HTML-документов. Второй способ позволяет отобразить код лишь одного HTML-документа, а от места щелчка зависит, код
какогоHTML-документа будет отображен. В нашем случае для отображения
исходного кода файла заголовка (header.html)необходимо правой кнопкой
мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода (Исходный код
страницы).
Заменяемстрочку
на
Сохраняем файл и обновляем Web-страницу. В результате цвет фона заголовка изменится с белого на матовый.
Вопросы для самоконтроля
1.
2.
3.
4.
Что такое фрейм?
Назовите основные области применения фреймов?
Опишите структуру HTML-документа, содержащего фреймы?
В чем заключается описание фреймовой структуры?
6
5. Может ли описание фрейма содержаться в одном файле с основным
документом?
6. Что описывает одиночный тег ? Какие параметры он имеет?
7. Для чего используется тег ?
8. Опишите принцип разделения окна Web-браузера на несколько
областей?
7
Лекция2.Формы
Формы в HTML предназначены для обмена данными между пользователем и
сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Для отправки формы на сервер используется кнопка SUBMIT, такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы.
Когда HTML-форма отправляется на сервер, управление данными передается
CGI-программе, заданной параметром actionтега form. Аббревиатурой CGI
(Common Gateway Interface, общий шлюзовый интерфейс) обозначается
протокол, с помощью которого программы взаимодействуют с Web-сервером.
С помощью CGI на сервере можно выполнять программы на любом языке
программирования и результат их действия выводить в виде веб-страницы.
Порядок обработки формы при использовании CGI-интерфейса выглядит
следующим образом:
Пользователь заполняет форму на Web-странице и нажимает кнопку с
типом submit.
Браузер анализирует URL-адрес CGI-приложения, заданный в параметре
ACTION формы и устанавливает соединение с соответствующим Webсервером (в качестве Web-сервера может быть использован, например
сервер Apache).
Web-сервер преобразует URL-адрес в путь к файлу на компьютере и
определяет, что URL-адрес указывает на CGI-приложение, а не на
статический файл.
Web-сервер подготавливает переменные окружения и запускает CGIприложение на выполнение.
Эта программа в соответствии с заданным методом передачи данных на
сервер (GET или POST) определяет переменные окружения и считывает
данные в виде пар "имя=значение", осуществляя, если необходимо, их
перекодировку.
Программа выводит в стандартный выходной поток HTTP-заголовок и
результаты обработки данных формы в виде динамически созданного
HTML-документа.
Web-сервер передает браузеру полученный документ и закрывает с ним
соединение.
Браузер отображает полученные данные на экране в виде Web-страницы.
Структура документа с формами
8
Форма добавляется в HTML-документ при помощи парного тега могут располагаться теги ,
ВашWeb-браузернеотображаетфреймы
Шапкасайта
Navigation_bar.html – панель навигации. Содержимое:Содержание
Chapter1.html – содержание главы 1;Глава 1
Содержание главы 1
Chapter2.html – содержание главы 2;Глава 2
Содержание главы 2
Frame_set.html – HTML-документ, описывающий фреймовую структуру. 5Ваш Web-браузернеотображаетфреймы