Jump to content

Нужна оценка, критика, советы


YanaSt
 Share

Recommended Posts

В общем, первый сайт, сверстанный мною.

Был макет в psd.

Просьба указать на ошибки, дать общую оценку ВЕРСТКИ.

Там еще два скрипта подключила, просто подсмотрела на других сайтах как это делается, внутри ничего в них не меняла, потому что пока только изучаю HTML и CSS, в javascript вообще ничего не смыслю.

И еще, не проходит валидатор, но не пойму в чем дело, ругается на </body>, </html>.

Мое мнение (если не брать во внимание тормознутость скриптов): вся конструкция тяжеловата, наверное, код можно было упростить. Ну первый блин, в общем.

Адрес сайта: stepalex.ru

To psywalker: полоску "заборола" как смогла :-)

Link to comment
Share on other sites

В FF у меня сильно тормозит и дергается прокрутка, в опере этого нет. В навигации в опере отсутствуют пунктирные строки, как в FF. И фон... опять же, в FF он текстурированный, а опере сплошной...

Ну а в IE у меня вот такое -

bc512af6a8f0t.jpg

Link to comment
Share on other sites

<p id="status">обновлено: <span class="gray">27.08.09</span>              статус: <span class="gray">Свободен</span></p>

Это ужас!

<p class="left_portfolio">

<img src="images/polosa.png" alt="" />

</p>

С какой целью понадобилось заключать картинку в параграф?

<p id="logo" ><a href="http://stepalex.ru/"><img src="images/logo.png" alt="" /></a></p>

То же самое со ссылкой

<table class="table_portfolio" border="0" width="" cellpadding="0" cellspacing="0">

Про CSS вы не помните совершенно.

<!—САЙТЫ-->

Comments on Russian - not very good

Таблицы... а начиналось все тах хорошо.

Кодировка windows-1251 - не кошерно.

Сам по себе код "неопрятен" и "грязен"...

Link to comment
Share on other sites

<p id="status">обновлено: <span class="gray">27.08.09</span>              статус: <span class="gray">Свободен</span></p>

Это ужас!

Вы напишите, что именно Вас так ужаснуло. Как-то неконструктивно получается. Критика есть, а что именно критикуется и как исправить - нет. Ценности никакой от таких реплик.

Так понимаю, куча пробелов? Или что-то еще? Чем заменить? Пустым дивом?

Цитата

<p class="left_portfolio">

<img src="images/polosa.png" alt="" />

</p>

С какой целью понадобилось заключать картинку в параграф?

Валидатор ругается, если картинка не в блочном элементе. Нужно в div заключать?

Цитата

<table class="table_portfolio" border="0" width="" cellpadding="0" cellspacing="0">

Про CSS вы не помните совершенно.

Да, здесь забыла.

Цитата

<!—САЙТЫ-->

Comments on Russian - not very good

Не знала, буду иметь ввиду

Таблицы... а начиналось все тах хорошо.

Предложите Ваш способ упорядочить превьюшки разной высоты с выравниванием по верхнему краю. Разве в данном случае таблица - зло?!?!

Кодировка windows-1251 - не кошерно.

Так напишите как кошерно ))) Я смотрела, как сделано на этом сайте, вроде бы так же.

Сам по себе код "неопрятен" и "грязен"...

Ну это вообще ничего мне не дает, что исправлять-то??

И да, спасибо за внимание к моей работе, но все же хочется больше консруктива :)

Я проверял в IE6, новее не ставлю, потому что вообще ослом не пользуюсь.

Да, я в 7 смотрела.

Для первого сайта не плохо, но слишком уж длинная страница...

Спасибо! Страница длинная, потому что пока не знаю, как сделать листаж страницы :) Как узнаю, разобью все разделы по страницам, а на каждой странице будет не более 3 рядов с превьюшками.

Link to comment
Share on other sites

Кто там говорил про таблицы?

Таблицы в данном случае абсолютно приемлемы, так как данные именно табличные.

А так всё достаточно аккуратно и культурно.

Link to comment
Share on other sites

YanaSt

Вы напишите, что именно Вас так ужаснуло. Как-то неконструктивно получается. Критика есть, а что именно критикуется и как исправить - нет. Ценности никакой от таких реплик.

Так понимаю, куча пробелов? Или что-то еще? Чем заменить? Пустым дивом?

Да, куча пробелов. Для этих целей существует margin и padding.

Валидатор ругается, если картинка не в блочном элементе. Нужно в div заключать?

Полосу огромную можно положить на бекграунд в див. Параграф нужен для хранения текста, а не элементов дизайна. Слово "Портфорио", надо тоже на бекграунд класть. Запомните, элементы дизайна ни в коем случае нельзя делать через <img>, их всегда надо стараться делать бекграундом через стили.

Да, здесь забыла.

Ай-яй-яй, это надо знать как "Отче наш" - текст на HTML, оформление на CSS. В HTML оформления не должно быть вообще.

Не знала, буду иметь ввиду

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

Так напишите как кошерно ))) Я смотрела, как сделано на этом сайте, вроде бы так же.

Кошерно ставить кодировку UTF-8 всегда и везде. Т.к. она работает всегда и везде.

UPD:

Предложите Ваш способ упорядочить превьюшки разной высоты с выравниванием по верхнему краю. Разве в данном случае таблица - зло?!?!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
div {
display: inline-block;
width: 100px;
border: 1px solid;
}

.h1 {
height: 100px;
}

.h2 {
height: 200px;
}

.h3 {
height: 300px;
}

.h4 {
height: 400px;
}
</style>
</head>
<body>

<div class="h1">text</div>
<div class="h2">text</div>
<div class="h3">text</div>
<div class="h4">text</div>
<div class="h1">text</div>
<div class="h2">text</div>
<div class="h3">text</div>
<div class="h4">text</div>
<div class="h1">text</div>
<div class="h2">text</div>
<div class="h3">text</div>
<div class="h4">text</div>
<div class="h1">text</div>
<div class="h2">text</div>
<div class="h3">text</div>
<div class="h4">text</div>

</body>
</html>

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

UPD2: По поводу неопрятного кода я бессилен, что либо объяснить - тут чувствовать надо. Может и с опытом приходит... хз.

Edited by Great Rash
Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...
  • 3 weeks later...
а с чего вдруг такой вопрос?? :)

И еще, добавлю пять копеек. простые стили не стоит вешать на id, помянете мое слово, если в верстке с id стилями надо будет поменять оформление.

Link to comment
Share on other sites

И еще, добавлю пять копеек. простые стили не стоит вешать на id, помянете мое слово, если в верстке с id стилями надо будет поменять оформление.

что есть "простые стили"? :)

1) где закрывающая </td>? Раз уж стоит доктайп XHTML, так надо соблюдать веллформность...

2) width="310px" — какой это язык? :)

про закрывающий тег - спасибо, учту

а по второму пункту что не так?

Link to comment
Share on other sites

CSS-ная размерность в HTML-ном атрибуте. В HTML нет единицы "px", там пиксели по умолчанию. В CSS единица измерения нужна, но синтаксис другой. Лучше, конечно, задавать размеры именно стилями.

Link to comment
Share on other sites

  • 6 months later...
Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy