Основные достоинства блочной DIV верстки и недостатки табличной:

- Размер кода. При блочной верстке в итоге код получается все-таки меньше, что способствует ускорению загрузки страницы и как следствие уменьшает нагрузку на сервер.

- Простота манипуляции. Если вдруг нужно немного изменить дизайн, для этого не нужно перебирать все ячейки в таблицах и мудровать что-где не так. Достаточно изменить стили дивов и все.

- Читабельность. Просто приятно смотреть на код, когда все по блокам и все логично, а не что-то в какой-то объединенной ячейке внутри двух таблиц…

- SEO адаптируема. Благодаря позиционированию дивов на страничке, код можно написать так, чтоб нужные нам слова были выше к началу страницы, что любят роботы поисковиков, а пользователю показать этот фрагмент где угодно.

И самое главное при верстке - это использование стандарта . Тогда ваш браузер будет вас понимать, а вы его!

Написать эту заметку я хочу лишь для того, чтобы показать что верстать на DIVах - это не так уж сложно, как кажется сначала, это еще удобно и практично!

По-этому начну выкладывать заметки, как начать верстать на DIV шаг за шагом с примерами и иллюстрациями.

До встречи!

А вот и оно: сжатие CSS online

Ранее, я уже упоминал про функцию animate. Вот с помощью нее мы и реализуем нашу задачу.

Для начала, как всегда, подключаем jQuery

<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>

Сам скрипт

<script type="text/javascript">
$(document).ready(function(){
$(".tags").hover(  //
function(){
$(this).animate( { fontSize:"1.5em" } , 300 );},
function(){
$(this).animate( { fontSize:"1em" } , 200 );}
);
});
</script>

И, например, ссылки с класом tags

<a  href="#" class="tags" >Font size</a>
<a  href="#" class="tags" >jQuery</a>
<a  href="#" class="tags" >Animate</a>

Смотрим пример изменения шрифта.

Ну, вот, собственно, и все!Теперь при наведении мишкой на слово с класом tags будет выполняться наш скрипт!

Функция animate принимает следующие параметры: animate(params, speed, easing, callback);

params (Options) – свойства анимации (свойство: значение).
speed (String, Number ) – скорость в милисекундах.
easing (String) – замедление анимации ("easein", "easeout").
callback (Function) – функция, вызываемая по окончанию анимации.

$("#go").click(function(){
$("#block").animate({
width: "70%", //меняем ширину
opacity: 0.4, //меняем прозрачность
marginLeft: "0.6in", //меняем отступ слева
fontSize: "3em",  //меняем размер шрифта
borderWidth: "10px" //меняем толщину границы
}, 1500 ); //за полторы секунды
});

Ну а теперь и сам пример использования animate ().