1 (08.06.2012 00:17:29 отредактировано metra)

А именно специальность верстальщика.
После изучения w3schools и htmlbook я тут накалякал первый макет по PSD-шаблону из свободного доступа - http://webtux.net/test/1/

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

2

metra пишет:

После изучения w3schools и htmlbook я тут накалякал первый макет по PSD-шаблону из свободного доступа

Сложно?
Просто интересуюсь.

«Я устал, я ухожу.»

3

Vitri пишет:
metra пишет:

После изучения w3schools и htmlbook я тут накалякал первый макет по PSD-шаблону из свободного доступа

Сложно?
Просто интересуюсь.

Так как я работаю с PHP все равно приходится сталкиваться с CSS/HTML, так что некоторые очень начальные знания уже были. А так вот я посидел часа 4 за вышеописанными двумя сайтами и после этого за 5 часов сверстал данный макет. Я думаю профессионал сверстать может за пару часов. Сложно было только в паре моментов - когда я не понимал, почему часть макета выглядит не так, как я хочу и не могу найти ошибку. В итоге разобрался, включив аналитическое глубокое мышление.

4

А оригинал, с которого верстал где?
Вообще хорошо получилось, сам макет темноват.

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

5

newzenon пишет:

А оригинал, с которого верстал где?
Вообще хорошо получилось, сам макет темноват.

http://freepsdfiles.net/graphics/dark-p … -template/
правда я заменил фон сайта (ибо тот мне показался отвратительным) и не доделал правый нижний блок с подвалом - спать пора)) завтра

6

Меня хватает только на редактирование и изменение готовой темы, верстка с psd ... Брррр..., не верстальшик я. ab

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

7

metra пишет:

PSD-шаблону

Это не совсем UNIX-way ab

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

8

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

Fedora GNOME3

9

Неплохо для начинающего.

По мелочи
Ниже все мое ИМХО (что то родилось и прижилось на основе требований при работе в различных командах) и не претендует на истину
По HTML:
1. У тегов <a> всегда стаить атрибут title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <a href="#" title="">....</a>
2. У тегов <img> всегда стаить атрибуты alt и title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <img src="...." title="" alt="">
3. все стили в таблицу стилей. Здесь этому не место

<div style="width: 900px; height: 1px; clear: both;"></div>

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

.clear{
   height:1px;
   clear:both;
   overflow:hidden;
}
<div class="clear">&nbsp;</div>

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

4. Параметры id оставляю тем кто будет пришивать скрипты. для верстки только class
5. Как то читал статью по сео. Там рекомендовалось, чтоб на одной странице был только один тег <h1>...</h1>. вопрос, конечно, холиварный, но у меня прижилось
6. Тут больше вопрос, конечно, к дизайнеру. Но кнопки не живые.  Лучше, чтоб при наведении они как то видоизменялись. ВОзможно вы знаете этот метод, на сякий случай расскажу:

Картинку кнопки или ее фона делаете двойной (а можно и тройной высоты)
По высоте делаете. В нормальном состоянии и при наведеном. Третье состояние можно например для текущего выбора. А затем:

.button{
    background:#CCC url("bt.png") center top no-repeat;
}
.button:hover{
    background:#CCC url("bt.png") center bottom no-repeat;
}
.active{  /* стиль добавляется скриптом при формировании страницы */
    background:#CCC url("bt.png") center center no-repeat;
}

Кстати, в одном зарубежном проекте видел когда в один файл png засунули вообще все кнопки (и их состояния) с сайта. И опирировали в таблице стилей уже смещениями этого фона.

То что не убивает нас, делает нас сильнее! © Ницше.
When life puts you in tough situations, don’t say "why me". Just say "try me".
GNU/Linux Debian

10

Writer пишет:

Это не совсем UNIX-way

Это реальность.
Большинство макетов приходит в PSD.  Небольшая часть ai, cdr.  (Я от таких сразу отказываюсь)

То что не убивает нас, делает нас сильнее! © Ницше.
When life puts you in tough situations, don’t say "why me". Just say "try me".
GNU/Linux Debian

11

voral пишет:

Небольшая часть ai, cdr.

Кстати sk1 их может открывать.

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

12

Writer пишет:
metra пишет:

PSD-шаблону

Это не совсем UNIX-way ab

Вей, не вей, а ~80% исходников присылают в данном формате. Это я узнавал.

13 (08.06.2012 08:35:17 отредактировано metra)

voral пишет:

1. У тегов <a> всегда стаить атрибут title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <a href="#" title="">....</a>
2. У тегов <img> всегда стаить атрибуты alt и title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <img src="...." title="" alt="">

