Шаблон сайта коммуникации HTML, CSS, Шрифты, Photoshop (psd), 2 страницы

Содержание

Все для дизайнера

Одностраничные шаблоны веб-сайтов довольно популярны среди веб-дизайнеров. Они обычно используются для целевых шаблонов страниц, презентационных веб-сайтов или других вещей, которые не требуют большого количества часто обновляемого контента. . Если вам нужно создать сайт на одну страницу для клиента, то эти высококачественные бесплатные одностраничные шаблоны веб-сайта PSD и html наверняка Вам пригодятся! Выбирайте, скачивайте и подстраивайте под себя!

1. Startuprr

Startuprr — очень хороший одностраничный шаблон PSD, который вы можете легко редактировать, благодаря организованным слоям.

2. Bak One

Bak One — это бесплатный шаблон для веб-дизайна с плоской адаптацией. Bak One, разработанный с хорошей цветовой гаммой и хорошим потоком элементов.

50 Бесплатных Шаблонов Сайтов на HTML5 и CSS3

Свежие бесплатные шаблоны сайтов 2020 г. на HTML5 и CSS3. Любой шаблон html5 css3 можно скачать как для личного пользования, так и для коммерческих проектов. Тематика шаблонов самая разная. Здесь и шаблоны портфолио, шаблоны корпоративных сайтов, лендинги (целевые страницы), шаблоны сайтов услуг, шаблоны блогов и фотогалерей. См. также HTML шаблоны на русском.

Все представленные шаблоны для своего сайта построены на современных версиях HTML5 и CSS3. Кроме того, авторы применяют такие модные фишки, как плоский дизайн, отзывчивый дизайн, адаптивная верстка, слайдеры на jQuery, анимация на CSS3 и пр. То есть, если вы ищете шаблон мобильного сайта, то можете выбрать любой из представленных. Красивые html5 шаблоны 2020, хоть и бесплатны, но выглядят на уровне премиум-класса.

Здесь вы найдете более 50 бесплатных адаптивных шаблонов сайтов высокого качества на HTML5 и CSS3, которые можно использовать как для новых сайтов, так и для переделки уже существующих. Стильные шаблоны сайтов html5 — это то, что вам нужно!

Обновлено 12.03.2020: Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.

1. Snow — бесплатный шаблон лендинга на HTML5 и CSS3

Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron — штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.

2. Sima — шикарный коммерческий шаблон сайта

Этот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!

3. White — прекрасный шаблон одностраничника!

Отличительная особенность шаблона сайта White — два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!

4. Platz — бесплатный HTML5 шаблон сайта на основе сетки

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

5. Mart eCommerce — прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерции

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

6. Nava — эффектный HTML5 и CSS3 шаблон для творческих сайтов

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

7. Box Portfolio — уникальный творческий шаблон сайта на HTML5 и CSS3

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

8. Mountain King — популярный и функциональный HTML5 и CSS3 шаблон сайта

Горная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.

9. Beauty Spa — классный шаблон сайта на HTML5 и CSS3 для спа-салонов

Beauty Spa — отзывчивый шаблон сайта, имеющий множество функций, идеально подходящих для сайтов спа-салонов, оздоровительных или фитнес-центров, сайтов о йоге или даже парикмахерских. Отличная читаемость шрифтов и ненавязчивый минимализм.

10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3

Bent — великолепный бесплатный шаблон сайта на html5 и css3. Отзывчивый дизайн, CSS3 анимация, параллакс прокрутка, настраиваемая навигации и прочие вкусняшки. Это чистый дизайн шаблона для сайтов, которые хотят использовать сбалансированную конструкцию, чтобы гарантировать, что посетители будут наслаждаться внешним видом сайта, и в то же время четко видеть его основное содержание.

11. Triangle — бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3

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

12. Future Imperfect — блестящий шаблон сайта для творческих людей!

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

13. Bodo — прекрасный шаблон для персонального сайта

Bodo — красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.

14. Lens — идеальный HTML5 шаблон сайта для фотографов

Фотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное — крупно! Редкий шаблон сайта отвечает этим требованиям. Lens — один из таких шаблонов сайта фотографа.

15. Spectral — уникальный шаблон сайта ручной работы на HTML5 и CSS3

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

16. Oxygen — одностраничный HTML5 и CSS3 шаблон сайта

Oxygen — удобный и уникальный шаблон для бизнес сайта. Современный плоский дизайн, адаптивная верстка. Наример, этот шаблон идеально подойдет для сайта о мобильных приложениях или мобильной технике.

17. Mobirise Bootstrap — совершенный бесплатный шаблон сайта на HTML5 и CSS3

Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.

18. La Casa — красивый и бесплатный HTML5 шаблон для сайта недвижимости

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

19. Drifolio — стильный HTML5 шаблон сайта для портфолио

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

20. Pluton — яркий и стильный шаблон для одностраничного сайта

Pluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.

21. SquadFree — профессиональный шаблон одностраничного сайта на HTML5

Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.

22. Sublime — завораживающий шаблон сайта на HTML5 и CSS3

Sublime — чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.

23. Timber — необычный и красивый HTML5 и CSS3 шаблон сайта

Timber — свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ — главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.

24. E-Shopper — лучший шаблон сайта для электронной коммерции

E-Shopper — прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.

25. Magnetic — бесплатный HTML5 и CSS3 шаблон для фотосайта

Совершенно потрясающий HTML5 и CSS3 шаблон для создания фотосайта или портфолио дизайнера, иллюстратора или художника. Этот шаблон поднимает планку профессиональных шаблонов на новый уровень! Отзывчивый дизайн, отличная поддержка всех видов устройств отображения, легкая и удобная навигация и многое другое.

26. Mabur Portfolio — прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3

Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!

27. Modern Bootstrap HTML5 — бесплатный одностраничный шаблон сайта

Этот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.

28. Infusion — стильный одностраничный шаблон сайта на HTML5 и CSS3

Infusion — это прекрасный пример шаблона сайта в стандартах HTML5 и CSS3, который специально разработан для создания бизнес портфолио. Богатая функциональность этого шаблона позволяет эффективно работать с клиентами и привлекать новых.

29. Yebo — корпоративный шаблон сайта на HTML5 и CSS3

Этот высококачественный шаблон сайта в плоском стиле прекрасно подойдет для любого корпоративного сайта. Адаптивный дизайн, масса настроек и возможностей для редактирования.

30. Twenty — эффектный HTML5 и CSS3 шаблон сайта с параллаксом

Этот уникальный и очень красивый шаблон сайта с эффектом параллакса не оставит никого равнодушным. Одностраничный шаблон построен на чистом HTML5 и CSS3 с адаптивной версткой, впечатляющими фонами, поддержкой социальных медиа и пр.

31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на Bootstrap

Urbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.

32. Design Showcase — HTML5 шаблон сайта для портфолио

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

33. Mamba One — простой и стильный шаблон сайта на HTML5 и CSS3

Mamba One — это пример простого, но стильного шаблона сайта для создания одностраничника. Совместим со всеми современными браузерами и везде будет отображаться адекватно.

34. KreativePixel — бесплатный шаблон сайта для фотографов

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

35. Retina Ready Responsive App — бесплатный шаблон лендинга на HTML5 и CSS3

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

36. Brushed — отзывчивый HTML5 и CSS3 шаблон сайта на движке Bootstrap

Brushed — отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).

37. Big Picture HTML5 и CSS3 шаблон сайта

Добро пожаловать на Big Picture! Этот адаптивный шаблон сайта на HTML5 прекрасно подойдет всем творческим людям, которым есть что показать, и показать это крупно и эффектно на своем сайте. Кроме того, в шаблоне применена отличная анимация.

38. Tesselatte — бесплатный отзывчивый шаблон на HTML5 и CSS3

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

39. Overflow — уникальный шаблон сайта на HTML5 и CSS3

Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.

40. Runkeeper — отзывчивый и очень красивый шаблон сайта

Runkeeper — бесплатный, отзывчивый и очень красивый шаблон сайта. Его можно использовать для сайта любой тематики. Блестящий стиль и четкие шрифты, адаптивный дизайн и впечатляющие детали шаблона. Все работает на вас!

41. Pinball Responsive Grid Style — отличный шаблон сайта на основе сетки

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

42. Prologue — чистый шаблон одностраничного сайта на HTML5 и CSS3

Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы — просто идеальное сочетание!

43. Helios — современный шаблон сайта на чистом HTML5 и CSS3

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

44. Telephasic — бесплатный и отзывчивый шаблон сайта на HTML5

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

45. Strongly Typed — очень красивый шаблон сайта в стиле полу-ретро

Новый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него — очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре.

46. Striped — чистый, красивый и функциональный шаблон сайта HTML5 и CSS3

Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева — по вашему желанию).

Илон Маск рекомендует:  flex-direction в CSS

47. Parallelism — необычный и стильный шаблон сайта на HTML5 и CSS3

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

48. Miniport — полностью отзывчивый HTML5 шаблон сайта в стиле минимализма

Отличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.

49. Verti — просторный и свободный отзывчивый шаблон сайта на HTML5

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

50. ZeroFour — впечатляющий и стильный шаблон сайта на HTML5 и CSS3

И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта — ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!

Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!

Добавьте в закладки, чтобы потом быстро найти.

ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу». Будет полезно.

Конвертировать онлайн PSD шаблон в HTML шаблон сайта

Здравствуйте, не так давно я бродил по просторам интернета, что в общем не такая уж и редкость, в поисках вдохновения. Посещал различные сайты: с шаблонами, уроками и прочими тематическими материалами. Мой проход близился к концу, как я попал на первый взгляд совсем неприметный сайт с громкий и кричащим названием: Psd2Html Converter. Скажу так, я несколько раз встречал подобный сервис (о его названии можно сделать предположение, что он делает), но они были: платные и давали ужасный результат.

И так, сайт Psd2Html Converter — это автоматическая верстка сайта из Photoshop дизайна, так заявляет сам разработчик. Я скажу иначе: это онлайн сервис, которые помогает преобразовывать PSD формат в HTML шаблон сайта с файлами CSS.

Если говорить о качестве, то я остался весьма удивлен, приятно удивлен. У меня на PC было несколько довольно сложных и хороших макетов я и решил проверить на них. Буквально через минуту я получил результат и поверьте — хороший результат. Конечно, человек бы сверстал лучше. Но вместо того чтобы верстать целый день этот шаблон с нуля, я за час его доработал и адаптировал. Качество верстки мне понравилось. Сервис отлично понимал где текст а где картинка. Этого было достаточно, чтобы я добавил этот сайт к себе в закладки, но ярешил провести еще один небольшой тест: закинул PSD шаблон сайта одно из начинающих дизайнеров. Верстка PSD шаблона была ужасная и нелогичная и как я удивился когда сервис все равно умудрился сделать из этого хоть что-то человеческое.

Пока этот сервис бесплатный, но я не могу вам гарантировать что он будет таковым всегда, (точнее разработчик говорит, что до 02.10.2012 акция — сервис работает в бесплатном режиме!), потом услуга будет платной: ориентировочная цена 3-4$ за одну конвертацию, при всяких там программах возможны скидки, но об этом лучше читать на сайте разработчика.

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

Просмотров: 33688 | Дата публикации: 31.03.2012

Дизайн и Графика — Все для Вашего творчества

— Birva Design v1.0 — Creative One Page Theme — 7166530

BIRVA DESIGN : creative one page theme is a vibrant, responsive one page parallax, Black & white UI design, html5 loaded with animation and jquery plugins. It is easy to customize and well documented to suit your needs. Theme suitable for personal, corporate or creative use and it can be perfectly viewed across all devices and browsers.

— Westeros Custom Clothing Responsive HTML Template (Update: 1 November 19) — 14119590

18 HTML Files | 6 Monster Illustrations Included! (Plus Shipping Van) | Made with Photoshop Vectors for easier customization | 9000x4800px Monsters Texture Included | 3 Default Avatar Faces Included | Fully Responsive | Photos NOT INCLUDED

Самые покупаемые товары года с АлиЭкспресс!

— Mozzarella — HTML5 and CSS3 Cafe Bar Template (Update: 1 November 19) — 9741023

24 HTML Files | 26 PSD Files Included | Functional Contact Form | Fully Responsive | Boxed and Wide Versions | Very Well Documented | Easy to Cusomize

— Red Samurai HTML5 and CSS3 Responsive Template (Update: 1 November 19) — 10012709

26 HTML Files | PSD Files Included ($14 Value) | Fully Responsive Design | Functional Contact Form | Easy to Customize | Images NOT INCLUDED (Links in Documentation) | Font links in Documentation

— The Bebop Anime and Comic HTML Convention Template (Update: 1 November 19) — 10330087

14 HTML Files, 2 PHP Files | Fully Responsive Design | Functional Timeline Plugin Included! | Functional Contact Form | Countdown, Accordion and Tabs Included | Google Fonts Used | 14 PSD Files Included! | 8 Illustrator Flat Icons Included! | Models and Images not Included (Links in File) | Help Documentation

Полезный материал для дизайнеров и обычных пользователей

— Hogo v2.0 — Clean Multipurpose Responsive Bootstrap Simple Admin Panel Template — 23468683

Hogo – Clean Multipurpose Responsive Bootstrap Simple Admin Panel Template. This Template Includes 2000+ HTML Pages & 50+ Plugins. It can be used for different various of 5 Dashboards.It Inlcudes Advanced Form Elements, Different Styles of Widgets etc.. It has super clean user interface, customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design your admin. No Need to do hard work for this admin dashboard template customization. It should be helpful to save your time. Once you purchase This Template you will be enabled to get free download of all lifetime free future updates. it is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart devices

Самые покупаемые товары года с АлиЭкспресс!

— CRE8 v1.0 — Creative Agency HTML Template — 26 September 19 — 24683896

Epic design that is extremely different than other templates, it is a new approach of presenting a creative agency. The bold typeface and obvious elements, will bring feelings of confidence and high abilities. Unique multi-colors.

— Calia v1.0 — Business Consulting HTML Template — 24920497

Calia is a modern business template with a clean, contemporary and attention-grabbing design. The template design is driven by minimalist and unique sections. With this template pixel-perfect layout and neat sectioning, it will help you create a professional-looking Business Consulting website.

— iSOON — Ideal Coming Soon Template (Update: 11 August 18) — 19669492

Using iSOON is truly a full creative experience. Ergonomy and square vision help you take full advantage of its capabilities and enhance the presentation of your current or next project. Showcase your work/project with this innovative HTML template and enjoy a clear and intuitive experience for your visitors. The talent of this template resides in its great mix of information at the right place and sleek design. Polyvalent, elegant, crafted carefully for an intuitive experience. Exclusive in all the ways as well, offering a range of unique interactions, 10 pre-made versions, a solid foundation under Bootstrap 3 and a fast support in English & Francais. iSOON has been built with the Framework Bootstrap 3, responsive on every screens from phone to TV, easy to customize, HTML5 verified 100% by the W3C, CSS3, SASS.

— Our Church v1.2 — Church Responsive HTML5 Website Template — 8546860

Church Website Template – Our Church is a responsive church template can be useful for churches, charity, non-profit or Prayer group. Featues like Bulletin, Programs, Events etc. Our Church website template has many intutive features for churches, charity or other ngo non-profits. Based on Latest Bootstrap framework 3.2.0 with Mobile first approach. 18+ HTML Pages: home, about, Ministry, Sermons, Image Gallery, Video Gallery, Blog list, Blog single, Events & Programs, Event Single, Working Event Calendar with Google calendar Integrated, Charity & Donations, Prayers and Worships, FAQ, Shortcodes, Full Width, Left Sidebar, Contact us.

Самые покупаемые товары года с АлиЭкспресс!

— Payne v1.0 — Backpack eCommerce HTML Template — 24919441

Payne – Backpack eCommerce HTML Template is a modern HTML template with elegant white background. It is a vast template with the best quality of design and features. You can set the best-selling online home for your backpack shop with Payne. However, Payne brings 2 Unique Home Versions, 8 Shop Pages, 12 Single Product Variations and 5 amazing Blog Pages totaling to 40 HTML pages. This Bootstrap 4 template is made with Sass too. Moreover, Payne has Font Awesome Icon, Google font, Ajax Contact Form, W3C Validate Code, Well Documentation and No Console Error. In addition, this template is developed with clean codes that are highly SEO optimized to boost your business up. Furthermore, Payne is a device-responsive and Cross-Browser compatible website template. It can fit the layouts in any device size very efficiently. We will provide you with the further updates for free. Not a single obstacle waits for you if you buy Payne – Backpack eCommerce HTML Template.

Шаблон сайта коммуникации: HTML, CSS, Шрифты, Photoshop (psd), 2 страницы

В данной статье речь пойдёт о сайтах, которые разработчики создают вручную, т. е. верстают.

Статья предназначена для пользователей, знакомых с HTML и CSS. Также желательно знать хотя бы основы Adobe Photoshop

Одним из этапов создания реального сайта, является создание PSD шаблона. Можно ещё встретить такие названия как макет, дизайн или исходник.

Шаблон заказывается дизайнеру. Дизайнер рисует макет в программе Adobe Photoshop и сохраняет его в формате PSD.

Что такое PSD формат?

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

А теперь можно представить ситуацию, при которой фигурки вырезали, разложили на листе в нужных местах, но ещё не приклеили. Так вот PSD формат файлов, можно сравнить с аппликацией, на которую ещё не приклеили фигурки, но расположили их в нужном порядке.

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

Вот макет страницы, которая будет создана.

После того как у нас есть готовый шаблон в форматеPSD можно перейти непосредственно к вёрстке

  1. Создать папку, в которой будет храниться вёрстка, например «Сайт».
  2. В папке «Сайт» создать папку для изображений, например img.
  3. В папке «Сайт» создать папку для стилей, например css.
  4. Теперь необходимо запустить программу Adobe Photoshop и в ней открыть psd файл. Отсюда необходимо «вытащить» все изображения, которые будут использоваться на сайте.

Здесь необходимо обратить внимание на кнопку «Слои». На рисунке она выделена красным овалом.

Это кнопка включает и выключает окошко со слоями. Слои – это и есть те самые не склеенные детали аппликации. Слои для удобства распределены по папкам, которые можно сворачивать и разворачивать. Принцип работы почти тот же что и в проводнике Windows.

Первым делом все папки лучше свернуть. Разворачивать по мере необходимости.

Теперь можно начать «вытаскивать» картинки

Первым делом нужно выбрать инструмент рамка . Затем выделить только ту часть, которая ограничивает логотип сайта

После этого нажать клавишу Enter. Всё кроме выделенной области будет отрезано.

Теперь можно убрать фон. Для этого нужно отключить слой с фоном.

С целью быстрого поиска нужных слоёв можно выполнить следующие действия:

  • выбрать инструмент «Перемещение»
  • Включить для выбранного инструмента настройки «Автовыбор» и «Группы слоёв»
  • Выполнить щелчок по любому объекту (в частности по белому фону). Слой с этим объектом станет активным

Здесь слой назван «Фигура 2». Щелчком по изображению глаза слой становится невидимым.

Однако остаётся ещё два слоя, которые также необходимо отключить. Действия аналогичные.

Теперь можно сохранять. Для этого необходимо выполнить следующие действия

ФайлСохранить для Web

Выбрать из 4 предложенных вариантов, а из предложенных второй. Расширение выбрать gif.

Нажать кнопку Сохранить.

Имя файла logo.gif. Файл сохранить в папку img. Туда следует сохранять и остальные изображения.

Если качество не устраивает, то можно сохранить в формате png-8 или png-24.

Можно следовать таким принципам:

  • фотографическое качество – jpg
  • фотографическое качество с прозрачным фоном– png-8, не устроило качество – png-24
  • мало цветов в изображении – gif

Для того, чтобы вернуть первоначальный вариант до обрезки, нужно открыть окно история

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

Аналогичным образом сохраняются другие изображения.

Группу собак можно сохранить на прозрачном фоне. Так впоследствии будет проще поместить на страницу, например другую группу собак. Можно сохранить с фоном «шапки» сайта.

То же самое касается изображения лапы, которое появляется при наведении на пункт меню

Остальные изображения – по желанию. Можно на белом, можно на прозрачном.

Здесь следует выбирать вариант сохранения очень аккуратно, потому, сто в psd исходниках нередки изображения с плохо обработанными краями. Вот пример:

Изображение было сохранено на прозрачном фоне. Однако при просмотре его на чёрном – видны плохо обработанные края. Но при использовании светлого фона – этот дефект может быть незаметен.

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

Начало вёрстки. Обёртка. Шапка сайта.

Вёрстка будет рассмотрена с использованием HTML5 и CSS3.

В папке своего сайта нужно создать HTML файл. Например index.html.

В папке css создать файл style.css.

Кроме этого, в папке css необходимо поместить файл reset.css со следующим кодом

Дело в том, что разные браузеры для одного и того же тега могут иметь различные настройки. Для обеспечения кроссбраузерности их необходимо сбросить. Предложенный выше код разработан Эриком Майером.

Сначала в index.html следует написать основные теги.

Для тега в стилях нужно установить фон.

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

Теперь нужно создать обёртку сайта – блок в котором будет помещаться всё содержимое.

Рядом с закрывающим

Также внутри блока находится слово wrapper. Оно там находится временно. Цель – во время вёрстки видеть блок и отличать его от остальных. По этой же причине в стилях блоку будет временно дан какой-нибудь светлый фон.

Для установки стилей необходимо знать его ширину и отступы сверху и снизу. Для измерения можно в Adobe Photoshop инструментом «Прямоугольная область» выделить изображение сайта от правого до левого края. Высота не важна.

Ширину можно увидеть в окне «Инфо»

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

Получилось 100px сверху и 85px снизу.

Таким способом определяются любые расстояния в исходнике.

Справа и слева установлены отступы auto. Благодаря этому блок выравнивается по центру.

Теперь создаётся «шапка» сайта. В Adobe Photoshop необходимо измерить её высоту.

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

Для первой части создаётся ещё один блок.

Высота этого блока 100px. Цвет фона – белый. И ещё объекты внутри этого блока будут двигаться позиционированием. Поэтому понадобится установка свойства position: relative.

Внутри этого блока следует поместить блок с изображением-логотипом. Это изображение можно сделать ссылкой на главную страницу.

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

Следующий компонент – это контакты и время работы.

В стилях нужно будет установить размер текста, цвет и шрифт.

Для определения размера текста, шрифта и цвета в Adobe Photoshopможно выбрать инструмент «Горизонтальный текст» и выполнить щелчок по нужному тексту. В панели свойств можно увидеть размер и шрифт. Цвет указывается в прямоугольнике. На рисунке, для наглядности, он отмечен красным овалом.

Щелчок по прямоугольнику вызовет палитру цветов.

Здесь можно скопировать шестнадцатеричный код цвета.

Кроме этого блок нужно будет передвинуть. Лучше всего делать это с помощью позиционирования. Для

Отступы можно измерить в Adobe Photoshop способом, рассмотренным ранее.

Вот результат в браузере

Остались в этой части ссылки на вход и регистрацию.

Сначала указываются стили для

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

Можно для ссылки, на которую навели сделать особенный стиль, чтобы добавить динамики. Очень часто убирают подчёркивание. Или наоборот. Подчёркивания нет, а при наведении оно появляется.

Вот результат в браузере

Следующий компонент – это нижняя часть «шапки» сайта.

Оба блока (dogs и slogan) нужно подвигать позиционированием по аналогии с предыдущими блоками. Для слогана ещё устанавливается свойство line-height. Оно служит для увеличения межстрочного интервала

На этом пока все. В следущей статье мы разберем создание навигации для нашего сайта. Часть 2>>

