dom1n1k

Я делаю так:

<li class="active">Главная</li>
<li><a href="/products/">Продукты</a></li>
...

Просто, понятно и эффективно.

Иногда внутрь добавляется ещё один span или div — если нужна дополнительная технологическая обертка для каких-то визуальных эффектов. Но это лишь при необходимости, в общем случае без.

Хотя с другой стороны… Честно говоря, я не вижу никакой катастрофы, когда активная ссылка меню ведет на ту же самую страницу. Ну ведет — и что? Это чисто маньяческие придирки, в реальных проектах нередко используются гораздо более «грязные» вещи.

Если использовать Canvas непосредственно, через его родной API — да, никакого вектора там не будет. Что в растр упало, то пропало.
Но существуют фреймворки-надстройки, которые в большей или меньшей степени дают векторные возможности.
Навскидку: Processing.js, MooTools Canvas Library, Gury, Paper.js, CanvasXpress, LibCanvas, jCanvaScript (авторы последних двух присутствуют на Хабре). Все они легко гуглятся. Посмотрите доки, может что-то и подойдет.
Кроме того, есть куча библиотек более узкого профиля, например рисование графиков-диаграмм или отображения карт по тиру Google Maps.

Если говорить, о SVG, то обучно вспоминают библиотеку Raphael (автор на Хабре есть). Хотя она, конечно, не единственная.

Через IE-фильтры, как написали выше, сделать можно, но качество тени будет плохое. Особенно эти фильтры не дружат со сглаживанием ClearType — вокруг букв появляются какие-то цветные ореолы, грязь, бррр в общем.

Если интересует качество, можно использовать вот этот плагин:
www.hintzmann.dk/testcenter/js/jquery/textshadow/
Имею опыт его использования: работает вполне корректно уже в IE6, дает неплохое качество, гибко настраивается.
Особенно удобно то, что его не обязательно вызывать с полной конфигурацией параметров — он сам читает свойство text-shadow из CSS, которое вы пишете там для нормальных браузеров. Хотя можно передать параметры и напрямую.

Конечно, есть и пара минусов:
1. Не злоупотребляйте количеством тенюшек — если их много, IE начинает сильно тормозить.
2. Если мне сейчас не изменяет память, интенсивность тени немного зависела от типа сглаживания шрифтов в ОС. То есть выглядела чуть светлее/темнее.

Если есть возможность получить этот макет послойно, то в принципе, возможно.
В центральном узоре просматривается повторяющийся паттерн — его замостить «плиткой» как самый нижний слой.
Облака и нижний градиент наложить поверх как полупрозрачные PNG (правда, весить они будут немало).

Но тут ещё есть вопрос, как тянуть конкретно облака в ширину? Тут выхода два.
Либо просить дизайнера отрисовать их на бОльшую ширину (1920+) и просто центровать их с обрезкой лишнего по бокам.
Либо шапку и подвал дополнительно делить на 3 накладывающиеся части (левый край-центр-правый) и тянуть их, изменяя ширину зон пересечения. Но это довольно громоздко по объему кода и возможны артефакты обтравки.

Поддерживаю ответ выше: в данном случае лучше/логичнее/удобнее использовать таблицу.

Скрипты тут штука излишняя.
Вот набросал приблизительную канву: dom1n1k.name/dump/habr-qa6300.html
Оговорюсь: в IE6 не работает (он не умеет задавать размер абсолютно спозиционированных элементов по 4 отступам), начиная с 7-ки должно быть по идее нормально.

Мм… нет, при justify последняя строчка не центруется. Она выравнивается влево.
Но вот то, что в ней почти наверняка собьется расстояние между блоками — это да.

Ну если все блоки фиксированного и одинакового размера — тогда просто сказать им всем «float: left» и вся недолга.
Они будут выстраиваться в ряд столько, сколько помещается в окне. Лишнее будет переноситься в следующий ряд.
Только в конце не забыть поток очистить («clear: both»).

Это один из немногих случаев-исключений, когда целесообразно «нецелевое» использование таблиц.
Вариант с дивами и CSS-ужимками, безусловно, также возможен — но как ни крути, он не будет 100% надежен и совместим. А таблицы бронебойны.

Такой вот баян: