|
Читайте также: |
Штрафной балл: 0.1
К постоянным элементам относятся в первую очередь:
q логотип;
q заголовок сайта;
q навигационные меню.
Лишние сдвиги на экране утомляют глаза пользователя.
Необоснованные сдвиги создают ощущение беспорядка.
И главное, постоянные элементы играют роль интерфейсных линеек, обрамляющих рабочее окно, поэтому их смещение воспринимается как явная погрешность разработчика.
Пример этой ошибки демонстрируется на рис. 7.5
Рис 7.5. Постоянные элементы плохо держат своё место
Вертикальное меню сместилось вниз и вправо. Заголовок сайта и горизонтальное меню сместились вниз, при этом расстояние между заголовком и меню увеличилось.
Прижатость элементов друг к другу
Штрафной балл: 0.1
Одна из распространенных ошибок начинающих — «удушение» информационных элементов на экране путем слишком тесного их расположения.
Практическая рекомендация: оставляйте между текстом и картинкой, текстом и табличными гранями по 10 пикселов.
Таблица
Пример из конкурсной работы:
| Это мы! | Рассказ о нашей команде. |
| Cоветы | Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование. |
| Полезные ссылки | Их немного, но они нам помогают. |
| Афоризмы | Личная страничка Скляровой Насти. |
| Фразмочки | Работа Горошковой Елены. |
Табличная разлиновка всегда сомнительна, но если уж она есть, то текст не должен слишком тесно прижиматься к граням таблицы. Обязательно нужны промежутки (одинаковые на протяжении всего сайта в подобных местах).
Промежуток легко образуется, если задать нужные значения атрибутам cellspacing и cellpadding в теге TABLE. (Атрибут cellspacing задаёт расстояние между ячейками таблицы, атрибут cellpadding — расстояние между содержимым ячейки и рамкой ячейки.)
Для образования полей вокруг элемента, помещенного в ячейку, таблицу можно кодировать, например, так:
<TABLE cellspacing =0 cellpadding =10 другие атрибуты >
| Это мы! | Рассказ о нашей команде. |
| Cоветы | Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование. |
| Полезные ссылки | Их немного, но они нам помогают. |
| Афоризмы | Личная страничка Скляровой Насти. |
| Фразмочки | Работа Горошковой Елены. |
Замечание. Всегда явно задавайте в таблице значения атрибутов cellspacing и cellpadding. Если они будут опущены, браузер установит значения по умолчанию, причем умолчания у разных браузеров свои. Не следует доверять браузеру делать такие вещи по своему усмотрению.
Картинки
Второй способ «удушения» информационного элемента, который пользуется успехом на роботландском конкурсе «Проба пера» — это перекрытие кислорода тексту при помощи прижатия его к картинке (рис. 7.6).
Рис 7.6. Ивану не хватает воздуха
Этот фрагмент задается следующим кодом:
<P>
<IMG src =./pic/ivan.gif
width =93 height=64
align =left
border =0 alt =Сидоров >
Иван пошел в лес за грибами. Стоял чудесный день
сентября. Иван пошел в лес не один, он взял с собой
собаку, которая любила лесные прогулки. Под высокой
стройной березой Иван нашел сразу три молодых гриба.
Собака от радости носилась вокруг хозяина, и хвост её
совершал колебательные движения, что означало высшую
степень собачьего восторга .<BR clear =left >
Вы видите, как текст «душит» Сидорова, прижимаясь к нему вплотную.
Напишите теперь:
<IMG src =./pic/title1.gif
width =93 height=64
align =left
hspace =10
border =0 alt =Сидоров >
Вы увидите, как Сидоров дышит полной грудью (рис. 7.7).
Рис 7.7. Сидоров дышит полной грудью
Атрибуты hspace и vspace определяют свободное пространство:
q слева и справа (hspace) от картинки;
q над и под (vspace) картинкой.
По умолчанию значения этих атрибутов не определены, но обычно это небольшие ненулевые значения.
Графика
Дата добавления: 2015-11-30; просмотров: 24 | Нарушение авторских прав