Создание и продвижение сатйов
8 342 225 01 68 Пермь, ул. Нефтяников, д. 27, оф. 22
Интересное и полезное

Как верстать сайты? - Подробное руководство.

Время чтения статьи: около 13 мин.
Автор:
Масалкин А.В.
Опубликовано:
31 августа 2015 г.
Просмотров:
95

Всем привет! Давненько не писал в блоге, если честно просто не хватает времени. Куча забот в офлайне, но в скором времени, думаю, все образуется, сам себе готовлю сюрприз. А сегодня я предлагаю вашему вниманию урок по верстке PSD макета.

Данный урок проходит в рамках совместной программы с Сергеем, автором блога blogohelp.ru, и его фотошоп урока — Как сделать дизайн сайта? Просто! Всем кто еще не знаком, настоятельно рекомендую ознакомиться с предоставленным материалом, все рассказано и показано до мельчайших подробностей. Надеюсь мой урок будет тоже легок в освоении.

И так приступим. В своем арсенале мы уже имеем готовый PSD макет. И для работы с ним нам понадобится следующий софт:

  1. Adobe Photoshop — с помощью его мы будем производить нарезку графики.
  2. Adobe Dreamweaver — собственно наш инструмент для всерстки
  3. Firefox + Firebug — незаменимый инструмент верстальщика, все что связано с кодом подскажет эта связка. (Я использую Adobe Photoshop CS5 и Adobe Dreamweaver CS5)

Для лучшего понимания рекомендую скачать готовый макет с версткой и ориентироваться на его код. Практически каждая строка имеет комментарий о том для чего это сделано.

Первое что нам надо сделать, это создать папку, куда будем складывать все наши файлы. У меня она располагается на диске D:urokv. В ней необходимо создать еще 2 папки image и slider. В первой будут содержаться наши изображения, во вторую мы сложим файлы, предназначенные для слайдера. Теперь открываем макет сайта в фотошопе и запускаем дримвивер. В дриме создаем html страницу, называем ее index.html и сохраняем в папку urokv.

как верстать сайты?
как верстать сайты?

Страница index.html будет представлять всю структуру нашего сайта, грубо говоря это наш каркас. Еще хочу отметить один момент, в дримвивере при создании страницы автоматически указывается DOCTYPE. Это правило html разметки. Как в другом софте не знаю, но устанавливать DOCTYPE обязательно!

Одним каркасом нам не обойтись, нам необходимо подключить к сайту файл с CSS стилями. Для этого так же создаем новый файл, но на этот раз выбираем не html а CSS

как верстать сайты?
как верстать сайты?

Называем его style. css и сохраняем в ту же папку.

Теперь давайте перейдем к процедуре подключения файла стилей к html странице. Открываем вкладку index.html в дримвивере. И над тегом title вставляем следующий код < link rel ="stylesheet" type= «text/css» href ="style.css« / >. Тем самым мы сообщаем, что данный сайт должен брать все стили из этого файла. Если хотите проверить, подключился файл стилей или нет. Давайте покрасим наш бэкграунд в черный цвет. Для этого в файле стилей обозначаем цвет у тела сайта: body {background:#000;}.

как верстать сайты?

Далее открываем index.html в браузере и любуемся черным экраном.

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

как верстать сайты?

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

как верстать сайты?

Ну и сразу же укажем размер шрифта и его тип.

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

Чтобы получить картинку нашего бэка, отключаем ненужные нам слои на макете. Я полностью отключил группы слоев SIDEBAR и CONTENT. Так же отключил Background и site-fon.

как верстать сайты?

Чтобы освободить пространство для дальнейшей нарезки. Выбираем инструмент раскройка

как верстать сайты?

и шириной в 1px на всю длину выделяем область, которая нам необходима. Как видите, я захватил не только белый фон, а так же тень которая слева и слева.

как верстать сайты?

Далее выбираем файл — сохранить для Web устройств.

как верстать сайты?

В появившемся окне выставляем следующие настройки. Сохранить в png24 и преобразовывать в sRGD.

как верстать сайты?

