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

Разработка сайта стоматологической клиники «Медклик Клуб»

Содержание:

Введение

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

В Интернете свое место нашло народное искусство, так как это наше материальное и духовное богатство.

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

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

Предмет – язык гипертекстовой разметки HTML как средство создания сайта.

Цель –Задание №8 – Разработка сайта стоматологической клиники «Медклик Клуб»с использованием языка гипертекстовой разметки HTML.

Задачи:

Проанализировать существующие языки для написания сайта.
Рассмотреть функциональные возможности HTML.
Рассмотреть источники по теме.
Разработать макет сайта.
Наполнить сайт информацией по теме.
Разработать руководство пользователя.

При написании курсового проекта использовались метод теоретического исследования (анализ) и эмпирический метод (изучение источников литературы).

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

Глава 1 Анализ программного обеспечения по разработке сайта

Обзор существующих языков создания сайта

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

FrontPage - входит в состав пакета приложений Microsoft Office.

Данное приложение при разработке страниц веб-узла пользуется html-движком Trident, который лежит в основе браузера Internet Explorer. В браузерах, использующих другие движки, например Gecko, страницы, созданные с помощью FrontPage, могут отображаться по-другому. Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени .

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL .

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

Web Page Maker – это очень простой инструмент для создания WEB – страниц. С его помощью можно создать свою страничку даже не обладая никакими знаниями HTML. Просто перетаскивая мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы с лёгкостью можно передвигать объекты по всей странице. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java - скрипты, таблицы, формы и т. д. В программу встроен FTP-менеджер, с помощью которого можно опубликовать свой сайт в интернете .

WebSite X5 Evolution - полноценная программа для создания web-сайтов, за несколько шагов пользователь сможет создавать и опубликовывать профессиональные веб-сайты и онлайн-магазины. Не требует знаний программирования, имеет более 1000 готовых шаблонов веб-сайтов, проста в использовании, по сравнению с другими программами по визуальному сайтостроительству. Сайты созданные в данной программе совместимы с разными интернет-браузерами, могут просматриваться с мобильных телефонов и индексируются поисковыми системами. Программой могут пользоваться пользователи, которым нужно простое и быстрое создание собственного веб-сайта или веб-галереи. Бизнесмены могут использовать данную программу для профессионального создания корпоративных веб-сайтов или онлайн-магазинов. Данная программа не имеет никаких ограничений по количеству создаваемых страниц и веб-сайтов .

HTML - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме .

В выше перечисленных программах есть такие недостатки как:

Работа с таблицами. В программах имеется отдельная утилита для редактирования таблиц (Table Editor), но она не интегрирована в главную программу и требует экспортирования таблиц в виде графического объекта, что затрудняет работу с ним .
Требования к аппаратным и программным средствам при установке программы.
Прежде чем начать работу с программой, необходимо инсталлировать ее на жесткий диск. Процесс инсталляции автоматизирован и достаточно прост, очень важно иметь представление о том, какие компоненты понадобятся наверняка, а какие можно не устанавливать, т. к. редко используемые приложения будут занимать часть дискового пространства совершенно напрасно.
Не во всех программах включены в библиотеку различные заготовки: библиотек Java - скриптов, таблиц, форм, фреймов, изображений и множества дополнительных функций .
Не во всех программах содержится несколько высококачественных шаблонов, которые ещё больше упростят задачу по созданию собственного сайта.

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

Возможности языка гипертекстовой разметки HTML

Язык HTML лучше всего подходит для создания интерактивных сайтов, страниц с использованием современных мультимедийных форматов (музыка, фото и видео, игры) . Причем все эти мультимедиа воспроизводятся прямо в браузере, без вызова дополнительных программ типа Adobe Flash.

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

Писать сайт на языке HTML можно в текстовом редакторе «Блокнот», который входит в набор стандартных программ любой операционной системы.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML, скорее всего, будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения.

Один недостаток гипертекстовой разметки HTML – знания языка гипертекстовой разметки (теги, атрибуты).

Глава 2. Процесс создания сайта «Медикл Клуб»

Разработка структуры сайта

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

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

Данный Сайт бысл Сформирован Через систему фреймов.

В переводе с английского, фрейм это рамка. И в HTML (что такое HTML?) значение похожее. Фрейм — это совершенно отдельный прямоугольный элемент (область) окна браузера, который содержит и показывает свой HTML-документ. Да, в вместе с другими документами в одном и том же окне браузера. Чудеса!

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

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

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

Но небольшим элементам сайта это не вредит — например когда идет речь о встраивании видео при помощи iframe с видеохостинга Youtube.com.

Правила вставки фреймов

Свойства фрейма определяется тегом <frame> — он поддерживается во всех браузерах (в т.ч. мобильных). Тег <frame> помещается в контейнер <frameset>. И, если фрейм участвует в определении свойств одного фрейма, то фреймсет дополнительно размечает страницу сайта на области. И уже в эти области, вы можете подгрузить фрейм с параметром src=»».

