Создание сайта. Нарезка шаблона

alt

Сегодня я продолжу серию статей о создании сайта.

Мы уже обсуждали вопросы Создание сайта. Первые шаги, Создание сайта. Установка на локальный сервер, Создание сайта. Установка на хостинг.

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

Для создания сайта нам понадобятся графический редактор, HTML-редактор и хотя бы базовое знание .html и .css.

Сразу скажу, что не зная основ .html и .css вы не сможете верстать дизайн.

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

Итак, возьмем такой вот дизайн.

Скачать шаблон в формате .psd (для Photoshop) вы можете тут.

После того, как вы скачали шаблон, нужно его разрезать и вшить в код. Для чего это нужно? Почему нельзя полностью «воткнуть» все изображение? Всё достаточно просто, в этом случае дизайн будет лишь картинкой, в которой нельзя ничего изменить и ничего писать.

Поэтому изображение нужно разрезать для того, чтобы части этого изображения могли быть вшиты в код, и при добавлении новостей или любых записей, автоматически растягиваться, не выходя за размеры изображения. Опять же, резать надо в зависимости от вёрстки, которую вы собираетесь использовать. Сейчас в моде верстка с помощью div’ов, но я ее не признаю, т.к. у нее много ограничений, а отдавать дань моде я не собираюсь. Поэтому урок будет с использованием верстки таблицами. Советую объединять две верстки. Этим вы добьетесь лучшего результата.

Итак, для начала нам нужно разрезать шаблон.

Запускаем Photoshop и загружаем в него изображение.

Изображение должно быть в формате .gif или .png. Зачем это надо? Всё просто. Данные форматы поддерживают альфаканалы и прозрачность. Это значит, что весь фон будет прозрачным. Если вы будете резать в .jpg, то останется белый фон, или какой он там у вас. Соответственно, фон сайта придется делать такого же цвета, чтобы фон не мозолил глаза. Многие используют .gif, но я от него отказался, т.к. IE не очень понимает прозрачность в данном формате, и придется писать кучу кода, который повысит вес страницы. Так же данный формат имеет достаточно плохое качество и не очень хорошо отображает тени. Тем не менее, изображения в формате .png, достаточно много весят, и могут сильно перегрузить станицу. Чтобы такого не происходило, есть дополнение к Photoshop, которое позволяет сохранять изображения в формате SuperPNG. Это тот же .png, только с возможностью убирать метатеги, информацию о изображении, что позволяет снизить вес изображения даже меньше, чем .gif.

Скачать SuperPNG:

superpng_v1.1_win.zip [599,37 Kb] (cкачиваний: 949)

Итак, продолжим. Загрузив изображение, нам нужно его разрезать. Но как? Давайте посмотрим на само изображение.

Что мы видим? Начнем с header (шапки сайта). Тут наш логотип компании. Если мы полностью вырежем его, то нам придется делать фиксированный размер сайта, который будет по разному смотреться на различных мониторах. Но нам этого не надо, поэтому будем делать резиновый дизайн. Если мы будем делать резиновый скелет, и вырежем полностью логотип, то при сужении или расширении дизайна, он будет отображаться криво. Поэтому нам нужно вырезать лишь логотип, а остальное мы сделаем клонированием с помощью .css (работу с .css будем рассматривать в следующих статьях).

Итак, нам нужна сама надпись или логотип. Его можно получить двумя способами – сохранить только одну надпись или вырезать с частью фона. Советую сохранить только надпись, но можете делать на свое усмотрение.

Для определения точного размера в пикселях можно воспользоваться инструментом «линия».

Вверху устанавливаем нужную нам толщину, перетягиваем объект на нужный нам край и с обоих сторон ставим направляющие. Если кто-то знает более удобный вариант для измерения – буду признателен. Но пока пользуюсь этим. Давайте установим направляющие на нашей шапке.

Чтобы нам было более понятно, давайте классифицируем части нашего дизайна.

Как видите, сайт делится на шапку, сайдбар, контент и подвал. Исходя из этого и будет строиться наш дизайн и вёрстка.

Как видите, у нас много мелких деталей, многие могут сказать: «А нельзя было полностью вырезать блок?». Нет, нельзя. В этом случае макет будет статистическим, и не будет меняться в зависимости от информации, находящейся в нём. Поэтому нам нужно вырезать все маленькие детали. Вы поймете, зачем это нужно, когда мы перейдём к написанию кода.

Итак, мы отметили все, что нам нужно вырезать, и теперь пора заняться самой нарезкой. Направляющие нам помогут не выбраться за рамки нужного нам сектора. Выбираем инструмент «рамка», и выделяем нужную часть для нарезки. Теперь дважды клацаем по мышке в месте выделения, и изображение обрезается.

Точно так мы поступаем со всеми частями нашего шаблона.

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

Для более подробной инструкции по работе в Photoshop обратитесь к множеству инструкций в сети.

Так же выкладываю учебники по работе с HTML и CSS, которые понадобятся для следующей нашей статьи.

Основы PHP

Php_book1.chm

Мануал по CSS

Css_manual_ru.chm

Мануал по HTML

Html_manual_ru.chm

Теги HTML

Html_tags.chm

HTML для тех, кто в танке

Html_tank.chm

jаvascript

jаvascript_book1.chm

  • Если у вас нет времени для того, чтобы проводить на рынке весь день, вы можете продать авто заполнив анкету. И покупатели на ваш автомобиль найдутся сами.
  • Сейчас очень выгодно приобретать недвижимость. Цены на недвижимость упали, а это нам на руку. Не упустите момент.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • 0
Andre
10 мая 2009 22:43
avatar
Очень интересная статья!
благодарим от всего коллектива Web-мастеров http://studio-life.ru/
  • 0
tra
24 мая 2009 17:51
avatar
мануалы были удалены с депозита = (
  • 0
Легион
24 мая 2009 20:54
avatar
tra, не могу найти. Как только найду на компьютере - выложу по новой.
  • 0
Venyaminich
17 июня 2009 10:35
avatar
Потом еще кажеться на резку нужно импортировать для web-устройств!?
  • 0
Легион
17 июня 2009 12:02
avatar
Venyaminich, это называется вёрстка, и она описана в дальнейших постах. Посмотрите по поиску.
  • 0
Игорь Меньшиков
1 января 2010 19:17
avatar
Люди в таких случаях так говорят - Без косы сена не накосишь. ;)
  • 0
Федор
3 апреля 2010 09:04
avatar
Супер. Ждем новых сообщений на эту же тему :)
  • 0
Doca
6 июля 2010 21:34
avatar
Многие используют .gif, но я от него отказался, т.к. IE не очень понимает прозрачность в данном формате, и придется писать кучу кода, который повысит вес страницы.
Так же данный формат имеет достаточно плохое качество и не очень хорошо отображает тени.

- фигня полная, формат gif специально был разработан для web и применим он исключительно к графике, в свою очередь jpeg применяется только для фотографий, так как имеет намного больше оттенков и цветов в отличие от gif. Именно поэтому гиф не передаст тень так как надо, это и понятно он не поддерживает многие оттенки, почему и значительно легче. но если вы станете оптимизировать фото в формат gif, оно будет весить значительно больше нежели то же фото оптимизированное в jpeg.
  • 0
Mazdak
14 марта 2012 18:51
avatar
...а если не резать готовый шаблон, а создать сразу отдельные части в фотошопе, отдельно сохранить, а потом и сверстать ?
  • 0
Легион
20 марта 2012 20:16
avatar
Mazdak, можно и так, если вы сможете все рассчитать не видя этого smile . А самое интересное, как вы будите показывать макет дизайна заказчику?
  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: