Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
lab2.docx
Скачиваний:
4
Добавлен:
07.11.2018
Размер:
6.34 Mб
Скачать

Листинг 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>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]