Структура сайта «Медикл Клуб»:

О Компании(Главная страница и описание компании).
Лицензия (Главные документы обеспечивающие право данной фирмы работать в отрасли медицыны).
Специалисты Клиники.
Наши Работы(Фото до/после , работы спеицалистов ).
Запись на прием.
Контактная информации о клинике.

На Главной Странице находятся меню-ссылки по которым можно перейти в любую другую страницу. Так же тут находится краткое описание самогой нашей стоматологической клиники. На Рисунке 1.

Рисунок 1. Главная страница сайта.

Рисунок 2. Меню-ссылки на другие страницы

На Странице Наши Специалисты Можно увидеть самих сотрудников Клиники , информацию и их стаж работы.

Рисунок 3. Страница с персоналом.

В категории Записаться на Прием, вы можете оставить свои контактные данные и с вами в ближайшее время свяжатся специалисты

В Позиции Контакты, вы можете узнать точное метонахождение контктные данныех и реквизиты кмпании:

Рисунок 3. Контактная информация

На странице работы можно будет просмотреть работы наших Специалистов , готовые работы наших постоянных клиентов (до и после работы)

Рисунок 4. Работы сотрудников.

Описание процесса создания сайта

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

Это оглавление страницы

Здесь расположено основное содержание страницы

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

Пара тегов показывает браузеру, что данный документ является html – документом. Между ними располагается все содержимое моей странички. В том числе и пары тегов ,.

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

Содержимое тега это оглавление страницы. Его содержимое отображается на вкладке браузера. Это очень важный тег, так как именно он говорит поисковым системам, чему посвящена страница сайта . Таким образом, для того, чтобы страница попала в выдачу поисковой системы по определенному запросу, этот запрос должен присутствовать в теге . Пример показан на рисунке .

Текстовая ссылка:

С помощью текстовой ссылки был осуществлен переходов между страницами сайта, внутри текста на одной странице, а также и на другие сайты. Данный сайт был сделан с помощи 3 блоков с использованием фреймов: 1 фрейм рабочая и основанное место где происходит переход по ссылка, 2 окно навигации Меню, 3 Шапка сайте с гербом клиники и контакными данными

Для более удобного вставки были Использваны теги для вставки изображений и построения таблиц:

Заключение

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

Удобная навигация не заставит вас долго и мучительно искать какую либо информацию.

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

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

Таким образом, цель работы достигнута, поставленные задачи выполнены.

Сисок источников и литературы

1. Литература

1. Дуванов А. А. Web-конструирование. – Петербург: 2009. - 384 с.
2. Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2010. - 491 с.
3. Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.
4. Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.
5. Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.
6. Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.
7. Смирнова И. Е. Начала web-дизайна. –Петербург: 2010. - 491 с.

Интернет-ресурсы

1. HTML и Web дизайн для начинающих: [Электронный ресурс]. - http://sovet.h1.ru (дата обращения: 29.03.2014)
2. Основы CSS и HTML: [Электронный ресурс]. - http://www.web-lesson.ru (дата обращения: 1.03.2014)
3. Создание сайтов: HTML: [Электронный ресурс]. - http://www.codeharmony.ru (дата обращения: 15.05.2014)
4. Архитектурная мастерская. Создание сайта: [Электронный ресурс]. - http://wonderfulstyle.ucoz.com (дата обращения: 23.04.2014)
5. Магия творчества. История вышивания: [Электронный ресурс]. - http://myhobbi.net (дата обращения: 14.04.2014)
6. Создание страниц сайта с помощью HTML: [Электронный ресурс]. - http://roumik.ru (дата обращения 31.03.2014)
7. Создание шаблона сайта с помощью CSS: [Электронный ресурс]. - http://ruseller.com (дата обращения 1.05.2014)

Приложение 1: Исходный код Программы:

Основная Страница навигации:

<html>

<head>

</frameset>

<title> Зубная клиника </title>

</head>

</html>

Шапка блочной стстемы сайта:

<html>

<head>

<title>Стоматологическая клинка</title>

</head>

</center>

</table>

</body>

</html>

Основное Блочное меню сайта :

<html>

<head>

</head>

<tr bgcolor=#c6e2ff><th><a href="defast.html" target="frame">О Компании</a></th></tr>

<tr bgcolor=#c6e2ff><th><a href="licenz.html" target="frame">Лицензии</a></th></tr>

<tr bgcolor=#c6e2ff><th><a href="person.html" target="frame">Специалисты клиники</a></th></tr>

<tr bgcolor=#c6e2ff><th><a href="jobs.html" target="frame">Наши работы</a></th></tr>

<tr bgcolor=#c6e2ff><th><a href="zapis.html" target="frame">Записаться на Прием</a></th></tr>

