Создание страниц для разных типов браузеров

Большая часть веб-дизайнеров не задумывается при создании страниц как они будут выглядеть в разных браузерах. Все верят во "всемогущество" MS Internet Explorer. Но создание страниц только для этого браузера не оправданно. Но статистика и факты говорят о другом:



1. Только 70% пользователей используют IE 6 ^{Посмотреть статистику}.

2. У 10% пользователей отключена поддержка JavaScript ^{Посмотреть статистику}.

3. Только у 60% расширение экрана 1024x768 и выше ^{Посмотреть статистику}.

4. Альтернативные браузеры (Netscape, Mozilla, Opera), в связи с уязвимостью IE приобретают новых пользователей.

5. Microsoft не поддерживает IE для Mac-платформы, уступив место для Netscape и Safari.

6. Браузер Opera существенно продвигается на рынках Европы.

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

Даже если вы не используете в работе визуальный редактор Macromedia Dreamweaver, эти принципы вам помогут в создании веб-страниц.

Вот как может помочь в этом Macromedia Dreamweaver:

1. Тестируйте страницу в наибольшем количестве браузеров.

Dreamweaver позволяет подключить много разных браузеров для предварительного просмотра создаваемой страницы, назначить "горячие" клавиши для быстрого их вызова. Свои страницы я предварительно тестирую в IE 6.0, Mozilla 1.3, Opera 7.11, Netscape 4.72.

Подключить нужные браузеры для вызова из Macromedia Dreamweaver для предварительного просмотра можно в установках редактора - Edit > Preferences > Preview in Browser.

2. Правильный код - создавайте шаблоны.

Если вы используете Dreamweaver для создания веб-страниц, можете дизайн страницы закрепить в шаблонах. Шаблоны позволяют разделить страницу на 2 вида областей - редактируемые и закрытые. Страницы, созданные на основе шаблонов имеют одинаковый дизайн, только в редактируемых областях содержание может меняться.

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

3. Меньше кода - лучше страница.

Dreamweaver содержит утилиты, которые позволяют удалять неправильный и лишний код из страниц. Commands > Clean Up HTML... - для очистки кода. Commands > Clean Up Word HTML... - для очистки кода страниц, созданных в MS Word. Также можно получить детальный отчет о вложенных и пустых тегах в разделе Site > Reports.

Помните - лишний код на странице только замедляет загрузку страницы. Также не советую для создания веб-страниц использовать MS Word - ну очень много лишнего кода.

4. Остерегайтесь "проблемных тегов".
Есть специфические теги в HTML, использование которых принесет непреднамеренные последствия дизайну. Теги форм, например, часто добавляют чистое пространство в документах. Чистое пространство вокруг графики (hspace и vspace) по-разному воспринимается браузерами. Цвет по умолчанию фона страницы отличается в браузерах - Netscape 4 (Серебряный - Silver) и Internet Explorer (Белый - White)

Фреймы часто приносят головную боль дизайнерам в Netscape 4 - их размещение может отличатся на несколько пикселей слева или справа от требуемых значений. В этом случае используйте CSS для смягчения последствий. В частности, обратите внимание на атрибут CSS - line-height - он удаляет рамки вокруг объектов.

5. Проверяйте соответствие стандартам.
Консорциум W3C определил стандарты для создания всего веб-контента, не зависимо от типа браузера. Вы можете сами изучать эти стандарты на http://www.w3.org/tr/wcag20/, а можете воспользоваться функцией Macromedia Dreamweaver MX 2004 проверки документа на соответствие этим стандартам.

Выберите File > Check Page > Check Accessibility для получения отчета. Двойным щелчком на строке отчета вы можете перейти на нужную строку кода. Нажав на кнопочку "Информация" можно детальнее прочитать о стандарте.

6. Используйте CSS-P вместо вложенных тегов.
Поверите или нет, но использование позиционирования элементов на странице используя CSS намного лучше понимается разными браузерами чем с использованием вложенных тегов или рисунков-разделителей. CSS-P поддерживается даже Netscape 4. Можно провести много часов в попытках настройки правильного отображения вложенных таблиц в разных браузерах.

В Dreamweaver вставляете шаблонный рисунок (View > Tracing Image > Load) который был нарисован в графическом редакторе и содержит рисунок страницы. Потом вставляете слой (Insert > Layout Objects > Layer) и выставляете нужную позицию на странице. Так с помощью CSS-P и слоев можно представить то, что раньше было в таблицах.

7. Используйте проверенные в разных браузерах скрипты Java.
С четвертой версии Dreamweaver содержит набор проверенных в разных браузерах скриптов, которые известны нам как Behaviors (Window > Behaviors или Shift+F3). Некоторые скрипты доступны в разделе Snippets (Window > Snippets или Shift+F9), закладочка JavaScript. Используя другие скрипты вы можете столкнутся с тем что они будут нормально работать только в отдельных типах браузеров.

8. Проверяйте поддержку атрибутов HTML и CSS браузерами во время создания страницы.
Одно из нововведений в Macromedia Dreamweaver MX 2004 - проверка совместимости кода с разными браузерами во время создания страницы. Нажав на кнопочку Check Browser Support редактор выделит красным подчеркиванием несовместимости для выбранных пользователем браузеров.

9. Используйте CSS для форматирования.
CSS level 1 - определяет форматирование элементов, включая шрифты и цвета, - поддерживается старыми браузерами, включая Netscape 4.* и IE 3.*. Если вы не знакомы с CSS попробуйте использовать панель Relevant CSS в панели Tag.

Статья любезно предоставлена сайтом www.dreamweaver.net.ru