21774

Разработка раздела «Фотогалерея» и создания модуля просмотра фотографий

Лабораторная работа

Информатика, кибернетика и программирование

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

Русский

2014-03-24

1.31 MB

10 чел.

Лабораторная работа №2.

Тема: Разработка раздела «Фотогалерея» и создания модуля просмотра фотографий.

В прошлой лабораторной работе вы разработали дизайн сайта и сверстали его каркас/ На его основе вы выполнили задание по созданию таких разделов:

  •  Список группы;
  •  Куратор;
  •  Преподаватели;
  •  Расписание;
  •  Культ-массовая работа;
  •  Научная работа.

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

  1.  удобно,
  2.  понятно.

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

Рис.1. Графическое представление раздела «Фотогалерея»

Для создания данного раздела воспользуемся ранее сверстанным каркасом.    Итак, в блоке DIV,  ID которого является «osnov», все должно быть стерто и его вид должен быть следующим:

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

Пусть будущий дизайн модуля выглядит как  на рисунке 2.

Рис.2. Дизайн модуля для увеличения фотографий

  После графической разработки модуля, необходимо переходить непосредственно  к верстке и программированию. Логично начать с верстки страницы, для этого нам понадобится тег <img>. Но прежде чем начать верстку, необходимо в папке images создать новую папку под названием fotogalery, а в ней соответственно папку 1_kurs и поместить туда восемь фотографий, имеющих расширение JPG. Каждое изображение должно  иметь имя в виде цифры. Названия изображений должны быть следующими; 1.jpg, 2.jpg и так до девяти. То есть у вас в папке должно быть восемь изображений имеющие следующие названия:

  1.  1.jpg,
  2.  2.jpg,
  3.  3.jpg,
  4.  4.jpg,
  5.  5.jpg,
  6.  6.jpg,
  7.  7.jpg,
  8.  8.jpg.

После того как картинки подготовлены, можно переходить к верстке страницы.   Для этого  нам понадобится тег <img>. В нашем случае синтаксис будет выглядеть следующим образом:

<img src="images/fotogalery/1_kurs/1.jpg"  class="foto" >

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

Как представлено на рисунке 2, в одну строку помещается  два изображения, то есть код раздела «фотогалерея» будет выглядеть следующим образом:

          

<img src="images/fotogalery/1_kurs/1.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/2.jpg"  class="foto"><br>

<img src="images/fotogalery/1_kurs/3.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/4.jpg"  class="foto" ><br>

<img src="images/fotogalery/1_kurs/5.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/6.jpg"  class="foto"><br>

<img src="images/fotogalery/1_kurs/7.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/8.jpg"  class="foto" ><br>

Данный код необходимо вставить в блок «osnov», сохранить затем открыть код css.css и ввести следующие значения:

 

Теперь необходимо сохранить и проверить результат в браузере. Если все работает верно, то переходим к созданию модуля, для этого создайте новый файл в папке «js» под названием «fotography.js», а в файле  1_kurs.html в теге <head> прикрепите новый модуль, как   это было сделано для модуля отвечающего за меню. Пример кода, который нужно поместить в тег <head>  представлен ниже:

<script src="js/fotography.js"></script>

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

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

Логика модуля следующая:

  •  создать прозрачный блок;
  •  создать блок с фоновым цветом #5a5044;
  •  вывести во второй блок изображение размером  503х393;
  •  вывести в заголовке блока количество фотографий на странице и номер открытой фотографии;
  •  создать кнопки переключения фотографий;
  •  создать кнопку, которая закрывает созданные блоки.

Теперь переведем словесный алгоритм в программный код. Давайте начнем с самого первого задания в нашем списке- создадим прозрачный блок и блок с фоном такого цвета #5a5044;

 

 

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

 

 

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

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

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

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

Сохраните и проверьте.

Самостоятельное задание.

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


 

А также другие работы, которые могут Вас заинтересовать

28065. Право природопользования и его виды 6.38 KB
  Право природопользования является одним из важнейших институтов экологического и природоресурсного права. Виды права природопользования По критерию объекта это право землепользования лесопользования водопользования пользования недрами животным миром растительным миром вне лесов атмосферным воздухом. Общее право характеризуется производностью от конституционного права каждого на благоприятную окружающую среду на свободу передвижения и т. Оно характеризуется платностью и необходимостью принятия...