Psd2htmlconverter — сервис автоматической верстки сайта

Процесс создания сайта можно разделить на несколько основных частей. Все начинается с создание дизайн-макета в одной из программ графического дизайна. Обычно в этой роли выступает Adobe Photoshop. Дальше происходит «нарезка» дизайн-макета и создание HTML/CSS верстки web-страницы. Последний этап — связывание верстки и движка сайта. Для каждого из них нужны определенные знания и навыки, но в некоторых случаях можно воспользоваться сторонними сервисами и программами, позволяющими немного облегчить работу.

В данном обзоре расскажу об онлайн сервисе Psd 2 Html Converter — это стартап-проект, направленный на автоматизацию одной из частей процесса создания сайта, а именно — верстки веб сайта из дизайн-макета, подготовленного в Photoshop или Gimp. Другими словами он поможет обработать исходный нарисованный макет сайта и на выходе получить уже сверстанный дизайн в соответствии со стандартами XHTML 1.0 Strict / CSS 2.1.

С помощью Psd 2 Html Converter можно:

  • Значительно ускорить процесс верстки простых макетов, выполнив всю рутинную работу автоматически.
  • Для сложных сайтов можно выполнить часть работы, сверстать каркас для последующей обработки.
  • Представить на рассмотрение заказчику (если он требует) промежуточные вариант верстки макета без затрат на работу.

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

Как же работает Psd 2 Html Converter?

Первое, что требуется сделать — подготовить PSD файл с дизайном сайта в соответствии с документацией сайта. Для чего это надо? Дело в том, что не всегда возможно автоматически распознать такие элементы сайта, как формы ввода текста/паролей, списки и т.п. Поэтому информация о том, во что должен превратиться слой в HTML верстке должна быть каким-то образом передана нашему сервису Psd 2 Html Converter.

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

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

Сервис автоматической верстки сайта Psd 2 Html Converter не бесплатный. Стоимость конвертации страницы — 98 рублей (3.5 USD / 2.5 EUR), но только после просмотра готовой html верстки сайта. Никто просто так деньги брать не будет.

К счастью, у сервиса Psd 2 Html Converter есть партнерская программа, которая поможет немного сэкономить. При регистрации аккаунта вы сможете смотреть историю сделанных конвертаций PSD -> HTML, получить скидку 25% при нескольких заказах сразу, а также бесплатные три PSD -> CSS конвертации за приглашенного друга. Кроме того, в системе действует накопительная скидка до 20%. Да и, в принципе, сумма в 100 рублей за подобную работу (пусть и простого макета) зато грамотно сделанного — это уже неплохое предложение.

Вообще проект Psd 2 Html Converter понравился, пару раз встречал похожие сервисы в буржунете, радует, что теперь и «у нас» есть нечто похожее. На сайте сервиса найдете также дополнительную документацию, FAQ, портфолио и блог. В последнем есть заметка как получить HTML/CSS верстку совершенно бесплатно — для этого нужно написать небольшой обзор о проекте в своем блоге или поделиться информацией в социальной сети.

Создание шаблона сайта из PSD

В этой статье, посвященной переработке PSD/HTML, мы возьмем PSD проект, который я сконструировал в предыдущей статье, и вернем функциональный HTML/CSS шаблон.

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

Финальный результат

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

Перед стартом

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

Если вы еще не закончили с первой частью статьи, то советую пройтись и сделать то, указано в первой части (или хотя бы скачать PSD – исходники).

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

Создание файловой структуры

1 Создайте на вашем рабочем столе новую папку и назовите ее templates (или как вам будет угодно).

2 Внутри этой пустой папки создайте другую папку и назовите ее «images» — эта папка будет содержать все наши изображения, которые понадобятся нам в шаблоне.

3 Затем создайте три новых файла и назовите их index.html, style.css, и reset.css.

Index.html – это файл, где мы напишем html код к нашему шаблону. Style.css будет содержать код css, который заставит все выглядеть красиво и приятно.

Настройка reset.css

В файле reset.css нам необходимо использовать сбросы стилей. Основная причина, по которой нам понадобился reset css состоит в том что различные браузеру имеют тенденцию по разному отображать элементы HTML (например, размер шрифта заголовка, размеры подложки и полей). Использование reset.css уменьшит эти несогласованности.

4 Я буду использовать сброс стилей от Эрика Мейера. Скопируйте Reset CSS код в ваш файл reset.css.

Добавление базовой HTML разметки

5 Теперь откройте index.html с помощью любого редактора. Можете воспользоваться популярным редактором Dreamweaver (или CODA) или любым другим. Добавьте основную структуру для новой HTML страницы — многие популярные редакторы, такие как CODA или DREAMWEAVER автоматически сделают это за вас (или с помощью назначенной функции). Ниже приведен блок кода основной структуры вашей HTML страницы (у вас может немного отличаться).

Ссылаемся на CSS стили

6 Внутри тега head файла index.html, вам необходимо добавить следующие строчки кода, для того чтобы можно было подключить наши стили.

Это скажет index.html, где найти основную таблицу стилей.

7 Теперь откройте файл style.css и добавьте следующую строчку кода на самый верх документа, чтобы подключить файл reset.css.

Это гарантирует, что reset стили подключены перед любыми другими стилями CSS (это важно из-за модели наследования CSS).

Превосходно! Сейчас все три файла соединены друг с другом, итак мы можем приступить к кодированию.

Структура шаблона

Ниже, вы можете увидеть базовую структуру и основные секции HTML/CSS шаблона. Потратьте некоторое время на изучение базовых секций веб-страницы.

Код основной секции страницы

8 Для начала, создадим основную структуру index.html. Добавьте следующий блок кода для секций макета.

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

Основная секция нашего макета включает: #header, #featured-content, #services, #additional-information (содержит #client-testimonials и #featured-project), и #footer.

Создание фона

9 Чтобы создать фон нашего HTML/CSS шаблона, мы, сперва, должны вырезать фоновое изображение из PSD файла. Приведенный далее метод мы будем использовать и для нарезки второстепенных деталей CSS, и, кстати, здесь приведена краткая процедура. Первый шаг: в фотошопе выберите инструмент Rectangular Marquee Tool (M) и выделите узкую часть блока, куда бы вошел header и белый фон.

10 Как только вы сделаете выделение, идите в Edit > Copy Merged (Правка > Копировать объединение), создайте новый фотошоп документ и затем вставьте выделенную область в новый документ (фотошоп должен автоматически задать размеры нового документа и эти размеры будут основана на изображении, которое содержится у вас в буфере обмена).

11 Затем вы должны пойти в File > Save for Web & Devices (Сохранить для Web и устройств) и сохранить файл. Формат файла выберите GIF и затем сохраните его как main-bg.jpg внутри папки images.

12 Теперь добавьте следующий код в файл style.css, тем самым мы зададим фон.

Здесь мы закрепляем фоновое изображение за тегом body HTML документа и затем повторяем его вдоль оси х через всю страницу.

Мы также установили ширину макета и отцентировали его на экране ( margin: 0 auto; центрируем макет).

Добавление логотипа

13 Сейчас мы добавим логотип в header. Для начала нам необходимо извлечь его из PSD. Lля этого нужно выбрать слой, в котором сохранен логотип, нажать на комбо Ctrl+A, и, не отпуская, дважды щелкнуть по миниатюре слоя на панели слоев.

Тем самым мы выделим текст логотипа.

14 Нажмите копировать, создайте новый документ и вставьте текст в новый документ.

15 Выберите Save for Web & Devices, выберите формат PNG и сохранить файл как logo.png в папке images.

Здесь мы используем формат PNG, так как мы хотим, чтобы изображение имело прозрачный фон, что позволит нам использовать изображение на любом фоне.

16 Сейчас добавьте HTML код, приведенный ниже, который создаст разметку для логотипа.

