Основные этапы создания Веб-страницы и Веб-сайта

Развитие компьютеров позволило существенно расширить границы уже существующих областей жизни и бизнеса, и создать абсолютно новые. Именно благодаря компьютерным технологиям стали возможны программы для разработки трехмерного дизайна новых моделей Ford Mustang, Subaru Impreza, Renault logan и других автомобилей, проектирование домов и ландшафтов, появились электронные деньги и системы их мгновенных переводов по всему миру и так далее.
Но помимо этого, широчайшее распространение получил абсолютно новый вид сферы услуг – это разработка и поддержание веб-сайтов. Их использование практически безгранично – на собственной интернет-странице вы можете вести блог для друзей или писать стихи и прозу, проводить рекламные акции нового опель инсигния или бытовой техники, можете создавать фотоальбомы или хранилище видеофайлов, можете общаться с людьми по всему миру с помощью микрофона и веб-камеры…
Однако разработка сайта – достаточно сложный и многоступенчатый процесс, включающий в себя девять основных этапов.
Этап первый – работа с клиентом: важно правильно понять, что именно хочет ваш заказчик, как именно он представляет себе будущий сайт. Можно и даже нужно ознакомить клиента с вариантами уже готовых работ и вашими возможностями, лучше всего на конкретных примерах.
На втором этапе формируется техническое задание, в которое входит структура и перечень основных средств разработки сайта, калькуляция стоимости выполнения работы и её сроки, размещение сайта в Интернете, создание доменного имени и дальнейшая техническая поддержка ресурса.
Третий этап – утверждение технического задания заказчиком и подписание договора о выполнении работ, внесение аванса (обычно это 50% от общей стоимости заказа).
На четвертом этапе дизайнер создает эскизы главной страницы ресурса, которые формируются в фирменном стиле заказчика (если это юридическое лицо ), а затем утверждаются с перспективой дальнейшей работы с сохранением этого же стиля оформления.
Пятый этап – разработка программных модулей и навигационной системы, html-кода и структуры в совместной работе программиста и дизайнера. Этот этап нуждается в информационных материалах, которые предоставляются клиентом.
Шестой этап подразумевает регистрацию доменного имени для сайта или размещение ресурса на уже существующем домене, который указывается заказчиком.
Седьмой этап – непосредственно прием сайта клиентом, подписание необходимой документации и внесение второй половины суммы гонорара.
На предпоследнем, восьмом этапе, производится финальное тестирование веб-сайта как заказчиком, так и разработчиком в течение недели или 10 дней – срок может быть оговорен в техническом задании. Выявляются и исправляются мелкие ошибки, могут вноситься изменения в информационную начинку ресурса.
Последний девятый этап – регистрация нового сайта в основных поисковых системах, а также в виде дополнительного сервиса – в системах рейтингов. Также на этом этапе может заключаться договор о технической поддержке ресурса разработчиком, если это не было оговорено заранее в контракте.

59.WEB-страница является контейнером для текста и изображений, размещаемых в интернете. Для того, чтобы создать WEB-страницу, надо использовать программу, которая может преобразовывать текстовый документ в гипертекстовый. Гипертекстовая разметка нужна не только для создания страниц в интернете. Она используется для подготовки писем электронной почты, электронных изданий. А также для создания обычных документов.Для создания WEB-страницы удобнее всего использовать мастер. Он запускается на вкладке WEB-страницы, вызываемой командой «Файл» «Создать». Разработаем для примера деловое письмо. Создание документа с помощью мастера можно поделить на несколько этапов:

На первом шаге надо выбрать тип страницы. Типы отличаются наборами готовых элементов. Это шаблоны документов, и их можно произвольно изменять. Выберем тип «Простая» (страница) и самостоятельно добавим все необходимые детали.

Следующий шаг – выбор стиля страницы, то есть художественного оформления. Редактор использует для создания стиля рисунки, которые находятся в папках пакета MS Offiсe. Выберем стиль «Загородный» - орнамент из листьев. На этом создание заготовки WEB-страницы заканчивается. Можно нажать кнопку «Готово», и мастер завершит работу.Теперь работа с WEB-страницей будет идти как с обычным документом. Здесь некоторые инструменты изменили свой вид. Например, исчез список для выбора размера шрифта, а его место заняли кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта». Создадим в самом начале документа новый абзац, выберем самый мелкий шрифт и введем адрес фирмы.

