Chapter X

Дата добавления: 2015-08-29; просмотров: 761

Тема: «Фреймовая структура Web-документа»

Цель работы:

1. Научиться создавать Web-документ, имеющий фреймовую структуру.

2. Выработать навык эстетического оформления web-документа.

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

Ход работы:

1. Создать в папке Мои документы свою папку Задание_1.

2. Скопировать в эту папку содержимое папки Материалы_3.

3. Создать в блокноте HTML-документы, используя файлы из папки Материалы_3 (разбить страницу на фреймы, сделать ссылки из левого фрейма на вновь созданные HTML-документы).

4. Каждый HTML-документ, на который делается ссылка, должен содержать текстовый фрагмент и картинку (для размещения текста и картинки использовать неявную таблицу и форматирование текста по ширине).

5.

6.

7. Создать в блокноте HTML-документы, используя файлы из папки Материалы_ 3 (1-ый HTML-документ должен разделить страницу на кадры, во 2-ой HTML-документ вставить картинку с изображением-картой; создать также HTML-документы, которые будут загружаться в левом фрейме при щелчке на соответствующих областях изображения -карты.)

8. Для определения координат областей на изображении-карте воспользоваться графическим редактором Photoshop (фильтром MapTag).

9.

рис.2

Индивидуальные задания:

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

2. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление, представленное с помощью графического горизонтального меню, например в виде таблицы.

3. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление. Оглавление представьте с помощью изображения-карты. При выборе активной области в нижнюю область окна должен быть загружен соответствующий пункту раздел.

4. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: левую и правую. В левой области поместите оглавление, при выборе пунктов которого соответствующий пункту раздел должен появляться в правой части окна. Оглавление представьте с помощью изображения-карты.

5. Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В верхнюю область А поместите графическое изображение, в область В — оглавление, при выборе пунктов которого соответствующий раздел должен появляться в области С. Оглавление может быть представлено:

· списком;

· изображением-картой.

Пунктам меню могут соответствовать разделы:

· одного документа;

· разных документов.

Представьте материалы в виде HTML-документов с описанной структурой.

6. Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В область В поместите оглавление - меню, представленным в виде таблицы.
Разделы, соответствующие пунктам меню, должны появляться в области С. (данное задание можно сделать, изучив основы скриптового программирования). При попадании курсора мыши на соответствующий пункт меню, в области А должна появляться краткая аннотация выбранного пункта. Представьте материалы в виде HTML-документов с описанной структурой.

7. Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В верхнюю область А поместите изображение-карту, дублирующую меню области В.

8. Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область окна делится на две части: левую (В) и правую (С). Нижняя область (А) занимает по ширине весь экран. В область А поместите оглавление для некоторых художественных шедевров. При выборе пункта оглавления в части В должна появиться репродукция картины, в части — С сведения о художнике или о картине.

9. Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область окна разбивается на две части: левую (В) и правую (С). Нижняя область (А) занимает по ширине весь экран. В область В поместите оглавление, представленное меню в виде таблицы. Разделы, соответствующие пунктам меню и содержащие теоретический материал, должны появляться в области С. В область А поместите документ, содержащий ссылки на примеры, практическую работу, контрольные вопросы, список литературы по выбранному разделу.

10. Создайте документ, разбивающий окно просмотра с помощью фреймов на четыре прямоугольные области, как показано на рис. . В области А поместите оглавление. При выборе пункта оглавления в область В должен помещаться теоретический материал, соответствующий пункту меню, в область С — список контрольных вопросов по рассматриваемой теме, в область D — практическая работа. Представьте материалы в виде HTML-документов описанной структуры.

Контрольные вопросы:

1. Что такое фреймы?

2. Каким образом задается фреймовая структура Web-документа?

3. Какие атрибуты имеются у тега <FRAMESET>?

4. Перечислите атрибуты тега <FRAME>

5. Как описываются внедренные окна?

6. Как описать карту изображения?

Лабораторно-практическая работа № 3

Тема: «Применение и использование таблиц стилей (CSS) на Web-страницах»

Цель работы:

1. научиться использовать свойства стилей для задания форматирования web-документов.

2. выработать навык эстетического оформления web-документа.

Задания:

1. Используя стили, постройте документ "Приватные и публичные программы", представленный на рисунке.

