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

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное автономное образовательное учреждение

высшего профессионального образования

«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»

КАФЕДРА ИНФОРМАЦИОННО-СЕТЕВЫХ ТЕХНОЛОГИЙ

КУРСОВАЯ РАБОТА

по дисциплине: Мультимедиа в Web-технологиях

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

Работу выполнил

Студент гр.5430м Т.Г. Токарев

Руководитель

доцент, к.т.н. О.И. Красильникова

Санкт-Петербург

2014



Содержание

Введение

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

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

1.2 Макет сайта

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

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

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

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

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

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

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

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

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

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

4.2 Использованные приемы продвижения сайта

Заключение

Список использованной литературы



Введение

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

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

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

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

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

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

общее назначение сайта - предоставление общей информации пользователю;

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

тип и характеристика дизайна - понятный, привлекательный дизайн;

система навигации - максимально удобная и простая система навигации;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

Стартовой является главная страница сайта («index.html»). Структура сайта не однородна: не все страницы равнозначны. На рис. 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-управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров

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 «облегчает» документ. Он становится более читабельным, не нагруженным громоздкими многоуровневыми конструкциями тегов. Стили дают возможность полностью отказаться от табличной верстки.

Недостатки применения 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 Создание навигационных панелей для сайта

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

В настоящее время существует множество разновидностей панелей навигации по способу создания, по расположению, назначению, дизайну: панели (меню) горизонтальные и вертикальные; меню-путеводители - указывают положение страницы в иерархии страниц; панели, составленные из текста или кнопок; кнопки могут быть простыми или с эффектом 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 Обзор компонентов мультимедиа, которые в настоящее время используются в сайтах и рекомендуются Консорциумом Всемирной паутины

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

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 года и уже поддерживаемый в различных приложениях, однако пока так и не ставший общепринятым.

Аудио и Видео

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. На сайте представлена анимированная реклама продукции.

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

Оптимизация графики для 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".

Устанавливать и считывать 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 и др.;

наращивание внешней ссылочной массы;

расширение списка ключевых запросов;

и другие методы.

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

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

Поэтому стоит уделить внимание таким факторам как:

Удобство работы с сайтом для пользователя (юзабилити): навигация должна быть максимально понятной; содержание страниц четко отвечать на запрос и пр. К примеру, если пользовать вводит в поиск: «купить телевизор», то он должен попасть на страницу с моделями и ценами различных телевизоров. А если человек ищет способы продвижения бизнеса в офлайне, то его, скорее всего, интересует статьи с советами, хотя это не значит, что вы не можете предложить ему свои услуги.

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

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

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

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

Также одним из методов продвижения ресурса в интернете является создание и ведение рассылки, или e-mail маркетинг. Позволяет удерживать постоянных клиентов и привлекать новых. В сравнении с другими способами продвижения, не требует значительных материальных затрат, но при этом не может выступать как единственный и основной метод раскрутки сайта в сети.

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

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

4.2 Использованные приемы продвижения сайта

Теперь кратко о том какие способы были использованы мной

Метатеги - очень важная составляющая html-документа, позволяющая задать такие параметры просмотра документа, как: кодовую страницу языка просмотра документа, параметры кэширования документа, ключевые слова, по которым страничку будут искать поисковые системы интернета и т.д.

Их роль не заметна при отображении странички. Это лишь команды для web-сервера или браузера.

Все метатеги не несут визуальной информации и должны располагаться в секции <head></head> документа.

Пример кода: "index.html"

<META NAME="description" content="Салон по пракату автомобилей Golden Pine tree,"> (отвечает за описание сайта, которое будет выводиться при ответе на поисковый запрос)

<META NAME="keywords" http-equiv="keywords" content="прокат авто, Golden Pine tree, прокат в Санкт-Петербурге, автомобили">

(определяет ключевые слова при поиске)

<META NAME="Document-state" CONTENT="Static"> (используется, если документ не изменяется часто)

<META NAME="RESOURCE-TYPE" CONTENT="DOCUMENT"> (тип ресурса - обычный html-документ)

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

Рис. 6. Ссылка размещённая в социальной сети Вконтакте.

Для продвижения моего сайта можно использовать рекламные сети, поскольку на сайте много свободного места(справа и слева от основного контекста) для размещения рекламы.

Сайт имеет привлекательный дизайн и интуитивный интерфейс. Контент сайта информативен и предоставляет всю нужную информацию посетителю.



Заключение

Был разработан и написан сайт(рис.7) для салона по прокату автомобилей «Golden Pine tree» Сайт успешно функционирует. Дизайн сайта прост, что позволяет очень быстро найти пользователю всю необходимую информацию; страницы выдержана в одном стиле и не выбивается из общего стиля; цветовая гамма и шрифты не напрягают глаза и удобны для чтения пользователем..

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

Так на сайт был помещен файл с нашими сертификатами, с которым может ознакомиться любой пользователь.

Были использованы многие структуры для создания сайта на языке html, прописан css файл и javascript.

Рис.7. Вид стартовой страницы сайта.



Список использованной литературы

1. Дж. Гарретт Веб-дизайн. Элементы опыта взаимодействия. - М.: Символ-Плюс, 2008.- 192с.

2. Стив Круг Веб - дизайн. Не заставляйте меня думать. - С.Пб.: ИМВО, 2005. - 52с.

3. Н. В. Евдокимов Основы контентной оптимизации. - М.: Вильямс, 2007. - 30с.

4. В. Мержевич HTML и CSS на примерах. - С.Пб.: БХВ-Петербург, 2005. - 16с.

5. А. Матросов, А. Сергеев, М. Чаунин HTML 4.0. - С.Пб.: БХВ-Петербург, 2003. - 114с.

6. С. Михайлов, Л. Кулеев Основы дизайна. - К.: Новое знание, 1999. - 106с.

7. http://css.manual.ru/

8. http://htmlbook.ru/

9. http://habrahabr.ru/

10. https://ru.wikipedia.org/

Размещено на Allbest.ru

...