Автор

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

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


 

Окончено создание сайта. Процесс от начала до окончания проекта был очень долгим:) Заказ на создание сайта был сделан 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

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


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

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

Предлагаю Вам очень, на мой взгляд, интересный вариант Captcha. Но как готовый модуль его использовать можно только в том случае, если страница с формой  не перезагружается. Да и вообще это больше идея с которой еще надо поковыряться чтобы применить для Captcha. Хотя человеку со знанием JavaScript это будет делом 5-10 минут!


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

Полноразмерный, адаптивный и простой в настройке слайдер.


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

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

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


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

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close