Основы создания сайта

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

Содержание

Введение

Глава 1. Основы создания сайта

1.1 Основные понятия

1.2 Общая структура сайта

1.3 Правила создания хорошего сайта

1.4 Адаптивная вёрстка сайтов

1.5 Программные средства создания сайтов

Глава 2. Разработка сайта компании Art Hall

2.1 Разработка страниц сайта

2.2 Использованные программные средства разработки

2.3 Тестирование

Заключение

Список используемых источников

Введение

Всемирная паутина WWW практически состоит из Web-страниц, которые содержат в себе различную информацию. С каждым днем Интернет становится все более используемым средством получения информации, затмевая телевидение, печатные издания и прочие СМИ.

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

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

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

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

В основу Web положен HTML, т.е. язык описания гипертекстовых документов. Сейчас на многих Web-страницах используются специальные программы - скрипты, написанные на таких языках как MS VB Script или JavaScript. При помощи таких «мини-программ» можно управлять форматированием, выводом изображений, воспроизведение мультимедиа. На сегодняшний день самым мощным средством, позволяющим управлять выполнением скриптов, является динамический HTML или DHTML. Он позволяет создавать простые анимации и многие другие эффекты.

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

Целью курсовой работы является разработка сайта компании.

Сформулированы следующие задачи:

· Рассмотреть техническое задание;

· Изучить языки HTML и CSS;

· Создать дизайн сайта;

· Запрограммировать;

· Добавить актуальную информацию;

· Сайт должен использоваться как инструмент для распространения необходимой информации о деятельности компании.

Глава 1. Основы создания сайта

1.1 Основные понятия

сайт интернет программный

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

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

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

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

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

Личные страницы - веб-страницы, которые принадлежат физическим лицам. Содержание и оформление личной страницы зависит только от ее автора.

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

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

На каждом Web - сайте существует одна особенная Web - страница, называемая домашней или главной страницей (homepage). Все посетители сайта сначала попадают на эту страницу. Щелкнув на той или иной гиперссылке, пользователи смогут попасть и на другие страницы сайта. Web - страницы, на которые указывают гиперссылки, могут быть расположены и на том же самом компьютере, где размещена домашняя страница, и на любом другом компьютере, подключенном к Internet.

Гиперссылка - это текст или изображение на Web - странице, при щелчке на котором происходит переход к другой Web - странице или сайту.

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

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

Браузер - от английского слова Browser (окно просмотра или обозреватель), т.е. программа-обозреватель Internet - Internet Explorer, Opera или любая другая.

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

Web - сайт размещается на Web - сервере (Web - server) - компьютере, предоставляющем доступ к Web - страницам посетителям сайта. Однако можно создать Web - сайт непосредственно в файловой системе компьютера, а затем, когда он будет готов, опубликовать его на Web - сервере. Обычно Web - сервер подключен к Internet, что позволяет просматривать Web - страницы, размещенные на нем, в World Wide Web. Многие компании и организации устанавливают Web - серверы и в интранет - сетях. На таких серверах лучше всего размещать Web - сайты, содержащие внутри корпоративную информацию, предназначенную только для сотрудников компании. К некоторым страницам интернет - сайта может быть открыт доступ и из World Wide Web, в то время как остальные страницы будут доступны только из локальной сети компании.

Большинство Internet - провайдеров (Internet service provider - ISP) предоставляют услугу по размещению Web - сайта (эта услуга называется Web - хостингом - Web hosting) как часть набора услуг при получении доступа к Internet. При этом провайдер выделяет часть дискового пространства на Web - сервере для хранения Web - файлов. Для простейших Web - сайтов набор услуг по их размещению и поддержке, оказываемый Internet - провайдерами, бывает вполне достаточен. Большие и сложные Web - сайты стоит размещать на выделенном (dedicated) сервере (иначе называемом выделенным Web - хостом), где можно получить больший объем дискового пространства. На выделенном сервере также может быть установлено и более быстрое оборудование.

1.2 Общая структура сайтов

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

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

· Линейная- страницы располагаются в определенном порядке (рис.1). Переход с одной страницы на другую строго определен. Такая структура обоснована, например, при обучении. Располагая страницы в определенном порядке, вы можете быть уверены, что пользователь не пропустит нужный материал.

Рисунок 1.

· Иерархическая- страницы разделены по категориям и подкатегориям (рис. 2). Такая структура наиболее удобна.

