
- •Отсутствие логотипа
- •Отсутствие заголовка сайта
- •Отсутствие заголовка страницы
- •Название окна не совпадает с заголовком страницы
- •Примеры
- •Многочисленные выделения одного и того же информационного элемента
- •Как выделять правильно
- •Выделение стилем, типичным для ссылок
- •Более двух разных шрифтов (гарнитур)
- •Фиксированный размер шрифта, который не нельзя изменить в браузере
- •Очень большие абзацы
- •Навигация Отсутствие навигационных элементов или неудобная навигация
- •Куда я могу пойти
- •Где меню
- •Электронные почтовые адреса и внешние ссылки не прописаны на страницах в явном виде
- •Неработающие ссылки
- •Геометрия страниц Страницы не имеют геометрического каркаса
- •Отсутствие выравнивания
- •Горизонтальная прокрутка в окне шириной 640
- •Разрушение единого информационного элемента при изменении размера окна браузера (например, заголовка, навигационной панели, группы управляющих кнопок)
- •Постоянные элементы страниц (заголовки, меню, логотип и т.П.) плохо держат свое место на экране при переходах со страницы на страницу
- •Прижатость элементов друг к другу
- •Картинки
- •Графика Фон, заданный картинкой, на котором текст не читается
- •Цветовая палитра, утомляющая глаза
- •Примеры
- •Графика не оптимизирована
- •Фон, заданный картинкой, на котором плитки плохо стыкуются
- •Повторение фоновой картинки в широких окнах
- •Слишком большое число цветов
- •Обилие декоративных элементов, не несущих функциональной нагрузки
- •Иллюстрации не вписываются в страницу, смотрятся как заплаты
- •Явные погрешности в качестве графического материала
- •Погрешности масштабирования
- •Рекомендации
- •Погрешности чрезмерного сжатия
- •Хвостатые ссылки
- •Отсутствие антиалиасинга или не соответствие его фону страницы
- •Отсутствие alt-значений в информационных иллюстрациях
- •Неверное (неинформативное) содержание alt-надписи
- •Мультимедиа Движущиеся и мерцающие надписи
- •Агрессивная анимация
- •Звук и видео на странице
- •Кроссбраузерность Сайт работает только в одном браузере
- •Авторские права Заимствование элементов оформления сайта без ссылок на автора
- •Как указывать авторство
- •Пример 1. Указание авторства в подрисуночной надписи
- •Рекомендуемый стиль записи гипертекста
- •Нарушение правила читаемости (должно быть: название тегов прописными буквами, названия атрибутов и их значений — строчными)
- •Строки длиннее 80 символов
- •Ошибки Нарушение вложенности тегов, или порядка следования тегов, отсутствие обязательных закрывающих тегов, неверные названия тегов, атрибутов и их значений, другие ошибки
- •Нарушение вложенности тегов
- •Отсутствие обязательных закрывающих тегов
- •Неверные названия тегов
- •Неверные названия атрибутов и их значений
- •Другие ошибки кодирования
- •Ошибка регистра в именах каталогов и файлов
- •Рекомендация
- •Некачественное кодирование Отсутствие тега title
- •Отсутствие одного из атрибутов bgcolor, text, link, alink, vlink в теге body
- •Цвет фона и текста
- •Цвет ссылок
- •Рекомендации по выбору цветов для ссылок
- •Не указаны атрибуты width и height в теге img
- •Неверные значения атрибутов width, height
- •Картинка-распорка
- •Декоративная графика
- •Составная графика
- •Теги Hn используются не для выделения заголовков или не отражают иерархию документа
- •Программирование шрифта при помощи атрибута face тега font
- •Лишние теги (кроме необязательных закрывающих), фрагменты, которые можно исключить из программы без изменения внешнего вида документа и функционирования приложения
- •Пробел, который центрируется в пустой строке.
- •Ужасный абсолютный адрес
- •Полужирный пробел с собственным лицом.
- •Хорошего должно быть много!
- •Двойное центрирование: а вдруг однократное не поможет?
- •Визуальные узоры
- •Суммарный вес страницы превышает 50 кб
- •Пропаганда нездорового образа жизни
- •Пропаганда учений, наносящих вред психике человека
- •Структура содержания Неудачная структура сайта
- •Неудачная Главная страница
- •Школьный сайт
- •Школьный сайт: вопросы
- •Пользователи школьного сайта
- •Внутренние пользователи Школьные пользователи Школьники
- •Каким же должен быть школьный сайт?
- •Отсутствует раздел Ссылки
- •Зачем нужны внешние ссылки
- •Дисциплина внешних ссылок
- •Как оформлять внешние ссылки
- •Примеры внутренних ссылок
- •Примеры внешних ссылок
- •Качество изложения Рекламный стиль изложения
- •Слишком длинные ссылки, многословные невыразительные (несамоочевидные) разделы меню
- •Неудачные заголовки (сайта, страниц, разделов)
- •Важность заголовков
- •Правила для заголовков
- •Смысловая нагрузка
- •Краткость
- •Первое слово — самое важное
- •Многословные описания, которые можно сократить без потерь для содержания
- •Якоб Нильсен о том, как читают пользователи
- •Якоб Нильсен о том, как писать тексты для сайта
- •Стив Круг об общей болтологии
- •Томас а. Пауэлл о составлении текстов для Web
- •Погрешности стиля изложения
- •Авторские права Заимствованный текстовый материал без ссылок на автора Закон “Об авторском праве и смежных правах” Российской Федерации (извлечения)
- •Как оформлять цитаты
- •Как оформлять эпиграфы
- •Пример неверного оформления
- •Пример верного оформления
- •Неразрывный пробел
- •Дефис вместо тире, дюймы вместо кавычек, буква n вместо знака номера, неверное употребление (кодирование) спецсимволов
- •Кавычки
- •Тире и дефис
- •Краткий справочник
- •Другие грамматические ошибки
Пробел, который центрируется в пустой строке.
<p align="center"> </p>
Визуальному редактору все равно, что центрировать, можно и пробел.
Ужасный абсолютный адрес
<p align="center"><img
src="file:///C:/WINDOWS/Рабочий%20стол/10'A'/fleayoyosb.gif"
width="69" height="106"></p>
Совет для любителей визуального редактирования: обязательно перед публикацией в Интернет перенесите свой сайт на другое место жёсткого диска. Вы с удивлением обнаружите, что картинки не показываются, а ссылки не работают. Причина в абсолютных адресах, которые появляются в большом количестве у неумелых «визуалов».
И ещё один совет: введите на своём сайте строгую дисциплину имён файлов и каталогов, ведь на сервере, который обычно работает под UNIX, регистр символов имеет значение! Адреса, прекрасно уживающиеся с Windows, на сервере могут перестать работать. Если, например, картинка имеет имя bacground.jpg, а в ссылке на неё написано Bacground.jpg, то изображения в Интернет не увидеть.
Самое лучшее, когда имена всех файлов и каталогов внутри сайта имеют формат 8.3: не более 8 символов в имени, не более 3 в расширении. Никаких русских букв, пробелов и спецсимволов. Все имена каталогов и файлов записаны в одном регистре (например, нижнем).
Полужирный пробел с собственным лицом.
Визуальный редактор сотворил такой код:
<font
color="#FF0080" size="6" face="Courier New"><strong> </strong></font>
Для пробела (пустого места) определяется новый шрифт, цвет и он записывается полужирным начертанием!
А — это совсем не то, что ккордики!
<font color="#0000FF" size="5" face="Times New Roman">А</font><font
color="#0000FF" size="5" face="Times New Roman">ккордики</font><font
color="#0000FF" size="5" face="Times New Roman"><img
src="Star.jpg" width="14" height="11"></font>
Шрифт Times New Roman браузер использует по умолчанию. Задавать его явно не нужно и даже вредно, как, вообще, задавать шрифт атрибутом face. Цвет шрифта надо задавать один раз в теге BODY, а не в каждом слове абзаца (тем более, один и тот же). Зачем выделять букву А в отдельный font-блок, когда для неё задается то же самое, что и для продолжения ккордики? Зачем задавать размер, вид и цвет шрифта для картинки?
Приведенный выше бред переписывается так:
<FONT size=5>Аккордики</FONT>
<IMG src=Star.jpg width=14 height=11>
Или так, если не нужен пробел между словом и картинкой:
<FONT size=5>Аккордики</FONT
><IMG src=Star.jpg width=14 height=11>
Хорошего должно быть много!
Вот плотно набитый код табличной строки:
<td width="34%"><font color="#0000FF" size="4"
face="Courier New"><strong>Местонахождение</strong></font></td>
<td width="18%"><font color="#0000FF" size="4"
face="Courier New"><strong>Количество MB</strong></font></td>
<td width="17%"><font color="#0000FF" size="4"
face="Courier New"><strong>E-Mail</strong></font></td>
<td width="7%"><font color="#0000FF" size="4"
face="Courier New"><strong>CGI </strong></font></td>
<td width="23%"><font color="#0000FF" size="4"
face="Courier New"><strong>Примечание</strong></font></td>
«Руками» это записывается так:
<FONT color=#0000FF size=4 face="Courier New">
<STRONG>
...
<TD width=34%>Местонахождение</TD>
<TD width=18%>Количество MB</TD>
<TD width=17%>E-Mail</TD>
<TD width=7%>CGI</TD>
<TD width=23%>Примечание</TD>
...
</STRONG>
</FONT>
Брр!
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
Если вам нужен большой отступ, используйте картинку-распорку, поместив её в таблицу.