Так что сейчас веб-дизайнеры, при создании веб-страниц, должны обращать считаться с разными типами браузеров, операционными системами, расширениями экрана и многими другими факторами.
Даже если вы не используете в работе визуальный редактор Macromedia Dreamweaver, эти принципы вам помогут в создании веб-страниц.
Вот как может помочь в этом Macromedia Dreamweaver:
- Тестируйте страницу в наибольшем количестве браузеров.
Dreamweaver позволяет подключить много разных браузеров для предварительного просмотра создаваемой страницы, назначить "горячие" клавиши для быстрого их вызова. Свои страницы я предварительно тестирую в IE 6.0, Mozilla 1.3, Opera 7.11, Netscape 4.72.
Подключить нужные браузеры для вызова из Macromedia Dreamweaver для предварительного просмотра можно в установках редактора - Edit > Preferences > Preview in Browser.
- Правильный код - создавайте шаблоны.
Если вы используете Dreamweaver для создания веб-страниц, можете дизайн страницы закрепить в шаблонах. Шаблоны позволяют разделить страницу на 2 вида областей - редактируемые и закрытые. Страницы, созданные на основе шаблонов имеют одинаковый дизайн, только в редактируемых областях содержание может меняться. При изменении файла шаблона меняются все страницы, созданные на основе этого шаблона, только содержимое редактируемых областей не меняется. Это не только делает работу веб-дизайнера легче, но и позволяет не повторять ошибок в дизайне страницы.
- Меньше кода - лучше страница.
Dreamweaver содержит утилиты, которые позволяют удалять неправильный и лишний код из страниц. Commands > Clean Up HTML... - для очистки кода. Commands > Clean Up Word HTML... - для очистки кода страниц, созданных в MS Word. Также можно получить детальный отчет о вложенных и пустых тегах в разделе Site > Reports.
Помните - лишний код на странице только замедляет загрузку страницы. Также не советую для создания веб-страниц использовать MS Word - ну очень много лишнего кода.
- Остерегайтесь "проблемных тегов".
Есть специфические теги в HTML, использование которых принесет непреднамеренные последствия дизайну. Теги форм, например, часто добавляют чистое пространство в документах. Чистое пространство вокруг графики (hspace и vspace) по-разному воспринимается браузерами. Цвет по умолчанию фона страницы отличается в браузерах - Netscape 4 (Серебряный - Silver) и Internet Explorer (Белый - White)
Фреймы часто приносят головную боль дизайнерам в Netscape 4 - их размещение может отличатся на несколько пикселей слева или справа от требуемых значений. В этом случае используйте CSS для смягчения последствий. В частности, обратите внимание на атрибут CSS - line-height - он удаляет рамки вокруг объектов.
- Проверяйте соответствие стандартам.
Консорциум W3C определил стандарты для создания всего веб-контента, не зависимо от типа браузера. Вы можете сами изучать эти стандарты на
http://www.w3c.org/tr/wcag20/, а можете воспользоваться функцией Macromedia Dreamweaver MX 2004 проверки документа на соответствие этим стандартам. Выберите
File > Check Page > Check Accessibility для получения отчета. Двойным щелчком на строке отчета вы можете перейти на нужную строку кода. Нажав на кнопочку "Информация" можно детальнее прочитать о стандарте.
- Используйте CSS-P вместо вложенных тегов.
Поверите или нет, но использование позиционирования элементов на странице используя CSS намного лучше понимается разными браузерами чем с использованием вложенных тегов или рисунков-разделителей. CSS-P поддерживается даже Netscape 4. Можно провести много часов в попытках настройки правильного отображения вложенных таблиц в разных браузерах. В Dreamweaver вставляете шаблонный рисунок (View > Tracing Image > Load) который был нарисован в графическом редакторе и содержит рисунок страницы. Потом вставляете слой (Insert > Layout Objects > Layer) и выставляете нужную позицию на странице. Так с помощью CSS-P и слоев можно представить то, что раньше было в таблицах.
- Используйте проверенные в разных браузерах скрипты Java.
С четвертой версии Dreamweaver содержит набор проверенных в разных браузерах скриптов, которые известны нам как Behaviors (Window > Behaviors или Shift+F3). Некоторые скрипты доступны в разделе Snippets (Window > Snippets или Shift+F9), закладочка JavaScript. Используя другие скрипты вы можете столкнутся с тем что они будут нормально работать только в отдельных типах браузеров.
- Проверяйте поддержку атрибутов HTML и CSS браузерами во время создания страницы.
Одно из нововведений в Macromedia Dreamweaver MX 2004 - проверка совместимости кода с разными браузерами во время создания страницы. Нажав на кнопочку Check Browser Support редактор выделит красным подчеркиванием несовместимости для выбранных пользователем браузеров.
- Используйте CSS для форматирования.
CSS level 1 - определяет форматирование элементов, включая шрифты и цвета, - поддерживается старыми браузерами, включая Netscape 4.* и IE 3.*. Если вы не знакомы с CSS попробуйте использовать панель Relevant CSS в панели Tag.
