Создание сайта по дизайну интерьера

Размещено на http://www.allbest.ru/

Содержание

Введение

1. Актуальность темы

1.1 Выбор и описание программных средств и среды разработки реализации сайта

1.2 Основная концепция и содержание веб-сайта

2. Дизайн сайта

2.1 Технические и программные требования при разработке web-сайта

Заключение

Список использованных источников



Введение

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

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

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

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

Задачи курсового проекта:

освоить основные положения и принципы веб-технологий и веб-дизайна; программный сайт верстка

продемонстрировать виды и методы веб-вёрстки;

освоить основы технологий HTML5, CSS3;

выполнить веб-дизайн и веб-вёрстку;

применить изученные технологии при разработке веб-сайтов.



1. Актуальность темы

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

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

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

Цель создания сайта состоит в передаче информации пользователю.

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

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

1.1 Выбор и описание программных средств и среды разработки реализации сайта

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

язык разметки гипертекста html и css;

растровый графический редактор Paint;

стандартный редактор текста - блокнот.

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

Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO8879.

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

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение.html или.htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет - обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса web - страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.

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

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

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

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

Paint обладает рядом преимуществ:

программа встроена в Windows;

оптимизирован для работы с двуядерными и четырехядерными процессорами;

имеет удобный интерфейс, похожий на Photoshop;

позволяет работать с несколькими документами одновременно;

поддерживает работу со слоями;

проста в использовании.

Блокнот (англ. Notepad) -- простой текстовый редактор, являющийся частью операционных систем Microsoft Windows, начиная с вышедшей в 1985 году Windows 1.0.

Блокнот использует оконный класс EDIT. Вплоть до вышедшей в 2000 году Windows ME поддерживались только самые базовые функции, многие функции были доступны только из меню, а максимальный размер файла составлял 64 килобайта (предел класса EDIT). В настоящее время редактор поддерживает контекстную замену, горячие клавиши (например, Ctrl-S для сохранения файла), снят предел в 64 Кбайт и добавлена поддержка Юникода.

Кроме Windows, Блокнот способен выполняться также в ReactOS и Wine. Блокнот используется так же для написания html кода.

1.2 Основная концепция и содержание веб-сайта

Разрабатываемый сайт предназначен для ознакомления людей с предоставляемыми услугами компании “planeta дизайн”.

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

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

Исходя из поставленных задач, web-сайт должен предоставлять следующие возможности:

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

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

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

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

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

- внешний вид сайта должен соответствовать выбранной тематики;

- навигация по сайту должна быть удобной для пользователя;

- главные материалы, предложения и категории услуг должны быть расположены на первом плане, чтобы заинтересовать посетителя;

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

Изображение в окне браузера состоит из двух основных элементов:

- название сайта;

- главное информационное меню по центру страницы;

Название сайта находится на каждой странице и не изменяется в зависимости от местонахождения на сайте.

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

Основное содержание страницы меняется в зависимости от местонахождения пользователя.

Главная страница. Эта страница отображается при первом входе на сайт, ее оформление и содержание дает пользователю первое представление о сайте.



2. Дизайн сайта

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

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

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

Главная страница оформлена с помощью таблицы стилей css, все файлы css хранятся в специально отведенной папке. (рисунок 2).

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



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

Команды в тексте HTML - документа называются тэгами. Тэги заключены в угловые скобки. Тэг всегда начинается со знака меньше «<» и заканчивается знаком больше «>». Большинство тэгов используются парами.

Рисунок 2 - Фрагмент кода файла default.css

COLOR Задаёт цвет текста. SIZE Задаёт толщину линии в пикселях. <B> и </B> - полужирное начертание, следует использовать для текста, которые не более важен, чем остальной текст, но по каким либо причинам должен выделяться из него.

В качестве «шапки» я добавила по актуальности картинку. Для этого использовала теги «header-wrapper» и «background».

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

К основным тэгам HTML в моей работе относятся:

<HTML> и </HTML> - начало и конец документа.

<HEAD> и </HEAD> - определяет начало и конец заголовка документа.

