Оцените верстку первого макета.

IvanRu08 · July 17, 2013

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

<!DOCTYPE html>
<html lang = "ru">
<head>
<title>Портфолио</title>
<link href = "style.css" rel = "stylesheet" type = "text/css" />
<meta charset = "utf-8" />
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class = "header_bg">
<div class = "logo">
<img src="images/logo.png" alt = "Design Studio">
</div>
<nav class = "menu">
<ul>
<li class = "current"><a href = "#">HOME</a></li>
<li><a href = "#">ABOUT</a></li>
<li><a href = "#">WORK</a></li>
<li><a href = "#">BLOG</a></li>
<li><a href = "#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<section class = "content">
<div class = "content_bg">
<h1><img src = "images/h1.png" alt = "Name"></h1>
<div class = "con">
<img src = "images/images.png" alt = "img">
<span>Portfolio project, Jan 5th, 2010</span>
<p>Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout. Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout in Adobe Photoshop.</p>
<a href = "#"><img src = "images/read_more.png" alt = "read more"></a>
</div>
<div class = "content_footer">
<div class = "prev">
<div class = "post">
<span>BEAUTIFUL</span>
<p>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration.</p>
</div>
</div>
<div class = "prev">
<div class = "post1 ">
<span>EFFECTIVE</span>
<p>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration.</p>
</div>
</div>
<div class = "prev">
<div class = "post">
<span>FUNCTIONAL</span>
<p>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration.</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class = "footer_bg">
<div class = "copyright">2010 © Fictional Design Studio. Design by Tomas Laurinavičius.</div>
<div class = "twitter">
<span><a href = "#">Follow us on Twitter</a></span>
<img src = "images/twitter.png" alt = "twitter">
</div>
</div>
</footer>
</body>
</html>

