Веб сайт гиперструктура данных 11 класс конспект урока

Обновлено: 08.07.2024

1. Формирование умений и навыков, носящих в современных условиях общенаучный и интеллектуальный характер.

2. освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора Microsoft Word: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.

ВложениеРазмер
urok_na_konkurs.docx 30.63 КБ

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

Создание Web-сайта с помощью Microsoft Word

  1. Формирование умений и навыков, носящих в современных условиях общенаучный и интеллектуальный характер.
  2. освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора Microsoft Word: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.
  1. Воспитательная – развитие познавательного интереса, воспитание информационной культуры.
  2. Учебная – изучить и закрепить навыки работы с текстовым редактором.
  3. Развивающая – развитие логического мышления, расширение кругозора.

Используемое программное обеспечение: текстовый процессор Microsoft Word 2010.

Тип урока: комбинированный

  1. Краткий инструктаж по технике безопасности в компьютерном классе.
  2. Объяснение нового материала.
  3. Выполнение практической работы.
  4. Домашнее задание.

Здравствуйте! Сегодня мы с вами будем создавать web-сайт с помощью Microsoft Word

  1. Инструктаж по технике безопасности в компьютерном классе

Чтобы успешно выполнить свою работу, нужно вспомнить правила поведения и ТБ в компьютерном классе. Внимание на экран.

Во время работы следует

  1. Соблюдать правила поведения и текущие указания учителя.
  2. Работать на расстоянии 60-70 см от экрана монитора, соблюдая правильную осанку, а если есть очки - в очках.
  3. Следить за неисправностью аппаратуры и немедленно прекратить работу при появлении необычного звука, запаха гари, самопроизвольного отключения аппаратуры.
  4. Нажимать на клавиши плавно, не допуская резких ударов.
  5. Работать на клавиатуре чистыми руками.
  6. Не вставать со своих мест, когда в кабинет входят посетители.
  7. В класс входить спокойно, не торопясь, не задевая столы.
  1. Трогать разъёмы соединительных кабелей.
  2. Прикасаться к питающим проводам и устройствам заземления
  3. Прикасаться к экрану и тыльной стороне монитора.
  4. Включать и выключать аппаратуру без разрешения преподавателя.
  5. Класть посторонние предметы на клавиатуру и монитор.
  6. Не пользоваться клавиатурой при отключенной аппаратуре.
  7. Работать во влажной одежде и влажными руками.
  8. Никогда не пытаться самостоятельно устранять неисправности в работе аппаратуры.

Изучая данную тему, мы с вами рассмотрим следующие вопросы:

  1. Что такое Web – сайт, Web – страница, гиперссылка?
  2. Как и какими средствами создаются Web – страницы?
  3. Какие существуют виды навигационной схемы Web – сайтов?
  4. Примеры оформления Web – страниц.
  5. Создание гиперссылок.

Внимание на экран. Я, отвечая на эти вопросы, одновременно буду демонстрировать слайды. Нужные определения запишем в тетрадях

А теперь начнем практическую работу. Вы дома подготовили материал, по заранее выбранной теме (картинки, фотографии, видео, текст). Перед вами лежит брошюрка, где указана ход выполнения практической работы, и советы по созданию Web-сайта.

  1. Что такое Web – сайт, Web – страница, гиперссылка?

Веб-сайт (Website) - это объединённая под одним адресом (доменным именем) совокупность документов частного лица или организации. По умолчанию подразумевается что сайт располагается в сети Интернет, но он так же может публиковаться в локальной сети компании - в сети Интранет. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят "своя страничка в Интернет", то подразумевается целый веб-сайт или личная страница в составе чужого сайта.

Веб-страница - это логическая единица интернета , однозначно определяемая адресом ( URL ). Можно сказать, что веб состоит из сайтов , а сайты, в свою очередь - из страниц. Веб-страницы могут включать картинки, музыку, видео, скрипты и др.

Гиперссылка (hyperreference)— часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном компьютере или в компьютерной сети, либо на элементы этого объекта.

  1. Как и какими средствами создаются Web – страницы?

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом . Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами . На одном сервере может размещаться множество Web-узлов или сайтов.

