Дизайн сайта. 
Создание web-сайта салона по прокату автомобилей

Модель сайта

Сайт состоит из 19 страниц, на каждой из которых расположено связывающее их меню. При нажатии на соответствующий элемент меню происходит переход на указанную страницу по гиперссылке. Все страницы выполнены в одной стилистике и используют корпоративные цвета (оттенки синего и жёлтый).

Стартовой является главная страница сайта («index.html»). Структура сайта не однородна: не все страницы равнозначны. На рис. 1 представлена схема модели сайта и отмечены примеры возможных переходов.

Рис. 1. Схема модели сайта

Макет сайта

При создании макета сайта использовалась блочная вёрстка (вёрстка посредством слоёв).

На сегодняшний день верстать блоками это есть показатель профессионализма. Из плюсов можно отметить компактный код, сравнительную простоту вложенности, скорость разработки и правок. Минус — требуется знание CSS.

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

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

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Были использованы следующие атрибуты:

Id — уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id.

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

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

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

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

height, width — определение высоты и ширины блока в окне браузера;

color — цвет текста.

font-size — размер текста.

font-familyтип шрифта.

background-colorцвет фона.

margin-top — величина отступа от верхнего края элемента.

padding — значение полей вокруг содержимого элемента.

cursorвид курсора при наведении.

text-shadowтень от текста.

text-alignвыравнивание текста.

borderзадание границ вокруг контента.

marginотступы от border.

paddingотступы от контента.

border-radiusскругление границ.

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

text-decoration-добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.

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

positionустанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице И некоторые другие.

Стоит сказать что в своей курсовой работе мне пришлось использовать ещё и сущности (англ. entities) — «специальные символы». А именно знак рубля, код которого в Юникоде: ք.

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

Рис. 2. Макет сайта.

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