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

Разработка сайта салона красоты «Изумруд»

Содержание:

ВВЕДЕНИЕ

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

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

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

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

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

Объектом исследования курсового проекта является создание сайта салона красоты «Изумруд».

Целью проекта является формирование теоретических знаний по проектированию web − сайта и практических навыков по его разработке.

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

определить виды сайтов;
изучить языки веб − программирования;
научиться выбирать и устанавливать CMS;
научиться регистрировать домен для сайта;
научиться регистрировать хостинг для сайта;
определить требования к web − сайту;
научиться разрабатывать дизайн для web − сайта;

1 Аналитическая часть

1.1 Понятие web-сайт

Информация, доступная пользователям Internet, располагается на компьютерах (web – серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде web − сайтов. Каждый из них имеет свое имя (адрес) в Internet.

Web − сайт – это информация, представленная в определенном виде, которая располагается на web – сервере и имеет свое имя (адрес). Для просмотра web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. В зависимости от того, какое имя (адрес) сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.

Web − сайт состоит из связанных между собой web − страниц. Web − страница представляет собой текстовый файл с расширением *.html, который содержит текстовую информацию и специальные команды − HTML − коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио- и видеоинформация непосредственно в web-страницу не входит и представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mp3 (звук), *.avi (видео).

Каждая страница web – сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Таким образом, web−сайт – это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (web – страниц), размещенный на web − сервере и имеющий индивидуальный адрес. Посмотреть web − сайт может любой человек, имеющий компьютер, подключенный к Internet.

1.2 Описание предметной области

На первом этапе проектирования web – сайта необходимо выполнить анализ предметной области, т.е. определить объекты предметной области и связи между объектами.

Функциональный подход реализует принцип движения «от задач» и применяется, когда определен комплекс задач, для обслуживания которых создается web – сайт. В этом случае можно выделить минимальный необходимый набор объектов предметной области, которые должны быть описаны.

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

1.3 Виды сайтов

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

1.3.1 Классификация сайтов по используемым технологиям

Статичные сайты.

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

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

Динамичные сайты.

Динамичные страницы физически не существуют на сервере, а формируются, исходя из определённых входных данных. К примеру, по одному и тому же адресу мы можем наблюдать различную информацию в зависимости от времени суток, авторизации пользователя или данных принятых из какой – нибудь формы. Подобный результат достигается при помощи языков веб – программирования, самыми распространёнными из которых являются PHP, ASP и Perl.

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

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

Флеш – сайты.

Технология Flash позволяет создавать эффектные сайты с анимацией и звуком. Однако красивый внешний вид является, пожалуй, единственным плюсом подобных сайтов на данный момент времени. Их изготовление весьма сложно и трудоёмко, они имеют большой вес и долго загружаются, а некоторые пользователи и вовсе не могут просмотреть их содержимое из-за отсутствия в системе необходимых для работы компонентов. Всё это приводит к тому, что пока flash − сайты большого распространения не получили. Но с развитием интернета, а также совершенствованием самой технологии flash (к примеру объединение её с другими веб-технологиями, такими как Ajax) вполне вероятно, что подобные сайты займут значимое место среди ресурсов интернета.

1.3.2 Классификация сайтов по принадлежности

Личные (персональные сайты).

Как правило, таким сайтом владеет и осуществляет его поддержку один человек. Такие сайты сейчас составляют большинство, но лишь небольшая часть из них выполнена на высоком уровне. В наше время создать свой сайт в сети может каждый. Для этого даже не обязательно владеть особыми навыками, можно просто воспользоваться услугами специальных сервисов, которые позволяют легко и быстро «собрать» сайт при помощи готовых модулей. Однако подобные шаблонные сайты в большинстве случаев не отличаются оригинальностью, обладают весьма ограниченным набором возможностей и мало посещаемы.

Сайты коммерческих организаций.

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

Сайты некоммерческих организаций.

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

1.3.3 Классификация сайтов по масштабности и уровню решаемых задач

Простые сайты.

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

Тематические сайты.

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

Многофункциональные сайты порталы.

Порталы занимают особое место в интернет – среде. Они могут быть интересны практически любой категории пользователей. Подобные сайты несут широкий набор функций, располагают обширной и разнообразной информацией. К примеру, такие крупные ресурсы как «Яндекс» или «Mail» или социальные сети «Одноклассники» и «Вконтакте» известны каждому пользователю Рунета.

1.4 Языки веб–программирования

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

HTML;
CSS;
PHP;
JavaScript;
Perl;
Flash.

1.4.1 Язык гипертекстовой разметки HTML

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

Технология HTML может подойти для создания небольших, легких сайтов в несколько страничек, функционал которых не требует интерактивности и динамики. Как и любая технология, стандарт HTML не стоит на месте, и сегодня в среду веб – проектирования входит новый стандарт, носящий название HTML5. Данная технология очень молодая, но предоставляет большие возможности в плане создания сайтов, и позволяет реализовать новый, ранее невозможный, функционал. Хотя технология HTML5 еще не до конца вошла в сферу web-разработки, и еще далеко не все Интернет-браузеры ее поддерживают.

1.4.2 Каскадные таблицы стилей CSS

CSS (Cascading Style Sheets – “каскадные таблицы стилей”) – язык программирования, который скорее также относится к языкам разметки и форматирования. CSS стал разрабатываться в 1994 году Хокон Виум Ли и Бертом Босом. Основной задачей было создания языка, который бы форматировал HTML − объекты и текст: работал с шрифтами, цветами, стилями. В общих чертах, CSS работает с внешним видом сайтов. Язык CSS используется с целью «украсить» веб − страницы.

1.4.3 Язык программирования PHP

PHP (Hypertext PreProcessor, препроцессор гипертекста) – язык программирования, исполняемый на стороне веб − сервера, спроектированный Расмусом Лердорфом (Rasmus Lerdorf) в качестве инструмента создания динамических и интерактивных веб – сайтов. Этот язык оказался достаточно гибким и мощным, поэтому приобрёл большую популярность и используется в проектах любого масштаба: от простого блога до крупнейших веб-приложений в Интернете.

Достоинства PHP:

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

Недостатки PHP:

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

Вывод

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

2 Практическая часть

2.1 Выбор и установка CMS

CMS – это система, которая позволяет в удобном виде создавать и управлять (редактировать, удалять) текстовыми материалами и мультимедиа документами (содержимое или контент) на сайте. Аббревиатура «CMS» появилась от англ. Фразы Content Management System, что и переводится как система управления контентом.

Рутинная работа по ручному созданию сайта с недавнего времени заменена CMS – сайтами. Наиболее распространенными является Joomla и WordPress – система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие индустриально − стандартные реляционные СУБД.

CMS бывают как платные (коммерческие), так и бесплатные. Наиболее популярные CMS среди платных это:

1C – Bitrix – компания «1С − Битрикс» занимает лидирующие позиции на российском рынке в области разработки систем управления веб-проектами и корпоративной информацией;
PHPShop – решение для быстрого создания Интернет-магазина, обеспечивает достаточную гибкость, предоставляет широкие возможности по настройке;
Simpla – это готовое решение для быстрого создания интернет − магазина с широкими возможностями и хорошим дизайном;
DataLife Engine – это многопользовательский новостной движок, обладающий большими функциональными возможностями. Движок предназначен в первую очередь для создания новостных блогов и сайтов с большим информационным контентом;
Amiro – система Amiro.CMS позволяет эффективно управлять контентом веб-сайта, товарным ассортиментом интернет − магазина и обслуживать посетителей интернет − ресурса. С её помощью можно создать полноценный высокофункциональный сетевой ресурс, оснащенный всеми необходимыми модулями;
HostCMS – эта система предлагает возможность создания на разных доменах (в том числе и на поддоменах) различных сайтов, управляемых одним экземпляром системы управления.

Среди бесплатных, наиболее популярными являются следующие CMS:

WordPress – это самая популярная система управления контентом для ведения собственного блога. WordPress бесплатен и свободен к распространению. С каждым днем сфера применения WordPress расширяется от блогов до корпоративных сайтов и сложных информационных порталов;
Joomla! – является одной из самых популярных систем управления сайтов, являясь бесплатной в распространении. Простота в использовании, расширяемость и множество других аспектов позволили CMS Joomla! стать одним из лидирующих программных продуктов для создания сайтов;
Drupal – архитектура Drupal позволяет применять его для построения различных типов сайтов – от блогов и форумов до информационных архивов или сайтов новостей;
InstantCMS – это бесплатная многофункциональная система управления сообществами. Она написана на PHP и использует MySQL в качестве базы данных. В первую очередь система ориентирована на создание социальных сетей, сайтов знакомств, онлайн − клубов и городских порталов;
e107 – благодаря своей простоте E107 прекрасно подходит для создания сайтов любой сложности, от сaйтов визиток до порталов, а широкие возможности этой CMS позволяют сделать крупный ресурс с ежедневной многотысячной посещаемостью;
MODx – профессиональный инструмент разработки сайтов, позволяющий управлять контентом. На MODx можно построить сайт любой сложности, практически с любым набором функций, при этом система не будет никоим образом влиять на Ваш html – код. MODx бесплатна и распространяется с открытым кодом (лицензия GPL).

Вышеперечисленные бесплатные системы управления содержимыми сайта – с открытым исходным кодом, написаны на PHP, в качестве базы данных использует MySQL. Сфера применения – от блогов до достаточно сложных новостных ресурсов и интернет − магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты.

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

Главными преимуществами системы Wordpress являются:

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

Чтобы установить Wordpress, необходимо войти в панель управления хостингом и перейти в раздел бесплатные CMS, как показано на рисунке 2.1. В списке необходимо выбрать «WordPress».

Рисунок 2.1 – Выбор CMS для установки

После выбора CMS отобразится страница с данными для установки, как показано на рисунке 2.2, где необходимо указать:

домен для установки;
логин администратора;
пароль администратора;
e − mail администратора;
описание сайта.

Рисунок 2.2 – Ввод данных для входа на сайт

После заполнения всех данных необходимо нажать на кнопку «установить на сайт», в итоге CMS установлена.

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

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

Информационная структура разработанного сайта представлена на рисунке 2.3.

Рисунок 2.3 – Структура сайта

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

2.3 Структурирование контента

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

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

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

использовать только один заголовок <H1> на странице;
иерархически разбивать контент страниц на заголовки и подзаголовки <H1…H6>, не гнать все сплошняком;
разбивать текст на абзацы для удобства чтения;
использовать нумерованные и маркированные списки;
основные мысли в тексте выделять тегами <strong> и <em> не путайте с выделениями ключевых слов на странице;
разбавлять текст тематическими изображениями;
по необходимости вставлять видео материалы, если они уместны;
добавить иконки социальных сетей, чтобы пользователи могли делиться материалами сайта со своими друзьями;
добавлять ссылки на контент, который может продолжить мысль или может быть полезен пользователям, это также ценится поисковыми системами и учитывается при ранжировании.

В ходе структурирования текста были применены следующие правила оформления:

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

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

Рисунок 2.4 – Примеры шрифтов

2.4 Фирменный стиль

Фирменный стиль – это совокупность деталей: визуальных, графических, цветовых и многих других, которые формируют индивидуальный стиль сайта и помогают сделать её узнаваемой среди многих других.

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

Основные элементы фирменного стиля:

фирменный логотип;
фирменная иконка;
фирменный шрифт;
фирменный цвет;
схема вёрстки.

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

2.5 Разработка логотипа

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

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

Рисунок 2.5 – Логотип сайта

2.6 Графические макеты страниц

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

В ходе разработки сайта, были установлены дизайн – макеты, ниже на рисунке 2.7 и 2.8 представлены варианты дизайн – макетов типовых страниц, а в приложении А продемонстрированы все остальные дизайн-макеты страниц.

Рисунок 2.7 – Дизайн макета главной страницы

Рисунок 2.8 – Макет редактирования в администрировании

2.7 Программирование страниц

Ниже приведен фрагмент листинга кода главной страницы:

Рисунок 2.9 – код главной страницы

Основной код листинга главной страницы приведен в приложении Б.

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

2.8 Алгоритм программы

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

анализ функционала сайта, выявление его будущей аудитории;
регистрация хостинга;
регистрация доменного имени;
разработка дизайна web – страниц сайта;
наполнение сайта контентом;
тестирование и последующее обнародование сайта в сети интернет;

Регистрация хостинга.

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

Хостинг бывает платный и бесплатный. Чтобы разместить сайт салона красоты «Изумруд», необходимо выбрать бесплатный хостинг от компании «Beget» (см. рисунок 2.9).

Рисунок 2.10 – Главная страница хостера «Beget»

Для заказа бесплатного хостинга необходимо в подвале сайта перейти в раздел «бесплатный хостинг». Далее для регистрации бесплатного хостинга потребуется:

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

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

Рисунок 2.11 – Код подтверждения регистрации

Рисунок 2.12 – Окно подтверждения регистрации

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

адрес панели управления;
логин для входа;
пароль для входа.

Разработка дизайна Web – страниц сайта.

При разработке дизайна Web – страницы фиксированного размера, вероятно, придется выбирать для нее размер экрана. Здравый смысл подсказывает, что страница должна быть доступна (и правильно отображаться) для максимально возможного числа пользователей. Идея проста: необходимо определить наиболее часто используемое разрешение дисплея и разработать страницу таким образом, чтобы страница гарантированно заполняла все рабочее пространство.

Большинство дизайнеров рекомендуют разрабатывать страницы в формате 10240x768, чтобы при просмотре пользователям не пришлось применять горизонтальную прокрутку. Горизонтальная прокрутка всегда затрудняет восприятие, поэтому дизайнеры традиционно ее отвергают.

Вывод

В данном разделе были рассмотрены различные CMS для создания сайта, которые позволяют в удобном виде создавать и управлять текстовыми материалами и мультимедиа документами на сайте. Для новостных сайтов лучше всего использовать CMS WordPress. Основными её преимуществами является бесплатное использование и легкость в управлении.

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

При разработке дизайна web – страницы фиксированного размера, дизайн сайта дизайн должен адаптироваться под устройство, с которого его посетили.

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

ЗАКЛЮЧЕНИЕ

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

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

Web − сайт может достойно представлять коммерческую организацию в сети Интернет. Но только в том случае, если по нему постоянно ведется кропотливая и вдумчивая работа.

В данном дипломном проекте рассмотрены актуальные вопросы разработки и создания современного web − сайта.

При этом были решены следующие частные задачи:

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

В результате проведенных работ на базе выбранных технологий был создан современный web − сайт.

Разумеется, сайт требует небольшой доработки, преимуществами сайта являются:

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ГОСТ Р 50948-96. Средства отображения информации индивидуального пользования. Общие эргономические требования и требования безопасности – Введ. 2012-01-01. – М. : Госстандарт России : Изд-во стандартов, 2001. – IV, 27 с. : ил.
ГОСТ Р 50949-96. "Средства отображения информации индивидуального пользования. Методы измерений и оценки эргономических параметров и параметров безопасности. – Введ. 2012-01-01. – М. : Госстандарт России : Изд-во стандартов, 2001. – IV, 27 с. : ил.
Стандарт ЧЭМК. – Введ. 2010-02-02. – Ч. : Госстандарт ЧЭМК : 2015.
Брежнева, В.В. Информационное обслуживание: продукты и услуги, предоставляемые библиотеками и службами информации предприятий [Текст]: учебник / В.В. Брежнева, В.А. Минкина – СПбГУКИ. – 2-е изд., перераб. – СПб.: Профессия, 2011. – 304 с.
Воройский, Ф.С. Информатика. Энциклопедический словарь-справочник [Текст]: учебник / Ф.С. Воройский. – 4-е изд. – М.: Физматлит, 2012. – 965 с.
Гендина, Н.И. Использование формализованных методов при подготовке текста для веб-сайтов учреждений культуры [Текст]: учебник / Н.И. Гендина, Н.И. Колкова, О.И. Алдохина // Научные и технические библиотеки. – 2008. – №3. – 29 с.
Демирчоглян, Г.Г. Компьютер и здоровье [Текст]: учебник / Г.Г. Демирчоглян – М.: Издательство Лукоморье, Темп МБ, Новый Центр, 2013. - 256 с.
Документы ЮНЕСКО о построении информационного общества [Текст]: Декларация принципов // Библиотечное дело XXI век. – 2011. - №1. – 4 с.
Евдокимов, Н.В. Основы контентной оптимизации [Текст]: учеб. для вузов/ Н. В. Евдокимов / - М.: Вильямс, 2012. - 30с.
Жураковская, А.Л. Влияние компьютерных технологий на здоровье пользователя [Текст]: / А.Л. Жураковская // Вестник Оренбургского государственного университета / – Оренбург, Оренбургский государственный ун-т – Оренбург, 2012 – С.169-173.
Земсков, А.И. Некоторые особенности работы с электронными документами [Текст] / А.И. Земсков // Научные и технические библиотеки. – 2011. – №2. – С. 112-125
Круг, Стив Веб - дизайн. Не заставляйте меня думать [Текст]: учебник / Стив Круг / - С.Пб.: ИМВО, 2013. - 52с.
Ляпин Д.А. PHP - это просто [Текст]: учебник / Д. А. Ляпин, - СПб.: БХВ-Петербург . 2012 г.
Морозов, А.А. Экология человека, компьютерные технологии и безопасность оператора [Текст]: учебник / А.А. Морозов // Вестник экологического образования в России / – Москва, 2013, № 1. – С. 13-17.
Петюшкин, А. В. HTML Экспресс - курс [Текст]: учебник / А.В. Петюшкин - СПБ.: БХВ-Петербург, 2013.
Тлеукеева, Р. Традиционные и электронные ресурсы: состояние, проблемы. эффективность использования [Текст]: учебник / Роза Тлеукеева / Библиотека. – 2011. – №1. – С. 15-19
Справочник Html и CSS [Электронный ресурс]: - Режим доступа: http://htmlbook.ru/ – 21.05.2015
Структурирование контента на сайте [Электронный ресурс]: – Режим доступа: http://webtrafff.ru/strukturirovanie-kontenta-na-sajte.html – 5.04.16
Wordpress для начинающих [Электронный ресурс]: - Режим доступа: http://wp-starter.ru – 13.04.16
Этапы создания сайта [Электронный ресурс]: - Режим доступа: http://www.yanajy.com/sdelay-sam/etapy-sozdaniya-sajta.html – 13.04.16

ПРИЛОЖЕНИЕ А

Дизайн макеты

Рисунок А.1 – Макет страницы контактов

Рисунок А.2 – Макет страницы с отзывами

Рисунок А.3 – Макет страницы с услугами

ПРИЛОЖЕНИЕ Б

Листинг − программы

Верхняя часть сайта header.php

Таблица стилей (style.css)

Верхняя часть сайта header.php

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php do_action( 'body_top' ); ?><a class="skip-content" href="#main"><?php _e( 'Skip to content', 'chosen' ); ?></a>

<?php do_action( 'before_header' ); ?><header class="site-header" id="site-header" role="banner"><div id="menu-primary-container" class="menu-primary-container"><?php get_template_part( 'menu', 'primary' ); ?>

<?php get_template_part( 'content/search-bar' ); ?><?php ct_chosen_social_icons_output(); ?></div><button id="toggle-navigation" class="toggle-navigation" name="toggle-navigation" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'open menu', 'chosen' );?></span>

