Верстка №2 Оранжевый Банк

psywalker · April 16, 2011

Ну что ж, пожалуй приступим:

1.

<h1>Первый оранжевый</h1>
<p>кредитный банк</p>
<h1><sup>(499)</sup>234-56-78</h1>

Какого хрена Заголовок первого уровня несколько раз на странице?

2. Очень много id на странице, вообще не в кассу, неоправданно и неправильно, но об этом уже говорили.

3.  - это что за чёрт? Зачем тут этот комментарий и что он означает?

4. "headrez", "linck" и т.д. Почему такие глупые названия идентификаторов или классов? Совершенно неосмысленно и плохо.

5.  - Снова в конце непонятный коммент

6. <div id="hommail"> - по идее это же маленькое, но меню, так что нужно было делать списком, а так же вот тут уже можно было задать классы для пунктов меню и повесить на них нужный фон.

7. id="Language" - чем именно этот идентификатор заслужил заглавную букву?

8. <div id="osnoval"> - зачем нужен этот лишний элемент? Это явно грязь, и она тут ни к чему. А на самом списке вообще нет метки. Плохо.

9. <table border="0" cellspacing="0" cellpadding="0"> - Что за ужасные атрибуты я вижу? Про CSS уже забыли?

10.<td class="val" - зачем ты так оскорбил ячейки? Тут же явно просится th, а не td.

11. form method="get" action="ini.php"> - Почему у формы, а так же у таблицы НЕТ меток?? Как ты к ним вообще обращаешься? А если их будет...ну например две?))

12. <div id="kreditline"> - Ну вот тут явно нужен был список или таблица на худой конец, но не слои!

13.class="line"> - У всех пунктов одинаковые классы, зачем они тогда?

14.

<h2>Кратко о банке</h2>
<p>

Почему вообще все узлы оторваны друг от друга, ведь у них же должен быть общий контейнер? Вот например вот это один целый блок:

Кратко о банке
Надежность и безупречная репутация банка подтверждается высокими рейтингами ведущих рейтинговых агенств. Агенством Fitch Raitings банку присвоен долгосрочный рейтинг дефолта в иностранной вылюте "ВВВ", агенством Moody`s Investors Service - болгострочный рейтинг депозиторов в иностранной валюте "Ваа1". Кроме того, агенство Moody`s присвоило Банку наивысший рейтинг по национальной шкале.
полная информация о банке

15. Ужасно, реально ужасно, смотри

<ul>
<li>
<a href="#">Льготная процентная ставка по кредитной линии «Отпускник»Льготная процентная ставка по кредитной линии «Отпускник»Льготная процентная ставка по кредитной линии «Отпускник»</a>

Меню БЕЗ меток совершенно, далее в ссылку кладёшь больше содержимого и чиксу накрыло

16.

id="footerl", id="footerr" - вот тут смешная ситуация. Интересно, что всё это значит?))

17.

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

18.

<div id="Language">

- Что в этом блоке делает картинка в структуре? Мало мест было, куда её фоном повесить?

А так же снова лишняя обёртка.

19.

#osnoval ul li {
    display: block;

Зачем заведомо блочные элементы делать блочными?

20.

Код ужасен, что HTML, что CSS, никакой организации, грязь, просто жуть, сколько много лишних блоков, везде одни id, неоправданные обёртки, нелепые названия идентификаторов, классов и т.д.

А так же наоборот, в местах, где нужны обёртки - их нет! Плохо!

