СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до 02.06.2025

Готовые ключевые этапы урока всегда будут у вас под рукой

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

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Инструменты для разработки веб-сайтов

Категория: Информатика

Нажмите, чтобы узнать подробности

Данная презентация содержит материал по созданию сайтов

Просмотр содержимого документа
«Инструменты для разработки веб-сайтов»

 Тема урока:  Инструменты для разработки веб-сайтов

Тема урока: Инструменты для разработки веб-сайтов

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

Web - сайт это:

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

Этапы разработки веб-сайтов: А нализ и проектирование сайта Информационное наполнение сайта Креатив, или визуальная составляющая сайта Написание кода Тестирование Публикация Поддержка

Этапы разработки веб-сайтов:

  • А нализ и проектирование сайта
  • Информационное наполнение сайта
  • Креатив, или визуальная составляющая сайта
  • Написание кода
  • Тестирование
  • Публикация
  • Поддержка
2 способа  С использованием конструктора Ручной С помощью языка разметки HTML С помощью специальных программ С помощью online - сервисов

2 способа

С использованием конструктора

Ручной

С помощью языка разметки HTML

С помощью специальных программ

С помощью online - сервисов

На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы создать Web – страницу нужно написать программу на языке HTML.  Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.  ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки . .
  • На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы создать Web – страницу нужно написать программу на языке HTML.

  • Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.

  • ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки . .

Одиночные Парные Пример:   Пример:   … .    Даны теги, определить парные и одиночные теги: ; ; ;

Одиночные

Парные

Пример:

Пример:  

… .

 

  • Даны теги, определить парные и одиночные теги:
  • ;

  • ;
  • ;
открывающиеся закрывающиеся " width="640"

Парные теги бывают:

Пример:   ….   / HTML

открывающиеся

закрывающиеся

   Название Web-страницы    Приветствую тебя, посетитель моего сайта. Меня зовут Петя. Это моя первая Web-страница.

Название Web-страницы

Приветствую тебя, посетитель моего сайта.

Меня зовут Петя.

Это моя первая Web-страница.

Инструментальные средства разработки веб-сайтов В настоящее время имеется большое количество различных инструментальных средств разработки Web-страниц и Web-сайтов, от простейших HTML-редакторов до систем с использованием технологии WYSIWYG (

Инструментальные средства разработки веб-сайтов

  • В настоящее время имеется большое количество различных инструментальных средств разработки Web-страниц и Web-сайтов, от простейших HTML-редакторов до систем с использованием технологии WYSIWYG (" What You See Is What You Get" - "Что видишь, то и получишь "). Такие редакторы (визуальные веб-редакторы) входят в состав некоторых офисных пакетов и некоторых интегрированных приложений для работы в Интернете:
  • Front Page Express  
  • K ompo z er  
  • Web-мастер
  • AdobeDreamwea v er
  • 1st Page 2000
  • Microsoft Front Page
  • AceHTML 4

 Визуальный редактор  Kompozer - программа рассчитанная на работу в Windows , Linux , Mac Os . Для начала мы должны определиться с тематикой Веб- сайта, продумать дизайн, количество ссылок.

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

Kompozer

  • - программа рассчитанная на работу в Windows , Linux , Mac Os .
  • Для начала мы должны определиться с тематикой Веб- сайта, продумать дизайн, количество ссылок.
 Интерфейс визуального редактора   Kompozer

Интерфейс визуального редактора Kompozer

 Оформление страницы Установка фоновой заливки страницы В главном меню редактора необходимо выбрать: Формат Цвета и фон страницы

Оформление страницы

  • Установка фоновой заливки страницы
  • В главном меню редактора необходимо выбрать:
  • Формат Цвета и фон страницы
Заголовок страницы Для изменения заголовка веб-страницы необходимо в главном меню выбрать : Формат Заголовок и свойства страницы

Заголовок страницы

  • Для изменения заголовка веб-страницы необходимо в главном меню выбрать :
  • Формат Заголовок и свойства страницы

Наполнение веб-страницы Наполнение страницы осуществляется довольно просто и напоминает работу в текстовом редакторе

Наполнение веб-страницы

  • Наполнение страницы осуществляется довольно просто и напоминает работу в текстовом редакторе
Добавление гиперссылок На панели инструментов существует иконка, с помощью которой добавляем гиперссылку, указывающую на расположенный в Интернете сайт

Добавление гиперссылок

  • На панели инструментов существует иконка, с помощью которой добавляем гиперссылку, указывающую на расположенный в Интернете сайт
Добавление изображений Необходимо щелкнуть по иконке «Изображение» на панели инструментов и выбрать картинку из папки локального или съемного диска

Добавление изображений

  • Необходимо щелкнуть по иконке «Изображение» на панели инструментов и выбрать картинку из папки локального или съемного диска
Результат

Результат

Подведение итогов  Чему научились? Что узнали нового? Что понравилось?  Чему хотели бы научиться? Что было самым трудным ?

Подведение итогов

  • Чему научились? Что узнали нового? Что понравилось?
  • Чему хотели бы научиться?
  • Что было самым трудным ?


Скачать

Рекомендуем курсы ПК и ППК для учителей

Вебинар для учителей

Свидетельство об участии БЕСПЛАТНО!