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

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

Итак, рассмотрим вопрос дизайна по следующим направлениям:

Навигация
Цвет
Фон
Шрифты
Организация пространства страницы
Функции Фронт Пейдж

Навигация.

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

На этом аналогия с книгой заканчивается. Далее на организацию навигации оказывает влияние свойства браузера. Браузер может открывать страницу в новом окне или загружать другую страницу в то же окно. При настройке гиперссылки можно выбрать в функции Target frame - Same Frame (то же окно) или New Window (новое окно). Со страниц имеющих характер оглавлений лучше открывать страницы в новом окне. В разделах, где одна страница логически вытекает из предыдущей - открывать в том же окне.
Некоторые посетители не любят, когда при просмотре сайта накапливается много окон (хотя их и не трудно закрыть). Но с другой стороны, если нужно будет выйти из последовательной цепочки на оглавление, нужно будет гнать всю цепочку назад, а это и время, и расход трафика, поскольку страницы будут загружаться часть из кэша компьютера, а часть (баннеры например) из сети. Проще просто закрыть окно последовательной цепи и перед тобой - оглавление.
Можно и по другому - на всех страницах размещается оглавление в сжатом виде. Или сверху страницы, или сбоку (чаще слева). Но это удобно для сайтов с законченной структурой. Иначе добавление нового раздела потребует переделки всех страниц. Или использование более сложных технологий - фреймов, скриптов, SSI и так далее. На крупных профессиональных сайтах (каталогах, поисковиках) формирование страниц производится РНР программами. Думаю, что на первых порах это тебе недоступно.
Тем не менее, по мере накопления материалов, на очередных страницах можно делать ссылки на уже созданные разделы, или в виде кнопок, или текстовых. Лучше их открывать в отдельном окне, поскольку посетитель, посмотрев о чем идет речь, может захотеть вернуться обратно. В этом случае он просто закроет окно, или оставит его, но перейдет на предыдущее. Но, во всяком случае, обязательно ставь ссылку на главную страницу твоего сайта. По двум причинам. Во-первых, посетитель просто умышленно или случайно закроет твою главную страницу. Во-вторых, твой сайт будет проиндексирован поисковиками. И по ключевым словам посетитель может прийти на твой сайт на любую страницу. Возможно он заинтересуется всем сайтом и нужно дать ему возможность выйти на главную страницу.

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

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


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

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

Фон

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

Шрифты

Шрифтами кириллицы браузеры не богаты. Спасибо борцам с кибернетикой, как с продажной девкой империализма.

Итак, мы располагаем:Фонт Обычный С наклоном С цветом Утолщенный
Times New Roman Шрифтами кириллицы браузеры не богаты
Arial Шрифтами кириллицы браузеры не богаты
Arial Black Шрифтами кириллицы браузеры не богаты
Arial Narrow Шрифтами кириллицы браузеры не богаты
Courier New Шрифтами кириллицы браузеры не богаты
PROMT Helv Cyr Шрифтами кириллицы браузеры не богаты
Comic Sans MS Шрифтами кириллицы браузеры не богаты
Garamond Шрифтами кириллицы браузеры не богаты
Verdana Шрифтами кириллицы браузеры не богаты
Book Antiqua Шрифтами кириллицы браузеры не богаты


Из этих шрифтов можно выделить прежде всего три: Times New Roman, Arial и Comic Sans MS. В чем они принципиально отличаются. Если взять книжку напечатанную шрифтом Times New Roman, и посмотреть сбоку вдоль строки, мы увидим две линии, как рельсы. И это не случайно. Человеческий глаз подсознательно становится на эти рельсы и катится. Глазам удобнее этот шрифт. Поэтому тексты большие лучше отображать именно этим шрифтом.

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

Что касается Comic Sans MS, то этот текст игривый и хорош для небольших текстов связанных с темами искусства: музыки, живописи, стихи иногда. Подписи, названия, заголовки.

Иногда можно использовать и другие шрифты. Для отдельных слов, буквы которых имеют аналоги с латиницей и цифры. Например: XPAM 1234, XPAM 1234, XPAM 1234, XPAM 1234, XPAM 1234, XPAM 1234, XPAM 1234, XPAM 1234, XPAM 1234. Размер шрифтов можешь выбирать любым, Но имей в виду, что браузер сам имеет функцию увеличения шрифта. А потому не навязывай посетителям слишком крупный шрифт, особенно основного текста. Страница должна быть компактной. А потому и размер(кегль) должен быть минимальным из возможного. Таким, чтобы человек с нормальным зрением не испытывал затруднений в чтении. И еще. Текст размером менее 12 пиксель лучше не делать утолщенным. Буква "и" становится похожей на букву "н" ( и н ). Вот пожалуй и все о шрифтах.

