3.4. Ход работы, основные этапы создания дизайн-проекта

CSS или Cascading Style Sheets.Что в переводе означает "каскадные стилевые таблицы". Такой приближенный перевод указывает на главную особенность CSS - каскадное наследование свойств объекта.

На первой закладке в программе DreamWeaver мы определяем, как будет выглядеть отдельная буква нашего текста:

1. Указываем шрифт, которым будет писаться текст;

2. Указываем размер шрифта - по сравнению с возможностями HTML тут все просто. Размер можно указать практически в чем угодно, начиная от % и заканчивая пикселями и пунктами;

3. Здесь настраивается степень "веса" буквы или, его толщина. Вариантов тоже немало;

4. Стиль написания - наклонный (италик), стандартный (normal);

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

6. Высота базовой линии шрифта в пунктах, поинтах или любых других величинах;

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

8. Различный декор - подчеркивание, мигание и прочее;

9. Цвет текста.

На данной закладке производятся настройки фона. Фона всей странички или только заданного абзаца текста - это зависит от того, как решили создавать стиль:

1. Цвет фона (выбор варианта из стандартных 256 цветов или создание своего цвета);

2. Файл с фоновым изображением;

3. Настройка повторения (размножения) фонового изображения по странице, например, можно задать, чтобы изображение копировалось только по оси X;

4. Здесь указывается как ведет себя фоновое изображение при прокрутке страницы - прокручивается вместе с ней или стоит на месте;

5. Указание горизонтальной позиции начала фона;

6. Указание вертикальной позиции начала фона.

Пункт block служит для настроек параметров блока текста (т.е. здесь речь идет уже не об отдельных буквах как в пункте Type):

1. Настройка расстояния между словами;

2. Настройка межбуквенного расстояния или трекинг;

3. Вертикальное выравнивание строки текста;

4. Горизонтальное выравнивание текста;

5. Отступ первой строки текста;

6. Настраивает систему расстановки дополнительных пробелов между словами и предложениями (несколько вариантов).

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

1. Ширина прямоугольника;

2. Высота прямоугольника;

3. Настройка выключки влево или вправо;

4. Настройка того, как ведет себя текст при использовании элемента с выключкой влево или вправо (как текст обтекает подобный объект);

5. Настройка отступа от края прямоугольника до расположенных рядом других элементов;

6. Настройка отступа от краев прямоугольника до текста.

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

1. Указываем ширину бордюра слева, справа, сверху и снизу;

2. То же самое но для цвета бордюра;

3. Стиль бордюра - различные варианты сочетания точек и черточек.

Настройки списков (нумерованного и списка с буллетами):

1. Тип оформления буллета (несколько вариантов);

2. Использование в качестве буллета картинки;

3. Позиционирование буллета.

Позиционирование - вещь очень важная. Оно помогает "поставить" наш объект в любое место на страничке.

Тип позиционирования (относительное, абсолютное и т.д.)

1. Расположение по Z-координате - в каком слое будет находится наш объект;

2. Видимый или невидимый наш объект (может использоваться для создания пустых полей в документе);

3. Что будем делать с переполнением (т.е. если текст весь не влез);

4. Расположение объекта - указание координат вершины + ширины и высоты;

5. Отступы со всех сторон в пикселях или других единицах.

С помощью композиции программ DreamWeaver, Photoshop, CorelDrawи Cinema4Dполучили в итоге оболочку для сайта «Ast»(Прил. 3, Рис.1), (Прил. 3, Рис.2).

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