Главная (стр. 4 из 10)

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

Вариант 30.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «Почтовый клиент MS Outlook Express 5: основные возможности и настройка». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Пример выполнения контрольной работы

Задание: Создать трехстраничный web-узел, включающий главную страницу, страницу с формой и страницу мини-реферата на тему «Оформление фона web-страниц». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, содержимое разбито на три колонки. Фон страниц должен быть оформлен в желто-коричневых тонах, цвет текста – темно-коричневый, цвет ссылок – бордовый, цвет активных ссылок – малиновый.

Рис.5. Внешний вид страницы «Главная» – файл index.htm

HTML-код страницы «Главная»:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>

<title>Главная</title>

</head>

<a name=”verh”></a>

<div align=”center”>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”100%”>

<tr>

<td width=”100%” bgcolor=”#E7BF58”

colspan=”3”> <div align=”center”><font size=”6” color=”#800000”><b>Пример создания учебного узла </b></font></div>

<img src=”images/SPACER.GIF” width=”770” height=”1” border=”0”>

</td>

</tr>

<tr>

<td width=”12%” bgcolor=”#E7BF58” rowspan=”3” valign=”top”> <p>

<a href=”index.htm”><b>Главная</b></a></p>

<p><a href=”form.htm”><b>Формы</b></a></p>

<p><a href=”referat.htm”><b>Реферат</b></a></td>

<td width=”61%” valign=”top”><p align=”justify”>      Узел создан для иллюстрации и помощи в

выполнении заданий контрольной работы по

дисциплине "Инструментальные средства

создания web-страниц и презентаций".<br>

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

Содержимое страниц разбито на три колонки.<br>

      Узел включает следующие файлы: index.htm - страница "Главная", form.htm - страница с формой, referat.htm –

страница мини-реферата, использованные для

оформления страницы рисунки хранятся в папке images: bs00554_.gif - рисунок "книги", bd00028_.gif - рисунок "вопрос", spacer.gif –

прозрачный квадрат. </p>

<p align=”center”><b>Успехов в выполнении

контрольной работы!</b></p>

<div align=”center”>

<table border=”0” cellpadding=”5”

cellspacing=”0” width=”101%”>

<tr><td width=”58%” valign=”top”><a href=”referat.htm”><img src=”images/bs00554_.gif” width=”64” height=”56” alt=”Реферат” align=”left” border=”0”></a><font size=”2”>Мини-реферат на тему "Оформление фона web-страниц"</font> </td><td width=”6%” valign=”top”></td><td width=”39%” valign=”top”><a href=”form.htm”><img src=”images/bd00028_.gif” width=”51” height=”50” alt=”Формы” align=”right” border=”0”></a><font size=”2”>Задать вопрос, заполнив форму</font></td>

</tr></table>

</div>

</td>

<td width=”27%” valign=”top”><p><font size=”2”><b>Рекомендуемая литература:</b></font> </p><p><font size=”2”>Анисимова И.Н.

Инструментальные средства создания web-страниц. Методические указания. - СПб.: СПбГИЭУ, 2000. </font><br><i><font size=”2”>

Практическое руководство по созданию web-страниц с помощью непосредственного редактирования тэгов HTML. Управление узлами в FrontPage 98. Создание страниц с формами в редакторе FrontPage.</font> </i></p>

<p><font size=”2”>Вайскопф Дж. Microsoft FrontPage 2000: учебный курс. - СПб.: Питер, 2000.</font> <br><font size=”2”><i>Описание интерфейса и возможностей MS FrontPage 2000. Создание страниц с формами.</i></font></p></td>

</tr>

<tr><td><p align=”center”> <a href=”#verh”>

наверх</a> </p></td> <td></td></tr>

<tr> <td width=”88%” colspan=”2”>Посетите сайт

Инжэкона

<a href=”http://www.engec.ru”>www.engec.ru</a>.    Напишите письмо на кафедру

Вычислительных систем и программирования

<a href=”mailto:csp@engec.ru?subject=дисциплина "Создание web-страниц"”>csp@engec.ru</a>

</td>

</tr>

</table>

</div>

</body>

</html

Рис.6. Внешний вид страницы с формой «Формы» – файл form.htm

HTML-код страницы «Формы»:

<html>

<head>

<meta http-equiv=”Content-Type”

content=”text/html; charset=windows-1251”>

<title>Формы</title>

</head>

<a name=”verh”></a><div align=”center”>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”100%”>

<tr>

<td width=”100%” bgcolor=”#E7BF58”

colspan=”3”><div align=”center”><font size=”6” color=”#800000”><b>Пример создания учебного

узла</b></font></div>

<img src=”images/SPACER.GIF” width=”770” height=”1” border=”0”></td></tr>

<tr><td width=”12%” bgcolor=”#E7BF58” rowspan=”3” valign=”top”> 

<p><a href=”index.htm”><b>Главная</b></a></p>

<p><a href=”form.htm”><b>Формы</b></a></p>

<p><a href=”referat.htm”><b>Реферат</b></a></td>

<td width=”61%” valign=”top”>Создаете свой узел?<blockquote><p>Возникли вопросы?</p> <blockquote><p>Вы можете получить краткий ответ, заполнив следующую форму.</p> </blockquote>

</blockquote>

<form method=”POST” enctype=”text/plain” aсtion=”mailto:csp@engec.ru?subject=вопрос по

созданию web-страниц”>

<p>Ваши имя и фамилия

<input type=”text” name=”fio” size=”26”></p>

<p>Специальность 

<input type=”text” name=”spec” size=”19”>    з/о  

<input type=”checkbox” name=”zo” checked value=”yes”></p>

<p>Курс  <select name=”kurs” size=”1”>

<option value=”1”>первый</option>

<option value=”2”>второй</option>

<option value=”3”>третий</option>

<option value=”4”>четвертый</option>

<option value=”5”>пятый</option>

</select>   

номер группы  <input type=”text” name=”grup” size=”7”></p>

<center>Ваш вопрос:<br> <textarea rows=”3” name=”vopros” cols=”39”></textarea><br> <br> <input type=”reset” value=”Очистить”>

   <input type=”submit” value=”Задать вопрос”>

</center>

</form>

</td>

<td width=”27%” valign=”top”><p><font size=”2”><b>Отправка данных формы по электронной почте</b></font></p>

<p><font size=”2”>Для того, чтобы данные  формы можно было отправить по электронной почте, на компьютере, где просматривается web-страница, должна быть установлена и настроена программа-клиент для работы с электронной почтой через POP3 протокол. Отправка данных формы производится в

фоновом режиме. </font><br><font size=”2”>В

операционной системе Windows почтовыми клиентами являются MS Outlook Express и MS Outlook. В силу большей простоты рекомендуется пользоваться Outlook Express.</font></p>

</td></tr>

<tr>

<td><p align=”center”><a href=”#verh”>наверх</a></p></td>

<td></td></tr>

<tr><td width=”88%” colspan=”2”>Посетите сайт

Инжэкона

<a href=”http://www.engec.ru”>www.engec.ru</a>     Напишите письмо на кафедру Вычислительных систем и программирования

<a href=”mailto:csp@engec.ru?subject=дисциплина "Создание web-страниц"”>csp@engec.ru</a> </td></tr>

</table>