<tr bgcolor=#c6e2ff><th><a href="kontakt.html" target="frame">Контакты</a></th></tr>

</table>

</body>

</html>

Главная страница сайта:

<html>

<head>

<title> Стоматологическая клиника "Медикл КлуБ" </title>

</head>

<h1 align=center>«Медикл Клуб» — многопрофильная клиника в Марьино</h1>

<p> Современный медицинский центр, одним из профилирующих направлений деятельности

которого является современная хирургическая стоматология. В штате стоматологии

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

и большая теоритическая база позволяют им выполнять работу быстро, качественно и профессионально.

Команда опытных стоматологов обеспечит точную постановку диагноза, предоставит необходимый спектр

услуг по доступным ценам, в короткие сроки восстановит функции зубов, вернув пациенту белоснежную и

здоровую улыбку.

<h2 align=center>Врачи медклиники в Марьино</h2>

<p>Прием пациентов в клинике «Медикл Клуб» ведут доктора различных специальностей: гинекологи,

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

В числе наших специалистов – два кандидата медицинских наук, ассистенты кафедр медицинских вузов, ведущие

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

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

<h2 align=center>Медицинские услуги высокого качества</h2>

1)Новое оборудование зарубежного производства<br>

2) Высокоточная лабораторная диагностика: все основные виды анализов<br>

3) УЗИ, ЭКГ, ЭХО КГ (УЗИ сердца), доплероскопия сосудов<br>

4) Выдача справок и оформление медицинских книжек<br>

5) Удобное расположение – клиника находится рядом с метро Марьино<br></p>

<p>Пройти обследование и получить назначение врача Вы можете рядом с домом.

Мы будем рады видеть в клинике жителей близлежащих столичных районов Марьино,

Братеево и Люблино. Запишитесь на прием при помощи специальной формы на нашем

сайте или по номеру телефона 8 (495) 401 79 45.

</center>

Реквизиты<br>

Медиклаб<br>

Адрес:109342, г Москва, проезд Луговой, д 6<br>

Расчётный счёт:<br>

АКБ "ЛАНТА-БАНК" (АО), МОСКВА<br>

р/c 4070 2810 4000 0000 3884<br>

БИК 044525348б<br>

к/c 3010 1810 4000 0000 0348<br>

<br>

ИНН:7723553948<br>

КПП:772301001<br>

ОГРН:1057748889714<br>

ОКПО:79351398<br>

</p>

</body>

</html>

5) Страница с Лицензией

<html>

<head>

<title>Компания Стоматология </title>

</head>

<h1 align=center>Документы</h1>

</center>

</body>

</html>

Страница с Работниками фирмы:

<html>

<head>

<title>Компания Стоматология </title>

</head>

<h1 align=center> Наш персонал</h1>

<tr>

<td><strong>Божкова Маргарита Геннадьевна <br>

Врач - ортодонт

<br> Стаж работы - более 21 лет</strong></td>

</tr>

<br>

<tr>

<td><strong>Гусейнов Эльдар Ахударович <br>

Врач - Хирург-имплантолог, ортопед<br>

Стаж работы - более 16 лет<br>

Заведующий стоматологией</strong></td>

</tr>

<br>

<tr>

<td><strong>Мишляев Георгий Давидович <br>

томатолог-терапевт, ортопед<br>

Стаж работы - более 11 лет</strong></td>

</tr>

<br>

<tr>

<td><strong>Цыбикова Виктория Михайловна <br>

Врач стоматолог-ортодонт<br>

Стаж работы - более 16 лет</strong></td>

</tr>

</table>

</center>

</body>

</html>

Страница Записи на прием:

<html>

<head>

<title>Запись на Прием / Получение консультации</title>

</head>

<h2 align=center>Чем мы занимаемся?</h2>

<ul>

Заполните Анкету:</p>

– Фамилия, имя, отчество;

– E-mail;

– Телефон;

– Удобное время для звонка;

– Описание проблемы.

</p></center>

<p align=center> После подачи Анкеты, наши специалисты свяжутся с вами в ближайшее время:

</form>

<center><a href="defast.html">Ha первую cтраницу </а></сепtег>

</body>

</html>

7) Контактная инфрмация о форме:

<html>

<head>

<title>Компания Стоматология </title>

</head>

<h1 align=center> Наш персонал</h1>

<tr>

<td><center>КОНТАКТЫ</center><img src="kon1.png" width="440" height="440"></td>

<td><center>РЕКВИЗИТЫ</center><img src="kon2.png" width="440" height="440"></td>

<td><center>МЫ НА КАРТЕ</center><br><iframe src="https://yandex.ru/map-widget/v1/-/CBe4a6AU3B" width="560" height="400" frameborder="0"></iframe><br>

</tr>

<br>

</table>

</center>

</body>

</html>