СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Представление о веб-конструировании
1. Инструменты и методы разработки веб-сайтов
Выделяют две основные группы методов и соответствующих инструментов разработки веб-сайтов: визуальные и ручные (программные).
Для создания веб-страниц используется язык разметки гипертекстовых документов HTML (HyperText Markup Language). Вводить основные команды (теги) языка HTML можно в текстовом редакторе Блокнот, а просматривать результаты работы можно с помощью браузера.
Наиболее известными редакторами визуального конструирования являются Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др.
В последнее время для конструирования и сопровождения веб-сайтов используются системы управления их содержимым (контентом) — CMS (Content Management System), которые предоставляются специальными платными или бесплатными службами. Системы CMS представляют собой своего рода конструкторы. Они позволяют создавать сайт в режиме непо- средственного подключения к сети, или онлайн (online), и сопровождать его в дальнейшем.
2. Проектирование сайта
Основные этапы разработки веб-сайтов
• определение тематики сайта, его целей и задач;
• проектирование структуры сайта, определение разделов и связей между страницами;
• разработка дизайна сайта, т. е. стиля оформления страниц;
• подготовка материалов (текстов и графики) для размещения на веб-страницах;
• конструирование страниц сайта (создание HTML-кода);
• размещение в сети (публикация) и тестирование сайта.
Основы языка разметки HTML
Создание HTML-документа в редакторе Блокнот
Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером. Например, эти команды могут указывать, как должно отображаться содержание страницы на экране. HTML-документ можно создавать в простейших текстовых редакторах, например в редакторе Блокнот, а затем сохранять в файле с расширением.htm или.html.
Разметка HTML-документа состоит в расстановке тегов — заключенных в угловые скобки команд языка HTML. Их можно набирать прописными или строчными латинскими буквами. Большинство тегов парные. Открывающим тегом описывается команда и начинается ее действие. Закрывающим тегом, который повторяет открывающий, но предваряется косой чертой / (слешем), это действие прекращается. Например, тег <b> задает жирное начертание. Размеченный текст «Второе <b>слово</b> выделено жирным шрифтом» браузером будет отображаться так:
Второе слово выделено жирным шрифтом.
Рассмотрим структуру простейшего HTML-документа.
<html>
<head>
<title>Заголовок окна</title>
</head>
<body>
Содержание документа
</body>
</html>
HTML-документ начинается отрывающим тегом <html>, а заканчивается — закрывающим </html>.
Внутри, как в контейнере, расположены два блока. В блоке <head>…</head> (голова) размещается неотображаемая на странице служебная информация. Например, текст, заключенный между тегами <title>…</title>, отображается не на странице, а в заголовке окна браузера. Вся отображаемая браузером информация: тексты, рисунки, видеофрагменты, анимации — размещается в блоке <body>…</body> (тело).
Краткое описание основных тегов приведено в Приложении 1 (c. 144).
Практическая часть
Задание 1. Выполнить на компьютере примеры 1-3 из учебника (с.19-23).
Задание 2. Оформите и сохраните текст в виде веб-страницы, изображенной на одном из рисунков. Для задания цвета фона воспользуйтесь Приложением 2 (с. 147).