Рисунок 2.

· Произвольная - страницы расположены в свободном порядке (рис. 3). Такая структура оправдана только для небольших сайтов.

Рисунок 3.

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

· Где он находится?

· Куда можно пойти?

· Как туда добраться?

· Как вернуться назад?

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

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

Теперь рассмотрим основные системы навигации:

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

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

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

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

Главная страница - это первая страница, на которую попадает пользователь. Поэтому она должна удовлетворять некоторым условиям:

· Главная страница должна отражать тематику сайта.

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

· Желательно разместить на ней функцию поиска по сайту.

· Пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня.

· Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).

· Лучше сделать главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.

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

· Следить за длиной страницы. Если она больше 2,5 экранов, разбить страницу на две.

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

· Снабдить текст картинками и графиками, но нельзя переусердствовать. Все должно быть обоснованно.

1.3 Правила создания хорошего сайта

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

На втором месте расположен дизайн сайта, но это совсем не значит, что он менее важен. Первое, с чего начинают оценку сайта - это его внешний вид, а уже потом делают выводы, изучая содержимое. Сайт - это первый контакт вашего клиента с компанией и качество (уровень) оформления сайта прямо показывает уровень уважения к клиенту, существующий в компании. Кроме аккуратного исполнения, существует ещё множество правил, которые необходимо учитывать. Есть технические тонкости, например - размер графических файлов, оправданность применения некоторых технологий, режимы загрузки страниц. А есть более скрытые: эстетическая ценность, креатив, правильность и совместимость цветового баланса, грамотность пропорций и перспектив по объёму и освещению, правильное ассоциативное восприятие графического оформления, в соответствии с тематикой сайта и и его задачами. Часто, этот вопрос имеет большее значение, чем кажется на первый взгляд.

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

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

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

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

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

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

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

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

Размещение сайта - очень важный вопрос. Корпоративный сайт или информационный ресурс, не имеющий своего доменного имени, не может вызывать уважения. Размещение сайта на бесплатных серверах (хостинге) - повод задуматься о серьёзности компании. Существует одна тонкость - это пропускная способность канала ухост-провайдера и его удалённость от потенциальной аудитории (например, если сервер физически находится в США). Всё это влияет на скорость загрузки сайта. Ещё один важный вопрос - удобство и способы общения со службой технической поддержки. И, конечно, список услуг и возможностей (базы данных, активные страницы и т.п.), количество предоставляемого места и цена.

1.4 Адаптивная верстка сайтов

HTML5 -- язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML, последняя (четвёртая) версия которого была стандартизирована в 1997 году. По состоянию на октябрь 2013 года, HTML5 ещё находится в разработке, но, фактически, является рабочим стандартом. Целью разработки HTML5 -- улучшение уровня поддержки мультимедиа-технологий, сохраняя при этом удобочитаемость кода для человека.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>,<audio>и<canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети, без необходимости использования сторонних API. Другие новые элементы, такие как <section>,<article>,<header>и<nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, наприме р<a>,<menu>и<cite>, были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

CSS3- это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1.

Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как Adobe Photoshop), скриптов (таких как Java Script) или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления.

Возможности CSS3:

· Создавать элементы со сглаженными углами;

· Создавать линейные и сферические градиенты;

· Более гибко оформлять фоновую картинку элементов;

· Добавлять к элементам и к тексту элементов тени;

· Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);

· Создавать анимацию и различные эффекты переходов;

· Задавать цвета несколькими новыми способами и многое другое.

1.5 Программные средства создания сайтов

Существуют различные программы, позволяющие создавать Web-страницы. Их основное преимущество заключается в том, что нет необходимости изучать языки разработки сайтов. Наиболее популярными программными средств и являются Adobe Dreamweaver CS и MS FrontPage.

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

Возможности Dreamweaver:

· Дизайн и разработка кода в одном программном продукте

· Поддержка и удобное редактирование CCS3

· Работает с xml и HTML5

· Простая работа с мультимедиа -- добавить картинку или видео на сайт проще простого

· Своя коллекция скриптов

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

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

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

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

Возможности программы Microsoft FrontPage:

· Поддержка графики упрощает работу с графическими изображениями из других приложений, улучшая управление отображением и сохранением рисунков.

