Саморазвитие, Поиск книг Обсуждение прочитанных книг и статей, Консультации специалистов: Рэйки; Космоэнергетика; Биоэнергетика; Йога; Практическая Философия и Психология; Здоровое питание; В гостях у астролога; Осознанное существование; Фэн-Шуй; Вредные привычки Эзотерика

Алексей Гладкий
Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Введение

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

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

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

Вначале мы поговорим о том, с чего начинается процесс создания сайта: разработка концепции, выбор хостинга, и др. После этого мы расскажем о том, как создавать веб-страницы с помощью языка программирования HTML. Пусть вас не смущает слово «программирование», если вы ранее никогда и ничем подобным не занимались: изучив соответствующую главу, вы поймете, что писать программные коды на языке HTML – с технической точки зрения почти то же самое, что и набирать обычный текст в редакторе Word или в «Блокноте».

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

Если вы хотите, чтобы сайт был посещаемым (собственно, а иначе зачем его создавать?), то необходимо выполнить его продвижение и «раскрутку». Эти вопросы также подробно рассматриваются в данной книге.

Итак – начинаем!

Глава 1.
С чего начать

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

Термины и определения, используемые веб-разработчиками

В среде веб-разработки используются перечисленные ниже понятия, термины и определения.

Баннер – статичное или динамичное изображение стандартного размера (как правило – 468х60 пикселей или 100x100 пикселей), предназначенное для размещения рекламы.

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

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

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

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

Доменное имя – последовательность из слов или символов, которую необходимо ввести в адресную строку Интернет-обозревателя для того, чтобы зайти на сайт. Иначе говоря, доменное имя – это адрес веб-ресурса в Интернете.

Интернет-обозреватель (браузер) – программа, предназначенная для просмотра содержимого веб-страниц (самые известные – Internet Explorer, Opera и Mozilla Firefox).

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

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

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

Куки (Cookies) – элемент данных, с помощью которых удаленный сервер помечает конкретный Интернет-обозреватель при его посещении. В следующий раз сервер «узнает» этого пользователя, благодаря чему сможет либо предложить ему какие-то данные с учетом заявленных прежде пожеланий либо, наоборот, не показывать этому посетителю те данные, которые он уже видел (например, рекламу). Отметим, что куки (cookies) не умеют изучать содержимое жесткого диска компьютера пользователя. Некоторые их сведения хранятся лишь в течение текущего сеанса работы с сервером и автоматически удаляются сразу после закрытия интернет-обозревателя. Но есть и такая информация, которая сохраняется в отдельном файле и записывается на жесткий диск в специально предназначенные папки.

Посещаемость сайта – количество посетителей сайта за определенную единицу времени. Для ведения статистики посещений предназначены специальные счетчики, которые можно найти, например, на портале www.hotlog.ru. Посещаемость сайта является ключевой характеристикой для определения его рейтинга или для оценки того, насколько он интересен и полезен для кого-либо.

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

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

Трафик – объем принятой и переданной информации. Обычно единицей измерения трафика является один мегабайт.

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

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

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

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

Что представляет собой современный веб-сайт?

Итак, что же представляет собой современный веб-сайт? На этот вопрос мы попытаемся ответить в данном разделе.

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

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

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

Кроме этого, практически каждый сайт содержит такие страницы, как Ссылки, Форум и Контакты.

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

Страница Форум предназначена для общения посетителей сайта между собой. Например, на форуме сайта спортивной команды болельщики могут делиться впечатлениями от ее выступлений, на форуме коммерческой фирмы ее клиенты могут делиться опытом, обсуждать какие-то актуальные темы, и т. д. Отметим, что грамотное использование форума может существенно увеличить посещаемость веб-ресурса.

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

• Имя – здесь отправитель сообщения вводит свои имя в произвольной форме (это может быть ФИО, название организации, псевдоним, и др.).

•  E-mail (может называться Электронный адрес или т.п.) – в данном поле нужно ввести электронный адрес, на который отправитель сообщения желает получить ответ. Данный параметр следует заполнять внимательно, поскольку если указать электронный адрес с ошибкой – ответ на отправленное сообщение получен не будет.

• Тема сообщения – в данном поле можно ввести тему сообщения. Это делается по аналогии с тем, как заполняется данный параметр в обычных электронных письмах.

• Текст сообщения – данный параметр может называться по-разному, а может и вообще не иметь названия, но суть от этого не меняется: это поле предназначено для ввода текста сообщения. Отметим, что на некоторых сайтах существует ограничение по количеству символов, вводимых в данное поле (например, не более 500 или 1000 символов).

• Защитный код – в данном поле необходимо ввести код, указанный рядом. Защитный код генерируется автоматически при каждом открытии данной страницы, его ввод необходим для гарантии того, что сообщение отправляется человеком, а не программой или роботом.

• Отправить – данная кнопка (она может называться по-разному – Отослать, Send, Submit, и т.д.) предназначена для отправки подготовленного сообщения.

Пример формы для отправки сообщения представлен на рис. 1.1.

Рис. 1.1. Пример формы для отправки сообщения на странице Контакты

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

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

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

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

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

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

Еще один вариант зарабатывания денег с помощью сайта – размещение на нем платных материалов. Это могут быть, например, книги, статьи, мультимедийные файлы, энциклопедические сведения, и т. д. Чтобы получить доступ к этим материалам, пользователь должен будет не только щелкнуть мышью на соответствующей ссылке, но и перевести определенную суму денег по указанным реквизитам. В подобных ситуациях для расчетов удобно использовать электронные системы интернет-платежей – например, WebMoney, Яндекс. Деньги, и т. п.

ПРИМЕЧАНИЕ

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

Многие владельцы сайтов любят проводить на своих веб-ресурсах опросы на разные темы. Кого-то интересует отношение клиентов к компании («Довольны ли вы сотрудничеством с нашей компанией?»), кого-то – мнение посетителей по злободневной теме («Поддерживаете ли вы войну в Ираке?»), а кто-то советуется с посетителями («Как вы считаете, в какой валюте лучше хранить сбережения – в долларах, евро или рублях?»), и т. п. После вопроса предлагается несколько вариантов ответов (например, «Да», «Нет», «Не знаю», и др.), и каждый пользователь может с помощью соответствующего переключателя выбрать какой-то один вариант. При этом во многих опросах исключается возможность повторного ответа со стороны одного и того же пользователя (читай – полученного с одного IP-адреса) в течение определенного промежутка времени (как правило – сутки).

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

Разработка концепции сайта

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

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

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

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

2.       Что будет получено в результате создания сайта? Ответ нужно сформулировать максимально конкретно: доход в размере столько-то рублей в месяц, увеличение числа клиентов на 20%, продажа нового продукта не менее чем на такую-то сумму в месяц, и т. п. Однако подобная конкретика возможна не всегда. Например, если вы создаете сайт, чтобы разместить на нем резюме и найти работу, можно поставить такую задачу: получение отклика не менее чем от 5 потенциальных работодателей в неделю (декаду, месяц, и т.п.). А для нового корпоративного сайта можно поставить задачу привлечения посетителей не менее 50 человек в день.

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

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

5.       Что будет утрачено в случае, если результат создания интернет-ресурса не оправдает ожиданий? Например, не окупятся затраты на создание сайта в сумме 1000 долларов, предприятие не получит 20 новых потенциальных клиентов в месяц, товары для интернет-магазина «зависнут» на складе, и т. д. И при этом необходимо оценить, насколько тяжелыми окажутся для вас возможные последствия низкой эффективности будущего веб-ресурса.

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

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

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

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

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

Информационное наполнение (контент) сайта

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

При планировании информационного наполнения сайта важно определить тип и формат представления данных. Будет ли контент представлять собой только текст, либо в него будут добавлены графические объекты, звуковые файлы, Flash-элементы и т.п.? Какие страницы будут включены в состав веб-ресурса – только статические HTML-страницы или динамические, генерируемые на основании сформированных пользователем запросов? Отметим, что характерной особенностью динамичных страниц является то, что они предоставляют посетителю именно те сведения, которые его интересуют, причем именно в той форме, которая для данного посетителя является наиболее удобной для восприятия.

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

• по типу аудитории, которой адресовано содержимое сайта;

• по времени поступления информации (как правило, наиболее свежая и актуальная и информация следует первой);

• по важности представляемых сведений;

• по структуре, которая действует на данном предприятии (этот критерий используется при проектировании и создании корпоративных сайтов);

• по типу представляемых сведений;

• по релевантности.

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

Еще один немаловажный момент – это объем представленной на сайте информации. Этот параметр может выражаться в стандартных страницах (например, 30 страниц формата А4), однако данный показатель нельзя признать объективным: ведь многое зависит, в частности, от ширины строк, от размера шрифта, и т. п. А вот наиболее точным критерием для оценки количества текстового контента является его измерение в количестве печатных знаков (обычно – в тысячах печатных знаков). Данный показатель можно использовать в двух вариантах: с учетом пробелов или без учета пробелов.

Также необходимо заранее предусмотреть количество иных элементов контента: графических объектов, таблиц, мультимедийных файлов, и т.д., а также порядок из размещения и представления на сайте. Причем данный процесс можно формализовать – например, определив, что после каждых 2000 – 3000 знаков текста обязательно должен следовать рисунок, анимационный файл либо иной объект.

СОВЕТ

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

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

СОВЕТ

В настоящее время существует немало виртуальных магазинов и бирж интернет-контента, где можно дешево купить подходящий текст. Наиболее популярными такими биржами в настоящее время являются ресурсы www.textsale.ru и www.advego.ru. Расчеты за купленные материалы осуществляются через систему WebMoney (www.webmoney.ru), при этом биржа берет определенный процент за каждую купленную/проданную статью.

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

• предоставлять посетителю возможность быстро найти ту информацию, которая его интересует;

• давать посетителю максимально полное представление о том, из чего состоит веб-ресурс;

• что еще интересного и полезного можно найти на данном сайте.

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

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

• Раскрывающийся список. Главное достоинство данного инструмента состоит в его компактности. Однако раскрывающийся список по наглядности во многом уступает меню.

• Карта сайта. Отдельная страница, на которой представлена развернутая структура всего сайта. Более подробно о том, что представляет собой карта сайта, мы говорили ранее, в разделе «Что представляет собой современный веб-сайт?».

• Back and Forward. Данный инструмент целесообразно использовать в случаях, когда предполагается последовательное изучение посетителями представленной на сайте информации. Обычно это выглядит примерно так: на странице идет текст, а под ним – кнопки или ссылки Вперед и Назад (они могут называться по разному: Next и Back, Далее и Возврат, и т.п., но суть от этого не меняется). После того как посетитель изучит информацию, содержащуюся на данной странице, он нажимает кнопку Далее и переходит на следующую страницу, где представлена очередная порция материала. Для возврата на одну из предыдущих страниц предназначена кнопка Возврат.

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

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

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

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

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

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

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

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

Понятие статической и динамической веб-страницы

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

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

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

ПРИМЕЧАНИЕ

Адрес страницы, написанной на языке HTML, будет заканчиваться символами html, следующими после точки.

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

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

Как выбрать хостинг

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

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

• быстрота;

• надежность;

• широкий ассортимент технических возможностей;

• невысокая стоимость;

• наличие эффективной и доступной службы технической поддержки;

• предоставление достаточного количества места для размещения сайта.

Рассмотрим подробнее каждое из перечисленных качеств.

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

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

ПРИМЕЧАНИЕ

Как показывает практика, высокой надежностью отличаются сервера, выпускаемые компанией IBM. Что касается операционной системы, то очень хорошо в данном отношении зарекомендовала себя система Linux.

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

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

• управление настройками веб-ресурса;

• создание почтовых ящиков и работа с электронной почтой;

• настройка и использование почтовых автоответчиков;

• просмотр и анализ статистики посещаемости веб-ресурса;

• использование FTP-менеджера для приема и отправки данных.

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

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

ПРИМЕЧАНИЕ

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

Как мы уже отмечали ранее, хостинг бывает бесплатным и платным. Кратко рассмотрим преимущества и недостатки каждого из них.

Главное достоинство бесплатного хостинга как раз и заключается в том, что он «халявный» и не требует от клиента никаких денежных трат. Все предельно просто: клиент выбирает и регистрирует доменное имя, выгружает файлы сайта на сервер (или формирует сайт прямо на сервере с помощью специального инструментария, предназначенного для начинающих) – и, в принципе, сайт готов и доступен для посетителей. Самые известные бесплатные хостинг-провайдеры русскоязычного Интернета – www.narod.ru, www.boom.ru, www.hut.ru, и др.

Стоит отметить, что бесплатный хостинг – это хорошая стартовая площадка для начинающих. Ведь зачем платить деньги, если вы только начинаете свои первые опыты в области веб-разработки и еще неизвестно, будете этим заниматься в дальнейшем или нет. Хостинг-провайдер предоставляет в пользование определенное количество дискового пространства (например, 1 Гб, чего для начинающих более чем достаточно, но объем дискового пространства может и не ограничиваться), а также возможность загрузки данных по ftp-протоколу. Инструментарий бесплатного хостинга прост и понятен, порядок работы очевиден, процесс создания сайта удобен и прозрачен. Поэтому если вы хотите попробовать свои силы в области веб-разработки и на основании полученного опыта делать вывод о том, стоит ли этим заниматься всерьез – экспериментируйте на бесплатных хостинг-площадках.

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

Помни об этом

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

Характерной особенностью многих бесплатных хостингов является то, что они могут работать нестабильно. На практике это приводит к тому, что ваш сайт может какое-то время (несколько минут, часов или дней) быть недоступным для посетителей. Кроме этого, во время высокой нагрузки на сервер (это происходит обычно в часы пик) скорость загрузки вашего сайта может упасть до минимума по причине низкой скорости соединения. А это может привести к оттоку посетителей, особенно тех, кто пользуется низкоскоростным Интернетом. Такой посетитель наверняка не захочет ждать, когда же наконец загрузится страница, и он просто перейдет на какой-либо другой веб-ресурс будет особенно обидно, если этот ресурс окажется вашим конкурентом).

Бесплатный хостинг-провайдер в любой момент в одностороннем порядке изменить правила предоставления услуг. Этому клиент ничего не сможет противопоставить. Например, в любой момент хостинг-провайдер может заявить, что отныне на всех бесплатных сайтах будет размещена реклама моторного масла «Mannol», и находиться она будет по центру возле верхней границы сайта. Большинству клиентов этого хостинг-провайдера такое нововведение будет, скорее всего, безразлично. Но если вы, например, на своем сайте рекламируете моторное масло «ЛукОйл» или иной конкурирующий продукт, вам такое решение хостинг-провайдера наверняка не понравится. Особенно если верхняя часть сайта, где провайдер хочет поместить рекламный баннер, у вас занята каким-то важным элементом (меню, и т.п.).

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

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

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

Рис. 1.2. Реклама на бесплатном хостинге www.narod.ru

Эта реклама размещается в принудительном порядке на всех сайтах, созданных клиентами бесплатного хостинга. А поскольку таких сайтов у любого бесплатного хостинг-провайдера огромное количество, то такая реклама оказывается весьма эффективной, а потому – может стоить немалых денег. Что касается места на сайтах, где будет находиться рекламный баннер либо иной рекламный элемент, то каждый хостинг-провайдер определяет его самостоятельно. Например, на www.narod.ru этот баннер находится в правом верхнем углу сайта (см. рис. 1.2).

Очевидно, что платный хостинг имеет много преимуществ по сравнению с бесплатным. А недостаток у него только один: как вы догадались, он связан как раз с финансовыми расходами. Но эти расходы посильны каждому: неплохой хостинг можно найти за 10-20 долларов в год. Есть и дешевле, но есть и дороже, причем чем больше стоит хостинг – тем больше полезных услуг и «навороченных» функций вам будет предоставлено.

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

И еще одно важное преимущество платного хостинга состоит в том, что при смене хостинг-провайдера вам не нужно менять доменное имя сайта. Например, если вы имеете на бесплатном хостинге www.narod.ru сайт http://vasya.narod.ru, и решили перейти на бесплатный хостинг www.boom.ru, то доменное имя (адрес) вашего сайта соответствующим образом изменится и примет вид http://vasya.boom.ru. Следовательно, вам придется заново заниматься раскруткой и оптимизацией сайта, информировать постоянных посетителей о смене адреса, и т. д. А вот на платном хостинге такой проблемы нет: если у вас есть сайт www.vasya.ru, то даже после смены хостинг-провайдера его адрес не изменится. Иначе говоря, при использовании платного хостинга не имеет никакого значения, где физически находятся исходные файлы сайта: его доменное имя (адрес) от этого не зависит.

Более подробно о том, что представляет собой доменное имя веб-ресурса, речь пойдет в следующем разделе.

Что такое доменное имя?

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

Доменное имя включает в себя домены разных уровней. В большинстве случаев используется до трех уровней доменов. Домен первого уровня находится в самом конце адреса сайта и обозначает доменную зону – например, .ru, .com, .org, .net, и т. д.

ПРИМЕЧАНИЕ

Домен первого уровня в среде веб-разработчиков называется также расширением доменного имени.

Домен второго уровня может выглядеть следующим образом: yandex.ru, google.com, rambler.ru и т. д. Домены третьего уровня обычно предлагаются на бесплатных хостинг-площадках – например, vasya.narod.ru, masha.boom.ru, и т. д. В таких именах вторая часть (narod, boom и т.д.) указывает на принадлежность хостинг-ресурса. Поэтому, как мы уже указывали ранее, при смене бесплатного хостинг-провайдера вы будете вынуждены изменить и доменное имя (адрес) сайта. Отметим, что доменные имена третьего уровня не пользуются успехом у тех, кто хочет создать серьезный сайт, а также у профессиональных веб-разработчиков.

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

• .com. Это сокращение английского слова commercial, что значит «коммерческий». Такое расширение доменных имен является наиболее распространенным, им пользуются многие как частные лица, так и организации.

• .net. Данное расширение также произошло от английского слова – network, что в переводе означает «сеть». Поначалу таким доменом пользовались владельцы технических веб-ресурсов, но в принципе это расширение могут приобрести все желающие.

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

• .aero. Этот домен предназначается для предприятий и организаций, занятых в сфере воздушных перевозок. Им могут пользоваться лишь члены авиационного сообщества. Более подробно об этом расширении доменного имени можно почитать здесь: http://www.nic.aero.

•  .biz. Это расширение говорит само за себя: оно было создано специально для тех, кто занимается бизнесом либо любой коммерческой деятельностью. Более подробно об этом расширении доменного имени можно почитать здесь: http://www.neulevel.biz.

• .coop. Этот домен предназначен для кооперативов, организаций кооперативных услуг, и т. п. Более подробно об этом расширении доменного имени вы можете почитать здесь: http://www.nic.coop.

• .info: Это расширение доменного имени является первым, не имеющим никаких ограничений с тех пор, как расширения .com, .net и .org стали доступны всем желающим. Более подробно об этом домене вы можете почитать здесь: http://www.nic.info/gateway.

• .museum. Этот домен первого уровня предназначен лишь для музеев, музейных организаций, а также иных структур и частных лиц, по роду деятельности связанных с музеями. Более подробно об этом расширении доменного имени можно почитать здесь: http://musedoma.museum.

• .name. Адреса веб-ресурсов, имеющих такой домен первого уровня, формируются по следующему шаблону: www.имя.фамилия.name. Более подробно об этом расширении доменного имени можно почитать здесь:  http://www.nic.name.

• .pro. Этот домен предназначен для сертифицированных профессионалов:  экономистов, юристов, докторов, финансистов, бухгалтеров и т. д. Более подробно об этом расширении доменного имени можно почитать здесь:  http://www.registrypro.com.

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

Таблица 1.1. Доменные имена первого уровня по географическому признаку

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

Домен первого уровня настоятельно рекомендуется выбирать либо по географическому принципу, либо так, чтобы он соответствовал направленности и тематике сайта. Иначе говоря, если ваш веб-ресурс будет рассчитан на российских посетителей, то выбирайте домен первого уровня .ru, а не .by или .ua. Если же вы хотите создать сайт информационной направленности, рассчитанный на всех русскоязычных посетителей, то в качестве домена первого уровня используйте .ru или .info, и т. д.

Рекомендуется формировать доменное имя веб-ресурса таким образом, чтобы оно кратко отражало его суть. Например, если вы хотите посвятить свой сайт торговле запасными частями к автомобилям и мотоциклам, то можно сформулировать autotorg.ru или autoshop.com, и т. п. Правда, здесь придется учитывать тот факт, что многие наиболее востребованные и «звучные» доменные имена могут быть уже заняты, поэтому придется решать задачу творчески.

СОВЕТ

Если вы хотите создать сайт в доменной зоне .com, но устраивающее вас имя уже занято – попробуйте воспользоваться другой доменной зоной, например – .org, .net, .info и т. д. Возможно, при другом домене первого уровня оно окажется свободным.

Учтите, что не рекомендуется создавать слишком длинные доменные имена. Например, если опять вернуться к примеру с сайтом по торговле запчастями к автомобилям и мотоциклам, то лучше выбрать доменное имя autoshop.ru, чем automototorgovlya.ru. Помните: чем длиннее доменное имя – тем выше вероятность ошибки при его вводе в адресную строку Интернет-обозревателя. Следовательно, потенциальный посетитель может не попасть на ваш сайт только потому, что неправильно набрал какой-то символ.

Как передать файлы сайта на веб-сервер?

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

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

Начинается процесс создания веб-ресурса с регистрации. Дальнейшие действия могут зависеть от конкретного провайдера, предоставляющего услуги бесплатного хостинга. Например, на www.narod.ru вы можете создавать сайт как с помощью конструктора, так и с помощью специально предназначенной мастерской. При этом вы сможете наблюдать за тем, как видоизменяется ваш сайт в соответствии с вашими действиями. Вам будет предоставлена возможность выбора темы оформления сайта, порядка размещения контента, вы сможете сформировать гостевую книгу, фотоальбом, и т. д. На завершающем этапе вы нажимаете соответствующую кнопку или ссылку (она может называться «Готово», «Далее», «Завершить», и т.п.), после чего ваш веб-ресурс автоматически будет расположен на веб-сервере и станет доступным для всех посетителей.

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

Обычно это делается с помощью FTP-протокола. Для этого вам понадобится любой стандартный проводник – Total Commaner, Far, проводник Windows и т. д. На практике процесс передачи данных по FTP-протоколу будет выглядеть так же, как и копирование файлов из одной папки в другую средствами проводника.

Далее мы расскажем о том, как настроить FTP-соединение в популярном проводнике Total Commander.

Для перехода в режим работы с FTP-соединениями выполните команду главного меню Сеть ? FTP-соединение (эта команда вызывается также нажатием комбинации клавиш Ctrl+F). При активизации данной команды на экране откроется окно, изображенное на рис. 1.3.

Рис. 1.3. Режим работы с FTP-соединениями

Если до настоящего момента в Total Commander не было настроено ни одного соединения – данное окно будет пустым (см. рис. 1.3). Если же такие соединения уже настроены, то их список будет представлен в поле Соединиться с.

Чтобы выполнить настройку нового соединения, нажмите в правой части данного окна кнопку Новое соединение. В результате отобразится окно, которое показано на рис. 1.4.

Рис. 1.4. Окно настройки нового FTP-соединения

В данном окне в поле Сессия с клавиатуры следует ввести произвольное название создаваемого соединения. По этому названию вы впоследствии сможете идентифицировать данное FTP-соединение в списке. Рекомендуется вводить значение данного поля таким образом, чтобы оно кратко отражало суть соединения (например, Связь с сайтом, и т.п.).

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

Завершается процесс создания соединения нажатием в данном окне кнопки ОК. Кнопка Отмена предназначена для выхода из данного режима без сохранения выполненных изменений.

После нажатия кнопки ОК или клавиши Enter новое FTP-соединение появится в списке (рис. 1.5).

Рис. 1.5. Новое FTP-соединение в списке

Теперь для связи с веб-сервером по FTP-протоколу нужно выделить соединение щелчком мыши (если в списке имеется только одно соединение, оно будет выделено автоматически, см. рис. 1.5), и нажать в правой части окна кнопку Соединиться. Через некоторое время, на протяжении которого на экране будет отображаться информация о ходе подключения, связь будет налажена. Теперь вы можете работать с доступной вам информацией в одной из панелей Total Commander.

Чтобы передать файлы на веб-сервер, действуйте по обычным правилам работы с Total Commander. Вначале в той панели, где отображается доступная вам на веб-сервере информация, откройте каталог, в который следует поместить исходные файлы сайта (при необходимости можно создать новую папку с помощью клавиши F7). Затем выделите в другой панели файлы, которые нужно передать, и нажмите клавишу F5, чтобы запустить процесс копирования. Через некоторое время вы увидите, что исходные файлы вашего сайта успешно переданы (точнее – скопированы) на веб-сервер: они отобразятся в соответствующей панели Total Commander.

При необходимости вы всегда можете изменить настройки FTP-соединения. Для перехода в режим редактирования нужно в окне списка соединений (см. рис. 1.5) выделить соответствующую позицию щелчком мыши и нажать в правой части окна кнопку Изменить. В результате на экране откроется окно настройки FTP-соединения (см. рис. 1.4), с которым мы уже познакомились.

При необходимости вы можете создать новое FTP-соединение на основании уже имеющегося. Эту функциональность удобно использовать, например, когда большинство параметров создаваемого FTP-соединения совпадают с соответствующими параметрами имеющегося соединения, а также в иных подобных ситуациях. В данном случае нужно в окне списка соединений (см. рис. 1.5) выделить соединение-источник щелчком мыши и нажать в правой части окна кнопку Дублировать. В результате на экране откроется окно настройки FTP-соединения (см. рис. 1.4), в котором основные параметры будут уже заполнены, и вам останется лишь внести требуемые корректировки.

Чтобы удалить FTP-соединение из программы, нужно выделить его в списке щелчком мыши и нажать кнопку Удалить. При этом программа выдаст дополнительный запрос на подтверждение операции удаления.

Продвижение сайта и счетчики посещений

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

Для ответа на данный вопрос необходимо поместить на сайт счетчик посещений. Такой счетчик внешне напоминает небольшой баннер (рис. 1.6 и 1.7), и он специально предназначен для фиксирования фактов посещений. 

Рис. 1.6. Счетчик посещений от сервиса hotlog

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

Рис. 1.7. Для объективной картины лучше ставить на сайт более одного счетчика

Однако здесь возникают дополнительные вопросы. Например, если счетчик показывает 10 посещений, то как узнать – это было 10 разных посетителей либо кто-то один заходил на сайт 10 раз? И вообще, 10 посещений – это за какой интервал времени? За час, за день или за неделю?

Чтобы получить ответы на такие вопросы, нужно правильно выбрать счетчик, поскольку разные счетчики могут показывать разную информацию. Например, первой строкой в счетчике может отображаться общее число посещений за единицу времени (обычно такой единицей являются одни сутки), а второй строкой – число посещений только с разных IP-адресов. И если на таком счетчике вы увидите в первой строке значение 10, а во второй – значение 2, то это будет говорить о том, что сегодня два разных посетителя зашли на сайт в общей сложности 10 раз. И не забывайте, что ваши посещения сайта счетчик также учитывает…

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

