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

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

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

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

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

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

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

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

Итоги урока

Представление о веб-конструировании (04.03.2021)

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

Представление о веб-конструировании

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). Учебник>>

03.03.2021 17:56