21. CSS задействован очень необдуманно, где ненужно и нужно, и много мест, где его дико не хватает(((

==============================================================================

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

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

Оценка по 10-ой шкале: 0.1 максимум! Очень плохо!

Это ещё при том, что я бегло смотрел, а вообще там полный ППЦ!!!

СРОЧНО берись за дело!!!

Serlutin · April 16, 2011

br - это не труЪ.

Разрыв строки один из самых старых элементов. Он ведь появился ещё до того, как родились создатели HTML.

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

<p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br />
Электронная почта: <a href="#">info@hrstorange.ru</a></p>

Как вариант, список определений подходит.

LESTAD · April 16, 2011

СПС, вопрос елси я переделаю ее, то будет ли возможным еще раз просмотреть?

Разрыв строки один из самых старых элементов. Он ведь появился ещё до того, как родились создатели HTML.
Поэтому не стоит от него отказываться полностью. Правда этот элемент больше подходит для оформления текста, а не дизайна.
<p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br />
Электронная почта: <a href="#">info@hrstorange.ru</a></p>
Как вариант, список определений подходит.

я там использовал этот БР, та как не хотел лишний слой вешать, но пришлось так как там составная линия с верху, уже переделал, сделал отдельными абзацами.

Ну что ж, пожалуй приступим:
3.  - это что за чёрт? Зачем тут этот комментарий и что он означает?
5.  - Снова в конце непонятный коммент

только по одному отпишу, точнее сразу по двум, Это разметка HTML, для себя, что бы не теряться в дивах, подсмотрел в какой то книжке из разряда HTTML + CSS.

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

Но читая отзывы и разборки своей же верстки, я по вашим отзывам собиратю для себя картинку - как надо, из теории именно по CSS2 + HTML4 я прочел уже не одну книжку, + этот форум стараюсь читать и вникать.

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

Edited April 16, 2011 by LESTAD

psywalker · April 16, 2011

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

Научись извлекать уроки из прочитанного, будь то книги или форум, не важно.

LESTAD · April 16, 2011

пример, до прочтения обсуждения, и нормального понимания было так:

HTML:


<div id="Language">
      <img src="images/lrlinecer.gif" alt="" width="33" height="24" />
      <ul>    
        <li><a class="hoverlang" href="#">rus</a></li>
        <li><a href="#">eng</a></li>

        <li><a href="#">deu</a></li>
      </ul>
    </div><!--id="Language"-->

CSS:


#language {
	position:absolute;
	top:0;
	right:0;
	width:250px;
	height:24px;
	line-height:28px;
	height:89px;
	background:url(images/lincertonc.gif) bottom repeat-x;}
	#language img {
		float:left;}
	#language ul, li {
		display:inline;}	
	#language ul {
		padding-left:20px;
		padding-top:20px;}	
	#language ul li a {
		text-decoration:none;
		padding:0 7px;
		color:#ACACAC;}
	#language ul li a:hover {
		background-color:#EE4428;
		color:#fff;}
	.hoverlang {
		background-color:#EE4428;
		color:#fff !important;}

Ну и соответственно теперь :

HTML:


<ul class="language">    
      <li><a class="hoverlang" href="#">rus</a></li>
      <li><a href="#">eng</a></li>
      <li><a href="#">deu</a></li>
</ul>

CSS:


ul.language {
		position:absolute;
		top:0;
		right:0;
		padding:6px 50px 65px 40px;		
		background: url(images/lrlinecer.gif) top left no-repeat;
		border-bottom:#AEAEAE 2px solid;}

		ul.language li {
			display:inline;}

			ul.language li a {
				text-decoration:none;
				padding:0 7px;
				color:#ACACAC;}
			ul.language li a:hover {
				background-color:#EE4428;
				color:#fff;}
			.hoverlang {
				background-color:#EE4428;
				color:#fff !important;}

Конечно, я мог прийти к этому и через месяц чтения, хотя не вижу гарантии, или понять при живом обсуждении, того что уже сделал. Не ужели я выбрал не правильный подход? Причем я уверен, что и этот код можно еще больше улучшить. Но это придет с опытом, а не чтением... .

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

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

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

Edited April 16, 2011 by LESTAD

psywalker · April 17, 2011

Нихрена ты не понял И твой код, который ты привел (типа переделанный), так же кишит ошибками

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

И вот тогда, и только тогда, когда ты (намучаешься в поисках ответов, вычитаешь кучу книг, блогов) уже будешь владеть пониманием и точно знать, в чём твои косяки, то сможешь сделать перевёрстку своей работы, НО уже, уверяю тебя, сможешь сделать её намного лучше, САМ исключая свои ошибки (а не потому что тебе на них кто то указал), причём делая это красиво, а самое главное правильно и с пониманием, в отличии от того случая, когда ты просто ТУПО переверстал. Если ты просто переверстаешь, то это будет такое же очередное, замазанное замазкой в некоторых местах говнище.

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

Удачи!

LESTAD · April 18, 2011

Спс, ушел в изучение семантики... . ( я так понял я попал в разряд ФИГАЧАЩИХ ) Ну а откуда мне было знать что код надо организовывать правильно, и что надо с начало правильно организовать HTML разметку с точки зрения семантической верности и понятности да же при отключении CSS ( я в место этого подстраивал HTML под будующую разметку, что бы было проще оформлять в CSS), короче я в ужасе сколько еще изучать... . Еще раз огромное СПС за критику, 3 дня не спал не ел читаю... .

Edited April 18, 2011 by LESTAD

psywalker · April 19, 2011

Спс, ушел в изучение семантики... . ( я так понял я попал в разряд ФИГАЧАЩИХ ) Ну а откуда мне было знать что код надо организовывать правильно, и что надо с начало правильно организовать HTML разметку с точки зрения семантической верности и понятности да же при отключении CSS ( я в место этого подстраивал HTML под будующую разметку, что бы было проще оформлять в CSS), короче я в ужасе сколько еще изучать... . Еще раз огромное СПС за критику, 3 дня не спал не ел читаю... .

Давай дружище, удачи тебе, надеюсь ты сделал правильные выводы :facepalmxd:

swetlana · April 19, 2011

br - это не труЪ.

может и не труЪ, но в данном случае вполне уместно.

Совершенно верно сказано: применён по назначению.

Если совсем по-гиковски, то сюда какой-нибудь микроформат hCard бы применить Но эт я так, не всурьёз.

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

Justnewone · April 19, 2011

я бы табличку сделал так:


<table cellspacing="0" cellpadding="0" border="0">
	<thead>
		<tr>
			<th> </th>
			<th scope="col">Покупка</th>
			<th scope="col">Продажа</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">USD</td>
			<td>00.00</td>
			<td>00.00</td>
		</tr>
		<tr>
			<th scope="row">EUR</td>
			<td>00.00</td>
			<td>00.00</td>
		</tr>
		<tr>
			<th scope="row">CHF</td>
			<td>00.00</td>
			<td>00.00</td>
		</tr>
	</tbody>
</table>

psywalker · April 19, 2011

Justnewone

Да, отличное решение, поддерживаю, именно его кстати я и имел ввиду :facepalmxd:

Gaspode · April 19, 2011

Хмъ, у меня вот так они вообще сделаны

:facepalmxd: Потому что... а, просто так.

Justnewone · April 19, 2011

Хмъ, у меня вот так они вообще сделаны
<th><abbr title="Доллар США">USD</abbr></th>
Потому что... а, просто так.

надо не останавливаться на достигнутом, Доллар <abbr title="Соедененные Штаты Америки">США</abbr>

Gaspode · April 19, 2011

Кстати, да. И ссылку на Википедию на эту тему.

Офтоп закончил =/

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

Edited April 19, 2011 by Gaspode

Sign In

Верстка №2 Оранжевый Банк

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

Join the conversation

Обсуждения

Important Information