Zverushka

Кстати насчет хедеров они пишут, что нормальное явление если он не один на странице.

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

Странно, вроде IE9 поддерживает новые теги?

Надо заново сайт делать. И никому не показывать до новой версии... Там еще глюки с фоном ужасные - на моем разрешении фон куском прилеплен и видны резкие границы перехода от картинки к цвета заднего фона у body.

Я не профи, но выскажу несколько мыслей. Они могут быть ошибочными. Если так - поправьте.

Ну то, что макет на несколько пикселей не совпадает с версткой - это ладно.

Почему 2 хедела в теле боди? Один хедер, один футер.

Section class="banner" - неверно. Это div - тут нет контента, просто слайдер. Секция - это прежде всего области какой-то статьи или сайта, в которых можно выделить (обычно) заголовок, футер, ну и сам контент. Секция это прежде всего семантический тег. Если содержимое не пойми какое - это div - просто обертка со стилем.

Section - content также неверно по этой же причине, это все div.

<article class="news"> - вот здесь склоняюсь как раз к section, но могу ошибаться.

В итоге вышла такая вот структура документа http://gsnedders.htm...esta/index.html

<br class="clear"> вот это очень плохо, это уже не семантическая верстка, а добавление элемента внешнего оформления. Тут overflow, либо псевдоклассы clearfix.

Также в одной из книг по хтмл5 советуют каждый article и section начинать с h1 заголовков, но тут я наткнулась на статью, в которой эта техника подвергается критике - поправьте - как же быть?

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

!--[if lt IE 10]> разве тут должен быть не ie 9?

type="http://ajax.googleap...n.js"></script> лучше воткнуть перед /body

<b> кажется уже нецелесообразно использовать для семантики документа, может быть попробовать em или strong - могу ошибаться. прокомментируйте.

<br/> - закрытие тега в хтмл5 излишне. Хорошо бы всем картинкам добавить атрибуты height и width;

Если в чем-то заблуждаюсь, более опытные верстальщики поправьте пожалуйста).

Спасибо большое - так и сделаю! Я просто растерялась. А так - это бесплатный шаблон.

Не подскажете заодно слайдер для такой карусельки?

вот здесь можно глянуть без скачивания

http://www.graphicsfuel.com/2011/03/wordpress-business-website-psd-template/

Да, что-то я туплю-с..

Один раз у меня был случай, что я как-то запорола php сайт (уже не помню как), который неделю делала. У меня был стресс, но стояла какая-то программа, которая сохранила кучу скрытых файлов разных версий этого файла и я просто восстановила один из них...

Там получается одна картинка нормального размера, одна маленького и нужны как минимум 3 картинки нормального размера для прокрутки, что же прокручивать, если их нет?

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

http://www.graphicsfuel.com/wp-content/uploads/2011/03/wpbusiness-psdtemplate.zip

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

Включаю pixelPerfect и сравниваю верстку с макетом - ни один блок не совпадает с макетом, даже лого стоит не с теми отступами ).

Каждый верстальщик должен знать где сидит фазан, уметь работать с системами контроля версий. Одна из них - Гитхаб.

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

Какой программой воспользоваться, которая будет сама автоматически следить за папкой и сохранять все версии файла после сохранения?

Да я такой же новичок, ну по верстке мысли такие - скрипты(любые) втыкать перед закрытием body.

Если используется html5, то почему не используются теги header, footer, article - их поддерживают даже старые браузеры, если вставить специальный скрипт, который делает существующими эти элементы для браузеров.

* {

margin:0;

padding:0;

}

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

Неаккуратная верстка - после двоеточий в стилях нет пробела, да и табулирование вложенных классов я бы убрала - оно только сбивает с толку.

В названии классов гугл рекомендует использовать тире, вместо подчеркивания (сама сейчас буду переучиваться на этот стиль).

Еще надо бы скачать псд шаблон и посмотреть как обстоят дела с попиксельной версткой, но тот сайт с шаблоном уже не доступен.

Огромное Вам спасибо за подробное объяснение!

Пожалуйста).

Открываю вышу ссылку, захожу на демо первого же слайдера:

http://efimov.ws/ass...t_kit/demo.html

Открываю его исходный код

<div id="featured">
<img src="link.jpg" alt="Link" />
<a href="http://www.zurb.com/playground" target="_blank"><img src="ezio.jpg" alt="Ezio" rel="ezioCaption" /></a>
<img src="masterchief.jpg" alt="Master Chief" />
<img src="marcusfenix.jpg" alt="Marcus Fenix" rel="marcusCaption" />
</div>

Что мы видим - просто 4 картинки в теге <div id="featured">. Одна из картинок обрамлена ссылкой. Все эти 4 картинки прокручиваются в слайдере.

А вот и код активации самого слайдера:

<script type="text/javascript">
$(window).load(function() {
	 $('#featured').orbit({
		 'bullets': true,
		 'timer' : true,
		 'animation' : 'horizontal-slide'
	 });
});
</script>

Мы видим в нем те параметры, которые указали в примере. Дальше я открываю js файл самого слайдера и тут же натыкаюсь на значения по умолчанию и их варианты:

	 var defaults = {
		 animation: 'fade', //fade, horizontal-slide, vertical-slide
		 animationSpeed: 800, //how fast animtions are
		 advanceSpeed: 4000, //if auto advance is enabled, time between transitions
		 startClockonmouseout: true, //if clock should start on MouseOut
		 startClockonmouseoutAfter: 3000, //how long after mouseout timer should start again
		 directionalNav: true, //manual advancing directional navs
		 captions: true, //do you want captions?
		 captionAnimationSpeed: 800, //if so how quickly should they animate in
		 timer: false, //true or false to have the timer
		 bullets: false //true or false to activate the bullet navigation
		 };

То есть, если хотим, переписываем код активации с нужными значениями, которые мы хотим видеть. В коде выше все их варианты перечислены, просто выбираем, что нам подходит. Например, такие

<script type="text/javascript">
$(window).load(function() {
	 $('#featured').orbit({
		 'captions': false,
		 'bullets' : true;
	 });
});
</script>

Дальше в архиве со слайдером лежит файл стилей orbit.css - в нем записаны все стили для стрелок и других объектов. Если нам нужно - переопределяем их на свои

/* DIRECTIONAL NAV */
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span { width: 33px; height: 33px; text-indent: -9999px; position: absolute; z-index: 1000; top: 43%; cursor: pointer; }
div.slider-nav span.right { background: url('orbit/right-arrow.png'); right: 10px; }
div.slider-nav span.left { background: url('orbit/left-arrow.png'); left: 10px; }
/* BULLET NAV */
.orbit-bullets { position: absolute; z-index: 1000; list-style: none; top: 10px; left: 7px; margin: 0; padding: 0; }
.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(orbit/bullets.png) no-repeat; 0 0; width: 7px; height: 7px; overflow: hidden; }
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Руководств по слайдерам не знаю, я так наощупь прикручивала). Ну и у каждого слайдера свой "код активации", они не универсальны.

Да я про то и говорю, что блочная верстка - это хорошо, а табличная - ужас-ужас! У меня 10 лет назад был сайт о себе в табличках).

Одинаковую высоту колонок можно сделать и без таблиц.

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

Про табличную верстку я имела в виду все тоже самое, но не в таблице, а в div. Хотя я не вижу полный код, может тут и таблица нужна, так что не обращайте на этот совет внимания.

А скрипт очень простой, думаю прежде всего смутила строка:

var num = $(this).parent().prev().children().children("[type=hidden]").val();

В ней мы перемещаемся по дереву DOM из текущего элемента, которым является кнопка к скрытому инпуту с помощью jquery. Сначала идем к родителю (<td>), потом к элементу, что находится левее(.prev()) него в дереве - рядом лежащий <td>, дальше мы получаем потомки этого элемента через children (<form>) и в ней мы опять получаем потомка со значением [type=hidden] - то есть получаем наше скрытое поле. И лишь затем достаем из него значение.

Я до него вообще не знала, что такое блочная верстка, а после - забыла о ней, как о страшном сне.

т.е. теперь ты верстаешь на таблицах?

Качайте книгу Мержевич - верстка веб-страниц.

И не по теме: каккой редактор лучше?

Sublime text 2.

Навигация наверное все же вертикальная...

Внешний div - дать ему фиксированную высоту и все. div { height: 200px;} например. Или я не понимаю вопроса.

Кстати htmlbook не учит верстать на таблицах! Я до него вообще не знала, что такое блочная верстка, а после - забыла о ней, как о страшном сне.

В код не надо лезть совсем, просто у конкретного слайдера должны быть настраиваемые параметры, вроде скорости анимации, ты пропишешь типа

$(function(){
$('.slider').slides({
preload: true, /* загрузка картинок до показа слайдера */
play: 5000,
pause: 2500, /* задержка */
slideSpeed: 600, /* это скорость слайдера */
hoverPause: true 
});
});

Для этого никаких знаний не требуется! Говорю же, все по образцу. Я вот целую книжку по jQuery прочитала (чтобы слайдеры прикручивать, а оказалось - качаешь и прописываешь параметры и все =), но ни за что не полезу в код чужого слайдера). В коде нужно разбираться, чтобы свой слайдер сделать.