Сверстал Макет№1 ,посмотрите пожалуйста

[g_shamil_a]

это моя первая верстка Ссылка ,буду рад критике)))

[ShumNo]

кодировка

[g_shamil_a]

кодировка

в смысле?

[Nekromancer]

А чёй то на всей странице почти шрифты по умолчанию браузерские стоят?

<meta utf-8"="" content="text/html; charset=" http-equiv="content-type">
<title>Web reference</title>
<link href="layout.css" type="text/css" rel="stylesheet">
<style type='text/css'>
body{font-family:Arial, Helvetica, sans-serif;} 

А вот теперь найдите где тут ошибка

[ShumNo]

кодировка

в смысле?

в самом прямом

[g_shamil_a]

А чёй то на всей странице почти шрифты по умолчанию браузерские стоят?

<meta utf-8"="" content="text/html; charset=" http-equiv="content-type">
<title>Web reference</title>
<link href="layout.css" type="text/css" rel="stylesheet">
<style type='text/css'>
body{font-family:Arial, Helvetica, sans-serif;} 

А вот теперь найдите где тут ошибка

<meta utf-8"=""- здесь в роде

,у меня в блокноте нормально прописано,странно.с шрифтами разберусь

ShumNo, кодировку забыл на windows-1251 перевести(

[Nekromancer]

<meta http-equiv="content-type" content="text/html; charset="utf-8" />

Замените на:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

а ещё лучше просто напишите -

<meta charset="utf-8">

А в layout.css уберите это

<style type='text/css'>

и это

</style>

ну оно там явно лишнее.

[g_shamil_a]

Nekromancer, спасибо большое ,буду знать))

[Winkler]

В

<div class='leftcol'>

(то есть Последние статьи) подчеркнутые предложения. Такое ощущение что это должны быть ссылки, хочется кликнуть на них))

[Myuzik]

Плохо. Откройте свой сайт через IE 7-8 и Вы наверняка удивитесь...

Дело в том, что использование HTML5 пока не стало стандартом, поэтому для такого типа работ его лучше не использовать.

Из того, что первым кинулось в глаза:

- Неуместное использование HTML5, но если всё же решились использовать - включайте голову, чтобы в коде не было вот этого <header class="header"></header>, масло масленое получается, тегу <header /> прекрасно можно присвоить стили и без классов.

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

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

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

- <header> лучше использовать один на всю страницу, а заглавия, которые вы тоже так обозначили нужно размечать как заглавия, т.е. тегами <h1....h6>

К тому же заглавия выравнивать по правому краю - не правильно.

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

- Ссылки "далее" оформляются тегами <a><a/> а не заголовками h5.

- Смысловое назначение блока с буквой G ?

- Картинки счётчиков оформляем списком. Ссылкам внутри display: block;

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

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

Это из того, что сразу кидается в глаза...

[Dinow]

Myuzik, я с вами не согласна.

Дело в том, что использование HTML5 пока не стало стандартом, поэтому для такого типа работ его лучше не использовать.

Что за глупость? HTML5 уже активно используется повсеместно и никто от этого не страдает, просто нужно знать какие браузеры какие теги поддерживают и исходить из этого.

И для какого типа работ, по вашему, его стоит тогда использовать?

Из того, что первым кинулось в глаза:

- Неуместное использование HTML5, но если всё же решились использовать - включайте голову, чтобы в коде не было вот этого <header class="header"></header>, масло масленое получается, тегу <header /> прекрасно можно присвоить стили и без классов.

А вот нежелательно ему присваивать стили без классов, т.к. <header> на странице может быть не один. Хотя исходя из этого:

- <header> лучше использовать один на всю страницу, а заглавия, которые вы тоже так обозначили нужно размечать как заглавия, т.е. тегами <h1....h6>

вы не в курсе, что по спеке <header>, как и <footer>, и <aside> могут быть на странице у каждого <section> или <article>. И каждый из них может начинаться с заголовка первого уровня.

[Vlad]

Что касается HTML5, мужика лучше не слушать, он явно не в теме.

[Dinow]

g_shamil_a

