Лабораторная работа 23 Создание и сохранение страниц на ВебУзле
Работа добавлена на сайт samzan.net:
Лабораторная работа 2-3
Создание и сохранение страниц на Веб-Узле. Создание динамического веб-шаблона.
Итак, Мы создали наш Веб-Узел и теперь будем его наполнять страницами.
Список страниц, которые мы создадим:
Главная страница (Создаётся автоматически и имеет название index.htm)
Об авторе
Контакты (на этой странице будет форма отправки писем создателю сайта на его e-mail)
Галерея (Создание галереи из изображений)
Видео (страница с видео On-Line)
Аудио (Страница с аудио On-Line)
Поиск по сайту
Дальнейшие пункты списка Вы можете добавлять сами при необходимости....
Создание новой страницы:
Нажмите кнопку "Создание новой обычной страницы"
Не наполняя её содержимым сохраняем её. Нажимаем "Файл"\"Сохранить как..."
В появившемся окне необходимо убедиться в том, что страница сохраняется в наш веб-узел. Для этого необходимо посмотреть параметр "Папка"
После этого нажимаем на кнопку "Изменить" рядом с параметром "Название". В появившемся окне прописываем название страницы. (название можно писать кириллицей, т.е. русскими буквами)
По списку у нас идет "Об Авторе"
В поле "Имя Файла" необходимо ввести название страницы, но на латинице, т.е. например "ob-avtore"
После этого можно убедиться, что страница создана. Для этого перейдем во вкладку "Веб-узел" и увидим, что наша новая страница создалась и размещена на узле.
Таким же образом создаём все остальные страницы, которые мы запланировали.
Для изменения названия главной страницы, необходимо нажать на ней правой кнопкой мыши и выбрать "Свойства"
В открывшемся окне необходимо изменить параметр "Название" на то, что Вы хотите. Например - "Домашняя страница" или "Главная"
Теперь нам осталось создать динамический Веб-Шаблон, оформить визуально страницы, и наполнить их информацией.
Создание динамического веб-шаблона.
Для чего нужен динамический веб-шаблон. Если говорить коротко, то он предназначен для того, чтобы Вы, как администратор изменяли и дополняли одну страницу своего сайта, а при ваших действиях с этой страницей, изменялись и все остальные страницы, к которым прикреплена данная страница. Это коротко. Более подробно можно найти здесь. (сайт office.microsoft.com)
- Для начала необходимо создать обычную страницу. Нажимаем на "Создание новой обычной страницы".
2. Теперь обратимся к общей структуре создания нашего сайта - как, и где будут располагаться элементы, и т.д.
- Выбрав структуру, её необходимо где-то описать. Это можно сделать на обычном листе бумаги. Создаем структуру в виде изображения ниже.
3. Итак, имея структуру нам необходимо перевести её в таблицы, чем и займемся.
Создаём таблицу - 1x1
4. На новой таблице нажимаем правой кнопкой мыши и выбираем "свойства таблицы."
5. В появившемся окне вводим параметры, как на рисунке:
- Выравнивание - по центру
- Задать ширину -100 процентов
- Поля ячеек - 0
- Интервал ячеек - 0
- Размер границы - 0
- Нажимаем кнопку "ОК"
Эта таблица будет основой для нашей странице.
В этой таблице нам предстоит создание ещё нескольких таблиц.
Первая таблица, которую мы создадим будет относиться к шапке сайте. Создаём в новой таблице ещё одну таблицу, но теперь на 3 ячейки, т.к. шапка сайта состоит из 3 элементов - Логотип, баннер, поиск.
Этой таблице задаем такие же параметры, как и предыдущей. Можно задать и другие, например ширина - 1024 точек, это надо делать, когда сайт пишется под определенное разрешение экрана.
В данном уроке мы будем делать сайт, который будет иметь строгие размеры для поиска и логотипа, я часть с баннером будет уменьшаться или увеличиваться в зависимости от разрешения экрана пользователя.
7. Теперь необходимо задать точные размеры для ячейки с логотипом и для ячейки с поиском.
- Заранее сделать логотип, и он имеет размеры - ширина - 300, высота - 186 точек. Его необходимо поместить в папку "Images" на Вашем "Веб-Узле"
- Нажимаем правой кнопкой на первой ячейке, где должен располагаться логотип и выбираем "Свойства Ячейки"
- Задаём параметры ячейки:
- Выравнивание по горизонтали - "По центру"
- Ширина - 300 точек
- Высота - 186 точек.
10. Нажимаем кнопку "Вставка"\ "Рисунок" \ "Из Файла..." и выбираем логотип:
11. Выберете оставшиеся две ячейки таблицы и назначьте им высоту равную первой ячейке.
12.Выберете оставшиеся две ячейки таблицы и назначьте им высоту равную первой ячейке.
"Свойства ячейки"
"Задать высоту" - 186 в точках.
13. Задавать размеры ширины для ячейки с поиском пока не будем, это мы сделаем, когда установим форму для поиска.
14. Добавьте ещё одну таблицу ниже той, что мы сделали для шапки. Размер таблицы 1x3
Вот, что должно получиться:
Этой таблице задайте такие же параметры, как и предыдущей:
15. Выберете первую ячейку и задайте ей ширину, равную ширине логотипа (Это делается по желанию. Можно задать и любые другие размеры.)
16. Ниже создайте ещё одну таблицу с такими же параметрами. Эта таблица для "Низа сайта", там будут располагаться счетчики.
Примечание! Нижнюю таблицу не обязательно делать с тремя ячейками. Достаточно и одной. Для счетчиков все равно надо будет делать свою таблицу.
Выделите все ячейки всех таблиц, перейдите в "Свойства Ячейки" и задайте параметр "Выровнять по вертикали:" - "По верхнему краю"
Если текст в ячейках не выровняться по верхнему краю, то задайте для каждой ячейки в ручную этот параметр.
17. Для ячеек с поиском и дополнительным меню произвольно можно поставить ширину - 200 точек. Это позволит таблице держать точные размеры при написании текста в ячейках.
Теперь у нас должно получиться следующее:
18. В ячейке "Для текста" создайте таблицу 1x1 и задайте ей параметры, как и у других таблиц:
20. Выделите эту таблицу и перейдите в "Формат"\ "Динамический веб-шаблон"\"Управление изменяемыми облостями"
В появившемся окне введите "Имя области" - "Text" и нажмите кнопку "Добавить"
Должно получиться следующее:
Теперь сохраним наш шаблон.
20. "Файл"\ "Сохранить как..."
В появившемся окне выбираем "Тип файла" - "Динамический веб-шаблон"
И вводим любое имя, например "index"
21. Переходим в "Веб-узел". Находим новый файл с расширением .dwt Нажимаем на нем правой кнопкой мыши и выбираем "Свойства"
В появившемся окне удаляем параметр "Название".
Теперь нажмите на клавиатуре "Ctrl" и выделите все страницы, кроме шаблона. Перейдите в "Формат"\"Динамический веб-шаблон"\ "Присоединить динамический веб-шаблон"
22. В открывшемся окне выберете шаблон, созданный ранее.
После присоединения у Вас на экране появиться таблица с количеством обновленных страниц:
Теперь изменяя все, что не входит в таблицу с изменяемой областью "Text" в динамическом веб-шаблоне, после сохранения шаблона, будет изменяться на других страницах. Это очень удобно! Т.к. изменяя одну страницу, Вы изменяете все страницы, к которым прикреплен шаблон. На одном сайте может присутствовать несколько шаблонов. Их количество ни чем не ограниченно.
Контрольные вопросы.
- Как создать веб – узел?
- Опишите основной список страниц , которые вы создали.
- Как создать новую страницу?
- Как просмотреть вновь созданную страницу?
- Как внести изменения в новую страницу?
- Для чего предназначены динамические веб – узлы?
- Как создать динамический ве – узел?
- Создание таблиц разных размеров опишите.
- Как задать ширину ячейки?
- Как прикрепить динамический веб – узел.
PAGE 15
2. Русский моряк АФМожайский - изобретатель первого в мире самолета
3. Реферат- Великая Отечественная война- начало, характер, цели, основные периоды и события
4. Синтез сдвигающих регистров
5. на бывшие социалистические государства
6. поэтического народного творчества и литературы для взрослых
7. 1 Классификация организационных структур управления по внешнему виду иерархии
8. .1 Рідина що переганяють заливають в апарат який носить назву перегінний куб або просто куб
9. Предприятие и его среда
10. .1. Продвижение туристского продукта
11. Педагогическое творчество
12. процессуальные нормы их структура и действие во времени и в пространстве
13. по теме- Как связываются предложения в тексте.
14. Организационная структура образец организационной структуры в прил
15. The Comparative Analysis Of The History Of The Computer Science And The Computer Engineering In The USA And Ukraine
16. Отчет по практике- Особенности бухгалтерского учета на предприятии
17. то похитил всех сказочных принцесс по которым только были написаны сказки и взялся за принцесс неизвестных
18. Понятие и классификация функций государства
19. Ю Котова EQ ПРОТИВ IQ ~ КТО ПОБЕДИТ Рассматриваются IQ и EQ представляющие собой умственное развитие и эмоц
20. Проверка операций с основными средствами и нематериальными активами