Личный сайт с нуля — силами FrontPage 2000
Создание персонального Web-узла
Возможно, читатель слышал, что профессионалы не советуют начинать с программы FrontPage. Чтобы не быть голословным, позволю себе процитировать Артемия Лебедева — руководителя наиболее известной у нас в стране студии Web-дизайна: «При создании страниц я рекомендую удержаться от использования таких программ, как FrontPage, HomePage, PageMill, SiteMill и т.п. Если вы одной рукой мешаете в кастрюле борщ, другой утомительно замачиваете белье, а третьей собираетесь делать сайт, то это ваши программы (они для домохозяек)». Я хочу не столько прокомментировать само это заявление, сколько объяснить, как его следует правильно понимать и кому оно адресовано.
Во-первых, если продукт настолько интуитивно понятен, что даже домохозяйка может при этом делать сайты, разве это не лучший показатель доступности продукта?
Во-вторых, совет «удержаться от использования» адресован, по моему мнению, сравнительно узкой аудитории. Почему? Судите сами. Каждая программа ориентирована на своего пользователя, и чем он профессиональнее, тем меньше шаблонов, макетов и подсказок ему требуется от программы. Это как возможность построить из кирпичей большее разнообразие зданий, чем из панелей с готовыми проемами под окна и двери. В этом смысле простой текстовый редактор — лучшее средство для Web-дизайнера, досконально знающего HTML, но малополезное для менеджера, которому нужно быстро сделать недорогой полнофункциональный сайт.
Нет смысла подробно останавливаться на том, какую популярность приобрел в последнее время Интернет и как интенсивно растут Web-ресурсы. Об этом, как говорится, все уже сказано. Если еще три года назад Web-строительством занимались преимущественно те, кто избирал эту деятельность в качестве профессии или как минимум специализации, то сегодня уметь сделать свой сайт должен каждый, кто так или иначе использует компьютер и Интернет в своей деятельности. Именно об этом свидетельствует тот факт, что FrontPage был включен компанией Microsoft в ее очередной офисный пакет MS Office 2000, поскольку отныне это такой же инструмент офисного менеджера, как Word или Excel. Действительно, с помощью этой программы даже незнакомый с языком HTML пользователь сможет создать вполне работоспособный сайт. Заметим, данное утверждение никак не умаляет возможностей программы для использования ее профессионалами.
Если вас убедили наши доводы, начните Web-строительство именно с FrontPage.
Создание персонального Web-узла
С помощью программы FrontPage вы можете создать как самостоятельную Web-страницу (файл в формате HTML), так и Web-узел, то есть совокупность взаимосвязанных HTML-страниц и других документов.
Рассмотрим самый распространенный пример — создание персонального сайта.
Выполните команду File Ф New Ф Web, в результате появится панель New с набором макетов и мастеров, которые особенно полезны для «молодых бойцов» (рис. 1).
Выберем макет, предназначенный для создания персонального сайта Personal Web, в результате в папке Мои документы (по умолчанию вам предлагается создать Web-узел именно в этой папке) программа автоматически создаст набор HTML-страниц (рис. 2).
Окно программы FrontPage 2000 (рис. 2) содержит три панели: Views — служит для переключения основных режимов представления Web-узла; FolderList — отображает структуру Web-узла; окно для работы с текущим представлением, которое зависит от выбора ярлыка в панели Views.
В частности, в панели Views вы можете настроить следующие режимы:
- Page — можно просматривать и редактировать страницы;
- Folders — можно проследить физическую структуру узла (структура каталогов и файлов);
- Reports — отчеты для анализа Web-узла;
- Navigation — логическая структура Web-узла;
- Hyperlinks — структура гиперсвязей;
- Tasks — список задач.
Панель Views — очень удобное средство для представления вашего узла в различных модификациях. На рис. 3 показана логическая структура вновь созданного Web-узла, а на рис. 4 — структура гиперсвязей этого узла. Из рис. 3 видно, что в предлагаемом шаблоне для организации персонального сайта (кроме главной страницы Home Page), присутствуют еще три: Interests — страница, на которой вы расскажете о своих увлечениях; PhotoAlbum — где можно представить свои фотографии; Favorites — где вы могли бы разместить любимые ссылки. В большинстве персональных сайтов эти элементы присутствуют, так что не придется ломать голову, с чего начать свои персональное представительство в Сети.
На рис. 4 показано, что с главной страницы (файл index.htm) можно перейти по четырем ссылкам: три страницы (см. рис. 3) interest.htm, photo.htm и favorite.htm плюс ссылка на сайт компании Microsoft в раздел с адресом http://www.Microsoft.com/frontpage/. При этом вернуться обратно на главную страничку можно по трем ссылкам из указанных страниц; как вы догадываетесь, ссылка на сайте Microsoft на ваш сайт автоматически не генерируется.
Теперь, имея заготовку, ее можно редактировать и заполнять своими материалами.
Дважды щелкните мышью по имени файла index.htm, в результате чего окно программы примет такой вид, как на рис. 5.
На этом рисунке страница отображается в режиме Normal, который позволяет просматривать и редактировать страницу в режиме WYSIWG, то есть в том виде, как она будет выглядеть в браузере1. Внизу окна имеются три вкладки, позволяющие настроить еще два режима: HTML и Preview.
Если вы владеете языком разметки гипертекста, то в режиме HTML вы имеете возможность редактировать страницу вручную, как из текстового редактора (рис. 6).
В режиме Preview вы можете проверить функциональность страницы (верно ли работают гиперссылки, отражаются тексты, рисунки и т.д., при этом следует иметь в виду, что режим Preview показывает не все элементы так же, как браузер).
Вернемся к редактированию страницы в режиме Normal. Прежде чем приступить к редактированию текста, скажем несколько слов о структуре страницы. Как видно из рис. 5, сверху и слева на странице расположены поля, отделенные от остальной части страницы штрих-пунктирной линией. Это так называемые общие поля (shared borders), которые могут располагаться у любого края Web-страницы. В общих полях удобно располагать однотипную информацию, в частности баннеры и навигационные панели (Navigation bars), которые представляют собой набор гиперссылок, используемых для навигации по Web-сайту. Обычно навигационные панели содержат ссылки на наиболее важные страницы. Когда вы указываете FrontPage, что необходимо создать навигационные панели, то программа автоматически добавляет гиперссылки в текущую Web-страницу, а при перемещении вами этой страницы — автоматически обновляет созданные ссылки. Естественно, программа может отслеживать единые общие поля, когда вы работаете с Web-узлом, а не с отдельными страницами. Для того чтобы понять, как расположены общие поля, полезно вызвать окно Shared Borders (Общие поля) и выполнить команду Format Ф Shared Borders, в результате чего появится панель (рис. 7).
На этом рисунке выбраны верхнее и левое общие поля (максимально их может быть четыре).
Поставьте флажок в окошке Right и Bottom, и программа покажет, где будут добавлены общие поля. Ограничимся на первое время верхним (Top) и левым (Left) общими полями, поэтому отмените флажки Right и Bottom и вернитесь в положение, показанное на рис. 5.
Скорее всего, на своем сайте вы хотели бы видеть названия страниц и ссылок на русском языке.
Переименовывать названия всех страниц очень удобно в режиме Navigation. Сделать это можно несколькими способами. Щелкните правой кнопкой мыши по тексту и из раскрывающегося меню выберите пункт Rename (Переименовать) либо щелкните по тексту левой кнопкой (название при этом будет выделено белым фоном — рис. 8), а затем повторно щелкните мышью, в результате чего в названии появится курсор и оно будет готово для редактирования. Главной странице (поскольку это личный сайт) присвойте свое имя.
После того как вы измените название страниц и дважды щелкните на главной странице в представлении Navigation, она примет такой вид, как на рис. 9.
При этом соответствующим образом изменятся тексты всех баннеров и ссылок на всех страницах. Например, страница «Увлечения» примет такой вид, как на рис. 10.
Сравнивая рис. 9 и 10, можно заметить, что если на рис. 9 навигационные панели отображаются слева и представлены текстовыми гиперссылками, то на рис. 10 мы обнаружим наличие кнопочных гиперссылок под заголовком и отсутствие таковых сбоку. Поясним, почему программа отображает ссылки на навигационных панелях подобным образом.
На рис. 9 под баннером имеется надпись: Edit the properties for this Navigation Bar to display hyperlinks here — «Редактируйте свойства данной навигационной панели, чтобы представить гиперссылки в данном месте». Обратите внимание, что данная надпись не будет видна при просмотре страницы браузером, хотя она и показывается в режимах Normal и Preview.
В режиме Normal щелкнем по вышеуказанной надписи правой кнопкой мыши и из раскрытого меню выберем пункт Navigation Bar Properties (Свойства навигационной панели), что вызовет одноименную панель (рис. 11).
Данная панель позволяет указать, какие гиперссылки должны появляться в редактируемой навигационной панели Web-страницы, должны ли они располагаться вертикально или горизонтально и в каком виде: в виде кнопок или текстовых гиперссылок.
Меняя положения флажков, можно добавлять в навигационную панель различные группы гиперссылок. При изменении положения флажков картинка слева (рис. 11) показывает, на какие страницы будут добавлены ссылки.
А теперь перечислим, какие группы ссылок можно добавлять:
- Parent Level (родительский уровень) — ссылки на страницы, расположенные в режиме Navigation, на уровень выше текущей;
- Same Level (тот же уровень) — ссылки на страницы того же уровня подчиненности;
- Back and Next (вперед и назад) — ссылки на предыдущую и последующие страницы той же группы подчиненности;
- Child Level (дочерний уровень) — ссылки на дочерние страницы относительно текущей;
- Top Level (верхний уровень) — ссылки на страницы верхнего уровня;
- Child Page under Home (дочерние относительно домашней) — ссылки на страницы второго уровня иерархии навигатора.
Поскольку в нашем примере флажок стоит в положении Same Level (тот же уровень), а также в окошках HomePage и Parent Page, то становится ясно, почему на главной странице (рис. 9) в верхнем общем поле гиперссылки не показываются — не на что ссылаться, кроме самой себя. Действительно, ни родительских страниц, ни страниц того же уровня соподчиненности у главной страницы нет, поэтому навигационная панель пуста. Если мы поставим флажок в положение Child Level (как это сделано в навигационной панели в левом общем поле), то есть предложим системе установить ссылки на дочерние страницы, то появятся соответствующие ссылки, но в этом случае ссылки в верхнем общем поле пропадут на дочерних (по отношению к главной) страницах, так как у них, в свою очередь, нет дочерних страниц. Поскольку настройка параметров навигационной панели относится ко всем страницам, то, меняя эти параметры на одной странице, мы изменяем их по всему узлу. На это стоит обратить внимание! Имея несколько общих панелей (в данном случае две, а максимально четыре) мы можем настроить в разных общих панелях различные правила установки гиперссылок. Так, разные настройки навигационных панелей в левом и верхнем общем поле применены и в нашем примере, поэтому, в частности, на рис. 9 присутствует панель слева, а на рис. 10 — сверху. Если мы, например, поставим флажок в положение Child Pages under Home (то есть установим правило «Ссылаться на страницы второго уровня иерархии навигатора»), то во всех страницах ссылки появятся и в верхнем общем поле, и в левом. Однако подобный вариант будет неудобен при наращивании сайта, поэтому вернем флажки в первоначальное положение.
Вполне вероятно, что в разделе Interest (Увлечения) вы захотите иметь несколько подчиненных страниц. Сделать это очень легко (рис. 12).
Щелкните в панели Views на ярлыке Folders правой кнопкой мыши, в результате чего появится приглашение ввести новую страницу. Щелкнув по кнопке New Page, вы добавите новую страницу — new_page_1.htm: единица указывает, что в ходе текущего сеанса работы вы создали первую страницу. Вернитесь в представление Navigation и перетащите мышью вновь созданную страницу из панели Folder List в панель, где будет представлена логическая структура Web-узла (рис. 13). В процессе перетаскивания новой страницы мышью программа будет автоматически выстраивать линию связи с представленными страничками узла и зафиксирует эту линию к ближайшей странице в тот момент, когда вы отпустите кнопку мыши. Здесь же можно переименовать вновь созданную страницу. Дадим ей название «Компьютерная графика».
Дважды щелкнув по этой странице, посмотрим, какие ссылки на ней автоматически появились (рис. 14). На рисунке видно, что в левом и верхнем общих полях появились навигационные панели, позволяющие перейти на главную и родительскую страницы. При этом на странице «Увлечения» в левом общем поле появилась ссылка на вновь созданную страницу. Таким образом, элементарным перетаскиванием страницы мышью мы задали ее положение в Web-узле и автоматически встроили ее в систему гиперссылок, связывающую Web-узел, что очень удобно.
Если вам не нравится, как оформлены предложенные вам страницы, не огорчайтесь — вы можете сменить так называемую тему оформления (Theme) и выбрать для себя оптимальную. Для этого выполните команду Format Ф Theme и выберите, например, тему под названием Romanesque. Страницы примут более привлекательный вид: в частности страница «Увлечения» будет выглядеть так, как показано на рис. 15.
Итак, мы вкратце рассмотрели основные этапы создания элементарного Web-узла. Надеюсь, читатель убедился, что создать структуру персонального узла из десятка страниц, прописать все логические связи, установить гиперссылки и задать однотипное оформление с помощью FrontPage 2000 можно за считанные минуты. Затем сайт нужно просто заполнить содержанием, поместить его в Сеть — и все узнают о вас и о ваших свершениях. Конечно, на столь простом примере мы не могли рассказать и о десятой доле возможностей пакета FrontPage 2000, но, вероятно, убедили вас, что это мощное и простое в освоении средство. О других возможностях программы — в следующей статье.
КомпьютерПресс 3'2001
