Что такое стильный web-сайт?
Что такое стильный web-сайт?
Стильный web-сайт - это когда каждая страничка Вашей публикации имеет ярко выраженную принадлежность ко всему web-сайту. Когда легко ориентироваться и поиск информации не сопряжен с опасностью заблудиться и потерять время. Когда странички загружаются менее, чем за минуту. Когда...
Стильность web-сайта достигается несколькими приемами. Можно выделить следующие элементы, участвующие в создании стиля:
шрифт - в пределах публикации он должен иметь одинаковые характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.
абзац - желательно, чтобы преобладал какой-нибудь один из видов выравнивания на страничке, например, публикация сделана с отступом от левого края и выравниванием влево.
цветовая схема web-сайта - она начинается с выбора тех трех цветов страницы, которые используются для представления обычного текста, ссылок и посещенных ссылок. Все эти параметры указываются в тэге <body>. Ниже, для примера, приведена строчка, задающая цвета на этих страничках:
<body bgcolor="#669900" text="#333333" link="#669900" vlink="#666666" alink="#000000">
Цветовая схема должна повторяться на всех страничках публикации, это создаст у посетителя ощущение связности сайта. Цвета ссылок старайтесь выбирать таким образом, чтобы, с одной стороны, читатель видел, что это ссылка, а с другой стороны, она бы не мешала ему читать основной текст. По поводу ссылок есть два полезных замечания: первое - как бы Вам не хотелось сделать цвета ссылок и посещенных ссылок одинаковыми (без веских на то причин), постарайтесь перебороть себя и придать им немного различия, для этого просто сделайте цвета уже посещенных ссылок чуть темнее; и второе - так уж получилось, что подчеркнутый текст в Web символизирует ссылку, поэтому поборите искушение использовать подчеркнутый текст в публикации, воспользуйтесь другим способом выделения. Вы ведь знаете, что очень неприятно, если, допустим, Ваша рука потянулась к ссылке с целью прочитать подробности, а мышка на нее ноль внимания :(.
графическое оформление сайта - во-первых, оно должно укладываться в общую цветовую схему; во-вторых, Вы должны продумать общую концепцию графического оформления. Все графические элементы можно разделить на два больших класса: рисованные и фотореалистические. Постарайтесь не смешивать эти два типа в оформлении. Кроме этого, в случае, если Вы используете на сайте фотографии в качестве иллюстраций, то перед использованием обработайте их - сделайте в случае необходимости тоновую и цветовую коррекцию, кадрирование, выберите примерный размер фотографий в публикации, найдите способ обработать края фотографии. А потом используйте данное оформление по всей публикации. И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.
навигация по сайту - именно она не дает посетителю запутаться в дебрях Вашего сайта. Всегда оставляйте для посетителя возможность перехода на главную страничку публикации. Кроме этого, не забывайте, что очень много людей попадают на Ваши странички через поисковые системы, т.е. не на первую страницу, и хороший сайт должен позволить читателю перейти на первую страничку; попросту говоря, дублируйте навигационную систему на всех страничках или сделайте так, чтобы они, по крайней мере, имели переход на основную страницу. В случае, если Вы выполняете навигационную панель графическими средствами, то обязательно сделайте ее текстовую копию и поместите где-нибудь снизу (текст в любом случае загружается быстрее графики :).
Возможно, я упустил некоторые элементы, участвующие в создании стиля, но основные перечислил. Соблюдение этих нехитрых правил позволит придать Вашим страничкам профессиональный вид и сделать информацию на Вашем сайте легкодоступной и быстронаходимой :).
Как создать привлекательный сайт?
Как создать привлекательный сайт?
Вы желаете сделать полезный, красивый и удобный сайт. Что же для этого нужно? Какие факторы влияют на популярность web-сайта? С чего лучше всего начать создание собственного сайта? И какие ошибки могут подстерегать на этом пути?
Я попробовал выделить основные причины, которые, по моему личному мнению, влияют на популярность сайта:
Содержание или контент - является одной из самых важных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как такового. Вспомните, как много полезных страничек Вы видели в последнее время по сравнению с общим количеством посещенных Вами мест?
Дизайн - вторая по важности составляющая хорошего сайта. От дизайна зависит, насколько привлекательны будут странички, т.е. в конечном счете, сколько людей дополнительно захотят прийти и посмотреть на Ваш сайт. Ведь если Вам очень понравился дизайн сайта, то Вы, наверняка, расскажете о нем своим друзьям. Не забывайте, что встречают-то по одежке.
Для того, чтобы сделать хороший сайт, не обязательно даже использовать графику. Есть полезные сайты с минимумом графики (или даже без оной) и масса бесполезных, забитых мегабайтными картинками. Для web-сайта, как впрочем, и для других дизайнерских проектов, очень важным является стиль сайта, придающий ему собственное лицо и узнаваемость. В последующих статьях я опишу основы и принципы создания стильных web-страничек.
Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Отсюда следует вывод - странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). Давайте посчитаем максимально допустимый объем средней WEB-странички.
Принимая к рассмотрению тот факт, что подавляющее число людей (и небольших организаций) имеют доступ к Internet через коммутируемую связь, т.е. по телефону (и, к тому же, немаловажный факт - за повременную оплату) и средняя скорость доступа по модему в России составляет 14,400 Кб/c, можно посчитать время, затрачиваемое на перекачку одного килобайта (это без учета того факта, что большинство людей держат открытыми одновременно 2-3 или более копий броузера - в этом случае просто разделите среднюю скорость доступа на количество открытых броузеров).
Следовательно, средняя скорость перекачки равна 14,400Кбит/с / 8 =1,800 Кбайт/с - это в идеальном случае, на самом деле немного меньше из-за повторных передач ошибочно принятых блоков. Поэтому примем среднюю скорость равную 1,200-1,500Кб/с. Только не путайте данную скорость, которая является скоростью до провайдера, со скоростью перекачивания Вашей странички, она может оказаться намного меньше, так как информация, достигшая Вашего компьютера, проходит через несколько компьютеров (как правило, 10-15), и скорость определяется самым узким звеном в цепи.
Допустим, днем загруженность маршрутизаторов (компьютеров, передающих информацию из одной сети в другую) больше, чем ночью. Кроме этого, если Ваш сервер находится на компьютере, который соединен с провайдером по коммутируемой (или выделенной) линии на скорости 14,400Кб/с, то человек, сидящей по другую сторону Internet, ни за что не добьется скорости выше этой (я исключаю случаи с Proxy-сервером, т.к. на них, в основном, хранится часто запрашиваемая информация - например, странички поисковых систем). Я принимаю допустимым время загрузки одной странички не более 40 секунд (эта величина взялась из личного опыта :), отсюда - 40*1,200= 48Кб - это и будет тот максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней. Если Вам требуется разместить информацию большего размера, то предупредите об этом пользователя или распределите информацию по нескольким страничкам.
Раскрутка web-сайта - включает в себя не только регистрацию Вашего сервера во всех возможных Поисковых системах мира, но и такие средства, как размещение информации в средствах массовой информации (URL - в газете), а также упоминание о Вашем сайте на визитках, рекламках, в газетных и журнальных статьях и т.д. Кроме этого, на web-сайте обязательно должен быть упомянут E-mail для связи с Вами или, в случае его отсутствия, хотя бы номер телефона.
Ясная и логическая структура размещения информации на Вашем сервере - ничто так не утомляет при поиске нужной информации, как плохо структурированные сервера.
Отсутствие орфографических и грамматических ошибок - этот пункт я включаю сюда ввиду громадного количества ошибок на свежепоявляющихся web-сайтах. Ведь это просто - набивайте текст в редакторе с проверкой орфографии и перечитывайте то, что Вы написали перед выставлением Вашего сервера на всемирное обозрение.
Вот, пожалуй, и все основные принципы, соблюдение которых гарантирует успех Вашему WEB-сайту, а через него - и благополучие, и расширение известности Вас, Вашей фирмы, клуба, движения.
В качестве упражнения попробуйте пройтись в WEB и посчитать время на загрузку различных страничек, а также обоснованность их загрузки (исходя из содержания). Посмотрите, насколько понятна структура сервера и удобство пользования им.
Оптимизация изображений в формате GIF
Оптимизация изображений в формате GIF
Итак, графика для Ваших страничек готова. Но выкладывать ее на сервер еще рано, так как уже не раз было сказано - если странички качаются долго, то толку от них нет. Эта статья посвящена оптимизации изображений в формате JPG.
Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия.
Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.
Для этого нужно сохранить фотографию при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть ее. Критерием потери качества будут так называемые "дрожащие контуры", наиболее заметные в местах контрастных переходов, и появление пятен в областях с плавными переходами (см. рисунок). Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением его (коэффициента) на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком разрешении будет минимальным и без потери качества.
Если такую операцию проводить с каждой фотографией, то это может занять слишком много времени. Но есть выход - все фотографии можно подразделить на некоторые подтипы (например: черно-белые фотографии, тонированные фотографии, пейзажи и т.д.) и к каждому подтипу подобрать свой оптимальный коэффициент.
Впоследствии можно просто применять ранее найденный коэффициент ко всем подобным фотографиям. Ниже представлены две одинаковые фотографии, но только с разной степенью коэффициента сжатия JPG. Слева - фотография, записанная в PhotoShop 5.0 со степенью сжатия 3 (не оптимизированная), а правая оптимизирована при помощи Ulead SmartSaver Pro. Обратите внимание на размеры фотографий: они различаются в три раза (при одинаковом качестве изображения).
 |
 |
