Jump to content

Первый макет


Roger
 Share

Recommended Posts

Добрый вечер!

Вот сверстал свой первый макет ссылка.

Задания взята отсюда http://htmlforum.ru/index.php?showtopic=47965

 

Прошу оценить  по html и css.

javascript пока еще не изучал

 

 

Использовал 960 grid

слайдер отсюда взял http://liquidslider.com/ 

 

 

с шрифтом не знаю что делать в psd который используется платный.

Edited by Roger
Link to comment
Share on other sites

Теги <header> и <footer> не поддерживаются в IE8 и ниже . В связи с этим в IE8 отображается только их содержимое http://joxi.ru/wi8ZU_3JTJAbFB_Hl_M


И еще - зачем ты подключаешь скрипты в body после футера?
 

 

javascript пока еще не изучал

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

Edited by Bryant-24
Link to comment
Share on other sites

Поэтому на будущее - скрипты подключай в теге head
уже года 3-4 рекомендуют подключать скрипты в конце страницы. Дабы увеличить скорость отображения страницы. Т.е. сперва грузятся стили и html, а потом уже скрипты. На эту тему много инфы + google speed test это посоветует. 

Только ему надо скрипты слайдера убрать тоже вниз. И 2 раза подключать jquery точно уж не надо будет.

 

А раз использует header и footer то IE8 видимо не нужен. 

Link to comment
Share on other sites

Я сам не профи, но позволю несколько замечаний, то, что заметил.

1. фон заголовка в макете — градиентный, у вас же сплошной

2. 

<a href=""><i>in English</i></a>

логичнее было бы, имхо, убрать тег <i> и заменить его правилом font-style: italic в CSS.

3. 

<h3 class="facebook">Мы на <a href="">Facebook</a></h3>

не вижу смысла оборачивать этот блок в h3, это ведь не заголовок. Обычный div подошел бы больше, тем более, что в ТЗ сказано:

1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок.

и в таком случае логичнее было бы сделать список с одним элементом. Сюда же относится жестко заданный margin-top у поискового инпута ниже - при добавлении еще одной ссылки верстка сползет.

4.

Пунктов меню может быть больше -- это один список который выводится в 2 столбца.

у вас список в двух независимых блоках. Можно было бы сделать, как мне кажется, используя CSS3 колонки, либо еще что-либо.

5. фон поискового инпута очень сильно отличается от фона в макете, кроме того, нет внутренней тени, иконка лупы прижата к краю (в макете есть отступ). В форме нет кнопки отправки (было бы логично сделать ее именно иконкой лупы), что делает невозможным отправку формы без дополнительного js.

6. тень прикрепленной к краю окна фиговины справа сильно отличается от макета.

7. насколько я понял, у первого слайдера должно быть 4 страницы, а не 5, как у вас. Это становится ясно, если включить отображение направляющих в ФШ (Ctrl+;). Кроме того, не вижу смысла в таком слайдере, как у вас - зачем это, по одному пункту пролистывать?

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

9. в подписи статьи не хватает курсива

10. блоки в футере расположены неправильно, смещены по горизонтали.

11. не понимаю, зачем подключать одновременно и reset.css, и normalize.css. Выберите что-либо одно.

12. jquery и скрипты слайдера подключаются дважды - в начале body и в конце.

Ну, как-то так. Чего только не сделаешь, только бы не работать)

Link to comment
Share on other sites

1. это что за просвет: http://take.ms/UUqs9

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

3. вот что видим при сравнении с оригиналом: http://take.ms/yVGQ6 -- очень плохо.

 

по html

1. 

<p><span>Евгений Демин,<br>Генеральный директор SPLAT</span></p>

во-первых -- это не абзац. во-вторых - это 2 отдельные строки. их не надо разделать через <br />. Вообще использование <br> ожидается, как правило, только в контенте, но никак не в оформлении. Допустим я захочу завтра что бы имя было более темного цвета - как я могу это осуществить? а никак.

 

2.

<p>Professional<br>                 oral care</p>

Это лозунг, а не абзац.

 

3. .top_menu -- в ТЗ специально обратил внимание на то что:

 

Пунктов меню может быть больше -- это один список который выводится в 2 столбца.

 

 

4.

<h3 class="facebook">

с чего это он <h3>? 

 

5. Форма поиска отстайлена плохо. Иконка прилипает к краю в плотную. Почему она серая в начале а потом белая как на макете?

 

по css

1. http://titan.bl.ee/css/style.css -- поддерживать такой файл очень сложно. проще переписать.
2. 
плохо:
.logotype p
хорошо:
.logo-losung

3.

плохо:

.top-menu a

хорошо:

.top-menu-link {}.top-menu .link {}

3.

плохо

.slider ul

хорошо

.slider-list {}.slider .list {}

4.

плохо

.where-buy img

хорошо

.where-buy .img {}.where-buy .icon {}

А вообще этот элемент должен быть частью спрайта.

 

5.

плохо

footer {    border-top: 1px solid #d2d6d9;    margin-top: 70px;}

хорошо

.footer {}

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

 

по организации файлов

1. подключен должен быть 1 css файл (сжатый)

2. тоже самое и про js (обращаю на это внимание, но в рамках обучения это не критично)

 

в общем пока что сыровато -- требуется доработка.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 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