А вообще современные счетчики могут фиксировать самые разные события. Ниже приведен перечень наиболее востребованных из них.

• общее число посещений сайта;

• число просмотров страниц сайта;

•  количество сессий;

• с каких других Интернет-ресурсов приходят посетители на ваш сайт;

• поисковые запросы (слова, фразы, словосочетания и др.), через которые посетители нашли веб-ресурс;

• навигация посетителей по сайту (то есть какие страницы и в каком порядке они посещали);

• страницы, на которые приходят посетители;

• страницы, с которых уходят посетители;

• география посетителей;

• используемые посетителями Интернет-обозреватели;

• время нахождения посетителей на сайте;

• число просматриваемых страниц.

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

СОВЕТ

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

Где же взять счетчик посещений? В настоящее время совершенно бесплатно можно получить счетчики, например, на следующих сервисах: www.hotlog.ru (это один из самых популярных статистических ресурсов), www.mail.ru или www.bigmir.net. А вообще можно набрать в любом поисковике запрос «счетчик посещений» – и вам будет предложено множество ссылок, по которым вы найдете счетчики на любой вкус.

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

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

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

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

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

А потом наступает «прозрение». Человек видит, что сразу после расчета с «исполнителями» число посещений вновь резко снизилось, более того – вернулось практически на начальный уровень. Следовательно, деньги за раскрутку и продвижение сайта были потрачены зря.

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

Кстати, в настоящее время в Интернете можно найти утилиты, предназначенные как раз для накрутки установленных на веб-ресурсах счетчиков. Если вас устроит такая «псевдопосещаемость» – вы можете накрутить показания счетчиков на своем сайте и самостоятельно.

СОВЕТ

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

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

Обычно пользователи стремятся найти требуемые сведения через поисковые машины (например, www.google.ru). Если вы хотите, предположим, найти информацию о курсах валют – вы даете запрос «курсы валют», и через какое-то время поисковая машина выдаст вам перечень ссылок на ресурсы, содержащие сведения о валютных котировках. Это осуществляется за счет того, что поисковая система ищет в своих «хранилищах» словосочетания, соответствующие введенному запросу. А словосочетания, при поиске которых пользователь Интернета находит тот или иной сайт, можно сформулировать и ввести на стадии регистрации веб-ресурса в поисковых системах. Иначе говоря, если вы хотите, чтобы ссылка на ваш сайт появлялась в поисковой системе после отправки кем-либо запроса «услуги по ремонту квартир» – то при регистрации сайта в поисковых системах нужно ввести эти ключевые слова.

СОВЕТ

Настоятельно рекомендуется зарегистрировать созданный сайт в следующих поисковых машинах: http://webmaster.yandex.ru, http://www.rambler.ru/doc/add_site.shtml, http://www.google.ru/intl/ru/addurl.html, http://catalog.aport.ru/rus/add/AddUrl.aspx и http://top.mail.ru/add. Как показывает практика, регистрация веб-ресурса в этих системах является довольно эффективной. Кроме этого, воспользуйтесь сервисом http://1ps.ru: там вы можете оперативно и эффективно зарегистрировать свой веб-ресурс во многих каталогах.

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

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

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

А вот недостатков у «линкопомойки» намного больше. Ниже перечислены основные из них.

• Сайт с большим количеством неупорядоченных ссылок с высокой степенью вероятности будет «забанен» поисковыми машинами. В результате он будет исключен из поисковых систем (особенно данное явление не любит поисковая машина «Яндекс»), и не будет принимать участия в поисковых запросах. Иначе говоря, если вы полагаете, что при вводе поискового запроса «ремонт квартир» поисковая машина выдаст пользователю Интернета ссылку на ваш сайт, в реальности этого может и не быть.

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

• Беспорядочная свалка огромного количества ссылок не имеет никакой практической пользы для посетителей вашего сайта, более того – может вызвать у них лишь естественное раздражение. Очевидно, что никто не будет просматривать несколько сотен ссылок, чтобы найти одну или две действительно полезные. Уж если вы развели у себя «линкопомойку» – хотя бы постарайтесь отфильтровать и вынести в отдельный раздел те ссылки, которые могут оказаться полезными и интересными для посетителей.

• Сайт с огромным числом беспорядочно сваленных ссылок выглядит неряшливо, несолидно и неприветливо.

• Чтобы поднять индекс цитирования своего сайта таким образом, вам придется обмениваться ссылками с огромным количеством других ресурсов, поскольку при такой форме обмена ссылками отдача от них ничтожно мала.

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

Итак, резюмируем вышесказанное.

Перед тем как разместить ссылку на партнерском сайте, убедитесь в том, что на нем имеется не более 10-15 других ссылок. В противном случае эффект от размещения на нем ссылки может оказаться нулевым. Не создавайте беспорядочный каталог ссылок – это бессмысленно, а иногда еще и вредно. И хотя бы периодически проверяйте наличие на партнерских сайтах ответных ссылок.

Глава 2.
Основы веб-программирования с помощью языка HTML

Аббревиатура HTML знакома даже людям, которые по роду занятий далеки от веб-разработки. Она получила известность хотя бы потому, что адреса многих веб-страниц в Интернете заканчиваются расширением .html. Кроме этого, уже даже многие школьники знают: если есть желание создать свой сайт или заняться веб-разработкой – необходимо изучить хотя бы основы языка программирования HTML.

Общие сведения о языке программирования HTML

Расшифровывается аббревиатура HTML следующим образом: Hyper Text Markup Language, что в переводе на русский язык означает «гипертекстовый язык разметки». Иначе говоря HTML – это язык программирования, используемый для описания представленной на веб-странице информации. В состав этого языка входят специальные теги (команды), которые предназначены для создания различных эффектов, применения форматирования (например, курсивное или полужирное начертание), и т. п.

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

Действительно, современные программные продукты позволяют создавать веб-страницы даже без минимальных знаний азов программирования. Однако если вы всерьез планируете заняться веб-разработкой, а также если впоследствии вам придется заниматься обслуживанием и администрированием сайта – хотя бы элементарное понятие о структуре и использовании языка HTML иметь необходимо.

Чтобы было понятнее, приведем аналогию с автомобилем. Когда человек учится в автошколе, ему преподают не только Правила дорожного движения, но и читают курс устройства автомобиля. Ведь даже если человек не планирует заниматься самостоятельно ремонтом и обслуживанием машины, уж коль он сел за руль – он должен иметь хотя бы общее представление об устройстве того, чем он управляет. По крайней мере, он будет знать, что если во время движения машину «потянуло» в сторону – видимо, у нее спустило колесо, если застучал мотор – нужно срочно остановиться, а если машина заглохла – возможно, у нее кончился бензин, и т. д.

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

ПРИМЕЧАНИЕ

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

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

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

Наша компания организована в 2000 году. Сегодня мы рады предложить нашим клиентам широкий ассортимент товаров и услуг, причем на выгодных условиях. Более подробно о сотрудничестве с нами вы можете узнать в нашем отделе сбыта.

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

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

HTML «в действии», или Как просмотреть исходный код страницы

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

Функциональные возможности практически любого популярного Интернет-обозревателя (Internet Explorer, Mozilla Firefox, и др.) предусматривают просмотр HTML-кода текущей страницы, который обычно отображается в отдельном окне. Рассмотрим на конкретном примере, как это делается.

Откроем в Интернет-обозревателе Internet Explorer какую-либо страницу, например, сайт газеты «Советский спорт» – www.sovsport.ru (рис. 2.1).

Рис. 2.1. Страница для просмотра HTML-кода

Теперь выполним команду главного меню Вид ? Просмотр HTML-кода – в результате на экране откроется окно используемого по умолчанию текстового редактора (как правило, это «Блокнот»), в котором будет представлен исходный код открывшейся страницы (рис. 2.2).

Рис. 2.2. Просмотр HTML-кода

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

При необходимости вы можете вывести HTML-код на печать – для этого используйте штатную команду редактора «Блокнот» Файл ? Печать, вызываемую также нажатием комбинации клавиш Ctrl+P.

Отметим, что в разных Интернет-обозревателях команда, предназначенная для просмотра HTML-кода, может называться по-разному. Например, в обозревателе Mozilla Firefox она также находится в меню Вид, но называется Исходный код страницы, и ее можно вызвать также нажатием комбинации клавиш Ctrl+U.

Создание простейшей веб-страницы

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

Работать мы будем в любом текстовом редакторе, позволяющем сохранять созданные файлы с расширением html. Если вы пользуетесь операционной системой Windows, то вполне подойдет текстовый редактор «Блокнот», который входит в комплект ее поставки.

Итак, по обычным правилам работы в текстовом редакторе вводим в окне код, который представлен на рис. 2.3.

Рис. 2.3. Начальный этап создания простейшей веб-страницы

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

А текст, который мы ввели, представляет собой три пары тегов HTML-документа. Отметим, что большинство тегов языка HTML используются в паре: первый тег называется открывающим, а второй – закрывающим. Все закрывающие теги имеют в начале наклонную черту (например, на рис. 2.3 закрывающими тегами являются </title>, </body> и </html>).

Теги <html> и </html> предназначены для идентификации HTML-документа. Открывающий тег этой пары всегда следует в самом начале программного кода, а закрывающий тег – в самом его конце. Иначе говоря, тегом <html> начинается программный код страницы, а тегом </html> он завершается.

ВНИМАНИЕ

Пара тегов <html> и </html> является обязательным атрибутом любого HTML-документа.

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

Что касается тегов <body> </body>, то они предназначены для идентификации основного текста HTML-документа. Иными словами, весь текст веб-страницы, отображаемый на экране при ее просмотре в окне Интернет-обозревателя, должен находиться между этими тегами.

Сохраним введенные данные в файле с расширением html (предположим, что наш файл будет называться Пример.html). Для этого выполним команду главного меню Файл ? Сохранить (эта команда вызывается также нажатием комбинации клавиш Ctrl+S), после чего в открывшемся окне укажем путь для сохранения и имя файла.

Теперь дополним код нашего HTML-документа, добавив в него между соответствующими тегами заголовок веб-страницы и основной текст. Назовем нашу страницу Тестовая страница, а в качестве основного текста введем Эта страница является тестовой (рис. 2.4).

Рис. 2.4. Добавление в код страницы заголовка и основного текста

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S. После этого откроем нашу страницу в окне Интернет-обозревателя. Если все сделано правильно, то она должна выглядеть так, как показано на рис. 2.5.

Рис. 2.5. Тестовая страница в окне Интернет-обозревателя

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

Теперь доработаем нашу веб-страницу, чтобы придать ей более эргономичный вид. Вначале, используя теги <h1> и </h1>, озаглавим содержащийся на странице текст. Для этого дополним программный код так, как показано на рис. 2.6.

Рис. 2.6. Добавление в программный код заглавия текста

Обратите внимание – теги <h1> и </h1> и находящийся между ними текст расположены внутри тегов <body> и </body>, а также перед основным текстом.

Теперь сделаем так, чтобы слово страница отображалась курсивом, а слово тестовой – полужирным шрифтом. Для этого предназначены пары тегов соответственно <i> </i> и <b> </b>. В результате внесения необходимых дополнений исходный код нашей веб-страницы должен выглядеть так, как показано на рис. 2.7.

Рис. 2.7. Добавление курсивного и полужирного начертания

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

Рис. 2.8. Изменение цвета фона веб-страницы

При желании мы можем изменить и цвет шрифта, сделав его, например, голубым. Для этого вновь немного доработаем наш программный код, используя для этого атрибут text тега <body>. Этот атрибут также не является обязательным: если он не используется, то цвет шрифта по умолчанию будет черным (в этом мы тоже уже могли убедиться).

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

Рис. 2.9. Изменение цвета шрифта веб-страницы

Теперь сохраним все выполненные изменения и откроем нашу веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.10.

Рис. 2.10. Веб-страница после выполненных доработок

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

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

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

Рис. 2.11. Страница, которая должна открываться по ссылке

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

Для создания гиперссылок в языке программирования HTML предусмотрен парный тег <a> </a>, который используется совместно с атрибутом href. Значением данного атрибута является тот адрес, на который ведет гиперссылка.

Поместим оба наши файла (Пример.html и Test.html) в один каталог. Чтобы создать гиперссылку на страницу Test.html, изменим код страницы Пример.html так, как показано на рис. 2.12.

Рис. 2.12. Создание гиперссылки

Попутно мы познакомимся с еще одним тегом HTML-языка – <br>. Характерной особенностью данного тега является то, что он применяется не парно, а индивидуально. Иначе говоря, здесь нет открывающего и закрывающего тега, он один. Этот тег предназначен для вставки разрыва строки (от английского слова «break»). После того тега текст будет продолжен с новой строки.

ВНИМАНИЕ

Учтите, что при вводе основного текста язык HTML не реагирует на нажатие клавиши Enter. Несмотря на то, что в текстовом редакторе текст веб-страницы после каждого нажатия Enter будет продолжен с новой строки, при просмотре этой страницы в окне Интернет-обозревателя текст будет идти в одной строке. Поэтому для осуществления перехода на новую строку используйте тег <br>.

В рассматриваемом примере мы добавили в программный код страницы новую строку, поэтому после слова тестовой вставлен тег <br>.

Что касается ссылки, то она сформирована в новой строке текста. Вот ее код:

 <a href="Test.html">здесь</a>

В данном коде вначале следует открывающий тег <a> вместе со своим атрибутом href, имеющим значение Test.html (очевидно, что значением атрибута является в имя страницы, на которую ведет ссылка). Обратите внимание: в скобки <> открывающий тег заключен вместе с атрибутом и значением атрибута.

Далее следует слово текста, которое, собственно, и будет являться ссылкой (в нашем случае это слово здесь), а после него идет закрывающий тег </a>.

В результате выполненных изменений наша веб-страница Пример.html будет выглядеть так, как показано на рис. 2.13.

Рис. 2.13. Гиперссылка в тексте страницы

Как видно на рисунке, на нашей странице появилась новая фраза Более подробно смотрите здесь, которая начинается с новой строки. Причем последнее слово данной фразы представляет собой гиперссылку. Обратите внимание – по умолчанию гиперссылки в тексте выделяются подчеркиванием. Если все сделано правильно, то после щелчка мышью на данной ссылке откроется страница Test.html (см. рис. 2.11).

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

Сделаем из нашей страницы Пример.html гиперссылку на популярный портал www.mail.ru. Для этого подкорректируем программный код так, как это показано на рис. 2.14.

Рис. 2.14. Ссылка на www.mail.ru

Как видно на рисунке, из кода ссылки мы убрали имя страницы Test.html, добавив вместо него адрес http://www.mail.ru. В остальном программный код страницы остался прежним. Сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S, и запустим файл Пример.html.

Внешне вид веб-страницы не изменится – она будет выглядеть точно так же, как и на рис. 2.13. Но если теперь щелкнуть мышью на ссылке здесь, то в результате откроется главная страница портала www.mail.ru.

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

Основные теги языка HTML

Здесь мы познакомимся с наиболее востребованными тегами языка программирования HTML. Отметим, что многие теги имеют свои атрибуты, о которых также будет рассказано в данном разделе. Мы будем рассматривать все теги  (даже те, с которыми уже познакомились) в алфавитном порядке.

ВНИМАНИЕ

Не забывайте, что многие теги HTML-языка являются парными – например, <body> </body>, <b> </b>, и т. д.

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

•  accesskey – назначение для гиперссылки «горячей клавиши»;

•  href – определение адреса, на который ведет гиперссылка;

• name – именование областей веб-страницы;

• tabindex – установка порядка перехода по гиперссылкам;

• target – определение окна для отображения объекта гиперссылки.

Тег <b> предназначен для выделения текста полужирным шрифтом. Иначе говоря, весь текст, находящийся между тегами <b> </b>, будет отображаться полужирным шрифтом.

С помощью тега <basefont> вы можете изменить внешний вид всего текста. Этот тег имеет атрибут size, предназначенный для изменения размера шрифта текста.

Тег <big> позволяет увеличить шрифт текста по сравнению с соседним текстом, а с помощью тега <blockquote> вы можете создать в документе блок цитаты.

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

• alink, link и vlink – позволяют установить цвет гиперссылок;

• background  – выбор графического фона;

• bgcolor – изменение цвета фона веб-страницы (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);

• bgproperties – установка режима перемещения графического фона при пролистывании веб-страницы;

• bottommargin – позволяет редактировать высоту нижнего поля;

• leftmargin – позволяет редактировать ширину левого поля;

• marginheight – позволяет редактировать высоту верхнего и нижнего полей;

• marginwidth – позволяет редактировать ширину левого и правого полей;

• rightmargin – позволяет редактировать ширину правого поля;

• text – изменение цвета текста (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);

• topmargin – позволяет редактировать высоту верхнего поля.

Тег <br>, как мы уже отмечали ранее, предназначен для создания новой строки (то есть для переноса текста на нижеследующую строку). Этот тег имеет один атрибут – clear, предназначенный для предотвращения переноса слов текста.

С помощью тега <caption> вы можете снабдить таблицу заголовком, а атрибут данного тега align позволяет установить признак выравнивания заголовка таблицы.

Для центрирования элементов веб-страницы предназначен тег <center>.

<col> – данный тег позволяет создать неструктурную группу столбцов таблицы. Он имеет перечисленные ниже атрибуты.

• align – атрибут позволяет задать признак выравнивания данных в ячейках группы по горизонтали;

• bgcolor – с помощью данного атрибут задается цвет фона ячеек группы;

• char – выбор символа, устанавливающего порядок выравнивания данных в ячейках группы;

• span – установка числа столбцов в группе;

• valign – установка признака выравнивания данных в ячейках группы по вертикали.

<colgroup> – с помощью данного тега создается структурная группа столбцов таблицы. Он имеет те же атрибуты, что и тег <col>.

<dd> – данный тег позволяет отметить статью определения в списке определений.

<del> – с помощью данного тега текст снабжается признаком зачеркивания.

<div> – данный тег позволяет разделить веб-страницу на области. Это бывает целесообразно при использовании стилей. У данного тега есть атрибут class, с помощью которого можно сформировать список исключений.

<font> – с помощью данного тега осуществляется изменение внешнего вида текста. Этот тег имеет перечисленные ниже атрибуты.

• color – изменение цвета текста;

• face – изменение шрифта текста;

• size – изменение размера шрифта.

<form> – это тег используется для создания форм. Он также имеет несколько важных атрибутов, которые перечислены ниже.

• accept-charset – определение формата кодировки данных;

• action – задание места назначения данных формы;

• enctype – выбор формата передаваемых данных формы;

• method – выбор способа пересылки данных формы по сети;

• target – определение места, где будет отображено сообщение о доставке данных формы.

<frame> – с помощью данного тега определяется набор данных фрейма. О том, что такое фреймы, говорилось выше – в разделе «Термины и определения, используемые веб-разработчиками». Данный тег имеет несколько атрибутов, которые перечислены ниже.

• bordercolor – предназначен для изменения цвета линий рамки фрейма;

• frameborder – позволяет скрыть рамку фрейма;

• marginheight – позволяет изменить высоту верхнего и нижнего полей фрейма;

• marginwidth – позволяет изменить ширину левого и правого полей фрейма;

• name – предназначен для присвоения имени фрейму;

• noresize – предотвращает изменение размеров фрейма;

• scrolling – предназначен для управления отображением полос прокрутки фрейма;

• src – предназначен для определения имени и местонахождения файла данных, отображаемых фреймом.

<frameset> – с помощью данного тега создается набор фреймов. Он может использоваться с перечисленными ниже атрибутами.

• border – позволяет регулировать толщину линий рамок фреймов;

• bordercolor – позволяет изменять цвет линий рамок фреймов;

• cols – предназначен для формирования столбцов рамок фреймов;

• frameborder – предназначен для скрытия рамок фреймов;

• framespacing – устанавливает заданную толщину линий рамок фреймов;

• rows – предназначен для создания строк фреймов.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> – с помощью данных тегов создаются заголовки разных уровней (соответственно от первого до шестого). Например, на созданной нами веб-странице (см. рис. 2.13) заголовок Информация о странице создан с помощью тега <h1>, то есть это заголовок первого уровня. Отметим, что все теги, предназначенные для создания заголовков, являются парными. Поэтому если вы, например, формируете заголовок первого уровня, то он должен находиться между тегами <h1> </h1> (см. рис. 2.14). Теги заголовков могут использоваться с атрибутом align, который позволяет определить признак выравнивания заголовка.

<head> – этот парный тег определяет раздел заголовка на веб-странице. Кроме этого, он предназначен для хранения прочих элементов, задача которых – помочь Интернет-обозревателю в работе с данными. Также между тегами <head> </head> могут располагаться метатеги, применяемые для хранения сведений, которые предназначены для Интернет-обозревателей и поисковых систем. Строго говоря, заголовок станицы Тестовая страница (см. рис. 2.13 и 2.14), который мы поместили между тегами <title> </title>, следовало бы еще поместить и между тегами <head> </head>. При этом программный код заголовка должен был выглядеть так:

<head>

<title>Тестовая страница</title>

</head>

Это больше соответствует правилам HTML-языка, и мы не делали этого только для того, чтобы при создании простейшей веб-страницы обойтись минимальным количеством тегов.

<hr> – этот тег предназначен для создания горизонтальной линейки. Он может использоваться с перечисленными ниже атрибутами.

• align – определяет признак выравнивания линейки;

• noshade – позволяет придать горизонтальной линейке объемный эффект;

• size – позволяет указать толщину линейки;

• width – позволяет указать ширину линейки.

<html> – как мы уже отмечали ранее, этот тег предназначен для идентификации веб-страницы. Программный код любой веб-страницы должен начинаться тегом <html>, и завершаться тегом </html>.

<i> – с помощью данного тега (он также является парным) можно придать тексту курсивное начертание. Как пользоваться этим тегом, мы продемонстрировали ранее на конкретном примере (см. рис. 2.7 и 2.10).

<iframe> – этот тег позволяет создать плавающий фрейм.

<img> – с помощью этого тега осуществляется вставка в документ рисунков, фотографий, изображений и прочих графических объектов. Данный тег может использоваться с атрибутами, которые перечислены ниже.

• align – с помощью данного атрибута можно задать признаки выравнивания текста относительно изображения (например, чтобы текст обтекал изображение, и т.п.);

• alt – предназначен для отображения альтернативного текста при отсутствии графического объекта;

• border – позволяет поместить графический объект в рамку;

• dynsrc – позволяет создать внедренный видео-объект;

• height, width – эти атрибуты позволяют задать соответственно высоту и ширину графического объекта;

• hspace, vspace – эти атрибуты позволяют обрамлять графический объект полосами чистого пространства;

• ismap – предназначен для создания карты ссылок;

• lowsrc – определяет имя и местонахождение файла изображения с низким разрешением;

• name – присваивает имя графическому объекту;

• src – определяет имя и местонахождение файла графического объекта;

• tabindex – устанавливает порядок перехода по графическим объектам;

• usemap – устанавливает имя карты ссылок.

<ins> – с помощью данного тега осуществляется подчеркивание вставленного фрагмента текста.

<layer> – тег предназначен для позиционирования слоя (группы элементов) веб-страницы. Конкретизировать действие тега позволяют его перечисленные ниже атрибуты.

• height – позволяет установить высоту слоя;

• width – позволяет установить ширину слоя;

• left – определяет координату слоя относительно левой кромки окна;

• top – определяет координату слоя относительно верхней кромки окна;

• z-index – определяет приоритет воспроизведения перекрывающихся элементов слоя.

<li> – данный тег предназначен для создания списков. Каждый элемент списка должен помечаться этим тегом. Возможности HTML-языка предусматривают создание как маркированных, так и нумерованных списков. В первом случае используется атрибут type, во втором случае – value.

<link> – с помощью данного тега делаются ссылки на файл внешнего листа стилей. Это тег может использоваться с перечисленными ниже атрибутами.

• href – атрибут предназначен для определения имени и расположения файла внешнего листа стилей;

• rel – определяет тип отношения внешнего листа стилей к веб-странице;

• type – определяет формат внешнего листа стилей.

<map> – данный тег предназначен для формирования карты ссылок, а с помощью атрибута name карту ссылок можно именовать.

<marquee> – этот тег позволяет создать на веб-странице один из довольно распространенных эффектов: бегущую строку. Он может использоваться совместно со следующими атрибутами.

• behavior – позволяет задать способ поведения бегущей строки;

• bgcolor – предназначен для указания цвета фона бегущей строки;

• direction – устанавливает направление движения бегущей строки

• height – определяет высоту бегущей строки;

• width – определяет ширину бегущей строки;

• hspace, vspace – позволяет выполнить обрамление бегущей строки полосами чистого пространства;

• loop – определяет количество циклов перемещения бегущей строки;

• scrollamount – определяет шаг единовременного перемещения бегущей строки;

• scrolldelay – определяет величину задержки между отдельными тактами перемещения текста бегущей строки;

• truespeed – устанавливает минимальное значение интервала задержки scrolldelay.

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

<nobr> – действие этого тега прямо противоположно действию тега <br>, с которым мы познакомились ранее: он запрещает переход текста на новую строку (от английского «no break», что дословно означает «нет разрыва»).

<noframes> – с помощью данного тега включается отображение альтернативного текста при невозможности показа фрейма.

<noscript> – с помощью данного тега включается отображение альтернативного текста при невозможности исполнения сценария JavaScript.

<ol> – данный тег предназначен для формирования нумерованных списков. Он может использоваться совместно с атрибутами start, который определяет начальный номер элементов списка, и type, определяющим стиль нумерации списка.

<p> – с помощью данного тега можно создавать новые абзацы. Он может использоваться с атрибутом align, который определяет признак выравнивания текста абзаца.

<script> – этот тег предназначен для создания объекта сценария JavaScript.

<small> – с помощью данного тега вы моете уменьшить размер шрифта относительно расположенного рядом текста.

<strike> – тег устанавливает признак зачеркивания текста;

<strong> – создание полужирного текста

<style> – создание определения внутреннего листа стилей;

<sub> – преобразование текста в подстрочный индекс (то есть создание подстрочного текста);

<sup> – преобразование текста в надстрочный индекс (то есть создание надстрочного текста);

<table> – тег предназначен для построения таблиц. Он может использоваться совместно с перечисленными ниже атрибутами.

• align – включает режим обтекания таблицы текстом;

• background – определяет графический фон таблицы;

• bgcolor – устанавливает цвет фона таблицы;

• border – позволяет установить требуемую толщину линии рамки;

• bordercolor – устанавливает цвет линий рамки;

• cellpadding – устанавливает размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ (иначе говоря, с помощью этого атрибута определяется расстояние от содержимого ячейки до ее границ);

• cellspacing – позволяет установить расстояние между ячейками таблицы;

• frame – позволяет установить набор отображаемых линий рамки таблицы;

• height, width – эти атрибуты позволяют установить соответственно высоту и ширину таблицы;

• rules – позволяет установить набор внутренних линий таблицы, которые будут отображаться.

<tbody> – с помощью данного тега идентифицируется группа строк данных таблицы. Тег может использоваться с перечисленными ниже атрибутами.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• bgcolor – определение цвета фона группы;

