Основы ВЕБ-конструирования
1. Общее представление о веб-конструировании
Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время популярной и удобной службой сети Интернет. Большинство информационных ресурсов WWW представлены в виде веб-страниц, которые объединяются в веб-сайты.
Веб-страницы и веб-сайты широко применяются во Всемирной паутине.
Для создания веб-сайтов используется язык разметки гипертекстовых документом HTML (HyperText Markup Language).
Методы конструирования веб-сайтов и инструменты, с помощью которых выполняется конструирование, очень разнообразны, их можно классифицировать по различным признакам. Важнейшими из них являются степень автоматизации конструирования сайта и методика процесса разработки.
По степени автоматизации конструирования веб-сайтов следует выделить два основных метода: визуальный и программируемый (ручной).
Визуальный метод позволяет конструировать веб-сайт с высокой степенью автоматизации. Этот метод возник из необходимости уменьшить трудоемкость создания сайта и сократить сроки выполнения работ.
Главным принципом визуального метода является принцип «Что вижу, то и получаю» - WYSIWYG (от англ. предложения “What you see is what you get”). При создании сайтов с использованием визуального метода необходимо выбрать инструменты – редакторы визуального конструирования.
Наиболее известными такими редакторами являются: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive и др. Во время создания веб-сайта эти редакторы обеспечивают пользователю возможность работать без непосредственного подключения к сети Интернет. В дальнейшем созданный веб-сайт можно разместить в сети Интернет.
При создании веб-сайтов с помощью этих редакторов по каждой создаваемой веб-странице автоматически генерируется код HTML, который представляет собой набор конструкций языка HTML.
Для конструирования веб-сайтов могут использоваться системы управления содержанием CMS (Content Management System), которые предоставляются некоторыми специальными платными или бесплатными сервисными службами. Системы CMS представляют собой своего рода конструкторы, позволяющие создавать сайт и сопровождать его в дальнейшем. При создании структуры и навигации по сайту в системе CMS обычно не требуется глубоких знаний языка HTML. Примеры систем CMS можно найти на сайтах Narod.ru и Boom.ru.
Нельзя стать настоящим веб-мастером, не зная основных конструкций языка HTML, а для профессиональной работы необходимо освоить язык HTML. Создание сайта на языке HTML часто называют программируемым или ручным методом конструирования.
Для непосредственной работы с HTML-кодом могут использоваться специальные инструменты разработки, например программы Hotdog, HomeSite и др. Эти программы облегчают разработчику веб-сайта ввод и редактирование основных конструкций языка HTML.
Вводить основные конструкции языка HTML можно в программе Блокнот. Об этом способе работы мы поговорим позже.
Кроме языка разметки гипертекстовых документов HTML для создания веб-сайтов используются другие языки программирования, например Java Script и PHP.
Широкое применение при веб-конструировании получили скрипты. Они используются, как правило, для создания отдельных элементов веб-страницы, например, выпадающих списков, динамических меню, часов, календарей и т.п.
Методика веб-конструирования предполагает выполнение проектирования сайта за несколько основных этапов:
определение тематики сайта, его целей и задач;
проектирование структуры сайта, определение разделов и связей между страницами;
разработка дизайна сайта, т.е. стиля оформления страниц;
подготовка информации для размещения на веб-страницах: набор текстов, оптимизация графики;
непосредственное конструирование страниц сайта;
размещение сайта в сети (публикация), управление сайтом.
Методы и инструменты конструирования веб-сайтов очень разнообразны, например можно создавать сайты динамические и статические.
На динамической сайте размещается информация, которая может изменяться пользователем или загружаться из баз данных. Такие базы данных обычно содержат информацию, которая требует постоянного обновления. Например, сайт Интернет магазина всегда пополняется сведениями о дополнительных товарах и изменяющихся ценах.
Статический сайт не обновляется в режиме реального времени.
Широкое распространение получили интерактивные сайты. На таких сайтах веб-страницы генерируются серверными программами. Информация обычно берется из баз данных. Очень часто используется разграничение доступа к сайту, при котором посетители сайта имеют различные права доступа к информации на нем. Такие сайты могут содержать различные формы для заполнения.
При создании сайтов могут использоваться готовые шаблоны или их построение может выполняться в специальных программных средах, построенных в основном на графических изображениях и т.д. 2. Основные понятия HTML. Представление о структуре HTML-документа
2.1. Структура HTML-документа
Документ HTML представляет собой обычный текстовый файл, который содержит конструкции языка HTML. Поэтому этот документ можно создавать в обычных текстовых редакторах, например программе Блокнот, а затем сохранять созданные файлы с расширением .htm или .html.
Суть языка HTML - в разметке текста с помощью управляющих символов - тегов, которые располагаются в угловых скобках.
Большинство тегов парные, т.е. имеют открывающий элемент <> и закрывающий элемент >.
Между ними и находятся коды, которые распознает браузер.
HTML - документ всегда должен начинаться отрывающим тегом <html> и заканчиваться закрывающим html>.
Внутри расположены два блока:
блок заголовка <head> head> (блок служебной, неотображаемой на экране, информации);
тело страницы , в котором размещаются тексты, рисунки, аудио и видеофрагменты.
В блоке заголовка размещается тег текст . Текст, указанный в этом теге отображается в заголовке окна браузера.
В HTML - документе можно разместить комментарии, которые браузером не отображаются:
Комментарии>. Пример 1. Создать простой HTML-документ в Блокноте.
Сохранить созданный файл prim1.htm.
Открыть созданный документ в браузере.
Структура такого документа представляется следующим образом:
<html> HTML документа>
<head>
<title> Заголовок title>
Текст первой странички
|