Разработка Web-страницы средствами языка HTML

Министерство образования республики Беларусь

 

Учреждение образования «Гомельский государственный

технический университет имени П. О. Сухого»

 

 

 

 

 

 

 

 

Кафедра «Информатика»

 

 

 

 

 

 

КОНТРОЛЬНАЯ РАБОТА

 

по курсу «Компьютерные информационные технологии»

 

 

 

 

 

 

 

 

 

 

Выполнил студент

гр. ЗМГ-21 Пахомова С. В.

Проверил преподаватель

_____________________

 

 

 

 

 

 

 

 

Гомель, 2013/2014уч.год 

Тема №1. «Разработка Web-страницы средствами языка HTML».

Задание. Используя основные тэги языка HTML, разработать Web-страницу, содержащую сведения об авторе-разработчике. Страница должна содержать сведения об авторе сайта (включая, по-возможности, его фото, краткую биографию, сведения о месте работы и профессии). Для оформления страницы использовать: фон, текст, заголовки различных уровней, горизонтальную линию, бегущую строку, нумерованный или маркированный списки, графическое изображение.

Отчет о создании Web-страницы должен содержать:

  • распечатку созданной Web-страницы:

  • распечатку HTML-документа созданной Web-страницы:

<html><!--Начало HTML - документа -->

<head><!--Заголовочная  часть документа -->

<title> Авторская  страница</title><!--заголовок документа -->

</head><!--Конец  заголовочной части документа -->

<body bgcolor= "0011cc" > <!--Определение цвета фона  документа -->

<IMG src="100_1866.jpg"width="500" height="420"align="left"><!--Добавление графического объекта -->

<!--Основной  текст документа -->

<p><CENTER><FONT color="magenta" hr size=5 ><H1><U><I>Пахомова  Светлана Валентиновна  </I></U></H1></FONT></CENTER></body>

<hr size=10 color="ffff00" noshade><!--Горизонтальная линия -->

<CENTER><FONT color="fffbcf"><H2><I>Моя автобиография </I></H2></FONT></CENTER>

<hr size=10 color="white" noshade>                        

<h2>

<FONT color="aqua"><p>Я ,Пахомова Светлана Валентиновна родилась 3 марта 1995 года, в городе Жлобине .Гомельской области.

<p>В 2001 году  пошла в первый класс в гимназию  №1.г Жлобина. Окончила школу  в 2012 год.

<p> В 2012 году  поступила в ГГТУ.им Сухого  на специальность экономист –  маркетолог.

<p>На данный  момент нигде не работаю.

<p>Незамужем.

<p> Мой адрес:  Гомельская область.

г .Жлобин. ул.Урицкого 72 .кв.7

 

</p>

</body>

</html><!--Конец HTML - документа -->

 

Тема №2. «Разработка Web-сайта средствами программы Front Page».

 

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

Сайт должен представлять собой разветвленную 3-х уровневую структуру и содержать не менее 6-и Web-страниц, включая домашнюю страницу и страницу автора – разработчика, созданную при выполнении задания по теме №1.

Домашняя страница должна отражать:

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

Остальные страницы должны отражать сведения о подразделениях и делах, входящих в структуру организации:

  • кадровый состав;
  • выполняемые функции;
  • оснащенность оргтехникой и компьютерной техникой (с указанием характеристик);
  • связи с другими структурными подразделениями, наличие компьютерной сети (с указанием характеристик).

Со всех страниц сайта должны быть ссылки на домашнюю страницу и на предыдущую (родительскую). В оформлении Web-страниц кроме текста должны присутствовать следующие элементы:

  • графические изображения (фото, рисунки, объекты WordArt, автофигуры);
  • нумерованные и маркированные списки;
  • горизонтальные линии, бегущие строки;
  • гиперссылки (текстовые и графические);
  • диаграммы;
  • фон страниц (в виде цвета или рисунка).

Отчет о создании Web-сайта должен содержать:

  1. Описание структуры Web-сайта 

 

 

  1. Распечатку логической структуры Web-сайта

  1. Описание процесса создания основных элементов Web-страниц (текста, списков, графических изображений, гиперссылок и т.п.).

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

Для создания пустой страницы достаточно щелкнуть по кнопке Новая страница (New Page)   на панели инструментов Стандартная, после чего откроется чистая Web – страница. Допускается одновременное открытие нескольких страниц, переключение между которыми осуществляется через меню Окна.

Новую страницу можно создать и с помощью шаблона, который служит своего рода заготовкой для новой Web – страницы.