<?php echo ct_chosen_svg_output( 'toggle-navigation' ); ?></button><div id="title-container" class="title-container"><?php get_template_part( 'logo' ) ?><?php if ( get_bloginfo( 'description' ) ) {

echo '<p class="tagline">' . get_bloginfo( 'description' ) . '</p>';} ?></div></header><?php do_action( 'after_header' ); ?><section id="main" class="main" role="main"><?php do_action( 'main_top');

if ( function_exists( 'yoast_breadcrumb' ) ) {yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );}

Основной шаблон (index.php)

<?php get_header();get_template_part( 'content/archive-header' ); ?><div id="loop-container" class="loop-container"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();ct_chosen_get_content_template();endwhile;

endif;?></div><?php the_posts_pagination(); ?><?php get_footer(); ?>

Подвал (footer.php)

<?php do_action( 'main_bottom' ); ?></section> <?php do_action( 'after_main' ); ?><footer id="site-footer" class="site-footer" role="contentinfo">

<?php do_action( 'footer_top' ); ?><div class="design-credit"><span><?php

$footer_text = sprintf( __( '<a href="/">Студенческая </a> интернет-газета.', 'chosen' ), 'http://studgazeta.tk/' );

$footer_text = apply_filters( 'ct_chosen_footer_text', $footer_text );

