пятница, 20 декабря 2013 г.

Карта блога в HTML.

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

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

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

Создаем новую страницу. Заголовок пишем на латинице: karta-bloga. Потом (в нужный момент) поправим. Переключаем редактор в режим HTML. Видим:

<div dir="ltr" style="text-align: left;" trbidi="on">
</div>

Нам этот div-блок ни к чему. Но если мы его удалим, то редактор опять его восстановит. Не будем с ним спорить. Курсор в конец первой строчки и Enter. Копируем код ниже от <table...  до .../table> и вставляем его между тегами div и /div. Комментарии в коде.

<div dir="ltr" style="text-align: left;" trbidi="on">

<table style="width: 510px;"><!--ввели таблицу шириной 510-->   
<tbody><!--добавил конструктор (жираф большой, ему видней)-->
<!--вводим строку, заливаем цветом d9, объединяем 2 ячейки, пишем заголовок рубрики-->
<tr bgcolor="#d9d9d9"> <td align="center" colspan="2"><h2>Б А Н Я </h2></td>   </tr>
<!--вводим новую (2)строку, задаем ширину 1 колонки, вставляем картинку-->
<tr> <td align="center" valign="middie" width="100"><a href="http://2.bp.blogspot.com/-O06Oo4-sWkk/TqlrnU3JyrI/AAAAAAAAAFU/VcT0i-a-VwY/s1600/P1030725.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="55width="100src="http://2.bp.blogspot.com/-O06Oo4-sWkk/TqlrnU3JyrI/AAAAAAAAAFU/VcT0i-a-VwY/s200/P1030725.JPG"  /></a></td>
<!--в 2 колонку, вставляем вставляем ссылку на статью и текст ссылки-->
 <td align="left" valign="middie"><b><a href="http://banja1.blogspot.ru/2011/10/blog-post.html" target="_blank">1. Начало</a>.</b>
(как это начиналось)</td>    </tr>

</tbody></table>
</div>

Жмем ПРОСМОТР. Круто? Я в сугробе! А что Вы хотели, ссылки на мои ресурсы.

Переделываем под Вас:

  • вместо БАНЯ пишем название вашей рубрики;
  • вставляем адрес вашей картинки. Для этого жмем Вставить катинку.  Выбираем нужную, по ней левой, затем правой кнопкой мышки. Выбираем копировать URL картинки и на кнопку Отмена. Между кавычек (!) в href выделяете мой адрес, на выделенном щелчок правой кнопкой и вставить. Тоже для src;
  • в новой вкладке открываете свой блог и статью, на которую будите ссылаться. В адресной строке браузера копируете адрес своей статьи. Выделяете адрес моей статьи, по нему правой кнопкой и вставить свой. Ну, и вместо Начало, пишите свой текст.
Наверно, поняли как действовать дальше. На всякий случай:
Для следующей статьи:
  • Копируете (на своей странице) код второй строки таблицы (от <tr... до .../tr>.
  • Вставляете его ниже (2 строки и т д).
  • Исправляете адреса в ссылках.
Для следующей рубрики:
  • Копируете (на своей странице) код 1 и 2 строки таблицы (от <tr..1стр. до .../tr>2 строки.
  • Вставляете его ниже.
  • Исправляете название рубрики и адреса в ссылках.
Если картинка получается искаженной, то в коде  поиграйте шириной и высотой
Когда страница готова жмем ПУБЛИКАЦИЯ. Затем на Изменить эту страницу и вводим заголовок этой страницы на языке блога и ОБНОВИТЬ. URL страницы остался на латинице человекопонятным (ЧПУ).

Вот и все. Старался написать доступно. Как получилось судить Вам. Жду отзывов.
Я понимаю всем не угодишь. Каждый понимает в меру своей испорченности. По этому поводу анекдот:

Урок. Дети пишут диктант. Учительница диктует:
- В углу скребет мышь.
....
После урока Вовочка подходит к учительнице и спрашивает:
- А кто такой Скр?
Учительница недоуменно пожимает плечами.
При проверке в тетраде Вовочки: "В углу Скр ...бет мышь."

1 комментарий:

От Вас деловой комментарий - Вам подарок!