Создание сайта Владимир Высоцкий (стр. 3 из 4)

Приложение HAHTsite 5.0 можно смело рекомендовать людям, у которых создание Web-сайтов поставлено на "конвейерную" основу. Несколько часов непринужденного щелканья мышью - и вполне работоспособный продукт. Новичкам придется по душе интуитивно понятный WYSIWYG-интерфейс Adobe PageMill, да и его возможностями они не будут разочарованы: таблицы, формы, фреймы, Java-апплеты - в общем, все как положено, только вот с кириллицей проблемы, все русские и украинские тексты приходится вносить через Clipboard.

Одним из лучших пакетов для профессиональной разработки сайтов считается редактор NetObjects Fusion 11. Стильный, продуманный интерфейс, десятки готовых шаблонов страниц, задание стиля исполнения сайта в целом, все мыслимые и немыслимые свойства профессиональных продуктов: от работы с таблицами, формами и фреймами до широкого использования Java-апплетов и FTP-клиента.

Многие профессионалы считают, что Macromedia Dreamweaver 8.0-единственный WYSIWYG-редактор, заслуживающий их внимания, поскольку имеет прекрасные механизмы для очистки кода. Сама Macromedia рекламирует его так: "WYSIWYG-редактор для тех, кто думает на HTML". В нем есть все плюс тесная интеграция с Macromedia Flash 8.0 - популярным ныне приложением для создания Web-страниц, основанных на векторной графике.

Web-страницу можно написать и в простом текстовом редакторе Блокнот. Для того, чтобы ваш файл воспринимался как Web-страница, его расширение следует переименовать в .htm или .html. Тогда он будет открываться интернет-браузером. Создатели Web-страниц считают Блокнот достаточно удобным средством для создания файлов HTML. Блокнот предоставляет минимальные средства оформления, поэтому здесь исключена вероятность случайного сохранения специальных атрибутов форматирования в текстовых файлах. Это особенно важно иметь в виду при создании документов HTML для Web -страницы, так как присутствие специальных символов или других атрибутов форматирования на опубликованной Web-странице может оказаться нежелательным или даже вызвать ошибки [8].

3СОЗДАНИЕ САЙТА «ВЛАДИМИР ВЫСОЦКИЙ»

3.1 Разработка структуры Web-сайта

Создавать сайт я решила в текстовом редакторе Блокнот, т.к. в процессе работы я смогу буду напрямую сталкиваться с применением тегов.

Свою работу я начала с определения тематики сайта. Я решила, что сайт будет посвящен Владимиру Высоцкому, т.к. мне нравится его творчество. Далее я стала разрабатывать структуру сайта [5]. Пришли к выводу, что мой сайт будет состоять из таких разделов, как:

· биография;

· творчество;

· дискография;

· жены;

· друзья;

· причина смерти;

· память о поэте.

Раздел «Биография» сообщает пользователю о самых главных этапах в жизни В. Высоцкого.

В разделе «Творчество» обсуждаются песни, стихи. Рассказывается о работе Высоцкого в театре и в кино.

Раздел «Дискография» посвящен информации об основных изданиях пластинок с записями выступлений В. Высоцкого.

В разделах «Жены» и «Друзья» обсуждаются взаимоотношения поэта с его родными и близкими. Дается оценка положения Высоцкого в кругу семьи.

«Причина смерти» - раздел, который раскрывает тайну гибели музыканта.

И, наконец, раздел «Память о поэте» рассказывает пользователю о том, какие награды получил Высоцкий за свою работу, какие достопримечательности разных городов носят его почетное имя.

В соответствии с разработанной структурой была спроектирована главная страница сайта (рис.3). Она содержит все основные структурные элементы, переход по которым осуществляется с помощью гиперссылок.

Рисунок 3 – Главная страница сайта.

Главная страница сайта выполнена через фрейм, то есть страница разделена на 3 части. Фрейм - элемент языка HTML версии 3.0 и выше. Фреймы позволяют разделить Web-страницу на несколько независимых окон и в каждом из них размещать отдельную Web-страницу. При этом допускаются ссылки из одного окна в другое окно. Обычно фреймы применяется для организации меню, постоянно находящихся на экране.

В качестве фона для всего сайта я выбрала песочный цвет. На мой взгляд, он не напрягает глаза пользователя и хорошо сочетается с цветами теста. Результата я добилась при помощи параметра <BGCOLOR> тега-контейнера <BODY> </BODY>.

3.2 Работа с текстом.

Как известно, основное наполнение Web-страниц - это все-таки текст. За редким исключением специальных сайтов-галерей. На самом деле, для того, чтобы в окне просмотра браузера отобразить текстовую строку, никаких тегов применять не требуется: Достаточно просто написать сам текст. Но, когда нужно уже разбить его хотя бы на абзацы, надо пользоваться тегами <Р> </Р>. При этом, тег <Р>, естественно, обладает параметром выравнивания ALIGN, который может принимать значения LEFT, RIGHT, CENTER и JUSTIFY (выравнивание текста по левому краю, по правому, по центру и по ширине).

Теги, использованные для форматирования текста:

· - используется для выделения текста полужирным шрифтом;

· -отображает текст курсивом;

· - позволяют подчеркнуть текст;

· <TT> </TT> - отображает текст, имитирующий стиль печатной машинки.

Для перехода на новую строку без вставки пустой строки существует тег .

По умолчанию цвет текста в HTML-документе черный. Изменить цвет текста можно с помощью тега <BODY> </BODY>. Для этого в этот тег надо добавить еще один атрибут TEXT. Например, <BODY TEXT ="#FFCC66">.

Задает цвет только отдельным отрезкам текста параметр COLOR тега .

Также тег обладает параметрами SIZE (размер шрифта) и FACE (тип шрифта). Например, <FONTCOLOR=#8B8682" SIZE="8"> .

Применив эти теги, я получила следующее отображение текста в браузере (рис.4):

Рисунок 4 –Отображение текста в окне браузера

По умолчанию цвет текста в HTML-документе черный. Изменить цвет текста можно с помощью тега <BODY></BODY>. Для этого в этот тег надо добавить еще один атрибут TEXT.

Задает цвет только отдельным отрезкам текста параметр COLORтега .

Также тег .обладает параметрами SIZE (размер шрифта) и FACE (тип шрифта).

3.3 Создание таблиц

Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек. Каждая строка начинается тэгом <TR> и завершается тэгом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> или <TH> и </TH>. Тег <TH> используется обычно для ячеек-заголовков таблицы, а <TD> — для ячеек-данных.

Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>. Представление таблиц на странице моего сайта выглядит так (рис.5):

Рисунок 5 – Таблица на Web-странице

3.4 Создание списков

В языке HTML предусмотрен специальный набор тегов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных, как в электронных документах, так и в печатных.

В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений.

Для написания своего сайта я использовала маркированный список. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности. Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа.

Каждый элемент списка должен начинаться тэгом <LI>. Тег <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.