АЛМАТИНСКИЙ ИНСТИТУТ ЭНЕРГЕТИКИ И СВЯЗИ

 

 

 

 

Кафедра  инженерной  кибернетики

 

 

 

ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В ЭНЕРГЕТИКЕ

 

 

 

Методические указания к выполнению

лабораторных работ

 

(для студентов всех форм обучения энергетических специальностей)

 

 

 

 

 

 

 

СОСТАВИТЕЛЬ: В. М. Тарасов. Информационные технологии в энергетике. Методические указания к выполнению лабораторных работ (для студентов всех форм обучения энергетических специальностей) – Алматы: АИЭС, 2006. –35 с.

 

 

 

 

 

 

Представлены методические указания к выполнению лабораторных работ по дисциплине «Информационные технологии в энергетике». Приведены основные сведения по языку создания web-сайтов HTML. Приведены примеры создания web-страниц на этом языке в приложении блокнот. Кроме того, разработаны примеры для  выполнения web-документов в приложениях  Word-97, Word-2002, Word-2003, Publisher, FrontPage.

 

 

 

 

 

Рецензент: канд. техн. наук, доцент Ю. В.  Шевяков.

 

 

 

 

 

 

 

 

 

Печатается по дополнительному плану издания Алматинского института энергетики и связи на 2006 год.

 

 

 

 

© Алматинский институт энергетики и связи 2006 г.

 

 

Введение

Предлагаемые методические указания позволяют студентам изучить современные способы создания web-сайтов для сети Internet. Создание собственного web-сайта фирмы является важной задачей, поскольку он является  с одной стороны рекламой фирмы и ее товаров или услуг, с другой стороны созданный web-сайт создает впечатление о надежности данной фирмы. Web-сайт помогает привлекать новых партнеров и потребителей, выполнять заказы потребителей, собирать сведения о возможных колебаниях рынка.

Каждая лабораторная работа начинается с краткого пояснения, как ее выполнять. Затем приводится пример выполнения. Студенты на основе примера самостоятельно создают web-страницы или web-сайты для какой-либо фирмы, например той в которой они проходили практику. Созданные документы, кроме сохранения на винчестер рабочего компьютера, студенты должны сохранять и на дискету, которую они представляют в качестве отчета в конце курса.

Кроме обязательной части использования блокнота для первых нескольких работ с целью изучения языка HTML, предусмотрена работа в различных приложениях: Word-97, Word-2002, Word-2003, Publisher, FrontPage. Разработка остальных web-документов выполняется на том программном обеспечении, которое установлено в компьютерном классе, в котором проводятся занятия. При создании web-сайтов предполагается, что пользователь умеет работать в Word и блокноте.

 

1   Создание web-сайтов в блокноте

 

Язык HTML (язык разметки гипертекста) используют для создания web-страниц, пересылаемых в сети Internet. Основы языка  HTML, составляют теги, которые могут быть парными (открывающий и закрывающий) или непарными. Действие парных тегов и их атрибутов продолжается от открывающего тега до закрывающего тега. Непарный тег выполняется полностью, сразу. Между парными тегами располагается информация или другие теги. Язык HTML не чувствителен к регистру символов тегов. Пробелы после угловой скобки “<”  и перед скобкой “>” недопустимы.

<Html> и </Html> - первый тег открывает web-страницу, второй закрывает ее. Все остальные теги располагаются между этими тегами.

<Head> и </Head> - внутри этих тегов пишут теги <Title> и </Title>. Они служат для создания текста внешнего заголовка web-страницы. После тега </Title> располагаются  мета команды, имеющие разное назначение. Они записываются автоматически специальными редакторами web-страниц. Ключевые слова, необходимые для поисковых машин, пишутся мастером.

 <Body> и </Body> - пишутся после тега  </Head> . Между ними помещают информацию, которая и будет передана в Internet.

 

1.1             Лабораторная работа № 1. Основы языка HTML

Цель работы: изучение основных тегов языка HTML.

Оборудование и программное обеспечение: windows98 и выше, блокнот.

Задание: создайте web-страницу, отражающую структуру выбранной фирмы.

Методика

<Hn> и </Hn> - эти теги устанавливают стиль и размер заголовка, причем, n меняется от 1 до 6. H1 – самый большой размер.

<P> и </P> - теги параграфа, внутри которых действуют объявленные атрибуты параграфа. Выравнивание текста задается атибутами: Align=”Left” – выравнивание к левому краю окна (Right – к правому, Center – по центру).

<Br> - непарный тег, переносит текст на новую строку.

Отметим, что такие символы, как табуляция, конец строки или более одного пробела подряд, браузер не воспринимает.

<Hr> - тег горизонтальной линии. Он имеет атрибуты:

- size=”число”. Число указывает высоту прямой линии в пикселях;

- width=”число” - ширина линии в пикселях. Width=”30%” ширина в процентах  от ширины окна;

