Разработка визуального интерфейса электронного учебного пособия
Суть создания электронного учебного пособия. Обзор программного обеспечения для разработки проекта. Анализ процесса подстройки под себя элементов посадочной страницы, с помощью получаемых знаний из пособия. Разработка меню с основными разделами сайта.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 28.03.2018 |
| Размер файла | 567,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Министерство образования Иркутской области
Государственное бюджетное профессиональное образовательное учреждение Иркутской области «Иркутский авиационный техникум»
ЭУММ «Landing»
Студент
Н.О. Иванов
Руководитель:
А.С. Некипелова
Иркутск 2016
Содержание
Введение
1. Общая часть
1.1 Понятия электронного учебного пособия
1.2 Обзор программного обеспечения для разработки
2. Специальная часть
2.1 Постановка задачи
2.2 Программные средства реализации задачи
3. Технологическая часть
3.1 Руководство пользователя
3.2 Системно-технические требования
Заключение
Приложение
Введение
В большинстве современных образовательных учреждениях всё большое внимание уделяется компьютерному сопровождению профессиональной деятельности. В учебном процессе всё чаще встречаются обучающие и тестирующие программы по разным дисциплинам образовательного процесса.
Использование обучающих и тестирующих программ в различных дисциплинах (в процессе получения теоретических знаний и опыта на практике) показывают, что их использование позволяет повысить успеваемость обучаемого по данной дисциплине, но иногда повышают его интерес к его будущей специальности. Такие программы позволяют каждому учащемуся индивидуализировать свой процесс обучения, участвовать в процессе образования с удобством, а также осуществлять самоконтроль получаемых знаний для повышения их уровня. Большинство учащихся понимают зрительную информацию лучше, чем любым другим способом, тем более, если она подаётся доступно и качественно. У компьютера есть особенность, он выполнять роль терпеливого педагога, способного показать ошибку, дать подсказку или правильный ответ, и выполнять определённое задание снова и снова, без растроенности и растерянности.
Время берёт своё, многие программы быстро теряют свою актуальность, как и учебный материал, и форма его представления.
В наше время для сферы образования всё актуальнее становится разработка компьютерных программ - электронных учебников по разным дисциплинам.
С помощью электронного издания мы сможем увидеть текст, иллюстрации, видеоролики и услышать звук. Отличие печатного пособия в отсутствии двух последних преимуществ, это лишает нас двух немаловажных возможностей получения информации. Если использовать по полной возможности звук, анимации, видео, гиперссылки, то это уже будет уже совсем иное по своей структуре издание. Электронные издания могут распространяться с помощью физических носителей или через сеть Интернет. В настоящие время количество электронных пособий только растёт.
Необходимо решить следующие задачи:
1) разработать визуальный интерфейс ЭУММ;
2) заполнить содержание учебника актуальными данными из нескольких источников;
3) протестировать удобство использования ЭУММ.
1. Общая часть
1.1 Понятия электронного учебного пособия
В разных источниках указаны следующие определения электронного учебника:
- Это совокупность графической, текстовой, цифровой, речевой, музыкальной, видео-, фото- и другой информации, а также печатной документации пользователя. Электронное издание может быть исполнено на любом электронном носителе - магнитном (магнитная лента, магнитный диск и др.), оптическом (CD-ROM, DVD, CD-R, CD-1, СD+ и др.), а также опубликовано в электронной компьютерной сети.
- Учебное издание, содержащее систематическое изложение учебной дисциплины или ее раздела, части, соответствующее государственному стандарту и учебной программе и официально утвержденное в качестве данного вида издания.
- Должно содержать систематизированный материал по соответствующей научно-практической области знаний, обеспечивать творческое и активное овладение студентами и учащимися знаниями, умениями и навыками в этой области. Учебное электронное пособие должно отличаться высоким уровнем исполнения и художественного оформления, полнотой информации, качеством методического инструментария, качеством технического исполнения, наглядностью, логичностью и последовательностью изложения.
Виды электронных учебных пособий
- Тест
Простейшая форма электронного учебника. Основная сложность заключается в правильной подборке и формулировке вопросов, а для ответов на вопросы, краткость и одновременно ёмкость. Хорошо составленный тест позволяет получить объективную картину знаний, умений и навыков, которыми владеет учащийся в определенной предметной области.
- Энциклопедия
Базовая форма электронного учебника. Своим содержанием энциклопедия означает, что информация, присутствующая в электронном учебнике, должна быть полной и иногда даже избыточной, чем это необходимо.
- Задачник
Учащийся получает информацию, необходимую для решения конкретной поставленной задачи. Основная проблема - подбор задач, использующих ранее изученный материал.
- Креативная среда
Современные электронные учебники должны обеспечивать творческую работу учащегося с объектами изучения и с взаимодействующие с ранее полученными знаниями. Именно творческая работа, лучше всего подходит для выполнения проекта, поставленным преподавателем задания, способствует формированию и закреплению умений и навыков у учащегося. Одно из преимущество креативной среды, позволяет ей организовать коллективную работу учащихся над проектом.
- Авторская среда
Электронный учебник должен быть адаптирован к местному учебному процессу. Такая среда, например, обеспечивает включение дополнительных материалов в электронную энциклопедию, позволяет пополнять задачник, готовить раздаточные материалы и методические пособия по связанному предмету. Это очень похоже на то, как создается сам электронный учебник.
- Невербальная среда
Обычно электронные учебники вербальны по своей сути. Они излагают теоретический материал в текстовом или графическом виде. Однако, в электронном учебнике возможно реализовать метод «повтори за мной». Невербальная среда наделяет электронный учебник чертами живого учителя.
Приведённые выше виды электронного учебника, могут быть реализованы в виде отдельных электронных учебников либо сгруппированы в единого целого всё лишь зависит от задумки «автора». Однако, автор должен владеть знаниями о возможностях электронных учебников и уметь отбирать только самое необходимое из разных источников
1.2 Обзор программного обеспечения для разработки
HTML - стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML преобразуется браузерами; полученный в результате преобразования форматированный текст отображается на экране.
CSS - стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML преобразуется браузерами; полученный в результате преобразования форматированный текст отображается на экране.
JavaScript - прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Имеет большое количество фреймворков упрощающих разработку.
PHP - скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов. Мой выбор на него не пал, в связи с его сложностью его изучения по сравнению с HTML, так же из недостатков языка отмечается необходимость иметь web-сервер.
Выбор среды разработки
Для разработки был выбран язык разметки документов во Всемирной паутине HTML. Большинство веб-страниц в мире содержат описание на языке разметки HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. Также HTML является теговым языком разметки документов.
Основными причинами послужили: кроссплатформенность, активное и перспективное развитие технологии, а так же обширная сфера применения.
2. Специальная часть
2.1 Постановка задачи
В курсовой работе необходимо разработать и создать ЭУММ для обучения человека с минимальными знаниями HTML, CSS, JavaScript. Показать процесс разработки и подстройки под себя элементов посадочной страницы, с помощью получаемых знаний из данного пособия. Для получения оптимального плана необходимо составить опорный план и впоследствии оптимизировать его.
Требования: электронный пособие программный сайт
Для успешной работы и принятием пользователями ЭУММ необходимо: разработать интерфейс и его дизайн, брать информацию из нескольких источников, а затем выбирая всё лучшее из имеющейся информации, создать один качественный материал с понятной и чёткой структурой. Структурировать полученный материал по главам учебника, в соответствии с заявленным названием и информационным наполнением.
2.2 Программные средства реализации задачи
Sublime Text 3 чаше всего используется как редактор исходного кода и HTML, так же поддерживает плагины на языке программирования Python. Особенности программы заключаются в удобном и понятном интерфейсе. Авто дополнение кода позволяет набирающему пользователю код, в зависимости от используемого языка программирования, предлагать различные варианты завершения записи. В редакторе так же имеется возможность автоматического завершения переменных пользователя, что иногда позволяет избежать глупых ошибок и экономит время. Интерфейс программы изображён на рисунке 1.
Рисунок 1 - Интерфейс Sublime Text 3
3. Технологическая часть
3.1 Руководство пользователя
В процессе разработки ЭУММ полезно разработать удобный графический интерфейс, поэтому выбору дизайна было уделено немало времени. К примеру, как показано на рисунке 2, на каждой странице присутствует меню с логотипом и основными разделами сайта для быстрого доступа, и удобной навигации по нему.
Рисунок 2 - Меню с основными разделами сайта
На рисунке 3 представлена главная страница электронного пособия, на которой кратко описаны основные преимущества использования посадочных страниц.
Рисунок 3 - Главная страница
Важной частью в любом учебном пособии является содержание, порой в некоторых пособиях присутствует много материала. Содержание позволяет нам быстро ориентироваться материале, страница с содержанием пособия, представлена на рисунке 4.
Рисунок 4 - Страница с содержанием
Страницы, содержащие непосредственно обучающий материал, по своей структуре имеют минимальные отличия друг от друга, пример такой странице представлен на рисунке 5.
Рисунок 5 - Пример страницы с учебным материалом
3.2 Системно-технические требования
Для работы программы требуется:
1) Windows 7 или старше;
2) 512 МБ оперативной памяти;
3) Процессор Intel Pentium 4 или более поздняя версия с поддержкой SSE2;
4) 10 Мб на диске.
Заключение
При использовании электронных учебных пособий происходит не только улучшение личных навыков обучающегося, но и развитие его абстрактно - логического мышления, что помогает в лучшем усвоении предоставленного материала.
Электронные учебные пособия предоставляют отличную альтернативу деятельности обучающего, с пользой как и для преподавателя, так и для ученика. Каждому ученику это даёт возможность работать в своём темпе, это позволяет развиваться способностям личности учиться и самоутверждаться, а преподавателю экономить время, и иметь учеников с примерно равными возможностями.
Современные информационные технологии позволяют всё больше удостоверится в их универсальности и массовой доступности. Однако, при всех огромных возможностях, это лишь средство сделать более продуктивной деятельность учащегося.
Приложение
Листинг randompage.js
window.onload = function(){
pages = new Array('why.html', '1.html', '2.html', '3.html', '4.html');
window.location.href=pages[Math.floor(Math.random(5) * pages.length)]
Листинг index.html
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="contentmain"><!--сам контент между блоками-->
<div id="header">
<div class="mainline"> Узнайте основы постройки Landing Page </div>
</div>
<div id="header_lower">
<div id="middle_headline">Почему именно Landing Page?</div>
<div id="middle_text">Это один из нагляднийших способов презентовать и показать что-либо,всё лёгкодоступно и понятно на одной странице,и никакой "воды"...</div>
</div>
<div id="header_lower">
<div id="middle_headline">Маркетологи любят Landing Page</div>
<div id="middle_text">Целевые страницы яркие, информативные, привлекающие внимание пользователя и не перегружают его, они располагают его к какому-либо действию (покупка, регистрация и т.д.)
</div>
</div>
</div>
<div id="bottom_bar">
<div id="main_container"><!--нижний бар-->
<div id="header_content_lowerline"><a id="indextocontent" href="content.html">Перейти к изучению</a></div>
</div>
</div>
</div>
<div id="copyright">Иркутский Авиационный Техникум 2016г.</div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="contentmain"><!--книга-->
<div id="headercontent">
<div class="mainline"> Содержание пособия</div>
<div id="whyhtml">
<a class="whylink" href="http://psd-html-css.ru/">Сайт с различными элементами для ваших страниц</a></div>
<div id="linkhtml">
<a class="whylink" href="http://psd-html-css.ru/shablony/html-landing-page">Страница с готовыми шабломами посадочных страниц</a></div>
</div>
</div>
<div id="bottom_bar"><!--нижний бар-->
<div id="main_container">
<div id="header_lower">
<div id="header_content_lowerline">
<div id="header_content_lowerboxcontent">
</div>
</div>
</div>
<div id="header_lower"> <div id="header_content_lowerline">
<div id="header_content_lowerboxcontent"></div>
</div>
</div>
</div>
</div>
<div id="copyright"> Иркутский Авиационный Техникум 2016г.</div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="contentwhy">
<div id="headercontent">
<div id="pagecontentmain">Главные особенности Landing Page</div>
</div>
<div id="header_lower">
<div id="pagecontenttextright"><h2>Целевая страница</h2>
<b>Landing page</b> (лендинг пейдж) это целевая страница, которая показывается пользователю, после того как он перейдет по <b>рекламной ссылке</b></div>
<div id="pagecontenttextleft"><h2>Как сделать хорошую целевую страницу?</h2>
Показывающая результаты <b>целевая страница</b> должна всегда содержать несколько ключевых элементов:
<ul><li>только<b> одну</b> запланированную <b>цель</b> напр. заполнить форму, купить что-либо</li>
<li><b>призыв к действию</b> напр. заполнить форму, купить что-либо</li>
<li><b>простой </b>дизайн</li>
<li>короткие и связные тексты, написанные максимально <b>понято</b></li>
<li>отсутствие <b>отвлекающих</b> элементов в дизайне</li>
<li><b>отсутствие</b> классического меню</li></ul></div>
<div id="pagecontenttextbig">Немного подробнее...</div>
<div id="pagecontenttext">Тенденция роста популярности одностраничных сайтов, предназначенных для представления товаров и услуг определенной компании, очень высока. Он предназначен для непосредственного привлечения клиентов компании напрямую, побуждая их купить товар или воспользоваться услугой компании.</br>
Такой ресурс является чрезвычайно эффективным средством продаж с точки зрения бизнеса. Цель одностраничного сайта заключается в максимально быстром склонении посетителя к совершению нужного действия (приобретения продукта, подписки, выполнения заказа и т.п.). Пользователи, как правило, попадают на такие страницы из другого ресурса (после клика по рекламному баннеру).</br>Что касается дизайна одностраничного сайта, то он должен быть максимально привлекательным. То есть цвета следует выбирать яркие и насыщенные. Кнопки и формы заказа должны быть выделены из общего фона страницы.
</div>
</div>
</div>
</div>
</div>
<div id="bottom_bar">
<div id="main_container"><!--нижний бар-->
<div id="header_lower">
<div id="header_content_lowerline">
<div id="header_content_lowerboxcontent">
</div>
</div>
</div>
<div id="header_lower"> <div id="header_content_lowerline">
<div id="header_content_lowerboxcontent"></div>
</div>
</div>
</div>
</div>
<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>
</body>
</html>
<DOCTYPE html><!--Содержание-->
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало верхнего бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="contentcontent"><!--книга-->
<div id="headercontent">
<div id="pagecontentmain"> Содержание пособия</div>
<div id="whyhtml">
<a class="whylink" href="why.html">Главные особенности Landing Page</a></div>
<div id="forpeople">
<a>Для людей с минимальными знаниями HTLM, CSS , JavaScript:</a></div>
<div id="linkhtml">
<a class="whylink" href="1.html">1. "Подводные камни" готовых шаболонов</a></div>
<div id="linkhtml">
<a class="whylink" href="2.html">2. Выбираем наш уникальный шаблон</a></div>
<div id="linkhtml">
<a class="whylink" href="3.html">3. Меняем код под себя</a></div>
<div id="linkhtml">
<a class="whylink" href="4.html">4. Подведём итоги</a></div>
</div>
</div>
<div id="bottom_bar"> <!--нижний бар-->
<div id="main_container">
<div id="header_lower">
<div id="header_content_lowerline">
<a class="bottombutton" href="index.html">Главная</a> | <a class="bottombutton" href="random.html">Случайная глава</a>
</div>
</div>
</div>
</div>
<div id="copyright">Иркутский Авиационный Техникум 2016г.</div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
<script src="javas/randompage.js"></script>
</head>
<body>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="content1">
<div id="headercontent">
<div id="pagecontentmain">Урок первый</div>
<div id="pagecontentmain2">"Подводные камни" готовых шаболонов</div>
</div>
<div id="header_lower">
<div id="pagecontenttextbig">Зачем нам шаблон?</div>
<div id="pagecontenttext">Начнём с того что Landing Page в большенстве случаев можно навать <b>волшебной палочкой</b> в мире интернет-маркетинга. Предложи клиенту выгоду, расскажи о преимуществах, добавь привлекательную картинку -- и всё готово. Магия Landing Page обезоруживает пользователя -- он не может и не должен уходить с посадочной страницы, не совершив целевого действия -- подписки на рассылку, покупки, передачи вам своих контактов.</br>
<b>Однако это были ожидания,а теперь перейдём к ужасайющей реальности.</b> Пользователи уходят с абсолютно идентичных страниц, <b>порой просматривая их не до конца</b>, игнорируя призывы к действию, скидки и счетчики, которые отсчитывают часы до конца акции. <b>Проблема в том, что маркетологи и веб-агенства используют крайне шаблонные способы создания Landing Page</b> ,а это всё из-за желания "лёгкой наживы" которая ни к чему в итоге не приводит. Типовые, будто скопированные друг с друга посадочные страницы только раздражают пользователя, дают негативный эффект. Как избежать этого? Вернитесь к истокам и используйте для создания Landing Page <b>базовые принципы</b>, а не «проверенные» шаблоны и «реально работающие схемы».
Однако, в данном пособии мы всё делаем скорее <b>для себя лично</b>, а если точне для расширения нашего кругозора</br>Дизайн одностраничного сайта, конечно должен быть максимально привлекательным. То есть цвета следует выбирать яркие и насыщенные. Кнопки и формы заказа должны быть выделены из общего фона страницы.
</div>
<div id="linkhtml">
<a class="whylink" href="2.html">Теперь зная основные ошибки, мы можем перейти к выбору Вашего,уникального шаблона.</a></div>
<div id="pagecontentmain2"></div>
</div>
</div>
</div>
</div>
<div id="bottom_bar">
<div id="main_container"><!--нижний бар-->
<div id="header_lower">
<div id="header_content_lowerline">
<div id="header_content_lowerboxcontent">
</div>
</div>
</div>
<div id="header_lower"> <div id="header_content_lowerline">
<div id="header_content_lowerboxcontent"></div>
</div>
</div>
</div>
</div>
<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="content2">
<div id="headercontent">
<div id="pagecontentmain">Урок второй</div>
<div id="pagecontentmain2">Выбираем наш уникальный шаблон</div>
</div>
<div id="header_lower">
<div id="pagecontenttextbig">Где взять шаблон?</div>
<div id="pagecontenttext">
<a class="gmailsend" href="http://psd-html-css.ru/shablony/html-landing-page">Нашими будущие страницы тут</a></div>
<div id="pic">
<img src="images/site.png">
</div>
<div id="pagecontenttext">На сайте всё понятно и удобно расположено, есть <b>предпросмотр</b>, думаю проблем возникнуть не должно.
</div>
<div id="linkhtml">
<a class="whylink" href="3.html">Теперь выбрав шаблон который Вам нравится, перейдём к следующей части.</a><a href="http://psd-html-css.ru/shablony/html-landing-page"></a></div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom_bar">
<div id="main_container"><!--нижний бар-->
<div id="header_lower">
<div id="header_content_lowerline">
<div id="header_content_lowerboxcontent">
</div>
</div>
</div>
<div id="header_lower"> <div id="header_content_lowerline">
<div id="header_content_lowerboxcontent"></div>
</div>
</div>
</div>
</div>
<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="content3">
<div id="headercontent">
<div id="pagecontentmain">Урок третий</div>
<div id="pagecontentmain2">Меняем код под себя</div>
</div>
<div id="header_lower">
<div id="pagecontenttextbig">Как мы сможем добиться уникальности?</div>
<div id="pagecontenttext">Загрузив выбранный вами шаблон, у вас в распоряжении появится папка с HTML, CSS, JavaScript.
</div>
<div id="pic">
<img src="images/folder.png">
</div>
<div id="pagecontenttext">Папку JS в которой содержится JavaScript файлы,Bootstrap-специальное приложение для придания красоты вашему сайту.
В файлах basicelements и jquery инструкции позволяющие работать самому landing-эффекту, а файл SmoothScroll обеспечевает эффект плавной прокрутки. Это <b>папку</b> желательно <b>не трогать</b>, так как всё уже настроено за Вас.
</div>
<div id="pic">
<img src="images/javascript.png">
</div>
<div id="pagecontenttext">В папке CSS содержутся файлы для<b>задания стилей</b> вашей посадочной страницы. Из всех файлов в данной папке нам понадобиться только файл <b>basicelement</b>, ибо файлы bootstrap и bootstrap.min взаимодайствуют с JavaScript, и Bootstrap файлами.</div>
<div id="pic">
<img src="images/css.png">
</div>
<div id="pagecontenttext">В файле basicelement содержутся необходимые нам элементы используемые для задания условий HTML-элементам в HTML файле.Самые часто используемые: <b>смена шрифта, его размера, начертание и отступы от других блоков.</b></div>
<div id="pic">
<img src="images/cssexaple.png">
</div>
<div id="pagecontenttext">В файле index и находится скаченный или уже изменённый вам непорсредственно Вами наша страница, со всеми возможностями и предоставляет нам <b>текущий вид страницы</b>, с всевозможными подключёнными элементами и скриптами.</br>
В нём мы в прямом смысле как в "блокноте", протисываем необходимый нам текст, а затем применяем к блоку условия заданные в CSS-файле , и работа всех подключённых вами скриптов, и плагинов, происходит исключительно тут.</div>
<div id="pic">
<img src="images/html.png">
</div>
<div id="linkhtml">
<a class="whylink" href="4.html">Поняв основы перейдём к выводу</a><a href="http://psd-html-css.ru/shablony/html-landing-page"></a></div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom_bar">
<div id="main_container"><!--нижний бар-->
<div id="header_lower">
<div id="header_content_lowerline">
<div id="header_content_lowerboxcontent">
</div>
</div>
</div>
<div id="header_lower"> <div id="header_content_lowerline">
<div id="header_content_lowerboxcontent"></div>
</div>
</div>
</div>
</div>
<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Электронное пособие Landing Page</title>
<link href="css/stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div id="top_bar"><!--начало бара-->
<div id="logo_container"> <!--лого на баре-->
<div id="logo_image"></div><!--само лого-->
<div id="bar_block"><!--кнопки с бара -->
<a class="bar_button" href="index.html">На главную</a>
<a class="bar_button" href="content.html">Содержание</a>
<a class="bar_button" href="random.html">Случайная глава</a>
<a class="bar_button" href="link.html">Полезные ссылки</a>
</div><!--кнопки кончились-->
</div> <!--лого на баре,конец-->
</div><!--конец бара-->
<div id="content4">
<div id="headercontent">
<div id="pagecontentmain">Подведём итоги</div>
</div>
<div id="header_lower">
<div id="pagecontenttextbig">Чего мы добились?</div>
<div id="pagecontenttext">Многие из Вас что-то узнали, кто-то повторил уже ему знакомую информацию.</br>Теперь имеея багаж знаний, Вы можете позволить себе больше "вольностей " при написании своего и изменении чужого кода. Полученные вами знания позволяют иметь представление о принципе построения посадочных страниц и видеть к примеру ошибки в своём и чужом коде.
</div>
<div id="pagecontenttext">
<a class="gmailsend" href="link.html">Чтобы узнать и увидеть больше</a></div>
<div id="linkhtml">
<a class="whylink" href="content.html">Для закрепления знаний можно повторить материал :)</a><a href="http://psd-html-css.ru/shablony/html-landing-page"></a></div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom_bar">
<div id="main_container"><!--нижний бар-->
<div id="header_lower">
<div id="header_content_lowerline">
<div id="header_content_lowerboxcontent">
</div>
</div>
</div>
<div id="header_lower"> <div id="header_content_lowerline">
<div id="header_content_lowerboxcontent"></div>
</div>
</div>
</div>
</div>
<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>
</body>
</html>
Размещено на Allbest.ru
Подобные документы
Особенности электронных учебных пособий и основные принципы их создания. Сбор и подготовка исходного материала для электронного учебного пособия. Разработка структуры электронного пособия. Выбор программ и разработка интерфейса электронного учебника.
дипломная работа [738,5 K], добавлен 27.06.2012Понятие электронного учебного пособия. Виды электронных учебных изданий, дидактические требования к ним. Компонент основной формы "Button1". Поэтапная разработка мультимедийного электронного учебника по дисциплине "Компьютерные сети", его интерфейс.
курсовая работа [613,6 K], добавлен 31.01.2016Развитие и классификация языков программирования. Методические рекомендации по изучению языков программирования. Основные понятия объектно-ориентированного программирования. Создание электронного учебного пособия с помощью языка гипертекстовой разметки.
курсовая работа [331,1 K], добавлен 06.09.2011Создание одной из форм обучения с использованием средств новых информационных технологий - электронного учебника. Администрирование электронного учебного пособия на тему "Линейное программирование". Проектирование структуры электронного учебника.
курсовая работа [1,7 M], добавлен 09.06.2010Рассмотрение понятия, принципов построения (гиперактивность, мультимедийность), структуры, особенностей подготовки и реализации электронного учебного пособия. Подбор наглядного и справочного материала и их связь с текстом при помощи гиперссылок.
курсовая работа [49,1 K], добавлен 18.06.2010Исследование значения современных информационных и мультимедийных технологий. Понятие и классификация электронных учебников. Характеристика особенностей представления и восприятия информации при самообучении. Проектирование электронного учебного пособия.
реферат [1,9 M], добавлен 29.12.2014Интернет-технологии в образовании, основные аспекты и принципы их применения на современном этапе. Этапы создания электронного пособия, его внутренняя структура, предъявляемые требования и технологическое обеспечение. Листинг разработанного кода.
дипломная работа [1,4 M], добавлен 03.01.2014Концептуальные основы разработки электронного учебника на основе гипертекстовых технологий. Архитектура учебного пособия. Этапы построения электронного учебника "Информатика" и его структура. Анализ практического использования электронного учебника.
дипломная работа [104,9 K], добавлен 02.05.2012Функциональное назначение и структура электронного учебника. Особенности его верстки. Элементы интерфейса. Психолого-педагогические аспекты представления образовательного контента в ЭУ. Выбор дизайн-эргономических решений. Программная реализация пособия.
дипломная работа [2,5 M], добавлен 16.02.2015Основные положения и классификация электронных учебных материалов. Использование информационных технологий в создании и применении обучающих систем. Разработка компьютерного учебного пособия, его интерфейса. Обоснование выбора языка программирования.
курсовая работа [63,9 K], добавлен 13.02.2009
