Верстка макета сайта. Продолжаем делать сайт для заказчика
Все форматы рекламы на блоге.
Чуть больше недели назад я писал о том, как создать дизайн сайта самому и тогда я на примере рассказал об очередном сайте, который я делаю для заказчика.
Кто не помнит, вот макет:
На этот раз речь пойдёт о верстке макета сайта и дальнейшей работе над превращением обычной картинки (макета) в полноценный ресурс.
В статье «Резиновая или статичная вёрстка шаблона» уже описывал варианты для вёрстки макетов: статика с определённой шириной страницы в пикселях или динамика в виде «резиновой вёрстки» (когда сайт «растягивается»). Для данного макета я выбрал смешанную динамику (то есть растягивает и сжимается, но только до определённых размеров), несмотря на то, что макет имеет достаточно большое количество деталей и в таком случае смастерить единое целое будет проблематично.
Первое, что делается перед началом вёрстки – это формируется сетка блоков, на которые будет разделена html страница. Опытный верстальщик это делает на автомате, а новичку стоит перед началом работы поковыряться в Adobe Photoshop или даже в Paint и нарисовать границы и порядок действий.
Верстка макета сайта. Самые главные блоки
Специально для наглядности, разделил макет сайта на визуальные блоки страницы (#1 – верх с мавигацией,#2 – основной блок с контентом,#3 – футер страницы с копирайтами и счётчиком).
Верстка макета сайта. Второстепенные блоки
После того, как основной скелет страницы построен, можно делить страницу на менее крупные разделы (слои главного меню, колонки в середине страницы и многие другие):
Мне кажется, что я не ошибусь, если скажу, что большая часть верстальщиков, начинают вёрстку с фона страницы, затем переходят к верхней части и постепенно спускаются вниз по странице, формируя её полностью.
Опытный верстальщик должен добиться такого отображения html страницы, что бы оно было полностью идентично PSD макету. Несмотря на это, страница всё-таки будет отображаться по-другому – так например, Photoshop сглаживает шрифты, что недоступно для браузеров (вроде как Internet Explorer только это делает), да и сами шрифты очень часто отображаются по-другому. Иногда из-за этого даже случается небольшая «перепалка» с заказчиком, который требует максимальной точности.
Проходит несколько часов, день или даже несколько дней (в зависимости от сложности макета и опыта верстальщика) и ваша html страница готова.
Заказчик, которому я делаю сайт, не позволил работать сразу с его доменом, потому как во время работы таким образом, сайт может выглядеть «сырым» (можно подумать, что прошлый вариант кому-то мог понравится!?). Именно поэтому я решил заняться настройкой сайта на своём старом домене mr-felix.ru (можете посмотреть, что получилось).
У каждого более-менее толкового веб-мастера на компьютере установлен целый ряд браузеров: Opera, Internet Explorer, Safari, Google Chrome и Firefox. По своему опыту скажу, что самым «капризным» является IE, причём в не зависимости от версии (проценты понимает по-другому, отступы делает другие, шрифты имеют немного иные размеры), остальные же браузеры пытаются соблюдать принятые стандарты W3C и чаще всего в них страницы отображаются идентично. Другие браузеры типа Netscape Navigator, Konqueror, SeaMonkey или прочую «шалупень» учитывать не стоит – только нервы себе истрепите, а толку «как кот наплакал».
Скажу по секрету, что процесс правки html вёрстки макета сайта в финальный вид ведётся почти до конечной сдачи проекта, потому как во время работы над сайтом (настройка CMS, наполнение, тестирование) обязательно всплывут «недочёты» и ошибки (иногда даже приходится перевёрстывать части страниц).
Для создания данного сайта я решил использовать свою собственную разработку – felix CMS, которая пока находится в стадии… ммм… плохой стадии находится (поэтому скачать пока нельзя). Но заказчик «в теме» и публичная CMS для него не интересна. Что радует.
Оцените вёрстку, погуляйте по сайту и очень жду комментариев и критики!
-
Ну а сладкое советую пролистать кулинарные рецепты и сделать закладку, что бы на досуге приготовить для себя и любимого человека что-то вкусное. Эх!
Ребята, сделал! RSS лента комментариев
19 Comments → “Верстка макета сайта. Продолжаем делать сайт для заказчика”
Leave a Reply
Самая большая моя страсть - это путешествия и создания сайтов. Если первое не всегда доступно, то его можно заменить блогом...
Очень красивый сайт у вас получается. Случайно не подскажите какими книгами или видеоуроками вы руководствовались, когда только начинали учиться рисовать в фотошопе и верстать эти самые шаблоны. Если можно, то ответьте пожалуйста на почту. Заранее спасибо.
Рисовать в Photoshop на самом деле учился сам, правда в университете были какие-то простенькие уроки, но они никакого опыта не дали, только подогрели интерес к тому, что бы научиться рисовать. Чуство стиля, скорее всего, от природы (с дество любил рисовать), а вот книги они не дадут такого, максимум научат использовать инструменты самой программы, а вот пробовать рисовать макеты уже надо учиться самому.
Поэтому как ни удивительно, но ссылок на книги дать не смогу.
Что же касается вёрстки, то тут лучшим учебником является сайт http://htmlbook.ru/ как справочник и простые учебники по HTML 4.01. Как только изучите сам язык, переходите к CSS. Уже потом можно изучать отличия HTML 4.01 от xHTML 1.1 и пытаться переходить на него (более строгий и востребоанный в настоящее время). Ищите простой макет сайта на http://www.free-lance.ru (там макетов разного уровня очень много) и пытаетесь его сверстать в полноценную html страницу. Затем качаете все современные браузеры и пытаетесь добиться кроссбраузерности (то есть одинаково верного отображения страниц в них).
На самом деле секрет прост: сверстали один – не получилось, сверстали второй – получилось, но плохо, сверстали третий – уже лучше, но заказчик заброкует… а вот на 5 раз уже получится всё отлично! Можно будет искать заказчика на свои услуги.
Через несколько месяцев вы сможете увеличить стоимость свой работы с 10$ до 40$ за страницу, потом ещё больше (я беру примерно 60$ за средний макет).
Вот и всё. =)
Дизайн смотрится лучше, чем просто чпег )) Отлично тянется но моем мониторе 24′ 1920на1080.
Панков, спасибо. На самом деле там есть некоторые недостатки, я их специально не стал закрывать, что бы кто-то их нашёл. =)
Пполезный пост, спасибо. / З.Ы. У Вас в RSS потоке ошибка – «Строка 3, Столбец 2: В документах XML допускается только один элемент верхнего уровня.» Не все программы-ридеры смогут загрузить поток. h_ttp://validator.w3.org/feed/check.cgi?url=http%3A%2F%2Ffeeds.feedburner.com%2Fonlinehuligan%2Frss
CPU, чем подгружаете? У меня Opera нормально всё загружает.
Вот как раз-таки Опера (11.01) и отказалась, наотрез. А вот FeedDemon хоть и указывает на ошибку, но загружает.
У меня тоже Opera 11.01 =)
Ну я ничего дополнительного на WordPress для RSS не ставил, так что не в курсе, что случилось. Возможно, что моя лента содержит / в имени фида, поэтому такая ерунда.
Минимальная ширина не задана, наплывает всё меню друг на друга при уменьшении окна.
Еремин, всё верно. =)
Сегодня поправлю. Спасибо. Подумаю о создании подобного конкурса с призом… вот только много ли опытных тестеров среди блоггеров?
Ну опыт ведь нужно обязательно повышать .) А призы как раз будут стимулом.
«Photoshop сглаживает шрифты, что недоступно для браузеров»
справедливо для XP, на семерке все браузеры сглаживают
farik, не знал. Спасибо. У меня просто семёрка стояла минут 20. Я на неё не нашёл дров и снёс. К тому же она была beta тогда.
А что верстальщики делают после разрезания макета?
DanElectro, верстают. =)
Автор, а сколько по времени вы учились сайты верстать. Красиво.
Юрий, года 2-3, не меньше.
А почему у Вас не валидный код?
На этом сайте mr-felix.ru.
Артиом, а зачем он нужен?