Пряник № 8 О размере и разрешении сайта

	Пряник № 8 О размере сайта и разрешении экрана (перед чтением параграфа рекомендуется установить программу Macromedia Dreamweaver-MX)
	На свете существует великое множество компьютеров с самыми разными мониторами. Разные мониторы — разный размер экрана, а значит, и просматриваемой веб-странички. Это и есть основная причина того, что сайт лучше не оптимизировать под какое-либо разрешение, а сделать его легко приспосабливающимся ко всем размерам экрана. Впрочем, этот вопрос нужно рассмотреть подробнее: Приемущества „фиксированного“ сайта: – Вебмастеру не надо заботится о переносах слов – Автор знает с точностью до пикселя, как будет выглядеть его творение при заданном разрешении. Приемущества сайта, ориентированного под любое разрешение: – Горизонтальных линеек просмотра (полос прокрутки) нет и быть не может * – Сайт выглядит хорошо при любом разрешении. * Само собой разумеется, что ширину браузера при желании можно сделать такую (30 пикселей, например), при которой так или иначе появятся линейки просмотра. Наш „Пряничный проект“ читается при любом разрешении (меньше 640 × 480 я не проверял). А загадки в этом никакой нет. Дело в том, что разметку сайта можно (не единственное возможное решение) сделать с помощью одной или нескольких таблиц. Причём ширина каждой ячейки таблицы указывается не в пикселях, а в процентах от ширины экрана. Таким образом, пропорции сохраняются в любом случае. Пользователям Dreamweaver’а очень повезло: программа позволяет очень просто указать ширину (и, если требуется, высоту) таблиц как в пикселях, так и в процентах.

100% ширины экрана
50% ширины экрана		50% ширины экрана
25% ширины экрана	25% ширины экрана

Графика

А как быть с „графической разметкой“? С Текстурами, логотипами, прочими элементами, которые не могут изменяться по ширине? Необходимо учитывать их расположение на экране при любом разрешении. Некоторые элементы можно сделать „масштабируемыми“. Хорошим примером может служить дизайн сайта www.thief--darkfate.narod.ru.

Таков стиль украшения верхушки сайта „Thief — Dark Fate“

Размер вот такого на скорую руку созданного украшения можно уменьшать вплоть до 266-ти пикселей (увеличивать — хоть до умопомрачения), ибо ширина центрального рисунка — 266 пикселей. В чём секрет? Ни в чём. Просто для изготовления декорации использовалось (не упадите!) только два рисунка в формате GIF общим объёмом 6 кБ.

Как делается такая штука?

Довольно просто: создаётся таблица из трёх ячеек. Ширина каждой ячейки указывается в процентах <td width="33%">. Причём ширина крайних ячеек равна 33 процентам, а центральная — 1 проценту (ячейка получается микроскопическая). Затем указывается фон крайних ячеек <td height="32" background="center.gif">. И наконец, в центральную (микроскопическую) ячейку подставляется последний рисунок: <img src="center_text.gif" width="266" height="92">. Ячейка „раздувается“ за счёт рисунка.

Перенос слов

Если мы делаем сайт, который должен смотреться хорошо при любом разрешении, то нужно неприменно позаботиться о переносах слов. Например, нельзя допустить, чтобы при изменении ширины экрана появился вот такой перенос:

Во-
первых

Тире также должно обязательно оставаться на строке и не переноситься вот так:

Я несу возмездие во имя луны!
— воскликнула Сейлормун.

Также крайне нежелательно оставлять предлоги на одной строке, а то, к чему они относятся, переносить на другую:

Я несу возмездие во
имя луны! — воскликнула Сейлормун.

Почувствовали? Во… (А здесь мы спотыкаемся).

Естественно, мы не можем педугадать, где и при каких обстоятельствах будет разбит текст. Поэтому нам помогут два очень важных кода:

  — неразрывный пробел
 — Весь текст в этом тэге не будет переноситься.

Как их использовать? Элементарно! Видим „подозрительное место“ в тексте (тире, например) и подставляем неразрывные пробелы да тэги .

Во-первых,
Я несу возмездие во имя луны! — воскликнула Сейлормун.

Фиксация размера сайта