Чтобы опубликовать в Интернете страницу, содержащую некоторую информацию, используется специально разработанный для этого язык HTML.

HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

  1. Какие существуют виды навигационной схемы Web – сайтов?

Важным понятием в разработке Web-узла является схема навигации, определяющая, как пользователь будет перемещаться между страницами. С помощью схемы навигации пользователь получает представление о структуре Web-узла, а также представление о том, в каком месте узла он находится в данный момент. Правильно разработанная схема позволит пользователю легко перемещаться между страницами Web-узла в поисках нужной ему информации.

Существует много вариантов организации навигационной схемы. Рассмотрим два полярных подхода. Первый из них дает возможность пользователю перемещаться по иерархии страниц только вверх или вниз без возможности перехода между страницами одного иерархического уровня. При такой схеме навигации для перехода к странице, расположенной на другой ветви иерархии, необходимо вернуться назад, и лишь затем, перейдя на нужную ветвь, перемещаться по дереву вниз. Заблудиться на Web-узле с такой структурой тяжело, но и для перехода к нужной информации требуется много времени.

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

Задача разработчика — подобрать такой оптимальный вариант, при котором бы обеспечивалось удобство перемещения между страницами и не терялась ориентация. Так, например, в процессе движения вниз по иерархической структуре необходимо предусмотреть для пользователя ссылки на домашнюю страницу, а также ссылки на страницы, находящиеся на том же уровне, если они содержат подобную по тематике информацию. Можно также, если необходимо, предусмотреть ссылки для движения вверх по иерархической структуре. Главное, чтобы посетитель не запутался в предлагаемой его вниманию информации.

Просматривая Web-узлы в Интернете, вы, вероятно, обращали внимание на то, что страницы содержат определенные элементы оформления. Это — заголовки, фоновое изображение, информация для контактов, графические изображения, панели ссылок, таблицы.

Гиперссылки предназначены для перемещения между страницами текущего Web-узла, а также на другие узлы в поисках нужной информации. Они могут указывать на текст, графические изображения, страницы других Web-узлов в сети Интернет, документы Microsoft Office, закладки, размещенные на этой же странице, на других страницах Web-узла или внутри документов, локальные файлы вашего компьютера, адреса электронной почты для доставки корреспонденции и т.д. При ссылке на файлы Microsoft Office автоматически запускается соответствующая программа и открывается файл, на который указывает ссылка. Если страница, на которой создается ссылка, является фреймом (т.е. разбита с помощью рамок на несколько областей), можно указать, в какую область фрейма загружать страницу, на которую указывает ссылка.

В качестве гиперссылки можно использовать не только текстовую информацию, но и графическое изображение или отдельные его части, называемые активными областями. Для создания на изображении активных областей используются кнопки панели инструментов Рисунки (Pictures).

Урок 27. Web-сайт – гиперструктура данных. Инструментальные средства создания Web-сайтов

Инструменты для разработки wеb-сайтов (§ 13)





Вернемся к разговору о web-сайтах и узнаем, с помощью каких средств можно самостоятельно создать сайт.


Web-сайт — это совокупность гипертекстовых документов, которые рассматриваются как единое целое и определяются одним URL-адресом.

Содержимое web-сайта может включать в себя все доступные в настоящее время типы информации, а также интерактивные средства для ведения диалога с пользователем (форумы, гостевые книги, формы обратной связи и т. д.). Помимо этого, каждый сайт может иметь индивидуальный дизайн (хотя следует заметить, что часть сайтов создается с применением готовых шаблонов).

Понятие языка разметки гипертекста

В предыдущем параграфе уже говорилось о том, что основой любого сайта является язык разметки гипертекста HTML (HyperText Markup Language). HTML включает в себя несколько десятков так называемых тегов (команд), каждый из которых определяет внешний вид отдельного элемента страницы: текста, изображения, таблицы, списка и др. Например, следующая запись в HTML-документе:

Moя домашняя страница

Визуальные HTML-редакторы

