Создание нового сайта Санатория «Изумруд»

Создание нового сайта Санатория «Изумруд»


 

Окончено создание сайта. Процесс от начала до окончания проекта был очень долгим:) Заказ на создание сайта был сделан 2 года назад, но только со сменой руководства в прошлом месяце всё сдвинулось с места!!!

 

Хочу в данной статье немного расказать о создании нового сайта Санатория «Изумруд» г.Балаково. 

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

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

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:

Меню для всех страниц сайта на JQUERY. Демонстрация и исходники находятся в статье Анимированное JavaScript меню или на самом сайте Санатория «Изумруд». При наведении курсора на раздел, меню разворачивается:

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

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

 

Активируются окна при нажатии на соответствующую надпись в шапке сайта:

 

CSS3

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

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

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

 

Javascript

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

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

 

UMI.CMS

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

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

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

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

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


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



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

Создание нового сайта Санатория «Изумруд»

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


Создание нового сайта Санатория «Изумруд»

Выпадющие списки часто встречаются в структуре современного сайтостроения, это не удивительно, ведь это не только эффективно с точки зрения организации материала на сайте, сохранения места на сайте, но и эффектно выглядит. Зачастую списки стилизую достаточно просто. Они не радуют взор, и не привлекают внимание. В данном уроке мы рассмотрим как можно стилизовать выпадающие списки select с помощью небольшого плагина jquery. Данный плагин позволит вам разнообразить списки и креативно решить подход к их организации.


Создание нового сайта Санатория «Изумруд»

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


Создание нового сайта Санатория «Изумруд»

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


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

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


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