Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лабораторная работа №1
Тема: Текстовое оформление страниц
Цель работы: Знакомство с языком гипертекстовой разметки HTML. Изучение структуры HTML –документа и основных его элементов. Вставка изображений в html-страницы.
Автономные Web-документы используют язык HTML (HypertextMarkup Language - язык разметки гипертекста). Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование специальных кодов, легко отделяе мых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяе мым спецификацией языка HTML.
HTML -документ - это файл, содержащий обыкновенный текст со специальными командами. Такой файл может быть подготовлен в произвольном тек стовом редакторе (существуют, однако, специальные программы-конверторы и HTML-редакторы).
HTML -документ состоит из содержимого, то есть собственно полезной информации, и команд, задающих структуру.
Каждая команда (управляющая конструкция) HTML -документа (тег) должна заключаться в угловые скобки - вот так: <тег>. Чаще всего в документе встречаются парные теги (открывающий и соответствующий ему закрываю щий), так как браузеру необходимо знать область действия тега. Существуют и одиночные теги, однако, используются они только там, где область действия очевидна и дополнительной информации не требуется (ясно, например, что ес ли мы встретили тег "начало абзаца" (<Р>), то предыдущий абзац уже закон чился). В сомнительном же случае лучше перестраховаться и поставить закры вающий парный тег, иначе документ может оказаться нечитаемым. Открываю щий и закрывающий теги называются одинаково и отличаются друг от друга только символом "наклонная черта" или "слэш" - который ставится сразу после открывающей угловой скобки закрывающего тега. Закрытие парных те гов выполняется так, чтобы соблюдались правила вложения.
<В><l>На этот текст воздействуют два тега</l></В>
Кроме того, тег может включать атрибут, дающий дополнительную ин формацию браузеру. Например, при помощи атрибута можно попросить брау зер изменить величину шрифта, ориентацию изображения по отношению к строке следующего за ним текста, поменять цвет фона документа и т. д. В пар ных тегах атрибуты добавляются только к открывающему тегу. Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключево го слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа ">". Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключево го слова атрибута символом "=" (знак равенства) и заключается в кавычки.
<H1 ALIGN=”LEFT”>
Язык HTML в большинстве случаев совершено равнодушен к регистру, в котором набираются теги. Скажем, браузеру совершенно все равно, наберете вы тег, служащий для рисования горизонтальной линии, как <HR> или <hr> - эф фект будет один и тот же.
HTML не признает никакого дополнительного форматирования текста, кроме как с помощью тегов. В результате текст, превосходно смотрящийся в текстовом редакторе, в окне браузера сольется в единую нечитаемую массу. Так, на месте нескольких пробелов будет лишь один пробел. Исчезнут все заго ловки, пустые строки, деление текста на абзацы. Без HTML -тегов браузер про сто игнорирует все элементы форматирования.
Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалентный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.
Пример 1: Структура HTML-документа
<HTML>
<HEAD>
<TITLE> Моя домашняя страница </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Элементы не должны пересекаться. Другими словами, если открываю щий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.
Блочные элементы могут содержать вложенные блочные и текстовые элементы.
Текстовые элементы могут содержать вложенные текстовые элементы.
Текстовые элементы не могут содержать вложенные блочные элементы.
4. Строго говоря, все правила языка HTML можно рассматривать исключительно как "пожелания". Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее ра зумным образом. Тем не менее, гарантию правильного воспроизведения доку мента дает только неукоснительное следование требованиям спецификации языка.
Пример 2: Функциональные блочные элементы
<h1>Заголовок</h1>
<p>Первый абзац
<p>Второй абзац
<h2>Заголовок второго уровня</h2>
5. В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заго ловков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При ото бражении Web-документа на экране компьютера эти элементы показываются при помощи шрифтов разного размера.
6. Обычные абзацы задаются с помощью парного тега <Р>. Язык HTML не содержит средств для создания абзацного отступа ("красной строки"), поэтому при отображении на экране компьютера абзацы разделяются пустой строкой. Закрывающий тег </Р> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа.
Первый абзац
Второй абзац
Заголовок второго уровня
Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML рассматри вает символы конца строки и пробелы особым образом. Любая последователь ность, состоящая только из пробелов и символов конца строки, при отображе нии документа рассматривается как одиночный пробел. Это, в частности, озна чает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).
7. С помощью тега <font> можно изменить параметры шрифта. Для тега используются следующие параметры: face, size и color.
8. Параметр Face служит для задания гарнитуры шрифтов использующихся для текста. Названий шрифтов можно указать несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, будет использоваться следующий по списку.
Пример 3. Использование параметра face
<font face="Arial, Helvetica, sans-serif'>Текст будет написан шрифтом Arial.</font>
9. Size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового.
Пример 4. Задание размера шрифта
<font size=1>Шpифт размера 1</font><br>
<font size=2>Шpифт размера 2</font><br>
<font size=3>Шpифт размера 3</font><br>
<font size=4>Шрифт размера 4</font><br>
<font size=5>Шрифт размера 5</font><br>
<font size=6>Шрифт размера 6</font><br>
<font size=7>Шрифт размера 7</font><br>
Шpифт размера 1
Шpифт размера 2
Шpифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
10. Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.
Пример 5. Изменение цвета текста
<font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.</font>
Первая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.
11. Видоизменение текста - средства его форматирования, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид тек ста. В таблице перечислены основные теги, которые применяются для измене ния оформления текст
Таблица 2.1-Теги, используемые для оформления текста
|
Код HTML |
Описание |
Пример |
|
<b>Текст </b> |
Жирный текст |
Текст |
|
<i>Текст</i> |
Курсивное начертание текста |
Текст |
|
<u>Текст</u> |
Подчеркнутый текст |
Текст |
|
<sup>Текст</sup> |
Верхний индекс |
e=mc2 |
|
<sub>Текст</sub> |
Нижний индекс |
H2O |
|
<strike>Текст</strike> |
Зачеркнутый текст |
Текст |
|
<pre>Текст</pre> |
Текст пишется как есть, включая все пробелы |
Текст |
|
<em>Текст</em> |
Курсивный текст |
Текст |
|
<strong>Текст</strong> |
Жирный текст |
Текст |
Обычно для создания верхнего или нижнего индекса используется тег small, делающий индекс меньше по размеру основного шрифта.
Пример 6. Создание нижнего индекса
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i>
Формула серной кислоты: H2SO4
12. Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому, правому краю, по центру или по ширине.
Таблица 2.2 – Теги, используемые для выравнивания текста
|
Код HTML |
Описание |
Пример |
|
<p>Текст</p> |
Добавляет новый параграф, по умолча нию выровненный по левому краю. Пе ред параграфом автоматически добавля ется пустая строка. |
Текст |
|
<p align=left>Текст</p> |
Выравнивание по левому краю. |
Текст |
|
<p align=right>Текст</p> |
Выравнивание по правому краю. |
Текст |
|
<p align=center>Текст</p> |
Выравнивание по центру. |
Текст |
|
<p align=justify>Текст</p> |
Выравнивание по ширине. |
Текст по ширине |
13. Вставка изображений в html-страницы
Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Файл с рисунком, изображенным ниже, называется sample.gif и размещается в папке images корня сайта.
Для указания адреса изображения можно задавать как абсолютный, так и относительный адрес.
Пример 7. Вставка изображения в документ
<html>
<body>
<img src="http://www.htmlbook/images/sample.gif'> - это абсолютный адрес размещения изображения
<img src="/images/sample.gif''> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif''> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>
14.Выравнивание изображений
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.
Таблица 2.3 – Теги, используемые для выравнивания изображения в тесте
|
Код HTML |
Описание |
|
<img src="../files/232/files/232/HLPBELL.GIF" align=texttop> |
Верхняя граница изображе ния выравнивается по самому высокому текстовому эле менту текущей строки. |
|
<img src=HLPBELL.GIF align=top> |
Верхняя граница изображе ния выравнивается по самому высокому элементу текущей строки. |
|
<img src=HLPBELL.GIF align=middle> |
Выравнивание середины изо бражения по базовой линии текущей строки. |
|
<img src=HLPBELL.GIF align=absmiddle> |
Выравнивание середины изо бражения по средине теку щей строки. |
|
<img src=HLPBELL.GIF align=baseline> |
Выравнивание изображения по базовой линии текущей строки. |
|
<img src=HLPBELL.GIF align=bottom> |
Выравнивание нижней гра ницы изображения по окру жающему тексту.. |
|
<img src=HLPBELL.GIF align=left> |
Выравнивает изображение по левому краю окна. |
|
<img src=HLPBELL.GIF align=right> |
Выравнивает изображение по правому краю окна. |
15. Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, реко мендуется в теге IMG добавить параметр hspace и vspace, задающих расстоя ние до текста в пикселах.
Пример 8: Обтекание текста вокруг рисунка
<html>
<body>
<img src="../files/232/files/232/HLPBELL.GIF" width=40 height=40 hspace=5 vspace=5 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrad exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
</body>
</html>
Задание:
1. Оформите текст, как показано ниже:
Октябрь уж наступил,
Уж роща отряхает
Последние листы
С нагих своих ветвей.
Дохнул осенний хлад,
Дорога промерзает,
Журча, еще бежит
За мельницу ручей
2.Выровняйте рисунки и текст так, как показано ниже:
Контрольные вопросы:
Лабораторная работа №2
Тема: Создание гипертекстовых ссылок
Цель работы: Освоение навыков создания гипертекстовых ссылок с помощью тега A, который имеет единственный параметр href. Изучение абсолютных и относительных ссылок.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет единственный параметр href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка.
Пример 1. Использование абсолютных ссылок
<html>
<body>
<a href=www.yandex.ru>Поисковая система Яндекс</a>
</body>
</html>
1. Относительные ссылки, как следует из их названия, построены относи тельно текущего документа или адреса. Примеры таких адресов:
4. ../help/me.html
5. manual/info.html
2. Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш пе ред адресом говорит о том, что адресация начинается от корня сайта, двоеточие - перейти на уровень выше в списке каталогов сайта.
Пример 2. Использование относительных ссылок
<html>
<body>
<a href=images/xxx.jpg>Посмотрите на мою фотографию !</a><br> <a href=tip.html>Как сделать такое же фото?</a> </body> </html>
3. Ссылки внутри страницы
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега А.
Пример 3. Создание внутренней ссылки
<html>
<body>
<a name=top></a> Друг уронил утюг в унитаз. И разбил его. Причем так раз бил, что по назначению унитаз и использовать никак нельзя. Мгновением назад толь ко что вот все было хорошо и вот уже дыра, да такая, что можно забыть, что есть та кой предмет в доме. Махнул рукой нечаянно, а потом мучайся...
<a href=#top>Наверх</a>
</body>
</html>
4. Между тегами <a name=top> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом # , после чего идет название закладки. Название выбирается любое, соответствующее тематике.
5. Можно, также, делать ссылку на закладку, находящуюся в другой веб странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
Пример 4. Ссылка на закладку из другой веб-страницы
<html>
<body>
<a href=text.html#bottom>Перейти к нижней части текста</а>
</body>
</html>
5. Ссылка на новое окно
Если требуется сделать ссылку на документ, который открывается в но вом окне браузера, используется параметр target=_blank тега А.
6. Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт, в остальном лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя с толку.
7. Так как ссылки на текущее или новое окно ничем не отличаются друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Пример 5. Создание ссылки на новое окно
<html>
<body>
<a href=www.bsu.edu.ra>ОбьIчная ссылка на сайт www.bsu.edu.ru</a><br> <a href=www.bsu.edu.ru target=_blank>Ссылка открывает новое окно на сайт www.bsu.edu.ru</a>
</body>
</html>
Обычная ссылка на сайт www.bsu.edu.ru
Ссылка открывает новое окно на сайт www.bsu.edu.ru
Задание:
Используя внутренние ссылки, создать следующий словарь терминов:
Словарь терминов
А Б В Г Д Е
А
Авторизация пользователей - процесс определения прав пользовате ля для доступа к различной информации, ресурсам, а также действия, которые может со вершать пользователь.
Б
Баннером (от англ. banner — знамя) - рекламное изображение фиксированного размера, как правило, содержащее анимацию, которое выполняет роль гиперссылки на тот или иной ресурс Интернета.
Библиотечные каталог – это структурированная информация обо всех присутствующих в библиотеке книгах, т.е. полные библиографические данные книг, необходимые для их получения.
В
В начало
Г
В начало
Д
В начало
Контрольные вопросы:
Лабораторная работа №3
Тема: Создание списков. Нумерованные списки
Цель работы: изучить принципы создания нумерованного и маркированного списка, изучения тега OL и результатов их применения.
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL, кото рый и используется для создания списка. В качестве маркеров могут быть сле дующие значения: арабские цифры заглавные латинские буквы прописные ла тинские буквы заглавные римские цифры прописные римские цифры.
Ниже, в таблице приведены различные параметры тега OL и результат их применения.
Таблица 4.1 – Параметры тега OL
|
Код HTML |
Пример |
|
<ol> <li>текст</li> <li>текст</li> <li>текст</li> </ol> |
Нумерованный список с параметрами по умолчанию: 1. текст 2. текст 3. текст |
|
<ol start="5"> |
Нумерованный список начинающийся с пяти: 5. текст 6. текст 7. текст |
|
<ol type="A"> |
Нумерованный список с заглавными буквами латинского алфавита: A. текст B. текст C. текст |
|
<ol type="a"> |
Нумерованный список с прописными буквами латинского алфавита: a текст b текст c текст |
|
<ol type="I"> |
Нумерованный список с римскими буквами: I. текст II. текст III. текст |
|
<ol type="i"> |
Нумерованный список с прописными римскими буквами: i. текст ii. текст iii. текст |
|
<ol type="1"> |
Нумерованный список с арабскими цифрами: 1. текст 2. текст 3. текст |
|
<ol type="I" start="7"> |
Список с римскими цифрами начинающийся с семи: IV. Текст
|
1. Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом худшего восприятия текста с экрана монитора, чем печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используется тег UL и LI (При мер 1)
Пример 1. Создание маркированного списка
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<ul>
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</ul>
</body>
</html>
Ниже показан результат примера 1.
Что следует учитывать при тестировании сайта:
работоспособность всех ссылок
поддержку разных браузеров
читабельность текста
2. Обратите внимание, что у маркированного текста появляются отступы сверху и снизу. Чтобы от них избавиться, список можно делать без тега UL. При этом исчезнут и отступы текста перед маркерами.
Пример 2. Создание маркированного списка без отступов
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</body>
</html>
Ниже показан результат примера 2.
Что следует учитывать при тестировании сайта:
работоспособность всех ссылок
поддержку разных браузеров
читабельность текста
3. Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="... " тега UL. Вместо многоточия подставляется одно из трех значений указанных в таблице.
Таблица 4.2 – Параметры тега UL, используемые для создания маркированного списка
|
Код HTML |
Пример |
|
<ul type="disc"> |
Что следует учитывать при тестировании сайта: • работоспособность всех ссылок • поддержку разных браузеров • читабельность текста |
|
<ul type="circle"> |
Что следует учитывать при тестировании сайта: □ работоспособность всех ссылок □ поддержку разных браузеров □ читабельность текста |
|
<ul type="square"> |
Что следует учитывать при тестировании сайта: ■ работоспособность всех ссылок ■ поддержку разных браузеров ■ читабельность текста |
Задание: Создать маркированный текст.
Контрольные вопросы:
Лабораторная работа № 4
Тема: Создание таблиц
Цель работы: Изучить принципы построения таблиц. Научиться создавать простые и сложные таблицы.
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представ ления данных, однако возможности таблиц этим не ограничиваются. C помо щью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег-контейнер TABLE. Таблица должна содержать хотя бы одну строку и колонку.
Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>.
Параметры таблицы
Для изменения вида и свойств таблицы используется множество парамет ров, которые добавляются в теге TABLE.
<table параметр1=... параметр2=...>
Таблица 5.1 - Описание параметров таблицы и их свойств
|
Свойство |
Значение |
Описание |
Пример |
|
align= |
Left Right Center |
Выравнивание таблицы |
align=center |
|
background= |
URL |
Фоновый рисунок |
background=pic.gif |
|
bgcolor= |
#rrggbb |
Цвет фона таблицы |
bgcolor=#FF9900 |
|
border= |
n |
Толщина рамки в пикселах |
border=2 |
|
bordercolor= |
#rrggbb |
Цвет рамки |
border- color=#333333 |
|
bordercol-ordark= |
#rrggbb |
Тень рамки |
bordercol-ordark=#f0f0f0 |
|
cellpadding= |
n |
Расстояние между ячейкой и ее содержимым |
cellpadding=7 |
|
cellspacing= |
n |
Дистанция между ячейка ми |
cellspacing=3 |
|
nowrap |
Запрещает переносы строк в тексте |
<table nowrap> |
|
|
frame= |
Void Above Below Lhs Rhs Hsides Vsides Box |
Задание типа рамки табли цы |
frame=hsides |
|
valign= |
Top Bottom |
Выравнивание по высоте |
valign=top |
|
width= |
n n% |
Минимальная ширина таб лицы, можно задавать в пикселах или процентах |
width=90% |
|
height |
n n% |
Минимальная высота таб лицы, можно задавать в пикселах или процентах |
height=18 |
Примечание
Пример 1:Создание таблицы
<HTML>
<HEAD>
<TITLE>ТАБЛИЦА</ТIТLE>
</HEAD>
<BODY>
<TABLE border="2" align=center>
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки
</TD>
<TD align="center">
Вторая ячейка первой строки
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка второй строки
</TD>
<TD align="center">
Вторая ячейка второй
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Тег <TABLE> задает таблицу
1. Атрибуты border="2" и align=center задают, соответственно, размер границ таблицы и выравнивание ее по центру страницы Тег <TR> задает строку таблицы Тег <TD> задает ячейку таблицы
2. Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам) В результате получится следующая таблица, состоящая из двух столбцов и двух строк:
|
Заголовок Таблицы. |
|
|
Первая ячейка первой строки |
Вторая ячейка первой строки |
|
Первая ячейка второй строки |
Вторая ячейка второй |
Пример 2. Сложная таблица
<HTML>
<HEAD>
<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" align=center>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD >
</TR > <TR >
<TD width="33%" rowspan="2" valign="middle" >
Две ячейки, объединенные по вертикали
</TD >
<TD width="33%">
по левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right" >
по правому краю
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам)
Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки по вертикали
В результате получается следующая таблица:
|
Две ячейки, объединенные по горизонтали |
|
|
Две ячейки, объединенные по вертикали |
по левому краю |
|
по правому краю |
Пример 3: Более сложная таблица
<HTML>
<HEAD>
<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<THEAD BGCOLOR="Aqua">
<TR>
<TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>
</THEAD>
<TBODY>
<TR>
<TD WIDTH="33%">Это первая ячейка</TD>
<TD WIDTH="33%">Это вторая ячейка</ TD>
<TD ROWSPAN="3">А это три ячейки третьего столбца объединились в одну большую</TD>
</TR>
<TR>
<TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</TD>
</TR>
<TR>
<TD> Это первая ячейка третьей строки</TD>
<TD WIDTH="33%">А это вторая ячейка третьей строки</TD >
</TR>
</TBODY>
<TFOOT BGCOLOR="Yellow">
<TR>
<TD COLSPAN="3" ALIGN="center">
<SMALL>конец</SMALL></TD></TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы
Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами
Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы
Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы
Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы
В результате получается следующая таблица:
Задание:
Создать турнирную таблицу, представленную ниже на рисунке.
Для задания кавычек используйте специальные символы « ("«") и » ("»"), для создания длинного тире используйте специальный символ — ("—").
Рисунок 5.1 -Пример таблицы
Контрольные вопросы:
Лабораторная работа №5
Тема: Создание фреймов
Цель работы: Изучить принципы создания фреймов, тег FRAMESET, необходимый для его использования.
Фреймы - это окна независимого просмотра HTML-документов. Иногда бывает очень удобно использовать навигацию по странице в виде меню, оформленного в отдельном фрейме, и основного окна, где будет представлена вся основная информация, определяемая действиями пользователя в области меню.
Для создания фрейма используется тег FRAMESET, который заменяет тег BODY в документе и используется для разделения экрана на области. Внутри данного тега находятся теги FRAME, которые указывают на HTML-документ, предназначенный для загрузки в область.
Пример 1. Создание простого фрейма
<HTML>
<FRAMESET cols="30%, 70%" border=0>
<FRAME src="../files/232/files/232/menu.html" name="Menu"> <FRAME src="../files/232/files/232/main.html" name="Main">
</FRAMESET>
</HTML>
1. В приведенном примере присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Вертикальное расположение устанавливается параметром cols="...", а для горизонтальных полос используют параметр rows="...". Параметр border="..." определяет границу между фреймами. Оп ределение документа, изначально загружаемого при открытии этого файла (этот документ является HTML-страницей.), задается атрибутом тега <FRAME> src="...", при этом необходимо указать параметр name="...", позволяющий задать "имя" созданной области в виде последовательности ла тинских букв и цифр, использованной как значение этого атрибута. Это имя можно использовать, чтобы загружать новые документы в ранее созданную об ласть. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут target="." , значение которого совпадает с ранее определенным име нем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм. Например, предположим, что начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная панель, а справа -текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигацион ной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений. В данном документе находятся только ссылки на другие (существующие) HTML-документы, которые будут загруже ны броузером при открытии страницы с фреймами. Файл menu.html имеет сле дующую структуру:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Первый фрейм</H1>
</BODY>
</HTML>
Файл main.html также имеет указанную выше структуру. Следует сказать, что оба этих файла должны располагаться в том же каталоге, где расположен файл с фреймами.
Задание:
Расположить эти фреймы по вертикали, используя атрибут rows="...'\ В результате у вас должно получиться следующее:
Рисунок 6.1 – Пример окна с двумя фреймами
2. Распространенное явление – комбинация вертикальных и горизонтальных фреймов.
<FRAMESET cols="*, 55%"> символ * означает все оставшееся место <FRAME src="homepage.htm" name="Frame1">
<FRAMESET rows="15%, 15%, 70%">
<FRAME src="../files/232/files/232/menu.htm" name=" Frame2"> <FRAME src="../files/232/files/232/menu2.htm" name=" Frame3"> <FRAME src="../files/232/files/232/menu3.htm" name=" Frame4">
</FRAMESET>
</FRAMESET>
Используя вложенные теги FRAMESET, разбейте страницу следующим образом:
Рисунок 6.2 – Пример окна с четырмя фреймами
3. Используя атрибут target="...", сделать в фреймах гиперссылки, по нажатию на которые в эти же или в другие фреймы произойдет загрузка других страниц.
Контрольные вопросы:
Разработка Web-страниц в MS Word может быть выполнена двумя способами. Первый из них ориентирован на создание новой страницы, а второй – на сохранение ранее подготовленного текстового документа в формате Web-страницы.
Создание новой страницы осуществляется с помощью команды Файл/Создать, которая открывает окно Создание документа. На вкладке Web-страницы этого окна выбирается шаблон, соответствующий вашей задаче. Для создания Web-страниц Word располагает несколькими шаблонами. Наиболее часто используются шаблоны Личная страница, Типичные вопросы, Простая страница и Оглавление.
Для создания Web-страницы из текста, подготовленного в редакторе MS Word, необходимо выполнить команду Файл/Сохранить как …, а затем в стандартном диалоговом окне Сохранение документа задать тип файла (Веб-страница) и имя файла - см. рисунок 7.1.
Кнопка Изменить позволяет ввести заголовок Web-страницы, которая по умолчанию определяется как первая фраза самого документа. Однако, перед сохранением, если эта операция выполняется первый раз, необходимо указать параметры Web-документа. Используйте для задания параметров команду Сервис/Параметры/вкладка Общие/ Кнопка Параметры документа. Она открывает диалоговое окно Параметры Веб-документа – рисунок 7.2, которое содержит пять вкладок: Обозреватели, Файлы, Картинки, Кодировка и Шрифты.
|
Рисунок 7.1 – Окно Сохранение документа |
На вкладке Обозреватели определяется уровень средств, используемых для оформления документов. Способ хранения созданной Web-страницы, имена и структура папок для графических иллюстраций, мультимедийных объектов и других дополнительных файлов устанавливаются на вкладке Файл. Форматы графических файлов, а также выбор параметров, управляющих оптимизацией Web-страницей для вывода на конкретный монитор, устанавливаются на вкладке Картинки. На вкладке Кодировка определяется кодировка символов при сохранении Web-страницы. Выбор кодировки зависит от аудитории, для которой предназначена информация. Для англоязычной страницы можно использовать заподноевропейский набор символов, для страницы на русском языке – кириллицу или стандарт UNICODE(UFT-8).
При создании и редактировании сайта возможно применение стилевого форматирования и шаблонов, включение таблиц, графиков и рисунков, причем используемые приемы нечем не отличаются от аналогичных операций при оформлении текстовых документов.
|
Рисунок 7.2 – Диалоговые окна для настройки параметров Web-документа |
Создайте Web-сайт образовательного центра «Интернет маркетинг». Домашняя страница , сохраните его в файле index.html. При просмотре страницы в Internet Explorer страница должна иметь вид, представленный на Рисунке 7.3.
Рисунок 7.3 - Домашняя страница сайта Образовательного центра «Интернет-маркетинг»
Создайте еще несколько страниц, связанных с Домашней страницей гиперссылками, в которых разместите тематические планы по каждой из заявленных тем со следующим содержанием:
Маркетинг на предприятии:
Изучение конкурентов:
Изучение потребительской аудитории:
Как и в текстовом процессоре Word, сохранение рабочей книги, подготовленной в Excel, с помощью команды Файл/Сохранить как …. Эта команда открывает диалоговое окно Сохранение документа – рисунок 7.4, котором указывается имя и тип файла, а также место сохранения файла.
|
Рисунок 7.4 - Диалоговое окно Сохранение документа |
Для выполнения публикации в диалоговом окне Сохранение документа следует нажать кнопку Опубликовать и в появившемся диалоговом окне Публикация Веб-страницы выбрать публикуемые элементы, установить параметры просмотра (Работа с электронными таблицами или Работа со сводными таблицами) и вновь нажать кнопку Опубликовать. Если в окне Сохранение документа была установлена опция Добавить интерактивность, то при просмотре Web-страницы вы увидите данные, а также полосы прокрутки и инструменты, позволяющие выполнить редактирование опубликованных данных.
Web-страницу, созданную средствами Excel, можно просмотреть с помощью браузера, а также в Excel или Word. Для открытия страницы из Excel необходимо выполнить команду Файл/Открыть, указав тип файла и его имя.
Данные в WWW, опубликованные средствами MS Excel, могут быть скопированы на листы книги. Для этого следует открыть Web-страницу в окне браузера, с которой будут извлекаться данные, выполнить копирование содержимого ячеек в буфер промежуточного хранения, а затем, прейдя на рабочий лист, вставить эти данные из буфера. Перетаскивание данных из одного приложения в другое возможно лишь в том случае, когда окна обоих приложений размещены рядом.
На рисунке 7.5 показана Web-страница, созданная средствами MS Excel на основе подготовленных в табличном процессоре данных. В процессе создания использовалась опция Добавить интерактивность, что позволило работать с данными в сети Интернет.
Выполните разработку аналогичной страницы, используя исходные данные, представленные в Таблице 7.1, а затем включите ее в сайт «Образовательный центр Интернет-маркетинг». При включении опции Добавить интерактивность данные можно вводить в таблицу уже на Web-странице.
Рисунок 7.5 - Web-страница, подготовленная средствами Excel
Таблица 7.1- Анализ популярности программ курса
|
|
Январь |
Фвраль |
Март |
Апрель |
Май |
Июнь |
|
Маркетинг на предприятии |
||||||
|
Изучение конкурентов |
||||||
|
Изучение потребительской аудитории |
||||||
|
Изучение общественного мнения |
||||||
|
Анализ потребности клиентов |
||||||
|
Изделие 10 |
||||||
|
PR и реклама |
||||||
|
Оптимизация ассортимента |
||||||
|
Изделие 15 |
||||||
|
Итого: |
PowerPoint позволяет сохранить презентацию в виде набора Web-страниц. Для выполнения этой операции необходимо создать презентацию по наиболее актуальной для вас теме.
Для сохранения презентации как Web-страницы необходимо выполнить команду Файл/Сохранить как Веб-страницу, в открывшемся диалоговом окне Сохранение документа установить тип файла, имя и папку назначения, а затем щелкнуть кнопку Опубликовать. На экране откроется диалоговое окно Публикация веб-страницы – Рисунок 7.6, которое позволяет выполнить ряд установок. В группе Объект для публикации необходимо указать содержимое Web-страницы, выбрать браузер для просмотра презентации потенциальными посетителями вашего сайта в группе Поддержка обозревателя. В группе Опубликовать копию как… определяются дополнительные аспекты записи Web-страницы.
|
Рисунок 7.6 - Диалоговое окно Публикация Web-страницы |
Кнопка Веб-параметры открывает диалоговое окно, в котором устанавливаются параметры Web – страницы.
Параметры вкладки Общие позволяют включить в состав Web-страницы содержание презентации и кнопки для перехода от слада к слайду, установить цветовую схему, которую Power Point использует при смене слайдов, обеспечить просмотр анимации.
При просмотре публикации в окне браузера в нижней части экрана расположена кнопка Полноэкранная презентация, нажатием на которую обеспечивается просмотр презентации.
Выполните создание простой презентации, в которой отразите Основные вопросы автоматизации маркетинговой деятельности. Сохраните эту презентацию как Web-страницу и осуществите просмотр в окне Internet Explorer.
Контрольные вопросы:
Лабораторная работа № 7
Тема: Создание web-страницы
Цель: Освоить создание простой web-страницы с помощью программы FrontPage. Создание простой web-страницы с помощью FrontPage
1. Запустите программу FrontPage одним из стандартных способов. Изучите элементы окна FrontPage. Для получения подсказки о назначении инструментов на панели управления воспользуйтесь всплывающей подсказкой, как показано на рисунке 8.1.
Рисунок 8.1 - Окно FrontPage
2. Просмотрите и измените свойства создаваемой страницы, для чего выберите команду Файл > Свойства. В окне Свойства страницы перейдите на вкладку Язык, в поле Сохранить документ, используя: выберите кодировку Кириллица для отображения и сохранения документа, как показано на рисунке 8.2. Завершите изменение свойств страницы, щелкнув на кнопке ОК.
Рисунок 8.2 - Определение кодировки символов на web-странице
3. Создайте элемент текст, для чего, установив курсор в окне документа, введите нужный текст, допустим, Пример web-страницы, созданной в редакторе FrontPage. Выделив введенный текст, присвойте ему стиль Заголовок 3, выравнивание по центру.
4. Вставьте в создаваемый web-документ таблицу, в которой перечислите основные элементы web-страницы. Для вставки таблицы укажите место в окне документа, затем, щелкнув на кнопке Добавить таблицу на панели инструментов Стандартная, укажите мышью число строк – 2 и число столбцов – 3.
5. Вставьте в первый столбец таблицы текст из справки FrontPage о возможностях редактора, для чего вызовите справку, перейдите на вкладку Содержание и выберите тему Новые возможности. Выделив нужный текст, запомните его в буфере обмена (Ctrl+C), затем закройте окно справки и вставьте текст справки из буфера обмена в таблицу (Ctrl+V).
6. Вставьте во второй столбец рисунок, для чего, указав место вставки рисунка, выберите Вставка > Рисунок > Из файла. В открывшемся диалоговом окне Рисунок укажите нужную папку и файл изображения. Щелкнув на кнопке Открыть, завершите вставку рисунка. Выделив рисунок и используя маркеры изменения размера рамки, измените его размеры.
7. Для вставки таблицы в третий столбец существующей таблицы установите курсор в первую строку третьего столбца и выберите в меню Таблица команду Вставить таблицу. В диалоговом окне Добавить таблицу задайте количество строк, колонок, определите в области Раскладка параметры раскладки: выравнивание, размер рамки, заполнение ячеек, промежуток между столбцами. Щелкните на кнопке ОК. Введите в ячейки новой таблицы текст, например Текст в 1-й строке и 1-м столбце, затем установите размер и начертание символов текста.
8. Вставьте над первой строкой таблицы еще одну, для чего, выделив первую строку таблицы, выберите в меню Таблицы команду Вставить строки или столбцы. В диалоговом окне Вставить строки или столбцы укажите число строк 1, установите флажок Над выделенным и щелкните на кнопке ОК. Введите в ячейки вставленной строки текст заголовков Пример текста, Пример рисунка, Пример таблицы.
9. Вставьте над первой строкой таблицы еще одну строку, введите в нее текст Элементы web-страницы. Выделив все ячейки вставленной строки, выберите в меню Таблицы команду Объединить ячейки.
10. Создайте элемент гиперссылка, для чего, выделив фрагмент текста в первом столбце, в меню Вставка выберите команду Гиперссылка. В раскрывшемся диалоговом окне укажите адрес web-страницы в Интернете, например http://www.infoart.ru. Щелкните на кнопке ОК.
11. В нижней части создаваемой web-страницы введите текст Дата последнего обновления страницы: и вставьте после текста компонент Дата и время, позволяющий помещать метки времени. Для этого выберите в меню Вставка команду Дата и время. В диалоговом окне Дата и время установите флажок Дата последнего изменения страницы, выберите формат даты и щелкните на кнопке ОК.
12. Задайте свойства web-страницы, для чего выберите в меню Файл команду Свойства. Перейдите на вкладку Фон, выберите фон светло-серый и щелкните на кнопке ОК. Если вы хотите использовать в качестве фона рисунок, то на вкладке Фон установите флажок Фоновый рисунок и, щелкнув на кнопке Обзор, откройте диалоговое окно Выделите фоновое изображение. Щелкните на кнопке Обзор, найдите папку и файл рисунка и, щелкнув на кнопке Открыть, завершите выбор рисунка для фона. Щелкнув на кнопке ОК в диалоговом окне Свойства, завершите определение параметров web-страницы.
13. Сохраните созданный документ на диске, для чего выберите в меню Файл команду Сохранить как, в диалоговом окне задайте название страницы и, щелкнув на кнопке Как файл, укажите папку и имя файла. Щелкнув по кнопке Сохранить, завершите сохранение web-страницы как файла.
14. Для просмотра созданной web-страницы щелкните по кнопке Просмотр в Microsoft Internet Explorer. Закройте окно Microsoft Internet Explorer. Созданная web-страница будет иметь вид, показанный на рисунке 8.3.
Рисунок 8.3 - Web-страница, созданная в редакторе FrontPage
Обратите внимание, что вид указателя мыши изменяется при подведении его к гиперссылке, а в строке статуса web-обозревателя отображается адрес документа, связанный с данным фрагментом web-страницы.
15. Щелкнув по кнопке Код, просмотрите, как выглядит созданный web-документ на языке HTML.Найдите в тексте и изучите теги, описывающие таблицу на web-странице.
16. После просмотра web-страницы закройте окно Internet Explorer.
Создания веб-узла с использованием шаблона
1. Запустите Microsoft FrontPage, для чего в Главном меню Windows выберите команду Программы > Microsoft FrontPage.
2. Для создания структуры веб-узла выберите в панели инструментов Область задач команду Другие шаблоны веб-узла. В окне Шаблоны веб-узлов выберите шаблон, например Личный веб-узел, в поле Указать расположение нового веб-узла введите имя диска и папки, в которой будут размещены папки и файлы создаваемого веб-узла, например С:\home\mywebs. Щелкните на кнопке ОК. Окно приложения Microsoft FrontPage 2003 с заготовкой веб-узла (см. рисунок 8.4).
Рисунок 8.4 - Окно Microsoft FrontPage 20003 с заготовкой веб-узла
В результате в левой половине окна откроется список содержимого веб-узла Список папок, в котором автоматически создаются папки private и images и несколько страниц HTML с базовым содержанием по выбранному шаблону (см. рис. 14).Созданный узел сохраняется в новой папке, которая помещается на локальный диск или на сервер Web. Этот узел можно впоследствии открыть с помощью команды Файл > Открыть или выбрав его из списка последних открытых узлов Файл > Последние узлы.
3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру веб-узла. Для отображения структуры web-узла щелкните на значке Переходы. В правой части окна появилась структура веб-узла (см. рисунок 8.5). Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла и многое другое.
Рисунок 8.5 - Изменение структуры веб-узла
4. Удалите страницу feedback.htm из веб-узла, для чего укажите на структуре веб-узла данный элемент и, щелкнув на нем правой кнопкой мыши, раскройте контекстное меню и выберите команду Удалить (см. Рис. 8.5). В раскрывшемся окне удаления установите флажок Удалить эту страницу из сайта и щелкните на кнопке Ок.
5. Для изменения взаимного расположения и связей элементов структуры web-узла перетащите элемент в режиме Переходы на желаемое место, как показано на рисунке 8.6.
Рисунок 8.6 - Изменение взаимного расположения и связей
элементов структуры веб-узла
6. Наполните содержанием веб-страницы веб-узла с измененной структурой. Для редактирования веб-страницы можно дважды щелкнуть левой кнопкой мышки на ее имени на панели Список папок или ее изображении на панели Переходы. Чтобы увеличить обзор в окне редактирования, отмените отображение списка файлов, используя меню Вид команду Список папок.
7. Откройте для редактирования стартовую веб-страницу index.htm. Внимательно рассмотрите страницу index.htm. Она состоит из заголовка страницы, панели навигации в виде кнопки под заголовком, панели навигации в виде гиперссылок в левой части страницы (Увлечения, Избранное) и текста в правой части страницы Добро пожаловать на мой ...
8. Установите основные свойства страницы. Для этого в меню Файл выберите команду Свойства. В окне Свойства страницы перейдите на вкладку Общие. Введите в поле Название название документа на русском языке, например Персональная страница. Для правильного отображения символов русского языка на вкладке Язык в списке поля Отметить текущий документ выберите Русский, а в области Набор знаков в списке поля Сохранить документ выберите Кириллица, в списке поля Повторить загрузку текущего документа выберите Кириллица и щелкните на кнопке ОК.
9. Для изменения элементов веб-страницы укажите элемент шаблона и отредактируйте его по вашему усмотрению. Для редактирования Объявления на странице (графического заголовка), указав Объявление (баннер), вызовите контекстное меню и выберите в нем команду Свойства объявления на странице, как показано на рисунке 8.7.
Рисунок 8.7 - Изменение свойств Объявления на странице
В диалоговом окне Свойства объявления на странице установите флажок Рисунок, а в поле Текст объявления введите новый текст, например Моя персональная страница, и щелкните на кнопке ОК. Текст в объявления на странице изменился.
Отредактируйте текст в правой части страницы (Добро пожаловать на мой...), например, следующим образом: Данный сайт изготовлен в качестве примера редактирования веб-узла, созданного по шаблону персональной страницы.
Для изменения формата даты обновления страницы укажите объект даты и выберите в контекстном меню команду Свойства Дата и время. В окне Дата и время измените формат даты, как показано на рисунке 8.8, и щелкните на кнопке ОК. Для изменения свойств панели ссылок в виде гиперссылок в левой части веб-страницы (Увлечения, Избранное) выделите элементы на панели и выберите в контекстном меню команду Свойства Панель ссылок. В окне Свойства панели ссылок на вкладке Общие установите переключатель Дочерний уровень, на вкладке Стиль выберите подходящий стиль в списке Выберите стиль, в разделе Ориентация и внешний вид установите переключатель Вертикальный, установите флажок Использовать активные рисунки и щелкните на кнопке ОК. После этого тексты с гиперссылками в левой части веб-страницы будут отображаться в виде вертикально расположенных кнопок.
Рисунок 8.8 - Изменение свойств объекта Дата
10. Перейдите в режим Переходы и переименуйте веб-страницу Увлечения в Интересы. Для переименования веб-страницы, указав страницу, выберите в контекстном меню команду Переименовать и введите новое название страницы.
11. Для проверки действия гиперссылки на кнопке щелкните на ней мышью при нажатой клавише Ctrl. В окне редактора FrontPage раскроется веб-страница, на которую передает управление ссылка с данной кнопки.
12. Для просмотра вида веб-страницы в web-обозревателе щелкните на значке Просмотр. Щелкнув на значке Код, вы можете посмотреть, как записан текст данной веб-страницы на языке HTML. Обратите внимание, что текст этой страницы в формате HTML значительно лаконичнее, чем текст аналогичной страницы, сгенерированный в среде Microsoft Word.
13. Для оценки вида созданной вами веб-страницы в других веб-обозревателях выберите в меню Файл команду Просмотр в обозревателе. В выпадающем списке выберите обозреватель Microsoft Internet Explorer 6.0 (800 x 600).
14. В окне обозревателя проверьте действие гиперссылок, правильность отображения текста и графических элементов страницы. По окончании просмотра закройте окно обозревателя стандартным способом.
15. Завершив формирование веб-страницы, сохраните ее. Для сохранения веб-страницы выберите в меню Файл команду Сохранить или Сохранить как, если хотите изменить имя файла.
Контрольные вопросы:
Лабораторная работа №8
Тема: Использование Microsoft FrontPage для редактирования web-узла
Цель: Освоить редактирование web-страниц со вставкой рисунков, таблиц, гиперссылок.
Используя приведенный ниже алгоритм, создайте сайт на основе шаблона, опробуйте варианты вставки изображений, текста, оформления текста и т.д. в подготовленных с помощью шаблона страницах сайта.
При этом Front Page сформирует шаблоны нескольких страниц и установит связи между ними.
Если на экране отсутствуют окно Список папок, то обратитесь к меню Обзор и включите кнопку Список папок.
3. Щелкните мышью по кнопке веб-узел затем Переходы. На экране будет показана схема созданного сайта на основе шаблона (см. рисунок 9.1).
Рисунок 9.1- схема созданного веб –узла по шаблону
4. Отредактируйте названия страниц. Для этого щелкните правой кнопкой мыши по рисунку страницы, в сплывающем меню выберите команду Переименовать и введите новое название.
Например, как на рисунок 9.2:
Рисунок 9.2- схема нового веб-узла
5. При необходимости добавьте в схему навигации дополнительные страницы. Для этого в поле схемы навигации щелкните правой кнопкой мыши и вo всплывающем меню выберите команду Новая верхняя страница. В схеме навигации подцепите мышкой появившуюся страницу и передвиньте ее на нужный уровень так, чтобы появились связи (см. рисунок 9.3).
Отредактируйте название новых страниц, по аналогии с пунктом 4.
Рисунок 9.3- схема навигации
6. Перейдите на главную страницу (она помечена значком «домик»).
Для перехода из схемы навигации к любой странице достаточно выполнить двойной щелчок мышью по ее изображению на схеме.
7. Выберите схему отображения связей между страницами. Для этого щелкните правой кнопкой мыши по строке навигации и во всплывающем меню выберите команду Свойства Панель ссылок (см. рисунок 9.4)
Рисунок 9.4- окно главной страницы
В появившемся окне Свойства Панели ссылок выберите Дочерние страницы домашней (см. рисунок 9.5). Нажмите кнопку OK.
Рисунок 9.4- окно свойств панели управления
8. Выберите стиль оформления сайта - меню Формат, Тема. Выберите любую тему из предлагаемого списка и нажмите кнопку ОК.
9. Перейдите в режим просмотра сайта (кнопка Просмотр в нижней части окна Front Page). Переходя по ссылкам просмотрите структуру сайта.
10. Перейдите в режим редактирования страниц (кнопка Конструктор в нижней части окна Front Page). Отредактируйте каждую страницу. Уберите ненужный текст (Выделите ненужный текст и нажмите кнопку Delete на клавиатуре) и вставьте материал, найденный в интернете по данной теме, а также иллюстрации, используя команду меню Вставка, Рисунок, Из файла.
Контрольные вопросы:
Лабораторная работа № 9
Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах
Цель: Освоить регистрацию и размещение сайта на сервере.
Поиск сервера, позволяющего бесплатно разместить сайт, и регистрация на нем.
1. Для поиска серверов, позволяющих бесплатно разместить ваш сайт, запустите web-обозреватель, например Microsoft Internet Explorer, перейдите на web-сайт поисковой системы, например www.aport.ru, и задайте образ поиска Бесплатный хостинг. По результатам поиска вы увидите, что таких серверов сотни.
При выборе хостинга (то есть места размещения вашего сайта) надо учесть несколько важных параметров:
2. Загрузите сайт http://www.narod.ru/ и, щелкнув на ссылке Что здесь дают, познакомьтесь с бесплатными услугами на данном сервере. Чтобы воспользоваться этими услугами, необходимо зарегистрироваться, то есть заполнить анкету, поэтому после просмотра информации щелкните на кнопке Зарегистрироваться.
3. Заполните первый шаг регистрационной анкеты (см. рисунок 10.1)
Рисунок 10.1 - Заполнение регистрационной анкеты
4. На следующем шаге регистрации введите пароль и другие идентификационные данные и щелкните на кнопе ОК. После успешной регистрации в окне обозревателя выводится Паспорт регистрации.
5. Для входа на сервер в качестве зарегистрированного пользователя и выбора имени вашего сайта укажите на ссылку Начать пользоваться сервисами Яндекса.
6. Теперь для входа на сервер www.narod.ru в качестве зарегистрированного пользователя вы можете выбирать в окне Вход варианты: Мой сайт, Моя мастерская, Моя почта, Мои сообщества и т. п. Как показано на рисунке 10.2, в разделе Моя мастерская для пользователей предоставляется ряд дополнительных возможностей по управлению своим сайтом на данном web-сервере.
Рисунок 10.2 - Инструменты мастерской для зарегистрированных пользователей
Размещение сайта на сервере www.narod.ru
7. Вы можете создать сайт, используя возможности раздела Моя мастерская на сервере www.narod.ru, для чего в разделе Редактирование и управление щелкните на ссылке Управление файлами. Откроется окно правление файлами, показанное на рисунке 10.3.
Рисунок 10.3 - Управление файлами на сервере www.narod.ru
8. Кнопки-инструменты в окне Управление файлами предназначены для операций с файлами web-страницы: создания, редактирования, копирования, переименования и перемещения, удаления и т. п.
8. Для загрузки файлов вашего сайта перейдите в раздел Загрузить файлы. Щелкнув на кнопке Обзор, в окне Выбор файла выберите папку, файл и щелкните на кнопке Открыть. Имя выбранного для загрузки файла отобразится в поле слева от кнопки Обзор. Действуя аналогично, выберите имена загружаемых файлов (всего за один сеанс загрузки файл-менеджер позволяет загрузить до 10 файлов). После того как список загружаемых файлов сформирован, щелкните на кнопке Загрузить файлы. Начнет выполняться процедура загрузки, а по ее окончании будет выведено сообщение о том, что файлы загружены.
9. Теперь над файлами в вашем каталоге на сервере вы можете выполнять операции с использованием файл-менеджера. Для этого установите флажки слева от имени выбранных файлов, а затем щелкните на кнопке-команде, например Удалить. На экран будет выведено окно с сообщением, требующее подтверждения операции удаления. Щелкнув на кнопке Да, подтвердите удаление, после чего помеченные вами файлы будут удалены.
10. Проверьте работу вашего сайта, введя в строке Адрес web-обозревателя адрес вашего сайта, в нашем примере http://www.Internes2.narod.ru.
Регистрация сайта в поисковых системах.
11. Для поиска серверов, позволяющих бесплатно разместить информацию о вашем сайте на поисковых серверах, запустите web-обозреватель, например Microsoft Internet Explorer, перейдите на web-сайт поисковой системы, например www.rambler.ru, и задайте образ поиска Бесплатный хостинг. По результатам поиска вы увидите, что таких серверов сотни. Выберем из списка ссылок одну из страниц, например http://submit.max.ru/ — автоматическая регистрация сайтов в русских каталогах и поисковых системах.
12. После загрузки главной страницы http://submit.max.ru/, щелкнув на ссылке Регистрируетесь, перейдите к заполнению регистрационной формы. Щелкнув на ссылке Правила, познакомьтесь с правилами участия в системе. Если вы согласны с правилами, щелкните на ссылке Регистрация. Далее в окне регистрации заполните все поля и щелкните на кнопке Регистрация. Если появилось сообщение, что пользователь с таким именем для входа в систему уже зарегистрирован, попробуйте изменить имя, для чего, щелкнув на кнопке Назад на панели инструментов web-обозревателя, отредактируйте регистрационные данные и опять щелкните на кнопке Регистрация.
13. После успешной регистрации щелкните на ссылке Выбрать / (Добавить/Удалить), введите псевдоним сайта для данной системы, например Interns2, и щелкните на кнопке Добавить.
14. Для добавления или изменения информации о сайте заполните поля регистрационной формы информацией о вашем web-документе (фактически в этой форме дублируется информация, которая в вашем web-документе содержится в метатегах-описаниях).
Для отправки данных в систему автоматической регистрации щелкните на кнопке Запомнить.
15. После отправки этих данных в бесплатную регистрационную систему откроются еще несколько диалоговых окон, в которых вы должны сначала выбрать категории для вашего web-сайта в поисковых системах, затем выполнить регистрацию в выбранных поисковых системах. При необходимости для отдельных поисковых систем введите дополнительную информацию, например, выберите варианты предлагаемых счетчиков посещений и т. п. По окончании регистрации будет выведено окно о завершении регистрации.
Через некоторое время на адрес электронной почты, который вы указали при регистрации придет извещение из бесплатной регистрационной системы о результатах регистрации и просьбой добавить в вашу web-страницу ссылку на эту систему.
16. Через некоторое время можете проверить регистрацию, задав поиск вашего web-документа в различных поисковых системах. Если в них ваш web-документ зарегистрирован, он будет найден.
Контрольные вопросы: