Разработка сайта животный мир композер


Технологическая карта урока информатики на тему Практическая работа № 2.6 "Разработка сайта "Животный мир"

ТЕХНОЛОГИЧЕСКАЯ КАРТА УРОКА

Ф.И.О.  Байбуртянц Е.В.Предмет: Информатика и ИКТ 

Класс: 11

Тип урока: Урок общеметодологической направленности

Тема

Практическая работа № 2.6 "Разработка сайта "Животный мир"

Цель

Работа с интерфейсом программы KompoZer, вставка графических изображений, использование графических изображений в качестве гиперссылок, создание простых таблиц в программе KompoZer.

Задачи

Образовательные: научить использовать типовые инструментально-технологические средства и эффективно работать в командах, что необходимо для личностного развития и профессионального самоопределения

Развивающие: сформировать у учащихся творческий подход, способность к самостоятельному и инициативному решению проблем

Воспитывающие: воспитывать информационную культуру учащихся

Планируемые результаты

Предметные:

Личностные:

Метапредметные:

Познавательные

  • умение давать определение понятиям, устанавливать причинно-следственные связи, преобразовывать полученную информацию в схему

Основные понятия

Web-сайт, язык HTML, Теги HTML, программа KompoZer

Межпредметные связи

На этом уроке соединены предметы Информатика и Биология. По дисциплине Информатика разбирается тема " Разработка сайта ". На примере дисциплины Биология – "Животный мир"

Средства обучения

ПК учителя, ПК учащихся с операционной системой Windows, офисным пакетом Microsoft Office, браузером (Opera), браузер WWW, поисковые серверы.

Формы урока

Самостоятельная работа, работа в парах и группах, индивидуальная и фронтальная работа.

Технология

Исследовательская деятельность

Этап

Деятельность учителя

Деятельность учащихся

УУД

1) Этап мотивации.

1. Орг.момент:

- приветствие;

- перекличка.

Личностные:

Формирование самоопределения

2) Этап актуализации и фиксирования индивидуального затруднения в пробном учебном действии.

2. Предлагаю выполнить практическую работу № 2.6 Разработка сайта "Животный мир".

3. ??? - Какое задание вы должны были выполнить?

− Что использовали при выполнении задания?

− В каком месте у вас возникло затруднение?

− Почему не справились с заданием?

- Что может помочь в выполнении задания?

− Сформулируйте тему урока.

1. Выполнение Практической работы № 2.6 Разработка сайта "Животный мир".

Разработка сайта "Животный мир".

Метапредметные: умение давать определение понятиям, устанавливать причинно-следственные связи, преобразовывать полученную информацию в схему

3) Этап закрепления с проговариванием во внешней речи.

4. Послушаем сообщение об интерфейсе программы KompoZer.

Записи в тетради.

Личностные:

формирование коммуникативной компетентности в общении и сотрудничестве со сверстниками и взрослыми в процессе учебной деятельности

4) Этап включения изученного в систему знаний.

5. Предлагаю доделать практическую работу № 2.6 Разработка сайта "Животный мир".

Выполнение Практической работы № 2.6 Разработка сайта "Животный мир".

Предметные:

освоить основные критерии создания веб-ресурсов и научить качественно оценивать веб-ресурсы общего назначения

5) Этап рефлексии учебной деятельности.

- Что нового вы сегодня узнали?

− Какую цель вы ставили в начале урока?

− Вы достигли поставленной цели?

− Что вам помогло в достижении цели?

− Как вы открывали новые знания?

− Оцените свою работу, заполнив таблицу.

Домашнее задание: Параграф 15.

Я

Сейчас

Хочу в будущем

Знаю (знать)

Умею (уметь)

Использую (использовать)

infourok.ru

Практика - kompozer

Режим просмотра и редактирования

Посмотрите на набор вкладок внизу страницы: Normal (Нормальный), HTML Tags (Теги HTML), Source (Исходный код) и Preview (Предварительный просмотр). Normal позволяет работать в среде WYSIWYG. Открыв вкладку HTML Tags, вы увидите теги, с помощью которых определяется содержимое вашей страницы. Перейдя на вкладку Source (Исходный код), вы поймете, как выглядит код вашей страницы на языке HTML. Preview (Предварительный просмотр) позволяет увидеть, как будет выглядеть сама веб-страница.Вкладки Normal и Preview выглядят практически идентично.Теперь, когда вы знаете, как добавлять простой текст на веб-страницу, следует добавить в веб-дизайн немного собственного дизайна.

Выбор шрифта

Простая веб-страница с черным текстом на белом фоне вряд ли привлечет много посетителей. Если кто-то и зайдет на нее, он не останется там надолго. Простой способ улучшить дизайн веб-сайта - изменить шрифт и, возможно, добавить пару гиперссылок. Давайте вначале изменим кегль текста. Выберите текст, на панели инструментов Text Formatting (Форматирование текста) три раза щелкните по кнопке Larger Text Font (Больший кегль шрифта). Щелкните по кнопке Choose Colour for Text (Выбрать цвет текста) и выберите новый цвет. Старайтесь не использовать синий цвет - он ассоциируется с гиперссылками.

Гиперссылки (ссылки)

Гиперссылки на веб-странице позволяют реализовать концепцию Всемирной паутины. Она называется паутиной, так как страницы, связанные между собой, представляют собой, по сути, паутину. При добавлении гиперссылки, или ссылки, вы используете данный подход.Чтобы создать гиперссылку, поместите курсор под таблицей на вашей странице. Затем выберите Insert\Link (Вставить\Ссылка). Введите отображаемый текст ссылки и местонахождение веб-сайта. В области Target (Цель) окна Link Properties (Свойства ссылки) укажите, будет ли ссылка открыта в новом окне или во фрейме. Если не отметить пункт Link Is То Be Opened (Ссылка должна быть открыта), новая страница заменит старую в окне браузера. Настроив ссылку, щелкните по кнопке ОК. <br /><br /><span>

Ссылки на страницы на вашем веб-сайте

Веб-сайты состоят из нескольких страниц. Чтобы пользователи могли перейти на другие страницы сайта, на нем должно быть навигационное меню со ссылками.<br /><br />При создании веб-сайта лучше всего хранить все файлы в одной папке. Тогда легче создавать на них ссылки. В разделе Link Location (Адрес ссылки) в окне Link Properties есть значок с папкой (Folder), который позволяет выбрать другие файлы на диске. Так можно создать ссылки на уже созданные страницы. Некоторые дизайнеры сразу создают все страницы сайта, поэтому таким образом можно организовать систему навигации по сайту. Кроме того, дизайнеры обычно хранят все изображения в одной папке, которая, как правило, называется Images. При вставке изображений они выбирают их непосредственно в папке Images. При загрузке файлов на сайт копируются файлы HTML и папка Images, чтобы путь к изображениям оставался неизменным

Как вставить изображение на страницу?

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

Чтобы вставить изображение на страницу, поставьте курсор мыши в то место, где должно располагаться изображение и нажмите кнопку Изображение на Панели компоновки.

Перед вами появится окно Свойства изображения:

Нажмите на кнопку Выбрать файл и укажите необходимое изображение:

.

определяет надпись, которая будет появляться при наведении курсора на изображение.

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

выставьте размеры изображения. Иначе они будут устанавливаться по умолчанию.

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

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

Чтобы просмотреть полученную страницу в браузере, нажмите кнопку

.

sites.google.com

Скачать html редактор KompoZer бесплатно

– Автор: Игорь (Администратор)

Перейти к скачиванию KompoZer

Бесплатный html редактор KompoZer - представляет собой полноценное WYSIWYG средство для разработки веб-страниц. В первую очередь, KompoZer сделан с упором на простоту и легкость в использовании, что делает его идеальным для большого спектра пользователей. 

Бесплатный html редактор KompoZer описание

Если вы ищите удобный и мощный WYSIWYG редактор веб-страниц , то, вероятно, бесплатный html редактор KompoZer это именно то, что вы искали. С помощью него, вы сможете в легкой и простой форме создать простые и средние сайты. В состав входит достаточно много инструментов, включая редактор CSS стилей, FTP-менеджер, модуль предварительного просмотра и многие другие. Другими словами, все необходимые инструменты для того, чтобы превратить вашу задумку в настоящий сайт. Так что, даже если вы практически ничего не знаете о языке разметки HTML, то с редактором KompoZer это не будет особой проблемой.

Как уже говорилось, KompoZer в первую очередь направлен на удобство и легкость в составлении сайтов, поэтому пользоваться программой очень просто. Большинство действий выполняется с помощью мышки - заботу о генерации корректного html кода и файлов стилей CSS, программа берет на себя. 

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

 

Бесплатный html редактор KompoZer основные возможности (характеристики)

Своим пользователям бесплатный html редактор KompoZer предлагает следующие возможности:

  • WYSIWYG редактор, а это означает, что создание веб сайта будет таким же простым, как написание обычного офисного документа
  • Интегрированный менеджер FTP позволит вам просто и легко осуществлять навигацию, редактирование и просмотр ваших веб-страниц прямо с вашего сайта
  • Автоматическое создание валидного html-кода, который будет нормально отображаться на самых популярных браузерах
  • Если вы знаете html, то зачем себя ограничивать. KompoZer позволяет легко переключаться между WYSIWYG редактором и обычным HTML редактором (с помощью вкладок)
  • Отображение каждой страницы на своей вкладке дает вам возможность быстро и просто редактировать сразу несколько веб-страниц
  • Формы, таблицы, шаблоны - все, что только может потребоваться
  • Один из самых простых в использовании бесплатных и мощных WYSIWYG редакторов для настольных компьютеров под управлением Linux, Microsoft Windows и Apple Macintosh

