Всё правильно. Это в notepad++ есть плагин(если нет то нужно скачать) Base64Encode- Decode И тд. Чтобы уменьшить нагрузку на сервер, можно картинку закодировать и нагрузка таки уменьшится))) Можно делать спрайты и тому подобное.

Угу :)

Кину ссылку на тему 400 плагинов для WordPress [ссылки видны только авторизованным пользователям]
Подборка старая, но лично мне очень помогла. Там есть ссылка на сайт Алтайского блогера - рекомендую.

Одобряю. Есть еще руселлер для верстальщиков. Там бывают хорошие вещи на чистом цсс.

Вот еще блог [ссылки видны только авторизованным пользователям]
Легендарный Goodwin и его темы =)

<ul class="accordion">
02
03 <li class="slide-01">
04
05 <div>
06
07 <h2>Слайд №1</h2>
08
09 <p> . . . </p>
10
11 </div>
12
13 </li>
14
15 <li class="slide-02">
16
17 <div>
18
19 <h2>Слайд №2</h2>
20
21 <p> . . . </p>
22
23 </div>
24
25 </li>
26
27 <li class="slide-03">
28
29 <div>
30
31 <h2>Слайд №3</h2>
32
33 <p> . . . </p>
34
35 </div>
36
37 </li>
38
39 <li class="slide-04">
40
41 <div>
42
43 <h2>Слайд №4</h2>
44
45 <p> . . . </p>
46
47 </div>
48
49 </li>
50
51 <li class="slide-05">
52
53 <div>
54
55 <h2>Слайд №5</h2>
56
57 <p> . . . </p>
58
59 </div>
60
61 </li>
62
63 </ul>

*----------------------------- -------*\
02 АККОРДЕОН
03 \*---------------------------- --------*/
04 .accordion{
05 width:940px;
06 overflow:hidden;
07 list-style:none;
08 margin-bottom:10px;
09 text-shadow:1px 1px 1px rgba(0,0,0,0.25);
10 background:blue;
11
12 -moz-border-radius:10px;
13 -webkit-border-radius:10px;
14 -o-border-radius:10px;
15 border-radius:10px;
16 }
17 .accordion li{
18 float:left;
19 width:20%;
20 overflow:hidden;
21 height:250px;
22 -moz-transition:all 0.2s ease-out;
23 -webkit-transition:all 0.2s ease-out;
24 -o-transition:all 0.2s ease-out;
25 transition:all 0.2s ease-out;
26 -moz-transition-delay:0.15s;
27 -webkit-transition-delay:0.15s ;
28 -o-transition-delay:0.15s;
29 transition-delay:0.15s;
30 }
31 .accordion li:first-of-type{
32 -moz-border-radius:10px 0 0 10px;
33 -webkit-border-radius:10px 0 0 10px;
34 -o-border-radius:10px 0 0 10px;
35 border-radius:10px 0 0 10px;
36 } 37 .accordion li:last-of-type{ 38 -moz-border-radius:0 10px 10px 0; 39 -webkit-border-radius:0 10px 10px 0; 40 -o-border-radius:0 10px 10px 0; 41 border-radius:0 10px 10px 0; 42 } 43 .accordion div{ 44 padding:10px; 45 } 46 .accordion:hover li{ 47 width:10%; 48 } 49 .accordion li:hover{ 50 width:60%; 51 } 52 .slide-01 { background:red; color:white; } 53 .slide-02 { background:orange; color:white; } 54 .slide-03 { background:yellow; color:#333; text-shadow:none; } 55 .slide-04 { background:green; color:white; } 56 .slide-05 { background:blue; color:white; } Посмотреть можно здесь: [ссылки видны только авторизованным пользователям]

Как сделать меню с отображением выбранного активного пукнта? Дивами без всяких ул /ли
Только на каждой странице придется классы прописывать для выбранного пункта.

<div id="menu"><a class="amenu" href="index.html"><div id="activpage">Главная
</div></a>
<a class="bmenu" href="index1.html"><div id="noneactivpage">Учебный центр
</div></a>
<a class="bmenu" href="#"><div id="noneactivpage">Услуги
</div></a>
<a class="bmenu" href="#"><div id="noneactivpage">Законодател ьство
</div></a>
<a class="bmenu" href="#"><div id="noneactivpage">Новости
</div></a>
<a class="bmenu" href="#"><div id="noneactivpage">Контакты
</div></a>
</div>

Цсс

#menu {
background-image: url([ссылки видны только авторизованным пользователям]);
background-repeat: repeat-x;
height: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
}

#activpage {
float: left;
height: 33px;
margin-left: 10px;
margin-right: 10px;
padding-top: 17px;
padding-left: 10px;
padding-right: 10px;
background-image: url([ссылки видны только авторизованным пользователям]);
background-repeat: repeat-x;
}

a.amenu {
text-decoration: none;
color: #ffffff;
}

#noneactivpage {
float: left;
height: 33px;
margin-left: 10px;
margin-right: 10px;
padding-top: 17px;
padding-left: 10px;
padding-right: 10px;
}

#noneactivpage:hover {
height: 33px;
margin-left: 10px;
margin-right: 10px;
padding-top: 17px;
padding-left: 10px;
padding-right: 10px;
background-image: url([ссылки видны только авторизованным пользователям]);
background-repeat: repeat-x;
}

a.bmenu {
text-decoration: none;
color: #ffffff;
}

a.bmenu:hover {
background-color: #053A78;
color: #ffffff;
}