Проект 4

возврат

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

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

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

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

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

Макет страницы

Страница устроена следующим образом.

Внутри BODY (ширина не фиксирована) расположены:
- Заголовочная часть H1 (в потоке)
- Обертка wrap (плавающий блок, ширина 100% от BODY, прилипание слева), внутри wrap расположены два плавающих блока:
  - Блок author (плавающий блок, ширина 20% от wrap, прилипание слева)
  - Блок wrap1 (плавающий блок, ширина 80% от wrap, прилипание слева). Внутри wrap1 расположены два плавающих блока:
    - Блок contents (плавающий блок, ширина 60% от wrap1, прилипание слева)
    - Блок facts (плавающий блок, ширина 40% от wrap1, прилипание слева).
- Подвал footer (в потоке с прекращением обтекания)
Ложные колонки создаются два раза, первый раз для блока wrap, второй — для блока wrap1.
Содержимое каждого из блоков author, contents и facts погружено в блок-обертку wrapper.

Возможный вид страницы (рабочий вариант):

Рабочий вариант

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

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

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

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

Файл main.css

  
/* Стили HTML
   ----------
*/
HTML
{
}

/* Стили BODY
   ----------
*/
BODY
{
}

/* Заголовок и логотип  
   -------------------
*/
H1
{
}

H1 IMG
{
}

/* Блок обёртка блоков author и wrap1   
   ----------------------------------
*/
#wrap
{
  float:left;
  width:100%;
  /* Ложные колонки */
  background: url(pic/fcol1.png) 20% top repeat-y; 
}

/* Автор                
   -----
*/
#author
{
  float:left;
  width:20%;
  /* По поводу следующего правила смотрите 
     статью Владимира Токмакова 
     "Борьба с прыгающими блоками в IE" на странице:
     www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/
  */   
  //margin-right:-100%; /* Заклинание для IE */
}

/* Блок обёртка блоков contents и facts   
   ----------------------------------
*/
#wrap1
{
  float:left;
  width:80%;
  /* Ложные колонки */
  background: url(pic/fcol2.png) 60% top repeat-y; 
  /* По поводу следующих правил смотрите 
     статью Владимира Токмакова 
     "Борьба с прыгающими блоками в IE" на странице:
     www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/
  */   
  //margin-left: 20%; /* Заклинание для IE */
  //display: inline;  /* Заклинание для IE */
}

/* Основное содержимое  
   -------------------
*/
#contents
{
  float:left;
  width:60%; 
}

/* Факты
   -----
*/
#facts
{
  float:left;
  width:40%; 
}


/* Обертка содержания блоков author, contents, facts 
   ---------------------------------
*/
.wrapper
{
}

/* Подвал
   -----
*/
#footer
{
  clear:both;
}


/* 
   Приближаем заголовок к своему абзацу 
   ------------------------------------ 
*/
H2,H3,H4,H5,H6 
{
  margin:0.2em 0;
  color: #009900;
  font-family:tahoma,arial,verdana,sans-serif; 
}
H2 
{
  margin:0;
  padding-top:0.2em;
}
P {margin:0.2em 0 1em;}

/* Размеры заголовков 
   ------------------
*/
H2 {font-size:1.4em;}
H3 {font-size:1.2em;}
H4 {font-size:1em;}

Файл index.htm

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

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

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

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

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

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

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

http://validator.w3.org

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

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

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

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

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

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

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

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

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

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

вверх | возврат