Преобразуем строку заголовка. Сотрем имеющийся в шаблоне текст-подсказку и введем название фирмы. А в правой части строки вставим логотип, то есть рисунок.

Осталось ввести текст письма, и документ готов.

Особенность WEB-страницы заключается в том, что для их оформления

можно применять стандартные элементы: линии, гиперпосылки, рисунки форматов GIF и т.д. Для их создания используется меню «Вставка». Документ можно редактировать и в режиме источника, если выбрать страницу «Вид» - «Источник HTML». Тогда будет понятно, как создана та или иная деталь страницы. Но этот режим полезен только для пользователей, знающих HTML. Если на WEB-странице неправильно отображаются русские буквы, надо открыть ее в режиме источника и исправить соответствующий атрибут элемента МЕТА. Сохранять WEB-страницы необходимо в оригинальном формате (документ HTML). В этом случае файлу присваивается тип НТМ или HTML. При конвертации таких документов в формат DOS или обратно некоторые параметры форматирования не будут сохранены.

Основные этапы создания веб-сайта:

1. Определение целей веб-сайта и его позиционирование

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

После определения целей сайта надо совершенно четко и как можно подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.

2. Создание Технического Задания (ТЗ) на разработку веб-сайта.

В ТЗ необходимо как можно более подробно описать:

- цели создания сайта и его целевую аудиторию;

- структуру веб-сайта и количество страниц в каждом разделе;

- работу динамических модулей;

