Тема 7. Bootstrap. Создание полноценного сайта портала о героях комиксов Марвел. Часть 1

Автор: | 23.11.2016
Нет комментариев

Тема урока

На последних двух уроках по Bootstrap мы разберем полный цикл создания сайта. Мы будем создавать информационный портал о героях комиксов.

Полный цикл создания сайта включает в себя:

  • Предпроектные исследования
  • Составление проекта сайта
  • Реализация проекта
  • Отладка и тестирование
  • Завершение и защита проекта

Давайте разберем, что же включает в себя каждый этап цикла создания сайта.

Предпроектные исследования.

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

  • Какие фирмы конкурируют в данной области? (Кто кроме Марвел создает комиксы?) Сделайте обзор используя Гугл. Введя в поисковой строке запрос вы увидите что существуют два крупных игрока на рынке создающем комиксы — DC и Марвел. Сделайте обзор героев используя материалы из поисковых систем.
    ss-2016-11-01-at-12-17-47
    Задание 1. Разделитесь на две команды
  • Какую информацию желательно иметь на сайте.
    Задание 2. Составить список супергероев, комиксов и фильмов с их участием. 
  • Каковы цели и задачи, стоящие перед сайтом. Обсудить с классом цели сайта.
    Цели сайта
    1. Создать портал с полезной информацией про миры Марвел и их героев.
    2. Собрать на сайте фанатов комиксов и дать им возможность делиться полезной информацией с сайта в социальных сетях на своих страничках.

После того, как мы выполнили предпроектные исследования. Мы составляем отчет, который ложится в основу следующего этапа — составления проекта сайта.

 

Составление проекта сайта

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

Проект содержит разделы:

  • Цели создания сайта. (Были разработаны в предпроектном исследовании)
  • Концепция сайта. (Были разработаны в предпроектном исследовании)
  • Характеристики аудитории сайта. (Были разработаны в предпроектном исследовании)
  • Структура сайта
  • Описание титульной страницы и второстепенных страниц.
  • Требования к дизайну и навигации

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

Задание 3. Разработать структуру сайта описание основных страниц. Создать описание титульной страницы и требования к навигации.

Пример:

Структура сайта и описание основных страниц.

  1. Титульная страница будет содержать анонсы всех страниц сайта. (Новости, Фильмы, Герои, Блог)
  2. Новостная лента будет содержать последние новости о новых комиксах и фильмах и событиях Марвел.
  3. Раздел «Фильмы» будет содержать информацию о ваших любимых фильмах по сюжетам комиксов.
  4. Раздел «Герои» будет содержать в себе описание популярных и известных героев Марвел.
  5. В разделе блог мы заложим верстку блога который запрограммируем позже когда будем изучать язык PHP.

Требования к дизайну и навигации.

  1. Основные цвета сайта красный белый и черный.
  2. Навигация сайта содержит в себе основные страницы и выпадающие меню которые содержат самые популярные фильмы, новости и популярных героев.
  3. Главная страница содержит:
    меню и баннер под ним
    ss-2016-11-01-at-01-11-27
    Анонсы второстепенных страниц сайта
    ss-2016-11-01-at-01-13-46
    Ссылки на страницы самых популярных героев.
    ss-2016-11-01-at-01-14-28
    Последний анонс фильма
    ss-2016-11-01-at-01-15-44

Реализация проекта

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

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

Приступим к реализации проекта. 

