Методические указания и контрольные задания для студентов заочной формы обучения по специальностям: 151001 "Технология машиностроения" (стр. 19 из 20)

Пример:

<UL>
<LI> Первый пункт списка </LI>
<LI> Второй пункт списка </LI>
<LI> Третий пункт списка </LI>
</UL>

OL - Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Атрибуты:

START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа)

TYPE – определяет стиль нумерации пунктов. Может иметь значения:

"A" – заглавные буквы A, B, C ...
"a" – строчные буквы a, b, c ...
"I" – большие римские числа I, II, III ...
"i" – маленькие римские числа i, ii, iii ...
"1" – арабские числа 1, 2, 3 ...

По умолчанию <UL TYPE="1">.

2.1.4 Вставка графического объекта

IMG - Используется для вставки изображений в HTML-документ.
Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные).

Элемент IMG не имеет конечного тега.

Атрибуты:

SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

BORDER – определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

Пример 1:

<IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.

Пример 2. Использование изображения в качестве гиперссылки:

<A HREF="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справа.

2.1.5 Таблицы

Таблицы в HTML формируются построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.

Важно:

В HTML таблицы используются не только для отображения таблиц как таковых, но и для дизайна. С помощью таблиц можно создать невидимый "каркас" страницы, помогающий расположить текст и изображения так, как вам нравится.

Пример:

A1	B1	C1
A2	B2	C2

Результат:

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

Атрибуты:

ALIGN, VALIGN – должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle.

BORDER – определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.

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

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

BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

2.2 Microsoft FrontPage – редактор web-сайтов

2.2.1 Начало создания веб-узла

Для создания нового сайта используем пункт меню «Файл\Создать\Страница или веб-узел». При этом появляется окно для выбора типа сайта, показанное на рисунке 1 - Шаблоны Web-узлов. Кроме того, необходимо указать папку, в которой будет размещен новый сайт. Лучше указать новую, еще не существующую папку. После нажатия кнопки «ОК» редактор создаст указанную папку, в ней разместит собственную служебную информацию и одну web-страницу с именем index.

Рисунок 1 – Шаблоны Web-узлов

2.2.2 Создание фона страницы

Для этого:

а) В меню Формат щелкаем Фон. Откроется окно Свойства страницы.

б) На вкладке Фон в разделе Форматирование нажимаем кнопку Обзор и выбираем рисунок из файла images в нашем веб-узле

2.2.3 Создание и форматирование таблиц

а) Устанавливаем курсор в начале страницы.

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

в) В поле Число строк вводим число нужных строк.

г) В поле Число столбцов вводим число нужных столбцов.

д) В поле Выравнивание задаем положение таблицы на странице.

е) В поле Толщина границы вводим ширину (в точках) границы таблицы. Если граница не нужна, вводим значение 0.

2.2.4 Создание гиперссылок:

а) выделяем объект, который будет служить гиперссылкой;

б) нажимаем кнопку Добавление гиперссылки

;

в) выбираем в этом окне Добавление гиперссылки имя нужного файла и щелкаем ОК.

2.3 Размещение сайта на бесплатном хостинге.

Рассмотрим порядок размещения созданного сайта на примере бесплатного хостинга Narod.ru:

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

- После регистрации адрес вашего сайта будет, допустим, vasya.narod.ru – это домен третьего уровня.

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

После того, как Вы зарегистрировали хостинг, Вам на почту обязательно должно было прийти письмо, в котором указаны пароль, логин, и IP сервера(FTP доступ). Вместо IP может быть и адрес, например, sigma.biz.ua .

- Закачиваем файлы на хостинг.

Это можно сделать двумя способами:

1 Используя встроенный интерфейс панели управления хостинга(обычно там имеется так называемый Файловый Менеджер), однако это очень неудобно и не продуктивно.

2 Закачать файлы по ftp-протоколу.

Для этого нам понадобится соответствующая программа(ftp-клиент). Например, Total Commander.

Дальше открываем Total Commander , выбираем кнопочку соединиться с FTP-сервером и выбираем Добавить, как показано на рисунке 2 – Добавление нового ftp - соединения.

Рисунок 2 - Добавление нового ftp соединения

Появиться окошко "Настройка FTP-соединения" – рисунок 3 , в которое необходимо вставить данные, для FTP-доступа.

Имя соединения - придумайте сами, это чисто для Вас и на доступ не влияет.

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

Теперь можно заливать файлы. С одной стороны, выделите файлы которые хотите закачать, а с другой, откройте папку, в которую хотите эти файлы поместить. Ну а потом нажимайте клавишу F5(Копирование).

Рисунок 3 - Настройка FTP-соединения

3 ПРАКТИЧЕСКАЯ ЧАСТЬ

3.1 Создайте электронный журнал средствами MS PowerPoin.

Условия выполнения работы:

- презентация должна содержать не менее семи страниц электронного журнала (в том числе и обложка), связанных между собой гиперссылками;

- содержание журнала должно соответствовать определенной тематике (выбор темы осуществляется студентом самостоятельно, например: ремонт автомобилей, компьютерный сервис и др.)

- текст и графика на страницах журнала присутствуют в равных долях.

3.2 Создайте страницы сайта с помощью языка гипертекстовой разметки HTML.

Порядок выполнения работы:

1 Создайте папку Электронный журнал в рабочей папке с вашей фамилией.

2 Откройте программу Блокнот: Пуск→Программы→Стандартные…

3 Впишите в Блокнот код Web – страницы по следующей схеме:

а) опишите код базовой конструкции и названия первой страницы (обложки);

б) выберите цветовое оформление фона, текста и пр.;

в) задайте на странице таблицу, если это необходимо;

г) внесите содержимое в ячейки таблицы;

д) оформите ссылки;

е) сохраните документ под названием index.txt;

ж) откройте документ в браузере и просмотрите результат (можно просто открыть с помощью…, а можно поменять расширение документа на html);

з) если необходимо внести изменения снова поменяйте расширение и так пока документ не будет полностью отредактирован;

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