СОЗДАНИЕ ДРУГИХ СТИЛЕЙ СТРАНИЦ
Допустим, у нас есть желание организовать на одном сайте несколько дизайнов, или несколько страниц, различных по цветовой гамме. Также возможно создание стартовой страницы сайта. Это можно сделать двумя способами.
Первый способ
Перед нами стоит задача незначительных изменений в дизайне. К примеру, нам нужно на каждой странице иметь в шапке отдельную фотографию.
Как это сделать?
Сначала заготовим несколько изображений, оптимизированных под Интернет, т.е. одинакового размера и не очень большого веса (кб). Рассмотрим на примере одного из шаблонов (Рис. Тестовый шаблон)
Рис. Тестовый шаблон
Вы можете экспериментировать на новом проекте или на своем сайте.
Заменим фотографию в шапке. Перейдем на другую страницу, на которой фотография должна отличаться (в нашем примере - страница "О компании"). Найдем в дереве дизайна (F4) ту ячейку, в которой прописана фотография в шапке.
Рис. Вкладки "Проект" и "Страница"
Над пунктами в дереве дизайна видим две закладки "Проект" и "Страница". Когда включена вкладка "Проект" (включена она по умолчанию), то все изменения в дизайне прописываются для всех страниц. Вкладка "Страница" отвечает за возможность добавить изменения индивидуально для конкретной страницы. Что мы сейчас и сделаем. Включаем вкладку "Страница", выделив ячейку, где должна быть фото. Находясь на вкладке "фон", которая в нижней части экрана, жмем на иконку "загрузить с диска" напротив параметра "Изображение". Ищем в проводнике заготовленное фото. Открываем. (Рис. Открытие фото)
Рис. Открытие фото
Должна получиться следующая картинка (Рис. Замена фото на странице)
Рис. Замена фото на странице
Заметим, что фото прописалось только на одной странице "О компании". По такой же аналогии добавим на необходимые нам страницы разные фото. Переходим на страницу - меняем изображение на вкладке "Страница"
Рис. Замена фото на странице 2
Вверх
Как это сделать?
Сначала заготовим несколько изображений, оптимизированных под Интернет, т.е. одинакового размера и не очень большого веса (кб). Рассмотрим на примере одного из шаблонов (Рис. Тестовый шаблон)
Рис. Тестовый шаблон
Вы можете экспериментировать на новом проекте или на своем сайте.
Заменим фотографию в шапке. Перейдем на другую страницу, на которой фотография должна отличаться (в нашем примере - страница "О компании"). Найдем в дереве дизайна (F4) ту ячейку, в которой прописана фотография в шапке.
Рис. Вкладки "Проект" и "Страница"
Над пунктами в дереве дизайна видим две закладки "Проект" и "Страница". Когда включена вкладка "Проект" (включена она по умолчанию), то все изменения в дизайне прописываются для всех страниц. Вкладка "Страница" отвечает за возможность добавить изменения индивидуально для конкретной страницы. Что мы сейчас и сделаем. Включаем вкладку "Страница", выделив ячейку, где должна быть фото. Находясь на вкладке "фон", которая в нижней части экрана, жмем на иконку "загрузить с диска" напротив параметра "Изображение". Ищем в проводнике заготовленное фото. Открываем. (Рис. Открытие фото)
Рис. Открытие фото
Должна получиться следующая картинка (Рис. Замена фото на странице)
Рис. Замена фото на странице
Заметим, что фото прописалось только на одной странице "О компании". По такой же аналогии добавим на необходимые нам страницы разные фото. Переходим на страницу - меняем изображение на вкладке "Страница"
Рис. Замена фото на странице 2
Второй способ
Перед нами стоит задача значительных изменений в дизайне. К примеру, нам нужно на каждой странице иметь свой индивидуальный дизайн, который требует не только различных изображений, но и совершенно разной структуры и расположения элементов. Дизайн создается отдельно, а затем - привязывается к конкретным страницам, к каким - выбирает сам создатель. Новая созданная страница по умолчанию принимает стандартный дизайн, создаваемый изначально. Поменять дизайн с одного на другой, если у вас создано их несколько - можно в любой момент.
Вы можете попробовать на новом проекте, либо на сайте, имеющем готовый дизайн и наполнение.
Совет: перед тем, как создавать новый дизайн, завершите основные шаги по настройке основного дизайна, настройке модулей, настройке дизайна текста, подстройки под браузеры, потому как созданный новый дизайн будет независим от основного. И, если вы создадите их несколько (на разных страницах), потом заметите недочет, то исправлять придется во всех дизайна одно и тоже.
Итак, откройте какой либо проект (новый или созданный), зайдите на страницу, дизайн которой вы хотите изменить (в нашем примере - страница "О компании"). Нажмите F9, включив режим иконок редактирования сайта, зайдите в верхнем меню - Редактировать\Изменить страницу
Рис. Изменить страницу
В Редакторе страницы переходим на вкладку "Стили". Снизу прописан стандартный стиль, идущий по умолчанию - "default.css". Жмем на иконку справа "Копировать файл стилей для текущей страницы" (Рис. Создания нового стиля страницы)
Рис. Создания нового стиля страницы
Затем Выбираем новый добавленный стиль, обычно он называется также, как и имя страницы (в нашем случае about.html), поэтому выбираем из предложенных вариантов - about.css (Рис. Выбор нового стиля страницы). Жмем кнопку "Сохранить".
Рис. Выбор нового стиля страницы
После того, как задан для страницы новый стиль, мы можем изменять дизайн так, как нам хочется, вплоть до создания новой карты дизайна, до удаления и добавления новых функциональных блоков, и это никак не повлияет на остальные страницы. Одно условие - наполнение сайта остается таким же, независимо от стиля. При работе с проектом, мы всегда можем посмотреть, какой стиль какой странице назначен. Достаточно включить список страниц (F11). На (Рис.Список страниц) видим:
default.css - Главная - стандартный стиль страниц
about.css - О компании - индивидуальный стиль страницы
Страницы, у которых не подписан стиль страницы - считаются также стандартными (стиль default)
Рис. Список страниц
Таким образом мы в любое время, при надобности, можем назначить новый созданный стиль страниц (к примеру about.css) любой странице, зайдя в пункт "Изменить страницу", на вкладку "Стили" и выбрать один из стилей, которые мы создали, или создадим.
СМОТРЕТЬ следующий урок
Вверх
Вы можете попробовать на новом проекте, либо на сайте, имеющем готовый дизайн и наполнение.
Совет: перед тем, как создавать новый дизайн, завершите основные шаги по настройке основного дизайна, настройке модулей, настройке дизайна текста, подстройки под браузеры, потому как созданный новый дизайн будет независим от основного. И, если вы создадите их несколько (на разных страницах), потом заметите недочет, то исправлять придется во всех дизайна одно и тоже.
Итак, откройте какой либо проект (новый или созданный), зайдите на страницу, дизайн которой вы хотите изменить (в нашем примере - страница "О компании"). Нажмите F9, включив режим иконок редактирования сайта, зайдите в верхнем меню - Редактировать\Изменить страницу
Рис. Изменить страницу
В Редакторе страницы переходим на вкладку "Стили". Снизу прописан стандартный стиль, идущий по умолчанию - "default.css". Жмем на иконку справа "Копировать файл стилей для текущей страницы" (Рис. Создания нового стиля страницы)
Рис. Создания нового стиля страницы
Затем Выбираем новый добавленный стиль, обычно он называется также, как и имя страницы (в нашем случае about.html), поэтому выбираем из предложенных вариантов - about.css (Рис. Выбор нового стиля страницы). Жмем кнопку "Сохранить".
Рис. Выбор нового стиля страницы
После того, как задан для страницы новый стиль, мы можем изменять дизайн так, как нам хочется, вплоть до создания новой карты дизайна, до удаления и добавления новых функциональных блоков, и это никак не повлияет на остальные страницы. Одно условие - наполнение сайта остается таким же, независимо от стиля. При работе с проектом, мы всегда можем посмотреть, какой стиль какой странице назначен. Достаточно включить список страниц (F11). На (Рис.Список страниц) видим:
default.css - Главная - стандартный стиль страниц
about.css - О компании - индивидуальный стиль страницы
Страницы, у которых не подписан стиль страницы - считаются также стандартными (стиль default)
Рис. Список страниц
Таким образом мы в любое время, при надобности, можем назначить новый созданный стиль страниц (к примеру about.css) любой странице, зайдя в пункт "Изменить страницу", на вкладку "Стили" и выбрать один из стилей, которые мы создали, или создадим.
СМОТРЕТЬ следующий урок