Для того чтобы научиться правильно верстать нужно запомнить несколько простых правил:

1. выбрать тип документа и следовать его спецификации.

2. определится с основыным типом верстки (это не значит что запрещено использовать таблицы, там где их использование целесообразно).
Если каркас сайта имеет фиксированную ширину,то целесообразно использовать блочную версту, если же планируется масштабирование, то - смешанную.

3. Минимальное количество запосов к серверу:
CSS должны быть вынесены в отдельные файлы и объеденены в один, причем неиспользуемые стили желательно подключать только на тех страницах где они будут задействованы.
Стили для IE выносятся в отдельный файл и подключаются через условные комментарии.
Примечание: если важны корректные пути при сохранении страницы, то используйте тег BASE

4. Графика.
Максимльное использование спрайтов. Все изображения нужно делить по группам.

Если есть изображения которые повторяются на большинстве страниц, то есть смысл объеденить их в один файл, это позволит нам сократить количество запросов к серверу, а сами изображения закешировать.

Важно: К примеру если у вас уголки для каркаса используются на всех страницах, то не нужно к ним добавлять изображения, которые размещены на редкопосещаемых страницах.

Также стоит отметить какое расширение стоит выбрать:
Если есть возможность убрать у изображения лишний фон, то делайте это (для форматов поддерживающих прозрачность).

- для маленьких пикторгамм используйте GIF.
- для средних изображений используйте PNG-8
- для изображений больших размеров JPG.
- для изображений где нужен альфа-канал - PNG-24.

Во всех форматах кроме PNG-24 можно выбирать еще качество, но будьте осторожны.

PNG-24 - использовать только там где он действительно необходим, т.е. где нужна 256 палитра цветов и альфа-канал (причем если есть возмность заменить его фоном - заменяйте), во всех других случаях лучше спользовать фарматы с индексированной палитрой цветов.
Для работы с этим форматом рекомендую прочитать:
http://www.artzstudio.com/2008/07/pn...-clear-winner/
http://www.artlebedev.ru/tools/technogrette/img/png-4/

Инструменты:

- текстовый редактор (я использую Notepad++);
- графический редактор (я использую Photoshop CS5);
- firebug;
- PNGout (если используете редакторы не поддерживаюшие редактирование метаданных);
- голова и руки;

IE6:
- CSS выносится в отдедельные файлы и подключатся только для требуемых версий.
- PNG-24 либо альфаканал заливается фоном, либо используем небольшой скрипт:

<script type="text/javascript">
function fixPNG(element) {
	if(/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
		var src;
		if(element.tagName=='IMG') {
			if(/\.png$/.test(element.src)) {
				src = element.src;
				element.src = '/blank.gif'; //однопиксельная GIF-картинка
			}
		}
	else {
		src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
			if(src) {
				src = src[1];
				element.runtimeStyle.backgroundImage="none";
			}
		}
		if(src) {
			element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
		}
	}
}
</script>

<style type="text/css">
img {
	filter: expression(fixPNG(this));
	position: relarive;
}
</style>

- правильная верстка в IE6 отдельная темя для разговора, хоть и делов на пять минут

Да хоть тот же Paint.NET, он бесплатен...
Т.к. х/з как у тебя с деньгами и освоением сложного ПО...

это конечно лучше чем по дефолту, но с фотошопом рядом не стоял
типа обязательно покупать?)))
это же не Mathcad))

итого, monolithed, ты написал про оптимизацию, а не про верстку, как просил mycoding (мне так кажется, по-крайней мере)

monolithed, а что у тебя там за стили такие для ie, которые в отдельный файл надо выносить?

Есть такое, это я вообще ему в ЛС писал, а потом решил, что путь другие почитают, может будет толк и другим...
На самом деле, на понимание всех особенностей верстки уходят годы, поэтому тут опыт нужен. А в остальном разбирать нужно на хорошем примере и набивать руку...

в ЛС выслал остальной материал...

Ну как :), что-то типо такого

<!--[if lt IE 8]> 
<style type="text/css" media="all">
   @import url('files/msie.css');
</style>
<![endif]-->

я про содержимое msie.css. У меня как-то без хаков получается делать

Таки я их рядом и не ставлю... :D

как правило не больше 5-10 строк.
для IE7 и выше безусловно, но для IE6 в это сложно поверить особенно на больших проектах.

по-крайней мере мне ничего такого не вспоминается. Можешь приведи какой-нибудь реальный пример, который нельзя сделать без хаков?

я не являюсь сторонником применения хаков (но без них даже сами мелокомягкие не справляются, причем они уже давно отказались от поддержки IE6).
Сходу пример привести не могу, но по памяти могу сказать, что бывают различия в размерах элеметов, отступов (особенно в формах это наблюдается). Есть также нюансы с позиционироаванием, использованием а в качестве едениц измерения процентов, с таблицами есть косяки.

Если интересны баги,то основные описаны тут: http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/