| Россия |
Инспектор
Вы можете этот курс.
Опубликован: 06.10.2006 | Уровень: для всех | Доступ: платный
Лекция 8:
Макет страницы
-
Если границы изображений не выровнены с текстом или друг с другом, проверьте, не содержат ли они дополнительного пространства вокруг граней. (Попробуйте установить значение атрибута border тэга <IMG> равным 2 и посмотрите страницу, чтобы увидеть, какими стали грани.) В случае необходимости отредактируйте каждое изображение в графическом редакторе, обрежьте его, чтобы убрать лишнее пространство, и экспортируйте его снова.
(Убедитесь, что вы скорректировали атрибуты width и height тега <IMG> на новые значения.)
Если изображения не совмещаются с текстом так, как вы бы хотели, попытайтесь установить атрибуту align тэга <IMG> значения left, right, top, absmiddle, или baseline. (Для получения дополнительной информации см. раздел "Текст не обтекает вокруг изображения или не выравнивается с ним".)
- Если у вас проблемы с выравниванием текста, обратитесь к возможностям управления стилями. Например, если ваш текст не выстроен в линию с другими элементами, возможно, это происходит потому, что вы не можете точно установить размер шрифта или выровнять высоту. С помощью CSS вы сможете установить в свойствах font-size и line-height точные значения или количество пикселов. Например, если вы хотите выстроить по одной линии три строки текста с элементом некоторого размера, например изображением высотой 100 пикселов, вы можете в свойствах стиля сделать строки точно по 35 пикселов в высоту. Чтобы установить свойства для одного тэга, например, тэга <P>, используют его атрибут style.
-
Чтобы убрать лишнее пустое пространство между объектами или вокруг параграфов, используйте свойства полей. Установите поля для каждого объекта отдельно, используя свойства margin-left, margin-right, margin-top, и margin-bottom, или поля сразу для всех объектов, установив одно свойство margin.
-
Если вы хотите изменить позиционирование для определенного тэга по всему документу, используйте блок <STYLE> или отдельную таблицу стилей. Приведенный ниже блок <STYLE>, который следует вставить в раздел <HEAD> вашего HTML, чтобы он действовал на всю вашу страницу, выравнивает параграфы по правому краю и оставляет между ними меньше пустого пространства (такого эффекта вы не сможете достичь с помощью одного HTML).
Если вы используете FrontPage, вы можете устанавливать положение отдельных объектов без написания кода CSS и HTML. Просто выберите текст или объект, который вы хотите выровнять, нажмите на Position в меню Format, и определите параметры.<style> P { margin-top:0; margin-bottom:10px; text-align:justify; } </style> -
Если вы хотите скорректировать расположение элемента, используйте свойство CSS position. Чтобы установить положение объекта относительно его обычного места на странице, установите свойству position значение relative и затем установите в значениях свойств left и top то расстояние, на которое вы хотите переместить объект. (Используйте отрицательные значения, чтобы подвинуть его вверх или налево). Заметьте, что другие элементы на странице не перемещаются, чтобы заполнить пространство, освобожденное передвинутым элементом. Приведенная ниже строка использует тэг <SPAN> чтобы установить свойства стиля для одного слова, заставляя его подвинуться на 8 пикселов относительно его нормального положения.
The word <span style="position:relative; top:-8;">higher</span> is higher than the others.
-
Чтобы при перемещении элемента в определенное место на странице другие объекты появлялись на странице как будто его там нет, установите свойству position значение absolute и присвойте свойствам left и top расстояние от левого верхнего угла страницы до места, где вы хотите расположить элемент. Например, это изображение будет появляться сверху страницы, с отступом 200 пикселов от левого края страницы (так как Netscape 4 не признает атрибут style для тэга <IMG>, лучше использовать блок <DIV>):
<div style="position:absolute; top:0; left:200"> <img src="gracie.jpg" width=100 height=150> </div>
Если вы не учитываете свойство top, изображение появится на расстоянии 200 пикселов от левого края страницы, но на его нормальном расстоянии от вершины. Более того, вы можете отсчитывать положение элемента от других объектов, например угла таблицы. Установите свойству position для таблицы значение relative, и положения всех объектов в пределах таблицы будут определяться относительно ее левого верхнего угла.
Большинство посетителей имеют броузеры, поддерживающие CSS, так что его использование для улучшения размещения элементов ваших страниц будет разумным. Тем не менее неплохо использовать обыкновенный HTML при выравнивании атрибутов и таблиц для обеспечения основного расположения, перед включением стиля. Таким образом, в то время как посетители с новыми броузерами будут видеть страницу точно так, как вы ее спроектировали, посетители со старыми броузерами тоже не останутся совсем с пустым экраном.
