#radiobells_script_hash

Премиум-шаблон корпоративного сайта компании

Детальное описание уроков по работе с темой – Премиум-темой корпоративного сайта компании

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

В итоге мы получим верстку:

  • Кроссбраузерную

    Верстка будет отображаться одинаково хорошо во всех браузерах

  • Легко масштабируемую

    Страницы не будут «рассыпаться» при добавлении новых блоков контента

  • Блочную

    При верстки страниц не используется ни одной таблицы

Изучив этот курс, вы узнаете:

  • Как максимально эффективно исследовать PSD-макет сайта
  • Как определить подходящую разметку страницы
  • Как спроектировать общую структуру для различных по дизайну страниц
  • Узнаете тонкости поведения плавающих блоков и свойства float
  • Как определить и вырезать необходимые изображения
  • Как пользоваться псевдоклассами
  • Как эффективно использовать псевдоклассы
  • Как эффективно работать с отступами
  • Как сделать и вставить табы на сайт и что для этого необходимо
  • Как поправить дизайн табов под общий дизайн сайта
  • Как сделать и вставить «аккордеон» на сайт и что для этого необходимо
  • Как поправить дизайн «аккордеона» под общий дизайн сайта
  • Как установить рекламный слайдер на сайт
  • Как внести в слайдер свои стили
  • Как наполнить слайдер необходимым контентом
  • Как установить галерею на сайт и что для этого необходимо
  • Как разобраться со всеми подключаемыми файлами и скриптами
  • Как грамотно организовать структуру галереи и назначить нужные пути к файлам скриптов
  • Как добавить в галерею свои собственные стили
  • Как, не используя лишние теги, описать навигацию
  • Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
  • Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете
  • Как, используя Firebug, найти нужные стили и изменить их?

Итак, начинаем изучение:

01. Вступление. смотреть видео
02. HTML разметка шапки сайта. смотреть видео
03. CSS стили шапки сайта. смотреть видео
04. HTML разметка меню. смотреть видео
05. CSS стили меню. смотреть видео
06. CSS стили формы поиска. смотреть видео
07. Установка галереи. смотреть видео
08. Замена стилей галереи. смотреть видео
09. Дополнение галереи контентом. смотреть видео
10. Вёрстка блока подгалереи. смотреть видео
11. Вёрстка блока услуги. смотреть видео
12. Вёрстка центрального заголовка. смотреть видео
13. Вёрстка блока последние работы. смотреть видео
14. Вёрстка подсказки блока последние работы. смотреть видео
15. Настройка области табов и аккордеона. смотреть видео
16. Установка табов и аккордеона. смотреть видео
17. Замена стилей аккордеона. смотреть видео
18. Вёрстка футера. смотреть видео
19. Вёрстка страницы о нас. смотреть видео
20. Настройка страницы портфолио. смотреть видео
21. Вёрстка навигации страницы. смотреть видео
22. Вёрстка анонсов портфолио. смотреть видео
23. Вёрстка Pager. смотреть видео
24. Установка галереи. смотреть видео
25. Вёрстка контента портфолио. смотреть видео
26. Вёрстка right-bar портфолио. смотреть видео
27. Анализ структуры темы. смотреть видео
28. Перенос шаблона в папку темы. смотреть видео
29. Создание пользовательских настроек. смотреть видео
30. Добавление функционала виджета иконок. смотреть видео
31. Создание произвольных меню на сайте. смотреть видео
32. Реализация слайдера главной страницы. смотреть видео
33. Вывод главной страницы. смотреть видео
34. Создание блока записей About Us. смотреть видео
35. Создание блока записей Our Work. смотреть видео
36. Написание функции списка меток. смотреть видео
37. Вывод записи аккордеона и вкладок. смотреть видео
38. Создание шаблона записи. смотреть видео
39. Добавление блока наша команда. смотреть видео
40. Реализация функционала хлебных крошек. смотреть видео
41. Добавление шаблона рубрики. смотреть видео
42. Работа с метками рубрики. смотреть видео
43. Написание функции пагинации. смотреть видео
44. Создание индивидуального шаблона для записей рубрики Our Work. смотреть видео
45. Вывод слайдера записей портфолио. смотреть видео
46. Добавление виджетов шаблона портфолио. смотреть видео
47. Реализация блока связанных постов. смотреть видео
48. Создание шаблонов страниц, меток и поиска. смотреть видео

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

 
Для получения новостей введите свой e-mail:


Наверх