17 Затем, чтобы вывести логотип на экран, установите изображение логотипа как фон заголовка блока header (#header h1). Добавьте следующий код в style.css файл.

Для начала устанавливаем высоту контейнера header, затем закрепляем изображение логотипа как фон заголовка h1.

Мы воспользовались техникой «замена фонового изображения css», которая прикрепляет фоновое изображение к элементу и затем сдвигает текст элемента за пределы экрана с помощью text-indent: -9999px атрибут/значение.

Замена фоновым изображением обеспечивает некоторые выгоды для SEO и облегчает понимание контента для пользователей использующих screen readers.

Создание навигации

18 Чтобы создать блок навигации, добавьте следующий HTML код в файл index.html.

19 Добавьте следующий CSS код в файл style.css.

Все довольно просто: Мы сделали контейнер #nav плавающим ( float:right ) и также сдвинули его вниз на 72px с помощью атрибута margin. Элементы li также сделаны плавающими, (чтобы быть уверенным в том, что элементы расположатся друг напротив друга в одном ряду, а не друг под другом), но относительно левой стороны.

Остальная часть кода просто добавляет стиль ссылкам и разделитель «-» между названиями страниц.

Код первой контент секции

20 Чтобы создать эту секцию, нам необходимо вырезать несколько изображений из PSD. Первым будет заголовок. Мы будем применять тот же процесс, что и для нарезки логотипа. Выделите текст, предварительно выбрав нужный слой на панели слоев, затем жмите копировать, и создайте новый документ в фотошопе.

21 Вставь текст в новый документ и затем сохраните его в папке images через Save for Web & Devices и сохраните как featured-content-title.png.

22 Затем те же операции повторите с подзаголовком (назовите файл featured-content-subtitle.png ), пунктирной линией (имя horizontal-line.png ), и текстом ( featured-content-text.png ).

23 Сейчас, после того как мы извлекли все необходимые изображения, нам необходимо написать HTML код. Добавьте следующий код в контейнер #featured-content вашего index.html файла.

24 Затем добавьте CSS код, приведенный ниже, для оформления стиля наших элементов.

В этом блоке кода, мы сперва сдвинули вниз контейнер #featured-content на 65px с помощью атрибута margin .

Затем мы снова воспользовались техникой ‛замена фонового изображения CSS‛ для элементов h2, h3, и p, чтобы показать фоновые изображения, которые мы извлекли.

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

Создание секции обслуживания

25 Сперва, как обычно, извлечем необходимые изображения из PSD файла. Нам потребуется синий фон блока (сохраним его как services-box-bg.png ), затем основные заголовки блоков (сохраним их как web-design-title.png , marketing-title.png , и optimization-title.png respectively ), пунктирная линия ( service-dotted-line.png ), и кнопки у основания каждого блока ( get-more-details-button.jpg , view-case-studies-button.jpg , и learn-more-button.jpg ). Воспользуйтесь тем же самым способом, который мы прошли в предыдущих пунктах, для извлечения и сохранения изображений.

26 Сейчас добавьте следующий HTML код внутрь контейнера #services в index.html.

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

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

27 Теперь добавьте следующий CSS код в ваш основной стилевой файл.

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

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

Следует отметить, что блоку service-box присвоено левое поле шириной 46px. Это обеспечивает последовательный интервал между блоками обслуживания. Однако, если бы вы назначили и первому блоку левой поле в 46px, ты в шаблоне это выглядело бы неорганично.

Это исправить довольно легко: достаточно установить левому полю блоку .first значение 0, тем самым мы исключим значение атрибута margin класса .service-box и гарантировали приемлемое расположение блока.

Создание секции клиентских отзывов

28 Нам требуется вырезать заголовок из PSD файла. Воспользуйтесь тем же способом, что и раньше и сохраните изображение как client-testimonials-title.png .

29 Добавьте следующий HTML код в файл index.html внутрь контейнера #client-testimonials .

Здесь тоже все просто: мы имеем три контейнера .testimonial , которые содержат изображение автора, имя автора, текст, и название компании.

30 Теперь добавьте следующий CSS код в ваш основной стилевой файл.

Первые три строчки кода связаны с родительским контейнером #additional-info , которому в первой строчке задана высота и поля.

Важной деталью является ширина (425px) и поле (45px) контейнера #client-testimonials , они должны соответствовать соответственно ширине и полю проектного блока. Равная длина этих блоков позволит визуально отдать этим блокам по равной половине экрана.

31 Между этими двумя блоками нам необходимо добавить пунктирную линию, которая будет нашим разделителем. Вырежьте ее из PSD и сохраните как vertical-line.png .

32 Теперь добавьте следующую строчку кода между блоками #client-testimonials и #featured-project в вашем index.html файле.

33 Затем вставьте следующий блок кода CSS в ваш файл style.css.

Приведенный CSS гарантирует, что линия окажется между двумя различными секциями.

Создание секции под проект

34 Вырежьте заголовок из PSD, тем же способом, что и раньше, и сохраните его, как featured-project-title.png .

35 Добавьте ниже приведенный код HTML в ваш index.html.

36 Ниже приведенный блок кода отвечает за оформление секции проекта, добавьте его в свой CSS файл.

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

37 У футера очень простой код. Добавьте следующий код в ваш index.html.

В футере присутствует горизонтальная линия, как разделитель между блоком #additional-info и самим футером, и обычный текст о правах.

38 Теперь добавьте следующий CSS код, который отвечает за оформление футера.

Все просто: мы задали высоту футера и назначали нижнюю подложку в 30px, что создаст органичное пространство шаблону.

Затем мы задали шрифт, цвет и установили подложку, с целью отодвинуть текст от горизонтальной линии.

Конец!

Это все. Если вы делали все согласно плану, у вас должно получиться так, как на скриншоте ниже.

Источник sixrevisions.com/tutorials/web-development-tutorials

Файлы оригинального урока:

Файлы переводчика, по которым сделаны скриншоты статьи:

Psd2htmlconverter — сервис автоматической верстки сайта

Процесс создания сайта можно разделить на несколько основных частей. Все начинается с создание дизайн-макета в одной из программ графического дизайна. Обычно в этой роли выступает Adobe Photoshop. Дальше происходит «нарезка» дизайн-макета и создание HTML/CSS верстки web-страницы. Последний этап — связывание верстки и движка сайта. Для каждого из них нужны определенные знания и навыки, но в некоторых случаях можно воспользоваться сторонними сервисами и программами, позволяющими немного облегчить работу.

В данном обзоре расскажу об онлайн сервисе Psd 2 Html Converter — это стартап-проект, направленный на автоматизацию одной из частей процесса создания сайта, а именно — верстки веб сайта из дизайн-макета, подготовленного в Photoshop или Gimp. Другими словами он поможет обработать исходный нарисованный макет сайта и на выходе получить уже сверстанный дизайн в соответствии со стандартами XHTML 1.0 Strict / CSS 2.1.

С помощью Psd 2 Html Converter можно:

  • Значительно ускорить процесс верстки простых макетов, выполнив всю рутинную работу автоматически.
  • Для сложных сайтов можно выполнить часть работы, сверстать каркас для последующей обработки.
  • Представить на рассмотрение заказчику (если он требует) промежуточные вариант верстки макета без затрат на работу.

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

Как же работает Psd 2 Html Converter?

Первое, что требуется сделать — подготовить PSD файл с дизайном сайта в соответствии с документацией сайта. Для чего это надо? Дело в том, что не всегда возможно автоматически распознать такие элементы сайта, как формы ввода текста/паролей, списки и т.п. Поэтому информация о том, во что должен превратиться слой в HTML верстке должна быть каким-то образом передана нашему сервису Psd 2 Html Converter.

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

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

Сервис автоматической верстки сайта Psd 2 Html Converter не бесплатный. Стоимость конвертации страницы — 98 рублей (3.5 USD / 2.5 EUR), но только после просмотра готовой html верстки сайта. Никто просто так деньги брать не будет.

К счастью, у сервиса Psd 2 Html Converter есть партнерская программа, которая поможет немного сэкономить. При регистрации аккаунта вы сможете смотреть историю сделанных конвертаций PSD -> HTML, получить скидку 25% при нескольких заказах сразу, а также бесплатные три PSD -> CSS конвертации за приглашенного друга. Кроме того, в системе действует накопительная скидка до 20%. Да и, в принципе, сумма в 100 рублей за подобную работу (пусть и простого макета) зато грамотно сделанного — это уже неплохое предложение.

Вообще проект Psd 2 Html Converter понравился, пару раз встречал похожие сервисы в буржунете, радует, что теперь и «у нас» есть нечто похожее. На сайте сервиса найдете также дополнительную документацию, FAQ, портфолио и блог. В последнем есть заметка как получить HTML/CSS верстку совершенно бесплатно — для этого нужно написать небольшой обзор о проекте в своем блоге или поделиться информацией в социальной сети.

Готовые макеты блоков для веб-страниц на HTML и CSS

2014-06-25 / Вр:00:49 / просмотров: 110814

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

Итак, существуют резиновые и фиксированные макеты.

Фиксированные макеты – это когда ширина блоков задается в пикселях (px), а это значит, что размер макета сайта будет фиксированным не зависимо от размера экрана.

Резиновые макеты – это когда ширина блоков задается в процентах (%), а это значит, что макет сайта будет полностью гибким и автоматически подстраиваться под любой размер экрана.

Макет может быть одноколоночным:

Одноколоночные макеты (веб-страницы)

○ Выравниваем блок с контентом по центру экрана.
Пример :

Такое размещение блока будет полезно и интересно для дизайна:

— точки входа на сайт или в админ-панель;

— сообщения об отправленном письме и т. д.

Макет одной колонки:

○ Еще один вариант одноколоночного макета:

Двухколоночные макеты (веб-страницы)

Фиксированные макеты

Частенько в сети интернет встречаются двухколоночные веб-страницы. Это самые распространенные варианты верстки сайтов, так как считаются самыми удобными и для создания. А также они хорошо воспринимаются пользователями. В правой колонке размещается меню, а в левой – контент. Или в правой колонке размещается контент, а в левой – меню.

Двухколоночный макет (слева меню, справа контент):

Двухколоночный макет (слева контент, справа меню):

Примечание: чтобы поменять местами блоки, достаточно поменять значение в строках 30, 33, 41:

(слева контент, справа меню)

float: right; /* Обтекание блока по левому краю */

margin-right: 130px; /* Отступ справа */

clear: right; /* Отменяем действие float */

(слева меню, справа контент)

float: left; /* Обтекание блока по правому краю */

margin-left: 130px; /* Отступ слева */

clear: left; /* Отменяем действие float */

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Резиновый двухколоночный макет

Многие веб-мастера используют резиновые макеты сайтов. Это удобно, так как размер сайта автоматически подстраивается под размер монитора.

Резиновый двухколоночный макет (слева меню, справа контент):

Резиновый двухколоночный макет (справа меню, слева контент):

Чтобы поменять местами меню с контентом (справа меню, слева контент), достаточно в строке 22 (.s >leftна right :

float: right; /* Обтекание справа */

и в строке 29 (.content) заменить числовое значение 10px 5px 20px 25% на 10px 25% 20px 5px

margin: 10px 25% 20px 5px; /* Значения отступа от правого блока */

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Триколоночные макеты (веб-страницы)

Фиксированный макет в три колонки

Частенько макет как в три колонки используют для создания блога.

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третей колонке меню:

○ Следующий вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третей колонке контент:

○ Следующий самый распространенный вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке реклама или новости:

Резиновый макет в три колонки

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третьей колонке меню.

○ Следующий вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третьей колонке контент.

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

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

Документация сервиса автоматической HTML верстки сайтов

На этой странице подробно описаны возможности сервиса PSD to HTML Converter и как ими воспользоваться. Вы узнаете как создать веб страницу и сделать свой web сайт практически бесплатно.

Особенности конвертации Photoshop дизайна в CSS/HTML

Для эффективного использования сервиса PSD to HTML Converter необходимо знать следующие особенности Photoshop.

  • Слой Photoshop всегда имеет прямоугольную форму и его размер определяется размером его содержимого. Любая часть слоя может быть прозрачной. Например, слой, состоящий из одного пикселя, имеет размер 1×1 пиксель. Если слой состоит из двух пикселей, один из которых находится в левом верхнем углу документа, а второй — в правом нижнем, то размер слоя будет равен размеру всего документа Photoshop (но все пиксели, кроме данных двух, будут прозрачными).
  • Слои могут пересекаться и накладываться друг на друга. Если один слой в панели слоев Photoshop находится выше, чем другой слой, то содержимое первого слоя будет находиться поверх содержимого второго слоя. Порядок наложения слоев в Photoshop сохраняется для CSS слоев в сконвертированном HTML.
  • Если какой-либо слой накладывается на текст, то текст становится недоступным для кликов мышкой. Поэтому избегайте случаев, когда слой перекрывает текстовые слои или слои с интерактивными элементами (ссылки, поля ввода).
  • Слои можно объединять в группы. Они отображаются как папки на панели слоев Photoshop.
  • Размер группы слоев определяется прямоугольной областью, которая включает в себя все слои группы. Группа — это тоже слой, поэтому относительно нее действуют те же самые правила относительно порядка наложения слоев.
  • Чтобы изменить порядок следования слоев, либо перетаскивайте их мышью на панели слоев Photoshop, либо используйте комбинации «Ctrl + [» и «Ctrl + ]».
  • Чтобы изменить имя слоя, дважды кликните по нему в панели слоев Photoshop. Вам это понадобится для того, чтобы помечать слои Вашего дизайна тегами.
  • Не используйте в своем дизайне Adjustment layers, они не поддерживаются сервисом.

Правила, по которым PSD шаблон преобразовывается в HTML верстку

Видимость слоев

Любой Photoshop файл состоит из слоев (Layer). Любая блочная HTML верстка сайта также состоит из слоев, стиль которых задается через CSS. В процессе конвертации все видимые слои из PSD дизайна преобразуются в элементы CSS/HTML верстки: слои изображений перейдут в изображения, текстовые слои перейдут в текстовые блоки.

Если слой (Layer) или группа слоев (Layer Group) имеют в Photoshop аттрибут «невидимый» (“invisible”), то они будут пропущены и не попадут в CSS верстку. Таким образом, используя сервис автоматической генерации HTML и CSS верстки, вы всегда получите то, что видите в PSD файле (WYSIWYG — What You See Is What You Get).

Создание HTML элементов

HTML довольно богатый язык и HTML/CSS верстка обычно состоит не только из изображений и текста, но также содержит ссылки, различные формы, поля ввода текста, списки, таблицы и другие HTML элементы. Чтобы автоматически создать эти HTML элементы, требуется иметь больше информации, чем изначально содержится в PSD файле. Отличный способ дать нам эту информацию – сообщить ее в имени слоя (Layer Name) в Вашем PSD файле. В имени любого слоя в любом месте Вы можете указать один или несколько тегов, которые мы интерпретируем описанным ниже способом.

Каждый слой HTML/CSS верстки будет иметь такое же имя, какое этот слой имел в PSD шаблоне (за исключением тегов, мы удалим их из имен). При этом Вам нет необходимости думать об уникальности имен в Photoshop, заботу об этом мы берем на себя.

Сложные многослойные изображения

Как уже было упомянуто, из каждого Photoshop слоя в верстке получается отдельный HTML/CSS элемент. Таким образом, если в макете для создания одного изображения (логотип/бэкграунд/т.п.) использовано несколько слоев — это плохо отразится на автоматически созданной верстке сайта — вы получите излишние элементы с изображениями.
Справиться с этой проблемой легко. Выберите один из двух недеструктивных методов:

  1. Объедините все соответствующие слои одну группу слоев и пометьте группу тегом #merge. В процессе верстки такая группа слоев будет автоматически объединена в один слой.
  2. Объедините несколько слоев в один слой, сконвертировав их в Smart Object. Для этого выделите нужные слои на панели слоев и запустите команду «Layer» -> «Smart Objects» -> «Convert to Smart Object».

HTML5/CSS3 верстка

Верстка текста из слоев PSD-макета

Все текстовые слои в Photoshop преобразуются в текстовые блоки в HTML верстке. При этом сохраняются все стилевые параметры текста и параграфа, такие как:

  • Шрифт
  • Размер шрифта
  • Цвет текста
  • Эффект отбрасывания тени
  • Выравнивание текста (left, centered, right, justify)
  • Отступ сверху
  • Отступ снизу
  • Межстрочный интервал
  • Надстрочный/подстрочный текст
  • Направление текста (LTR или RTL)
  • и другие

Сервис поддерживает автоматическое встраивание всех (650+) WEB шрифтов от Google.

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

Если вы все же хотите сверстать слой с нестандартным шрифтом как текст и затем подключить шрифт с помощью @font-face, пометьте такой слой тегом #text. После конвертации не забудьте вручную добавить директиву @font-face в сгенерированный сервисом .css файл. Заметьте, что т.к. на нашем сервере нет нестандартных шрифтов, то произойдет замена шрифта стандартным, отчего на сгенерированном скриншоте верстка будет не соответствовать оригинальному дизайну.
Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.

Для текстовых слоев в Photoshop разрешается устанавливать только следующие эффекты (Blending Options) :

  • Отбрасывание тени (Drop Shadow)
  • Наложение цвета (Color Overlay)

Только эти эффекты могут быть установлены с помощью CSS. Текстовые слои, для которых установлены какие-либо другие эффекты, будут сконвертированы в изображения.
Для создания заголовков различных уровней используйте теги #h1, #h2, #h3, #h4, #h5, #h6.

Границы текстового блока могут отличаться в браузере и в Photoshop. Для более точного управления границами текста переведите текстовый слой в режим «Paragraph Text» из режима «Point Text». В данном режиме редактирования Вы сможете точно установить границы текстового слоя. Для изменения режима редактирования, кликните правой кнопкой мыши по слою в панели слоев и выберите соответствующую опцию — «Convert to Paragraph Text» либо «Convert to Point Text».

Всегда отключайте сглаживание текста в своих PSD макетах. CSS не поддерживает сглаживание, поэтому даже при ручной верстке не получится сверстать текст того же размера и начертания, как у текстового слоя в Photoshop, имеющего сглаживание.

Поддерживаемые теги

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

  • добавить перед тегом хэш ‘#’, например: #bg,
  • добавить перед тегом тире ‘-‘, например: -bg,
  • заключить имя тега в символы ‘$’, например: $bg$.

Тегом можно пометить любой слой или группу слоев в дизайн-макете. Добавить тег в дизайн-макет Photoshop очень просто — нужно написать его в имени слоя в любом месте.
Например, если есть слой «Layer 1» и Вы хотите сделать его ссылкой, то нужно добавить тег #link в имя слоя, например, таким образом: «Layer 1#link», или «La$link$yer 1», или «-link Layer 1». В любом из случаев в получившейся верстке класс слоя будет: .

Имена Clipping mask слоев не должны содержать тегов — тегами следует помечать базовый слой, к которому применяется маска.

На данный момент в именах слоев можно использовать следующие теги:

  • #header, #footer, #section, #nav, #article, #as .
  • #link — если тегом помечен один слой, то он будет сверстан, как ссылка. Если тегом помечена группа слоев, то каждый слой группы будет сверстан как ссылка.
  • #link — если в качестве параметра тега передана ссылка, то она будет использоваться в качестве гиперссылки в сгенерированном коде. Пример: #link.
  • #nolink — текст или часть текста помеченного слоя, имеющий подчеркнутый стиль, не будет автоматически верстаться как ссылка. По умолчанию подчеркнутый текст конвертируется в гиперссылку.
  • #bg — этот тег используется как подсказка, что данное изображение надо сверстать, как background свойство блока, содержащего этот слой. Если у в группе слоев несколько слоев помечено тегом #bg, то они будут объединены в одно изображение. Если пометить тегом целую группу слоев, то все слои группы будут объединены в одно изображение и оно будет использовано как бэкграунд.
    Единичные слои в группе необязательно помечать данным тегом, т.к. сервис сам находит наиболее подходящий в качестве фона слой. Обычно, это изображение наибольшего размера в данной группе.
  • #bg<[тип повторения]>, где [тип повторения] — это одно из:
    repeat-x или rx — фон будет повторяться по оси x
    — repeat-y или ry — фон будет повторяться по оси y
    repeat или r или repeat-xy — фон будет повторяться по осям x и y
    Примеры: #bg; #bg, #bg.
  • #bg-size — позволяет вручную задать css стиль background-size для фонового изображения.
    Параметр size — это либо ‘cover‘, либо ‘contain’, либо пара значений в px или %.
    Примеры:
    #bg-size
    #bg-size
    #bg-size
  • #bg-pos — позволяет вручную задать css стиль background-position для фонового изображения.
    Параметр [HorizontalPosition] — одно из: left, right, center.
    Параметр [VerticalPosition] — одно из: top, bottom, center.
    Examples:
    #bg-pos
    #bg-pos
  • #h1, #h2, #h3, #h4, #h5, #h6 — из текста или изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня. Если слой текстовый, то он должен обязательно состоять из одного параграфа.
  • #h1, . , #h6— из изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня, при этом изображение будет иметь в качестве альтернативного текста заданное значение. Пример: «Logo#h1«. Также, для этой цели вы можете использовать тег #alt: «Logo#h1#alt«.
  • #in_text — Если пометить тегом одиночный слой, то из его изображения будет сверстана форма ввода текста (type=”text”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_passw — из изображения будет сверстана форма ввода текста для ввода пароля (type=”password”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #textarea — из изображения будет сверстана форма для ввода нескольких строк текста (textarea). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_button — из изображения будет сверстана форма ввода (input) типа «кнопка» (type=”button”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  • #in_checkbox — будет сверстана форма ввода (input) типа «флажки» (type=”checkbox”). Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_radio — будет сверстана форма ввода (input) типа «переключатель» (type=”radio”). Для того, чтобы объединить несколько переключателей в одну группу, задайте им идентичные имена в PSD шаблоне либо задайте имя переключателя как параметр тега: #in_radio . Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_file — из изображения будет сверстана форма для ввода имени файла для отправки на сервер (type=”file”).
  • #in_image — из изображения будет сверстана форма ввода типа «поле с изображением» (type=”image”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  • #in_submit — из изображения будет сверстана форма ввода для отправки данных формы на сервер (type=”submit”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #select — позволяет сверстать список опций. Чтобы сверстать список опций, отметьте группу, содержащую один или несколько текстовых слоев с текстом опций, данным тегом. В качестве опций будут сверстаны даже те текстовые слои группы, которые имеют флаг «невидимый» (чтобы явно указать, что не надо верстать текстовый слой, как опцию, отметьте его тегом #skip). Кроме текстовых слоев, группа может содержать фигуру (Shape), представляющую фон списка. Остальные слои группы будут проигнорированы. Чтобы выбрать, какая опция должна быть выбранной по умолчанию, отметьте соответствующий текстовый слой тегом #selected. Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #form — имеет смысл только когда установлен для группы слоев (Layer Group). В этом случае будет сверстан контейнер форм (form). Все формы ввода должны быть помещены внутрь группы контейнера форм. Если ни одна группа не помечена тегом формы, то форма будет создана автоматически.
  • #img — этим тегом можно пометить текстовый слой (Type Text Tool Layer). В этом случае текст будет сверстан как изображение. При этом в качестве альтернативного текста изображения (alt) будет задан текст слоя.
    Если пометить этим тегом фигуру, то она будет растеризована и сверстана как изображение, а не как CSS3 код.
  • #jpg — изображение данного слоя будет сохранено в JPEG формате вместо PNG формата, даже если изображение содержит прозрачные пиксели. Так как JPG формат не поддерживает прозрачность, прозрачные пиксели будет заменены содержимым нижележащих слоев. Используйте этот тег с осторожностью.
    Помните, что если слой не содержит прозрачных пикселей, то он будет сохранен в JPG формате автоматически. Таким образом, не надо помечать слои данным тегом без особой на то необходимости.
  • #gif — изображение данного слоя будет сохранено в GIF формате. Подробнее.
  • #text — текстовый слой, помеченный данным тегом, будет сверстан как текст в независимости от того, использует ли текст нестандартный для web шрифт или слою заданы недопустимые эффекты (т.е. отличные от Drop Shadow и Color Overlay). В данном случае текст будет перенесен в CSS верстку сайта без эффектов. При использовании нестандартного шрифта ответственностью пользователя будет добавить в HTML верстку описание этого шрифта с помощью @font-face. Заметьте, что на скриншоте web верстки сайта текст будет рисоваться шрифтом по умолчанию.
    Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.
  • #skip — любой слой или группа слоев, помеченная данным тегом, будет пропущена и не попадет в верстку. Удобен при создании списков. Внимание! Используйте с осторожностью.
  • #uladvanced tag . Применяется только к группе элементов (Layer Group). Из группы будет сверстан маркированный список ul. Все элементы данной группы станут элементами li этого списка. Внимание! Все слои с изображением маркера списка должны быть помечены тегом #limage (на самом деле, в качестве маркера будет взят первый встреченный элемент, помеченный этим тегом. Остальные будут пропущены). Это необходимо, чтобы изображения маркеров не стали элементами списка! Иногда в дизайн-макете все маркеры объединены в один слой. Чтобы облегчить себе работу, создайте слой с одним маркером (к примеру, для первого элемента списка). Пометьте его тегом #limage. Слой с оставшимися маркерами пометьте тегом #skip (тогда этот слой будет просто пропущен).
    Вы можете ознакомиться с использованием тега #ul для верстки горизонтального и вертикального меню на примере образцового PSD макета и сконвертированной из него верстки сайта).
  • #limageadvancedtag . Имеет смысл только для элемента внутри группы, помеченной тегом #ul. Первый встретившийся внутри группы элемент, отмеченный этим тегом, будет использован в качестве изображения маркера списка. Остальные элементы, помеченные этим тегом, будут пропущены.
  • #flex — если слой или группа помечены этим тегом, то сервис попытается сделать его ширину (а также ширину родительских и дочерних элементов) резиновой, т.е. их ширина будет задана в процентах от ширины родительского элемента.
  • #fix — если слой или группа помечены данным тегом, то сервис сделает его (ее) ширину фиксированной, т.е. ширина будет установлена в пикселях.
  • #min-width<[width]>, #max-width<[width]>
    где [width] это одно из:
    — значение в пикселях. Пример: #min-width <1000>или #min-width<1000px>
    — значение в процентах. Пример: #max-width
  • #min-height<[height]>, #max-height
    где [height] это одно из:
    — значение в пикселях. Пример: #min-height <1000>или #min-height<1000px>
    — значение в процентах. Пример: #max-height
  • #normal, #hover, #visited, #active, #selected — теги для верстки различных состояний текста, изображений, форм. Подробнее об их использовании читайте в статье.
  • #table, #thead, #tbody, #tfoot — используйте данные теги для верстки таблиц. Подробнее читайте в статье о верстке таблиц.
  • #pos_fixed — отметьте слой или группу слоев этим тегом, чтобы сверстать их, используя фиксированное позиционирование (CSS стиль «position: fixed;»).
  • #absolute — отметьте слой или группу слоев этим тегом, чтобы вынести их из общего потока документа и сверстать, используя абсолютное позиционирование (CSS стиль «position: absolute;»).
  • #hide — отметьте слой или группу слоев этим тегом, чтобы сверстать их невидимыми (CSS стиль «display: none;»).

Примеры

Несколько PSD макетов, на примере которых рекомендуется изучить использование тегов, вы можете скачать по ссылкам ниже:

Группировка CSS слоев в div блоки

Каждая группа слоев (Layer Group) в Photoshop конвертируется в div блок в результирующей HTML/CSS верстке.

Объединяйте логические группы элементов (такие, как заголовок, футер, основной контент, колонки и т.п.) в группы слоев (Layer Group) в Photoshop. Это поможет нам правильно объединить CSS элементы в гибкие div блоки HTML (таким образом, если кто-то добавит больше текста, ничего не испортится). Элементы будут сгруппированы в колонки и ряды, в которых выравниваться и располагаться друг относительно друга они будут используя такие css свойства, как ‘margin’, ‘padding’, ‘float’.

Использование «плавающей» верстки является наилучшим практически для любого сайта. Если элемент CSS верстки изменит свой размер (например, добавится еще один параграф текста), то при HTML вёрстке в абсолютных координатах текст «наедет» на соседние блоки. В «плавающей» же CSS верстке, расширившийся блок «подвинет» блоки, которые с ним граничат.

Photoshop CS4 (и более ранние версии) имеет ограничение на уровень вложенности групп (Layer Group) равное 5-ти. В Photoshop CS5 оно было увеличено до 10-ти. Такого количества вложенных групп вполне достаточно для большинства дизайнов любой сложности.

Группировка элементов не только поможет сверстать Ваш дизайн-макет более правильно, но и облегчит Вашу работу с макетом. PSD дизайн намного легче и удобнее модифицировать, когда все слои логически объединены в группы.

SEO (Search Engine Optimization)

Чтобы поисковые системы успешнее находили Вашу HTML страницу в интернете, на ней следует задать значения таким мета тегам, как title, description, keywords.

Сервис CSS верстки Psd 2 Html Converter поможет автоматически добавить эти мета теги на Вашу страницу. Откройте форму информации о PSD файле (нажмите ‘Alt + Shift + Ctrl + I’ или в меню ‘File’ выберите пункт ‘File Info. ‘ и выберите вкладку ‘Description’) и заполните поля ‘Document title’, ‘Description’, ‘Keywords’. Информация из этих полей автоматически попадет на сверстанную HTML/CSS страницу в качестве соответствующих мета тегов.

Для поисковой оптимизации важно следить за тем, чтобы информация на HTML странице была правильно структурирована. Текст HTML страницы состоит из заголовков различного уровня (в HTML таких уровней 6) и собственно из основного текста. Чтобы создать правильную структуру HTML документа, воспользуйтесь тегами #h1, #h2, #h3, #h4, #h5, #h6. Как понятно из названий, при их использовании будут созданы заголовки 1, 2, 3, 4, 5 или 6 уровня. Чем ниже уровень заголовка, тем он важнее. На правильно сформированной странице заголовки должны быть расположены сверху вниз в порядке возрастания уровня (т.е. уменьшения важности).

Порядок загрузки файла и оплаты конвертации

Процесс загрузки PSD макета, его конвертации в HTML/CSS верстку и оплаты состоит из нескольких шагов.

  1. Выберите предлагаемые опции конвертации.
  2. Загрузите файл на наш сервер. В зависимости от размера файла загрузка и конвертация может длиться разное время, вплоть до 10 минут.
  3. При наличии каких-либо замечаний к подготовке PSD файла, мы предложим Вам с ними ознакомиться. Рекомендуем исправить все замечания к подготовке макета и вернуться к пункту 1. Если замечания не исправлены, CSS верстка может не соответствовать загруженному дизайн-макету.
  4. Перед оплатой Вам будет доступен предпросмотр получившейся CSS верстки сайта (скриншот страницы), а также предпросмотр сгенерированного HTML кода. Ознакомьтесь с ними и только если Вас все устраивает, переходите к оплате.
  5. Если Вы вошли под свои аккаунтом и на Вашем счету есть доступные конвертации, будет предложено воспользоваться конвертацией со счета.
  6. Если Вы не вошли под своим аккаунтом, либо на Вашем счету нет доступных конвертаций, будет предложено воспользоваться одним из способов оплаты.
  7. При успешной оплате Вы будете перенаправлены на страницу загрузки CSS верстки сайта. На Ваш e-mail будет отправлено письмо с информацией о конвертации. Если Вы авторизованы, информация о конвертации станет доступна из личного кабинета.
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL