Оцените мою верстку

[DasBit]

Доброго времени суток господа гуру-верстальщики и новички! Сегодня наверное часа за 3 завершил трейнинг-верстку, до которой руки оч. долго не доходили (Не играйте в MMORPG - пагубно влияет на работоспособность). Макетик брал тут, 1-е задание. По заданию там сделать по Мазилу, но у меня норм отображается как в Мазилле, так и в Опере, Хроме, Сафари (в IE смотреть не стоит). Т.е. с заданием как бы справился) Некоторые эллементы я опустил, например как белые треугольнички под ссылками в менюшке (лень было возиться с спрайтами), так и правый нижний блок, сделал сплошной картинкой (просто было влом). В остальном смотрите, оценивайте, немного ругайте

Тыц!

Edited February 13, 2012 by DasBit

[leto2012]

Доброго времени суток господа гуру-верстальщики и новички! Сегодня наверное часа за 3 завершил трейнинг-верстку, до которой руки оч. долго не доходили (Не играйте в MMORPG - пагубно влияет на работоспособность). Макетик брал тут, 1-е задание. По заданию там сделать по Мазилу, но у меня норм отображается как в Мазилле, так и в Опере, Хроме, Сафари (в IE смотреть не стоит). Т.е. с заданием как бы справился) Некоторые эллементы я опустил, например как белые треугольнички под ссылками в менюшке (лень было возиться с спрайтами), так и правый нижний блок, сделал сплошной картинкой (просто было влом). В остальном смотрите, оценивайте, немного ругайте

Тыц!

Здравствуйте, я тоже делаю этот макет,хотелось бы чтобы Вы посмотрели мою работу и подсказали мне. Как вы сделали тексты мне очень понравилось.

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

Растение в земле должно быть на половину на черном фоне. я его вырезала из макета с помощью Slice и сохранила в .png.

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

Edited February 13, 2012 by leto2012

[klierik]

1. Зачем в верстке так много ID? Для чего ID был создан, по спецификации?

2.

<div id="Pellentesque">
						<h1>Pellentesque vestibulum erat.</h1><br>
						<font>
							Duis nisl. Cras a quam non leo placerat lacinia. Proin in nulla. Sed a ligula at<br>
							quam vulputate auctor. Vivamus mi lacus, feugiat eget, parta ut, fermentum<br>
							nec, nisi. Maecenas vel orci eu nunc accumsan scelerisque. Class aptent taciti<br>
							sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis<br>
							luctus sapien eu leo. Etiam hendrerit leo eu metus. Morbi sagittis. Nulla lacinua<br>
							justo quis lorem.
						</font>
					</div>

тег <br> в даннм случае использовать не целесообразно, ибо есть margin. тег <font> устарел морально, используй <p>

3.

<div id="Q">

Предположим что ты сверстал правильно - на классах, а не на ID. Во-первых, с этого "Q" - ничего не понятно, а код должен быть читабельным для другого разработчика. Ты не единственный. И не используй Заглавных букв в именах классов, так как CSS - регистрозависим.

4.

<div id="Nullam">
					<h1>Nullam vitae leo vel pede sollicitudin suscipit.</h3><br />
					<font>
						Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In<br />
						feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean vivierra consectetur  neque. Aliquam blandit<br />
						bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae purus ac odio fringilla pulvinar. Quisque consecte-<br />
						tur, uma sit amet fringilla tempus, neque consequat eros, ac dignissim quam elit vel turpis. Donec sollicitudin<br />
						mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.
					</font>
				</div>

				<div id="Nullam2">
					<h1>Nullam vitae leo vel pede sollicitudin suscipit.</h3><br />
					<font>
						Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In<br />
						feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean vivierra consectetur  neque. Aliquam blandit<br />
						bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae purus ac odio fringilla pulvinar. Quisque consecte-<br />
						tur, uma sit amet fringilla tempus, neque consequat eros, ac dignissim quam elit vel turpis. Donec sollicitudin<br />
						mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.
					</font>
				</div>

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

5. А что ето за прокол

http://tmpviewer.16mb.com/img/blk.png

6.

<a href="#"><img src="img/read_more.gif" alt="Read More"></a>

порезал не правильно, надо было в ПНГ сделать по-человечески. А вообще -то тут картики то и быть не должно вовсе, так ак завтра заказчик переведет сайт на Голландский, и что ему делать? Нарезать новые картинки?

незачет.

Edited February 13, 2012 by klierik

[DasBit]

1. Эмм, эпределения именно не знаю. Но к с ID очень удобно работать при JavaScript разработке, про php не знаю, но наверное так же)

2. Вот чего общего у <br> и margin не вьеду Оо

3. Я знаю что должен быть код читабельным и css регистрозависим. Я просто не придавал названиям значения, т.к. макет лишь для тренировки)

4. Я в курсе что ID можно использовать 1 раз. Назания тут разные))

