Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Министерство образования Республики Беларусь
БЕЛОРУССКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
Кафедра «Технология и методика преподавания»
Интернет-технологии в образовании
Лабораторные работы (практикум)
для студентов специальности
1-02 06 02 «Технология. Дополнительная специальность»
Минск 2009
УДК 378: 004 (076.5)
ББК 74.58 я 7
И 73
Составители:
А.А. Дробыш, А.Ю. Зуёнок
Рецензенты:
Е.Е. Петюшик, А.А.Новиков
И 73 Интернет-технологии в образовании: лабораторные работы (практикум) для студентов специальности
1-02 06 02 «Технология. Дополнительная специальность» / сост.: А.А. Дробыш, А.Ю. Зуёнок. – Минск: БНТУ, 2009. – 65 с.
В данном издании описаны основы работы в сети Интернет, этапы проектирования и разработки веб-сайтов. Приведены основные теоретические сведения, сформулированы цели лабораторных работ, практические задания, перечислены контрольные вопросы к защите лабораторных работ, указаны литературные источники.
Практикум предназначен для студентов инженерно-педагогического факультета БНТУ, а также может быть использовано для самостоятельного изучения использования интернет-технологий в образовании студентами университета.
ISBN 978-985-525-191-1 © БНТУ, 2009
Введение
Развитие глобальной компьютерной сети Интернет открыло новые перспективы эволюционного совершенствования мировой образовательной системы. Сегодня традиционные методы образования дополняются новыми методами обучения, основанными на использовании Интернета, электронно-компьютерных сетей и телекоммуникационных средств.
Дистанционное образование, телеобучение, основанные на интернет-технологиях, выполняют ряд новых функций и предполагают реализацию определенных принципов, среди которых важное значение имеет принцип распределенного сотрудничества, интеграции, вхождения в мировое сетевое сообщество.
Система методической подготовки будущего преподавателя включает изучение курса «Интернет-технологии в образовании». Курс состоит из теоретических положений, описывающих научно-методические основы обучения с применением интернет-технологий и лабораторных работ, предназначенных для формирования у будущих преподавателей знаний и умений, связанных с выбором и оценкой целесообразности применения той или иной технологии в учебном процессе.
Данное издание включает девять лабораторных работ, выполнение которых позволит студентам эффективно использовать интернет-технологии в будущей профессиональной деятельности, приложение, список литературы.
В ходе выполнения лабораторных работ студент должен изучить
теоретические сведения, письменно ответить на контрольные вопросы, выполнить практические задания, оформить отчет, защитить работу.
Лабораторная работа № 1
ИНТЕРФЕЙС ПРОГРАММЫ MS INTERNET EXPLORER
Цель работы: приобретение элементарных навыков работы с программой. Изучение интерфейса программы, настроек.
Теоретические сведения
Запуск программы
Для работы с Интернет необходимо запустить специальную программу-проводник используя: главное меню, значок на рабочем столе или панель быстрого запуска. Эти программы часто называют БРАУЗЕРАМИ (от англ. Browse – листать, просматривать) или обозревателями. Наиболее широко распространены браузеры Microsoft Internet Explorer, Opera, Mozilla Firefox.
Окно браузера - это типовое окно программы, работающей в среде Windows.
Приемы навигации. Ввод URL в строке адреса
Ввод адреса нужной страницы в адресной строке браузера - один из наиболее частых приемов навигации по Web. С помощью ввода в строке адреса можно обратиться не только к узлам Web, но и к другим ресурсам Интернета. В таблице 1 представлены виды ресурсов, которые можно ввести в адресной строке браузера.
Таблица 1.1
Виды и типы Интернет-ресурсов
|
Тип файла (ресурса) |
Пример URL, на который показывает ссылка |
|
Web-страница |
http: //www.mysite.ru/my-page .htm |
|
Файл |
file://C:/picture.bmp |
|
Файл мультимедиа |
http: //www.my site.ru/video.avi |
|
Адрес электронной почты |
mailto:user@company.ru |
|
FTP-сервер |
ftp://ftp.mysite.ru |
|
Gopher-сервер |
gopher://gopher .my site .com |
|
Статья UseNet |
news: relcom .newusers |
|
Сеанс Telnet |
telnet://mysite.ru |
Встроенное автозаполнение
Чтобы включить или отключить эту функциональную возможность в браузере Интернет Explorer, следует установить или соответственно снять флажок Использовать встроенное автозаполнение на закладке Дополнительно окна Свойства обозревателя меню Сервис. После чего перейти на закладку Содержание окна Свойства обозревателя меню Сервис и настроить Автозаполнение.
Навигация с помощью кнопок Вперед и Назад
Кнопки Вперед и Назад – наиболее часто используемый инструмент браузера при навигации по Web. Нажатие на эти кнопки последовательно возвращает вас к предыдущему или следующему просмотренному документу (внутри списка уже просмотренных документов). Как только вы дойдете до последнего из просмотренных ранее документов, кнопка Назад станет недоступна, а если дойдете вперед по списку из просмотренных ранее документов, то станет недоступна кнопка Вперед.
Если надо вернуться к документу, просмотренному несколькими страницами ранее, то можно не нажимать по несколько раз подряд на кнопки Назад или Вперед, а «перескочить» к нужному документу сразу через несколько просмотренных документов.
Для этого щелкните по маленькой кнопке-стрелке справа от основной кнопки. Будет показан текущий список из последних просмотренных страниц (числом не более 9 в списке), и можно выбрать именно ту страницу, куда вы желаете перейти.
Использование кнопки Обновить
При навигации по Web может оказаться, что какая-либо страница загрузилась не полностью, причем особенно часто это бывает с картинками. Или вдруг скорость загрузки страницы неожиданно резко упала. В таких случаях помогает кнопка перезагрузки страницы Обновить. При нажатии на эту кнопку текущая страницы заново передается с сервера на ваш компьютер.
Кроме того, у кнопки обновления есть еще одна функция, связанная с использованием дисковой кэш-памяти. Переданные из Интернета страницы хранятся на жестком диске компьютера в виде временных файлов. Когда мы нажимаем кнопки Вперед или Назад, то браузер может загрузить страницу с сервера или же восстановить из временного файла с диска. Как правило, по умолчанию браузер грузит страницу с жесткого диска (можно выбрать нужный режим с помощью параметров из окна Свойства Обозревателя, вызываемого из меню Сервис). Нажатие кнопки Обновить заставляет браузер загрузить страницу с сервера заново.
Выбор начальной страницы
Любой браузер позволяет загрузить начальную страницу не только в начале каждого сеанса работы с браузером, но и в любой момент в течение работы. Для инструментов Интернет Explorer для этого достаточно нажать кнопку Домой на панели и вы возвратитесь к начальной странице. Таким образом, вы каждый раз будете возвращаться на начальную страницу, которая по умолчанию расположена на сервере Microsoft.
Довольно просто изменить адрес начальной страницы на тот, который вам более всего подходит. Для этого достаточно выбрать пункт Свойства обозревателя меню Сервис, закладка Общие.
В открывшемся диалогом окне, можно ввести адрес новой начальной страницы, и кроме того, браузер дает возможность назначить таковой ту страницу, которая загружена в окне в данный момент времени. В верхней части вкладки расположено окно Домашняя страница, куда можно или вручную ввести нужный адрес, или заполнить это окно автоматически – нажав на одну из кнопок, выбирающей адрес текущей, пустой или исходной страницы (исходная страница – страница «Добро пожаловать в Интернет», http://home.microsoft.com/intl/ru). Нажмите кнопку ОК, чтобы подтвердить сделанные изменения.
Сохранение и печать Web-страниц
Для сохранения нужной Web-страницы – выберите пункт Сохранить как (Save as) из меню Файл (File), далее – укажите имя и формат сохраняемой страницы (как HTML или текст). При этой операции Интернет Explorer не сохраняет рисунки, фон и элементы мультимедиа, присутствующие на страницы (сохраняется только текст). Чтобы сохранить рисунки, следует последовательно навести указатель на рисунок и сделав правый щелчок, в выпавшем меню выбрать пункт Сохранить рисунок как (Save Picture as). И такую операцию надо повторить для всех имеющихся на странице рисунков. Для того чтобы страница автоматически сохранялась на диске полностью (текст и рисунки), нужно выбрать выберите пункт Сохранить как (Save as) из меню Файл (File), Web страница, полностью.
Печать гипертекстовых страниц
Для распечатки загруженной Web-страницы нажать кнопку Печать (Print) на панели инструментов или выбрать аналогичный пункт в меню Файл (File). В появившемся диалоговом окне установите параметры печати: тип принтера, количество копий и т. д. После нажатия на кнопку ОК, браузер сам скомпонует вид документа на бумаге, разделит его на печатные страницы и выведет на печать. На каждом напечатанном листе в качестве колонтитула будет присутствовать URL данного документа. Это поможет вспомнить, с какого узла был получен данный документ.
Избранные страницы
Все действия, связанные с работой с избранными страницами и подпиской, осуществляются с помощью меню Избранное. Вне зависимости от того, каким образом вызвано меню Избранное, - пользователь получает доступ к одним и тем же избранным страницам и средствам их создания и организации.
Обычно адреса избранных страниц удобно группировать по тематическим папкам, и первоначально в меню Избранное уже присутствуют несколько стандартных папок с заранее записанными адресами.
Реорганизация ярлыков избранных страниц по папкам
Поскольку по умолчанию ярлыки избранных страниц помещаются в корень папки Избранное, то со временем накапливается большое количество ярлыков избранных страниц, которые не организованы по папкам, а хранятся в таком общем списке. Если подходящие тематические папки уже есть в Избранном, то надо переместить ярлыки из корня по таким папкам, а если нужные папки отсутствуют - то создать их. Для этого необходимо:
• выбрать пункт Упорядочить избранное в меню Избранное.
• нажать кнопку Создание новой и создать новую папку.
• отметить ярлыки, которые необходимо переместить в одну из новых папок, используя стандартную операцию "перетащить и отпустить» или же воспользоваться опцией Переместить из окна Упорядочить избранное.
Удаление ярлыков избранных страниц
Чтобы удалить ярлык страницы из папки необходимо:
Панель Журнала браузера Internet Explorer
С ее помощью можно найти адрес любой ранее посещенной страницы Web и загрузить ее снова.
Чтобы панель Журнала появилась на экране, достаточно нажать кнопку Журнал на панели инструментов или выбрать пункт Панель обозревателя в меню Вид, подпункт Журнал. Сразу после этого область просмотра браузера будет разделена на две части, где на левой стороне вы увидите даты, включая текущую. Чтобы познакомиться со списком адресов узлов, просмотренных в конкретный день, следует щелкнуть по нужной вам дате, и далее – по адресу конкретной страницы, которая будет загружена в браузер.
По умолчанию браузер ведет учет адресов страниц, просмотренных в течение последних 20 дней. Чтобы изменить этот период в сторону увеличения или уменьшения, выберите пункт Свойства обозревателя меню Сервис. На закладке Общие можно изменить продолжительность периода ведения Журнала, а также стереть все текущие записи, для чего нужно нажать кнопку Очистить Затем применить и сделанные изменения вступят в силу.
Практические задания:
Контрольные вопросы
Лабораторная работа № 2
ВВЕДЕНИЕ В ТЕХНОЛОГИЮ СОЗДАНИЯ WEB-САЙТОВ
Цель работы: приобретение знаний о Web-сайтах, их классификации. Изучение этапов разработки Web-сайта, тестирования, размещения в Internet. Ознакомление с инструментальными средствами разработки Web-сайта.
Теоретические сведения
Понятие Web-сайта
Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet.
Web-сайт - это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес). Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами.
Web-сайт состоит из связанных между собой Web-страниц.
Web-страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды – HTML-коды, определяющие, в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио- и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mid, *.mp3 (звук), *.avi (видео). В HTML-коде страницы содержатся только указания на такие файлы.
Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице.
Таким образом, Web-сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес.
Классификация Web-сайтов
1. Личные страницы, содержащие информацию об авторе, его интересах, создают для того, чтобы обрести друзей по интересам, расширить свой кругозор, свой мир.
2. Информационные сайты. К ним относятся образовательные порталы, правовые порталы, сайты учебных заведений, дистанционного обучения и консультирования, сообществ по интересам, фирм, электронные магазины, информационно-развлекательные сайты.
Этапы разработки Web-сайта
Главными задачами при разработке любого Web-сайта являются четкая организация структуры сайта и определение его информационного наполнения. Другими словами, на первом этапе необходимо создать информационную модель Web-сайта.
Выделяют следующие этапы разработки Web-сайта: планирование, реализация, тестирование, публикация, рекламирование, сопровождение.
На стадии планирования определяется следующее:
Любую страницу можно оценить по трем параметрам: контенту, внешнему виду и навигации. Одно должно дополнять другое и ни в коем случае не подавлять.
Запомните. Только сайт, сочетающий в себе хороший дизайн, информационную насыщенность и четкую структуру, может претендовать на доверие пользователей.
При создании достаточно больших документов надо помнить о том, что не все из посетителей имеют высокоскоростной доступ в Internet. Большинство потенциальных посетителей прервут загрузку страницы из соображений экономии средств, если она будет грузиться дольше 30-40 секунд.
Добиться максимально полного размещения необходимой информации при минимальном времени загрузки страницы можно разбив документ по разделам на отдельные страницы, которые должны быть исполнены в одном и том же стиле, с применением одинакового шрифта, кнопок, цвета заголовков, и организовав навигацию между ними при помощи ссылок.
Реализация
На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта.
Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла. Изменив в каждой новой странице только содержимое и адресацию ссылок, разработчик сократит время, потраченное на каждую из них. Необходимо помнить о том, что посетитель может попасть прямо из поисковой системы на любую из ваших страниц – и важно в этом случае показать ему, что она является частью целого сайта, дать ему возможность перейти по ссылке на главную страницу и просмотреть остальные разделы.
При создании Web-страниц необходимо учитывать, что разработанный Вами Web-сайт может выглядеть на компьютерах разных пользователей по-разному. Это зависит от многих параметров – типа браузера клиента, установок операционной системы, аппаратных ресурсов компьютера и т.п.
Тестирование
Завершив работу по размещению страниц на Web-сайте, необходимо выполнить тестирование. Оно состоит из двух этапов: тестирование на работоспособность и тестирование на удобство пользования интерфейсом.
На этапе тестирования на работоспособность проверяют, как функционирует Web-сайт, используя те же условия, при которых с ним будет работать пользователь. Поработайте с Web-сайтом в различных браузерах и посмотрите, как выглядит Ваш сайт в каждом из них. Постарайтесь оценить время загрузки страниц, что очень важно.
Для тестирования на удобство пользования интерфейсом крупные компании приглашают специальные группы людей. Вам Вам предлагается предложить своим однокурсникам ознакомиться с Вашим Web-сайтом (обратите внимание на то, как они перемещаются по Web-сайту. Где возникают паузы? Когда пользователи испытывают трудности? И при этом не подсказывайте им, не давайте никаких указаний! А если пользователи будут выполнять неправильные действия, то это уже недостаток вашей разработки и, значит, над Web-сайтом следует еще поработать.)
Публикация
Готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы он был доступен через Internet. В Сети можно найти огромное количество ссылок на free web pages, где некоторые провайдеры предоставляют своим клиентам бесплатное место под страницу. Например: http://www.az.ru, http://chat.ru, http://www.agava.ru,
http://www.newmail.ru, http://www.fortunecity.com, http://i-connect.ru, http://www.lgg.ru, http://www.halyava.ru, http://www.netcity.ru
Для того чтобы выбрать окончательно сервер для размещения своего сайта, необходимо обратить внимание на следующее:
Рекламирование сайта
Может осуществляться путем размещения информации о нем на поисковом Web-сайте, организации взаимных ссылок с другими сайтами и т.д.
Как привлечь пользователя? Красиво оформленные страницы Web-сайта – это только половина дела. В первую очередь страницы должны быть содержательными. Основное требование к содержимому Web-сайта – полнота и достоверность. Информация должна быть представлена таким образом, чтобы пользователь, однажды посетивший Web-сайт, еще ни раз обратился к нему.
Сопровождение сайта
Содержимое Web-сайта может подвергаться неоднократным изменениям. Важно, чтобы предоставляемая на Web-сайте информация всегда была актуальной, поэтому необходимо чаще обновлять информацию на Web-сайте, по возможности расширяя материал, улучшая дизайн.
Обязательное правило. Web-сайт должен обновляться не реже одного раза в месяц. Рекомендуется создать на своем компьютере копию Web-сайта, вносить в нее изменения и новую версию передавать для размещения на сервере в завершенном виде.
Навигационная схема Web-сайта (логическая структура)
Web-сайт состоит из связанных между собой гипертекстовых документов.
Гипертекст – это способ хранения и манипулирования информации, позволяющий устанавливать связи между любыми “информационными единицами”. Связь между информационными единицами осуществляется по гиперссылкам.
Гиперссылка - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют синим цветом и подчеркиванием.
Навигационная схема Web-сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации, которую Вы представляете.
Запомните. Простота и удобство навигации является одним из важных факторов, определяющих посещаемость Web-сайта. Пользователи должны быстро и легко перейти на любую страницу Web-сайта, в том числе и на начальную.
Существует несколько видов структурирования информационного материала на Web-сайте:
Линейная структура. Материал весь располагается последовательно
Иерархическая структура.Чаще всего структура Web-сайта представляет собой иерархию. При этом сначала создают категории высшего уровня, а затем материал в логическом порядке размещают в категории, которые находятся ниже. Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая.
Узкая глубокая иерархия характеризуется тем, что на верхнем уровне она имеет мало категорий. Для получения нужной информации пользователь вынужден переходить на несколько уровней вниз.
Страница А
Страница N
Из приведенного примера видно, что для перехода к странице N пользователь должен произвести 4 щелчка мышью.
Ни первый, ни второй способ организации информации не является оптимальным. Лучше, когда иерархическая структура состоит из 3-4 уровней.
Физическая структура сайта
Физическая структура сайта - способ размещения файлов по папкам (каталогам). При этом необходимо соблюдать правила:
1. Для хранения файлов сайта следует создать отдельную папку (так называемую корневую папку сайта).
2. Внутри корневой папки сайта можно создать любую систему подкаталогов для лучшей систематизации хранения документов (рис. 2.1). В предложенной схеме файлы раскладываются по папкам в соответствии с их типом. Может быть выбран и другой алгоритм – например, в соответствии с тематикой.
3. HTML-документ, задающий домашнюю страницу сайта, должен носить имя index.htm и храниться непосредственно в корневой папке сайта. При выполнении этого правила адрес вашего сайта после публикации будет выглядеть примерно так: http://адрес_сервера/каталог_сервера (имя файла index.htm не указывается!). Анализируя такой адрес, браузер в указанном каталоге сервера автоматически ищет и загружает файл index.htm.
4. В именах всех файлов и папок сайта следует использовать только строчные латинские буквы и/или цифры.
После подготовки физической структуры сайта можно приступать к формированию каждой страницы в отдельности.
Рис. 2.1. Физическая структура сайта
Заголовок Web-страницы
Заголовок Web-страницы – текст, отображающийся в строке заголовка браузера при просмотре страницы.
Заголовок Web-страницы должен содержать несколько слов (на любом языке), которые наиболее полно и точно характеризуют содержимое страницы. Это связано, во-первых, с тем, что заголовок первым появляется при загрузке. Заголовок должен содержать значимые ключевые слова.
Текст Web-страницы
Наибольшую смысловую нагрузку на странице несет текст. Так как текст будет просматриваться пользователем с монитора, нужно сделать его удобным для чтения. Он не должен быть слишком длинным (за исключением тех случаев, когда это действительно необходимо).
Форматировать текст на Web-страницах можно примерно так же, как текст в обычных текстовых процессорах: указывать в HTML-документе гарнитуру текста, способ его начертания, цвет, размер, интервал между строками, поля (в тексте), цвет фона и т.д.
Для удобства чтения текста следует соблюдать определенные правила:
Исключение может составлять лишь случай, когда особой гарнитурой оформляются текстовые заголовки. Однако следует помнить, что текст будет отображаться в указанной вами гарнитуре лишь в том случае, если соответствующая гарнитура установлена на компьютере пользователя, просматривающего страницу. В противном случае, соответствующий фрагмент текста отобразится в гарнитуре, заданной для браузера пользователя в качестве гарнитуры по умолчанию.
Графические изображения на Web-страницах.
Параметры изображений
Графические изображения (как и другие мультимедийные объекты) хранятся в отдельных файлах, а в HTML-документе присутствуют лишь адреса этих файлов. Необходимо различать абсолютные и относительные адреса файлов.
Пусть необходимый нам рисунок хранится на диске D: в папке Мои рисунки и соответствующий файл носит имя ris.gif. Если в качестве пути к файлу записать D:\Мои рисунки\ ris.gif (абсолютный путь), то при просмотре страницы браузер будет искать указанный файл на компьютере пользователя. Понятно, что по указанному адресу нужный файл обнаружен не будет и вместо рисунка на странице отобразится пустая рамка.
Поэтому первое правило при работе с графикой: все необходимые графические файлы должны храниться в корневой папке сайта или в одном из ее подкаталогов. Далее адрес графического файла необходимо указать в относительном виде: относительно того HTML-документа, в который необходимо вставить соответствующее изображение.
Пусть нам необходимо вставить в HTML-документ page.htm, который находится по адресу site\html\rus, рисунок из файла site\images\ris.gif (рис. 2.2).
В данном случае относительный адрес следует записать так: ..\..\images\ris.gif.
Две точки здесь символизируют переход в надкаталог.
Параметры графического изображения. Размер
Размер указывают в пикселях или в процентах от ширины окна браузера. При указании размера изображения следует помнить о том, что разрешение монитора пользователя может отличаться от разрешения вашего монитора. В таком случае при указании размера изображения в пикселях компоновка страницы может существенно нарушиться, тогда как при указании размера в процентах рисунок будет занимать указанную часть монитора независимо от разрешения.
Рис. 2.2. Путь к графическому файлу
Альтернативный текст
Альтернативный текст отображается вместо рисунка в режиме отключения графики или не графическими браузерами. Кроме того, браузер MS Internet Explorer отображает альтернативный текст в качестве всплывающей подсказки при наведении указателя мыши на изображение. Поисковые системы (такие как Google или Altavista) могут производить поиск изображений на Web-страницах, опираясь на название соответствующего графического файла или на альтернативный текст.
Графика на Web-страницах может использоваться и в качестве фоновых изображений (всевозможные текстуры, а также фотографии как фон страниц). Здесь следует помнить о том, что фоновое изображение не будет отображаться, если отключить загрузку графики в браузере.
Гиперссылки
При создании гиперссылки разработчик должен задать указатель гиперссылки – элемент страницы, который станет ссылкой – и адресную часть ссылки – адрес ресурса, на который указывает гиперссылка.
Указателем ссылки, как правило, является фрагмент текста или графическое изображение. Очень часто текст, являющийся ссылкой, подчеркнут и выделен цветом (наиболее часто употребляемые цвета оформления – синий для непросмотренной ссылки и красный – для просмотренной). Что касается графических указателей, то в качестве таких ссылок на Web-страницах обычно используют небольшие графические изображения с надписями (кнопки). Также следует упомянуть так называемые графические карты – изображения, различные части которых являются ссылками на разные ресурсы. В любом случае указатель ссылки должен «подсказывать» пользователю, какой именно ресурс откроется при выборе данной ссылки.
Ссылка может указывать на другую страницу того же сайта. Тогда при задании адреса ссылки следует указать относительный путь к документу назначения. Если ссылка указывает на внешний сайт, то в качестве адреса ссылки указывают полный URL.
Ссылки могут указывать и на документы другого типа (не являющиеся Web-страницами), например, на документ MS Word или на архив WinZip. В таком случае указывают относительный путь к документу (если этот документ находится внутри папки сайта) или полный URL (если этот документ хранится на внешнем сервере). При выборе такой ссылки на компьютере пользователя появится окно с предложением открыть данный файл или сохранить его на диске. Во всех рассмотренных случаях для создания ссылки нужно лишь знать адрес ресурса назначения и совершенно не требуется редактировать документ назначения.
Исключение составляют лишь так называемые ссылки на закладки – ссылки, которые открывают документ назначения в определенном месте. Для определения такой ссылки заранее в нужном месте документа назначения создается закладка, которой присваивается имя (имя закладки не должно содержать русских букв). Затем в исходном документе создается ссылка, в адресной части которой указывается относительный или абсолютный (в зависимости от ситуации) адрес документа назначения. Далее (без пробела!) следует специальный символ #, и затем опять же без пробела – имя закладки.
Таблицы. Использование таблиц для компоновки Web-страниц
Таблицы на Web-страницах могут использоваться как способ представления данных. Таблицы можно форматировать: использовать выравнивание данных, менять размер, задавать параметры границ ячеек, применять заливку, объединять или разбивать ячейки и т.д. Кроме того, у таблиц на Web-страницах есть еще одна специфическая область применения: они могут использоваться как средство компоновки страниц.
Работая с таблицами (особенно если они используются для компоновки страниц) следует помнить, что размер таблиц (как и графических изображений) можно указывать в пикселях или процентах от ширины экрана. Для того чтобы компоновка страницы не зависела от разрешения монитора пользователя, размер таблицы (и ее ячеек) необходимо указывать в процентах от ширины экрана.
Для компоновки страниц можно использовать и другую технологию - технологию фреймов.
Технология фреймов
Фрейм - это область окна браузера, в которой осуществляется просмотр отдельного HTML-документа. Таким образом, используя фреймы, можно разбить окно браузера на несколько прямоугольных областей, в каждой из которых будет отображаться свой HTML-документ.
Окно браузера разбито на 3 фрейма (рис. 2.3). В верхнем фрейме отображается документ, содержащий логотип и название сайта. В нижнем левом фрейме находится документ, содержащий ссылки на все страницы сайта, причем ссылки отредактированы таким образом, что выбранный документ отображается в нижнем правом фрейме. Итак, какой бы документ пользователь ни просматривал, вверху всегда будет находиться логотип и название сайта, а слева - список ссылок. Создавая сайт с фреймами, предварительно необходимо создать все HTML-документы, которые будут участвовать в формировании сайта. Затем создается установочный файл фреймов - отдельный документ HTML, задающий способ разбивки окна на фреймы, их форматирование и текст для браузеров, не поддерживающих фреймы (к таким браузерам относятся ранние версии браузеров MS Internet Explorer).
Рис. 2.3. Использование фреймов
Форматирование фреймов включает:
На рис. 2.4 показана отформатированная страница с фреймами. Рис. 2.4. Некоторые приемы форматирования фреймов
Видно, если снять отображение границ между фреймами, создается иллюзия целостности страницы, и пользователь может и не подозревать о том, что данная Web-страница создавалась с использованием фреймов.
Одной из основных проблем использования фреймов является то, что у фрейма может появиться полоса прокрутки (если содержимое документа не помещается в отведенный ему фрейм).
На рис. 4 полоса прокрутки присутствует в нижнем левом фрейме, что, безусловно, отрицательно сказывается на внешнем виде страницы. Можно запретить отображение полосы прокрутки, но в таком случае часть документа окажется недоступной для просмотра. Это не единственный недостаток фреймов. При переходе по ссылкам внутри сайта с фреймами в адресной строке браузера всегда отображается URL установочного файла фреймов, поэтому пользователь не может запомнить адрес нужного документа или сделать для него закладку. Кроме того, фреймы некорректно индексируются некоторыми поисковыми системами.
Инструментальные средств создания Web-страниц
Web-страница – это документ на языке HTML. Для записи HTML-кода вруч ную можно использовать простейшие текстовые редакторы, использующие однобайтную кодировку, - Блокнот, Far Editor, Norton Editor. Необходимо лишь при сохранении указать расширение имени файла – .htm.
Автоматизировать процесс создания HTML-кода можно с помощью специализированных HTML-редакторов – таких как Homesite, Hotdog Professional, Coffee Cup HTML Editor ++.
Оба вышеуказанных способа создания Web-страниц подразумевают глубокое знание языка HTML. Кроме того, многие их этих средств позволяют лишь создавать отдельные страницы. Далее разработчик должен вручную выполнить связывание страниц гиперссылками, проектирование физической и логической структуры сайта, копирование всех необходимых файлов в папку сайта, проверку гиперссылок и правильности записи путей к мультимедийным объектам, а также многие другие операции, связанные с работой с сайтом в целом.
Редакторы визуального проектирования позволяют создавать Web-страницы в визуальном режиме: проектируя страницу, мы сразу же видим ее такой, какой она предстанет в браузере перед будущими посетителями.
Соответствующий HTML-код генерируется такими программами автоматически, без участия разработчика. Таким образом, нет необходимости записывать HTML-код вручную (тем не менее, без знания основ HTML зачастую не удается обойтись и здесь). К редакторам визуального проектирования в том числе относится и всем известный текстовый процессор Microsoft Word (в этой программе есть специальные возможности для создания Web-страниц), а также программы Microsoft FrontPage и Macromedia Dreamweaver.
Вне зависимости от того, каким образом был создан HTML-документ, его можно редактировать любым средством создания Web-страниц. Так, мы можем начать создавать страницу средствами Microsoft FrontPage, затем открыть и продолжить править созданный документ в Блокноте и т.д.
Отличительной особенностью большинства редакторов визуального проектирования является то, что эти программные средства позволяют не только проектировать отдельные страницы, но и работать с сайтом в целом. Так, средствами вышеуказанных редакторов визуального проектирования можно определить корневую папку сайта, создать внутри нее нужные подкаталоги, указать домашнюю страницу сайта. Также возможно задать логическую структуру сайта – построить так называемую карту сайта.
Создавая отдельные страницы в редакторах визуального проектирования, можно работать со всеми элементами, о которых шла речь выше: указывать заголовки страниц, задавать цветовую разметку страницы, фоновое изображение и фоновый звук, вводить и форматировать текст, создавать гиперссылки, вставлять и форматировать таблицы, списки, горизонтальные линии, использовать фреймы. При вставке мультимедийных объектов не нужно предварительно копировать соответствующий файл в корневую папку сайта: редактор визуального проектирования сам напомнит вам об этом. Кроме того, в HTML-коде будет указан именно относительный путь к объекту. То же касается и гиперссылок на страницы сайта и на документы другого типа.
Если документы сайта необходимо переименовать или переместить, также можно использовать редактор визуального проектирования. В таком случае ссылки на эти документы будут автоматически изменены. Сравнительная характеристика представлена в таблице 2.1.
Таблица 2.1.
Сравнительная характеристика возможностей
|
Возможности |
MS Word |
MS FrontPage |
Macrmedia Dreamweaver |
|
Требования к навыкам пользователя |
Невысокие |
Средние |
Высокие |
|
Работа с физической структурой сайта (создание, автоматическое обновление ссылок) |
Нет |
Да |
Да |
|
Построение карты сайта |
Нет |
Да |
Да |
|
Автоматическое создание навигационных панелей |
Нет |
Да |
Да (ограничены возможности форматирования) |
|
Использование шаблонов для создания страниц |
Да |
Да |
Да |
|
Компоновка страниц |
Нет |
Нет |
Да |
|
Наличие избыточного HTML-кода |
Да |
Отдельные "лишние" теги |
Нет |
|
Работа с каскадными таблицами стилей |
Нет |
Да |
Да |
|
Создание таблиц, гиперссылок, фреймов, вставка рисунков |
Да |
Да |
Да |
|
Вставка динамических объектов |
Ограниченные возможности |
Широкие возможности |
Широкие возможности |
|
Создание интерактивных эффектов |
Нет |
Ограниченные возможности |
Широкие возможности |
Для создания элементов страниц используются следующие инструментальные средства: графические редакторы (Adobe Photoshop, Fireworks, Paint Shop Pro, Painter и др.) для создания графических файлов, текстовые редакторы для создания текстов, звуковые редакторы для создания звуковых файлов.
Таким образом, основными этапами создания сайта являются:
Разрабатывая сайт, следует в первую очередь ориентироваться на удобство пользователя.
Необходимо учитывать возможные ограничения аппаратных и программных средств пользователя, стремиться к минимальному объему страниц (для скорейшей загрузки), а также использовать корректный дизай нерский стиль.
Выполнение этих простых правил позволит вам создать по-настоящему полезный и посещаемый сайт.
Практические задания:
Контрольные вопросы
Примерная тематика
Критерии оценки информационного ресурса
Лабораторная работа № 3
Цель работы: использование знаний, умений и навыков в работе с программой Microsoft Word при создании учебно-методических и дидактических материалов.
БЕЛОРУССКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
В каком году был создан БНТУ? Как он в то время назывался?
10 декабря 1920 г. Минское политехническое училище типа «техникум» было преобразовано в Белорусский государственный политехнический институт для подготовки инженеров с высшим образованием по главным направлениям производственной деятельности государства.
Набор студентов осуществляли пять факультетов: механический, инженерно-строительный, культурно-технический, химико-технологический и электротехнический.
Первым директором (ректором) был назначен Н. К. Ярошевич. Преподавательский состав насчитывал около 50 человек. В первом учебном году в институте обучались 305 студентов.
В каком году произошла реорганизация БПИ?
Новый этап для Белорусского политехнического института (БПИ) начался после его реорганизации в 1933 г. В это время на 20 кафедрах работали 120 человек.
В начале 40-х годов XX в. БПИ стал одним из ведущих технических вузов Советского Союза.
На 32 кафедрах четырех факультетов велась подготовка студентов по семи специальностям. Количество преподавателей увеличилось до 180, включая 19 профессоров и 71 доцента. За предвоенные годы подготовлено около 2000 инженеров.
Что произошло с институтом во время ВОВ?
Вторая мировая война прервала работу БПИ. Она возобновилась в 1945 г., когда к занятиям приступило 375 студентов. В 1949 г. количество студентов выросло до 1500 человек.
В каком году БПИ переименован в БГПА?
В 1991 г. было принято решение о преобразовании Белорусского политехнического института в Белорусскую государственную политехни ческую академию (БГПА).
В каком году БГПА преобразована в БНТУ?
1 апреля 2002 г. Указом Президента Республики Беларусь Белорусская государственная политехническая академия преобразована в Белорусский национальный технический университет (БНТУ). Этим указом было подтвер ждено соответствие нашего технического вуза требованиям, предъявляемым национальными и международными организациями к университетам.
Сколько факультетов в составе БНТУ в настоящее время?
В составе БНТУ 16 факультетов: автотракторный, архитектурный, машиностроительный, инженерно-педагогический, механико-технологический, приборостроительный, строительный, информационных технологий и робототехники, маркетинга, менеджмента, предпринимательства, природных ресурсов и экологии, транспортных коммуникаций, энергетический, энергетического строительства, технологий управления и гуманитаризации, военно-технический, довузовской подготовки.
Контрольные вопросы
Лабораторная работа № 4
Цель работы: использование знаний, умений и навыков в работе с программой Microsoft PowerPoint при создании учебно-методических и дидактических материалов.
Практическое задание:
1. Создайте в папке со своей фамилией папку site/other.
2. Загрузите Microsoft PowerPoint.
3. Создайте новую презентацию на основе шаблона План (первый слайд презентации определите как титульный).
4. Создайте слайды презентации, приведенные на образце (для создания нового слайда - Вставка / Новый слайд...).
5. Сохраните презентацию в формате PowerPoint: Файл
/Сохранить / откройте папку site/other / в поле Имя файла введите: ppoint.ppt / кнопка Сохранить.
6. Настройте параметры сохранения презентаций PowerPoint в формате HTML:
– Сервис / Параметры... / вкладка Общие / кнопка Web Параметры;
– настройте отображение областей заметок и структуры при просмотре презентации в браузере и выберите цветовую схему для этих областей: вкладка Общие / в разделе Вид, установите флажок Добавить панель смены слайдов / в поле Цвета, установите Цвета презентации (текст);
– отмените отображение эффектов анимации и смены слайдов, настройте изменение размеров графических объектов в соответствии с остатком страницы при просмотре презентации в браузере IE 4.0 и более поздней версии: снимите флажок Показывать анимацию слайдов при просмотре, установите флажок Вписывать рисунки в окно обозревателя;
– настройте сохранение вспомогательных файлов в отдельной папке с автоматическим обновлением ссылок на вспомогательные файлы: вкладка Файлы / в разделе Имена и расположение файлов установите флажки Создать папку для вспомогательных файлов, Обновлять ссылки при сохранении;
– отмените использование формата .png при сохранении рисунков и выберите необходимое разрешение монитора: вкладка Картинки / в разделе Форматы файлов снимите флажок Разрешить выходной формат PNG / в разделе Конечный монитор в поле Размер экрана установите 800x600;
– определите кодировку, используемую при сохранении Web-страницы: вкладка Кодировка / в поле Сохранить документ как установите кириллица (Windows) / OK /
7. Преобразуйте презентацию PowerPoint в интерактивный показ слайдов:
– Файл / Сохранить как Web-страницу... / тип файла Веб-страница /кнопка Опубликовать;
– в разделе Объект для публикации установите переключатель Полная презентация / снимите флажок Вывести заметки докладчика / в разделе Поддержка обозревателя установите переключатель Microsoft Internet Explorer 4.0+ (высокое качество);
– в разделе Опубликовать копию как в поле Имя файла кнопка Обзор... / откройте папку site\html / в поле Имя файла введите: ppoint.htm / ОК;
– в поле Заголовок страницы кнопка Изменить... / убедитесь, что в поле Заголовок страницы введено: Интернет-технологии в образовании / ОК / кнопка Опубликовать.
8. Завершите работу с Microsoft PowerPoint.
9. Просмотрите интерактивный показ слайдов в Microsoft Internet Explorer: с помощью панели задач Windows переключитесь в Microsoft Internet Explorer / Файл / Открыть... / кнопка Обзор... / откройте папку site/other/ выберите Тип файлов: Файлы HTML / выберите файл ppoint.htm / кнопка Открыть / ОК.
10. С помощью панели задач Windows переключитесь в MS Word.
11. Создайте текстовый документ на основе шаблона Web-страница. Укажите свою фамилию, имя, отчество, место учебы, место жительства, любимое занятие.
12. Сохраните документ как веб-страницу в папке site/other/ присвоив ему имя index.htm. Просмотрите документ в браузере.
13. Откройте страницу Web-сайта: Файл / Открыть... / откройте папку site / other выделите файл index.htm/кнопка открыть
14. Добавьте в начальную страницу Web-сайта ссылку на документ site/other /ppoint.htm, используя в качестве указателя ссылки текст «Интернет-технологии в образовании» (его необходимо набрать ниже последней строки): выделите текст Интернет-технологии в образовании/ Вставка / Гиперссылка... /кнопка Файл... / откройте папку site/ other / выберите файл ppoint.htm / ОК / ОК.
15. Сохраните Web-страницу: Файл / Сохранить.
16. Просмотрите измененную начальную страницу Web-сайта в Microsoft Internet Explorer и проверьте работоспособность ссылки: Файл / Предварительный просмотр Web-страницы / щелчок мышью по ссылке Интернет-технологии в образовании / вернитесь к предыдущему документу с помощью кнопки Назад.
17. С помощью панели задач Windows вернитесь в Microsoft Word.
18. Завершите работу с начальной страницей Web-сайта: Файл / Закрыть.
Контрольные вопросы
Лабораторная работа № 5
Цель работы: использование знаний, умений и навыков в работе с Microsoft Office при создании Web-сайта.
Практическое задание:
1. Создайте в своей рабочей папке новую папку my_site для размещения файлов личного Web-сайта (любым способом).
2. Средствами приложения Microsoft Word создайте начальную страницу Web-сайта на основе шаблона Web-страница, руководствуясь образцом.
Добавьте на Web-страницу заголовок первого уровня Личный сайт Фамилия Имя Отчество, выровненный по центру. Под заголовком вставьте таблицу из 1 строки и 5 столбцов. Снимите обрамление таблицы. В ячейки таблицы введите текст, приведенный на образце. После таблицы вставьте горизонтальную линию.
Поместите на начальную страницу Web-сайта текст, приведенный в образце. Примените к Web-странице тему по своему выбору. Перед заголовком Web-страницы вставьте бегущую строку с текстом Добро пожаловать!
Сохраните Web-страницу под именем index.htm в папке my_site. Просмотрите начальную страницу Web-сайта в браузере Microsoft Internet Explorer.
3. Создайте новую Web-страницу на основе шаблона Web-страница. Добавьте на Web-страницу заголовок первого уровня Моя биография, выровненный по центру. После заголовка вставьте горизонтальную линию. Поместите на Web-страницу краткие автобиографические сведения. Примените к Web-странице тему, выбранную для начальной страницы Web-сайта. Сохраните Web-страницу под именем biography.htm в папке my_site. Просмотрите Web-страницу в браузе ре Microsoft Internet Explorer.
4. Создайте новую Web-страницу на основе шаблона Web-страница. Добавьте на Web-страницу заголовок первого уровня Мои увлечения, выровненный по центру. После заголовка вставьте го ризонтальную линию. Поместите на Web-страницу информацию о своих увлечениях. Проиллюстрируйте введенный текст рисунками из коллекции Microsoft Clip Gallery. Определите для ри сунков альтернативный текст. Примените к Web-странице тему, выбранную для начальной стра ницы Web-сайта. Сохраните Web-страницу под именем hobby.htm в папке my_site. Просмотрите Web-страницу в браузере Microsoft Internet Explorer.
5. Создайте новую Web-страницу на основе шаблона Web-страница. Добавьте на Web-страницу заголовок первого уровня Мои любимые ссылки, выровненный по центру. После заголовка вставьте горизонтальную линию. Поместите на Web-страницу в виде маркированного списка свои любимые адреса в Интернете. Примените к Web-странице тему, выбранную для начальной стра ницы Web-сайта. Сохраните Web-страницу под именем Iinks.htm в папке my_site. Просмотрите Web-страницу в браузере Microsoft Internet Explorer.
6. Средствами приложения Microsoft PowerPoint создайте презентацию о своих текущих проектах на основе шаблона по своему выбору. Преобразуйте презентацию Microsoft PowerPoint в формат HTML. Сохраните начальную страницу Web-презентации под именем project.htm в папке my_site. Просмотрите интерактивный показ слайдов в браузере Microsoft Internet Explorer.
7. Добавьте на начальную страницу Web-сайта index.htm ссылки на документы biography.htm, hobby.htm, projecthtm и Iinks.htm, используя в качестве указателей ссылок соответственно текст Биография, Увлечения, Текущие проекты, Избранные ссылки. Сохраните изменения в доку менте.
8. Скопируйте таблицу со ссылками, расположенную на начальной странице Web-сайта index.htm, в буфер обмена. Вставьте в документы biography.htm, hobby.htm и Iinks.htm скопированную таб лицу после заголовков Web-страниц. Определите в этих документах ссылку на начальную страницу Web-сайта index.htm, используя в качестве указателя ссылки текст Домашняя страница. Сохраните изменения в документах. Просмотрите созданный Web-сайт в браузере Microsoft Internet Explorer.
Лабораторная работа № 6
СОЗДАНИЕ WEB-СТРАНИЦ СРЕДСТВАМИ
MS FRONTPAGE
Цель работы: изучить возможности программы MS FrontPage. Научиться создавать WEB-страницы.
Теоретические сведения
Microsoft FrontPage - специализированное средство для создания web-документов с удобным интерфейсом, который позволяет значительно упростить процесс разработки web-страниц и использовать при этом все возможности языка HTML.
В Microsoft FrontPage редактирование web-страницы осуществляется в режиме WYSIWYG (What You See is What You Get, что видите, то и получаете).
Microsoft FrontPage: запуск и элементы интерфейса
Для запуска редактора FrontPage выберите в Главном меню Windows команду Программы > Microsoft FrontPage. Раскроется окно приложения Microsoft Front Page, в котором, помимо меню, панели стандартных инструментов и панели инструментов форматирования, знакомым Вам по Microsoft Word, имеются:
На панели Представления (Views) находятся значки следующих видов:
Встроенный редактор FrontPage позволяет работать с web-страницей в трех режимах:
1. Обычный (Normal), предназначенный для редактирования страницы в peжиме WYSIWYG, то есть когда страница представлена так, как она будет выглядеть в Internet Explorer;
2. HTML позволяющий редактировать страницу в текстовом представлении:
3. Просмотр (Preview), разрешающий просмотреть и протестировать в том виде, в котором она будет представлена в web-обозревателе Microsoft Internet Explorer.
Для переключения режимов редактора служат вкладки:
– обычный;
– HTML;
– просмотр (Normal HTML, Preview) в нижней строке окна редактирования;
(строка видна при открытой в окне редактора web-страниц).
Для получения подсказки вызовите справку (F1), или меню Помощь (Help).
Если программа FrontPage используется в первый раз, на экран выводится пустая страница, готовая для редактирования.
Если программа FrontPage уже использовалась для редактирования других веб-узлов, автоматически открывается последний из них. Чтобы закрыть веб-узел, в меню Файл выберите команду Закрыть.
Практическое задание:
1. Запустите Microsoft FrontPage
2. Для создания структуры web-узла выберите команду Файл/Создать/Страница или Web-узел, в аналоговом окне Создание Web-страницы или Web-узла выберите Пустой Web-узел.
В окне Шаблоны Web-сайтов выберите шаблон Личный Web-узел (Personal Web), в поле параметры указать место нового сайта, введите имя диска и панки, в которой будут размещены папки и файлы создаваемого web-узла, например D:\home\my webs. Щелкните на кнопке ОК.
В результате в левой половине окна откроется список содержимого web-узла Список папок (holder List), в котором автоматически создаются папки private и images и несколько страниц с базовым содержанием по выбранному шаблону.
Созданный узел сохраняется в новой папке, которая помешается на локальный диск или на сервер Web. Этот узел можно впоследствии открыть с помощью команды Файл /Окрыть (File Open Web...) или выбрав его из списка последних открытых узлов Файл / Недавно использованные файлы.
3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру web-узла. Для отображения структуры web-узла щелкните на значке Переходы (Navigation) на панели Вид. В правой (или нижней) части окна появилась структура web-узла. Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла.
4. Наполните содержанием web-страницы. Для редактирования web-страницы можно дважды щелкнуть левой кнопкой мышки на ее имени на панели Папки/Список папок/Содержимое или ее изображении па панели Переходы.
ВНИМАНИЕ Редактор FrontPage позволяет отменить ошибочную операцию стандартными для Microsoft Office способами— щелчком на кнопке Отменить (Undo) на стандартной панели инструментов иди нажатием сочетания клавши CTRL+Z.
5. Откройте для редактирования стартовую страницу index.htm.
Внимательно рассмотрите страницу index.htm в режиме Обычный. Она состоит из заголовка страницы, панели ссылок виде кнопки под заголовком, панели ссылок в виде гиперссылок в левой части страницы и текста в правой части страницы Добро пожаловать...
6. Установите основные свойства страницы. Для этого в меню Файл (File) выберите команду Свойства (Properties). В окне свойств Страница перейдите на вкладку Общие. Введите в поле Название - название документа на русском языке, например Персональная страница. Для правильного отображения символов русского языка на вкладке язык в списке поля Язык страницы выбрать Русский, в списке поля Сохранить документ выберите Кириллица (Cyrillic), в списке поля Повторить загрузку текущего документа (Reload the current document) выбрать Кириллица (Cyrillic) и щелкните на кнопке ОК.
Для изменения элементов web-страницы укажите элемент шаблона и отредактируйте его по вашему усмотрению. Для редактирования баннера (графического заголовка) страницы, указав баннер, вызовите контекстное меню и выберите в нем команду Изменение свойств баннера Web-страницы.
В диалоговом окне Свойства объявления на странице (Page Banner Properties) установите флажок Изображение (Picture), а в поле Текст объявления страницы (Page banner text) введите новый текст, например Моя персональная страница, и щелкните на кнопке Да (ОК). Текст в баннере изменился.
Отредактируйте текст в правой части страницы (Добро пожаловать...), например, следующим образом: Данный сайт изготовлен в качестве примера редактирования web-узла, созданного по шаблону персональной страницы. Последние изменения были внесены…
СОВЕТ. Наиболее эффективным инструментом редактирования является контекстное меню, которое вызывается нажатием твой кнопки мыши на редактируемом объекте и содержит команды для операции с объектом, на который указывав мышь.
Для изменения формата даты обновления страницы укажите объект даты и выберите в контекстном меню команду Свойства даты и времени. В окне Дата и время измените формат даты и щелкните на кнопке ОК.
Для изменения свойств панели ссылок в виде гиперссылок в левой части web-страницы выделите элементы на панели и выберите в контекстном меню команду Свойства панeли ссылок.
В окне Свойства Панели ссылок на вкладке Общие установите переключатель Дочерний уровень, на вкладке Стиль выберите подходящий стиль в списке Выберите стиль, в разделе Ориентация и внешний вид установите переключатель По вертикали, установите флажок Использовать активные рисунки и щелкните на кнопке Да (ОК). После этого тексты с гиперссылками в левой части web-страницы будут отображаться в виде вертикально расположенных кнопок.
7. Перейдите в режим Переходы и переименуйте web-страницы Interests в Интересы, a Favorites в Избранное. Для перехода в режим Переходы щелкните на значке Переходы на панели Представления.
Для переименования web-страницы, указав страницу, выберите в контекстном меню команду Переименовать и введите новое название страницы.
ПРИМЕЧАНИЕ При переименовании web-страницы не изменяется имя файла, в котором она сохранена. Перейдите к редактированию стартовой страницы web-узла и убедитесь, что на надписи на кнопках навигации в левой части страницы изменились.
8. Для проверки действия гиперссылки на кнопке щелкните на ней мышью при нажатой клавише Ctrl. В окне редактора FrontPage раскроется web-страница, на которую передает управление ссылка с данной кнопки.
9. Для просмотра вида web-страницы в web-обозревателе щелкните на значке Просмотр. Щелкнув на значке HNML, вы можете посмотреть, как записан текст данной web-страницы на языке HTML. Обратите внимание, что текст этой страницы в формате HTML значительно лаконичнее, чем текст аналогичной страницы, сгенерированный в среде Microsoft Word.
10. Для оценки вида созданной нами web-страницы в других web-обозревателях выберите в меню Файл (File) ) команду Просмотр в Браузере (Preview In Browser). В появившемся диалоговом окне Просмотр в Браузере (Preview In Browser) выберите браузер, укажите разрешение экрана и щелкните на кнопке Просмотр (Preview).
11. В окне обозревателя проверьте действие гиперссылок, правильность отображения текста и графических элементов страницы. По окончании просмотра закройте окно браузера стандартным способом, завершите формирование web-страницы, сохранив ее.
12. Примените к созданному узлу шаблон оформления (на ваш вкус) используя меню Формат/Тема.
Контрольные вопросы
Лабораторная работа № 7
СОЗДАНИЕ WEB-СТРАНИЦ СРЕДСТВАМИ
MS FRONTPAGE. РЕДАКТИРОВАНИЕ СТРАНИЦ
Цель работы: изучить возможности программы. Научиться редактировать WEB-страницы, создавать бегущую строку
Задание 1. Редактирование страницы
1. Запустите Microsoft FrontPage и откройте созданный ранее web-узел, для чего выберите команду Файл /Открыть.
2. В окне FrontPage щелкните на значке Папки (Folders) на панели Представления (Views). Выберите на панели Папки слeдующую страницу, с которой вы собираетесь работать, например interest.Htm. и откройте ее для редактирования, для чего дважды щелкните левой кнопкой мыши на ее названии.
Отредактируйте текст на данной странице. В поле Увлечение впишите текст описания одного из ваших увлечений, например:
Мне нравится ездить на автомобиле. Мною интересного об автомобилях я узнал(а) на сайте «Ласточка».
Вместо слов Увлечение 1 вставьте рисунок автомобиля, для чего указав место вставки рисунка, выберите в меню Вставка команду Изображение > Из файла. Выбрав в поле папку и файл рисунка, щелкните на кнопке ставить.
3. Для установки и изменения свойств изображения, щелкнув правой клавишей мыши на вставленном рисунке и выбрав в контекстном меню Свойства рисунка, перейдите в открывшемся окне на вкладку Общие. В области Альтернативные представления поле текст введите Автомобили. Откройте складку Вид, установите в поле Толщина границ значение 1, в полях Интервал по горизонтали и Интервал по вертикали установите значение 2. Для применения внесенных изменений щелкните на кнопке ОК.
4. Создайте абсолютную гиперссылку на слово Ласточка, для чего выделив его, щелкните на кнопку Гиперссылка. В окне Вставка гиперссылки в поле адрес введите адрес Web-страницы.
Примечание. При создании гиперссылки вы можете определить целевой файл одним из двух возможных способов: в виде абсолютной или относительной ссылки. Абсолютная ссылка использует полный URL и указывает точное местонахождение файла. Относительная ссылка указывает местонахождение файла по отношению к адресу Web-страницы, содержащую данную гиперссылку.
5. Аналогично замените текст Увлечение 2 на странице interest.htm на текст об Ваших увлечениях чем-либо, вставив соответствующий рисунок из файла (картинки) и создан гиперссылку на ваш почтовый адрес.
6. Щелкнув на значке Гиперссылки панели представление, просмотрите все ссылки, относящиеся к выбранной странице и созданные автоматически при использовании шаблона Персональная страница.
7. Отредактируйте на всех страницах гиперссылки возврата па родительскую страницу.
8. Одним из наиболее удобных и гибких средств организации материала на странице являются таблицы. Они помогают во многих случаях упростить форматирование текста и размещение графических и изображений. Кроме того, используя таблицы, бывает легче достичь единообразия на страницах. Построить таблицу в редакторе FrontPage можно, либо непосредственно нарисовав ее на странице, interest.htm либо вставив её с помощью меню Таблица.
Откройте для редактирования страницу, и создайте на странице таблицу из двух строк и трех колонок, в которой разместите фотографии из папки images.
Для вставки таблицы укажите место вставки таблицы и выберите команду Таблица > Вставка > Таблица. В окне Вставить таблицу укажите в области Размер количество строк, количество колонок 3. и щелкните па кнопке Да (ОК) для создания таблицы.
Для вставки фотографии укажите ячейку таблицы, а затем выберите Вставка Рисунок Из файла, в окне Изображение выберите папку и файл рисунка. Щелкните на кнопке Вставить. Для изменения свойств рисунка, указав рисунок, выберите в контекстном меню команду Свойства рисунка, на вкладке Общие в разделе Альтернативные представления введите в поле Текст Джип, на вкладке Вид в поле Толщина границы установите значение 0. В полях Интервал по горизонтали и Интервал по вертикали установите значения 1. Для применения внесенных изменений щелкните на кнопке ОК.
9. Установите на странице interest.htm панель навигации с кнопкой Вверх (для возврата на родительскую страниц) index.htm. Чтобы эта кнопка отображалась только на странице, установите курсор в середине этой страницы и выберите в меню Вставка команду Web-компонент. В диалоговом окне Вставка Web-компонента выверите Панели ссылок, в списке поля Выбрать панель типов/ Панель с пользовательскими ссылками. Щелкните на кнопке Далее (Next). В следующем окне выберите подходящий стиль оформления кнопок панели ссылок, затем выберите ориентацию, например горизонтальную, и щелкните на кнопке Готово. После этого в окне Создание новой панели ссылок введите название создаваемой панели (можно оставить имя, предлагаемое по умолчанию) и щелкните на кнопке ОК. В окне Свойства панели ссылок, щелкнув на кнопке Добавить ссылку, укажите имя web-страницы, на которую должен осуществляться переход при нажатии на создаваемую кнопку, в нашем примере index.him. установите флажок Родительская страница и щелкните на кнопке ОК.
10. Действуя аналогично, установите в область навигации в левой части страницы кнопку Домой для передачи управления со всех страниц данного web-узла на стартовую (домашнюю) страницу.
11. Сохраните страницу, щелкнув на кнопке Сохранить на стандартной панели инструментов FrontPage. Для проверки вида страницы перейдите в режим Просмотр (Preview).
12. Оформите на web-странице Избранное перечень ссылок на ресурсы в Интернете в виде списка. Для перехода к редактированию web-страницы Избранное, щёлкнув па значке Папки, выведите содержимое web-узла и щелкните на файле favorite.htm. После этого данная страница будет раскрыта для редактирования и окне редактора FrontPage.
На этой странице удалите лишний текст, введите приведенный ниже текст:
На данной странице я собираю наиболее интересные на мой взгляд, ссылки в Интернете – Главный информационно-аналитический центр Министерства образования Республики Беларусь www.giac.unibel.by, Национальная библиотека Беларуси www.natlib.org.by, Республиканский институт контроля знаний www.rikz.by, Минский дворец детей и молодёжи www.mddm.org, фестиваль педагогических идей «Открытый урок» http://festival.1september.ru/ index.php, энциклопедия Кругосвет, http://www.krugosvet.ru/articles/ 17/1001738/1001738a1.htm#1001738-A-101, электронная версия журнала «Домашний компьютер», http://www.compulenta.ru/dk/
Оформите набранный текст в виде списка, для чего, выделив данный текст в отдельный абзац, щелкните па кнопке Список на панели инструментов форматирования. При желании изменить свойства списка выделите его, в контекстном меню выберите команду Свойства списка, измените свойства списка, например, на вкладке Маркеры изображения установите флажок Указать рисунок. Щелкнув на кнопке Просмотр, найдите файл рисунка, который будет служить изображением маркера в списке. Щелкнув в окне Выберите рисунок на кнопке ссылки на ресурс файловой системы компьютера, выберите папку и файл рисунка в открывшемся окне Выберите файл и щелкните на кнопке Да.
Создайте гиперссылки на элементы созданного списка. Для создания гиперссылки, выделив текст элемента списка, например Главный информационно-аналитический центр Министерства образования Республики Беларусь, выберите в контекстном меню команду Гиперссылка, затем в окне Вставить гиперссылку в поле Address введите http//www.giac.unibel.by и щелкните на кнопке Да. Аналогично создайте гиперссылки на остальные элементы списка ссылок.
Задание 2. Создать бегущую строку
1. Для создания бегущей строки укажите место расположения бегущей строки на web-странице и вызовите панель Web-компонент. Выберите инструмент Бегущая строка. В диалоговом окне Свойства бегущей строки введите содержание текста, например. «если вы знаете интересные ссылки, пишите мне», выберите направление, например Влево, установите задержка 90, величина 10, Прокрутка, Ширина 500 пикселов, Повтор Непрерывно, цвет фона и щелкните на кнопке Да для завершения создания бегущей строки.
2. Просмотрите действие полученной бегущей строки текста, переключившись в режим Просмотр. Для изменения бегущей строки переключитесь в режим Обычный и. указав на строку, выберите в контекстном меню команду свойства Заставки, затем в окне Свойства Заставки измените параметры и щелкните на кнопке Да для завершения редактирования свойств бегущей строки. Просмотрите действие полученной бегущей строки текста, переключившись в режим просмотр.
Лабораторная работа № 8
СОЗДАНИЕ WEB-СТРАНИЦ СРЕДСТВАМИ
MS FRONTPAGE. АНИМАЦИЯ ЭЛЕМЕНТОВ
Цель работы: изучить возможности программы MS FrontPage. Научиться анимировать элементы web-страницы, публиковать сайт в локальной или глобальной сети.
Теоретические сведения
Анимация элементов web-страницы
FrontPage позволяет использовать различные визуальные и звуковые динамические эффекты при построении страниц, то есть делать страницы активными. Для этого используется команда Формат/переход Страницы. Динамические эффекты, которую можно применять и к отдельным фрагментам страниц (объектам), определяя их поведение в зависимости от наступления заданных событий.
Для анимации текста или другого элемента web-страницы этот элемент необходимо сначала выделить, а затем использовать команду Формат(правой кнопкой мыши вызвавть контекстное меню)/ Эффекты Динамического HTML (Format Dynamic HTML effects) . Действие эффекта распространяется либо на текущий объект либо в случае отсутствия выделения (например, на строку текста на которой стоит курсор), либо на выделенный объект (например, на несколько выделенных абзацев). После определения объекта или нескольких объектов, на которые будут распространяться эффекты, нужно выбрать событие, при наступлении которого эффект будет реализован. Это делается на панели инструментов Эффекты DHTML.
Действие динамического эффекта наступает в случае одного из четырех событий: одинарный щелчок мышью (Click), двойной щелчок мышью (Double click), наведение указателя мыши (Mouse over), загрузка страницы (Page load).
На панели Эффекты DHTML в списке поля Включено (Choose an effect) можно выбрать эффект, а в списке поля Применение (Choose Settings) выбрать его параметры. Например, при загрузке страницы Mage load можно выбрать для текста эффект приближение (Zoom) и параметры Внутрь (ln) или Наружу (Out).
Для текста при наведении указателя мыши (Mouse over) можно выбрать эффект Форматирование (Formatting) и параметры Изменять Шрифт (Choose Font...) и Изменять рамку (Choose Border...).
Для рисунка при наведении указателя мыши (Mouse over) можно выбрать эффект Смена картинки (Swap Picture) и с помощью Выбор рисунка (Choose Picture...) выбрать картинку для замены.
Задание 1. Задание динамического эффекта тексту
1. Откройте в окне редактора FrontPage файл interest.htm и задайте динамический эффект тексту.
Вставьте в таблицу над рисунками еще одну строку, для чего, указав первую строку таблицы, выберите в меню Таблица (Table) команду Вставить Строки или столбцы (Insert Rows or Columns), затем в диалоговом окне Вставить строки или столбцы (Insert Rows or Columns) установите флажок Строки (Rows), в поле Число строк (Numbers of rows) кажите 1, в области окна Место (Location) установите флажок Над выделенным (Above selection) и щелкните на кнопке Да (ОК) (если таблицы нет создайте таблицу).
Выделите ячейки в первой строке и объедините их, выбрав команду Таблица Объединение ячеек (Table > Merge cells).
Введите в полученную ячейку текст, например: Посмотрите фотографии автомобилей, и задайте ему динамический эффект, выбрав команду Формат Эффекты Динамическою HTML (Format Dinamic HTML, effects), затем в появившейся панели Эффекты DHTML, в списке ноля Включено (On) выберите событие Загрузка страницы (Page load), в списке поля Применение (Apply) выберите Падать (Drop in by word) или любой другой..
Завершив создание динамического эффекта, закройте панель Эффекты DHTML, щелкнув на кнопке закрытия в правом верхнем углу панели.
2. Задайте динамический эффект одному из рисунков на странице interest.htm. Выделив рисунок, выберите команду формат > Эффекты Динамического HTML, затем на панели Эффекты DHTML в списке поля Включено выберите событие Щелчок (Cliск), в списке поля Применение выберите Замена (Choose picture). Щелкнув на эффекте Выбор изображения, в раскрывшемся окне Изображение (Picture) выберите файл другого рисунка и щелкните на кнопке Да. Закройте окно изображение, щелкнув на кнопке Да.
Закройте панель Эффекты DHTML, щелкнув на кнопке закрытия в правом верхнем углу панели.
3. Сохраните страницу interest.htm и переключившись в режим Просмотр, просмотрите действие динамического эффекта для текста при загрузке web-страницы. Щелкая мышью на рисунке с динамическим эффектом, проверьте действие эффекта смены рисунка при щелчке на нем.
4. Откройте в окне редактора FrontPage web-страницу favorite.htm задайте ей самостоятельно различные эффекты.
Проверьте работоспособность созданных эффектов. Сохраните страницу favorite.htm.
5. Откройте созданный web-узел для просмотра в web-обозревателе, для чего загрузите web-обозреватель, например Microsoft Internet Explorer, выберите в его меню команду Файл/Открыть, щелкните на кнопке Обзор и найдите в окне проводника папку данного web-узла и файл index.him. Откройте данный файл, щелкнув на кнопке Открыть. Щелкните на кнопке ОК.
Щелкнув на стартовой странице web-узла на кнопке Избранное, проверьте действие эффекта появления страницы fаvorite.htm.
Задание 2. Создание формы с помощью Мастера форм
1. Запустите FrontPage Для создания web-страницы с формой выберите Команду Файл/Новый >Страница или Web, в диалоговом окне Новая страница или Web выберите Шаблоны страницы. В окне Шаблоны страниц выберите шаблон Мастер форм (form Page Wizard) и щелкните на кнопке ОК.
Далее следуйте указаниям Мастера страницы формы Для перехода к cследующему шагу Мастера щелкните на кнопке Далее (Next). Если нужно вернуться назад, щелкните на кнопке назад (Back).
2. На втором шаге Мастера, щелкнув на кнопке Add выберите в списке тип создаваемой формы, например Контактная информация (Contact information). В поле Отредактируйте текст приглашения для этих вопросов (Edit the prompt for this question) ведите текст, например Пожалуйста, введите вашу контактную информацию.
Щелкнув на кнопке Далее (Next), перейдите к следующему окну диалога с Мастером, в котором выберите поля, включаемые в создаваемую форму. В следующем диалоговом окне Параметры представления формы (PREZENTATIOH > OPTIONS) и щелкните на кнопке далее (Next) для перехода к следующему окну.
В окне Параметры вывода результатов (OUTPUT OРTIONS) установите переключатель сохранять результаты в текстовом файле (Save results to a text file) в поле Введите имя файла результата (Inter the base name of the results file) и щелкните на кнопке далее (Next) для перехода к следующему диалоговому окну Завершите работу Мастера, щелкнув на кнопке Finish.
После этого FrontPage сгенерирует форму, параметры котором были определены в процессе ваших диалогов с Мастером форм.
Отредактируйте надписи на бланке формы. Для изменения размеров поля формы выделите поле и перетащите маркер границы поля в нужном направлении.
Для просмотра или изменения свойств кнопки Submit Form, выделив кнопку, в контекстном меню выберите команду Свойства поля формы.
В диалоговом окне Параметры нажатой кнопки в поле Name (Имя) введите имя кнопки, например button1 в поле value/Label (Значение/Метка) введите текст Отправить, переключатель Тип кнопки установите Submit (Подпись) - кнопка отправки данных из формы. Закройте окно Параметры нажатой кнопки, щелкнув на кнопке ОK.
3. Аналогично отредактируйте свойства кнопки Сброс формы (Reset Form), задав ей имя Clear, (Value/Label Значение/Метка) — Очистить и установив переключатель Тип кнопки - Reset (Сброс).
Установив указатель мыши в рамке формы, выберите и контекстном меню команду Свойства Формы (Form Properties), затем в окне Свойства Формы просмотрите, и отредактируйте имя файла, в котором будут сохраняться данные, веденные посетителями вашего сайта.
Щелкнув на кнопке Опции, в диалоговом окне Параметры сохранения результатов из формы (Options for Saving Results of Form) ознакомьтесь е параметрами сохранения результатов на различных вкладках. Нажав клавишу Esc, закройте окно Параметры сохранения результатов из формы (Option; for Saving Resulis of Form). Щелкнув на кнопке OK, завершите просмотр и редактирование свойств формы.
4. Задайте фон созданной странице, для чего, выбрав в меню Формат команду Фон, в диалоговом окне Свойства страницы (Page Properties) установите флажок Фоновый рисунок. Щелкните на кнопке Обзор, к окне Выберите фоновый рисунок найдите файл рисунка и щелкните на кнопке Открыть.
Щелкнув па кнопке ОК, примените выбранный фон.
5. Сохраните созданную web-страницу с формой, выбрав команду Файл Сохранить как и присвоив имя, например page_forml.htm.
Для проверки действия созданной формы переключите FrontPage в режим Просмотр. Введя данные в форму, щелкните на кнопке Отправить.
Задание 3. Создать кнопку с гиперссылкой на другую страницу
Для выполнения задания следует в меню Вставка (insert) выбрать команду Web-Компонент Меняющаяся кнопка (Component > Hover Button). В окне Hover Button находится ряд параметров, обеспечивающих дополнительные возможности кнопки.
1. Удалите кнопку Вверх (Up), созданную на данной странице ранее. Для создания кнопки установите курсор в конец текста на web-странице interest.htm и выберите команду Вставка Web-компонент. В окне Вставка Web-компонент выберите в списке компонентов Динамические эффекты (Dinamic effects), а затем в списке эффектов выберите Интеравтивная кнопка и щелкните на кнопке Готово (Finish).
2. В окне Свойства кнопки (Hover Button Properties) в поле Текст кнопки (Button text) введите Назад. Чтобы в поле Связь (Link to) указать название web-cтраницы, на которую следует перейти по нажатию создаваемой кнопки, щелкните на кнопке обзор (Browse), в окне Выбор гиперссылки парящей кнопки (Select Hover Button Hyperlink) выберите папку и файл web-страницы, в данном случае interest.htm. и щелкните на кнопке Да.
Выберите в списке поля Эффект (Effect) вариант Инверсия освещения (Reverse glow) и щелкните на кнопке Да для завершения создания кнопки.
3. Сохраните страницу и просмотрите полученную кнопку, переключившись в режим Просмотр (Preview). Для проверки действия подведите указатель мыши на созданную кнопку, обратите внимание на изменение освещения.
Щелкнув на кнопке левой кнопкой мыши, убедитесь в выполнении перехода по ссылке.
4. Сохраните страницу и просмотрите измененную кнопку, переключившись, в режим Просмотр (Preview).
5. Создайте авторский веб-сайт, состоящий из главной страницы и веб-страницы с Вашими увлечениями (хобби). Разместите гиперссылки на главной веб-странице, структура которой следующая:
|
Ваша Фамилия Имя (бегущая строка) В конец страницы (ссылка-переход в конец веб-страницы) Ваша фотография Краткие сведения о вас Мои увлечения (ссылка на веб-страницу с Вашими увлечениями) Пишите (ссылка на адрес вашей электронной почты) В начало страницы (ссылка-переход в начало веб-страницы) |
Публикацией сайта называют его размещение на сервере или локальном компьютере с возможностью вызова из сети (глобальной или локальной).
Для публикации сайта, подготовленного в редакторе FrontPage, необходимо с помощью меню Файл Опубликовать узел вызвать диалоговое окно Свойства удаленного веб-узла.
Для размещения созданного сайта на сервере narod.ru в строке Расположение удаленного веб-узла следует указать адрес ftp-узла сервиса narod.ru, который для всех пользователей является одинаковым: ftp://ftp.narod.ru
В дальнейшем пользователю необходимо ввести имя и пароль в окне Требуется имя и пароль.
В открывшемся новом окне слева будут размещены файлы и папки созданного локального веб-узла, а справа файлы и папки удаленного веб-узла. После указания режима все файлы локального веб-узла копировать на сервер необходимо нажать кнопку Опубликовать веб-узел.
Когда копирование всех файлов завершится, пользователь может просмотреть размещенный в сети сайт. Для этого в строке браузера вводится адрес, например www.Mypage.narod.ru
Лабораторная работа № 9
СОЗДАНИЕ WEB-СТРАНИЦ СРЕДСТВАМИ
MS PUBLISHER 2003
Цель работы: научиться создавать WEB-страницы, публиковать их в локальной или глобальной сети.
Теоретические сведения
Последовательность создания Веб-узла
Publisher не является ни HTML-редактором, ни программой управления веб-узлами, как Microsoft Office FrontPage 2003. Publisher оптимально подходит для создания небольших веб-узлов, для которых не требуется сложное программирование и использование баз данных. После запуска программы Выбираем строку web-узлы. Выбираем вариант, который соответствует целям создания проекта. Мастера создания веб-узлов в Publisher 2003 содержат заготовки веб-страниц, включая страницы "Домашняя страница", "О нас", "Наши координаты", а также страницы каталога и страницы описания товаров или услуг, которые позволят очень быстро создать прекрасный веб-узел. Благодаря возможности выбирать из множества макетов страниц и панелей навигации профессионального качества вы сможете создать прекрасный и полезный веб-узел, отвечающий вашим целям.
Типы заготовленных веб-страниц
Если предполагается создавать веб-узел с нуля, вы можете воспользоваться преимуществами выбора новых типов веб-страниц. Благодаря предоставлению готовой структуры для ваших материалов эти страницы позволяют с большей эффективностью разрабатывать веб-узел, обеспечивая целостность замысла, которая отличает веб-узлы профессионального качества. Доступны макеты следующих типов страниц: О нас, Наши координаты , Вопросы и ответы , Календарь, Фотоколлекция, Задания, Продукты, Услуги, Проекты, События, Дополнительные ссылки.
Все перечисленные выше типы страниц могут быть добавлены в созданный веб-узел.
Добавление в веб-узел страницу нового типа
ПРИМЕНИТЕ наиболее подходящие на ваш взгляд цветовые и шрифтовые схемы оформления.
Усовершенствования панелей навигации
Веб-узел предназначен для предоставления информации и ресурсов заказчикам. Но вся информация и все ресурсы в мире не имеют значения, если заказчики не могут найти то, что им требуется. При создании панели навигации в Publisher все ссылки веб-узла создаются и обрабатываются автоматически, чтобы можно было больше времени потратить на разработку информационных материалов и не беспокоиться о том, как посетители их найдут.
В предыдущих версиях Publisher можно было создавать для веб-узла панели навигации, содержащие не более десяти ссылок. В Publisher 2003 это ограничение устранено. Кроме того, были добавлены три новые конфигурации панели навигации: Только внизу страницы,Только вверху страницы (горизотальная), Вверху и внизу страницы (горизонтальная и нижняя)
В Publisher 2003 можно также изменять панели навигации, добавляя и удаляя ссылки и изменяя вид панели и кнопок.
Добавление панели навигации при разработке веб-узла с использованием мастера создания веб-узлов
При разработке веб-узла с использованием одного из мастеров создания веб-узлов, панели навигации добавляются на веб-страницы автоматически.
Примечание. Если требуется добавить ссылки на веб-страницы, не относящиеся к создаваемому узлу, или создать на некоторых страницах особую панель навигации, которая связывала бы только эти страницы, предоставляется возможность добавить новую панель навигации. Можно изменить расположение панелей навигации, выбрав нужный вариант в области задач Параметры веб-узла в группе Панель навигации.
Можно также щелкнуть панель навигации, чтобы выбрать ее, а затем щелкнуть значок мастера в нижней части объекта панели навигации, чтобы открыть область задач "Панель навигации", в которой можно добавлять ссылки и вносить изменения.
Добавление панели навигации при создании веб-узла с нуля
Откроется диалоговое окно Свойства панели навигации. Нажмите кнопку Добавить ссылку. В диалоговом окне Добавить ссылку в поле Связать с выберите вариант местом в документе. В списке Выберите место в документе щелкните страницу, с которой нужно связать панель навигации. В поле Текст введите текст, который должен отображаться на панели навигации, и нажмите кнопку ОК. В диалоговом окне Свойства панели навигации нажмите кнопку ОК.
Публикация веб-узла в Интернете или в локальной сети
Чтобы опубликовать веб-узел в сети Интернет:
Публикация веб-узла в папке на компьютере
Практическое задание
1. Создать сайт в соответствии с подготовленной структурой и содержанием разработанным в лабораторной работе № 2.
2. Опубликовать сайт в локальной сети.
Приложение 1
Справка по созданию web-страниц средствами MS Office
|
Действие |
Реализация |
|
1 |
2 |
|
Преобразование документов MS Office в формат HTML |
|
|
Настройка параметров сохранения документов Microsoft Office в формате HTML |
Сервис / Параметры... / вкладка Общие / кнопка Параметры Web-документа... |
|
Преобразование документов Microsoft Office в формат HTML |
Файл / Сохранить как Web-страницу... |
|
Создание Web-страниц средствами Microsoft Word |
|
|
Создание многостраничного Web-узла с помощью мастера Web-страниц |
Файл / Создать... / вкладка Web-страницы / выбрать Мастер Web-страниц |
|
Создание Web-страниц на основе интерактивных шаблонов |
Файл / Создать... / вкладка Web-страницы / выбрать шаблон |
|
Создание пустой Web-страницы |
Файл / Создать... / вкладка Общие / выбрать шаблон Web-страница |
|
Определение заголовка Web-страницы (отображается в строке заголовка браузера) |
Файл / Свойства / вкладка Документ / в поле Название ввести заголовок Web-страницы |
|
Применение стиля |
Формат / Стиль... или на панели инструментов |
|
Определение цвета фона или фонового рисунка Web-страницы |
Формат / Фон |
|
Применение темы к Web-странице |
Формат/Тема... |
|
Вставка горизонтальной линии |
Формат / Границы и заливка... / вкладка Граница / кнопка Горизонтальная линия... |
|
Форматирование горизонтальной линии |
Щелчок правой кнопкой мыши по линии / Формат горизонтальной линии или выделить линию / Формат / Горизонтальная линия... |
|
Вставка графического изображения |
Вставка / Рисунок / Из файла... |
Продолжение приложения 1
|
1 |
2 |
|
Определение альтернативного текста для графического изображения (отображается в браузере в режиме отключения графики) |
Щелчок правой кнопкой мыши по рисунку / Формат рисунка... (или выделить рисунок / Формат / Рисунок...) / вкладка Web / в поле Замещающий текст ввести альтернативный текст |
|
Подключение/отключение панели инструментов Web-компоненты |
Вид / Панели инструментов / Web-компоненты |
|
Добавление фонового звука к Web-странице |
Кнопка на панели Web-компоненты |
|
Вставка бегущей строки (не отображается в Netscape Navigator) |
Кнопка на панели Web-компоненты |
|
Переход в режим конструктора |
Кнопка на панели Web-компоненты |
|
Просмотр Web-страницы в виде HTML |
Вид / Источник HTML |
|
Просмотр Web-страницы в браузере |
Файл / Предварительный просмотр Web-страницы |
|
Вставка и редактирование гиперссылок. Создание закладок |
|
|
Вставка гиперссылки на файл, расположенный на локальном компьютере |
Выделить фрагмент текста или графический объект, которые будут использоваться в качестве указателя ссылки / Вставка / Гиперссылка... / кнопка Файл... / выбрать нужный файл / ОК / кнопка Подсказка... / в поле Текст подсказки ввести текст (отображается при наведении курсора мыши на ссылку) / ОК |
Продолжение приложения 1
|
1 |
2 |
|
Вставка гиперссылки на внешний ресурс сети Интернет |
Ввести адрес ресурса в документ (гиперссылка будет создана автоматически) или выделить фрагмент текста или графический объект, которые будут использоваться в качестве указателя ссылки / Вставка / Гиперссылка../ в поле Введите имя файла или Web-страницы указать адрес ресурса (URL) |
|
Вставка гиперссылки на адрес электронной почты |
Ввести адрес электронной почты в документ (гиперссылка будет создана автоматически) или выделить фрагмент текста или графический объект, которые будут использоваться в качестве указателя ссылки / Вставка / Гиперссылка... / в списке Связать с выбрать электронной почтой / в поле Электронная почта ввести адрес электронной почты / в поле Тема ввести тему сообщения / кнопка Подсказка... / в поле Текст подсказки ввести текст (отображается при наведении курсора мыши на ссылку) / ОК |
|
Включение режима отображения закладок в документе |
Сервис / Параметры... / вкладка Вид / в разделе Показывать установить флажок закладки |
|
Создание закладки |
Выделить фрагмент текста или установить текстовый курсор в то место, где должна быть закладка / Вставка / Закладка... / в поле Имя закладки ввести ее имя / кнопка Добавить |
|
Удаление закладки |
Вставка / Закладка... / выделить имя закладки / кнопка Удалить |
Продолжение приложения 1
|
1 |
2 |
|
Вставка гиперссылки на закладку |
Выделить фрагмент текста или графический объект, которые будут использоваться в качестве указателя ссылки / Вставка / Гиперссылка... / кнопка Закладка... / в диалоговом окне Выбор места в документе развернуть список Закладки для просмотра всех закладок документа / выбрать нужную закладку / ОК |
|
Изменение гиперссылки |
Щелчок правой кнопкой мыши по ссылке / Гиперссылка / Изменить гиперссылку... / указать другой документ или объект в документе, на который будет указывать ссылка |
|
Удаление гиперссылки |
Щелчок правой кнопкой мыши по ссылке / Гиперссылка / Удалить гиперссылку |
Список использованной литературы
Содержание
|
Введение ………………………………………………………… |
3 |
|
Лабораторная работа № 1. Интерфейс программы MS Internet Explorer…………………………………………………. |
4 |
|
Лабораторная работа № 2. Введение в технологию создания web-сайтов……………………………………………………….. |
10 |
Лабораторная работа № 3. Создание учебно-методических и дидактических материалов средствами MS Word………….. |
29 |
Лабораторная работа № 4. Создание учебно-методических и дидактических материалов средствами MS Power Point…… |
32 |
Лабораторная работа № 5. Создание web-сайта средствами MS Оffice………………………………………………………… |
35 |
|
Лабораторная работа № 6. Создание web-страниц средствами MS FrontPage…………………………………………………. |
38 |
|
Лабораторная работа № 7. Создание web-страниц средствами MS FrontPage. Редактирование страниц……………………. |
43 |
|
Лабораторная работа № 8. Создание web-страниц средствами MS FrontPage. Анимация элементов.………………………. |
48 |
|
Лабораторная работа № 9. Создание web-страниц средствами MS Publisher 2003……………………………………………. |
54 |
|
Приложение 1. Справка по созданию web-страниц средствами MS Office ……………………………………………………. |
59 |
|
Список использованной литературы…………………………... |
63 |
Учебное издание
ИНТЕРНЕТ-ТЕХНОЛОГИИ В ОБРАЗОВАНИИ
Лабораторные работы (практикум)
для студентов специальностей
1-02 06 02 «Технология. Дополнительная специальность»,
Составители:
ДРОБЫШ Алексей Анатольевич
ЗУЁНОК Анна Юльяновна
Подписано в печать 24.02.2009.
Формат 60х84 1/16. Бумага офсетная
Отпечатано на ризографе. Гарнитура Таймс.
Усл. печ. л. . Уч.-изд. л. . Тираж 50. Заказ ……..
Издатель и полиграфическое исполнение:
Белорусский национальный технический университет.
ЛИ № 02330/0131627 от 01.04.2004.
Проспект Независимости, 65. 220013, Минск.
PAGE 38