· Для включения в веб-узел объектов Macromedia Flash достаточно просто перетянуть его в рабочую область. FrontPage 2003 предоставляет диалоговое окно, так что можно определить свойства Flash-фильма, дважды щелкнув его. FrontPage поддерживает написание сценариев для Flash-объектов с помощью средств разработки сценариев.

· Имеется возможность выбора редактора для работы с конкретным элементом данных при его редактировании. Например, если имеется несколько GIF-изображений, некоторые из которых являются фотографиями, а некоторые - диаграммами, можно редактировать фото с помощью Adobe PhotoShop, а для диаграмм использовать Microsoft Office Visio®, автоматически выбирая редактор при редактировании файла.

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

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

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

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

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

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

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

Глава 2. Разработка сайта компании Art Hall

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

За основу был взят CSS шаблон.

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

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

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

Для удобства и эффективности работы сайта при разработке дизайна сайта я обратила внимание на некоторые моменты:

ѕ Скорость загрузки сайта.

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

ѕ Разрешение сайта.

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

ѕ Навигация на сайте (рис. 5).

Рисунок 5. Меню сайта

ѕ Информационное наполнение.

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

ѕ Графика на сайте.

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

2.1 Разработка страниц сайта

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

Навигационное меню сделано в виде ненумерованного списка <ul><li>…</li></ul>. Оно заключено в тэги <nav> </nav> - это позволяет понять браузеру, где находится навигация. Так как по умолчанию строки списка <li>…</li> расположены один под другим, т.е. вертикально, то я использовала CSS-селектор display: inline чтобы расположить строки по горизонтали. Последние три строки я сдвинула вправо с помощью CSS-селектора padding, чтобы расположить по середине логотип компании. Также строки по умолчанию имеют маркеры-точки. Их я убрала с использованием селектора list-style-type: none.

Каждая из строк навигационного меню является гиперссылкой <a href=”url”>…</a>. Так как по умолчанию текст гиперссылки синего цвета и выделен нижним подчеркиванием, я изменила его с использованием CSS-селекторов color: white, отвечающий за цвет, и text-decoration: none, убирающий подчеркивание.

Логотип расположен в отдельном блоке <div class=”logo”>Лого</div>. Для него был задан CSS-селектор position: absolute, который означает, что блок не зависит от какого-либо другого блока. Выравнивание посередине задано селектором margin: 0px auto.

Ниже идет основной блок, который заключен в тэги <section></section> - это позволяет при просмотре сайта на смартфонах и планшетах сжимать область просмотра до границ секции. В нем расположен слайдер из пяти изображений. Так как за основу взят шаблон, слайдер был готов. Он выполнен с помощью Jquery - библиотеки JavaScript. Изображения вставлены в слайдер с использованием тэга <img src=”url картинки”>.

Далее расположен отдельный блок с иконками социальных сетей. Каждая из иконок является гиперссылкой <a href=”url”>…</a>. Иконки вставлены с помощью тэга <img src=”…”>.

Самый нижний блок с датой и контактной информацией заключен в тэги <footer></footer>. Годы выполнены с помощью JavaScript (рис. 6).

Рисунок 6. Код автоматического обновления даты

О нас. Верхнее меню с логотипом скопированы.

Ниже идут два соседних блока <div></div>. В левом я разместила информацию о деятельности компании между тэгами <p>…</p> и картинку с использованием тэга <img src=”url”>. В правом - предоставляемые услуги. Текст организован в виде ненумерованного списка. Каждая строка - это гиперссылка <a href='url'>…<a>.

Ниже в блоке расположен текст между тэгами <p></p> и фото сотрудников, расположенных с помощью тэга <img src=”url”>.

Портфолио. Так как за основу взят шаблон, галерея в портфолио была готова. Она выполнена с использованием Jquery и JavaScript. По умолчанию было 6 категорий галереи. Я расширила их количество путем добавления новых идентификаторов mycarousel-№ (рис. 7).



Рисунок 7. Скрипт галереи

В каждую категорию я добавила фотографии с помощью тэга <img src=”url”> (рис. 8).

Рисунок 8. Фотографии галереи

Услуги. Верхнее меню скопировано.

Левая часть - навигационное меню, выполненное в виде ненумерованных списков <ul><li></li></ul>. Заголовки списков заключены в тэги <h2></h2>.

Правая часть - информация о каждой услуге. В блоке находится текст между тэгами <p></p> и небольшая фото-галерея. Она создана с помощью Jquery. Фото в галерею загружены с использованием тэга <img src=”url”>.