Организация пространства страницы

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

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

В настройках страницы нужно указать и остальные параметры текста - фонт, кегль, утолщенный или наклонный, цвет. Для отдельных параграфов, заголовков можно менять в настройках как параграф. Есть три вида настойки параграфа: Left, Right, Center, Justify. На этой странице ты видишь вообще Justify. А этот параграф Left. А предыдущий - Center . Right используется редко. Justify Left Center

Так вот, для крупных текстов лучше использовать Justify. А если текст короткий, то лучше этот вид не использовать
Так вот, для крупных текстов лучше использовать Justify.
А если текст короткий, то лучше этот вид не использовать
Так вот, для крупных текстов лучше использовать Justify.
А если текст короткий, то лучше этот вид не использовать


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

Теперь об изображениях. Браузер будет гнать их влево, поэтому:

- если изображения нужно помещать рядом, используй таблицу. Подписи под изображениями тоже в таблице. Например так:
Полет Музыка


В настройках изображения или таблицы, если они не большие, указывай Left. Тогда текст будет обтекать их справа. Расположение отдельных таких таблиц и изображений делай на достаточном расстоянии по тексту и проверяй в браузере, желательно и с увеличенным разрешением в 1000 пк. Иначе увидишь то, что видишь. По идее третье изображение должно быть слева. Или объединяй его с предыдущими в таблицу. Чтобы текст не прилипал к изображениям в настройках изображения указывай границы (spasing). Если изображение большое, или их много и они объединены в таблицу, располагай их в центре. Вот все об организации пространства простой страницы.

Сложнее с многофункциональной, особенно главной страницы. Здесь основной инструмент - таблица. Возможности здесь просто громадны. На корпоративных сайтах чаще всего используют именно организующую роль таблиц. Посмотри в редакторе страницу Яндекса, например. Ты увидишь сложную совокупность вложенных друг в друга таблиц. Но их не видно, потому что толщина границ (Borders) выбрана равной нулю. Хотя технология таблиц позволяет очень много что делать с таблицами. Вот например кнопка. Это не графическое изображение. Это несколько таблиц, вложенных друг в друга. Но эффект такой же: НА ГЛАВНУЮ




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

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

Вот, пожалуй минимум по поводу организации пространства страницы.

Функции Фронтпейдж

Есть некоторые функции редактора, которые ты можешь использовать в дизайне:

Разделительные линии. Insert > Horizontal Line. Ее можно настраивать. Кликни по ней и подбирай размеры, цвет.

Примеры

Их можно использовать и при формировании таблиц, чтобы держать их размеры:





Бегущая строка Insert > Component> Marcquee

Не исполняется в Netscape и Opera. Можно разместить в ячейку таблицы: Бегущая строка Insert > Component> Marcquee



А это готовые кнопки Component>Hover Button.
Баннерная вертушка. может крутить до 8 баннеров: Component>Banner Ad Manager Для исполнения ее тебе редактор в корневую директорию разместит аплет. Еще - изображение, (в том числе и кнопка), которая меняется на другое при наведении на нее курсора: Для того, чтобы сделать это дело, размести первое изображение, выдели его, далее Format>Dinamic HTML Effects . Дальше вылетит панель настройки и далее сам разберешься


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

Смену страниц можно разнообразить эффектом Format>Page Transition - посмотри поэкспериментируй.

Если выделить текст, то выделив и использовав динамические эффекты (Format>Dinamic HTML Effects), можно получить разные способы появления текста. Я думаю ты обратил внимание как появился первый параграф этой страницы.

Редактор еще много чего предлагает, но большинство рассчитано на поддержку Майкрософтовских серверов ( А в России в основном UNIX). А для некоторых нужны библиотеки плагинов. Но я думаю, что и того, что я рассказал, тебе предостаточно на первое время. Добавлю еще примеры специальных символов. Все их ты найдешь на странице о символах. Но надо иметь в виду, что эти символы берутся в компьютере где просматривается страница. А там этих символов может и не быть. t1 Папка u* Почта vH Домой (главная страница)
A Указатель J Смайлик !?! Гостевая книга


То что я здесь понаписал конечно не исчерпывает темы вебдизайна. Тут можно и целую книгу написать, но на первое время тебе будет достаточно, чтобы вполне прилично оформить свой сайт. И, конечно очень много будет зависеть от твоего вкуса, терпения и аккуратности. Иногда просто доходит до смешного. Один товарищ оформил страницу используя программу Xara. Фон в виде полированного камня. Оглавление раздела в виде выгравированного в этом камне углубления с текстом. И это углубление, что ты думаешь? ОТБРАСЫВАЕТ ТЕНЬ!!!

Ну а теперь на следующую страницу:

поиск и навигация