Содержимое контент сайта. Текстовое наполнение, Блочная верстка, Работа с кодом, Комментарии


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

ТЕКСТОВОЕ НАПОЛНЕНИЕ

Здесь все просто. Смело заменяйте весь русский текст в коде шаблона на свой.
Для наглядности все шаблоны от SiteY.ru уже заполнены текстом. Часто этот текст является комментарием к данному блоку сайта.
Данные комментарии нужны в том случае, если конкретный блок можно растянуть, заменить другим и т.д. в зависимости от дизайна шаблона.

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

КОММЕНТАРИИ

Внутри кода страниц Вы найдете подробные комментарии, выделенные так: <!-- Текст комментария -->.
Они не отображаются при просмотре страницы и существуют для того, чтобы Вам было легче ориентироваться в содержимом кода. Смотрите пример:



БЛОЧНАЯ ВЁРСТКА DIV

Контент в шаблонах разбит на отдельные блоки обозначенные тегами <div>...</div>.
Начало и конец блоков обозначены соответствующими комментариями. Также указано их расположение: левый, средний, правый или пронумерованы. См. выше.

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

Для удобства в данное руководство включены справочники по HTML и CSS кодам (скачать). На сегодняшний день эти два справочника являются наиболее простыми и интуитивно понятными.

Каждый блок <div>...</div> подчиняется своим правилам в файле style.css. Этот файл, как правило один.
Т.е. достаточно внести в него изменения, как по всему сайту блоки этого типа поменяют свои атрибуты.
Связь файла style.css со страницами сайта происходит за счет строки, прописанной в <head>...</head> каждой страницы, а именно <link href="style.css" rel="stylesheet" type="text/css" />

Примеры связи отдельного блока с файлом style.css:

Пример 1:
Допустим блок окутан тегами <div class="header">...</div>, это означает, что он подчиняется правилам прописанным в файле style.css с параметрами .header {размер, фон, отступы, цвет и др.}
Открываем файл style.css, находим header и видим параметры этого блока.


Пример 2:
Содержимое блока заключено в теги <div id="menu">...</div>.
Идем в файл style.css и видим команды, которым подчинен данный блок: #menu{................}

class - это точка перед параметром в CSS
id - это # решетка перед параметром в CSS

Смотрите пример CSS кода:



Атрибуты и значения параметров вы найдете в справочнике CSS в алфавитном порядке. Разберем один из примеров работы с шаблоном:

Допустим Вы видите в коде страницы такой фрагмент:

<!-- Начало  блока 1 -->
<div class="content_main">
< h2>Преимущества личного сайта (домена)</h2>
<p>
- Вы являетесь юридическим владельцем личного домена и сайта.<br />
- Ограничены только законом России, а не желаниями хозяев соц. сетей.<br />
- Имеете личный почтовый сервер по имени Вашего домена: xxx@домен.ru<br />
- Возможность заработка на размещении рекламы или создании собственных коммерческих проектов.
< /p>
<p><a class="button" href="info.html">Подробнее</a></p>
< /div>
< !-- Конец  блока 1 -->

Текст однозначно меняете на свой.
<br /> - это перенос строки, все что между <p> ... </p> - это абзац, между <h2> ... </h2> - это заголовок (крупный шрифт).

Блок открывается и закрывается тегами <div class="content_main"> ... </div>

Далее смотрим параметры блока, они подчиняются правилам CSS content_main, выделяем мышью этот параметр, копируем его, открываем файл style.css текстовым редактором и в поле найти вводим content_main, находим следующий код (в зависимости от дизайна шаблона его можно менять):

/* Блок 1 на главной */
.content_main
{ width: 275px;
height:460px;
padding: 10px;
margin-top: 10px;
margin-left: 9px;
float: left;
}

Параметры width: 275px; и height:460px; - это ширина и высота блока
Параметры padding:, margin-top:, margin-left:, float: left - это отступы вокруг, сверху, слева...

Подробное описание и применение этих значений можно посмотреть в справочнике по CSS.
Искать надо по названию атрибута, допустим margin-left
Содержание выставлено по алфавиту.
Можете воспользоваться общим поиском по книге в верхнем левом углу.

Далее ищем и находим в CSS значение button (Для простоты я поясню эти значения через тире, хотя это в коде недопустимо):

/* Кнопка подробнее */
a.button {
display:block;  - общий параметр
width:100px;  - ширина
height:20px;   - высота
background:url("../images/button.png");  - рисунок кнопки, если изменить рисунок или адрес (путь) рисунка, то это затронет все страницы сайта
margin:3px;   - отступ
text-align:center;  - текст кнопки по центру
line-height:20px;  - межстрочный интервал
font-size:13px;  - размер шрифта текста в кнопке
text-decoration:none;  - отменяет подчеркивание при наведении
}

a.button:hover {
background-position:0 -20px;  - эффект спрайта при
наведении мышкой на кнопку

color: #FFFFFF;  - цвет при наведении
}

Как видите все понятно. Атрибуты кода часто имеют дословный английский перевод: верх, низ, право, лево и т.д.
Справочник всегда у Вас под рукой.
Для новичков: не пугайтесь кода. Через день, два Вы привыкните к нему или он к Вам.

При создании сайта обратите внимание на выбор тематики. Довольно популярным, на сегодняшний день, является направление: сетевой маркетинг интернет магазин. Создание интернет магазина, с включённой в него партнерской программой, сулит успех в бизнесе для проектов, основанных на многоуровневом сетевом маркетинге.

Автор: Saah | Просмотров: 2 521 | 4-08-2013,Вс, 20:02  

Похожие публикации

Добавить свой комментарий:

@