Автор

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 верстка сайта

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

Интересные плагины, которые вы сможете использовать при создании навигации в ваших проектах.

Представляю вашему вниманию jQuery, Mootools, CSS меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню,  меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

 


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

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


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

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


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

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close