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

Чтобы создать макет сайта было бы желательно знать определенные условия и стандарты изготовления макетов. Вот главные из них:

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

2. Не стоит писать контент на эскиз сайта. Его можно заменить простыми горизонтальными линиями.

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

Теперь вспомним, что на сайте должны обязательно присутствовать следующие элементы:

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

Макет сайта с фиксированной ширинойМакет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800?600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Плюсы макета с фиксированной шириной

Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);

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

Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024?768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).

Минусы макета с фиксированной шириной

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

У пользователей с небольшими мониторами (640?480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;

Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;

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

Советы по макету с фиксированной шириной:

Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640?480 не приходилось прокручивать сайт по горизонтали для нормального чтения;

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

Адаптивный резиновый макетРезиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

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

Плюсы резинового макета

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

Резиновый макет совпадает с макетом, применяемым броузером по умолчанию, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» сайт плюсом относительно удобства его использования? Я думаю, что можно;

Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы).

Минусы такого макета

Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: «Пустое пространство продает» (“White space sells”, не знаю русского эквивалента этого выражения, имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к вебсайтам;

Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше, короче говоря, вообще (плохо) поддерживается) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, в лучшем случае, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.

Некоторые советы по использованию этого макета

Используйте резиновый макет строго по назначению. Не позволяйте своим стремлениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то достаточно веская причина, чтобы использовать эту разновидность макета. Если вы все же решили использовать именно ее, убедитесь, что резиновый макет вашего сайта нормально смотрится на большинстве экранных разрешений. Иначе оставьте это, игра не стоит свеч;

Если при использовании резинового макета у вас есть области с фиксированной шириной, значит, на самом деле, вы получили гибрид резинового и фиксированного макета, и его минимальная ширина будет определена шириной фиксированных блоков или самого большого из объектов (картинок, например). Будьте осторожны. Если вы хотите сделать сайт именно с резиновым макетом, оно так и должно быть на самом деле, а не только на словах;

Если вы все же сделали гибрид резинового и фиксированного макета (как, например, изображено в моем CSS руководстве, убедитесь, что он нормально смотрится на разрешении 800?600.

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

Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).

Плюсы эластичного макета

Если все сделано правильно, то это очень стабильная верстка, потому все изменяет размер пропорционально. В результате при любом изменении размеров все по-прежнему хорошо;

Эластичный макет довольно сложная вещь, это неимоверно круто и каждый раз это вызов самому себе прежде всего. Первое мое знакомство с ним было на сайте Tommy Olsson (который, по видимому, является хорошим примером того, как следует делать эластичные сайты). Он поразил меня, заставил улыбнуться и глубоко задуматься о том, как я мало знаю (impressed the hell out of me). Лучшим примером может быть увеличение текста на сайтах с эластичным макетом: достаточно зажать ctrl и покрутить колесо мыши.

Минусы эластичного макета

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

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

Немного советов по эластичному макету

Если вы собираетесь верстать, используя эластичный макет, убедитесь, то он работает на маленьких мониторах. Иначе, зачем он вообще нужен?

Ограничьте размеры эластичного блока, определив размеры внешнего контейнера (используя резиновую или фиксированную ширину, т.е. создав гибридный макет). Например, #wrapper { width:60em; max-width:98%; }. Последователи «правильной идеологии» могут возразить, что это уже не будет истинно эластичным макетом, что он при этом ограничен или гибридизирован, но в ответ я спрошу: а какая разница? Да, «правильная идеология» замечательна и прекрасна, но только не тогда, когда речь заходит о пользовательском удобстве (золотые слова!);

Помните, что IE 6 и меньше не поддерживают свойство max-width, убедитесь, что при задании максимально большого текст в IE не появляется горизонтальной полосы прокрутки на разрешении 1024?768. В любом случае, можете посмотреть мое решение для CSS Zen Garden. Следующим шагом может стать верстка уже для разрешения 800?600 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план.

Форум — площадка для массового общения. Сейчас обычно подразумевает веб-форум — сайт на котором каждый желающий (или только избранный — по желанию администратора конкретного форума) посетитель может просматривать чужие сообщенияи или оставлять свои.

