Создание страниц для разных типов браузеров - Компьютерная документация по Windows. Оптимизация Windows.
 Компьютерная документация по Windows. Оптимизация Windows.  Компьютерная документация по Windows. Оптимизация Windows. Поиск
  Здравствуйте  [ Новый пользователь ] Домой  .  Статьи по темам  .  Компьютерная документация  .  Личный кабинет  .  Toп 10  .  Карта сайта  

  Навигация

 Главная   Главная
 Главная   Магазин софта
 Темы новостей   Темы новостей
 Топ 10   Топ 10
 Архив новостей   Архив новостей
 Карта сайта   Карта сайта
 Конструктор   Конструктор
 Обзоры   Обзоры
 Интересное   Интересное
 Рассылка новостей   Рассылка новостей
    Полезные ресурсы
 Пользователи   Пользователи
 Поиск   Поиск
 Написать нам   Написать нам
 Тест скорости   Тест скорости


  Наши темы
Windows 8
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Оптимизация Windows
Обзор софта
Технологии, обзоры
Обзоры компьютеров и комплектующих
Рецензии
Полезные советы
Продвижение сайтов

Новые обзоры

Как заработать на ремонте компьютеров

Переработка отходов электроники

Типовые неисправности I:Phone, Pad, Pod и Macbook

Место для вашей электронной души

Ремонт компьютеров в Москве


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

Размещено 29/01/2007

Вебмастеру Источник: 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 - ну очень много лишнего кода. Это дас вам твердые гарантии при продвижении сайта в топ 10

  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.


 



Компьютерная документация по Windows Copyright © 2008-2019