• char – с помощью этого атрибута можно указать символ, определяющий порядок выравнивания данных в ячейках группы;

• valign – атрибут позволяет указать способ выравнивания данных по вертикали.

<td> <th> – данные теги позволяют определить соответственно ячейку данных и ячейку заголовка таблицы. Они могут использоваться с атрибутами, которые перечислены ниже.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• background – выбор графического фона ячеек;

• bgcolor – выбор цвета фона ячеек;

• char – указание символа, определяющего порядок выравнивания данных в ячейках;

• colspan – с помощью этого атрибута можно соединить соседние ячейки одной строки таблицы;

• height – атрибут позволяет задать высоту ячейки;

• width – атрибут позволяет задать ширину ячейки;

• nowrap – с помощью данного атрибута можно запретить перенос слов внутри ячейки на новую строку;

• rowspan – атрибут позволяет выполнить объединение соседних ячеек одного столбца;

• valign – атрибут позволяет задать способ выравнивания данных по вертикали.

<tfoot> – с помощью этого тега можно создать группу строк итоговых данных таблицы. Он может использоваться с перечисленными ниже атрибутами.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• bgcolor – выбор цвета фона группы;

• char – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;

• valign – атрибут позволяет задать способ выравнивания данных по вертикали.

<title> – с помощью данного тега задается заголовок веб-страницы, который отображается вверху окна Интернет-обозревателя. О том, как пользоваться этим тегом, мы уже говорили ранее.

<tr> – тег предназначен для создания строки таблицы. Он может использоваться с перечисленными ниже атрибутами.

• align – атрибут позволяет указать способ выравнивания данных по горизонтали;

• bgcolor – выбор цвета фона;

• char – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;

• valign – атрибут позволяет задать способ выравнивания данных по вертикали.

<tt> – тег позволяет отобразить текст моноширинным шрифтом.

<u> – данный тег включает подчеркивание текста.

<ul> – с помощью данного тега можно создавать маркированные списки. Использование с данным тегом атрибута type позволяет указать стиль маркированного списка.

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

Оформление содержимого веб-страницы

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

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

Добро пожаловать!

Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных позиций, которые мы рады предложить.

Товары:

промышленные товары;

строительные материалы;

одежда, обувь;

детские игрушки.

Услуги:

грузоперевозки;

ответственное хранение;

юридическое консультирование.

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

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

Форматирование текста

Используя имеющиеся знания, напишем программный код так, чтобы поначалу выделить на странице ее название и заголовок первого уровня, которым будет являться текст Добро пожаловать!. Этот код представлен в листинге 1.1.

Листинг 1.1. Выделение названия страницы и заголовка первого уровня

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных позиций, которые мы рады предложить.

Товары:

промышленные товары;

строительные материалы;

одежда, обувь;

детские игрушки.

Услуги:

грузоперевозки;

ответственное хранение;

юридическое консультирование.

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Обратите внимание: в отличие от рассмотренного ранее примера, заголовок веб-страницы мы заключили не только в теги <title> </title>, но и поместили в контейнер <head> </head>.

Сохраним программный код в файле под названием Компания.html, и откроем его в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.15.

Рис. 2.15. Название страницы и заголовок первого уровня

Теперь изменим программный код так, чтобы первая после заголовка фраза была написана курсивом, во второй фразе слова пяти лет – подчеркнутым шрифтом, а третья фраза – полужирным шрифтом. Кроме этого, слова Товары и Услуги будут у нас начинаться с новой строки.

Листинг 1.2. Первые действия по форматированию текста

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

Товары:

промышленные товары;

строительные материалы;

одежда, обувь;

детские игрушки.<br>

Услуги:

грузоперевозки;

ответственное хранение;

юридическое консультирование.

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Сохраним выполненные изменения, и откроем страницу в окне Интернет-обозревателя – результат показан на рис. 2.16.

Рис. 2.16. Использование разных стилей шрифта и разделение текста на абзацы

Теперь нам нужно перечень предлагаемых компанией товаров представить в виде маркированного списка. Об этом читайте далее.

Создание маркированного списка

Напомним, что маркированный список задается с помощью тегов <ul> </ul>, причем каждый элемент списка должен помечаться тегами <li> </li>. Теперь доработаем наш программный код так, как показано в листинге 1.3.

Листинг 1.3. Создание маркированного списка

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

Товары:

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul><br>

Услуги:

грузоперевозки;

ответственное хранение;

юридическое консультирование.

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.17.

Рис. 2.17. Создание маркированного списка

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

Создание нумерованного списка

Напомним, что нумерованный список задается с помощью тегов <ol> </ol>, причем каждый элемент списка должен помечаться тегами <li> </li>. Теперь доработаем наш программный код так, как показано в листинге 1.4.

Листинг 1.4. Создание нумерованного списка

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

Товары:

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul><br>

Услуги:

<ol>

<li>грузоперевозки</li>

<li>ответственное хранение</li>

<li>юридическое консультирование</li>

</ol>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.18.

Рис. 2.18. Создание нумерованного списка

На рисунке видно, что между списками получился большой промежуток. Чтобы его уменьшить, можно удалить тег <br>, который следует после маркированного списка.

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

Листинг 1.5. Формирование заголовков второго уровня

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

<h2>Товары:</h2>

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul>

<h2>Услуги:</h2>

<ol>

<li>грузоперевозки</li>

<li>ответственное хранение</li>

<li>юридическое консультирование</li>

</ol>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения и откроем страницу в окне Интернет-обозревателя – результат показан на рис. 2.19.

Рис. 2.19. Формирование заголовков второго уровня

Далее мы рассмотрим, каким образом можно представить данные на веб-странице в табличном виде.

Представление данных в табличном виде

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

Напомним, что для создания таблицы используются теги <table> </table>, <tr> </tr> и <td> </td>. Теперь отредактируем программный код так, как показано в листинге 1.6.

Листинг 1.6. Представление данных в табличном виде

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

<table>

<tr>

<td>Товары</td>

<td>Услуги</td>

</tr>

<tr>

<td>промтовары</td>

<td>грузоперевозки</td>

</tr>

<tr>

<td>стройматериалы</td>

<td>ответственное хранение</td>

</tr>

<tr>

<td>одежда, обувь</td>

<td>консультирование</td>

</tr>

<tr>

<td>детские игрушки</td>

<td>кредитование</td>

</tr>

</table>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.20.

Рис. 2.20. Представление данных в табличном виде

Как видно на рисунке, информация, которая ранее была оформлена в виде маркированного и нумерованного списков, теперь представлена в табличном виде. Перечень товаров содержится в столбце Товары, а перечень услуг – в столбце Услуги.

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

Первая задача решается с помощью атрибута border тега <table>. Что касается выделения заголовков столбцов, то просто напишем их полужирным шрифтом, а сами эти ячейки выделим желтым цветом.

Для этого нам необходимо отредактировать программный код веб-страницы так, как показано в листинге 1.7.

Листинг 1.7. Форматирование таблицы

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

<table border="2">

<tr>

<td bgcolor="yellow"><b>Товары</b></td>

<td bgcolor="yellow"><b>Услуги</b></td>

</tr>

<tr>

<td>промтовары</td>

<td>грузоперевозки</td>

</tr>

<tr>

<td>стройматериалы</td>

<td>ответственное хранение</td>

</tr>

<tr>

<td>одежда, обувь</td>

<td>консультирование</td>

</tr>

<tr>

<td>детские игрушки</td>

<td>кредитование</td>

</tr>

</table>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.21.

Рис. 2.21. Форматирование таблицы

Ширина рамки таблицы задается соответствующим значением атрибута border. В нашем примере ему присвоено значение 2, поэтому толщина рамки таблицы составляет 2 пикселя.

Как видно на рисунке, содержимое ячеек слишком близко прилегает к рамке таблицы, из-за чего таблица смотрится не совсем эргономично. Чтобы решить эту проблему, задействуем атрибут cellpadding тега <table>. Напомним, что с помощью данного атрибута можно задать расстояние от содержимого ячеек до линий рамки таблицы. В нашем примере присвоим атрибуту cellpadding значение 10 – в этом случае расстояние от содержимого ячеек таблицы до ее рамок будет составлять 10 пикселей.

Кроме этого, с помощью атрибута align тега <table> мы центрируем таблицу по середине веб-страницы, а этот же атрибут в применении с тегами <td> позволит нам выровнять содержимое ячеек по центру.

В конечном итоге программный код нашей страницы должен выглядеть так, как показано в листинге 1.8.

Листинг 1.8. Центрирование таблицы и ячеек

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

<table border="2" align="center" cellpadding="10">

<tr>

<td bgcolor="yellow" align="center"><b>Товары</b></td>

<td bgcolor="yellow" align="center"><b>Услуги</b></td>

</tr>

<tr>

<td align="center">промтовары</td>

<td align="center">грузоперевозки</td>

</tr>

<tr>

<td align="center">стройматериалы</td>

<td align="center">ответственное хранение</td>

</tr>

<tr>

<td align="center">одежда, обувь</td>

<td align="center">консультирование</td>

</tr>

<tr>

<td align="center">детские игрушки</td>

<td align="center">кредитование</td>

</tr>

</table>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

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

Рис. 2.22. Центрирование таблицы и содержимого ячеек

Далее вставим в наш документ изображение. Об этом читайте в следующем разделе.

Вставка изображений

