Занятия в МЦ / 6 занятие

Теги списков.

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>

<ul> 
<li>Первый пункт</li> 
<li>Второй пункт</li> 
<li>Третий пункт</li> 
</ul> 

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом <li>, как показано ниже.

<ol> 
<li>Первый пункт</li> 
<li>Второй пункт</li> 
<li>Третий пункт</li> 
</ol> 

В качестве нумерующих элементов могут выступать следующие значения:

  • арабские числа (1, 2, 3, …);
  • прописные латинские буквы (A, B, C, …);
  • строчные латинские буквы (a, b, c, …);
  • прописные римские числа (I, II, III, …);
  • строчные римские числа (i, ii, iii, …).
 Для указания типа нумерованного списка применяется атрибут type тега <ol>. подробнее о списках http://htmlbook.ru/samhtml/spiski 

Практикум по теме списков http://htmlbook.ru/practical/numerovannyy-i-markirovannyy-spisok

Составление вертикального и горизонтального меню.

Для составления меню с помощью списка нам понадобится применить к списку класс и описать свойства этого класса в таблице стилей.

Экспериментируйте, но обязательно проверяйте результат в нескольких браузерах. некоторые свойства могут не работать или работать не правильно.

Работаем с макетом в программе Photoshop

Для работы с макетом будущего сайта необходимо учитывать несколько важных и несколько не очень важных условий.

  • Для начала подберите схему сайта
  • Подумайте о назначении каждого их блоков
  • Определите место для навигационного меню Вашего сайта
  • При использовании в оформлении графических элементов — обязательно продумывайте способ реализации (фон, заливка, рамки, подложки, уголки и т.п.)
  • Всегда идите от простого к сложному. Т.е. придумайте для начала простой дизайн с минимумом элементов.
  • Обратите особое внимание на структуру сайта (разделы могут быть статическими и динамическими)
  • Раздел новостей или раздел статей — это динамический раздел, куда вы регулярно добавляете информацию, где наверняка будет указана дата написания и возможно и имя автора.
  • Статические разделы (о нас или контакты) обычно корректируются , но редко и не значительно.
  • Обычно новости или статьи еще дополняются иллюстрациями. В списке статей или новостей будет аккуратно размещена картинка, заголовок,краткий  текст (анонс или цитата) отображающий в двух словах
  • смысл поста, статьи или новости.

Статические разделы тоже содержат и картинки и цитаты и списки. на наших занятиях мы будем говорить об особенностях верстки, фиксированных и «резиновых» дизайнах сайта.

При оформлении необходимо использовать не более 3-4-х цветов. 3 цвета (2 основных — 1 вспомогательный) — оптимально.

Через несколько занятий мы приступим к самому интересному : кто подготовит и сверстает свой макет — будет учится «натягивать» его на систему управления сайтом (ЦМС) Вордпресс.

© Pirania Laboratory. Мы работаем с 2005 года.