Ввод и редактирование текста в режиме просмотра страницы осуществляется практически также как и в текстовом процессоре Word .

Вид шрифта и его размер можно выбирать при помощи раскрывающихся списков, окна которых расположены на панели Форматирование

 . Если воспользоваться командой Формат → Шрифт, то можно кроме этого выбрать стиль шрифта, его цвет и различные эффекты его изображения.

Выделение текста производится перетаскиванием мыши или путем использования клавиш со стрелками при нажатой клавише <Shift>.

Выделив часть документа, над ней можно производить стандартные операции редактирования – либо выбором команд из меню, либо при помощи кнопок на панели инструментов Форматирование, либо с помощью команд контекстного меню, открываемого правой кнопкой мыши на объекте. В частности,  для перемещения или копирования текста или графических объектов можно использовать буфер обмена(Clipboard), применяя команды Вырезать (Cut), Копировать (Copy) и Вставить (Paste).

Выравнивание абзаца, в конце которого при наборе нажимается  клавиша  <Enter>  (он при этом помечается символом ¶) можно осуществить по левому краю, по центру или по правому краю. Можно ввести код конца строки, не создавая нового абзаца: для этого нужно нажать сочетание клавиш <Shift> <Enter> . Код конца строки при показе непечатаемых символов изображается в виде  8.

Создание горизонтальной линии. Для этого нужно выполнить следующие действия:

    1. Поставить курсор в то место, где должна пройти линия.
    2. Выполнить команду Вставка → Горизонтальная строка (Insert → Horizontal Line).
    3. Для редактирования свойств созданной линии дважды щелкнуть на ней (или открыть контекстное меню и выбрать в нем команду Свойства горизонтальной линии (Horizontal Lines Properties).

В открывшемся диалоговом окне можно задать: ширину или высоту в пикселах или % от ширины окна, цвет, расположение (выравнивание).

 

Использование заголовков. Заголовки являются очень эффективным и часто используемым средством структуризации Web – страницы. На Web – странице может быть до шести уровней заголовков: от Уровня 1 – самого крупного, до Уровня 6 – самого мелкого. Заголовком может быть любой текст, и их можно использовать в любом порядке. Но лучше использовать заголовки по их прямому назначению, учитывая, что все браузеры отображают заголовки более высоких уровней как "более значимые".

Для создания заголовка нужно щелкнуть на тексте или абзаце, который будет служить заголовком, а затем раскрыть список Стили на панели Форматирование и из шести уровней заголовков в списке выбрать требуемый

 

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

        1. Установить курсор туда, где будет начало бегущей строки.
        2. Выполнить команду Вставка → Компонент → Бегущая строка (Insert  →Component → Marquee).
        3. В открывшемся диалоговом окне установить свойства бегущей строки:
    • текст (Text) строки:
    • направление перемещения текста: влево (Left) или вправо (Right);
    • ширину (Width) и высоту (Height) строки в пикселах или % от ширины окна;
    • цвет фона (Background color);
    • стиль написания текста;
    • число повторений и др.
  1. Щелкнуть по кнопке ОК, после чего текст бегущей строки будет помещен на страницу.

Чтобы посмотреть, как строка будет выглядеть в окне браузера нужно:

    • либо открыть страницу в каком – либо браузере;
    • либо открыть страницу в режиме  предварительного просмотра.

Для редактирования свойств бегущей строки нужно дважды щелкнуть на ней или, открыв контекстное меню, выбрать пункт Свойства бегущей строки (Marquee Properties).

FrontPage дает возможность использовать два вида списков:

    • маркированный (bulleted list); перед каждым объектом (абзацем) помещается маркер – символ определенного вида;
    • нумерованный (numbered list); перед каждым объектом помещается его порядковый номер.

Список можно создать как перед вводом данных, так и после него. Каждый объект в списке является отдельным абзацем.

Если текст, который нужно преобразовать в список, уже введен, то нужно выделить абзацы текста и нажать на одну из кнопок   : нумерованный список или маркированный, соответственно.

Список можно создать и непосредственно при вводе текста. Для этого:

  1. В начале новой строки нужно щелкнуть по одной из указанных кнопок. При этом в начале строки появится маркер, и она станет первой строкой списка.
  2. Ввести текст первой строки нажать клавишу <Enter> для перехода к следующей. Ввести текст второй строки списка и вновь нажать <Enter>. Повторять эту процедуру до тех пор, пока не будет введен весь список.
  3. По окончании ввода списка либо дважды нажать <Enter>, либо использовать сочетание <Shift> <Enter>.

Чтобы добавить новый элемент в список, нужно поместить точку вставки в начало строки и ввести текст. Новый текст помещается перед существующим. Для перемещения существующего текста на следующую строку нужно нажать <Enter>. Если список нумерованный, то все его элементы, расположенные ниже точки вставки, будут автоматически перенумерованы.

Для добавления нового элемента в конец существующего списка нужно поместить точку вставки в конец последнего элемента и нажать <Enter>.

Для удаления элемента списка нужно выделить его и нажать < Del>  или выполнить команду Правка → Удалить (Edit →Delete).

Для того чтобы изменить параметры существующего списка, форму маркера, стиль списка и т.д., нужно выполнить команду Формат → Маркеры и номера (Format → Bullets and Numbering) или выполнить команду Свойства списка (List Properties) из контекстного меню списка  в открывшемся диалоговом окне установить нужные параметры.

Можно создавать многоуровневые (вложенные) списки, которые используются в том случае, когда нужно сгруппировать информацию таким образом, чтобы облегчить ее использование и понимание.

Для вставки в Web – страницу графического объекта нужно выполнить команду Вставка → Рисунок →  Клип Арт (Insert Picture Clip Art) -  если рисунок будет выбран из готового набора рисунков или Вставка → Рисунок →  Из файла (Insert  →Picture  → File) - если рисунок находится в файле) или Вставка → Рисунок →  Видео (Insert  →Picture  →Video).