Это да, учту.

voral пишет:

3. все стили в таблицу стилей. Здесь этому не место
<div style="width: 900px; height: 1px; clear: both;"></div>

Это было решение последней из 2х проблем сложных, я пробовал все подряд и по этому на скорую руку применил такой стиль. Естественно, нужно в css убрать.

voral пишет:

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

Да, точно, учту.

voral пишет:

4. Параметры id оставляю тем кто будет пришивать скрипты. для верстки только class

Руководствуясь w3schools и здравым смыслом я решил, что все уникальные элементы на странице я буду делать через ID, а все повторяющиеся (даже может потенциально, а не на данный момент) - через CLASS. Мне кажется логично так. Ибо в последующем может потребоваться работа JS с любым из элементов.

voral пишет:

6. Тут больше вопрос, конечно, к дизайнеру. Но кнопки не живые.  Лучше, чтоб при наведении они как то видоизменялись. ВОзможно вы знаете этот метод, на сякий случай расскажу:

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

voral пишет:

6. Тут больше вопрос, конечно, к дизайнеру. Но кнопки не живые.  Лучше, чтоб при наведении они как то видоизменялись. ВОзможно вы знаете этот метод, на сякий случай расскажу:

Это называется работа со спрайтами. Там все очень просто. Делается файл из нескольких картинок склееных и далее подгоняется смещение. На пример:

background: url(images/sprite.png) 100px 0

Т.е. идет смещение картинки по горизонтали на 100 пикселей.

14 (08.06.2012 08:39:02 отредактировано metra)

Ребята, всем спасибо за отклики.
Кстати, как вы могли заметить стиль отступов в стиле иерархического дерева у меня присутствует даже в CSS-файле (http://webtux.net/test/1/makeup_css/main.css) ab Не знаю, мне кажется, это удобно.

15 (08.06.2012 09:29:46 отредактировано neol)

Слайдер не работает (там таки яваскриптина должна присутствовать)
межстрочный интервал везде меньше, чем в макете
ховеров нет ни у кнопок, ни у ссылок
бордер в главном меню отсутствует
шрифт в главном меню другой (в PSD Trebuchet MS вроде, а у вас в стилях Arial)
Блок Latest blog posts отсутствует
футер отсутствует
фон кнопок не тот (в макете градиенты)
нет отступа у изображения в основном тексте
заголовок в слайдере в макете 2 строки, у вас 3

<div id="content">
        <div id="content_top_bg"></div>
        <div id="content_middle_bg">

удобнее будет сделать классами и укоротить

<div class="content">
        <div class="top"></div>
        <div class="middle">

и в стилях использовать

.content .top
.content .middle

И присоединюсь к замечаниям voral.

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

metra пишет:

Кстати, как вы могли заметить стиль отступов в стиле иерархического дерева у меня присутствует даже в CSS-файле (http://webtux.net/test/1/makeup_css/main.css) ab Не знаю, мне кажется, это удобно.

Да, зачет.

16

neol пишет:

а по внешнему виду ни один кодер на подобные мелочи внимания не обратит (а вот дизайнер обратит).

Кстати да. Был у меня один клиент ему нужно было сходство с макетом пиксел в пиксель (при этом было пофиг, что в макете дизайнер шрифты гдето с размытием оставил, где то текст сжал......  Тогда прямо весь шаблон загонял в фон страницы и "играл" с пикселями + в войну с клиентом в то, что браузер (с учетом всех видов и версий) не может сделать все то, что неопытный диз сделает с шрифтами в шаблоне. ab

То что не убивает нас, делает нас сильнее! © Ницше.
When life puts you in tough situations, don’t say "why me". Just say "try me".
GNU/Linux Debian

17

metra пишет:

Руководствуясь w3schools и здравым смыслом я решил, что все уникальные элементы на странице я буду делать через ID, а все повторяющиеся (даже может потенциально, а не на данный момент) - через CLASS. Мне кажется логично так. Ибо в последующем может потребоваться работа JS с любым из элементов.

Я тоже так сначала делал.
Но приходилось сталкиваться с ситуацией где есть готовый скрипт написанный индусом из-за которого приходилось менять. Дело конечно не сложное. Но ну его нафиг - теперь я не парюсь и использую только классы.

То что не убивает нас, делает нас сильнее! © Ницше.
When life puts you in tough situations, don’t say "why me". Just say "try me".
GNU/Linux Debian

18

neol, какой браузер и какая ОС?

19

metra пишет:

neol, какой браузер и какая ОС?

Firefox 13,  Debian.