Автор работы: Пользователь скрыл имя, 27 Февраля 2012 в 00:26, реферат
Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время популярной и удобной службой сети Интернет.
Веб-страницы и веб-сайты широко применяются во Всемирной паутине.
Для создания веб-сайтов используется язык разметки гипертекстовых документом HTML (HyperText Markup Language).
Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время популярной и удобной службой сети Интернет.
Веб-страницы и веб-сайты широко применяются во Всемирной паутине.
Для создания веб-сайтов используется язык разметки гипертекстовых документом 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.
Широкое применение при веб-конструировании получили скрипты. Они используются, как правило, для создания отдельных элементов веб-страницы, например, выпадающих списков, динамических меню, часов, календарей и т.п.
Методика веб-конструирования предполагает выполнение проектирования сайта за несколько основных этапов:
1. Разработка тематики сайта, его целей и задач.
2. Логическое проектирование, которое включает в себя: формирование структуры сайта (линейный, иерархический), название разделов, связь между ними, подготовка информации, размещаемой на каждой веб-странице сайта.
3. Непосредственное создание сайта, которое включает в себя определение методов проектирования и выбор инструментов для него.
Методы и инструменты конструирования веб-сайтов очень разнообразны, например можно создавать сайты динамические и статические.
На динамической сайте размещается информация, которая может изменяться пользователем или загружаться из баз данных. Такие базы данных обычно содержат информацию, которая требует постоянного обновления. Например, сайт Интернет магазина всегда пополняется сведениями о дополнительных товарах и изменяющихся ценах.
Статический сайт не обновляется в режиме реального времени.
Широкое распространение получили интерактивные сайты. На таких сайтах веб-страницы генерируются серверными программами. Информация обычно берется из баз данных. Очень часто используется разграничение доступа к сайту, при котором посетители сайта имеют различные права доступа к информации на нем. Такие сайты могут содержать различные формы для заполнения.
При создании сайтов могут использоваться готовые шаблоны или их построение может выполняться в специальных программных средах, построенных в основном на графических изображениях и т.д.
1. Какие два основных метода веб-конструирования вам известны?
2. Какие инструменты могут использоваться при создании веб-сайтов?
3. В чем разница между визуальным и программируемым методами веб-конструирования?
4. Для чего используются скрипты?
5. Какие этапы следует выполнять при проектировании веб-сайта?
3.2.1. Структура HTML-документа
Документ HTML представляет собой обычный текстовый файл, который содержит конструкции языка HTML. Поэтому этот документ можно создавать в обычных текстовых редакторах, например программе Блокнот, а затем сохранять созданные файлы с расширением .htm или .html.
Суть языка HTML - в разметке текста с помощью управляющих символов - тегов, которые располагаются в угловых скобках.
Большинство тегов парные, т.е. имеют открывающий элемент <> и закрывающий элемент </>.
Между ними и находятся коды, которые распознает браузер.
HTML-документ всегда должен начинаться отрывающим тегом <html> и заканчиваться закрывающим </html>.
Внутри расположены: блок заголовка <head> </head> и тело <body> </body>, в котором размещаются тексты, рисунки, аудио и видеофрагменты.
Основные теги, необходимые для создания HTML- документа простой структуры, представлены в таблице:
В блоке заголовка размещается тег <title> текст </title>. Текст, указанный в этом теге отображается в заголовке окна браузера.
В HTML-документе можно разместить комментарии, которые браузером не отображаются: <! Комментарии>.
Пример 1. Создать простой HTML-документ в Блокноте. Сохранить созданный файл prim1.htm. Открыть созданный документ в браузере.
Структура такого документа представляется следующим образом:
<html> <!Открытие HTML документа>
<head>
<title> Заголовок </title>
</head>
<body> <!Содержание (тело) документа>
Текст первой странички
</body>
</html>
Результат отображения HTML-документа в браузере представлен на рис. 3.1.
Рис. 3.1.
3.2.2. Оформление HTML-документа
Теги языка HTML могут содержать атрибуты, которые являются параметрами или свойствами элементов разметки документа.
Правило записи атрибутов в теге следующее:
<тег атрибут1=значение атрибут2=значение …>
Тег <body> определяет внешний вид всей веб-станицы, в то время как отдельные ее элементы, например заголовки, таблицы могут иметь свое особенное оформление.
Выбор цвета страницы, фонового рисунка и цвета текста на ней является весьма важным, так как от этого зависит визуальное восприятие всего сайта.
Цвет страницы задается атрибутом bgcolor, а цвет текста - text. Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом.
Пример 5. В этом примере задан синий цвет страницы двумя способами:
<body bgcolor="blue"> <!название цвета>
или
<body bgcolor="#0000FF”> <!шестнадцатеричный код цвета>
При формировании веб-страниц указываются уровни заголовков, которые обозначаются h1, h2,...h6. Для описания уровней используются соответствующие теги, например, для третьего уровня — <hЗ> и </h3>. Заголовок уровня 1 самый крупный, а уровня 6 — самый маленький. Для выравнивания текста на странице обычно указывается одно из трех значений атрибута align:
align = center — выравнивание заголовка по центру;
align = left — выравнивание заголовка по левому краю;
align = right — выравнивание заголовка по правому краю.
Пример 6. Создадим HTML-документ с желтым цветом фона и зеленым цветом текста. Выведем тексты заголовков уровня h1, h2, h3, выровняв их соответственно по центру, по левому и правому краю документа.
Результат отображения HTML-документа в браузере представлен на рис. 3.2.
Рис. 3.2
1. С помощью чего создается HTML-документ?
2. Для чего предназначены теги и атрибуты в языке HTML?
1. Просмотрите текст HTML-документа:
а) Какой цвет фона и текста будет на веб-странице?
б) При выводе заголовков на веб-странице размер их уменьшается или увеличивается?
Редактор Microsoft FrontPage относится к редакторам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате .html. Выполняемые при этом действия напоминают работу в текстовом редакторе Word.
Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить основные приемы работы. После запуска FrontPage открывается окно, основные элементы которого представлены на рис. 3.3.
Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели текстового редактора Word.
Вид Рабочей области зависит от выбранного режима работы. В режиме Конструктор веб-страница конструируется из текстовых блоков и графических объектов. При этом автоматически генерируется ее HTML-код, который можно просматривать и редактировать в режиме Код. Режим
С разделением (рис. 3.4) является комбинацией этих двух режимов. Режим Просмотр позволяет просматривать созданные страницы.
С помощью меню Вид можно выбрать и другие полезные при конструировании сайта режимы. Режим Страница предназначен для создания и редактирования веб-страниц. В режиме Папки просматривается структура папок сайта, выполняются файловые операции. Заметим, что любые изменения файлов и папок сайта необходимо производить из среды разработки, так как это позволяет отследить изменения в структуре взаимосвязанных веб-страниц сайта. Режим Переходы отображает структуру связей между страницами и позволяет ее изменять. Режим Гиперссылки наглядно отображает систему ссылок, обеспечивает их проверку и редактирование.
Рис. 3.3
Рис. 3.4
Рассмотрим этапы и приемы работы в редакторе FrontPage на примере разработки веб-сайта «Беларускія пісьменнікі» (см. Рис. 3.3).
Для создания этого веб-сайта необходимо уяснить его структуру, и предполагаемое содержание, т.е. подготовить проект сайта. Фрагмент структуры сайта для наглядности изобразим в виде двухуровневой схемы (рис. 3.5).
Рис. 3.5.
На первой странице (верхний уровень) размещается заголовок сайта «Беларускія пісьменнікі», текстовые гиперссылки и гиперссылки с изображением писателей и поэтов, позволяющие открыть страницы второго уровня.
На втором уровне разместим три страницы одинаковой структуры, содержащие следующую информацию, как показано на рисунке 3.6.
Рис. 3.6.
После просмотра любой страницы второго уровня внизу расположим гиперссылки для возврата на главную (первую) страницу сайта и две гиперссылки для движения вперед и назад по сайту.
При проектировании сайта «Беларускія пісьменнікі» мы будем использовать методику построения сверху вниз, то есть конструировать от верхнего уровня к нижнему уровню. При создании веб-страниц сайта с помощью редактора FrontPage мы будем для удобства создавать страницы снизу вверх, то есть начнем создавать страницы нижнего уровня.
Файлы всех веб-страниц сайта размещаются в отдельной папке. Это в дальнейшем поможет упростить размещение сайта в сети Интернет. Файлу главной веб-страницы принято давать имя index или main с расширением .htm, хотя это требование не является обязательным.
В рамках каждого уровня страницы сайта имеют одинаковую структуру. Все страницы одного уровня обычно оформляются в едином стиле. Стиль оформления веб-страницы определяется стилем текста и графических элементов.
Под стилем текста понимается тип шрифта, размер, начертания; отступы, выравнивание, межстрочный интервал и др. Стиль графических элементов задается формой, размером, цветом, фактурой материала и т. д.