Автор

Создание нового сайта 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



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

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

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

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

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


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

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


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

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close