И еще один небольшой метод оптимизации JPG - использование прогрессивной развертки. Это практически не сказывается на размере фотографии, но заметно при загрузке. В случае записи изображения в стандартном формате вывод на экран осуществляется горизонтальными полосками, и до загрузки всего изображения мы не сможем определить его смысл. Напротив, при записи файла в прогрессивном формате изображение появляется сразу целиком, но в грубой форме, и постепенно улучшается. Это дает посетителям возможность сразу же оценить фотографию и решить, стоит ли ожидать ее докачки, что позволит сэкономить немного времени при просмотре Ваших страничек. Ниже, на рисунках, представлены две фотографии: левая записана со стандартной разверткой, а правая - с прогрессивной. В момент загрузки страничек посмотрите на то, как загружаются два этих изображения, и Вам все станет понятно.
 |
 |
Оптимизация изображений в формате JPG
Оптимизация изображений в формате JPG.
Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.
Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов):
уменьшение количества цветов оптимизация палитры изображения стилизация изображения искажение размеров изображения фрагментарная оптимизация оптимизация "прозрачных" изображений использование чересстрочной развертки
Теперь разберемся по порядку с этими методами и приемами оптимизации.
Уменьшение количества цветов
Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку. Сравните два изображения - они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое - палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).
 |
 |