Ниже информации идет гиперссылка, ведущая на страницу с контактами и онлайн-формой.

Новости. Страница состоит из двух блоков <div></div>. Левая часть - анонсы новостей, правая - событийный календарь. Каждая из новостей - отдельный блок. Заголовки новостей - гиперссылки, ведущие на страницу с более подробной информацией.

Календарь сделан с помощью таблиц HTML <table><tr><td>…</td></tr></table>. Некоторые из дней календаря имеют события. При наведении на эти дни всплывает картинка. Это сделано с помощью JavaScript. Картинки загружены с помощью тэга <img src=”url”>.

Контакты. Страница состоит из трех блоков: контактная информация, карта, онлайн-форма.

Блок «Контактная информация» содержит текст, заключенный между тэгами <p>…</p>. Адрес электронной почты заключен в тэг <ahref="mailto:email@ya.ru">…</a>. Нажав на него открывается программа отправки сообщений MS Outlook.

Вставка карты в средний блок выполнена путем вставки ссылки на карту Яндекс с местоположением через JavaScript (рис. 9).

Рисунок 9. Скрипт вставки карты Яндекс

Форма обратной связи выполнена с помощью тэгов <form></form>. Поля для ввода текста выполнены с использованием тэгов <input type=”text”>. Кнопка «Отправить» - тэг <input type=”submit”>. При нажатии кнопки введенные в форму данные отправляются на электронную посту компании. Это реализовано при помощи так называемого AJAX. Код был готов, я изменила только url сайта и адрес электронной почты.

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

2.2 Использованные программные средства разработки

Для разработки Web-страниц был использован бесплатный редактор NotePad++. Выбор пал на него из-за его преимуществ:

ѕ Синтаксис (подсветка) кода. Notepad++ понимает множество языков программирования (HTML, php, CSS, java и т.д.). На рисунке 10 изображена подсветка кода. При помощи нее всегда можно найти его начало и конец. Для того, чтобы подсветить код, достаточно будет щелкнуть по одному из тегов левой кнопкой мышки и он изменит цвет и покажет его пару. Подсветка так же поможет не допустить ошибок в кодах.

Рисунок 10. Часть кода главной страницы

ѕ Текстовый редактор позволяет сохранить и преобразовать HTML и php файлы в кодировку UTF-8 (без BOM). Если для редактирования файлов использовался обычным блокнотом от windows, то при сохранении файлов даже в кодировке UTF-8, он добавляет к ним невидимые символы, которые и называются BOM. И в дальнейшем, эти невидимые символы, вместо нужного текста выдают непонятные иероглифы. Notepad++ поможет избежать данную проблему, преобразовав файлы в кодировку UTF-8 (без BOM).

Рисунок 11. Кодировка в NotePad++

ѕ Наличие поиска. Иногда случается такое, что необходимо отыскать какой-либо участок кода.

ѕ Всплывающие подсказки.

ѕ И многое другое.

Для работы с графикой использовался графический редактор Adobe PhotoShop. Он был выбран из-за широкого функционала и возможности работы с изображениями с разным форматом.

2.3 Тестирование

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

Основными целями тестирования сайта являются:

· Выявление недостатков сайта, которые препятствуют его маркетинговой и коммерческой эффективности;

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

Сайт был протестирован следующим образом:

1) Открытие сайта в разных браузерах (Chrome, Mozilla, Opera, Explore, Safari, Яндекс). Во всех браузерах он открывался одинаково, но в Explore слова верхнего меню выделены жирным шрифтом.

2) Проверка работоспособности всех гиперссылок путем их последовательного нажатия.

3) Проверка сайта на валидность, т.е. выявление ошибок в коде с помощью сайта w3.org.

4) Проверка отображения сайта на различных устройствах - ПК, ноутбук, нетбук, планшет, смартфон.

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

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

7) Тестирование работоспособности формы обратной связи путем заполнения полей и отправки этих данных.

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

Заключение

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

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

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

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

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

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

1) Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств - Спб 2012.

2) Мержевич В. Вёрстка вэб-страниц - М 2012.

3) Джилленуотер З. Сила CSS3. Основной новейший стандарт вэб-разработок! - Спб 2012.

4) Фримен Э., Робсон Э. Изучаем программирование на HTML5/Учебное руководство - М 2013.

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

...