Создание персонального сайта

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Введение

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

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

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

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

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

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

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

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

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

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

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

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

2.1 Проект сайта

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

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

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

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

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

Цель сайта:

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

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

Карта сайта:

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

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

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

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

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

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

· Пообщаться

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

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

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

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

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

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

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

o артисты

o музыканты

o художники

o фотографы

o юристы

o врачи

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

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

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

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

o О себе

o Портфолио

o Услуги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Новости

· Биография

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

· ТВ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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



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

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

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

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

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

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

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

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

· О себе

· Академия

· Студентам

· Ссылки

· Публикации

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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



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

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

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

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

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

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

· Обо мне

· Портфолио

· Хобби

· Контакты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2.1 Шаблон сайта

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

<Style>

A:Link{ Color: #000000; Text-decoration: underline}

A:Visited{ Color: #000000; Text-decoration: underline}

A:Hover{ Color: #000000; Text-decoration: none}

td, body {font-family: verdana, arial, helvetica; font-size:50px;}

</Style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="page">

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

<div id="header"></div>

<div id="menu"><table border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/ml.gif" alt="" width="7" height="33"></td>

<td class="menu-item"><a href="index.html">Главная</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="me.html">Обо мне</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="portfol.html">Портфолио</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="hobbi.html">Хобби</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="contact.html">Контакты</a></td>

</tr>

</table>

</div>

<div class="body_txt" bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">

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

<p>

<script type="text/javascript"><!--

google_ad_client = "pub-0500162490295296";

google_ad_width = 468;

google_ad_height = 60;

google_ad_format = "468x60_as";

google_ad_type = "text";

google_ad_channel = "0286771451";

google_color_border = "0d0304";

google_color_bg = "0d0304";

google_color_link = "faa47b";

google_color_text = "000000";

google_color_url = "faa47b";

//--></script>

<script type="text/javascript"

src="">

</script>

<br>

<br>

<br>

<br><center>

<form name=cit>

<input type=text size=55 name=forum>

</form>

</center>

<script language="JavaScript">

m_line();

</script>

</div>

<div id="footer">

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

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

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

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

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

</div>

</div>

</body>

</html>

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

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

<html>

<head>

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

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="banner">

<br><br>

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

</div>

<div id="up_line">

</div>

<div class="clear">&nbsp;</div>

<div id="sidebar">

<h2>МЕНЮ</h2>

<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>

<div id="content">

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

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

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

<img src="images/map.jpg" width="570" height="460" >

<br> <br>

<br> <br> <br> <br>

</div>

<div class="clear">&nbsp;</div>

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

</div>

</body>

</html>

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

<html>

<head>

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

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="banner">

<br><br>

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

</div>

<div id="up_line">

</div>

<div class="clear">&nbsp;</div>

<div id="sidebar">

<h2>МЕНЮ</h2>

<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>

<div id="content">

<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>

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

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

<li>О себе</li>

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

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

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

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

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

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

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

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

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

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

<br>

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

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

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

</p>

<br>

<br> <br> <br> <br>

</div>

<div class="clear">&nbsp;</div>

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

</div>

</body>

</html>

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

<html>

<head>

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

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="banner">

<br><br>

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

</div>

<div id="up_line">

</div>

<div class="clear">&nbsp;</div>

<div id="sidebar">

<h2>МЕНЮ</h2>

<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>

<div id="content">

<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>

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

</ul>

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

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

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

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

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

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

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

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

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

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

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

<br> <br>

<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>

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

</ul>

<br>

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

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

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

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

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

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

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

<br><br>

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

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

</div>

<div class="clear">&nbsp;</div>

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

</div>

</body>

</html>

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

<html>

<head>

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

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="banner">

<br><br>

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

</div>

<div id="up_line">

</div>

<div class="clear">&nbsp;</div>

<div id="sidebar">

<h2>МЕНЮ</h2>

<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>

<div id="content">

<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>

<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>

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

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

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

<br><br>

</div>

<div class="clear">&nbsp;</div>

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

</div>

</body>

</html>

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

<html>

<head>

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

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="banner">

<br><br>

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

</div>

<div id="up_line">

</div>

<div class="clear">&nbsp;</div>

<div id="sidebar">

<h2>МЕНЮ</h2>

<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>

<div id="content">

<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>

<br> <br> <br> <br>

</div>

<div class="clear">&nbsp;</div>

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

</div>

</body>

</html>

Листинг 6- style.css

body {

margin: 0;

padding : 0;

background: #666666;

color: #CC99FF;}

#container {

width: 800px;

margin-left: auto;

margin-right: auto;

padding: 0;

font: 80% "Trebuchet MS","lucida sans", tahoma, sans-serif;

line-height: 1.8em;

background: white;

color: black;}

#banner {

padding: 0;

margin-bottom: 0;

height: 150px;

border-bottom:3px solid #fff;

background: #CC99FF;

color: #000;}

#content {

padding: 1em;

margin-left: 200px;}

#sidebar {

float: left;

width: 160px;

margin: 0;

padding: 0 1em 0 1em;}

#sidebar ul {

list-style: none;

margin: 0 0 20px 0;

padding: 0;}

#sidebar ul li {

display: inline;

padding: 0;

margin: 0;}

#sidebar ul li a {

display: block;

color: Black;

background: inherit;

text-decoration: none;

margin: 0;

padding: 5px 0 5px 0;

border-bottom: 1px solid #C0C0C0;}

#sidebar ul li a:hover {

text-decoration: none;

background: #CCCCFF;

color: black;}

#footer {

text-align: right;

clear: both;

padding:5px;

margin: 0;

font-size: 0.9em;

border-top: 3px solid #fff;

