Учебное пособие 1198
.pdfЦель работы: освоить последовательность действий при разработке webстраницы с помощью языка разметки гипертекста HTML.
Методика выполнения работы:
HTML не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги). <тэг></тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).
1.Выполнить запуск приложения Блокнот (Пуск - Программы -Стандартные
-Блокнот) и внести следующий текст:
<html> <head>
<Ше>Мой первый шаг </title> </head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
Сохранить документ, присвоив ему имя *.html (к примеру, index.html). Открыть браузер, допустим, InternetExplorer (не закрывая Блокнот), а в браузере открыть наш документ: Файл - Открыть - кнопка Обзор - Наш документ (index.html) и просмотреть результат. Нами была описана простейшая web-страница. Здесь
<head></head> - голова документа <body></body> - тело документа
Все тэги, расположенные между <head></head> - это служебная информация. К примеру, <title> - заголовок - это имя файла в браузере (заголовок окна). Все тэги, расположенные между <body></body> - непосредственное содержание документа. Обратите внимание:
<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
2.Рассмотрим возможность изменения цвета фона документа и шрифтов.
<html> <head>
^п^Мой первый шаг </title> </head>
<body text="#336699" bgcolor="#000000"> Здравствуйте, это моя первая страница.
<br>
<fontcolor="#CC0000"> Добро пожаловать!</font> :) </body>
</html>
3. Параграфы вводятся тэгом: <p></p> С помощью параграфов можно выровнять текст:
11
по |
левому |
краю |
<p align="left">текст</p> |
|
по правому краю документа <p align="right">текст</p> по обоим краям доку- |
||||
мента <p align="justify">текст</p> |
||||
<html> <head> |
|
|
||
<title>Мой |
первый |
шаг </title> |
||
</head> |
|
|
|
|
<bodytext="#336699" |
bgcolor="#000000"> |
|||
<p |
|
|
|
align="center"> |
Здравствуйте, |
это |
моя |
первая страница. |
|
<br> |
|
|
|
|
<fontcolor="#CC0000"> Добро пожаловать! </font> :) </p> </body>
</html>
4. Заголовки. Существуют шесть уровней заголовков: <H1>, <H2>...<H6>, где hi - самый важный, h6 - наименее важный заголовок. Вводя заголовки в текст, вы позволяете пользователю легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
</title>
bgcolor="#000000"> align="center"> страница.</Н3>
<html> <head>
^ги^Мой первый шаг
</head>
<bodytext="#336699"
<р <Н3>Здравствуйте,это моя первая
<br>
<fontcolor="#CC0000"> Добро пожаловать! </font> </p> </body> </html>
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого не применяются - используют атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:
<fontsize="+4"> текст </font> <fontsize="+3"> текст </font> <fontsize="+2"> текст </font> <fontsize="+1"> текст </font> <fontsize="+0"> текст </font> <fontsize="- 1"> текст </font> <fontsize="-2"> текст </font>
|
5. |
Определение |
стилей |
шрифта. |
|
Стили |
шрифта |
веб-страницы |
описываются |
следующим |
образом: |
<b> Полужирный текст </b> |
|
|
|
||
|
<i> Наклонный текст (курсив) </i> |
|
|
|
|
12
<tt>моноширинный |
шрифт </tt> |
<u> Подчеркнутый текст </u> |
|
<strike> Перечеркнутый |
</strike> <s> Перечеркнутый </s> <small> Малый |
</small> <big> Большой </big>Верхний индекс Нижний индекс <sub> sub </sub> |
||
<sup> sup </sup> |
|
|
<html> <head> |
|
|
<title>Mofi первый |
шаг </title> |
|
</head> |
|
|
<bodytext="#336699" |
|
bgcolor=M#000000M> |
<р |
|
align="center"> |
<H3>Здравствуйте,это моя |
первая |
страница. </H3> |
<br>
<fontcolor="#CC0000"> Добро пожаловать!</font> <Ь>Полужирный текст</b>
</p>
</body>
</html>
К одному фрагменту текста может применяться сразу несколько тэгов:
<tt><b><i> текст </i></b></tt>
6.Добавление изображений:
<imgsrc="my.jpg">
Создайте произвольный рисунок в редакторе Faint, сохраните изображение как my.jpg в той же папке.
шаг </title> bgcolor="#000000">
первая страница. </H3>
пожаловать! </font> align="justify">
<html> <head>
<title>MM первый </head> <bodytext="#336699"
<H3>Здравствуйте,это моя
<br>
<fontcolor="#CC0000"> Добро <p
<imgsrc="my.jpg"> </p> </body> </html>
С помощью атрибута align можно выровнять рисунок относительно текста:
<imgsrc="my.jpg" align="left">
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева), надо про-
писать right: <imgsrc="my.jpg " align="right">
(1) - <imgsrc="my.jpg " align="bottom">
(2) - <imgsrc=" my.jpg " align="middle">
13
(3) |
- <imgsrc=" |
my.jpg |
" align="top"> |
|
|
||
Кромеатрибута align для тэга <img> можно ввести |
еще |
несколько |
|||||
атрибутов: |
|
|
|
|
|
|
|
(1) |
|
- |
<imgsrc="my.jpg" |
vspace="10"> |
|
|
|
(2) |
|
- |
<imgsrc="my.jpg" |
hspace="30"> |
|
|
|
(3) |
- |
<imgsrc="my.jpg" |
|
alt-'моя фотография"> |
|
||
(4) |
|
-<imgsrc="my.jpg" |
width="100"> |
|
|
||
(5) |
|
-<imgsrc="my.jpg" |
height="200"> |
|
|
||
Текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):
(6)- <imgsrc="my.jpg" border="5"> По пунктам:
(1)- атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка.
Например, разрешение экрана 800x600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.
(2) |
- атрибут hspace - тоже задает расстояние между текстом и рисунком, но |
по |
горизонтали. Расстояние задается в пикселях. В нашем примере оно равно |
30 |
пикселям (точкам). |
(3)- атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.
(4)атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать
специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
(5) - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой.
(6) - атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут borderравным нулю.
7. Пусть prf.html - документ с вашими фотографиями. Фразу "посмотреть мои
фотографии" |
сделаем |
ссылкой |
на prf.html: |
|
<a |
href="prf.html">посмотреть |
мои фотографии<^> |
||
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути:
(1) |
- |
<a |
href="prf.html">мои фотографии<^> |
14
(2) |
- |
<a |
href="photos/prf.html">мои фотографии<^> |
(3)- <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ. Первые два примера (1) и (2) - называют относительными путями. (3) - абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.
Ссылка на почтовый ящик прописывается немного иначе: <a href="mailto:pochta@mail.ru"> pochta@mail.ru </a>
<html> <head>
^ш^Мойпервыйшаг^Ш^ </head>
<body text="#336699" bgcolor="#000000">
<Ю>Здравствуйте, этомояперваястраница.<ЛТ3> <br> <font color="#CC0000"> Добропожаловать!</гой>
<p align="justify"> <imgsrc="my.jpg"> <a href="prf.html"> <a href="mailto:pochta@mail.ru"> pochta@mail.ru </a> </p> </body>
</html>
8.Таблица задается тэгом:<table></table> Таблица включает строки и столбцы (ячейки): <tr></tr> - строка таблицы
<td></td> - столбец (ячейка) таблицы Записать после тега <body> пример таблицы:
<table> <tr>
<td |
height="35" width="50" |
bgcolor="#FFCC33" valign="top"><center>1x1</center></td> |
|
<td |
width="50" bgcolor="#336699"><center>1x2</center></td> |
<td width="50" |
|
bgcolor="#FFCC33" valign="bottom"><center>1x3</center></td> |
|
</tr> |
|
<tr> |
|
<td |
height="35" width="50" |
bgcolor="#336699" valign="bottom"><center>2x1</center></td> |
|
<td |
width="50" bgcolor="#FFCC33"><center>2x2</center></td> |
<td |
width="50" bgcolor="#336699" valign="top"><center>2x3</center></td> |
</tr>
</table>
15
9. Списки определяют структуру документа и визуально отображаются следующим образом:
маркированный
•Текст
•Текст
•Текст
•Текст нумерованный
1.Текст
2.Текст
3.Текст
4.Текст Чтобы ввести элементы списка (текст, текст ...), нам нужно ввести в нашу кон-
струкцию тэг <li> (не требует закрывающего тэга):
<ul>
<И>Текст <И>Текст <И>Текст <И>Текст
</ul>
У тэга имеется атрибут type, отвечающий за стиль элемента списка. Пример показывает для каждого из элементов списка свой тип маркера.
<li type="disk">
<li type="circle"> <li type="square">
Для нумерованных списков: <ol type="I"> <li>Текст <Н>Текст <li>Текст </ol>
Здесь атрибут type может принимать значения: 1 арабские цифры
a буквы нижнего регистра A буквы верхнего регистра
i римские цифры в нижнем регистре I римские цифры в верхнем регистре
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №6
Тема: Разработка Web-сайта с помощью программного средства Microsoft FrontPage
Время проведения: 2 часа
Программное обеспечение: OS Windows, Internet, Microsoft FrontPage.
Цель работы: освоение программных средств создания Web-сайта.
16
Методика выполнения работы:
Сегодня, путешествуя по Internet, можно найти много очень хорошо выполненных сайтов, которые быстро загружаются, привлекательны на вид, имеют четко разграниченную по разделам информацию и удобные функции навигации. Такие сайты просто приглашают вас посетить их, задержаться на некоторое время, развлечься и узнать что-то новое.
Многие Web-мастера не тратят время на то, чтобы продумать информационный поток, а ограничиваются только размещением текста и изображений на странице. Самые лучшие Web-сайты - это те, которые привлекательно выглядят, емко выражают основную идею и не заставляют пользователей ждать получения информации на их экранах слишком долго. Вот несколько советов по созданию успешного сайта:
1.Четко сформулируйте назначение вашего сайта. Каковы ваши цели. 2.Обязательно думайте о своей аудитории. Кто будет основной (и вторичной)
аудиторией вашего сайта? Какого они возраста? Чем они занимаются? Сколько времени они проводят на вашем сайте?
3.Используйте быстро загружаемые элементы.
4.Сделайте ваш сайт визуально привлекательным.
5.Не пытайтесь разместить все на одной странице. Будьте внимательны, не перегружайте свои страницы слишком большим количеством информации.
6.Предусмотрите на сайте кнопки навигации, то есть постарайтесь максимально упростить перемещение по вашему сайту.
7.Тщательно протестируйте свой сайт в разных браузерах (обозревателях Webстраниц).
Запуск Microsoft FrontPage
1.Для запуска программы нажмите кнопку "Пуск" и выберите команду Программы. 2.Выберите программу Microsoft FrontPage. 3.Появится окно приблизительно
следующего вида Рис. 1. Окно программы MicrosoftFrontPage
4. Для выхода из программы войдите в группу Файл меню команд и выберите команду Выход или нажмите кнопку х в правом верхнем углу окна программы.
Основные теоретические сведения о программе MicrosoftFrontPage
1.Окно программы MicrosoftFrontPage (Рис. 1).
В верхней части окна располагаются название документа, строка меню и две панели инструментов: Стандартная и Форматирование. В нижней части окна располагается строка состояния, содержащая справочную информацию.
Основная часть окна может состоять из трех частей: панели Вид (переключение режима), панели Список файлов и Рабочей области, вид которой зависит от выбранного пункта в панели Вид. При отсутствии панелей Вид и Список файлов, Рабочая область занимает всю основную часть окна.
2.Любой документ HTML имеет название. По названию документа HTML другие обозреватели могут найти информацию. Место для названия всегда определено - оно находится вверху окна программы и отдельно от содержимого документа. Максимальная длина названия - 40 символов.
3.Все наборы команд и опций, использующиеся в процессе работы с програм-
мой, содержатся в строке меню: Файл, Правка, Вид, Вставка, Формат, Сервис,
Таблица, Рамки, Окно, Справка. Пункты меню организованы в функционально однородные группы и распределены по панелям падающих меню в удобном для работы
17
порядке. Идея работы с меню программы MicrosoftFrontPage во многом аналогична работе с меню других программ пакета MicrosoftOffice. Группа Файл.
•Создать (новый) - вызывает меню: Страница или веб-узел.
Меню Шаблоны Страниц. Вызывает окно Новое с тремя вкладками: Общие, Страница Рамок и Таблицы стилей, в которых выбирается шаблон или мастер создания страницы, рамки или стиля.
Вкладка Общие содержит огромное разнообразие шаблонов страниц, начиная с шаблона обычной страницы, который представляет собой каркас чистого листа, до довольно сложной трехстолбцовой страницы. Вид выбранного шаблона можно предварительно просмотреть в правом углу диалогового окна Образец.
Вкладка Страница Рамок содержит шаблоны рамок, которые также можно предварительно просмотреть. Рамки позволяют разбивать страницы на прямоугольные области, в каждой из которых отображается своя собственная страница.
Вкладка Таблицы стилей содержит шаблоны стилей. Тема представляет собой наборы профессионально подготовленных выдержанных в одном стиле элементов оформления страниц (фон, графические изображения). Темы можно применять как ко всему сайту, так и к отдельным страницам. Если тема применена ко всему сайту, то все страницы этого сайта будут выглядеть одинаково.
Меню Веб-узлы. Вызывает окно Новое и во вкладке Web-сайты выбирается шаблон сайта или мастер создания сайта, а также место, куда он будет помещен (сервер или жесткий диск). Шаблоны и мастера: Одностраничный веб-узел. Сайт состоит из одной чистой страницы, которая открывается в редакторе;
Веб-узел проекта. Сайты этого рода помогают в управлении проектами. В них входят обычно список участников, состояние проекта, расписание его и прочая подобная информация.
- Веб-узел технической поддержки. Этот шаблон строит каркас сайта онлайновой службы поддержки ваших клиентов;
Мастер создания рабочей группы. Этот мастер предназначен для построения делового сайта. Он задает ряд вопросов и генерирует в соответствии с ответами изрядное количество разнообразных страниц, необходимых для всестороннего освещения вашего бизнеса;
Мастер веб-обсуждения. Этот мастер служит для создания полноценного сайта дискуссионного форума - с поддержкой потоков, с оглавлением и полнотекстовым поиском; Пустой веб-узел. Это просто шаблон пустого сайта. Как правило, одно-
страничный сайт более полезен, нежели пустой; Мастер веб-импорта. Этот мастер служит для создания сайта из готовых файлов и размещения его на сервере или диске; Личный веб-узел. Этот шаблон создает персональный Web-сайт, который вы можете заполнить разнообразной информацией о себе, поместив на нем, например, свои профессиональные данные, биографическую информацию, рассказ о своих ин-
тересах и тому подобное;
Открыть - вызывает диалоговое окно, позволяющее открыть страницы Web.
•Закрыть — закрывает текущий документ
•Открыть сайт - вызывает диалоговое окно, позволяющее от крыть Web-сайт.
•Сохранить - сохраняет активный документ под текущим именем.
•Сохранить как - сохраняет документ под новым именем.
•Просмотр в обозревателе - позволяет просмотреть создаваемый документ Web в
18
выбранном браузере (обозревателе) например, в MicrosoftInternetExplorer.
Также здесь присутствуют ссылки, позволяющие открыть наиболее часто используемые документы, предварительно просмотреть документ, отправить на печать.
Группа Правка. Позволяет проводить отмену последних действий, вырезает, копирует, вставляет, удаляет выделенные фрагменты, проводит поиск нужного фрагмента.
Группа Вид. Позволяет просматривать и работать с Web документом в различных режимах. Большинство пунктов этой группы выведено в панель Вид основной части окна программы (Рис.1).
•Страница - просмотр и редактирование выбранной страницы. В этом режиме внизу Рабочей области присутствую три вкладки: Обычный (режим редактирования в обычном виде), HTML(режим редактирования в кодах HTML) и Просмотр (режим просмотра документа).
•Папки - управление файлами и папками.
•Отчеты - анализ сайта и управление его содержимым.
•Переходы — дизайн структуры навигации по сайту.
•Гиперссылки - просмотр гиперссылок на и с любой страницы!.
•Задачи - создание и управление заданиями.
•Панель представлений - включает и отключает панель Вид.
•Список папок - включает и отключает панель Список файлов, расположенную в основной части окна программы (Рис.1).
Группа Вставка. Пункты данного меню позволяют вставить одноименные объекты в документ (прерыватель, горизонтальную строку, компоненты, формы, рисунки и т.д.).
Группа Формат. Позволяет настроить параметры шрифта, абзаца, списка, фона, выбрать тему, стиль или удалить оформление.
Группа Сервис. Позволят проверить орфографию, настроить саму программу. Группа Таблица. Это меню позволяет строить таблицы различной конфигурации и изменять свойства, как всей таблицы, так и отдельно строк, столбцов и ячеек.
Группа Рамки. Позволяет работать с рамками.
Группа Окно. Незаменимо при работе с несколькими документами. Оно позволяет располагать окна, содержащие документы в нужном вам порядке и переходить между ними.
Группа Справка. Позволяет обратиться к справочной системе, расположенной на вашем компьютере или в сети.
4.Панель инструментов Стандартная. Данная панель инструментов предоставляет доступ к пунктам меню Файл: создать, открыть, сохранить, печать, предварительный просмотр, проверка орфографии; меню Правка: вырезать, копировать, вставить, отменить, повторить; меню Вставка: веб-компоненты: таблица, изображение, файл; меню Вид: назад, вперед, обновить, стоп. А также позволяет создать или изменить гиперссылку и обратиться к справочной службе.
5.Панель инструментов Форматирование.
Она содержит:
•раскрывающийся список Изменение стиля, позволяющий выбрать стиль оформления абзаца (соответствующий стандартным функциональным элементам HTML);
•раскрывающийся список Изменение шрифта, позволяющий выбрать гарнитуру
19
шрифта (наличие такого же шрифта в ходе просмотра документа через Интернет не гарантируется);
•кнопки выбора начертания;
•кнопки выбора выравнивания текста;
•кнопки создания маркированных (неупорядоченных) и нумерованных (упорядоченных) списков;
•кнопки задания отступа текста (на основе некорректного использования элемен-
тов HTML);
•кнопки задания подсветки и цвета шрифта.
Предоставляет возможность быстро изменить параметры текста: задать нужный стиль, изменить тип шрифта, увеличить или уменьшить размер, изменить вид написания, цвет, выровнять текст, создать номерованные или маркированные списки, увеличить или уменьшить отступ абзаца. Дополнительные элементы форматирования, не вынесенные на панель инструмента, задаются в отдельных диалоговых окнах. Их можно открыть, например, с помощью команд Формат > Шрифт.
6.Строка состояния.
Вправой части этой строки предоставлена следующая информация: О секунд через 28.8. Это означает, что создаваемая страница будет загружаться 0 секунд при скорости обмена 28.8 Кбит/сек.
7.Для удобства работы с блоками текста в редакторе предусмотрено Всплывающее меню позволяющее более удобно обратиться к той или иной команде. Просто поместите курсор на интересующий элемент вашего документа и нажмите правую кнопку мыши.
Более подробно основные из перечисленных пунктов меню будут рассмотрены
ниже.
Для создания страницы выполните следующие действия:
1.Запустите программу FrontPagef77ус^ > Программы >MicrosoftFrontPage). 2.Выберите команду Создать в меню Файл, команду Страница в появившемся
подменю. В диалоговом окне Шаблоны страниц во вкладке Общие выберите из списка шаблон Обычная страница.
3.Введите в Рабочей области произвольный текст документа. С помощью панели инструментов форматирования отформатируйте текст по собственному усмотрению (поменяйте шрифт, его размер, цвет, начертание, расположение).
4.Просмотрите созданный документ во встроенном браузере. Для этого нажмите вкладку Просмотр внизу Рабочей области.
6.Вернитесь обратно в редактор, нажав вкладку Обычный.
7.Для создания таблицы щелкните на кнопке Вставить таблицу на стандартной панели инструментов и выберите 2 строки и 2 столбца. В трех любых ячейках таблицы наберите любой текст.
8.В оставшуюся ячейку (курсор мигает в этой ячейке) добавьте иллюстрацию. Для этого, используя кнопку Вставить из файла на стандартной панели инструментов, войдите в диалоговое окно Рисунок и, нажав кнопку КлипАрт, из открывшегося списка рисунков выберите понравившийся.
9. Измените размер рисунка. Правой кнопкой мыши щелкните по рисунку, появится меню, выберите команду Свойства рисунка. В появившемся одноименном диалоговом окне наберите текст (например, название рисунка). Нажмите кнопку Ок.
20