Очень распространены форумы типа «вопрос-ответ» или чат, когда один из посетителей создаёт тему с каким-либо вопросом, а остальные делятся своим опытом на эту тему. Часто такие форумы создают на тематических сайтах, чтобы посетители могли делиться мнениями по поводу контента сайта.

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

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

Сразу хочу предупредить, что без знания «HTML» и хотя-бы поверхностно «PHP» вам будет тяжело поддерживать свой форум в рабочем состоянии. В принципе Форум создается достаточно легко и сразу начинает работать без каких либо манипуляций с файлами, просто в скором будущем вам нужно будет устанавливать рекламу, счетчики и без знания «HTML» у вас ничего не выйдет. Форум мы будем делать на платном хостинге, потому, что лучше платить небольшую сумму раз в год, ни от кого не зависеть, да и платный хостинг всегда стабильнее бесплатного.

Делать форум лучше сначала у себя на компьютере, а потом переносить на хостинг. Нужно сначала установить базовый пакет «Денвер» — это набор дистрибутивов (Apache 2 + SSL, PHP 5, MySQL 5, phpMyAdmin) для работы с сайтами без выхода в интернет, тоесть вы создаете, настраиваите форум у себя на компьютере а когда все будет готово отправляете его на сервер вашего хостинг провайдера.

Как сделать форум популярным.Вполне распространённая ситуация, когда создаётся форум в дополнение к сайту (для увеличения популярности самого сайта, к примеру), создаются темы, разделы. Начинается долгий и мучительный процесс раскрутки форума, но кроме друзей на нём никто не регистрируется.

Прежде всего перед созданием и развитием своего форума, необходимо ответить самому себе на несколько вопросов.

1. Почему люди будут регистрироваться у Вас на форуме?
2. Привлекает ли ваш сайт людей уже сейчас?
3. Много ли других форумов похожей тематики?
4. Ваш форум будет уникальной тематики?
5. Будет ли форум отдельным или интегрирован в сам сайт?

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

Несколько правил:

1. Вы никого не приглашаете — останетесь один;
2. С плохо организованного форума гости уходят не представившись (в нашем случае не зарегистрировавшись);
3. Если вы не будете держать форум в порядке, «пьяные бродяги» распугают Вашу постоянную аудиторию и Вы их больше не увидите и форум будет не посещаемый.

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

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

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

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

Необходимо еще с этапа проектирования сайта думать о возможном просмотре его с мобильных устройств. Технология построения сайтов по принципу адаптивного (англ. responsive) дизайна позволяет создать один сайт, имеющий оптимальное отображение на всех видах устройств, при этом не требующий никаких действий со стороны пользователя (ручной или автоматический переход на мобильную версию, если разрешение меньше заданного). Данная технология исключает использование динамических элементов (например, JavaScript), загрузку которых многие пользователи мобильных устройств по разным причинам отключают, и дублирование информации на различных версиях, что плохо сказывается на позициях сайта в поисковых системах и вебометрических рейтингах.

На основе анализа сайтов вебометрического рейтинга были выявлены следующие особенности:

– большинство в течение последних 5 лет не обновляло визуальную и программную составляющую сайтов. В связи с этим элементы новых технологий CSS3 и HTML5 почти не используются, хотя они уже достаточно распространены;

– для большей динамичности на подавляющем большинстве сайтов используется JavaScript или его библиотеки;

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

– только 10% сайтов имеют версию для мобильных устройств и ни на одну из них нельзя зайти с персонального компьютера;

– 5% web-сайтов созданы с применением принципов адаптивного web-дизайна, хотя еще год назад ни один из проанализированных сайтов их не использовал.

Основные принципы проектирования адаптивного дизайна сайта.

1. Использование резинового типа макета (англ. fluid grid) – макета, в котором значение размера ширины родительского элемента (элементов) задаётся в процентах по отношению к разрешению монитора.

