Из PSD в HTML
Пришло время научиться верстать макеты. Допустим у нас имеется psd исходник. Как создавать классы для тегов мы знаем, шаблоны для фиксированного и резинового макета у нас уже имеются. Если нет, то скачать их можно из прошлых уроков. И так, вот наш psd исходник:
Данный макет является фиксированным, имеет две колонки. Скачать его в формате *.psd можно здесь. Этот макет сделан в программе Adobe Photoshop CS5. Для быстрого старта берем заготовку для фиксированного макета с двумя колонками:
Такой шаблон можно скачать здесь.
В этом уроке мы установим размеры для шапки и колонок, и сделаем фон.
Размеры
Откроем макет в программе Adobe Photoshop, и узнаем ширину основной части. Для этого раскрываем папку Menu в панеле Layers:
Далее мы выделяем слой с меню, зажимаем клавишу Ctrl и кликаем мышью на красный квадрат, если у вас Adobe Photosop CS3, на серую область справа от квадрата, если у вас CS5. После этого меню будет выделено пунктирной линией:
Далее нажимаем клавишу f8, чтобы открыть панель INFO, и смотрим размеры блока в пикселях. Если у вас стоят единицы измерения не пиксели, то кликаем два раза по линейке:
Откроется окно с настройками, и внем нужно указать пиксели (и для rulers, и для type):
Нажимаем ОК, снова выделяем панель меню и смотрим размеры в панеле INFO:
Таким же образом измеряем остальные элементы для верстки. (В видео материале показан наименее удобный метод измерения объектов. Видео Панель INFO)
Далее нам нужно сделать картинку для фона, чтобы размножить ее на веб-странице. Советую слишком маленьку не делать, так как на то, чтобы замастить всю область страницы понадобится гораздо больше ресурсов, чем на более крупный фрагмент фона. Возьмем такой кусок:
Назовите его bg, и сохраните в формате .*gif или *.jpg, у меня в jpg. File > Save for Web & Devices... Далее выбираем необходимы параметры: расширение, качество. Нажимаем Save, и сохраняем. Все изображения сохраняйте в отдельную папку, например, в папку images.
Дальше открываем файл со стилями, для тега body устанавливаем в виде фона нашу картинку, а для блока .fix устанавливаем ширину 1023px, и убираем фон:
Папка с изображениями должна лежать в том же месте, где и файл со стилями. Сохраняем изменения. Смотрим результат. У нас должен появиться фон, на всю страницу, так как мы указали значение repeat, т.е. картинка будет повторяться и по горизонтали, и по вертикали.
Видеоматериал по этому уроку:
Источник: http://psd-html-css.ru/css/iz-psd-v-html
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.