Для сохранения я создал папку на рабочем столе с названием нарезка, все файлы которые буду резать будут сохранятся там, после чего будет искаться необходимый и копироваться в папку с нашими изображениями для сайта. Не сохраняю сразу в папку сайта по причине того, что будет очень много мусора. Именно таким методом осуществляется нарезка файлов, в последствии они сохраняются либо в png либо jpeg. PNG использую в случаях когда необходим прозрачность, в остальных сохраняю в jpeg. Далее подробно расписывать не буду как нарезаю, буду указывать только области.

В папке с нарезками найден файл с моим бэкраундом толщиной в 1px, после чего успешно скопирован в папку с изображениями нашего сайта. Шириной он вышел в 955 px;

как верстать сайты?

Теперь возвращаемся к нашей html страничке, и между тегами body вставляем div с идентификатором page.

как верстать сайты?

Теперь назначаем бэкграунд для этого блока в стилях.

как верстать сайты?

Сразу хочу вам сказать, что div которому присваивается id в css фале помечается через #. Если же div’у присваивается class, то в стилях он помечается через .(точку). Высоту я в данный момент указываю для того, чтобы можно было видеть изменения в браузере. В последствии она уберется. Для выравнивания посередине экрана используем margin:auto и padding:auto.

Далее снова возвращаемся к нашему index.html файлу. И внутрь контейнера page, помещаем новый контейнер page-inner. Он послужит нам как внутренняя граница страницы. Для тех кто не понял объясняю подробнее. Смотрим скриншот,

как верстать сайты?

красной линией отображена граница контейнера page, синей обозначена граница контейнера page-inner. Как можете видеть, контейнер page-inner идет строго по рабочей области сайта. Его размещение сделано для того, чтобы нам в дальнейшем при размещении элементов на странице не пришлось постоянно брать в расчет расстояние до конца тени.

Ну а теперь давайте перейдем непосредственно к построению шапки. Вновь открываем фотошоп, и убираем все лишнее. Лишними на сей раз являются меню и логотип. С помощью нашего скальпеля выделяем область шапки и опять вырезаем, после чего нужный файл переносим в папочку с рисунками сайта. У меня файл называется header. В css файле прописываем ширину и высоту нашей шапки, а так же назначаем бэкграунд для шапки. Чтобы у вас не было вот таких моментов как на этом рисунке.

как верстать сайты?

В стилях нужно указать, чтобы ваш рисунок не повторялся. Для этого прописываем: background-repeat: no-repeat. И косяка, как небывало.

Далее в фотошопе включаем слой с логотипом и меню, и вырезаем их. У меня эти файлы называются logo.png и menu.jpg. Надеюсь принцип нарезки вы поняли. Логотип сохранен в png так как имеет прозрачный фон. Теперь давайте внесем изменения в наш html. Добавляем контейнеры logo и top-menu.

как верстать сайты?

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

как верстать сайты?

вы можете видеть синим цветом подсвеченную область, где будет расположен логотип. Свойство Border:0px прописывается из за того, что в некоторых браузерах отображается граница, если его нет.

Ссылки я думаю вы умеете уже размещать, так что объяснять вам думаю не стоит, что к чему. Если даже и не умеете, то разберетесь посмотрев html файл. Ну вроде бы все манипуляции с шапкой закончены, и теперь можно посмотреть что у нас получилось.

как верстать сайты?

Теперь давайте создадим блок в котором будет располагаться наша основная часть, то есть контент и сайдбар. Называем его main. Как видите из html файла, что имеется также внутренний контейнер, он создан точно с такой же целью как и page-inner. Внутрь помещаем два контейнера content и sidebar-right. Принцип думаю понятен. Везде есть внешний и внутренние контейнеры.

как верстать сайты?

Контент пока трогать не будем, а заполним правый сайдбар всем необходимым содержимым. Если взглянем на дизайн, то увидим, что в сайдбаре у нас располагаются четыре блока. Это популярное на сайте, присоединяйтесь к нам в, подписка на новости и блок с голосованием. Как можете видеть, каждый блок имеет свой цвет и градиентную заливку на месте заголовка. Именно этот градиент нам с вами нужно вырезать шириной в 1px; У меня эти файлы называются: popbac.jpg, socbac.jpg, podpisbac.jpg, golosbac.jpg. После нарезки необходимо задать наши блоки в html.