2. Резиновые изображения (англ. flexible images). Все изображения должны масштабироваться, исходя из предельно допустимого значения ширины. Оптимальным является их отображение в натуральную величину. При изменении пользователем окна браузера до размера менее самого изображения, оно автоматически уменьшается, чтобы вписываться по ширине в окно браузера наилучшим образом.

3. Использование media queries – правил CSS3, которые назначаются как атрибуты при вызове других правил из таблицы стилей, основанных на параметрах устройства вывода, таких как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.

4. Применение постепенного улучшения (англ. progressive enhancement). Идея состоит в том, что сначала создается простейшая разметка документа, которая корректно отображается даже в самых простых браузерах. Затем добавляются стили, интерактивность и прочее, используя каскадные таблицы стилей, JavaScript, SVG, Flash и все остальное, что можно вставить в страницу.

5. Проектирование для мобильных устройств с самых ранних этапов (англ. mobile first). Это подход, при котором проектирование сервиса начинается с мобильной версии, а не с версии для больших экранов, как это делается повсеместно.

6. Модульная сетка страницы – это невидимый «скелет» дизайна, система горизонтальных и вертикальных направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции. Для генерации модульной сетки обычно используют так называемые css-фреймворки, которые созданы для упрощения работы верстальщика страницы, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.

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

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

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

Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

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

Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил «улучшенные теги», которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции — представлять информацию на любом устройстве независимо от его характеристик по выводу информации.

Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте — HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.

В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве — будь это 21″ монитор или маленький черно-белый экран сотового телефона.

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

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

Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.

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

Интересная и красочная анимация так же позволяет захватить посетителя, а потом донести до него смысл, компактно вложенный в неё.

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

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

Такой рекламный баннер или анимированная кнопка будет иметь преимущество перед обычной графикой. Не так ли? Для вэб анимации более распространённо используются файловые форматы GIF и FLASH.

Для анимации с малым числом кадров и цветов больше подходит формат GIF. Так как она будет менее нагружена, то возможно применять палитру 256 цветов. При этом анимированная графика будет иметь малый объём без потери качества.

Для анимации в формате флэш существует больше возможностей. Это как использование качественных градиентных цветов, так и возможность сделать каждый объект интерактивным при небольшом объёме.

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

Существует множество программ для создания Вэб-анимации. Наиболее распространённой для GIF анимации является Ulead GIF Animator — программа, для создания многих анимированных объектов.

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

Нынешний правопреемник Macromedia – это Adobe Flash CS3. Программное обеспечение, такие как Macromedia Flash (Adobe Flash), 3D Studio MAX и MAYA – общепризнанны, так как они имеют наибольшие возможности для создания качественной Веб-анимации, но в то же время они являются одними из самых сложных для освоения программ.

Однако наравне с такими мастодонтами флэш-анимации существует и множество более простых программ, специально созданных для более лёгкого применения в интернете. В них, как правило, уже заложены множество эффектов анимации, которыми можно воспользоваться в два клика.

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

Интерактивный Flash сайт

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

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

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

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

Конечно, анимация созданная при помощи общепризнанных Macromedia Flash (Adobe Flash), 3D Studio MAX и MAYA имеет больше возможностей, а с помощью упрощённых программ будет более проще необъёмной, например как печатный комикс, только анимированный.

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

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

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

Поп-ап (англ. pop-up — выпрыгивающий, появляющийся) — окно с информацией, которое выскакивает прямо перед пользователем на сайте в зависимости от того, какие действия он совершил на сайте.

Доказано, что установка на сайт всплывающего окна (popup), с формой подписки на Вашу рассылку и обучающий курс или рекламу, увеличивает количество подписчиком минимум на 15% -50%. Доказано, что посетитель, ничего не купит на Вашем сайте с первого раза, с вероятностью 95%, даже если Ваш товар ему нужен и цена устраивает.

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

Всплывающие окна или как их еще называют PopUp для того и создаются, чтобы привлечь внимание посетителя сайта и подтолкнуть выполнить какое-то действие, а попросту говоря — заманимавают посетителей и навязывают свои услуги. и что самое интересное этот механизм действуют очень эффективно.

