РАЗРАБОТКА САЙТА-ВИЗИТКИ

Федотов В.А.

УДК 004

Федотов В.А. студент 4 курса факультет «Информационные системы

и технологии»

Северный Арктический Федеральный Университет Высшая школа информационных технологий и

автоматизированных систем Россия, г. Архангельск

РАЗРАБОТКА САЙТА-ВИЗИТКИ

Аннотация: В статье описывается разработка сайта-визитки с использованием HTML, CSS и JavaScript.

Ключевые слова: Разработка, сайт-визитка, HTML, CSS, JavaScript.

Fedotov V. A. student 4 year

faculty "Information Systems and Technology" Northern Arctic Federal University Graduate School of Information Technology and Automated Systems Russia, Arkhangelsk

DEVELOPMENT OF A BUSINESS CARD SITE

Annotation: The article describes the development of a business card site using HTML, CSS and JavaScript.

Keywords: Development, business card site, HTML, CSS, JavaScript.

1 РАЗРАБОТКА САЙТА-ВИЗИТКИ

1.1 Постановка задач

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

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

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

листается вниз вместе с контентом. Меню должно содержать следующие пункты:

- главная;

- страны;

- топ 3 стран;

- о нас;

- галерея;

- контакты.

1.2 Выбор программного обеспечения и языков для разработки

Для разработки сайта будем использовать текстовый редактор «Brackets». «Brackets» - бесплатный редактор с открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность. Также при одновременном редактировании, например, html и css файлов нет необходимости постоянно переключаться между ними. Их можно установить вместе в окне программы. При внесении изменений в редактируемые html и css файлы, благодаря life preview можно в реальном времени видеть все изменения без предварительного сохранения.

Для разработки сайта будем использовать HTML, CSS и JavaScript.

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

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

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

1.3 Выполнение задач по разработке сайта

При загрузке сайта отображается стартовая страница, представленная на рисунке 1.

Рисунок 1 - Стартовая страница сайта

Программный код верхней панели «Меню» представлен в листинге 1. Код из .css файла представлен в приложении А.

Листинг 1 - Код верхней панели «Меню»_

id="colorText">

href="#main" class="scrolly">Главная</a></li> <li><a href="#tur" class="scrolly">Страны</a></li> <li><a href="#top3" class="scrolly">Топ 3 стран</a></li> <li><a href="#opisanie" class="scrolly">О нас</a></li>

href="#gallery" class = "scrolly">Галерея</a></li> <li><a href="#contact" class="scrolly">Контакты</a></li> </ul> </nav>

В листинге 1 показано, что все ссылки имеют свои «якоря» на странице. А также используя класс «scroПy» осуществляется плавное пролистывание до «якоря». При нажатии на «Страны» страница плавно пролистает вниз и отобразятся страны, с которыми работает турагентство, в соответствии с рисунком 2.

Г'п>(« Спои Пг.сгрси 0 •»: Гкг«£м Кмтилн

Страны, доступные для путешествий

Рисунок 2 - Страны

Показ стран реализован через адаптивное слайд-шоу или «карусель». При наведении на стрелочки слева или справа страны будут листаться в выбранную сторону. Системный код представлен в листинге 2. Код из . обб файла представлен в приложении Б.

Листинг 2 - Системный код слайд-шоу_

<section class="carousel"> ^^ class = "reel"> <article>

^ href="#"class="image featured"><img src="images/Turkey.jpg

"alt=""/></a>

<h3><a href="#">Турция</a></h3> </header>

<p>Турция—государство, расположенное главным образом в

Передней Азии и в Южной Европе. <^> <header>

^ href="https://vk.com/id135639885"class="button"><strong> Написать нам</strong></a> </header> </article> <article>

<a href="#"class="image featured"><img src="images/Egypt.jpg"

alt=""/></a>

<h3><a href="#">Египет</a></h3> </header>

<p>Египет—государство, расположенное в Северной Африке и на

Синайском полуострове Азии.<^> <header>

<ahref="https://vk.com/id135639885"class="button"><strong> Написать нам</strong></a> </header> </article> </div> </section>