1. Не стоило лого ставить бэкграундом к шапке сайта. Лучше сделать через <img>.

2. Неоправданное использование <br> - речь о Поиске по сайту

3. Для основного меню по HTML5 используется <nav>, а не <div>

4. <div class="marg"></div> - вот это что??

5. <div class="leftcol"> - это скорее <aside>, <header>Последние статьи</header> - это заголовок, а каждая новость - отдельный <article>

6. О том что Далее - это не заголовок, уже упоминалось выше

7. <div style="clear:both"></div> - это плохо! Вот почитай http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

8. Названия классов должны нормально отражать содержимое, а не leftcol, rightcol, ppsaitu и т.д

[Myuzik]

Каюсь, в 5ом действительно не силён, НО...

Главная задача HTML 5 - правильно интегрировать мультимедийный контент, страница представленная на обсуждение ни как не претендует на мультимедийный портал. Тогда зачем использовать 5ый?

Что касается <header>. Вы хотите сказать что заголовки правильнее оборачивать в него, чем в h1...h6?

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

З.Ы. Суть указанных мною ошибок, за исключением 5ой, не изменится от того, будет ли человек использовать html5 или нет.

[g_shamil_a]

Winkler, Myuzik, Dinow, Vlad, ,благодарю),исправим.

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

с этим не могу разобраться ,подскажите

[Myuzik]

Наверное Вы пытаетесь посмотреть чуть глубже чем я имел ввиду =)

Дело в том, что если навести мышь, на пункт меню - выпадает блок меню второго уровня. А когда наводим мышь на него, то пункт меню первого уровня снова становится белым, а блок с меню второго уровня остаётся. Вот и получается, что чисто визуально блок ни к чему не привязан. Это не ошибка в вёрстке, нет!

Просто меня, как пользователя, немного смутил этот факт.

[epog333]

Отступы? Не, не слышал

Почему-то ужасно долго грузится

[Softlink]

Главная задача HTML 5 - правильно интегрировать мультимедийный контент, страница представленная на обсуждение ни как не претендует на мультимедийный портал. Тогда зачем использовать 5ый?

Ну во-первых у HTML 5 интеграция мультимедия не является первопричиной его возникновения. Все немного прозаичней. Новый стандарт введен для того, чтобы как-то упорядочить и унифицировать код. Сделать явное разделение между логическими блоками на сайте. В общем все та же пресловутая семантика кода.

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

Что касается <header>. Вы хотите сказать что заголовки правильнее оборачивать в него, чем в h1...h6?

В HTML5 введены новые правила оформления заголовков и их иерархии на странице. Как уже заметила Dinow, каждый article или section может иметь свой заголовок, начинающийся с H1. При этом "головная" часть какого-то логического блока должна может быть оформлена в header. Однако, по-моему скромному убеждению, не стоит писать код ради кода. Я не делаю очень редко использую header только для того чтобы затолкать в него один единственный заголовок H1. Если же в логической шапке какого-то блока присутствует несколько элементов(заголовок, подзаголовок, автор статьи, дата и т.д.), то имеет смысл задействовать этот тег. А то еще и вкупе с hgroup.

Edited September 19, 2011 by Softlink

[g_shamil_a]

g_shamil_a

1. Не стоило лого ставить бэкграундом к шапке сайта. Лучше сделать через <img>.

2. Неоправданное использование <br> - речь о Поиске по сайту

3. Для основного меню по HTML5 используется <nav>, а не <div>

4. <div class="marg"></div> - вот это что??

5. <div class="leftcol"> - это скорее <aside>, <header>Последние статьи</header> - это заголовок, а каждая новость - отдельный <article>

6. О том что Далее - это не заголовок, уже упоминалось выше

7. <div style="clear:both"></div> - это плохо! Вот почитай http://www.xiper.net...s/clearfix.html

8. Названия классов должны нормально отражать содержимое, а не leftcol, rightcol, ppsaitu и т.д

1 сделал,только почему так лучше ?

2 выкинул 3 исправил 4 выкинул 5 заменил 6 исправил 7 заменил

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

epog333,

спс,промаргал)