Статистика показывает, что при использовании всплывающих окон: приток посетителей (трафик) на Ваши сайты увеличивается в разы, а количество продаж Ваших товаров возрастает. Всплывающие popup или popover-окна являются эффективным и давно зарекомендовавшим себя инструментом для увеличения потока посетителей ваших сайтов.

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

Рассмотрим, что такое попап окна, их преимущества и недостатки, чем они могут быть полезны, а также как сделать попап?

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

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

Проблема блокировки попапов очень распространена. Почти на каждом форуме можно встретить вопрос «как блокировать всплывающие окна?» или «как отключить всплывающие окна?». Надо ли блокировать всплывающие окна — каждый решает для себя сам. Однозначного ответа тут нет. Иногда, блокируя попап окна можно пропустить важную информацию.

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

К неоспоримым преимуществам попап окон можно отнести:

• охват множества пользователей, пришедших на сайт;
• привлечение внимания;
• эффект увеличения подписок и откликов;
• повышение узнаваемости сайта;
• возможность вставлять формы подписки;
• настраивается времени и условий появления;

нахождение в поле зрения.

Есть единственный хорощий способ, как сделать popup. Для этого нужен генератор неблокируемых popup окон. С помощью этого генератора плавающих попапов можно сделать свое плавающее окно и получить — код, который нужно вставить на сайт.

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

Конечно, есть варианты размещения чатов на самой странице — так называемые java-чаты. Такой чат иногда может работать с ошибками — периодически «подвисать» по неизвестным причинам, в которых вряд ли кто-то сможет помочь вам разобраться.

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

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

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

1.Спам. Каждый пользователь наверняка был жертвой спамера, который рекламит свой сайт или услуги. Так давайте используем спамер для рекламы чата! Внимание! Спам опасен! На ваш чат может начаться аттака, если в чате при регистрации не включена капча то нужно как можно скорее включить капчу!

2.Реклама на сайтах. Банальный способ, но всё же… Сделайте полноценный сайт чата и зарегестрируйтесь в партнёрках, чтобы люди узнавали о вашем чате через сайт.

3.Реклама с помощью юзеров чата. Так же вы можете раскрутить чат с помощью ваших пользователей, устраивайте акции типа «Кто приведёт *N* человек получит права модератора!»

Почему в чат не заходят.Итак, Вы определились с аудиторией. Но Вы выясняете, что хотя на Вашем сайте ежедневно бывает несколько тысяч (или хотя бы сотен) посетителей, Ваш чат все же пустует. Что же делать?

Во-первых, проверьте доступность и понятность расстановки ссылок на Ваш чат. Избегайте ссылок-обманок (например: «Нажми сюда! Тут круто!»). Не считая того, что подобные трюки просто дурной тон, Вам нужно, чтобы человек не только вошел в Ваш чат, но и оставался в нем как можно дольше. А это значит, что входя в чат, пользователь должен очень хорошо себе представлять куда он идет и зачем. Если его ожидания будут обмануты, то он тут же уйдет и, скорее всего, уже никогда не вернется.

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

В Вашем чате уже постоянно присутствует 5-10 человек. Естественно, что у Вас может возникнуть желание увеличить это число. Стандартная ошибка — это организация рекламной компании в баннерообменных сетях. Слишком большой объем выбрасываемой рекламы приводит лишь к обратному эффекту — люди уходят из чата. Это происходит потому, что регулярный поток сообщений вида «в чат входит такой-то» (а еще больше сообщений «такой-то покидает чат») очень сильно захламляют общий фрейм чата, не дают людям нормально общаться.

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

Если после прочтения этого текста у Вас остались какие-то вопросы по создании и раскрутке чата, не стесняйтесь задать их нам. Возможно ответы на них будет интересно узнать не только Вам, но и другим пользователям сервиса. Надеюсь статья кому-нибудь поможет. Желаю удачи!

Как ни крути, а начать приходится с банальной фразы: фон для сайта, как рама для картины — без неё полотно выглядит незаконченным. В случае с сайтами, правда, есть одно исключение.