Иногда нужно наоборот зафиксировать какие-либо элементы: текст или графику. Одно из возможных решений — загнать нужные элементы в таблицу и указать размеры её ячеек в пикселях.

Ширина: 640 пикселей
Ширина: 300 пикселей	Ширина: 200 пикселей	Здесь — 140

	Вот в такие таблицы можно помещать графику и текст, не опасаясь, что что-то куда-то как-то не так перенесётся. Слои Ещё одно весьма занятное развлечение: использовать слои (Layers). Слой — это своего рода „неповоротливая таблица“. Пользоваться ими нужно очень аккуратно. При попытке вставить слой на эту страницу, он упорно не хотел вставляться туда, куда бы я хотел. А всё из-за того, что у слоев предусмотрена функция абсолютной фиксации позиции (position:absolute). Эта фиксация плевать хотела на то, что ширина браузера и размер шрифта могут быть разными. Слой остаётся приклеенным к одному и тому же месту (не к тому, о котором вы подумали. Координаты указываются в пикселях. Например, 10 слева и 100 сверху). Одна из возможностей вставить слой в нужное место на сайте с переменной шириной и размером шрифтов (наиболее приспосабливаемый вариант) — это убрать параметр „position:absolute“. Это и есть слой (320 × 115). Правда, я заставил его оставаться в этом месте текста, убрав злющий параметр „position:absolute“.
	Так для чего же нужны же эти капризные слои? Первое применение у вас перед глазами: с помощью слоёв можно вставлять вот такие железные ячейки даже внутри таблиц (в том числе и тех таблиц, где ширина указана в процентах). Слоям можно задать любой фон (в том числе и текстурный), границы (ширину и цвет). Ну, и, конечно же, размер (сколько укажете пикселей, столько и будет). Ещё с помощью слоёв можно делать вот такое „гиперпространство“. Всё же позвольте дать один маленький совет: старайтесь избегать полос прокрутки (линеек просмотра). <…> Пусть кристаллы возвратятся Тем, кому принадлежат. Силы в тех сердцах таятся, Чувства добрые лежат. Демон злобный, ты напрасно Душу доктора забрал! И Хотару гнусно, властно Ты мессией нарекал! Ты друзей моих бесчестно Уничтожить захотел! Мир прекрасный так нечестно Покорить ты не сумел! Не бывать тому, что будет, Ведь не верю я в судьбу! Пусть святой Грааль пробудет Свет, любовь, добро, мечту! <…> © Scorpion Хотите полностью прочитать? Пишите письма. Мой адрес найдёте на главной странице „Руководства“. Продолжим. Это слой с текстурой. И хотя кажется, что в таблице образовалась дырка, никакой дырки на самом деле нет. Просто фон слоя совпадает с фоном на этой веб-странице.
	Несколько слов о том, как вставлять слои. Пользователи Dreamweaver’а сейчас совершенно спокойны: они знают, что для вставки им нужно лишь ткнуть мышкой, чтоб показать, куда вставлять слой, выбрать INSERT→LAYER. Для самых смелых я покажу код вставки слоя с тэгом <div>: <div id="Layer1" style="position:absolute; width:168px; height:44px; z-index:1; top: 3696px;"></div> В предыдущих примерах я вручную убрал параметр „position:absolute“. Получилась занятная штука — слои стали очень послушными и оставили всякие попытки улететь прочь. Они словно слились с таблицей. Напоследок ещё один пример слоя (с кодом HTML):
	<div id="Layer1" style="position:absolute; width:364px; height:120px; z-index:1; border: 3px double 2px; left: 29px; background-color: #999999; layer-background-color: #999999;"> <div align="left"></div> </div>


	Слои — дело тонкое. Самое главное, не применять их только ради того, чтобы применить. Заключение Неважно, используете ли вы таблицы или слои (можно вообще ничем не ограничивать текст). Главное, чтобы гость не чертыхался только потому, что его монитор работает с более низким разрешением, чем предусмотрено вебмастером. Иногда дело даже не в разрешении. Возможно, гость не привык разворачивать окно во весь экран, а наказанием будут навязчивые полосы прокрутки: вертикальная и, возможно, горизонтальная. Посетители в душе будут вам очень признательны, если на сайте не будет стоять надпись:

Сайт создан в системе uCoz