Оптимизация палитры изображения
Преобразование полноцветного изображения в индексное (т.е. - с использованием палитры) является важной операцией, и тут нужно сказать несколько слов о том, как это делается современными графическими пакетами.
Палитра конечного изображения может быть либо фиксированной, либо оптимизированной. В первом случае графический редактор просматривает каждую точку изображения и подбирает ей ближайшую по цвету из палитры. Этот способ дает самые худшие результаты с точки зрения верности воспроизведения цветов. Попробуйте, например, преобразовать фотографию красной розы в индексное изображение, используя палитру, содержащую оттенки зеленого ;) Это, конечно, крайний случай, но это даст Вам возможность оценить качество преобразования с использованием фиксированной палитры. Тем не менее, данный способ применяется - в основном для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256). Обычно в этом случае пользуются т.н. палитрой Netscape (или безопасной палитрой), состоящей из набора часто используемых цветов и их оттенков. Палитра Netscape гарантирует, что изображения, использующие эту палитру, будут одинаково показаны всеми броузерами. Для иллюстрации - посмотрите на два изображения: левое использует оптимизированную палитру, а правое - фиксированную палитру Netscape.
|
 |
При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет.
В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем "перемешивания" точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой - нет. Посмотрите, как изменилось изображение, а заодно обратите внимание на размеры файлов.
|
 |
Для уменьшения количества используемых цветов в изображениях, содержащих фотографические сюжеты, возможно применение стилизации фотографии. Для этого можно воспользоваться такими приемами, как тонирование изображения и применение художественных фильтров, имитирующих рисунки. Фотографии, обработанные таким способом, будут сжиматься лучше и требовать палитру, содержащую менее 256 цветов.
Искажение размеров изображения
Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича ;) размером 100x100 пикселей.
Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1x1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100x100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.
Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.
Фрагментарная оптимизация
Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.
Оптимизация "прозрачных" изображений
Формат GIF позволяет сохранять т.н. "прозрачные" изображения.
На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая "прозрачный" пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing'а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом - на контрастном синем, и ореол хорошо виден.
 |
 |
