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

Создание сайта-визитки салона красоты

Содержание:

Введение

Темой данной курсовой работы является создание сайта-визитки салона красоты «Феерия»

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

1. Теоретические сведения

Для создания веб-страниц мне понадобятся такие инструментальные средства:

текстовый редактор HTML;

графический редактор, для разработки собственной графики:

Adobe Photoshop; ImageReady;.

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

специальные, более сложные, инструментальные средства, веб-сервер поддерживает формы и выполняет сценарии JavaScript.

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

Веб-страница хранится в файле формата HTML с расширением html. Этот файл содержит отображаемый текст и теги HTML, которые задают Форматирование страницы, а также размещение на ней рисунков и гиперссылок.

Главная страница веб-узла имеет имя index.html, поскольку это - применяемое по умолчанию имя файла, которое ищут браузеры. Например, если пользователь введет в браузере адрес http://www.leonardo-studio.narod.ru, то он увидит страницу данного веб-сайта, хранящуюся в файле index.htm.

Каждый рисунок, который отображается на веб-странице и служит ее фоном, хранится в отдельном файле. Это файл с расширением jpg (а может быть и gif, jpeg, png, bmp). Местоположение изображения на странице задается с помощью специального тега HTML.

2. Структура сайта

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

Схема сайта изображена на рис. 1.

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

Также с главной страницы можно перейти в разделы Маникюр, Парикмахерские услуги, Солярий, Косметические услуги, Корректировка бровей и Оставить отзыв. Страница Солярий позволяет перейти нам страницу Правила посещения солярия. Также со страниц Маникюр, Парикмахерские услуги, Солярий, Косметические услуги и Корректировка бровей можно перейти в раздел Цены или вернуться на главную страницу. Данные страницы являются подчиненными и каждая из них представляет собой отдельную веб-страницу.

Структура сайта

О Нас

Главная

Оставить отзыв

маникюр

Косм. услуги

Корр. бровей

солярий

Парикмах. Усл

цены

Правила посещения солярия

Рис. 1

3. Краткое содержание страниц салон красоты сайт верстка

3.1 Страница «Главная»

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

Средний фрейм – это основное содержание страницы, в котором находятся описания предоставляемых услуг нашей компанией.

Левый фрейм представляет собой список ссылок, который не меняется при переходе по разделам.

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

Изображение страницы показано на рис. 2

1. Страницы «Маникюр», «Парикмахерские услуги», «Солярий», «Косметические услуги», «Корректировка бровей» и «О Нас» так же, как и «Главная» состоят из трех фреймов. Неизменные фреймы с бегущей строкой и меню, а также фрейм с текстом, но уже другого содержания.
2. Страница «Оставить отзыв», также состоит из трех фреймов. Средний фрейм выполнен с использованием HTML-кодов и предназначен для сбора информации о пожеланиях клиентов.

Избранные страницы сайта
1. Страница «Главная»

<head>

.style2 {

font-family: "Times New Roman", Times, serif;

font-size: large;

letter-spacing: normal;

}

.style3 {

background-color: #FFFFFF;

}

.style4 {

margin-bottom: 0px;

}

.style5 {

background-color: #FF5050;

}

</style>

</head>

<p class="style2"><span class="style5">Каждую девушку волнуют аспекты ее фигуры,

</span><span class="style3">

<a href="kosmetik.htm"><span class="style5">красоты лица</span></a></span><span class="style5"> и </span><span class="style3"> <a href="solarii.htm">

<span class="style5">тела</span></a><span class="style5">. В наше время актуально иметь ухоженные

</span>

<a href="прически.htm"><span class="style5">волосы</span></a><span class="style5">, </span> <a href="маникюр.htm">

<span class="style5">руки и ноги</span></a><span class="style5">.

Сейчас это не только потребность, но и визитная карточка каждой девушки. Наши

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

</span>

<a href="kosmetik.htm"><span class="style5">полный образ!</span></a></span></p>

</body>

</html>

Рис. 2 Страница «Главная»

3.2 Страница «Маникюр»

<head>

.style1 {

font-family: "Times New Roman", Times, serif;

font-size: 14pt;

}

.style2 {

font-family: "Times New Roman", Times, serif;

font-size: 14pt;

text-align: right;

}

</style>

<!--

function FP_swapImg() {//v1.0

var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;

n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;

elm.$src=elm.src; elm.src=args[n+1]; } }

}

function FP_preloadImgs() {//v1.0

var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();

for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }

}

function FP_getObjectByID(id,o) {//v1.0

var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);

else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;

if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)

for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }

f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;

for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }

return null;

}

// -->

</script>

</head>

