Рано или поздно, многие интернет-маньяки, предпочитающие здоровому сну
дешёвый ночной серфинг по Всемирной Паутине, задумываются о создании в
Сети своей собственной странички, на которой мечтают поведать всему
свету о себе, любимом, высказать, наконец, наболевшие гениальные мысли
о смысле жизни и первичности сознания над бытием или разродиться
каким-нибудь сногсшибательным коммерческим проектом, посвящённым
проблемам размножения в неволе бегемотиков. Однако большинство таких
начинаний скоропостижно погибает из-за панического страха их авторов
перед непонятными словами html, java, perl, cgi... Те же смельчаки, кто
решается всё это быстренько, на каникулах, изучить и стать крутыми
web-дизайнерами, выходят из книжных магазинов с несколько вытянутыми
лицами от цен на многочисленные учебники типа «dynamic html для
чайников и кофеварок за девять с половиной недель без отрыва от
интимной жизни». В результате оказываются потерянными для мировой
философской мысли молодые Сократы, остаётся непокобелимой теория
относительности Эйнштейна, и прозябают в безвестности новые Пикассо и
Маркесы, а компании, предоставляющие бесплатное и платное место под
домашние странички, теряют потенциально выгодных клиентов.
К счастью, не все губят на корню свои грандиозные замыслы, иначе весь
Интернет состоял бы из сделанных профессиональными web-дизайнерскими
студиями, но, тем не менее, совершенно никому не интересных сайтов
заводов, производящих топоры и грабли, и неактуальных пока в России
онлайновых магазинов. Просмотрите свои избранные страницы в папке
«favorites» — если исключить сайты разработчиков программного
обеспечения, то можно заметить, что немалая часть страничек, на которые
хочется возвращаться снова и снова, придумана и поддерживается обычными
любителями, идеи которых часто оказываются более оригинальными, чем то,
что очень красиво, по всем канонам web-дизайна делают профессионалы.
Иногда лидеры в рейтингах популярности вырастают именно из таких
домашних страничек, которые пренебрежительно называют «хомяками» те,
чья работа заключается в создании сайтов для расплодившихся контор по
поставкам китайского гуталина и электрических розеток. Дело в том, что
на самом деле сделать свою первую страничку на очень хорошем уровне и
разместить её на одном из многих бесплатных серверов гораздо проще, чем
может показаться на первый взгляд. Для самовыражения в Мировой Сети
совсем не обязательно несколько лет изучать языки программирования,
искусство дизайна, и быть семи пядей во лбу, потому что давно созданы
программы, почти полностью автоматизирующие создание и простых и очень
сложных html-страничек и значительно облегчающие все сопутствующие
процессы — от рисования собственного анимационного баннера, до
регистрации нового сайта в поисковых системах для увеличения его
посещаемости. Можно, конечно, сразу же броситься в омут таких монстров
как frontpage, photoshop, coreldraw!, но если вы не хотите тратить на
изучение работы этих программ раз в пять-десять больше времени, чем на
воплощение в жизнь ваших творческих замыслов, то лучше начать с набора
программ, которые чуть попроще, но больше подходят начинающим, имеют
легко понятный интерфейс и обеспечивают полный цикл разработки
интернет-сайта. Создать с их помощью свою первую страничку можно, не
написав ни строчки html-кода, только двигая мышкой и не забывая о
воображении. Эти программы я и постараюсь коротко описать в своей
статье.
macromedia dreamweaver
http://www.macromedia.com/software/dreamweaver/
Из чего обычно состоит содержание интернет-сайтов? Из нескольких
страниц с текстом, с графическими элементами, со ссылками на файлы и из
меню, с помощью которого можно передвигаться от страницы к странице.
Вот для создания таких страниц и служат html-редакторы. dreamweaver
является самым наглядным и удобным визуальным html-редактором, то есть
это не Блокнот, в котором якобы работают «настоящие» веб-дизайнеры (и
очень этим гордятся), а программа именно для «рисования» страничек
мышкой, причем настолько мощная, что годится не только для
неподготовленного разработчика, но и для создания очень сложных
динамических страниц. Она так экономит время, что даже те, кто почти
дозрел до почётного звания «профессионал», часто сначала работают в
нём, а потом правят почти готовый код в текстовых редакторах.
Разумеется, небольшое знание английского или хотя бы словарик под рукой
необходимы — без иностранных языков в наше время никуда...
Для
того, чтобы сделать в нём первую страничку, гораздо проще не начинать
«с нуля», а воспользоваться готовыми шаблонами, которые поставляются на
диске вместе с программой, если приобретаете её полный вариант, или
скачиваются с сайта разработчика вместе с условно-бесплатной версией
dreamweaver. Можно подобрать образец для странички, даже закачав из
Интернета какой-нибудь особо понравившийся сайт и отредактировав его,
просто заменяя текст и графику на свои собственные. Вряд ли это будет
назваться плагиатом, так как вы используете только структуру таблиц и
кадров, заодно и разобравшись, как следует размещать на странице текст,
картинки, всевозможные меню.
На какие тонкости в работе с
программой следует обратить внимание в первую очередь, особенно если вы
решили выбрать свой собственный путь и не используете шаблоны? Создав
новый документ, сразу же вызовите окно его свойств через меню «modify»
— «page properties», здесь задайте, если хотите, цвета различных
элементов — фона, текста, ссылок, выберите небольшую картинку для фона
странички — она будет выложена мозаикой, назначьте кодировку, в которой
будет ваш текст — её обычно определяет владелец сервера, на котором
будет размещён ваш сайт. В меню «window» установите галочки «objects» и
«properties» — появятся два окна, в одном из которых можно менять
свойства выделенного объекта (для текста — выбирать шрифт, цвет,
задавать гиперссылку и т.д.), а с помощью окошка «objects» удобно
вставлять в документ самые разные элементы — от специальных символов
типа значка копирайта или валюты евро, до апплетов и скриптов. Окно
«objects» состоит из нескольких закладок, каждая со своей группой
элементов, предназначение каждого из которых легко понять из
всплывающей подсказки, появляющейся, если некоторое время не двигать на
значке элемента мышкой. Делать вставки можно и используя меню «insert»
панели задач dreamweaver. Если надо, чтобы произошёл переход на новую
строку, но не было разрыва, как при абзаце, создаваемом при нажатии на
enter, то вставьте «line break» — разрыв строки.
Часто, чтобы при
переходе между страницами не загружалось заново навигационное меню,
особенно если оно выполнено в виде долго прокачиваемой графики,
используют так называемые «фреймы» (кадры), если вы тоже захотите их
применить, то сделайте сначала обычную страничку с необходимой
информацией, потом такую же страничку, но только с одним навигационным
меню — обычно это небольшая табличка вдоль левого или верхнего края
документа. После того, как вы это сделаете и сохраните их на диске в
одной папке, можно приступить к изготовлению так называемого
«фреймсета» (frameset) — третьей странички, разбитой на две части таким
образом, что в ней отобразятся одновременно две первые. Для этого в
меню «file» выберите команду «new» и, после открытия чистого листа, в
окошке «objects» вызовите закладку «frames» — там вы увидите возможные
схемы разбиения странички. Если вы сделали одну из страничек с левым
меню, то выбирайте «insert left frames» — появится линия разбивки. Но
лист всё ещё остаётся пустым. Чтобы ваши странички в нём отобразились,
на панели инструментов, в меню «window» поставьте флажок возле «frames»
— появится ещё одно окошко со схемой вашего «фреймсета». Щёлкните
мышкой на левом кадре и в окне его свойств задайте путь к документу с
навигационным меню — это легко сделать, нажав на кнопку с изображением
папки. Аналогично задаётся путь и к странице, предназначенной для
воспроизведения в правом кадре. Всё, осталось только
поэкспериментировать со свойствами кадров, чтобы понять, как включать
отображение границ, как менять их цвет или запрещать использование
полосы прокрутки. Не забудьте передвинуть границы кадров, чтобы текст и
графика на ваших страничках не закрывались. Обратите также внимание,
что в свойствах кадра есть его имя (mainframe, leftframe, и т.п.). Для
того, чтобы при нажатии на ссылки в левом кадре, странички менялись в
правом, надо в свойствах этих ссылок в поле «target» задать название
правого кадра, или любого другого, если хотите, чтобы документ, который
должен загрузиться по этой ссылке, появился именно в нём. Полученную
третью страничку сохраните под названием index.html — она и будет
титульным листом вашего сайта. Можно, правда, начинать создание страниц
прямо с «фреймсета», в этом случае, после получения необходимой
разбивки, начинайте вставлять текст, графику — в общем всё, что нужно —
прямо в эту страницу, программа сама потом предложит вам сохранить
сразу три файла: сам «фреймсет», страничку с меню и страничку с
основной информацией.
dreamweaver имеет настолько много функций,
что вы, например, легко сделаете на сайте картинки, которые меняются
при наведении на них мышки — «rollover images» (для этого будет написан
скрипт на языке java, но вам об этом знать даже не нужно), а после
завершения очередной страницы можно подчистить её код, немного ужав
размер html-файла, проверить полученное на совместимость с разными
броузерами и их старыми версиями и посмотреть, как всё это будет
выглядеть при разных разрешениях экрана. Разобравшись в программе
досконально (точно успеете за время действия «шароварной версии»), вы
сделаете динамическую страничку с перемещающимися изображениями, со
слоями, где все элементы могут реагировать на разнообразные события,
производимые, например, мышкой посетителя. Полёт фантазии, и ваш талант
при работе с dreamweaver не ограничен почти ничем!
Ну вот, самый
сложный и главный этап пройден, создано несколько страниц с текстом...
А как же графика — картинки, кнопки, фотографии? Неужели вы пытались
что-то рисовать или редактировать в «виндовом» paint? Никуда не
годится! Установите себе ещё одну небольшую, лёгкую в использовании, но
при этом достаточно мощную не только для начинающих, программу —
графический редактор...
paint shop pro
http://www.jasc.com/
Графический редактор — обязательный атрибут любого разработчика
web-страничек. Сайт совсем без графики выглядит чересчур
технически-утилитарно, но и злоупотребление большими изображениями
привёдет к тому, что посетители будут закрывать окно броузера, не
дождавшись загрузки вашей странички.
Если вы вполне легко
справляетесь с редактированием изображений в обычном paint, то никаких
особых сложностей с этой программой не испытаете, так как их интерфейс
в чём-то даже схож: все те же кнопки у левого края экрана. Те же
карандаш, кисть, линза, распылитель, ластик, но вот возможностей у них
гораздо больше! Для того, чтобы изменять свойства каждого элемента
управления (а самих этих элементов тоже заметно больше, чем в paint), в
paint shop pro, как и в dreamweaver, постоянно находится на экране окно
свойств, называемое здесь «tool options». Если вы выберете кисть, то
сможете менять форму, жёсткость и размер её «щетины», степень её
«смоченности» краской, «водянистость» этой краски, и даже задавать
текстуру холста. Очень интересно использовать, например, такие
«прибамбасы» как «retouch» — аналог ластика, при котором изображение
затирается постепенно, а не все сразу, или «picture tube» — рисование
готовых образцов — огня, облаков, дорожных знаков и даже тараканов!
Другая приятная особенность программы — богатый выбор спецэффектов,
или, если угодно, фильтров, с помощью которых очень просто так
извратить исходную картинку, что её не узнают ни мама родная, ни папа,
ни бабушка, ни даже дедушка и тем более жучка с внучкой. Войдите в меню
«image» — «deformations», и увидите список эффектов, деформирующих
изображение: от сворачивания его в шар и трубу, до «выдавливания»
отдельного его участка. Чуть ниже расположено меню «effects» — тут уже
можно работать с цветом, делая, например, из цветной картинки —
металлически-хромированную, задавать изображению выпуклую текстуру или
придавать ему объём, делая кнопку. Вообще, используя меню «image»,
можно делать очень много, чтобы добиться наибольшего соответствия всех
изображений духу и дизайну вашего сайта. Вы сделаете картинку
расплывчатой или повысите контрастность, добавите шум и даже
«приделаете» рамку как у картины. А в меню «colors» легко
откорректировать цветовую гамму, увеличить яркость и уменьшить
количество используемых цветов, что очень важно для сокращения объёма
файла с изображением и более быстрой его загрузки в Интернете. Если
добавляете в изображение текст, то используйте antialiasing —
сглаживание шрифтов — отличный способ уменьшить их ступенчатость и
зернистость.
Одной из очень полезных особенностей программы
является поддержка слоёв изображения. В отличие от простеньких
графических редакторов, сохранив картинку в специальном формате paint
shop pro image — .psp, вы в любой момент передвинете или измените
отдельные его части, называемые слоями, например, если вы создали
сначала изображение травы, потом вставили из другой картинки дерево, а
из третьей добавили какого-нибудь зайца, то всегда вернётесь к
отдельному редактированию любого из этих элементов. Количество
имеющихся слоев просматривается в ещё одном окошке, постоянно
находящемся на экране — «layer palette». Слои можно передвигать из
картинки в картинку, «подцепляя» их мышью в этом меню и «бросая» прямо
на картинке.
Обо всех достоинствах этой, идеально подходящей для
начинающих ХУДОжников, программы, рассказать на страницах журнала
невозможно, тем более, что в комплекте с ней идет ещё и небольшая, но
предназначенная именно веб-дизайнерам, нагрузка...
jasc animation shop
http://www.jasc.com/
Какой сайт в Интернете обходится сегодня без собственного мигающего и
переливающегося всеми цветами радуги баннера, зазывающего и
заманивающего доверчивых интернетчиков на свои страницы? Их создатели,
чтобы поведать о своих сенсационных проектах миру, размещают такие
стандартные изображения в различных, совершенно бесплатных, службах
обмена баннерами, единственное условие которых состоит в ответном
размещении динамически меняющихся баннеров на страницах вашего
собственного сайта. Для того, чтобы сделать такой мини-мультик, который
мог бы обратить на себя внимание и подвигнуть человека, его увидевшего,
тут же щелкнуть на нём мышкой для перехода на вашу страницу, и
предназначен animation shop.
Конечно, не обязательно с его помощью
рисовать только баннеры, можно совершенно спокойно сделать и обычный
анимированный gif-файл, который потом разместить уже у себя на
страничке, а не в баннерной сети, для её лёгкого «оживления». Но
начнём, пожалуй, знакомство с ним именно с производства баннера, так
как этот процесс максимально облегчён для начинающих дизайнеров
специальным мастером — «banner wizard».
После того, как вы вызовете
«banner wizard» из меню «file», он попросит вас ответить на несколько
простых вопросов: какой выбрать фон (цвет, прозрачность, картинка для
фона); какой будет размер баннера (полный, вертикальный, мини-кнопка, и
т.п.); сколько кадров будет в баннере, какова длительность мультика и
надо ли его закольцевать; шрифт, которым выполняется надпись на
баннере, сам текст, сглаживание шрифта; цвет шрифта; и, наконец, надо
выбрать сам анимационный эффект — перемещение текста, наложение тени, и
так далее. Эффектов на этом этапе предлагается не так много, но для
пробы пера пойдёт — благо, шаблон мы получили, пора теперь дать волю
фантазии и внести в обычный баннер изюминку, финик, фигу или ещё какой
сухофрукт.
В готовый набор кадров уже покадрово вносятся любые
изображения, текст, или делаются ещё какие-то правки. Для этого на
панели управления имеется небольшой набор кнопок с инструментарием
художника. Гораздо интереснее меню «effects», в котором вы вдоволь
наэкспериментируетесь с обширным списком готовых спецэффектов. Выбрав
из них наиболее понравившийся, вы создадите баннер буквально за пару
кликов мышки! В этом меню, открыв любую картинку, можно сделать из неё
что-то вращающееся, взрывающееся, булькающее, мелькающее, исчезающее и
сохранить полученное «нечто» в виде gif-файла, пригодного для
размещения в Интернете, в виде avi-клипа или в виде ещё нескольких
менее используемых форматов.
Поскольку для картинок на сайтах, а
тем более — для баннеров, обычно не требуется максимальное качество
изображения и огромное количество цветов, да это даже и вредно из-за
резкого увеличения размера файла, то при сохранении вашего
мини-мультика воспользуйтесь вызываемым из меню «file» мастером
оптимизации «optimization wizard», который уберёт из файла всё
«лишнее», значительно уменьшив время его загрузки. Кстати, это время вы
увидите в конце процесса оптимизации, причём, исходя из размера файла,
будут приведены цифры для разных скоростей соединения — от 14400 до
isdn, и у вас будет повод почесать в затылке, узнав, что ваш, рождённый
в муках творчества баннер, посетитель сайта увидит минут так через
тридцать-сорок после начала загрузки страницы.
Стоит сказать, что
многие программы, предназначенные для создания анимированных
изображений, не имеют и десятой доли возможностей animation shop,
единственным достойным конкурентом которого является, пожалуй, ulead
gif animator (http://www.ulead.com/ — на этом сайте ещё очень много
хороших утилит для работы с графикой), но зачем искать ещё одну
программу мегабайтов на шесть, если почти всё, что нужно, уже даётся в
одном флаконе с paint shop pro (правда, в полном комплекте он «весит»
уже 23 «мега», но зато крут!)?
Есть ли ещё что-нибудь такое, чего
не могут программы от jasc, но что бывает очень нужно для оформления
домашней странички, для придания ей законченного вида? Да, пожалуй,
создать фон для сайта с их помощью будет трудновато, ведь надо получить
небольшой кусочек картинки, которая, будучи уложена по поверхности
странички мозаикой, будет создавать ощущение целикового ковра, без
стыков и швов, и вот тут вступают в ход мелкие утилитки,
предназначенные для решения таких узкоспециализированных
web-дизайнерских проблем.
teralogic texture maker
www.s-direktnet.de/homepages/tobias_reichert
Чтобы разобраться в работе этой небольшой программы, не требующей даже
инсталляции, придётся почитать подробную инструкцию. К счастью тех
патриотов, кто не жалует иностранные языки, работа программы описана на
примерах с картинками и прямыми, пошаговыми указаниями, какую и когда
кнопку надо нажимать. Общая схема для простейшего случая такая:
выбираете цвет будущего фона, рисуете какую-нибудь геометрическую
фигуру и начинаете её искажать, мять, крутить, пока не получится что-то
непонятное. После всех действий у вас будет небольшой файл, который без
видимых стыков уложится по всей поверхности странички.
В комплекте
с программой много уже готовых шаблонов, которые вы можете попытаться
подогнать (скорее, извратить) под дизайн вашего сайта или использовать
без изменений. Единственный, наверное, недостаток заключается в том,
что предугадает конечный результат всех трансформаций только
какой-нибудь Лобачевский.
Ну что ж, с оформлением сайта практически
разобрались, а как с его содержанием? Многие создатели персональных
страничек хотят поделиться с посетителями ссылками на интересные
ресурсы Интернета, предложив на всеобщее обозрение свои favorites и
bookmarks. И тут понимаешь, что сотни две-три ссылок, накопленные за
последнюю неделю бессонного ночного серфинга, внести вручную на
страничку не поможет никакой dreamweaver — пальцы отсохнут давить на
мышку. Что же делать, как автоматизировать этот процесс?
bookmark wizard
http://www.moonsoftware.ee/
После запуска программы вам придётся опять только отвечать на вопросы
«мастера» о том, где находится папка с вашими избранными закладками,
куда сохранить полученный html-документ, какой использовать шрифт,
чтобы дизайн новой странички со ссылками соответствовал всему сайту,
как назвать страничку. А в опциях можно задать, какие папки из
favorites проигнорировать (у вас есть в закладках «секретные» сайты?),
не включая их содержимое в конечный результат. После нажатия на кнопку
«finish», получите готовую к употреблению html-страницу со своими
ссылками — вставляйте её на свой сайт в раздел «links» или облагородьте
предварительно с помощью dreamweaver. Вот только все ли эти ссылки
рабочие, может половина сайтов, которые рекомендуете посетить своим
друзьям, давно почила в бозе, только вы об этом не знаете?
check web links
http://www.asi.fr/~duby/chkweb.htm
Проверить все ссылки на всех страницах сайта несложно с помощью
маленькой программки «check web links», достаточно задать его url-адрес
и нажать кнопку «start». Нет, не на панели задач windows, а в
программе. Приготовьтесь к тому, что проверка займёт много времени.
Если в раздел ссылок вы поместили половину Интернета, то подождите не
один десяток минут (чайку попейте), во время которых программа может не
захотеть отвечать на ваши действия мышкой — это нормально, не спешите
давить три заветных кнопки ctrl-alt-delete, просто наберитесь терпения.
Будете вознаграждены полным отчётом обо всех ошибках, полученных от
серверов, который автоматически запишется в текстовый файл, находящийся
в одном каталоге с программой. Чтобы узнать, что означают полученные
коды ошибок и какой сайт уже умер, а какой — только перемещён на другой
адрес, прочитайте файл помощи к этой утилите — для этого не обязательно
учиться в английской спецшколе, всё поймёте без особых проблем.
Итак, сайт — круче некуда, загружен на бесплатный сервер (например,
http://www.chat.ru/) классным ftp-клиентом cuteftp
(http://www.cuteftp.com/), осталось ждать наплыва посетителей. Что — ни
одного? Значит надо регистрироваться в поисковых машинах и ставить
счётчики. Вручную прошли три-четыре сайта типа http://www.rambler.ru/и
надоело?
web submitter
http://198.172.0.38/software/
Введите побольше информации о своём сайте, нажмите «go!» и программа
сама зарегистрирует вас в 25 поисковых системах, если у вас её
демо-версия и в 500 (!), если вы её оплатили. Можно даже автоматически
отослать сообщение на доски объявлений. Не забудьте только, что
программа регистрирует сайт и в англоязычных системах, поэтому
отправьте и английский вариант информации о себе. После всей процедуры
web submitter тоже выдаст на-гора отчёт о проделанной работе, по
которому элементарно понять, из-за чего какой-нибудь поисковый сайт не
захотел вас внести в свою базу данных, и исправить ошибку.
Это,
конечно, не всё, что нужно для того, чтобы вы стали настоящим
web-дизайнером. Даже если у вас есть художественный вкус, чувство меры,
если вы поднакопили знаний и прочитали стопочку умных книг по
html-дизайну, программированию для web, то вам всё равно не уйти от
использования больших и мелких программ и программок, облегчающих и
ускоряющих творческий процесс. Все их описать невозможно, выбор лучшей
всегда будет субъективен, не ленитесь сами все испробовать, ищите в
Интернете новые и всё более «продвинутые», не бойтесь вставлять в свои
странички скрипты и апплеты, разработанные другими авторами или
свободно распространяемые, короче, творите, выдумывайте, пробуйте! А я
дам вам напоследок ещё несколько полезных ссылок:
* http://www.pcbit.com/htmlopt.html — html-оптимизатор, немного уменьшает размер файлов;
* http://www.lincolnbeach.com/justbuttons.asp — just buttons — рисуем кнопки для сайта;
* http://www.cyberspyder.com/cslnkts1.html — link test — ещё программа для проверки ссылок;
* http://www.design.ru/free/tau/ — tau autoreg — регистрация в поисковиках;
* http://www.bannermaker.ru/ — всё о баннерах;
* http://www.nedernet.nl/~rvdb/java.html — java–скрипты;
* http://kotenev.hypermart.net/ago/ — gif–оптимизатор;
* http://rtlsoft.com/animagic/ — animagic gif — небольшой аниматор;
* http://gospel.jeo.ru/ — ещё html-оптимизатор;
* http://podarok.prostokvashino.com/ — куча халявы, в том числе и для web-дизайна: скрипты, счётчики и т.д.
|
Копирование материалов разрешено,