И, наконец, еще об одной особенности формата. Версия GIF89a позволяет сохранять файлы с использованием чересстрочной развертки. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Это немножко похоже на жалюзи :). При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. Так что, если у Вас нет на то иных причин, записывайте все GIF-файлы с использованием чересстрочной развертки. Приведенные ниже изображения показывают разницу при загрузке нормальных (слева) и чересстрочных (справа) изображений.
Подготовка текстов
Кроме разработки структуры, важной частью данного этапа является подготовка текстов. Оригинальные тексты, например, взятые из буклета компании и выложенные в неизменном виде будут читаться плохо, ведь они разрабатывались совершенно для другого стиля восприятия информации. И на сайте такой текст будет смотреться отчужденно - это заметно. И, к сожалению, сей факт будет говорить лишь о пренебрежении авторов к своему сайту. Сайт может быть безумно красив, но лишь умные тексты позволят Вам удержать своего посетителя - не забывайте об этом.
Публикация текстов в Сети имеет свою специфику и буквальное повторение структуры буклета "О компании" будет ошибкой. Буклет просматривают линейно - сверху вниз и слева направо - по страничкам. Соответственно, и пишется текст, который последовательно излагает всю информацию. Для web-страничек же более логичным является способ структурированного представления информации. При этом варианте - в основной статье излагаются общие вопросы, а более подробное их освещение вынесено на отдельные странички, переход к которым, осуществляется по ссылке. Ссылка может быть, как в конце странички и таким образом она будет служить указателем на следующую страничку (это аналогично линейному просмотру информации), так и непосредственно внутри текста - указывая посетителю способ узнать о данном вопросе подробнее.
В чем преимущество именно такого способа представления информации? А в том, что посетитель читает лишь то, что ему нужно. Некоторым достаточно краткого обзора, в то время как другие предпочитают углубляться в суть вещей. Структурируя большую статью, мы разбиваем ее на ряд небольших фрагментов, каждый из которых содержит один из аспектов рассматриваемого вопроса. И читатель, волен, выбирать путь, по которому идти - отбирая лишь ту информацию, которая ему действительно интересна. А второе преимущество является следствием первого - небольшие странички очень быстро грузятся, что немаловажно.
Все сказанное выше, относится исключительно к чтению информации он-лайн.
Если же предполагается, что текст будут распечатывать, то возможно стоит подумать о создании специальных "страничек для печати", которые должны содержать полные тексты статей.
Стиль изложения информации. Он является не менее важной частью, чем стиль дизайна и столь же уникален для хорошего сайта. На корпоративных сайтах, как правило, стиль изложения достаточно официален, но даже в этом случае, тексты желательно подготовить, а не выкладывать, всем надоевшую, информацию из пресс-релиза.
Структура готова, тексты написаны - вот теперь, пожалуй, и можно приступать к созданию набросков дизайна. На этой стадии очень важно выбрать инструмент, с которым Вы будете работать. Первоначальный вариант можно набросать и карандашом на листке бумаге, но его придется переносить в электронный вид. Многие web-дизайнеры предпочитают использовать для целей макетирования растровые или векторные редакторы, которые позволяют свободно манипулировать объектами на будущей страничке. Результатом этого этапа должна быть готовый эскиз.
Заметьте, что до сих пор, мы так и не приступили к HTML-кодированию, потому что на самом деле это далеко не первая по важности вещь и все вышеперечисленные шаги могут занять большую часть, отведенного на создание сайта, времени. Ведь, в конце концов, написание HTML-кода есть дело техники. Да, есть некоторые глюки и несостыковки со стандартами, но все это преодолимо. В то время, как вышеописанные шаги есть процесс творческий. Не забывайте об этом и увлекаясь кодированием не упускайте из виду более важные вещи.
Программы используемые в веб-мастеринге
Программы используемые в веб-мастеринге
Для изготовления профессиональных страничек Вам придется профессионально изучить несколько профессиональных программ :).
Итак, какие же программы Вам понадобятся? Ниже я буду приводить конкретные категории программ с объяснениями - для чего они нужны.
Программа обработки растровой графики
одна из важнейших программ, которую Вам придется освоить. Она Вам поможет при сканировании фотографий и их коррекции. При помощи этой программы вы сможете создавать те невообразимые эффекты, которые Вы видите в Internet, рекламах и т.д. По моему мнению, обязательными являются следующие умения для этого класса программ:
Сканирование фотографий; Коррекция отсканированных и готовых фотографий, в том числе - тоновая и цветовая коррекция; Ретушь фотографий; Умение кадрировать; Понимание различий в форматах графических файлов; Грамотное использование фильтров; Работа со слоями.
В качестве конкретных программ можно привести следующие:
Adobe PhotoShop 3.0-5.0 - данная программа является лидером в области графических программ такого рода, но она требует и соответствующих ресурсов от Вашего компьютера.
Paint Shop Pro 4.0-5.0 - по моему мнению, лучшая shareware-программа, которая, к тому же, поддерживает фильтры от Adobe PhotoShop и очень быстро работает с объемными (>20M) фотографиями. Может импортировать и экспортировать изображения в 40-50 разных форматов.
Некоторые работы Вам придется делать, используя разные редакторы. Идеальных редакторов нет, некоторые лучше делают одно, некоторые - другое.
Программа обработки векторной графики
еще одна из важных для дизайнера программ. Позволяет создавать с нуля или с использованием клипарта различные логотипы, кнопки, эффектные надписи и т.п. вещи. Принципы векторных редакторов сильно отличаются от растровых, поэтому осваивать их придется отдельно; зато, освоив их, Вы заодно сможете изготавливать для себя фирменные визитки, бланки, брошюры (как побочный эффект :). Вам потребуются следующие навыки:
Умение работать с графическими объектами (группировка, наложение, получение нестандартных объектов); Умение работать с кривыми и узлами кривых; Умение работать с направляющими и сеткой; Умение разбираться в цветовых моделях (RGB, CMYK, HSB); Работа с текстом - умение разместить его на любой кривой; Грамотное использование градиентов и заливок (включая фрактальные); Грамотное использование эффектов.
Типичными представителями данного класса являются Corel DRAW 7.0-8.0 и Adobe Illustrator - они обе являются лидерами в своих областях и, соответственно, располагают самыми последними достижениями в области векторной графики. В противовес этим тяжеловесам можно порекомендовать симпатичную и быструю программку Corel Xara!; пусть Вас не вводит в заблуждение слово Corel - данная программа разработана фирмой XARA, которая была куплена корпорацией, как один из конкурентов. Сейчас доступна уже ее вторая версия. Данная программа, в отличие от двух предыдущих, очень быстрая и маленькая, но некоторые эффекты и команды, доступные в других программах, в ней сделать или трудно, или вообще невозможно.
Программы просмотра web-страничек
или броузеры - в настоящее время имеется только два броузера, заслуживающих упоминания - это "Microsoft Internet Explorer" и "Netscape Navigator". Сейчас приближаются уже пятые версии данных программ, но, по статистике, наиболее используемыми являются их 4-ые версии. Поэтому для контроля внешнего вида Ваших страничек Вам придется использовать их. Причем на компьютере должны стоять обе версии. Хорошая WEB-страничка должна одинаково выглядеть в любом из этих броузеров. Я не отговариваю Вас от использования последних расширений стандарта HTML и JAVA-скрипты, но позаботьтесь о том, чтобы владельцы броузеров, не поддерживающих эти расширения, могли все же прочитать Вашу страничку.
Простой текстовый редактор
понадобится для ручного исправления и добавления HTML-кода, т.к. существующие визуальные редакторы не могут полностью контролировать процесс создания web-странички (а если Вы делаете страничку со сложным дизайном, то, возможно, Вам придется весь код писать в редакторе ;).
В качестве примера подойдет обычный "Блокнот" из стандартной поставки Windows или один HTML-редакторов, которые имеют встроенные команды на проверку правильности тэгов и структуры документов, например, HoTMetaL.
Визуальные редакторы
позволяют быстро разрабатывать несложные web-странички и корректировать уже написанные, но с ними нужно быть осторожными, т.к., благодаря именно им, Ваша страничка может плохо глядеться в другом броузере.
Наиболее известные кандидаты - это "Microsoft Front Page" и "Netscape Composer" (или в ранней версии - редактор, встроенный в поставку "Netscape Navigator Gold"). Используйте из них тот, который Вам больше нравится. Иногда Вам придется вручную исправлять код, сгенерированный данными программами.
Текстовый процессор
с возможностью проверки орфографии - очень полезен для набора текста и исправления ошибок в распознанных текстах. Как пример - обычный "Microsoft Word".
Программы распознавания текста - могут Вам сэкономить массу времени, избавляя от ручного набора напечатанных текстов. Программ по распознаванию русского языка всего две - это CuneiForm и FineReader. Используйте по возможности последние версии. По качеству распознавания они примерно одинаковы, но мне больше нравится FineReader.
Некоторые специальные программы - эти программы позволят Вам выполнить некоторые эффекты и справиться с такими задачами, которые другими способами трудновыполнимы или не выполнимы вообще. Ниже перечислены некоторые из этих программ:
Ulead GIF Animator - программа, позволяющая Вам создавать анимированные GIFы. Обеспечивает полный контроль над выходным файлом. Обладает очень мощными средствами оптимизации.
Фильтры для Adobe PhotoShop - их количество просто огромно, но реально понадобится немного. Они способны существенно повысить работоспособность и двумя-тремя нажатиями создать впечатляющие эффекты. Но только не переборщите с ними - во всем нужна мера :)
Macromedia Flash! - практически стандарт для использования в web векторных изображений.Обладает собственной средой разработки и позволяет создавать впечатляющую векторную анимацию.
Программы для создания VRML-миров или 3D-программы, позволяющие экспортировать в данный формат. В качестве примера могу порекомендовать неплохую программу создания VRML-миров Internet3D Space Builder.
Программы для обработки звука - могут понадобиться, если того требует Ваша страничка. Это программы вообще отдельного класса, но для простой обработки звука, например, подойдет CoolEdit.
Пожалуй, это более-менее полный список программ для создания WEB-страничек. Не все из них, конечно, нужно сразу же иметь, чтобы начать писать свои странички. Для начала достаточно какого-нибудь броузера и визуального редактора, а уже по мере накопления опыта Вы освоите и другие программы.
С чего начинается сайт?
С чего начинается сайт?
А поговорим мы о начальных этапах при создании сайта и основных шагах, которые следует предпринять еще до начала работы над эскизами и тем более верстки.
Очень важный вопрос - с чего начать создание сайта? У Вас есть огромное желание и впереди наполеоновские планы, но есть небольшое затруднение - Вы не знаете с какого конца к этому подступиться. Тем более, если делаете это в первый раз. Возможно, у Вас уже есть опыт создания простенькой домашней странички, но достаточно большой и законченный сайт требует к себе иного подхода.
Одно из больших заблуждений, при создании сайта, заключается в том, что начинать нужно с дизайна. Но это вовсе не так, и едва ли большую часть времени, ушедшего на создание сайта, будут занимать дизайн и верстка.
Приступать к работе следует с тщательного продумывания концепции и составления структуры будущего сайта. И, уже на основе этой информации, подбирать необходимые материалы. В общих чертах, Вы уже знаете о том, что желаете разместить на сайте, но теперь очень важно представить всю информацию удобным и понятным образом, чтобы то, что знаете, Вы, узнал бы и ваш посетитель.
Структурирование информации
При отборе информации, жизненно необходимо ее структурировать, уметь выделять наиболее важное. Нередко можно слышать возражение, что на сайте важна вся информация, и необходимо акцентировать ее всю. Но, на самом деле, так не бывает и даже в самой важной информации есть порция наиболее важной. Хорошая структурированность сайта обеспечивает половину успеха при его создании. Ошибки, допущенные на этом этапе, впоследствии могут привести к большим затратам сил на исправление.
Для более удобной организации мыслей, структуру желательно предварительно написать на листочке бумаги или хотя бы в блокноте (который в Windows, а не который бумажный ;).
Возьмем, для примера, небольшую компанию, которая решила открыть свое представительство в интернет. Как правило, основная структура таких сайтов достаточно общая. Давайте ее напишем:
Новости компании Информация о фирме Услуги фирмы Каталог товаров Контактная информация
Теперь эту структуру необходимо скорректировать для конкретной фирмы. Возможно, что у компании есть несколько одинаковых по объему областей деятельности и в этом случае, конечно же, имеет смысл добавить еще несколько пунктов меню в верхний уровень.
При составлении структуры будущего сайта, подавите в себе желание поместить все пункты меню на одну страничку. Человек комфортно воспринимает не более 7-ми пунктов, и их большее количество вызывает подсознательное отторжение при просмотре. Слишком сложное не вызывает желания разбираться.
Для того, чтобы этого избежать и используется иерархическое построение меню. Правильное структурирование информации позволяет нам выделить основные разделы сайта, а все второстепенные разделы будут доступны после выбора одного из основных. Описанное замечание относится также и к меню 2-го уровня - при большом количестве пунктов, имеет смысл ввести меню 3-го уровня. Но не более! Будет уже слишком.
Если же информации, все же, настолько много, что не получается структурировать ее в 3 уровня меню, то имеет смысл выделить отдельные подсайты, каждый из которых будет отвечать за свою область. Так, например, часто выносят, электронный магазин из структуры основного сайта, и он приобретает достаточно самостоятельный характер.