28066. Право собственности на природные ресурсы 6.84 KB
  Под понятием права собственности на землю и другие природные ресурсы т. Исходные положения регулирующие право собственности на землю и другие природные ресурсы установлены в ст. 9 Конституции РФ которая гласит что земля и другие природные ресурсы могут находиться в частной государственной муниципальной и иных формах собственности.
28067. Правовое обеспечение экологического контроля на гос и муниципальном уровнях 3.13 KB
  Положение об осуществлении гос лесного контроля и надзора осуществляемого Федй службой по ветеринарному и фитосанитарному надзору Федй службой по надзору в сфере ПП и органами исполнительной власти субъктов РФ утверждено Постановлением Правительства РФ от 22 июня 2007г №394. В соответствии с законодательством муниципальные образования наделены полномочиями по осуществлению муниципального лесного контроля и муниципального земельного контроля. Осуществление муниципального экологического контроля органами местного самоуправления действующим...
28068. Правовой режим особо охраняемых территорий 5.54 KB
  Особо охраняемые природные территории определены законодательством РФ как участки земли водной поверхности и воздушного пространства над ними где располагаются природные комплексы и объекты имеющие особое природоохранное научное культурное эстетическое рекреационное и оздоровительное значение. Общественные отношения в сфере организации охраны и использования особо охраняемых природных территорий с целью сохранения уникальных и типичных природных комплексов и объектов достопримечательных...
28069. Правовой режим селитебных территорий 11.23 KB
  Требования охраны окружающей природной среды экологическойбезопасности при осуществлении градостроительной деятельности заключаются в следующем: разработка градостроительной документации строительство и реконструкция городских и сельских поселений зданий строений и сооружений должны осуществляться с соблюдением требований охраны окружающей природной среды экологической безопасности и санитарных правил. При этом необходимо учитывать состояние территорий городских и сельских поселений последствия вредного воздействия хозяйственной и иной...
28070. Правовые основы обеспечения экологической безопасности РФ 10.09 KB
  Обеспечение экологической безопасности России Концепция относит к совместному ведению Федерации и ее субъектов п. Обеспечение экологической безопасности следует рассматривать в неразрывной связи с правом каждого на благоприятную окружающую среду достоверную информацию о ее состоянии и на возмещение ущерба причиненного здоровью или имуществу экологическим правонарушением ст. Не менее важен ФЗ О радиационной безопасности населения который определяет правовые основы обеспечения радиационной безопасности населения в целях охраны его...
28071. Правовые основы охраны атмосферного воздуха 10.79 KB
  В целях сохранения благоприятного качества атмосферного воздуха государством предусмотрены следующие нормативы воздействия на атмосферный воздух: 1 производственные нормативы предельно допустимые выбросы ПДВ загрязняющих веществ; нормативы шумового теплового вибрационного радиационного электромагнитного и других физических воздействий; временно согласованные выбросы лимит загрязняющих веществ; 2 территориальные нормативы величина критических совокупных нагрузок на атмосферный воздух от...
28072. Система органов гос управления в области природопользования и охраны ос. Их функции 9.75 KB
  Управление выражается через законотворческую деятельности в области охраны окружающей среды в разработке мероприятий по охране окружающей среды программ контроле за исполнением норм в области охраны окружающей среды нормативных актов всех уровней. Только государственное управление из всех возможных является реальным инструментом осуществляющим реализацию правоустанавливающих правореализующих и контролирующих функций в области охраны окружающей среды на территории РФ....
28073. Экологические требования при осуществлении хоз и иной деятельности в Законе « Об охране ОС» 6.25 KB
  Общие требования в области охраны окружающей среды при размещении проектировании строительстве реконструкции вводе в эксплуатацию эксплуатации консервации и ликвидации зданий строений сооружений и иных объектов 1. Размещение проектирование строительство реконструкция ввод в эксплуатацию эксплуатация консервация и ликвидация зданий строений сооружений и иных объектов оказывающих прямое или косвенное негативное воздействие на окружающую среду осуществляются в соответствии с требованиями в области охраны...