Мой первый сайт

.

Для изменения межстрочного расстояния внутри абзаца следует выделить
абзац и выполнить команду Формат - Абзац. Затем в разделе Между строк надо
выбрать необходимый межстрочный интервал.
Абзацы на веб-странице всегда отделяются друг от друга некоторым
расстоянием. Если нужно это расстояние изменить, следует выделить текст
нескольких абзацев, выполнить команду Формат - Абзац. Затем в разделе
Интервал надо ввести новое значение расстояния до абзаца (Перед) и после
него (После). Чтобы абзацы не отделялись друг от друга по высоте, оба
значения должны равняться нулю.
Оформление списка перечислений производится командой Формат - Список,
после чего выбирается подходящий стилевой вариант оформления списка.

5. Фон страницы

Фоном страницы может быть равномерное окрашивание в определённый цвет
или конкретный рисунок. Рисунок следует создать предварительно и сохранить
его в ту же папку, где находится веб-страница. Размер рисунка должен быть
небольшим, максимум 150х150 пикселей. Тип рисунка - gif или jpg. Рисунок в
качестве фона будет автоматически размножен по вертикали и по горизонтали.
Для установки фона страницы вначале следует выполнить команду Формат -
Фон. Если фоном должен быть равномерный цвет, то в разделе Цвета - Фон
следует его выбрать из списка. Если фоном должен быть рисунок, то надо
поставить галочку у варианта Фоновый рисунок и указать файл с рисунком,
нажав на кнопку Обзор.
Код HTML, устанавливающий фон веб-страницы, имеет следующий вид:



или



Первый вариант кода устанавливает фон страницы в виде равномерного
окрашивания в определённый цвет (в данном случае - салатовый). Все цвета,
используемые на веб-страницах, записываются в шестнадцатеричном коде, перед
которым указывается знак #. Второй вариант кода делает фоном страницы
рисунок, находящийся в файле graphic1.gif.

6. Гиперссылки

Гиперссылки (в виде текста или рисунка) позволяют переходить на другие
страницы того же сайта или на страницы других сайтов. Страница по ссылке
может открываться в данном окне Explorer'а, в новом окне или во фрейме (об
этом варианте речь пойдёт ниже).
Текст гиперссылки выглядит следующим образом:

Информация о фирме ВЕГА

В этой записи:
. Информация о фирме ВЕГА - текст ссылки, при щелчке на котором откроется
другая страница.
. vega.htm - файл со страницей, которая откроется при щелчке на тексте
ссылки
. _blank - новая страница откроется в новом окне (при варианте _self в
том же окне)
Бывает что файл, на который надо сделать ссылку, расположен в другой
папке. Рассмотрим все возможные случаи. Допустим, что из файла index.htm
надо сделать ссылки на 3 разных файла в разных папках (см рисунок).
[pic]

Ссылки на странице index.htm будет такими:

Информация о фирме ВЕГА-1

Информация о фирме ВЕГА-2

Информация о фирме ВЕГА-3

Для создания гиперссылки в программе Front Page следует:
. выделить кусок текста (или рисунок),
. выполнить команду Вставка - Гиперссылка,
. в разделе Выбор рамки выбрать вариант открытия страницы (Та же рамка - в
том же окне, Новое окно - в новом), нажать кнопку Ок.
. найти файл со страницей, на которую производится переход, и нажать Ок.

7. Рисунки на веб-страницах

Как указывалось выше, рисунки используемые на веб-страницах должны быть
сохранены в форматах jpg (фотографии) и gif (фон и элементы страницы:
кнопки, заголовки-банеры и пр.). Сами рисунки должны находиться в отдельных
файлах; на самой странице есть лишь указание-ссылка на файл с рисунком (в
отличии от документа Word, где в один файл сохраняются и текст и рисунки).
Если рисунок выполняет роль графической гиперссылки, то его размеры не
должны превышать 100х100 пикселей.
Для вставки рисунка на страницу в программе Front Page следует:
. установить курсор в место вставки будущего рисунка
. выполнить команду Вставка - Рисунок - Из файла.
. найти файл с рисунком, выделить его и нажать Ок.
Код HTML рисунка, вставленного на веб-страницу, имеет следующий вид:



В этой записи значение опции src= указывает на файл, в котором
содержится данный рисунок. Опции width и height указывают реальные размеры
рисунка. Значение этих опций можно изменить, но качество рисунка при этом
ухудшится.

8. Таблицы - как вариант форматирования элементов страницы

