Создание web-сайта салона по прокату автомобилей

метки: Разработка, Автомобильный, Страница, Салон, Стиль, Color, Помощь, Создание

сайт каскадный мультимедийный навигационный

Целью данной курсовой работы была разработка и создание сайта для салона по прокату автомобилей ООО «Golden Pine tree» (далее-салон).

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

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

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

Свойства сайта:

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

частота и необходимость обновления — обновление происходит нечасто, по мере необходимости

Задачи сайта:

дать пользователю общее представление о салоне «Golden Pine tree»

максимально заинтересовать посещением салона;

• привлечение дополнительных клиентов;

Функции, которые могут быть реализованы с помощью созданного сайта:

Просмотр меню по интересующим маркам

Просмотр истории компании

Просмотр сертификатов компании

Просмотр местоположения салона на Google карте

Нахождения контактного телефона

Просмотр партнёров салона

Просмотр акций и скидок, действующих в салоне

Можно узнать требования, предъявляемые к арендаторам и условия предоставления услуги аренды

1. Дизайн сайта

1.1 Модель сайта

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

Стартовой является главная страница сайта («index.html »).

Особенности эксплуатации автомобилей при низких температурах

... 20 %, а на Крайнем Севере — на 40 %. 3. Подготовка подвижного состава к зиме. Для обеспечения высокого уровня технического состояния автомобилей, эффективности их эксплуатации в зимнее время, необходимо ... водителем на пуск и подогрев двигателя автомобиля в условиях хранения автомобиля на открытых площадках. В результате этого, технически исправные автомобили, выходят в линию на 1-1,5 часа позже. ...

Структура сайта не однородна: не все страницы равнозначны. На рис. 1 представлена схема модели сайта и отмечены примеры возможных переходов.

Рис. 1. Схема модели сайта

1.2 Макет сайта

При создании макета сайта использовалась блочная вёрстка (вёрстка посредством слоёв).

На сегодняшний день верстать блоками это есть показатель профессионализма. Из плюсов можно отметить компактный код, сравнительную простоту вложенности, скорость разработки и правок. Минус — требуется знание CSS.

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

При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег <div> является кирпичиком вёрстки, её базовым фундаментом.

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Были использованы следующие атрибуты:

Id — уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id.

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

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

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

При создании страниц данного сайта использовались такие свойства атрибутов, как:

• height, width — определение высоты и ширины блока в окне браузера;

color — цвет текста

font-size — размер текста

font-family- тип шрифта

background-color- цвет фона

margin-top — величина отступа от верхнего края элемента

padding — значение полей вокруг содержимого элемента

cursor- вид курсора при наведении

text-shadow- тень от текста

text-align- выравнивание текста

border- задание границ вокруг контента

margin- отступы от border

padding- отступы от контента

border-radius- скругление границ

float- определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон

text-decoration-добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания

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

Современные технологии разработки Web-сайтов

... Web-страниц; выбрать стратегию разработки и создания Web-сайта. разработать план по написания Web-сайта. создать Web-сайт для компании. Задачи необходимые для дальнейшего развития: ознакомиться с современными Интернет-технологиями и, ... о научно-исследовательской работе. Структура и правила оформления» По ГОСТ 7.32-2001 текст печатается на одной стороне листа белой бумаги формата А4 через полтора ...

position- устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице

И некоторые другие.

Стоит сказать что в своей курсовой работе мне пришлось использовать ещё и сущности (англ. entities) — «специальные символы». А именно знак рубля, код которого в Юникоде: &#1412.

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

Рис. 2. Макет сайта.

Для задания взаимного расположения элементов страницы используются таблицы. Они используются в рамках слоёв для расположения графики и текста, которые не являются общими для всех страниц (например на страницах различных марок).

1.3 Применение технологии каскадных таблиц стилей

