- •Часть 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
Страницы с фиксированными размерами
Выбирая размер страницы, следует придерживаться следующих правил:
Главная цель: избежать прокрутки по горизонтали.
По вертикали страницы должны прокручиваться не более, чем на три экрана. Большая часть посетителей сайта предпочитают беглое ознакомление с его содержимым вдумчивому чтению.
Самые важные элементы должны быть в видимой области
В видимой области страницы должны быть подсказки о её продолжении внизу. Линия, которая разрезает страницу по горизонтали в том мечте, где заканчивается первый экран, называется сгибом.
Нельзя привязывать сайт к жестко заданному разрешению. Некоторые дизайнеры помещают надпись: «Этот сайт удобнее просматривать при разрешении 800x600», что невежливо по отношению ко всем пользователям с другими настройками.
Больше всего на отображение страницы влияет размер экрана пользователя. В современных компьютерных системах в основном используются разрешения 1024x768 и 1280x1024, реже 800x600 и 1600x1200. Разрешение 640x480 — это наихудший вариант для PC, используется крайне редко.
Пользователи с большими экранами могут не разворачивать браузер полностью, оставляя его в небольшом окне. Сам браузер также сужает жизненное пространство за счет границ и полосы прокрутки по горизонтали, а по вертикали — за счет заголовка, навигационных панелей и т.д. Т.о., доступная площадь при разрешении 800x600 может составить 760x410.
Масштабирование по горизонтали
На большом экране страница с фиксированными размерами может, теряться среди неиспользуемого пространства, выглядеть «прижатой» к углу. Для избежания этого эффекта, могут использоваться следующие приемы:
Центрирование страницы. При этом ощущение пустого пространства немного уменьшается, а дизайн выглядит более сбалансированным.
Размещение графического наполнителя в правой части сайта. Наполнитель необходимо выставить задним фоном, чтобы при уменьшении размеров экрана страница обрезалась справа, а не прокручивалась. В качестве наполнителя можно использовать сплошной контрастный цвет или неповторяющуюся текстуру.
Масштабирование структуры страницы – так называемая «эластичная» верстка. Содержимое сайта занимает все доступное ему пространство окна браузера. При этом обычно сохраняются пропорции областей, на которые сайт разбивается по горизонтали (например, зона навигации занимает 25% от ширины окна, зона контента – 75%, ширина плавающего новостного блока – 25% и т. д.).
Чаще всего этот вариант не используется в чистом виде, поскольку на сайте обычно присутствует левая или правая навигация, основанная на графических элементах, которая должна занимать пространство фиксированной ширины. Таким образом, зачастую масштабируется только зона контента.
Масштабирование всего содержимого страницы. Несложно написать JavaScript-сценарий, который будет изменять подгонять все элементы страницы к размерам окна браузера, включая шрифты и графику. В настоящее время возможность масштабирования всего содержимого страницы поддерживается непосредственно браузерами, поэтому использование данного варианта потеряло смысл.
Позиционирование блоков. Если контент сайта оформлен как множество относительно самостоятельных блоков, то их можно по-разному выстраивать при различных разрешениях мониторов: элементы, которые при небольшой ширине окна браузера располагались вертикально, могут располагаться горизонтально, когда доступно широкое пространство. В этом случае возможно добиться эстетической привлекательности и удобства восприятия независимо от размеров монитора, но далеко не у многих сайтов контент можно безболезненно разбить на самостоятельные блоки. Кроме того, верстка и тестирование такой структуры требуют множество застрат.
Выбор между «жесткой» и «эластичной» версткой сделать не всегда легко: оба варианта имеют как достоинства, так и недостатки. «Эластичная» верстка лучше всего подходит для сайтов, содержащих большое количество разнообразного контента (развлекательных порталах). «Жесткая» верстка обеспечивает более точное позиционирование содержимого и позволяет создать максимально удобный для чтения и восприятия макет. Следует отметить, что большинство англоязычных сайтов используют исключительно «жесткую» верстку.
9. Работа с текстовым контентом в web.