Таблица с невидимыми границами служит мощным средством форматирования и
нестандартного расположения элементов на веб-странице. Такой способ
позволяет располагать тексты напротив рисунков, тексты в виде узких
столбцов и т.п.
Для создания таблицы в программе Front Page следует:
. установить курсор в место её будущего расположения
. выполнить команду Таблица - Вставить - Таблица.
. задать необходимые параметры и нажать Ок.
Параметры таблицы:
Задать ширину. Если мы выберем вариант В процентах и установим,
например, 50%, то при любых размерах окна браузера таблица по ширине будет
занимать ровно его половину (то есть ширина таблицы будет меняться при
изменении ширины окна браузера). Если мы выберем вариант В точках, и
установим, например 500, то при любых размерах окна ширина таблицы будет
составлять ровно 500 пикселей (то есть ширина таблицы будет неизменна при
изменении ширины окна браузера).
Строк, Столбцов - число строк и столбцов соответственно.
Выравнивание - выравнивание таблицы по краю окна браузера.
Границы: размер - размер (толщина) границы таблицы. Для невидимой
таблицы - 0.
Поле ячеек (Cell padding) - расстояние внутри каждой ячейки таблицы от
её границ до текста (см рисунок).
Интервал ячеек (Cell spacing) - расстояние от границы ячейки до границы
следующей ячейки или до внешней границы таблицы (см рисунок).
[pic]

При желании можно изменить цвет фона как всей таблицы, так и в её
отдельных ячейках. Для изменения цвета фона следует щёлкнуть правой кнопкой
мыши внутри ячейки таблицы и выполнить команду Свойства таблицы либо
Свойства ячейки. Затем в разделе Фон задать необходимый цвет. Фоном таблицы
и её отдельных ячеек может также служить рисунок в формате gif или jpg.
В ячейки таблицы можно вставить текст и рисунки. Выравнивание элементов
внутри ячеек таблицы производят стандартными инструментами выравнивания.

9. Фреймы

Фреймовая страница - это страница, состоящая из нескольких окон, в
которых отображаются разные веб-страницы.
Сама по себе фреймовая страница содержит только данные о том, какие веб-
страницы открываются в его окнах. Каждое окно во фрейме должно иметь
собственное имя и оно не должно совпадать с именем веб-страницы, которая
открывается в этом окне. Перед созданием самой фреймовой страницы следует
вначале создать все веб-страницы, входящие в её состав.
Построение фреймовой страницы рассмотрим на конкретном примере. Пусть
требуется создать фрейм в виде двух окон разделённых вертикально. Фреймовая
страница пусть называется main.htm. В левом окне фрейма должна изначально
открыться страница menu.htm. В правом окне фрейма должна изначально
открыться страница history.htm. Левое окно во фреймовой странице назовём
left, а правое right (см. рисунок).

[pic]

Для создания фрейма main.htm из примера в программе Front Page следует:
. Создать файлы menu.htm и history.htm
. Выполнить команду Файл - Создать - Другие шаблоны страниц, найти вкладку
Страницы рамок и выбрать нужный вариант схемы фрейм-страницы, в данном
случае Оглавление, нажать Ок
. Нажать в левом окне фрейма кнопку Задать начальную страницу и найти в
списке файлов нужную нам страницу, в данном случае menu.htm
. Нажать в правом окне фрейма кнопку Задать начальную страницу и найти в
списке файлов нужную нам страницу, в данном случае history.htm
. Сохранить фрейм-страницу командой Файл - Сохранить как, в данном случае
с именем main.htm
Если щёлкнуть на вкладке Код, то можно увидеть текст фрейм-страницы на
языке HTML:














Из этой записи видно, что программа Front Page назвала левое окно
фрейма словом contents, а правое main. Нам нужно было назвать эти окна
иначе. Заменим слово contents на left, а main на right соответственно и
сохраним фрейм-страницу ещё раз командой Файл - Сохранить.
Фреймовая структура удобна тем, что все ссылки можно расположить в
одном окне, а страницы, открываемые по этим ссылкам, будут реализовываться
в другом окне того же фрейма. Файл menu.htm, как видно из рисунка, содержит
ссылки. При щелчках на этих ссылках соответствующие им веб-страницы должны
открываться именно в окне right. Для этого в текст каждой ссылки на
странице menu.htm в раздел "target=" следует добавить указание о том, в
каком именно окне фрейма она должна реализоваться. Пример оформления
ссылки:

Информация о фирме ВЕГА-1

10. Свойства фреймовых страниц

Чтобы изменить ширину фреймовой страницы, следует отредактировать
следующий код:



Данный код означает, что граница между окнами во фрейме проходит на
расстоянии 150 пикселей от левой границы экрана, а всю остальную часть
занимает правое окно фрейма. Следует изменить число 150 на другое.
Во время просмотра фрейм-страницы пользователь, при желании, может
двигать мышью границу между окнами фрейма. Чтобы заблокировать эту
операцию, следует добавить в тег (в любой из двух) опцию noresize.
Пример:






Границу между окнами фрейма можно сделать невидимой. Для этого следует
добавить в тег опцию border="0". Пример:







UpDate 2006
-----------------------
[1] На примере версии программы Microsoft Frontpage 2003