Стилевое оформление сайта

Вступление

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

 

Теоретическая часть

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

 

Виды верстки

Сайт может иметь разную верстку. Сайта может иметь различную из версток – блочную, табличную, фиксированная, резиновую, семантическую и кроссбраузерную. Рассмотрим каждую из них:

- Блочная верстка. На данный момент самая востребованная верстка, которая создаётся с помощью слоёв, а именно блоков <div>, то есть вы создаёте какое-то количество блоков, которые как слои накладываются друг на друга. Можно в любой момент удалить или перенести любой требуемый блок.- Табличная верстка. Создаётся с помощью обычной таблицы, таблица делится на колонки, а колонки на ячейки, в каждой ячейке можно расположить то, что требуется: шапка, меню, контент, подвал. А также, всё, что должно быть по задумке на сайте.- Фиксированная верстка. Это верстка, в которой мы задаём каждому элементу фиксированный размер, т.е. сайт имеет четко установленные размеры. Если сайт имеет размеры другие, чем установлены, то сайт будет отображаться некорректно. - Резиновая верстка. Это верстка, при которой сайт растягивается на ширину равную вашему разрешению экрана монитора, то есть ширина сайта полностью зависит от разрешения вашего монитора или окна браузера и может как растягиваться, так и сжиматься до нужного размера. Достигается это путем указания размеров в процентах, а не пикселях.- Семантическая верстка. Верстка, где тэги используются в соответствии со структурой документа, то есть валидная верстка, которая соответствует правила оформления документа. Т.е. сайт имеет понятную верстку: каждый тэг соответствует правилам. Идентификаторы, классы и.т.п. должны иметь понятные имена.- Кроссбраузерная верстка. Сайт выглядит и работает одинаково в популярных браузерах. У каждого браузера есть свои понятия о том, как должна выглядеть страница с определёнными тэгами, или некоторые тэги вообще не воспринимаются, поэтому требуется сделать отдельные css стили для каждого браузера.

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

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

 

Навигация сайта

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

Цветовая схема сайта

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

Модульная сетка сайта

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

Выбор технологии

Конструктор сайтов

Стилевое оформление сайта

Меню

Шрифты

Логотип

Формы