Для создания сайта необязательно знать язык HTML. Существует множество доступных визуальных HTML-редакторов, их другое название — WYSIWYG-редакторы, позволяющих создавать сайты без знания данного языка. WYSIWYG расшифровывается как: What You See Is What You Get — что видишь, то и получаешь. Работа в таких редакторах происходит с визуальными формами, а не с тегами. Например, чтобы сделать шрифт текста жирным, надо просто выделить этот текст и нажать соответствующую кнопку в меню редактора. После этого редактор вставит в HTML-код необходимые теги, а разработчик сайта увидит на странице уже итоговый результат.


Визуальный HTML редактор (WYSIWYG-редактор) — прикладная программа, в которой содержимое web-страницы строится из визуальных форм и в процессе редактирования автоматически формируется HTML-код страницы, текущий вид которой сразу отображается на экране.

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


1. Adobe Dreamweaver — один из наиболее популярных коммерческих программных продуктов, предназначенных для разработки сайтов. Изначально был разработан и поддерживался компанией Macromedia (до 2005 г.). Следующие версии, начиная с Dreamweaver CS3 (2007 г.), выпускает компания Adobe. Редактор содержит огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды web-мастера, а также встроенный FTP-менеджер для загрузки файлов на сервер.

Начинающий пользователь может создавать страницы практически без знания HTML — добавляя элементы страницы и указывая их параметры с помощью встроенного мастера (рис. 2.7).

image


2. Microsoft Office SharePoint Designer 2007 — визуальный HTML-редактор и программа для web-дизайна от компании Microsoft (рис. 2.8). Является одним из компонентов пакета Microsoft Office 2007, но при этом требует отдельной установки. Данный пакет относится к числу достаточно сложных редакторов, позволяющих создавать не только простейшие web-страницы, но и полноценные web-узлы, предназначенные для коллективной работы пользователей. Более новая версия программы Microsoft Office SharePoint Designer 2010 максимально завязана на совместную работу большого числа людей над одним проектом, что требует установки соответствующего программного обеспечения на сервере, где хранится данный проект.

image

Изначально этот продукт относился к разряду коммерческих, но с 2009 года стал распространяться бесплатно для всех желающих на официальном сайте Microsoft Office:


3. WebPageMaker — простой, быстрый и удобный редактор для создания сайтов. Пользователь с помощью мышки перетаскивает в необходимые места на странице заранее заготовленные тексты и графику. В состав программы входит большое количество готовых шаблонов, которые можно использовать как основу для будущего сайта.

Встроенный FTP-менеджер позволяет быстро загрузить готовый сайт на сервер. Сайты, сделанные в WebPageMaker-3.0.3, одинаково корректно отображаются во всех основных типах браузеров.

К одному из существенных достоинств редактора относится очень небольшой объем дистрибутива (всего 3,5 Мбайт). Кроме того, существует так называемая версия portable, которая не требует установки (ее объем — 6 Мбайт).


4. Nvu — свободно распространяемый визуальный HTML-peдактор. Преимущество редактора Nvu состоит в его кроссплатформенности: есть версии под Linux, Microsoft Windows и MacOS.

Помимо типовых для web-редакторов функций, Nvu содержит интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов. Редактор очень прост в использовании. В последние несколько лет Nvu не развивается, но потенциал этого редактора продолжает реализовываться в редакторе KompoZer.


5. KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой web-авторской системой, которая сочетает в себе менеджер для web-файлов и визуальный редактор. По сравнению с Nvu, KompoZer создает более короткий код разметки. KompoZer чрезвычайно прост в использовании, что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для создания небольших web-проектов. Объем дистрибутива — 7 Мбайт.

image

image

Вопросы и задания

1. Что такое web-сайт?

2. Какой язык используется для разработки сайтов?

3. В чем преимущества визуальных HTML-редакторов?

4. В чем недостатки визуальных HTML-редакторов?

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

6. В каких случаях удобнее использовать редакторы NVU или KompoZer?