*{margin: 0; padding: 0;}
header, footer {display: block;}
body {margin: auto; width: 1000px; height: 800px; background: #ededed url(images/body_bg.jpg) no-repeat center;}
img {border: 0;}
/**Шапка**/
.header_bg {height: 124px; background: url(images/header_bg.jpg) no-repeat;}
.logo img {left: 120px; position: relative; top: 25px;}
/**Меню**/
nav.menu ul {margin-left: 467px; margin-top: -39px;}
nav.menu ul li {list-style-type: none; display: inline-block; padding: 8px 16px; }
nav.menu ul li a {font-family: Myriad Pro, serif; font-size: 18px; color: #959595; font-weight: bold; text-decoration: none;}
nav.menu ul li.current {background: rgba(0,0,0,0.5); border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding: 7px 16px; color: #d2d2d2; }
nav.menu ul li:hover {background: rgba(0,0,0,0.5); border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding: 7px 16px; color: #d2d2d2; }
.content_bg {width: 800px; height: 382px; background: url(images/content_bg.png) no-repeat; margin-top:19px; margin-left: 100px;}
.content_bg .con img {margin-top: 22px; margin-left: 30px; box-shadow: 2px 1px 5px 2px #203548;}
.content_bg .con span {font-family: Arial; font-size: 16px; font-weight: bold; margin-left: 17px; vertical-align: 197px;}
.content_bg .con p {font-family: Arial; color: #fff; font-size: 12px; line-height: 24px; padding-left: 303px; padding-right: 267px; margin-top: -191px; margin-left: -16px;}
.content_bg h1 img {margin-top: 20px; margin-left: 31px;}
.content_bg .con a img {border: 0; box-shadow: none; margin-top: -20px; margin-left: 171px; margin-top: 4px;}
.prev {display: inline-block;}
.prev .post {margin-left: 17px; position: relative; top: -20px;}
.prev .post1 span {margin-left: 17px;}
.prev .post p {margin-top: 9px; width: 252px; font-size: 12px; color: #191919; line-height: 20px; font-family: Arial;}
.prev .post1 p {margin-left: 18px;width:221px;margin-top: 9px; font-size: 12px; color: #191919; line-height: 20px; font-family: Arial;}
.prev .post span {font-family: Myriad Pro, serif; font-size: 24px; color: #191919; letter-spacing: -1px; vertical-align: -35px;}
.prev .post1 span {font-family: Myriad Pro, serif; font-size: 24px; color: #191919; letter-spacing: -1px; vertical-align: -35px;}
.content_footer {width: 800px;}
/**Футер**/
footer {position: relative; top: 204px;}
.footer_bg {height:71px; background: url(images/footer_bg.jpg) no-repeat;}
.copyright {font-family: Arial; font-size: 12px; color: #959595; margin-left: 120px; padding-top: 29px;}
.twitter {margin-left: 645px; margin-top: -57px;}
.twitter span a {text-decoration: none; color:#d4d7dc;}
.twitter span a:hover {color: #878884;}
.twitter span {display: inline-block; background: #000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: rgba(0,0,0,0.5); font-family: Arial; font-size: 12px; color:#d4d7dc; padding: 6px 8px;}
.twitter img {position: relative; bottom: -23px; left: 8px;}

Хорошо отображается в ie 8-9, хроме, мозиле. В опере не смотрел. Но вот в ie7 ужас! Может кто подскажет, как исправить? Заранее спасибо!

exeto · July 17, 2013

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

IvanRu08 · July 17, 2013

нет, бесплатные хостинги я знаю, щас залью. Спасибо за подсказку.

IvanRu08 · July 17, 2013

http://ivanru08.hut2.ru/

exeto · July 17, 2013

1. Браузер не понимает в какой кодировке открывать файл, судя по всему из-за пробелов перед и после равно в элементе meta. (Пробелов не должно быть)

2. Одиночные теги в HTML5 можно не закрывать.

3. В элементе link, опять же в HTML5, можно не писать атрибут type.

4. Разделяйте два слова в class/id дефисом.


<a href = "#">ABOUT</a>

5. Заглавные буквы делайте посредством CSS

6. Кнопка в меню кликабельна, только там где текст.

7. Заголовок нужно писать текстом, а не картинкой. Какой тогда смысл его в h1 всовывать.


</textarea></form></title></comment></a></div></span></ilayer></layer></iframe></noframes></style></noscript>
</table></script></applet></font>

8. Вот это непонятно что и скрипты под закрывающим элементом html.

9. Футер судя по всему должен быть прибит к низу.


*{margin: 0; padding: 0;}

10. Лучше использовать ресет Мейера, если почитаете холиворы умных людей, тоже придете к этому. Лучше конечно вообще не использовать.

11. Ну и стили в строчку, поставьте себя на место, что вам придется поддерживать такой код.

12. В ie 7 верстка сильно ломается.

Edited July 17, 2013 by exeto

cris7iano · July 17, 2013



<a href="#">

<img alt="read more" src="images/read_more.png">
</a>

Как по мне,кнопку "MORE PROJECTS" лучше сделать самому,а не вставлять картинку

Edited July 17, 2013 by cris7iano

saiidr · July 17, 2013

Как по мне,кнопку "MORE PROJECTS"

Согласен =) А так же можно сделать в лого текст и were creative...,и лого можно мне кажется в css спрятать,да и смысл уже в картинке если есть див с классом ? И можно сделать клибальным .

И да,не знаю в чём дело,но у меня появляется скролинг справа (по вертикале),хотя не чего не скролит.. разрешение 1600x900

IvanRu08 · July 17, 2013

1. Браузер не понимает в какой кодировке открывать файл, судя по всему из-за пробелов перед и после равно в элементе meta. (Пробелов не должно быть)
2. Одиночные теги в HTML5 можно не закрывать.
3. В элементе link, опять же в HTML5, можно не писать атрибут type.
4. Разделяйте два слова в class/id дефисом.
<a href = "#">ABOUT</a>
5. Заглавные буквы делайте посредством CSS
6. Кнопка в меню кликабельна, только там где текст.
7. Заголовок нужно писать текстом, а не картинкой. Какой тогда смысл его в h1 всовывать.
</textarea></form></title></comment></a></div></span></ilayer></layer></iframe></noframes></style></noscript>
</table></script></applet></font>
8. Вот это непонятно что и скрипты под закрывающим элементом html.
9. Футер судя по всему должен быть прибит к низу.
*{margin: 0; padding: 0;}
10. Лучше использовать ресет Мейера, если почитаете холиворы умных людей, тоже придете к этому. Лучше конечно вообще не использовать.
11. Ну и стили в строчку, поставьте себя на место, что вам придется поддерживать такой код.
12. В ie 7 верстка сильно ломается.

1. Да, спасибо за подсказку, уберу.

2. Привык закрывать все html теги.

6. Исправлю.

7. Как можно заметить заголовок смотрится, как немного вдавленный с снизу у букв есть белый цвет + шрифт Myriad Pro c каким-то начертанием Bold Condenced. Такой шрифт можно воспроизвести посредством Css? Если можно, то был бы очень рад.

8. О каких скриптах идет речь?

9. Нет, так как фон у меня фикс.размеры. Причем не подлежит повторению по y, т.к не стыкуется нормально. А если я прижму подвал к низу, то он уедет на границу фона.

10. Спасибо, почитаю.

12. Вот я и просил подсказать почему верстка разъезжается в ie7.

Спасибо огромное за оценку!

Как по мне,кнопку "MORE PROJECTS"
Согласен =) А так же можно сделать в лого текст и were creative...,и лого можно мне кажется в css спрятать,да и смысл уже в картинке если есть див с классом ? И можно сделать клибальным .
И да,не знаю в чём дело,но у меня появляется скролинг справа (по вертикале),хотя не чего не скролит.. разрешение 1600x900

См. сообщение выше п.7. Странно у меня скрола нет.

IvanRu08 · July 18, 2013

Аааа, блин. Почему когда на локалке тестил код он был валидным, а щас 24(!) ошибки! В чем может быть дело?

saiidr · July 18, 2013

Странно у меня скрола нет.

Вот почитай про текст,в низу http://habrahabr.ru/post/154211/ , http://worldwebinfo....-тень-в-тексте/ я думаю не обязательно на 100% делать дословно,можно на 90% но при это :

1. Ты всегда сможешь изменить текст,а не картинкой всё делать.

2. Уменьшится вес сайта,картинка больше весит,чем текст.

Myriad Pro c каким-то начертанием Bold Condenced.

Если не ошибаюсь,то любой шрифт можно подключить,а так найди похожий шрифт,но более известный и читабельный и подключай .

Edited July 18, 2013 by saiidr

IvanRu08 · July 18, 2013

Странно у меня скрола нет.
Вот почитай про текст,в низу http://habrahabr.ru/post/154211/ , http://worldwebinfo....-тень-в-тексте/ я думаю не обязательно на 100% делать дословно,можно на 90% но при это :
1. Ты всегда сможешь изменить текст,а не картинкой всё делать.
2. Уменьшится вес сайта,картинка больше весит,чем текст.
Myriad Pro c каким-то начертанием Bold Condenced.
Если не ошибаюсь,то любой шрифт можно подключить,а так найди похожий шрифт,но более известный и читабельный и подключай .

Спасибо огромное за ссылки. Раньше не знал про свойство text-shadow. Остается нерешенным вопрос с версткой в ie7

Edited July 18, 2013 by IvanRu08

exeto · July 18, 2013

Аааа, блин. Почему когда на локалке тестил код он был валидным, а щас 24(!) ошибки! В чем может быть дело?

Потому что выбрали голимый хостинг, он своего говнокода добавил. Теперь понятно откуда те скрипты взялись, про которые вы ничего не знаете. Используйте github или free.timeweb.ru. Еще Amazon AWS дает Micro Instance на год бесплатно, не знаю как он правильно классифицируется, VPS тип.

7. Как можно заметить заголовок смотрится, как немного вдавленный с снизу у букв есть белый цвет + шрифт Myriad Pro c каким-то начертанием Bold Condenced. Такой шрифт можно воспроизвести посредством Css? Если можно, то был бы очень рад.

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

Edited July 18, 2013 by exeto

exeto · July 18, 2013

2. Уменьшится вес сайта,картинка больше весит,чем текст.

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

Zverushka · July 18, 2013

Теперь понятно откуда те скрипты взялись, про которые вы ничего не знаете. Используйте github или free.timeweb.ru.

Подскажите, а как использовать гитхаб как хостинг? Он предоставляет такие услуги? Или можно просмотреть свои страницы в специальном режиме там?

exeto · July 18, 2013

Подскажите, а как использовать гитхаб как хостинг? Он предоставляет такие услуги? Или можно просмотреть свои страницы в специальном режиме там?

Создаете репозиторий с именем name.github.io, пушите туда свои статические файлы. Можно привязать домен, добавив файл CNAME, в котором напишите домен который хотите прикрутить. И в админке домена CNAME запись на name.github.io

Вот мой

Edited July 18, 2013 by exeto

Zverushka · July 18, 2013

Подскажите, а как использовать гитхаб как хостинг? Он предоставляет такие услуги? Или можно просмотреть свои страницы в специальном режиме там?
Создаете репозиторий с именем name.github.io, пушите туда свои статические файлы. Можно привязать домен, добавив файл CNAME, в котором напишите домен который хотите прикрутить. И в админке домена CNAME запись на name.github.io
Вот мой

А какую папку надо создать на своем компьютере, чтобы из нее обновлять репозиторий?

IvanRu08 · July 19, 2013

Ребят, почему у меня меню не выравнивается по горизонтали в ие7-8? Блин, достали уже эти браузеры! Вот код:

<body>
        <div class = "conteiner">
            <header>
                <div class = "top-border"></div>
                <div class = "header-bg">
                    <div class = "logo">
                        <a href = "#"><img src = "images/logo.png" altv = "logo"></a>
                    </div>
                    <nav class = "menu">
                        <ul>
                            <li class = "active"><a href = "#">Home</li></a>
                            <li><a href = "#">Full Width</li></a>
                            <li><a href = "#">Arhives</li></a>
                            <li><a href = "#">Portfolio</li></a>
                            <li><a href = "#">Blog</li></a>
                            <li><a href = "#">Contact</li></a>
                        </ul>
                    </nav>
                </div>
            </header>
        </div>
    </body>

body {width: 1150px;
    height: 3000px;
    background: url(images/body-bg.jpg) no-repeat;
    margin: auto;}
@font-face {font-family: ProximaNova-Semibold;
    src: url(fonts/ProximaNova-Semibold.otf)}
/**Шапка**/
header .top-border {height: 15px;
    background: url(images/border-top.jpg) no-repeat center;}
.header-bg {height: 169px;
    width: 100%; background:url(images/header-bg.jpg) no-repeat center;}
.logo img {left: 93px;
    position: relative; top: 33px;}
nav.menu ul {text-transform: uppercase; font-size: 12px; list-style-type: none; margin-left: 448px; margin-top: -1px;}
nav.menu ul li {
    display: inline;
    font-family: ProximaNova;}
nav.menu ul li a {text-decoration: none;
    color: #fff;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
    padding: 6px 21px;
    font-size: 12px;}
nav.menu ul li.active a {background: #1e1d1c;
    padding: 6px 21px;
    border-radius: 4px;
    -moz-border-radius:4px;
    -webkit-border-radius:  4px;
    box-shadow: 1px 1px rgba(255, 255, 255, 0.07

)}

Плиз, помогите, срочно!

exeto · July 19, 2013

Подскажите, а как использовать гитхаб как хостинг? Он предоставляет такие услуги? Или можно просмотреть свои страницы в специальном режиме там?
Создаете репозиторий с именем name.github.io, пушите туда свои статические файлы. Можно привязать домен, добавив файл CNAME, в котором напишите домен который хотите прикрутить. И в админке домена CNAME запись на name.github.io
Вот мой
А какую папку надо создать на своем компьютере, чтобы из нее обновлять репозиторий?

Как я понимаю, у вас git уже стоит. Просто в любой папке выполните git clone https://github.com/e...o.github.io.git, к примеру. Так создается папка exeto.github.io, записываете в нее нужные файлы, индексируете, коммитите и пушите обратно. Лучше всего разобраться в основах гита хотя бы. Сам сейчас этим занимаюсь.

Edited July 19, 2013 by exeto

Sign In

Оцените верстку первого макета.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information