Оформляем карту сайта
Привет, как я и обещал - публикую очередную заметку.
Сегодня речь пойдет об оформлении карты для сайта. На многих из сайтов эти карты используются исключительно для SEO-оптимизации и выглядят как обычный, уродливый таки-список, признаюсь честно — сам имею такие.
Но если вы хотите приукрасить вашу карту и сделать все на совесть — советую Вам уже переходить под кат.
И так, это решение представляет собой базу состоящую из css и javascript, которая позволяет оформлять вашу карту в виде древовидного списка.
Выглядит она достаточно элегантно и аккуратно. А что более важно — это её семантичный код.
Вот пример кода(взятого из демо) дерева с тремя переходами:
<ul>
<li><a href="/services">Services</a>
<ul>
<li><a href="/services/design">Graphic Design</a></li>
<li><a href="/services/development">Web Development</a></li>
<li><a href="/services/marketing">Internet Marketing</a>
<ul>
<li><a href="/social-media">Social Media</a></li>
<li><a href="/optimization">Search Optimization</a></li>
<li><a href="/adwords">Google AdWords</a></li>
</ul>
</li>
<li><a href="/services/copywriting">Copywriting</a></li>
<li><a href="/services/photography">Photography</a></li>
</ul>
</li>
</ul>Код выглядит просто супер.
Так же хотелось бы заметить что все блоки тянутся.
Так что смотрите демо, думайте и используйте.
Я тогда не смог отправить сообщение, думаю сейчас все заработает :)
Я по поводу вашего отсутствия – я уже и RSS адрес удалил, вы же первый блогер, которого я постоянно читал! Теперь у меня 36 лент :) Если бы не пришлось пользователю показать силку на Flash mp3 player, то так бы и не узнал о возрождении такого блога :) Из пожеланий, если можно, хочу больше переводов из английских источников. Во общем с возвращением :)
Выглядит довольно весело, даже применимо %)
зы: уже 2009 год, а копирайт внизу всё ещё 2008 ;)
Красота кода поразила!
Вовсе не обязательно ставить текущий год. Мало того, можно вообще копирайт не ставить ))))
Очень эстетично. Мне понравилось. Спасибо за находку.
Вот тут было, немного раньше вашего, к сожалению:
Повторение – мать учения (:
Рад что вернулись, обожаю ваш блог за дизайн… ну и не только (:
Красивая реализация с красивым кодом.
Хочу поправить на счет JavaScript – он не используется для отображения дерева. Судя по комменту в коде, автор использует его для сбора статистики.
Код самого скрипта я еще не изучал, но судя по демо он, как минимум, используется для отображения урл в блоке из дерева.
Я в восторге ) Пейджер еще снизу привернуть, если карта очень большая )
Супер! Всё работает на ура, красотище! :)
сделал вложенность 4 вместо 3-х, и тут же нарисовались проблемы – не применяется новый цвет(как для ранее описанных уровней) и битая линия в дереве, firefox 3
Большое спасибо. Первый раз вижу такое решение. Обязательно попробую :)
а как же работа в браузере IE6/7? У меня 6ка вообще ужас какой показала
Отлично. Безупречный код. Спасибо. С возвращением!
Демо под IE8 немного барахлит, а про IE6 вообще молчу. Понятно, что шестые отмирают, но многие клиенты еще требуют. Надо будет колдовать с java
Ну вот как сказать всем пользователям IE, что этот браузер фигня…..
работает :)
Доступно, красиво, практично!!
о чём вы говорите.. ПОНЯТНОЕ дело IE6 не поддержит, в CSS стоят свойства только для FF/
Не вижу ничего необычного в карте :) ну только что наглядно удобно.
Ой спасибо,как же пригодилось.
JS в карте действительно не используется – чистый CSS. В хеде подключаются лишь:
<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" media="screen,print" href="slickmap-ie.css" /> <![endif]-->
<script src="/mint/?js" type="text/javascript"></script> <!-- stats tracking -->
И как правильно заметил Димокс исключительно для статистики.
Ну.. не знаю. Лично мне нравятся варианты, когда при просмотре древа видно и сам сайт. А в вашем демо – древо на целый экран.
В своих поисках я наткнулся на програмку GSiteCrawler она не смотря на свою бесплатность – работает корректно и помимо генерации карты сайта имеет еще множество приятных моментов. Например, если указать доступы к ФТП – она сама после генерации обновит карту сайта.
Так-же поддерживается неограниченное количество проектов.
Теперь о плохом. GSiteCrawler не работает под Vista (и наверное под Win7) если запускать от имени обычного пользователя. Проблему легко решает запуск от имени администратора, но все таки маленька неприятность есть. Зато в остальном – она себя полностью оправдывает.
Если эту штуку кастомизировать — очень даже ничего выйдет.
Только деревно сайта разработчик развернул не в ту сторону, я бы сделал по-другому.
Во спасибо, сделал сбе карту сайта, для пс будет лучше :)
Доступно, красиво, практично…:)
Действительно все гениальное просто. Так и этот код банально прост теперь если я сделаю так ПС не развернутся от моего сайта?
Эксперименты с картой мне кажется делать можно на начальном этапе развития сайта (на новом) но старый сайт ПС запомнили и все, же это код по которому проходят роботы и тут бац изменение в сайте?!
Ведь карта сайта это, прежде всего самый главный ориентир для поисковиков. Все нормально теоретически но как бы не получить реиндексацию сайта целиком. А на это, как известно, уходит уйму времени.
Линия для в Украине
Если честно первый раз вижу чтобы кто-то оформлял карту сайта. Смотрится, конечно, красиво и даже очень, но это же все равно для ботов делается а им какой от этого толк? Им лишь бы поскорее сделать обход по вашему сайту и все.
Подскажите как сделать 6 столбцов. Только, пожалуйста, не отправляйте CSS учить
Greetings thanks for great publish i used to be looking for this challenge very last 2 times. I will look for following precious posts. Have fun admin.
Good a person blog proprietor success weblog post wonderful sharings with this web site always have fun
Excellent post. I was checking continuously this blog and I am impressed! Very useful info specially the last part :) I care for such info a lot. I was looking for this particular information for a long time. Thank you and good luck.
По
Wonderful goods from you, man. I have understand your stuff previous to and you’re just too fantastic. I actually like what you have acquired here, really like what you are stating and the way in which you say it. You make it entertaining and you still take care of to keep it wise. I can’t wait to read far more from you. This is actually a tremendous site.
This is really interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your great post. Also, I’ve shared your website in my social networks!
Pretty nice post. I just stumbled upon your weblog and wanted to say that I have truly enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon!
Thank you for the good writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how could we communicate?
You really make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complex and very broad for me. I am looking forward for your next post, I will try to get the hang of it!
I don’t even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you’re going to a famous blogger if you are not already ;) Cheers!
Excellent goods from you, man. I’ve understand your stuff previous to and you are just too fantastic. I actually like what you have acquired here, certainly like what you’re saying and the way in which you say it. You make it entertaining and you still care for to keep it wise. I can’t wait to read far more from you. This is actually a terrific website.
Terrific article admin thank you. I located what i used to be looking for here. I’ll review whole of posts in such a day time
Greetings thanks for fantastic post i was seeking for this problem previous 2 times. I’ll look for upcoming precious posts. Have pleasurable admin.
Hello admin excellent article a lot thanks adored this website actually a lot
I used to be looking for this great sharing admin a lot thanks and also have nice running a blog bye