|
Еще один урок по созданию
динамического веб-шаблона.
Это продолжение урока о
нарезке фотографии в Photoshop ...
Переходим к созданию
динамического веб-шаблона.
Создаем веб-узел.
Нажимаем
"файл\создать"
В правом меню выбираем
"Одностраничный веб-узел"
В появившемся окне выбираем
"Одностраничный веб-узел" и прописываем путь, где будет располагаться узел.
Внимание!
Все изображения, которые были нарезаны в
предыдущем уроке необходимо переместить в папку "Images"
нового узла.
После этого создаем новую пустую
страницу. Нажимаем "Создание новой обычной страницы"
Создаем таблицу 1x1
Нажимаем правой кнопкой на
таблице и выбираем "Свойства таблицы"
Задаем параметры таблице:
нажмите, чтобы увеличить.
-
Выравнивание - по центру
-
ширина - 100%
-
Поля ячеек - 0
-
интервал ячеек - 0
-
Размер границы - 0
И нажимаем кнопку "OK"
В этой таблице создаем ещё
таблицу 4x1
Этой таблице зададим такие же
параметры, как и предыдущей.
нажмите, чтобы увеличить.
-
Выравнивание - по центру
-
ширина - 100%
-
Поля ячеек - 0
-
интервал ячеек - 0
-
Размер границы - 0
И нажимаем кнопку "OK"
Переходим в самую верхнюю ячейку и нажимаем на
ней правой кнопкой. Выбираем свойства ячейки.
В открывшемся окне выставляем параметры:
-
Задать высоту - 201 точек (Высота
должна быть равна высоте логотипа, который был нарезан с помощью
Photoshop)
-
Использовать фоновый рисунок. (Задается
рисунок black1X1)
Переходим на ячейку ниже и делаем тоже самое,
только высота на этот раз должна быть ровна высоте файла "Line_001"
и этот файл выбирается в качестве фона.
Для ячейки ниже необходимо задать только фон.
Изображение под именем "Fon" Высоту выставлять
не нужно.
Для последней ячейки используется в качестве фона
изображение под именем "Line_002"/
Для этой ячейки необходимо так же выставить параметры высоты.
Нажмите кнопку просмотр для того, чтобы убедиться
в правильности проделанной работы.
Вот, что должно получиться:
Вставляем логотип. Для этого:
В верхней ячейке вставьте таблицу
1x3
Перейдите в свойства этой таблицы и задайте параметры:
Нажмите, чтобы увеличить.
-
Выравнивание - по центру
-
Ширина - 100% (Этот параметр можно изменить
под себя)
-
Высота - 201 точка (Этот параметр должен быть
равен высоте ячейки, в которой строится таблица, и высоте логотипа)
-
Поля ячеек - 0
-
Интервал ячеек - 0
-
Размер границы - 0
Выделите все три ячейки новой таблицы, нажмите
правую кнопку и прейдите в свойства ячейки:
Задайте параметры:
-
Выровнять по горизонтали - по центру
-
Выровнять по вертикали - по верхнему краю
-
Высота - 201 точка (Этот параметр должен быть
равен высоте логотипа и таблицы)
Снимите выделение, и перейдите к свойствам первой
с левого угла ячейки и задайте ей ширину, равную ширине логотипа. В моём случае
- это 715 точек.
Вставьте логотип в ячейку.
Нажмите "Вставка\Рисунок\Из файла..."
В появившемся окне выберете файл с именем
"Logo"
Нажмите, чтобы увеличить.
Вот, что получилось после добавления логотипа и
названия сайта:
Нажмите, чтобы увеличить.
Во вторую ячейку
необходимо вставить таблицу с количеством ячеек, которое Вам необходимо. Я не
буду на этом акцентировать внимание, просто покажу результат:
Нажмите, чтобы увеличить.
В ячейках с навигацией я поставил размеры в 120
точек, последняя ячейка не имеет строгого размера - эта ячейка будет
растягиваться или уменьшаться в зависимости от разрешения монитора конечного
пользователя.
Переходим на ячейку ниже.
В ней необходимо построить таблицу 1x5
Переходим в свойства данной таблицы и выставляем параметры:
Нажмите, чтобы
увеличить.
-
Выравнивание - по центру
-
ширина - 100%
-
Поля ячеек - 0
-
Интервал ячеек - 0
-
Размер границы - 0
Выделите все ячейки и задайте такие параметры:
Первой и последней ячейке задайте ширину, которую
вам необходимо. У меня это примерно 200 точек.
Второй и четвертой ячейкам необходимо задать
ширину равную 1 точке и вставить в них изображения под именем "Line_003".
Что получилось в результате можно посмотреть ниже:
Нажмите, чтобы
увеличить.
Остальное наполнение шаблона индивидуально для
каждого. Могу отметить лишь, что в первой, последней, и центральной ячейках
создаются таблицы. Для центральной таблицы необходимо сделать следующее:
Выделите таблицу полностью и нажмите
"Формат\Динамический веб-шаблон\Управление изменяемыми областями "
Если Вы еще не сохранили документ, как
динамический Веб-Шаблон, то у Вас появиться окно, в котором Вас об этом
предупредят. В этом окне необходимо нажать "ДА"
Нажмите, чтобы
увеличить.
После этого необходимо сохранить документ, выбрав
тип файла - Динамический Веб-Шаблон.
Далее необходимо добавить изменяемую область:
Изображение с названием "Salon"
желательно вставить в нижней левой части после того как будет готово меню.
На этом данный урок окончен.
|
