Презентация к открытому занятию "Создание web-страницы с внутренними ссылками"
методическая разработка на тему

1.

Продолжаем работать.

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

Программа, по которой мы занимаемся называется «От странички к Web-сайту».

Тема сегодняшнего занятия «Организация навигации. Внутренние ссылки».

2.

Термин Навигация в интернет-технологии обозначает  перемещение по web-страницам  с помощью гиперссылок как внутри сайта, так и в глобальной сети.

Гиперссылки объединяются в навигационные панели. Каждая отдельная гиперссылка связана с конкретной страницей сайта. 

3.

Меню бывает горизонтальное.

Открываю и показываю сайт

4.

И вертикальное

Тоже демонстрирую

1. Давайте вспомним, а что же такое гиперссылка?

(Ответ: Гиперссылка – это элемент гипертекста, который позволяет перейти на другую страницу. )

2. Каким тэгом оформляется гиперссылка?

(Ответ: тэгом  )

3. Какие у тэга гиперссылки атрибуты?

( Ответ: href= «путь к странице»   target= «окно, в котором откроется страница»)

Отлично.

5.

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

Такая страница становится длинной и может утомить посетителя желающего найти конкретную информацию. Возникает проблема быстрого перемещения по разделам такой страницы.  Какие же есть способы решения такой проблемы. Может быть кто-нибудь из вас знает такие примеры?

(Ответ: Обычно перемещаются с помощью прокрутки)

6.

Чтобы решить эту проблему текст разбивают на разделы.  

Перед заголовком каждого раздела  устанавливается специальный код – якорь или еще его называют меткой.

Наша задача связать гиперссылку каждого заголовка с меткой соответствующего  раздела.

 Для этого вначале страницы создаем меню из названий разделов в виде списка и каждый раздел связываем с соответствующей меткой.

7.

Рассмотрим конкретный код примера.

Возьмите, пожалуйста, задание и проследите алгоритм создания структуры.

Сначала расставляем метки от «m0  -  вначале страницы и далее у каждого раздела – m1, m2, m3 и т.д.

Далее организуем список с названиями разделов и ссылок.

В конце каждого раздела прописываем код ссылки возврата на меню.

8.

Ярким примером красиво оформленных внутренних ссылок  может быть сайт Екатерины Васильевой «Отечественная война 1812 года».

Запускаю и комментирую

9.

Таким образом, мы с вами можем на уже подготовленной тестовой или на странице собственного сайта организовать внутренние ссылки для перемещения по разделам страницы с большим объемом информации.