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

Петриченко Вера Алексеевна

Презентация к открытому занятию "Создание web-страницы с внутренними ссылками" в формате PDF.  Рассматривается последовательность создания кода меню с внутренними ссылками для перемещения по содержанию страницы и возврата к меню псле каждого раздела.

Скачать:

Предварительный просмотр:

Чтобы пользоваться предварительным просмотром создайте себе аккаунт (учетную запись) Google и войдите в него: https://accounts.google.com


Предварительный просмотр:

Выступление к презентации по открытому занятию 22.02.2017 года

1.

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

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

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

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

2.

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

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

3.

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

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

4.

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

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

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

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

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

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

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

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

Отлично.

5.

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

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

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

6.

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

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

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

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

7.

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

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

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

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

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

8.

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

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

9.

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

Теперь берем задание и садимся за компьютеры.

Не забываем о правилах техники безопасности работы в компьютерном классе и правилах правильной посадки за компьютером.

На практическое задание вам дается 15 минут.

Садятся и работают.


По теме: методические разработки, презентации и конспекты

презентация внеклассного открытого мероприятия на тему "Достопримечательности мира"

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

презентация к открытому уроку по теме "Особенности немецкой кухни"

Цель открытого урока "Особенности немецкой кухни" -  показать всевозможные средства обучения при изучении темы "Кухни народов мира". Цель изучения иностранного языка в техникуме - уметь применять...

Олимпиада по Информатике, конспект открытого урока, презентация к открытому уроку

Международный конкурс по информатике «Логика и компьютер» Рекомендуемое время выполнения заданий − 120 минут. 1. (2 балла) Какие записи, могут являться формулами в таб...

ПРЕЗЕНТАЦИЯ для открытого урока по теме "Правовые основы, задачи, полномочия, структура и система Министерства внутренних дел РФ" по дисциплине "Правоохранительные органы" по специальности 030912"Право и организация социального обеспечения"

ПРЕЗЕНТАЦИЯ для открытого урока по теме "Правовые основы, задачи, полномочия, структура и система Министерства внутренних дел Российской Федерации" по дисциплине "Правоохранительные органы" по специал...

План-конспект к открытому занятию «Создание Web-страницы с внутренними ссылками»

·                         План-конспект открытого занятия «Создание структуры навигации с внутренними ссылками на web-странице».Занятие явля...

Методические разработки ПЛАН открытого урока Тема: «Устройство двигателей внутреннего сгорания»

ПЛАН открытого урока теоретического обучения  Тема: «Устройство двигателей  внутреннего сгорания»...