5. Я писал об этом, влом просто было)

6. Тут тоже просто лень было заморачиваться)

[ablay2009]

1)у вас тут есть необходимость использовать Javascript?

2)вместо использования br, нужно использовать margin, чтобы не захламлять код(и вообще br предназначен для переведения строки)

3)какая же это тогда тренировка? Нужно делать все так, как будто это настоящий проект, иначе не имеет смысла тренироваться

4)нужно использовать классы(всего один), а не плодить id по всей странице

5)см. Пункт 3

6)см. Пункт 3

[klierik]

3. Я знаю что должен быть код читабельным и css регистрозависим. Я просто не придавал названиям значения, т.к. макет лишь для тренировки)

5. Я писал об этом, влом просто было)

6. Тут тоже просто лень было заморачиваться)

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

В остальном товарища ablay2009 дополнить нечем.

[DasBit]

1)у вас тут есть необходимость использовать Javascript?

Нет, классами мне не так удобно

2)вместо использования br, нужно использовать margin, чтобы не захламлять код(и вообще br предназначен для переведения строки)

Я вообще то и делал перевод строки при помощи <br>

3)какая же это тогда тренировка? Нужно делать все так, как будто это настоящий проект, иначе не имеет смысла тренироваться

Согласен, просто уже хотел спать)

4)нужно использовать классы(всего один), а не плодить id по всей странице

И как мне тогда настраивать каждый элемент отдельно если юзать классы? Только если в тегах дописывать style, но так как то не смотриться)

[buddah]

DasBit, бросай это дело, ты не хочешь учиться верстке.

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

Edited February 13, 2012 by buddah

[DasBit]

бросай это дело

Не брошу)

ты не хочешь учиться верстке

Хочу!

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

Да я для себя просто учусь)

P.S. В репу - не забудьте поставить

Edited February 13, 2012 by DasBit

[Vin]

Макетик брал тут, 1-е задание.

Этот макет не пробовал, для меня он слишком примитивен, но вообще, макеты оттуда хреново подходят для тренировки новичков в вёрстке: нестандартные, часто платные шрифты; которым трудно найти замену без порчи дизайна; градиенты, какие вроде-бы надо делать на всю страницу.

Ох, сайдбар одной картинкой

Вот хороший макет для вёрстки: скачать.

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

[klierik]

1.

Нет, классами мне не так удобно

Тут дело не в удобно а в том как правильно! и чего это неудобного в записи .className вместо #id?

2.

Я вообще то и делал перевод строки при помощи <br>

С очень большое вероятностью надо будет переделывать, так как удобнее в CMS набить Заголовок и Контент отдельно. А в разметке это будет выводится соответствующими переменными.

Ну а там где будет сполшной текст, абзацы, прочее, там визивиг сам раставит <br /> где надо.

3.

Согласен, просто уже хотел спать)

В следующий раз не спеши выкладывать не законченую работу. Утром лучше доделать. Думаешь у нас море времени и нечем занятся кроме как рассказывать новичкам об их ошибках?

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

4.

И как мне тогда настраивать каждый элемент отдельно если юзать классы? Только если в тегах дописывать style, но так как то не смотриться)

Ах вот оно что, получается ты не знаешь что такое .class. Ознакомься, пожалуйста, с этой статьёй: http://htmlbook.ru/samcss/klassy

PS: указывая на твои ошибки нам совершенно всё равно по каким причинам ты их сделал. нам так же не нужны оправдания и противоречия нашим словам. помогая тебе в вёрстке мы ответы берем не с потолка и кровного опыта. мы так же когда-то делали их.

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

PSS: врятли кто-то на форуме тебе будет подсказывать как делать не правильно. а вот если ты будешь игнорировать наши рекомендации, то и помогать тебе смысла не будет.

[DasBit]

Я знаю что такое классы. Классы от id отличаются лишь тем, что класс с одним именем может применяться несколько раз, а id это уникальное имя элемента используемое лишь 1 раз на страницу. И я не игнорирую ваши советы, я лишь хочу понять что измениться если я просто в коде id сменю на class? Насчет <br> понял, просто нужно было бы указать размеры блока, и перенос станет автоматическим. Надо же, и не догадался сразу

З.Ы. Нашел сам косяк, при смене разрешения получается

[klierik]

различие между классами и идендификаторами в том что ID - придумал для использования яваскриптом, а классы для описания стилей селекторов.

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

А вот классы придуманы как раз для того что бы упрастить и оптимизировать работу со стилями страниц.

[DasBit]

различие между классами и идендификаторами в том что ID - придумал для использования яваскриптом, а классы для описания стилей селекторов.

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

А вот классы придуманы как раз для того что бы упростить и оптимизировать работу со стилями страниц.

Вообще это я и так знал, кроме как:

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

Вот, простое я понятное объяснение почему именно class а не id)