Файл: Способы оформления web-страниц приложения.pdf

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 03.07.2023

Просмотров: 297

Скачиваний: 3

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение

Понятие юзабилити

1.2. Необходимость разработки стилей. Разновидности стилей CSS

2. Создание и оформление web-приложения

2.1 Выбор и обоснование средств реализации

Основные параметры шрифта

2.2. Структура системы

3. Разработка стилей сайта

3.1. Концепция внешнего вида и ее изменения

Подключение стилей к HTML-документу

Смена стилей

Цветовое решение

Скорость загрузки сайта

Разрешение сайта

Информационное наполнение

Навигация

Список использованной литературы

Приложение 1. Листинг программы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Институт технологий НР</title>

<LINK title="classic" rel="stylesheet" type=text/css href="classic.css" media=screen>

<LINK title="academ" rel="alternate stylesheet" type=text/css href="academ.css" media=screen>

<LINK title="modern" rel="alternate stylesheet" type=text/css href="modern.css" media=screen>

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

<script type="text/javascript" src="index_files/rit-code.js"></script>

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

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

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

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

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

jQuery.noConflict();

jQuery(function()

{

// вызов стилей для их работоспособности

jQuery.stylesheetInit();

// переборка стилей

jQuery('#toggler').bind(

'click',

function(e)

{

jQuery.stylesheetToggle();

return false;

}

);

// принимает значение атрибута rel при нажатии

jQuery('.styleswitch').bind(

'click',

function(e)

{

jQuery.stylesheetSwitch(this.getAttribute('rel'));

return false;

}

);

}

);

</script>

-->

</head>

<body class="contentcontainer" onload="main();">

<div id="container">

<div id="header">

<table width="830" border="0">

<tr>

<td rowspan="2" width="155" height="144"><img src="index_files/hp-logo.png" width="144" height="144" /></td>

<td colspan="2" width="616" height="110"><h1>Институт технологий НР</h1></td>

</tr>

<tr>

<td width="700"><a href="#" onclick="setActiveStyleSheet('classic'); return false;">Классический&nbsp;</a>

<a href="#" onclick="setActiveStyleSheet('academ'); return false;">Академический&nbsp;</a>

<a href="#" onclick="setActiveStyleSheet('modern'); return false;">Современный</a>

</td>

<td width="150" height="20" style="text-align: right"><a href="/Registration.php"><b>Регистрация</b></a></td>

</tr>

</table>

<!-- Регистрационная форма -->

<div style="DISPLAY: none" id="registration">

<div style="Z-INDEX: 4; POSITION: absolute; TOP: 119px; LEFT: 20px; opacity: 0.8" id="regCell">

<table border=0>

<tbody>

<tr>

<td bgColor=#2f7d9c height=111 width=125></td></tr></tbody></table>

</div>

<div style="Z-INDEX: 4; POSITION: absolute; TOP: 119px; LEFT: -200px" id="regForm">

<table border=0>

<tbody>

<tr>

<td align="middle"><span style="COLOR: white" class="reg1">Имя:</span></td></tr>

<tr>

<td style="width: 125px" align=middle><input style="width: 110px" id="login" type="text"></td></tr>

<tr>

<td align="middle"><span style="COLOR: white" class="reg1">Пароль:</span></td></tr>

<tr>

<td align="middle"><input style="width: 110px" id="passwd" type="password"></td></tr>

<tr>

<td height="31" align="middle"><button style="width: 80px" onclick="registrate()" type=submit><span class="reg1">Регистрация</span></button></td></tr>

</tbody>

</table>

</div>

</div>

<div id="topmenu">

<ul>

<li><a href="index.html">Главная страница</a></li>

<li><a href="abouttheprogram.html">О программе</a></li>

<li><a href="news.html">Новости</a></li>

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

<li><a href="participants.html">Участники</a></li>

<li><a href="allcourses.html">Курсы</a></li>

<li><a href="UsefulLinks.html">Полезные ссылки</a></li>

