- •Курс лекций по дисциплине «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 Тема: Способы размещения сайтов в сети Интернет
2 Способ Создание нового шаблона
Создание первым способом начинается с команды меню File • New. Как всегда, в этом случае откроется диалоговое окно New Document. На вкладке General (Общее) выбираем список Category (Категории). В нем находим и выделяем категорию Template page (Шаблонная страница).Среди восьми возможных, выбираем шестой вариант — HTML template (Шаблон HTML).
И сохраняем документ (Save as)
Изменяемые области шаблона
Участки шаблона веб-страницы, которые можно редактировать (изменять их содержимое или добавлять новое), принято называть изменяемыми областями шаблона. Соответственно, те участки шаблона, которые будут являться общими для всех веб-страниц данного сайта, не должны подвергаться никаким изменениям. Поэтому их принято называть неизменяемыми областями шаблона веб-страницы. Достаточно специально задать только изменяемые области шаблона.
Для создания изменяемой области выполняем команду меню Insert • Template Objects • Editable Region (Вставить •Шаблоны объектов • Изменяемая область). По этой команде открывается диалоговое окно New Editable Region (Новая изменяемая область).
Создание веб-страницы на основе шаблона
Когда шаблон окончательно подготовлен (на самом деле, наш шаблон еще не готов, но об оставшихся моментах мы поговорим чуть позднее) и сохранен, можно приступать к созданию веб-страниц сайта на его основе. Для создания новой веб-страницы на основе шаблона выполняем команду меню File • New. Эта команда открывает уже хорошо знакомое нам диалоговое окно New Document. Только на этот раз мы откроем вкладку Templates. При этом изменится и название самого окна, теперь это — New from Templates (Новый из шаблонов). Диалоговое окно разделено, как обычно, на три области. В крайней левой области размещен список Templates for (Шаблоны для). В этом списке перечислены все имеющиеся у нас сайты. Выбираем из них наш последний сайт — piterpivo. Вместе с этим чуть левее от первого списка появится новый список Site «piterpivo», содержащий все имеющиеся шаблоны выбранного сайта. Мы выбираем первый шаблон shablonOl. В последней области диалогового окна тут же откроется окошко предварительного просмотра внешнего вида выбранного шаблона Preview.
Под окном предварительного просмотра внешнего вида шаблона расположен флажок Update page when template changes (Обновить страницу при изменении шаблона). Он установлен по умолчанию, и в этом случае вы сможете изменять на веб-странице только информацию, размещенную в изменяемых областях. Но если понадобится для данной веб-страницы внести изменения в сам шаблон, этот флажок необходимо снять. Остается только нажать кнопку Create в правом нижнем углу диалогового окна New from Template. Созданная Dreamweaver MX 2004 веб-страница на первый взгляд ничем не будет отличаться от самого шаблона или обычной веб-страницы. Та же таблица разметки, те же изображения, та же изменяемая область и т. д. Однако при перемещении указателя мыши по пространству веб-страницы мы замечаем, что указатель изменяет свой вид в разных областях этой веб-страницы. А потом выясняется, что внести изменения в данную страницу мы можем только в некоторые ее области. На остальных участках указатель мыши принимает вид перечеркнутого кружочка. При редактировании такой веб-страницы в режиме отображения HTML-кода HTML-код не изменяемых областей окажется недоступным и будет отображаться светло-серым цветом.
Если в ходе создания веб-страницы на основе шаблона возникла необходимость внести изменения в сам шаблон, то его можно открыть командой меню Modify • Templates • Open Attached Template (Изменить • Шаблоны • Открыть прикрепленный шаблон). В результате шаблон будет открыт в отдельном документе. После внесения необходимых изменений не забудьте его сохранить.
В случае когда в веб-страницу, созданную на основе шаблона, требуется внести серьезные изменения, в том числе затрагивающие не только изменяемые области, но и многие другие, можно «открепить» данную веб-страницу от шаблона. Для этого выполняем команду меню Modify • Templates • Detach from Template (Изменить • Шаблоны • Отделить от шаблона). В этом случае предоставляется возможность полностью редактировать всю веб-страницу. При этом сам шаблон не изменяется.
Вопросы для закрепления.
Что такое «шаблон»?
Назначение шаблона.
Назовите два способа создания шаблонов»
Домашние задание: Подготовить шаблон сайта.