Структура кода шаблона.

Приветствую Вас и сегодня познакомимся с кодом шаблона. Зайдите в панель управления блогом и в меню слева выберите Дизайн. Перед любым изменением кода советую сохранить его  себе на компьютер.
Кнопка Резервное копирование и восстановление (в верху, справа).  В новом окне нажмите на Загрузить шаблон полностью.
Если что то напортачите при изменении кода, то в этом же окне есть кнопки Выберите файл и Загрузить, воспользовавшись которыми восстановите то что у Вас было: в выберите файл выбирайте тот что сохранили и Загрузить. Но береженого, бог бережет.
Экспериментировать лучше не на своем блоге. Заведите себе еще один блог и скопируйте в него сохраненный шаблон вашего блога. Если запорите, то восстановите его или просто удалите.
Итак, в панеле управления блогом слева в меню выбираем Дизайн и в новом окне щелкаем по кн. Изменить HTML. И перед нами во всей красе код шаблона:

Если Вы прокрутите его в окне, то заметите, что это совсем не то или не совсем то чему Вас учили. Нет папки с изображениями, индексного, других файлов страниц и прочего. Появились какие то не понятные теги. Это документ, из которого конструктор сделает Ваш блог. Кстати, если Вы все скопируете (Ctrl+A, затем Ctrl+C) и вставите (Ctrl+V) в текстовый редактор, то в нем все будет выглядеть более привычно (без элементов языка конструктора).
Об о всем по порядку. Начнем со структуры документа документа.

• Самый верх служебная информация для браузера и поисковиков: мета теги. Если эта строчка Вам не понятна, то жмем.
• От  строки <b:skin><![CDATA[/* до стоки   ]]> содержится информация о том, что Вы выбрали в конструкторе: вид шаблона, фона, гарнитура (название) и кегель (размер) шрифтов, цвета ссылок, ширина блога и сайтбаров и пр.
  Информация храниться в переменных, перечень которых под строкой  /* Variable definitions.  Их порядка сотни (кто посчитает сообщите в комментарии, я померил линейкой).
  Дальше следует таблица стилей для групп: /* Content ..., /* Header... и т. д. Это один из способов указать браузеру на стили (другой способ файл.css). В служебной информации (в верху) есть так же привязка к другим таблицам стилей.
• А вот за скобочками  ]]>  и начинается HTML документ. Верстка блога блочная (тегами div).

Наворочено ого го. И как в этом разобраться? Это - наша цель! Может, это Вам и не покажется элементарным, но не все так сложно, когда знаешь где, что и как поправить.

Закрываем окно шаблона. Если Вы что то успели там изменить, то без сохранения. Наверху жмем кнопку посмотреть блог.

На блоге у меня есть картинка старушки (у себя выберите какую то картинку). Щелкаем по ней правой кнопкой мышки и в контекстном меню выбираем Посмотреть код элемента (как правило последний пункт). И видим:

1. Строчка HTML кода, отвечающая за ввод картинки (тег <img атрибуты..... >).
2. Строчки из CSS файла. Как ее оформить.

Щелкаем по синей строчке правой кнопкой и в меню выбираем Edit as HTML (редактировать как HTML). Для примера: в border="0" я поставил 5, а в height="256" заменил на 100 (толщина рамки вокруг картинки 5 пк и высота картинки 100). В 2 щелкнув по прямоугольнику после solid, выбрал другой цвет рамки.

Щелкаем левой в окне блога, видим изменения.

Картинка сплющилась, появилась рамка. Вот так, на первый взгляд, все просто!

Обновляемся в браузере. И все встало на свои места. Все что мы поменяли не сохранилось. А мы и не сохраняли (нам и не предлагалось).

Так Вы сможете посмотреть код любой чужой веб страницы. Поэтому не предоставлена возможность сохранения.

Как сохранить, если работаем со своей страничкой? Ответ в следующей встрече.