|
Главная Скачать (Download) Dreamweaver CS6 Dreamweaver CS5 Dreamweaver CS4 Dreamweaver 8 Dreamweaver MX 2004 - Рабочая область
Dreamweaver 4- Создание/ открытие документов - Настройка сайта - Компоновка страниц с CSS - Табличный контент - Шаблоны в MX 2004 - Работа с страницами - Настройка серверных приложений - Рабочая область для динамических страниц Уроки (Tutorials) Видеоуроки new!!! Fireworks ЧаВо Документация Статьи Программы и скрипты Бесплатные шаблоны Каталог сайтов Форум Карта сайта Контакты |
Сокращение времени загрузки веб-страниц с помощью CSS Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик. 1. Избегайте использования таблиц для разметки страницы Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:
2. Не используйте картинки для отображения текста Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример: a:link.example, a:visited.example, a:active.example { Этот CSS определяет простую кнопку, которая меняет свой вид при наведении курсора. Таким образом можно создавать и более сложные объекты. 3. Загрузка картинок через CSS Некоторые фоновые изображения лучше загружать через CSS. Например, чтобы показать картинку размером 200х100, можно использовать следующий код:
И соответствующий CSS:
Сначала это может показаться бессмысленным, но на самом деле такой способ может намного ускорить загрузку страницы. В этом случае браузер начнёт загружать картинку только после того, как будет выведен весь текст, а не одновременно. Таким образом пользователи могут работать со страницей, в кто время как изображение ещё будет подгружаться. Эта техника лучше всего подходит для загрузки чисто декоративных, фоновых элементов страницы. Если изображение является частью содержимого, всё равно придётся использовать тег IMG. 4. Использование контекстных стилей Данный код неэффективен: <p class="text">This is a sentence</p><p class="text">This is another sentence</p> <p class="text">This is yet another sentence</p> <p class="text">This is one more sentence</p> .text { color: #03c; font-size:2em } Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом: <div class="text"><p>This is a sentence</p> <p>This is another sentence</p> <p>This is yet another sentence</p> <p>This is one more sentence</p> </div> .text p { color: #03c; font-size:2em } Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em. Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc. 5. Использование сокращений Шрифт Лучше написать:
...вместо
Границы Лучше:
...вместо
Фон Пишите:
...вместо
Отступы и границы Используйте:
...вместо
Аналогично:
...вместо
И:
...вместо
Эти правила применяются к атрибутам 6. Минимизирование пробелов, переводов строк и комментариев Каждый символ — буква или пробел — занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили. 7. Используйте относительные ссылки Абсолютные ссылки занимают намного больше места, чем относительные. А
кроме того, создаёт дополнительную нагрузку на браузер, что более важно.
Пример абсолютной ссылки:
8. Не увлекайтесь применением тегов META Большинство тегов META соврешенно ненужные. Если интересно, можно взглянуть на все существующие варианты. Самые важные теги (keywords и description) используются для оптимизации поисковых машин. При использовании атрибута content в теге META старайтесь не превышать размера в 200 символов. Большие описания и множество ключевых слов могут быть восприняты поисковыми машинами как спам. 9. Выносите CSS и JavaScript в отдельные файлы Все это знают, но не всегда пользуются. Вот так выглядит вызов CSS из внешнего файла:
И соответственно JavaScript:
Любой внешний файл грузится всего один раз и затем сохраняется в локальном кэше. Ограничений на количество «подключаемых» внешних файлов не существует. 10. Ставьте / (слэш) в конце ссылок на каталоги Это неправильный вариант написания ссылки : Необходимо писать так : Объясняется это очень просто. В первом случае браузер не знает, на что ведёт ссылка: на файл или каталог. "Слэш" сразу даёт понять, что эта ссылка ведёт в каталог, и необходимости в дополнительной проверке не возникает.
Перевод: Сергей Яценко
Реклама |
|
|