<a name="Женщины">Женщины</a> всегда стремились быть привлекательными, эффектными и элегантными. Много времени уделяют заботе о волосах, фигуре, коже. Иногда забывают, что идеальный образ не выглядит завершенным, если руки не в порядке. Как гласит известная пословица "Красота требует жертв", а женская ухоженность должна быть до кончиков ногтей.</p>

Слово<strong style="margin: 0px; padding: 0px;"><span class="Apple-converted-space"> </span>маникюр</strong> в

переводе с латинского -  "уход за руками" (manus - рука и cura - уход) - и являет собой косметическую процедуру по обработке кожи и ногтей на пальцах рук.

Маникюр можно выполнять как в косметических салонах красоты так и в домашних условиях.</p>

<strong style="margin: 0px; padding: 0px;">Цель маникюра:</strong></p>

<li style="margin: 5px 0px; padding: 0px;">формирование ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">предотвращение трещин, расслоений ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">массаж рук;</li>

<li style="margin: 5px 0px; padding: 0px;">улучшение и увеличение циркуляции крови в пальцах рук;</li>

<li style="margin: 5px 0px; padding: 0px;">препятствие образованию складок на руках;</li>

<li style="margin: 5px 0px; padding: 0px;"><a href="#гель">украшение ногтей лаком и стразами</a>;</li>

<li style="margin: 5px 0px; padding: 0px;">наращивание ногтей.</li>

</ul>

<strong style="margin: 0px; padding: 0px;">Виды маникюра:</strong></p>

<li style="margin: 5px 0px; padding: 0px;">аппаратный;</li>

<li style="margin: 5px 0px; padding: 0px;">обрезной;</li>

<li style="margin: 5px 0px; padding: 0px;">европейский;</li>

<li style="margin: 5px 0px; padding: 0px;">японский;</li>

<li style="margin: 5px 0px; padding: 0px;"><a href="#Франция">французский</a>;</li>

<li style="margin: 5px 0px; padding: 0px;">американский;</li>

<li style="margin: 5px 0px; padding: 0px;">испанский;</li>

<li style="margin: 5px 0px; padding: 0px;">арт-френч;</li>

<li style="margin: 5px 0px; padding: 0px;">базисный;</li>

<li style="margin: 5px 0px; padding: 0px;">delux;</li>

<li style="margin: 5px 0px; padding: 0px;">мацерация (мокрый);</li>

<li style="margin: 5px 0px; padding: 0px;">горячий;</li>

<li style="margin: 5px 0px; padding: 0px;">пирсинг;</li>

<li style="margin: 5px 0px; padding: 0px;">детский;</li>

<li style="margin: 5px 0px; padding: 0px;">мужской;</li>

<li style="margin: 5px 0px; padding: 0px;">свадебный;</li>

<li style="margin: 5px 0px; padding: 0px;">гелевый;</li>

<li style="margin: 5px 0px; padding: 0px;">бизнес;</li>

<li style="margin: 5px 0px; padding: 0px;">аквариумный;</li>

<li style="margin: 5px 0px; padding: 0px;">гигиенический;</li>

<li style="margin: 5px 0px; padding: 0px;">классический.</li>

</ul>

<strong style="margin: 0px; padding: 0px;">Инструменты для маникюра:</strong></p>

<li style="margin: 5px 0px; padding: 0px;">чашка теплой воды и мягкое мыло;</li>

<li style="margin: 5px 0px; padding: 0px;">кусачки для ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">нож и кусачки для кутикулы;</li>

<li style="margin: 5px 0px; padding: 0px;">пилочка для кутикулы;</li>

<li style="margin: 5px 0px; padding: 0px;">пилочка для ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">ножницы;</li>

<li style="margin: 5px 0px; padding: 0px;">кисти для ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">различные формы ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">бумажные трафареты;</li>

<li style="margin: 5px 0px; padding: 0px;">френч-типсы;</li>

<li style="margin: 5px 0px; padding: 0px;">диски для стемпинг неил арт;</li>

<li style="margin: 5px 0px; padding: 0px;">пушер;</li>

<li style="margin: 5px 0px; padding: 0px;">триммер;</li>

<li style="margin: 5px 0px; padding: 0px;">косметическая ложечка.</li>

</ul>

<strong style="margin: 0px; padding: 0px;">Средства для идеального маникюра:</strong></p>

<li style="margin: 5px 0px; padding: 0px;">масла и сливки для удаления

кутикулы;</li>

<li style="margin: 5px 0px; padding: 0px;">массажные лосьоны;</li>

<li style="margin: 5px 0px; padding: 0px;">лак для ногтей;</li>

<li style="margin: 5px 0px; padding: 0px;">герметик;</li>

<li style="margin: 5px 0px; padding: 0px;">жидкость и салфетки для снятия лака;</li>

<li style="margin: 5px 0px; padding: 0px;">очистительные спреи;</li>

<li style="margin: 5px 0px; padding: 0px;">ватные шарики;</li>