</ul>

<!--end #topmenu--></div>

<!-- end #header --></div>

<div id="mainContent">

<!-- левый блок -->

<div id="leftContent">

<h2 class="posted">Участники проекта</h2>

<table width="300" class="small" id="PChanger">

<tr>

<td width="50"><b><a href="#" onclick="changePartner(0);">ВятГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(1);">ДВГТУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(2);">КамГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(3);">КГТУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(4);">КФУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(5);">МГУ</a></b></td>

</tr>

<tr>

<td width="50"><b><a href="#" onclick="changePartner(6);">МГУП</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(7);">МИФИ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(8);">МСЦ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(9);">МФТИ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(10);">НГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(11);">СГАУ</a></b></td>

</tr>

<tr>

<td width="50"><b><a href="#" onclick="changePartner(12);">СГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(13);">СГТУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(14);">СПбГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(15);">СПбГУТ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(16);">ЮФУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(17);">КПИ</a></b></td>

</tr>

<tr>

<td width="50"><b><a href="#" onclick="changePartner(18);">СТУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(19);">ЗТУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(20);">НовГУ</a></b></td>

<td width="50"></td>

<td width="50"></td>

<td width="50"></td>

</tr>

</table>

<tr><td id="map">

<img src="index_files/rit-map.png">

</td></tr>

<tr valign="middle"><td colspan="4">

<table border="0" cellpadding="0" cellspacing="0" width="300">

<tbody><tr>

<td align="left" height="49" width="90"><img id="partnerLogoLS" src="index_files/hp-logo.png" alt="HP logo" height="25" hspace="5">

</td>

<td align="left" width="200"><div id="partnerName" onclick="//showEditMasterForm();" onmouseover="this.style.color='red'" onmouseout="this.style.color='navy'"><a>HP</a></div>

</td>

</tr>

</tbody></table>

</td></tr>

<h2 class="posted"> </h2>

<tr valign="middle"><td>

<table border="0">

<tbody><tr>

<td width="140"></td>

<td align="left" width="50"><b><a class="small" href="#" onclick="toProject()">Проект</a></b></td>

<td align="center" width="50"><b><a class="small" href="#" onclick="toContacts()">Контакты</a></b></td>

<td align="center" width="40"><b><a id="partnerHref" href="#" onclick="toSite()" class="small"><span id="partnerSiteName">Сайт</span></a></b></td>

</tr></tbody></table>

</td></tr>

<tr><td colspan="4">

<div id="partnerMainPicture">

<img id="centralPicture" src="index_files/HPLabs_PaloAlto2.jpg" alt="" width="300">

</div>

</td></tr>

<tr><td colspan="4" width="300">

<span id="partnerAnnotation" onclick="toFullAnnotation()"><p><img src="index_files/ATT06751.jpg" align="left" height="100" hspace="5">&nbsp;&nbsp;&nbsp;"Мы придумали эту программу специально для России, а теперь она заслужила признание высшего руководства НР и получила значительные дополнительные инвестиции на дальнейшее развитие, несмотря на нестабильную мировую экономическую ситуацию. Уникальность этой программы, значимые результаты ее работы и растущий к ней интерес лучших вузов России поставили МИТ в ряд с наиболее приоритетными и ключевыми программами компании в области поддержки образования и филантропии."</p>

<p align="right">Александр Микоян </p></span>

</td></tr>

<h2 class="posted"> </h2>

<tr>

<td colspan="4" align="center">

<table id="photoGallery" border="0" cellpadding="0" cellspacing="0" width="300">

<tbody><tr valign="middle">

<td><table cellpadding="0" cellspacing="0" width="300">

<tbody>

<tr>

<td align="right" height="49" width="120"><img src="index_files/001_27.gif" title="Предыдущие фото" onclick="shiftPhoto('left');" alt="Предыдущие фото" /></td>

