Создание сайта. Нарезка шаблона
Сегодня я продолжу серию статей о создании сайта.
Мы уже обсуждали вопросы Создание сайта. Первые шаги, Создание сайта. Установка на локальный сервер, Создание сайта. Установка на хостинг.
Итак, после установки выбранного нами скрипта (для уроков буду использовать DLE), нам нужно создать свой дизайн, чтобы наш сайт не был похож на сотни других сайтов в сети.
Для создания сайта нам понадобятся графический редактор, HTML-редактор и хотя бы бызовое знание .html и .css.
Сразу скажу, что не зная основ .html и .css вы не сможете верстать дизайн.
Для начала нам нужно будет нарисовать дизайн. Сначала я хотел для урока нарисовать свой, но на это уйдет много времени, поэтому для примера верстки я взял готовый шаблон, чтобы не тратить время на его рисование. Найти уроки по рисованию дизайна вы можете на многих ресурсах в сети. Советую, если мало фантазии, брать с каждого урока какие-либо части, и рисовать их по-своему. Полностью перерисовывать нет смысла, т.к. это сделали многие до вас.
Итак, возьмем такой вот дизайн.
Скачать шаблон в формате .psd (для Photoshop) вы можете тут.
После того, как вы скачали шаблон, нужно его разрезать и вшить в код. Для чего это нужно? Почему нельзя полностью «воткнуть» все изображение? Всё достаточно просто, в этом случае дизайн будет лишь картинкой, в которой нельзя ничего изменить и ничего писать.
Поэтому изображение нужно разрезать для того, чтобы части этого изображения могли быть вшиты в код, и при добавлении новостей или любых записей, автоматически растягиваться, не выходя за размеры изображения. Опять же, резать надо в зависимости от вёрстки, которую вы собираетесь использовать. Сейчас в моде верстка с помощью div’ов, но я ее не признаю, т.к. у нее много ограничений, а отдавать дань моде я не собираюсь. Поэтому урок будет с использованием верстки таблицами. Советую объединять две верстки. Этим вы добьетесь лучшего результата.
Итак, для начала нам нужно разрезать шаблон.
Запускаем Photoshop и загружаем в него изображение.
Изображение должно быть в формате .gif или .png. Зачем это надо? Всё просто. Данны форматы поддерживают альфаканалы и прозрачность. Это значит, что весь фон будет прозрачным. Если вы будете резать в .jpg, то останется белый фон, или какой он там у вас. Соответственно, фон сайта придется делать такого же цвета, чтобы фон не мозолил глаза. Многие используют .gif, но я от него отказался, т.к. IE не очень понимает прозрачность в данном формате, и придется писать кучу кода, который повысит вес страницы. Так же данный формат имеет достаточно плохое качество и не очень хорошо отображает тени. Тем не менее, изображения в формате .png, достаточно много весят, и могут сильно перегрузить станицу. Чтобы такого не происходило, есть дополнение к Photoshop, которое позволяет сохранять изображения в формате SuperPNG. Это тот же .png, только с возможностью убирать метатеги, информацию о изображении, что позволяет снизить вес изображения даже меньше, чем .gif.
Скачать SuperPNG:
Итак, продолжим. Загрузив изображение, нам нужно его разрезать. Но как? Давайте посмотрим на само изображение.
Что мы видим? Начнем с header (шапки сайта). Тут наш логотип компании. Если мы полностью вырежем его, то нам придется делать фиксированный размер сайта, который будет по разному смотреться на различных мониторах. Но нам этого не надо, поэтому будем делать резиновый дизайн. Если мы будем делать резиновый скелет, и вырежем полностью логотип, то при сужении или расширении дизайна, он будет отображаться криво. Поэтому нам нужно вырезать лишь логотип, а остальное мы сделаем клонированием с помощью .css (работу с .css будем рассматривать в следующих статьях).
Итак, нам нужна сама надпись или логотип. Его можно получить двумя способами – сохранить только одну надпись или вырезать с частью фона. Советую сохранить только надпись, но можете делать на свое усмотрение.
Для определения точного размера в пикселях можно воспользоваться инструментом «линия».
Вверху устанавливаем нужную нам толщину, перетягиваем объект на нужный нам край и с обоих сторон ставим направляющие. Если кто-то знает более удобный вариант для измерения – буду признателен. Но пока пользуюсь этим. Давайте установим направляющие на нашей шапке.
Чтобы нам было более понятно, давайте классифицируем части нашего дизайна.
Как видите, сайт делится на шапку, сайдбар, контент и подвал. Исходя из этого и будет строиться наш дизайн и вёрстка.
Как видите, у нас много мелких деталей, многие могут сказать: «А нельзя было полностью вырезать блок?». Нет, нельзя. В этом случае макет будет статистическим, и не будет меняться в зависимости от информации, находящейся в нём. Поэтому нам нужно вырезать все маленькие детали. Вы поймете, зачем это нужно, когда мы перейдём к написанию кода.
Итак, мы отметили все, что нам нужно вырезать, и теперь пора заняться самой нарезкой. Направляющие нам помогут не выбраться за рамки нужного нам сектора. Выбираем инструмент «рамка», и выделяем нужную часть для нарезки. Теперь дважды клацаем по мышке в месте выделения, и изображение обрезается.
Точно так мы поступаем со всеми частями нашего шаблона.
Теперь у нас появилось много нарезанных частей шаблона, которые, после написания кода, станет нашим дизайном. Учтите, что надписи разделов, ссылок и т.п. резать ненужно, т.к. это текстовая информация, которая будет зависеть от настроек нашего движка и нужным нам функций.
Для более подробной инструкции по работе в Photoshop обратитесь к множеству инструкций в сети.
Так же выкладываю учебники по работе с HTML и CSS, которые понадобятся для следующей нашей статьи.
Основы PHP
Мануал по CSS
Мануал по HTML
Теги HTML
HTML для тех, кто в танке
javascript
- Если у вас нет времени для того, чтобы проводить на рынке весь день, вы можете продать авто заполнив анкету. И покупатели на ваш автомобиль найдутся сами.
- Сейчас очень выгодно приобретать недвижимость. Цены на недвижимость упали, а это нам на руку. Не упустите момент.
