Оказывается, больше года назад, обещал рассказать как сделать карту блога в 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyH1tReK1AS5MXdn8U9FPEp-ezjhVci-O3bfNQUKc5ahHBOc4lRXcq6h_Z3muvPA5OrHCsjzPZQqpmXwRMs8cM3TdqQfUb5Pm0LPJv0n5TGlZTbKv8aDf8wByMlYLgf7T-En_OlKovju8/s1600/P1030725.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="55" width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyH1tReK1AS5MXdn8U9FPEp-ezjhVci-O3bfNQUKc5ahHBOc4lRXcq6h_Z3muvPA5OrHCsjzPZQqpmXwRMs8cM3TdqQfUb5Pm0LPJv0n5TGlZTbKv8aDf8wByMlYLgf7T-En_OlKovju8/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>
Жмем ПРОСМОТР. Круто? Я в сугробе! А что Вы хотели, ссылки на мои ресурсы.
Переделываем под Вас:
Как и все прочее такую карту можно исполнить разными методами. В этом блоге - блочное построение тегами 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyH1tReK1AS5MXdn8U9FPEp-ezjhVci-O3bfNQUKc5ahHBOc4lRXcq6h_Z3muvPA5OrHCsjzPZQqpmXwRMs8cM3TdqQfUb5Pm0LPJv0n5TGlZTbKv8aDf8wByMlYLgf7T-En_OlKovju8/s1600/P1030725.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="55" width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyH1tReK1AS5MXdn8U9FPEp-ezjhVci-O3bfNQUKc5ahHBOc4lRXcq6h_Z3muvPA5OrHCsjzPZQqpmXwRMs8cM3TdqQfUb5Pm0LPJv0n5TGlZTbKv8aDf8wByMlYLgf7T-En_OlKovju8/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 страницы остался на латинице человекопонятным (ЧПУ).
Вот и все. Старался написать доступно. Как получилось судить Вам. Жду отзывов.
Я понимаю всем не угодишь. Каждый понимает в меру своей испорченности. По этому поводу анекдот:
Урок. Дети пишут диктант. Учительница диктует:
- В углу скребет мышь.
....
После урока Вовочка подходит к учительнице и спрашивает:
- А кто такой Скр?
Учительница недоуменно пожимает плечами.
При проверке в тетраде Вовочки: "В углу Скр ...бет мышь."
Поучительная статья
ОтветитьУдалить