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

Macromedia Dreamweaver для каждого - статьи, форум, рейтинг

Большая часть веб-дизайнеров не задумывается при создании страниц как они будут выглядеть в разных браузерах. Все верят во "всемогущество" 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.

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

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

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

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

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

1. Остерегайтесь "проблемных тегов".

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

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

1. Проверяйте соответствие стандартам.

Консорциум W3C определил стандарты для создания всего веб-контента, не зависимо от типа браузера. Вы можете сами изучать эти стандарты на http://www.w3c.org/tr/wcag20/, а можете воспользоваться функцией Macromedia Dreamweaver MX 2004 проверки документа на соответствие этим стандартам. Выберите File > Check Page > Check Accessibility для получения отчета. Двойным щелчком на строке отчета вы можете перейти на нужную строку кода. Нажав на кнопочку "Информация" можно детальнее прочитать о стандарте.

1. Используйте CSS-P вместо вложенных тегов.

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

1. Используйте проверенные в разных браузерах скрипты Java.

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

1. Проверяйте поддержку атрибутов HTML и CSS браузерами во время создания страницы.

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

1. Используйте CSS для форматирования.

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