<TITLE> и </TITLE> - определяет название документа, которое отображается в строке заголовка окна.

<BODY> и </BODY> - тело документа, обязательный тэг.

<P> и </P> - создание нового абзаца. По умолчанию обозреватель выравнивает текст абзаца влево.

Так же для разделения границ главной страницы я использовала теги таблицы.

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> я использовал внутри контейнера <head>.

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

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

Рисунок 4 - код для меню сайта и основной части сайта

Меню сайта сделано следующим образом, с помощью кода таблицы, указанного выше, аналогичным способом я поделила страницу на несколько визуальных части, в верхней части находится как раз таки меню. К страницам привязаны их персональные ссылки с помощью тегов <a>…</a>.

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

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

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

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается. В моем примере показано создание нескольких ссылок на разные веб-страницы.

В моем примере создаются пять ссылок с разными текстами. При щелчке по тексту «Выберите дизайн» в окне браузера откроется документ diz.html, а при щелчке на «Отзывы» -- файл otz.html.

Остальные ссылки действуют по аналогичному способу.

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

Главную страницу я назвала index.html. При нажатии на кнопку «выберите дизайн» откроется следующая страница diz.html (рисунок 5).

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



Рисунок - 5 Страница раздела «Выберите дизайн»

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

Рисунок 6 - Код страницы «Выберите дизайн»

HTML теги h1, h2, h3-- это заголовка, показывающих относительную важность блока после заголовка в зависимости от уровня заголовка h1, h2, h3 и т.д. Тег h1 -- заголовок первого уровня, тег h2 -- второго, тег h3 -- третьего, тег h6 -- наименее значимый заголовок из всех. Заголовок h1 -- второй по важности для SEO сайта элемент на странице после тега title (заголовка страницы) и самый важный тег из всех тегов H.

Использование html тега заголовка h1 на странице в моем случае допускается не более одиного раза и по умолчанию, заголовок первого уровня H1 отображается самым крупным (среди прочих тегов H) шрифтом жирного начертания. Остальные теги заголовков H имеют шрифт меньшего размера в зависимости от уровня. Новые абзацы начинаются с атрибута <p>…</p>.

На рисунке 7 показан код, который я использовала, чтобы редактировать текст, шрифт и цвет фона.

Рисунок 7 - образец кода файла styles.css

Так же в моем коде видно, что я поставила кнопку «вернуться на главную». Для того, чтобы клиенты смогли вернуть на главную страницу, я создала кнопку-ссылку, которую поместила в файл knopka.css, с дальнейшей привязкой к основным страницам, смотреть Рисунок 8.



Рисунок 8 - код файла knopka.css

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

Рисунок 8.1 - Кнопка «Вернуться назад»

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

Имеет синий фон, размер текста 2, на заголовках 5. Шрифт используется из источника google. На этой странице клиент может ознакомиться с отзывами, которые оставили клиенты для нашей компании, что в свою очередь может понравиться другим посетителям сайта.

Рисунок 9 - Страница «Отзывы»



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

Рисунок 10 - фрагмент кода страницы «Отзывы»

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

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

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

Следующая на очереди страница, это «О нашей компании» (Рисунок 11).

Рисунок 11 - страница «О нашей компании»

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

На этой странице с помощью атрибута <p align="center"> задано выравнивание по центру. Цвет текста - FONT COLOR использовался разный, голубой и лазурный.

Из особенностей шрифта в некоторых фрагментах текста добавлен шрифт Gabriola, он отличается от стандартных шрифтов своей красочностью, для изменения шрифта использовался тег <FACE="Gabriola">.

HTML бегущая строка определяется тегами <marquee> </marquee>.

Атрибут behavior="" - определяет тип движения текста. При значении alternate текст движется слева направо, достигнув края, меняет направление. При значении scroll бегущая строка, достигнув края, появляется с противоположной стороны. При значении slide бегущая строка останавливается у противоположного края страницы.

Атрибут direction="" - определяет направление движения текста. Значение down определяет движение текста вниз. Значение up определяет движение текста вверх. При значении left бегущая строка движется справа налево. При right - слева направо



