Часть 3. Создание страницы “prav1.Html”.
3.1. Откройте файл “prav1.html” (если он не открыт) с помощью программы Dreamweaver.
Присоедините файл our_style.css.
Создайте таблицу из одной строки и двух столбцов со следующими параметрами:
Строки – 1; Столбцы – 2;
Ширина таблицы – 100%, (в процентах от экрана);
Поля ячеек – 6;
Интервал ячеек – 0, расстояние между ячейками.
Толщина таблицы – 0.
3.2. Вручную определите ширину второго столбца, равную 100 пикселей, т.е. в тег <td> добавьте выражение width="100". В качестве фона второй ячейки используйте георгиевскую ленточку “georgiy.jpg” из папки “right”. Добавьте рисунок “hero4.gif” в эту ячейку (вторую) из папки “right” и выровняйте все элементы ячейки по центру. Прижмите рисунок “hero4.gif” к верхней границе второй ячейки (добавляя параметр valign="top" к тегу <td>) .
3.3. А теперь займемся основной частью текущей страницы, т.е. первой ячейкой.
Добавьте изображение “jukov_gk.jpg” из папки “right”. В этой же папке находится текстовой файл “jukov.txt”. Содержимое этого файла расположите после изображения, так, чтобы текст начинался с верхней границы изображения (а не так, как получается снизу справа по умолчанию). Для этого в тег <img src=…..> нужно добавить параметр align="left".
3.4. Выделите текст «Жуков Георгий Константинович (01. 12.1896 - 18.06.1974) Четырежды Герой Советского Союза» и примените для него стиль .fio:
Часть 4.
4.1. Создаем управляющую страницу сайта – файл “levaya.html”. Откройте файл “levaya.html” (если он не открыт) с помощью программы Dreamweaver.
Присоедините файл our_style.css.
Создайте таблицу из 10 строк и одного столбца со следующими параметрами:
Строки таблицы– 10; Столбцы таблицы – 1;
Ширина таблицы – 190;
Поля ячеек – 5, расстояние от объекта (то, что внутри ячейки) до ее границы;
Интервал ячеек – 0, расстояние между ячейками;
Толщина таблицы – 0, толщина рамки.
4.2. В первую ячейку добавьте изображение “yar1.jpg” (четвертый символ – цифра 1) из папки “left”. Удалите параметры (если они есть) width="75" height="93".
4.3. После этого добавьте тег <br>, текст “Г.К.ЖУКОВ” и линию со следующими параметрами: <hr size="5" color="#800000" width="70%">. Добавив атрибут align="center" в тег <td> центрируем все элементы ячейки. Изображение “yar1.jpg” и текст “Г.К.ЖУКОВ” делаем объектами ссылки, т.е. при нажатии на изображение или текст “Г.К.ЖУКОВ” должна загружаться страница “prav1.html” в правое окно. В итоге Вы должны получить следующей текст ячейки:
<a href="prav1.html" target="okno"><img src="left/yar1.jpg" ><br>Г.К.ЖУКОВ</a>.
Объясните преподавателю параметр “okno” атрибута target (откуда он взялся?).
4.4. При дальнейшем расширении сайта Вы будете пользоваться готовыми страницами prav2.html, prav3.html, prav4.html и prav5.html, находящимися в корневой папке.
В следующую ячейку (после ячейки, касающейся Г.К. ЖУКОВА) добавьте аналогичные пункты для:
К.К. РОКОССОВСКОГО (ярлык yar2.jpg в папке “left”, страница - prav2.html);
И.Д.ЧЕРНЯХОВСКОГО (ярлык yar3.jpg в папке “left”, страница - prav3.html);
А.М.ВАСИЛЕВСКОГО (ярлык yar4.jpg в папке “left”, страница - prav4.html);
«ОРДЕНА И МЕДАЛИ» (ярлык yar5.jpg в папке “left”, страница - prav5.html);
«НАЧАЛО» (страница - prav.html).
4.5. Сохраните все страницы и откройте страницу index.html в InternetExplorer’е. Проверьте все ссылки.
4.6. Наконец, после пункта «НАЧАЛО» добавьте еще один пункт «Об авторе сайта». Создайте свою страницу со своим именем, например, elina.html. Ваша страница должна открываться в новом окне, т.е. при переходе к Вашей странице фрейм должен закрываться.
4.7. Создайте ссылку с Вашей страницы на сайт «Великие полководцы войны», который Вы сегодня создали.
Дополнительные вопросы
1. В каких случаях используются фреймы?
2. Почему поисковые машины плохо сканируют ключевые параметры страницы?
3. Создайте Web-узел в виде фреймов из двух столбцов.
4. Для чего используются параметры _parent при работе с фреймом?
5. Как можно создать фреймы без прокрутки меню (если оно “вылезает” за пределы экрана")?