Для более легкого запоминания и понимания можно запросы разделить на 3 типа: DML(Data Manipulation Language) - управление данными(УД), и определение(вид) данных DDL(Data Definition Language) (ОД).

И еще пожалуй системные запросы (СЗ)DCL (Data Control Language).Также необходимо всегда иметь под рукой информацию о том какие типы данных применяются в таблицах MySQL и в конце концов определить пользователей и их права.

К УД можно отнести:

SELECT - извлечение(выборка) данных из БД

UPDATE - обновление данных в БД

DELETE - удаление данных из БД

INSERT INTO - вставка(заполнение) новыми данными БД

к ОД:

CREATE DATABASE - создать новую БД

CREATE TABLE - создать новую таблицу

ALTER TABLE - изменить таблицу

DROP TABLE - удалить таблицу

CREATE INDEX - создать индекс (поисковый ключ)

к СЗ:

show processlist - показать процессы БД

Создание БД

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

Взять phpMyAdmin можно с официального сайта www.phpmyadmin.net или, что проще, использовать комплект Денвер, который уже содержит в себе эту систему и устанавливает ее на локальный компьютер.

Создание таблицы

Запуск phpMyAdmin происходит по адресу http://localhost/phpMyAdmin/index.php, на первой странице содержится текстовое поле для ввода имени новой базы данных (БД), здесь же можно переключить интерфейс на русский язык (рис. 8).



Рис. 8. Настройка русского языка

Вводим имя подходящей базы данных и нажимаем кнопку «Создать». После чего БД с указанным именем будет создана (рис. 9).

Рис. 9. Создание новой базы данных

Если база уже создана, ее следует выбрать из списка в левом фрейме (рис. 10).

Рис. 10. Выбор текущей базы данных

БД с именем mysql создается автоматически для внутренних целей, поэтому она будет присутствовать в списке баз.

Теперь необходимо создать таблицы для нашего сайта со следующей структурой:

Таблица, содержащая данные администратора сайта, для входа в админ панель - admin

Рис. 11. Таблица данных администратора

Таблица, содержащая информацию о Новостях фирмы - ap_articles

Рис. 12. Таблица данных новостей

Таблица, содержащая категории продукции - mb_cat

Рис. 13. Таблица данных категорий продукции

В этой таблице находиться информации о продукции - mb_catalogue

После ввода имени каждой из этих таблиц, появится таблица для редактирования полей. Введите имена полей, укажите их тип, длину поля, для первых двух полей задайте атрибут UNSIGNED, который означает, что числа будут только положительными. Обязательно надо задать для первого поля id первичный ключ и, чтобы не изменять значение поля самим, -- параметр auto_increment (рис. 14). Для удобства можно добавить к таблице комментарий.

Рис.14. Добавление нового поля

Информацию в таблицу лучше всего заносить через административную систему сайта, которую предстоит еще написать. Но пока она не создана, предварительные данные для отладки программы можно добавлять и через phpMyAdmin. Для этого выберите необходимую таблицу и нажмите на закладку «Вставить» (рис.15).

В удобной форме перечислены все поля таблицы для создания записи. Поля, помеченные как auto_increment (у нас это поле id), заполнять не надо, записи в них будут созданы автоматически.

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

Рис.15. Добавление данных

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

До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом и подвергнуты остракизму. Любое использование фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам? Только переходить к таблицам. Поэтому вёрстка с использованием таблиц на долгое время стала определенным стандартом.

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

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

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

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

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

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

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

Работа с таблицами менее гибкая, чем со стилями, при использовании таблиц широко известным приемом стало применение распорок -- прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

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

Усложненная верстка при большом количестве таблиц. Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Macromedia Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

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

Вся информация храниться в БД MySQL, которая является одной из множества ПО для работы с SQL базами данных.

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

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

Есть четыре основных типа запросов данных в SQL, которые относятся к так называемому языку манипулирования данными (Data Manipulation Language или DML):

SELECT - выбрать строки из таблиц;

INSERT - добавить строки в таблицу;

UPDATE - изменить строки в таблице;

DELETE - удалить строки в таблице;

Каждый из этих запросов имеет различные операторы и функции, которые используются для того, чтобы произвести какие-то действия с данными. Запрос SELECT имеет самое большое количество опций. Существуют также дополнительные типы запросов, используемых вместе с SELECT, типа JOIN и UNION. Но пока, мы сосредоточимся только на основных запросах.

