Файл: Языки гипертекстовой разметки (Теоретические сведения).pdf

2.2. Способы создания сайтов 

Существует много способов создания сайта: использование готового шаблона, работа с программами по созданию сайтов, мы решили воспользоваться самым профессиональным на наш взгляд ― это использование только HTMLкод. Все страницы находятся в виде таблиц, для их использования применялись теги: «table, td, tr, th». На некоторых страницах находятся несколько таблиц, такие страницы как «Наши малыши» и «Главная», первая таблица в них служит как каркас, вторая служит для удобства размещения информации. Фон прописан тегом «background», который ссылается на изображение в корневом каталоге сайта.

Чтобы Web-страница выглядела более привлекательно, разделили текст на абзацы и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тегов с номерами, соответствующими уровню, например, <hlx/hl> ― заголовок раздела первого уровня, a <h6x/h6> ― заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 ― очень мелким. Все изображения размещены на сайте с помощью тега «img», который так же ссылается на корневой каталог. Положение картинок на страницах прописывалось с помощью «align, valign», которые отвечают за положение текста, изображений по вертикали и горизонтали. Большинство изображений были сделаны, редактированы в графическом редакторе Photoshop.

По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в теге <hl> используется атрибут align=right, а для центрирования ― align=center. Допускается также явное указание левостороннего выравнивания ― align=lef t.> Добавьте в тег < hl > атрибут align=center, чтобы центрировать заголовок. Этот элемент должен принять следующий вид: <hl align=center>текст заголовка</hl>.

На сайте можно увидеть множество ссылок позволяющих переходить на другую страницу. Ссылки прописывались с помощью тега «ahref», который ссылается на файл находящийся в корневом каталоге сайта.

Бегущую строку на каждой странице сайта мы выполнили в программе Microsoft FrontPage, так как по нашему мнению ― это наиболее эффективный способ создания данного объекта.

Из всего вышеизложенного мы видим, что сайт можно использовать как хранилище информации разного уровня, текстовая информация (представлена как надписи различного вида, шрифта и размера, бегущей строки), графическая (как фотографии и иллюстрации).

После создания сайта и опубликования его в интернете, мы обнаружили, что сайт ― это наиболее удобный способ представления информации разного вида.

2.3. Этапы и методы разработки сайта 

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

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

Процесс разработки веб-сайта можно разделить на следующие этапы:

• маркетинговое планирование,
• планирование структуры будущего сайта (разделы, навигация и т.д.),
• разработка дизайна сайта,
• верстка разработанного макета,
• «наложение макета» на разработанную нами систему управления контентом,
• установка программных модулей, отвечающих за расширенную функциональность сайта,
• наполнение вашего веб-представительства текстами и изображениями,
• тестирование сайта на соответствие техническому заданию и выкладывание готового проекта в интернет.
• Маркетинговое планирование

На этом этапе выясняются сами основы создаваемого сайта. Что сайт должен делать? Каковы его главные задачи? Чего вы хотите достичь с его помощью? Что вы хотите этим сайтом донести до ваших посетителей? Эти и другие многочисленные вопросы помогают определить, каким будет сайт.

• Техническое планирование
• Дизайн сайта

Один из наиболее сложных этапов. Прежде всего потому, что большинство из нас привыкло оценивать дизайн отдельно от самого сайта, как оценивают картину или музыку в песне отдельно от её слов.

• Верстка

Верстка – это перевод дизайна, до сего момента существующего в виде картинки, в HTML-код. Здесь есть свои особенности.

• Система управления сайтом (CMS)

Серьезной задачей является выбор программного «движка», позволяющего обновлять информацию на сайте без лишних сложностей.. Этот процесс тоже не должен вызывать трудности. Следование открытым стандартам также очень важно – не стоит «приковывать» себя к чьей-то закрытой технологии.

• Наполнение сайта

В случае использования CMS процесс наполнения становится довольно прост.

• Тестирование и выкладывание

Несмотря на то, что тестирование происходит на каждой из стадий реализации проекта, окончательное тестирование необходимо.

2.4. Навигация по сайту 

Навигация по сайту должна быть удобной, и с этим не поспоришь. Любой пользователь, «заблудившись» на сайте или не сумев найти необходимую информацию из-за запутанных переходов, просто уйдет к конкурентам.  Именно поэтому грамотная навигация – основной критерий для удобства сайта.

Система навигации на сайте– это набор гиперссылок, созданный для переходов по разделам сайта для поиска конкретной информации.  Ссылки могут быть двух типов: текстовыми и графическими. Отдельно выделяют ссылки-ролловеры, которые при нажатии или наведении курсора изменяют вид (размер шрифта, цвет).

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

Удобная навигация по сайту должна конкретно отвечать на 3 главных вопроса:

• На какой сейчас странице находится посетитель?
• Какие страницы он уже посетил?
• Какие еще страницы ему доступны?

Для ответа на них также существует несколько правил. Ссылки на страницы, которые пользователь уже видел, отличаются по цвету от тех, по которым он еще не переходил.  

Многих интересует вопрос: а сколько же ссылок должно быть на сайте?  Здесь однозначно ответить нельзя, так как это во многом зависит от количества страниц сайта. А нужное количество определяется лишь опытным путем.  Главное правило: их должно быть столько, сколько будет удобно для пользователя.  В то же время система навигации не должна занимать слишком много пространства сайта.  В среднем ее площадь это 5-15% всего пространства ресурса.