- пожелания по дизайну (цвета, использоание фирменного стиля, соотношение графика/текст и т.д.

- используемые технологии (HTML, Flash, PHP и проч.);

- порядок предоставления, обработки или создания графической и текстовой информации;

- технические требования к сайту.

ТЗ является основным документом, на основе которого осуществляются все последующие этапы разработки веб-сайта.

. Создание дизайн-макета веб-сайта.

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

4. Верстка сайта.

После того, как Заказчик утвердил дизайн-макет (в письменном виде или по электронной почте) за работу принимается верстальщик – это тот человек, который переводит дизайн-макет на язык, понятный компьютеру с использованием языка HTML.

5. Программирование сайта.

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

На этапе программирования (как правило, с использовавнием DHTML, PHP, Perl, ASP и баз данных) происходит создание всех страниц сайта, определяется порядок работы меню, расставляются гипер-ссылки, создается динамика на сайте, программируются такие составляющие, как гостевая книга, форум, новостная лента и проч.

6. Наполнение сайта информацией.

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

7. Расположение сайта в сети Интернет.

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

8. Тестирование сайта.

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

60. Структура HTML - документа.Итак, HTML (Hyper Text Markup Language) - язык гипертекстовой разметки. Собственно, его появление и зарождение браузеров, которые способны распознавать и интерпретировать код html в понятное пользователям содержание вебстраниц положило начало развитию всемирной паутины (интернета), в том числе появлению информационных ресурсов (сайтов, блогов, крупных порталов и т.д.). Таким образом, используя язык гипертекстовой разметки, мы имеем возможность создавать свои проекты в сети. Для обеспечения единых стандартов был создан Международный Консорциум W3C, задачей которого стало не допустить анархии в использовании элементов HTML среди разработчиков.

Была определена спецификация языка разметки, которая изредка обновлялась. На данный момент последней версией является HTML 4.01, однако идут активные работы по внедрению 5 версии, отдельные нововведения уже поддерживаются популярными браузерами, поэтому проверка страниц сайта на ошибки, проводимого W3C validator, производится применительно именно к HTML 5, с отличиями которого от 4 версии можно ознакомиться на этой странице(правда, на английском языке).

Структура документа HTML - основные теги (html, head, body)

Если вы на какой-либо вебстранице кликните по ней правой кнопкой мышки и выберете из контекстного меню «Просмотр кода страницы» (в случае браузера Google Chrome), то в отдельной вкладке откроется текст, который и является html кодом, состоящим из совокупности тегов. Тегами называются команды языка HTML. Эти теги определяют то, что пользователи видят при просмотре.

Текст документа html, который определяет содержание того или иного элемента на странице , заключается между открывающим и закрывающим тегами (например, <head> и </head>). Как вы могли заметить, названия тегов заключаются между угловыми скобками, а закрывающий тег отличается от открывающего только наличием в нем слэша. Здесь надо отметить, что на приведенном выше скриншоте отмечены три главных тега (html, head, body) вместе со специальным тегом DOCTYPE:

<!DOCTYPE html> - специальный тег, который называют еще декларацией. Он начинается с угловой скобки и восклицательного знака и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров, хотя в html 4.01 существуют несколько вариантов, например, такой:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Однако мы уже будем ориентироваться на 5 версию, жизнь идет вперед, тем более, как я писал выше, валидация документов происходит уже в соответствии с новейшей версией, хотя до конца она еще не вступила в законную силу.

head - внутри этого тега размещается служебная информация, которая необходима браузеру для корректной интерпретации html документа. Она не видна на открытой вебстранице.

body - между закрывающим и открывающим тегами будет помещена информация, отображаемая на web странице.

html - все содержание документа определяется эти тегом

Обращаю внимание на то, что все вышеприведенные теги являются обязательными и входят в состав любого документа html. Более того, используется принцип вложенности, который определяет расположение тегов открытия и закрытия следующим образом:

<html><head>Служебная информация</head><body>Содержание</body></html>

Кроме этого, существуют теги, называемые пустыми, которые не требуют закрытия (например, тег br, определяющий перенос строки). В языке разметки существует строго ограниченный набор тегов для всех разработчиков, определенный консорциумом W3C, список валидных по версии HTML 4.01 тегов можно посмотреть на официальной странице

Структура документа HTML

HTML-документ заключается в теги <html> и </html>. Между этими тегами располагаются два раздела: раздел заголовка ( элемент head ) и раздел тела документа ( элемент body для простого документа либо элемент frameset, задающий набор кадров ). Все указанные элементы имеют начальный и конечный тег.Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и элементы, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее.Формально, согласно спецификации HTML 4+, первым в документе должен указываться элемент doctype, сообщающий браузеру об использованной версии HTML ( а версии, как уже говорилось, различаются наборами допустимых элементов и правилами их объявления ). В элементеdoctypeуказывается также адрес, с которого браузер может загрузить определение типа документа - Dtd (DocumentTypeDefinition). На практике же этот элемент зачастую опускают без ущерба для отображения документа.Браузер отобразит этот документ, выведя в строке заголовка своего окна текст "Самый простой HTML-документ", а в самом окне текст "Проще не бывает", причем параметры шрифта и цвет фона будут зависеть от умолчаний конкретного браузера. На практике, конечно, в разделе заголовка следует задавать определенную информацию. Для элементаbodyмогут быть указаны атрибуты, определяющие цвета текста и фон документа.Строгости ради надо сказать, что согласно спецификации HTML 4+ лишь два элемента документа являются обязательными:doctypeи title.

61.Основные средства для автоматизации разработки Веб-страниц.Публикация Веб-сайтов.

В современной литературе наряду с термином Web-сервер часто используется термин Web-cайт или Web-узел.Для подготовки этих электронных изданий создано множество программных продуктов - от простейших HTML-редакторов до средств проектирования Web-страниц и Web-серверов.Наиболее заметные различия между Web-страницами и печатными публикациями касаются скорости их появления. Несомненно, время загрузки Web-страницы имеет существенное значение, но работа Web-дизайнеров в первую очередь зависит от требований, предъявляемых клиентами к темпам реализации проекта на всех его стадиях, начиная с рождения идеи и заканчивая ее практическим воплощением. Не менее важно и то, как часто клиент планирует обновлять содержание узла, а также добавлять в него новую информацию.В традиционной печати сроки выпуска изданий определяются графиками работ типографий и структур распространения. Как правило, новая интересная информация появляется в Internet гораздо раньше. Это объясняется наличием средств автоматизации проектирования Web-страниц и более сложных информационных структур - Web-серверов. Именно в этом особая роль и значение программных пакетов MacromediaDreamweaver и MicrosoftFrontPage.В данной главе рассмотрен один из наиболее распространенных программных пакетов автоматизированного проектирования Web-публикаций MacromediaDreamweaver.После того как сайт создан, его нужно опубликовать на Web-сервере. И сделать это можно тремя различными способами.Первый способ самый простой, но далеко не всегда самый легкоосуществимый. Заключается он в том, что все файлы сайта переписываются на дискету или более емкий носитель информации (дискета IomegaZip, магнитооптический диск, перезаписываемый диск CD-RW, лента стримера, обычный жесткий диск, в конце концов) и относится администратору Web-сервера. Администратор просто переписывает содержимое вашего носителя в соответствующую папку сервера и настраивает программное обеспечение.