Презентация к уроку Средства разработки веб-сайтов 11 класс

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

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

Благодаря этой рекламе сайт может продолжать свое существование, спасибо за просмотр.

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

2 способа Ручной С использованием конструктора С помощью языка разметки HTML С помощью специальных программ С помощью online-сервисов

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

Даны теги, определить парные и одиночные теги: <,H1>, <,/H1>,, <,Br>,, <,Head>, <,/Head>,, Одиночные Парные Пример: <,br>, Пример:  <,HTML>, ….  <,/HTML>,

Парные теги бывают: Пример:  <,HTML>, ….  <,/HTML>, открывающиеся закрывающиеся

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

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

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

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

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

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

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

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

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

Результат

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