Структура HTML-документа

admin — Mon, 06 Oct 2008 20:16:13 +0000

Структура HTML документа.

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

<В>Обыкновенный текст

Как видно из примера, текст, который должен отображаться жирным начертанием, обособлен группами символов <в> и . Такие группы принято называть тегами. Сразу следует сказать, что теги бывают одинарными и парными. В случае с нашим примером тег является парным, т. к. он закрывает HTML-конструкцию вместе с символом “/” (прямой слэш).

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

Кроме того, параметры и их значения могут либо вообще отсутствовать у какого-то определенного тега, либо считаться необязательными и устанавливаемыми только в случае изменения стандартных характеристик тега:

В приведенном примере для тега построения таблицы

один параметр (WIDTH) указан со значением, другой (BORDER) такового не содержит.Некоторые теги могут указываться вообще безо всяких параметров (например, принудительный перенос строки
). Другие теги могут включать несколько значений одного параметра (”INDEX, FOLLOW” для мета-определения “robots”).Любой HTML-документ содержит три основных обязательных раздела: HTML, HEAD и BODY. Рассмотрим подробнее каждый из них.

Раздел HTML

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

Раздел HEAD

Раздел HEAD выполняет функцию рабочего заголовка HTML-документа и является, по сути, “бойцом невидимого фронта” - - теги, указываемые внутри этого раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя. Данному разделу сопоставлен парный тег . Рассмотрим теги HTML, которые указываются внутри раздела HEAD.