Если в установках страницы задано растяжение 100%, то есть всегда показывать её в полный экран монитора, то рамки с фоном просто не видно, и вопрос о нём отпадает сам собой. Кстати, этот вариант ни в коем случае нельзя считать плохим. Всё зависит от замысла веб-дизайнера, и уже давно отсутствие фона-рамки считается вполне приемлемым. Кстати, аналогично произошло и в фотографии: большинство снимков, особенно маленьких размеров, печатается без рамок.

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

Как известно, задать фон (background) для сайта можно в атрибутах тега body, например, используя стили CSS. Рассмотрим основные доступные установки для фона сайта:

•background-color — цвет фона. Выбирается из обычной палитры цветов;

•background-image — картинка для фона. Указывается адрес файла изображения;

•background-repeat — повторение выбранной картинки. По умолчанию она повторяется по вертикали и горизонтали, заполняя весь экран. Можно выбрать повтор только по горизонтали (repeat-х), по вертикали (repeat-y) или без повтора (no-repeat);

•background-attachment — привязка. По умолчанию задано scroll — фон перемещается при прокрутке вместе со стриничкой. Можно зафиксировать его, задав fixed. Это весьма эффектный прием, особенно, если фоном для сайта служит красивый рисунок или фотография. Применение прозрачности для страницы может дополнительно усилить художественный эффект. Следует, однако, помнить, что сложный фиксированный фон замедляет прокрутку страниц на слабых компьютерах;

•background-position — расположение фонового рисунка: в центре, слева, справа, снизу или сверху.

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

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

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

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

P.S. Надеюсь, этот небольшой пост в полной мере ответил Вам на вопрос — как сделать фон на страничке. И теперь Вы с легкостью создадите шикарный фиксированный фон на своем сайте.

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

Какие решения по установке поиска на сайт вообще существуют?

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

Если ни первый ни второй вариант Вам не подошли, можно воспользоваться готовым решением от крупных поисковых машин (Google, Yandex и т.д.).

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

Что делать если в системе управления такой функции не предусмотрено, вы не знаете php или у вас просто статичный сайт? Сделать поиск по сайту можно и без языков программирования средствами обычного html. В этом нам помогут уже готовые Интернет-порталы (сервисы), называемые поисковыми системами. Но сразу предупреждаю, что такой поиск по сайту будет работать только при условии, что ваш сайт индексируется поисковиком. И результаты такого поиска будут отображаться не на вашем сайте, а в поисковой системе. Поиск в Яндексе и Гугле (да и в других поисковых системах) ведется посредством GET запроса. Это такой запрос, при котором все передаваемые данные отображаются в урле страницы с результатами поиска. Зная это можно легко организовать поиск через любую поисковую машину.

Как сделать поиск по сайту через Яндекс и Google.Чтобы организовать поиск через Яндекс и Google необходимо знать адрес поискового скрипта, переменную, отвечающую за адрес вашего сайта (на котором и нужно что-то найти) и собственно сам запрос. Для этого вам даже не нужен javascript, все делается через теги input.

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

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

Индексирующие поисковые системы — сегодня основные поставщики новых посетителей на сайт. В то же время алгоритмы работы поисковиков никогда не публикуются, на что у разработчиков есть все основания — борьба с замусориванием поисковиков (поисковым спамом или спамдексингом) отнимает много сил и средств у коллектива любого поискового проекта.

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

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

Поисковые запросы и релевантность.

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

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

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

В работе с индексирующими поисковыми системами всегда следует помнить, что командой на поиск в поисковике является поисковый запрос, введенный пользователем — слово, несколько слов, словосочетание, фраза.

Здесь возникает довольно существенный смысловой (семантический) разрыв. За то, что происходит в голове пользователя, поисковик не отвечает, а для пользователя не существуют понятия «правильного» и «неправильного» запросов.

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

Существует множество разных версий языка HTML. Когда-то была широко распространена версия HTML 2.0, затем ее надолго сменил язык HTML 3.2. Сейчас чаще всего применяется HTML 4.0 или его ближайшая разновидность — HTML 4.01.

Многие версии HTML дополнительно делятся на типы. Например, существует три типа HTML 4.0 и HTML 4.01: Strict, Transitional и Frameset.