Рисунок 12 - код страницы «О нашей компании»

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

Для начала я добавил фон на всю страницу с использованием атрибута таблицы стилей css - background: url(img/pic10.jpg), отдельно стоит упомянуть атрибут: no-repeat;. Он отвечает за то чтобы изображение не повторялось после границ предыдущего, а было цельное.

Таблицу создала с помощью атрибута Table, состоящую из двух столбцов и 16 сток. Таблица у меня без границ.

Сначала я добавила поля заполнения (рисунок 13).

Рисунок 13 - Фрагмент кода с заполнением поля

Тип ввода поставила текст, наименование фрагмента: text, размер поля поставил 80 символов, максимальное количество символов в написании 25, в других полях тоже по-разному максимальное количество символов, в зависимости от предназначения поля. В левую колонну таблицы поместила названия строк, подходящих по смыслу.

Поле «Укажите ваш пол» создала с помощью атрибута Radio. Оно создает переключатель, то есть набор кнопок с зависимой фиксацией (выбрать можно только один вариант), в моем случае «мужской» или «женский».

Рисунок 13.1. - Код переключателя

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

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Рисунок 13.2 - Код списка выбора

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

В моем случае этот атрибут послужил для поля «Расскажите немного о себе» (смотреть рисунок 13.2).

Рисунок 13.2 - Код многострочного текстового поля

Далее идут две кнопки «Очистить» и «Отправить». Кнопка «Очистить» полностью сбрасывает введенную информацию, а кнопка «Отправить», отправляет информацию на виртуальный сервер. Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.



Рисунок 13.3 - Код тега кнопок

Рисунок 14 - Страница заполнения формы

Далее идет на очереди страница «Наши контакты», смотреть рисунок 15.

На этой странице клиент может посмотреть актуальную информацию о нашей компании, здесь клиент может ознакомиться с адресом нашего главного офиса, по возможности позвонить нам и спросить интересующую его информацию

Рисунок 15 - страница «Наши контакты»



Рисунок 16 - фрагмент кода страницы «Наши контакты»

2.1 Технические и программные требования при разработке web-сайта

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

Технические средства:

процессор AMD Athlon a350 (3.0 ГГц, 2 МБ L3 Cache);

оперативная память 6Gb DDR3;

видео карта 1Gb DDR3;

жесткий диск 512Gb;

Программные средства:

подлинная Windows 7 Ultimate (64Bit);

Microsoft Office 2007;

набор web разработчика (HTML5, CSS3);

Paint

Блокнот



Рисунок 17 - Карта сайта



Заключение

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

освоить основные положения и принципы веб-технологий и веб-дизайна;

продемонстрировать виды и методы веб-вёрстки;

освоить основы технологий HTML5, CSS3;

выполнить веб-дизайн и веб-вёрстку;

применить изученные технологии при разработке веб-сайтов.

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

Оценивая проделанную работу, можно сделать следующие выводы:

сайт предоставляет пользователям наиболее нужную ему информацию, а именно возможность ознакомиться с видами интерьеров;

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

реализована навигация с помощью меню по страницам сайта;

реализовано окно отправки информации по заявке.



Список использованных источников

1. Wikipedia [Электронный ресурс]

2. Горнаков, С.Г. Осваиваем популярные системы управления сайтом [Текст] / С.Г. Горнаков. - М.: Наука, 2017. - 30 с.

3. Лоусон, Б. Изучаем HTML5 [Текст] / Б. Лоусон, Р. Шарп. - СПб.:Питер, 2015. - 272 с.

4. Маскиано, Ч. HTML и XHTML. Подробное руководство [Текст] / Ч. Маскиано, Б. Кеннеди. - Символ-Плюс 2016. - 752 с.

5. Фримен, Э. Изучаем HTML, XHTML и CSS [Текст] / Э. Фримен. - СПб.: Питер, 2018. - 656 с.

6. Чиртик, А.В. Популярный самоучитель HTML [Текст] / А.В. Чиртик. - СПб.: Питер, 2015. - 56 с.

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

...