Работа над гиперссылками и навигацией начинается лишь после того, как определены все задачи сайта и объем контента (текста и графики).  В противном случае материалы могут просто не вписаться в разработанную структуру. Если же страница вскоре будет удалена, то и ссылки, связывающие ее с остальными, необходимо будет изменять.

2.4.1.Виды навигации

Виды навигации можно выделять исходя из двух критериев: функционального и визуального.

По своим функциям система навигации делится на следующие виды:

1. Языковая – навигация, отвечающая за языковой интерфейс и отображение контента на выбранном пользователем языке.
2. Основная – это наиболее важные разделы сайта, как правило меню.
3. Глобальная – это те ссылки, которые должны быть видны с любой страницы сайта, например ссылка на главную.
4. Рекламная – ссылки для привлечения посетителей на рекламные страницы сайта с расположением товаров и услуг.
5. Тематическая – навигация по страницам сайта одной определенной тематики (рубрики).
6. Текстовая – гиперссылки из текста на странице. С точки зрения юзабилити, они нужны для направления пользователя к упомянутому в тексте материалу. С точки зрения оптимизации – это грамотная перелинковка сайта.
7. Указательная – по-другому, справочная. Гиперссылка указывает, в какой области сайта сейчас находится посетитель.
8. Географическая – используется на сайтах, где имеются разделы, посвященные разным странам.
9. По визуальному оформлению выделяют следующие виды навигации:
10. Текстовая – совпадает с определением текстовой в функциональном плане. Это, пожалуй, самый древний вид навигации.
11. Графическая – сейчас наиболее популярный вид навигации с графическим отображением, применяется для всех видов функциональной навигации.
12. HTML-формы – помогают в экономии места с помощью выпадающих или открывающихся элементов.
13. Java и Flash технологии – с помощью них можно организовать определенную реакцию на действия при наведении курсора, нажатии кнопок мыши или клавиатуры.
14. Удобная навигация достаточно сложная вещь и организовать ее с первого раза не всегда удается. Разрабатывается она еще на этапе дизайна.

Согласно данным правилам был разработан сайт общеобразовательной школы (Приложение № 1)

ЗАКЛЮЧЕНИЕ

На первом этапе проектирования web-сайта необходимо выполнить анализ предметной области, т.е. определить объекты предметной области и связи между объектами.

Функциональный подход реализует принцип движения "от задач" и применяется, когда определен комплекс задач, для обслуживания которых создается web-сайт. В этом случае можно выделить минимальный необходимый набор объектов предметной области, которые должны быть описаны.

В предметном подходе объекты предметной области определяются с таким расчетом, чтобы их можно было использовать при решении множества разнообразных, заранее не определенных задач. Необходимо самым тщательным образом изучить бизнес, которому будет посвящен сайт, рынок, для которого он предназначен, деятельность конкурентов на этом рынке, деятельность самой компании - заказчика сайта, ее рекламную стратегию и фирменный стиль, терминологию, применяемую в данном бизнесе, а при необходимости - даже сленг людей, которые выступают на этом рынке в качестве производителей, продавцов и потребителей. 

Наиболее распространенным языком разработки сайта является Язык разметки гипертекстовых страниц (HTML - Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

В данной работе рассмотрены актуальные вопросы разработки и создания современного Web-сайта.

При этом мною были решены следующие частные задачи:

• ознакомление с современными Интернет-технологиями и использование их в своей разработке;
• изучение основных программы применяемых для разработки и создания Web-сайта;
• ознакомление с методами и способами представления на Web-страницах различных видов информации (текстов и изображений);
• ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им в своей практике;
• определение структуры Web-страниц;
• предоставление пошаговой стратегии разработки web-сайта;
• предоставление инструкции для пользователей web-сайта.

В результате проведенных работ на базе выбранных технологий был создан современный Web-сайта. 

БИБЛИОГРАФИЯ

1. Иопа, Н. И. Информатика: (для технических пособие / Н. И. КноРус, 2011. – 469 с.
2. Гвоздева, В. А. Информатика, автоматизированные информационные учебник / В. А. Форум:
3. Основы информатики: учебник / В. Ф. Ляхович, С. О. Ростов-на-Дону:
4. Симонович, С. В. Информатика. курс [Текст] / С. В. СПб.: Питер,
5. Информатика в экономике: пособие / [Н. Г. Бубнова и Москва: Вузовский 2010. – 476 с.
6. Информатика в экономике: пособие: / [Н. Г. Бубнова и Москва: Вузовский 2011. – 476 с.
7. Крис, Д. Креативный Web-дизайн. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Учебник Пер с англ. / Д. Крис, К. Кинг, Э. Андерсон. – М.: ООО «ДиаСофтЮП», 2005. 672 с.
8. Основы Web – технологий : учеб. пособие / П.Б. Храмцов [и др.]. – М. : Изд-во Интуит.ру “Интернет-Университет Информационных Технологий”, 2003. – 512 с.
9. Когаловский М.Р. XML: возможности и перспективы [Электронный ресурс] / сост. и ред. М.Р. Когаловский – OSP.RU:Издательство "Открытые системы"