Проект 4. Дизайн на плавающих блоках

На этой странице:

• Техническое задание
• Заготовки файлов
• Стиль кодирования
• Инструментарий
• Проверка работ
• Типичные ошибки

Техническое задание

Создать гипертекстовую страницу, используя макет, показанный на рисунке:

Страница состоит из пяти не позиционированных областей, три из которых (2, 3 и 4) являются плавающими блоками:

1. Заголовок и логотип.
2. Автор (фото автора с кратким представлением; плавающий блок).
3. Основное содержимое (плавающий блок).
4. Факты (набор интересных фактов по теме страницы; плавающий блок).
5. Авторская подпись.

Для плавающих блоках указана ширина в процентах: 16%, 52%, 31%. Можно указывать и другие значения, но так, чтобы сумма была немного меньше 100%.

Горизонтальная прокрутка страницы не должна включаться в окне шириной 640 пикселов.

Заголовок и логотип авторы придумывают сами. Содержание страницы определяется темой, которую можно придумать самостоятельно или выбрать из следующего списка.

• Один день из жизни класса
• Мои четвероногие друзья
• Спорт — это жизнь
• Мой любимый автор (актёр, певец, художник, музыкант…)
• Герой нашего времени
• Плюсы и минусы компьютера (Интернета, технического прогресса…)
• Интересы личности и государства
• Говорят ли на одном языке отцы и дети?
• Идеальный мир — это утопия?
• Успех — это удача, труд или талант?
• Идеальный отдых
• Понедельник должен начинаться в субботу?
• Как стать богатым?
• Что такое душевный комфорт?
• Какой должна быть идеальная школа?
• Каким должно быть идеальное образование?
• Идеальная работа
• Что такое дружба

Заготовки файлов

В качестве стартовой точки используйте следующие заготовки.

Файл style.css

  
/* 1. Заголовок и логотип  */
.title
{
  background: #06DFE1;  
}
/* 2. Автор                */
.author
{
  float:left;
  width: 16%;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  float:left;
  width: 52%;
  background: #FFF2A6;  
}
/* 4. Факты               */
.facts
{
  float:left;
  width: 31%;
  background: #E5E5E5;  
}
/* 5. Авторская подпись    */
.sign
{
  clear:left;
  background: #00FFBF;  
}

Файл index.htm

Стиль кодирования

При записи кода придерживайтесь следующих правил:

• названия тегов — прописными (большими) буквами;
• названия атрибутов и их значений — строчными (малыми) буквами;
• структурная иерархическая лесенка в HTML-коде;
• строки длиной меньше 80 символов;
• имена файлов и каталогов — в нижнем регистре;
• все стилевые определения записывайте в отдельном файле;
• имена классов записывайте в нижнем регистре;
• сначала размещайте определения, относящиеся к тегам, затем контекстные определения, затем классы;
• снабжайте определения подробными комментариями в CSS-файле, а в HTML-коде комментируйте основные блоки.

Инструментарий

Для записи кода рекомендуется использовать редактор PSPad или, что хуже, стандартный Блокнот Windows.

Используйте справочник свойств CSS, приведённый на начальной странице урока.

Правильность HTML-кода можно проверять при помощи программы CSE HTML Validator Lite.

Для подготовки фотографий можно использовать Photoshop или другой растровый редактор из рекомендованных в уроке 9: “Инструменты для разработки сайта”.

Проверка работ

В качестве возможного варианта предлагается описанный ниже способ проверки работ.

Проверка работ организуется перекрёстно: каждый участник проверяет несколько работ товарищей.

Проверяющий изучает работу и составляет список погрешностей. Автор страницы работает над ошибками и передаёт на проверку исправленный вариант. Так продолжается то тех пор, пока проверяющий не сможет найти в работе ни одной ошибки и ставит за страницу “зачёт”.

Зачтённые работы передаются преподавателю. Преподаватель либо подтверждает “зачёт”, либо передаёт автору список новых ошибок. Исправленный вариант автор показывает преподавателю.

Типичные ошибки

При проверке работ можно подробно не комментировать погрешность, а просто указывать её номер в таблице погрешностей.

Дополнительно при проверках можно начислять штрафы по ниже приведённым рекомендациям.