Дата: Класс: 11 Тема: Web-сайт- гиперструктура данных. Цель урока: 1. Формирование умений и навыков, носящих в современных условиях общенаучный и интеллектуальный характер. 2. освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора MicrosoftWord: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок. Задачи урока: 1. Воспитательная – развитие познавательного интереса, воспитание информационной культуры. 2. Учебная – изучить и закрепить навыки работы с текстовым редактором. 3. Развивающая – развитие логического мышления, расширение кругозора. Используемое программное обеспечение: текстовый процессор MicrosoftWord 2010. Тип урока: комбинированный

Дата:

Класс: 11

Тема: Web - сайт- гиперструктура данных.

1. Формирование умений и навыков, носящих в современных условиях общенаучный и интеллектуальный характер.

2. освоение приемов создания Web -страниц и Web -сайтов с помощью текстового процессора MicrosoftWord : оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.

Задачи урока:

1. Воспитательная – развитие познавательного интереса, воспитание информационной культуры.

2. Учебная – изучить и закрепить навыки работы с текстовым редактором.

3. Развивающая – развитие логического мышления, расширение кругозора.

Используемое программное обеспечение: текстовый процессор MicrosoftWord 2010.

Тип урока: комбинированный

План урока

1. Краткий инструктаж по технике безопасности в компьютерном классе.

2. Объяснение нового материала.

3. Выполнение практической работы.

4. Домашнее задание.

I. Организационный момент

Здравствуйте! Сегодня мы с вами будем создавать web -сайт с помощью MicrosoftWord

II. Инструктаж по технике безопасности в компьютерном классе

Чтобы успешно выполнить свою работу, нужно вспомнить правила поведения и ТБ в компьютерном классе. Внимание на экран.

Во время работы следует

1. Соблюдать правила поведения и текущие указания учителя.

2. Работать на расстоянии 60-70 см от экрана монитора, соблюдая правильную осанку, а если есть очки - в очках.

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

4. Нажимать на клавиши плавно, не допуская резких ударов.

5. Работать на клавиатуре чистыми руками.

6. Не вставать со своих мест, когда в кабинет входят посетители.

7. В класс входить спокойно, не торопясь, не задевая столы.

1. Трогать разъёмы соединительных кабелей.

2. Прикасаться к питающим проводам и устройствам заземления

3. Прикасаться к экрану и тыльной стороне монитора.

4. Включать и выключать аппаратуру без разрешения преподавателя.

5. Класть посторонние предметы на клавиатуру и монитор.

6. Не пользоваться клавиатурой при отключенной аппаратуре.

7. Работать во влажной одежде и влажными руками.

8. Никогда не пытаться самостоятельно устранять неисправности в работе аппаратуры.

III. Изучение нового материала.

Изучая данную тему, мы с вами рассмотрим следующие вопросы:

1. Что такое Web – сайт, Web – страница, гиперссылка?

2. Как и какими средствами создаются Web – страницы?

3. Какие существуют виды навигационной схемы Web – сайтов?

4. Примеры оформления Web – страниц.

5. Создание гиперссылок.

Внимание на экран. Я, отвечая на эти вопросы, одновременно буду демонстрировать слайды. Нужные определения запишем в тетрадях

IV. Практическая работа на компьютере

А теперь начнем практическую работу. Вы дома подготовили материал, по заранее выбранной теме (картинки, фотографии, видео, текст). Перед вами лежит брошюрка, где указан ход выполнения практической работы, и советы по созданию Web -сайта.

V. Домашняя работа

Теоретический материал

1. Что такое Web – сайт, Web – страница, гиперссылка?

Веб-сайт (Website) - это объединённая под одним адресом (доменным именем) совокупность документов частного лица или организации. По умолчанию подразумевается что сайт располагается в сети Интернет, но он так же может публиковаться в локальной сети компании - в сети Интранет. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят "своя страничка в Интернет", то подразумевается целый веб-сайт или личная страница в составе чужого сайта.

Веб-страница - это логическая единица интернета , однозначно определяемая адресом ( URL ). Можно сказать, что веб состоит из сайтов , а сайты, в свою очередь - из страниц. Веб-страницы могут включать картинки, музыку, видео, скрипты и др.