Размеры рисунка можно изменять, но увеличивать рисунок средствами FrontPage не рекомендуется из-за потери качества изображения (лучше это сделать в графическом редакторе, а затем внедрить рисунок заново).

 

Таблицы - удобное средство представления и упорядочения информации на Web-странице. Frontpage обладает обширными возможностями создания и обработки таблиц

Для создания таблиц предназначены кнопка - Вставить таблицу (Insert Table) на панели инструментов Стандартная, предоставляющая доступ к прототипу таблицы для определения количества строк и столбцов, и команда Таблица → Вставить → Таблица (Insert → Table → Table), при вызове которой открывается диалоговое окно Вставить таблицу (Insert Table) , а также инструмент Рисование таблицы (Draw Table). Это окно содержит элементы для указания размера и способа расположения таблицы. Однажды созданную таблицу можно модифицировать с помощью команд меню Таблица (Table), которые позволяют обрабатывать как таблицу в целом, так и ее отдельные ячейки. Для работы с таблицами также предназначена панель инструментов Таблицы (Tables).

Web - страницы любого Web-узла содержат гиперссылки. Они и являются наиболее удобным и эффективным средством "путешествия" по Web-узлу или WWW.

В гиперссылку может быть включен любой объект (текст или графическое изображение), находящийся на странице. Гиперссылка – это связь, ведущая с одной Web – страницы на другую страницу, картинку, адрес электронной почты или файл, расположенные где–то в WWW. Гиперссылка может быть локальной, т.е. указывать на ресурс, находящийся внутри  текущего Web – узла, или внешней, указывающей на любой ресурс, находящейся в WWW где угодно. При выполнении щелчка на гиперссылке браузеру указывается связанный с этой гиперссылкой URL-адрес ресурса, и он осуществляет переход к нему.

При отображении в браузере гиперссылка обычно выделяется цветом и подчеркиванием (в настройках браузера можно задать, каким цветом выделить гиперссылку и нужно ли подчеркнуть ее). Когда указатель мыши в браузере расположен на гиперссылке, он имеет вид указывающей руки, а в строке состояния браузера выводится URL-адрес ресурса, связанного с этой ссылкой.

Создание гиперссылки. Есть несколько способов создания гиперссылок. Рассмотрим самый распространенный из них.

  1. В режиме Страница выделить текст или изображение, которые будут служить в качестве гиперссылки.
  2. Выполнить команду Вставка → Гиперссылка (Insert Hyperlink) или нажать кнопку (Гиперссылка) на панели инструментов Стандартная.
  3. В открывшемся диалоговом окне (рис.3.4.) выбрать ресурс, на который ссылается гиперссылка. Для этого имеются следующие возможности:

 

    • - (Текущий Web – узел FronPage) - выбор файлов в пределах текущего Web – узла (для выбора нужно использовать раскрывающийся список);
    •   - (WWW) – выбор ресурса из Интернет (нужно ввести URL – адрес или использовать кнопку для поиска нужной Web – страницы с помощью браузера);
    • - (На вашем компьютере) – поиск ресурса для гиперссылки осуществляется в открывшемся диалоговом окне в пределах вашего компьютера или в локальной сети;
    • - (Электронная почта) – в качестве ресурса используется адрес электронной почты, который вводится в открывшееся диалоговое окно; когда посетитель сайта щелкнет по такой ссылке, ему будет предложено заполнить форму для отправки по указанному вами адресу;
    • - (Новая страница) – в качестве ресурса будет использована новая Web – страница, создание и сохранение которой, нужно осуществить после нажатия на данную кнопку.
  1. Закончить процесс создания гиперссылки, нажав кнопку Да (ОК).

 

 