1. Transitional (переходный) — это особенно распространенный тип, на нем написано большинство существующих страниц и именно ему посвящена основная масса учебников и справочников по HTML;

2. Strict (строгий) отличается от переходного тем, что в нем недопустимы тэги и элементы, отвечающие за внешний вид, представление документа. Например, в строгом типе нет тэгов FONT и U, атрибутов bgcolor и alink;

3. Frameset (фреймовый), наоборот, еще либеральнее переходного, так как допускает всё то же, что и переходный, а также поддерживает фреймы.

Наиболее предпочтительной является версия XHTML 1.0 Strict. Главное достоинство XHTML — в том, что он совместим с более общим языком XML (Extensible Markup Language, «расширяемый язык разметки»).

Это значит, что всякий документ, написанный на языке XHTML, одновременно является и документом, написанным на языке XML. Технология XML приобретает все более широкое распространение, поэтому совместимость с ней обеспечивает большую универсальность документов и облегчает их обработку стандартными средствами работы с XML.

В XHTML 1.0 Strict нет тэгов и атрибутов, отвечающих за оформление текста — Например, тэгов <center>…</center> и <font>…</font>, атрибутов alink, bgcolor, color и многих других, к которым привыкли некоторые разработчики. Все, что касается внешнего вида документа, должно быть закодировано не в HTML, а в Cascading Style Sheets (CSS).

Приведем версии и стандарты HTML.

- RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года;

- HTML 3.2 — 14 января 1997 года;

- HTML 4.0 — 18 декабря 1997 года;

- HTML 4.01 — (изменения, причём более значительные, чем кажется на первый взгляд) – 24 декабря 1999 года;

- ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) – 15 мая 2000 года;

- HTML 5 — В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сайт.

В версии HTML версии 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и не рекомендованные (англ. deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).

В 1998 году консорциум Всемирной паутины начал работу над новым языком разметки, основанном на HTML 4, но соответствующим синтаксису XML. В последствии новый язык получил название XHTML. Первая версия XHTML 1.0 одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года.

Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года консорциум Всемирной паутины объявил, что полномочия рабочей группы XHTML 2 истекают в конце 2009 года. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0.

XHTML (Extensible Hypertext Markup Language — расширяемый язык разметки гипертекста) — язык разметки web-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее подмножеством.

XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться &lt; и &amp; соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

Версии XHTML:

- XHTML 1.0 Переходный (Transitional): предназначен для легкой миграции из HTML 3.2 и для тех, кто использует инлайн-фреймы.

- XHTML 1.0 Строгий (Strict): полностью отделяет содержание документа от оформления (задается только через CSS), многие атрибуты (такие как, например, bgcolor и align) более не поддерживаются, их поведение можно задавать только через таблицу стилей.

- XHTML 1.0 Фрэймовый (Frameset): используется, если необходимо разделить окно браузера на несколько фреймов.

- XHTML 1.1 Модульный (Module-based): авторы могут импортировать дополнительные свойства в их разметку.

- XHTML Основной (Basic): специальная облегченная версия XHTML для устройств, которые не могут использовать полный набор элементов XHTML — в основном используется в миниатюрных устройствах, таких как мобильные телефоны. Подразумевается, что он заменит WML и C-HTML.

- XHTML мобильного профиля (Mobile Profile): основанный на XHTML Basic, добавляет специфические элементы для мобильных телефонов.

- XHTML 2.0. Синтаксис еще больше приближен к синтаксису XML. Также является модульным языком.

Различия между HTML и XHTML:

- В XHTML все тэги и атрибуты должны быть набраны в нижнем регистре, кроме тэга <!doctype>.

- Необходимо закрывать любые тэги, в том числе одиночные, кроме <!doctype>, <option>…</option>, <br />,
<hr />, <img />, <input />, <link />, <meta />.

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

- Рекомендуется максимально семантически использовать тэги: блок <div>…</div> – для верстки, а таблицы – для табличного представления данных.

- Расширением документа может быть .xhtml или .html, но чаше встречается второй способ.

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