Изменение размера шрифта

Тема 3 практических занятий:
Создание личных WEB страниц (часть 2): редакторы HTML страниц. Настройка фреймов.

 

Справочные материалы: Основы языка HTML и введение в CSS и JavaScript


  + -

Замечание 1: Все выполненные задания и вспомогательные файлы сохранять (если это не оговорено особо) в вашей Личной папке.

Замечание 2: Создать при необходимости в личной папке каталоги img и bg и заполнить эти папки рисунками из папок img и bg соответственно.

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

Замечание 4: По этой ссылке можно найти подходящие Фоновые рисунки.

Замечание 5: Следует внимательно следить за соответствием регистров файлов и ссылок на них. Если, например, вы ссылаетесь на файл List.htm в папке Ref, то ссылка должна быть такой: <a href="Ref/List.htm">, а не <a href="ref/list.htm"> или <a href="REF/LIST.HTM">.

ВНИМАНИЕ! На этой странице находятся дополнительные справочные материалы по языку HTML


Задания семинара 3

Подтема 1. Настройка фреймов-1

1. Открыть страницу с фреймами Index1.htm. Сохранить данную страницу вместе со всеми фреймами: Logo.htm, Links.htm, Main.htm и Menu.htm. Проверить, что страница со фреймами настроена правильно и изменить неудачные фоновые цвета фреймов на более подходящие.

2. Создать папку Links в вашей рабочей папке (каталоге), в которой вы выполняете задания семинара 3. Переписать в эту папку файлы Archit.htm, GazZhurn.htm, NetGazZh.htm, PC_Soft.htm, Search.htm, Sport.htm, Polit.htm, Science.htm, Mail.htm и Nature.htm из папки Links на сайте.

3. Настроить ссылки в правом фрейме Links.htm страницы со фреймами Index1.htm таким образом, чтобы они открывались бы во фрейме Main.htm. Для этого выделить первую ссылку Политика и новости на странице (во фрейме) Links.htm и поставить гиперссылку на файл Polit.htm в папке Links:
    <А href="Links/Polit.htm">

4. В файле Links.htm выбрать фрейм в котором открывается ссылка: target="main". Вставить эти параметры в тег после указания на адрес гиперссылки href="Links/Polit.htm". Таким образом, в окончательном виде ссылка на файл Polit.htm будет выглядеть так:
<a href="Links/Polit.htm" target="main">Политика и новости</a>

5. Проверить работу созданной вами ссылки. Если страница Polit.htm откроется в окне main, то все сделано правильно, если нет - повторить пункты 3-4.

6. Настроить аналогичным образом все остальные ссылки во фрейме Links.htm кроме ссылок музеи и музыка.

Подтема 2. Настройка фреймов-2

1. Настроить ссылки в нижнем фрейме Menu.htm таким образом, чтобы они открывались во фрейме Main.htm (см. подтему 1).

2. Настроить ссылку на страницу СПбГУ в нижнем фрейме Menu.htm так, чтобы эта страница открывалась в новом окне. Для этого следует добавить параметр target="_blank" в гиперссылке http://www.spbu.ru.

2. Убедиться, что страница СПбГУ открывается в новом окне.

3. Настроить ссылку Url.htm в нижнем фрейме Menu.htm так, чтобы эта страница открывалась в полном окне: target= "_top".

Подтема 3. Вставка рисунков и таблиц в HTML документ

1. Открыть страницу Science.htm в папке Links для редактирования.

2. После ссылок на сайты Наука и техника, Мембрана и Знание-Сила вставьте таблицу из 3-х ячеек шириной 300pt (или 30%). Для того, чтобы вспомнить, как можно вставить таблицу на страницу Science.htm можно посмотреть как вставлена таблица на странице Nature.htm в папке Links.

3. Вставить в 1-ю ячейку таблицы рисунок NaukaTexn.gif из папки img. Увеличьте размер рисунку до 100x40 px.

4. Добавить гиперссылку <a href="http://www.n-t.org"> к вставленному вами рисунку NaukaTexn.gif. Не забыть закрыть ссылку с помощью тега </A>

5. Повторить пункты 3-4 для 2-й и 3-й ячеек таблицы, вставяя во 2-ю и 3-ю ячейки таблицы рисунки Membrana.gif и ZnanieSila.gif.

6. Удалить текстовые гиперссылки со страницы и сохранить исправленную страницу в папке Links. Проверить работу ссылки на страницу Links.htm в созданном вами фреймсете.

Подтема 4. Поиск сайтов и их подключение к списку ссылок. Создание страниц ссылок на серверы музеев России и Мира и Музыкальные серверы

1. Перейти к странице поисковых серверов в созданной вами странице с фреймами Index1.htm (пункт Поисковые серверы) и открыть один из них:
Rambler, Yandex и т.д.

2. Найти 3 ссылки на сайты музеев России и Мира с помощью поисковых серверов. Сохранить в папке img логотипы найденных сайтов.
Примечание: при сохранении логотипов измените при необходимости их имена на более запоминающиеся, например logo.gif на Luvr.gif при сохранении логотипа Лувра.

3. Создать страницу Museums.htm по образцу страницы GazZhurn.htm в папке Links.

4. Аналогичным образом найти 3 ссылки на Музыкальные сайты и сохранить логотипы этих сайтов. Создать страницы Music.htm так же, как и страницу Museums.htm, используя найцденные ссылки логотипы.

5. Добавить ссылки Музеи и Музыка на странице Links.htm как ссылки на страницы Music.htm и Museums.htm.

Подтема 5. Окончательная настройка страницы со фреймами

1. Проверить все ссылки в левом фрейме Links.htm. Установить в каких страницах ссылок не хватает рисунков.

2. Найти с помощью поисковых сервером недостаюшие ссылки и логотипы к ним. Настроить страницы с отсутствующими рисунками с помощью сохраненных ссылок и логотипов.