как верстать сайты?

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

как верстать сайты?

Расписывать стили здесь не буду, все комментарии можете увидеть в css файле шаблона.

Ссылки в блок с популярным вы сможете вставить сами. В блоке с популярным вы можете видеть ярлычок файликов.

как верстать сайты?

Его вам тоже необходимо вырезать. У меня это файл lipop.jpg.

Для блока присоединяйтесь к нам в, необходимо вырезать кнопки социалок. У меня это файлы: face.jpg, twit.jpg, vkont.jpg. Как размещать вы должны были уже научиться, принцип такой же как с логотипом в шапке.

как верстать сайты?

С подпиской на Rss у вас тоже не должно возникнуть проблем. По идее при использовании CMS подписка на RSS работает за счет модулей, либо вы размещаете код предоставляемый сервисом подписок, которым вы пользуетесь, в нужном месте. Но так как мы учимся верстать, я вам покажу каким образом можно сделать похожую форму. Как картинку в блоке и ссылку на Лучшее из мира моды, вы сами догадаетесь, как разместить. А вот как сделать форму я сейчас покажу. Тут трудного ничего нет, это обычный html тег. Именуется он как < input >. Более подробно про HTML теги вы можете почитать на сайте htmlbook.ru. И вообще, если хотите научиться верстке, советую познакомиться с этим сайтом очень хорошо. Ну и нам опять же понадобится в фотошопе вырезать форму ввода. У меня это файл rssinput.jpg.

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

Слайдер и поиск пока трогать не будем, а займемся за так называемые тизеры или другими словами анонсы. Из макета нам необходимо вырезать только картинки, которые отображаются в анонсе. У меня это файлы: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg. И так смотрим каким образом делается анонс.

как верстать сайты?

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

как верстать сайты?

Это сделано для того, чтобы указать размер кнопки. В общем смотрите CSS файл, там все хорошо пояснено.

Теперь переходим к созданию формы поиска, ее мы будем располагать в коде, между контейнером content и content-inner. Вырезать из шаблона нам придется только форму ввода. У меня это файл search.jpg. Как видите у меня опять есть внешний контейнер и внутренний,

как верстать сайты?

это делаю для удобства, чтобы было проще управлять элементами находящимися внутри.

Как сделать слайдер, можете почитать тут. Весь код взят от туда, просто сделана замена картинок. Необходимые файлы располагаются в папке slider.

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

как верстать сайты?

мы видим, что в левой части подвала у нас должно располагаться еще одно меню, счетчик статистики с копирайтами. А справа должен быть логотип. Ко всему прочему, футер выполнен в виде градиентной заливки, а это значит нам придется вырезать еще и бъкграунд шириной в 1 пиксель. Ну что же, вновь берем наш любимый инструмент «раскройка» и вырезаем наш логотипчик с счетчиком и с бэком. У меня это файлы: schet.jpg, footlogo.png, foot.jpg. По сути, счетчик вы будете вставлять, размещая код из самого сервиса, я же просто вставлю картинку. Задача нам понятна, переходи к ее реализации. Вот так выглядит получившийся код.

как верстать сайты?

Добиваем это все стилями, и наслаждаемся получившимся шаблоном.

Надеюсь данный урок был для вас полезен и вы что то подчерпнули для себя. Если верстка макета вас вгоняет в ступор, то не бойтесь ее. Верстать можно научиться за месяц. Это на самом деле не так трудно, как кажется на первый взгляд.

Если у кого возникли вопросы, то буду рад ответить на них.

P.S. Макет не верстался под IE 6. Я придерживаюсь принципа, если вы хотите чтобы у вас было все красиво, то обновите свой браузер.

P.S.S. Совсем забыл что не показал как устанавливать title и забыл написать, что для слайдера необходимо подключать jquery библиотеку. Но думаю вы найдете в шаблоне где это. Если все же нет, то смотрите последний скриншот!

как верстать сайты?

Ну вроде бы все! Желаю удачи в верстке!

Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных