Для того чтобы научиться правильно верстать нужно запомнить несколько простых правил:
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 отдельная темя для разговора, хоть и делов на пять минут
, что-то типо такого
