- •Содержание
- •Глава 1. Виды компьютерной графики, их характеристика 6
- •Глава 2. Графический редактор adobe photoshop 19
- •Глава 3. Подготовка графики для web и мультимедиа 81
- •Глава 4. Основы web-дизайна. Язык html 90
- •Глава 5. Сайтостроение в Macromedia Dreamweaver 103
- •Глава 6. Проектирование web-сайта 122
- •Введение
- •I. Растровая, векторная, фрактальная графика
- •Глава 1. Виды компьютерной графики, их характеристика
- •II. Разрешение растровых изображений
- •1. Разрешение экрана монитора:
- •III. Изменение размеров, разрешения изображения
- •IV. Программы – графические редакторы двумерной графики
- •V. Форматы графических файлов
- •1. Критерии выбора формата файла
- •2. Методы сжатия информации (используемые в разных форматах файлов)
- •3. Виды форматов графических файлов
- •Глава 2. Графический редактор adobe photoshop
- •I. Выделение областей в Photoshop
- •4. Выводы: что можно делать с выделенной областью?
- •II. Инструменты рисования. Выбор цвета
- •III. Многослойные изображения
- •IV. Создание теней, отражений
- •V. Цветокоррекция
- •Цветокоррекция с помощью Пипеток
- •Особенности действия Пипеток :
- •Цветокоррекция Белой и Черной пипетками
- •VI. Ретушь – устранение дефектов фото
- •Типы дефектов: технические дефекты (царапины, пятна, отслоение эмульсии) и художественные (неправильная композиция, освещенность, неудачный фон).
- •1. Инструменты ретуши, коррекции
- •1.1. Инструмент `Штамп`
- •1.2. Инструмент `Восстанавливающая кисть`
- •1.3. Инструмент `Заплатка` (Patch)
- •1.4. Инструментом `Красные глаза` убираем дефект
- •1.5. Инструмент `Замена цвета`
- •1.6. Инструменты Размытие , Палец (Размазывание) , Резкость
- •1.7. Инструменты Осветлитель , Затемнитель , Губка
- •1.8. Инструмент Обрезка (Рамка)
- •2. Увеличение резкости
- •2.1. Инструменты увеличения резкости отдельных элементов (вручную)
- •2.2. Фильтры для увеличения резкости
- •2.2.1. Автоматические фильтры
- •2.2.2. Настраиваемые фильтры
- •3. Профессиональная ретушь фото:
- •Этап I. Создание снимков фото в палитре История
- •Этап II. Фильтр `Пыль и царапины`
- •Этап IV. Удаляем крупные дефекты Штампом
- •Этап V. Завершение ретуши: фильтр `Контурная резкость`
- •Методика использования фильтра `Контурная резкость`
- •VII. Использование каналов
- •2. Использование альфа-каналов
- •3. Создание рамок для фото, используя альфа-каналы
- •4. Получение черно-белых изображений (из цветных)
- •VIII. Векторные инструменты, контуры в Photoshop
- •2. Работа с контурами (Paths): обводка, заливка и пр.
- •3 . Векторные инструменты группы Перо (Pen)
- •С Установка стиля нового слоя вободное перо : создание контуров, выделений
- •Инструменты редактирования контуров
- •Глава 3. Подготовка графики для web и мультимедиа
- •I. Оптимизация – уменьшение объема файла
- •Х Таблица 5 арактеристики растровых форматов файлов
- •II. Создание рисунка на прозрачном фоне (без фона)
- •III. Анимация: разработка анимированных баннеров
- •Глава 4. Основы web-дизайна. Язык html
- •I. Основные понятия. Редакторы html
- •II. Структура html-кода страницы
- •III. Html-теги и атрибуты
- •Обязательные тэги
- •Форматирование абзацев, заголовков
- •Создание гиперссылок
- •Форматирование шрифта
- •Вставка изображения
- •Создание списков
- •Создание таблиц
- •Описание фреймов
- •Комментарии
- •Глава 5. Сайтостроение в Macromedia Dreamweaver
- •I. Интерфейс Dreamweaver. Начало работы
- •Начало работы в Dreamweaver
- •II. Принципы языка html и работа в режиме html-кода
- •III. Работа в режиме дизайна: форматирование текста
- •Форматирование абзацев
- •Создание списков
- •IV. Создание сайта в Dreamweaver
- •1. Настройки окна `Определение сайта`
- •2) В категории Удалённая информация (Remote Info)
- •3) В категории Примечания к дизайну (Design Notes)
- •2. Установка параметров страницы и русской кодировки
- •3. Разметка макета web-страницы
- •4. Настройка цвета страницы
- •5. Вставка рисунков
- •6. Ввод текста web-страницы
- •7. Настройка гиперссылок
- •Создание остальных страниц сайта и настройка ссылок
- •Рисунки в качестве ссылок. Карты изображений
- •Глава 6. Проектирование web-сайта
- •Этапы проектирования сайта
- •Рекомендуемая литература
- •Содержание этапов работы по проектированию сайта
- •241036, Г. Брянск, ул. Бежицкая, 14
III. Работа в режиме дизайна: форматирование текста
Форматирование абзацев
Характеристики шрифта
Выравнивание текста и элементов
Форматирование списков
Форматирование абзацев
Форматирование (оформление) текста в Dreamweaver аналогично работе в текстовом редакторе. Чтоб определить стандартный абзац или заголовок, на панели свойств Properties используют раскрывающийся список Format.
Рис. 2. Панель свойств для настройки параметров абзаца, заголовков
ЗАДАНИЕ. Чтобы сделать текст заголовком или простым абзацем:
1. Наберите в режиме дизайна 2-3 абзаца текста или откройте готовый документ с текстом. Щелкните по абзацу или выделите в нем часть текста.
2. В списке Format выберите способ форматирования:
- чтобы сделать текст заголовком, выберите Heading 1, Heading 2, ... , Heading 6 (Heading 1 - самый крупный заголовок, за него отвечает тэг <H1> и т.д.). Выбранный стиль применяется ко всему абзацу.
- чтобы сделать текст абзацем (он отделится пустой строкой после абзаца), выберите Paragraph;
- чтобы сохранить в тексте ручное форматирование (например, вы выделяли фрагменты абзаца и отдельно им задавали размер, начертание и пр.), выберите Preformatted;
- чтобы удалить формат (оформление) абзаца, выберите None.
ЗАДАНИЕ. Измените характеристики шрифта.
Выделите текст (если никакой фрагмент не выделен - изменение применится к тексту, который вы вводите) и на панели свойств Properties в пункте Шрифт (Font) выберите комбинацию шрифтов (напр., Arial, Helvetica, sans-serif).
Браузеры показывают текст, используя 1й шрифт в комбинации (например, Arial), которая установлена в системе пользователя. Если не установлен ни один из шрифтов, то браузер отображает текст по своим настройкам.
Для удаления ранее указанных видов шрифтов выбирают Default (По умолчанию) – к выделенному тексту применится шрифт по умолчанию.
Рис. 3. Панель свойств Properties для настройки параметров шрифта
- Чтобы изменить начертание шрифта, нажмите кнопки Bold (Полужирный) или Italic (Курсив).
- Чтобы изменить размер шрифта (Size), выберите размер (1 до 7). Чтобы увеличить или уменьшить размер выделенного текста, выберите относительный размер (от +1 или –1 до +7 или –7).
- Чтобы изменить цвет (Color) текста, щелкните в панели свойств на цветовом поле , откроется окно – выберите цвет из палитры цветов браузера. В цветовом поле отразится код этого цвета (например, #090000).
Цвет текста изначально (по умолчанию) применяется тот, который задан в окне Page Properties (Параметры страницы). Если в этом окне цвет текста не был установлен, то по умолчанию текст отображается черным.
Выравнивание текста (по горизонтали)
Выравнивание текста (Align) на странице тоже настраивается на панели свойств кнопками - Влево, По центру, Вправо или По ширине.
Чтобы добавить отступ текста слева: выделите текст и в панели свойств щелкните на кнопке Добавить отступ (Text Indent) или Отменить отступ (Text Outdent) .
Команда отступа вставляет /удаляет в html-тэг <blockquote>, когда выделенный текст является абзацем или заголовком. Когда же выделенный текст является списком, то команда добавляет дополнит. теги <UL> или <OL>