Напомним, что для вставки изображений в языке HTML используется тег <img>. Этот тег имеет обязательный атрибут src, необходимый для указания адреса изображения. Если файл с изображением находится в том же каталоге, что и файл веб-страницы, то в качестве адреса изображения достаточно ввести имя его файла. Такой путь к файлу изображения называется относительным. Если же файл изображения находится в другом месте (например, на другом веб-узле), то значением атрибута src будет являться абсолютный путь к файлу (например, http://www.resurs.com/images/file.jpg).

В нашем примере файл изображения будет иметь название Образец.jpg. Доработаем наш программный код так, как показано в листинге 1.9.

Листинг 1.9. Вставка изображения в документ

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

<table border="2" align="center" cellpadding="10">

<tr>

<td bgcolor="yellow" align="center"><b>Товары</b></td>

<td bgcolor="yellow" align="center"><b>Услуги</b></td>

</tr>

<tr>

<td align="center">промтовары</td>

<td align="center">грузоперевозки</td>

</tr>

<tr>

<td align="center">стройматериалы</td>

<td align="center">ответственное хранение</td>

</tr>

<tr>

<td align="center">одежда, обувь</td>

<td align="center">консультирование</td>

</tr>

<tr>

<td align="center">детские игрушки</td>

<td align="center">кредитование</td>

</tr>

</table>

<p><img src="Образец.jpg" align="left"></p>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта. Мы работаем без выходных, с 9-00 до 20-00, в субботу до 19-00, в воскресение до 18-00. Возможен отпуск товаров и получение услуг без осуществления предварительной оплаты.

</body>

</html>

Теперь сохраним выполненные изменения, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.23.

Рис. 2.23. Вставка графического объекта

В нашем примере мы для тега <img> использовали не только атрибут src, но и атрибут align, которому присвоили значение left. Благодаря этому изображение размещено слева таким образом, что идущий после него текст обтекает это изображение справа от него. Отметим, что само изображение в программном коде выделено тегами абзаца <p> </p>.

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

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

Глава 3.
Разработка сайтов в программе CatsHtml

В данной главе мы расскажем о том, как заниматься разработкой и администрированием веб-сайтов с помощью бесплатной программы CatsHtml. Этот HTML-редактор создан отечественными разработчиками, и распространяется бесплатно. Дистрибутив программы можно легко найти в Интернете; к скачиванию предлагается rar-архив объемом чуть более 2 Мб.

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

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

Описание пользовательского интерфейса

После установки программы на компьютер в меню Пуск будет сформирована ее программная папка, включающая в себя две команды: для запуска CatsHtml и для ее деинсталляции. Кроме этого, на рабочем столе появится ярлык запуска программы.

После запуска CatsHtml на экране отображается ее пользовательский интерфейс, который показан на рис. 3.1.

Рис. 3.1. Интерфейс программы CatsHtml

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

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

Самую большую часть интерфейса занимает рабочая область, в которой, собственно, и ведется вся работа по созданию и редактированию веб-страниц. На рис. 3.1 в рабочей области показана предварительная разметка документа, которая формируется автоматически при создании нового веб-документа, а также при запуске программы. Здесь можно увидеть уже знакомые нам теги: <html> </html>, <title> </title>, и др.

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

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

Под инструментальной панелью находится семь вкладок: Общие (данная вкладка открыта на рис. 3.1), Специальные, Эффекты, Таблицы, Формы, Цвета и Буфер обмена. Каждая из этих вкладок содержит набор инструментов, предназначенных для выполнения соответствующих операций и процедур. Более подробно порядок работы на каждой вкладке мы будем рассматривать ниже, по мере знакомства с программой.

Настройка параметров программы

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

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

Рис. 3.2. Настройка программы, вкладка Подсветка

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

На вкладке Стиль (рис. 3.3) осуществляется настройка стиля оформления программного кода веб-страницы. 

Рис. 3.3. Настройка программы, вкладка Стиль

Вы можете выбрать любой фоновый цвет, а также цвет шрифта. Для этого нажмите кнопку Выбрать и выполните соответствующие настройки в открывшемся окне. По умолчанию в качестве фонового цвета предлагается белый, а в качестве цвета шрифта – черный. Сам шрифт выбирается из раскрывающегося списка в поле Шрифт, а его размер – в поле Размер. Чтобы восстановить настройки, используемые в программе по умолчанию, нажмите кнопку Восстановить исходные значения.

Содержимое вкладки Основные показано на рис. 3.4.

Рис. 3.4. Настройка программы, вкладка Основные

На данной вкладке находится несколько параметров, определяющих общую направленность работы программы. Если вы пользуетесь Интернет-обозревателем Mozilla Firefox, рекомендуется установить флажок Включить поддержку стандартов браузера Мозилла (действует на ссылки). Если установить флажок При каждом просмотре странички файл сохраняется в виде копии (иначе страничка постоянно сохраняется автоматически), то при каждом просмотре результатов проделанной работы веб-страница будет сохранена в виде копии. При снятом данном флажке сохранение изменений осуществляется автоматически через определенные интервалы времени.

Флажок Включить быструю систему ввода тегов без серьезных причин снимать не рекомендуется (по умолчанию он установлен).

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

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

Создание, открытие и сохранение веб-страниц

С помощью программы вы можете создавать новые веб-страницы, а также редактировать созданные ранее.

Чтобы создать новую веб-страницу, нужно выполнить команду главного меню Файл ? Создать, вызываемую также нажатием комбинации клавиш Ctrl+N. Также для этого можно воспользоваться кнопкой Новый файл, находящейся в панели инструментов. При выполнении любого из перечисленных действий программа выдает запрос на сохранение изменений в текущем файле (напомним, что программа по умолчанию выполняет автоматическую разметку веб-страницы, поэтому рабочая область при любом запуске программы пустой не будет).

Чтобы открыть созданный ранее файл веб-страницы (например, для редактирования), нужно выполнить команду главного меню Файл ? Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Также для этого можно воспользоваться кнопкой Открыть, находящейся в инструментальной панели (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране открывается окно, в котором нужно указать путь к требуемому файлу и нажать кнопку Открыть. Отметим, что этот файл должен иметь расширение html, htm  или php.

Чтобы сохранить выполненные в текущем файле изменения, нужно выполнить команду главного меню Файл ? Сохранить, которая вызывается также нажатием комбинации клавиш Ctrl+S. Также для этого можно воспользоваться в инструментальной панели кнопкой Сохранить. При первом сохранении файла на экране открывается окно, в котором нужно указать его имя, а также путь для сохранения. Впоследствии при работе с данным файлом такое окно открываться не будет, а просто сохранятся изменения.

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

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

Ввод и редактирование текстового контента веб-страницы

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

Для выполнения основных действий по работе с текстовым контентом предназначены инструменты, которые находятся на вкладке Общие (содержимое данной вкладки показано на рис. 3.1). Рассмотрим порядок использования каждого из них.

С помощью кнопки Шрифт осуществляется переход в режим настройки параметров шрифта. При нажатии данной кнопки на экране отображается окно, которое показано на рис. 3.5.

Рис. 3.5. Настройка параметров шрифта

На данном рисунке представлены настройки шрифта, которые используются в программе по умолчанию. Если вы хотите применить какой-то другой шрифт – выделите в программном коде соответствующий фрагмент текста, после чего нажмите кнопку Шрифт и укажите настройки (тип шрифта, его начертание, размер, и др.). После нажатия в данном окне кнопки ОК выделенный текстовый фрагмент будет заключен в контейнер между тегами <font> </font>. Причем эти теги будут задействованы с соответствующими выполненным настройкам атрибутами, регламентирующими тип шрифта, его цвет и иные параметры (например, как в листинге 2.1).

Листинг 2.1. Фрагмент программного кода с настройками шрифта

<body>

<font size="4" face="Terminal" color="Black" >Этот файл создан для примера </font></body>

В данном случае настройки шрифта применены к тексту Этот файл создан для примера.

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

Далее следуют кнопки, с помощью которых можно включить полужирное, курсивное, подчеркнутое или зачеркнутое начертание шрифта. Если, например, вы хотите отобразить какое-то слово или словосочетание полужирным шрифтом – выделите его, а затем нажмите кнопку Ж. В результате выделенный фрагмент будет заключен в теги <b> </b>, которые, как известно, включают полужирное начертание.

Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом <p class="text"></p>.  При необходимости вы можете вручную добавить атрибут align: в зависимости от значения (left, center или right) он позволяет выровнять параграф соответствующим образом по горизонтали.

Далее следует кнопка, которая называется Перенос строки. Уже судя по отображаемым на ней символам (BR) нетрудно догадаться, что она предназначена для перевода текста на следующую строку, то есть для создания абзаца. При ее нажатии в программный код (а именно – в то его место, где в данный момент находится курсор) будет вставлен тег <br> (фрагмент такого кода показан в листинге 2.2).

Листинг 2.2. Перевод текста на следующую строку

<body>

Этот файл создан для примера.<br>Если нужно, будет сформирован еще один такой файл.

</body>

В данном примере вторая фраза будет начата с новой строки.

Следующие четыре кнопки предназначены для создания неупорядоченных, нумерованных и маркированных списков. При их нажатии в программный код добавляются соответствующие теги (например, при создании неупорядоченного списка – теги <ul> и </ul>, и т.д.).

ПРИМЕЧАНИЕ

С помощью соответствующих кнопок вы можете формировать маркированные списки как с квадратными, так и с круглыми маркерами.

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

•  Мелкий шрифт – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице уменьшенным шрифтом относительно расположенного рядом текста.

• Крупный шрифт – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.

• Нижний индекс и Верхний индекс – эти кнопки предназначены для сдвига выделенного слова или текстового фрагмента соответственно вниз или вверх относительно расположенного рядом текста (иначе говоря, включается нижний или верхний индекс).

• Форматированный текст – данную кнопку удобно использовать для вставки в программный код веб-страницы уже отформатированного текста. У этого текста будут сохранены все пробелы и переносы.

• Текст фиксированной ширины – при нажатии данной кнопки выделенный текст будет отображаться в окне Интернет-обозревателя моноширинным шрифтом.

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

Вставка специальных элементов

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

Рис. 3.6. Вкладка Специальные

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

Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Вставить ссылку. В листинге 2.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово сформирован.

Листинг 2.3. Вставка гиперссылки

<body>

Этот файл создан для примера. Если нужно, будет <a href="http://">сформирован</a> еще один такой файл.

</body>

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

Чтобы вставить в документ изображение, нужно нажать на вкладке Специальные кнопку Вставить картинку, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки на экране отображается окно, в котором нужно указать путь к файлу изображения. В листинге 2.4 показан фрагмент кода со вставкой изображения из файла Образец.html.

Листинг 2.4. Вставка изображения

<body>

Этот файл создан для примера.

<img src="/picture/Образец.jpg">

Если нужно, будет сформирован еще один такой файл.

</body>

Кнопка Вставить пробел предназначена для вставки пробела. Дело в том, что в языке HTML существует следующая особенность: сколько бы раз вы ни нажимали клавишу Пробел, он будет распознавать это как один пробел. Иначе говоря, увеличить расстояние между словами путем многократного нажатия клавиши Пробел у вас не получится: оно все равно будет равняться одному пробелу. Для решения этой проблемы в языке HTML предназначен специальный инструмент  : он равняется одному пробелу. В листинге 2.5 приведен фрагмент программного кода, когда между словами файл и создан, а также будет и сформирован вставлены дополнительные пробелы.

Листинг 2.5. Вставка пробелов

<body>

Этот файл  создан для примера.

Если нужно, будет   сформирован еще один такой файл.

</body>

С помощью кнопки Вставить горизонтальную строку можно включить в состав веб-страницы горизонтальную полосу на всю ширину страницы. При нажатии данной кнопки в программный код (а именно – в то его место, где находится курсор) будет добавлен тег <hr>.

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

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

Вставка дополнительных эффектов

На вкладке Эффекты содержатся кнопки, с помощью которых вы можете вставлять в веб-документ дополнительные эффекты. Одним из самых популярных таких эффектов является бегущая строка.

При нажатии на данной вкладке кнопки Вставить бегущую строку в программный код документа добавляются теги <marquee> </marquee>, специально предназначенные для создания эффекта бегущей строки.

Использовать данную кнопку можно двумя способами. Первый заключается в том, чтобы перед ее нажатием выделить слово или текстовый фрагмент, которые должны отображаться в виде бегущей строки. В этом случае сразу после нажатия кнопки этот фрагмент будет заключен между тегами <marquee> </marquee>. Второй способ заключается в том, что перед нажатием кнопки текст не выделяется. В этом случае в программный код будут просто добавлены теги <marquee> </marquee>, а текст бегущей строки нужно будет ввести между ними.

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

Листинг 2.6. Вставка флеш-объекта

<body>

Этот файл создан для примера.

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="" HEIGHT="" CODEBASE="http://active.macromedia.com/flash6/cabsswflash.cab#version=6,0,0,0">

<PARAM NAME="MOVIE" VALUE="">

<PARAM NAME="QUALITY" VALUE="high">

<PARAM NAME="MENU" VALUE="false">

<PARAM NAME="WMODE" VALUE="transparent">

</OBJECT>

Если нужно, будет сформирован еще один такой файл.

</body>

При необходимости в данный код вы можете внести любые необходимые изменения вручную.

Вставка таблицы в веб-документ

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

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

Рис. 3.7. Инструментарий для формирования таблиц

Как видно на рисунке, данная вкладка содержит четыре кнопки. Рассмотрим назначение каждой из них.

С помощью кнопки Таблица в документ вставляются теги <table> </table>, причем первый из них используется с атрибутом border, имеющим значение 1. Это означает, что создаваемая таблица будет иметь рамку с шириной линий 1 пиксель.

Кнопки Строка и Столбец предназначены соответственно для вставки в документ новых строк и столбцов таблицы. При нажатии кнопки Строка в программный код добавляются теги <tr> </tr>, при нажатии кнопки Столбец – теги <td> </td>. Если перед нажатием любой из этих кнопок выделить текстовый фрагмент, то вставленные теги возьмут этот фрагмент в контейнер. Иначе говоря, если вы выделите в программном коде слова создан для примера, то после нажатия кнопки Строка они будут заключены между тегами – <tr>создан для примера</tr>.

Кнопка Гот. таблица позволяет вставить в документ заготовку готовой таблицы (то есть таблицу, состоящую из одной ячейки). Например, откроем с помощью команды главного меню Файл4Открыть уже знакомый нам тестовый файл Test.html (см. рис. 2.11), выделим в нем слова Эта страница, и нажмем кнопку Гот. таблица. В результате программный код веб-страницы будет выглядеть так, как показано в листинге 2.7.

Листинг 2.7. Вставка заготовки таблицы

<html>

<body>

<table border="1">

<tr><td>

Эта страница

</td></tr>

</table> открывается по ссылке

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S, а после этого выполним команду Файл ? Открыть в броузере. Результат выполненных действий показан на рис. 3.8.

Рис. 3.8. Таблица из одной ячейки

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

Добавление форм ввода данных

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

Для работы с формами в программе предусмотрены инструменты, расположенные на вкладке Формы. Содержимое данной вкладки представлено на рис. 3.9.

Рис. 3.9. Вкладка Формы

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

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

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

Листинг 2.8. Добавление формы и ее элементов

<body>

Этот файл создан для примера. Если нужно, будет сформирован еще один такой файл.

<FORM ACTION="mailto:anonim@rambler.ru?subject=привет" Name="" enctype="text/plain" method="post">

<INPUT TYPE="" SIZE="" NAME="" VALUE="">

<input type="radio" name="" value="" checked>

</FORM>

</body>

Возможности программы предусматривают вставку с помощью соответствующих кнопок следующих элементов формы:

•  поле ввода данных;

• поле ввода нескольких строк;

• переключатель;

• поле ввода пароля;

• кнопка для очистки всех параметров формы от присвоенных им значений;

• кнопка для отправки введенных в параметры формы данных;

• поле для выбора значения из раскрывающегося списка.

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

Цветовое оформление веб-страницы

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

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

Настройка цветового оформления и для шрифта, и для фона осуществляется одинаково. При нажатии любой из кнопок на экране отображается окно, изображенное на рис. 3.10.

Рис. 3.10. Настройка цветового оформления

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

ПРИМЕЧАНИЕ

Управление отображением нижней части окна осуществляется с помощью кнопки Темы. Отметим, что по умолчанию нижняя часть окна не отображается.

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

Что касается выбора темы оформления, то вначале нужно в левой части окна щелчком мыши выбрать название темы, а после этого в правой части указать стиль цветового оформления.

Работа с буфером обмена

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

Рис. 3.11. Вкладка Буфер обмена

Возможности программы предусматривают использование до девяти буферов обмена. Это очень удобно, когда, например, необходимо сразу запомнить для последующего использования несколько блоков разнородной информации. В таком случае одну информацию вы копируете в буфер обмена № 1, другую – в буфер обмена № 2, и т. д. А когда нужно ее куда-то вставить, вы выбираете тот буфер обмена, в котором находится необходимая именно сейчас информация.

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

Чтобы вставить информацию из буфера обмена, нужно выбрать номер этого буфера из раскрывающегося списка и нажать расположенную слева кнопку вставить из буфера №.

Автоматизация некоторых действий с помощью Мастеров

Как мы уже могли убедиться, процесс создания веб-страниц в программе CatsHtml довольно прост: нужно лишь грамотно пользоваться соответствующими инструментами, и при необходимости вручную вносить требуемые корректировки в программный код веб-страницы (для этого, кстати, и пригодятся знания, полученные нами в главе 2 «Основы веб-программирования с помощью языка HTML»).

Однако кроме, этого в программе CatsHtml имеется несколько Мастеров, позволяющих еще более упростить выполнение ряда действий – таких, как вставка изображений, вставка гиперссылок и т. д. Доступ к Мастерам осуществляется с помощью соответствующих команд меню Инструменты. Далее мы рассмотрим некоторые из них.

Мастер вставки картинки

Для добавления на веб-страницу графических изображений полезно использовать специальный механизм, вызываемый с помощью команды главного меню Инструменты ? Мастер вставки картинки. При активизации данной команды на экране отображается окно, которое показано на рис. 3.12.

Рис. 3.12. Мастер вставки графических изображений

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

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

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

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

В нижней части окна с помощью переключателя Указывать путь нужно определить, какой путь должен быть указан – Относительный или Абсолютный. О том, что такое относительный и абсолютный путь, мы говорили ранее – в разделе «Форматирование текста, создание таблиц и вставка изображений».

Чтобы вставить изображение в документ в соответствии с установленными настройками, нажмите в окне Мастера кнопку Вставить. Кнопка Отмена предназначена для выхода из данного режима без вставки графического объекта в документ.

Мастер свойств веб-страницы

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

Рис. 3.13. Мастер свойств веб-страницы

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

Например, чтобы озаглавить веб-страницу, вам не нужно вручную набирать теги <title> </title> и писать между ними название страницы. Достаточно в окне Мастера установить соответствующий флажок, и в расположенном справа поле с клавиатуры ввести текст заголовка.

Чтобы использовать какое-то изображение в качестве фонового оформления, установите флажок Фон странички и нажмите распложенную справа кнопку Выбрать. В результате на экране откроется окно, в котором нужно будет по обычным правилам Windows-приложений указать путь к требуемому файлу. Учтите, что программа поддерживает работу с графическими объектами, сохраненными только в файлах форматов bmp, gif и jpg.

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

После нажатия в данном окне кнопки Вставить в программный код веб-страницы будут автоматически внесены соответствующие изменения. С помощью кнопки Отмена осуществляется выход из данного режима без сохранения и применения выполненных изменений.

Мастер создания гиперссылок

О важности такого элемента, как гиперссылка, мы уже неоднократно говорили ранее. Также мы уже знаем, как в программе CatsHtml осуществляется вставка гиперссылок с помощью соответствующей кнопки на вкладке Специальные (см. рис. 3.6). Однако в программе реализована возможность вставки гиперссылки и другим методом – с помощью соответствующего Мастера, доступ к которому осуществляется с помощью команды главного меню Инструменты ? Мастер создания ссылки.

При активизации данной команды на экране отображается окно, изображенное на рис. 3.14.

Рис. 3.14. Мастер создания ссылок

Возможности программы предусматривают создание трех типов гиперссылок:

• на файл, находящийся на диске;

• на страницу в Интернете;

• на электронный ящик.

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

После этого в области Свойства следует указать свойства создаваемой гиперссылки. В поле Ссылка нужно указать адрес гиперссылки. Если вы хотите сослаться на файл, который находится на жестком диске, то нажмите кнопку Выбрать и в открывшемся окне укажите путь к этому файлу. Этот путь полностью отобразится в поле Ссылка.

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

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

Вы можете сделать так, что гиперссылка будет открываться либо в текущем окне Интернет-обозревателя, либо в новом окне, которое отобразится автоматически. Для этого нужно установить переключатель При нажатии на ссылку документ откроется в положение соответственно В этом же окне или В новом окне. Отметим, что данный переключатель доступен только в том случае, когда переключатель Виды ссылок установлен в положение Ссылка на страничку на диске или Ссылка на страничку в инете (очевидно, что для ссылок на электронный адрес параметр При нажатии на ссылку документ откроется неактуален).

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

Мастер создания опроса

Как мы уже отмечали ранее, на многих современных сайтах можно увидеть опросы для посетителей, посвященные самым разным темам. Одного интересует мнение посетителей о работе сайта, другой желает получить отзывы о работе своей компании, третий проводит опрос по какой-то общественно значимой теме, и т. д.

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

Чтобы приступить к созданию опроса, выполните команду главного меню Инструменты ? Мастер создания опроса. При активизации данной команды на экране откроется окно, изображенное на рис. 3.15.

Рис. 3.15. Мастер создания опроса

Возможности программы предусматривают создание опросов в двух вариантах: понравился ли посетителю сайт и его мнение по какому-либо поводу. Выбор варианта осуществляется нажатием соответствующей кнопки, расположенной слева вверху окна. Рассмотрим оба варианта.

Чтобы узнать, насколько понравился посетителю ваш сайт, нажмите слева вверху окна кнопку Вам понравился сайт?. При этом содержимое окна будет выглядеть так, как показано на рис. 3.15, а справа вверху демонстрируется образец того, как будет выглядеть опрос.

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

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

При желании вы можете оформить опрос в виде таблицы – для этого достаточно установить флажок Оформление в виде таблицы.

Для отправки ответа на вопрос посетитель должен будет нажать на кнопку, название которой вы можете указать в поле Название кнопки «отправить».

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

Чтобы создать другой вариант опроса, нажмите слева вверху окна кнопку Ваше мнение по поводу. В этом случае окно Мастера примет вид, как показано на рис. 3.16.

Рис. 3.16. Мастер создания опроса (разновидность)

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

Как и при первом варианте опроса, вначале в поле Куда отправлять результаты нужно ввести электронный адрес, на который вам автоматически будут отправляться результаты опроса. После этого в поле Тема письма (которое к вам придет) можно с клавиатуры ввести тему письма с результатами опроса, которая будет формироваться автоматически при отправке вам письма. Это позволит вам безошибочно выделить письмо с результатами опроса среди всей прочей электронной корреспонденции.

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

В поле Метод переноса строк вы можете указать, каким образом должен выполняться перенос строк в поле текстового сообщения. Возможен выбор одного из перечисленных ниже вариантов.

•  Перенос слов не происходит – в данном случае строки переноситься не будут, и весь вводимый текст будет отображаться в одной строке.

• Перенос отображается, но в письме его не будет – при выборе данного значения строки в поле ввода текстового сообщения будут переноситься по мере его заполнения посетителем сайта, но в полученном вами письме перенос осуществляться не будет.

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

В поле Отправитель вы можете ввести название поля, в котором посетитель сайта будет оставлять информацию о себе. В поле Длина можно указать максимальную длину значения данного поля (по умолчанию предлагается ограничить его 20 символами).

Если вы не желаете вставлять в форму поле Отправитель, снимите флажок Пункт «Отправитель». То же самое касается и кнопки Очистить, которая в форме опроса предназначена для быстрой очистки всех его параметров: если вы не хотите вставлять эту кнопку в форму опроса, снимите флажок Кнопка «Очистить». По умолчанию оба эти флажка установлены.

При желании вы можете оформить опрос в виде таблицы – для этого достаточно установить флажок Оформление в виде таблицы.

Для отправки ответа на вопрос посетитель должен будет нажать на кнопку, название которой вы можете указать в поле Название кнопки «отправить». Аналогичным образом в соответствующем поле можно ввести произвольное название кнопки Очистить.

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

Мастер создания таблиц

О том, что для создания таблиц предназначены специальные теги, которые могут использоваться совместно с соответствующими атрибутами, мы уже знаем. Также знаем и о том, что в программе CatsHtml на вкладке Таблицы имеются инструменты, позволяющие автоматизировать процесс создания таблиц. Но кроме этого создавать таблицы вы можете с помощью специально предназначенного Мастера, доступ к которому осуществляется с помощью команды главного меню Инструменты ? Мастер создания таблиц.

При активизации данной команды на экране отображается окно Мастера, изображенное на рис. 3.17.

Рис. 3.17. Мастер создания таблиц

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

В полях Количество строк и Количество колонок с клавиатуры вводится соответственно число строк и столбцов таблицы. После этого с помощью параметра Выравнивание задается выравнивание таблицы на странице. Требуемый вариант выбирается из раскрывающегося списка; возможен выбор одного из трех значений – center (данный способ выравнивания предлагается использовать по умолчанию), left или right. Как нетрудно догадаться, в первом случае таблица будет выровнена по центру, во втором – по левому краю, а в третьем – по правому краю.

В поле Толщина рамки указывается толщина рамки в пикселях, а в расположенных ниже полях – высота и длина таблицы.

Завершается процесс создания таблицы нажатием в данном окне кнопки Вставить. Кнопка Отмена предназначена для выхода из данного режима без сохранения выполненных изменений.

Глава 4.
Создание и администрирование сайтов в программе HtmlPad

В данной главе мы рассмотрим еще одну программу, позволяющую быстро создавать и администрировать сайты и веб-страницы. Она называется HtmlPad, создана российскими разработчиками и, что немаловажно, распространяется бесплатно. Дистрибутив программы объемом чуть более 4 Мб можно легко найти в Интернете.

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

Назначение и функциональные возможности программы

Программа HtmlPad адресована веб-разработчикам и веб-администраторам. Ее характерной особенностью является то, что она обладает простым и понятным пользовательским интерфейсом, а также очевидным инструментарием. Благодаря этому продукт отлично подходит для начинающих веб-разработчиков и веб-администраторов.

Основные функциональные возможности программы можно сформулировать следующим образом.

• Формирование и редактирование любых веб-страниц со вставкой всех необходимых элементов (текст, графические объекты, таблицы, анимационные эффекты, и др.).

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

• Открытие файла с автоматической перекодировкой для внесения и последующего сохранения необходимых изменений.

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

• Ведение разнообразной работы с текстовыми данными.

• Автоматические формирование и ведение журнала недавно открываемых документов, что позволяет быстро вернуться к работе с любым из них.

• Быстрый и удобный поиск данных в соответствии с предварительно заданными параметрами.

• Использование разных вариантов представлений текущего документа.

• Формирование и администрирование веб-страниц с помощью технологий не только языка HTML, но и языка РНР, а также с применением Java-технологий.

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

Пользовательский интерфейс и инструментарий программы

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

Рис. 4.1. Интерфейс программы HtmlPad

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

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

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

Справа от инструментальной панели находится панель со вкладками. Каждая вкладка содержит инструменты, предназначенные для выполнения соответствующих действий с текущим документом. Отметим, что такой подход практикуется во многих HTML-редакторах (вспомним хотя бы программу CatsHtml, с которой мы познакомились в предыдущей главе).

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

Кстати

Если в данный момент открыто несколько документов в разных рабочих окнах, то для выбора этих документов используйте соответствующие вкладки, которые находятся внизу интерфейса. Поскольку на рис. 4.1 открыто только одно рабочее окно, то и вкладка тоже одна – она называется Document.html (по имени файла документа).

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

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

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

Настройка программы и подготовка ее к работе

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

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

Рис. 4.2. Настойка параметров программы

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

В разделе Запуск, содержимое которого показано на рис. 4.2, осуществляется настройка параметров запуска программы. Иначе говоря, здесь вы можете определить, каким образом программа должна вести себя сразу после ее запуска. Например, она может автоматически сразу после запуска создать файл того типа, который вы укажете в настройках. Для этого нужно установить флажок Создавать новый файл указанного типа – в результате станет доступным для редактирования расположенный ниже переключатель. Если он установлен в положение Пустой файл, то в находящемся справа раскрывающемся списке нужно выбрать тип файла, который будет создан (например, HTML-документ, текстовый файл, XML-документ, Java-приложение, и т.д.). Отметим, что по умолчанию программа после запуска автоматически создает пустой HTML-документ (на рис. 4.1 этот документ имеет название Document1.html).

Однако программа может создать после запуска не только пустой документ указанного типа, но и документ на основании шаблона. Дело в том, что в программе имеется набор шаблонов для создания разных документов. Чтобы документ на основании подходящего шаблона создавался автоматически сразу после запуска программы, нужно установить переключатель в положение По шаблону, и в расположенном справа раскрывающемся списке выбрать требуемый шаблон (Стандартный документ HTML, Словарь терминов, Вопрос-ответ, Форма отправки сообщения, Пустой скрипт РНР, и др.). Если, например, вы выберете в данном поле значение Стандартный документ HTML, то после запуска программы в ее рабочем окне будет автоматически сгенерирован следующий код (рис. 4.3).

Рис. 4.3. Создание стандартного HTML-документа

В нижней части раздела Запуск содержится три флажка: Активизировать диалог создания файла, Активизировать диалог открытия файла и Активизировать диалог советов дня (см. рис. 4.2). Принцип их действия одинаков: если флажок установлен, то при запуске программы на экране отобразится соответствующее окно. Это позволит вам сразу приступить к созданию нового файла, открытию существующего файла либо к просмотре полезных советов. По умолчанию все три флажка сняты.

Раздел Главное окно предназначен для настройки главного окна программы. Он включает в себя два подраздела – Элементы и Панель файлов.

Подраздел Элементы содержит перечисленные ниже флажки.

•  Стандартная панель кнопок.

• Служебная панель вкладышей.

• Панель вкладышей с кнопками быстрой вставки.

• Панель вкладышей открытых файлов.

• Панель состояния.

Эти флажки предназначены для управления соответствующими элементами интерфейса программы. По умолчанию установлены все флажки.

Содержимое подраздела Панель файлов показано на рис. 4.4.

Рис. 4.4. Настройка программы, подраздел «Панель файлов»

В данном подразделе осуществляется настройка отображения вкладок, которые появляются внизу интерфейса при открытии файлов (на рис. 4.3 имеется одна такая вкладка, она называется document1.html). В поле Месторасположение панели из раскрывающегося списка выбирается место, где будут отображаться названия вкладок. Возможен выбор одного из двух вариантов: Снизу (над статус строкой) или Сверху (под панелью кнопок). По умолчанию в данном поле выбрано значение Снизу (над статус строкой).

ПРИМЕЧАНИЕ

В программе Html.pad статус строкой называется элемент, известный больше под названием «строка состояния» и находящийся вдоль нижнего края интерфейса.

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

Рис. 4.5. Настройка программы, раздел «Диалоги»

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

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

Если установлен флажок Использовать стандартный диалог Windows, то в качестве окна открытия файлов будет предлагаться стандартное окно, используемое в системе Windows. По умолчанию данный флажок установлен.

В области настроек Диалог сохранения файлов осуществляется настройка окна сохранения файлов. Это делается таким же образом, как и настройка окна открытия файлов.

В разделе Файлы, содержимое которого изображено на рис. 4.6, осуществляется настройка работы с файлами и документами.

Рис. 4.6. Настройка работы с файлами и документами

В программе реализована возможность автоматического ведения журнала документов, с которыми велась работа. Это позволяет при необходимости быстро вернуться к работе с любым из этих документов. Журнал ведется в подменю Файл ? Недавние файлы, и по умолчанию может включать в себя до 10 позиций. Однако вы можете изменить количество документов, включаемых в журнал: для этого нужно в разделе настройки Файлы ввести требуемое значение в поле Количество файлов в журнале. Если в данном разделе установлен флажок Очищать журнал при запуске программы, то после каждого запуска программы этот журнал будет пустым (все позиции из него будут удалены автоматически при запуске программы). По умолчанию данный параметр отключен.

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

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

Как видно на рис. 4.6, раздел Файлы содержит один подраздел – Просмотр. В данном подразделе выполняется настройка режима просмотра документов в Интернет-обозревателе. Флажки При просмотре во встроенном в программу браузере и При просмотре во внешнем браузере находятся в трех областях – Сохранять документ, Открывать временный HTML-файл и Имитация работы сервера. Путем установки/снятия данных флажков вы указываете, какие действия должны выполняться при просмотре текущего документа в окне Интернет-обозревателя.

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

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

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

Создание, открытие и сохранение документов

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

Чтобы создать новый документ, нужно выполнить команду главного меню Файл ? Создать, которая вызывается также нажатием комбинации клавиш Ctrl+N. Также для этого можно воспользоваться кнопкой Создать новый файл, которая находится в инструментальной панели (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране отображается окно открытия файла, которое представлено на рис. 4.7.

Рис. 4.7. Создание нового документа

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

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

Чтобы открыть созданный ранее документ для просмотра и редактирования, нужно в главном меню программы выполнить команду Файл ? Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Также для этого можно воспользоваться кнопкой Открыть файл, которая находится в инструментальной панели. При выполнении любого из перечисленных действий на экране отображается окно, в котором нужно щелчком мыши выделить открываемый файл и нажать кнопку Открыть.

По мере работы над документом рекомендуется периодически сохранять вносимые в него изменения. Это позволит избежать потери данных при возникновении нештатной ситуации (программный или аппаратный сбой, внезапное отключение электроэнергии, и т.д.). Для сохранения изменений в документе предназначена команда главного меню Файл ? Сохранить, вызываемая также нажатием комбинации клавиш Ctrl+S. Кроме этого, для сохранения изменений вы можете использовать кнопку Сохранить файл, которая находится в инструментальной панели.

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

Если вы работаете с несколькими документами, то можно одновременно сохранять изменения сразу во всех этих файлах. Для этого в главном меню предназначена команда Файл ? Сохранить все. Также можно воспользоваться кнопкой Сохранить все файлы, которая находится в инструментальной панели.

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

Поиск и замена данных

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

Чтобы приступить к поиску данных, нужно в главном меню программы выполнить команду Поиск ? Найти, которая вызывается также нажатием комбинации клавиш Ctrl+F. Также можно воспользоваться кнопкой Найти в тексте, которая расположена в панели инструментов (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающей подсказки при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране отображается окно настройки параметров поиска, изображенное на рис. 4.8.

Рис. 4.8. Настройка параметров поиска

В данном окне в поле Образец нужно ввести фрагмент текста или программного кода, который требуется найти. Например, на рис. ? .8 в данном поле введено значение <table>, следовательно – данный тег будет являться объектом поиска.

Под полем Образец с помощью соответствующих параметров можно выполнить дополнительную настройку поиска. Если установлен флажок Только слово целиком, то объектом поиска будет являться только целое слово или текстовый фрагмент, введенный в поле Образец. Иначе говоря, если в поле Образец введено значение Автомобиль, то такое слова, как Авто, при установленном данном флажке в процессе поиска будут игнорироваться.

Если необходимо, чтобы в процессе поиска учитывался регистр символов (прописные или строчные), то установите флажок С учетом регистра. В этом случае, если в поле Образец введено слово Авто, то слово авто при поиске будет проигнорировано.

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

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

Кнопка Закрыть предназначена для выхода из данного режима без выполнения поиска.

Чтобы повторить поиск в соответствии с установленными ранее параметрами, выполните команды главного меню Поиск ? Найти далее либо нажмите клавишу F3.

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

Для перехода в режим настройки параметров замены выполните команду главного меню Поиск ? Заменить либо нажмите комбинацию клавиш Ctrl+H. Также для этого можно воспользоваться кнопкой Заменить в тексте, которая находится в инструментальной панели. При выполнении любого из перечисленных действий на экране отобразится окно, изображенное на рис. ? .9.

Рис. ? .9. Настройка параметров замены

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

Чтобы выполнить замену в соответствии с установленными параметрами, нужно нажать в данном окне кнопку Заменить (в этом случае будет найден и заменен первый результат поиска) или Заменить все (в этом случае будут одновременно найдены и заменены все объекты поиска).

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

ПРИМЕЧАНИЕ

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

Чтобы быстро перейти к строке, выполните команду главного меню Поиск ? Перейти к строке, либо нажмите комбинацию клавиш Ctrl+G. При этом на экране откроется окно, которое показано на рис. ? .10.

Рис. ? .10. Переход к строке с определенным номером

В данном окне в поле Строка нужно с клавиатуры ввести номер строки, к которой вы намереваетесь перейти, и нажать кнопку ОК либо клавишу Enter.

Описание режимов работы

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

В данном разделе мы рассмотрим режимы работы, которые являются наиболее востребованными у начинающих веб-разработчиков и веб-администраторов.

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

По умолчанию при запуске программы открывается вкладка Html/Общие (см. рис. ? .1). Именно здесь обычно начинается создание стандартной HTML-страницы. Чтобы добавить в программный код необходимые теги, атрибуты и прочие элементы, достаточно нажать соответствующие кнопки инструментальной панели. Например, если мы поочередно нажмем первые четыре кнопки панели на вкладке Html/Общие, то программный код в рабочем окне будет выглядеть так, как показано на рис. ? .11.

Рис. ? .11. Пример формирования программного кода

Отметим, что в данном случае после нажатия каждой кнопки нажималась клавиша Enter – в противном случае все теги были бы выстроены поочередно в одной строке.

Теги, которые представлены на рис. ? .11, нам хорошо знакомы. Только порядок их следования несколько нелогичен (поскольку, напомним, мы просто нажали подряд первые четыре кнопки инструментальной панели). Очевидно, что теги <title> </title> необходимо поместить между тегами <head> </head>.

Теперь отредактируем наш программный код, чтобы придать ему логичный вид, присвоим странице название, и введем какой-нибудь текстовый контент. В результате программный код будет выглядеть так, как показано на рис. ? .12.

Рис. ? .12. Доработанный программный код

Как видно на рисунке, наша страница состоит из трех элементов: название страницы, заголовок первого уровня, а также основной текст. Теперь просмотрим результат (рис. 4.13), воспользовавшись командой главного меню Вид ? Просмотр в браузере (эта команда вызывается также нажатием клавиши F11). 

Рис. 4.13. Пример страницы, созданной в программе HtmlPad

Отметим, что вы можете просматривать страницы не только в окне установленного на компьютере Интернет-обозревателя, но и с помощью встроенного в программу браузера. Для этого используйте команду главного меню Вид ? Редактор/Просмотр или просто нажмите клавишу F12.

На вкладке Html/Общие имеется возможность вставки в документ еще целого ряда полезных элементов. Например, с помощью соответствующих кнопок вы можете вставить таблицу, а также добавлять в нее строки и столбцы. Также вы можете создавать формы для отправки данных, и включать в них переключатели, флажки, кнопки и иные инструменты.

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

Напомним, что в первую очередь необходимо создать саму форму – в противном случае добавление флажков, кнопок и иных инструментов не будет иметь никакого смысла. Чтобы добавить форму, после слова примера нажмем Enter (на этой новой строке и начнется код формы) и нажмем в инструментальной панели данной вкладки кнопку Форма передачи параметров. В результате программный код страницы будет выглядеть так, как показано на рис. 4.14.

Рис. 4.14. Добавление формы на веб-страницу

Обратите внимание – на данном рисунке включена нумерация строк. Мы это сделали для того, чтобы в дальнейшем было проще ориентироваться в программном коде.

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

Рис. 4.15. Ввод кода для добавления в форму текстового поля

Теперь в конце строки 09 нажимаем Enter, и в новой строке добавляем код флажка, нажав в инструментальной панели кнопку Флажок (на ней изображен характерный символ). Затем в конце строки 10 нажимаем Enter, и в новой строке добавляем код раскрывающегося списка, нажав в инструментальной панели кнопку Выпадающий список. После этого в конце строки 13 нажимаем Enter, и в новой строке добавляем код кнопки отправки данных, нажав в инструментальной панели кнопку Кнопка передачи параметров. Затем в конце строки 14 нажимаем Enter и в новой строке добавляем программный код кнопки очистки всех параметров формы, нажав в инструментальной панели кнопку Кнопка очистки формы. После выполнения всех перечисленных действий программный код нашей страницы должен выглядеть так, как показано на рис. 4.16.

Рис. 4.16. Добавление в форму нескольких элементов

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить либо нажатием комбинации клавиш Ctrl+S, и просмотрим полученный результат в окне Интернет-обозревателя (рис. 4.17), выполнив для этого команду главного меню Вид ? Просмотр в браузере. 

Рис. 4.17. Вид страницы с добавленными элементами

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

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

Работа с текстовым контентом

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

Рис. 4.18. Вкладка HTML/Текст

Даже не читая названия кнопок инструментальной панели (напомним, что они появляются во всплывающих подсказках) нетрудно догадаться, для чего предназначены многие из них. Например, первая слева кнопка используется для вставки горизонтальной линии, кнопка рядом с ней – для вставки разрыва и перехода на новую строку (то есть для формирования абзацев), следующая кнопка предназначена для вставки пробела, и т. д. Также вы можете применять полужирное, курсивное и подчеркнутое начертания, выравнивать текст, вставлять гиперссылки, и т. д. Отметим, что применение способов начертания, а также некоторых других приемов оформления и форматирования осуществляется к предварительно выделенному фрагменту. Например, если вы хотите в программном коде, который представлен на рис. 4.16, включить полужирное начертание слова страница,  то вначале нужно выделить его, а затем в инструментальной панели нажать кнопку Жирность (на ней изображен символ В). В результате строка 07 в программном коде будет выглядеть так: Эта <b>страница</b> создана для примера.

Для выделения параграфов в инструментальной панели данной вкладки предназначена кнопка Новый параграф. При ее нажатии в программный код веб-страницы добавляются теги <p> </p>. Если перед нажатием данной кнопки был выделен какой-либо текстовый фрагмент, то он будет помещен между этими тегами. Если же текст предварительно не выделялся, то теги появятся в том месте, где находится курсор.

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

•  Расположить по левому краю – при нажатии данной кнопки текст выравнивается по левому краю, а в программный код добавляется фрагмент <div align="left"></div>.

• Расположить по центру – с помощью данной кнопки текст можно выровнять по центру, при этом в программный код добавляется фрагмент <div align="center"></div>.

• Расположить по правому краю – при нажатии данной кнопки текст выравнивается по правому краю, при этом в программный код добавляется фрагмент <div align="right"></div>.

• Растянуть по ширине – в данном случае текст будет растянут по всей ширине веб-страницы, при этом в программный код добавляется фрагмент <div align="justify"></div>.

Как мы уже отмечали ранее, в языке программирования HTML предусмотрено использование шести уровней заголовков. Чтобы создать заголовок требуемого уровня, используйте в инструментальной панели данной вкладки кнопку Заголовок. При нажатии данной кнопки в программный код веб-страницы добавляются теги <h> </h>. Причем если перед нажатием кнопки вы выделите какой-либо текстовый фрагмент, то он будет заключен между этими тегами. В противном случае теги появятся  в том месте, где находится курсор. Обратите внимание: в тегах не указан уровень заголовка – его вы должны проставить его самостоятельно.

Для формирования нумерованных списков в инструментальной панели вкладки HTML/Текст предназначена кнопка Нумерованный список. При ее нажатии в программный код добавляются теги <ol> </ol>. Чтобы добавить в список новую позицию, используйте кнопку Новый пункт списка, при нажатии которой в программный код добавляются теги <li> </li>. На рис. 4.19 показан программный код, в котором сформирован нумерованный список, состоящий из трех позиций. Обратите внимание – сами названия позиций (Машины, Механизмы и Оборудование) нужно ввести самостоятельно.

Рис. 4.19. Программный код с формированием нумерованного списка

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S, и просмотрим результат в окне Интернет-обозревателя (рис. 4.20).

Рис. 4.20. Нумерованный список

Для формирования маркированных списков в инструментальной панели вкладки HTML/Текст предназначена кнопка Маркированный список. При ее нажатии в программный код добавляются теги <ul> </ul>. Чтобы добавить в список новую позицию, используйте кнопку Новый пункт списка, при нажатии которой в программный код добавляются теги <li> </li>. На рис. 4.21 показан программный код, в котором сформирован маркированный список, состоящий из четырех позиций. Как и в случае с нумерованным списком, сами названия позиций нужно ввести самостоятельно.

Рис. 4.21. Программный код с формированием маркированного списка

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S, и просмотрим результат в окне Интернет-обозревателя (рис. 4.22).

Рис. 4.22. Маркированный список

В конце инструментальной панели находится еще пять кнопок, которые перечислены ниже.

•  Новый шрифт – с помощью данной кнопки в программный код добавляется фрагмент <font face="« size=»"></font>. Путем внесения в него соответствующих данных можно установить применение шрифта, отличного от того, которым отображается соседний текст.

• Уменьшить размер шрифта – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице уменьшенным шрифтом относительно расположенного рядом текста.

• Увеличить размер шрифта – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.

• Нижний регистр – эта кнопка предназначена для сдвига выделенного слова или текстового фрагмента вниз относительно расположенного рядом текста (иначе говоря, включается нижний индекс).

• Верхний регистр – эта кнопка предназначена для сдвига выделенного слова или текстового фрагмента вверх относительно расположенного рядом текста (иначе говоря, включается верхний индекс).

С помощью кнопки Выравнивание объектов по центру вы можете выровнять любой объект (графическое изображение, текстовый блок, и др.) по середине страницы. При нажатии данной кнопки в программный код веб-страницы добавляются теги <center> </center>. Если перед нажатием кнопки был выделен фрагмент кода, то он будет заключен между этими тегами. В противном случае теги будут помещены в то место, где находится курсор.

Кнопка Пробел (она является третьей слева, на ней изображен характерный символ) предназначена для вставки пробела. Напомним, что при программировании на языке HTML, сколько бы раз вы ни нажимали клавишу Пробел, он будет распознавать это как один пробел. Другими словами, увеличить расстояние путем многократного нажатия клавиши Пробел у вас не получится: оно все равно будет равняться одному пробелу. Для решения этой проблемы в языке HTML предназначен специальный инструмент  : он равняется одному пробелу. В листинге 3.1 приведен фрагмент программного кода, когда между словами эта и страница, а также создана и для вставлены дополнительные пробелы.

Листинг 3.1. Вставка пробелов

<body>

<h1>Итак, приступаем</h1>

Эта   страница создана    для примера<br>

</body>

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

Для вставки комментария в инструментальной панели данной вкладки предназначена кнопка Комментарий HTML. При ее нажатии в программный код добавляется фрагмент <!–>, и комментарий следует писать после знака !. В листинге 3.2 показан код с комментарием относительно того, как мы учились вставлять дополнительные пробелы.

Листинг 3.2. Вставка комментариев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта   страница создана    для примера<br>

<! В предыдущей строке показано, как вставлять дополнительные пробелы>

</body>

Если вы сохраните изменения и просмотрите страницу в окне Интернет-обозревателя – вы увидите, что комментарии отображаться не будут.

Вставка гиперссылок и графических изображений

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

Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Ссылка на документ. В листинге 3.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово страница.

Листинг 3.3. Вставка гиперссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта <a href="">страница</a> создана для примера<br>

</body>

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

Чтобы вставить в документ изображение, нужно нажать на данной вкладке кнопку Рисунок, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки в программный код добавляется соответствующий фрагмент (листинг 3.4).

Листинг 3.4. Вставка изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<img src="" width="" height="" border="0">

</body>

В данном листинге остается лишь указать путь к файлу рисунка или просто имя этого рисунка (если он находится в том же каталоге, что и файл данной веб-страницы), а также задать при необходимости его дополнительные параметры. В листинге 3.5 представлен программный код, согласно которому на веб-странице будет отображаться рисунок с именем Образец.jpg размером 150x150 пикселей, и заключенный в рамку толщиной 10 пикселей.

Листинг 3.5. Вставка изображения с заданными параметрами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<img src="Образец.jpg" width="150" height="150" border="10">

</body>

Результат вставки изображения в соответствии с этим программным кодом представлен на рис. 4.23. 

Рис. 4.23. Вставка изображения с заданными параметрами

Подобным образом можно вставлять в документ любые графические объекты, при необходимости корректируя в программном коде их размеры и наличие рамки.

Вставка объектов JavaScript

В программе реализована возможность работы с объектами JavaScript. Соответствующие инструменты расположены на вкладке JavaScript, содержимое которой представлено на рис. 4.24.

Рис. 4.24. Содержимое вкладки JavaScript

Принцип действия здесь примерно такой же, как и на остальных вкладках программы: после нажатия кнопки инструментальной панели в программный код веб-страницы добавляется соответствующий фрагмент, который при необходимости можно дополнить и конкретизировать. Вы можете вставлять следующие объекты JavaScript: код JavaScript, тело функции, название функции, текст и переменную. Например, после нажатия в инструментальной панели кнопки Вставка кода JavaScript в программный код добавляется фрагмент <script language="javascript"> </script>, после нажатия кнопки Вставка текста – фрагмент document.write("");, после нажатия кнопки Вставка переменной – фрагмент document.write();, и т. д.

Применение PHP-технологий в программе HtmlPad

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

Характерной особенностью языка РНР является то, что он был создан и разработан специально для написания web-приложений (сценариев), исполняющихся на удаленном веб-сервере. Несомненное преимущество РНР по сравнению с тем же JavaScript состоит в том, что скрипты, написанные на языке РНР, выполняются на стороне удаленного сервера. Следовательно, их работоспособность и скорость исполнения не зависит от скоростных характеристик и прочих аппаратных особенностей компьютера, а также от используемого Интернет-обозревателя. Отметим, что зачастую посетители сайтов не могут определить, что они видят на экране – статичный HTML-код или динамичную информацию, полученную в результате выполнения РНР-скрипта.

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

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

Листинг 3.6. Вставка в программный код фрагмента, обозначающего код РНР

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<?php

?>

</body>

Как видно в листинге, вставленный фрагмент представляет собой контейнер, внутри которого должен находиться собственно РНР-код. Этот код формируется по обычным правилам работы в программе HtmlPad: с помощью кнопок инструментальной панели в программный код добавляются соответствующие фрагменты, которые при необходимости нужно дополнить и конкретизировать (ввести функцию, указать исполняемый файл, и т.д.).

Возможности РНР предусматривают использование SQL-данных. Например, чтобы соединиться с хостом SQL, нужно в инструментальной панели нажать кнопку Соединение с хостом SQL. При этом в программный код веб-страницы будет добавлен соответствующий фрагмент (листинг 3.7).

Листинг 3.7. Настройка соединения с хостом SQL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<?php

$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");

?>

</body>

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

Листинг 3.8. Настройка выбора базы данных SQL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<?php

$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");

mysql_select_db ("my_database") or die ("Нет соединения с базой");

?>

</body>

Очевидно, что приведенные в листингах 3.7 и 3.8 РНР-коды необходимо дополнить (указать данные для доступа, и др.). Если соединение с хостом наладить по каким-то причинам не удалось, то пользователь получит информационное сообщение Нет соединения с хостом, а при отсутствии соединения с базой на экране отобразится сообщение Нет соединения с базой.

Чтобы настроить соединение с SQL-таблицей, нужно в инструментальной панели нажать кнопку Соединение с таблицей SQL. В результате в программный код будет добавлен соответствующий фрагмент (листинг 3.9).

Листинг 3.9. Настройка соединения с таблицей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<?php

$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");

mysql_select_db ("my_database") or die ("Нет соединения с базой");

$query = "SELECT * FROM table";

$result = mysql_query ($query) or die ("Нет такой таблицы");

?>

</body>

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

В процессе работы может возникать необходимость вывода таблицы базы данных на страницу. В программе HtmlPad реализована возможность автоматического формирования и вставки соответствующего кода. Для этого в инструментальной панели предназначена кнопка Вывод таблицы БД на страницу. Установим в нашем примере курсор на новую строку, и нажмем данную кнопку – в результате код страницы будет выглядеть так, как показано в листинге 3.10.

Листинг 3.10. Настройка вывода таблицы базы данных на страницу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<?php

$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");

mysql_select_db ("my_database") or die ("Нет соединения с базой");

$query = "SELECT * FROM table";

$result = mysql_query ($query) or die ("Нет такой таблицы");

echo "<table border=1>";

while($data=mysql_fetch_row($result))

{

echo "<tr><td>",

implode ("</td><td>", $data), "</td></tr>";

}

echo "</table>";

?>

</body>

Очевидно, что добавленный фрагмент также можно дополнить и конкретизировать – например, изменить толщину рамки таблицы, и др.

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

Листинг 3.11. Комментарии к фрагментам РНР-кода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>Учимся работать в программе HtmlPad</title>

</head>

<body>

<h1>Итак, приступаем</h1>

Эта страница создана для примера<br>

<?php

/* Настраиваем соединение с хостом */

$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");

/* Настраиваем соединение с базой */

mysql_select_db ("my_database") or die ("Нет соединения с базой");

/* Настраиваем соединение с таблицей */

$query = "SELECT * FROM table";

$result = mysql_query ($query) or die ("Нет такой таблицы");

/* Выводим таблицу базы данных на страницу */

echo "<table border=1>";

while($data=mysql_fetch_row($result))

{

echo "<tr><td>",

implode ("</td><td>", $data), "</td></tr>";

}

echo "</table>";

?>

</body>

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

Работа с другими приложениями в программе HtmlPad

В программе HtmlPad реализована тесная интеграция с другими приложениями. Отметим, что в первую очередь здесь имеются стандартные приложения, входящие в комплект поставки операционной системы Windows, приложения офисного пакета MS Office, а также иные популярные программы.

Чтобы пользоваться другими приложениями одновременно с программой HtmlPad, перейдите на вкладку Программы (рис. 4.25).

Рис. 4.25. Вкладка Программы

Как видно на рисунке, инструментальная панель данной вкладки содержит немало кнопок, значки которых покажутся знакомыми любому пользователю Windows. Кратко рассмотрим назначение некоторых из них, начиная с крайней левой.

Первая кнопка инструментальной панели называется Запустить блокнот и, как нетрудно догадаться, предназначена для запуска популярного текстового редактора «Блокнот», входящего в комплект поставки операционной системы Windows. Как мы уже знаем, в этой программе удобно писать и редактировать программные коды (это отмечалось ранее, в главе 2 «Основы веб-программирования с помощью языка HTML»), поэтому возможность ее быстрого запуска может оказаться весьма кстати.

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

Как мы уже отмечали ранее, для просмотра текущего файла в окне Интернет-обозревателя предназначена команда главного меню Вид ? Просмотр в браузере, вызываемая также с помощью клавиши F11. При активизации данной команды текущий файл будет представлен в окне используемого по умолчанию обозревателя. Однако бывает так, что по умолчанию используется, например, Opera или Mozilla Firefox, а документ необходимо просмотреть в обозревателе Internet Explorer (который, напомним, входит в комплект поставки операционной системы Windows). Для решения данной задачи открывайте вкладку Программы и нажимайте в инструментальной панели кнопку Открыть IE с текущим файлом.

Следующие четыре кнопки называются Запустить Microsoft Word, Запустить Microsoft Excel, Запустить Microsoft Access и Запустить Microsoft Power Point, и предназначены для быстрого запуска соответствующих приложений пакета MS Office. Сразу за ними расположена кнопка Запустить Internet Explorer, предназначенная для быстрого запуска Интернет-обозревателя Internet Explorer (в данном случае его окно будет пустым).

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

Также с помощью соответствующих кнопок вы можете осуществлять быстрый запуск программ WordPad, «Калькулятор», графического редактора Paint, входящего в комплект поставки операционной системы Windows, а также Photoshop.

Глава 5.
Программа NeonHtml – удобный инструмент для разработки веб-сайтов

Еще одна программа, которую можно порекомендовать начинающим веб-разработчикам и веб-администраторам, называется NeonHtml. Она распространяется бесплатно, ее дистрибутив  можно скачать на сайта разработчика по адресу http://neonhtml.pixpaint.com. К скачиванию предлагается zip-архив объемом примерно 1,3 Мб.

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

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

Назначение и функциональные возможности программы

Функциональные возможности программы NeonHtml предназначены для решения следующих задач.

•  Создание, редактирование и администрирование веб-документов самых разных форматов – HTML, PHP, CSS, JavaScript, а также простых текстовых файлов.

• Использование множества вариантов оформления и дизайна веб-страниц, с моментальным просмотром результата.

• Экспорт и импорт данных с помощью специально предназначенных функциональностей.

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

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

• Использование стандартных заготовок для создания веб-страниц.

• Упорядочивание, оптимизация и прочие преобразования программного кода веб-страницы.

• Использование разных кодировок.

• Быстрая навигация по всему программному коду.

• Параллельная работа с несколькими одновременно открытыми документами.

• Быстрый поиск и замена данных в соответствии с заданными параметрами.

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

Общие правила работы с программой

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

Рис. 5.1. Окно приветствия

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

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

• Импорт – данная кнопка предназначена для импорта данных, с которыми вы предполагаете работать.

• Новая страница – данная кнопка предназначена для автоматического формирования новой страницы в соответствии с заданными параметрами. Эти параметры задаются в окне, которое открывается на экране при нажатии данной кнопки.

• Заготовка – при нажатии данной кнопки открывается главное окно программы, в рабочей области которого будет автоматически сгенерирован начальный код стандартной HTML-страницы

• Пустой – при нажатии данной кнопки открывается главное окно программы, рабочая область которого будет пустой.

• Справка – данная кнопка предназначена для вызова справочной информации.

• Сайт редактора – с помощью данной кнопки можно быстро перейти на сайт программы (при условии наличия действующего подключения к Интернету).

• Продолжить – при нажатии данной кнопки на экране отображается главное окно программы.

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

Вся работа по созданию и редактированию веб-страниц осуществляется в главном окне программы, которое показано на рис. 5.2.

Рис. 5.2. Главное окно программы

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

Главное меню находится в привычном месте – в верхней части интерфейса. Оно включает в себя следующие меню: Файл, Выполнить, Заготовки, Обработка, Настройки, Ссылки и Программа. Команды главного меню предназначены для выбора инструментов, режимов работы, а также для вызова различных функций и механизмов программы.

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

Рабочая область занимает самую большую часть интерфейса. Именно в ней ведется вся работа с программным кодом веб-страницы. На рис. 5.2 в рабочей области содержится код, который генерируется программой автоматически в момент создания нового HTML-документа.

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

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

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

Для выполнения наиболее востребованных действий в программе предусмотрено использование «горячих» клавиш. Их полный перечень приведен ниже.

• F1 – создание нового пустого документа;

• F2 – создание новой страницы;

• F3 – переход в режим поиска и замены данных;

• F4 – открытие папки, в которой хранится редактируемый в данный момент документ;

• F6 – настройка параметров шрифта;

• F9 – просмотр текущей веб-страницы во встроенном Интернет-обозревателе;

• F10 – просмотр текущей веб-страницы в Интернет-обозревателе, который на данном компьютере используется по умолчанию;

• F11 – переход в режим настройки параметров программы;

• F12 – вызов справочной информации;

• Ctrl + O – открытие созданного ранее документа для просмотра и редактирования;

• Ctrl + S – сохранение изменений в текущем документе;

• Ctrl + Alt + S – сохранение документа под другим именем;

• Ctrl + E – экспорт документа;

• Ctrl + Z – отмена последнего действия (полезно для быстрой отмены ошибочных действий);

• Ctrl + R – возврат отмененного действия;

• Ctrl + С – копирование выделенного текстового фрагмента в буфер обмена;

• Ctrl + X – копирование выделенного текстового фрагмента в буфер обмена с одновременным его удалением;

• Ctrl + V – вставка содержимого буфера отмена в то место, где расположен курсор;

• Ctrl + А – выделение всего содержимого рабочей области;

• Ctrl + В – вставка тега <br> в то место, где находится курсор;

• Home – быстрый переход к началу строки;

• End – быстрый переход к концу строки;

• Ctrl + Home – быстрый переход к началу документа

• Ctrl + End – быстрый переход к концу документа

• PageUp – «пролистывание» в направлении вверх;

• PageDown – «пролистывание» в направлении вниз;

• Ctrl + PageUp – быстрый переход к первой строке экрана;

• Ctrl + PageDown – быстрый переход к последней строке экрана;

• Ctrl + Alt + P – выбор относительного пути на диске;

• Ctrl + стрелка «вправо» – быстрый переход к следующему слову;

• Ctrl + стрелка «влево» – быстрый переход к предыдущему слову;

• Ctrl + стрелка «вверх» – быстрая «прокрутка» вверх;

• Ctrl + стрелка «вниз» – быстрая прокрутка  вниз;

• Ctrl + Shift + стрелка «вправо» – добавление следующего слова к выделению;

• Ctrl + Backspace – удаление последнего слова;

• Ctrl + Alt + стрелка «вправо» – сдвигание выделенного текстового фрагмента вправо;

• Ctrl + Alt + стрелка «влево» – сдвигание выделенного текстового фрагмента влево;

• Alt + B – вставка в программный код тегов полужирного начертания;

• Alt + I – вставка в программный код тегов курсивного начертания;

• Alt + U – вставка в программный код тегов подчеркнутого начертания;

• Alt + S – вставка в программный код тегов зачеркнутого начертания;

• Alt + стрелка «вверх» – применение прописных символов для выделенного фрагмента;

• Alt + стрелка «вниз» – применение строчных символов для выделенного фрагмента.

Более подробно основные режимы работы программы, доступ к которым осуществляется в том числе и с помощью «горячих» клавиш, мы рассмотрим далее.

Подготовка программы к работе

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

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

Настройка пользовательского интерфейса

Как мы уже отмечали ранее, в программе реализована возможность настройки пользовательского интерфейса. В частности, пользователь может самостоятельно определить, какие элементы и инструменты должны быть представлены в главном окне программы, как они при этом будут называться, и т. д. Для перехода в режим настройки пользовательского интерфейса нужно выполнить команду главного меню Настройки ? Интерфейс. При ее активизации на экране отображается окно, изображенное на рис. 5.3.

Рис. 5.3. Настройка пользовательского интерфейса, вкладка Панель инструментов

Как видно на рисунке, данное окно состоит из двух вкладок: Панель инструментов и Добавить кнопку. Рассмотрим порядок работы на каждой из них.

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

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

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

Если вы желаете добавить в главное окно программы какой-либо инструмент, перейдите в окне настройки интерфейса на вкладку Добавить кнопку, содержимое которой представлено на рис. 5.4.

Рис. 5.4. Настройка пользовательского интерфейса, вкладка Добавить кнопку

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

Вначале в поле Куда добавить нужно из раскрывающегося списка выбрать панель, на которую вы намереваетесь добавить инструмент. Возможен выбор одного из двух вариантов: Панель инструментов (в данном случае имеется в виду панель вкладок в главном окне программы) либо Панель быстрых действий (так называется инструментальная панель, которая находится в рабочей области слева от номеров строк). Если выбрано значение Панель инструментов, то ниже становится доступным для редактирования поле Вкладка. В данном поле из раскрывающегося списка нужно выбрать конкретную вкладку, на которую вы хотите добавить инструмент. Отметим, что если на вкладке Панель инструментов (см. рис. 5.3) вы добавили новую вкладку, то она также будет доступна для выбора в поле Вкладка, и вы сможете поместить на нее все необходимые вам инструменты.

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

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

После этого в расположенном ниже поле отобразится краткое описание выбранного действия, а в поле Подсказка будет автоматически сформирован текст всплывающей подсказки, которая будет отображаться при подведении к кнопке указателя мыши. Например, если выбрать инструмент Жирный, то в поле, которое находится сразу под кнопкой Выбрать, отобразится текст code_bold, а в поле Подсказка – слово Жирный. Также автоматически будет заполнено поле Иконка, в котором предлагается размер кнопки. Отметим, что все эти параметры вы можете отредактировать по своему усмотрению, а с помощью кнопки Очистить можно вообще удалить из них значения.

Если вы желаете, чтобы на кнопке отображалась надпись (например, чтобы сразу было понятно назначение данного инструмента), введите ее текст в поле Надпись.

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

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

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

Настройка параметров программы

Характерной особенностью программы NeonHtml является то, что она обладает довольно гибким механизмом настройки, чем могут похвастаться далеко не все конкуренты.

Для перехода в режим настройки параметров программы в главном меню предназначена команда Настройки ? Основные. При ее активизации на экране отображается окно настройки, которое представлено на рис. 5.5.

Рис. 5.5. Настройка программы, вкладка Общие

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

На вкладке Общие, содержимое которой представлено на рис. 5.5, содержится несколько параметров общего характера. Если на данной вкладке установлен флажок Окно приветствия (выбор действия) при входе в редактор, то при каждом запуске программы на экране будет отображаться ее стартовый интерфейс (см. рис. 5.1). Если вы хотите отключить появление окна приветствия – снимите данный флажок.

Как мы уже отмечали ранее, возможности программы предусматривают параллельную работу сразу с несколькими разными документами. В этом случае в рабочей области для каждого из них открывается отдельная вкладка (на рис. 5.2 такая вкладка одна, она называется new_document.html). Если в настройках программы на вкладке Общие установлен флажок Показывать кнопку закрытия на вкладках документов, то при подведении указателя мыши к таким вкладкам на них будет отображаться кнопка закрытия. В противном случае такая кнопка появляться не будет, и для закрытия документов можно будет пользоваться лишь соответствующими командами меню Файл.

На вкладке Редактирование, содержимое которой показано на рис. 5.6, осуществляется настройка параметров рабочей области. 

Рис. 5.6. Настройка программы, вкладка Редактирование

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

Нижняя часть вкладки, в свою очередь, состоит из трех вкладок: HTML, CSS и Прочее. На вкладке Прочее указывается цвет, которым в программном коде будут помечаться парные скобки – при условии, если на вкладке Общие будет установлен флажок Подсвечивать парные скобки (см. рис. 5.5). Что касается вкладок HTML и CSS, то здесь вы можете настроить цветовое оформление и начертание шрифта каждого элемента программного кода (теги, текстовый контент, комментарии и т.д.). Для этого нужно щелкнуть мышью на соответствующем образце кода, и в открывшемся окне выполнить требуемые настройки.

Содержимое вкладки Документ показано на рис. 5.7.

Рис. 5.7. Настройка программы, вкладка Документ

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

В программе реализована возможность автоматической проверки правильности и корректности программного кода веб-документа перед его просмотром в окне Интернет-обозревателя. Настройка такой проверки осуществляется на вкладке Проверка, содержимое которой показано на рис. 5.8.

Рис. 5.8. Настройка программы, вкладка Проверка

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

Программа NeonHtml автоматически ведет историю некоторых программных событий. В частности, она формирует журнал недавно просмотренных документов, что позволяет получить к ним ускоренный доступ, ведет историю поисковых запросов, ввода URL-адресов, и т. д. При желании вы можете полностью или частично удалить все подобные сведения, а также настроить журнал недавно просмотренных документов. Для этого в настройках программы предназначена вкладка История, содержимое которой показано на рис. 5.9.

Рис. 5.9. Настройка программы, вкладка История

На данной вкладке в поле Длина списка недавних документов можно самостоятельно определить, сколько недавно открываемых документов программа должна помещать в журнал для последующего быстрого к ним доступа из подменю Файл ? Недавние документы. Требуемое значение можно ввести как с клавиатуры, так и с помощью кнопок счетчика. По умолчанию программа предлагает сохранять в журнале 15 недавно просмотренных документов.

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

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

Если на вкладке Система установить флажок Встроить в системное меню, то в контекстном меню, вызываемом нажатием правой кнопки мыши на ярлыке файлов формата Html, CSS или JavaScript, будет присутствовать команда Редактировать в NeonHtml, с помощью которой можно будет сразу перейти в режим редактирования данного файла средствами программы NeonHtml.

Все настройки программы вступают в силу после нажатия кнопки ОК, которая доступна на всех вкладках данного окна.

Как создать новый веб-документ?

Чтобы начать работу над новой веб-страницей, ее необходимо вначале создать. Вы можете это сделать как из стартового (см. рис. 5.1), так и из главного (см. рис. 5.2) окна программы. В первом случае нужно воспользоваться кнопками Новая страница, Заготовка или Пустой, во втором – соответствующими командами подменю Файл ? Новый. Дальнейший порядок действий будет одинаков. Поскольку со стартовым окном мы уже познакомились ранее, в данном разделе мы будем оперировать командами подменю Файл ? Новый.

Чтобы создать новую веб-страницу в соответствии с заданными параметрами, выполните команду главного меню Файл ? Новый ? Веб-страница. При активизации данной команды на экране отображается окно, изображенное на рис. 5.10.

Рис. 5.10. Настройка параметров веб-страницы

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

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

В поле Описание можно ввести произвольное описание документа, кратко характеризующее его суть.

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

В поле Автор можно указать сведения о разработчике данного документа. Если для оформления веб-страницы предполагается использовать стили, то в поле Относительный путь к файлу стиля CSS можно указать путь к файлу стиля, который будет использоваться для оформления. Для заполнения данного поля нужно нажать расположенную справа от него кнопку, и в открывшемся окне указать требуемый путь.

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

Если установить флажок Включить информацию о редакторе, то в веб-страницу будут автоматически включены сведения о программе NeonHtml, в которой она была разработана.

Завершается ввод исходных параметров создаваемой веб-страницы нажатием в данном окне кнопки ОК. В листинге 4.1 представлен программный код веб-страницы, который автоматически сгенерируется при применении параметров, представленных на рис. 5.10.

Листинг 4.1. Создание веб-страницы на основании заданных параметров

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

<html>

<head>

<title>Опытный образец веб-страницы</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="keywords" content="образец, пример, веб-обучение, веб-разработка">

<meta name="Content-language" content="ru">

</head>

<body> 

</body>

</html>

Вы можете создавать новые веб-документы на основании имеющейся заготовки. Эта заготовка создана в программе по умолчанию, но при желании вы можете ее отредактировать произвольным образом в настройках программы (см. рис. 5.7). Для создания документа на основании заготовки нужно выполнить команды главного меню Файл ? Новый ? Заготовка страницы. Если вы будете использовать заготовку, предложенную в программе по умолчанию, то при активизации данной команды программа автоматически сгенерирует код, который представлен в листинге 4.2.

Листинг 4.2. Создание веб-страницы на основании заготовки

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

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<meta name="description" content="" />

<meta name="keywords" content="" />

</head>

<body> 

</body>

</html>

Если же вы хотите самостоятельно начать разработку новой веб-страницы «с нуля», без использования заготовки и предварительной настройки параметров, выполните в главном меню программы команду Файл ? Новый ? Пустой документ (эта команда вызывается также нажатием комбинации клавиш Ctrl+N). При активизации данной команды будет создан новый документ без программного кода (то есть рабочая область для него будет абсолютно пустой).

Открытие веб-документа для просмотра и редактирования

С помощью программы NeonHtml вы можете не только создавать новые сайты, но также открывать для просмотра и редактирования созданные ранее веб-страницы. Программа поддерживает работу с документами следующих типов: Html, CSS, JavaScript, SSI, PHP, а также с текстовыми документами.

Чтобы открыть документ для просмотра и редактирования, выполните команду главного меню Файл ? Открыть (эта команда вызывается также нажатием комбинации клавиш Ctrl+O). При активизации данной команды на экране открывается окно открытия файла, изображенное на рис. 5.11.

Рис. 5.11. Открытие документа для просмотра и редактирования

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

Сохранение веб-документов

По мере работы над документом рекомендуется периодически сохранять вносимые в него изменения. Это позволит избежать потери данных при возникновении нештатной ситуации (программный или аппаратный сбой, внезапное отключение электроэнергии, и т.д.). Для сохранения изменений в документе предназначена команда главного меню Файл ? Сохранить, вызываемая также нажатием комбинации клавиш Ctrl+S.

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

При необходимости вы можете сохранить изменения, выполненные в документе, в отдельном файле под другим именем. Для этого нужно в главном меню выполнить команду Файл ? Сохранить как (данная команда активизируется также нажатием комбинации клавиш Ctrl+Alt+S), после чего в открывшемся окне нужно будет указать путь для сохранения и имя файла.

Описание режимов работы

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

Построение структуры веб-страницы

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

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

Рис. 5.12. Инструменты для построения структуры веб-документа

Как видно на рисунке, данная вкладка включает в себя несколько кнопок. Действие кнопок Страница и Заготовка нам уже знакомо – они функционируют так же, так и соответствующие команды подменю Файл ? Новый (подробнее см. выше раздел «Как создать новый веб-документ?»). Иначе говоря, одним нажатием кнопки вы можете получить в рабочей области автоматически сгенерированную предварительную структуру будущей веб-страницы.

При нажатии кнопки Теги открывается меню, команды которого предназначены для быстрой вставки соответствующих тегов в программный код документа. Например, при активизации команды Теги ? <HEAD> в программном коде веб-страницы появится контейнер <head> </head>, и т. д. Таким образом, буквально несколькими щелчками мыши можно получить предварительную структуру документа, пример которой представлен в листинге 4.3.

Листинг 4.3. Предварительная структура веб-документа

<html>

<head>

<title></title>

<meta name="keywords" content="">      

</head>

<body> 

</body>      

</html>      

Данная структура идентифицирует Html-документ, определяет место для названия веб-страницы, содержит мета-теги для задания ключевых слов, а также предусматривает место для ввода основного контента.

Ранее мы уже отмечали, что программные коды часто содержат комментарии – текстовые пояснения, которые предназначены для служебного пользования. Они позволяют пояснить, что означает тот или иной фрагмент программного кода. Комментарии являются частью программного кода, однако они не оказывают никакого влияния на его функциональность.

Для вставки комментария на вкладке Структура предназначена кнопка Комментарий (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши). При ее нажатии на экране отображается окно ввода комментария, которое представлено на рис. 5.13.

Рис. 5.13. Ввод комментария

В данном окне следует с клавиатуры ввести требуемый комментарий и нажать кнопку ОК. При этом с помощью переключателя, расположенного внизу окна, нужно указать – к какому коду относится комментарий: к HTML-коду или к коду, написанному на языке CSS, JavaScript или РНР. Дело в том, что оформление комментариев в языке HTML и в других языках веб-программирования несколько отличается, поэтому нужно четко указать, на каком языке написана данная страница.

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

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

Листинг 4.4. Вставка комментария

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

<html>

<head>

<title>Опытный образец веб-страницы</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="keywords" content="образец, пример, веб-обучение, веб-разработка">

<meta name="Content-language" content="ru">

</head>

<body>

<!– Далее рассмотрим процесс ввода текстового контента –>

</body>

</html>

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

Рис. 5.14. Навигация по документу

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

Ввод и оформление текстового контента

Как правило, после предварительной разметки веб-страницы и формирования ее структуры веб-разработчики занимаются вводом и оформлением текстового контента, а уже после этого добавляют на страницу ссылки, изображения и прочие элементы. Для работы с текстовым контентом в программе предназначена вкладка Текст, содержимое которой представлено на рис. 5.15.

Рис. 5.15. Инструменты для работы с текстовым контентом

Крайняя слева кнопка на данной вкладке предназначена для формирования параграфов. При нажатии данной кнопки в программный код документа вставляется тег <p>. Кнопка, которая находится рядом с ней, позволяет вставить в программный код тег <br>, который предназначен, как мы уже знаем, для вставки разрыва и создания абзацев.

При нажатии на кнопку Прочее открывается меню, команды которого также предназначены для вставки в документ разных тегов. Содержимое данного меню представлено на рис. 5.16.

Рис. 5.16. Меню, открываемое нажатием кнопки Прочее

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

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

Предположим, что у нас есть следующий программный код (рис. 5.17).

Рис. 5.17. Пример программного кола веб-страницы

Предположим, что нам нужно первую фразу текстовой части контента оформить заголовком первого уровня, а последнюю фразу – в виде цитаты. Для этого действуем следующим образом: выделяем первую фразу, нажимаем кнопку Прочее и в открывшемся меню выбираем команду h1. После этого выделяем последнюю фразу, затем вновь нажимаем кнопку Прочее и в открывшемся меню выбираем команду <cite> Цитирование. Результат выполненных действий показан в листинге 4.5.

Листинг 4.5. Применение тегов из меню Прочее

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.

<cite>Полученные знания применим на практике.</cite>

</body>

</html>

В результате первая и последняя фразы текстовой части контента заключены в соответствующие теги. Теперь можно просмотреть результат в окне Интернет-обозревателя, используемого в данном компьютере по умолчанию. Для этого нажмем клавишу F10, предварительно сохранив выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S. Результат показан на рис. 5.18.

Рис. 5.18. Оформление заголовка и фразы цитирования

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

Предположим, что нам нужно как-то выделить в тексте веб-страницы последнюю фразу нашего примера, которую мы сформулировали так: Полученные знания применим на практике (см. рис. 5.17 и 5.18). Для этого на вкладке Текст нажмем кнопку Шрифт (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши), предварительно выделив эту фразу в программном коде. В результате на экране откроется окно, изображенное на рис. 5.19.

Рис. 5.19. Настройка параметров шрифта

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

Чтобы применить к фразе тот или иной шрифт, нужно в левой части окна на вкладке Шрифт установить флажок Имя шрифта, и выбрать подходящий вид шрифта в расположенном ниже раскрывающемся списке. При необходимости можно воспользоваться альтернативным набором шрифтов, список которых становится доступным при установленном флажке Альтернативные шрифты. Для оформления нашей фразы выберем из раскрывающегося списка Имя шрифта один из стандартных шрифтов – Arial Cyr.

Теперь перейдем на вкладку Размер. Здесь осуществляется настройка размера шрифта, высоты строки, а также указывается расстояние между буквами и между словами. Для настройки каждого из перечисленных параметров необходимо установить соответствующий флажок. Выполним настройку так, как показано на рис. 5.20.

Рис. 5.20. Настройка размеров шрифта

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

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

В нашем примере мы настроим стиль отображения шрифта так, как показано на рис. 5.21.

Рис. 5.21. Настройка стиля шрифта

На данной вкладке все параметры настраиваются путем установки соответствующих флажков. Мы установили флажки Жирный и Подчеркнутый, в результате чего наша  фраза стала выглядеть так, как показано в правой части окна на вкладке Просмотр.

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

Рис. 5.22. Настройка цветового оформления

Отметим, что действие параметра Фон просмотра распространяется только на вкладку Просмотр в правой части данного окна. На оформление веб-страницы данный параметр никак не влияет.

В нашем примере выполним настройку цветового оформления таким образом, чтобы шрифт отображался красным цветом, а строка – желтым (см. рис. 5.22). Как обычно, на вкладке Просмотр вид фразы автоматически изменится в соответствии с установленными настройками.

На этом мы завершим работы по оформлению нашей фразы. После нажатия в данном окне кнопки ОК программный код веб-страницы примет вид, как показано в листинге 4.6.

Листинг 4.6. Настройка параметров шрифта

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.

<font style="font:bold 14px/30px Arial Cyr;text-decoration:underline;letter-spacing:3px;word-spacing:10px;color:#F00;background:#FF0;">Полученные знания применим на практике.</font><font style="font:bold 14px/30px Arial Cyr;text-decoration:underline;letter-spacing:3px;word-spacing:10px;color:#F00;background:#FF0;"></font>

</body>

</html>

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

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S, и просмотрим результат выполненных действий в окне Интернет-обозревателя, нажав для этого клавишу F10. Если все сделано правильно, то наша страница будет выглядеть так, как показано на рис. 5.23.

Рис. 5.23. Нестандартное оформление части контента

Далее рассмотрим остальные инструменты, расположенные на вкладке Текст и предназначенные для работы с текстовым контентом.

Справа от кнопки Шрифт находятся кнопки Жирный, Курсив, Зачеркнутый и Подчеркнутый. С помощью этих кнопок в программный код документа вставляются теги, предназначенные для применения соответствующего начертания шрифта. Еще правее находится кнопка Взять в кавычки, с помощью которой осуществляется заключение текста в кавычки. Действие этих кнопок может распространяться на предварительно выделенный текстовый фрагмент (в этом случае он будет заключен в соответствующие теги).

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

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

Листинг 4.7. Применение верхнего и нижнего индексов

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для ^этого будем _{использовать} программу NeonHtml.

Полученные знания применим на практике.

</body>

</html>

В данном листинге видно, что слова этого и использовать заключены в соответствующие теги. Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить, и нажмем клавишу F10, чтобы просмотреть веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 5.24.

Рис. 5.24. Применение верхнего и нижнего индексов

После кнопки Индекс следуют четыре кнопки, которые предназначены для размещения текста на странице. Эти кнопки перечислены ниже.

•  Выровнять по левому краю – при нажатии данной кнопки текст выравнивается по левому краю.

• Выровнять по центру – с помощью данной кнопки текст можно выровнять по центру.

• Выровнять по правому краю – при нажатии данной кнопки текст выравнивается по правому краю.

• Выровнять по ширине – в данном случае текст будет растянут по всей ширине веб-страницы.

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

Формирование нумерованных, маркированных и выпадающих списков

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

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

Рис. 5.25. Режим создания списков

Создание маркированных и нумерованных списков осуществляется на вкладке Маркированный/нумерованный. Выбор типа списка производится с помощью соответствующего переключателя. Если вы создаете маркированный список, то в поле Маркеры из раскрывающегося списка нужно выбрать тип маркера – Кружок, Пустой кружок или Квадратик. Если ни один из предложенных вариантов вас не устраивает, то в качестве маркера вы можете использовать произвольное изображение. Путь к файлу этого изображения указывается в поле Маркер-картинка: для этого нужно нажать расположенную справа от данного поля кнопку, и в открывшемся окне по обычным правилам Windows указать путь к файлу изображения, которое будет использоваться в качестве маркера.

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

В поле Пункты списка нужно с клавиатуры ввести все пункты создаваемого списка. При этом разделять их следует нажатием клавиши Enter. В поле, которое находится вверху данного окна, демонстрируется образец того, как будет выглядеть список в окне Интернет-обозревателя при установленных в данный момент настройках.

Если вы хотите поместить на веб-страницу выпадающий или многострочный список, перейдите в данном окне на вкладку Выпадающий/многострочный. Содержимое данной вкладки показано на рис. 5.26.

Рис. 5.26. Формирование выпадающих и многострочных списков

На данной вкладке в поле Имя списка с клавиатуры вводится произвольное имя списка. В поле Видимых пунктов вы можете указать количество значений, которые будут видны без раскрытия списка. По умолчанию в данном поле установлено значение 1 – именно такой вариант применяется для большинства выпадающих списков. Если посетитель сайта должен иметь возможность выбора из списка не одного, а нескольких значений одновременно – установите флажок несколько сразу.

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

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

Рис. 5.27. Добавление нового пункта в список

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

Чтобы отредактировать какой-либо пункт, нужно выделить его в списке (см. рис. 5.26) щелчком мыши и нажать в инструментальной панели кнопку Редактировать пункт. При этом откроется интерфейс ввода и редактирования пункта (см. рис. 5.27), в котором выполняются необходимые действия.

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

Далее мы на конкретном примере рассмотрим процесс формирования маркированного списка. Мы его вставим между двумя последними фразами веб-страницы, с которой мы уже работали ранее (см. рис. 5.17). Перед этим немного дополним исходный код: первую фразу оформим в виде заголовка, а после второй фразы вставим разрыв (листинг 4.8).

Листинг 4.8. Исходный код страницы перед вставкой маркированного списка

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

Полученные знания применим на практике.

</body>

</html>

Нажимаем кнопку Инструмент создания списков, и в открывшемся окне настраиваем параметры маркированного списка так, как это показано на рис. 5.28.

Рис. 5.28. Пример настройки маркированного списка

После нажатия в данном окне кнопки ОК исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.9.

Листинг 4.9. Исходный код веб-страницы после создания маркированного списка

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<ul type="circle">

<li>Пункт первый</li>

<li>Пункт второй</li>

<li>Пункт третий</li>

<li>Пункт четвертый</li>

</ul>

Полученные знания применим на практике.

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием комбинации клавиш Ctrl+S, после чего нажмем клавишу F10. чтобы просмотреть веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 5.29.

Рис. 5.29. Маркированный список

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

Рис. 5.30. Пример настройки нумерованного списка

Обратите внимание – в данном примере мы создаем нумерованный список, в котором для нумерации используются римские цифры. После нажатия в данном окне кнопки ОК исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.10.

Листинг 4.10. Исходный код веб-страницы после создания нумерованного списка

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<ol type="I">

<li>Пункт первый</li>

<li>Пункт второй</li>

<li>Пункт третий</li>

<li>Пункт четвертый</li>

</ol>

Полученные знания применим на практике.

</body>

</html>

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

Рис. 5.31. Нумерованный список

Аналогичным образом осуществляется формирование выпадающих и многострочных списков.

Формирование гиперссылок

Поскольку без гиперссылок не обходится ни одна веб-страница, в программе NeonHtml реализована возможность автоматической вставки гиперссылок. Для решения данной задачи необходимо перейти на вкладку Ссылка, содержимое которой показано на рис. 5.32.

Рис. 5.32. Вкладка Ссылка

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

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

Рис. 5.33. Формирование гиперссылки

Как видно на рисунке, данное окно состоит из двух вкладок: Параметры и Стиль. На вкладке Параметры осуществляется собственно формирования гиперссылки, а на вкладке Стиль можно настроить ее оформление.

Первое, что нужно сделать – это выбрать из раскрывающегося списка протокол гиперссылки. Например, если вы хотите сделать ссылку на другой веб-ресурс – выберите в этом списке значение http:// или https://, если нужно сделать ссылку на электронный адрес – выбирайте значение mailto:, а если нужно сослаться на файл, находящийся в компьютере – укажите значение На диске, и т. д. После этого в расположенном справа поле нужно ввести конкретный адрес, куда будет вести гиперссылка. Если это находящийся на диске файл – то для заполнения данного поля нужно нажать расположенную справа от него кнопку, и в открывшемся окне по обычным правилам Windows указать путь к требуемому файлу. В остальных случаях адрес гиперссылки вводится с клавиатуры.

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

Гиперссылка на веб-странице может открываться как в текущем окне Интернет-обозревателя, так и в новом его окне. Требуемый вариант выбирается из раскрывающегося списка в поле Где открыть.

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

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

Как мы уже отмечали ранее, на вкладке Стиль можно настроить стиль отображения гиперссылки. В частности, вы можете создать и использовать CSS-класс, либо выполнить настройку параметров шрифта так, как было рассказано выше (см. рис. 5.19 – 5.22).

Завершается процесс создания гиперссылки нажатием в данном окне кнопки ОК. Если создать гиперссылку в соответствии с параметрами, представленными на рис. 5.33, то исходный код веб-страницы будет выглядеть так, как показано в листинге 4.11 (напомним, что гиперссылкой в нашем примере является слово знания).

Листинг 4.11. Вставка гиперссылки

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

Полученные <a href="http://www.yandex.ru" target="_blank" style="margin-left:5px;margin-right:15px;" title="ссылка на яндекс">знания </a>применим на практике.

</body>

</html>

Теперь сохраним выполненные изменения и просмотрим веб-страницу в окне интернет-обозревателя. Если все сделано правильно, то страница будет выглядеть так, как показано на рис. 5.34.

Рис. 5.34. Обособленная гиперссылка

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

Формирование и вставка таблиц в веб-документ

Формирование таблиц и их вставка в веб-документ в программе NeonHtml может осуществляться двумя способами: путем поочередного добавления тегов с помощью соответствующих кнопок, либо с помощью специального механизма, позволяющего практически полностью автоматизировать процесс построения таблицы. В любом случае, все действия по формированию и вставке таблиц осуществляются на вкладке Таблица, содержимое которой показано на рис. 5.35.

Рис. 5.35. Вкладка Таблица

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

А вот самая первая кнопка позволяет почти моментально сформировать таблицу, причем попутно можно задать и объединение некоторых ячеек этой таблицы (при наличии такой необходимости). Эта кнопка называется Таблица, при ее нажатии на экране отображается окно, которое показано на рис. 5.36.

Рис. 5.36. Построение таблицы в автоматическом режиме

В данном режиме выполняются все действия, необходимые для быстрого построения таблицы в автоматическом режиме.

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

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

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

cellpadding – в данном поле указывается размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ (иначе говоря, с помощью этого атрибута определяется расстояние от содержимого ячейки до ее границ);

cellspacing – в данном поле указывается расстояние между ячейками таблицы.

Завершается процесс первоначального формирования таблицы нажатием в данном окне кнопки ОК. Если мы вставим таблицу, настройки которой показаны на рис. 5.36, между двумя последними фразами веб-страницы, с которой мы уже работали ранее (см. рис. 5.17), то исходный код этой страницы будет выглядеть так, как показано в листинге 4.12.

Листинг 4.12. Предварительная настройка таблицы

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<table cellspacing="3" cellpadding="3">

<tr>

    <td>

    </td>

    <td>

    </td>

    <td>

    </td>

    <td>

    </td>

</tr>

<tr>

    <td>

    </td>

    <td>

    </td>

    <td>

    </td>

    <td>

    </td>

</tr>

<tr>

    <td>

    </td>

    <td>

    </td>

    <td>

    </td>

    <td>

    </td>

</tr>

</table>

Полученные знания применим на практике.

</body>

</html>

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

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

Листинг 4.13. Начальный фрагмент табличного кода с добавленным тегом border

<table cellspacing="3" cellpadding="3" border="2">

В результате внесенных изменений наша таблица будет иметь рамку толщиной 2 пикселя.

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

Листинг 4.14. Вставка таблицы на страницу

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<table cellspacing="3" cellpadding="3" border="2">

<tr>

    <td>

Январь

    </td>

    <td>

Февраль

    </td>

    <td>

Март  

    </td>

    <td>

Апрель

    </td>

</tr>

<tr>

    <td>

Май

    </td>

    <td>

Июнь  

    </td>

    <td>

Июль  

    </td>

    <td>

Август

    </td>

</tr>

<tr>

    <td>

Сентябрь  

    </td>

    <td>

Октябрь

    </td>

    <td>

Ноябрь

    </td>

    <td>

Декабрь

    </td>

</tr>

</table>

Полученные знания применим на практике.

</body>

</html>

Теперь сохраним выполненные изменения и посмотрим, как выглядит страница в окне Интернет-обозревателя (рис. 5.37).

Рис. 5.37. Веб-страница с таблицей

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

Создание форм и инструментов для ввода и отправки данных

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

Рис. 5.38. Вкладка Форма

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

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

Рис. 5.39. Создание формы

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

В поле Имя формы можно с клавиатуры ввести произвольное имя формы. Если внизу окна установить флажок Поддерживать отправление файлов, то в форме будет реализован механизм, позволяющий отправлять файлы.

Завершается процесс создания формы нажатием в данном окне кнопки ОК. В листинге 4.15 показан программный код веб-страницы после вставки в него формы в соответствии с настройками, представленными на рис. 5.39.

Листинг 4.15. Вставка формы в веб-документ

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<form action="пример1.html" method="post" enctype="multipart/form-data" name="Obrazec">

</form>

Полученные знания применим на практике.

</body>

</html>

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

Теперь добавим в нашу форму поле, предназначенное для ввода текстовых данных. Для этого установим курсор на новую строку (перед строкой с закрывающим тегом </form>), и нажмем на вкладке Форма кнопку Поле ввода строки (она является третьей слева). В результате исходный код веб-страницы будет дополнен следующим фрагментом: <input type="text" name="« value=»">. Если присвоить какое-то значение атрибуту value, то оно будет являться значением данного поля по умолчанию при открытии веб-страницы в окне Интернет-обозревателя.

Теперь добавим на страницу поле выбора файла. Для этого перейдем в исходном коде на следующую строку и нажмем кнопку Поле выбора файлов, которая находится справа от кнопки Поле ввода строки. В результате исходный код веб-страницы будет дополнен следующим фрагментом: <input type="file" name="">.

Теперь переходим на следующую строку и нажимаем кнопку Галочка, чтобы добавить в форму флажок (на этой кнопке изображен характерный символ). После этого аналогичным образом с помощью кнопок Отправить (подтвердить) и Очистить поля формы (сброс) добавляем в форму кнопки соответственно отправки данных т очистки параметров формы. Затем разделим все добавленные параметры формы с помощью тега <br> – в результате каждый элемент формы будет располагаться на новой строке.

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

Листинг 4.16. Добавление элементов в форму

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<form action="пример1.html" method="post" enctype="multipart/form-data" name="Obrazec">

<input type="text" name="" value=""> <br>

<input type="file" name=""> <br>

<input type="checkbox" name=""> <br>

<input type="submit" name="" value="Отправить"> <br>

<input type="reset" name="" value="Очистить"> <br>

</form>

Полученные знания применим на практике.

</body>

</html>

Если все сделано правильно, то после сохранения данных и открытия страницы в окне Интернет-обозревателя она будет выглядеть так, как показано на рис. 5.40.

Рис. 5.40. Параметры отправки данных

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

Вставка в веб-документ графических объектов

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

Рис. 5.41. Вкладка Мультимедиа

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

Рис. 5.42. Вставка графических объектов

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

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

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

ПРИМЕЧАНИЕ

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

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

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

Завершается процесс вставки графического объекта нажатием в данном окне кнопки ОК. В листинге 4.17 показан программный код веб-страницы, с которой мы работали ранее, после вставки в него изображения в соответствии с настройками, представленными на рис. 5.42.

Листинг 4.17. Вставка графического объекта в веб-документ

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<img src="образец.jpg" style="width:300px;height:200px;" alt="Извините, рисунок временно отсутствует">

Полученные знания применим на практике.

</body>

</html>

После сохранения выполненных изменений и открытия веб-страницы в окне Интернет-обозревателя она должна выглядеть так, как показано на рис. 5.43.

Рис. 5.43. Вставка графического объекта

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

Вставка в веб-документ флеш-ролика

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

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

Вставка флеш-объектов в программе NeonHtml осуществляется на вкладке Мультимедиа с помощью кнопки Флеш-ролик, которая является крайней справа (см. рис. 5.41). При нажатии данной кнопки на экране открывается окно, изображенное на рис. 5.44.

Рис. 5.44. Настройка вставки флеш-ролика

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

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

Если необходимо, чтобы данный флеш-ролик успешно взаимодействовал с объектами JavaScript, установите флажок Совместим с JavaScript, расположенный внизу окна.

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

Вставка в веб-документ видеоролика

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

Для этого на вкладке Мультимедиа нужно нажать кнопку Видеоролик. При этом на экране отобразится окно, изображенное на рис. 5.45.

Рис. 5.45. Настройка параметров вставки видеоролика

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

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

В поле alt с клавиатуры можно ввести альтернативный текст, который будет отображаться на экране в том случае, если видеоролик по каким-то причинам не может быть воспроизведен (например, когда Интернет-обозреватель не поддерживает работу с подобными объектами либо когда воспроизведение видеороликов в нем отключено, и т.п.). Например, здесь можно ввести следующее значение: Извините, видео временно отсутствует (см. рис. 5.45).

Возможности программы позволяют вставить видеоролик таким образом, что при подведении к нему указателя мыши будет отображаться соответствующая всплывающая подсказка. Текст этой подсказки вводится с клавиатуры в поле title.

Завершается процесс вставки видеоролика нажатием в данном окне кнопки ОК. В листинге 4.18 показан программный код веб-страницы, с которой мы работали ранее, после вставки в него видеоролика в соответствии с настройками, представленными на рис. 5.45.

Листинг 4.18. Вставка видеоролика в веб-документ

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<img dynsrc="vts_01_1.vob" style="width:300px;height:200px;" alt="Извините, видео времено отсутствует">

Полученные знания применим на практике.

</body>

</html>

После сохранения выполненных изменений и открытия веб-страницы в окне Интернет-обозревателя можно воспроизвести имеющийся в ней видеоролик.

Быстрый поиск и замена данных в программе NeonHtml

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

Чтобы приступить к поиску данных, нужно в главном меню программы выполнить команду Выполнить ? Окна, диалоги ? Поиск, замена, которая вызывается также нажатием клавиши F3. Также можно воспользоваться кнопкой Поиск, замена, которая расположена в панели инструментов рабочей области (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающей подсказки при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране отображается окно настройки параметров поиска и замены, изображенное на рис. 5.46.

Рис. 5.46. Настройка параметров поиска и замены

В данном окне в поле Что нужно ввести фрагмент текста или программного кода, который требуется найти. Например, на рис. 5.46 в данном поле введено значение green, следовательно – данное слово будет являться объектом поиска.

Под полем Что с помощью соответствующих параметров можно выполнить дополнительную настройку поиска. Если необходимо, чтобы в процессе поиска учитывался регистр символов (прописные или строчные), то установите флажок Учитывать регистр. В этом случае, если в поле Что введено слово green, то слово Green при поиске будет проигнорировано. Чтобы начать поиск с каретки, установите флажок Начать с каретки.

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

Текстовый фрагмент, которым необходимо заменить найденный фрагмент, вводится в поле Чем.

Возможности программы предусматривают выполнение поиска и замены данных в текущем документе, в предварительно выделенном фрагменте или сразу в нескольких документах. Требуемый вариант указывается с помощью соответствующего переключателя. Если вы хотите выполнить поиск сразу в нескольких документах, то необходимо сформировать их список в нижней части окна. Чтобы добавить документ в этот список, нужно нажать кнопку Добавить документы, затем в открывшемся окне найти требуемый файл и выделить его щелчком мыши, после чего нажать кнопку Открыть. Если какой-то документ необходимо удалить из списка, выделите его щелчком мыши и нажмите кнопку Удалить. Чтобы быстро удалить из списка все документы, используйте кнопку Очистить. Помните, что при удалении документов из списка необходимо соблюдать осторожность, поскольку программа не выдает дополнительный запрос на подтверждение операции удаления.

Чтобы запустить поиск данных в соответствии с установленными параметрами, нажмите в данном окне кнопку Найти. Для выполнения поиска с одновременной заменой данных нажмите кнопку Заменить. Если установить флажок Не скрывать окно, то во время поиска и замены окно настройки параметров будет отображаться на экране. При снятом данном флажке окно будет скрыто сразу после нажатия кнопки Найти или Заменить.

Глава 6.
Программа Extra Hide Studio – универсальный редактор для веб-разработчиков

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

В этой главе мы познакомимся еще с одним продуктом, предназначенным для создания и администрирования сайтов. Эта программа называется Extra Hide Studio, и отлично подходит как для начинающих веб-разработчиков, так и для профессионалов. Реализованные в ней возможности позволяют быстро и эффективно сконструировать веб-ресурс практически любой сложности.

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

Скачать программу Extra Hide Studio можно на сайте разработчика по адресу http://ruxesoft.net/downloads/extrahide.php. К скачиванию предлагается rar-архив объемом около 1,5 Мб. Отметим, что последняя версия программы 6.0 (от 2010 года) адаптирована для эксплуатации  в операционных системах Windows Vista и Windows 7 (разумеется, она работает и в более ранних версиях).

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

Что может и умеет программа Extra Hide Studio

Функциональные возможности, реализованные в программе Extra Hide Studio, предусматривают решение перечисленных ниже задач.

•  Создание, администрирование и поддержка веб-ресурсов любой направленности, сложности и объема.

• Ввод, редактирование и форматирование текстового контента.

• Вставка гиперссылок, графических объектов, таблиц, скриптов, форм и прочих элементов.

• Ведение веб-разработки с применением передовых технологий РНР, JavaScript, использованием стилей CSS.

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

• Быстрый ввод наиболее востребованных у веб-разработчиков тегов.

• Просмотр текущей веб-страницы в окне Интернет-обозревателя.

• Гибкая настройка программы в соответствии с потребностями конкретного пользователя и спецификой решаемых им задач.

• Создание новых веб-страниц как «с нуля», так и на основании имеющихся шаблонов и заготовок.

• Быстрый поиск и замена данных.

• Выполнение ряда популярных операций с помощью встроенных соответствующих Мастеров.

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

Первое знакомство с программой

Для запуска программы Extra Hide Studio можно использовать соответствующую команду программной папки Пуск ? Extra Hide Studio 2010 либо ярлык на рабочем столе. В любом случае на экране отобразится ее пользовательский интерфейс, который представлен на рис. 6.1.

Рис. 6.1. Пользовательский интерфейс программы Extra Hide Studio

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

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

Под панелью инструментов находится панель со вкладками. Каждая вкладка предназначена для выполнения соответствующих действий с текущим документом. Например, на вкладке Шрифт ведется работа по форматированию текстовой части контента, вкладка Таблица предназначена для формирования и вставки таблиц, и т. д. Как мы уже знаем, такой подход практикуется во многих HTML-редакторах, с некоторыми из которых мы познакомились в предыдущих главах книги.

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

Важно

Если в данный момент открыто несколько документов в разных рабочих окнах, то для выбора этих документов используйте соответствующие вкладки, которые находятся вверху рабочей области. На рис. 6.1 эта вкладка называется «без имени» (поскольку документ создан только что, и пока еще не сохранен).

Слева от рабочей области находится панель навигатора, с помощью которой можно быстро просматривать содержимое дисков и папок компьютера. А справа от рабочей области расположена панель быстрого ввода: она позволяет вставлять в документ требуемые теги и иные элементы программного кода одним щелчком мыши. Отметим, что содержимое панели быстрого ввода зависит от того, какое значение выбрано в раскрывающемся списке, расположенном вверху данной панели. На рис. 6.1 в этом списке выбрано значение HTML, поэтому в панели представлен перечень HTML-тегов. Также в этом списке можно выбрать значение CSS, JavaScript или РНР (тогда в панели быстрого запуска можно будет выбирать соответствующие теги и иные элементы кода).

ПРИМЕЧАНИЕ

Управление отображением панели навигатора и панели быстрого ввода осуществляется с помощью соответствующих команд меню Вид.

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

Подготовка программы к работе

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

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

Рис. 6.2. Настройка программы

Как видно на рисунке, данное окно состоит из нескольких вкладок. Здесь мы рассмотрим только те параметры настройки, которые для начинающих веб-разработчиков являются наиболее актуальными.

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

Если на вкладке Базовые установлен флажок Автоопределение подсветки синтаксиса, то при открытии документа подсветка синтаксиса будет выбрана автоматически.  А для того чтобы упростить возврат из полноэкранного режима (который включается с помощью команды главного меню Вид ? Полноэкранный режим или нажатием комбинации клавиш Ctrl+U), рекомендуется установить флажок Показывать окно возврата из полн. экран. режима. Тогда при работе в полноэкранном режиме на экране будет отображаться небольшое окно, предназначенное для возврата в прежний режим работы. При отсутствии этого окна (то есть при снятом флажке Показывать окно возврата из полн. экран. режима) пользователи иногда не знают, каким образом вернуться в обычный режим работы.

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

Содержимое вкладки РНР просмотр адресовано в первую очередь тем, кто планирует задействовать в разработке сайта РНР-технологии. В частности, здесь указывается адрес локального сервера (по умолчанию localhost), а также физический путь к папке сервера.

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

Мы рассмотрели, каким образом выполняется ручная настройка Extra Hide Studio. Однако в программе также реализована возможность автоматической настройки – в зависимости от степени подготовки пользователя и наличия у него навыков веб-разработки. Для этого предназначены команды, находящиеся в подменю Опции ? Автоматическая настройка. Для начинающих пользователей рекомендуется включить режим Новичок, для тех, кто более-менее уверенно чувствует себя в веб-разработке – режим Уверенный, ну а для профессионалов предназначен режим Профессионал. Еще один режим, который называется Минимализм, убирает из интерфейса программы практически все вспомогательные инструменты.

Основные действия с веб-документами

Чтобы приступить к заполнению веб-страницы контентом, ее необходимо сначала создать. Чтобы просмотреть и, при необходимости – отредактировать исходный код созданного ранее веб-документа, его нужно открыть. А чтобы не потерять введенные данные, веб-страницу периодически следует сохранять. Далее мы расскажем о том, каким образом в программе Extra Hide Studio осуществляется создание, открытие и сохранение веб-документов.

Создание новой веб-страницы

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

Чтобы создать пустой документ, нужно выполнить команду главного меню Файл ? Создать или нажать кнопку Создать чистый документ в инструментальной панели (эта кнопка является первой слева). В результате в рабочей области появится вкладка без имени, которая будет полностью пустой (см. рис. 6.1): в данном случае вы будете формировать веб-страницу «с нуля».

Для создания стандартной веб-страницы в главном меню программы предназначена команда Файл ? Создать веб-страницу, вызываемая также нажатием комбинации клавиш Ctrl+N. Также для этого можно воспользоваться кнопкой Создать веб страницу, которая находится в инструментальной панели справа от кнопки Создать чистый документ. В результате выполнения любого из перечисленных действий в рабочей области будет создана вкладка без имени, на которой программа автоматически сгенерирует код, представленный в листинге 5.1.

Листинг 5.1. Код, сгенерированный автоматически при создании веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU">

<html>

 <head>

  <title>Заголовок</title>

  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">

  <meta name="keywords" content="ключевые слова">

  <meta name="generator" content="Extra Hide Studio 2010 (www.ruxesoft.net)">

  <meta http-equiv="keywords" content="ключевые слова">

  <meta name="robots" content="INDEX,ALL">

  <meta name="description" content="Описание сайта">

  <meta name="copyright" content="Права">

  <meta name="Document-state" content="Dynamic">

  <meta name="revisit-after" content="10 days">

  <meta name="classification" content="Классификация">

  <meta name="CATEGORY" content="Категории">

  <meta name="language" content="Russian,English">

  <meta name="rating" content="general">

  <meta name="resourse-type" content="document">

 </head>

<body>

</body>

</html>

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

Что касается создания нового веб-документа на основании шаблона, в программе имеется пять разных встроенных шаблонов: Стандартный дизайн, Слева вертикальное меню, Слева и справа вертикальное меню, CSS стиль и Справа вертикальное меню. Выбор подходящего варианта осуществляется с помощью соответствующей команды подменю Файл ? Создать по шаблону. Независимо от того, какой шаблон вы выбрали, в рабочей области будет создана новая вкладка, на которой отобразится соответствующий исходный код веб-страницы, автоматически сгенерированный программой. Отметим, что главное преимущество создания документов на основании шаблонов заключается в том, что уже на начальной стадии формирования веб-страницы ей будет назначен определенный дизайн.

Чаще всего из всех шаблонов используется шаблон Стандартный дизайн (документ на его основании можно создать не только с помощью соответствующей команды, но и нажатием комбинации клавиш Ctrl+D). В данном случае программа автоматически генерирует код, который представлен в листинге 5.2.

Листинг 5.2. Автоматически сгенерированный код веб-страницы стандартного дизайна

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU">

<html>

 <head>

  <title>Стандартный дизайн</title>

  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">

  <meta name="keywords" content="ключевые слова">

  <meta name="generator" content="Extra Hide Studio 2010 (www.ruxesoft.net)">

  <meta http-equiv="keywords" content="ключевые слова">

  <meta name="robots" content="INDEX,ALL">

  <meta name="description" content="Описание сайта">

  <meta name="copyright" content="Права">

  <meta name="Document-state" content="Dynamic">

  <meta name="revisit-after" content="10 days">

  <meta name="classification" content="Классификация">

  <meta name="CATEGORY" content="Категории">

  <meta name="language" content="Russian,English">

  <meta name="rating" content="general">

  <meta name="resourse-type" content="document">

 </head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>

<table width="100%" border=0 cellpadding=0 cellspacing=0>

 <tr width="100%" height=200><td align="center" valign="center">

 <h1>Заголовок</h1>

 </td></tr>

 <tr width="100%"><td>

 Текст

 </td></tr>

</table>

</body>

</html>

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

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

Листинг 5.3. Автоматически сгенерированный код веб-страницы по шаблону «Слева и справа вертикальное меню»

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU">

<html>

 <head>

  <title>Слева и справа вертикальные меню</title>

  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">

  <meta name="keywords" content="ключевые слова">

  <meta name="generator" content="Extra Hide Studio 2010 (www.ruxesoft.net)">

  <meta http-equiv="keywords" content="ключевые слова">

  <meta name="robots" content="INDEX,ALL">

  <meta name="description" content="Описание сайта">

  <meta name="copyright" content="Права">

  <meta name="Document-state" content="Dynamic">

  <meta name="revisit-after" content="10 days">

  <meta name="classification" content="Классификация">

  <meta name="CATEGORY" content="Категории">

  <meta name="language" content="Russian,English">

  <meta name="rating" content="general">

  <meta name="resourse-type" content="document">

 </head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>

<table width="100%" border=0 cellpadding=0 cellspacing=0>

 <tr width="100%" height=200><td colspan=3 align="center" valign="center">

 <h1>Заголовок</h1>

 </td></tr>

 <tr width="100%">

 <td width=150>

 Меню

 </td>

 <td>

 Текст

 </td>

 <td width=150>

 Меню 2

 </td>

 </tr>

</table>

</body>

</html>

Можно прямо сейчас посмотреть, как будет выглядеть страница в окне Интернет-обозревателя (для этого нужно перейти на вкладку Просмотр или нажать клавишу F9) именно в данный момент (рис. 6.3). 

Рис. 6.3. Так выглядит шаблон страницы при просмотре в окне Интернет-обозревателя

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

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

Отметим, что вы можете отредактировать любой имеющийся в программе шаблон по своему усмотрению. Для этого выберите соответствующую команду в подменю Файл ? Редактировать шаблон. В этом же подменю находится несколько команд под одинаковым названием Пустой шаблон: с их помощью вы можете самостоятельно сформировать любой шаблон и впоследствии использовать его для создания новых веб-документов.

Открытие созданного ранее документа для просмотра и редактирования кода

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

Чтобы открыть созданный ранее файл для просмотра и редактирования исходного кода, нужно выполнить команду главного меню Файл ? Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Кроме этого, можно воспользоваться кнопкой Открыть, находящейся в инструментальной панели. После выполнения любого из перечисленных действий на экране отобразится окно открытия документа, которое показано на рис. 6.4.

Рис. 6.4. Выбор файла для открытия

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

Сохранение веб-документа

По мере работы над документом рекомендуется периодически сохранять вносимые в него изменения. Это позволит избежать потери данных при возникновении нештатной ситуации (программный или аппаратный сбой, внезапное отключение электроэнергии, и т.д.). Для сохранения изменений в документе предназначена команда главного меню Файл ? Сохранить, вызываемая также нажатием комбинации клавиш Ctrl+S. Кроме этого, для сохранения изменений вы можете использовать кнопку Сохранить изменения, которая находится в инструментальной панели.

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

При необходимости вы можете сохранить изменения, выполненные в документе, в отдельном файле под другим именем. Для этого нужно в главном меню выполнить команду Файл ? Сохранить как, после чего в открывшемся окне нужно будет указать путь для сохранения и имя файла. Также для этого можно воспользоваться комбинацией клавиш Ctrl+Alt+S или нажать в инструментальной панели кнопку Сохранить как.

Если вы работаете с несколькими документами, то можно одновременно сохранять изменения сразу во всех этих файлах. Для этого в главном меню предназначена команда Файл ? Сохранить все. Также можно воспользоваться кнопкой Сохранить все открытые документы, которая находится в инструментальной панели.

Описание режимов работы

Далее мы рассмотрим основные режимы работы, необходимые для создания полноценного веб-документа средствами программы Extra Hide Studio. Начнем с самого начала – с построения структуры веб-документа, после чего добавим и отформатируем текстовый контент, научимся вставлять гиперссылки, графические объекты, таблицы и прочие элементы, и т. д. При этом мы все время будем отслеживать результат выполненных действий, просматривая страницу в окне Интернет-обозревателя.

Как выполнить предварительную разметку веб-документа?

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

Проще всего предварительную разметку веб-документа делать с помощью панели быстрого ввода, которая расположена в правой части окна программы (см. рис. 6.1). Напомним, что управление отображением данной панели осуществляется с помощью команды главного меню Вид ? Быстрый ввод.

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

Первое, что нужно сделать – это идентифицировать наш Html-документ. Для этого в панели быстрого ввода нужно выбрать позицию html – в результате в рабочей области появятся теги <html></html>, между которыми будет помещен весь остальной исходный код веб-страницы.

После этого подготовим место для заголовка нашего документа. Для этого выберем в панели быстрого ввода позицию вначале head, а затем – title (перед этим поместим курсор между тегами <head> </head>). В результате в программный код добавится следующий фрагмент: <head><title> </title></head>.

Далее после закрывающего тега </head> нажмем клавишу Enter и в новой строке введем теги основного текста – <body></body>. Затем в этот контейнер поместим тег ссылки – для этого в панели быстрого доступа выберем позицию img. А после этого сформируем «каркас» таблицы, выбрав в панели быстрого доступа позиции table, td и tr.

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

Листинг 5.4. Предварительная разметка веб-страницы

<html>

<head><title> <title></head>

<body>

<img src="" border="" alt="">

<table border="" cellpadding="" cellspacing="" bordercolor="">

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

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

Ввод и форматирование текстовой части контента

Большинство веб-разработчиков после построения структуры веб-документа приступают к написанию и форматированию текстовой части контента. Мы не будем отступать от этого правила и расскажем, как это делается в программе Extra Hide Studio.

Присвоим нашей странице название Сведения о компании, и сформируем в ней следующий текст:

Наша компания была создана в 2005 году. За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов. Наша прибыль постоянно растет, и мы задумываемся о расширении. Будем рады видеть вас в числе наших клиентов!

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

Листинг 5.5. Ввод текстовой части контента

<html>

<head><title>Сведения о компании</title></head>

<body>

Наша компания была создана в 2005 году.

За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.

Наша прибыль постоянно растет, и мы задумываемся о расширении.

Будем рады видеть вас в числе наших клиентов!

</body>

</html>

Теперь просмотрим, как в данный момент будет выглядеть наша страница в окне Интернет-обозревателя, предварительно сохранив выполненные изменения (рис. 6.5).

Рис. 6.5. Вид страницы в окне Интернет-обозревателя

Отметим, что в программе имеется встроенный обозреватель, позволяющий просматривать текущую страницу. Он находится на вкладке Просмотр рабочей области, его можно также вызвать нажатием клавиши F9 или с помощью команды главного меню Файл ? Просмотр. Это довольно удобно, но в данном обозревателе не отображается название веб-страницы.

Теперь сделаем так, чтобы каждая фраза текста начиналась с новой строки. Для этого нужно поочередно установить курсор после каждой фразы и нажать кнопку BR на вкладке Основные. В результате после каждой фразы появится тег <br>, предназначенный, как известно, для вставки разрыва.

Теперь добавим на нашу страницу заголовок и займемся форматированием текстовой части контента. Для этого нам нужно перейти на вкладку Шрифт, содержимое которой показано на рис. 6.6.

Рис. 6.6. Инструменты, предназначенные для форматирования текста

В строке, следующей за тегом <body>, введем приветственную фразу Добро пожаловать, затем выделим ее и нажмем в инструментальной панели данной вкладки кнопку H1. Как нетрудно догадаться, эта кнопка предназначена для создания заголовков первого уровня путем вставки тегов <h1> </h1>. Аналогичным образом кнопки Н2, H3, H4, Н5 и Н6 предназначены для создания заголовков соответственно со второго по шестой уровни.

Следовательно, в результате нажатия кнопки Н1 фраза Добро пожаловать будет заключена в теги <h1> </h1>.

Теперь сделаем так, чтобы первая после заголовка фраза отображалась жирным шрифтом. Для этого выделим ее и в инструментальной панели вкладки Шрифт нажмем кнопку В – в исходном коде данная фраза будет заключена в теги <b> </b>. Отметим, что аналогичным образом вы можете включать курсивное (его мы применим к последней фразе текста, заключив ее в теги <i> </i>), подчеркнутое или зачеркнутое начертание шрифта – для этого в инструментальной панели предназначены соответствующие кнопки.

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

Листинг 5.6. Форматирование текста

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь сохраним выполненные изменения и перейдем на вкладку Просмотр (рис. 6.7).

Рис. 6.7. Вид страницы с отформатированным текстом на вкладке Просмотр

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

Кроме этого, на вкладке Выравнивание имеются кнопки для выравнивания текста на странице. Эти кнопки перечислены ниже.

•  По левому краю – при нажатии данной кнопки текст выравнивается по левому краю.

• По центру – с помощью данной кнопки текст можно выровнять по центру.

• По правому краю – при нажатии данной кнопки текст выравнивается по правому краю.

• По ширине – в данном случае текст будет растянут по всей ширине веб-страницы.

Порядок применения кнопок прост: нужно выделить в исходном коде соответствующий  текстовый фрагмент и нажать требуемую кнопку.

Вставка графических объектов

В данном разделе мы рассмотрим, каким образом в веб-документ можно вставить изображение, картинку или иной графический объект. Отметим, что возможности программы предусматривают вставку графических объектов тремя способами. Первый заключается в том, чтобы просто вручную ввести фрагмент исходного кода, необходимый для вставки на страницу изображения. Второй частично автоматизирует данный процесс: для этого на вкладке Вставка нужно нажать кнопку Картинку (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши) – в результате в то место, где находился курсор, будет добавлен следующий фрагмент кода: <img src="« border=»" alt="« width=»" height="">. Как мы уже знаем, этот фрагмент необходимо дополнить значениями атрибутов, как минимум – указать имя файла графического объекта. Также можно ввести толщину рамки, которой будет обрамлен объект, альтернативный текст, который будет отображаться при невозможности отображения графического объекта, и др.

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

Итак, установим курсор в строку, следующую за фразой Наша компания была создана в 2005 году (мы продолжаем работать с исходным кодом, который сформировали ранее). После этого выполним команду главного меню Утилиты ? Мастер вставки изображения или в инструментальной панели, которая расположена слева внизу окна, нажмем кнопку Мастер вставки картинки (чтобы прочесть название кнопки, подведите к ней указатель мыши). В результате любого из этих действий на экране отобразится окно, изображенное на рис. 6.8.

Рис. 6.8. Мастер вставки изображения

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

После выбора изображения нажимаем кнопку Открыть либо клавишу Enter – в результате в наш исходный код будет добавлен следующий фрагмент: <img src="Образец.jpg" width="320" height="240" border=0 alt="">. В этом фрагменте, как мы видим, автоматически сформировано значение атрибута src —этим значением является имя файла графического объекта, а также указаны размеры изображения в пикселях. Дополним фрагмент: зададим обрамление изображения рамкой толщиной 10 пикселей, и введем альтернативный текст, который будет отображаться при невозможности отображения картинки (например, по причине отключения соответствующей функциональности в настройках Интернет-обозревателя) – Извините, изображение не может быть показано. После данного фрагмента вставим тег <br>, чтобы следующая фраза была начата с новой строки, а не начиналась сразу после графического объекта. В результате выполненных действий исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 5.7.

Листинг 5.7. Вставка графического объекта с указанием его размеров, толщины рамки, альтернативного текста

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>

За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием в инструментальной панели кнопки Сохранить изменения, и перейдем на вкладку Просмотр. Результат выполненных действий показан на рис. 6.9.

Рис. 6.9. Вставка графического объекта

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

Рис. 6.10. Отображение альтернативного текста

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

Вставка гиперссылок на внутренние и внешние ресурсы

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

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

При нажатии кнопки Ссылку в исходный код страницы (а именно – в то место, где находится курсор) будет вставлен следующий фрагмент: <a href="« class=»" title=""></a>. Очевидно, что его необходимо дополнить, как минимум – вставить адрес гиперссылки, которым может являться как имя файла другой веб-страницы этого же сайта, так и веб-адрес любого другого ресурса. Напомним, что адрес гиперссылки является значением атрибута href.

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

Рис. 6.11. Мастер вставки ссылки

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

В поле Название с клавиатуры следует ввести название гиперссылки. Иначе говоря, здесь вводится текст, который на веб-странице будет являться гиперссылкой.

В поле Адрес указывается адрес гиперссылки. Если вы хотите сослаться на другую веб-страницу этого же ресурса – в данном поле нужно ввести имя файла данной страницы (например, Test.html). Если же вам нужно создать ссылку на внешний ресурс, то вводите ее в таком формате, как показано на рис. 6.11. Иначе говоря, при создании ссылки на портал www.yandex.ru нужно вводить адрес так: http://www.yandex.ru.

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

В поле Открывать как из раскрывающегося списка выбирается способ открытия гиперссылки. Возможен выбор одного из трех вариантов – По умолчанию, В новом окне или На все окно.

Завершается процесс формирования и вставки гиперссылки нажатием в данном окне кнопки Добавить. С помощью кнопки Отмена осуществляется выход из данного режима без вставки гиперссылки.

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

Листинг 5.8. Вставка гиперссылки на внешний ресурс

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

После сохранения внесенных изменений наша страница в окне Интернет-обозревателя будет выглядеть так, как показано на рис. 6.12.

Рис. 6.12. Страница с гиперссылкой

Как видно на рисунке, гиперссылкой в данном случае является словосочетание лидирующие позиции, и эта ссылка ведет на портал www.yandex.ru (информация об этом отображается в строке состояния Интернет-обозревателя). Если подвести указатель мыши к гиперссылке, то отобразится всплывающая подсказка со словом Подробности.

Представление данных в табличном виде

Как мы уже неоднократно отмечали ранее, представление данных в табличном виде имеет немало преимуществ: наглядность, компактность, эргономичность, хорошая восприимчивость информации, и др. В данном разделе мы рассмотрим, как осуществляется формирование и вставка таблиц в веб-документ средствами программы Extra Hide Studio.

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

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

Рис. 6.13. Инструменты, предназначенные для формирования и вставки таблиц

Как видно на рисунке, данная вкладка содержит четыре кнопки. С помощью кнопки Таблица в исходный код текущей страницы вставляется фрагмент, позволяющий идентифицировать таблицу и задать ее основные параметры: <table border="« cellpadding=»" cellspacing="« bordercolor=»" bgcolor=""></table>. Теги <table> </table> идентифицируют таблицу, а с помощью атрибутов можно задать толщину рамки таблицы, расстояние от содержимого ячеек до их границ, а также цветовое оформление таблицы.

Кнопки Строка и Столбец предназначены для добавления в таблицу соответственно строк и столбцов. С помощью этих кнопок в исходный код вставляются теги <tr> </tr> и <td> </td>.

Однако формирование таблиц с помощью кнопок Таблица, Строка и Столбец – это, можно сказать, наполовину ручной способ, поскольку многие параметры придется задавать вручную. Намного удобнее воспользоваться режимом автоматического формирования таблиц, который вызывается с помощью кнопки Мастер или команды главного меню Утилиты ? Мастер создания таблиц. Окно Мастера, которое отображается на экране при активизации данной команды, представлено на рис. 6.14.

Рис. 6.14. Создание таблицы в автоматическом режиме

В данном окне в поле Число столбцов с клавиатуры либо с помощью кнопок счетчика вводится количество столбцов создаваемой таблицы. В поле Число строк аналогичным образом задается число строк. С помощью кнопок Цвет фона и Цвет обрамления можно задать соответственно цвет фона таблицы, и цвет ее рамки. Толщина рамки выбирается из раскрывающегося списка в поле Толщина обрамления (диапазон возможных значений – от 0 до 15), это значение выражается в пикселях. Очевидно, что использование параметра Цвет обрамления имеет смысл только в том случае, если в таблице планируется использовать рамку (то есть если в поле Толщина обрамления указано любое значение, кроме 0).

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

В листинге 5.9 представлен код нашей веб-страницы, в которую вставлен код таблицы в соответствии с настройками, изображенными на рис. 6.14.

Листинг 5.9. Исходный код страницы после автоматической вставки таблицы

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<table border=3 bordercolor="#FF8000" bgcolor="#FFFF00" cellspacing=0 cellpadding=3>

 <tr>

  <td>

  </td>

  <td>

  </td>

  <td>

  </td>

  <td>

  </td>

 </tr>

 <tr>

  <td>

  </td>

  <td>

  </td>

  <td>

  </td>

  <td>

  </td>

 </tr>

 <tr>

  <td>

  </td>

  <td>

  </td>

  <td>

  </td>

  <td>

  </td>

 </tr>

</table>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь доработаем наш код, присвоив атрибуту cellspacing значение 3, и введя информацию в ячейки таблицы. Будем считать, что в таблице представлена информация о прибыли компании в каждом месяце текущего года. После внесения всех требуемых изменений код нашей веб-страницы будет выглядеть так, как показано в листинге 5.10.

Листинг 5.10. Исходный код страницы с готовой таблицей

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<table border=3 bordercolor="#FF8000" bgcolor="#FFFF00" cellspacing=3 cellpadding=3>

 <tr>

  <td>

январь 5000

  </td>

  <td>

февраль 3500

  </td>

  <td>

март 7200

  </td>

  <td>

апрель 4700

  </td>

 </tr>

 <tr>

  <td>

май 8200

  </td>

  <td>

июнь 7900

  </td>

  <td>

июль 5900

  </td>

  <td>

август 6400

  </td>

 </tr>

 <tr>

  <td>

сентябрь 5700

  </td>

  <td>

октябрь 9100

  </td>

  <td>

ноябрь 8400

  </td>

  <td>

декабрь 9900

  </td>

 </tr>

</table>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить или нажатием в инструментальной панели кнопки Сохранить изменения и откроем страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 6.15.

Рис. 6.15. Готовая таблица на веб-странице

Как и планировали, мы получили таблицу, состоящую из трех строк и четырех столбцов, с желтым фоном и красной рамкой толщиной 3 пикселя.

Как вставить в веб-документ мультимедийный объект?

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

В программе Extra Hide Studio реализована возможность вставки в веб-документ мультимедийных объектов. Это можно сделать вручную, добавив соответствующий фрагмент кода в исходный код веб-страницы (при этом можно использовать панель быстрого ввода, расположенную в правой части интерфейса), но намного удобней и целесообразней воспользоваться режимом автоматический вставки объектов мультимедиа, который называется Мастер вставки мультимедиа.

Для перехода в данный режим работы нужно выполнить команду главного меню Утилиты ? Мастер вставки мультимедиа, либо нажать в инструментальной панели, расположенной слева внизу окна, кнопку Мастер вставки мультимедиа. При выполнении любого из этих действий на экране откроется окно Мастера, изображенное на рис. 6.16.

Рис. 6.16. Мастер вставки мультимедиа

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

В первую очередь в поле Формат данных нужно из раскрывающегося списка выбрать формат мультимедийного файла, который вы хотите поместить на свою страницу. Возможности программы предусматривают работу с тремя типами мультимедийных файлов: Флэш (SWF), Видео (AVI) и MIDI (MID).

В поле Выравнивание можно указать способ выравнивания мультимедийного объекта на странице. Требуемое значение выбирается из раскрывающегося списка, возможные варианты – Не указывать, Слева, Справа и Посередине. По умолчанию в данном поле установлено значение Не указывать.

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

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

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

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

В листинге 5.11 представлен исходный код нашей веб-страницы, в которую вставлен видеофайл Ролик.avi в соответствии с настройками, изображенными на рис. 6.16. При этом мы удалили из этого кода фрагменты, который ранее сформировали для вставки таблицы и изображения, поскольку в данном случае они неактуальны, а после кода вставки видеофайла добавили тег <br>, чтобы следующий за мультимедийным файлом текст начинался с новой строки.

Листинг 5.11. Вставка мультимедийного объекта в веб-документ

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<embed src="Ролик.avi" width=300 height=300><noembed>Ваш браузер не позволяет отображать содержимое данной страницы</noembed></embed><br>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь нажмем в инструментальной панели главного окна программы кнопку Сохранить изменения, и откроем страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 6.17.

Рис. 6.17. Вставка видеофайла в веб-документ

Как видно на рисунке, для использования видеофайла можно применять инструменты, знакомые каждому пользователю мультимедийных проигрывателей: кнопки остановки и возобновления воспроизведения, перемотки вперед и назад, и др.

Как создать форму отправки данных и вставить ее в веб-документ?

Как мы уже знаем, на многих современных сайтах используется такой инструмент, как форма отправки данных. Он может использоваться, например, для проведения опросов, социологических и маркетинговых исследований, для регистрации посетителей сайта и их последующей авторизации на сайте, для совершения покупок в Интернет-магазинах, и т. д. В программе Extra Hide Studio реализован удобный механизм для автоматического создания форм, включающих в себя набор параметров для ввода и отправки данных.

Чтобы создать форму, рекомендуется не вводить ее код вручную, а воспользоваться Мастером создания форм, который вызывается с помощью команды главного меню Утилиты ? Мастер создания форм или нажатием соответствующей кнопки инструментальной панели, находящейся слева внизу окна. В результате на экране отобразится окно Мастера, которое показано на рис. 6.18.

Рис. 6.18. Мастер создания форм

В данном окне задаются основные параметры вставляемой в документ формы. Вначале в области настроек Параметры нужно в соответствующих полях указать путь передачи данных, а также имя формы.

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

Информация о текстовых полях ввода указывается в области настроек Поля ввода. В поле Количество с клавиатуры или из раскрывающегося списка вводится количество текстовых полей, которые должны быть вставлены в форму (максимальное значение данного поля – 100). В поле Размер аналогичным образом указывается размер каждого из этих полей, а в поле Макс. символов – максимальное число символов, которое может ввести в данное поле посетитель сайта.

Если вы хотите добавить в форму одну или несколько кнопок, то укажите их количество в соответствующем поле области настроек Кнопки.

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

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

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

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

Листинг 5.12. Вставка формы в веб-документ

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<form name="myform" method="post" action="?action=form">

<input type="text" value="" name="inputname0" size=20 maxlength=30>

<input type="text" value="" name="inputname1" size=20 maxlength=30>

<select name="select_0">

<option value="0">Выбор 0

<option value="1">Выбор 1

<option value="2">Выбор 2

</select>

<select name="select_1">

<option value="0">Выбор 0

<option value="1">Выбор 1

<option value="2">Выбор 2

</select>

<textarea name="text_0" cols=70 rows=5>Текст</textarea>

<input type="submit" name="submit" value="Отправить">

</form>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Если мы сохраним выполненные изменения и откроем страницу в окне интернет-обозревателя, то в данный момент она будет выглядеть так, как это показано на рис. 6.19.

Рис. 6.19. Вставка формы в веб-документ

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

Для этого изменим исходный код нашей веб-страницы так, как показано в листинге 5.13.

Листинг 5.13. Изменение значений параметров формы

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<form name="myform" method="post" action="?action=form">

<input type="text" value="Предложение" name="inputname0" size=20 maxlength=30>

<input type="text" value="Спрос" name="inputname1" size=20 maxlength=30>

<select name="select_0">

<option value="0">Одежда

<option value="1">Обувь

<option value="2">Продукты

</select>

<select name="select_1">

<option value="0">Предоплата

<option value="1">Оплата по факту

<option value="2">Отсрочка платежа

</select>

<textarea name="text_0" cols=70 rows=5>Здесь можете предложить варианты сотрудничества</textarea>

<input type="submit" name="submit" value="Отправить">

</form>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ? Сохранить и откроем страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 6.20.

Рис. 6.20. Присвоение значений параметрам формы

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

Вставка комментариев в программный код веб-страницы

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

Чтобы ввести комментарий, нужно на вкладке Вставка нажать кнопку Добавить комментарий. В результате в то место, где находится курсор, будет вставлен следующий фрагмент: <!–  –>. После восклицательного знака можно вводить любой текст – он никак не повлияет на содержимое веб-страницы в окне интернет-обозревателя.

В листинге 5.14 представлен исходный код нашей веб-страницы, содержащий два комментария.

Листинг 5.14. Комментарии в исходном коде программы

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<! Вначале идет информация о компании>

<b>Наша компания была создана в 2005 году.</b><br>

За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<! Здесь нужно будет добавить форму отправки данных>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Если вы сохраните выполненные изменения и откроете веб-страницу в окне Интернет-обозревателя – увидите, что добавленный текстовый комментарий не отобразится.

Поиск и замена данных

В программе Extra Hide Studio имеется удобный механизм для быстрого поиска и замены данных. Эта возможность особенно актуальна при работе с большими исходными кодами, поскольку поиск данных путем просмотра всего кода может занять слишком много времени, и к тому же не гарантирует положительного результата. В автоматическом же режиме поиск выполняется почти моментально, независимо от размера документа, причем одновременно с этим может осуществляться и замена одних данных другими.

Чтобы приступить к поиску данных, нужно в главном меню программы выполнить команду Поиск ? Найти/Заменить, которая вызывается также нажатием комбинации клавиш Ctrl+F. Также можно воспользоваться кнопкой Найти/Заменить, которая расположена в панели инструментов (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране отображается окно настройки параметров поиска, изображенное на рис. 6.21.

Рис. 6.21. Настройка параметров поиска и замены данных

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

Чтобы поиск осуществлялся с учетом регистра символов, установите флажок с учетом регистра. В данном случае, если в поле Найти введен текст, например, прибыль за квартал, то текст ПРИБЫЛЬ ЗА КВАРТАЛ при поиске будет игнорироваться.

Чтобы включить режим поиска, начиная от текущего положения курсора, нажмите в данном окне кнопку Искать. Если необходимо осуществить поиск по всему программному коду, независимо от текущего положения курсора, нажмите в данном окне кнопку Искать сначала. Аналогичным образом запускается процесс замены данных: при нажатии кнопки Заменить он будет осуществляться от текущего положения курсора к концу документа, а если нажать кнопку Заменить везде, то будет просмотрен весь исходный код, независимо от текущего положения курсора.

Глава 7.
Оптимизация сайта и его продвижение в поисковых системах

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

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

Во-первых, это позволит вам сэкономить деньги. Во-вторых, как мы уже отмечали ранее, при привлечении в раскрутке и оптимизации сайта сторонних лиц есть риск нарваться на мошенников. А в-третьих, неплохую раскрутку сайта можно сделать своими силами, используя для этого специальные программные продукты. Далее мы расскажем, как это делается на примере популярной программы, специально созданной для продвижения и оптимизации сайтов, которая имеет характерное название – Page Promoter.

Общие сведения о программе Page Promoter

Автором и разработчиком этого продукта является российская компания NetPromoter (сайт компании – http://netpromoter.ru). Программа является условно-бесплатной, ее демонстрационная версия имеет несколько функциональных ограничений. Тем не менее, их вполне достаточно для того, чтобы оценить продукт и принять решение о целесообразности его дальнейшего использования.

Демонстрационную версию Page Promoter вы можете скачать на сайте разработчика по адресу http://netpromoter.ru/download.htm. К скачиванию предлагается дистрибутив объемом примерно 9 Мб.

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

Программа Page Promoter отличается довольно скромными по нынешним временам системными требованиями. В частности, она нормально функционирует на компьютере с тактовой частотой процессора от 1 ГГц, минимальным объемом оперативной памяти 256 Мб и свободным дисковым пространством 100 Мб. На компьютере должна быть установлена любая операционная система семейства Windows, начиная с версии Windows 98 (причем для версий, предшествующих Windows XP, будет достаточно и 128 Мб оперативной памяти). Также необходимо наличие Интернет-обозревателя Internet Explorer версии не ниже 5.5, действующего подключения к Интернету, а также доступность файлов продвигаемого и оптимизируемого сайта для редактирования. Монитор должен иметь разрешение 1024х768 пикселей.

Программа Page Promoter включает в себя несколько разделов: Подготовка, Продвижение, Анализ, Исследование и Планирование.  Каждый раздел, по сути, представляет собой очередной этап раскрутки и оптимизации сайта (предварительно нужно создать для сайта профиль). Таким образом, вы имеете возможность в пошаговом режиме последовательно выполнить полноценное продвижение своего веб-ресурса.

Пользовательский интерфейс и основные правила работы с программой

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

Рис. 7.1. Программа Page Promoter

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

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

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

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

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

Как создать новый профиль?

Чтобы начать работу по оптимизации и продвижению сайта, необходимо создать для него профиль (как мы уже отмечали ранее, каждому сайту соответствует свой профиль). Для перехода в режим создания нового профиля нужно выполнить команды главного меню Профиль ? Новый (эта команда вызывается также нажатием комбинации клавиш Ctrl+N) или нажать в инструментальной панели кнопку Новый. В результате на экране откроется окно, изображенное на рис. 7.2.

Рис. 7.2. Создание нового профиля

В данном окне необходимо заполнить два параметра. В поле Название профиля с клавиатуры вводится произвольное имя профиля (например, Личный сайт, Корпоративный портал, и т.п.). Рекомендуется присваивать профилю такое название, чтобы оно кратко характеризовало его суть.

В поле URL веб-сайта нужно указать URL-адрес веб-ресурса, которому необходимо сделать оптимизацию и продвижение.

Завершается добавление профиля нажатием в данном окне кнопки ОК. С помощью кнопки Отмена осуществляется выход из данного режима без сохранения выполненных изменений.

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

Ввод ключевых слов и описания сайта

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

Рис. 7.3. Первый этап ввода дополнительной информации

В соответствующих полях данного окна вводится URL-адрес и название профиля. Затем в поле Описание с клавиатуры вводится произвольное описание веб-ресурса, кратко отражающее его суть.

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

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

Чтобы удалить позицию из списка ключевых слов нужно выделить ее щелчком мыши и нажать в инструментальной панели кнопку Удалить выбранные (также для этого можно воспользоваться комбинацией клавиш Ctrl+Delete). При этом программа выдаст дополнительный запрос на подтверждение операции удаления.

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

Формирование списка конкурирующих ресурсов

Для перехода к следующему этапу ввода дополнительной информации нажмите кнопку Вперед. В результате на экране откроется окно, изображенное на рис. 7.4.

Рис. 7.4. Формирование списка конкурирующих ресурсов

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

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

Чтобы удалить адрес из списка конкурирующих ресурсов, нужно выделить его щелчком мыши и нажать в инструментальной панели кнопку Удалить выбранные (также для этого можно воспользоваться комбинацией клавиш Ctrl+Delete). При этом программа выдаст дополнительный запрос на подтверждение операции удаления.

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

Настройка FTP-соединения

Для продолжения ввода данных нажмите кнопку Вперед. В результате на экране откроется окно, которое представлено на рис. 7.5.

Рис. 7.5. Настройка соединения с FTR-сервером

В данном окне настраиваются параметры соединения с FTP-сервером. В соответствующих полях вводится адрес хоста, порт соединения (по умолчанию предлагается порт 21 – это значение является оптимальным для большинства пользователей), имя пользователя и пароль, а также путь к корневой папке сайта на удаленном FTP-сервере.

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

С помощью кнопки Тест соединения вы можете проверить, как действует настроенное FTP-соединение.

В поле Стартовая страница локального сайта указывается путь к файлу стартовой страницы сайта на локальном компьютере. Для заполнения данного поля нужно нажать расположенную справа от него кнопку Открыть стартовую страницу, затем в появившемся окне указать путь к требуемому файлу, выделить его щелчком мыши и нажать кнопку Открыть или клавишу Enter.

Если на этом вы хотите закончить ввод данных, нажмите в данном окне кнопку Завершить.

Ввод персональных данных

Для продолжения ввода данных нажмите кнопку Вперед – в результате на экране откроется окно, которое показано на рис. 7.6.

Рис. 7.6. Ввод персональных данных

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

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

Если на этом вы хотите закончить ввод данных, нажмите в данном окне кнопку Завершить.

Ввод альтернативных вариантов заголовка и описания сайта

Для продолжения ввода данных нажмите кнопку Вперед. Теперь нужно будет указать альтернативные варианты названия сайта и его описания (рис. 7.7).

Рис. 7.7. Ввод альтернативного заголовка и описания сайта

Например, если сайт называется Все об автомобилях, то его альтернативными названиями могут быть Все о Машинах, Все что вы хотели знать об авто, Мир автомобилей, и т. д. Аналогичным образом формируются альтернативные варианты описаний.

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

В случае надобности вы можете отредактировать любую введенную ранее запись. Для этого нужно выделить ее щелчком мыши и нажать в инструментальной панели кнопку Редактировать выбранный, после чего с клавиатуры внести требуемые изменения и нажать клавишу Enter либо просто щелкнуть мышью в любом свободном месте списка.

Чтобы удалить позицию из списка, щелкните на ней мышью и нажмите в инструментальной панели кнопку Удалить выбранные (также для этого можно воспользоваться комбинацией клавиш Ctrl+Delete). При этом программа выдаст дополнительный запрос на подтверждение операции удаления.

Вы можете импортировать список с вариантами заголовков (описаний) из предварительно созданного текстового файла. Для этого нужно в инструментальной панели нажать кнопку Импортировать из текстового файла, после чего в открывшемся окне указать путь к требуемому файлу и нажать кнопку Открыть. С помощью кнопки Экспортировать в текстовый файл вы можете сохранить в отдельном файле список альтернативных заголовков (описаний) для последующего использования. Если на этом вы хотите закончить ввод данных, нажмите в данном окне кнопку Завершить.

Выбор категории сайта для регистрации в поисковых системах

Для продолжения ввода данных нажмите кнопку Вперед. Теперь нужно выбрать категорию, к которой будет относиться ваш сайт (рис. 7.8). 

Рис. 7.8. Выбор категории для сайта

В данном окне представлен иерархический список категорий, к которой следует отнести ваш сайт. Для выбора категории нужно раскрыть соответствующий узел иерархии, щелкнуть мышью на требуемой категории и нажать кнопку Выбрать текущую категорию, которая расположена справа от списка (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши). Выбранная категория будет помечена жирным шрифтом (на рис. 7.8 выбрана категория Авто/мото – Запчасти).

Если вы не нашли в списке подходящую категорию, то можете ввести ее название с клавиатуры в поле Предлагаемая дополнительная категория.

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

Как открыть созданный ранее профиль?

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

Для открытия профиля следует выполнить команду главного меню Профиль ? Открыть, которая вызывается также нажатием комбинации клавиш Ctrl+O, либо нажать в инструментальной панели кнопку Открыть. В результате выполнения любого из перечисленных действий на экране отобразится окно Менеджер профилей (рис. 7.9).

Рис. 7.9. Менеджер профилей

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

Чтобы открыть профиль, нужно выделить в списке соответствующую позицию щелчком мыши и нажать внизу окна кнопку ОК либо клавишу Enter.

Из менеджера профилей вы можете перейти в режим формирования нового профиля. Для этого в инструментальной панели данного окна нужно нажать кнопку Новый. О том, как действовать дальше, рассказывается выше, в разделе «Как создать новый профиль?».

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

Для перехода в режим просмотра и редактирования остальных параметров профиля (URL-адрес, список ключевых слов, и т.д.), нужно выделить профиль щелчком мыши и нажать в инструментальной панели кнопку Редактировать. При этом на экране откроется окно редактирования профиля, в котором выполняются все необходимые корректировки.

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

Исследование ключевых слов

Чтобы провести исследование ключевых слов, нужно выбрать в разделе Подготовка модуль Исследование ключевых слов (это можно сделать как с помощью соответствующей ссылки, расположенной в левой части окна, так и с помощью команды главного меню Модули ? Подготовка ? Исследование ключевых слов). В результате окно программы примет вид, как показано на рис. 7.10.

Рис. 7.10. Исследование ключевых слов

Процесс исследования проводится следующим образом. Вначале на вкладке Рейтинг слова в поле Слово из раскрывающегося списка выбирается ключевое слово, которое вы хотите исследовать. Отметим, что этот список включает в себя перечень ключевых слов, сформированных ранее для данного сайта. Затем в нижней части вкладки щелчком мыши нужно выбрать ресурс, на котором будет проводиться анализ (например, Rambler, или Mail.ru, и др.).

После этого нужно нажать кнопку Анализировать – и через некоторое время в таблице, расположенной чуть ниже параметра Слово, отобразятся результаты поиска данного ключевого слова. Теперь нужно в сформированном списке (в демонстрационной версии программы этот список составляет не более пяти позиций, см. рис. 7.10) выделить щелчком мыши интересующую позицию и нажать кнопку Добавить к результатам. После этого результат анализа данного слова отобразится в правой части вкладки (см. рис. 7.10).

Вы можете просмотреть отчет о проведенном анализе ключевых слов – для этого нужно перейти на вкладку Отчет, содержимое которой показано на рис. 7.11.

Рис. 7.11. Формирование отчета

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

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

По результатам анализа ключевых слов вы можете внести соответствующие корректировки в список ключевых слов вашего сайта.

Проверка ссылок

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

Рис. 7.12. Проверка ссылок

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

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

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

В нижней части окна с помощью соответствующих кнопок вы можете просмотреть ссылающиеся и ссылаемые ссылки, якоря, а также текст выбранной ссылки.

На вкладке Отчет вы можете сформировать отчет о выполненной проверке ссылок. Для этого в инструментальной панели данной вкладки следует нажать кнопку Сгеренировать отчет.

Оптимизация страниц

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

Чтобы начать работу с модулем Оптимизация страниц, щелкните в разделе Продвижение на ссылке Оптимизация страниц, либо выберите в главном меню команду Модули ? Подготовка ? Оптимизация страниц. При этом откроется интерфейс модуля, который изображен на рис. 7.13.

Рис. 7.13. Оптимизация страниц

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

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

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

Чтобы удалить адрес из списка конкурирующих ресурсов, нужно выделить его щелчком мыши и нажать в инструментальной панели кнопку Удалить выбранные (также для этого можно воспользоваться комбинацией клавиш Ctrl+Delete). При этом программа выдаст дополнительный запрос на подтверждение операции удаления.

Выбор конкурирующих ресурсов для анализа осуществляется путем установки возле них соответствующих флажков.

Под списком конкурирующих ресурсов формируется перечень ключевых слов для анализа. При этом нужно действовать следующим образом: в текстовом поле вводится ключевое слово, после чего в расположенной справа инструментальной панели нужно нажать кнопку Добавить новую запись в список. Редактирование и удаление позиций списка осуществляется с помощью кнопок соответственно Редактировать выбранный и Удалить выбранные (также для этого можно воспользоваться комбинацией клавиш Ctrl+Delete). При удалении программа выдаст дополнительный запрос на подтверждение данной операции.

Чтобы запустить процесс анализа в соответствии с установленными параметрами, нажмите в инструментальной панели данного окна кнопку Анализировать. Через некоторое время автоматически откроется вкладка Отчет, на которой будут представлены результаты анализа (рис. 7.14).

Рис. 7.14. Результаты анализа

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

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

Автоматическая регистрация сайта в поисковых системах, каталогах и иных ресурсах

Одним из главных преимуществ программы Page Promoter является возможность автоматической регистрации сайта на тысячах самых разных ресурсов (поисковые системы, каталоги, рейтинги, и т.п.). Это позволяет в минимальные сроки значительно повысить цитируемость сайта. Отметим, что возможности модуля Автоматическая регистрация (он входит в раздел Продвижение) позволяют намного упростить работу даже с теми ресурсами, которые имеют защиту от автоматической регистрации.

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

Для перехода в режим автоматической регистрации сайта нужно в левой части окна программы в разделе Продвижение щелкнуть мышью на ссылке Автоматическая регистрация, либо выполнить команду главного меню Модули ? Продвижение ? Автоматическая регистрация. В любом случае на экране отобразится интерфейс модуля, который представлен на рис. 7.15.

Рис. 7.15. Формирование списка регистрируемых страниц

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

Чтобы запустить процесс регистрации, нажмите в данном окне кнопку Зарегистрировать. В результате на экране отобразится окно, в котором будет демонстрироваться информация о ходе регистрации (рис. 7.16).

Рис. 7.16. Информация о ходе регистрации сайта

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

Рис. 7.17. Отчет о регистрации сайта

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

Заключение

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

Автор выражает надежду, что предложенный материал был полезен и интересен читателям. Предложения и пожелания направляйте по адресу: arsen211@yandex.ru.

Оглавление

Введение

Глава 1. С чего начать

  Термины и определения, используемые веб-разработчиками

  Что представляет собой современный веб-сайт?

  Разработка концепции сайта

  Информационное наполнение (контент) сайта

  Понятие статической и динамической веб-страницы

  Как выбрать хостинг

  Что такое доменное имя?

  Как передать файлы сайта на веб-сервер?

  Продвижение сайта и счетчики посещений

Глава 2. Основы веб-программирования с помощью языка HTML

  Общие сведения о языке программирования HTML

  HTML «в действии», или Как просмотреть исходный код страницы

  Создание простейшей веб-страницы

  Основные теги языка HTML

  Оформление содержимого веб-страницы

    Форматирование текста

    Создание маркированного списка

    Создание нумерованного списка

    Представление данных в табличном виде

    Вставка изображений

Глава 3. Разработка сайтов в программе CatsHtml

  Описание пользовательского интерфейса

  Настройка параметров программы

  Создание, открытие и сохранение веб-страниц

  Ввод и редактирование текстового контента веб-страницы

  Вставка специальных элементов

  Вставка дополнительных эффектов

  Вставка таблицы в веб-документ

  Добавление форм ввода данных

  Цветовое оформление веб-страницы

  Работа с буфером обмена

  Автоматизация некоторых действий с помощью Мастеров

    Мастер вставки картинки

    Мастер свойств веб-страницы

    Мастер создания гиперссылок

    Мастер создания опроса

    Мастер создания таблиц

Глава 4. Создание и администрирование сайтов в программе HtmlPad

  Назначение и функциональные возможности программы

  Пользовательский интерфейс и инструментарий программы

  Настройка программы и подготовка ее к работе

  Создание, открытие и сохранение документов

  Поиск и замена данных

  Описание режимов работы

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

    Работа с текстовым контентом

    Вставка гиперссылок и графических изображений

    Вставка объектов JavaScript

    Применение PHP-технологий в программе HtmlPad

    Работа с другими приложениями в программе HtmlPad

Глава 5. Программа NeonHtml – удобный инструмент для разработки веб-сайтов

  Назначение и функциональные возможности программы

  Общие правила работы с программой

  Подготовка программы к работе

    Настройка пользовательского интерфейса

    Настройка параметров программы

  Как создать новый веб-документ?

  Открытие веб-документа для просмотра и редактирования

  Сохранение веб-документов

  Описание режимов работы

    Построение структуры веб-страницы

    Ввод и оформление текстового контента

    Формирование нумерованных, маркированных и выпадающих списков

    Формирование гиперссылок

    Формирование и вставка таблиц в веб-документ

    Создание форм и инструментов для ввода и отправки данных

    Вставка в веб-документ графических объектов

    Вставка в веб-документ флеш-ролика

    Вставка в веб-документ видеоролика

    Быстрый поиск и замена данных в программе NeonHtml

Глава 6. Программа Extra Hide Studio – универсальный редактор для веб-разработчиков

  Что может и умеет программа Extra Hide Studio

  Первое знакомство с программой

  Подготовка программы к работе

  Основные действия с веб-документами

    Создание новой веб-страницы

    Открытие созданного ранее документа для просмотра и редактирования кода

    Сохранение веб-документа

  Описание режимов работы

    Как выполнить предварительную разметку веб-документа?

    Ввод и форматирование текстовой части контента

    Вставка графических объектов

    Вставка гиперссылок на внутренние и внешние ресурсы

    Представление данных в табличном виде

    Как вставить в веб-документ мультимедийный объект?

    Как создать форму отправки данных и вставить ее в веб-документ?

    Вставка комментариев в программный код веб-страницы

    Поиск и замена данных

Глава 7. Оптимизация сайта и его продвижение в поисковых системах

  Общие сведения о программе Page Promoter

  Пользовательский интерфейс и основные правила работы с программой

  Как создать новый профиль?

    Ввод ключевых слов и описания сайта

    Формирование списка конкурирующих ресурсов

    Настройка FTP-соединения

    Ввод персональных данных

    Ввод альтернативных вариантов заголовка и описания сайта

    Выбор категории сайта для регистрации в поисковых системах

  Как открыть созданный ранее профиль?

  Исследование ключевых слов

  Проверка ссылок

  Оптимизация страниц

  Автоматическая регистрация сайта в поисковых системах, каталогах и иных ресурсах

Заключение

• Реклама на сайте

Наш сайт является помещением библиотеки. На основании Федерального закона Российской федерации "Об авторском и смежных правах" (в ред. Федеральных законов от 19.07.1995 N 110-ФЗ, от 20.07.2004 N 72-ФЗ) копирование, сохранение на жестком диске или иной способ сохранения произведений размещенных на данной библиотеке категорически запрешен. Все материалы представлены исключительно в ознакомительных целях.

Copyright © UniversalInternetLibrary.ru - электронные книги бесплатно