Тема урока: Инструменты для разработки веб-сайтов
Web - сайт это:
набор страниц, посвященных определенной тематике и связанных между собой гиперссылками
Этапы разработки веб-сайтов:
- А нализ и проектирование сайта
- Информационное наполнение сайта
- Креатив, или визуальная составляющая сайта
- Написание кода
- Тестирование
- Публикация
- Поддержка
2 способа
С использованием конструктора
Ручной
С помощью языка разметки HTML
С помощью специальных программ
С помощью online - сервисов
- На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы создать Web – страницу нужно написать программу на языке HTML.
- Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.
- ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки . .
Одиночные
Парные
Пример:
Пример:
… .
- Даны теги, определить парные и одиночные теги:
- ;
; - ;
открывающиеся закрывающиеся " width="640"
Парные теги бывают:
Пример: …. / HTML
открывающиеся
закрывающиеся
Название Web-страницы
Приветствую тебя, посетитель моего сайта.
Меня зовут Петя.
Это моя первая Web-страница.
Инструментальные средства разработки веб-сайтов
- В настоящее время имеется большое количество различных инструментальных средств разработки 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
Оформление страницы
- Установка фоновой заливки страницы
- В главном меню редактора необходимо выбрать:
- Формат Цвета и фон страницы
Заголовок страницы
- Для изменения заголовка веб-страницы необходимо в главном меню выбрать :
- Формат Заголовок и свойства страницы
Наполнение веб-страницы
- Наполнение страницы осуществляется довольно просто и напоминает работу в текстовом редакторе
Добавление гиперссылок
- На панели инструментов существует иконка, с помощью которой добавляем гиперссылку, указывающую на расположенный в Интернете сайт
Добавление изображений
- Необходимо щелкнуть по иконке «Изображение» на панели инструментов и выбрать картинку из папки локального или съемного диска
Результат
Подведение итогов
- Чему научились? Что узнали нового? Что понравилось?
- Чему хотели бы научиться?
- Что было самым трудным ?