Создание фреймовой структуры на примере сайта «Космология древних и современный взгляд на мир»
ЗаданиеСоздайте сайт, используя фреймовую структуру.
Домашняя страницасайта — это frameset (набор фреймов), состоящий из 3 частей. Frameset представляет собой зоны на экране, в которых размещены другие Web-страницы, — фреймы. Реально домашняя страница образца сайта состоит из 4 страниц.
Один файл HTML — набор фреймов, он и является исходным файлом сайта. В нем указано имя каждого фрейма, его расположение на странице и источник фрейма.
У каждого фрейма есть специальный атрибут — источник фрейма, в котором задается адрес URL Web-страницы, которая будет отображаться в области страницы, отведенной под данный фрейм.
В верхнем фреймеоткрывается страница с анимированным графическим изображением в виде двух частей заголовка сайта: первая часть — «Космология древних и», вторая — «современный взгляд на мир».
Левый фреймсодержит страницу с панелью навигации. Она содержит кнопки, цвет теста на которых меняется при наведении на них курсора.
По щелчку кнопки Главнаяв главном фрейме открывается страница с содержимым домашней страницы.
По щелчку кнопок Первобытные племена, Египтяне, Греки, в главном фрейме открываются соответствующие страницы.
По щелчку кнопок Римлянеи Современностьв новом окне Internet Explorerоткрываются соответствующие страницы.
В главном фреймеоткрывается титульная страница с текстом вступительной статьи titul.doc, и графическим изображением из файла zemlya.jpg.
Цвет текста — 400000, выравнивание — по левому краю, стиль — Normal, тип и размер — по умолчанию. На странице установлены нулевые поля по левому и по верхнему краю. Установлено выравнивание графического изображения по правому краю и его обтекание. В качестве фона титульной страницы используется графическое изображение из файла fon_frame.gif.
Страница Первобытные племенапоявляется в главном фрейме по щелчку кнопки навигации с соответствующим названием. На странице размещен текст из файла text2_frame.docи графическое изображение из файла sth.jpg.
Границы левого и верхнего полей страницы нулевые.
Стиль заголовка страницы — Heading 2, цвет — черный, тип шрифта и размер — по умолчанию.
Установлено выравнивание графического изображения по левому краю и его обтекание.
В качестве фона страницы используется графическое изображение из файла bg-m.jpg.
Страница Египтянепоявляется в главном фрейме по щелчку кнопки навигации с соответствующим названием. На странице размещены:
текст из файла text3_frame.doc;
графические изображения tot.jpg, hathor.jpg, pavian.jpg, nut-geb.jpg, osiris-anubis.jpg.
Установите нулевые границы левого и верхнего полей страницы.
Выравнивание и обтекание графических изображений установите в соответствии с образцом.
В качестве фона выбрано графическое изображение из файла bg.jpg.
Страница Грекипоявляется в главном фрейме по щелчку кнопки навигации с соответствующим названием. На странице размещены:
текст из файла text4_frame.doc;
графические изображения gaia.jpg, venus.jpg, atlant.jpg.
Установите нулевые границы левого и верхнего полей страницы.
Стиль заголовка «О происхождении богов (Теогония)» — Heading 2, подпись после него «(фрагмент)» — Heading 3. Выравнивание заголовков — по центру. Стиль, тип шрифта и размер шрифта текста до заголовка — установленные по умолчанию, цвет — черный.
Стиль, тип шрифта и размер шрифта фрагмента текста после заголовка — установленные по умолчанию, цвет — 400000.
Выравнивание и обтекание графических изображений установите в соответствии с образцом.
В качестве фона выбрано графическое изображение из файла bg-gr.jpg.
Страница Римлянепоявляется в новом окне Internet Explorerпо щелчку кнопки навигации с соответствующим названием. На странице размещены:
текст из файла text5_frame.doc;
графическое изображение Roma.jpg.
Установите нулевые границы левого и верхнего полей страницы.
Стиль заголовка «ГОД СВИНЬИ У ДРЕВНИХ РИМЛЯН» — Heading 2, фамилия автора текста «Коптев А. В.» — Heading 3. Цвет обоих заголовков — 996600.
Названия трех первых стихотворений отформатированы следующим образом: стиль — Normal, тип шрифта — defalt font, размер — Normal, начертание — Bold(жирный), цвет — 996600.
Остальной текст — стиль, тип и размер шрифта установлены по умолчанию, цвет — черный.
Между вторым и третьим стихотворениями установлен двойной разрыв строки.
Установлено выравнивание графического изображения по левому краю и его обтекание.
В качестве фона выбрано графическое изображение из файла bg-r.jpg.
Страница Современностьзагружается в текущее окно Internet Explorerпо щелчку кнопки навигации с соответствующим названием вместо всего содержимого, открытого ранее. На странице размещены:
текст из файла text6_frame.doc;
графическое изображение evolution.jpg.
Установите нулевые границы левого и верхнего полей страницы.
Стиль, тип и размер шрифта установлены по умолчанию, цвет — черный.
Графическое изображение выровнено по правому краю и установлено обтекание.
В качестве фона выбрано графическое изображение, содержащееся в файле bg-n.jpg.
Порядок выполнения
Создайте новый сайт.
Создайте титульную страницу, которая будет открываться в главном фрейме:
1. создайте новую страницу и на ней таблицу из 1 ячейки;
2. установите нулевые поля страницы;
3. ширина таблицы — 90%, выравнивание — по левому краю;
4. установите невидимые границы таблицы;
5. вставьте в таблицу текст;
6. после первого абзаца текста вставьте графическое изображение и установите его выравнивание по правому краю;
7. установите вертикальное и горизонтальное обтекание графического изображения;
8. сохраните титульную страницу.
Создайте страницу Первобытные племена:
1. создайте новую страницу и на ней таблицу из 1 ячейки;
2. установите нулевые поля страницы;
3. ширина ячейки — 90%;
4. установите невидимые границы таблицы;
5. вставьте содержимое текстового файла и установите требуемые параметры шрифта;
6. вставьте графическое изображение после второго абзаца и установите его выравнивание по левому краю и обтекание;
7. вставьте графическое изображение в качестве фона;
8. сохраните страницу.
Создайте страницу Египтяне:
1. создайте новую страницу и на ней таблицу из 1 ячейки;
2. установите нулевые поля страницы;
3. ширина ячейки — 90%;
4. выравнивание таблицы — по левому краю;
5. вставьте текстовый файл и установите его форматирование в соответствии с образцом;
6. вставьте графические изображения и установите их выравнивание в соответствии с образцом по левому или по правому краю; установите обтекание графических изображений;
7. сохраните страницу.
Создайте страницу Греки:
1. создайте новую страницу и на ней таблицу из 1 ячейки;
2. установите нулевые поля страницы;
3. ширина ячейки — 95%;
4. выравнивание таблицы — по левому краю;
5. вставьте текстовый файл и установите его форматирование в соответствии с образцом;
6. вставьте графические изображения и установите их выравнивание в соответствии с образцом по левому или по правому краю; установите обтекание графических изображений;
7. вставьте фоновое изображение страницы;
8. сохраните страницу.
Создайте страницу Римляне:
1. создайте новую страницу и на ней таблицу из 1 ячейки;
2. вставьте текстовый файл и установите его форматирование в соответствии с образцом;
3. вставьте графическое изображение и установите его выравнивание в соответствии с образцом по левому краю; установите обтекание графического изображения;
4. вставьте фоновое изображение страницы;
5. сохраните страницу.
Создайте страницу Современность:
1. создайте новую страницу и на ней таблицу из 1 ячейки;
2. установите нулевые поля страницы;
3. ширина ячейки — 90%;
4. выравнивание таблицы — по левому краю;
5. вставьте текстовый файл и установите его форматирование в соответствии с образцом;
6. вставьте графическое изображение и установите его выравнивание в соответствии с образцом по правому краю; установите обтекание графического изображения;
7. вставьте фоновое изображение страницы;
8. сохраните страницу.
Создайте домашнюю страницу сайта, представляющую frameset , состоящий из верхнего баннера , левой колонки и главного фрейма. Заполните содержимое верхнего фрейма:
1. создайте новую страницу;
2. создайте заголовок сайта и вставьте его в верхний фрейм;
3. установите выравнивание графического объекта по ширине;
4. вставьте фоновое изображение верхнего фрейма.
Создайте страницу с навигационной панелью в левом фрейме:
1. создайте новую страницу и на ней таблицу из 1 столбца и 6 строк;
2. создайте для каждой кнопки 2 графических изображения: первое должно соответствовать обычному виду кнопки, второе — внешнему виду кнопки при подведении к ней курсора;
3. вставьте в ячейки таблицы изображения с обычным видом кнопок;
4. для каждой кнопки примените динамический HTML-эффект для смены изображения при подведении курсора;
5. вставьте фоновое изображение страницы с панелью навигации.
Вставьте титульную страницу в главный фрейм.
Сохраните созданный frameset под именем index.htm.
Создайте гиперссылки с кнопок навигации на страницы с соответствующими названиями. При создании гиперссылки с кнопки «Римляне» установите режим New Window(Открывать в новом окне). При создании гиперссылки с кнопки «Современность» установите режим Whole Page(Открывать страницу целиком).