Редактирование гиперссылки. Текст созданной гиперссылки можно редактировать так же, как любой другой текст Web – страницы. Можно также изменить рисунок, используемый в качестве графической гиперссылки. Для этого нужно щелкнуть на нем правой кнопкой мыши и выбрать из контекстного меню команду  Свойства изображения (Picture Properties). В открывшемся окне указать новый графический файл или найти его в папках Web – узла или других источников, используя кнопку (Browse).

Для изменения ресурса, на который ссылается гиперссылка, нужно выделить изображение, являющееся гиперссылкой, или установить текстовый курсор внутри текста гиперссылки (весь текст выделять не нужно). После чего создать гиперссылку заново или воспользоваться командой Свойства Гиперссылки (Hyperlink Properties) из контекстного меню и в открывшемся диалоговом окне изменить существующий URL ресурса на любой другой. Если URL удалить вообще, то тем самым будет удалена гиперссылка, хотя текст (или изображение) гиперссылки на Web – странице останутся.

  1. Распечатки Web-страниц (можно в уменьшенном виде)

 

 

 

 

Тема №3. «Создание презентации средствами программы MS Power Point».

 

Задание. Средствами программы MS Power Point создать презентацию сайта, разработанного при выполнении задания по теме № 2. Презентация должна содержать 6-7 слайдов, использовать различные варианты оформления слайдов, эффекты анимации и смены показа слайдов.

Отчет о создании презентации должен содержать:

    1. распечатку слайдов, входящих в презентацию (можно в виде выдачи);

 

 

 

    1. описание процесса создания слайдов и их отдельных элементов.
        1. Загрузить программу Microsoft PowerPoint: Пуск – Программы - Microsoft PowerPoint
        1. На экране мы увидим  пустую презентацию с одним пустым слайдом

 

        1. Выбираем основные свойства оформления слайда, для этого подводим курсор к разрабатываемому слайду и нажимает правую клавишу. На экране увидим контекстное меню:

Где мы можем выбрать все необходимые действия со слайдом.

        1. Для оформления слайда выбираем подпункт «оформление слайда» и в появившемся перечне выбираем необходимый шаблон оформления:

        1. Для определения эффектов анимации слайда выбираем подпункт «оформление слайда»  - эффект анимации и в появившемся перечне выбираем необходимый эффект анимации:

        1. Для определения смены показы слайдов  выбираем подпункт «смена слайдов» и в появившемся перечне выбираем режим смены слайдов:

        1. Также можно задать эти же свойства через элемент меню Формат.

        1. После того как оформили один слайд, добавляем новый слайд выбрав подпункт «Создать слайд» и аналогично его оформляем.
        2. Для того, чтобы просмотреть, что у нас получилось необходимо выбрать
        3. Когда просмотрели презентацию, для выхода нажимаем клавишу Esc.
        4. Также мы можем пожеланию выполнить Настройку презентации, Настройку времени просмотра и остальных элементов управления.

 

 

Литература:

 

  1. Закарян И., Рафалович В. Что такое Internet, WWW и HTML. – М., 1998.
  2. В.Дорот, Ф.Новиков. Толковый словарь современной компьютерной лексики. С-Пб.,2001.
  3. Информатика. Базовый курс / Под ред.Симоновича. С-Пб., 2001.
  4. Айзенменгер Р. HTML 3.2/4.0: Справочник. — М.: БИНОМ, 1998.
  5. Браун М., Хоникатт Дж. Использование HTML 4. — М., СПб.: Вильяме, 1999.
  6. Воген Т. Мультимедиа: Практическое руководство. — Мн., 1997.
  7. Вайскопф Дж. Microsoft  FrontPage 2000: учебный курс. – СПб: Издательство "Питер", 2000.
  8. Мэтьюс М., Полсен Э. FrontPage 2000. – К.: BHV, 1999.
  9. Хомоненко А. Самоучитель MS Word 2000.- СПб: BHV, 1999.
  10. Основные приемы работы в Word 7.0 для Windows. Практическое пособие (м/у №2344).

 

 


 



Разработка Web-страницы средствами языка HTML