Средства разработки веб-сайтов

Ранее вам известно, что веб-страницы являются текстовыми фай­лами, расширение их имен соответствует языку разметки гипертекста, ко­торый использован при разработке страницы. Как вы уже знаете, веб­страницы часто создают с использованием языка разметки гипертекста HTML. У файлов, созданных на языке HTML, расширение имен файлов htm или html. В файлах такого формата содержится HTML-код страницы, состоящий из данных двух типов:

текста, который будет отображаться на странице;

команд, которые определяют разметку текста - его структуру, формат фрагментов текста, обеспечивают вставку нетекстовых объектов на страницу и др. Такие команды в языке HTML называют тегами (англ. tag - ярлык, признак).

Просмотреть HTML-код веб-страницы, открытой в окне браузера Internet Explorer, можно, выполнив Вид => Просмотр HTML-кода. В дру­гих браузерах эта команда может быть Вид => Начальный код страницы (Mozilla Firefox), Меню => Страница => Инструменты разработчика => Источник (Opera), Инструменты => См. источник (Google Chrome) и др.

Разработка веб-страниц может выполняться с использованием разных средств:

• текстовых редакторов, в среде которых пользователь может вводить текст и теги. Для этого можно использовать текстовые редакторы Блок­нот, Edit Plus, Homesite, HTML Pad и др. Готовую страницу нужно сохра­нить с расширением имени файла htm или html. Создание веб-страницы такими средствами предусматривает обязательное знание языка размет­ки гипертекстов, например HTML. Всю работу по отбору тегов разработ­чик выполняет вручную. Разработка страницы проходит медленно, но благодаря небольшому размеру файла, в котором она сохраняется, такая страница быстро загружается и открывается в окне браузера;

• прикладных программ общего назначения, например из пакета Microsoft Office, которые могут сохранять файлы в формате HTML. Как вы уже знаете, документы, созданные в программах Word 2007, PowerPoint 2007, Publisher 2007 и др., можно сохранить, выбрав тип файла веб-страница (*.htm, *.html). При этом создаются веб-страницы, в которых применение тегов для разметки происходит автоматически. Разработчику не нужно знать язык разметки гипертекста. Но файлы, в которых сохраняются такие страницы, имеют намного больший объем, чем файлы, созданные в текстовых редакторах. Причиной является большое количество тегов, которые описывают структуру и форматиро­вание документа и дублируются при применении к каждому отдельному элементу страницы;

• специализированных веб-редакторов - программ, предназначенных для разработки веб-сайтов. Популярными веб-редакторами являются

• Adobe Dreamweaver, Microsoft FrontPage, SharePoint Designer, WYSIWYG Web Builder, KompoZer и др. Эти программы имеют допол­нительные средства для создания статических и динамических веб­страниц, при этом не требуют от разработчика знания языка HTML.

Такие программы называют WYSIWYG-редакторами (англ. What You See Is What You Get - что вы видите, то вы и получаете), созданная их средствами веб-страница будет выглядеть так, как она сконструирована в редакторе. HTML-код страницы более корректен, чем при использова­нии, например, программ пакета Microsoft Office, но тоже избыточный; » систем управления веб-контентом WCMS (англ. Web Content Mana­gement System - система управления веб-контентом), которые предо­ставляют пользователям удобные инструменты для управления тексто­вым и графическим наполнением веб-сайтов, добавления и удаления статей с информационными материалами, создания системы навигации веб-сайтов и др. Популярными WCMS являются системы Joomla, Wordpress, Drupal, Media Wild, Mambo, NUKE и др. Системы управле­ния содержимым веб-сайтов предлагают наборы шаблонов оформления веб-страниц и модулей, которые делают сайт динамическим: форумов, чатов, лент новостей, каталогов файлов, контроля статистики и т. п. Названные средства создания веб-сайтов можно установить на локаль­ном компьютере. Созданные в их среде веб-страницы после завершения процесса разработки нужно опубликовать в Интернете. В то же время суще­ствуют WCMS, которые одновременно с услугами по разработке веб-сайтов предоставляют услуги бесплатного хостинга. Такими являются системы uCoz, Google Sites, Prom.ua, Ua7.biz и др. В этих системах создание веб­сайта осуществляется в режиме он-лайн сразу на сервере хостинга.

Автоматизированное создание веб-сайта

Создание веб-сайта средствами он-лайн системы управления веб-контентом происходит за несколько шагов:

1. Регистрация учетной записи на сервере.

2. Выбор имени сайта и шаблона для его оформления.

3. Создание страниц сайта, системы навигации.

4. Заполнение страниц контентом.

Рассмотрим, как происходит процесс разработки веб-сайта средствами, бесплатно предоставляемыми пользователям веб-сервером Google. Соответ­ствующий сервис имеет название Сайты Google.

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

1. Откройте в окне браузера главную страницу сайта Google (http:// www.google.ru).

2. Выберите гиперссылку Войти => Создайте аккаунт прямо сейчас.

3. Заполните поля формы Регистрация аккаунта на странице Аккаунты Google. Выберите кнопку Я принимаю условия. Создайте мой аккаунт.

4. Активируйте ваш аккаунт, использовав гиперссылку в тексте пись­ма, автоматически отправленного на электронный почтовый ящик, на который вы зарегистрировали ваш аккаунт.

5. Выберите гиперссылку Войти на веб-странице Аккаунты Google в окне браузера, открывающемся после выбора гиперссылки из элек­тронного письма.

6. Заполните поля Электронная почта и Пароль данными, которые вы вводили во время создания учетной записи.

7. Выберите кнопку Войти.

8. Выберите гиперссылку Домашняя страница Google в нижней части веб-страницы.

В итоге откроется главная страница сервера Google, на которой вы будете иметь права пользователя сервисов Google. Адрес, на который зарегистрирова­на ваша учетная запись, будет отображаться в верхней части веб-страницы.

Для создания сайта нужно:

1. Открыть в окне браузера главную страницу сайта Google (http:// www.google.ru).

2. Выбрать в верхней части страницы гиперссылку Еще => Сайты.

3. Заполнить на странице Сайты Google — бесплатные веб-сайты и вики поля Электронная почта и Пароль данными вашей учетной записи, если они не заполнены. Выбрать кнопку Войти.

4. Выбрать на странице Сайты Google кнопку Создать сайт.

5. Выбрать один из предложенных шаблонов для создания сайта. По умолчанию предлагается шаблон Пустой шаблон.

6. Заполнить поле Дайте название своему сайту. Например, если вы со­здаете сайт вашего класса, то название может быть Классная жизнь. Одновременно автоматически будет предложен URL-адрес глав­ной страницы сайта. Он будет иметь вид: https://sites.google.com/ site/<название_сайта>. Часть название_сайта не должна содер­жать букв кириллицы, а поэтому система предлагает запись русских слов буквами английского алфавита без пробелов. Для указанного названия сайта системой будет предложен адрес https://sites.google, com/site/klassnaazizn, но при желании его можно изменить. URL-адрес главной страницы сайта должен быть уникальным.

7. Открыть список Выбрать тему и выбрать тему оформления сайта. По умолчанию предлагается тема Запуск по умолчанию. Например, выберем тему Лапта.

8. Ввести символы в поле Введите показанный код.

9. Выбрать кнопку Создать сайт.

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