Тема 8. Программное обеспечение процесса производства сайта
Основное содержание темы: Классификация программных средств, участвующих в разработке и создании HTML-документов.
Практическая работа 10. Создание web-документов средствами Front Page.
Цель работы: Получение практического опыта создания web-документов средствами редактора Front Page.
Краткое теоретическое обоснование:
Используя редактор FrontPage, получается документ HTML,построенный по тем же правилам, что и создаваемый вручную. Этот факт сразу же определяет возможности и ограничения в работе этого редактора.
• Все функции редактора FrontPage однозначно реализуются тегами HTML.
• Редактор FrontPage не имеет средств, которые нельзя было бы представить в виде тегов HTML.
Редактор FrontPage «ориентирован» на применение обозревателя Internet Explorer, так что создаваемый им код HTML наиболее адекватно отображается именно в этом браузере. В частности, FrontPage позволяет использовать «бегущую строку», средство, которое не входит в стандарт HTML,но поддерживается Internet Explorer. Из числа стандартных средств HTML редактор FrontPage не поддерживает фреймы (точнее говоря, создание документов описания фреймов).
Окно программы FrontPage представляет собой комбинацию окна редактора и окна браузера. Документ HTMLотображается редактором, как специфическим браузером, отображающим даже обычно невидимые элементы (такие как якоря). В то же время, этот текст можно редактировать средствами, аналогичными имеющимся в текстовом процессоре.
В качестве основного средства форматирования используется Панель инструментов форматирования. Она содержит:
• раскрывающийся список Изменение стиля, позволяющий выбрать стиль оформления абзаца (соответствующий стандартным функциональным элементам HTML);
• раскрывающийся список Изменение шрифта, позволяющий выбрать гарнитуру рифта (наличие такого же шрифта в ходе просмотра документа через Интернет не гарантируется)
• кнопки увеличения и уменьшения размера текста (в относительных единицах HTML);
• кнопки выбора начертания;
• кнопки выбора выравнивания текста;
• кнопки создания маркированных (неупорядоченных) и нумерованных (упорядоченных) списков;
• кнопки задания отступа текста (на основе некорректного использования элементов HTML).
Оборудование: Персональный компьютер, программа FrontPage.
Последовательность выполнения:
1. Запустите программу FrontPage
2. Введите в программе FrontPage произвольный текст документа.
3. С помощью панели инструментов форматирования отформатируйте текст по собственному усмотрению.
4. Для создания таблицы щелкните на кнопке Вставить таблицу на стандартной панели инструментов.
5. Для добавления иллюстраций используйте кнопку Вставить изображение на стандартной панели инструментов.
6. Дайте команду Файл > Сохранить, щелкните на кнопке Как файл и задайте имя файла wysiwyg.htm. Подтвердите сохранение изображений, требующих преобразования формата.
7. Запустите обозреватель Internet Explorer
8. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл wysiwyg.htm
9. Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида документа при отображении в обозревателе и в программе FrontPage.
10. Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.
11. Вернитесь в программу FrontPage и дайте команду Вид > HTML
12. Изучите автоматически сгенерированный код HTML,определите, как с помощью тегов HTML реализованы использованные команды форматирования.
13. Оцените качество получившегося кода HTML.
Контрольные вопросы:
1. Как с помощью FrontPage форматируют текст документа, создают таблицы и вставляют изображения.
2. Перечислить основные приемы разметки гипертекста.
Практическая работа 11. Создание web-документов средствами DreamWeaver
Цель работы: Получить практический опыт создания web-документов средствами программы Adobe Dreamweaver.
Краткое теоретическое обоснование:
Программа Adobe Dreamweaver предназначена для удобного и качественного создания web документов и имеет удобный интерфейс.
Перед началом работы необходимо настроить редактор. Для этого необходимо войти в пункт Edit главного меню в опцию Preferences и выполнить настройки.
Редактор после набора открывающей теговой скобки < включает интеллектуальную систему ввода, с помощью которой легко безошибочно ввести нужный тег. Ввод свойств может быть также осуществлен полуавтоматически с помощью интеллектуальной системы ввода. Для ее включения необходимо внутри тега нажать пробел и выпадет меню только с теми свойствами, которыми обладает выбранный вами тег.
Оборудование: Персональный компьютер, программа Adobe Dreamweaver
Последовательность выполнения:
Задание
1. Запустите Adobe Dreamweaver.
2. Зарегистрируйте новый сайт (Site – New Site…; Сайт – Новый сайт…), который будет создаваться на локальном компьютере, а затем выгружаться в Интернет. Сайт не будет использовать серверных технологий. В качестве имени сайта укажите свою фамилию, укажите в качестве папки для хранения файлов сайта папку MySite, которую следует создать в вашей личной папке.
Сайт будет представлять информацию об истории развития вычислительной техники.
3. Определите физическую структуру сайта, описывающую размещение файлов и папок сайта на диске локального компьютера (Window – Files):
а). В папке MySite создайте папки: Pictures (в этой папке будут храниться все графические объекты сайта), History (в этой папке будут размещаться html-файлы, описывающие страницы сайта).
б). В папке MySite создайте файл index.html (он будет содержать главную страницу сайта).
в). Найдите в Интернете и скопируйте в папку Pictures картинки, которые вы будете размещать на сайте.
г). Из папки Исходные файлы для сайта скопируйте в папку Pictures файлы:
- BabbageDifferenceEngine.jpg;
- Gears_large.jpg;
- Lochkarte_Tanzorgel.jpg.
д). В папке History создайте файлы, в которых будут сохранены страницы сайта:
beginning.html;
punch_cards.html;
programmable_machines.html;
electromechanical_computers.html;
first_generation.html;
second_generation.html;
third_generations.html.
4. Разработайте шаблон страниц сайта:
а). Создайте пустой шаблон (File – New… – Blank Template; Файл – Новый… – Бланк шаблона): тип шаблона – шаблон HTML (HTML template; Шаблон HTML), макет – 3 гибридных столбца, верхний и нижний колонтитулы (3 column hubrid, header and footer).
б). Оформите области шаблона по образцу (рис. 11.1):
- Рисунок, размещаемый в верхнем колонтитуле, выберите самостоятельно среди файлов, скопированных вами в папку Pictures. Для вставки нужного элемента (рисунка, таблицы, гиперссылки и др.) на страницу используется меню Insert.
- Меню, расположенное слева, должно содержать следующие пункты: Главная страница; Ранние приспособления и устройства для счёта; Появление перфокарт; Первые программируемые машины; Электромеханические цифровые компьютеры; Первое поколение компьютеров; Второе поколение компьютеров; Третье и последующие поколения компьютеров.
в). Создайте гиперссылки на документы (выделите текст ссылки, выберите команду Insert – Hyperlink; Вставка – Гиперссылка и заполните поле Link; Связь, указав имя файла нужного документа):
- Главная страница – файл index.html;
- Ранние приспособления и устройства для счёта – файл beginning.html;
- Появление перфокарт – файл punch_cards.html;
- Первые программируемые машины – файл programmable_machines.html;
- Электромеханические цифровые компьютеры – файл electromechanical_computers.html;
- Первое поколение компьютеров – файл first_generation.html;
- Второе поколение компьютеров – файл second_generation.html;
- Третье и последующие поколения компьютеров – файл third_generations.html
г). Создайте редактируемые области в шаблоне: основное содержимое – Edit1 (выделите текст, выберите команду Insert – Template Objects – Editable Region; Вставка – Объекты шаблона – Редактируемая область), примеры – Edit2. (рис. 11.1).
Рисунок 11.1. - Шаблон страниц
д). Сохраните шаблон под именем Main (File – Save As…; Файл – Сохранить как… тип файла – Template Files (*.dwt); Шаблон (*.dwt)). Для файла шаблона в папке сайта будет создана папка Templates.
5. Создайте страницы сайта на основе шаблона:
а). Главная страница (рис.11.2). Откройте файл index.html. Примените шаблон Main (Modify – Templates – Apply template to Page…; Изменить – Шаблон – Применить шаблон к странице…). Заполните редактируемые области. Для размещения рисунка справа от текста создайте таблицу, в левую часть которой внесите текст, в правую – рисунок. Рисунок выберите самостоятельно среди рисунков, скопированных вами в папку Pictures.
Рисунок 11.2. - Главная страница сайта
б). Страница «Ранние приспособления и устройства для счёта» (рис.11.3). Откройте файл beginning.html. Примените шаблон Main. Заполните редактируемые области (текст находятся в папке Исходные файлы для сайта). Вставьте рисунки из папки Pictures.
Рисунок 11.3. Фрагмент страницы «Ранние приспособления и устройства для счёта»
в). Оформите остальные страницы сайта самостоятельно.
6. Для каждой страницы сайта определите заголовки (Title; Заголовок):
- index.html – История вычислительной техники
- beginning.html – Ранние приспособления и устройства для счёта
- punch_cards.html – Появление перфокарт
- programmable_machines.html - Первые программируемые машины
- electromechanical_computers.html - Электромеханические цифровые компьютеры
- first_generation.html - Первое поколение компьютеров
- second_generation.html - Второе поколение компьютеров
- third_generations.html - Третье и последующие поколения компьютеров
7. Сохраните все страницы сайта (File – Save All; Файл – Сохранить все).
8. Просмотрите страницы сайта в браузере, проверьте работу гиперссылок (File – Preview in Browser – IExplorer; Файл – Предпросмотр в браузере – IExplorer).
Контрольные вопросы:
1. Как зарегистрировать новый сайт в Adobe Dreamweaver?
2. Что такое «физическая структура сайта»?
3. Какое имя обычно имеет главная страница сайта?
4. Как создать шаблон страницы?
5. Как добавить на страницу рисунок?
6. Как создать таблицу?
7. Как добавить редактируемую область в шаблон?
8. Как применить шаблон к странице?
9. Как создать заголовок страницы?
Практическая работа 12. Использование программы XaraWebStyle для создания элементов дизайна
Цель работы: Получить практический опыт использования программы Xara WebStyle.
Краткое теоретическое обоснование:
Xara Webstyle, программа обладающая набором готовых шаблонов под различные визуальные элементы веб-страницы, которые наделены высокой гибкостью и вариабельностью. Задача дизайнера при работе в Xara Webstyle состоит не в том, чтобы комбинировать готовые решения, а в том, чтобы изменять приглянувшийся макет до такой степени, когда возникает неповторимая индивидуальность стиля. Библиотека программы включает в себя баннеры, навигационные панели и меню, кнопки, фоны, логотипы, объемные заголовки, пульки, разделительные полосы. Xara Webstyle предполагает вариабельность стандартных настроек цвета, текстуры, сечения, тени, размера, шрифтов, начертания и прочих свойств объектов.
Оборудование: Персональный компьютер с доступом в Интернет
Последовательность выполнения:
Задание.Создайте в программе XaraWebStyle баннер ,рекламирующий вашу специальность. Поместите баннер на веб-страницу.