Итак, вы хотите создать Web-страничку!
Урок 6 - Дизайн HTML-документов

Зачем вам вообще нужно делать страницу?
Хотя этот вопрос можно и не задавать. Страницы создают для себя или для фирмы.

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

Можно же создать интересное место, наполнить его информацией, поддерживать и обновлять его. И получать от этого удовольствия не меньше, чем от издания собственного журнала.

Фирме страница нужна тоже. Но не из соображений тщеславия, а потому, что про фирму должны знать. А если про нее ничего не знают, то пойдут в ту, про которую знают. WWW-страница экономит фирме кучу денег, рассказывает о ней потенциальному клиенту нужную информацию.

С чего начинается создание страницы? Однозначно ответить сложно. Надо придумать себе правило, а потом им руководствоваться. Иногда работа начинается с графики, иногда с текста.

Допустим, мы начали с текста. Собственно говоря, HTML - язык разметки текста, а не картинок. А создание страниц начинается именно с HTML. Без него - только e-mail можно отправлять, да и то, в последнее время даже почта в гипертексте норовит прийти.

Чем отличается текст на WWW от текста на бумаге? В первую очередь тем, что текст из Интернета вы видите на экране. А это имеет вагон и маленькую тележку минусов. Текст с экрана неудобно читать. Другая - самая, пожалуй, большая - проблема заключается в том, что каждый человек, просматривающий вашу страницу на своем компьютере в своем браузере, волен настроить свои шрифты безо всякого учета ваших пожеланий. Он может выбрать себе основным шрифтом какую-нибудь готическую гарнитуру кеглем 24 пункта (кегель - размер шрифта, измеряется в пунктах). И вы ему не помешаете.

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

Теперь поговорим о том, как форматировать текст. Существуют две школы - ограничивать текст в таблице или не ограничивать никак. У каждого способа есть свои преимущества.

Поскольку у всех пользователей мониторы разного размера и разрешающей способности, вы не можете угадать, у кого какой ширины будет текст. Помните про то, что меньше 500 пикселей в ширину окно браузера никто не делает. (Можно позволить себе игнорировать тех, у кого монитор 9 дюймов - их пять человек во всем мире.) Эта величина диктуется и шириной линейки с пиктограммами в браузерах. Максимальная же ширина, в принципе, ничем не ограничена.

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


  • Если вы оформляете большой объем текста - скажем, библиотеку, поисковую систему, информационно-справочную систему, - не ограничивайте текст.

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

  • Если вы оформляете журнал, сделайте колонку не очень широкой - около 400 пикселей, чтобы по краям осталось место для комментариев, рубрик, рекламы и пр.

  • Для небольших текстов подойдет ширина 500-600 пикселей.

  • В некоторых случаях ширину надо указывать в процентах (<table width=90%>, например).

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

    Информационный дизайн (www.ya.ru) Презентационный дизайн (www.mtelecom.ru)
    живет на всю ширину экрана ограничен в ширине, чтобы умещаться в окне при минимальном разрешении (фиксированный дизайн на ширину больше 620 пикселей - ламерство и неуважение по отношению к пользователю)
    грузится за секунды и работает везде грузится долго даже на быстром канале, и пользователь с выключенной графикой лицезреет большое количество непоказанных картинок
    идеально подходит для ежедневного использования требуется человеку один раз в год - в момент принятия судьбоносного решения о покупке пейджера, компьютера, автомобиля, дома
    не требует времени на изучение - все сразу понятно как правило, имеет запутанную структуру, сложную навигацию, построенную на навороченной метафоре, требует привыкания к Главной Идее Дизайнера
    ваш знакомый дизайнер утверждает, что приведенный пример - ужасен ваш знакомый дизайнер утверждает, что приведенный пример - "так себе", но делает именно так, утяжеляя графику в три раза, произносит магические слова "я делаю настоящий дизайн", забывает сделать сайт совместимым с Netscape

    Поговорим о сочетании цветов. Тема эта совершенно безгранична.

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

    Можно прописать несложное лекарство - больному рекомендуется проверять цветосочетание в монохромном режиме:

    Не читается? Правильно, еще бы. Цвета одинаковой интенсивности вообще плохо читаются друг на друге.

    Попробуем поставить эти два цвета рядом:

    Данный пример (вполне приемлемого союза) является иллюстрацией того, что любые цвета могут употребляться с любыми другими. О чем уже написано выше. Дело в другом - не в возможности поставить два цвета рядом, а в пропорции сочетания. Критерием оценки должно служить только одно - читаемость. Если результат не читается, не надо убеждать себя в том, что цвета отлично подходят друг к другу.

    Подбор цветовой гаммы всегда должен начинаться с вопроса - "для чего?". Если вы оформляете сайт, то, вероятно, у вас есть некий объем текста, который на сайте нужно разместить. Если есть текст, то нужно позаботиться о его читаемости. Если, конечно, не выпендриваться вот так.

    Исследования показывают, что человеческий глаз лучше всего воспринимает черным по белому.

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

    Нужно ли делать заставки?

    Заставки нужны только на презентационных сайтах. Заставки должны произвести на посетителя определенное впечатление, создать настроение. Они необходимы на сайтах, где информация не меняется никогда или обновляется крайне редко. Если человеку сайт понравится, он положит на главную (а не на заставочную) страницу закладку.

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


    Какие бывают заставки.

  • Простая графическая заставка, коллаж, фотография, анимация, являющаяся ссылкой на главную страницу с содержанием.
  • Flash-заставка. Обычный презентационный ролик. Часто размещается как временная мера - заставить всех посмотреть информацию, скажем, о скидках. Месяц повисит - и исчезнет.
  • Простая страница, на которой расположена информация о технических ограничениях ("Сайт работает только в первом Explorer'е при разрешении 100x100").
  • Любой набор информации - ссылки на свежие новости, анонсы продуктов, адреса.

    Совершенно очевидно, что основная функция заставки (кроме информирования или создания настроения) - служить входом на сайт. Заставку надо делать так, чтобы вход был очевиден. К сожалению, большинство людей, решившихся на заставку, этого не понимают. Все элементы заставочной страницы должны сопровождаться ссылкой на главную страницу (в идеале). Иногда графику можно дополнять текстом с надписью "ВХОД". Это слово тоже должно быть ссылкой.

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

    Для начала решите, на каком языке вы будете писать названия файлов. Лучше использовать английский. Русский (точнее, транслитерация) уместен в редких случаях. (Крайне нежелательно смешивать языки, например: http://sait.ru/staff/sekretarsha/new/novichki.html).

    Каждый читатель должен иметь возможность навигации по всему сайту, стирая справа части адреса между дробями. Если стереть "XXXXX.html", попадаешь в оглавление параграфов и так далее.

    Ни в коем случае нельзя создавать ситуацию, когда посетитель, стерев часть адреса до директории, не получает осмысленного и предсказуемого содержимого.

    Несколько слов об использовании звука.

    Многие сайты сегодня используют фоновую музыку или проигрывают музыкальную заставку при входе на сайт. Этого делать нельзя по нескольким причинам:

    Звук имеет право на существование, если:

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

    Задача дизайнера часто как раз заключается в том, чтобы не испортить изначально хорошую и ценную информацию.

    <--Назад 

    • Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Содержание

     

    Это все!!!