Автор

16 04.2013
Создание нового сайта Image Club «PLATINUM»

Создание нового сайта Image Club «PLATINUM»


 

Хочу в данной статье немного расказать о создании нового сайта Image Club «PLATINUM» г.Саратов. Чтобы описать чем занимается Image Club, я приведу высказывания владелицы клуба Татьяны Бычковой:

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

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

Сайт писался с нуля, не использовалось никаких шаблонов.

HTML

Для главной страницы:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#center {margin-right:20px; margin-left:20px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
    <div id='header'>
    
    </div>
    <div id='container'>
        <div id='center'>
        
        </div>
    </div>
    <div class='clear'></div>
    <div id='spacer'></div>
</div>
<div id='footer'>

</div>
</body>
</html>

Для внутренних страниц:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#right {float:right;width:200px;}
#left {margin-right:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
    <div id='header'>
    
    </div>
    <div id='container'>
        <div id='right'>
        
        </div>
        <div id='left'>
        
        </div>
    </div>
    <div class='clear'></div>
    <div id='spacer'></div>
</div>
<div id='footer'>

</div>
</body>
</html>

 

JQuery

 

Начал я с главной страницы, а точнее с меню сайта! Меню на главной странице создано на JQUERY. Демонстрация и исходники находятся в статье Анимированное JavaScript меню, самый последний, или на самом сайте Image Club «PLATINUM».

 

При нажатии мышкой на раздел, меню разворачивается:

 

Затем я приступил к созданию меню для внутренних страниц сайта тоже на JQUERY. Основной задачей сделать меню примерно в одном стиле, но при этом чтоб было какоето разнообразие!  Демонстрация и исходники находятся также в статье Анимированное JavaScript меню или на самом сайте Image Club «PLATINUM».

 

При наведении курсора на раздел, меню разворачивается:

 

Далее я приступил к созданию модальных окон и самих кнопок для их вызова.

Начну с вылетающих окон, в данный момент их три: онлайн запись, карта проезда и презентационный видеоролик. Они тоже на JQUERY. Демо и исходники в статье Простые модальные окна с помощью jQuery.

 

Онлайн запись вылетает при нажатии на флажок в левом верхнем углу сайта.

 

Карта проезда вылетает при нажатии на значек в виде уголка в правом верхнем углу сайта. Для вывода карты я использовал сервисот Яндекса «Конструктор карт»

 

Презентационный ролик выводится при нажатии в меню Image Club › Концепция

 

CSS3

 

Далее я рисовал кнопки для вывода модальных окон:

Запись онлайн работает на CSS3, пример и исходники описаны в статье 8 эффектов для изображений (используем только CSS3).

 

Карта проезда работает на CSS3, пример и исходники описаны в статье 8 эффектов для изображений (используем только CSS3).

 

Создание меню для мастеров, в данный момент находится по ссылке полностью на CSS3, описано в статье Красивая навигация CSS3

 

Все фотографии сайта плавно шевелятся ( перейдите по ссылке и раведите на любую фотографию курсоп ) тоже пример и исходники описаны в статье 8 эффектов для изображений (используем только CSS3).

 

Полоса футера тоже на CSS3 и описана в статье Панель с навигацией для подвала сайта на СSS

 

Логотип при наведении тоже увеличивается в стороны, пример и исходники описаны в статье 8 эффектов для изображений (используем только CSS3).

 

Javascript

 

Для просмотра фотографий в режиме слайдшоу я использовал Скрипт галереи iload ( исходники и примеры ).

 

На главной странице сайта по правой стороне вы увидите приветствие и дату. Как это установить описано в статье Дата на сайте.

 

Всплывающие подсказки, просто навидите курсор на логотип нашей студии в нижнем левом углу сайта. Примеры и исходники в статье Всплывающая подсказка (tooltip).

 

UMI.CMS

 

Это сама система управления сайтом, ранее я писал об этом в статье CMS редакции для сайта.

При отправки сообщения с сайта, а точнее с формы записи онлайн, при неправильном написании кода или при незаполненных, обязательных полях выводится сообщение: 

 

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

 

 

Ну вот пока вроде всё! Если вам понравилась данная статья, то сохраните эту страницу в закладки и заходите, так как сайт находится в работе и много чего интересного вы можете тут увидеть!

С уважением Целовальников Сергей!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеdiv верстка сайта

12 12.2015
Создание нового сайта Image Club «PLATINUM»

Публикуем реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеки jQuery.


22 02.2017
Создание нового сайта Image Club «PLATINUM»

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


14 05.2017
Создание нового сайта Image Club «PLATINUM»

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


10 04.2013
Создание нового сайта Image Club «PLATINUM»

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close