- •Отчёт по лабораторным работам №2, №3
- •Оглавление
- •Введение
- •Задание №3. Цель работы
- •Задание
- •Выполнение работы Основной файл frame1.Htm
- •Листинг 2. Код основной страницы
- •Верхний фрейм header.Html
- •Листинг 2. Код верхнего фрейма
- •Левый фрейм управления left.Html
- •Листинг 3. Код левого фрейма
- •Начальный правый фрейм right.Html
- •Листинг 4. Код начального правого фрейма
- •Основная страница about.Html
- •Листинг 5. Код основного фрейма
- •Форма обратной связи form.Html
- •Листинг 6. Код формы Выводы
Листинг 3. Код левого фрейма
Опять же в данном коде можно выделить несколько фрагментов. Первый фрагмент – CSS, основное назначение которого – сделать скруглённые градиентные кнопки. Все кнопки сделаны без рисунков, можно сказать, что на голом CSS+HTML. А итоговый код этих кнопок также элементарный. JS-код представляет собой обработчик нажатий на кнопку, который создаётся в момент прорисовки DOM-дерева (то есть ссылкой-кнопкой является вся область кнопки, а не только текст, как было бы, если бы мы указали тэг <a>). Данный код управляет содержанием главного (правого) фрейма, причём все страницы, что он вызывает, зависят от id элементов.
Начальный правый фрейм right.Html
<html>
<head>
<title>Главная страница</title>
<style type="text/css">
body {
background: url('mainBackground.png') 100% 100% no-repeat;
background-position: 0% 0%;
background-color: #9e4384;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 14px;
}
#main {
color: #ffffff;
}
#main h3 {
font-size: 200%;
text-align: center;
}
.tt {
font-weight: bold;
text-align: right;
}
.tt span {
font-weight: normal;
}
</style>
<body>
<script type="text/javascript">
if (0 == parent.frames.length) {
window.location == ’frame1.htm’;
}
</script>
<div id="noframes">
</div>
<div id="main">
<h3>Добро пожаловать на главную страницу</h3>
<p>Данная страница служит для показа результатов выполнения лабораторных работ №2 и №3
по дисциплине Интернет-Технологии. </p>
<p>В данной работе использованы технологии:
<ol>
<li> CSS (общая стилизация, фоновые рисунки, боковые кнопки)</li>
<li> фреймы (FRAMESET)</li>
<li> JavaScript</li>
<li> jQuery (расширение JavaScript)</li>
<ol>
</p>
<p class="tt">Группа: <span>ИТС-3-07</span></p>
<p class="tt">Cтудент: <span>Соловьёв А.Н.</span></p>
<p class="tt">Преподаватель: <span>Холкин И.И.</span></p>
</div>
</body>
</html>
Листинг 4. Код начального правого фрейма
Данный код представляет собой чистый html+css, который не несёт ничего интересного в плане разработки за исключением того, что в случае, если данный документ загружен без фрейма, JavaScript заставит браузер загрузить страницу в фрейме.
Основная страница about.Html
<html>
<head>
<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>
<style type="text/css">
body {
background: url('mainBackground.png') 100% 100% no-repeat;
background-position: 0% 0%;
background-color: #9e4384;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 14px;
}
.content {
color: #ffffff;
}
.content h3 {
font-size: 150%;
}
.content a, a:active, a:visited {
color: #ffffff;
text-decoration: none;
border-bottom: 1px dashed white;
font-face: sans-serif;
}
.content a:hover {
border-bottom: 1px solid white;
text-decoration: none;
}
.tt {
font-weight: bold;
text-align: left;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
margin-left: 200px;
}
.tt span {
font-weight: normal;
}
.box {display:none} .box.visible {display:block} .tabs {background-color: #7f7f7f;} .tabs li {float:left; list-style: none; margin-left: 10px; size: 12px; cursor: pointer; text-decoration: underline;} .current {background-color: #aaaa00;}
</style>
</head>
<body>
<script type="text/javascript">
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
//Check if it has changes
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
//if there is not anchor, the loads the default section
if(!currentAnchor)
query = "none";
else
{
var splits = currentAnchor.substring(1).split('&');
var query = splits[0];
}
//Send the petition
$('.content').hide();
$('#'+query).show();
}
}
</script>
<div class="content" id="none">
<h3>Обо мне</h3>
<div class="section">
<ul class="tabs">
<li class="current">Общее</li>
<li>Интересы</li>
<li>Цитаты</li>
<li>Ссылки в социальных сетях</li>
</ul>
<div style="clear: both"></div>
<div class="box visible">
<p class="tt">Возраст: <span>22 (скорпион)</span></p>
<p class="tt">Семейное положение: <span>холост</span></p>
<p class="tt">Статус: <span>студент</span></p>
<p class="tt">Любимые музыкальные группы: <span>Психея, Amatory, E-SEX-T, 7000$, Стигмата, Слот, Catharsis, Доступ Закрыт, Эпидемия, KoЯN, Slipknot, Soul Fly, Stone Sour, Static-X, Deftones, Metallica, TOL, Within Temptation, Noisia, Noize MC, Deform, Nancial, Horizon 8, Hatebreed, Dragonforce, Guf, reAnima, Autoscan, Korea, Tess, Meaning Beside, Disturbed, As I Lay Dying, Blood Stain Child, Papa Roach</span></p>
<p class="tt">Любимые фильмы: <span>Матрица, Звёздные войны, Страх и ненависть в Лас-Вегасе, Дух времени, Полуночный экспресс</span></p>
<p class="tt">Любимые игры: <span>Counter-Strike, Quake III, Prince of Persia, Doom II, Quake II, Lineage, Left 4 Dead, Crysis</span></p>
</div>
<div class="box">
<ul>
<li>Музыка
<ol><li>Бас-гитара</li><li>Гитара</li><li>Электронные средства</li><li>Ударные инструменты</li></ol>
</li>
<li>Программирование
<ol><li>PHP</li><li>Python</li><li>HTML/JavaScript/jQuery</li><li>C/C++</li></ol>
</li>
<li>Компьютеры</li>
<li>Психология</li>
<li>Медитации</li>
</ul>
</div>
<div class="box">
When the power of love overcomes the love of power, the world will know peace.<br><br>Итерация от человека. <br>Рекурсия - от Бога.<br><br>Когда я хотел, чтобы бензин стоил меньше доллара - я не это имел ввиду !!!<br><br>They must find it difficult... Those who have taken authority as the truth, rather than truth as the authority.<br><br>-Ну неужели нет альтернативы компьютеру?<br>-ну почему.. есть... только от неё сильно страдает печень...<br><br>I'm not always right, I'm just never wrong<br><br>Software is like sex, it's better when it's free.<br><br>Load universe into cannon. Aim at brain. Fire.<br><br>Свобода информации - свобода личности.<br><br>I believe that unarmed truth and unconditional love will have the final word in reality.<br><br>Метролог вам скажет, что после килограмма идёт тонна.<br>Но истиный айтишнег знает, что после килограмма идёт метр, затем - гектар, и только после гектара - тонна.<br><br>Любовь - это бинарное отношение на множестве людей, выражения которого не содержат предикатов<br><br>"Сижу я, значит, в ящике, ни жив, ни мёртв... " (из воспоминаний кота Шрёдингера)<br><br>Чаще всего парень ждет от девушки всего один бит информации (Да или Нет), а получает гигабайты<br><br> Многие из вас знакомы с достоинствами программиста. Их всего три, и это: лень, нетерпеливость и высокомерие.<br>- Larry Wall<br><br>Если бы водителей принимали на работу так же, как программистов, то выглядело это примерно так.<br>Вакансия: водитель.<br>Требования: профессиональные навыки в управлении легковыми и грузовыми автомобилями, троллейбусами, трамваями, поездами метрополитена и фуникулера, экскаваторами и бульдозерами, спецмашинами на гусеничном ходу, боевыми машинами пехоты и современными легкими/средними танками, находящимисяна вооружении стран СНГ и НАТО.<br>Навыки раллийного и экстремального вождения обязательны. Опыт управления болидами <Формулы-1> - приветствуется. Знания и опыт ремонта поршневых и роторных двигателей, автоматических и ручных трансмиссий, систем зажигания, антиблокировочных систем, навигационных систем и автомобильных аудиосистем ведущих поизводителей - обязательны. Опыт проведения кузовных и окрасочных работ - приветствуется. Претенденты должны иметь сертификаты Mercedes, BMW, а также справки об участии в крупных международных ралли не более чем двухлетней давности.<br>Зарплата: 1500-2500 рублей, определяется по результатам собеседования.<br><br>Наплевать мне на Каддаффи,<br>Наплевать на Фукусиму,<br>Саша Грей ушла из порно -<br>Жить теперь невыносимо.<br><br>Если бы Господь Бог не хотел, чтобы человек мастурбировал, он сделал бы его руки короче. (с) Джордж Карлин<br><br>Именно сегодня не злись.<br>Именно сегодня не беспокойся.<br>Почитай учителей и старших.<br>Помни о своем духовном пути.<br>Будь благодарен всему живому.<br>(c) Микао Усуи 臼井 甕男<br><br>Никого не любить - это величайший дар, делающий тебя непобедимым, т.к. никого не любя, ты лишаешься самой страшной боли. (с) А. Гитлер<br><br>Don't drink and drive. Take LSD and teleport
</div>
<div class="box">
<ul>
<li><a href="http://vkontakte.ru/mrxak" target="_blank">вКонтакте</a>
<li><a href="http://facebook.com/mrxak" target="_blank">FаceBook</a>
<li><a href="http://gplus.to/mrxak" target="_blank">Google+</a>
</ul>
</div>
</div>
</div>
<div class="content" id="bio">
<h3>Биография</h3>
Родился 28 октября 1988 года в г. <a href="http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D0%BD%D0%B8%D0%BD%D1%81%D0%BA" target="_blank">Обнинске</a> Калужской области.
В 1996 году поступил в МСОУ Школа №13, после чего, закончив 3 класса, перешёл в МОУ "Гимназия", где проучился до 9<sup>го</sup> класса. После 9го класса ушёл в МОУ Лицей ФТШ - Физико-Техническая Школа,
который закончил в 2006 году. Параллельно с учёбой участвовал в различных конкурсах программирования и олимпиадах (школьных, городских, областных, региональных) по астрономии, математике, химии и информатике.
Помимо основной школы закончил музыкальную школу №2 г. Обнинска по специальности "Хоровое пение".
В 2006 году поступил в МИРЭА на специальность 220201 Управление и информатика в технических системах. Здесь проучился до 2го курса, параллельно устроившись на работу в ГМЦ Росстата.
После 2го курса перевёлся на кафедру ИТС на специальность 230201 Информационные системы и технологии, где проучился 3й курс и 1й семестр 4го. После чего по состоянию здоровья ушёл
в академический отпуск, из которого вышел в 2010 году, восстановившись на эту же специальность. Здесь и обучаюсь по настоящее время.
</div>
<div class="content" id="work">
<h3>Работа</h3>
<p>
В настоящее время являюсь сотрудником <a href="http://mrrc.obninsk.ru" target="_blank">Медицинского Радиологического Научного Центра Минздравсоцразвития России</a>,
который состоит из клинических и исследовательских подразделений.
</p><p>
В научных подразделениях Центра разрабатывают и реализуют новейшие наукоемкие медицинские технологии, способствующие решению ряда социально важных проблем отечественного здравоохранения. Ученым традиционно удается поддерживать высокий уровень фундаментальных исследований, многие результаты которых превращаются в основу новых методов диагностики и лечения.
</p><p>
Центр оказывает высококвалифицированную диагностическую, консультативную и лечебную помощь пациентам с онкологическими и общесоматическими заболеваниями.
</p><p>
В штате центра состоит 1779 человек. В их числе 352 научных сотрудника, включая 60 докторов (из них 26 профессоров) и 172 кандидата наук, представляющих различные, но успешно интегрированные в рамках решаемых задач, области знаний: медицину, биологию, физику, математику, технику, химию, фармацию и др.</p>
<p>
На базе Центра состоялось 5 международных симпозиумов, 2 телемедицинские конференции с Гонконгом и Женевой, 5 международных учебных курсов, 15 рабочих совещаний по международным исследовательским программам. Более 70 сотрудников повысили свою квалификацию в ведущих зарубежных исследовательских и медицинских учреждениях.</p>
</div>
<div class="content" id="free">
<h3>Отдых</h3>
Основное хобби в свободное от учёбы и работы время - музыка в любых её проявлениях. Я слушаю различные музыкальные стили, посещаю концерты групп различной направленности, а также сам играю
в нескольких коллективах на различных инструментах.
<br />
Вторым хобби является фотография, правда заниматься этим начал недавно и пока не достиг таких успехов, как в предыдущем случае.
<br />
</div>
<script type="text/javascript">
$(function() {
$('ul.tabs').delegate('li:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
});
});
</script>
</body>
</html>