border-bottom: 3px solid #fff;

background: #CC99FF;

color: Black;}

#footer a:link, #footer a:visited {

text-decoration : none;

background : inherit;

color : #000; }

#footer a:hover {

text-decoration : underline;

background : inherit;

color : #fff;}

a:link, a:visited {

text-decoration : none;

background : inherit;

color : #DA7910;}

a:hover {

text-decoration : underline;

background : inherit;

color : #385900; }

padding: 35px 0 0 630px;

font-size: 300%;

letter-spacing: 7px;}

h2 {

margin-top: 10px;

padding: 10px 0 10px 0;

font-size: 200%;

letter-spacing: 3px;

background : transparent;

color : #385900;}

h3 {

margin: 0;

padding: 10px 0 10px 0;

font-size: 160%;

letter-spacing: 3px;

background : inherit;

color : black;}

h3 a:hover {

color: red;}

h4 {

text-align: right;

color: blue;}

h5 {

text-align: right;

font-size: 130%;}

h6 {

text-align: left;

font-size: 130%;}

blockquote {

font-weight : bold;

font-style : italic;

color : #b29b35;}

.clear {

clear: both;

overflow: hidden;

width: 0;

height: 0;}

.slogan {

margin: 0;

padding: 25px 0 0 565px;

letter-spacing: 3px;

font-size: 200%;}

#up_line {

text-align: right;

clear: both;

padding:5px;

margin: 0;

font-size: 0.9em;

border-top: 3px solid #fff;

border-bottom: 3px solid #fff;

background: #CC99FF;

color: #000;}

#up_line a:link, #footer a:visited {

text-decoration : none;

background : inherit;

color : #000; }

#up_line a:hover {

text-decoration : underline;

background : inherit;

color : #fff;}

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

<Style>

A:Link{ Color: #000000; Text-decoration: underline}

A:Visited{ Color: #000000; Text-decoration: underline}

A:Hover{ Color: #000000; Text-decoration: none}

td, body {font-family: verdana, arial, helvetica; font-size:50px;}

</Style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript">

var line="Добро пожаловать на персональный сайт Ким Николая";

var speed=100;

var i=0;

function m_line() {

if(i++<line.length) {

document.cit.forum.value=line.substring(0,i);

}

else{

document.cit.forum.value=" ";

i=0;

}

setTimeout('m_line()',speed);

}

</script>

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

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="page">

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

<div id="header"></div>

<div id="menu"><table border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/ml.gif" alt="" width="7" height="33"></td>

<td class="menu-item"><a href="index.html">Главная</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="me.html">Обо мне</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="portfol.html">Портфолио</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="hobbi.html">Хобби</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="contact.html">Контакты</a></td>

</tr>

</table>

</div>

<div class="body_txt" bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">

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

<p>

<script type="text/javascript"><!--

google_ad_client = "pub-0500162490295296";

google_ad_width = 468;

google_ad_height = 60;

google_ad_format = "468x60_as";

google_ad_type = "text";

//2006-11-21: Web templates - LAYOUTS

google_ad_channel = "0286771451";

google_color_border = "0d0304";

google_color_bg = "0d0304";

google_color_link = "faa47b";

google_color_text = "000000";

google_color_url = "faa47b";

//--></script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

<h3>

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

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

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

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

</h3>

<br>

<br>

<br>

<br><center>

<form name=cit>

<input type=text size=55 name=forum>

</form>

</center>

<script language="JavaScript">

m_line();

</script>

</div>

<div id="footer">

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

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

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

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

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

</div>

</div>

</body>

</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/pikachoose-min.js"></script>

<script language="javascript"><!--

$(document).ready(

function (){

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

});

-->

</script>

</head>

<body>

<div id="page">

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

<div id="header"></div>

<div id="menu"><table border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/ml.gif" alt="" width="7" height="33"></td>

<td class="menu-item"><a href="index.html">Главная</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="me.html">Обо мне</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="portfol.html">Портфолио</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="hobbi.html">Хобби</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="contact.html">Контакты</a></td>

<td><img src="images/mr.gif" alt="" width="7" height="33"></td>

</tr>

</table>

</div>

<div class="body_txt">

<h1>Обо мне</h1>

<p>

<script type="text/javascript"><!--

google_ad_client = "pub-0500162490295296";

google_ad_width = 468;

google_ad_height = 60;

google_ad_format = "468x60_as";

google_ad_type = "text";

//2006-11-21: Web templates - LAYOUTS

google_ad_channel = "0286771451";

google_color_border = "0d0304";

google_color_bg = "0d0304";

google_color_link = "faa47b";

google_color_text = "000000";

google_color_url = "faa47b";

//--></script>

<script type="text/javascript"

src="">

</script>

<h3>

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

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

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

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

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

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

</h3>

<div class="pikachoose">

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

<ul id="pikame">

<li><img src="images/1.jpg"/><span></span></li>

<li><img src="images/2.jpg"/></li>

<li><img src="images/3.jpg"/></li>

<li><img src="images/4.jpg"/></li>

<li><img src="images/5.jpg"/></li>

</ul>

</div>

</div>

<div id="footer">

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

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

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

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

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

</div>

</div>

</body>

</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta http-equiv="imagetoolbar" content="no" />

<title>FancyBox 1.3.4 | Demonstration</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script>

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

</script>

<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

$(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) {

return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + 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="page">

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

<div id="header"></div>

<div id="menu"><table border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/ml.gif" alt="" width="7" height="33"></td>

<td class="menu-item"><a href="index.html">Главная</a></td>

<td><img src="images/ms.gif" alt="" width="20" height="33"></td>

<td class="menu-item"><a href="me.html">Обо мне</a></td>