CSS (от английского Cascading Style Sheets — каскадные таблица стилей) — это специальная технология для описания внешнего вида электронного документа, то есть для его оформления. Описание осуществляется посредством языка разметки. CSS применяют для оформления документов формата HTML .CSS обеспечивает более эффективную, быструю и удобную работу электронных документов и web приложений. CSS стили помогают обрабатывать такие элементы оформления страниц, как шрифт, цветовая гамма, позиционирование элементов, обеспечивает более эффективную работу с изображениями.

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

Существует целое множество причин, по которым рекомендуется использовать CSS:

При использовании CSS, стили и HTML код документа хранятся отдельно, в разных файлах. Таким образом, появляется возможность стилизовать различные web-документы используя общий стиль, подгружаемый из одного файла.

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

Каскадные таблицы имеют очень полезное свойство — кэширование. То есть при открытии страницы в память web-браузера загружается файл CSS стилей, web-браузер его распознает и запоминает. Таким образом, при следующем открытии страницы web-браузер уже будет уметь распознавать эти стили. Принцип работы аналогичен работе кэш памяти в Windows — сначала проверяется соответствие с содержимым кэш памяти и при отсутствии необходимой информации загружается новая. А если в кэш памяти присутствует нужные данные, то их использование уже осуществляется непосредственно из кэш. Такой процесс обеспечивает наиболее эффективную работу с ресурсами. Тоже самое и в браузере. Благодаря этой технологии, страницы открываются значительно быстрее.

Применение CSS «облегчает» документ. Он становится более читабельным, не нагруженным громоздкими многоуровневыми конструкциями тегов. Стили дают возможность полностью отказаться от табличной верстки.

Создание сайта на языке HTML

... гипертекстовой разметки HTML. Объект - веб-сайт. Предмет - создание сайта на языке HTML. Цель работы - изучение языка гипертекстовой разметки HTML и CSS. ... красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в ... всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ ...

Недостатки применения CSS стилей.

Во-первых, это неважная кроссбраузерная совместимость, проще говоря, различные браузеры немного по разному интерпретируют css. Эта проблема частично решается заданием Doctype.

Во-вторых, проблема оценки результата в процессе верстки web приложения. Связь кода и стилей не явная и для просмотра результатов вам потребуется запускать приложение на выполнение. Для HTML верстки есть визуализированные редакторы, позволяющие приблизительно оценить работу с применением css.

Разработчики со всего мира пользуются технологией CSS. Благодаря этой технологии в сети Интернет появляются красочные сайты, отвечающие всем требованиям современного сайтостроения. С применением каскадных таблиц стилей дизайнеры реализуют самые смелые свои идеи и задумки. Технология CSS стала настоящим переворотом в индустрии web-дизайна, новым словом в процессе проектирования web-ресурсов.

Описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением .css, а для связывания html-документа с этим файлом применяется тег <link>:

• <link href=» css/style.css» rel=»stylesheet» type=»text/css» />

Пример кода:

«css/style.css»

#midbar{padding-bottom:30px;

• width:655px;
• float:left;

margin-left:20px}

/*задание свойств слоя «Block1», входящего в слой «midbar»*/

#midbar .block1{margin-bottom:30px;

• width:655px;
• border: 10px solid #ddd;

border-radius: 15px}

/*аналогично для слоя «а» */

#midbar .block1 a{text-indent: 20px;

• font-family:Arial, Helvetica, sans-serif;
• font-size:16px;
• color:black;

text-decoration:none}

#midbar .block2 {width:655px;

• border: 10px solid #ddd;
• border-radius: 15px;}

#midbar .block2 tr img{ border: 5px solid #ddd;

border-radius: 15px}

#midbar .block2 table div{text-indent: 20px;

• text-align:justify;
• padding:10px;
• padding-bottom:20px;
• font-family:Arial, Helvetica, sans-serif;
• font-size:16px;
• color:black;
• text-decoration:none;

cursor: pointer}

