Навигация
Экранные формы страниц и описание основных html-тегов
64242
знака
8
таблиц
15
изображений
2.2 Экранные формы страниц и описание основных html-тегов
2.2.1 Экранные формы страниц
Экранные формы страниц ДИС турфирмы «SunTour» представлены на рис.8-11. Полный текст HTML-кода представлен в приложении А.
Рис.8. Главная страница.
Рис. 9.О компании.
Рис. 10. Карта изображения «Горящие туры».
Рис. 12 Наши контакты
Рис.11. Подбор тура
При разработке страниц веб-ресурса были использованы следующие html-теги:
Структура html-документа
Тэговая модель - описывает документ как совокупность элементов несущих информационную нагрузку, каждый из которых окружен тэгами. Тэги HTML - это последовательность символов, начинающаяся знаком «<» и заканчивающаяся знаком «>».
Все, что расположено между <HTML> и </HTML> - это документ являющийся кодом HTML, который заключает в себе все другие тэги HTML и все информационное содержание документа.
Документ обычно состоит из заголовка и тела документа.
Заголовок документа содержит информацию о самом документе.
<HEAD> - тег заголовка документа;
<TITLE> - тег название документа, появляется в строке заголовка Internet Explorer и в списках журнала (History) и папки Избранное (Favorites).
Тело документа HTML содержит весь текст, несущий информацию и все тэги HTML, используемые для форматирования текста. Тело документа размещается сразу же после заголовка в тэгах <BODY> </BODY>. Элемент BODY имеет атрибуты:
BACKGROUND= «» - определяет фон, на котором отображается текст
документа.
BGCOLOR= «#XXXXXX» - цвет фона;
TEXT= «#XXXXXX» - цвет текста;
VLINK= «#XXXXXX» - цвет пройденных гипертекстовых ссылок
LINK= «#XXXXXX» - цвет гипертекстовых ссылок
ALINK= «#XXXXXX» - цвет ссылки, которая в данный момент активизируется
«#XXXXXX» - определяет цвет в терминах RGB - красный, зеленый, синий.
Если один или более параметров цвета текста и ссылок не определены,
то по умолчанию цвета для них задаются следующим образом: LINK=blue, ALINK=red, VLINK=purple.
Элементы управления разметкой.
<P> - используется для того, чтобы обозначить начало нового абзаца.
Имеет атрибут ALIGN , используемый для изменения выравнивания внутри абзаца, может принимать со следующие значения:
ALIGN=LEFT - выравнивание по левому краю;
ALIGN=RIGHT - - выравнивание по правому краю;
ALIGN=JUSTIFY- выравнивание по левому и правому краям;
ALIGN=CENTER - центрирование.
<BR>- принудительный перевод строки.
Стили заголовков. Язык HTML поддерживает шесть стилей заголовков, которые используются для того, чтобы в различной степени выделять текст. Стили нумеруются от одного до шести, причем стиль номер один является самым крупным по размеру шрифта. Для того, чтобы разметить текст каким-либо из стилей заголовков, следует заключить его в тэги
<Hn> </Hn>, где n- номер стиля.
Стандарт языка HTML насчитывает 11 атрибутов у элемента заголовка. Но чаще всего применяется только ALIGN.
Гипертекстовые ссылки.
Для записи гипертекстовой ссылки используется элемент <A>......</A>, который имеет несколько атрибутов, главным из которых является HREF (HyperText REFrence).
Содержание элемента A заключенное между тэгом начала и окончания, выделяется в тексте цветом, определенным для контекстных гипертекстовых
ссылок (LINK).
Другой формой использование элемента A является определение точек внутри текста на которые можно сослаться:
<A NAME= «point»>
Средства описания графической информации.
Для того, чтобы поместить изображение внутрь страницы используется
тэг <IMG> с обязательным параметром SCR= «URL».
<IMG SCR= «URL»>, где URL-адрес файла, содержащего графические
данные. Атрибут SCR является обязательным, а URL может указывать куда
угодно.
Тэг <IMG> может иметь следующие атрибуты:
ALIGN - расположение текста по отношению к изображению:
TOP – наверху,
BOTTOM – внизу,
MIDDLE – посередине.
ALT= «текст» - текст, который нужно показывать вместо изображения для текстовых браузеров.
ISMAP - атрибут, указывающий, что изображение будет использоваться в
виде карты.
WIDTH - ширина может указываться в пикселях или %;
HEIGHT – высота.
Формат графической привязки такой же как и текстовой. Однако
вместо того, чтобы разместить текст между тэгами <A HREF= «URL»>......</A> следует расположить тэг <IMG>.
Горизонтальные линии.
<HR> - тег горизонтальной линии. Может иметь следующие атрибуты:
WIDTH=pixels | percent - позволяет изменить ширину линейки задав размер в пикселях или процентах ;
ALIGN=LEFT | RIGHT | CENTER - задает выравнивание куска линейки по умолчанию центрируется;
SIZE=n - высота линейки по умолчанию 1;
COLOR=RGB триплет | название цвета.
Средства описания таблиц.
<TABLE>......</TABLE> - описывают контейнер для элементов описания таблицы. Атрибуты:
WIDTH - ширина,
BORDER - толщина каемки,
CELLSPASING - расстояние между ячейками,
CELLSPADDING - отступ от границ ячейки внутри нее,
BORDERCOLOR - задает цвет рамки.
<CAPTION>.....</CAPTION>- тег заголовка таблицы, размещается в табличном контейнере.
<TR>......</TR> - определяют строку таблицы.
Тэг <TR> может иметь атрибуты ALIGN и VALIGN.
ALIGN - контролирует горизонтальное расположение содержимого в
ячейках строки. Он может принимать значения:
ALIGN=LEFT - выравнивание по левому краю;
ALIGN=RIGHT - - выравнивание по правому краю;
ALIGN=CENTER - центрирование.
VALIGN - контролирует вертикальное расположение содержимого в
ячейках строки. Он может принимать значения:
VALIGN=TOP - выравнивание по верхнему краю;
VALIGN=BOTTOM - - выравнивание по нижнему краю;
VALIGN=MIDDLE - посередине.
По умолчанию ячейки заголовки центрируются, а ячейки данные
выравниваются к левому верхнему краю.
<TH>......</TH> - используется для описания ячейки содержащей заголовок.
<TD>......</TD> - используется для описания ячейки содержащей данные таблицы.
Формы.
Все формы начинаются тэгом <FORM> и завершаются тэгом </FORM>.
<TEXTAREA> - используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст).
Атрибуты:
NAME - имя поля ввода,
ROWS - высота поля ввода в символах,
COLS - ширина поля ввода в символах,
<INPUT> - используется для ввода одной строки текста или одного слова. Атрибуты :
NAME - имя поля ввода.
SIZE - определяет визуальный размер поля ввода на экране в символах.
VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен)
TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста.
· CHECKBOX - используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую программу, может принимать значение ON или OFF.
· IMAGE- позволяет связывать графический рисунок с именем поля.
· RADIO - позволяет вводить одно значение из нескольких альтернатив.
· SUBMIT - обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
· TEXT - описывает однострочное поле ввода.
· SELECT - позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.
Текстовые эффекты.
Задание текстовых эффектов с помощью тэгов<FONT>.
Пара тэгов <FONT>.....</FONT> позволяет задавать цвет и размер и
начертание текста.
Бегущий текст - тэг <MARQUEE>.Атрибуты:
BGCOLOR - определяет цвет фона окна,
BEHAVOIR=SCROLL | SLIDE | ALTERNATE - определяет способ появления текста в окне,
DIRECTION=LEFT|RIGHT - указывает направление движения,
ALIGN = TOP | MIDDLE | BOTTOM - задает тип выравнивания.
Фреймы.
Фрейм (frame) — это отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне web-браузера.
Фреймы по своей сути очень похожи на ячейки таблицы, однако более универсальны. Фреймы разбивают web-страницу на отдельные мини-кадры, расположенные на одном экране, которые являются независимыми друг от друга. Каждое окно может иметь собственный адрес.
<FRAME> -определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <FRAMESET>, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью параметра src.
<FRAMESET> имеет два взаимоисключающих параметра: ROWS и COLS.
ROWS- определяет число горизонтальных отрезков пространства в наборе фреймов;
COLS - определяет число вертикальных отрезков.
Параметры:
BORDERCOLOR - цвет линии границы.
FRAMEBORDER - отображать рамку вокруг фрейма или нет.
NAME - задает уникальное имя фрейма.
NORESIZE - определяет, можно изменять размер фрейма пользователю или нет.
SCROLLING - способ отображения полосы прокрутки во фрейме.
SRC - путь к файлу, предназначенному для загрузки во фрейме.
Разметив фреймы можно продолжать использовать ранее созданные
HTML-документы. Присвоив фрейму с меняющимся содержанием имя main.html, можно использовать атрибут TARGET во всех тэгах <A> для того чтобы загрузить во фрейм main все документы на которые есть гиперссылки.
Карты изображения.
Создание карты изображения является одной из привлекательнейших возможностей HTML, позволяющей пользователю привязывать ссылки на другие документы к отдельным частям изображений. Щелкая мышью на отдельных частях изображения, пользователь может выполнять те или иные действия, переходить по той или иной ссылке на другие документы и т.п.
Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:
<IMG SRC="url" USEMAP="url#map_name">
USEMAP - указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL соответствует.
MAPNAME - указывает имя карты для изображения, а предшествующий ему URL определяет местонахождение карты. Если данный URL отсутствует, то карта с указанным именем ищется в текущем документе.
<AREA...> - описывает участок изображения и ставит ему в соответствие URL. Параметры:
SHAPE - указывает на форму определяемой области изображения. Может принимать значения:
· default - по умолчанию (обычно прямоугольник),
· rect – прямоугольник,
· circle – круг,
· poly - многоугольник произвольной формы.
COORDS - координаты в пикселях описываемой области.
HREF - описание ссылки, действия по которой будут выполняться при щелчке мыши в заданной области.
</MAP> - завершает описание карты изображения.
2.3 Основные характеристики веб-разработки
Основные характеристики разработки ДИС турфирмы «SunTour»:
1. Технические
Поскольку при разработке ДИС не используются видео- и аудио-контент, а также изображения большого размера скорость соединения с Internet на клиентском компьютере может быть низкой.
Минимальные требования монитора:
· Расширение экрана 800х600 точек;
· Качество цветопередачи – 16 бит.
Для просмотра ДИС требуется браузер с поддержкой языка html. Операционная система не ранее Windows 98 или Linux. Для работы с ДИС достаточно мышки с двумя кнопками.
2. Социальные
· образование - начальное, среднее, высшее;
· материальное состояние – среднее и выше среднего;
· должность и вероисповедание посетителя не имеют значения.
3. Психологические
Целевой аудиторией веб-сайта являются посетители, интересующиеся услугами турфирмы (выбор путешествия, заказ путевок, бронирование и т.д.). Информация, представленная на сайте. Соответствует основным ключевым словам, по которым осуществляется поиск.
4. Физиологические
В соответствии с социальными требованиями, возраст посетителей – 18 лет.
5. Дополнительные
Работа с ДИС не требует никакого предыдущего опыта и специальных знаний работы в среде Internet.
2.4 Размещение ДИС на хостинговой площадке и оценка такого размещения
Когда разработка сайта завершена, его необходимо сделать доступным для просмотра другими пользователями сети Интернет.
Самый простой и удобный способ - выбрать услуги хостинга.
Услуга хостинга - это предоставление в аренду дискового пространства на сервере компании (хостинг провайдера). При этом сайт размещается на сервере, постоянно подключенному к быстрому каналу Интернет и становится доступен для просмотра другим пользователям сети.
Когда клиенту предоставляется услуга хостинга, он получает:
· имя виртуального сервера;
· определенное дисковое пространство на сервере;
· почтовые ящики;
· средства доступа и администрирования сервера;
· средства настройки и конфигурации сервера;
· возможность выполнения программ и скриптов и т.д.;
Хостинг бывает платный и бесплатный. При выборе бесплатного хостинга предоставляется место под сайт и некоторые дополнительные услуги, взамен просит разместить на страницах вашего сайта рекламу. При выборе платного хостинга - предоставляется максимально полный и необходимый набор услуг, рекламу не размещают – нужно платить за сервис.
Итак, при размещении сайта в сети и выборе хостинга необходимо решить следующие задачи:
- выбрать, на каком хостинге (платном или бесплатном) будет размещен сайт;
- выбрать доменное имя для сайта (пример: www.сайт.ru);
- выбрать хостинг-провайдера и оптимальный тариф;
- решить вопрос с поддержкой сайта и продвижению его в сети Интернет.
Действительно, первое что надо сделать, это определиться - каким хостингом - платным или бесплатным, необходимо воспользоваться.
Обзор существующих на украинском рынке хостинговых компаний показал, что наиболее выгодно для фирмы будет разместить свой сайт на хостинговой площадке компании «Hosting Ukraine»(http://www.ukraine.com.ua/). Хостинг компания Украина - это профессиональный, качественный, надежный платный хостинг. Его особенностью является полная автоматизации всех процессов, связанных не только с регистрацией доменов и хостинга, но и полной автоматизацией работы серверов и персонала хостинга. За счет заложенной в программное обеспечение логики обеспечивается наибольшая скорость и качество в предоставлении услуг, все сервисы работают стабильно и без сбоев 24 часа в сутки 7 дней в неделю. Домены регистрируются в течении 15 минут, хостинг активируется в течении 30 минут после регистрации пользователя. Все платежи обрабатываются автоматом, независимо от того как их оплатили - через банк, Webmoney, автомат iBox, или картой VISA. Через панель управления пользователь в состоянии управлять абсолютно всеми сервисами самостоятельно, не обращаясь в техническую поддержку. Автоматизация всех бизнес-процессов позволяет снизить стоимость предоставляемых услуг в разы. Компания разработала собственное программное обеспечение, которое позволяет упростить работу клиентов, автоматизирует их работу, уменьшает количество обращений за поддержкой, что позволило сделать хостинг дешевым, без потери качества услуг. Данный интернет хостинг это оптимальный выбор для размещения любого сайта от сайта-визитки до портала. Он поддерживает PHP 4, PHP 5.2, PHP 5.3, PHP 6, Perl, CGI, SSI, mysql и подключен к UA-IX на скорости 1000 Мбит/с. Сразу после заказа хостинга можно получить бесплатный 5 дневный тестовый доступ.
Также стоит обратить внимание на достаточно невысокие цены на услуги хостинга, что обосновано следующим:
1. высококачественной настройкой серверов, которая позволяет увеличить производительность более чем в 5 раз
2. созданное программное обеспечение, позволяет выполнять 90% работы без участия человека.
3. являясь разработчиками всего програмного обеспечения компания в состоянии дополнять и изменять его.
Т.к. сайт турфирмы “SunTour” состоит из нескольких страниц и логотипа, при его разработке на использовался контент большого размера, то вполне подойдет тарифный план, где размер дискового пространства будет от 100 до 400 мегабайт.
Был выбран тарифный план «Базовый».
Он предусматривает:
· Место на диске – 400 МБ;
· Сайтов – 2;
· Субдоменов – 20;
· PHP memory_limit – 96 МБ;
· Псевдонимы (алиасы) - неограниченно.
Цена и параметры хостинга указаны в таблицах 1 и 2 соответственно.
Таблица 1. Цена хостинга “Hosting Ukraine” базовый
| Период | Цена, грн | |
| 1 месяц | 17 | |
| 3 месяца | 44 | |
| 6 месяцев | 80 | |
| 1 год | 145 | |
| 2 года | 261 |
Для рекламы и экономии средств, разместим сайт турфирмы на хостинговой площадке на 2 года. Стоимость размещения составит 261 грн.
Таблица 2 Параметры хостинга
| Резервное копирование | + |
| Панель управления на русском | + |
| PHP 5.2, 5.3, 4.4, 6.0 | + |
| Perl [модули] | + |
| Python | + |
| Zend Optimizer | + |
| ionCube Loader | + |
| FTP аккаунтов | неограниченно |
| Домен в подарок | - |
| Баз данных MySQL 5.1.x | неограниченно |
| Доступ к PHPMyAdmin | + |
| Поддержка SSI | + |
| Использование CGI-скриптов | + |
| log файлы | + |
| Запуск скриптов(cron) | + |
| Паролирование директорий | + |
| Страницы ошибок | + |
| Файл тонкой настройки веб-сервера Apache (.htaccess) | + |
| Резервное копирование (back-up) | + |
| Редактирование DNS | + |
| Трафик | бесплатно |
| SSH доступ | - |
| Нагрузка на ядро CPU | 4% |
| Почтовых ящиков | неограниченно |
| Почтовые протоколы | POP3, IMAP, SMTP |
| Webmail | + |
| Переадресация почты | без ограничений |
| Антивирусная проверка почты | + |
| Проверка почты на спам | + |
| Почтовые автоответчики | - |
0 комментариев