05 мая 2011 года в05.05.2011 10:20 3 0 10 1

Создание шаблона Viewy - Урок 2 - Часть 1: CSS и фон

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

Рассмотрим кусок кода:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{Title}</title> <!-- Заголовок страницы -->
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<!-- Стили по умолчанию -->
<style type="text/css">
</style>
</head>


Этот код (как я писал в предыдущий раз) описывает голову сайта. Первая строка (строка с тегом <meta>) определяет кодировку нашей страницы. Если очень интересно знать что такое кодировка, то про это можно почитать тут: Wiki. А если не углубляться, то нужно просто запомнить, что эта строка должна быть и все.

Следующая строка определяет заголовок вышего окна. Эта строка отображается вот тут:



За заголовок окна отвечает тег <title>Здесь любой текст</title> (ссылка на справочник). Стоит отметить, что этот тег используется ТОЛЬКО в голове сайта. И только один раз, если вы напишите этот тег еще раз с другим текстом, то браузер один из них проигнорирует. Заметьте также, что между открывающим и закрывающим тегом стоит: {Title}. Но при этом этот текст не выводится в заголовке страницы, а вместо него появляется название вашего блога (как у меня - вместо {Title} появилось Erase and rewind…). Почему так происходит? Слова, которые заключены в фигурные скобки { и } являются специальными служебными тегами, которые существуют только на этом сайте. Проще говоря, программа сайта Viewy вместо таких вот слов подставляют соответствующие значения. Например вместо {Title} появится строка с названием вашего блога, а вместо {Description} - его описание. Это очень удобно, так как если Вы измените название Вашего блога, то Вам не придется менять код страницы.

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

И последние две строки - это открывающий и закрывающий тег <style></style> соответственно. Между этими тегами мы и будем записывать внешний вид нашей страницы. Делать мы это будем на языке CSS - языке описания внешнего вида страницы.

Итак, для примера давайте поменяем фон нашей страницы. Напишем вот такой код:

<style type="text/css">
body
{
background-color: black;
}
</style>


Этот код означает, что для тега <body> (тела страницы) мы задаем цвет фона (background-color) черным. Именно такой формат написания внешнего вида. Сначала пишем имя элемента (у нас - тело страницы), потом фигурные скобки и внутри этих скобок - перечень свойств которые мы хотим определить. Свойства записывают как: "СВОЙСТВО: ПАРАМЕТР;". Подробнее какой существует список свойств можно посмотреть в справочнике.

На этом все. Ссылка на полный код: КОД.

P.S. Как устанавливать код? Зайдите на Viewy Нажмите справа "Внешний вид блога". Выберите "Собственная тема" и "Редактировать HTML". Удалите весь текст оттуда (предварительно сохранив в другой файл этот текст). И вставьте текст урока. Нажмите "Сохранить" и посмотрите свой блог - у Вас должно появится просто черная страница. Никаких постов или менюшек. Просто черная страница. Это произошло потому что мы еще не написали код как должны отображаться остальные элементы страницы.

Показать/Скрыть текст статьи

Комментарии

Зарегистрируйтесь или войдите, чтобы добавить комментарий

Новые заметки пользователя

DFAGDJHKJKHLKJ — Erase and rewind...

6

Ухожу отсель, гнилой сайт.

5

Самая сложная в мире головоломка

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

5

PUR:PUR

«Pur:Pur» - украинская группа из Харькова, основана в феврале 2008 года. Именно тогда Ната Смирина и Евгений Жебко выложили н...

5

Создание шаблона Viewy - Урок 2 - Часть 2: CSS, имен...

После изучения блоков необходимо рассмотреть как один блок отличать от другого. Этим и займемся. (P.S.: Полный текст поста можно посмотр...

5

Оригинальную закладку для тех, кто еще читает обыкновенные бумажные книги, спроектировала бразильский дизайнер Лессандра Мартинс Перейра ...

5

Фестиваль "Ночь музеев"

В ночь с 14 на 15 мая в Харькове прошел городской фестиваль под названием "Ночь музеев". Организатором фестиваля выступила художественная...