/*чередование цвета фона для строк таблицы *>

• #midbar .block2 table tr:nth-child(odd){background-color:#ddd}

#midbar .block2 table tr:nth-child(even){background-color:white}

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

1.4 Создание навигационных панелей для сайта

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

Верстка и программирование сайта ресторана «Рояль»

... адаптации HTML кода для SEO-оптимизации. Для достижения вышеизложенных целей и развития направлений работы ресторана очевидна необходимость проведения исследования по рассматриваемой теме. Выбранная тема дипломной работы актуальна, поскольку представленный сайт ...

В настоящее время существует множество разновидностей панелей навигации по способу создания, по расположению, назначению, дизайну: панели (меню) горизонтальные и вертикальные; меню-путеводители — указывают положение страницы в иерархии страниц; панели, составленные из текста или кнопок; кнопки могут быть простыми или с эффектом Rollover (вид кнопки меняется при наведении курсора); панели могут иметь вид списка (в том числе раскрывающегося) или выпадающего кнопочного меню; при создании панелей навигации может использоваться или HTML, или HTML +CSS, или HTML +CSS + JavaScript; панели навигации, созданные с использованием Flash, имеют дополнительные визуальные эффекты.

Наличие простой в использованнии системы навигации очень важно для любого веб сайта.

Существуют следующие виды элементарных панелей навигации:

1. Одноуровневый список

1.1. Горизонтальный одноуровневый список

1.2. Вертикальный одноуровневый список

2. Двухуровневый список

2.1. Двухуровневый список с фиксацией

2.2. Динамический двухуровневый список

2.3. Развернутый двухуровневый список

2.4. Полуразвернутый двухуровневый список

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

Ниже приведён его код:

• <div id=»leftbar»>

• <div><img src=»images/marks.gif» /></div>

• <div>

• <ul>

• <a href=»Alfa Romeo.html «><li>Alfa Romeo</li></a>

• <a href=»Audi.html «><li>Audi</li></a>

• <a href=»BMW.html «><li>BMW</li></a>

• <a href=»Chevrolet.html «><li>Chevrolet</li></a>

• <a href=»Citroen.html «><li>Citroen</li></a>

• <a href=»Ford.html «><li>Ford</li></a>

• <a href=»Hyundai.html «><li>Hyundai</li></a>

• <a href=»Jaguar.html «><li>Jaguar</li></a>

• <a href=»Mercedes.html «><li>Mercedes</li></a>

• <a href=»Volvo.html «><li>Volvo</li></a>

• <a href=»VolksWagen.html «><li>VolksWagen</li></a>

• <a href=»Renault.html «><li>Renault</li></a>

• <a href=»Skoda.html «><li>Skoda</li></a>

• <a href=»vaz.html «><li>АвтоВАЗ(Lada)</li></a>

• </ul>

• </div>

• <br></br>

• <a href=»Сертификаты.docx»><cite>Наши сертификаты</cite></a>

• <div><img src=»images/Sertificat.gif» /></div>

• </div>

• Помимо этого, важным элементом для навигации является блок «header», нажатие на него позволяет из любой страницы сайта перейти на главную.

2. Мультимедийные компоненты сайта

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

Разработка и внедрение веб-сайта для информационного обеспечения ...

... интернет, обеспечив круглосуточный доступ и обслуживание клиентов. Целью данной курсовой работы является разработка и внедрение веб-сайта для информационного обеспечения ООО "Группа Альфа" г. Могилев. ... сайта; определить технологию разработки сайта; разработать веб-сайт компании ООО «Группа Альфа». При решении задачи применяются: гипертекстовый язык разметки HTML, PHP, технологии CSS и JavaScript ...

Графические:

SVG

PNG

WebCGM

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени).

Возможности языка.

Описание путей (англ. path).

Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом d тега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты).

Команды позволяют описывать фигуры, состоящие из отрезков прямых (L, H, V), кривых Безье (C, S, Q, T) и дуг (A).

Пример, описывающий звезду из 5 линий, содержит строку данных с командами M (англ. moveto — переместить) и L (англ. lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.

Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).

Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.

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

Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL анимацией это дает очень широкие возможности для разработчиков веб-графики.

PNG (англ. portable network graphics, сокращение произносится по-английски /p??/) — растровый формат хранения графической информации, использующий сжатие без потерь по алгоритму Deflate. PNG был создан как свободный формат для замены GIF.

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

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

Средства создания Web-сайтов

... удержании внимания пользователей, путешествующих по безбрежным просторам Web. Предмет исследования- web-технологии. Объект - среды и языки разработки web-сайтов. Цель работы - рассмотреть возможности практического ... графическими изображениями и видео фрагментами, которые не несут смысловой нагрузки, автоматически влечет за собой уменьшение количества потенциальных посетителей web-сайта, так ...

Аудио и Видео

SMIL

Timed Text

HTML

Web Real Time Communication

Audio

Web and TV

SMIL (рекомендованное произношение: [sma?l] «смайл») (The Synchronized Multimedia Integration Language) — язык разметки для создания интерактивных мультимедийных презентаций. Является рекомендацией консорциума Всемирной паутины.

SMIL описывает разметку для временной синхронизации, размещения, анимаций, визуальных преобразований и многих других аспектов. Одной из областей применения SMIL является создание слайдшоу для презентаций. Также технология SMIL позволяет демонстрировать многие типы файлов, такие как текст, видео и аудио. SMIL похож на HTML тем, что выполнен на основе XML и позволяет включать в себя ссылки на другие презентации SMIL, а также кнопки, такие как «Старт», «Стоп» и др.

Timed Text — язык на основе XML, описывающий представление текста, синхронизированного с видео или аудио.

Типичные применения Timed Text — субтитры на других языках или для людей, не владеющих аудио-устройствами, для людей с ограниченным слухом, караоке, бегущие строки, и т. п.

Timed Text для фильмов в формате MPEG-4 и для мобильных телефонов описан в MPEG-4 Part 17 и в RFC 3839.

Проблема разработки текста с привязкой по времени возникла во время разработки спецификации SMIL 2.0. На данный момент существует множество несовместимых форматов для субтитров. Это означает, что во время создания SMIL-презентации текстовая составляющая оказывается привязана к определенной среде воспроизведения. Кроме того, сообщество по доступности опирается на субтитры для создания аудиовизуального контента, доступного людям с ограниченным слухом. Отсутствие переносимого формата делает и так недешёвое создание субтитров еще более дорогим.

2.2 Графическое оформление web-страницы

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

1.Цветовое оформление фона сайта в виде градиента приятно для бокового зрения и не отвлекает внимание от центральной части сайта.

2.Сайт выдержан в одной цветовой гамме, что не нагружает пользователя.

3.Нет яркого контраста между текстом и фоном (исключения- информация об акциях).

4. Все изображения соответствуют тематике.

5.Все страницы выполнены в едином стиле.

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

7.Основные пункты навигационного меню были собраны в единый блок и оформлены по стандартной технологии.

8.Многие переходы на страницы оформлены интуитивно понятному принципу (щелчок по картинке или тексту позволяет перейти по соответствующей ссылке).

9.На сайте реализована плавная анимация, для возврата к верхней части слоя «main».

10. На сайте представлена анимированная реклама продукции.

Оформление графики сайта — достаточно увлекательный и интересный процесс.

Разработка сайта туристического агентства «Интер-Транстур»

... прорисовка страницы. выбор графического оформления страниц - необходимо разработать и оптимизировать изображения, созданные для сайта. разработка сайта - создание и заполнение страниц. - тестирование - для обеспечения работоспособности ... Microsoft FrontPage Для использования Microsoft FrontPage не требуется знание языка HTML. В ходе редактирования страниц как в текстовом редакторе - при вводе ...

Оптимизация графики для web

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

В Интернете размещаются изображения трёх основных графических форматов:

GIF

Особенности: Поддерживает палитру в 256 цветов, поддерживает 1 уровень прозрачности (100%)

Тип сжатия: без потерь.

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

PNG

Особенности: Поддерживает палитру в 256 цветов, поддерживает различные уровни прозрачности (не во всех браузерах корректно отображается)

Тип сжатия: без потерь

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

JPEG

Особенности: поддерживает палитру более 16 млн. цветов. Не поддерживает прозрачность.

Тип сжатия: с потерей качества

Применение: полноцветные фотографические изображения.

В своём сайте я использовал изображения в формате gif, в том числе анимированные. Этот формат был выбран, поскольку при таком методе сжатия не происходит потери качества картинки, а так же потому, что он корректно отображается во всех браузерах.

В моём сайте изображения применялись:

для иллюстрации к предлагаемым автомобилям

для оформлении заголовков

для информирования пользователя о текущих акциях

и для прочих целей.

3. Web-сценарии сайта на языке JavaScript

3.1 Назначение языка JavaScript

JavaScript — предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript — фирмой Netscape Communication Corporation. Первоначальное название — LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.

Важная особенность JavaScript — объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами).

JavaScript может:

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

Реагировать на события: скрипт может ждать, когда что-нибудь случится (клик мыши, окончание загрузки страницы) и реагировать на это выполнением функции.

Выполнять запросы к серверу и загружать данные без перезагрузки страницы. Это иногда называют «AJAX».

» Разработка веб-сайта для школы»

... Обзор и сравнительный анализ HTML-редакторов 22 1.6 Оценка экономической целесообразности использования HTML-редакторов 22 2 Проектирование web-сайта образовательного учреждения 27 2.1 Методика разработки сайта школы 31 2.2 Разработка структуры сайта ...

Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.

Программы на JavaScript называются скриптами, их можно подключить напрямую к html-файлу:

• <script type=»text/javascript» language=»JavaScript» src=»mer.js» ></script>

3.2 Разработка web-сценариев для сайта

В данной работе с помощью JavaScript реализована работа кнопки возврата к верхней части слоя «main»(рис.4)

Рис. 3. Кнопка «наверх».

Соответствующий код:

• <SCRIPT language=javascript type=text/javascript>

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$(‘#toTop’).fadeIn();}

else {

$(‘#toTop’).fadeOut();}

});

• $(‘#toTop’).click(function() {

$(‘body,html’).animate({scrollTop:0},800);

• });});

• Помимо этого с помощью JavaScript реализовано появление окна с предложением пользователю узнать о текущих акциях в салоне, с возможностью отказаться от предложения(рис.4)

Рис. 4. Текущие акции в салоне.

Так же JavaScript используется для оповещения посетителя сайта о проблемах(рис.5).

Рис. 5. Оповещение JavaScript.

4. Продвижение сайта

4.1 Способы продвижения сайтов

Для абсолютного большинства сайтов продвижение должно начинаться с поисковой оптимизации, или seo. Её целью является повышение рейтинга ресурса у поисковиковых систем.

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

• аудит сайта на наличие ошибок, санкций от поисковых систем и их устранение;
• подбор ключевых слов (запросов, по которым пользователи будут приходить на сайт) и распределение их по страницам;
• работу над кодом сайта;
• корректировку тегов title, description, keywords, alt, h1-h6;

• создание карты сайта;
• формирование файла robots.txt;
• проверку уникальности контента;
• оптимизацию контента сайта — написание и размещение уникальных статей в соответствии с seo-требованиями;
• увеличение количества страниц сайта, создание новых разделов;
• внутреннюю перелинковку между страницами;
• регистрацию сайта в каталогах Яндекс, DMOZ и др.;
• наращивание внешней ссылочной массы;
• расширение списка ключевых запросов;
• и другие методы.

Приступить к продвижению можно как на стадии разработки сайта, так и после её завершения.

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