Гиперссылка (hyperreference)— часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном компьютере или в компьютерной сети, либо на элементы этого объекта.

2. Как и какими средствами создаются Web – страницы?

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web -узлом или сайтом. Узлы Web подобны книгам, а Web -страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web -узлов или сайтов.

Чтобы опубликовать в Интернете страницу, содержащую некоторую информацию, используется специально разработанный для этого язык HTML .

HTML – HyperTextMarkupLanguage (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирова ния. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web -документа на вашем экране.

3. Какие существуют виды навигационной схемы Web – сайтов?

Важным понятием в разработке Web-узла является схема навигации, определяющая, как пользователь будет перемещаться между страницами. С помощью схемы навигации пользователь получает представление о структуре Web-узла, а также представление о том, в каком месте узла он находится в данный момент. Правильно разработанная схема позволит пользователю легко перемещаться между страницами Web-узла в поисках нужной ему информации.

Существует много вариантов организации навигационной схемы. Рассмотрим два полярных подхода. Первый из них дает возможность пользователю перемещаться по иерархии страниц только вверх или вниз без возможности перехода между страницами одного иерархического уровня. При такой схеме навигации для перехода к странице, расположенной на другой ветви иерархии, необходимо вернуться назад, и лишь затем, перейдя на нужную ветвь, перемещаться по дереву вниз. Заблудиться на Web-узле с такой структурой тяжело, но и для перехода к нужной информации требуется много времени.

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

Задача разработчика — подобрать такой оптимальный вариант, при котором бы обеспечивалось удобство перемещения между страницами и не терялась ориентация. Так, например, в процессе движения вниз по иерархической структуре необходимо предусмотреть для пользователя ссылки на домашнюю страницу, а также ссылки на страницы, находящиеся на том же уровне, если они содержат подобную по тематике информацию. Можно также, если необходимо, предусмотреть ссылки для движения вверх по иерархической структуре. Главное, чтобы посетитель не запутался в предлагаемой его вниманию информации.

1. Примеры оформления Web – страниц.

Просматривая Web-узлы в Интернете, вы, вероятно, обращали внимание на то, что страницы содержат определенные элементы оформления. Это — заголовки, фоновое изображение, информация для контактов, графические изображения, панели ссылок, таблицы.

2. Создание гиперссылок.

Гиперссылки предназначены для перемещения между страницами текущего Web-узла, а также на другие узлы в поисках нужной информации. Они могут указывать на текст, графические изображения, страницы других Web-узлов в сети Интернет, документы MicrosoftOffice, закладки, размещенные на этой же странице, на других страницах Web-узла или внутри документов, локальные файлы вашего компьютера, адреса электронной почты для доставки корреспонденции и т.д. При ссылке на файлы MicrosoftOffice автоматически запускается соответствующая программа и открывается файл, на который указывает ссылка. Если страница, на которой создается ссылка, является фреймом (т.е. разбита с помощью рамок на несколько областей), можно указать, в какую область фрейма загружать страницу, на которую указывает ссылка.

В качестве гиперссылки можно использовать не только текстовую информацию, но и графическое изображение или отдельные его части, называемые активными областями. Для создания на изображении активных областей используются кнопки панели инструментов Рисунки (Pictures).

Автор: Келлер Елена Алексеевна

Населенный пункт: Донецкая Народная Республика, город Макеевка

Методическая разработка содержит теоретический и практический материалы по представленной теме, предназначенные для использования на уроке информатики и ИКТ на базовом уровне в старших классах общеобразовательных организаций. Представленная практическая работа совершенствует навыки работы с программным обеспечением сети Интернет; домашнее задание имеет дифференцированный характер, что способствует формированию регулятивных универсальных учебных действий. Разработка предназначена для учителей информатики.

Мои заявки
Диплом участника конкурса

Диплом участника конкурса



-75%

Методика преподавания информатики, инструменты оценки учебных достижений учащихся и мониторинг эффективности обучения по ФГОС ООО и ФГОС СОО

Получите комплекты видеоуроков + онлайн версии










План-конспект урока информатики для 11 класса "Разработка веб-сайта" (611.65 KB)

Читайте также: