Установка Adaptive Images
Решение Adaptive Images требует наличия Apache 2, PHP 5.x и GD Lib. Таким образом, чтобы увидеть его преимущества, вам потребуется разрабатывать сайт на соответствующем сервере. Скачайте ZIP-файл (рисунок 3.12).
Страница, с которой можно загрузить Adaptive Images
Разархивируйте ZIP-файл и скопируйте файлы adaptive-images. php и. htaccess в корневой каталог своего сайта. Если у вас в корневом каталоге уже есть файл. htaccess, не перезаписывайте его. Вместо этого прочтите дополнительную информацию в файле instructions. htm, который включен в архив.
Теперь создайте папку с именем ai-cache в корневом каталоге своего сайта (рисунок 3.13).
Создание папки ai-cache
Используя свой любимый FTP-клиент, задайте разрешения на запись 777 (рисунок 3.14).
Теперь скопируйте приведенный далее JavaScript-код в тег <head> каждой страницы, которая нуждается в использовании Adaptive Images:
<script>document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’;
Path=/’;</script>
Если вы не используете HTML5 (мы перейдем к нему в следующей главе), но хотите, чтобы ваша страница прошла валидацию, потребуется добавить атрибут type. В результате сценарий должен будет выглядеть так:
<script type="text/javascript">document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’; path=/’;</script>
Важно, чтобы JavaScript-код располагался внутри тега <head> (желательно — первая часть сценария), поскольку он должен запускаться раньше, чем закончится
Загрузка страницы, и до того, как будут запрошены какие-либо изображения. Вот JavaScript-код, добавленный в раздел <head> сайта, над которым мы работаем:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>And the winner isn’t…</title>
<script type="text/javascript">document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’; path=/’;</script>
<link href="css/main. css" rel="stylesheet" type="text/css" />
</head>
Установка разрешения на запись
Добавить комментарий