русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Переходим к созданию динамического веб-шаблона.


Дата добавления: 2015-07-09; просмотров: 972; Нарушение авторских прав


Создаем веб-узел.

Нажимаем "файл\создать"

В правом меню выбираем "Одностраничный веб-узел"

В появившемся окне выбираем "Одностраничный веб-узел"и прописываем путь, где будет располагаться узел.

Внимание!

Все изображения, которые были нарезаны в предыдущем уроке необходимо переместить в папку "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" желательно вставить в нижней левой части после того как будет готово меню.



<== предыдущая лекция | следующая лекция ==>
Часть 2. | Переходим к созданию таблицы для меню.


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.724 сек.