Номер	Погрешность	Штраф	Описание
Техническое задание
01	Работа не соответствует техническому заданию.	0.1–0.5	Неверные имена файлов, нарушение рекомендованного макета страницы, другие нарушения ТЗ.
Стилевые определения
02	Стилевые определения не вынесены в отдельный файл.	0.1	Стилевые определения, записанные в отдельном файле, упрощают редактирование дизайна, уменьшают HTML-код и делают более наглядным структурную разметку страницы.
03	Стилевые определения не упорядочены.	0.1	В неупорядоченном стилевом файле трудно ориентироваться. Рекомендуется сначала записывать стилевые определения тегов и контекстные определения, затем классы.
04	Нарушения правил читаемости стилевых определений.	0.1	Рекомендуется названия тегов записывать в верхнем регистре, а все остальное (в том числе название классов) — в нижнем.
05	Стилевые определения не оптимизированы.	0.1	Не указывайте в таблице стилей значений, которые являются для данного элемента значениями по умолчанию. Используйте интегрированные определения, например, одно свойство border:1px solid blue вместо нескольких: border-style:solid; border-width:1px; border-color:blue. Используйте группировку, если нескольким элементам назначаются одни и те же стилевые свойства (P,H1{color:blue} ).
Дизайн
06	Название окна не совпадает с заголовком страницы.	0.1
07	Многочисленные выделения одного и того же элемента.	0.1
08	Выделение заглавными буквами.	0.1	Такое выделение традиционно считается и воспринимается как крик.
09	Фиксированный размер шрифта, который нельзя изменить в браузере.	0.1
10	Слишком большие массивы выделений.	0.1
11	Слишком большие абзацы.	0.1
12	Отсутствие выравнивания.	0.1–0.5
13	Горизонтальная прокрутка в окне шириной 640.	0.1–0.5
14	Прижатость элементов друг к другу.	0.1
15	Фон, заданный картинкой, на котором текст не читается.	0.1–0.5
16	Картинки смотрятся как заплаты.	0.1
17	Явные погрешности в качестве графического материала.	0.1
18	Отсутствие alt-значений в информационных иллюстрациях.	0.1
19	Движущиеся и мерцающие надписи.	0.1–0.5
20	Сайт работает только в одном браузере.	0.1–0.5
21	Заимствование элементов оформления сайта без ссылок на автора.	0.1–0.5
Коды
22	Отсутствие лесенки на теговом каркасе.	0.1–0.5
23	Нарушение правил читаемости кода.	0.1–0.5
24	Строки кода длиннее 80 символов.	0.1–0.5
25	Ошибка регистра в именах каталогов и файлов.	0.1–0.5
26	Теги Hn используются не для выделения заголовков или не отражают иерархию документа.	0.1–0.5
27	Суммарный вес страницы превышает 50 КБ.	0.1–0.5
28	Использование BR вместо P.	0.1	Не надо использовать BR вместо P. Если абзац предполагается один, то использовать BR тем более не надо, за исключение редких случаев (как в заголовке руководителя). Необоснованные переводы строк мешают браузеру нормально (без гребёнки) форматировать текст по ширине окна.
29	Применение табуляции при записи кода.	0.1	Структурная лесенка может быть разрушена. Дело в том, что у каждого пользователя значения табуляции могут быть настроены по-разному, у кого на 2 пробела, а у кого на 8.
30	Ошибки кодирования.	0.1–0.5
31	Искажение картинки размерными атрибутами.	0.1–0.5
32	Не указаны атрибуты width и height в теге IMG.	0.1–0.5
Содержание
33	Содержание не соответствует теме сайта или плохо раскрывает её.	0.1
34	Погрешности стиля изложения.	0.1
35	Заимствованный текстовый материал без ссылок на автора.	0.1–0.5
Грамматика
36	Заголовок заканчивается точкой	0.1–1.0
37	Ошибки, связанные с расстановкой пробелов	0.1–1.0
38	Дефис вместо тире, дюймы вместо кавычек, буква N вместо знака номера, неверное употребление (кодирование) спецсимволов.	0.1–1.0
39	Грамматические ошибки.	0.1–1.0
Другие ошибки
40	Ошибка, не описанная в других пунктах.	0.1	Проверяющий подробно описывает погрешность.