Создание приемника команд RC5 для ПК : Курсовая работа (т) по Информационное обеспечение, программирование

Информационное обеспечение, программирование

Создание приемника команд RC5 для ПК

Введение

персональный сайт программный

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

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

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

1. Назначение и область применения

Назначение дипломного проекта:

)Описание персонального сайта: Для чего он предназначен и какие функции выполняет.

)Рассмотреть анализ других персональных сайтов.

)Разработать пример свой персональный сайта .

Целевая аудитория: Данный сайт предназначен для ознакомление студентов с персональным сайтам.

Материал будет представлен в электронном формате, в виде сайта.

2. Описание обоснование

.1 Проект сайта

.1.1 Структура сайта

Рисунок 1 - Схема логической связи между страницами

.1.2 Содержание каждой страницы

.1.2.1 Главная страница

Цель сайта:

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

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

Карта сайта:

Рисунок 2 - Карта сайта

.1.1.2 О персональном сайте

Причины создания персонального сайта?

·Самопрезентация

·Возможность найти клиентов, покупателей, спонсоров или работодателей

·Пообщаться

Основные черты персонального сайта?

·Содержание Личной информации.

·Эксклюзивный привлекательный дизайн

·Небольшой объём страниц, обычно не более 5-10

Что такое персональный сайт?

Персональный сайт - это сайт какого-либо конкретного человека. Как правило, сайт такого типа отличается небольшим объемом информации.

Сайт такого типа создает конкретный человек, заинтересованный в саморекламе, или индивидуальные предприниматели:

oартисты

oмузыканты

oхудожники

oфотографы

oюристы

oврачи

oтворческие личности и люди различных профессий

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

Какова структура персонального сайта?

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

oО себе

oПортфолио

oУслуги

oХобби или увлечения

oКонтактная информация.

Что должно быть в содержании?

Содержание: При создании персонального сайта особое внимание уделяется тому, как представлена информация на сайте.

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

Основные черты персонального сайта в содержании:

·Содержание Личной информации .

·Эксклюзивный привлекательный дизайн

·Небольшой объём страниц ,обычно не более 5-10

Какой должен быть дизайн?

Дизайн: Немаловажным также является тщательная разработка дизайна сайта. Именно оформление персонального сайта сможет выгодно сыграть на имидж и репутацию представленного на нем человека.

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

.1.1.3 Анализ персонального сайта Джима Керри

Пример: Сайт Джима Керри.

Основная информация: Персональный сайт, принадлежит американскому актеру и комику, Джиму Керри.

Структура сайта:

·Домашняя страница

·Новости

·Биография

·Фильмография

·ТВ

·Происхождения

·Повседневная жизнь

Дизайн сайта:

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

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

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

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

Так же очень тяжело просмотреть информацию шрифт не всегда понятный, но при этом все смотримся очень привлекательно и ярко.

Содержание сайта:

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

Объём сайта 6 страниц.

Содержания каждой станицы сайта:

Рисунок 3 - Домашняя страница.

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

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

Рисунок 4- Новостная страница.

Биография-биографическая информация о Джим Керри , от рождения до нашего времени. Так же в разделе представлена галерея.

Рисунок 5 - Страница «Биография».

Фильмография - Показан архив фильмов с участием Джима Керри, кликнув на название фильма можно увидеть ролик к фильму.

Рисунок 6 - Страница «Фильмография».

ТВ - в этом разделе , представлены в каких годах Джим Керри принимал участия в телевизионных проектах , и видео с ним.

Рисунок 7 - Страница «ТВ».

Происхождения - видео с первыми шагами Джима Керри на сцене.

Рисунок 8 - Страница «Происхождения»

Повседневная жизнь - галерея, с видео и фотографиями Джима Керри. Как проводит время Джим, когда не снимается.

Рисунок 9 - Страница «Повседневная жизнь»

.1.1.4 Анализ персонального сайта Алексея Александровича Маслова

Пример сайта: Алексея Александровича Маслова.

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

Структура сайта:

·Главная страница

·О себе

·Академия

·Студентам

·Ссылки

·Публикации

Дизайн сайта:

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

Содержится не большое количество графической информации.

Большой плюс сайта, то, что на нем нет отвлекающих внимания баннеров и вставок.

Содержание сайта:

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

Объём сайта 6 страниц.

Содержание каждой станицы сайта.

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

Рисунок 10- Главная страница Алексея Александровича Маслова

О себе-представлена творческая биография профессора А.А.Маслова.

Рисунок 11- Станица «О себе»

Академия - этот раздел содержит лекции и переводы профессора (буддизма, конфуцианство, даосизма)

Рисунок 12 - Страница «Академия»

Рисунок 13- Страница «Студентам»

Студентам - полезная информация для начинающих, можно скачать или просмотреть методические пособия.

Ссылки - содержит ресурсы на русском языке в виде ссылок на сайты.

Рисунок 14-Страница «Ссылки»

Публикации-статьи и отрывки из книг профессора А.А. Маслова.

Рисунок 15-Страница «Публикации»

.1.1.5 Анализ примера своего персонального сайта

Пример сайта: Ким Николая Константиновича

Основная информация: Персональный сайт, принадлежит студенту БФУ им Канта, Ким Николаю Константиновичу.

Структура сайта:

·Главная страница

·Обо мне

·Портфолио

·Хобби

·Контакты

Дизайн сайта:

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

Меню навигация легко обнаружимо пользователем. Понятно и легко представлена структура сайта. Цвет фона не сливается с текстом.

Содержание сайта:

Сайт содержит в себе информацию студента БФУ им Канта, Ким Николая Константиновича, его личную биографию, портфолио, хобби и контакты.

Объём сайта 5 страниц.

Содержание каждой станицы сайта.

Главная страница - содержит в себе ознакомление посетителей с информацией на сайте и ее предназначение.

Рисунок 16 - Главная страница

Обо мне - представлена личная биография студента Ким. Н.К

Рисунок 17-Страница «Обо мне»

Портфолио - этот раздел содержит в себе ссылки на проделанные работы за время обучения в колледже Ким. Николая. Константиновича

Рисунок 18-Страница «Портфолио»

Хобби-в этом разделе представлено краткое описания хобби Ким Н.К.

Рисунок 19-Страница «Хобби»

Контакты - содержится контактная информация пользователя.

Рисунок 20-Страница «Контакты»

.1.1.6 Контрольные вопросы

1.Причины создания персонального сайта?

2.Основные черты персонального сайта?

3.Что такое персональный сайт?

4.Какова структура персонального сайта?

5.Что должно быть в содержании?

6.Какой должен быть дизайн персонального сайта?

7.Почему содержание анализируемых сайтов отличается?

8.Сравнить дизайн персональных сайтов, почему они отличаются?

9.Сравнить структуры сайтов?

2.1.3 Концепция дизайна

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

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

В верхней части сайта расположена «шапка» сайта, она является эстетическим элементом дизайна и смысловой нагрузки не несёт. Основная навигационная панель находится в верхней части страницы, под «шапкой», на ней содержатся ссылки на основные материалы.

.1.4 План тестирования

Цель тестирования - проверить содержание сайта на наличие информацию о персональных сайтах.

Для проверки поставленной цели необходимо:

Проверить наличие информации о персональных сайтах.

Проверить информацию об анализе других сайтов.

Проверить наличие информации своего персонального сайта.

Проверить состояние объёма информации и других элементов страниц.

Проверить состояние текстовой и графической информации.

Тестирование дизайна сайта: цель проверка работы сайта в разных браузерах.

проверка корректного отображения оформления и содержимого сайта

проверка работы всех страниц сайта

проверка правильного расположения информации на страницах сайта.

2.1.5 Обоснование выбора программных средств для реализации

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

