- •Пояснительная записка к дипломной работе
- •Реферат
- •Глава 3. Разработка сайта 30
- •Введение
- •1 Аналитическая часть
- •1.1 Характеристика сайта
- •1.2. Обзор cms
- •Требования к по
- •1.3 Обзор графического по
- •1.4. Обоснование выбора
- •2 Информационно-логическая модель
- •2.2.2 Описание создания страниц web-сайта
- •Глава 3. Разработка сайта
- •3.1. Разработка логотипа отюм
- •3.2. Разработка анимированного меню
- •3.3. Разработка логотипа сайта
- •3.4. Создание макета сайта в Wp
- •Установка в деталях Шаг 1: Загрузка и распаковка
- •Шаг 2: Создание базы данных и пользователя
- •Работа с cPanel
- •Работа с phpMyAdmin
- •Работа с MySql клиентом
- •Работа с системой Plesk Шаг 3: Настройка файла wp-config.Php
- •Шаг 4: Размещение файлов
- •Размещение файлов в корневом каталоге
- •Размещение файлов в подкаталоге
- •Шаг 5: Запуск установки
- •Решение проблем при запуске установки
- •Распространенные проблемы установки
- •Установка MultipleBlogs
- •Установка WordPress на локальном компьютере
- •Заключение
- •Приложения
- •Список использованных источников
- •Приложение а
- •Приложение б
- •Приложение в
Приложение в
Программный код создания анимационного меню
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0066)http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html -->
<html lang="en" class="translated-ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Морфинг Кубы питания</title>
<style type="text/css" media="screen">
body {
background-color: black;
color: white;
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
background-image: -webkit-gradient(radial,
50% 500, 1,
50% 500, 400,
from(rgba(255, 255, 255, 0.3)),
to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container {
width: 100%;
height: 700px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 35pt;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 8s infinite linear;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
/* ---------- cube styles ------------- */
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}
/* ---------- ring styles ------------- */
.ring > .one {
-webkit-transform: translateZ(380px);
}
.ring > .two {
-webkit-transform: rotateY(30deg) translateZ(380px);
}
.ring > .three {
-webkit-transform: rotateY(60deg) translateZ(380px);
}
.ring > .four {
-webkit-transform: rotateY(90deg) translateZ(380px);
}
.ring > .five {
-webkit-transform: rotateY(120deg) translateZ(380px);
}
.ring > .six {
-webkit-transform: rotateY(150deg) translateZ(380px);
}
.ring > .seven {
-webkit-transform: rotateY(180deg) translateZ(380px);
}
.ring > .eight {
-webkit-transform: rotateY(210deg) translateZ(380px);
}
.ring > .nine {
-webkit-transform: rotateY(-120deg) translateZ(380px);
}
.ring > .ten {
-webkit-transform: rotateY(-90deg) translateZ(380px);
}
.ring > .eleven {
-webkit-transform: rotateY(300deg) translateZ(380px);
}
.ring > .twelve {
-webkit-transform: rotateY(330deg) translateZ(380px);
}
.controls {
width: 80%;
margin: 0 auto;
padding: 5px 20px;
-webkit-border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
}
.controls > div {
margin: 10px;
}
</style>
<script type="text/javascript" charset="utf-8">
function hasClassName(inElement, inClassName)
{
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
return regExp.test(inElement.className);
}
function addClassName(inElement, inClassName)
{
if (!hasClassName(inElement, inClassName))
inElement.className = [inElement.className, inClassName].join(' ');
}
function removeClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName)) {
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
var curClasses = inElement.className;
inElement.className = curClasses.replace(regExp, ' ');
}
}
function toggleClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName))
removeClassName(inElement, inClassName);
else
addClassName(inElement, inClassName);
}
function toggleShape()
{
var shape = document.getElementById('shape');
if (hasClassName(shape, 'ring')) {
removeClassName(shape, 'ring');
addClassName(shape, 'cube');
} else {
removeClassName(shape, 'cube');
addClassName(shape, 'ring');
}
// Move the ring back in Z so it's not so in-your-face.
var stage = document.getElementById('stage');
if (hasClassName(shape, 'ring'))
stage.style.webkitTransform = 'translateZ(-200px)';
else
stage.style.webkitTransform = '';
}
function toggleBackfaces()
{
var backfacesVisible = document.getElementById('backfaces').checked;
var shape = document.getElementById('shape');
if (backfacesVisible)
addClassName(shape, 'backfaces');
else
removeClassName(shape, 'backfaces');
}
</script>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="./Морфинг Кубы питания_files/translateelement.css"><script type="text/javascript" charset="UTF-8" src="./Морфинг Кубы питания_files/main_ru.js"></script><script type="text/javascript" charset="UTF-8" src="./Морфинг Кубы питания_files/element_main.js"></script></head>
<body>
<div class="controls">
<h1><font><font>Анимация, переходы и 3D преобразования</font></font></h1>
<p><font><font>Этот пример показывает еще интересный контент с использованием 3D преобразований, анимации и переходов. </font><font>Обратите внимание, что вы все еще можете выделить текст на элементы, даже если они вращаются. </font><font>Преобразования элементы остаются полностью интерактивными.</font></font></p>
<p><font><font>Нажмите Переключить Форма для переключения между вложенных кубов и одно большое кольцо. </font><font>Обратите внимание, как самолеты плавно перейти в новое место, даже если все формы вращается. </font><font>Вы можете даже прервать этот переход, нажав еще раз, и они вернуться гладко.</font></font></p>
<p><font><font>Переключить Backfaces Видимый флажок, чтобы включить backfaces и выключается с помощью </font></font><code><font><font>-WebKit-противоположная сторона видимости</font></font></code><font><font> .</font></font></p>
<div><button onclick="toggleShape()"><font><font class="">Переключение формы</font></font></button></div>
<div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked=""><label for="backfaces"><font><font>Backfaces видимых</font></font></label></div>
</div>
<div id="container">
<div id="stage" style="-webkit-transform: translateZ(-200px); ">
<div id="shape" class=" backfaces ring">
<div class="plane one"><font><font><img src="Изображение 013.jpg" width=200px height=200px></font></font></div>
<div class="plane two"><font><font class=""><a href=http://www.itym.org>МТЮМ</a></font></font></div>
<div class="plane three"><font><a href=http://www.uni.bsu.by/arrangements/turnir/index.html>РТЮМ</a></font></div>
<div class="plane four"><font><font><a href=http://www.gimnazia56.by>Гимназия 56</a></font></font></div>
<div class="plane five"><font><font class=""><a href=http://www.school-51.gorodgomel.by>Гимназия 51</a></font></font></div>
<div class="plane six"><font><font><img src="DSC02701.JPG" width=200px height=200px></font></font></div>
<div class="plane seven"><font><font><img src="DSC02707.JPG" width=200px height=200px></font></font></div>
<div class="plane eight"><font><font><img src="МТЮМ.png" width=200px height=200px></font></font></div>
<div class="plane nine"><font><font><img src="РТЮМ.gif" width=200px height=200px></font></font></div>
<div class="plane ten"><font><font><img src="Логотип гимназии 56.jpg" width=200px height=200px></font></font></div>
<div class="plane eleven"><font><font><img src="баннер 51.jpg" width=200px height=200px></font></font></div>
<div class="plane twelve"><font><font><img src="DSC02712.JPG" width=200px height=200px></font></font></div>
</div>
</div>
</div><div id="goog-gt-tt" class="goog-tooltip skiptranslate" style="visibility: hidden; display: none; left: 285px; top: 216px; "><div style="overflow:hidden"><div class="logo"><img src="./Морфинг Кубы питания_files/mini_google.png"></div><a class="close-button" href="javascript:void(0)" title="Close"><img src="./Морфинг Кубы питания_files/cleardot.gif" width="15" height="15" style="background-image:url(http://translate.googleapis.com/translate_static/img/te_ctrl3.gif); background-position:-28px 0px"></a></div><div class="top"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="title left">Original Text:</div></div><div class="middle"><div class="original-text">Toggle Shape</div></div><div class="bottom"><div class="activity-links"><span class="activity-link">Показать альтернативный перевод</span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none; opacity: 0; "></div></div>
</body></html>