- •Курс лекций по дисциплине «Web-дизайн»
- •Лекция 1 Тема: Основные понятия Web-дизайна
- •Понятие web- дизайна
- •Краткие итоги
- •Лекция 2 Тема: Технологии web-дизайна
- •Логическая и физическая структура сайта
- •Ширина документа
- •Фиксированный макет
- •«Резиновый» макет
- •Высота документа
- •Объекты веб-страницы прямоугольны
- •Активное использование рисунков
- •Разрезание изображения на фрагменты
- •Применение фонового рисунка
- •Картинки вместо текста
- •Одноколонная сетка
- •Двухколонная сетка
- •Трехколонная сетка
- •Лекция 3 Тема: Принципы компоновки и алгоритм создания web- сайта
- •Принципы компоновки web- сайта
- •Статическая компоновка страницы
- •Динамическая компоновка страницы
- •Элементы web-страницы
- •Лекция 4 Тема: Графические изображения. Особенности веб-графики
- •Графика для web
- •Возможности оптимизации
- •Лекция 5 Тема: Структура html документа
- •Основные понятия html
- •Структура html-документа
- •Название документа title
- •Пример простого html-документа
- •Пример использования фонового рисунка
- •Лекция 6 Тема: Цветовые спецификации. Графические элементы
- •Цветовые спецификации
- •Символьная нотация
- •Соответствие формата rgb и символьной нотации
- •. Графические элементы
- •Горизонтальные линии
- •Рисунки
- •Лекция 7 Тема: Ввод текстовой информации
- •Управление переводом строки
- •Маркированный список
- •Нумерованный список
- •Список определений
- •Форматирование текста
- •Контейнер div
- •Отступы
- •Таблицы
- •Лекция 8 Тема: Гиперссылки
- •Универсальный идентификатор ресурсов url
- •Правила записи ссылок
- •Внутренние ссылки
- •Ссылки на документы различных типов
- •Лекция 9 Тема: Создание Web- узла с помощью мастера (редактор Front Page).
- •Создание web-узла с помощью мастера
- •Редактирование содержимого общих областей.
- •Свойства страницы
- •Проектирование и создание таблицы
- •Лекция 10 Тема: Основные принципы работы с dw
- •Запуск редактора
- •Выбор интерфейса
- •Определение и настройка сайта
- •Лекция 11 Тема: Работа над web-сайтом
- •Создание новой веб-страницы
- •Лекция 12 Тема: Использование графических изображений
- •Вставка графики на веб-страницу
- •Лекция 13
- •Линейки
- •Дополнительная вспомогательная разметка
- •Таблицы
- •Создание таблиц
- •Граница таблицы
- •Форматирование таблицы
- •Табличный дизайн веб-страницы
- •Задание фреймовой структуры веб-страницы
- •Заполнение фреймов
- •Лекция 15 Тема: Создание и использование форм
- •Лекция 16 Тема: Использование шаблонов
- •1 Способ. Создание шаблона на основе существующей веб-страницы
- •2 Способ Создание нового шаблона
- •Лекция 17 Тема: Свободно позиционируемые элементы
- •Лекция 18 Тема: Использование Web-анимации
- •Лекция 19 Тема: Способы размещения сайтов в сети Интернет
Задание фреймовой структуры веб-страницы
Фреймовая структура сайта должна быть задана в самом начале его проектирования. После выполнения команды меню File> New открывается диалоговое окно New Document. В этом окне переходим на вкладку General и в ней выбираем пункт Framesets (Набор фреймов). В появившемся чуть правее окне Framesets (Набор фреймов) подбираем подходящий шаблон фреймовой структуры веб-страницы (набор фреймов). Символический вид выделенной структуры будет отображаться в области Preview (Предварительный просмотр) диалогового окна New Document.
Здесь представлены лишь пятнадцать наиболее распространенных наборов фреймов. Можно, конечно, придумать и другие варианты, но опыт показывает, что не стоит создавать слишком сложные структуры.
Нажимаем кнопку Create (Создать)и получаем соответствующую заготовку сайта. Здесь мы описали задание набора фреймов сайта на тот момент, пока у нас еще нет самой веб-страницы. Но Dreamweaver MX 2004 дает возможность задать набор фреймов и тогда, когда основная веб-страница уже создана. В этом случае мы переходим на вкладку Layout панели инструментов, где нажимаем кнопку Frames (Фреймы). При нажатии на эту кнопку откроется целый список возможных наборов фреймов полностью повторяющий описанный выше список, открывающийся в диалоговом окне New Document .
В этом окне следует выбрать один из возможных наборов фреймов сайта. Миниатюры пиктограмм отображаются перед названием соответствующей структуры.
Ниже приведены краткие описания наборов фреймов, вызываемых с помощью кнопки Frames вкладки Layout панели инструментов.
Естественно, предложенные варианты не являются исчерпывающими. Здесь приведены лишь основные из них, наиболее часто используемые. На их базе можно строить свои новые наборы фреймов, в том числе и как комбинации перечисленных.
Выбор и редактирование фрейма
Для того чтобы задать свойства определенного фрейма или заполнить его содержимым, предварительно фрейм следует выделить (сделать текущим). Сделать это в Dreamweaver MX 2004 можно (как, впрочем, и все остальное) несколькими способами. Так, для выделения фрейма можно, удерживая нажатой клавишу Alt, просто щелкнуть левой кнопкой мыши на этом фрейме. Но удобнее пользоваться панелью Frames (Фреймы). Для ее открытия выполним команду меню Window •Frames ( Окно • Фреймы). Панель Frames появится в колонке панелей инструментов у правой границы рабочей области Dreamweaver MX 2004. На этой панели схематично будут отображаться все имеющиеся в данном наборе фреймы Выбранный фрейм будет помечен черной рамкой. Наборы фреймов имеют общую толстую светло-серую рамку.
Для выбора нужного фрейма из текущего набора фреймов на панели Frames достаточно просто щелкнуть левой кнопкой мыши по изображению нужного фрейма. Щелчок по границам фрейма приводит к выделению сразу целого набора фреймов.
Редактирование свойств набора фреймов
Если необходимый фрейм выделен, на панели Properties отображаются его свойства. В центральной части панели Properties размещаются поля ввода основных общих свойств данного набора фреймов. В раскрывающемся списке Borders (Границы) задаем наличие или отсутствие границ у набора фреймов. Здесь доступны всего три варианта:
• Yes (Да) — границы есть;
• No (Нет) — границ нет;
• Default (По умолчанию) — установлено по умолчанию.
Ниже расположено поле ввода Border width (Ширина границы), в котором задаем толщину границы (если она есть) в пикселах. Если граница есть, но толщина ее имеет нулевое значение, то граница не будет видна. Также рекомендуется задавать нулевое значение и в случае отсутствия границы. Еще правее находится поле ввода Border color (Цвет границы) и раскрывающаяся палитра, которые служат для задания цвета границы набора фреймов. По умолчанию обычно используется светло-серый цвет границ. В нижней части панели Properties расположены поля ввода высоты (или ширины) набора фреймов, а так же единицы ее измерения. В поле ввода Value (Значение) как раз и вводится само значение высоты (или ширины) набора фреймов. Единицы измерения указываются в раскрывающемся списке Units (Единицы).Так, высота (или ширина) набора фреймов может указываться:
• в пикселах (Pixels);
• процентах (Percent);
• без указания конкретного размера, в этом случае набор фреймов будет занимать все оставшееся от других наборов фреймов место (Relative). При выборе последнего пункта высота (или ширина) набора фреймов, указанная в поле ввода Value, уже не имеет значения. К аналогичному результату приводит и ввод в поле Value символа * («звездочка»). В правой части панели Properties размещено схематическое изображение наборов фреймов.
Редактирование свойств фрейма
Панель Properties, определяет основные свойства набора фреймов в целом. Кроме того, можно задавать и свойства конкретного фрейма из этого набора. При выделении какого-то фрейма из текущего набора фреймов на панели Properties отражаются его свойства