Проект реализован при помощи языков программирования HTML и CSS, которые записывались и редактировались в программе Notepad++ на операционной системе Windows 7. Изображения для сайта редактировались в программах Adobe Photoshop и Paint.

Разметка и контент страниц представлены с помощью языка HTML, а т.к. сайт является учебным пособием, то он не будет часто изменяться. Форматирование текста происходит с помощью отдельного файла с каскадными таблицами стилей (CSS), в связи с тем, что язык разметки HTML не предназначен для красивого оформления текста.

Для организации фотогалереи, проверки форм, скрытия некоторого содержимого страниц, которое показывается пользователю только после нажатия, т.е. для придачи страницам сайта динамичности, будет применена библиотека jQuery, основанная на языке программирования JavaScript, которая значительно упрощает и ускоряет написание JavaScript кода.

2.2 Описание реализации

.2.1 Шаблон сайта

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

Она состоит из четырёх основных блоков, которые реализованы с помощью тега <div>

Все блоки для получения оформления обращаются к соответствующим классам в CSS-файле

Код HTML-файла «index.html»:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "#"justify"><html>

<head>

<Style>:Link{ Color: #000000; Text-decoration: underline}:Visited{ Color: #000000; Text-decoration: underline}:Hover{ Color: #000000; Text-decoration: none}, body {font-family: verdana, arial, helvetica; font-size:50px;}

</Style>

<title>Персональный сайт</title>

</head>

<body>

<div id="name">Персональный сайт Ким Николая Константиновича</div>

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</div>

<div>

<h1>Добро пожаловать!</h1>

<p>

//--></script>

</script>

<br>

</form>

</center>

</script>

</div>

<div>

| <a href="me.html">Обо мне</a> |

<a href="portfol.html">Портфолио</a> |

<a href="hobbi.html">Хобби</a> |

<a href="contact.html">Контакты</a>

</div>

</body>

</html>

.3 Приложение - «Код реализации»

Листинг 1 - index.html

<html>

<head>

<title>Что такое "Персональный сайт"</title>

</head>

<body>

<center><h1>"Персональный сайт"</h1></center>

</div>

</div>

<div>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="pers.html">О персональном сайте</a></li>

<li><a href="analis.html">Анализ персональных сайтов</a></li>

<li><a href="primer.html">Пример своего персонального сайта</a></li>

<li><a href="vopros.html">Контрольные вопросы</a></li>

</ul>

</div>

<h2> Цель сайта </h2>

<p>Данный сайт предназначен для ознакомления студентов с персональным сайтом.<br>

</div>

<div>

<div id="footer">Сайт разработал студент группы 4 ПК-1 Ким Николай Константинович </div>

</div>

</body>

</html>

Листинг 2 - pers.html

<html>

<head>

<title>Что такое "Персональный сайт"</title>

</head>

<body>

<center><h1>"Персональный сайт"</h1></center>

</div>

</div>

<div>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="pers.html">О персональном сайте</a></li>

<li><a href="analis.html">Анализ персональных сайтов</a></li>

<li><a href="primer.html">Пример своего персонального сайта</a></li>

<li><a href="vopros.html">Контрольные вопросы</a></li>

</ul>

</div>

<h2> О персональном сайте</h2>

<p>Причины создания персонального сайта:<br>

<ul>

<li>Само презентация</li>

<li>Возможность найти клиентов , покупателей ,спонсоров или работодателей</li>

<li>Удобное прямое общение с аудиторией</li>

</ul>

<i><b>Персональный сайт </b></i>- это сайт какого-либо конкретного человека. Как правило, сайт такого типа отличается небольшим объемом информации. <br>

<ul>

<li>артисты</li>

<li>музыканты</li>

<li>художники</li>

<li> фотографы</li>

<li>юристы</li>

<li>врачи</li>

<li>творческие личности и люди различных профессий</li>

</ul>

<br>

<i><b>Структура</i></b>: На персональном сайте представлена краткая информация о личности - только самое главное и необходимое. Поэтому его структура ограничивается лишь несколькими основными разделами: <ul>

<li>Портфолио</li>

<li> Услуги </li>

<li> Хобби или увлечения</li>

<li> Контактная информация</li></ul><br><br>

<i><b>Содержание</i></b>: При создании персонального сайта особое внимание уделяется тому, как представлена информация на сайте.<br>

Основные черты персонального сайта в содержании:<ul>

<li>Содержание Личной информации </li>

<li>Эксклюзивный привлекательный дизайн</li>

<li>Небольшой объём страниц ,обычно не более 5-10</li></li></ul>

<br>

<i><b>Дизайн</i></b>: Немаловажным также является тщательная разработка дизайна сайта. Именно оформление персонального сайта сможет выгодно сыграть на имидж и репутацию представленного на нем человека. <br>

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

</p>

<br>

</div>

<div>

<div id="footer">Сайт разработал студент группы 4 ПК-1 Ким Николай Константинович </div>

</div>

</body>

</html>

Листинг 3 - analis.html

<html>

<head>

<title>Что такое "Персональный сайт"</title>

</head>

<body>

<center><h1>"Персональный сайт"</h1></center>

</div>

</div>

<div>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="pers.html">О персональном сайте</a></li>

<li><a href="analis.html">Анализ персональных сайтов</a></li>

<li><a href="primer.html">Пример своего персонального сайта</a></li>

<li><a href="vopros.html">Контрольные вопросы</a></li>

</ul>

</div>

<span id=verh> <h2> Анализ персонального сайта Джима Керри </h2></span>

<b>Пример</b>: Сайт Джима Керри.<br>

<b>Основная информация</b>: Персональный сайт, принадлежит американскому актеру и комику, Джиму Керри. <br>

<b>Структура сайта</b>:

<ul>

<li>Домашняя страница</li>

<li>Новости</li>

<li>Биография</li>

<li>Фильмография</li>

<li>Происхождения</li>

<li>Повседневная жизнь</li>

</ul>

<b>Дизайн сайта</b>:

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

Не очень удобно использован переход в другие разделы страниц, возникает ощущение, что перешли на другой сайт.<br>

Так же очень тяжело просмотреть информацию шрифт не всегда понятный, но при этом все смотримся очень привлекательно и ярко.<br><br>

<b>Содержание сайта</b>:

<b>Объём сайта 6 страниц</b>.<br><br>

<h2>Содержания каждой станицы сайта:</h2><br>

<b><i>Домашняя страница</i></b>- анимированная страница, с интерактивными картинками, если нажав на любую из них то можно попасть на другие второстепенные сцены главного меню. В качестве картинок представлены сцены из фильма с Джимом Керри.

<center><img src="images/home.jpg" width="550" height="380" >Рисунок 2 - Домашняя страница.</center>

<b><i>Новостная страница</i></b> - Показан список новостей, на каком канале и какие будут показаны фильмы Джима Керри, где можно в следующий раз можно встретится с ним и какие кассовые сборы у фильма.

<center><img src="images/news.jpg" width="550" height="380" >Рисунок 3 - Новостная страница.</center>

<b><i>Биография</i></b>-биографическая информация о Джим Керри , от рождения до нашего времени. Так же в разделе представлена галерея.

<center><img src="images/bio.jpg" width="550" height="380" >Рисунок 4 - Биография.</center>

<b><i>Фильмография</i></b> - Показан архив фильмов с участием Джима Керри, кликнув на название фильма можно увидеть ролик к фильму.

<center><img src="images/film.jpg" width="550" height="380" >Рисунок 5 - Фильмография.</center>

<b><i>ТВ</i></b> - в этом разделе , представлены в каких годах Джим Керри принимал участия в телевизионных проектах , и видео с ним.

<center><img src="images/tv.jpg" width="550" height="380" >Рисунок 6 - ТВ.</center>

<b><i>Происхождения </i></b>-видео с первыми шагами Джима Керри на сцене.

<center><img src="images/orig.jpg" width="550" height="380" >Рисунок 7 - страница "Происхождения".</center>

<b><i>Повседневная жизнь</i></b> - галерея, с видео и фотографиями Джима Керри. Как проводит время Джим, когда не снимается.

<center><img src="images/tru.jpg" width="550" height="380" >Рисунок 8 - Повседневаня жизнь</center>

<center><h3><a href="#verh">В начало</a></h3> </center>

<span id=maslov><h2> Анализ персонального сайта Алексея Александровича Маслова.</h2></span>

<b>Пример сайта</b>: Алексея Александровича Маслова.<br>

<b>Основная информация</b>: Персональный сайт, принадлежит востоковеду, специалисту в области китайской цивилизации, культурных и политических традиций, профессору, доктору исторических наук Алексею Александровичу Маслову.<br><br>

<b>Структура сайта:</b>

<ul>

<li> Главная страница </li>

<li>Академия</li>

<li>Студентам</li>

<li>Ссылки </li>

<li>Публикации</li>

</ul>

<br>

<b>Дизайн сайта:</b>

Дизайн сайта простой и ненавязчивый. С подбором легких цветов, текст расположен на белом фоне. Простая и понятная навигации сайта. <br>

Содержится не большое количество графической информации.<br>

Большой плюс сайта, то, что на нем нет отвлекающих внимания баннеров и вставок.<br><br>

<b>Содержание сайта:</b>

<b>Объём сайта 6 страниц.</b>

<h2>Содержания каждой станицы сайта:</h2><br>

<b><i>Главная страница </i></b>-состоит из двух колонок, небольшую биографическую информацию с последующим переходом в раздел «о себе» и новостную информацию.

<center><img src="images/m1.jpg" width="550" height="380" >Рисунок 9 - Главная страница Маслова А.А.</center>

<b><i>О себе</i></b>-представлена творческая биография профессора А.А.Маслова.

<center><img src="images/m2.jpg" width="550" height="380" >Рисунок 10 - О Себе.</center>

<b><i>Академия</i></b>-этот раздел содержит лекции и переводы профессора (буддизма, конфуцианство, даосизма)

<center><img src="images/m3.jpg" width="550" height="380" >Рисунок 11 - Академия.</center>

<b><i>Студентам</i></b>- полезная информация для начинающих, можно скачать или просмотреть методические пособия.

<center><img src="images/m4.jpg" width="550" height="380" >Рисунок 12 - Студентам.</center>

<b><i>Ссылки </i></b>- содержит ресурсы на русском языке в виде ссылок на сайты.

<center><img src="images/m5.jpg" width="550" height="380" >Рисунок 13 - Ссылки.</center>

<b><i>Публикации</i></b>-статьи и отрывки из книг профессора А.А.Маслова.

<center><img src="images/m6.jpg" width="550" height="380" >Рисунок 14 - Публикации.</center>

<center><h3><a href="#maslov">В начало анлиза Маслова А.А</a></h3> </center>

<center><h3><a href="#verh">В начало</a></h3> </center>

</div>

<div>

<div id="footer">Сайт разработал студент группы 4 ПК-1 Ким Николай Константинович </div>

</div>

</body>

</html>

Листинг 4 - primer.html

<html>

<head>

<title>Что такое "Персональный сайт"</title>

</head>

<body>

<center><h1>"Персональный сайт"</h1></center>

</div>

</div>

<div>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="pers.html">О персональном сайте</a></li>

<li><a href="analis.html">Анализ персональных сайтов</a></li>

<li><a href="primer.html">Пример своего персонального сайта</a></li>

<li><a href="vopros.html">Контрольные вопросы</a></li>

</ul>

</div>

<h3>Анализ персонального сайта Ким Николая Константиновича</h3>

<span id=verh> <h2> Пример своего персонального сайта </h2></span>

<br>

<h3><a href="site/index.html">Перейти на персональный сайт Ким Николая</a></h3><br>

<b>Пример сайта:</b> Ким Николая Константиновича

<br>

<b>Основная информация:</b> Персональный сайт, принадлежит студенту БФУ им Канта, Ким Николаю Константиновичу<br><br>

<b>Структура сайта:</b>

<ul>

<li>Главная страница </li>

<li>Портфолио</li>

<li>Хобби </li>

<li>Контакты</li></ul>

<b>Дизайн сайта:</b>

Дизайн сайта создан сочетанием, черного и бежевого цветов. Что делает его привлекательным для посетителей и не раздражает глаза при просмотре информации.<br>

Меню навигация легко обнаружимо пользователем. Понятно и легко представлена структура сайта. Цвет фона не сливается с текстом. <br><br>

<b>Содержание сайта:</b>

Сайт содержит в себе информацию студента БФУ им Канта, Ким Николая Константиновича, его личную биографию, портфолио, хобби и контакты. <br>

<b>Объём сайта 5 страниц.</b>

<h2>Содержание каждой станицы сайта.</h2>

<b><i>Главная страница</b></i> - содержит в себе ознакомление посетителей с информацией на сайте и ее предназначение.

<center><img src="images/k1.jpg" width="550" height="380" >Рисунок 4 - Биография.</center>

<b><i>Обо мне</b></i> - представлена личная биография студента Ким. Н.К

<center><img src="images/k2.jpg" width="550" height="380" >Рисунок 4 - Биография.</center>

<b><i>Портфолио</b></i> - этот раздел содержит в себе ссылки на проделанные работы за время обучения в колледже Ким. Николая. Константиновича

<center><img src="images/k3.jpg" width="550" height="380" >Рисунок 4 - Биография.</center>

<b><i>Хобби</b></i>-в этом разделе представлено краткое описания хобби Ким Н.К.

<center><img src="images/k4.jpg" width="550" height="380" >Рисунок 4 - Биография.</center>

<b><i>Контакты</b></i> - содержится контактная информация пользователя

<center><img src="images/k5.jpg" width="550" height="380" >Рисунок 4 - Биография.</center>

</div>

<div>

<div id="footer">Сайт разработал студент группы 4 ПК-1 Ким Николай Константинович </div>

</div>

</body>

</html>

Листинг 5 - vopros.html

<html>

<head>

<title>Что такое "Персональный сайт"</title>

</head>

<body>

<center><h1>"Персональный сайт"</h1></center>

</div>

</div>

<div>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="pers.html">О персональном сайте</a></li>

<li><a href="analis.html">Анализ персональных сайтов</a></li>

<li><a href="primer.html">Пример своего персонального сайта</a></li>

<li><a href="vopros.html">Контрольные вопросы</a></li>

</ul>

</div>

<h2> Контрольные вопросы.</h2>

<ul>

<ol>1.Причины создания персонального сайта?</ol>

<ol>2.Основные черты персонального сайта?</ol>

<ol>3.Что такое персональный сайт?</ol>

<ol>4.Какова структура персонального сайта?</ol>

<ol>5.Что должно быть в содержании?</ol>

<ol>6.Какой должен быть дизайн персонального сайта?</ol>

<ol>7.Почему содержание анализируемых сайтов отличается?</ol>

<ol>8.Сравнить дизайн персональных сайтов, почему они отличаются?</ol>

<ol>9.Сравнить структуры сайтов?</ol>

</ul>

<br>

</div>

<div>

<div id="footer">Сайт разработал студент группы 4 ПК-1 Ким Николай Константинович </div>

</div>

</body>

</html>

Листинг 6- style.css{: 0;: 0;: #666666;: #CC99FF;}

#container {: 800px;left: auto;right: auto;: 0;: 80% "Trebuchet MS","lucida sans", tahoma, sans-serif;height: 1.8em;: white;: black;}

#banner {: 0;bottom: 0;: 150px;bottom:3px solid #fff;: #CC99FF;: #000;}

#content {: 1em;left: 200px;}

#sidebar {: left;: 160px;: 0;: 0 1em 0 1em;}

#sidebar ul {style: none;: 0 0 20px 0;: 0;}

#sidebar ul li { : inline;: 0;: 0;}

#sidebar ul li a {: block;: Black;: inherit;decoration: none;: 0;: 5px 0 5px 0;bottom: 1px solid #C0C0C0;}

#sidebar ul li a:hover {decoration: none;: #CCCCFF;: black;}

#footer {align: right;: both;:5px;: 0;size: 0.9em;top: 3px solid #fff;bottom: 3px solid #fff;: #CC99FF;: Black;}

#footer a:link, #footer a:visited {decoration : none;: inherit;: #000; }

#footer a:hover {decoration : underline;: inherit;: #fff;}:link, a:visited {decoration : none;: inherit;: #DA7910;}:hover {decoration : underline;: inherit;: #385900; }: 35px 0 0 630px;size: 300%;spacing: 7px;}{top: 10px;: 10px 0 10px 0;size: 200%;spacing: 3px;: transparent;: #385900;}{: 0;: 10px 0 10px 0;size: 160%;spacing: 3px;: inherit;: black;}a:hover {: red;}{align: right;: blue;}{align: right;size: 130%;}{align: left;size: 130%;}{weight : bold;style : italic;: #b29b35;}

.clear {: both;: hidden;: 0;: 0;}

.slogan {: 0;: 25px 0 0 565px;spacing: 3px;size: 200%;}

#up_line {align: right;: both;:5px;: 0;size: 0.9em;top: 3px solid #fff;bottom: 3px solid #fff;: #CC99FF;: #000;}

#up_line a:link, #footer a:visited {decoration : none;: inherit;: #000; }

#up_line a:hover {decoration : underline;: inherit;: #fff;}

Листинг 7 - index2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "#"justify"><html>

<head>

</Style>

var speed=100;i=0;m_line() {(i++<line.length) {.cit.forum.value=line.substring(0,i);

}{.cit.forum.value=" ";=0;

}('m_line()',speed);

}

</script>

<title>Персональный сайт</title>

</head>

<body>

<div id="name">Персональный сайт Ким Николая Константиновича</div>

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</div>

<div>

<h1>Добро пожаловать!</h1>

<p>

//2006-11-21: Web templates - LAYOUTS_ad_channel = "0286771451";_color_border = "0d0304";_color_bg = "0d0304";_color_link = "faa47b";_color_text = "000000";_color_url = "faa47b";

//--></script>

<h3>

Данный сайт предназначен для ознакомления родителей администрации и работодателей со мной .<p>

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

<br>Студенту важно представить объём проделанной работы ,особенно выпускникам т.к. после окончания обучения ВУЗе он решит продолжить работать, исходя из достигнутых результатов.

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

</h3>

<br>

</form>

</center>

</script>

</div>

<div>

| <a href="me.html">Обо мне</a> |

<a href="portfol.html">Портфолио</a> |

<a href="hobbi.html">Хобби</a> |

<a href="contact.html">Контакты</a>

</div>

</body>

</html>

Листинг 8 - me.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "#"justify"><html>

<head>

<title>Персональный сайт</title>

$(document).ready((){

$("#pikame").PikaChoose();

});

</script>

</head>

<body>

<div id="name">Персональный сайт Ким Николая Константиновича</div>

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</div>

<div>

<p>

//2006-11-21: Web templates - LAYOUTS_ad_channel = "0286771451";_color_border = "0d0304";_color_bg = "0d0304";_color_link = "faa47b";_color_text = "000000";_color_url = "faa47b";

//--></script>

</script>

<h3>

Здравствуйте, зовут меня Николай. Родился 3 августа 1991 года. Живу в Калининграде. По знаку зодиака я Лев , родился в год овцы. Когда мне исполнилось 7 лет как и все пошел в среднею школу №2 г. Пионерска. Учился довольно ровно, можно сказать даже хорошо. Отдавал большее предпочтение предметам гуманитарного цикла .Закончив 11 классов общеобразовательной школы ,поступил в 2009 году поступил в « Калининградский технический колледж». Заканчиваю обучения в колледже в этом году . Что касается планов продолжения образования, то в перспективе планирую получить высшие образование. До обучения в колледже прошел службу в войсковой части 6716, в городе Санкт -Петербурге .Службу окончил в звании младший сержант.

<p>Без лишний скромности могу сказать, что я-человек добрый. Если меня просят о помощи, и я могу помочь. то я обязательно помогаю. Приятно чувствовать ,когда кто-то в тебе нуждается . Немного романтичен. Не люблю одиночество.

<p>Я человек настроения , с большой буквы , хорошо это ли плохо ,но это так. Настроение может манятся очень часто. Поэтому всегда говорю ,что человек создает себе настроение не только сам, но и люди, окружающие его . Иногда упрям , ленив, иногда энергичен. Стараюсь доделать начатое дело до конца. Очень терпелив ,но боюсь обидеть человека словами. Поэтому мне в конфликте легче молчать , чем что-то доказывать человеку, у которого иная точка зрения.<p>Сам по себе человек не конфликтный , часто иду на компромисс.

Радуюсь жизни , если радость случается. Чувство юмора у меня всегда присутствует. Многое умею но это тщательно скрываю.

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

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

</h3>

<div>

<center><h3>Мои друзья</h3></center>

</ul>

</div>

<div>

| <a href="me.html">Обо мне</a> |

<a href="portfol.html">Портфолио</a> |

<a href="hobbi.html">Хобби</a> |

<a href="contact.html">Контакты</a>

</div>

</body>

</html>

Листинг 9 - portfol.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "#"justify"><html>

<head>

<title>Персональный сайт</title>

<title>FancyBox 1.3.4 | Demonstration</title>

!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');

</script>

$(document).ready(function() {

$("a#example1").fancybox();

$("a#example2").fancybox({

'overlayShow': false,

'transitionIn': 'elastic',

'transitionOut': 'elastic'

});

$("a#example3").fancybox({

'transitionIn': 'none',

'transitionOut': 'none'

});

$("a#example4").fancybox({

'opacity': true,

'overlayShow': false,

'transitionIn': 'elastic',

'transitionOut': 'none'

});

$("a[rel=example_group]").fancybox({

'transitionIn': 'none',

'transitionOut': 'none',

'titlePosition' : 'over',

'titleFormat': function(title, currentArray, currentIndex, currentOpts) {'<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';

}

});

$("#various1").fancybox({

'titlePosition': 'inside',

'transitionIn': 'none',

'transitionOut': 'none'

});

$("#various2").fancybox();

$("#various3").fancybox({

'width': '75%',

'height': '75%',

'autoScale': false,

'transitionIn': 'none',

'transitionOut': 'none',

'type': 'iframe'

});

$("#various4").fancybox({

'padding': 0,

'autoScale': false,

'transitionIn': 'none',

'transitionOut': 'none'

});

</script>

</head>

<body>

<div id="name">Персональный сайт Ким Николая Константиновича</div>

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</div>

<div>

<h1>Портфолио</h1>

<p>

//2006-11-21: Web templates - LAYOUTS_ad_channel = "0286771451";_color_border = "0d0304";_color_bg = "0d0304";_color_link = "faa47b";_color_text = "000000";_color_url = "faa47b";

//--></script>

<h3>В этом разделе вы можете просмотреть,некоторые проделанные мною работы за время обучения в колледже.</h3>

Целью курсовой работы была визуализация задачи. «Приз который делится». Для выполнения были задействованы технология Flash.<br>

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

<h3><center>Картинки Курсовой работы</center></h3>

</div>

<br>

</b><br>

</h3>

Сайт был создан с примирением библиотеки Jquery и языка Java Sript.

<br>JQuery-это библиотека значительно упрощающая и ускоряющая написание JavaScript кода.

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

<br> Также она значительно облегчает выбор элементов в DOM и создания AJAX запросов.

Для JQuery написано огромное количество плагинов, которые расширяют ее возможности еще больше.

<br>

JavaScript-это прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

<br>

<h3><center>Картинки Сайта</center></h3>

</div>

</b><br>

</h3>

</center>

<br>

</div>

<div>

| <a href="me.html">Обо мне</a> |

<a href="portfol.html">Портфолио</a> |

<a href="hobbi.html">Хобби</a> |

<a href="contact.html">Контакты</a>

</div>

</body>

</html>

Листинг 10 - hobbi.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "#"justify"><html>

<head>

<title>Персональный сайт</title>

</head>

<body>

<div id="name">Персональный сайт Ким Николая Константиновича</div>

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</div>

<div>

<h1>Хобби</h1>

<p>

//2006-11-21: Web templates - LAYOUTS_ad_channel = "0286771451";_color_border = "0d0304";_color_bg = "0d0304";_color_link = "faa47b";_color_text = "000000";_color_url = "faa47b";

//--></script>

<h3>

У каждого человека есть хобби. Моё хобби это футбол. Наверное, это главное, составлявшее моего настроения. Я болею за ФК «Зенит». Если команда проигрывает, то и настроение у меня подобающее. Болею за команду достаточно давно и мечтаю когда-нибудь увидеть их игру вживую.

<br>

</center>

<br>

<br>Так же мое хобби является музыка. Я меломан, не очень придирчив ко вкусам других , но думаю музыка должна быть у каждого своя, обычно музыку выбираю по настроению. Но могу отметить пару групп, которые слушаю чаще, чем другие, эти группы «4 апреля» и «Nuteki».

</b><br><br>

</h3>

<br>

</tr>

</div>

<div>

| <a href="me.html">Обо мне</a> |

<a href="portfol.html">Портфолио</a> |

<a href="hobbi.html">Хобби</a> |

<a href="contact.html">Контакты</a>

</div>

</body>

</html>

Листинг 11 - contact.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "#"justify"><html>

<head>

<title>Персональный сайт</title>

</head>

<body>

<div id="name">Персональный сайт Ким Николая Константиновича</div>

<tr>

<td>

<td>

<td>

<td>

<td>

</table>

</div>

<div>

<h1>Контакты</h1>

<p>

//2006-11-21: Web templates - LAYOUTS_ad_channel = "0286771451";_color_border = "0d0304";_color_bg = "0d0304";_color_link = "faa47b";_color_text = "000000";_color_url = "faa47b";

//--></script>

<h2>Контактная информация</h2><br>

<h3>

Ф.И.О: Ким Николай Константинович<br> <br>

Страна : Россия.<br> <br>

Город: Калининград<br> <br>

Мобильный телефон: 89521148674<br> <br>

skype: user9954<br> <br>

Личный сайт: #"justify">Twitter: http://twitter.com/twitter<br> <br> : http://www.facebook.com/<br> <br> : #"justify"></b><br>

</h3>

<div>

<div>

</div>

</form></div></td></tr></table>

</div>

<div>

| <a href="me.html">Обо мне</a> |

<a href="portfol.html">Портфолио</a> |

<a href="hobbi.html">Хобби</a> |

<a href="contact.html">Контакты</a>

</div>

</body>

</html>

Листинг 12- style.css,body {margin:0;padding:0;background:#000 url(../images/basebg.gif) top repeat-x;width:100%;height:100%; color:#FFF; font-family:Arial, Helvetica, sans-serif;}

* html #wrap{height: 100%;},td { font-family:Arial, Helvetica, sans-serif; margin-top: 0px;}img{border:0;}{color: #B689E7;text-decoration: underline;}:hover{color: #7B2FD5;text-decoration: underline;}.hidden {text-decoration: none;color: #000000;cursor:default;}{margin:0;padding:0;}{margin-left:20px;margin-top:0px;padding:1px;list-style-type: square;line-height: 16px;}{font-size: 16px;font-weight: bold;color: #fff;margin: 0px;text-align:center; margin:5px 0 10px 0; text-transform:uppercase;}

.bottom_addr {font-size: 11px;color: #FFFFFF;padding: 3px 0 12px 0; text-align:center;}

.bottom_addr a {text-decoration: none;}

.bottom_addr a:hover {text-decoration: underline;}

.bottom_menu {color: #fff;text-align: center;padding-top: 4px;padding-bottom: 2px; font-size:12px;}

.bottom_menu a {color: #fff;text-decoration: underline;}

.bottom_menu a:hover {color: #B689E7;text-decoration: underline;}

#menu {color: #FFFFFF;position:relative; margin-top:-78px;}

.menu-item{font-family:"trebuchet MS"; font-size:12px; color:#FFF; background:url(../images/mbg.gif) repeat-x; padding: 8px 30px 0 30px;font-weight: bold; vertical-align:top;}

#menu a{text-decoration: none;color: #FFFFFF;}

#menu a:hover {color: #FFFFFF;text-decoration: underline;}

.body_txt {color: #fff;text-align: justify;padding: 10px;vertical-align: top; font-size:12px; position:relative;}

.login_form {background-image: url(../images/login-form-bg.gif);background-repeat: repeat-x;height: 20px;width: 110px;border-width: 1px;border-style: solid;font-size: 11px;padding-top: 3px;padding-left: 1px;}

#wrap{position:relative; min-height:100%; margin:0 auto; width:100%;}

#page{width:700px;margin:0 auto;}

#footer{width:700px; background:url(../images/footerbg.jpg) no-repeat top; padding: 20px 0 0 0; height:92px;}

#name {font-size: 40px;color: #FFFFFF; position:absolute; width:700px; text-align:center; margin-top:32px; font-family:"trebuchet MS"; z-index:1;}

#header{background:url(../images/img01.jpg) no-repeat top; height:300px;}

.button {: inline-block;: 8px 18px;right: 15px;bottom: 5px;

moz-border-radius:4px;

webkit-border-radius:4px;

khtml-border-radius:4px;radius:4px;

moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3);

webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3); shadow:inset 1px 1px 0 rgba(255,255,255,0.3);family: "Helvetica Neue",Helvetica,Arial,sans-serif;size: 16px;weight: bold;align: center;decoration: none;: pointer;: none !important;: visible;

}

.button:hover, .button:focus {decoration:none;

}

.button-green {: #fff;: #a5bd24; : -moz-linear-gradient(top, #a5bd24 0%, #7dac38 100%); : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5bd24), color-stop(100%,#7dac38)); : -webkit-linear-gradient(top, #a5bd24 0%,#7dac38 100%); : -o-linear-gradient(top, #a5bd24 0%,#7dac38 100%);: -ms-linear-gradient(top, #a5bd24 0%,#7dac38 100%); : progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 ); : linear-gradient(top, #a5bd24 0%,#7dac38 100%); shadow: 0 1px 1px rgba(0,0,0,0.25);: 1px solid #781;

}

.button-green:hover,

.button-green:focus {: #fff;: #5c8825; : -moz-linear-gradient(top, #8fbb44 0%, #5c8825 100%); : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fbb44), color-stop(100%,#5c8825)); : -webkit-linear-gradient(top, #8fbb44 0%,#5c8825 100%); : -o-linear-gradient(top, #8fbb44 0%,#5c8825 100%); : -ms-linear-gradient(top, #8fbb44 0%,#5c8825 100%); : progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fbb44', endColorstr='#5c8825',GradientType=0 ); : linear-gradient(top, #8fbb44 0%,#5c8825 100%); : 1px solid #670;

}

.button-blue {: #fff;: #39aad4; : -moz-linear-gradient(top, #41c4f4 0%, #39aad4 100%); : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41c4f4), color-stop(100%,#39aad4)); : -webkit-linear-gradient(top, #41c4f4 0%,#39aad4 100%); : -o-linear-gradient(top, #41c4f4 0%,#39aad4 100%); : -ms-linear-gradient(top, #41c4f4 0%,#39aad4 100%); : progid:DXImageTransform.Microsoft.gradient( startColorstr='#41c4f4', endColorstr='#39aad4',GradientType=0 ); : linear-gradient(top, #41c4f4 0%,#3a8fb6 100%); shadow: 0 1px 1px rgba(0,0,0,0.25);: 1px solid #3a8fb6;}

.button-blue:hover,

.button-blue:focus {: #fff;: #0189bc; : -moz-linear-gradient(top, #14bcfb 0%, #0189bc 100%); : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#14bcfb), color-stop(100%,#0189bc)); : -webkit-linear-gradient(top, #14bcfb 0%,#0189bc 100%); : -o-linear-gradient(top, #14bcfb 0%,#0189bc 100%); : -ms-linear-gradient(top, #14bcfb 0%,#0189bc 100%); : progid:DXImageTransform.Microsoft.gradient( startColorstr='#14bcfb', endColorstr='#0189bc',GradientType=0 );: linear-gradient(top, #14bcfb 0%,#0189bc 100%); : 1px solid #0370A2;

}

#content {: 340px;: 20px auto 0 auto;: 0 30px 30px 60px;: solid px ;: black;

moz-box-shadow: 0px 0px 10px #cbcbcb;

webkit-box-shadow: 0px 0px 10px #cbcbcb;

}{background-color:#999;color:white;padding-top:20px;font-family:helvetica;font-size:12px;text-align: center;}

.pikachoose{width:510px;margin:0 auto 50px auto;}

.pikachoose ul{padding-left:0;width:510px;height:180px;margin:0;overflow:hidden;}

.pikachoose ul li{float: left;border:1px solid #555;padding:2px;background:#777;margin:0 6px 4px 0;position:relative;overflow:hidden;}

.pikachoose ul li div img{position:relative;cursor:pointer;}

.pika_main{width:506px;height:325px;display:block;position:relative;}

.pika_main_img{position:absolute;top:2px;left:2px;}

.pika_back_img{position:relative;top:0px;}

.pika_subdiv{position:relative;border:1px solid #555;background:#777;padding:2px;}

.pika_subdiv img, .pika_subdiv a img{border:none;}

.pika_caption{width:500px;height:16px;padding-top:4px;text-align:center;position:absolute;bottom:7px;left:3px;background:url('black.png') top left;}

.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}

.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}

.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}

.pika_navigation a{font-size: 12px; text-decoration: none;}

.pika_navigation a:hover{text-decoration: underline;}

.pika_navigation{padding-top:10px;clear:both;text-align:center;}

.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}

.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

Листинг 13- menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><head>

</style>

<!--=new Array('images/1.jpg','images/2.jpg','images/3.jpg');= 0;DisplayBanners(){(document.images){++;(CurrentBanner == Banners.length)

{=0;

}.RotateBanner.src = Banners[CurrentBanner];('DisplayBanners()',3000);

}

</script>

<!--=new Array ('images/pic1.jpg','images/pic2.jpg','images/pic3.jpg');=0;RunSlideShow(ForwardBack){(document.images){=CurrentPicture+ForwardBack;(CurrentPicture>(Pictures.length-1))

{=0;

}(CurrentPicture<0)

{=Pictures.length-1;

}.PictureDisplay.src=Pictures[CurrentPicture];('DisplayBanners1()',1000);

}

</script>

</head>

}else if(window.addEventListener){.addEventListener('resize',center, false);.addEventListener('load',center, false);

}center(){i = document.getElementById('menu_ihtut_net');.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';

};

</script>

<div>

<a href="..\portfol.html">Персональный сайт</a>

<a href="menu.html">О курорте</a>

<a href="wash.html">Ваш отдых</a>

<a href="galery.html">Галерея</a>

</div>

<br>

<h1><i>Добро пожаловать</h1>

Это место, где природа и человек гармонично сосуществуют. Курорт Sani расположен на территории экологического заповедника площадью 1.000 гектаров с сосновым бором, белоснежными песчаными пляжами и изумрудными водами Эгейского моря. Это место, где будут превзойдены все ваши ожидания и вы насладитесь общением с природой, расслабитесь в роскоши и комфорте. У нас вас всегда ждет что-то новое. Место, где исполнятся ваши пожелания и вы сможете открыть для себя заново простые радости жизни.

<br>

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

Вы можете провести незабываемое время в общении с природой. Sani - это незабываемо красивый закат солнца, мягкий песок между пальцев ног, смех ваших детей. В Sani вы будете спать спокойно, ведь вы знаете, что на следующее утро вас ожидают только радость и счастье. Здесь вы чувствуете себя в безопасности.</i>

<br>

</div>

<br>

<br>

<i>

<br>

<tr>

</td>

</tr>

</table></center>

</p>

</div>

</a>

</body>

</html>

Листинг 14- wash.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><head>

</style>

<!--=new Array('big/1.jpg','big/2.jpg','big/3.jpg');= 0;DisplayBanners(){(document.images){++;(CurrentBanner == Banners.length)

{=0;

}.RotateBanner.src = Banners[CurrentBanner];('DisplayBanners()',3000);

}

</script>

</head>

}else if(window.addEventListener){.addEventListener('resize',center, false);.addEventListener('load',center, false);

}center(){i = document.getElementById('menu_ihtut_net');.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';

};

</script>

<div>

<a href="..\portfol.html">Персональный сайт</a>

<a href="menu.html">О курорте</a>

<a href="wash.html">Ваш отдых</a>

<a href="galery.html">Галерея</a>

</div>

<br>

<h1><i>Ваш отдых</h1>

В Sani на ваш выбор предоставляется много разнообразных возможностей для прекрасного отдыха. Большое количество ресторанов и баров, развлечения и занятие спортом - все это очень тщательно подобрано для семейного отдыха. Мы надеемся, что вы отлично проведете здесь свой отпуск и надолго запомните моменты, проведенные вместе со всей семьей.</i>

<br>

<br>

</div>

</a>

</body>

</html>

Листинг 15-galery.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><head>

</style>

<title>jQuery Gallery</title>

#large {:100px;:10px;: auto;top:2%;left:8%;: url(indicato.gif) no-repeat 50% 40%;

}

#large img {: 800px;: 600px;: 5px solid #00abff;border-radius:30px

}

#thumbnail {: 800px;:110px;: auto;: center;style: none;: 0%;left:8%;: 5px;: 3px solid #00abff;: #fff;}

#thumbnail li {: left;: 70px;: 20px;

_margin:20px;}

#thumbnail a {: block;: 100px;: 56px;: 1px;: 1px solid #00abff;}

#thumbnail a:hover {color: #00abff;}

</style>

$(document).ready(function(){

$("#thumbnail li a").click(function(){

$("#large img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});

$("#large h2").html($("> img", this).attr("title"));false;});

$("#large>img").load(function(){$("#large>img:hidden").fadeIn("slow")});

});

</script>

</head>

<body>

}else if(window.addEventListener){.addEventListener('resize',center, false);.addEventListener('load',center, false);}center(){i = document.getElementById('menu_ihtut_net');.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';};

</script>

<div>

<a href="..\portfol.html">Персональный сайт</a>

<a href="menu.html">О курорте</a>

<a href="wash.html">Ваш отдых</a>

<a href="galery.html">Галерея</a>

</div>

</ul>

</div>

</body>

</html>

Листинг 16-style.css { background: url("images/head.jpg") repeat ; }.menu_ihtut_net {: url("images/menuihtutnet-fon.") repeat-x 0 0; :90px;: hidden;}.menu_ihtut_net div#menu_ihtut_net{: left;:0;:80px;: 0 10px;}.menu_ihtut_net a{: url("images/menuihtutnet-link.png") repeat-x 0 0; : #00abff; : block;: left;: 15px/69px Impact; :65px;decoration: none; align: center;: 147px;: hidden;: 10px 0 0 0; shadow: #fff 0 0 1px;

}.menu_ihtut_net a:hover, div.menu_ihtut_net a.active{: url("images/menuihtutnet-link.png") repeat-x 0 100%; : #000080; shadow: #fff 0 0 30px;

}

#telo{:5px ridge black;/*dotted, double, groove, ridge, outset, dashed*/ color:#00abff; border-radius:30px;:#000080 ;align:center;transform:italic;size: 17px;family:"Times New Roman", serif;: 60%;: auto;left:10px;:absolute;:url("images/telo.jpg") no-repeat #FFF;repeat;

}

#telo2{:5px ridge black;/*dotted, double, groove, ridge, outset, dashed*/ color: #00abff; border-radius: 30px; :#000080 ;:italic;align:center;: Trebuchet MS, Verdana, sans-serif;size: 17px;: 30%;: auto;left:65%;:absolute;:url("images/telo.jpg") repeat #FFF;

}

#telo4{:5px ridge black;/*dotted, double, groove, ridge, outset, dashed*/ color:#00abff; border-radius:30px;:#000080 ;align:center;transform:italic;size: 17px;family:"Times New Roman", serif;: 80%;: auto;left:7%;:absolute;:url("images/telo.jpg") repeat #FFF;repeat;

}

#telo6{:5px ridge black;/*dotted, double, groove, ridge, outset, dashed*/ color:#00abff; border-radius:30px;:#000080 ;align:center;transform:italic;size: 17px;family:"Times New Roman", serif;: 80%;: auto;left:7%;:absolute;:url("images/telo.jpg") repeat #FFF;;

}

.listing_inline li {: white;size: 12px;: 15px 1%;: 31%;

webkit-border-radius: 7px;

moz-border-radius: 7px;radius: 7px;: 0 0 10px 0;: hidden;: inline-block;: 1;

_display: inline;align: top;

}

#content_in {: white;: relative;

zoom: 1;: hidden;

}

.4 Результаты тестирования

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

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

Проверка практического материала показала хорошую усвояемость этого материала.

Тестирование дизайна показало:

Весь контент отображается так, как и задумано;

Сайт правильно отображается в браузерах Opera 12, Internet Explorer 8 и Google Chrome 19.0.1084;

Все ссылки на сайте работают правильно;

Орфографических и пунктуационных ошибок на сайте обнаружено не было.

3. Экономическое обоснование дипломного проекта

В работе рассчитывается себестоимость сайта организации. Для расчёта использованы исходные данные, представленные в таблице 1.

Таблица 1 - Исходные данные

Наименование ЗначениеОборудование и программное обеспечение26100Транспортно-заготовительные расходы3,5%Количество рабочих дней в месяце24.дПродолжительность рабочего дня8.чОклад программиста20 000Премия27%Дополнительная заработная плата12%Страховые взносы30,2%Срок эксплуатации компьютера3 годаСтоимость электроэнергии за час2,88Накладные расходы125Рентабельность21

Информация о проекте

Полное наименование проекта - Создание сайта на тему «Персональный сайт».

Характер проекта:

Обучающий.

Направление использования инвестиций:

исследования и разработки

Продукция (услуги)

Наименование продукции (услуги) - создание сайта средствами HTML и CSS.

Назначение и основные характеристики - сайт «Что такое персональный сайт» является учебным пособием для студентов, которые только начинают ознакамливаться с персональным сайтом. Сайт предоставляет информацию о персональном сайте, анализ других персональных сайтов, а так же пример своего персонального сайта.

Характеристики новизны:

модификация известной конструкции;

Необходимость лицензирования:

продукт;

Необходимость сертификации:

продукт;

Масштабы и направления:

Калининградская область.

Потребительская характеристика:

специальное применение

Маркетинговое исследование

Характеристика рынка сбыта продукции (услуг):

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

Обеспеченность сбыта продукции (услуг):

Изучение конъюнктуры рынка и заключение договоров поставки, как с физическими лицами, так и с госучреждениями.

Конкуренция:

Известны основные конкуренты - веб-студия «70 S» и веб-студия «RocketVIP».

.1 Расчет себестоимости создания сайта

Рассчитываем себестоимость созданного сайта. Для расчета затрат на программные средства имеем следующие исходные данные:

стадии разработки сайта;

нормативы для определения трудоемкости и средней численности разработчиков по каждому этапу работы;

заработную плату разработчиков;

стоимость машинного часа работы оборудования;

время работы оборудования при разработке программы.

Затраты на разработку программы - себестоимость программы, определяется по формуле:

Сп = Зо. м + ТЗР + Зэл. + Ззп + Зо + НР (руб.), (1)

где Зо. м - затраты на основные материалы, применяемые при разработке программы, руб.;

ТЗР - транспортно-заготовительные расходы, руб.;

Зэл. - затраты на силовую электроэнергию, руб.;

Ззп - затраты по заработной плате специалистам, участвующим в разработке программы, с учетом страховых взносов, руб.;

Зо - затраты, связанные с работой оборудования, руб.;

НР - накладные расходы, руб.

Таблица 2 - Затраты на материалы, полуфабрикаты, покупные изделия

Наименование сырья, материалов, топливаЕдиница измеренияКол-во израсходованного материала единицПланово-заготовительная цена, рублей за единицуСумма, руб.1Диск CD-RWшт.320602Бумагаупаковка11801802Ручкишт.220403Карандашишт.115154Стиплершт.150505Папкашт.115156Дыроколшт.150507Ластикшт.11010ИТОГО:420

Исходя из таблицы 2, Зо.м.= 420 руб.

Транспортно-заготовительные расходы составляют 3,5% от затрат на основные материалы, определяются по формуле:

ТЗР = Зм * % ТЗР /100% (руб.) (2)

ТЗР = 420*3,5/100% = 14,7 руб.

Затраты на силовую электроэнергию рассчитываются по формуле:

Зэл = Тэл * КПД * Fэф * U (руб ) (3)

где Tэл - тариф на электроэнергию, по данным электросети

КПД - коэффициент полезного действия оборудования;

Fэф - эффективный фонд работы оборудования;

U - мощность оборудования из технического паспорта.

Зэл = 2,88* 0,91*(72+20+15)*0,54 = 151,4 руб.

Затраты по заработной плате определяются по формуле:

ФЗП = ФОЗП + ФДЗП (руб.), (4)

где ФОЗП - фонд основной заработной платы;

ФДЗП - фонд дополнительной заработной платы;

Фонд основной заработной платы определяется по формуле:

ФОЗП = ФЗП тар. + П (руб.), (5)

где ФЗП тар. - тарифная (прямая) заработная плата;

П - премия.

Прямая заработная плата определяется по формуле:

ФЗПтар.=(Ом*tшт.)/(Дм.*d) (руб.), (6)

где Ом - оклад за месяц;шт.- затраты времени на разработку этапа программы, час;

Дм. - количество рабочих дней в месяце;

d - продолжительность рабочего дня.

ФЗПтар1 = (20000 * 8) / (24 * 8) = 833,33 руб.

ФЗПтар2 = (20000 * 72) / (24 * 8) = 7500 руб.

ФЗПтар3 = (20000 * 20) / (24 * 8) = 2083,3руб.

ФЗПтар4 = (20000 * 15) / (24 * 8) = 1562,5руб.

ФЗПтар = 833,33+7500+2083,3+1562,5=11979,13 руб.

Этапы работыТрудоемкость (час)РасчетСумма (рублей)Постановка задачи8(20000 * 8) / (24 * 8)833,33Разработка сайта72(20000 * 72) / (24 * 8)7500Отладка сайта20(20000 * 20) / (24 * 8)2083,3Выпуск технической документации15(20000 * 15) / (24 * 8)1562,5Итого115833,33+7500+2083,3+1562,511979,13

Премия рассчитывается от прямого заработка.

П = %П * ФЗП тар./100% (руб.), (7)

П = 27*11979,13 /100 = 3234,3651 руб.

ФОЗП = 11979,13 +3234,3651= 15213,4951 руб.

Фонд дополнительной заработной платы рассчитывается от фонда основной заработной платы и определяется по формуле:

ФДЗП = % ФДЗП * ФОЗП / 100% (руб.) , (8)

ФДЗП = 12*15213,4951 /100 = 1825,619 руб.

ФЗП = 15213,4951 +1825,619 = 17039,114 руб.

Страховые взносы - это индивидуально возмездные обязательные платежи, которые уплачиваются в федеральные внебюджетные фонды: Пенсионный, Фонд социального страхования (ФСС) и Фонд обязательного медицинского страхования (ФОМС), а также страхование работника от несчастных случаев.

Страховые взносы (СВ) рассчитываются от суммы фонда основной и фонда дополнительной заработной платы определяются по формуле:

СВ = (ФОЗП + ФДЗП)*СВ%/100% (руб.),

СВ = 17039,114 *30,2/100 = 5145,81 руб.

Затраты по заработной плате специалистам, участвующим в разработке программы, с учетом страховых взносов рассчитываются по формуле:

Ззп. = ФЗП + СВ (руб.), (9)

Ззп. = 17039,114 +5145,81 = 22184,924 руб.

Таблица 4 - Стоимость оборудования

№ п.п.Наименование оборудованияКоличество единицСрок эксплуатацииСтоимость единицы, руб.Суммарная стоимость оборудования, руб.1Системный блок HP-Compaq1514000140002Монитор Samsung 2015700070003Комплект мышь+клавиатура Genius12120012004Windows 7 Ultimate SP1 XTremeTM (Лицензия)13150015005Microsoft Office 2010 (Лицензия)1124002400ИТОГО:26100

Затраты, связанные с работой оборудования определяются по формуле:

Зо = tоб. * Сэ.о. (руб.), (10)

где tоб. - время работы оборудования при составлении программы (час);

Сэ.о. - стоимость часа эксплуатации оборудования.

Стоимость часа эксплуатации оборудования определяется по формуле:

Сэ.о. =( Цоб. / Т ) (руб.), (11)

где Цоб. - стоимость оборудования;

Т - срок службы оборудования;

Срок эксплуатации компьютера рассчитывается следующим образом:

Т =tэкс. * Дг. * d (часов), (12)

где tэкс. - количество лет эксплуатации оборудования;

Дг. - количество рабочих дней

Срок эксплуатации системного блока:

Срок эксплуатации монитора:

Срок эксплуатации мыши и клавиатуры:

Срок эксплуатации операционной системы:

Срок эксплуатации Microsoft Office:

Стоимость часа эксплуатации системного блока:

Стоимость часа эксплуатации монитора:

Стоимость часа эксплуатации мыши и клавиатуры:

Стоимость часа эксплуатации операционной системы:

Стоимость часа эксплуатации Microsoft Office:

Сэ.о. = руб./час

Зо1 = 3,32*72 = 239,04 руб.

Зо2 = 3,32*20 = 66,4 руб.

Зо3 = 3,32*15 = 49,8 руб.

Зобщ. = 239,04+66,4+49,8= 355,24 руб.

Таблица 5 - Расчет амортизационных отчислений

Этапы работыТрудоемкость (час)РасчетСумма (рублей)Разработка сайта723,32 * 72239,04Отладка сайта203,32 * 2066,4Выпуск технической документации153,32 * 1549,8Итого:107239,04+66,4+49,8355,24

Накладные расходы составляют рассчитываются от основной заработной платы и определяются по формуле:

НР = ФОЗП * %НР/100% (руб.) (13)

НР = 15213,4951*125/100 = 19016,9 руб.

Сп = 420+27+151,4 +1825,619 +355,24+17039,114 = 19818,373 руб.

Калькуляция себестоимости программы представлена в таблице 5.

Таблица 6 - Калькуляция себестоимости создания сайта

Статьи затратЗатратыЗатраты на материалы, в том числе: - основные материалы; - транспортно-заготовительные расходы.447 420 27Затраты на силовую электроэнергию151,4Затраты на заработную плату с отчислениями, в том числе: - фонд основной заработной платы; - фонд дополнительной заработной платы; - страховые взносы1825,619 15213,4951 1825,619 5145,81 Затраты на эксплуатацию оборудования355,24Накладные расходы17039,114Полная себестоимость19818,373

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

Прибыль определяется по формуле:

Прибыль =Сп*%R/100% (руб.), (14)

где %R - рентабельность создания сайта

П = 19818,373*21/100 = 4161,85833 руб.

Отпускная цена - это цена, по которой предприятие (объединение) или сбытовая организация реализует продукцию потребителям.

Отпускная цена определяется по формуле:

Ц = Сп + Прибыль (руб.) (15)

Ц = 19818,373+4161,85833 = 23980,23133.

.2 Расчет срока окупаемости сайта

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

Срок окупаемости сайта вычисляется по формуле:

Ток. = ДК / Эу.г. (16)

где ДК - разница между затратами которые были и которые получились в результате разработки программы;

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

Условно - годовая экономия:

С1 - полная себестоимость создания прошлого сайта;

С2 - полная себестоимость создания данного сайта;

Q - среднее количество созданных сайтов в год.

Среднее количество созданных сайтов в год рассчитываем по формуле:

Q = T / t, (кол-во сайтов)(17)

где t-трудоёмкость создания сайта, дни;

T - кол-во дней работы оборудования в год.

Ток. = (26100 - 13000) / ((30000- 19818,373) * 20) = 13100/203632,54=0,06 года

Вывод: При данном количестве заказов сайтов, покупка нового оборудования и программного обеспечения будет целесообразна, так как они окупятся за 22 дня.

.3 Анализ действующих цен на рынке

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

Таблица 6 - Цены на создание сайтов

Название этапаСтоимость работ моей фирмы, руб.Доля затрат, %Стоимость работ фирмы - конкурента (Студия 70 S), руб.Доля затрат, %Дизайн1200029,61500032,6Верстка и программирование1900046,91700039,9

Больше работ по теме:

Создание программного модуля на тему: "Организация работы автосервиса"
Курсовая работа (т)
Создание сайта "Музыкальный каталог"
Курсовая работа (т)
Создание сайта "Салон сотовой связи"
Курсовая работа (т)
Создание сайта (интернет-магазина) с помощью языка программирования php
Курсовая работа (т)
Создание сайта-визитки предприятия ООО "Фаст Студия"
Курсовая работа (т)

Предмет: Информационное обеспечение, программирование

Тип работы: Курсовая работа (т)

Новости образования

Российский государственный социальный университет реорганизует сеть своих филиалов
22 Июля 2016 16:26
Более 70 представителей крупных вузов АСЕАН подтвердили участие в форуме во Владивостоке
22 Июля 2016 12:51
Абызов: публикация первичных статсведений снизит бюрократическую нагрузку на школы
22 Июля 2016 11:53
В Чечне свыше 200 школьников сдали ЕГЭ с результатом свыше 90 баллов - министр
22 Июля 2016 05:36
Замглавы Минобрнауки РФ: задача сократить число людей с высшим образованием не стоит
21 Июля 2016 20:19

КОНТАКТНЫЙ EMAIL: [email protected]

Скачать Реферат

ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