Zverushka

Он имеет встраиваемый поиск на сайте через гугл...

А что готовый дизайн на юкозе не выбрать? тысячи их же.

Шикарный сайт! Спасибо большое! Сейчас ее читаю!

Мне тоже мысль о тире была сугубо неприятна, но вот после прочтения этого http://google-styleg...tmlcssguide.xml отношусь по-другому ... Ну когда вы пишите предложения: вы же ставите пробелы после двоеточий, запятых итп. Чем код хуже?) Тем более в коде есть и другие знаки препинания, например - запятые, после них пробелы идут, а тут раз и нету. Непорядок-с.

Создаете репозиторий с именем name.github.io, пушите туда свои статические файлы. Можно привязать домен, добавив файл CNAME, в котором напишите домен который хотите прикрутить. И в админке домена CNAME запись на name.github.io Вот мой А какую папку надо создать на своем компьютере, чтобы из нее обновлять репозиторий?

Подскажите, а как использовать гитхаб как хостинг? Он предоставляет такие услуги? Или можно просмотреть свои страницы в специальном режиме там?

Да я тоже как раз эту книгу читала. Я это поняла в том плане, что хедер может быть у статьи, у секции, у страницы - несколько на странице. Но вот теперь не могу найти информации, что не может быть 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 заголовков, но тут я наткнулась на статью, в которой эта техника подвергается критике - поправьте - как же быть? !--[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] - то есть получаем наше скрытое поле. И лишь затем достаем из него значение.

т.е. теперь ты верстаешь на таблицах? ну по тексту получается, что да. А на деле все наоборот

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