Чтобы получить информацию, хранящуюся в базе данных используется запрос SELECT. Базовое действие этого запроса ограничено одной таблицей, хотя существуют конструкции, обеспечивающие выборку с нескольких таблиц одновременно. Для того, чтобы получить все строки данных для специфических столбцов, используется запрос такого вида:

SELECT column1, column2 FROM table_name;

Также, можно получить все столбцы из таблицы, используя подстановочный знак «*»:

SELECT * FROM table_name;

Это может быть полезно в том случае, когда вы собираетесь выбрать данные с определенным условием WHERE. Следующий запрос возвратит все столбцы со всех строк, где «column1» содержит значение «3»:

SELECT * FROM table_name WHERE column1=3;

Кроме «=» (равно), существуют следующие условные операторы:

Дополнительно можно использовать условия BITWEEN и LIKE для сравнения с условием WHERE, а так же комбинации операторов AND и OR.

SELECT * FROM table_name WHERE ((Age >= 18) AND (LastName BETWEEN `Иванов' AND `Сидоров')) OR Company LIKE `%Motorola%';

Что в переводе на русский язык означает: выбрать все столбцы из таблицы table_name, где значение столбца age больше или равно 18, а также значение столбца LastName находится в алфавитном промежутке от Иванов до Сидоров включительно, или же значением столбца Company является Motorola.

Запрос INSERT используется для создания новой строки данных. Для обновления уже существующих данных или пустых полей строки нужно использовать запрос UPDATE.

Примерный синтаксис запроса INSERT:

INSERT INTO table_name (column1, column2, column3) VALUES (`data1', `data2', `data3');

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

Изменяется уже существующая информация в базе данных очень похожим образом.

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

UPDATE table_name SET column1 = `data1', column2 = `data2' WHERE column3 = `data3';

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

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

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

Для информационного сайта «Мебель Лидер» был выбран следующий хостинг-провайдер TimeWeb Их сайт http://timeweb.ru/

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

TimeWeb успешно оказывает услуги с 2002 года и на сегодняшний день является наиболее динамически развивающийся компанией хостинг-услуг. Они работают с клиентами самого разного профиля: компаниями, независимыми объединениями и частными лицами.

Размещение виртуальных серверов заказчиков только на специализированном оборудовании с высокой степенью надёжности и скорости передачи информации и данных.

TimeWeb уделяет особое внимание вопросам защиты информации от несанкционированного доступа.Виртуальные сервера клиентов находятся на независимых серверных пространствах и надёжно защищены от внешнего проникновения.

Доменное имя

Это комбинация латинских букв, способствующая быстрейшему запоминанию сайта. В доменном имени рекомендуется писать только прописные латинские буквы и цифры от 0 до 9. Из знаков препинания разрешено только тире. Кроме того, специалисты не рекомендуют регистрировать доменные имена с количеством знаков, превышающих 10. В процессе создания сайта большое внимание уделяется доменному имени.

В данном случае было принято решения использовать следующее доменное имя для информационного сайта «Мебель Лидер»: www.mklider.tmweb.ru

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

Заключение

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

В ходе данной дипломной работы было создано программное средство с применением современных средств разработки таких как: языка HTML, CSS, PHP, ModX. Данные инструментальные средства использовались не только по причине их доступности, но и потому, что именно с помощью программного обеспечения предназначенного для создания web-страниц можно создавать качественный web-сайт с дальнейшей публикацией в Интернет.

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

В данной дипломной работе были рассмотрены следующие вопросы:

- проанализирован мебельный рынок Краснодара;

- создание дизайна сайта в приятном цветовом исполнение;

- разработка презентационного сайта с использованием языка гипертекстовой разметки HTML;

- внедрение css свойств для более удобного восприятия кода и красивого отображения страниц в браузере;

- создание графических элементов сайта;

- вёрстка дизайна сайта на шаблон;

- создание динамических веб страниц с помощью CMS ModX;

Дизайн сайта, простота навигации и его информативность позволят пользователю подробно ознакомиться не только с продукцией предприятия

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

Цель, поставленная на первом этапе написания дипломной работы, достигнута.

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

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

1.Государственный образовательный стандарт СПО. Издательский отдел ИПР СПО, 2002, 34 с.

2.ГОСТ 7.32-91

3.Билл Скотт, Тереза Нейл «Проектирование веб-интерфейсов» 2010 - 244 с.

4.Бурсов М.В., Домненко В.М., Д.А. Гаврилин Основы работы с HTML-редактором Dreamweaver Год: 2002 - 150 с.

5.Гончаров А.Н. Самоучитель HTML / А.Н. Гончаров.- СПб.: Питер, 2002. - 455 с.

6.Горнаков С.Г. Осваиваем популярные системы управления сайтом / С.Г. Горнаков.- М.: Наука, 2009. - 310 с.

7.Денис Колисниченко, Выбираем лучший бесплатный движок для сайта. CMS ModX! и Drupal (+ CD-ROM) БХВ-Петербург, 2010 г.- 288 с.

8.Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» 2010 год. - 240 с.

9.Ежевский Д.О. О критериях создания электронных учебных пособий / Д.О. Ежевский.- М.: Эксмо, 2004. - 173 с.

10.Колисниченко Д.Н. ModX: Руководство пользователя / Д.Н. Колисниченко.- М.: Диалектика, 2009. - 178 с.

11.Кристиан Дари, Эмилиан Баланеску «PHP и MySQL. Создание интернет-магазина» 2010 год - 350 с.

12.Лайза Сабин-Вильсон «WordPress для чайников» 2010 год - 450 с.

13.Ланский А.С. Язык HTML. - М.: ООО «Бином-Пресс», 2003. - 456 с.: ил. - 489 с.

14.Лебедев, В.А. Типографика учебников / В.А. Лебедев // Книжное дело. - 2002. - № 3 (47). - 254 с.

15.Матросов А. HTML 4.0. М.: Дело, 2005. - 342 с.

16.Михарский В.В. Разработка сайтов. Язык HTML - М.: ООО «Бином-Пресс», 2003. - 610 с.: ил. - 170 с.

17.Мэтью МакДональд «Создание Web-сайтов. Основное руководство» 2010 - 288 с.

18.Петр Ташков, Веб-мастеринг на 100%. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка Питер, 2010 г.- 512 с.

19.Петюшкин А.В. Книги по HTML Год: 2003 Издательство: БХВ-Петербург - 360 с.

20.Селевко Г.К. Современные образовательные технологии: Учебное пособие. - М.: Народное образование, 1998. - 356 с.

21.Смирнов И.С и др. Технологии создания программ.- М.: МГИУ,2003. - 238 с.

22.Стауфер Т. Создание веб-страниц. Самоучитель Издательство: Питер 2003 - 164 с.

23.Уваров А.Ю. Электронный учебник: теория и практика.- М.: Изд-во УРАО, 1999. - 251 с.

24.Хеслоп П. HTML самого начала. С.-Пб: Санкт-Петербург, 2005. - 370 с.

25.Хольцшлаг, Молли, Э Использование HTML и XHTML Год: 2003 Издательство: Вильямc - 460 с.

26.Чиртик А.В. Популярный самоучитель HTML / А.В. Чиртик.- СПб.: Питер, 2006 - 219 с.

27.Чурбанова О.В., Ширшов Е.В. Анализ психолого-педагогических основ разработки сетевых обучающих// Материалы конференции «Электронные учебники», МЭСИ, 2001 г. - 129 с.

28.http://css.manual.ru/ -Сайт CSS мануал

29.http://htmlbook.ru/html - Сайт с содержанием всех доступных тегов

30.http://ru.wikipedia.org/wiki/HTML - Описание html

Приложение

Index.html

<!DOCTYPE HTML>

<html>

<head>

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

<title>Index</title>

<!--~~~~~~~ styles ~~~~~~~-->

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

<link id="size-stylesheet" rel="stylesheet" href="#">

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>

</head>

<body>

<div class="wrap">

<!--~~~~~~~ begin header ~~~~~~~-->

<header class="head">

<span class="logo"><img src="i/Lider-furniture-company.png" width="200" height="77" alt="Lider furniture company"></span>

<nav class="main_menu">

<ul>

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

<li><a href="catalogue.html" title="Каталог">Каталог</a></li>

<li><a href="projects.html" title="Проекты">Проекты</a></li>

<li><a href="price.html" title="Прайсы">Прайсы</a></li>

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

</ul>

</nav>

</header>

<section class="up" id="up">

<img src="i/Lider-furniture-company.png" width="150" height="58" alt="Lider furniture company">

<a href="#" id="toup"><span>наверх</span> &#8593;</a>

</section>

<!--~~~~~~~ end header ~~~~~~~-->

<div class="main_img">

<div class="mi_slides" id="mi_slides">

<img src="i/slides/1.jpg" alt="">

<img src="i/slides/2.jpg" alt="">

<img src="i/slides/3.jpg" alt="">

</div>

<a class="mi_left" id="mi_left" href="#"><img src="i/arrow_left.png" width="50" height="100" alt="Сюда"></a>

<a class="mi_right" id="mi_right" href="#"><img src="i/arrow_right.png" width="50" height="100" alt="Туда"></a>

<img class="white_mask" src="i/mask.png" alt="">

<img class="shadow_top" src="i/shadow_top.png" alt="">

<img class="shadow_bottom" src="i/shadow_bottom.png" alt="">

</div>

<!--~~~~~~~ begin middle ~~~~~~~-->

<section class="middle">

<h1><b>Мы делаем мебель</b></h1>

<p> Мебельная компания «Лидер» предлагает Вашему вниманию широкий ассортимент мебели собственного производства:

- кухни;

- шкафы купе;

- гардеробные комнаты;

- детские;

- спальни;

- кабинеты;

- офисная мебель;

- гостинечные номера;

- стойки-ресепшн;

- мягкая мебель;

- мебель для баров и ресторанов;

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

Ценовые категории предлагаемой продукции различны: от мебели эконом-класса до эксклюзивных изделий.

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

Широкий ассортимент и постоянный контроль качества, является основными принципами нашей работы!

Так же компания занимается поставками мебели из Италии, Турции и Китая! </p>

<p><a class="more" id="more" href="#"><b>Немного подробнее</b></a></p>

</section>

<!--~~~~~~~ end middle ~~~~~~~-->

</div>

<!--~~~~~~~ begin footer ~~~~~~~-->

<footer class="foot">

<div class="foot_in">

<p>© 2013 <b>Мебельная компания «Лидер» Мостовой Аркадий</b></p>

</div>

</footer>

<!--~~~~~~~ end footer ~~~~~~~-->

<div class="mask" id="mask"></div>

</body>

</html>

Style.css

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

a, input, textarea, img { outline: none; }

/*//////////////////////////////////////////////////////////////////////////////*/

html { height: 100%; margin: 0 auto; max-width: 1700px; }

body { background: #fff; color: #464646; font-family: 'PT Sans', Tahoma, sans-serif; font-size: 18px; height: 100%; position: relative; }

.wrap { min-height: 100%; padding-top: 43px; position: relative; }

/*//////////////////////////////////////////////////////////////////////////////*/

/*header part*/

.head { margin: 0 auto; max-width: 1500px; overflow: hidden; padding: 0 100px; z-index: 2; }

.logo { border: none !important; float: left; }

a.logo:hover { opacity: 0.7; }

.main_menu { float: left; padding: 40px 0 5px; }

.main_menu ul { display: inline; }

.main_menu li { display: inline; margin-left: 50px; }

.main_menu a { font-size: 18px; line-height: 26px; }

.main_menu a.active { border: none !important; color: #f7941e !important; cursor: default; font-weight: bold; }

.up { background: #fff; display: none; left: 0; opacity: 0.8; padding: 10px 100px; position: fixed; right: 0; top: 0; z-index: 99; }

.up a { border: none !important; font-size: 14px; margin-left: 50px; position: relative; top: -3px; }

.up a:hover { border-bottom: 1px dashed red; }

.up a span { border-bottom: 1px dashed #0055cc; }

.up a:hover span { border-bottom: 1px dashed red; }

/*//////////////////////////////////////////////////////////////////////////////*/

/*middle part*/

.middle { margin: 0 auto; max-width: 1500px; padding: 0 100px 100px; }

.middle p { line-height: 24px; margin-top: 20px; text-align: justify; }

.more { border-bottom: 1px dashed #464646; color: #464646; }

.more:hover { border-bottom: 1px dashed red; }

.middle h1 { font-size: 24px; }

.selection { font-size: 18px; margin-top: 30px !important; }

.selection a { border-bottom: 1px dashed #0055cc; line-height: 24px; }

.selection a:hover { border-bottom: 1px dashed red; }

.selection .active { border: none !important; color: #464646; cursor: default; font-weight: bold; }

#tabs article { display: none; }

#tabs article#catalogue { display: block; }

.catalogue a { border: none !important; display: inline-block; font-size: 14px; margin: 37px 0 20px 0; padding: 0 15px 3px 0; vertical-align: top; width: 340px; }

.catalogue a img { margin-bottom: 10px; }

.catalogue a span { border-bottom: 1px solid #0055cc; line-height: 18px; }

.catalogue a:hover span { border-bottom: 1px solid red; }

.for_projects { overflow: hidden; }

.projects { margin-left: -100px; }

.projects a { border: none !important; display: inline-block; font-size: 14px; margin: 37px 0 20px 100px; vertical-align: top; width: 350px; }

.projects a img { margin-bottom: 10px; }

.projects a span { border-bottom: 1px dashed #0055cc; line-height: 18px; }

.projects a:hover span { border-bottom: 1px dashed red; }

.for_objects { overflow: hidden; }

.objects { margin-left: -50px; }

.objects a { border: none !important; display: inline-block; font-size: 14px; margin: 40px 0 0 50px; vertical-align: top; }

.objects a img { margin-bottom: 10px; }

.objects a span { border-bottom: 1px dashed #0055cc; line-height: 18px; }

.objects a:hover span { border-bottom: 1px dashed red; }

.back_to { font-size: 14px; margin-left: -18px; }

.back_to a { border: none !important; }

.back_to a span { border-bottom: 1px solid #0055cc; line-height: 18px; }

.back_to a:hover span { border-bottom: 1px solid red; color: red; }

.for_catalog_in { overflow: hidden; }

.catalog_in { font-size: 14px; margin-left: -100px; overflow: hidden; }

.catalog_in article { display: inline-block; margin: 60px 0 0 100px; }

.catalog_in article a { border: none; }

.catalog_in article a img { margin-bottom: 10px; }

.catalog_in article a span { border-bottom: 1px solid #0055cc; line-height: 18px; }

.catalog_in article a:hover span { border-bottom: 1px solid red; }

.catalog_in article p { margin-top: 10px; }

.one_good { margin: 50px auto 0; max-width: 1140px; }

.one_good article { padding-bottom: 50px; }

.for_price { overflow: hidden; }

.price { margin-left: -90px; overflow: hidden; padding-bottom: 70px; }

.price article { float: left; margin-left: 90px; padding-top: 40px; }

.price article h3 { line-height: 24px; margin-bottom: 13px; }

.price article a { font-size: 18px; line-height: 28px; }

.map { margin: 25px auto 0; max-width: 1000px; }

.tel { overflow: hidden; }

.tel b { display: block; float: left; margin-right: 5px; }

.tel span { display: block; overflow: hidden; }

.news {}

.news article { margin-top: 30px; overflow: hidden; }

.news article > span { display: block; float: left; font-size: 14px; line-height: 22px; width: 100px; }

.news article > div { overflow: hidden; }

.pages { margin-top: 30px; }

.pages a { border: none !important; font-size: 14px; line-height: 24px; }

.pages a.pages_back { margin-left: -18px; }

.pages a span { border-bottom: 1px dashed #0055cc; }

.pages a:hover span { border-bottom: 1px dashed red; }

.one_news {}

.one_news article > span { font-size: 14px; }

.managers { padding-bottom: 40px; }

.managers article { display: inline-block; margin-top: 40px; text-align: center; width: 250px; }

.managers article p { font-size: 14px; line-height: 18px; margin-top: 15px; text-align: center; }

.main_img { padding-top: 50px; position: relative; z-index: 1; }

.mi_slides { left: 0; position: absolute; top: 50px; width: 10% !important; }

.mi_slides img { height: 10% !important; width: 10% !important; }

.white_mask { height: auto !important; width: 100% !important; }

.shadow_top { height: 15px; left: 0; position: absolute; top: 50px; width: 100%; z-index: 999; }

.shadow_bottom { height: 15px; left: 0; position: absolute; bottom: 1px; width: 100%; z-index: 999; *bottom: 3px; }

.mi_left { border: none !important; left: 0; margin-top: -30px; opacity: 0.5; position: absolute; top: 50%; z-index: 99; }

.mi_left:hover { opacity: 0.8; }

.mi_right { border: none !important; right: 0; margin-top: -30px; opacity: 0.5; position: absolute; top: 50%; z-index: 99; }

.mi_right:hover { opacity: 0.8; }

.popup { left: 100px; position: absolute; right: 100px; top: 75px; z-index: 3; }

.popup_content { background: #fff; padding: 50px 50px; margin: 0 auto; max-width: 1000px; }

.popup_content h2 {}

.for_close { position: relative; }

.close { border-bottom: 1px dashed #464646; color: #464646; font-size: 14px; line-height: 18px; position: absolute; right: 0; top: -35px; }

.close:hover { border-bottom: 1px dashed red; }

/*//////////////////////////////////////////////////////////////////////////////*/

/*footer part*/

.foot { border-top: 1px solid #898989; font-size: 14px; height: 51px; margin: -75px 0 0; padding-top: 23px; position: relative; }

.foot_in { color: #363636; margin: 0 auto; max-width: 1500px; overflow: hidden; padding: 0 100px; }

.foot_in dl { background: url(../i/odnastudia.png) 0 0 no-repeat; float: right; min-height: 39px; padding-left: 45px; }

.foot_in dl dd { margin-left: -7px; }

.made_by { border-bottom: 1px solid #363636; color: #363636; }

.foot_in p { float: left; padding-top: 14px; }

/*//////////////////////////////////////////////////////////////////////////////*/

/*another part*/

h1 { font-size: 18px; margin-top: 50px; }

h2 { font-size: 24px; line-height: 30px; }

h3 { font-size: 18px; }

h4 {}

h5 {}

h6 {}

b, strong { font-weight: bold; }

i { font-style: italic; }

.hidden { display: none; }

.clear { clear: both; }

.mask { background: #959595; background: url(../i/mask_grey.png) 0 0 repeat; background: rgba(149,149,149,0.85); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 2; }

/*//////////////////////////////////////////////////////////////////////////////*/

/*href's*/

a { border-bottom: 1px solid #0055cc; color: #0055cc; text-decoration: none; }

a:hover { border-bottom: 1px solid red; color: red; }

/*//////////////////////////////////////////////////////////////////////////////*/

/*modify these values to change the size of the stage or the thumbs */

.pika-stage{

width:100%;

height:auto; }

.pika-stage a { border-bottom: none; }

.pika-stage img { vertical-align: top; width: 100%; }

.pika-thumbs {}

.pika-thumbs li {

width: 150px;

height:100px;

}

.pikachoose-whiteout{

position:relative;

width: 100%;

top:0;

margin:0 auto;

padding-bottom: 30px;

}

.pika-stage{}

.pika-stage .pika-aniwrap{

position: absolute;

top: 0;

left: 0;

z-index:9;}

.pika-stage, .pika-thumbs li, .pika-stage .caption{

position: relative;

}

.pika-thumbs li{}

.pika-stage .caption { font-size: 24px; line-height: 36px; margin-top: 30px; }

.pika-stage .caption a{}

.pika-imgnav { display: block !important; opacity: 1 !important; }

.pika-imgnav a { background: #b9b9b9; background: url(../i/arrow_bg.png) 0 0 repeat; background: rgba(185,185,185,0.5); border: none !important; color: #5c5c5c; cursor: pointer; font-size: 62px; font-weight: bold; height: 100px; line-height: 100px; margin: -100px 0 0; position: absolute; text-align: center; top: 50%; width: 50px; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

.one_good .pika-imgnav a { margin-top: -50px; }

.pika-imgnav .next:hover, .pika-imgnav .previous:hover { background: #e3e3e3; background: url(../i/arrow_bg_a.png) 0 0 repeat; background: rgba(227,227,227,0.8); color: #2d2d2d; }

.pika-imgnav .previous { left: 0; }

.pika-imgnav .next { right: 0; }

.pika-imgnav .play{display: none;}

.pika-thumbs li{

float:left;

margin-right: 35px;

overflow:hidden;

}

.pika-thumbs li .clip{

position:relative;

height:100%;

overflow: hidden;}

.pika-thumbs li .clip img{

cursor: pointer;}

.pika-textnav{display:none;}

.pika-counter{display:none;}

.jcarousel-clip-horizontal{

width:100%;

overflow: hidden;

margin-top: 45px;

left:0;

}

.jcarousel-container{

position:relative;

width:100%;

height:100px;

z-index:10;

top:0;

left:0;}

.jcarousel-prev,.jcarousel-next{

background: #b9b9b9; background: url(../i/arrow_bg.png) 0 0 repeat; background: rgba(185,185,185,0.5); border: none !important; color: #5c5c5c; cursor: pointer; font-weight: bold; position: absolute; text-align: center; top: 50%; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;

font-size: 32px; height: 50px; line-height: 50px; margin: -25px 0 0; width: 25px;

}

.jcarousel-prev:hover, .jcarousel-next:hover { background: #e3e3e3; background: url(../i/arrow_bg_a.png) 0 0 repeat; background: rgba(227,227,227,0.8); color: #2d2d2d; }

.jcarousel-prev-disabled:hover, .jcarousel-next-disabled:hover, .jcarousel-next-disabled, .jcarousel-prev-disabled{

filter:alpha(opacity=30);

opacity:0.3;}

.jcarousel-prev{ left: 0; }

.jcarousel-next { right: 0; }

Размещено на Allbest.ru