По поводу графики:
Слишком много ты используешь PNG.
Вот тебе совет какие форматы и когда лучше использовать:
- BMP - никогда
- JPEG - для больших изображений, качеством которых можно пренебречь. При этом не выкручивать качество на 100%, хватает обычно 60-70%.
- PNG - используют если изображение маленькое, если палитра состоит из небольшого кол-ва цветов, если используется альфа маска.
- GIF - его прекрасно заменяет PNG 8bit.
Картинка курицы с закрытым глазом совершенно не нужна. Изменений почти не видно, а это целая картинка (да еще и в PNG, тут логично применить JPEG или PNG 8bit).
Все малоцветные картинки (фон, крыша, дом, короче всё) - перевести в PNG 8bit. А объекты поверх (твое туловище, курица и прочая лабуда) - сделать с прозрачным фоном и скорее всего перевести в PNG 8bit.
Спрайтировать сменные изображения и по возможности и не только.
Спрайтировать - т.е. совместить несколько картинок в одну. Так будет быстрее загружаться. Пример:
Вставлять такие можно как фон в DIV и указывать нужную позицию (css: background-position) или вставлять картинки так <div style="overflow:hidden"><img src="123.jpg" style="margin-top:-128px"></div>
По поводу кода:
1) Почему я вижу теги перед <html>?
2) До HTML обязательно вставлять тег <DOCTYPE> - подробнее почитай в инете.
3) Загрузил страницу кучей ненужных метатегов.
4) Стиль вставлять в тег BODY - верх изврата. CSS для кого?
5) Менять картинки при наведении можно не только с помощью JavaScript, можно и через CSS используя фон и событие :hover
6) Меню сверху-справа - ну это чума просто. position:absolute и z-index:1
- Из-за absolute оно у тебя и так уже поверх, а ты еще z-index пытаешься использовать.
- Каждому элементу всталять свойство - изврат. Куда проще смотрится так:
Код:
<style type="text/css">
UL.menu {float:right;clear:right;}
UL.menu LI {list-style-type:none;}
</style>
<ul class="menu">
<li><a href="index.php">Главная</a></li>
<li><a href="pupkin.php">Страница пупкина</a></li>
<li><a href="trololo.php">Очередная ссылка</a></li>
</ul>
- Не надо каждому тегу вставлять 1 и те же свойства, выноси их в CSS файл.
7) Чтобы не указывать каждой картинке внутри тега А border=0 нужно прописать в CSS:
A IMG {border:0}
Это не надо делать если следуешь следующему пункту.
8 ) Нужно "занулять" все отступы и прочее сразу для всех элементов, т.к. разные браузеры имеют разные отступы для тех или иных тегов.
В CSS прописываем:
* {margin:0;padding:0;border:0}
И если где-то нужны какие-то отступы или рамка - просто указываем их в CSS.
9) Возьми за привычку указывать все параметры в кавычках: <img src="lalala.jpg" border="0">
А так же:
1) Почему URL главной странички start.php, а не
index.php?
2) А теперь что у нас по стандартам кода:
http://validator.w3.org/check?uri=http://www.dizz.hop.ru/start.php&charset=(detect+automatically)&doctype=Inline&group=0
3) При спрайтировании никакого прелоада не нужно.