Элементы CSS дизайна

В качестве примеров я буду использовать свои дизайны.
Итак, на скрине вы видите цифры около каждого элемента. Ниже будут описаны эти элементы под соотвествующими номерами.

1. Фон

Это основной фон дизайна\страницы. Только этот элемент называется фоном, остальные элементы имеют другие названия (например, фон записи - не путайте)

В качестве фона можно установить однородный цвет, либо картинку. Картинку для фона можно поставить любую, ее положение на странице регулируется, т.е. ее можно закрепить в любом месте на странице.

В данном примере стоит стандартная фоновая картинка. Так же фоном можно сделать картинку, как здесь. В этом случае, фон - картинка с котом играет роль центрального элемента, размещенна по правой стороне, остальное пространство залито синим цветом в тон картинке.

Фон может двигаться вместе со всей страницей во время прокрутки, либо оставаться на месте.

2. Экстратоп

Экстратоп - это картинка, расположенная над блоком записей и меню. Как здесь. Меню можно передвинуть, и, как в предложенном примере, блок записей будет располагаться на всю ширину дизайна и экстратоп находится только над ним, а меню расположено на самом экстратопе (см. пункт "Меню")

Обычно, экстратоп делают размером 900px или 1000px. Поставить туда можно любую картинку и в любом варианте.

3. Блок с датой записи.

В данном примере он оформлен следующим образом: дата расположена по центру, задан цвет, чтобы выделить этот блок и разграничить посты записей. Можно использовать вместо цвета изображение, устанавливать различные цвета, размеры.

4. Оболочка записи.

Это цвет или картинка, на фоне которых будут отображаться ваши записи в дневнике.

В данном случае это картинка - туманы\разводы синего цвета. Можно установаить любую картинку или цвет.

5. Меню

Как я уже говорила, меню может располагаться под экстратопом - справа или слева, как тут. В нашем примере меню располагается на экстратопе, оно перемещено с помощью позиционирования ссылок. Таким способом пункты меню можно расположить в любом удобном для месте в дизайне. Например, тут ссылки расположены в специальных прямоугольниках на экстратопе.

Так же, существует выпадающее меню, как здесь. В этом случае я расположила меню в верхней части эпиграфа. При наведении мышки на любой блок ссылок, появится окошечко со вcеми остальными ссылками, входящими в этот блок. Такое меню удобно тем, что занимает очень мало места. Его также можно расположить в любой части дизайна.

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

А так же можно поставить у ссылок небольшие картинки. Как, например, поставлены здесь желтые кружочки у ссылок "Мой дневник" и "Главная страница".

Название ссылок вы можете поменять на свои. Например, название ссылки "Мой дневник" вы можете изменить на название "My favourite diary".

Так же, ссылки вы можете заменить картинками. Соотетветственно, ссылка "Мой дневник", к примеру, в вашем дневнике будет отображаться в виде картинки, которую вы захотите и поставите.

6. Эпиграф

Располагается под экстратопом, заполняется в стандартных настройках.

Ему так же можно придать любой цвет фона, задать размеры и по желанию переместить в любую часть дизайна.

7. Блок ссылок

Здесь располагаются ссылки "Комментировать", "Подписаться" и тд.

Для этого блока так же можно задать фон в виде цвета или картинки, изменить стиль ссылок, поставить около ссылок картинки или заменить сами ссылки картинками, изменить название. (см. пункт "Меню").

8. Фон записи

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

Цвет или картинку можно поставить любую, например, так.
В данном примере у меня не задан никакой фон записи, поэтому текст располагается на фоне "оболочки записи" (см. выше).

9. Разделители

Ставятся для разграничения записей, можно использовать любую картинку, текст. В общем, экспериметрировать)))

10. Экстработтом

Располагается в конце обшего блока с дизайном, после последней записе на странице, под количеством страниц в дневнике.