- align=”left” – выравнивание по левому краю (right – по правому, center – линия  по центру;

- color=”red-blue” – цвет линии. Можно также задавать цвет, используя палитру RGB. Например, color=”#55a8bd”.

 

Откройте блокнот и напечатайте приведенный ниже текст.

<Html><Head><Title> Моя первая страничка </Title></Head>

<Body><H2> Структура нашего института </H2>

<Hr> </Body></Html>

Создайте папку с указанием группы и фамилии и сохраните в ней созданный файл. Для первого сохранения файла в поле Тип файла выбирете пункт Все файлы, затем напечатайте имя файла и добавьте через точку расширение htm, например, aipet.htm для вашего файла. Закройте блокнот и откройте свою папку. Значок  у файла должен получиться  в виде большой голубой буквы «е». 

Внимание! Имена файлов должны отражать содержание информации в файле. Писать их следует маленькими латинскими буквами без пробелов.

Дважды щелкнув на имени файла, просмотрите его в браузере, чтобы увидеть, как он будет выглядеть в интернете. Выбрав в браузере команду Вид – Просмотр HTML кода, вы вновь откроете свой файл в блокноте. Продолжите создание web-странички в блокноте, дополняя текст файла между тегами <Body> и </Body> строками, приведенными ниже. После добавления каждой строки, сохраняйте файл. Перейдя в окно браузера, примените команду браузера Вид – Обновить (F5) для просмотра обновленного файла в браузере. После просмотра вернитесь в блокнот для продолжения редактирования файла.

Пояснение. Интерпретатор браузера обрабатывает файл по строкам. Если теги или их атрибуты записаны неверно, то сообщения об ошибках не выдаются, а теги просто игнорируются.

<H3 align="center" > Факультеты нашего института </H3>

<Br><P align="left"><font color="red"> Теплоэнергетический факультет

<Br> Электроэнергетический факультет

<Br> Факультет радиотехники и связи

<Br> Факультет заочного отделения и переподготовки </font></P>

<Hr size="20" width="50%" color="#99ffaa" align="center">

Результаты и выводы: в блокноте возможно создание web-страниц.

Контрольные вопросы

1.     Назовите обязательные теги web-страницы.

2.     Назначение тега параграф.

3.     Порядок сохранения текстового файла HTML.

4.     Расскажите о теге создания линии и его атрибутах.

5.     Как определяются цвета в палитре RGB.

 

1.2             Лабораторная работа № 2. Форматирование и гиперссылки

Цель работы: изучение основных тегов языка HTML и гиперссылок.

Оборудование и программное обеспечение: windows98 и выше, блокнот.

Задание: создайте web-страницу о работе фирмы, используя разные форматы написания текста.

Методика

Фон страницы определяется атрибутом bgcolor тега body, например, <Body bgcolor="Yellow">. Текст также может быть цветным. Возникает вопрос о гармоничном сочетании цветов фона странички и цвета текста. Для решения этой задачи созданы специальные программы. Одна из них BGColor Wizard-216.htm.

<Font> и </Font> - теги параметров шрифтов. Они имеют атрибуты size (размер шрифта), color (цвет шрифта), face (тип шрифта).

Наберите текст web-страницы. Назначение тегов для форматирования текста и их атрибутов понятно из текста странички и вида текста на экране.

<Html><Head><Title> Моя 2-я страница </Title></Head>

<Body bgcolor="Yellow"> <Center> <H2> Форматирование текста </H2>  </Center> </Body> </Html>

Сохраните файл с именем format.htm в свою папку. Просмотрите его в браузере и продолжите набор тегов, вставляя их между  <Body> и </Body>:

<B> Полужирный  текст. Размер шрифта стандартный</B>

<Br><center> <i> Наклонный текст по центру окна </i> </center>

<Br> <U> Подчеркнутый текст, прижатый к левому краю </U>

<Hr size="10" width="50%" color="#99ffaa" align="center">

<P align="right"><font color="red"> Красный текст справа </font>

<Br><font  size="5"> Увеличенный на 5 кеглей размер текста </font>

<Br><font size="-5">Уменьшенный на 5 кеглей текст </font></P>

<Br><Big> Это текст размера Big </Big>

<Br><small> Это текст размера small </small> </Body></Html>

 

Гиперссылка пишется с помощью следующего тега: <A Href= "имя_файла.htm">  Текст на гиперссылке </A>.

Внимание!  В гиперссылке при указании имени файла необходимо обязательно писать расширение.

Для гиперссылок создайте файл с оглавлением, состоящий из  строк:

<Html><Head><Title> Оглавление </Title></Head>

<Body bgcolor=#ffffee”>

<A href="aipet.htm"> Гиперссылка на страницу "Наш институт" </A> <Br>

<A href="format.htm">Гиперссылка на страницу "Форматирование текста"</A>   </Body></Html>

Сохраните файл под именем index_1.htm. Имя файла в гиперссылку рекомендуется вставлять с помощью копирования: выделить файл, нажать F2,  выполнить команду «копировать».

 В файлы aipet.htm и format.htm добавьте после <Body> по строке:

<A Href="index_1.htm"> Гиперссылка для перехода на оглавление </A>

Результаты и выводы: в блокноте возможно создание web-страниц, с использованием разного формата шрифта и гиперссылок.

Контрольные вопросы

1.     Как создать заголовок на обрамлении окна web-страницы?

2.     Назовите теги форматирования текста.

3.     Как пишется тег гиперссылки?

4.     Как создать наклонный текст, жирный текст?

5.     Расскажите об  атрибуте size.

6.     Назначение программы BGColor Wizard-216.htm.

 

1.3             Лабораторная работа № 3. Создание домашней страницы

Цель работы: изучение основных тегов языка HTML и гиперссылок.

Оборудование и программное обеспечение: windows98 и выше, блокнот.

Задание: создайте домашнюю web-страницу, о вашей фирме.

Методика

Название «домашняя страничка» (home_page.htm) стандартное для названия первой страницы, появляющейся в браузере при открытии сайта.

Атрибут background="Рисунки/обои.jpg" тега Body  позволяет создать фон странички типа обоев на основе графического файла.

Бегущая строка (рисунок) создается тегом: <Marquee> Здравствуйте, это страница обо мне </Marquee>. Текст будет двигаться справа налево.

Задавать характер движения бегущей строки можно атрибутами:

- loop=”3”  - количество циклов движения;

- width="600" – ширина полоски для движения;

- behavior=”alternate” – маятниковое движение;

- behavior=”slide” – бегущая строка остановится на экране в виде слайда.

Тег <Img src=”имя_рисунка.gif”> вставляет рисунок на страничку, если он находится в вашей папке. Если вы собрали рисунки в папку risunki, то необходимо писать относительный путь к файлу рисунка. Например <Img src=”risunki/имя_рисунка.gif”>

Внимание! Обратите внимание на наклон слэша .

Для уменьшения размера файла и ускорения работы браузера графические файлы применяют в форматах gif, jpg или png. Формат gif используют для отображения бизнес-графики, поскольку он использует только 256 цветов. Форматы jpg и png используют для фотографий, картин.

Атрибуты width="число" и height="число" позволяют указывать размеры рисунка по горизонтали и вертикали.

Атрибут alt=”Текст выводит на экран текст, указанный  между кавычками,  если браузер не может найти указанный файл с рисунком. Пример: <img src="Myshka.gif" alt="Здесь должен быть рисунок мышки">.

Рисунок внутри параграфа выравнивается по ширине окна с помощью атрибута align=”способ выравнивания”, имеющего параметры:

- middle или center – выравнивание по центру;

- left (right) – выравнивание по левому (правому) краю;

- hspace и vspace определяют горизонтальный и вертикальный отступ текста от изображения;

- justify выравнивание текста по ширине окна браузера.

 

Создайте домашнюю страничку с приведенным ниже текстом и сохраните ее под именем home_page.htm в своей папке.

<html><head><title> Домашняя страница </title></head>

<body text="#6966ff"  background="Risunki/oboi.jpg">

<marquee Loop="4" width="600" behavior="alternate" behavior="slide">

<h3> Здравствуйте, это страница обо мне! </H3></Marquee>

<br> <center> <font color="#CC0000"> Добро пожаловать на мою страничку! </font> </center>

<p align="justify">

<img src="risunki/Boss.gif" alt="здесь должно быть мое фото" align=”left”  hspace=”40”  vspace=”20”> Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей. Хочу, чтобы они могли посмотреть мою фотографию, и хочу рассказать им о своих увлечениях и планах на жизнь. Мне 20 лет. Я учусь в Алматинском институте энергетики и связи на 4-м курсе, на энергетическом факультете.

</p> </body></html>

После тега бегущей строки вставьте гиперссылку на файл aipet.htm:
<A href="
aipet.htm"> Мой институт </A>

Сделайте возврат на домашнюю страницу из файла aipet.htm:

<A href="home_page.htm"> Гиперссылка на домашнюю страницу </A>.

По аналогии создайте гиперссылку на файл format.htm и возврат из него на домашнюю страницу.

У вас должна получиться домашняя страница, как на рисунке 1.1.


Результаты и выводы: в блокноте возможно создание домашней web-страницы.

Контрольные вопросы

1.     Каким образом создается фон странички в виде обоев?

2.     Расскажите о теге вставки бегущей строки и его атрибутах.

3.     Расскажите о теге вставки рисунка.

4.     Как можно выровнять рисунок внутри параграфа?

5.     Каким образом выполняется отступ текста от границ рисунка?

6.     Расскажите о графических форматах.

1.4                  Лабораторная работа № 4. Таблицы

Цель работы: изучение основных тегов языка HTML.

Оборудование и программное обеспечение: windows98 и выше, блокнот.

Задание: создайте web-страницу, содержащую таблицу, отражающую работу выбранной фирмы.

 Методика

Таблица на web-странице - это основной элемент (сетка)  для показа данных в окне браузера. Ячейки таблицы могут содержать любые HTML – элементы: заголовки, списки, абзацы, фигуры, графику. Обычно, при создании таблицы сначала отмечают начало и конец  таблицы,  потом размечают  строки, затем каждую ячейку с ее содержимым.

Для создания таблицы применяются теги:

- <table> </table> задают начало и конец  таблицы. Атрибут border = “n” задает обрамление таблицы и  ширину перегородок в пикселях, значение атрибута от 0 до 10;

- <tr>  </tr> задают начало и конец каждой строки таблицы;

- <th> </th> задают заголовки строки или столбца;

- <td> </td> определяют начало и конец данных ячейки. Чтобы ячейка существовала и была пустой,  между ними включите тег <br>;

- атрибут bgcolor=”red - задает цвет фона всей таблицы, цвет столбца, цвет строки или ячейки в зависимости от того, внутри какого тега он написан.

 

 В блокноте наберите текст web-страницы с таблицей, который приведен ниже, и сохраните файл с именем tab_1.htm в своей папке.

<html><head><title> Таблица </title></head>

<body bgcolor="yellow" text="blue" >

<H2 align=”center”> Самая простая таблица </H2>

<table border=”15” bgcolor="#a988f9">

<tr> <th> Заголовок 1 столбца </th>

   <th> Заголовок 2 столбца </th>    <th> Заголовок 3 столбца </th> </tr>

<tr> <td> Первая ячейка </td>

    <td  bgcolor="green"> <br></Td>     <td> Третья ячейка </td> </tr>

<tr bgcolor="#bb5599"> <td> Четвертая ячейка </Td>

     <td> Пятая ячейка </td>  <td> Шестая ячейка </td> </tr>

<tr bgcolor="#bb9999"> <th> <h3> Заголовок строки </h3></Th>

     <td> Седьмая  ячейка </td> <td> Восьмая ячейка </td> </tr> </table></body></html>

Для просмотра результата нажмите Пуск, выберите Документы, щелкните в списке по названию созданного вами документа tab_1.htm.

Вставьте в некоторые ячейки рисунки из папки Risunki. Обратите внимание на наклон слэша при написании имени файла.

 

Атрибуты, применяемые для сложных таблиц:

- width. Применяется в теге <table> для задания ширины таблицы, а в тегах <tr>, <th> для задания ширины ячейки или группы ячеек;

- <caption></caption>. Заголовок пишут до описания строки или ячейки;

-  align=”top”. Определяет положение заголовка для таблицы над  ней, а align=”bottom - положение подписи под таблицей. Если align встречается  внутри тегов <tr>, <th>, <td>, то он управляет положением данных в ячейках  по горизонтали (left,  right, center);

- colspan. Он указывает, какое количество ячеек (колонок)  будет объединено по горизонтали;

- rowspan. Он указывает, какое количество ячеек  будет объединено по вертикали, т.е. количество строк, начиная с описываемой ячейки.

Наберите в блокноте приведенную ниже web-страницу, сохраните ее под  именем  tab_2.htm  и  проверьте через браузер.

Некоторые авторы рекомендуют все теги печатать заглавными буквами. Проверьте, удобен ли вам такой стиль.

<HTML><HEAD><TITLE> Таблица </TITLE></HEAD>

<BODY  BGCOLOR="YELLOW" TEXT="BLUE">

<H2  ALIGN="CENTER"> Сложная таблица (надпись по центру окна) </H2>

<TABLE  BORDER="10"  BGCOLOR="#A9988F9">

<CAPTION  ALIGN="TOP">Надпись над таблицей по ее центру</CAPTION>

<CAPTION  ALIGN="BOTTOM"> Надпись под таблицей </CAPTION>

<TR> <TD  ALIGN="CENTER" ROWSPAN=”2”  COLSPAN=”2”>

    <IMG  SRC=" Risunki/Boss.gif" ALT="Здесь должен быть портрет"></TD>

    <TD> Маленькая ячейка 1</TD> <TD> Маленькая ячейка 2 </TD> </TR>

<TR  BGCOLOR="GREEN-YELLOW">

     <TD > <IMG SRC="Trans.gif" ALT="Здесь схема трансформатора"></TD>

     <TD> Маленькая ячейка 4 </TD> </TR>

<TR> <TD  ALIGN="CENTER"> Мал. ячейка С </TD>

   <TD  ALIGN="CENTER"> Мал. ячейка D </TD>

   <TH  COLSPAN="2"> Длинная ячейка  в 2 столбца Е </TH> </TR>

</TABLE></BODY></HTML>

У вас должна получиться таблица, приведенная на рисунке 1.2.

          Рисунок 1.2 – Таблица с объединенными ячейками

 
 

 


Результаты и выводы: в web-странице таблицы позволяют размещать информацию в упорядоченном виде.

 

 

Самостоятельная работа

         Создайте таблицу для расписания вашей группы на один день по указанию преподавателя по образцу, приведенному в приложении А. Сохраните таблицу с именем raspisanie.htm в своей папке.

 

Контрольные вопросы

1.     Опишите назначение тегов <caption>  и </caption>.

2.     Опишите назначение атрибута rowspan.

3.     Опишите назначение атрибута colspan.

4.     Как создается фон таблицы, колонок, строк или ячеек?

5.     Назовите теги начала и конца строки.

6.     Расскажите о способах заливки элементов таблицы.

 

1.5                  Лабораторная работа № 5. Фреймы

Цель работы: изучение основных тегов языка HTML.

Оборудование и программное обеспечение: windows98 и выше, блокнот.

Задание: создайте web-узел, содержащий оглавление, баннер и 5 – 6 страниц о выбранной фирме на основе использования фреймов.

Методика

Фреймы разбивают окно браузера на несколько областей, причем, в каждую из  областей выводится отдельный web-документ.  Фреймы  используются для организации навигации по сайту. В фиксированную область обычно помещают название web-узла, логотип, оглавление.

 

При создании фреймов вместо тега body записывают  тег frameset. Этот тег с помощью своих  атрибутов cols  и rows задает набор фреймов. В качестве значений атрибутов используется список размеров фреймов.

Тег <frameset  cols= “150, 25%,*”> указывает, что ширина левого фрейма составляет 150 пикселов, ширина среднего - 25% ширины окна, а правый фрейм занимает оставшуюся часть окна браузера. 

По тегу  <frameset  rows= “20%, *, 30%” > высота верхнего фрейма равна 20% от высоты окна браузера, высота нижнего фрейма равна 30%. На средний фрейм остается 50% высоты окна.

Web-страницы во фреймы открываются с помощью гиперссылок. Фрейм, в котором будет открываться страница, определяется значениями атрибута target. Например, target=“lower”, где lower имя фрейма.

На рисунке 1.3 на выносках приведены присвоенные разработчиком имена фреймов,  которые нужно указывать в атрибуте target.

Внимание! Атрибут target чувствителен к регистру букв. Не следует пользоваться кнопкой Назад в окне Internet Explorer при наличии фреймов.

Установка видимости границ фреймов и их толщины:

-               frameborder="1"  - границы видимы , frameborder="0" невидимы;

-               framespacing="10" – устанавливает толщину границ в пикселях.

Для web-страницы с фреймами в блокноте наберите приведенный текст.

<html><head><title> Фреймы </title></head>

<frameset cols="140,*"    frameborder="1"   framespacing="5">

<frame src="index.htm"    name="left">   <frameset rows="60,*">

<frame src="banner.htm"   name="titlebar"   scrolling="No">    

<frame src="home_page.htm"    name="lower"> </frameset> </html>

Сохраните файл под именем freimy.htm в своей папке. Если открыть этот файл в браузере, то в случае отсутствия файлов index.htm, banner.htm, home_page.htm или неправильного написания их имен появится сообщение о невозможности открытия файла.

Создайте страницу с оглавлением, вставляя web-страницы, существующие в вашей папке, вместо указанных web-страниц в тексте. В случае отсутствия подходящих файлов в вашей папке создайте небольшие тематические странички с именами файлов aipet.htm, kadry.htm,  nauka.htm и partnery.htm для демонстрации правильной работы фреймов.

Для создания оглавления в блокноте наберите следующий текст.

<html><head><title> Содержание </title></head>

<body bgcolor="#FFFFCC">

<img src="Trans.jpg"  width=”85”  height=”78”> <H4> Cодержание </H4>

<a href="institut.htm"   target="lower">Мой институт </a>

<br> <a hreF="kadry.htm"   target="lower">Кадры</a>

<br> <a href="nauka.htm"   target="lower">Наука</a>

<a href="partnery.htm"   target="lower">Партнеры</a> </body> </html>

Сохраните файл под именем index.htm в своей папке. Согласно ему по гиперссылке в оглавлении любой файл будет открываться во фрейме lower.

Создайте страницу для баннера.

<html><head> <title>Баннер</title></head>

<body bgcolor="#FFFFCC">

<marquee behavior="slide"> <h3> Нетрадиционные источники -  будущее

энергетики! </h3>  </marquee> </body></html>

Сохраните под именем banner.htm этот файл в своей папке.

Если домашняя страничка не существует, создайте ее имитацию.

<html><head><Title>Домашняя страничка</title></head>

<body bgcolor="#FFFFCC"> <p><font Color="blue">

<H3  align=”center”> Здесь должна быть домашняя страничка студента электроэнергетического факультета </H3></Font></p> </body></html>

Сохраните файл под именем home_page.htm в свою папку.

Результаты и выводы: в web-странице фреймы позволяют размещать информацию в упорядоченном виде.

Контрольные вопросы

1.     Назначение фрейма.

2.     Назовите атрибуты тега frameset.

3.     Расскажите об атрибуте target.

4.     Какими могут быть границы у фреймов?

5.     Объясните назначение имен фреймов.

 

2           Создание web-сайтов в специальных редакторах

 

Специальный редактор - это интегрированная среда, объединяющая в одной оболочке редактор web-страниц, модули управления структурой узла и инструменты публикации узла на сервере. Web-страницы  располагаются в определенных папках и связываются друг с другом гиперссылками. Один из файлов web-сайта представляет собой домашнюю страницу с именем index.htm и открывается первым. Кроме файлов HTML, в состав узла входит набор графических рисунков в форматах gif, jpg или png.

Применение редакторов Word, Publisher, FrontPage с одной стороны ускоряет и упрощает процесс создания  web-страниц, но в текст файла добавляется автоматически дополнительный код, часто не несущий никакой смысловой нагрузки. Дополнительный код не отражается на внешнем виде странички, но увеличивает время открытия файла по Internet. Поэтому мастера при создании web-сайтов часто просто все печатают в блокноте.

Некоторые web-страницы могут быть слишком длинными. Чтобы разделить web-страницу на более мелкие секции, вы можете добавить к ней так называемые закладки (bookmarks) для поиска определенной информации внутри этой страницы. Например, если у вас есть список ссылок с заголовком вверху страницы, вы можете создать гиперссылку для перехода на этот заголовок, помеченный, как закладка, с нижней части страницы.

2.1       Лабораторная работа № 6. Создание web-страниц в Word-97

Цель работы: изучение возможностей создания web-страниц в Word-97.

Оборудование и программное обеспечение: windows98, Word-97.

Задание: создайте web-страницу, отражающую структуру выбранной фирмы.

Методика

В документ HTML, создаваемый в Word, можно вставлять рисунки, рисовать схемы, печатать текст, вставлять таблицы, то есть работать, как обычно. Также можно вставлять форму с компонентами: флажками, переключателями, линиями, полями для текста.

Командами Файл - Создать – Web-страницы при выборе значка Новая Web-страница начинается создание отдельной странички, состоящее из следующих примерных действий:

- командами Файл – Свойства – Название вставляется титул страницы;

- заполняется содержимое страницы, как при обычной работе в Word;

- для сохранения файла применяем команды Файл - Сохранить как  и затем выбираем тип файла HTML Document;

- командами Вид – Просмотр в HTML  просматриваются страницы.

В меню Вставка можно отметить дополнительные команды, применяющиеся для создания web-страниц:

- горизонтальная линия. Устанавливаются цвет, тип и размер линии;

- бегущая строка. Заполняются свойства этого компонента на вкладке;

- рисунок. Вставляется  рисунок и изменяется его размер. Щелкнув правой кнопкой на панели Настройка изображения, выбирается обтекание рисунка текстом.

 

Командами Файл - Создать -Web-страницы при выборе значка Мастер Web-страниц начинается пошаговое создание связанных страниц, причем, сразу показывается образец шаблона страницы:

- шаг 1. Выбирается шаблон страничек из списка: пустая, в 2 колонки,  домашняя страничка, оглавление, опрос (форма) и другие;

- шаг 2. Выбирается стиль (оформление) странички;

- шаг 3. Готово. Заканчивается создание макета для страниц.

Предлагаемый в шаблонах текст поэтапно выделяется и заменяется новым текстом, соответствующий содержанию сайта.

Просмотр получившейся страницы после ее сохранения выполняется командой Файл - Предварительный просмотр Web-страницы. Теги странички  можно просмотреть командой Вид - Источник HTML.

 

Создайте web-сайт, содержащий следующие страницы: наша фирма, наша деятельность, наши сотрудники. Затем добавьте в web-сайт существующие в вашей папке страницы: наш институт, об авторе. Страницы создавайте по аналогам, приведенным в приложениях Б и В.

 

Домашняя страница создается по шаблону: личная основная страница. Строки на странице, совпадающие со строками в оглавлении, служат закладками. Строки «В начало страницы»  служат гиперссылками для возврата в начало страницы на Оглавление, которое является закладкой.

При изменении текста гиперссылки новый текст пишите внутри существующего, а затем сотрите ненужные символы. Этим вы сохраните гиперссылки, созданные в шаблоне. Текст гиперссылки должен остаться подчеркнутым, если изменения внесены правильно.

Результаты и выводы: в Word-97 возможно создание web-страниц  без применения web-дизайнером тегов.

Контрольные вопросы

1.     Как создается новая страница?

2.     Как сохраняется файл страницы?

3.     Как создается линия?

4.     Как  создается таблица?

5.     Назначение закладки.

 

2.2       Лабораторная работа № 7. Создание web-сайта в Word-2002

Цель работы: изучение возможностей создания web-страниц в Word-2002.

Оборудование и программное обеспечение: windows98, Word-2002.

Задание: создайте web-сайт о вашей фирме, на основе приложений Б и В.

Методика

После выполнения команд Файл – Создать, в окне Создание документа можно выбрать:

-  web-страницу на вкладке общие (будет создана пустая web-страница). Работа без мастера применяется для несвязанных отдельных страничек;

-

 нажать на закладку web-страницы и далее выбрать один из предлагаемых шаблонов страниц или значок Мастер Web-страниц.

Мастер, показанный на рисунке 2.1, поможет создать многостраничный web-сайт, дополненный средствами перехода, защитой и профессионально разработанным стилем (темой). Создадим web-сайт, содержащий фреймы, и следующие страницы: домашняя страница, наша деятельность, наши сотрудники, наш институт.

Страницы отредактируйте на основании образцов, приведенных в приложениях Б и В.

 

Команды создания страниц:

- команда Начало. Начало работы мастера;

- команда Размещение. Вводится название узла, например, Web_3. Мастер создает папку с таким же именем;

- команда Способ перехода. Выбираем способ размещения ссылок вертикальный, с двумя вертикальными фреймами. Этим самым выбирается   место появления выбранных по гиперссылкам страниц в правом фрейме;

- команда Страницы. Удаляются или добавляются страницы по выбранным шаблонам. Программа предлагает следующие страницы: личная web-страница и две пустые страницы с именами: новая страница 1, новая страница 2. Добавим новую страницу. Нажмем на кнопку Существующий файл и выберем файл про наш институт;

- команда Ссылки. Создаются гиперссылки на другие страницы. Выполняется переименование страниц. Переименуйте  страницы: странице личная web-страница дайте название домашняя страница, странице новая страница 1 - наши достижения, странице новая страница 2 - наши сотрудники, файлу про институт - мой институт;

- команда Тема. Выбирается оформление страниц по шаблонам;

- команда Конец. Создаются автоматически шаблоны текста всех созданных новых страничек.

Далее программа предлагает шаблоны создания новых дополнительных рамок (фреймов). Новые рамки вставляются  в ту рамку, в которой находится курсор. Для ввода рамки с эмблемой web-сайта установите курсор в левую рамку и создайте фрейм сверху. Вставьте в него рисунок из файла. Кнопка Свойства рамки позволяет установить размер рамки в сантиметрах и цвет границ рамки. Закройте окно с рамками. Сохраните web-сайт.

 

При редактировании требуется быть внимательным, поскольку Word при случайном нажатии на гиперссылку создает новое окно с таким же файлом. Перед внесением изменений необходимо все, вновь созданные файлы, закрыть, оставив только первый. При замене имени гиперссылки следует новое имя вписать внутри существующего, а затем стереть ненужные символы, чтобы гиперссылки не разрушились.

Для выбора редактируемых страниц надо просто щелкать на гиперссылки в левом фрейме и редактировать появляющиеся страницы в основном окне.

При удалении какой-нибудь web-страницы, гиперссылки на эту страницу будут оставаться на других страницах. Эти гиперссылки следует удалить командами Вставка – Гиперссылка - Удалить.

Результаты и выводы: в Word-2002 создание web-узлов выполняется без применения тегов web-дизайнером с помощью шаблонов.

Контрольные вопросы

1.     Что значит публикация web-сайта?

2.     Для чего служит гиперссылка?

3.     Что такое фрейм?

4.     Что создается для защиты информации на web-сайта?

5.     Назначение компонента Мастер Web-страниц.

 

2.3       Лабораторная работа № 8. Создание web-сайта в Word-2003

Цель работы: изучение возможностей создания web-сайта в Word-2003.

Оборудование и программное обеспечение: windowsXP, Word-2003.

Задание: создайте web-сайт о вашей фирме, на основе приложений Б и В.

Методика

Командами Файл - Создать – Web-страницы при выборе значка Новая Web-страница начинается создание отдельной страницы.

Командой Файл – Свойства – Название вставляется титул страницы.

Заполняется страница обычными методами.

Для сохранения файла применяем команды Файл - Сохранить как  и затем выбираем тип файла HTML Document. Можно также выбрать команды Файл - Сохранить в формате HTML.

Команды Вид – Предварительный просмотр в HTML служат для просмотра страницы в браузере.

 

В меню Вставка можно отметить дополнительные команды, применяющиеся для web-страниц:

-       горизонтальная линия. Выбирается цвет, тип и размер линии. Линии можно нарисовать инструментами рисования или вставить как клип;

-       рисунок. Вставляется рисунок, и изменяется размер рисунка. Щелкнув правой кнопкой на панели Настройка изображения, выбирается обтекание рисунка текстом.

Командами Вид – Панели инструментов – Web-компоненты, включается панель Web-компоненты, показанная на рисунке 2.2. На ней расположена бегущая строка и элементы формы.

Создайте web-сайт фирмы «Энергопром», содержащий следующие страницы: наша фирма, наша деятельность, наши сотрудники. Текст страниц создайте по аналогам в приложениях Б и В.

Для объединения всех созданных страниц в web-сайт создадим страницу с фреймами. Откройте новую web-страницу. Командами  Вид – Панели инструментов – Рамки вставьте панель с рамками. Создайте пустые фреймы, расположив их, как показано на рисунке 2.3. Установите курсор в левый верхний фрейм и вставьте рисунок. Установите курсор в правый верхний
фрейм и напечатайте приведенный текст. Установите курсор в нижний левый фрейм и напечатайте слово «Оглавление».

Для объединения всех созданных страниц в web-сайт создадим страницу с фреймами. Откройте новую web-страницу. Командами  Вид – Панели инструментов – Рамки вставьте панель с рамками. Создайте пустые фреймы, расположив их, как показано на рисунке 2.3. Установите курсор в левый верхний фрейм и вставьте рисунок. Установите курсор в правый верхний фрейм и напечатайте приведенный текст. Установите курсор в нижний левый фрейм и напечатайте слово «Оглавление».


Сохраните файл с фреймами. Word создаст новые файлы и сохранит их с именами по первому слову во фрейме. Затем вставляйте гиперссылки для созданных ранее файлов во фрейм с оглавлением. Не забудьте указать правую нижнюю рамку, в которой будут открываться  эти файлы командой Выбор рамки. Сделайте ссылки на созданные ранее файлы home_page.htm, aipet.htm. У вас должен получиться web-сайт, как на рисунке 2.3.

Результаты и выводы: в Word-2003 создание web-узлов выполняется без применения тегов web-дизайнером с помощью шаблонов.

 

 

Контрольные вопросы

1.     Как создается новая страница?

2.     Как сохраняется файл страницы?

3.     Как создается линия?

4.     Как  создается таблица?

5.     Назначение закладки.

 

2.4       Лабораторная работа № 9. Создание web-сайтов в Publisher

Цель работы: изучение возможностей создания web- сайтов в Publisher.

Оборудование и программное обеспечение: windowsXP, Publisher.

Задание: создайте web-сайт о вашей фирме, на основе показанного примера.

Методика

После запуска Publisher следует выбрать команду Веб-узелы и электронная почта, затем в меню  Веб-узелы выбрать команду Построитель простых Веб-узлов для настройки программы и запуска мастера - построителя.


Мастер содержит четыре типа веб-узлов с профессионально разработанными темами, выберите маркер Простой веб-узел.

Выберите понравившуюся тему, например, горизонт, щелкнув по ней мышкой. Появится окно Удобный построитель веб-узлов, показанный на рисунке 2.4.

Следует установить флажки для страниц, которые будут размещены на сайте. Состав узла первоначально можно ограничить страницами: домашняя страница, о профиле (о нас), услуги, сведения о сотрудниках, дополнительные ссылки. Создайте веб-узел о работе фирмы. Страницы создайте по аналогии с приведенными в приложениях Б и В.

По мере установки флажков структура сайта будет изменяться. Обратите внимание на флажок Размещение ссылок на другие страницы. Включив этот флажок, мы создадим страницу с  заготовками ссылок на созданные ранее отдельные веб-страницы. В меню Добавить на веб-узел команда Добавить компоненты дает возможность добавить страницу с заготовками ссылок, если ее раньше не включили в состав сайта.

Команда  Добавить страницу позволяет добавить в веб-узел новую страницу, выбрав ее тип из списка.

Там же находится команда Просмотр веб-узла.

Ввод дополнительного текста на любой странице на чистом месте выполняется внутри рамки надпись. Рамку надо нарисовать на свободном месте страницы, применив команды Вставка - Надпись.

После создания новой страницы добавляются гиперссылки на эту страницу на всех остальных страницах.

 


После создания структуры сайта появится домашняя страница, заготовка которой показана на рисунке 2.5. Далее следует выбрать расположение гиперссылок на вкладке Панель навигации. Выберем Только вертикальная.

Шаблоны выполнены в виде рисунков, помещенных в таблицы. В каждом рисунке можно стереть текст шаблона и написать свой.

Заполнив содержание одной страницы, переходим к следующей, щелкая мышкой по списку номеров, приведенных снизу окна редактора.

 

На рисунке 2.6 показана заготовка страницы для списка сотрудников.

На странице Дополнительные ссылки следует заменить предложенный текст ссылок на реальный текст, например, Мой институт. Затем, выделив текст гиперссылки командой Вставка – Гиперссылка, создать ссылку на ранее разработанный файл, например, aipet.htm.

Сохранение веб-узла необходимо выполнить дважды. Сначала сохранить как публикацию, с расширением .pub в созданную папку, Затем создать сайт с помощью команды Файл – Поместить на веб – узел сохранить веб-узел в ту же папку. По этой команде создается файл, которому предлагается имя Index.htm. Если имя не менять, то создается также папка с именем Index.files, в которой размещены рисунки и другие файлы. Двойное сохранение связано с тем, что  Publisher при создании веб–узла записывает код страницы  в сжатом формате, который невозможно вновь открыть в Publisher.

Далее новые изменения файлов выполняются в файлах с расширением pub и затем сохраняются командой Файл – Поместить на веб-узел.

 


Результаты и выводы:  в Publisher создание web-узлов выполняется без применения тегов web-дизайнером с помощью шаблонов.

Контрольные вопросы

1.     Опишите достоинства и недостатки среды Publisher.

2.     Как выбирается состав веб-узла?

3.     Как осуществляется корректировка содержания страниц?

4.     Как можно перейти с одной страницы на другую?

5.     Особенности сохранения и изменения веб-узла в Publisher.

 

2.5       Лабораторная работа № 10. Создание формы в Word

Цель работы: изучение возможностей создания web-страниц в Word.

Оборудование и программное обеспечение: windows98 и выше, Word.

Задание: создайте форму для сбора данных о посетителях вашего сайта.

Методика

Рисунок 1 – Панель web-компонентов

 
Формы представляют один из наиболее распространенных способов обмена информацией и проведения деловых операций через Internet.

Создадим web-страницу командами Файл - Новый - Web-страница.

Для создания различных компонентов применяется Панель Web – компонентов. Для вызова панели в меню Вид - Панели инструментов следует включить панель Web - компоненты.

Назначение компонентов панели, показанной на рисунке 2.7:

- конструктор. Включенное состояние позволяет изменять страничку. При выключении конструктора происходит просмотр Web-странички;

- свойства. Включается при выделении web-компонента. Позволяет задать необходимые свойства компонента;

- флажок. Служит для выбора ответа;

- переключатель. Служит для выбора одного ответа из нескольких вариантов, например, «муж» или «жен». Чтобы переключатель начал работать, в Word-97 необходимо в панели Свойства проставить разные значения на строке Value для каждой кнопки переключателя, например 1, 2. Имена у кнопок должны быть одинаковыми. Для одной кнопки поставить значение Checked=True, тогда эта кнопка будет нажата по умолчанию;

- раскрывающийся список. Служит для выбора строки с ответом;

- список. Служит для выбора одной из строк из списка;

- поле однострочное. Служит для создания однострочного сообщения;

- текстовая область. Служит для создания многострочного сообщения;

- кнопка Submit. Кнопка, отправляющая форму на сервер;

-

кнопка Reset. Кнопка, возвращающая форму к исходному состоянию.

Около компонента можно поместить форматированный текст. Формат текста, выбранный в Word  (размер, цвет, фон, стиль), сохранится в web-странице. Выделив компонент и нажав на него правой кнопкой мыши, мы увидим контекстное меню. Выберем в нем строку Свойства на панели Элементы управления. На экране появится окно Properties (Свойства), в котором можно выбрать разрешенные свойства. На рисунке 2.7 показан пример заполнения свойств раскрывающегося списка.

Для компонентов Список или Раскрывающийся список значения списка вводятся через точку  с запятой в окно Display Values. Дополнительные компоненты формы вставляются между линиями Top of form (начало формы) и Bottom of form (конец формы) для Word 97.

 

 На новой странице, если работаете в Word-97, установите компонент Form, для Word-2002 и Word-2003 этого не требуется.

Создадим форму  "Отзывы посетителей". Для этого заполните форму в соответствии с рисунком 2.8.


Особенности заполнения компонентов формы:

-   кнопки переключателя (для выбора варианта "Муж" или "Жен");

-   текстовые поля в одну строку применяются  для ввода ФИО посетителя, организации, телефона;

-   раскрывающийся список применим для указания профессии. В свойствах перечислите шесть профессий. Установите значение  Size=3, показывающее, сколько будет видимых строк на экране. Свойство Multiselect=True указывает, что можно выделять несколько строк в списке, Multiselect=False указывает, что можно выделять только одну строку;

-   флажки  применяются для выбора ответов на вопросы "Расскажите о ваших увлечениях»;

-   текстовое многострочное поле применяется для ввода замечаний.

 

Результаты и выводы: в Word возможно создание формы для сбора информации.

Контрольные вопросы

1.     Назначение формы.

2.     Как включить работу переключателя?

3.     Назначение раскрывающегося списка.

4.     Назначение флажка.

5.     Назначение многострочного поля.

 

2.6       Лабораторная работа № 11. Персональный сайт на FrontPage.

Цель работы: Создание персонального сайта на FrontPage.

Оборудование и программное обеспечение: windows98 и выше, FrontPage.

Задание: создайте cоздайте персональный web-сайт на основе показанного примера.

Методика

Команды для создании web-узлов, приведены в приложении Г.


Запустите FrontPage. Выберете язык. С помощью опции окна Web в команде File - NewPersonal Web создайте шаблон сайта. Мастер программы построит четыре страницы Home Page, Interests, Photo Album, Favorites, добавит в них стандартные рисунки и гиперссылки. Затем мастер откроет в окне FrontPage домашнюю страницу персонального узла для редактирования, показанную на рисунке 2.9.

Проведите редакцию домашней страницы, за которой закреплено имя index.htm. Если страница не появилась на экране, то в режиме Navigation  щелкните дважды по значку файла Index.htm.


При первом обращении к этой странице она не будет настроена, и поэтому появится надпись «Edit the properties for this Navigations …». На поле этой надписи следует щелкнуть правой кнопкой мыши и выбрать в контекстном меню Navigation Bar Properties.

В диалоговом окне Navigation Bar Properties укажите ссылки для панели навигации: установите переключатель Child Level (дочерний уровень), сбросьте флажки Home Page (домашняя страница), Parent Page (родительская страница). Щелкните по кнопке ОК.

В режиме Navigation, показанном на рисунке 2.10, выбирают по очереди файлы в панели Folder List, дважды щелкая на них мышкой, или переходят в режим Page и заполняют информацией файлы Interests, Photo Album, Favorites. Шаблон страницы Интересы показан на рисунке 2.11. Она заполняется аналогично домашней странице.


  Вернитесь в режим Навигации и, выбирая по очереди файлы из списка,  настройте их панели навигации, каждый раз нажимая на Save.


Для просмотра гиперссылок щелкните на кнопке Hyperlinks, а затем в панели Folder List выберите файл, гиперссылки которого хотите просмотреть. На рисунке 2.12 показаны гиперссылки файла Interests. Обратите внимание на направление стрелок гиперссылок.

 


Сформируйте дополнительную страницу с информацией о своей специальности. Новая страница вызывается командой FileNew. Сохраните подготовленную страницу в личной папке под именем Page1.htm.

Перейдите в режим Navigation для проверки списка файлов и папок web-сайта. Переместите курсор на значок файла Page1.htm. Нажав на правую кнопку мыши, перетащите курсор на правое поле навигатора так, чтобы пунктирная линия связала прямоугольник новой страницы с домашней страницей. Этим мы создадим связывающие их гиперссылки.

Просмотрите схему гиперссылок для новой страницы, включив режим Hyperlinks.

Результаты и выводы: во FrontPage предусмотрена система шаблонов для создания персонального web-сайта.

Контрольные вопросы

1.                      Назначение приложения FrontPage.

2.                      Назначение домашней страницы.

3.                      Назначение режима Navigation.

4.                      Назначение режима Hyperlinks.

5.                      Как устанавливаются гиперсвязи между страницами?

6.                      Как добавляются новые страницы?

 

2.7       Лабораторная работа № 12. Разработка web-сайта фирмы

Цель работы: создание web-сайта фирмы на FrontPage.

Оборудование и программное обеспечение: windows98 и выше, FrontPage.

Задание: создайте web-сайт о вашей фирме используя пример.

Методика

Команды для создании web-узлов приведены в приложении Г.

Web-узел энергетического предприятия имеет структуру, содержащую следующие основные элементы: домашняя страница, страница новостей, страницы товаров и услуг, содержание, форма обратной связи для заказа товара. В процессе разработки web-сайта фирмы «Энергопром» необходимо разработать его структуру и наполнить ее конкретным содержанием, придерживаясь схемы, показанной на рисунке 2.13.

Выполните команды File - NewWeb. В диалоговом окне New выделите Мастер корпоративного узла (Corporate Presence Wizard). В окне Параметры (Options) введите название папки для хранения файлов вашего web-сайта и нажмите кнопку ОК.  Папка с указанным именем  для сайта будет создана в папке MyWebs. Если такая папка не существовала, т о она будет создана в папке Мои документы.

В первом окне мастера щелкните по кнопке Next.

Во втором окне определите список  основных web-страниц, которые нужно включить в новый узел, расставив флажки:

-                  Home Page (домашняя страница);

-                  Products/Services (товары и услуги);

-                  Table of Contents (страница оглавления);

-                  Feed Back form (форма обратной связи).

Третье окно мастера - Select the topics you want to appear on your Home Page. Устанавливая и сбрасывая флажки этого окна, создают

соответствующие разделы домашней страницы. Следует установить все четыре флажка: Introduction (Введение), Mission statement (Постановка задач), Company profile (Профиль компании), Contact information (Контактная информация).

Четвертое окно появляется, если есть страница новостей - Select the topics you want to appear on your What’s New Page.

Пятое окноEnter values for the number of Product and service pages the wizard should create. На нем укажем количество страниц о продуктах и сервисе. Проставим цифры 3.

Шестое окноSelect additional items to display for each product. Оно устанавливает, какие пункты о продукции будут созданы.

Седьмое окноSelect additional items to display for each services. Оно устанавливает, какие пункты о сервисе будут созданы.

Choose the information you want to collect from readers when submit commands. Здесь показывают, какие сведения о посетителе надо получить по передаваемой на web-сайт форме обратной связи. Примите по умолчанию.

Восьмое окно - примите по умолчанию.

Девятое окно - примите по умолчанию.

Десятое окно.

What should appear at the top of each page? (Чтобы вы хотели поместить на каждой странице сверху?) Варианты: ссылку на главную страницу, адрес электронной почты, записку о праве собственности.

What should appear at the bottom of each page? (Чтобы вы хотели поместить на каждой странице снизу?) Варианты: логотип, титульную надпись, ссылку на главную страницу.

Одиннадцатое окно – примите по умолчанию.

Двенадцатое окно – в нем надо заполнить реквизиты компании.

Тринадцатое окно – в нем находится кнопка Choose Web Theme, открывающая список тем для оформления страниц. Выберете стиль.

Четырнадцатое окно – в нем установите флажок Show Task View after web is uploaded, показывающий нерешенные задачи при создании web-сайта.

Для редактирования установите режим  Page и щелкните два раза по имени файла в панели Folder List. В появившемся шаблоне страницы заготовленную информацию и замените своей. При сохранении web-страницы программа FrontPage предлагает стандартные имена файлов, согласитесь с ней.


Панель навигации показана на рисунке 2.14. Режим позволяет увидеть общую схему узла, добавить или разорвать гиперссылки.

Для создания новой страницы выполните команды FileNewPage. На вкладке выберите тип новой страницы, отредактируйте ее и сохраните с именем New Page 1.htm своей папке.

Для установки, удаления и переименования web-страниц вернитесь в режим навигации. В левой части  навигатора расположена панель папок Folder List web-сайта. Установите курсор мыши на значок нового файла New Page 1.htm, перетащите указатель в область схемы узла, чтобы появился прямоугольник новой страницы.  Разместите  его правее прямоугольника Services так, чтобы линия  связи соединяла новую страницу со страницей Home Page. Гиперссылка будет создана автоматически.

Выделите страницу Services и выполните команды File – New – Page. Появится новая страница New Page 2.htm, соединенная гиперссылкой со  страницей Services. Переместите страницу New Page 2.htm к странице Home Page так, чтобы появилась соединяющая их линия. Теперь эти страницы соединены гиперссылками.

Удалите страницы Service 3, Product 3, New Page 1 и New Page 2. Для этого щелкните по их значкам правой кнопкой мыши. Выберите опцию Delete. Установите в диалоговом окне положение переключателя на опцию Delete This Page From The Web.  Щелкните по кнопке ОК.


Щелкните правой кнопкой мыши на панели Navigation и выбирете команду Rename. Переименуйте стандартные заголовки элементов узла на рабочие, как указано на рисунке 2.15: Products на Продукция, Services на Услуги. Установите новые названия: Выключатели, Трансформаторы, Доставка, Ремонт. Имена файлов от этого не изменятся.

Отчеты содержат различную статистическую информацию о web-сайте.

Найдите итоговую информацию о построенном узле: ViewReports - Site Summary. Появится таблица с обзором основных параметров узла.

Для выявления разорванных гиперссылок следует щелкнуть по строке Broken  Hyperlinks. Если показана разорванная ссылка к удаленной  странице, то эту строку следует удалить с помощью контекстного меню Edit Page. Сохраните изменения. Убедитесь в проведенных исправлениях: щелкните по кнопке Reports - список разорванных гиперссылок должен быть пустым.

Результаты и выводы: во FrontPage предусмотрена система шаблонов для создания web-сайта организации.

Контрольные вопросы

1.                Назовите отличия web-сайта от связанных web-страниц.

2.                Назначение процедуры Мастер Web-узла.

3.                Какие бывают режимы просмотра?

4.                Как можно увидеть общую схему web-сайта?

5.                Как можно добавить и удалить странички?

  Приложение А

Расписание

учебных занятий студентов 4-го курса ЭЭФ на 2-й семестр 2006/2007 уч. года

День

Время

Гр. ЭЭ-02-2

Гр. ЭТУС-02

Понедельник

13:20

ПЭС                              А430

 

Ст. пр. Утепов Т. Р.

 

Н и ПД ЭТ                        А421

Проф. Сергиенко М. И.

14:55

Охрана труда                                А427

Ст. пр. Нахимова Т.С.

16:30

ЭО                                 А421

Доцент  Демиденко Л. И.

 

Вторник

14:55

Проектирование СЭС    А421

Ст. пр. Утепов Т.Р.

ЭО                                    А324

Доцент Базарбаев А.С.

 

16:30

Экономика отрасли                                  А423

Проф. Алтай-улы М.Т.

 

Среда

13:20

Светотехнические устройства                А301

Ст. пр. Журавлева О. И.

ЭО                                 А421

Доцент  Демиденко Л. И.

ИТ в Э                             А336

Ст. пр. Тарасов В. М.

14:55

ИТ в Э                        А336

 

Ст. пр. Тарасов В. М.

 

П ЭЛ и ЛУ                       А421

Проф. Сергиенко М. И.

Четверг

13:20

Иностранный язык

А326, Б211, Б213

Информационные технологии в энергетике           А329

Ст. пр. Тарасов В. М

14:55

П ЭЛ и ЛУ                    А421

Проф. Сергиенко М. И.

ЭО                                    А421

Доцент  Демиденко Л. И.

 

Пятница

 

13:20

СГ РЗ и АСЭС              А329

 

Доц. Бурлибаев М. А.

ПЭС ЭТУС                    А301

Ст. пр. Утепов Т. Р.

 

14:55

Перенапряжения в ЭУ                                  Б219

Проф. Дмитриев И.А.

У и ПД и Эт                                                     А421

Проф. Сергиенко М. И.

Начальник УМО                                                                                   ______________

Декан ЭЭФ                                                                                            ______________

 

Примечание -  Парный тег <Pre> позволяет сохранить расположение текста так, как он написан в блокноте относительно края страницы:

<pre>

Текст, написанный

                                лесенкой</pre>.


Приложение Б

Домашняя страница предприятия

 

Выше оглавления вставьте бегущую строку «ЭНЕРГОПРОМ».

 

Прямоугольная выноска: ЗакладкаОглавление

 

Прямоугольная выноска: Ссылки на закладки в других частях этой же страницы*    Работа фирмы

*    Избранные ссылки

*    Адреса

*    Текущие проекты

 

 

Работа фирмы

Основное направление работы: производство и распределение электроэнергии.

Должность Президента занимает Кречетов С.Т.

Основные обязанности фирмы - гарантированное качество электроэнергии.

Отдел сбыта работает с 9 до 18 часов.

Прямоугольная выноска: Ссылка на оглавлениеВозврат в начало

 

 

Прямоугольная выноска: ЗакладкаИзбранные ссылки

*         Наша деятельность

*         Наши достижения

Прямоугольная выноска: Ссылки на другие страницы*         Об авторе

*         Наш институт

Возврат в начало

 

 

Адреса

Адрес электронной почты

aprom@almaty.kz

Адрес Интернета

http://www.aprom.kz

Служебный телефон

786787

Факс

786955

 

Возврат в начало

 

Текущие проекты

*         Среднеазиатская энергосистема

*         Реконструкция центральной подстанции №453

Возврат в начало


Приложение В

Содержание web-страниц «Наши достижения» и «Наши сотрудники»

 

Страница «Наши достижения»

 

Наша фирма создана в 1990 году. В настоящее время она является ведущим предприятием энергоснабжения в Средней Азии…(Продолжите рассказ о фирме, о работе главного конструктора, о разработанной микросхеме для защиты о перенапряжения в сетях, о книгах и статьях, написанных сотрудниками СКБ).

 

 

                       .                         

Главный конструктор            Микросхема защиты              Наши труды

 

 

 

Страница «Наши сотрудники»

 

Вставьте таблицу на страницу «Наши сотрудники». Выберите стиль и тему для таблицы. Введите 6 –7  записей в таблицу. Вставьте фотографии.

 

Наши сотрудники

ФИО

Фото

Должность

Подразделение

Кокумбаев К.Т.

Вставьте фото

Вице-президент

Администрация

Серегин С.С.

Вставьте фото

Гл. энергетик

Энергетический отдел

 

Кратко опишите обязанности сотрудников, их деловые качества.


Приложение Г

Некоторые команды FrontPage

 

Приведем команды, которые часто применяются при создании web-узлов.

Командами FileNew - New Page выбирается шаблон Normal Page для создания web-страницы.

Выбрав File - PageProperties в поле Title, пишут титул страницы.

В панели форматирования команда Style - Heading 1 создает текст, который станет заголовком.

Кнопка Numbered List выбирается для создания нумерованного списка, кнопка Bulleted изменит вид маркера.

Команды FormatTheme позволяют использовать тематический набор профессионально подготовленных комбинаций из стилей шрифтов и цветов.

 

Команды меню Insert:

- File. Вставляет файл, созданный в Word, в Exel или в графическом редакторе;

- Hyperlink. Позволяет создать гиперссылку на  существующий файл;

- Horizontal line. Добавит горизонтальную линию;

- Bookmark. Создает закладку на странице. Выбирается имя закладки;

- Form. Устанавливается компонент Form. Форма содержит две кнопки Submit (Передать форму) и Reset (Сброс). Далее в форму можно вставить переключатели, флажки и другие элементы;

- Component Marquee позволяет установить бегущую строку.

Команда Table - Cell Properties оформляет первые строки таблиц как заголовочные ячейки (Header Cell).

 

Предупреждение! До начала работы со страницами выберите язык.


 

Список литературы

1.           Едонский Ю.Е. Техника Web-дизайна.  - М.: БХВ, 2005. –386 с.

2.           Дуванов А.А. Web-конструирование. HTML. СП, БХВ-П, 2005. -325с.

3.           Печников В.Н. Создание Web-сайтов без посторонней помощи.  – М.: Технический бестселлер, 2006. –460 с.

4.           Холмогоров  В. Основы Web-мастерства: Учебный курс. – М.: Питер, 2001. -350 с.

5.           Якушина Е. Изучаем интернет. Создаем страничку. - М.: Питер, 2001. -255 с.

 

 

 

Содержание

 

Введение........................................................................................................... 4

1      Создание web-сайтов в блокноте.............................................................................. 5

1.1   Лабораторная работа № 1. Основы языка HTML................................. 5

1.2   Лабораторная работа № 2. Форматирование и гиперссылки................ 6

1.3   Лабораторная работа № 3. Создание домашней страницы................... 7

1.4   Лабораторная работа № 4. Таблицы.................................................... 10

1.5   Лабораторная работа № 5. Фреймы..................................................... 12

2      Создание web-сайтов в специальных редакторах............................................ 13

2.1   Лабораторная работа № 6. Создание web-страниц в Word-97............ 14

2.2   Лабораторная работа № 7. Создание web-сайта в Word-2002............. 15

2.3   Лабораторная работа № 8. Создание web-сайта в Word-2003............. 16

2.4   Лабораторная работа № 9. Создание web-сайтов в Publisher.............. 19

2.5   Лабораторная работа № 10. Создание формы в Word........................ 22

2.6   Лабораторная работа № 11. Персональный сайт на FrontPage............ 24

2.7   Лабораторная работа № 12. Разработка web-сайта фирмы................. 27

Приложение А................................................................................................ 30

Приложение Б................................................................................................. 32

Приложение В................................................................................................ 37

Приложение Г................................................................................................. 38

Список литературы............................................................................................................... 39

 


Дополнительный план 2006 г. поз. 55

 

 

 

Виталий Михайлович Тарасов

 

 

 

 

ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

В ЭНЕРГЕТИКЕ

Методические указания к выполнению

лабораторных работ

 

(для студентов всех форм обучения энергетических специальностей)

 

 

 

 

 

Редактор Сыздыкова Ж.М.

 

 

Подписано в печать _____________                Формат 60х84  1/16

Тираж  ____ экз.                                                Бумага типографская №1

Объем ____ уч. изд. л.                                      Заказ _____ Цена       тг.

 

 

 

 

 

 

Копировально-множительное бюро

Алматинского института энергетики и связи

050013, Алматы, Байтурсынова, 126