В этом документе:

Ø Основные цвета: черный текст на белом фоне.

Ø Отступ всех элементов на странице слева и справа равен по 2 см.

Ø Абзацы выравниваются справа.

Ø Заголовки выравниваются справа и записываются рубленым шрифтом красного цвета.

Ø Термины, выделяемые курсивом, записываются зеленым цветом.

2. Разработайте стиль для вывода на экран следующего текста:

Задание выполняется по вариантам:

3. Сделайте новый стиль р. def. Для текстов заголовков и абзацев используйте рубленый шрифт. Абзацы этого стиля должны выравниваться по левому и правому краям, иметь отступ слева 2 см и справа 1 см. Расположите на странице обычные абзацы вместе с абзацами p.def.

4. Определите стили для написания старой и новой цен товара. Старая цена — серого цвета, перечеркнутая.
Новая цена — красного цвета, на 50% более крупного кегля, чем остальной текст. Напишите список товаров со старыми и новыми ценами.

5. Определите два стиля.

В первом стиле:

Ø Буквы должны печататься коричневым по светло-серому фону.

Ø Расстояние между содержимым и рамкой элемента должно составлять 0,5 см.

Ø Текст выравнивается по левому и правому краям.

Во втором стиле:

Ø Фон бирюзовый.

Ø — Расстояние между содержимым и рамкой элемента должно составлять 0,5 см.

Ø Поля слева и справа от элемента по 1 см.

Ø Рубленый шрифт.

Подготовьте документ с двумя разделами. Первый раздел определяется первым стилем, второй -- вторым. Второй раздел должен быть вложен в первый, чтобы было видно наследование. Какие стилевые указания наследуются во втором разделе, а какие нет?

6. Определите стиль .nb таким образом, чтобы элемент заключался в рамку (бордюр), занимал (по ширине) половину окна браузера (независимо от его размера), был расположен у левого края, а остальные элементы страницы обтекали бы этот элемент справа.

7. Подготовьте стиль для абзаца, у которого слева и справа проводится вертикальная черта (на всю высоту абзаца).

8. Подготовьте стиль абзаца "подложка" (.ground) и стиль "надпись" (.poster). Используя созданные стили, создайте страницу с надписью поверх подложки. Подложка пишется очень крупными буквами мягкого светло серого цвета. Надпись пишется коричневыми буквами обычного размера.

9. Используя стили, сделайте страницу, в которой текст выводится в две колонки (как в газете). Таблицы при этом не используйте.

10. Постройте на экране две области с линейками прокрутки и поместите в них информационные элементы.

11. Используя свойство z-index, постройте на экране несколько перекрывающих друг друга областей:

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

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

Ø Напишите страничку, демонстрирующую работу свойства overflow

Ø Используя позиционирование, создайте «объемную» надпись из обычного текста (без картинок). Эта надпись должна быть привязана к своему месту в абзаце, подобно обычному слову.

Ø Если у абсолютно позиционированного элемента опущена одна или две координаты, то: если не задано свойство left, то левый край элемента будет располагаться справа за элементом-родителем.

Если не задано свойство top, то верхний край элемента будет располагаться ниже элемента-родителя. При этом если родитель позиционирован относительно, то элемент будет располагаться по вертикали там, где он располагался бы, если бы вообще не был позиционирован.

Ø Используя описанные особенности, создайте страничку с левым полем, в котором бы располагался маркер, указывающий на ошибочное слово в строке. При этом, если из-за изменения размера окна ошибочное слово переместится в другую строку, маркер должен автоматически следовать за ним.

Контрольные вопросы:

1. Какое CSS-указание главнее: описанное в отдельном теге или размещенное в разделе HEAD HTML-документа?

2. Какое указание главнее: описанное в разделе HEAD HTML - документа или размещенное в отдельном CSS-файле и связанное с документом при помощи тега LINK, помещенного в раздел HEAD? Зависит ли результат от порядка следования этих предписаний?

3. Назовите блочные элементы разметки.

4. Какими свойствами обладает текст, шрифт, списки?

5. Как при помощи CSS наложить текст на картинку?

6. Как расположены оси в позиционной системе координат CSS?

7. Перечислите свойства CSS, отвечающие за управление видимостью, порядок наложения элементов, области видимости.