В листинге 2 класс «carousel» необходим для прокрутки стран. Код класса «carousel» представлен в приложении В.

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

При нажатии на «Топ 3 стран», страница плавно пролистает вниз и отобразятся топ 3 страны для туристов, в соответствии с рисунком 3.

Рисунок 3 - Топ 3 стран Системный код «Топ 3 стран для туристов» представлен в листинге 3.

Листинг 3 - «Топ 3 стран»

<^Ь2>Топ 3 стран для туристов</h2>

^>Список стран по туристическим посещениям (World Tourism rankings) составляется Всемирной организацией по туризму (UNWTO) в составе публикации «Барометр мирового туризма» (World Tourism Barometer), выпускаемой три раза в год. </p> </header> <div class="row">

<article class="col-4col-12-mobilespecial"> <a

href="#"class="imagefeatured"><imgsrc="images/France.jpg"

alt=""/></a>

<h3><a href="#">1место . Франция<^></^Ь3> </header>

<p>Франция—государство, включающее основную территорию в Западной Европе.<^> </article>

<article class="col-4col-12-mobilespecial"> <a href="#"class="image featured"><img

src="images/Spain.jpg" alt=""/></a>

<h3><a href="#">2место. Испания</a></h3> </header>

<p>Испания—суверенное государство на юго-западе Европы и частично в Африке. </p> </article>

<articleclass="col-4col-12-mobilespecial"> <a href="#"class="image featured"><img

src="images/Turkey.jpg" alt=""/></a>

<h3><ahref="#">3место.Турция</a></h3> </header>

<p>Турция—государство, расположенное главным образом в Передней Азии и в Южной Европе. </p> </article> </div> </section> </div> </section>

При нажатии на «О нас», страница плавно пролистает вниз и отобразится информация о турагентстве «МалинаТур», в соответствии с рисунком 4.

Рисунок 4 - Информация о турагентстве

При нажатии на «Галерея», страница плавно пролистает вниз и отобразятся фотографии в блоках, в соответствии с рисунком 5.

"чих- :грм* "опО<-з»м С «а: Ксмп-гтъ

Рисунок 5 - Галерея Системный код «Галереи» представлен в листинге 4.

Листинг 4 - «Галерея»

<a href= "#" class= /></a> "image fit"><img src= "images/1. jpg" alt=

</div>

<a href= "#" class= /></a> "image fit"><img src= "images/2. jpg" alt=

</div>

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

<a href= "#" class= /></a> "image fit"><img src= "images/3 jpg" alt= ""

</div>

<a href= "#" class= /></a> "image fit"><img src= "images/4. jpg" alt=

</div>

<a href= "#" class= /></a> "image fit"><img src= "images/5. jpg" alt=

</div>

<a href= "#" class= /></a> "image fit"><img src= "images/6. jpg" alt=

</div>

</section>

При нажатии на «Контакты», страница плавно пролистает вниз и отобразятся контакты турагентства, в соответствии с рисунком 6.

Рисунок 6 - Контакты

При нажатии на значки «Вк» и «Инстраграм» открываются реальные страницы турагентства. Системный код «Контакты» представлен в листинге 5.

Листинг 5 - «Контакты»_

<h3>Для связи с нами:</h3> </header>

^>Наш офис: г. Северодвинск, ул. Комсомольская 20/38 офис. 4<br/>

Моб. тел: 8-960-006-07-10 или 8-900-913-93-99<br/> Мы рады Вас видеть в нашем офисе:^^> понедельник-пятница 11:00-19:0 0<br/> суббота, воскресенье 11:00-16:00</p> <ul class="icons">

<li><a href="https://vk.com/club8 92 4 8 02" class="icon brands fa-vk"><span class="label">Twitter</span></a></li> <li><a href="https://www.instagram.com/malinatour2 9/" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>

</ul> </section>

РАЗРАБОТКА САЙТА-ВИЗИТКИ Текст научной статьи по специальности «Компьютерные и информационные науки»

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Федотов В.А.

Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Федотов В.А.

DEVELOPMENT OF A BUSINESS CARD SITE

Текст научной работы на тему «РАЗРАБОТКА САЙТА-ВИЗИТКИ»