На сайте Ida-Freewares.Ru вы всегда сможете найти всю необходимую информацию, страницу загрузки и официальный сайт разработчика. Помните, скачать бесплатный html редактор KompoZer с сайта разработчика - это всегда верный ход. К сожалению, несмотря на проверку файлов антивирусами, мы не можем дать вам 100% гарантии, что файлы не инфицированы. Всегда проверяйте загружаемые файлы из Интернета на наличие вирусов!

Плюсы Полноценный WYSIWYG редактор
Минусы Редко обновляется
Разработчик KompoZer
Страница загрузки Найти KompoZer вы можете по этой ссылке
Размер 6,8 Мб
Версия 0.8b3
Лицензия Бесплатно без ограничений
Версия ОС Windows, Mac, Linux
Поддержка 64 бит Поддерживается
Портативная  
Информация Поддержка русского языка
Добавить комментарий / отзыв

ida-freewares.ru

Технологическая карта урока информатики на тему Практическая работа № 2.7 " Разработка сайта "Наш класс"

ТЕХНОЛОГИЧЕСКАЯ КАРТА УРОКА

Ф.И.О.  Байбуртянц Е.В.Предмет: Информатика и ИКТ 

Класс: 11

Тип урока: Урок общеметодологической направленности

Тема

Практическая работа № 2.7 " Разработка сайта "Наш класс"

Цель

Создание таблиц и списков в программе KompoZer, использование графических изображений.

Задачи

Образовательные: научить использовать типовые инструментально-технологические средства и эффективно работать в командах, что необходимо для личностного развития и профессионального самоопределения

Развивающие: сформировать у учащихся творческий подход, способность к самостоятельному и инициативному решению проблем

Воспитывающие: воспитывать информационную культуру учащихся

Планируемые результаты

Предметные:

Личностные:

Метапредметные:

Познавательные

  • умение давать определение понятиям, устанавливать причинно-следственные связи, преобразовывать полученную информацию в схему

Основные понятия

Web-сайт, язык HTML, Теги HTML, программа KompoZer

Межпредметные связи

На этом уроке соединены предметы Информатика и Обществознание. По дисциплине Информатика разбирается тема " Разработка сайта "Наш класс". На примере дисциплины Обществознание – "Общество".

Средства обучения

ПК учителя, ПК учащихся с операционной системой Windows, офисным пакетом Microsoft Office, браузером (Opera), браузер WWW, поисковые серверы.

Формы урока

Самостоятельная работа, работа в парах и группах, индивидуальная и фронтальная работа.

Технология

Исследовательская деятельность

Этап

Деятельность учителя

Деятельность учащихся

УУД

1) Этап мотивации.

1. Орг.момент:

- приветствие;

- перекличка.

Личностные:

Формирование самоопределения

2) Этап актуализации и фиксирования индивидуального затруднения в пробном учебном действии.

2. Предлагаю выполнить практическую работу № 2.7 Разработка сайта "Наш класс".

3. ??? - Какое задание вы должны были выполнить?

− Что использовали при выполнении задания?

− В каком месте у вас возникло затруднение?

− Почему не справились с заданием?

- Что может помочь в выполнении задания?

− Сформулируйте тему урока.

1. Выполнение Практической работы № 2.7 Разработка сайта " Наш класс ".

Разработка сайта " Наш класс ".

Метапредметные: умение давать определение понятиям, устанавливать причинно-следственные связи, преобразовывать полученную информацию в схему

3) Этап закрепления с проговариванием во внешней речи.

4. Послушаем сообщение об интерфейсе программы KompoZer.

Записи в тетради.

Личностные:

формирование коммуникативной компетентности в общении и сотрудничестве со сверстниками и взрослыми в процессе учебной деятельности

4) Этап включения изученного в систему знаний.

5. Предлагаю доделать практическую работу № 2.7 Разработка сайта " Наш класс ".

Выполнение Практической работы № 2.7 Разработка сайта " Наш класс ".

Предметные:

освоить основные критерии создания веб-ресурсов и научить качественно оценивать веб-ресурсы общего назначения

5) Этап рефлексии учебной деятельности.

- Что нового вы сегодня узнали?

− Какую цель вы ставили в начале урока?

− Вы достигли поставленной цели?

− Что вам помогло в достижении цели?

− Как вы открывали новые знания?

− Оцените свою работу, заполнив таблицу.

Домашнее задание: Параграф 15.

Я

Сейчас

Хочу в будущем

Знаю (знать)

Умею (уметь)

Использую (использовать)

infourok.ru


Смотрите также