<li style="margin: 5px 0px; padding: 0px;">полотенца для рук.</li>

</ul>

Хороший маникюр - это отлична работа мастера с вашими руками. Ногти как и другие части тела требуют ежедневного ухода, ведь в нынешнее время любая женщина должна быть на высоте всегда и во всем.</p>

 </p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<a href="#Женщины">ВВЕРХ</a>

</body>

</html>

Рис. 3 Страница «Маникюр»

3.3 Страница «Оставить отзыв»

<head>

</head>

<body>

<option>мужской</option>

<option>женский</option>

</select></span></p>

<p><span lang="ru">вид услуги <select name="Select2" style="width: 266px">

<option>маникюр</option>

<option>педикюр</option>

<option>косметические</option>

<option>солярий</option>

<option>парикмахерские</option>

</select></span></p>

<p><span lang="ru">понравилось <input name="Checkbox1" type="checkbox" />      

не понравилось <input name="Checkbox2" type="checkbox" /></span></p>

<p><span lang="ru">Комментарии:<form method="post">

</span></p>

</body>

</html>

Рис. 4 Страница «Оставить отзыв»

3.4 Страница «О Нас»

<head>

<title>Без названия 1</title>

</head>

<body>

<p><span lang="ru">Вы можете найти нас по адресу: Интернациональная 152, напротив ЦУМа</span></p>

<p><span lang="ru">Записаться на процедуры вы можете по тел.: 333-333, 555-555</span></p>

<p><span lang="ru">Вы можете написать нам письмо </span>E-mail:

<a href="mailto:feeria@bk.ru">feeria@bk.ru</a></p>

<p><span lang="ru">Будем рады видеть Вас в нашем салоне!!!</span></p>

</body>

</html>

Рис. 5 Страница «О Нас»

Заключение

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

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

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

Библиографический список

Алленова, Н. Учебник по Html [Электронный ресурс] : Как создать свой сайт. – Режим доступа: http://www.postroika.ru/. – Загл. с экрана.
Персональный компьютер [Электронный ресурс] : Устройство персонального компьютера, эффективная компьютерная справка. – Режим доступа: http://www.spravkapc.ru/. – Загл. с экрана.
Советов, Б. Я. Информационные технологии [Текст] : учеб. для вузов / Б. Я. Советов – М.: Высшая школа, 2005 – 260 с.
Соколов, С. А. HTML и CSS в примерах, типовых решениях и задачах. Профессиональная работа [Электронный ресурс] / С. А. Соколов. — М.: Вильямс, 2007. — 416 с. – Режим доступа: http://ru.wikipedia.org/wiki/HTML. – Загл с экрана.
Википедия http://ru.wikipedia.org/wiki/SharePoint

Приложение

Спецификация тегов (дескрипторов)

Таблица 1.Теги

Тег	Описание	Атрибут	Описание атрибута
<html></html>	открывает документ
<head></head>	заголовок документа
<frameset></frameset>	определяет макет основного окна в виде прямоугольных пространств	Rows	по горизонтали
		Cols	по вертикали
		Border	размер границы
<frame></frame>	определяет содержимое и вид одного фрейма	Noresize	запрет менять размеры фреймов
		Scrolling	линейка прокрутки
		Name	имя фрейма
		Marginwidth	ширина левого и правого полей фрейма
		Marginheight	ширина верхнего и нижнего полей фрейма
<body></body>	Тело документа	Bgcolor	фоновый цвет документа
		Link	цвет ссылки
		Vlink	цвет посещенной ссылки
		Alink	цвет активной (нажатой) ссылки
<font></font>	Задает характеристику шрифта	color	цвет текста
		face	стиль шрифта
		size	размер шрифта
<center></center>	центрирование текста и объектов
<hX>	заголовки (h1, h2, h3, h4, h5, h6)
<p></p>	параграф	Align	выравнивание текста в параграфе
<br>	принудительный перевод строки
<b></b>	жирный шрифт
<u></u>	подчеркивание текста
<a></a>	ссылка	Href	путь к документу
		Target	открывает ссылку в новом окне
		Name	имя ссылки
<table></table>	таблица	Cellspacing	расстояние между ячейками
<table></table>	таблица	Cellpadding	расстояние внутри ячеек
<tr></tr>	строка таблицы
<td></td>	ячейка таблицы	Valign	вертикальное выравнивание внутри ячейки
		Width	ширина ячейки
		Height	высота ячейки
<ul></ul>	маркированный список
<ol></ol>	нумерованный список
<li></li>	ячейка списка	Type	тип маркера, цифры
<img src>	изображение	Align	выравнивание изображения
		Vspace	вертикальное пространство между изображением и текстом
		Hspace	горизонтальное пространство между изображением и текстом

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