echo wp_kses_post( $footer_text ); ?></span></div></footer></div></div><?php do_action( 'body_bottom' ); ?><?php wp_footer(); ?></body></html>

Таблица стилей (style.css)

.site-title {

font-size: 2.375em;

/* 38px / 16px */

line-height: 1.342;

/* 51px */

}

h1 {

font-size: 1.75em;

/* 28px / 16px */

line-height: 1.357;

/* 38px */

}

.wp-caption-text,

.gallery-caption, input[type="submit"], .sticky-status span, .comment-respond label, .comment-footer span,

.comment-footer a, .menu-primary a, .post-categories,

.post-tags {

font-size: 0.75em;

/* 12px / 16px */

line-height: 1.5;

/* 18px */

}

/*===== Basic Styles =====*/

{

box-sizing: border-box;

}

body {

height: 100%;

font-size: 100%;

margin: 0;

padding: 0;

font-family: "Raleway", sans-serif;

line-height: 1.5;

background: white;

color: #545454;

}

p {

margin: 1.5em 0;

}

a {

color: #2B2B2B;

text-decoration: none;

}

a:link, a:visited {

color: #2B2B2B;

}

a:hover, a:active, a:focus {

color: #666666;

}

h1, h2, h3, h4, h5, h6 {

font-family: "Playfair Display", serif;

margin: 0;

padding: 0;

font-weight: 400;

color: #2B2B2B;

}

h3, h4, h5, h6 {

font-size: 1em;

line-height: 1.5;

}

.site-header {

text-align: center;

padding-top: 39px;

}

.title-container {

margin: 2.25em 0;

}

.site-title {

font-size: 4.188em;

/* 67px / 16px */

line-height: 1.343;

/* 90px */

}

.pagination a,

.pagination span {

display: inline-block;

margin: 0 18px;

}

.pagination .current {

border: solid 1px #3a3a3a;

padding: 5px 12px;

}