Название документа Парный тег <TITLEX/TITLE> предназначен для указания имени созданному электронному документу. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а визуальный заголовок HTML-страницы. Указаниеконструкции <TITLEX/TITLE> не является обязательным, однако рекомендуется по ряду причин:отсутствие тега названия документа заставит браузер при интерпретации HTML-кода вывести в заголовке окна фразу типа Untitled Document (Документ без названия), что не соответствует ни тематике вашего электронного документа, ни его наполнению; при попытке добавить созданный вами HTML-документ (без тега-контейнера <TITLEX/TITLE>) в “закладки” браузера пользователю придется самостоятельно вписывать название добавляемой страницы; Поисковые системы, столкнувшись с безымянной страницей, занесут ее в свои базы данных под заголовком Untitled, что сделает HTML-документ безликим и похожим намиллионы других электронных документов, размещенных в Интернете. <a href="http://mindjob.ru/wp-content/uploads/2008/10/struct_html3.jpg"></a> Теги: <a href="http://mindjob.ru/?s=HTML" title="Обзор по HTML" rel="tag">HTML</a>, <a href="http://mindjob.ru/?cat=1" title="Обзор по Начинающим" rel="tag">Начинающим</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" title="Обзор по разработка" rel="tag">разработка</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a>, <a href="http://mindjob.ru/?s=%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML" title="Обзор по структура HTML" rel="tag">структура HTML</a> </article> <article> <h1>Запуск скриптов при помощи ссылок</h1> admin — Tue, 30 Sep 2008 21:38:09 +0000 Скрипты и гиперссылки В старые добрые времена простая гиперссылка выполняла строго определенную задачу: навигацию. Посетитель щелкнул на ссылке и перешел куда-то. Это было так просто. Даже сегодня навигация остается основным назначением гиперссылок. Однако в Интернете посетители желают делать больше, чем просто переходить от одной страницы к другой. Они хотят видеть функциональность. Они хотят скрипты и другие интерактивные штучки. Они хотят программные мини-решения. Когда вы приметесь разрабатывать такие типы интерфейсов, то вскоре поймете, что что-то на странице должно запускать все эти заказные функции. Логическим выбором является что-либо, на чем можно щелкнуть. Вариантом являются кнопки HTML-формы. Также подходят и изображения, похожие на кнопки. Подходят также и гиперссылки. Когда вы бродите по Интернету, щелчок на том, что похоже на гиперссылку, может не иметь ничего общего с навигацией. Вместо этого может быть запущен скрипт. Совет Поскольку гиперссылки для навигации и гиперссылки для запуска скриптов на странице выглядят одинаково, их нельзя отличить, полагаясь только на внешний вид. Вместо этого используйте другие ухищрения, чтобы передать назначение ссылки вашим посетителям. Такие факторы, как текст ссылки и ее размещение относительно других элементов страницы, помогают посетителям понять, что произойдем когда они щелкнут на ссылке Удобство использования С точки зрения удобства использования, запуск скриптов при помощи гиперссылок является рискованным делом из-за потенциальных проблем, возникающих на практике. Если вы не решите, как отличать гиперссылки для запуска скриптов от гиперссылок для навигации, это может очень просто сбить с толку ваших посетителей и расстроить их надежды относительно того, что произойдет после щелчка на ссылке. С другой стороны, текстовые гиперссылки являются более привлекательными и скромными, чем большинство графических кнопок, и они ни капли не похожи на грубые и отталкивающие кнопки HTML-формы. Если использовать гиперссылки, запускающие скрипты, в правильном контексте, они улучшат общий вид и впечатление от вашего интерфейса, который никогда не будет плохим. Одним из способов запуска скрипта является создание ссылки, ведущей в никуда, и присвоение результата событию ссылки onClick, наподобие следующего кода: <а hrefj=”#” onClick=”doScript();”>Launch the’script</a> Ну хорошо, с технической точки зрения эта ссылка ведет куда-то. Знак нумерации, формирующий значение атрибута href, ссылается на текущую страницу, поэтому щелчок на этой ссылке аналогичен щелчку на кнопке Refresh (Обновить) браузера. Зачем нужна самоотносящаяся ссылка? Обычный HTML-текст не реагирует на событие onClick, а гиперссылка - реагирует. Посетителю необходимо предоставить что-нибудь, на чем можно щелкнуть поэтому указывается ссылка, однако мы не хотим, чтобы гиперссылка вела куда-либо. Ссылка, которая, по существу, обновляет страницу, выглядит, как безобидный компромисс. Такая стратегия работает достаточно хорошо, однако она может доставить неудобства, особенно если посетитель вынужден пролистывать страницу, чтобы найти ссылку. Щелчок на самоотносящейся гиперссылке заставляет браузер перепрыгнуть обратно наверх страницы, так что посетители теряют текущее место в тексте. Лучшей альтернативой является указание скрипта в значении самого атрибута href, наподобие следующего кода: <а h r e f = ” j a v a s c r i p t : d o S c r i p t ( ) ; ” > L a u n c h the script</a> Выполнив это, вы избавитесь от самоотносящейся ссылки, поэтому браузер не будет перепрыгивать по странице, когда посетитель щелкнет на этой ссылке. Этот способ лучше для всех. Просто не забывайте указывать фразу j a v a s c r i p t : перед JavaScript-кодом в значении атрибута href. В противном случае браузер предположит, что значение атрибута href является путем к странице. Теги: <a href="http://mindjob.ru/?cat=4" title="Обзор по Web мастеру" rel="tag">Web мастеру</a>, <a href="http://mindjob.ru/?s=%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81" title="Обзор по интерфейс" rel="tag">интерфейс</a>, <a href="http://mindjob.ru/?s=%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F" title="Обзор по навигация" rel="tag">навигация</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" title="Обзор по разработка" rel="tag">разработка</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a>, <a href="http://mindjob.ru/?s=%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C" title="Обзор по функциональность" rel="tag">функциональность</a> </article> <article> <h1>Обеспечьте пути отхода посетителям вашего сайта</h1> admin — Tue, 30 Sep 2008 21:10:51 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/most.jpg"></a>Не сжигайте мосты… Представьте, что вы вошли в комнату через дверь, а когда повернулись, чтобы выйти, дверного проема уже не было. Вы бы не стали разрабатывать проект такого дома, кроме как для карнавала. Однако в Интернете существует достаточное количество сайтов, похожих на павильон смеха, которые по существу делают то же самое - выбрасывают посетителей на страницу, не предоставляя при этом пути назад. Разработка навигации помогает предотвратить эффект павильона смеха. Предоставление обратного пути сводится к простому размещению на каждой странице нижнего уровня ссылки, ссылающейся на следующую верхнюю страницу в структуре сайтадочно так же, как на каждой странице верхнего уровня размещается ссылка на следующую страницу нижнего уровня. Множество Web-сайтов не строго придерживается подобной прямолинейности. На самом деле, хороший Web-сайт обычно является нелинейным, позволяя посетителю выполнять большие скачки по структуре сайта в интересах скорости. Совет Когда посетитель опускается вглубь структуры сайта на несколько уровней, принято связывать каждую из страниц нижнего уровня непосредственно со страницей верхнего уровня. Это очень удобно, поскольку посетитель имеет возможность сделать несколько шагов за один раз. Но не забывайте также включать пошаговые переходы. Всегда предоставляйте посетителям возможность вернуться обратно на страницу, которую они посетили непосредственно перед текущей страницей. Глубина в несколько уровней Для такого сценария предоставление обратного пути является не таким уж простым действием, как связывание страниц в обоих направлениях. Мы бы создали беспорядок на экране, разместив ссылки на все возможные ссылаемые страницы. В то же время, для нелинейного сайта предоставление обратного пути является еще более важным из-за абсолютного количества возможностей. Вы же не хотите, чтобы посетители чувствовали себя затерянными в океане. Если посетители потеряются, они воспользуются кнопкой Back (Назад) своего браузера, который выполнит эту работу. Это также отвлечет их внимание от сайта и его содержимого, что не очень хорошо. Это плохо и для посетителя, поскольку замедляется его работа. Простая ссылка с использованием языка JavaScript полностью решает эту проблему: <а h r e f = ” j a v a s c r i p t : h i s t o r y . b a c k ( ) ; ” > G o back</a> Метод h i s t o r y . back работает точно так же, как и кнопка Back (Назад). Метод загружает предыдущую страницу. Не имеет значения, какую дверь используют ваши посетители, ссылка Go Back (Перейти назад) оставит открытой для них ту же самую дверь. Совет Некоторые дизайнеры, слишком тесно сотрудничающие с отделом рекламы, ощущают необходимость заблокировать кнопку браузера Back (Назад), чтобы заставить пользователя остаться на сайте, якобы посетитель каким-то образом забудет закрыть окно браузера и никогда больше не вернется. Пожалуйста, воздержитесь от побуждения управлять навыками работы посетителя с браузером. Ваш сайт никогда не должен блокировать кнопку Back (Назад) (или любые другие кнопки браузера, коли на то пошло), даже если ваша навигация является безупречной. Некоторые посетители предпочитают использовать интерфейс браузера. Кто посмеет осудить их? Обычно посетители больше полагаются на интерфейс браузера, чем на интерфейс сайта. Совет Сделайте так, чтобы ссылку Go Back (Перейти назад) было просто найти, иначе ваши посетители будут просто использовать кнопку Back (Назад) своего браузера, что делает бессмысленным размещение ссылки Go Back (Перейти назад) на странице. <a href="http://mindjob.ru/wp-content/uploads/2008/09/table_navi.jpg"></a> Метод history.back - это не единственный метод объекта history языка JavaScript. В таблице, приведенной выше, перечислены некоторые другие методы для справки, однако применяйте их умеренно. Ссылка Go Back (Перейти назад) на самом деле очень полезна, однако ссылка Go Forward (Перейти вперед) или ссылка Go Two Steps Back (Перейти на два шага назад) создают неразбериху. Используя данные приемы, навигация вашего сайта будет на высоте. Теги: <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?cat=11" title="Обзор по Полезные приемы разработчика" rel="tag">Полезные приемы разработчика</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F" title="Обзор по навигация" rel="tag">навигация</a>, <a href="http://mindjob.ru/?s=%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5" title="Обзор по оформление" rel="tag">оформление</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8" title="Обзор по разработка навигации" rel="tag">разработка навигации</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a> </article> <article> <h1>Управление всплывающими окнами</h1> admin — Mon, 29 Sep 2008 20:27:03 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/vsplyvautscie_okna.jpg"></a>Давайте вместе разберемся в необходимости всплывающих окон и их правильном применении. В фэн-шуй Web-дизайна всплывающие окна подобны кабинету с углами странной формы, который не всем подходит. Некоторые люди никогда не любили всплывающие окна, называя их враждебными по отношению к пользователю, считая их лично оскорбительными и полагая что их могут делать только люди, у которых нет других проблем. Однако всплывающие окна стали конкурентоспособными. Они заняли свое место в Web-дизайне. Всплывающие окна отлично подходили для вызова экранов помощи, быстрых определений, расширенных описаний и других кусочков полезной, но второстепенной информации, которая не заслуживала помещения на собственную страницу. При правильном использовании всплывающие окна помогали сделать схему навигации более изящной и сфокусированной. Окна спама Позднее корыстные рекламодатели, вроде людей из отдела рекламы, взяли на вооружение всплывающие окна и превратили их в раздражающую сферу спама. Скоро вы не сможете посетить какой-либо ресурс в Интернете без многократно повторяющихся, сверкающих, медленно загружающихся окон с содержимым, едва имеющим отношение к сайту, которое вам не нужно, которое вы не запрашивали или не хотели получить. Поэтому всплывающие окна везде потеряли доверие, и дизайнеры не используют их по назначению. Необычно видеть всплывающие окна, содержащие существующий сервис Web-сайта, в то время как продолжают открываться всплывающие окна с рекламой. Если вы желаете перевоспитать своих посетителей и иметь дело со случайными электронными письмами, наполненными ненавистью, всплывающие окна все еще могут оставаться ценным свойством вашего сайта. Они не стали менее полезными для отображения второстепенного содержимого со времени, когда всплывающие окна были на пике популярности. Они могут превратить во всех отношениях неудобный дизайн. Хитрость заключается в эффективном использовании всплывающих окон. Вот несколько руководящих принципов: <ul> <li>Делайте их небольшими. Это относится к физическим размерам всплывающего окна (которые можно контролировать) и к помещаемому в него объему содержимого. Не пытайтесь его переполнять слишком большим количеством дизайна. Большие всплывающие окна с множеством изображений и сложными макетами могут слишком долго загружаться, что даст вашим посетителям все причины полагать, что загружается моргающее приставание.</li> </ul> <ul> <li>Фокусируйтесь на его содержимом. Содержимое всплывающих окон должно быть коротким и приятным. Если вы развернулись так, что появляется необходимость создания в окне полос прокрутки, возможно, вам следует еще раз подумать о своей стратегии. Помните, что всплывающие окна наилучшим образом подходят для быстрого отображения второстепенной информации. Большие порции информации находятся на законченных страницах вашего сайта.</li> </ul> <ul> <li>Не полагайтесь на них. Поскольку некоторые люди никогда не побеспокоятся посмотреть на самое невинное, разработанное с умом всплывающее окно, не используйте их для критически важного содержимого. В любом случае, эта работа ложится на основные страницы. Всплывающие окна приобретают больший смысл, выполняя вспомогательную функцию; например, коротенькие страницы помощи.</li> </ul> <ul> <li>Предоставьте управление посетителям. Не заставляйте всплывающие окна открываться автоматически! Всплывающее окно должно открываться только тогда, когда посетитель определенно щелкнул на ссылке или кнопке. Кроме того, сделайте простым закрытие всплывающего окна, после того, как оно было открыто.</li> </ul> Теги: <a href="http://mindjob.ru/?cat=4" title="Обзор по Web мастеру" rel="tag">Web мастеру</a>, <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5_%D0%BE%D0%BA%D0%BD%D0%B0" title="Обзор по всплывающие окна" rel="tag">всплывающие окна</a>, <a href="http://mindjob.ru/?s=%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5" title="Обзор по оформление" rel="tag">оформление</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" title="Обзор по разработка" rel="tag">разработка</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a> </article> <article> <h1>Разработка специальных возможностей</h1> admin — Mon, 29 Sep 2008 19:25:59 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/brayal.jpg"></a>Web-сайты для людей с ограниченными способностями. Вы являетесь дизайнером. Интернет же является такой графической средой, где легко забыть, что не каждый человек бродит по Интернету, используя свои глаза. Ведь Интернет - это мировое сообщество всех людей, включая людей с ограниченными возможностями. Инвалиды по зрению тоже желают посещать ваш сайт. То же хотят делать люди с когнитивными расстройствами или с затруднениями при обучении. Если бы эти люди появились перед вашей дверью, вы бы не захотели оскорбить их или сделать их визит неприятным. Точно также при разработке Web-сайта вы должны учитывать их особые ситуации. Доступность для каждого Разработка специальных возможностей заключается в том, чтобы сделать содержимое Web-сайта доступным для каждого, независимо от инвалидности. Интернет не единственное место, где важны специальные возможности. На самом деле, Интернет является одним из последних мест, где рассматриваются вопросы специальных возможностей. Общественные здания должны иметь пандусы и лифты, чтобы обеспечить легкий доступ людям с физическими недостатками. Автомобильные стоянки выделяют лучшие места для инвалидов. Кинотеатры предоставляют специальные места и ряды, более удобные для инвалидов-колясочников. Телевизионные программы выходят с субтитрами для тех, кто плохо слышит. Только в конце 1990-х годов люди, работающие с компьютерами, начали думать так же. Теперь в Соединенных Штатах и многих других странах специальные возможности являются вопросом права. Правительству США запрещено давать подряды исполнителям - в том числе, разработчикам Web-сайтов - чьи продукты не отвечают нормам по специальным возможностям. Никто не собирается тащить вас в федеральную тюрьму, если вы не создали Web-сайт со специальными возможностями. Вы просто не сможете выгодно устроиться и получать от американских налогоплательщиков семь тысяч долларов за ссылку. Специальные возможности - это не сложно Простого упоминания словосочетания cпециальные возможности в обычном разговоре достаточно, чтобы причинить страдание некоторым дизайнерам, однако наделить Web-сайт специальными возможностями на самом деле не так уж и сложно. Вы не обязаны разрабатывать способ направления изображений прямо в мозг инвалида по зрению. Вы не обязаны пытаться передать каждому одинаковые впечатления от сайта. Вы просто должны предоставить эквивалентное впечатление, т.е. предоставить информацию на сайте таким образом, чтобы люди с инвалидностью имели тот же уровень доступности, что и нормальные люди. Ваши нетрудоспособные посетители даже пойдут на компромисс. У них на компьютерах установлено специальное программное обеспечение и оборудование, например, читатели экрана, преобразователи текст-речь и преобразователи текст-шрифт Брайля. Все, что вам необходимо сделать, - представить содержимое таким образом, чтобы эти устройства смогли его найти и работать с ним. Текстовые эквиваленты Обычный текст является исходным материалом, который используют инструменты специальных возможностей для поиска и преобразований. Поэтому, создавая сайт со специальными возможностями, желательно присвоить соответствующий текст каждому нетекстовому кусочку содержимого вашего сайта. Это и есть текстовые эквиваленты. Идея заключается в том, что если вы можете описать словами части вашего сайта, которые только визуальны (например, изображения), вы предоставите людям с инвалидностью эквивалентное впечатление о содержимом вашего сайта. Да, это разные впечатления, но все в порядке. Нетрудоспособные люди должны получить ту же информацию, что и другие люди, независимо от того, увидели они ее на картинке или прослушали текстовое описание этой картинки. Теги: <a href="http://mindjob.ru/?cat=4" title="Обзор по Web мастеру" rel="tag">Web мастеру</a>, <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81" title="Обзор по интерфейс" rel="tag">интерфейс</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" title="Обзор по разработка" rel="tag">разработка</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8" title="Обзор по специальные возможности" rel="tag">специальные возможности</a> </article> <article> <h1>Выбор цветов интерфейса</h1> admin — Sun, 28 Sep 2008 11:59:08 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/color_select.jpg"></a>Выбор цвета для интерфейса. Оформление интерфейса. Графическая отделка сайта предоставляет вам наибольшую свободу в выборе цветов. Вы не обязаны столько же думать о вопросах удобства использования цвета. Вместе с тем, здесь задается зрительное ощущение сайта, и цвет играет немаловажную роль в формировании подходящего настроения. Некоторая работа по цветовому дизайну уже может быть сделана. Если вы разрабатываете сайт для бизнеса или организации, в вашем дизайне должны выразительно использоваться корпоративные цвета. Корпоративные цвета - это лишь цвета, на которые департамент по маркетингу затратил много времени и ресурсов, чтобы ассоциировать их с организацией. Вспомните красные дуги компании Coca-Cola или золотые дуги компании McDonald’s. Догадайтесь, какие цвета изобилуют на соответствующих корпоративных Web-сайтах. Использование корпоративных цветов - это способ брендинга или, другими словами, приведения сайга к общему корпоративному виду организации. Как только вы захотите использовать в дизайне логотип группы, вы также захотите включить другие признаки фирмы, например, корпоративные цвета. Определение Брендинг - это метод приведения сайта к общему корпоративному виду организации, используя элементы из маркетингового материала, например, логотипы и корпоративные цвета, в дизайне. Если я поработаю с отделом маркетинга, буду ли я уважать себя утром? Работа с отделом маркетинга часто оставляет неприятное впечатление. Но просто подумайте об этом следующим образом. Бюджет на рекламу вашего сайта, возможно, равен нулю. Однако каждый доллар, потраченный на продвижение торговой марки компании в других источниках, например, по телевидению, можно считать долларом, потраченным на продвижение вашего сайта - пока вы эффективно используете торговую марку на сайте. Они тратят деньги, а вы получаете выгоду. Кто сказал, что отдел Web-разработок не смеется последним? Психология цвета У цвета также есть психологическое измерение, которое, ио крайней мере, стоит учесть при планировании подхода. Вы не задавались вопросом, почему у множества Web-сайтов в основном интерфейсе присутствует синий цвет? Взглянув на таблицу,вы увидите, что у людей синий цвет ассоциируется со стабильностью и доверием – два отличных качества для продвижения, если вы желаете удержать своих посетителей, особенно, если разрабатывается сайт для финансового или медицинского сектора. <a href="http://mindjob.ru/wp-content/uploads/2008/09/table_color1.jpg"></a> К счастью, дизайн совсем не имеет отношения к науке. Невозможно просто превратить цвета в предугадываемые эмоциональные отклики, точно так же, как нельзя одеть сайт с неудачным дизайном в синие цвета и надеяться, что это будет способствовать атмосфере доверия. Цвет должен быть одной стороной общей стратегии для передачи настроения и назначения сайта. Если ваша цель - предоставить информацию,дополните консервативный дизайн успокаивающими цветами. Если ваша цель - развлечения, попробуйте использовать более динамичные дизайны и рискните, применив энергичные цвета. Все ли культуры имеют одинаковые ассоциации? Нет. Цветовые ассоциации не универсальны. На самом деле, многие культуры имеют совершенно отличные интерпретации цветов. Трудно предположить, что невеста на Западе наденет красное свадебное платье - цвета пожарной машины - и тем самым не вызовет насмешек. Тем не менее, красный цвет является цветом непорочности в Индии и Китае. И в то время как зеленый цвет на Западе может обозначать богатство, это очень неудачный цвет на Востоке, где он обозначает супружескую измену. Если вы разрабатываете сайт для посетителей из разных стран, в достаточном объеме изучите их культуру Теги: <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B2%D1%8B%D0%B1%D0%BE%D1%80_%D1%86%D0%B2%D0%B5%D1%82%D0%B0" title="Обзор по выбор цвета" rel="tag">выбор цвета</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по оформление сайта" rel="tag">оформление сайта</a>, <a href="http://mindjob.ru/?s=%D0%BF%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F_%D1%86%D0%B2%D0%B5%D1%82%D0%B0" title="Обзор по психология цвета" rel="tag">психология цвета</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a> </article> <article> <h1>Выбор цвета ссылок</h1> admin — Sun, 28 Sep 2008 11:35:37 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/concrete_colour.jpg"></a>Цвет ссылок и оформление сайта С годами появились два стандарта в отношении цветов гиперссылок. Они представлены чуток ниже Изо всех сил старайтесь использовать эти цвета ссылок в вашем Web-дизайне. Посетители уже знают из своего опыта, что синий цвет обозначает непосещенную ссылку, поэтому, если они смогут использовать это знание, когда придут к вам на сайт, вы уберете еще одно препятствие в удобстве использования. Цвет: Синий, Фиолетовый Обозначает: Непосещенные ссылки, Посещенные ссылки Код цвет: #0000FF, #990099 <a href="http://mindjob.ru/wp-content/uploads/2008/09/body1.gif"></a>Совет Приберегите слишком яркие оттенки для меток на графических кнопках или в качестве цветов гиперссылок. Эти элементы должны привлекать внимание посетителей, поэтому они лучше подходят для экзотических или необычных цветов. Нестандартный цвет гиперссылок Конечно, не всегда целесообразно или желательно использовать стандартные цвета гиперссылок. Возможно, вы захотите привести ссылки в соответствие с цветами компании или цветами, связанными с вашим бизнесом или группой. Возможно, синий и фиолетовый цвета не подходят в общем контексте вашего дизайна. В конце концов, отказаться от стандартов лучше, чем заставить их работать. Если вы отказываетесь от стандартов, отказывайтесь единообразно. Используйте одни и те же цвета для представления одних и тех же элементов, страница за страницей. Девизом вашего дизайна должно стать: Ожидания оправдались. Это ключ к обучению посетителей тому, как работает ваш сайт. Если они стали ожидать, что красный цвет используется для непосещенных ссылок, используйте красный цвет для непосещенных ссылок абсолютно везде на вашем сайте. Совет Вы не обязаны следовать стандартам вплоть до точных шестнадцатеричных кодов цветов. Если рекомендуемый оттенок синего вам не подходит, попробуйте более темный или более светлый оттенок. до тех пор, пока посетители будут считать данный цвет синим, ваш сайт будет получать преимущество от традиционной цветовой ассоциацииСоветКак и в случае с большинством остальных жемчужин традиционной мудрости Интернета, стандарты цветов гиперссылок могут неожиданно привести к обратным результатам. Если вы решили не следовать стандартам, то полностью избегайте их. Вы создадите меньше путаницы, если вообще не будете использовать синий цвет Теги: <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по оформление сайта" rel="tag">оформление сайта</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a>, <a href="http://mindjob.ru/?s=%D1%86%D0%B2%D0%B5%D1%82_%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA" title="Обзор по цвет ссылок" rel="tag">цвет ссылок</a> </article> <article> <h1>Выбор цветов текста и фона</h1> admin — Sun, 28 Sep 2008 11:20:46 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/color.jpg"></a>Давайте обсудим выбор цвета текста и фона и посмотрим, как он будет влиять на оформление сайта. ЛЮДИ не читают текст на Web-странице. У них нет на это времени. Чтение чрезвычайно затягивает процесс. Вместо этого они любят просматривать страницу и выбирать частицы и кусочки информации, которая им интересна. Если хотите, можете винить в этом закат западной цивилизации или слишком большое количество телевизионных программ и видеоигр, но вредные привычки просматривать все бегло остаются фактом. Лучшее, что вы, как дизайнер, можете сделать с текстом на вашем сайте, - выполнить его простым для просмотра. Контраст В этом отношении контраст является наиважнейшим инструментом. Нам требуется мягкое выделение текста на фоне, чтобы блуждающие взгляды могли просматривать, не щурясь и не замедляя скорость, и читать текст слово за словом. Если контраст недостаточен, вашим посетителям будет тяжелее просматривать текст, что в свою очередь приведет к тому, что им будет тяжелее найти необходимую информацию. Тип контраста В то же время, не менее важен и тип контраста. Разительный или яркий контраст, исполняет две роли. Во-первых, он привлекает слишком большое внимание к тексту, который должен отходить на задний план, когда посетители не нуждаются в нем. А во-вторых, заставляет глаза посетителей работать усерднее, чем обычно, что приводит к головным болям и зрительному напряжению. Идеальный контраст между текстом и фоном понятен с точки зрения выделения текста, и спокоен в том смысле, что он не подавляет дизайн. Совет Для повышения контраста на странице вы можете подвергнуться соблазну использования жирного шрифта для всего текста. Не стоит этого делать. Жирный шрифт подходит лучше, когда используется в небольших количествах, для выделения или акцентирования. Подумайте об этом, ответив на вопрос: если вы кричите все время, как вы собираетесь увеличить громкость, когда это понадобится? Комбинации цветов Существует достаточно веских причин, чтобы испытать различные комбинации цветов. Бледные оттенки или оттенки с уменьшенной насыщенностью могут быть настолько же эффективны, как и белый цвет фона. Можно поэкспериментировать со светлым текстом на темном фоне, хотя эта схема, как правило, тяжелее для глаз. Если ваш сайт насыщен текстом, подобная схема может быть не лучшим выбором. Даже если на вашем сайте мало текста, позаботьтесь о выборе цвета фона страниц. Фон должен оставаться фоновым настолько, насколько возможно. Вы же не хотите, чтобы он отвлек внимание, направленное на основное содержимое ваших страниц. Фон - это не место для ярких или необычных оттенков. Оставьте их для подсветок элементов, которые используются специально для привлечения внимания, - и пусть содержимое страницы станет звездой представления а ваш дизайн сайта превратится в сказку. Теги: <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B2%D1%8B%D0%B1%D0%BE%D1%80_%D1%86%D0%B2%D0%B5%D1%82%D0%B0" title="Обзор по выбор цвета" rel="tag">выбор цвета</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по оформление сайта" rel="tag">оформление сайта</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a> </article> <article> <h1>Группирование в дизайне сайта</h1> admin — Sun, 28 Sep 2008 10:00:44 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/leaf.gif"></a>Группирование - это дизайнерский прием, в котором схожие элементы помещаются друг возле друга. Возьмем любое количество объектов. Если их расположить равномерно по всему пространству дизайна, они будут выглядеть, как случайные объекты - ни больше, пи меньше. Теги: <a href="http://mindjob.ru/?cat=4" title="Обзор по Web мастеру" rel="tag">Web мастеру</a>, <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5" title="Обзор по группирование" rel="tag">группирование</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81" title="Обзор по интерфейс" rel="tag">интерфейс</a>, <a href="http://mindjob.ru/?s=%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по оформление сайта" rel="tag">оформление сайта</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" title="Обзор по разработка" rel="tag">разработка</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a> </article> <article> <h1>Разработка дизайна, облегчающего навигацию</h1> admin — Sun, 28 Sep 2008 09:35:32 +0000 <a href="http://mindjob.ru/wp-content/uploads/2008/09/designsite.jpg"></a>Дизайн сайта и навигация Дизайн в Интернете на самом деле не ограничивается предоставлением посетителям чего-то привлекательного, на что приятно посмотреть. Он играет более важную роль: создает ощущение места. Хороший дизайн гармонично объединяет страницы сайта. Другими словами, дизайн обозначает место размещения сайта. Он проводит границу вокруг определенного места в Интернете и сообщает: Здесь все гармонично. Это ощущение места достигается при помощи единообразного использования элементов дизайна по всему сайту. Такие элементы страниц, как макет, цветовая схема и стиль текста, должны быть зрительно связаны. Если страницы сайта используют различные подходы к дизайну, независимо от того, насколько эффективным может быть дизайн этих отдельных страниц, будет создано ощущение места сродни торговому центру. Каждая сверкающая витрина магазина соревнуется с другими витринами безвидимого смысла или цели. Это визуальная катастрофа. Однако когда страница за страницей применяется некоторый единообразный дизайн сайта, получается нечто наподобие высококлассного универсального магазина. Поднимается ваш уровень. Привлекаются более серьезные клиенты. Когда посетители перемещаются по сайту, им кажется, что они ходят с этажа на этаж и из отдела в отдел, которые находятся под одной крышей. Более того, способ использования дизайна может помочь посетителям понять, в каком отделе они находятся, не ища планы этажей около лифтов. Вот как это работает. Содержимое большинства сайтов организовано в соответствии с определенной иерархией или логической структурой; это означает, что разработчики сайта разбили представляемую информацию на категории и подкатегории, например: Фильмы <ul> <li>Боевик</li> </ul> <ul> <li>Комедия</li> </ul> <ul> <li>Драма</li> </ul> <ul> <li>Мелодрама</li> </ul> <ul> <li>Мистика/Приключения</li> </ul> <ul> <li>Ужасы</li> </ul> <ul> <li>Научная фантастика</li> </ul> Музыка <ul> <li>Популярная</li> </ul> <ul> <li>Джаз</li> </ul> <ul> <li>Классическая</li> </ul> Игры <ul> <li>Персональный компьютер</li> </ul> <ul> <li>Приставка</li> </ul> О нас Преимущество иерархической структуры заключается в том, что она проводит посетителей именно туда, куда они желают попасть. Навигация доставляет их на необходимый этаж, а подкатегории направляют их к необходимому отделу на этом этаже. Это быстро, просто и наглядно, как при перемещении по реальному зданию. Ваша задача, как дизайнера, заключается в предельном улучшении данного эффекта. Вам нужно, чтобы графическое представление сайта максимально соответствовало организационной структуре. Хитрость заключается в том, чтобы сделать страницы для каждого уровня иерархии отличающимися визуально, при этом придерживаясь общего единообразного вида и функциональности. <a href="http://mindjob.ru/wp-content/uploads/2008/09/designsite2.jpg"></a>Обратите внимание на предоставленный для примера сайт. По крайней мере, дизайн унифицирован. Навигация понятна и легко доступна. Посетители не потеряются при просмотре сайта. Ну, скорее всего. Если посетители вошли через переднюю дверь, т.е. если они появились на первой странице сайта и перемещались по категориям и подкатегориям – возможно все будет в порядке. Однако Web-сайт - это не реальное место. Оно является виртуальным. Это место обладает свойствами, которыми реальные места не обладают. Так, посетители не обязаны входить через переднюю дверь. Благодаря поисковым системам, закладкам и обмену ссылками между друзьями по электронной почте, посетители могут материализоваться в дальних уголках вашего сайта, не имея никакого понятия о том, где они находятся по отношению ко всему остальному. Однако если ваш дизайн намекает на определенное положение и общий смысл места, это может помочь посетителям получить представление о сайте, независимо от того, как они туда попали. Совет Даже не думайте о разработке сайта, предварительно не набросав его структуру. Не обязательно знать каждую отдельную категорию или подкатегорию. В любом случае, они, вероятно, будут изменяться множество раз в процессе разработки. Однако следует знать, хотя бы приблизительно, насколько глубокой будет иерархия, чтобы иметь возможность обеспечить особый, но при этом схожий, дизайн для страниц каждого уровня. Теги: <a href="http://mindjob.ru/?cat=4" title="Обзор по Web мастеру" rel="tag">Web мастеру</a>, <a href="http://mindjob.ru/?cat=10" title="Обзор по Дизайнеру" rel="tag">Дизайнеру</a>, <a href="http://mindjob.ru/?s=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%B0%D0%B9%D1%82%D0%B0" title="Обзор по дизайн сайта" rel="tag">дизайн сайта</a>, <a href="http://mindjob.ru/?s=%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81" title="Обзор по интерфейс" rel="tag">интерфейс</a>, <a href="http://mindjob.ru/?s=%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F" title="Обзор по навигация" rel="tag">навигация</a>, <a href="http://mindjob.ru/?s=%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" title="Обзор по разработка" rel="tag">разработка</a>, <a href="http://mindjob.ru/?s=%D1%81%D0%B0%D0%B9%D1%82" title="Обзор по сайт" rel="tag">сайт</a> </article> </main></body></html>

Зарабатывай с умом на собственном сайте

Структура HTML-документа