Маленькая вёрстка by Sapfire

[Feers1de]

Привет всем) Я не стал сначало изучать(html, css), а потом верстать дизайны. Я решил получать знания во время практики.

Первая моя работа - это приветственное окно (Motd) для сервера CS1.6, которое я хотел бы выставить на обсуждение на данном форуме. Хотел бы, что бы вы оценили: сам дизайн, кроссбраузерность, правильность кода. Не говорите мне, как что-либо исправить, пока не спрошу, мне нужно, что бы вы именно подталкивали меня.

Адрес странички: _http://sapfire-grs.narod2.ru/motd/index.html

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

[ShumNo]

Не очень понял, а чего обсуждать, если ничего нет? черный фон и 2 строчки текста - это?!

[Feers1de]

Не очень понял, а чего обсуждать, если ничего нет? черный фон и 2 строчки текста - это?!

Не 2. Да, именно это и нужно обсудить.

[ShumNo]

Ах да, простите, конечно же 3 строчки текста ...

Не обессудьте, но это достаточно ужасно и отпугивающе

Черный фон с оранжевым текстом. Цель, наверное, напугать? ...

Верстку даже не смотрю, поскольку нет разницы, как сверстаны 2.. нет 3 строчки текста

В общем странная страничка со странным текстом и непонятным предназначением

Куда подтолкнуть?

[Searcher]

Я не стал сначало изучать(html, css), а потом верстать дизайны. Я решил получать знания во время практики.

Это в корне ошибочное мнение!

Зачем изобретать велосипед?! Существует наиболее эффективный процесс обучения проверенный всей историей человечества. Изучается какая-то часть теории, потом именно эта часть закрепляется на практике отработкой на специально упрощенных и узконаправленных примерах.

Понятное дело, вы - гений Но в данной дисциплине html и css - это даже не теория, это просто инструмент. А как вы будете резать, не зная как работает нож?

По дизайну.

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

1. Выбор цвета фона не совсем оправдан. Если на сайте ожидается преобладание большого количества текстовой информации, то удобнее для посетителя будет темный текст на светлом фоне, причем при высокой контрастности. Т.е. отталкиваемся от черного текста на белом фоне. Это самый комфортный вариант для чтения, так уж устроена наша психика. Конечно, если нужна какая-то стилизация (под DOS, например), то можно и белый на черном. Но это скорее исключение.

2. По цвету абсолютно не сочетается логотип и текст. В таком цвете весь текст делать - плохо. Он слишком агрессивный. Достаточно только какие-то элементы выделить этим цветом. Учитесь не давить на психику и зрение посетителя.

3. Необходимо разнообразить текст по цветам. Избавиться от однородности. Подзаголовки сделать немного выделяющимися, списки и текст спокойным цветом. Учитесь цветом делать акценты на нужные блоки. Но не забывайте, что во всем нужна мера.

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

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

6. Зачем нумеровать список запрещений? Ну и точки то в конце строк все-таки нужны...

7. Последний абзац не имеет смысла без кнопки "ОК". Он должен как-то распологаться относительно неё.

По верстке.

1. Для удобства чтения кода нужно подчеркнуть иерархию (вложенность) html левыми отступами. Чем глубже вложенность, тем больше отступ.

2. <p> - абзац (новая строка). Он по смыслу должен заканчиваться перед списком, а не содержать его.

3. Используйте <br> только там, где нужен принудительный перевод строки, а не для создания нового абзаца.

4. Для <li> хоть и не обязателен закрывающий тэг, но для самодисциплины лучше закрывать.

5. Список контактов тоже должен быть списком.

6. В css отделите отступом хотябы свойства от их объектов. Ну и между объектами можно хотяб одну пустую строку вставлять.

7. "margin-top: -100px;" - это вообще зачем?

8. Для отступов существует укороченная запись.

Все это сразу бросилось в глаза. Друзья, возможно, углубятся...

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

[buddah]

Администратор проекта - это заголовок.

На нашем сервере категорически запрещено: - это заголовок.

Кроме h1 есть еще h2,h3,h4...

[Feers1de]

Ну я как бы написал предназначение этой странички. Это скорее не сайт, а просто приветственное окно, которое я впихнул на фтп и указал путь в самом сервере.

Возник вопрос, в теге <p></p> можно использовать заголовки (h1, h2...)?

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

[Searcher]

Ну я как бы написал предназначение этой странички. Это скорее не сайт, а просто приветственное окно, которое я впихнул на фтп и указал путь в самом сервере.

Это убожество, а не приветственное окно! В лучшем случае, это техническое описание для внутреннего пользования.

Посмотрите как сделаны приветствия на западных сайтах.

Возник вопрос, в теге <p></p> можно использовать заголовки (h1, h2...)?

Нет. Вам логику надо понять. Заголовок - это заголовок, а абзац - это абзац. Вы, когда книгу читаете, заголовок считаете частью следующего за ним абзаца?

Делайте сайт как книгу.

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

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

[Feers1de]

Как мне поставить изображение на задний фон документа? Пробовал по-разному - не получается. И как вырованять заголовок (h1) в самом верху по центру документа?

Edited June 29, 2011 by Sapfire

[buddah]

Как мне поставить изображение на задний фон документа? Пробовал по-разному - не получается. И как вырованять заголовок (h1) в самом верху по центру документа?

Прочитать сайт htmlbook.ru от корки до корки.

[Feers1de]

Как мне поставить изображение на задний фон документа? Пробовал по-разному - не получается. И как вырованять заголовок (h1) в самом верху по центру документа?

Прочитать сайт htmlbook.ru от корки до корки.

А что, на этом форуме уже и вопрос задать нельзя?

[buddah]

Как мне поставить изображение на задний фон документа? Пробовал по-разному - не получается. И как вырованять заголовок (h1) в самом верху по центру документа?

Прочитать сайт htmlbook.ru от корки до корки.

А что, на этом форуме уже и вопрос задать нельзя?

А что, самые элементарнейшие вещи, азы, почитать уже лень?

[Feers1de]

Как мне поставить изображение на задний фон документа? Пробовал по-разному - не получается. И как вырованять заголовок (h1) в самом верху по центру документа?

Прочитать сайт htmlbook.ru от корки до корки.

А что, на этом форуме уже и вопрос задать нельзя?

А что, самые элементарнейшие вещи, азы, почитать уже лень?

Я ведь писал в посте, что все перепробовал - не получается, поэтому и обратился к вам.

[buddah]

http://htmlbook.ru/css/background-image

[Feers1de]

http://htmlbook.ru/css/background-image

Вот именно сюда я и залазил. Щас попробую.

Edited June 29, 2011 by Sapfire

[Feers1de]

Вот, переделал работу

_http://sapfire-grs.narod.ru/

Скажите что не так.

[Feers1de]

Вот, переделал работу

_http://sapfire-grs.narod.ru/

Скажите что не так.

Можете хоть обсудить правильность кода?

[ctpz]

В принципе код очень даже неплох.

[Gaspode]

Эээ... какой код? Там скрипт на стопицот строк и всё. А остальное - там обсуждать-то нечего.

[Feers1de]

Замечаний никаких нету?

[7ion]

Замечаний никаких нету?

Ну хотя бы то, что счетчик выше доктайпа.