"Web-сайт за 10 минут?! Это нереально!" — воскликнут новички, которые однажды пытались создать свой остров в Internet. "Профанация", — скептически заметят опытные дизайнеры и будут не правы.
Делая столь смелое заявление, я, естественно, немного хитрю, предполагая, что все тексты, которые вы хотите опубликовать в Сети, у вас уже написаны, картинки приведены в надлежащий вид и готовы для размещения в Internet, и наконец, вы более-менее представляете себе структуру будущего Web-дома. Ведь по большому счету любой продукт творчества сначала рождается у человека в мыслях; словно дитя, бережно лелеется и вынашивается им; они вместе взрослеют, вместе наполняются смыслом. И только когда объятья "родительского чрева" становятся тесны для этих идей, они проливаются наружу, обретая четкие очертания с помощью кисти художника, слова поэта, смычка музыканта, после чего начинают жить своей собственной жизнью. Так вот, цель данного материала состоит именно в том, чтобы вписать в готовые Internet-формы продукт вашего воображения, раздумий, интеллектуального и физического труда.
Сегодня существует множество программ, облегчающих разработку сайтов. Но, как мне кажется, дело даже не в том, чтобы быстро "состряпать" пару-тройку связанных страниц с текстом да графикой и забросить их в Internet. Очень хочется, чтобы они выглядели пристойно, были грамотно структурированы и выполнены в едином стиле, пусть даже довольно простом. Ведь чаще всего именно на графическое оформление страничек уходит больше всего времени.
Будем исходить из тех соображений, что по своему идеологическому строению и решаемым задачам большинство сайтов похожи друг на друга как две капли воды. На первых порах вовсе не нужно изобретать велосипед, разрабатывая новые формы и структуры (этим можно заняться, приобретя определенный опыт). Кроме того, подумайте о своих потенциальных посетителях — им куда проще ориентироваться в лабиринтах ваших страничек, если они будут организованы по стандартным схемам и иметь стандартные названия. Я вовсе не являюсь консерватором и горячо приветствую смелую выдумку и новомодные веяния в Web-строительстве. Но всему свое время, поначалу новичку важен не столько вычурный оригинальный стиль его творения, на разработку которого может уйти не один день и много сил, сколько необходима точка отсчета, опора, каркас здания, причем приобрести все это нужно оперативно, пока есть желание и энтузиазм, а уж потом заниматься отделочными работами. Итак, приступим!
Лиха беда — начало
| В поле Imported HTML укажите ту кодировку, которую поддерживает Web-сервер, где вы планируете разместить свои страницы |
| На втором этапе работы мастера автоматического построения сайтов отметьте флажками только те пункты, которые желаете видеть в своем проекте |
| Давая "прямоугольничкам" русские названия, избегайте длинных словосочетаний, старайтесь подбирать слова краткие, но точные по смыслу |
| Режим Page Design, предназначенный для визуального проектирования Web-странички, подкупает своей простотой и наглядностью |
| Благодаря разнообразию существующих стилей ваш Web-проект, словно хамелеон, может менять свои цвета и оттенки |
Для быстрой закладки фундамента Web-дома я рекомендую воспользоваться приложением NetObjects Fusion MX. Его инсталляция не должна вызвать каких-либо затруднений, правда, в ходе нее мастер попросит указать путь к установленным в системе предыдущим версиям программы. Лучше откажитесь от этого (нажав кнопку No), причем даже в том случае, если вы когда-либо действительно использовали (или используете) ранние варианты NetObjects Fusion. После традиционного рестарта компьютера и запуска приложения вам будет предложено загрузить очередное обновление программы через Internet. Работая c trial-версией, игнорируйте эту возможность, выбрав Remind me later.
Но и это еще не все, в следующем окне вас спросят о том, хотите ли вы создать профайл с персональными анкетными данными, который необходим программе для генерации страниц с контактной информацией. Если вы не планируете подавать ее на английском языке, то я рекомендую также не пользоваться этим "удобством", поскольку приложение по умолчанию не настроено отображать кириллицу. Кстати, для пущей острастки этого навязчивого окна можно флажком отметить опцию Don’t remind me again. Затем, еще раз — No — и переходим к делу. Включаем секундомер, время пошло…
00:00. Первым долгом в окне Options (Tools —> Option) на вкладке Preview в разделе Windows Size проверяем установку 800 600 и выбираем при необходимости любимый установленный в системе броузер, в котором будем просматривать свои творения. На вкладке International в разделе Imported HTML указываем Cyrillic (Windows-1251) либо Cyrillic (KOI8-R), в зависимости от той кодировки, которую поддерживает Web-сервер, где вы собираетесь разместить свои страницы. Если с последним еще не определились, задайте Cyrillic (Windows-1251), перед публикацией сайта в Сети, в крайнем случае, можно будет изменить эту настройку. Кроме того, здесь же в целях удобства выберем формат даты как U. K. English (02/01/98 17:02:00). Замечу также, что на вкладке Program явным образом можно указать путь к внешним редакторам для HTML-, GIF- и JPEG-файлов. OK, идем дальше.
Чтобы в рекордно короткие сроки создать стандартный каркас стандартного сайта, призовем на помощь не менее стандартного, но все же довольно опытного Мастера (File —> New Site —> Using Site Wizard). Он старательно отработает три "смены". На первом этапе вы должны определиться с тем, какова же будет структура вашего будущего Web-дома. Мастер допускает четыре варианта сайтов. Если планируете выставлять на "народный суд" или продажу изображения каких-либо собственных изделий (например, вышивку, живопись, оловянную миниатюру, керамику, фотографии и т. д.), то выберите пункт Products. Если собираетесь оказывать своим клиентам сервисные услуги, выделите Services. А еще лучше отметьте флажками все пункты в разделе Choose Your Pages, в конце концов, ненужные страницы и соответствующие ссылки на них вы без труда сможете удалить в любой момент.
Нажав кнопку Next, переходим к следующему шагу: решим вопрос о дизайне сайта. Даже в trial-версии продукта вариантов оформления предлагается довольно много. В разделе Choose a Style — задайте стиль, в модуле Choose a color — выберите цвет. Соответствующие изменения при этом можно наблюдать в окне предварительного просмотра Style Thumbnail. После нажатия Next мастер опять предложит вам ввести свои анкетные данные (имена, адреса, телефоны, факсы и т. д.), которые вы сочтете нужным отобразить на создаваемых страницах. Рекомендую снова пропустить этот шаг, нажав Finish, поскольку NetObjects Fusion пока еще может не понять ваш русский. Информацию же для обратной связи легко будет внести на последующих этапах. Далее, даем название проекту и сохраняем его на диске: несколько секунд компиляции — и каркас готов. Приступаем к отделочным работам.
01:10. Перво-наперво давайте исключим в нашем проекте хотя бы на некоторое время (поскольку, безусловно, хотелось бы знать, на Web-сервере с какой кодировкой будет выложен сайт) возможные недоразумения с кодировкой. Для этого в окне Site Settings (Tools —> Site Settings) на вкладке General в поле Character set выберем, к примеру, Cyrillic (Windows-1251). Здесь же, на вкладке META tags, в поле Keywords, можно ввести ключевые слова (причем как на русском, так и на английском языке), по которым поисковые машины будут индексировать сайт, а чуть ниже указать автора — себя любимого. На вкладке History задается дата последнего обновления, впрочем, пока что это поле можно оставить пустым, а все остальные настройки — по умолчанию. После нажатия OK данное окно исчезнет с экрана.
Теперь снова последуем на Options (Tools —> Option). Обратите внимание, здесь появилась вкладка Text, а значит, теперь легко явным образом указать русифицированные шрифты. Впрочем, если вы работаете с русской версией Windows 95/98/Me/XP, то, как правило, значения отображаемых полей можно также оставить по умолчанию.
01:30. Теперь давайте русифицируем остов сайта, т. е. дадим приемлемые названия кнопкам, баннерам, страницам. Это все можно сделать одним махом. Щелкаем на кнопке Site: если не обнаруживаем в окошке карты сайта, то жмем на "плюсик" внизу прямоугольника Home — и все будет в порядке. Далее, щелкая на каждом названии странички, даем ей подходящее имя. Не стоит использовать длинных словосочетаний, старайтесь подбирать слова краткие, но точные по смыслу. Я же, не мудрствуя лукаво, просто внесу более-менее точные русские эквиваленты представленным здесь словам.
Обратите внимание, что переименовывать прямоугольнички можно и в окне Properties, определяя при этом на вкладке Management готовность страницы к опубликованию — Done или Don’t publish. Если Properties случайно исчезло с экрана, то отметьте View —> Properties Palette.
Готово? Отлично! Кстати, в любой момент времени можно не только визуально оценить макет произвольной страницы, но и посмотреть на свое творение в целом, так сказать, извне — т. е. с помощью любимого внешнего броузера. Для этого щелкаем на кнопке Preview Site и оцениваем, что у нас получилось. По-моему, очень даже неплохо!
Что? Не удовлетворяют цвета? Стиль сайта в целом? Дело поправимое! Жаль, правда, время идет, ну да ладно, успеем.
02:45. Нажмите кнопку Style и отыщите, что вам по вкусу. Trial-версия программы содержит около 30 предложений, лицензионная — более 200. Есть из чего выбрать! Определившись (быстрее, время идет!), снова щелкаем на кнопке Site и в появившемся окошке подтверждаем свое желание, ответив Yes.
03:15. Теперь предстоит самый длительный, но самый интересный этап — необходимо все созданные формы наполнить содержанием. Начнем с заглавной страницы, именно с нее посетители будут знакомиться с вашим "виртуальным миром", а значит, тексту и картинкам здесь нужно уделить особое внимание. Впрочем, что я говорю: сайт ведь у вас уже давно созрел, причем не только и не столько в мыслях, сколько в делах — разбросанные тексты и подготовленные изображения аккуратно собраны в одной папке. Мы же просто в данный момент выстраиваем все это в нужном порядке, т. е. занимаемся структурированием информации или приводим ее в вид, необходимый для публикации в Сети.
Двойной щелчок на заглавной странице — и мы попадаем в режим макетирования, вызываемый также путем выделения соответствующего прямоугольника на карте сайта и нажатием кнопки Page. Обратите внимание, здесь доступны четыре вкладки. Page Design служит для визуального проектирования страниц, HTML Source понадобится любителям повозиться с языком разметки, Page Preview позволяет оперативно просматривать результаты вашего труда во встроенном броузере. Остановимся на Page Design.
Дважды щелкаем на объекте My Company Logo и заменяем его дорогим сердцу логотипом своей компании или интересным рисунком, ассоциирующимся с тематической направленностью сайта. Далее, в соответствующем текстовом редакторе (например, в MS Word) открываем заблаговременно созданный вами файл, содержащий пламенную речь, которой вы собираетесь приветствовать многочисленных посетителей вашей Web-зоны. Выделяем в ней нужный фрагмент и копируем его в Карман Windows (<Ctrl+C>). Затем возвращаемся в NetObjects Fusion MX (режим Page Design), нажимаем кнопку на панели инструментов, помеченную большой литерой А, выделяем с помощью мыши текст, который необходимо заменить в выбранном объекте, и выполняем вставку (Ctrl+V либо Edit —> Paste).
Подобным образом, шаг за шагом, объект за объектом, страница за страницей мы наполняем "новым вином старые меха". Я подчеркиваю, если вы предварительно провели кропотливую работу по подготовке текстов, оптимизации изображений, которые хотите выложить в Сети, то с помощью NetObjects Fusion MX вы в считанные минуты создадите свой сайт, ну, естественно, в первом приближении, так сказать, бета-версию.
Несколько полезных советов
| Возможности автоматического построения сайтов у FrontPage 2000 поистине безграничны! |
1. Нередко возникает надобность добавить в проект новую страницу или удалить существующую. Все эти действия следует проводить в режиме Site, отобразив карту сайта. После чего щелкаем правой кнопкой мыши на соответствующем прямоугольнике и в контекстном меню выбираем нужное действие. При добавлении дочерней странички лучше сразу озаглавить ее, при этом одноименная кнопка автоматически появится в навигационной панели.
2. Для того чтобы в избранную страницу в режиме Page Design вставить картинку, необходимо нажать на кнопку Picture на панели инструментов, с помощью мыши выделить в макете область, отводимую под рисунок, и в появившемся окне указать путь к соответствующему файлу.
3. Вставка таблицы также не должна вызвать затруднение: в панели инструментов щелкаем на кнопке Table, курсором мыши очерчиваем нужное место и в отобразившемся диалоговом окне задаем размерность таблицы.
4. Если в макете страницы некоторые объекты хоть немного перекрывают друг друга, то в левом верхнем углу каждого из них будет появляться восклицательный знак в красном кружочке. Не откладывая в долгий ящик, тут же разрешите данное противоречие.
5. Чтобы удалить объект, следует выделить его, щелкнув на нем мышью, а затем нажать клавишу <Delete>. Для перемещения любого выбранного элемента либо изменения его размера при макетировании страницы пользуются стандартными приемами drag & drop. Кроме того, при необходимости можно быстро получить доступ к свойствам каждого конкретного объекта. Для этого следует щелкнуть на нем правой кнопкой мыши и из контекстного меню выбрать пункт Objects Properties.
6. По умолчанию навигационная панель на каждой странице имеет горизонтальную компоновку. Если вы, к примеру, хотите изменить ее на вертикальную, нажмите кнопку Navigation Bar на панели инструментов и очертите курсором мыши прямоугольник с меньшей стороной в основании. С целью получить доступ к отдельной навигационной кнопке следует произвести на ней двойной щелчок мышью.
7. В конце работы с каждой страницей внимательно просмотрите ее макет и удалите из него ряд графических ссылок типа Built with Net Objects Fusion MX — рекламную дань разработчикам пакета.
10:00. Поздравляю, вы вложились во время!
| Программа WebExpress 3.0 предлагает около сотни оригинальных стилей оформления Web-страниц |
Теперь можем запустить свой любимый броузер, например Internet Explorer, и открыть в нем заглавную страницу сайта, чтобы еще раз оценить продукт своего труда, а также проверить работоспособность всех ссылок "новорожденного". Если вы пользовались trial-версией программы, то общее хорошее впечатление от проделанной работы будет портить крупная навязчивая надпись внизу каждой страницы: "This site was built with the NetObjects Fusion MX Trial. Download your FREE trial today!". Ее добавил генератор кода при конвертировании вашего шедевра в HTML, заплатив денежку за полную версию, вы никогда больше не столкнетесь с этой неприятностью.
Ну а пока маленький "секрет": избавиться от этой проблемы вам вполне по силам, правда, для этого нужно применить сторонние средства, например любой HTML-редактор или, в крайнем случае, — Блокнот Windows. Воспользуемся последним: каждую HTML-страничку сгенерированного сайта (к счастью, их пока еще немного) поочередно откроем в Блокноте и безжалостно вычеркнем все строки, заключенные в теги <DIV>…</DIV> (в каждом файле вы найдете по две такие конструкции). После сохранения изменений снова проверим работоспособность вашего продукта — ну, теперь все отлично!
Замечу также, что для публикации сайта в Сети в NetObjects Fusion MX существует режим Publish, однако в trial-версии эта функция недоступна. Поэтому если вы намерены тут же разместить свое творение на выбранном сервере, то для этой цели следует прибегнуть к помощи любого FTP-клиента, благо, в Internet этого добра навалом, причем совершенно задаром.
В заключение скажу, что на сайте разработчиков доступна для загрузки trial-версия продукта NetObjects Fusion 5.0. Она хоть и не лишена некоторых ошибок, но содержит большее количество законченных стилей и готовых шаблонов, среди которых существует и такой, что позволяет "в одно касание" создавать странички для работы с анкетами и формами. Более подробную информацию на русском языке о возможностях NetObjects Fusion 5.0 можно получить по адресу www.mtx.webheim.com.
Альтернативы и замечания
Говоря о программах для быстрой разработки сайтов, нельзя не упомянуть приложение Microsoft FrontPage 2000, входящее в расширенную поставку Microsoft Office XP. Несомненно, данный пакет функциональнее и производительнее, чем NetObjects Fusion MX. И все же, несмотря на свой до боли знакомый и привычный "офисный" интерфейс, а также наличие мощных и продуманных мастеров для "блиц-создания" сайтов, быстро освоить работу с FrontPage, на мой взгляд, довольно-таки трудно. Зато, разобравшись с NetObjects Fusion MX, постигнув его идеологию и подходы, вы легко перейдете и к FrontPage 2002, к своему удовольствию обнаруживая знакомые приемы построения сайтов. Интересный материал для новичков по данному продукту доступен на страничках dalnova. hypermart.net.
Множество оригинальных законченных стилей графического оформления Web-страниц можно найти и в приложении WebExpress 3.0. К сожалению, сама программа довольно сложна в освоении и уже активно не поддерживается разработчиками, но загрузить ее trial-версию все же можно по адресу www.mvd.com/webexpress/download.htm.
И последний момент: все без исключения программные средства, предназначенные для автоматической или визуальной разработки Web-сайтов, имеют один серьезный недостаток: они плодят множество излишнего кода, что иногда существенно замедляет загрузку страниц. Поэтому такие продукты лучше всего использовать в тандеме с утилитами, позволяющими осуществлять автоматическую "очистку" кода, которые встроены, например, в некоторые современные HTML-редакторы (CoffeeCup HTML Editor, HomeSite и др.). Правда, имеется некоторый риск, что вместе с "мусором" могут быть удалены и необходимые элементы, поэтому пользоваться такими вещами нужно с осторожностью.