Моя первая верстка

[Melnik]

Здравствуйте форумчане, сверстал свою первую страницу. Буду рад любой критике (или похвале) .

Макет не мой , скачал с ру-трекера, поэтому вопросы по дизайну не интересуют.

Спасибо.

http://melnik99.alwaysdata.net

[klierik]

1. ну нафига везде пихать ID?

2.

<form action = "#"

валиднее

3.

<div id="island"> </div>

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

4.

div.left
div.right
div.center

а слабо сделать так что бы div.center был первым? а зачем? а вот я бы хотел от тебя услышать почему это правильнее.

5.

<p id="hcenter">  Добро пожаловать на наш сайт </p>

это заголовок.

6.

Туристическая компания «Paradise» занимае

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

7. не проверял я страничку на валидность но уверен что не пройдет. а надо!

[Bryant-24]

Резиновый макет конечно хорошо, но на 1920px смотрится не очень (сложно читать), лучше ограничить max-width. Ссылки в главном меню и в футере желательно сделать с подчеркиванием при наведении. В поиске сделать отступ слева для текстовой области, иначе слишком сильно вылазит влево (тоже самое касается и поля логина и пароля). Отступ красной строки в блоке справа - лучше сделать без красной строки. А по поводу меню слева - сразу же раздражает фоновый синий цвет и смена курсора при наведении. Ну вот как то так

[Melnik]

klierik,Bryant-24 спасибо что отписались

1. "ну нафига везде пихать ID? "

а) чтобы быстро в коде ориентироваться

б) (перестраховка) более индивидуален , чем класс , поэтому если вдруг где в css, опишу общее свойство для p ,в связке с идентификатором , оно сработает только в месте, котором мне надо, и все.

Так делать не стоит ? Почему ? классами заменить ?

2.7. action = "#", везде прописал. Через валидатор погонял,исправил недочеты ))) Зеленый свет

3. Остров убрал , обозвал centerimage.

4. пока слабо ))) думаю, гуглю

[klierik]

klierik,Bryant-24 спасибо что отписались

1. "ну нафига везде пихать ID? "

а) чтобы быстро в коде ориентироваться

б) (перестраховка) более индивидуален , чем класс , поэтому если вдруг где в css, опишу общее свойство для p ,в связке с идентификатором , оно сработает только в месте, котором мне надо, и все.

Так делать не стоит ? Почему ? классами заменить ?

потому что ID придумали для других целей.

ID - JS

.class - CSS

[Melnik]

4. Сделал центральную часть выше левой и правой , с помощью задания float для центральной части , и двух отрицательных маржинов для левой и правой колонки.

Для чего ? Для поисковых машин, чтобы увеличить "вес" контента.

5.

<p id="hcenter">  Добро пожаловать на наш сайт </p>

Сделал название заголовком второго уровня.

6.

Туристическая компания «Paradise» занимае

К блоку текста добавил идентификатор main-text.

[Melnik]

Резиновый макет конечно хорошо, но на 1920px смотрится не очень (сложно читать), лучше ограничить max-width.

А есть какая методика по ограничению текста ? Наример: в строке не больше 30 символов, не больше ? Спасибо.

[Melnik]

Резиновый макет конечно хорошо, но на 1920px смотрится не очень (сложно читать), лучше ограничить max-width. Ссылки в главном меню и в футере желательно сделать с подчеркиванием при наведении. В поиске сделать отступ слева для текстовой области, иначе слишком сильно вылазит влево (тоже самое касается и поля логина и пароля). Отступ красной строки в блоке справа - лучше сделать без красной строки. А по поводу меню слева - сразу же раздражает фоновый синий цвет и смена курсора при наведении. Ну вот как то так

Исправил все, кроме текста , так как не понимаю как его ограничивать. (в смысле технически знаю как а вот принцип нет )

потому что ID придумали для других целей.

ID - JS

Я с джавой еще не знаком, для меня это сложная задача понять где он нужен , а где нет.

Edited February 3, 2012 by Melnik

[Melnik]

Зачет ?

[webmax7]

Ограничение ширины:

- тебе уже подсказали - max-width.

Для того чтобы использовать классы вместо id необязательно знать JS, на эту тему полно статей.

Формы:

При наведении на кнопки форм должен быть cursor:pointer;

У полей верхней формы, в этом макете, должны быть заданы placeholder-ы.

Поля должны иметь паддинг.

[Melnik]

webmax7, спасибо за критику.

Ограничение ширины:

- тебе уже подсказали - max-width.

Ограничил на глаз , 900px

Для того чтобы использовать классы вместо id необязательно знать JS, на эту тему полно статей.

Изучил основы JavaScript. Убрал ненужные идентификаторы , заменил классами(В меру своего понимания ).

При наведении на кнопки форм должен быть cursor:pointer;

Сделано

У полей верхней формы, в этом макете, должны быть заданы placeholder-ы.

Сделано.

Поля должны иметь паддинг.

Про какие поля идет речь ?