<td colspan="2" align="center"><a class="large" href="#" onclick="openPhotoForm();">Галерея</a></td>

<td align="left" width="120"><img src="index_files/001_25.gif" title="Следующие фото" onclick="shiftPhoto('right');" alt="Следующие фото" /></td>

</tr>

</tbody>

</table></td></tr>

<tr align="center"><td colspan="4">

<table border="0" cellpadding="0" cellspacing="0" width="300">

<tbody><tr valign="middle">

<td>

<div id="whiteScreen" style="top: 4px; left: 4px; opacity: 1;">

<canvas id="canvas" height="10" width="296"></canvas>

</div>

</td>

</tr>

</tbody></table>

</td></tr>

<tr><td colspan="4">

<table id="PhotoGalleryContainer" border="0" cellpadding="0" cellspacing="0">

<tbody><tr valign="top">

<td align="center" width="149"><img src="index_files/2008_10_22_3-3.jpg" height="112" width="148"></td>

<td align="center" width="149"><img src="index_files/2008_10_22_20.jpg" height="112" width="148"></td>

</tr>

</tbody></table>

</td></tr>

<tr><td align="left" width="300" height="20"></td></tr>

<span class="reg1"></span>

</tbody></table>

</td></tr>

<!--end #leftContent--></div>

<!-- правый блок -->

<div id="rightContent">

</td><td width="500">

<table width="500" border="0" cellpadding="0" cellspacing="0">

<tbody><tr><td>

<h2 class="posted">HP MИТ</h2>

</td></tr>

<tr><td>

<h3><span id="RitProjectTitle">О проекте</span></h3>

<div id="RitProjectBody" onclick="window.location='Projects.html?pid=-2'">

<p class="first">Программа Международный «Институт Технологий НР» (МИТ) является уникальной для компании НР, она была придумана и ведется Подразделением по университетским и исследовательским программам НР в России.<br>

Программа имеет своей главной целью оказание поддержки вузам России и стран Восточной Европы в подготовке ИТ-специалистов высокого уровня и обеспечение доступа студентов и преподавателей к информации о самых современных технологиях. Она разработана в соответствии с целями национального Российского проекта «Образование».

<a href="http://iit.hi-edu.ru/Projects.html" class="large">Далее</a></p>

</div>

</td></tr>

</tbody></table>

<table border="0" cellpadding="0" cellspacing="0" width="500">

<tbody><tr><td height="49">

<h2 class="posted">Новости MИТ</h2>

</td></tr>

</tbody></table>

<table width="500" border="0" cellpadding="0" cellspacing="0" id="masterNewsTable">

<tbody><tr>

<td width="500" height="40"><a onclick="toCommonNews(2)" href="#" class="large">(11.07.2010) Компания HP приняла участие в Форуме "Селигер-2010"</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first"><img src="index_files/Seliger3.jpg" align="left" height="30" hspace="5">11 июля гостями смены "Техническое творчество и инновации" Форума "Селигер-2010" стали Александр Микоян и Игорь Белоусов.</p></td>

</tr>

<tr>

<td width="500" height="40"><a onclick="toCommonNews(3)" href="#" class="large">(13.05.2010) Обнинский Инновационный форум</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first"> <img src="index_files/post_08t1.jpg" align="left" height="30" hspace="5">13 мая в Обнинске прошел первый региональный Инновационный форум. Его организаторами выступили Правительство Калужской области, Администрация города Обнинск и Информационное агентство AK&amp;M при участии Калужской торгово-промышленной палаты и Рейтингового агентства «Эксперт РА».</p></td>

</tr>

<tr>

<td width="500" height="40"><a onclick="toCommonNews(4)" href="#" class="large">(06.05.2010) Первая всероссийская виртуальная интернет конференция</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first">6 мая при содействии Центра МИТ НР в Казанском федеральном университете проводилась Первая всероссийская виртуальная интернет конференция "Современные проблемы анатомии, гистологии и эмбриологии животных".</p></td>

Смотрите также файлы