Разработка Web-сайта для салона автомобилей

Тип работы: Реферат
Бесплатно: Антиплагиат
Объем: 23 страниц
В избранное:

Министерства образование Республики Казахстана
Жезказганский университет имени О.А.Байконурова АО
Кафедра Информатика и математика физика

на тему
Разработка Web-сайта для салона автомобилей

Подготовлен: Мирполат М
Группы: Инф 17-1
Принято: Балапанова Г.М

Жезказган 2020

Содержание

Введение
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) — специальные символы. А именно знак рубля, код которого в Юникоде: ք.
На рисунке 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=" cssstyle.css" rel="stylesheet" type="textcss"
Пример кода:
"cssstyle.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"
divimg src="imagesmarks.gif" div
div
ul
a href="Alfa Romeo.html"liAlfa Romeolia
a href="Audi.html"liAudilia
a href="BMW.html"liBMWlia
a href="Chevrolet.html"liChevrolet lia
a href="Citroen.html"liCitroenli a
a href="Ford.html"liFordlia
a href="Hyundai.html"liHyundaili a
a href="Jaguar.html"liJaguarli a
a href="Mercedes.html"liMercedes lia
a href="Volvo.html"liVolvolia
a href="VolksWagen.html"liVolksWag enlia
a href="Renault.html"liRenaultli a
a href="Skoda.html"liSkodalia
a href="vaz.html"liАвтоВАЗ(Lada) lia
ul
div
brbr
a href="Сертификаты.docx"citeНаши сертификатыcitea
divimg src="imagesSertificat.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 изначально ... продолжение

Вы можете абсолютно на бесплатной основе полностью просмотреть эту работу через наше приложение.