Код главного меню и баннера.

  1. <!DOCTYPE html>
  2. <html lang=«RU»>
  4. <head>
  6. <meta charset=«utf-8»>
  8. <title>Сайт о гереоях комиксов марвел</title>
  9. <link href=«css/bootstrap.min.css» rel=«stylesheet»>
  10. <link href=«css/mycss.css» rel=«stylesheet»>
  11. <link href=«font-awesome/css/font-awesome.min.css» rel=«stylesheet» type=«text/css»>
  12. <script src=«js/jquery.js»></script>
  13. <script src=«js/bootstrap.min.js»></script>
  15. </head>
  17. <body>
  18. <!— Навигация по сайту —>
  19. <nav class=«navbar navbar-default navbar-fixed-top red» role=«navigation»>
  20. <div class=«container»>
  21. <div class=«navbar-header»>
  22. <button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=«#bs-example-navbar-collapse-1»>
  23. <span class=«icon-bar»></span>
  24. <span class=«icon-bar»></span>
  25. <span class=«icon-bar»></span>
  26. </button>
  27. <a class=«navbar-brand white» href=«index.html»>Энциклопедия героев</a>
  28. </div>
  29. <div class=«collapse navbar-collapse» id=«bs-example-navbar-collapse-1»>
  30. <ul class=«nav navbar-nav navbar-right white»>
  31. <li>
  32. <a href=«portfolio-3-col.html»>Фильмы</a>
  33. </li>
  34. <li class=«dropdown»>
  35. <a href=«#» class=«dropdown-toggle» data-toggle=«dropdown»>Герои и персонажи <b class=«caret»></b></a>
  36. <ul class=«dropdown-menu»>
  37. <li>
  38. <a href=«about.html»>Команда мстителей</a>
  39. </li>
  40. <li>
  41. <a href=«about.html»>Стражи галактики</a>
  42. </li>
  43. <li>
  44. <a href=«about.html»>Герои киновселенной</a>
  45. </li>
  46. <li>
  47. <a href=«about.html»>Злодеи</a>
  48. </li>
  49. <li>
  50. <a href=«about.html»>Другие персонажи</a>
  51. </li>
  52. </ul>
  53. </li>
  54. <li class=«dropdown»>
  55. <a href=«#» class=«dropdown-toggle» data-toggle=«dropdown»>Блог <b class=«caret»></b></a>
  56. <ul class=«dropdown-menu»>
  57. <li>
  58. <a href=«forum.html»>Обсуждения</a>
  59. </li>
  60. <li>
  61. <a href=«blog-home-2.html»>Новости</a>
  62. </li>
  63. </ul>
  64. </li>
  65. </ul>
  66. </div>
  67. </div>
  68. </nav>
  70. <!— Заголовок —>
  71. <header id=«myCarousel» class=«carousel slide»>
  72. <div class=«fill» style=«background-image:url(‘images/1.png’);»></div>
  73. </header>

Результат:

ss-2016-11-01-at-01-11-27

Код анонсов страниц:

  1. <!— секция коротко о содержимом сайта —>
  2. <div class=«row»>
  3. <div class=«col-lg-12»>
  4. <h1 class=«page-header»>
  5. Добро пожаловать на сайт энциклопедию героев <small>Здесь вас ждут</small>
  6. </h1>
  7. </div>
  8. <div class=«col-md-4»>
  9. <div class=«panel panel-default»>
  10. <div class=«panel-heading»>
  11. <h4><i class=«fa fa-bullhorn» aria-hidden=«true»></i> Новости</h4>
  12. </div>
  13. <div class=«panel-body»>
  14. <p>Вы всегда сможете почитать все самые свежие новости о комиксах и фильмах</p>
  15. <a href=«blog-home-2.html» class=«btn btn-danger»>Далее</a>
  16. </div>
  17. </div>
  18. </div>
  19. <div class=«col-md-4»>
  20. <div class=«panel panel-default»>
  21. <div class=«panel-heading»>
  22. <h4><i class=«fa fa-film» aria-hidden=«true»></i> Фильмы</h4>
  23. </div>
  24. <div class=«panel-body»>
  25. <p>Все о ваших любимых фильмах. Самые интересные факты и истории.</p>
  26. <a href=«portfolio-3-col.html» class=«btn btn-danger»>Далее</a>
  27. </div>
  28. </div>
  29. </div>
  30. <div class=«col-md-4»>
  31. <div class=«panel panel-default»>
  32. <div class=«panel-heading»>
  33. <h4><i class=«fa fa-user-secret» aria-hidden=«true»></i> Герои и персонажи</h4>
  34. </div>
  35. <div class=«panel-body»>
  36. <p>Энциклопедия героев в фото и все о них в фильмах и комиксах.</p>
  37. <a href=«about.html» class=«btn btn-danger»>Далее</a>
  38. </div>
  39. </div>
  40. </div>
  41. </div>

Результат:

ss-2016-11-01-at-01-13-46

