Оцените верстку

Sibarit · July 11, 2013

http://pstyga.pusku.com сверстал 5 страниц из PSD-макета http://fasttut.com/d...jtov-besplatno/ (второй сверху).

Из html5 использовал только доктайп, верстал обычными div. Оцените пожалуйста качество верстки, какие недочеты, на что обратить внимание, что желательно исправить. Это моя первая крупная верстка, до этого верстал отдельные части различных psd-макетов.

npofopr · July 12, 2013

Как то уже не интересно смотреть на такие однотипные сайты, можно вполне скачать готовый в интернете и сравнить верстку.

В целом... не нравится обилие id'шников, хотя это конечно не принципиально.

Еще, если указать для #footer_top, например, margin: 0 0 100px; то оно не сработает. В шапке есть еще один такой блок.

Ну и если вы пишете класс slider, то было бы не плохо заставить его работать.

Sibarit · July 13, 2013

Почему же однотипные?! На каких же "неоднотипных" сайтах нужно учиться?

Еще, если указать для #footer_top, например, margin: 0 0 100px; то оно не сработает.

Не совсем понял о чем Вы, если не сложно, подробнее пожалуйста...

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

npofopr · July 14, 2013

Найдите блок #footer_top да попробуйте указать margin, и посмотрите как он сработает. Всё сразу понятно будет.

Как договоритесь с заказчиком. Могут и программисты прикрутить, а может и заказчик найти более квалифицированного верстальщика

saiidr · July 14, 2013

Почему же однотипные?! На каких же "неоднотипных" сайтах нужно учиться?
Еще, если указать для #footer_top, например, margin: 0 0 100px; то оно не сработает.
Не совсем понял о чем Вы, если не сложно, подробнее пожалуйста...
Со слайдером - да, пока не имею знаний его реализовать...((( А скажите, устанавливать слайдеры на сайт входит в обязанность верстальщика или бывает такое, что программисты потом заставляют слайдер работать?

Можешь попробовать в паблике найти или изучать js. =)

Что касается,сайта (хотя моё мнение,что оценивать не чего),ну вроде всё нормально,дизайн,ну ладно не твой.. Если ты этот делал для разминки,то нормально,а если на заказ (то дизайн,так себе).

http://pstyga.pusku.com сверстал 5 страниц из PSD-макета http://fasttut.com/d...jtov-besplatno/ (второй сверху).
Из html5 использовал только доктайп, верстал обычными div. Оцените пожалуйста качество верстки, какие недочеты, на что обратить внимание, что желательно исправить. Это моя первая крупная верстка, до этого верстал отдельные части различных psd-макетов.

Где ещё 4 ?

http://pstyga.pusku.com сверстал 5 страниц из PSD-макета http://fasttut.com/d...jtov-besplatno/ (второй сверху).
Из html5 использовал только доктайп, верстал обычными div. Оцените пожалуйста качество верстки, какие недочеты, на что обратить внимание, что желательно исправить. Это моя первая крупная верстка, до этого верстал отдельные части различных psd-макетов.

Зашёл посмотрел,что то там этого макета.

Edited July 14, 2013 by saiidr

cris7iano · July 14, 2013

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

Скачай слайдеры,там в файлах есть демо,там и посмотришь,что да и как

swandev · July 15, 2013

Почему же однотипные?! На каких же "неоднотипных" сайтах нужно учиться?
Еще, если указать для #footer_top, например, margin: 0 0 100px; то оно не сработает.
Не совсем понял о чем Вы, если не сложно, подробнее пожалуйста...
Со слайдером - да, пока не имею знаний его реализовать...((( А скажите, устанавливать слайдеры на сайт входит в обязанность верстальщика или бывает такое, что программисты потом заставляют слайдер работать?

не обязательно знать js

слайдер вполне можно сделать и средствами css. Я например так и делаю, так как Js еще не начинал учить.

Sibarit · July 16, 2013

не обязательно знать js
слайдер вполне можно сделать и средствами css. Я например так и делаю, так как Js еще не начинал учить.

И точно! Спасибо, попробую сделать слайдер средствамии css3. js начинал учить но бросил, хочу научиться пока просто хорошо верстать макеты.

http://pstyga.pusku.com сверстал 5 страниц из PSD-макета http://fasttut.com/d...jtov-besplatno/ (второй сверху).
Из html5 использовал только доктайп, верстал обычными div. Оцените пожалуйста качество верстки, какие недочеты, на что обратить внимание, что желательно исправить. Это моя первая крупная верстка, до этого верстал отдельные части различных psd-макетов.

Где ещё 4 ?

Зашёл посмотрел,что то там этого макета.

Все, теперь нормально, это я с FileZilla замудрил))))

Найдите блок #footer_top да попробуйте указать margin, и посмотрите как он сработает. Всё сразу понятно будет.
Как договоритесь с заказчиком. Могут и программисты прикрутить, а может и заказчик найти более квалифицированного верстальщика

Блин, снова не понял(((( Эти свойства не прописаны, но если их прописать - они не сработают, о чем это говорит? Что я изначально footer сверстал неправильно? Или что-то другое?

npofopr · July 16, 2013

И точно! Спасибо, попробую сделать слайдер средствамии css3. js начинал учить но бросил, хочу научиться пока просто хорошо верстать макеты.

о да, а когда заказчик попросит вас сделать, чтобы ваш css3 работал в IE7-IE9, вы впадете в ступор? :-)

Блин, снова не понял(((( Эти свойства не прописаны, но если их прописать - они не сработают, о чем это говорит? Что я изначально footer сверстал неправильно? Или что-то другое?

а если задать overflow:hidden; то всё сработает. Магия :-) Но я пока не знаю, что вам посоветовать прочитать на эту тему (

Zverushka · July 16, 2013

Не надо самому делать слайдер - просто берешь и прикручиваешь готовый, указывая какие слои нужно слайдить $("#slider").slides(); В таком духе будет выглядеть файл скрипта, ну и разве что еще там будут прописаны какие-то параметры, которые вы впишите по образцу из документации конкретного слайдера.

Sibarit · July 16, 2013

Не надо самому делать слайдер - просто берешь и прикручиваешь готовый, указывая какие слои нужно слайдить $("#slider").slides(); В таком духе будет выглядеть файл скрипта, ну и разве что еще там будут прописаны какие-то параметры, которые вы впишите по образцу из документации конкретного слайдера.

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

Zverushka · July 16, 2013

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


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

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

Edited July 16, 2013 by Zverushka

swandev · July 17, 2013

И точно! Спасибо, попробую сделать слайдер средствамии css3. js начинал учить но бросил, хочу научиться пока просто хорошо верстать макеты.
о да, а когда заказчик попросит вас сделать, чтобы ваш css3 работал в IE7-IE9, вы впадете в ступор? :-)

Это ведь временный выход) А для других случаев можно и прикрутить Js скрипт

Sibarit · July 17, 2013

В код не надо лезть совсем, просто у конкретного слайдера должны быть настраиваемые параметры, вроде скорости анимации, ты пропишешь типа
$(function(){
$('.slider').slides({
preload: true, /* загрузка картинок до показа слайдера */
play: 5000,
pause: 2500, /* задержка */
slideSpeed: 600, /* это скорость слайдера */
hoverPause: true
});
});
Для этого никаких знаний не требуется! Говорю же, все по образцу. Я вот целую книжку по jQuery прочитала (чтобы слайдеры прикручивать, а оказалось - качаешь и прописываешь параметры и все =), но ни за что не полезу в код чужого слайдера). В коде нужно разбираться, чтобы свой слайдер сделать.

Спасибо огромное Вам! Все проясняется. (я тоже книгу приобрел по jQuery, пролистал и подумал, что рано пока, еще довольно много пробелов в html и css)

Но вот вопрос: вбиваю в гугл "скачать плагин jQuery слайдер" - качаю вот <a href="http://kotweb.ru/38-101-slayder-i-slaydshou-dlya-sayta-na-jquery-css-shikarno-prosto-shikarno.html">тут</a>, но как его прикрутить - все равно не понимаю, сами скрипты могу подключить, но настройка вызывает проблемы... Пример вашего кода подходит к любому плагину? Если не трудно, посоветуйте какой-нибудь рускоязычный ресурс, где не понятно и подробно все описано

Zverushka · July 17, 2013

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

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; }

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

Edited July 17, 2013 by Zverushka

Sibarit · July 17, 2013

Открываю вышу ссылку, захожу на демо первого же слайдера:
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; }
Руководств по слайдерам не знаю, я так наощупь прикручивала). Ну и у каждого слайдера свой "код активации", они не универсальны.

Все! :boast: Слайдер фунциклирует))) Разобрался! И правда не сложно оказалось... Огромное Вам спасибо за подробное объяснение!

