
- •Часть 1. Компьютерная графика и web-дизайн. Теоретические основы.
- •Цветовая модель rgb
- •Цветовая модель cmyk
- •Цветовая модель lab
- •Структура гиперссылки
- •Категории гиперссылок
- •Формы гиперссылок
- •Дизайн гиперссылок
- •Принципы юзабилити
- •Назначение навигации
- •Глобальная навигация
- •Нарушения навигации
- •Организация навигации при помощи закладок
- •О блако тегов
- •1. Сбор страниц
- •2. Индексирование страниц
- •Проблемы поисковых систем
- •Создание системы поиска
- •Интерфейс поиска
- •Дизайн страницы результатов
- •Отрицательный результат поиска
- •Принципы разработки отдельных страниц Главная страница
- •Splash-страница
- •Специальные навигационные страницы
- •Страницы для обратной связи
- •Выходные страницы
- •Страницы с фиксированными размерами
- •Масштабирование по горизонтали
- •Введение в web-типографику
- •Правила составления текстов для web
- •Главные правила текстового дизайна
- •Создание логотипа
- •Выбор цветовой гаммы сайта
- •2. Эксплуатационный опрос
- •3. Определение технических подробностей
- •4.Изучение аудитории
- •5.Анализ отрасли
- •6. Составление первичной документации
- •1. Структурирование сайта с точки зрения контента
- •Основные ошибки клиента
- •2. Создание карты сайта
- •3. Установка соглашений об именовании
- •1. Разработка концепции дизайна
- •2. Выверка
- •3. Создание графических шаблонов и руководства по стилю оформления
- •1. Подготовка к производству
- •2. Заключение договора о хостинге
- •3. Формирование файловой структуры
- •4. Компоновка страниц
- •5. Контроль качества
- •1. Передача сайта
- •2. Запуск
- •3. Сопровождение
- •Баннер с позиции рекламодателя
- •Баннер с позиции дизайнера
- •Часть 2. Разработка web-узлов. Практическое задание.
- •1. Запись данных: insert
- •2. Чтение данных: select
- •3. Обновление данных: update
- •4. Удаление данных: delete
- •Описание
- •Синтаксис
- •Описание
- •Синтаксис
- •Синтаксис
- •Аргументы
- •Описание, примеры
- •Связь между окнами
- •Строка параметров
- •Основные кроссбраузерные параметры
- •Заметки
- •Конструкция включений require
- •Конструкция включений include
- •Часть 3. Верстка и допечатный процесс.
- •1. Каждая статья должна иметь прямоугольную форму и состоять из прямоугольных блоков
- •2. Обтекаемая текстом фотография должна занимать по ширине целое число колонок
- •3. Колонку текста нельзя прерывать элементами графического дизайна
- •4. При вертикальной верстке элементы статьи должны располагаться в строгом порядке: 1) фотография, 2) подпись к фотографии, 3) заголовок, 4) текст
- •5. Из нескольких иллюстраций к статье следует выбирать одну ведущую
- •1. Материалы должны быть явно отделены друг от друга.
- •2. Материалы должны выстраиваться в иерархию.
- •3. Заголовки соседних материалов не должны слипаться.
- •4. Следует соблюдать иерархию фотоматериалов.
- •5. Полоса должна быть визуально сбалансирована.
- •6. Больше трёх-четырёх гарнитур на полосе использовать нельзя.
- •Часть 4. Операционные системы и компьютерные сети. Вопрос №1. Диапазоны ip-адресов локальных сетей, их назначение
- •Вопрос №2. Прямые и обратные dns-запросы, структура домена .In-addr.Apra
- •Вопрос №3. Напишите консольные команды и их параметры, позволяющие запускать, останавливать и перезапускать сервис Apache, а также просматривать прослушиваемые сервисами порты локального хоста
- •Вопрос №5. Напишите инструкции файла настроек Apache, запрещающие в текущем каталоге доступ ко всем файлам с расширением log отовсюду, кроме локального хоста
- •Вопрос №6. Напишите инструкции файла настроек Apache, разрешающие доступ в текущий каталог только прошедшим аутентификацию пользователям
- •Вопрос №7. Напишите инструкции файла глобальных настроек Apache, организующие виртуальный хост Вопрос №8. Опишите назначение поставляемых в пакете веб-сервера Apache утилит htpasswd, ab
Структура гиперссылки
У гиперссылки два конца — страница, на которой она находится и страница, на которую она приводит. Чтобы улучшить удобство использования, необходимо следовать двум принципам:
Риторика ухода. Четко объясните почему они должны уйти с текущей страницы и что они смогут найти там, куда ведет ссылка.
Риторика прибытия. Страница, на которую переходит пользователь, должна быть такой, чтобы пользователи разобрались в новом контексте и четко связанной с той страницей, откуда они пришли.
Категории гиперссылок
Структурные (навигационные) ссылки. По ним пользователи переходят к другим разделам сайта. (кнопка возврата на главную страницу).
Перекрестные ссылки. Чаще всего это подчеркнутые слова в тексте (хотя могут быть и изображения).
Ассоциативные ссылки — ссылки типа «смотрите также».
Формы гиперссылок
Текстовые ссылки
Наиболее простой и распространенный вариант. Текстовые ссылки являются универсальными, т.е. их можно использовать как в навигации, так и в качестве перекрестных ссылок. Время загрузки текстовых ссылок минимально. Их легко сделать динамическими при помощи CSS. При стандартном оформлении эти ссылки легко различимы на странице (однако если изменить стандартное оформление такие ссылки могут стать «невидимыми»).
Аннотированные текстовые ссылки
Графические текстовые ссылки
Часто используются в навигации. Представляют собой текстовую надпись, выполненную в виде графического изображения. Эти ссылки грузятся медленнее текстовых и не отображаются у тех пользователей, которые отключают графику.
Кнопки
Практичность ссылок сайта может улучшиться, если сделать их похожими на кнопки. В результате пользователь однозначно воспримет элемент графического интерфейса как активный. Но к малейшему допущению трехмерности в дизайне сайта следует относиться осторожно1.
Пиктограммы
Пиктограмма — это небольшая картинка, размещаемая на экране для того, чтобы представить какое-либо действие или содержимое. Могут использоваться в отдельности или в сочетании со словами. Наглядная маленькая пиктограмма может сказать даже больше, чем несколько слов. Таким образом, пиктограммы могут экономить место на сайте, участвовать в создании его стиля и повышать удобство использования.
Карты изображений
Карта изображения — большое изображение, имеющее области, активизируемые щелчком мыши. Они позволяют дизайнеру создавать достаточно интересные интерфейсы.
Баннеры
Элементы GUI
Для реализации ссылок можно использовать стандартные элементы графического интерфейса Windows. Наиболее часто используются раскрывающиеся списки и выпадающие меню.
Выпадающие меню позволяют экономить полезное пространство на странице, однако обладают рядом недостатков:
— Необходимость полного просмотра. Для того чтобы увидеть содержимое меню, по нему необходимо щелкнуть мышью. При простом просмотре страницы элементы меню не видны.
— Затрудненность просмотра. Разработчики не могут регулировать шрифт, пробелы и другие параметры форматирования списка меню, чтобы сделать его более удобным для чтения
Стандартные элементы графического интерфейса Windows, как правило, не вписываются в стиль сайта.