Код секции герои и персонажи:

  1. <!— Секция сайта герои персонажи —>
  2. <div class=«row»>
  3. <div class=«col-lg-12»>
  4. <h2 class=«page-header»>Герои и персонажи <a href=«about.html» class=«btn btn-danger»>Остальные герои</a></h2>
  5. </div>
  6. <div class=«col-md-4 col-sm-6»>
  7. <a href=«index.html»>
  8. <img class=«img-responsive img-portfolio img-hover» src=«images/2.png» alt=«»>
  9. </a>
  10. </div>
  11. <div class=«col-md-4 col-sm-6»>
  12. <a href=«index.html»>
  13. <img class=«img-responsive img-portfolio img-hover» src=«images/3.png» alt=«»>
  14. </a>
  15. </div>
  16. <div class=«col-md-4 col-sm-6»>
  17. <a href=«index.html»>
  18. <img class=«img-responsive img-portfolio img-hover» src=«images/4.png» alt=«»>
  19. </a>
  20. </div>
  21. <div class=«col-md-4 col-sm-6»>
  22. <a href=«index.html»>
  23. <img class=«img-responsive img-portfolio img-hover» src=«images/5.png» alt=«»>
  24. </a>
  25. </div>
  26. <div class=«col-md-4 col-sm-6»>
  27. <a href=«index.html»>
  28. <img class=«img-responsive img-portfolio img-hover» src=«images/6.png» alt=«»>
  29. </a>
  30. </div>
  31. <div class=«col-md-4 col-sm-6»>
  32. <a href=«index.html»>
  33. <img class=«img-responsive img-portfolio img-hover» src=«images/7.png» alt=«»>
  34. </a>
  35. </div>
  36. </div>

Результат:

ss-2016-11-01-at-01-14-28Код анонс фильма и футер:

 

  1. <!— Секция для фильмов —>
  2. <div class=«row»>
  3. <div class=«col-lg-12»>
  4. <h2 class=«page-header»>Мстители 3: Война бесконечности. Часть 1<a href=«portfolio-3-col.html» class=«btn btn-danger»>Другие фильмы</a></h2>
  5. </div>
  6. <div class=«col-md-6»>
  7. <p>Краткая информация:</p>
  8. <ul>
  9. <li><strong>Оригинальное название:</strong> Avengers: Infinity War. Part I</li>
  10. <li><strong>Режиссер:</strong> Энтони Руссо, Джо Руссо</li>
  11. <li><strong>Жанр:</strong> Фантастика, Боевик</li>
  12. <li><strong>Премьера мир:</strong> 26 апреля 2018 года</li>
  13. </ul>
  14. <p>Танос долгие годы потратил на то, чтобы сосредоточить в своей власти все шесть камней бесконечности, который теперь собраны в один невероятный артефакт — <strong>Перчатку Бесконечности</strong>. С этого начинается сюжет фильма <strong>Мстители 3</strong>. С помощью этой перчатки и без того могущественный Танос стал практически непобедимым врагом, способным уничтожать целые галактики. Вся вселенная теперь в опасности без возможности противостоять злодею на равных.</p>
  15. <p>В опасности все, включая Землю. В фильме <strong>Мстители 3: Война бесконечности</strong> защитники нашей планеты, известные под именем Мстителей, с некоторых пор разобщены и даже враждуют друг с другом. Даже новые члены команды, как молодой Человек-паук и величайший маг Доктор Стрэндж, справиться с Таносом будет очень нелегко. Надежда на то, что в фильме <strong>Мстители 3</strong> герои вновь объединятся все еще есть, но сумеют ли они побороть врага, который способен стереть их в порошок вместе с целой галактикой?</p>
  16. <img class=«img-responsive» src=«images/2.jpg» alt=«»><br>
  17. <a href=«blog-post.html» class=«btn btn-danger»>Далее …</a>
  18. </div>
  19. <div class=«col-md-6»>
  20. <img class=«img-responsive» src=«images/1.jpg» alt=«»>
  21. </div>
  22. </div>
  23. <hr>
  25. <!— Footer —>
  26. <footer>
  27. <div class=«row»>
  28. <div class=«col-lg-12»>
  29. <p>Copyright &copy; Ваш веб-сайт 2016</p>
  30. </div>
  31. </div>
  32. </footer>

Результат:

ss-2016-11-01-at-01-15-44

ss-2016-11-01-at-01-25-49

Созданием второстепенных страниц мы займемся на следующем занятии.