Могут и программисты прикрутить, а может и заказчик найти более квалифицированного верстальщика

Теперь я более квалифицированный верстальщик)))

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

Zverushka, оцените, пожалуйста, качество верстки http://pstyga.pusku.com, Вы очень доступно и доходчиво объясняете

Zverushka · July 17, 2013

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

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

* {

margin:0;

padding:0;

}

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

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

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

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

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

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

Sibarit · July 19, 2013

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

Ну я только начал изучать html5, с новыми элементами возникают проблемы в их семантическом применении, поэтому и горожу все div-ами...

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

Спасибо за совет, уже скачал фреймворки типа reset.css, буду применять.

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

А для чего нужны пробелы после двоеточий? Как то влияет на быстродействие? Да и валидатор не ругался...

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

Тоже начал переучиваться от подчеркивания. Спасибо огромное Вам еще раз!)

npofopr · July 19, 2013

Ну я только начал изучать html5, с новыми элементами возникают проблемы в их семантическом применении, поэтому и горожу все div-ами...

Забудьте вы уже про эти 1,2,3,4,5. Есть html. Всё. Нет отныне цифр.

Спасибо за совет, уже скачал фреймворки типа reset.css, буду применять.

Посмотрите еще в сторону normalize.css

А для чего нужны пробелы после двоеточий? Как то влияет на быстродействие? Да и валидатор не ругался...

Ерунда какая то. После двоеточия ставить пробелы? Ну хотите ставьте :-)

Тоже начал переучиваться от подчеркивания. Спасибо огромное Вам еще раз!)

Тоже бред. Подчеркивание зато хорошо выделять двойным кликом мыши (и не надо мне говорить, что здесь все мастера клавиатуры и мышь в руки не берете). Яндекс дак вроде наоборот подчеркивание использует. Вообще тире или подчеркивание надо использовать исходя в какой вы команде работаете, а вы пока что учитесь. Вам вообще можно и без того и другого обойтись.

Zverushka · July 19, 2013

Мне тоже мысль о тире была сугубо неприятна, но вот после прочтения этого http://google-styleg...tmlcssguide.xml отношусь по-другому ...

Ерунда какая то. После двоеточия ставить пробелы? Ну хотите ставьте :-)

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

Edited July 19, 2013 by Zverushka

Sign In

Оцените верстку

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information