Практические работы в редакторе frontpage. Практическая работа на Frontpage. Создание новой Web-страницы

06.04.2024

Функции таблиц при создании Web-страниц разнообразны. Приведем некоторые из них:

  • Выравнивание информации за счет расположения ее в ячейках таблицы. С помощью таблиц текст можно представлять в виде колонок
  • Выравнивание названий и полей формы
  • Расположение на Web-странице текста и графических изображений по разным колонкам
  • Использование вложенных таблиц
  • Задание различного фона для отдельных частей страницы

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

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

Таблица может быть вставлена в произвольное место Web-страницы. Для создания таблиц вы можете использовать следующие средства:

  • Команду Вставить (Insert) меню Таблица (Table)
  • Кнопку Добавить таблицу (Insert Table) стандартной панели инструментов

Альтернативным способом создания таблиц является использование команды Нарисовать таблицу (Draw Table) меню Таблица , а также кнопка Нарисовать таблицу панели инструментов Таблицы . Это средство позволяет создать таблицу более сложной конфигурации (например, с ячейками разных размеров). При этом вы просто рисуете требуемую таблицу с помощью мыши, как рисовали бы ее карандашом на бумаге.

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

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

Создание таблицы с использованием кнопки "Добавить таблицу"

Наиболее простой способ создания таблицы с регулярной структурой предполагает использование кнопки Добавить таблицу (Insert Table). В этом случае ширина столбцов устанавливается автоматически на основании ширины документа и количества столбцов. В случае необходимости в дальнейшем вы сможете изменить ширину каждого из столбцов. Для создания таблицы выполните следующие действия:

1. Установите курсор в то место Web-страницы, где хотите расположить таблицу.

2. Нажмите кнопку Добавить таблицу (Insert Table) На экране появится миниатюрное изображение таблицы.

3. Установите курсор на любую из ячеек в изображении таблицы и удерживайте кнопку мыши. В нижней части изображения будет отображаться текущее число строк и.столбцов (например: таблица 3x4). Переместите указатель мыши в ячейку, которая будет соответствовать нужному размеру таблицы. Если вы будете перемешать указатель за правую или нижнюю границы, размер сетки увеличится соответствующим образом.

4. В заключение отпустите кнопку мыши. В указанном месте страницы появится таблица требуемого размера.

Если вы нажали кнопку Добавить таблицу и указали ячейку в изображении таблицы, а после этого изменили свое мнение и решили не создавать таблицу, переместите указатель мыши за пределы таблицы так, чтобы в нижней части изображения появилось сообщение отмена. Теперь вы можете отпустить кнопку. Операция по созданию таблицы будет отменена.

Создание таблицы с помощью команды "Нарисовать таблицу"

Наиболее широкие возможности по созданию таблиц предоставляют команда Нарисовать таблицу (Draw Table) меню Таблица и кнопка Нарисовать таблицу панели инструментов Таблицы . В отличие от предыдущих способов, предназначенных для формирования таблиц простейшей структуры, с помощью команды Нарисовать таблицу вы можете легко создать таблицу со сложной структурой. Для этого выполните следующие действия:

1. Подготовьте место для создания таблицы.

2. В меню Таблица выберите команду Нарисовать таблицу или нажмите кнопку Нарисовать таблицу на панели инструментов Таблицы .

3. Задайте внешние границы таблицы. Для этого установите указатель в любой из углов таблицы и нажмите кнопку мыши. Не отпуская ее, переместите указатель в противоположный угол таблицы, после чего отпустите кнопку мыши. При задании границ не старайтесь сразу установить точные границы. В дальнейшем вы сможете изменить размеры как таблицы в целом, так и отдельных ячеек.

4. Действуя аналогичным образом, проведите линии границ столбцов и строк.

Совет Если в процессе работы над таблицей вам понадобится удалить линию (строки или столбца), выберите на панели Таблица инструмент Ластик (Erase). Затем установите указатель мыши в начало линии, нажмите кнопку мыши и проведите указателем до конца линии, после чего отпустите кнопку мыши.

. Метка может включать следующие аттрибуты:

· WIDTH="n" - определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;

· ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);

· BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;

· BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;

· CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселах;

· CELLPADDING="n" - определяет расстояние в пикселах между рамкой ячейки и текстом;

· BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.

· BACKGROUND="picture.gif" - заполняет фон таблицы изображением;

· FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:

§ VOID - рамки нет (значение по умолчанию);

§ ABOVE - рисуется только граница сверху;

§ BELOW - только граница снизу;

§ HSIDES - границы сверху и снизу;

§ VSIDES - только границы слева и справа;

§ LHS - только левая граница;

§ RHS - только правая граница;

§ BOX - рисуются все четыре стороны;

§ BORDER - также все четыре стороны.

· RULES="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:

§ NONE - нет линий (значение по умолчанию);

§ GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже;

§ ROWS - только между рядами;

§ COLS - только между колонками;

§ ALL - между всеми рядами и колонками.

Таблица может иметь заголовок - метки

. Располагаться он должен непосредственно после метки . Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:</p> <br><br><p>Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты:</p> <p>· <b>ALIGN=LEFT </b> - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);</p> <p>· <b>VALIGN=CENTER </b> - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);</p> <p>· <b>BGCOLOR="#hhhhhh" </b> - устанавливает цвет фона для строки.</p> <p>· <b>BACKGROUND="picture.gif" </b> - заполняет фон строки изображением.</p> <p>Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты:</p> <p>· <b>ALIGN=LEFT </b> - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);</p> <p>· <b>VALIGN=CENTER </b> - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);</p> <p>· <b>WIDTH="n" </b> - определяет ширину ячейки в n пикселов;</p> <p>· <b>HEIGHT="n" </b> - определяет высоту ячейки в n пикселов;</p> <p>· <b>COLSPAN="n" </b> - устанавливает "размах" ячейки по горизонтали. Т.е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки;</p> <p>· <b>ROWSPAN="n" </b> - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы;</p> <p>· <b>NOWRAP </b> - присутствие этого аттрибута показывает, что текст должен размещаться в одну строку;</p> <p>· <b>BGCOLOR="#hhhhhh" </b> - устанавливает цвет фона ячейки;</p> <p>· <b>BACKGROUND="picture.gif" </b> - заполняет фон ячейки изображением.</p> <p>Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.</p> <p>Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:<br> <THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;</p> <p><TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;</p> <p><TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).</p> <p>Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков.</p> <p>Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.</p> <p><COLGROUP> может содержать следующие аттрибуты:</p> <p>· <b>SPAN=n </b> - в группе n столбцов (по умолчанию n=1). Браузер проигнорирует это значение, если между <COLGROUP> и <COL> есть хотя бы один элемент <COL>;</p> <p>· <b>WIDTH=n </b> - ширина столбцов в группе. Значение n может задаваться в пикселах, процентах. Может быть задано относительным значением, а также иметь значение "0*", т.е. столбцы будут минимальной ширины, исходя из размеров содержимого ячеек;</p> <p>· <b>ALIGN, VALIGN </b> - выравнивание содержимого ячеек.</p> <p><COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.</p> <p>Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (- обязательно должен набираться строчными буквами и закрываться точкой с запятой).</p> <p>Любая ячейка таблицы может содержать в себе еще одну таблицу.</p> <p>Возможные ошибки в таблицах:</p> <p>· Метки, устанавливающие шрифт (<B>, <I>, даже <FONT SIZE="n", FONT COLOR="#hhhhhh"), необходимо повторять для каждой ячейки. Нельзя установить шрифт сразу для всей таблицы.</p> <p>· Таблица - конструкция нежная. При потере только одной метки <TR> она может повести себя напредсказуемо. Отсутствие метки </TABLE> может привести к тому, что вся таблица вообще исчезнет с экрана.</p> <p><b>Вставка таблицы в редакторе FrontPage </b></p> <p>С помощью таблиц можно выполнять верстку в несколько колонок, применять эффекты состыковки картинки и фона, размещать тонкие линии на всю ширину или высоту странички и т.д.</p> <p>Для вставки таблицы можно воспользоваться стандартной панелью инструментов, однако наиболее полно команды работы с таблицами представлены в меню <b>Таблица. </b></p> <p>Создать таблицу следующего вида:</p> <p>1. Диалоговом окне <b>Вставка таблицы </b> можно указать не только количество строк и столбцов таблицы, но и способ выравнивания, цвет фона ячеек, цвет и толщину границ, интервал между ячейками и другие параметры. Сделаем требуемые установки в соответствии с примером.</p> <p>2. После создания таблицы из 4-ех строк и 3-ех столбцов необходимо выделить нужные ячейки для их объединения, например все ячейки первого столбца и выполнить цепочку действий: <b>Таблица® Объединить ячейки. </b></p> <p><b>Практическая часть. </b></p> <p>Учащиеся выполняют задание Практическая работа 6-7.doc</p> <p><b>Практическая работа </b></p><ul><li>Создайте папку <b>Мой сайт </b> в своей папке<b>. </b></li> <li>Запустить программу <b>FrontPage (Пуск R Все программы R Microsoft Office - Microsoft Office FrontPage2003). </b></li> <li>Создайте новый сайт <b>Файл - </b><b>Создать </b>. В <b>Области задач </b> (окно справа) щелкните на ссылке - <b>Одностраничный </b><b>Web-узел </b>.</li> <li>В открывшемся окне <b>Шаблоны веб-узлов щелкните на кнопке Обзор, </b>откройте в этом окне в строке <b>Папка - </b> <b>Мой компьютер - Общие документы, </b> найдите свою папку и в ней выделите одним щелчком папку <b>Мой сайт </b> и нажмите кнопку <b>Открыть. </b></li> <li>В этом же окне в списке шаблонов выберите <b>Одностраничный Web </b>-<b>узел </b><b> и щелкните ОК </b>.</li> <li>Откройте первую страницу сайта, дважды щелкнув имя <b>index.htm </b>в списке папок.</li> <li>Щелкните правой кнопкой мыши в любом месте страницы и в контекстном меню выберите <b>Свойства страницы </b> - вкладку <b>Общие и в строке Название </b>введите имя страницы (например, <b>Главная страница </b>) - ОК.</li> </ul><table border="1" cellspacing="1" bordercolor="#000000" cellpadding="7"><tr><td valign="top" colspan="3">1). </td> </tr><tr><td valign="top">2). </td> <td valign="top">3). </td> <td valign="top">4). </td> </tr><tr><td valign="top">5). </td> <td valign="top" colspan="2" rowspan="4">10) </td> </tr><tr><td valign="top">6). </td> </tr><tr><td valign="top">7). </td> </tr><tr><td valign="top">8). </td> </tr><tr><td valign="top" colspan="3">9) </td> </tr></table><ul><li>Вставьте таблицу из 3 столбцов и 7 строк. Для этого в меню <b>Таблица </b> выберите команду <b>Вставить </b> -<b> Таблицу </b>, задайте количество строк <b>- 7, </b> столбцов <b>- 3. </b>В разделе <b>Границы </b> введите <b>размер 0 </b>, щелкните ОК.</li> <li>Объедините ячейки, как показано на рисунке.</li> <li>Уменьшите размер левой колонки таблицы (потянуть за правую границу колонки влево).</li> <li><b>меню Файл - Сохранить </b>)</li> <li>Вставка рисунка в качестве фонового изображения. В меню <b>Формат </b>щелкните <b>Фон </b>. В открывшемся окне перейдите на вкладку<b> Форматирование и щелкните кнопку Обзор </b>. Далее <b>Мои документы - Мои рисунки - Рисунок 1 </b>. Выделите нужный файл - <b>Открыть </b> - <b>ОК </b>. (Чтобы просмотреть имеющиеся рисунки, на панели инструментов окна <b>Рисунок </b> нужно щелкнуть на кнопке <b>Представления </b> и выбрать <b>Эскизы </b>)</li> </ul><ul><li>Введите в строку <b>1 </b> таблицы заголовок страницы <b>Мой город </b>. Для заголовка можно использовать объект Word Art.</li> <li>Вставьте рисунок в <b>ячейку 2 </b>. Для этого щелкните левой кнопкой мыши внутри данной ячейки. В меню <b>Вставка </b>выберите <b>Рисунок </b>, а затем <b>Из файла </b>. В открывшемся окне <b>Рисунок в строке Папка выберите </b><b>Мои документы - Мои рисунки - Наш грод. </b>Выделите файл<b>gerb и щ </b>елкните <b>ОК </b>. Аналогично вставьте рисунок в ячейку <b>4. </b></li> <li>В <b>строке 9 </b> создайте бегущую строку. Для этого щелкните левой кнопкой мыши внутри данной строки. В меню <b>Вставка </b> выберите <b>Веб-компонент </b> - эффект <b>бегущая строка - Готово. </b>В строке <b>Текст </b> введите <b>Комсомольк-на-Амуре - город, в котором я живу </b><b> и щ </b>елкните <b>ОК </b>.</li> <li>Просмотрите получившуюся страницу, щелкнув в нижней части окна на кнопке<b> Просмотр. </b></li> <li>Вернитесь в режим <b>Конструктор </b>, щелкнув на соответствующей кнопке.</li> <li>Внесите изменения в созданные элементы (размер, расположение на странице, цвет), если это необходимо.</li> <li>Введите в <b>ячейку 3 </b> текст стихотворения:</li> </ul><blockquote> <p>Я на небо взгляну - и утонет мой взор,<br> Я как будто лечу, рассекая простор.<br> Я на сопки взгляну - запоёт тут душа<br> До чего же тайга хороша, хороша!<br> Я увижу Амур - и на сердце теплей,<br> И спокойнее как-то, и веселей.<br> Среди этой природы, средь такой красоты/<br> Вырос город надежды и город мечты.<br> В Комсомольске живу я, и этим горжусь,<br> Сделать краше и лучше свой город стремлюсь.<br><i>Е. Смирнова </i></p> </blockquote> <ul><li>Выполните форматирование текста.</li> <li>Сохраните созданную страницу (<b>меню Файл - Сохранить </b>)</li> <li>Разбейте ячейку 10 на 4 столбца (<i>установите курсор </i> <i>внутри ячейки </i>, <i>щёлкните правой кнопкой мыши, выберите в контекстном меню команду Разбить ячейки, задайте нужное количество столбцов </i>).</li> <li>Вставьте рисунки в <b>образовавшиеся ячейки. </b>Смотрите образцы страниц в папке <b>Temp на Server - Внешний вид страниц. </b></li> <li>Создание активной кнопки:</li> </ul><blockquote> <ol><li><i>Установите курсор внутри ячейки 5. </i></li> <li><i><b>Вставка </b>выберите <b>Веб-компонент </b> - эффект <b>интерактивная кнопка - Готово </b> </i></li> <li><i>В открывшемся окне <b>Меняющаяся кнопка выберите вид кнопки, </b>в поле <b>Текст </b> введите текст <b>На главную </b> </i></li> <li><i>Установите стиль шрифта надписи кнопки, щелкнув вкладку <b>Шрифт </b>. Здесь же можно выбрать Цвет кнопки Исходный, Цвет при наведении, Цвет при нажатии. На вкладке Рисунок щелкните переключатель Использовать для кнопки формат GIF и прозрачный фон. </i></li> <li><i>Скопируйте эту кнопку в ячейки 6,7 и 8. </i></li> <li><i>Измените параметры на второй кнопке. Для этого щелкните на ней правой кнопкой мыши - команда <b>Свойства кнопки </b>. Текст <b>На главную </b> замените на <b>История. </b>Щелкните ОК. </i></li> <li><i>Аналогично измените параметры на третьей и четвёртой кнопке. Текст <b>На главную </b> замените на <b>Памятники </b>и <b>Предприятия </b>соответственно. </i></li> </ol></blockquote> <ul><li>Сохраните созданную страницу (<b>меню Файл - Сохранить </b>)</li> <li>Создайте вторую страницу сайта.</li> </ul><blockquote> <ol><li><i>Перейдите на вкладку <b>Веб-узел </b>. </i></li> <li><i>Выделите строку <b>index.htm </b> <b>- index_копия(1).htm. </b>Щелкните правой кнопкой мыши на <b>имени </b>, выберите команду <b>Переименовать </b>. Замените <b>имя index_копия(1).htm на st2.htm </b>Нажмите клавишу Tab. </i></li> <li><i>Замените текст названия <b>Главная страница </b> на <b>История города </b>. </i></li> <li><i><b> st2.htm </b> </i></li> </ol></blockquote> <ul><li>Замените заголовок страницы <b>Мой город </b> на <b>Это нашей истории строки </b>.</li> <li>Удалите стихотворение, которое вводили на <b>Главной странице </b>. Вместо него введите текст:</li> </ul><blockquote> <p>10 мая 1932 г. С пароходами "Колумб" и "Коминтерн" высадилась первая партия комсомольцев - строителей завода и будущего города.</p> <p>10 декабря 1932 г. Президиум ВЦИК постановил переименовать село Пермское Нижне-Тамбовского района в город Комсомольск-на-Амуре.</p> <p>Октябрь 1949 г. Сдан в эксплуатацию первый жилой микрорайон - 15-й квартал.</p> <p>10 июня 1967 г. Президиум Верховного Совета СССР наградил Комсомольск-на-Амуре орденом Ленина.</p> </blockquote> <ul><li>Отформатируйте текст по вашему усмотрению.</li> <li>Удалите фотографии, которые использовались на Главной странице и вставьте новые, как показано на образце (читайте <b>п.22) </b>.</li> <li>Сохраните созданную страницу (<b>меню Файл - Сохранить </b>)</li> <li>Создайте третью страницу сайта.</li> </ul><ol><li><i>Перейдите на вкладку <b>Веб-узел. </b> </i></li> <li><i>Выделите строку <b>st2.htm </b> одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка <b>- st2_копия(1).htm </b> <b>st2_копия(1).htm </b>на<b> st3.htm </b>Нажмите клавишу Tab. </i></li> <li><i>Замените текст названия <b>История города </b> на <b>Памятные места. </b> </i></li> <li><i>Двойным щелчком мыши откройте скопированную страницу<b> st3.htm </b> </i></li> </ol><ul><li>Замените заголовок страницы <b>Это нашей истории строки </b> на <b>Памятные места. </b></li> <li> <b>п.22) </b>.</li> <li>Сохраните созданную страницу (<b>меню Файл - Сохранить </b>)</li> <li>Создайте четвёртую страницу сайта.</li> </ul><ol><li><i>Перейдите на вкладку <b>Веб-узел. </b> </i></li> <li><i>Выделите строку <b>st3.htm </b> одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка <b>- st3_копия(1).htm </b>Выделите эту строку, затем еще раз щелкните на имени левой кнопкой мыши. Замените имя <b>st3_копия(1).htm </b>на<b> st4.htm </b>Нажмите клавишу Tab. </i></li> <li><i>Замените текст названия <b>Памятные места </b> на <b>Предприятия города. </b> </i></li> <li><i>Двойным щелчком мыши откройте скопированную страницу<b> st4.htm </b> </i></li> </ol><ul><li>Замените заголовок страницы <b>Памятные места </b> на <b>Предприятия города. </b></li> <li>Удалите текст и фотографии, которые вы использовали на предыдущей странице, и замените их на новые как показано на образце (читайте <b>п.22) </b>.</li> <li>Сохраните созданную страницу (<b>меню Файл - Сохранить </b>)</li> <li>Настройте переходы активных кнопок на соответствующие страницы. Для этого щелкните правой кнопкой мыши на созданной кнопке <b>На главную </b>, в контекстном меню выберите пункт Свойства кнопки. В открывшемся окне <b>Меняющиеся кнопки </b> щелкните на кнопке <b>Обзор </b> и выделите файл <i><b>index.htm. </b> </i> Щелкните <b>ОК </b>. Аналогично настройте действие остальных кнопок. Кнопка <b>На главную </b> должна переходить на файл <b><i>index.htm </i>, </b>кнопка<b> История - </b>на страницу <b><i>st2.htm </i>, </b>кнопка<b> Памятники - </b>на страницу <b><i>st3.htm </i>, </b>кнопка<b> Предприятия - </b>на страницу <i><b>st4.htm </b> </i></li> <li>Сохраните созданную страницу (<b>меню Файл - Сохранить </b>)</li> <li>Повторите эти действия на страницах<b> <i>index.htm, </i> </b> <b><i>st2.htm, st3.htm </i> </b></li> <li>Сохраните изменения на каждой странице (<b>меню Файл - Сохранить </b>)</li> <li>Внесите изменения в созданные страницы по своему усмотрению (вставьте дополнительные рисунки, текст и т. д.)</li> <li>После каждого изменения не забывайте сохранять каждую страницу (<b>меню Файл - Сохранить </b>)</li> <li>Закройте все окна. Откройте файл <i><b>index.htm </b> </i> из вашей папки <b>Мой сайт </b> и просмотрите созданный сайт.</li> <li>Проверьте переходы всех кнопок и гиперссылок на каждой странице. Если необходимо внести изменения, то запустить программу <b>FrontPage, </b>откройте нужную страницу, внесите изменения и обязательно сохраните их.</li> <li>Откройте созданные HTML файлы в блокноте и просмотрите программные коды.</li> </ul> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_7.jpg' align="center" height="129" width="350" loading=lazy></p> <p>Перед тем, как начать работать во FrontPage, рекомендую Вам создать папку специально для Вашего сайта. Ее можно назвать «сайт», «мой сайт», «мой супер-пупер сайт», или, если Вы предпочитаете английский, «my site», «site».</p> <p>В Интернете файлы с русскими названиями, увы, не работают (но это не значит, что они не будут работать на Вашем компьютере), поэтому я, по давно выработанной привычке, буду использовать по умолчанию папку <b>site </b>. Вы тоже можете начать вырабатывать в себе эту привычку, но это уже только по Вашему желанию 🙂</p> <p>Разместить созданную папку можно в любом месте, на диске C, в «Моих документах», на рабочем столе… в принципе, это не имеет значения, главное, чтобы Вам было <b>удобно с ней работать </b>.</p> <p>Правда, не советую Вам создавать папку прямо на рабочем столе. Путь к ней (его можно посмотреть в свойствах папки, или в самой папке, он указан в строке «адрес»), в таком случае, будет очень длинный. Например: «C:Documents and SettingsUsersUser001рабочий столsite». Правда, он может быть и коротким, например: «C:WINDOWSРабочий столsite». Все зависит от настроек Вашего компьютера.</p> <p>Если путь все же получается длинным, то Вы можете создать папку для сайта на диске C (или D), тогда ее путь будет значительно короче: «C:site». А для того, чтобы открывать папку можно было быстро и просто, к ней нужно создать ярлык и поместить его в любое удобное для Вас место, например, на тот же рабочий стол.</p> <p>Зачем заботиться о размере пути к папке? На качество создания сайта это никак не повлияет, но я на собственном опыте убедилась, что работать с папками, путь к которым не очень длинный, значительно удобнее. В примере будет использован следующий путь к папке «C:Documents and Settingssite»</p> <p><b>Отдельная папка для сайта </b> - <b>вещь исключительно удобная </b>, порой даже незаменимая. Ваши материалы и созданные страницы нигде не потеряются, а будут спокойно лежать в своей отдельной папочке.</p> <p>Средствами FrontPage создать сайт даже не очень опытному пользователю не должно составить труда. Например, можно выбрать уже готовый веб-узел, изменить стандартные данные на свои, что-то добавить, что-то удалить и все, сайт можно выкладывать в Интернет. Создать новый веб-узел, можно, выбрав <b>Файл </b> (File) | <b>Создать </b> (New). Справа от рабочего пространства откроется следующее окно:</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_4.gif' align="center" height="454" width="256" loading=lazy></p> <p>Нажав на ссылку <b>Другие шаблоны веб-узлов </b>, Вы увидите, что существует еще много разнообразных видов веб-узлов от одностраничного до корпоративного. Ради эксперимента можете попробовать выбрать какой-нибудь веб-узел и создавать сайт в этом шаблоне.</p> <p>Но я вообще-то не поддерживают такой способ создания сайта, так как FrontPage для готового веб-узла создает много ненужных папок. Да и вообще много всего ненужного.</p> <p>Поэтому я предлагаю несколько иной подход. Я предлагаю создать сайт с чистого листа, выбрав в окне создания новой страницы пункт <b>Пустая страница </b>. А можно ничего не выбирать, а просто закрыть окно создания новой страницы, так как этот пункт уже и так выбран по умолчанию.</p> <p>И вот на этом пустом пространстве мы и начнем создавать первую страницу сайта, а точнее, ее шаблон.</p> <p>Если Вы более-менее знакомы с Интернетом, то наверняка замечали, что многие сайты состоят из таблиц. Какие-то таблицы видны хорошо, какие-то совершенно незаметны. Вот и мы будем делать <i>сайт, состоящий из таблиц </i>.</p> <blockquote><p>Сейчас таблицы как средство создания каркаса понемногу устаревают, взамен им приходит <i>верстка с помощью слоев </i>. Но таблицы все еще остаются простым и эффективным способом форматирования страницы. Для начала это – в самый раз.</p> </blockquote> <p>Во FrontPage существует несколько способов создать таблицу. Сейчас я подробно опишу каждый из них, чтобы потом Вы для себя смогли выбрать наиболее подходящий. Но так как научиться можно только на практике, советую вам не просто прочитать текст ниже, но и выполнить все описанные действия.</p> <p>Итак, <b>первый способ </b>. В строке командного меню выберите команду <b> Таблица </b> (Table), а в выпадающем меню - пункт <b>Вставить </b> (Insert) со стрелкой. Подведите мышь к этой стрелке и перед вами откроется еще одно выпадающее меню. Выберите пункт <b>Таблица </b> (Table).</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_5.gif' align="center" width="100%" loading=lazy><i>Первый способ создания таблицы во FrontPage- с помощью меню <b>Таблица </b> </i></p> <p>После выбора этой команды перед вами откроется окно, где вы можете указать различные параметры создаваемой таблицы.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_6.jpg' align="center" height="500" width="335" loading=lazy></p> <p>Какие же параметры можно установить? В первой области <b>Размер </b> можно выбрать необходимое количество <b>строк </b> (rows) и <b>колонок </b> (columns).</p> <p>В следующей области <b>Положение </b> (Layout) можно настроить:</p> <ul><li>расположение таблицы на странице - для этого в поле <b>Выравнивание </b> (Aligment) нужно выбрать одно из следующих значений:</li> </ul><blockquote> <ul><li><b>По умолчанию </b> (Default) - тогда таблица разместится по усмотрению браузера пользователя, скорее всего у левого края;</li> <li><b>Слева </b> (Left);</li> <li><b>Справа </b> (Right);</li> <li><b>По центру </b> (Center);</li> </ul></blockquote> <ul><li>расстояние между границей ячейки и ее содержимым - для этого введите необходимое значение в поле <b>Поля ячеек </b> (Cell Padding);</li> <li>расстояние между ячейками таблицы - для этого достаточно ввести необходимое значение в поле <b>Интервал ячеек </b> (Cell Spasing);</li> <li>ширину таблицы - обратите внимание, если флажок <b>Точная ширина </b> (Specify width) снят, размер таблицы будет зависеть только от ее содержимого. Если же флажок стоит, то можно обозначить ширину <b>в пикселах </b> (in pixels) или <b>в процентах </b> (in percent). Скажу сразу, ширину для основной таблицы (которую мы сейчас и создаем), лучше делать в процентах, тогда она будет изменяться в зависимости от размеров окна пользователя.</li> </ul><p>В области <b>Границы </b> (Border) можно настроить:</p> <ul><li>ширину границ таблицы - для этого нужно всего лишь ввести необходимое значение в поле <b>Размер границ </b> (Border size);</li> <li>цвет, светлую и темную стороны таблицы</li> </ul><p>В области <b>Фон </b> (Background) можно задать цвет для фона таблицы или выбрать фоновый рисунок.</p> <p>Для примера возьмем настройки, которые я указала ранее. Выбираем <b>ОК </b> и смотрим на результат.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_8.gif' align="center" width="100%" loading=lazy></p> <p>Отлично! Теперь давайте для сравнения попробуем использовать <b>второй способ </b> создания таблицы во FrontPage. На панели инструментов <b>Стандартная </b> (Standard) найдите значок <b>Добавить таблицу </b> (Insert Table) и нажмите на него. После этого откроется небольшой макет таблицы.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_9.jpg' height="149" width="147" loading=lazy><i>Быстрый способ создания таблицы - использование кнопки <b>Добавить таблицу </b> (Insert Table) </i></p> <p>Удерживая нажатой левую кнопку мыши выделите нужное количество строк и колонок. Так, для примера, на рисунке выделены две строки и одна колонка. Если вы подведете мышку к правой или нижней границе макета, он расширится. После того, как вы отпустите кнопку мыши, моментально появится сама таблица.</p> <p>Этот способ создания таблицы намного проще и быстрее, чем первый. Одно «но» — здесь нельзя предварительно указать параметры создаваемой таблицы. Поэтому, если вы соберетесь создать еще одну таблицу с помощью второго способа, менять ее параметры можно будет только после того, как вы ее создадите.</p> <p>О том, как это сделать, я расскажу немного позже, а сейчас более наглядный, <b>третий способ </b> создания таблицы. Это - <i>рисование таблицы мышью </i>. Его мы использовать сейчас не будем, но если вам когда-нибудь понадобится создавать сложные таблицы, вы будете знать, как это делать.</p> <p>Первый шаг точно такой же, как и в первом случае. В строке командного меню нужно выбрать команду <b>Таблица </b> (Table). Но следующий шаг уже совсем другой. Когда вы выберите команду <b>Таблица </b> (Table), перед вами откроется выпадающее меню. Присмотритесь, у него внизу есть двойная стрелка. Подведите мышь к этой стрелке. Теперь перед вами весь список команд.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_10.gif' align="center" height="466" width="277" loading=lazy><i>Меню команды <b>Таблица </b> </i></p> <p>На этот раз нам нужен пункт <b>Нарисовать таблицу </b> (Draw Table). Нажимаем. Откроется следующее небольшое окно.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_11.jpg' align="center" height="70" width="380" loading=lazy></p> <p>Рисование таблицы состоит из нескольких этапов: прорисовывается внешний прямоугольный контур таблицы, проводятся линии, разделяющие таблицу на строки и колонки, лишние линии стираются.</p> <p>Для начала убедитесь, что инструмент для рисования таблицы включен (при этом он должен отобразиться на более светлом фоне, чем остальные кнопки). Теперь, когда курсор попадет в область документа, он примет форму карандаша.</p> <p>Теперь подведите курсор мыши к верхней левой вершине предполагаемой таблицы. Затем, нажав и удерживая левую кнопку мыши, подведите его к нижнему правому углу предполагаемой таблицы и отпустите кнопку. В результате появится внешний контур таблицы.</p> <p>Теперь, при помощи того же карандаша, проведите линии, формирующие внутреннюю структуру таблицы.</p> <p>Убрать лишние линии можно при помощи инструмента <b>Ластик </b> (Eraser). Воспользоваться им легко. На панели инструментов <b>Таблица </b> (Table) нажмите кнопку <b>Ластик </b> (Eraser). Затем подведите курсор мыши к линии, которую нужно стереть и проведите по ней. Стираемые линии окрасятся в красный цвет. Чтобы отключить режим ластика, нажмите на кнопку <b> Ластик </b> (Eraser) еще раз.</p> <p>С помощью этого способа тоже можно нарисовать неплохую таблицу, но давайте вернемся к предыдущей. С ней мы сейчас и будем работать.</p> <p>Первую строчку можно оставить для названия сайта, логотипа и т.д. Это будет так называемый верх сайта. Обычно его оставляют одним для всех страниц сайта. В следующую строку обычно помещают текст, картинки, фотографии, одним словом, информацию. Очень неплохо оставить внизу место для счетчиков, которые будут подсчитывать количество посетителей. Туда так же можно написать имя создателя сайта:).</p> <p>Но у нас только две строки! Неужели, придется начинать все заново? Нет, что Вы! Мы просто вставим еще одну строку. Сделать это можно несколькими способами.</p> <p>Например, если у вас еще открыта панель инструментов <b>Таблица </b> (Table), новую строку можно добавить, нажав на кнопку <b>Добавить строку </b>(Insert row). Не забудьте перед этим поставить курсор на одну из строк таблицы. Новая строка появится перед строкой, на которой стоял курсор.</p> <p>Следующий способ вставки строки тоже довольно прост. Для начала нужно всего лишь выделить одну из существующих строк, нажать на правую кнопку мыши и… Но, подождите, как же выделить строку? Здесь тоже нет ничего сложного. Просто подведите курсор мыши к строке, которую вы хотите выделить.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_12.jpg' align="center" height="82" width="300" loading=lazy></p> <p>Затем дождитесь, когда он превратится в стрелочку и нажмите на нее.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_13.jpg' align="center" height="78" width="300" loading=lazy></p> <p>Выделенная строка выглядит так:</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_14.jpg' align="center" height="80" width="300" loading=lazy></p> <p>И вот теперь, не снимая выделения, щелкните по выделенной строке правой кнопкой мыши. Перед вами откроется вложенное меню.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_15.jpg' align="center" height="353" width="300" loading=lazy></p> <p>Из всех этих, несомненно полезных, пунктов, нам сейчас понадобится только один: <b>Добавить строки </b> (Insert row).</p> <p>Кстати говоря, строку можно было и не выделять, а просто щелкнуть в ней курсором. Но навык выделения таблиц, строк и колонок вам все равно понадобится, так что привыкайте 🙂</p> <p>Следующий способ вставки новых строк в таблицу значительно удобнее. И сейчас вы сами поймете, почему. Установите курсор в строку над (под) которой вы собираетесь добавить новые строки. Затем обратитесь к нашему любимому пункту <b> Таблица </b> (Table), который находится в командной строке. В выпадающем меню выберете <b>Вставка </b> (Insert) | <b> Строки или Колонки </b> (Rows or Columns). Откроется следующее окно.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_16.jpg' height="220" width="250" loading=lazy></p> <p>Видите, в нижней части окна можно выбрать расположение новой строки - над выделенной строкой (above) или под ней (below). Заметьте, при использовании первых двух способов такой выбор нам не был предоставлен. Определим количество строк, нажимаем на ОК и смотрим, что у нас получилось.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_17.gif' align="center" width="100%" loading=lazy></p> <p>Теперь у нас три строки. Для всего нашлось место, осталось только определить, куда поместить структуру нашего сайта. Не забыли еще про нее? Сейчас мы рассмотрим самый простой способ поместить структуру на страницу - разместив ее во второй строке, рядом с «информационной» серединой.</p> <p>Для этого создадим еще одну таблицу из двух колонок во второй строке. Как создавать новую таблицу, мы уже знаем. Причем мы знаем целых три способа, как сделать это! Какой будем использовать на этот раз?</p> <p>Давайте сейчас используем первый, так как нам нужно с самого начала отрегулировать параметры таблицы. Путь к созданию таблицы: <b>Таблица </b> (Table) | <b>Вставка </b> (Insert) | <b>Таблица </b> (Table).</p> <p>В открывшемся окне отмечаем одну строку, две колонки и ширину границ таблицы равной нулю. Саму ширину таблицы делаем 100% и нажимаем на ОК. Вся таблица теперь выглядит так:</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_18.jpg' align="center" height="105" width="300" loading=lazy></p> <p>Небольшие точки во второй строке - это и есть та самая «невидимая» таблица. Точнее, сейчас-то ее хорошо видно, но это только потому, что в данный момент мы находимся в режиме редактирования. А когда мы перейдем в режим просмотра, таблицы видно не будет.</p> <p>Эта «невидимая» табличка нам нужна только для моделирования внешнего вида таблицы, поэтому мы и сделали ее «невидимой». Теперь в левую колонку нужно вставить еще одну таблицу. Количество строк должно быть равно количеству основных пунктов составленной вами структуры. Колонки делать не надо!</p> <p>Листочек еще не потерялся? Тогда переносим названия всех основных страниц (разделов) в нашу табличку. Названия внутренних страниц (подразделов) туда включать не обязательно. Чтобы ввести названия страниц в таблицу, просто щелкните мышью в том месте, где будет располагаться текст и наберите его на клавиатуре.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_19.jpg' align="center" width="100%" loading=lazy></p> <p>Более подробно о вводе текста и изменения его внешнего вида, я расскажу тогда, когда мы будем наполнять сайт информацией.</p> <p>А теперь, как и обещала, расскажу о том, как изменить параметры таблицы после ее создания. Помните, как мы выделяли строку таблицы? А теперь нам нужно выделить целую таблицу.</p> <p>Если «вручную» выделить таблицу не получается, можно просто пройти путь <b> Таблица </b> (Table) | <b>Выделить </b> (Select) | <b>Таблица </b> (Table). Теперь, не снимая выделения, щелкните по таблице правой кнопкой мыши. Можно, кстати, вообще не выделять таблицу, но я уже писала, это очень полезный навык 🙂</p> <p>Выскочит уже знакомое нам выпадающее меню. Только на этот раз нам понадобится пункт <b>Свойства таблицы </b> (Table Properties). При выборе этого пункта откроется окно, которое практически полностью повторяет окно вставки новой таблицы. В нем можно поменять существующие настройки на новые.</p> <p>Кстати, в программе FrontPage рамку таблицы можно также сделать «двойной», состоящей из множества квадратиков, с тенью и т.д. Все это доступно в верхнем меню <b>Формат </b> (Format) | <b>Границы и заливка </b> (Borders and Shading)</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_20.gif' align="center" width="100%" loading=lazy></p> <p>В первой закладке - <b>Рамки </b> (Borders) можно поменять вид границ таблицы. Посмотрите на возможные результаты после изменения вида рамки таблицы.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_21.jpg' align="center" width="100%" loading=lazy></p> <p>Во второй закладке - Заливка (Shading) можно установить фоновый рисунок для таблицы а также выбрать цвет фона и текста. Но выбрать подходящий цвет вообще не просто… Поэтому на сегодня закончим, а о цветах поговорим на следующем уроке.</p> <p>Но, подождите, что же делать с нашим художеством, т.е. с созданными табличками? Все очень просто. Их нужно сохранить. Для этого в верхнем меню выберите <b>Файл </b> (File) | <b>Сохранить как </b> (Save as). Найдите на вашем компьютере папочку, в которую мы договорились складывать сайт и сохраните в ней ваш документ под именем <b>index </b>.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp1_22.gif' align="center" width="100%" loading=lazy></p> <p>Почему именно index? Да просто потому что так всегда обозначают главную страницу сайта. А именно ее мы сейчас и делали. Если вы теперь, выйдя из программы FrontPage, откроете сохраненный вами документ, вы увидите, что он автоматически сохранился как <b>index.htm </b>. HTM - сокращенное от слова HTML, помните еще, что это такое?</p> <p>Стоит запомнить, что форматы «htm» и «html» — это абсолютно разные вещи. Советую вам сразу же выбрать что-то одно, чтобы потом не возникало проблем. Если вы выбрали окончание «html», не забывайте прибавлять его к каждой сохраняемой странице, иначе она по умолчанию будет сохраняться как «htm»</p> <p>Напомню, что названия файлов для сайта нельзя писать русскими буквами. Потом, когда вы выложите ваш сайт в Интернет, эти файлы просто не будут открываться.</p> <p>И последнее о названиях. Писать названия файлов, страниц для сайта с большой буквы - это, конечно, похвально, но крайне неудобно. Рекомендую вам все, все: страницы, рисунки, архивы - все писать с маленькой буквы. Поверьте, в дальнейшем это поможет избежать очень многих неточностей.</p> <h3>Открытие сохраненного «index»</h3> <p>Сейчас мы будем открывать документ «index», который мы сохранили в папке для сайта в конце предыдущего дня. Способов сделать это существует несколько. Давайте рассмотрим каждый из них, чтобы потом Вы могли выбрать оптимальный для себя.</p> <p>Итак, первый способ. Файл «index» по умолчанию является Интернет–файлом, так как имеет формат <b>htm </b> (<b>html </b>). Поэтому если вы откроете его двойным щелчком, вы попадете в окно просмотра браузера.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp2_1.gif' align="center" width="100%" loading=lazy></p> <p>Этот способ открытия «index» во FrontPage заключается в том, чтобы в верхней командной строке выбрать команду <b>Файл </b> (File), а в выпадающем меню — <b>Править в Microsoft FrontPage </b> (Edit with Microsoft FrontPage).</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp2_2.gif' align="center" height="113" width="354" loading=lazy></p> <p>Если в меню <b>Файл </b> у Вас такого пункта нет, значит, FrontPage на компьютере не установлен в качестве редактора Интернет-страниц. Чтобы это исправить, нужно, во-первых, открыть саму программу FrontPage, и затем в командной строке выбрать <b>Сервис </b> | <b>Параметры </b>. Откроется следующее окно:</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp2_3.gif' align="center" width="100%" loading=lazy></p> <p>Чтобы нормально работать с сайтом, нам нужно, чтобы в области <b>Редакторы </b> находился FrontPage. Если его там нет, то нажмите на значок в верхнем правом углу и выберите там <b>FrontPage (открыть как HTML) </b>. Затем нажмите на кнопку <b>Использовать по умолчанию </b>.</p> <p>Это был первый способ открытия файла во FrontPage, через окно браузера. Но логичнее будет этот путь сократить. Поэтому, чтобы не тратить время, можно, не открывая файл, нажать на него правой кнопкой мышки и в выпадающем меню выбрать <b>Открыть с помощью… (Open with) </b> и в предложенном списке найти программу FrontPage.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/fp2_4.gif' align="center" width="100%" loading=lazy></p> <p>И последний, третий способ. Сначала нужно открыть саму программу FrontPage, а уже после этого открыть весь сайт, выбрав <b>Файл </b> (File) | <b>Открыть веб-узел </b> (Open web). Или, если Вы недавно уже открывали <b> index </b>, выбрать <b>Последние файлы </b>, а в выпадающем меню нужный файл.</p> <p>Конечно, не так важно, каким именно способом вы откроете страницу «index» во FrontPage, главное, чтобы вы ее открыли 🙂 Поздравляю, еще один полезный навык приобретен!</p> <p>В Frontpage имеются две функциональные возможности, которые позволяют разбивать страницу на разделы, содержащие текст и графические изображения. Это таблицы и кадры. До этого момента мы выравнивали текст в строке, добавляя пробелы при помощи стиля абзаца Formatted. Для выравнивания текста можно использовать и таблицы. С помощью таблиц выравнивают поля форм (работе с формами посвящена глава 7). Вы также можете использовать для форматирования элементов страницы каскадные таблицы стилей. Следует отметить, что каскадные таблицы стилей поддерживаются только в броузерах последних версий. <br><i><b>Примечание </b> </i><br> Броузеры игнорируют такой элемент форматирования, как строки пробелов. Исключение составляют случаи, когда используется стиль Formatted или символ неразрывного пробела. В HTML-коде для обозначения неразрывного пробела применяется последовательность символов &nbps;. Использование набора таких последовательностей дает возможность отобразить текст с несколькими следующими подряд пробелами на странице, загруженной в броузер. В Frontpage символ неразрывного пробела можно вставить с помощью диалогового окна Symbol (первый в первой строке). <br><i><b>Проектирование таблиц </b> </i><br> Важнейшим средством разработки макета Web-страницы является таблица. Функции таблиц при создании Web-страниц разнообразны. В первую очередь хочется выделить следующие: <br> выравнивание данных путем вставки в ячейки таблицы (при этом предоставляется возможность разделения данных линиями различной толщины); <br> представление текста в виде колонок; <br> выравнивание в формах полей ввода и их названий; <br> распределение текста и графики по разным колонкам; <br> создание обрамления вокруг текста или графических изображений; <br> размещение графических изображений по обе стороны текста (или совсех сторон) и наоборот; <br> расположение текста по контуру графического изображения; <br> создание цветного фона для текстового фрагмента или отдельного изображения; <br> включение таблиц в другие таблицы. <br> В процессе создания таблицы в диалоговом окне Insert Table устанавливаются значения таких свойств: количество строк и столбцов, занимаемая площадь страницы по горизонтали, толщина линий, разделяющих ячейки и ограничивающих таблицу, величина интервалов между содержимым и внутренним краем границ ячейки, выравнивание таблицы и т.д. В дальнейшем значения свойств таблицы можно изменить. В любой момент можно удалить как одну, так и несколько строк или колонок, объединить смежные ячейки, сформатировать особым образом содержимое одной ячейки или выделенного диапазона и т.д. При вводе данных размер ячейки увеличивается по вертикали и по горизонтали в пределах ограничений, установленных для таблицы и столбца. <br><i><b>Примечание </b> </i> <br> Вы можете задать ширину таблицы как в пикселях (фиксированная ширина), так и в процентах от ширины окна броузера или кадра, в который включена страница. Ширина столбцов таблицы указывается либо в процентах от ширины таблицы, либо в пикселях (фиксированная ширина). Если ширина отдельного столбца или всей таблицы задана в пикселях, то способ отображения этой таблицы в броузере зависит от разрешения экрана, заданного на компьютере пользователя.<br><i><b>Отображение табличных данных <br></b> </i>В классической таблице строки и столбцы строго разграничены. Для получения такой таблицы необходимо выполнить следующую последовательность действий: <br> 1. Загрузите Frontpage. <br> 2. Активизируйте команду New подменю Web меню File. <br> 3. Загрузится диалоговое окно New. По умолчанию выбран шаблон One Page Web. В поле Specify The Location Of The New Web введите имя Web-сервера и Web-узла. Назовите Web-узел, например, TestTables. Щелкните на кнопке ОК. <br> 4. Перейдите в режим просмотра Folders. Щелкните два раза на имени файла Default.htm. Домашняя страница будет открыта в режиме просмотра Page. <br> 5. Нажмите клавишу , чтобы вставить пустую строку в верхней части страницы <br> 6. Откроите меню Table и активизируйте команду Table подменю Insert. В результате откроется диалоговое окно Insert Table (рис 61) В этом окне отображены значения свойств таблицы, установленные по умолчанию Элементы диалогового окна Insert Table описаны в табл 6.1.</p><p>Рис 6.1. Диалоговое окно Insert Table</p><p>Таблица 6.1. Свойства таблицы</p><table align="left" border="1" id="table50"><tr><td align="center"> <b><i> <span>Элемент диалогового </span> </i> </b> </td> <td align="center"> <b><i> <span>Свойство таблицы </span> </i> </b> </td> </tr><tr><td> окна Insert Table </td> <td> </td> </tr><tr><td> Rows </td> <td> <span>Количество строк в таблице </span> </td> </tr><tr><td> Columns </td> <td> <span>Количество столбцов в таблице </span> </td> </tr><tr><td> Alignment </td> <td> <span>Способ выравнивания таблицы (по умолчанию задано выравнивание по левому краю) </span> </td> </tr><tr><td> Border Size </td> <td> <span>Толщина разделительных и ограничительных линий в пикселях Значение по умолчанию - 0 Если это значение не изменять, то в броузере рамка таблицы не отображается, a в Frontpage обозначается пунктирной линией </span> </td> </tr><tr><td> Cell Padding </td> <td> <span>Величина интервалов (в пикселях) между краями ячейки и ее содержимым (значение по умолчанию - 1) </span> </td> </tr><tr><td> Cell Spacing </td> <td> <span>Интервал (в пикселях) между смежными ячейками (значение по умолчанию - 2) <br></span> </td> </tr><tr><td> Specify Width </td> <td> <span>Ширина таблицы Это значение задается либо в пикселях (переключатель In Pixels), либо в процентах от ширины окна броузера или кадра, в который включена страница (переключагель In Percent) </span> </td> </tr></table> <br clear="all"> <p>7. Не изменяйте чти значения Щелкните на кнопке ОК. В результате будет создана таблица из двух строк и двух столбцов Выделите таблицу с </span>помощью команды Table подменю Select меню Table. Нажмите клавишу , чтобы удалить таблицу. Если вы на этапе 5 не создали пустую строку в начале страницы, сделайте это сейчас. <br> 8. Выполните щелчок на кнопке Insert Table панели инструментов Table. Перед вами появится прототип таблицы, где очень легко указать, сколько строк и столбцов должна содержать таблица. Щелкните на второй клетке во втором ряду, как показано на следующем рисунке. В этом случае также будет создана таблица, состоящая из двух строк и двух столбцов (четырех ячеек). <br> Мы рассмотрели два способа создания таблицы. При использовании кнопки Insert Table панели инструментов применяются значения, заданные по умолчанию. В случае активизации команды Table подменю Insert меню Table вы самостоятельно определяете значения параметров создаваемой таблицы. <br><i><b>Примечание </b> </i> <br> Посредством кнопки Insert Table можно создать таблицу, содержащую гораздо больше строк и колонок, чем изначально отображается в прототипе: <br> при перемещении указателя мыши за край прототип автоматически расширяется. <br><i><b>Свойства таблицы </b> </i> <br> Значения, присваиваемые свойствам таблицы, определяют ее внешний вид. <br> 1. В верхнюю левую ячейку созданной нами таблицы введите число 5.<br> Нажмите клавишу , чтобы перейти в ячейку, расположенную справа, и введите следующее предложение: <br> Это достаточно длинное предложение. Ваша таблица должна выглядеть так, как показано на следующем рисунке. Ширина данной таблицы достигает почти 100% от ширины окна.</p><p>2. Нажмите дважды клавишу со стрелкой вниз, чтобы переместить курсор за пределы таблицы. Всгавьте после таблицы три пустые строки, трижды нажав клавишу . <br><i><b>Примечание </b> </i><br> Если установить курсор в последней ячейке и нажать клавишу , в таблицу будет добавлена новая строка, а курсор переместится в первую ячейку новой строки. <br> 3. Активизируйте команду Table подменю Insert меню Table и отключите опцию Specify Width в нижней части диалогового окна (одноименное поле ввода станет недоступным). Нажмите кнопку ОК. В результате появится вторая таблица, ширина которой намного меньше, чем у первой. <br> 4. Введите число 1 в левую ячейку первой строки таблицы, нажмите клавишу , вследствие чего курсор переместится во вторую ячейку первой строки, и введите предложение. Это достаточно длинное предложение <br> Перейдите в левую ячейку второй строки с помощью клавиши и ведите число 2. Нажмите еще раз клавишу (курсор переместится в правую ячейку второй строки) и введите предложение: Это просто предложение <br> Ширина каждого столбца устанавливается в соответствии с самой длинной строкой в этом столбце (рис. 6.2).</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-104.jpg' height="138" width="190" loading=lazy></p><p>Рис. 6.2. Для верхней таблицы значение свойства Specify Width задано, а для нижней - не задано</p><p>5. Щелкните правой кнопкой мыши на второй таблице и в контекстном меню выберите команду Table Properties, вследствие чего откроется одноименное диалоговое окно, изображенное на рис. 6.3. Как и в диалоговом окне, открываемом посредством команды Table подменю Insert меню Table (рис. 6.1), в нем можно установить такие параметры таблицы, как выравнивание, толщина разделительных и ограничительных линий таблицы, величина интервалов между краями ячейки и ее содержимым, интервал между смежными ячейками и ширина таблицы. Кроме того, предоставлена возможность определить высоту таблицы, выбрать цвет для сплошного фона таблицы или фоновое изображение, указать цвет для разделительных линий. В поле списка Float можно задать, в какую сторону сместить таблицу - вправо или влево, чтобы расположить слева или справа от таблицы текст или изображение. По умолчанию в поле Float выбран пункт Default. Согласно этой установке текст может располагаться только под таблицей или над ней.</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-105.jpg' height="112" width="120" loading=lazy></p><p>Рис 6 3 Диалоговое окно Table Properties</p><p>6. Установите следующие значения для свойств таблицы: Border Size - 5, Cell Padding - 6, Cell Spacing - 8. Подтвердите установки щелчком на кнопке ОК. Ваша таблица должна выглядеть так, как показано на следующем рисунке. <span>Выполните щелчок правой кнопкой мыши на правой ячейке первой строки верхней таблицы (рис 6 2) и в контекстном меню выберите команду Cell Properties Откроется одноименное диалоговое окно (рис 6 4) Содержащиеся в нем элементы описаны в табл 6.2. </p><p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-106.jpg' height="132" width="146" loading=lazy></p><p>Рис 6.4. Диалоговое окно Cell Properties </p><p>Таблица 6.2. Свойства ячейки </p><table align="left" border="1" id="table51"><tr><td align="center"> <b><i> <span>Элемент диалогового<br> окна Cell Properties </span> </i> </b> </td> <td align="center" width="462"> <b><i> Функция </i> </b> </td> </tr><tr><td> Horizontal Ahgnment </td> <td width="462"> <span>Выравнивание содержимого ячейки по горизонтали Возможны следующие варианты Left (по левому краю), Center (по центру), Right (по правому краю). По умолчанию задано выравнивание по левому краю </span> </td> </tr><tr><td> Vertical Alignment </td> <td width="462"> <span>Выравнивание содержимого ячейки по вертикали Возможны следующие варианты Тор (по верхнему краю), Middle (по центру), Baseline (выравнивание содержимого ячейки по опорной линии), Bottom (по нижнему краю)По умолчанию задано выравнивание по центру </span> </td> </tr><tr><td> Rows Spanned </td> <td width="462"> <span>В этом поле указывается, на сколько строк вы хотите растянуть данную ячейку </span> </td> </tr><tr><td> Columns Spanned </td> <td width="462"> <span>В этом поле указывается, на сколько столбцов вы хотите растянуть данную ячейку </span> </td> </tr><tr><td> Header Cell </td> <td width="462"> <span>Форматирование ячейки как заголовка строки или столбца (тексту ячейки назначается полужирное начертание) </span> </td> </tr><tr><td> No Wrap </td> <td width="462"> <span>Запрет расстановки переносов в пределах ячейки в Web-броузере; в противном случае текст разбивается, если окно броузера слишком узкое для его полного отображения </span> </td> </tr><tr><td> Specify Width </td> <td width="462"> <span>Определение высоты ячейки в пикселях или в процентах от общей высоты таблицы (только в том случае, если активна опция Specify Height). Если указанная опция выключена, высота ячейки автоматически меняется таким образом, чтобы вводимый текст или размещаемый в ней объект поместился полностью </span> </td> </tr><tr><td> Borders </td> <td width="462"> <span>В этой области окна можно определить цвет для разделительных и ограничительных линий, которые могут быть как одноцветными, так и двухцветными. В первом случае используйте поле ввода Border, во втором - два любых поля из трех предложенных. В последнем случае рамка получается объемной </span> </td> </tr><tr><td> Background </td> <td width="462"> <span>Создание фона для ячейки (как цветного однотонного, так и содержащего изображения) </span> </td> </tr></table> <br clear="all"> <p>Значения свойств можно изменить как у одной ячейки, так и у выделенного диапазона. </p><p><i><b>Примечание </b> </i> </p><p>При изменении ширины ячейки следите за тем, чтобы общая ширина ячеек в строке не превысила 100%, иначе ячейки таблицы будут отображаться неверно. </p><p>1. В поле списка Horizontal Alignment диалогового окна Cell Properties выберите пункт Center (выравнивание по центру), а в поле Vertical<br> Alignment - пункт Top (выравнивание по верхнему краю). В поле Border Size введите значение 1. Подтвердите установки, щелкнув на кнопке ОК.<br> В результате изменится способ расположения данных в ячейке, а толщина разделительных и ограничительных линий станет равной одному пикселю.<br> 2. Выделите нижнюю строку таблицы и щелкните правой кнопкой мыши. В контекстном меню выберите команду Cell Properties. Введите значение 2 в поле Columns Spanned и щелкните на кнопке ОК. В результате таблица должна выглядеть так, как показано ниже. Крайняя левая ячейка будет перекрывать две верхние, но справа должна быть дополнительная ячейка. </p><p><i><b>Примечание </b> </i> <br> Выделить определенное число ячеек внутри таблицы можно следующим образом: расположите указатель мыши слева от ячейки, с которой вы начнете выделение, и, когда он примет вид стрелки, направленной вправо вверх, нажмите левую кнопку манипулятора и выделите необходимые ячейки. <br><i><b>Примечание </b> </i> <br> Столбцы созданной вами таблицы могут иметь иную ширину, чем те, что показаны на рисунке. Это обуславливается различиями в разрешении мониторов. <br> 3. Нажмите комбинацию клавиш или активизируйте команду Undo Edit Properties меню Edit, чтобы отменить изменения. <br> 4. Выделите первую строку верхней таблицы, откройте диалоговое окно Cell Properties и введите в поле Rows Spanned значение 2. В завершение щелкните на кнопке ОК. Две верхние ячейки сместятся влево, а две нижние -- вправо.</p><p>5. Щелкните на кнопке Undo панели инструментов. Перейдите в левую ячейку первой строки верхней таблицы и откройте диалоговое окно Cell Properties. Установите опцию Specify Width и активизируйте переключатель In Pixels, чтобы получить возможность самостоятельно указать ширину ячейки в пикселях (поле ввода Specify Width станет доступным). Введите значение 40 в поле ввода Specify Width и щелкните на кнопке ОК. Размеры обеих ячеек в первом столбце увеличатся.</p><p>7. Активизируйте кнопку Undo, щелкните на правой ячейке второй строки и откройте меню Table. Данное меню содержит четыре подменю. Команды меню Table описаны в табл. 6.3.</p><table align="left" border="1" id="table52" width="815"><tr><td colspan="2"> <p><b> <span><i>Таблица 6.3. Команды меню Table </i> </span> </b></p> </td> </tr><tr><td align="center" width="278"> <b><i> Команда </i> </b> </td> <td align="center" width="521"> <b><i> Описание </i> </b> </td> </tr><tr><td width="278"> Draw Table </td> <td width="521"> <span>Позволяет начертить таблицу подобно тому, как это выполняется карандашом на листе бумаги </span> </td> </tr><tr><td width="278"> Table подменю Insert </td> <td width="521"> <span>При активизации данной команды открывается диалоговое окно Insert Table. В нем можно задать параметры создаваемой таблицы, которая будет вставлена в той позиции, где находится курсор (если курсор расположен в ячейке другой таблицы, вторая таблица разместится в ней) </span> </td> </tr><tr><td width="278"> <span>Insert Rows Or Columns подменю Insert </span> </td> <td width="521"> <span>В диалоговом окне Insert Rows Or Columns определяется коли чество строк и столбцов, которые можно вставить выше, ниже,правее или левее выделенной области </span> </td> </tr><tr><td width="278"> Cell подменю Insert </td> <td width="521"> <span>Вставляет новую ячейку слева от выделенной ячейки, которая смещается вправо </span> </td> </tr><tr><td width="278"> Caption подменю Insert </td> <td width="521"> <span>Предназначена для вставки пустой строки над таблицей. Данная строка связана с таблицей: при выделении или удалении таблицы заголовок также выделяется или удаляется. По умолчаниюдля заголовка таблицы установлено выравнивание по центру, но его можно выровнять по левому или по правому краю </span> </td> </tr><tr><td width="278"> Delete Cells </td> <td width="521"> <span>Служит для удаления выделенных ячеек </span> </td> </tr><tr><td width="278"> Merge Cells </td> <td width="521"> <span>Позволяет объединить несколько ячеек как в строке, так и в столбце </span> </td> </tr><tr><td width="278"> Split Cells </td> <td width="521"> <span>В диалоговом окне Split Cell можно задать разделение выделенных ячеек как на строки, так и на столбцы </span> </td> </tr><tr><td width="278"> <span>Cell, Row, Column, Table подменю Select </span> </td> <td width="521"> <span>Первая команда служит для выделения текущей ячейки, вторая - текущей строки, третья - текущего столбца, а четвертая - всей таблицы </span> </td> </tr><tr><td width="278"> <span>Distribute Rows Evenly, Distribute Columns Evenly </span> </td> <td width="521"> <span>Первая команда позволяет установить одинаковую ширину для выделенных строк, а вторая - для выделенных столбцов </span> </td> </tr><tr><td width="278"> Autofit </td> <td width="521"> <span>Уменьшает длину каждого столбца до тех размеров, которые непосредственно занимает находящаяся в них информация. Активизация данной команды приводит к тем же последствиям, что и отключение опции Specify Width в диалоговом окне Insert Table, т.е. длина ячеек автоматически будет меняться в зависимости от длины вводимого текста или длины размещаемого в них объекта </span> </td> </tr><tr><td width="278"> <span>Text To Table подменю Convert </span> </td> <td width="521"> <span>Позволяет преобразовать выделенный текст в таблицу. При активизации этой команды открывается диалоговое окно для выбора разделительного символа. Для разделения содержимого столбцов следует использовать запятые, а для разделения строк - маркеры абзацев </span> </td> </tr><tr><td width="278"> <span>Table To Text подменю Convert </span> </td> <td width="521"> <span>Позволяет преобразовать табличные данные в текст, при этом содержимое каждой ячейки образует отдельный абзац </span> </td> </tr><tr><td width="278"> <span>Caption, Cell, Table подменю Properties </span> </td> <td width="521"> <span>Эти три команды предоставляют доступ к окнам свойств заглавия таблицы (Caption Properties), выделенного диапазона (Cell Properties) и таблицы (Table Properties) </span> </td> </tr></table><br clear="all"><p><i><b>Примечание </b> </i><br> Чтобы выделить несколько несмежных ячеек, при выполнении щелчков на ячейках удерживайте нажатой клавишу <br> Меню Table. Рассмотрим подробнее некоторые команды меню Table, описанные в табл. 6.3 <br> 1. Активизируйте команду Table подменю Insert В открывшемся диалоговом окне нажмите кнопку ОК, не изменяя установки по умолчанию В результате в ячейке появится таблица из двух строк и двух колонок.</p> <p><i><b>Примечание </b> </i> <br> Когда мы создавали вторую таблицу (этап 3 второго упражнения данной главы), то в окне Insert Table отключили опцию Specify Width На этапе 1 третьего упражнения в поле Border Size окна Table Properties ввели значение 1. В Frontpage эти установки были сохранены, поэтому при создании новой таблицы в окне Insert Table no умолчанию будет отключена опция Specify Width, а в поле Border Size будет присутствовать значение 1. <br> 1. Выполните щелчок сначала на кнопке Undo, а затем в левой ячейке первой строки таблицы. Выберите команду Rows Or Columns (строки или столбцы) подменю Insert В результате откроется одноименное диалоговое окно</p> <p>Согласитесь с установками по умолчанию установлены переключатели Rows и Below Selection (ниже выбранной области), а в поле Number Of Rows (число строк) введено значение 1. Щелкните на кнопке ОК. Под первой строкой таблицы появится новая строка <br> 3. Снова активизируйте команду Insert Rows Or Columns подменю Insert Установите переключатели Columns и Left Of Selections (слева от выбранной области) После этою щелкните на кнопке OK Полученная таблица должна выглядеть так, как показано на следующем рисунке</p> <p>4. Активизируйте команду Cell подменю Insert В результате в таблицу будет вставлена новая ячейка, а расположенная справа ячейка сместится за пределы строки вправо Курсор автоматически устанавливается в новой ячейке</p> <p>Чтобы выделить ячейку, активизируйте команду Cell подменю Select (выделить ячейку) или нажмите клавишу при выполнении щелчка на ячейке Для удаления ячеек предназначена команда Delete Cell <br> 5. Активизируйте команду Caption подменю Insert Курсор разместится над таблицей по центру Введите следующее предложение. Это заголовок таблицы <br> 6. Выделите нижнюю строку в первой таблице Затем выберите команду Merge Cells (объединить ячейки) В результате в нижней строке будут удалены все разделительные линии между ячейками</p> <p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-114.jpg' height="34" width="193" loading=lazy></p> <p>7. Выполните щелчок на крайней правой ячейке первой строки и активизируйте команду Split Cells (разделить ячейки) Откроется диалоговое окно Split Cells</p> <p>Согласитесь с усгановками по умолчанию и щелкните на кнопке ОК. Указанная ячейка будет разделена на две</p> <p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-116.jpg' height="36" width="194" loading=lazy></p> <p>8. Активизируйте команду Table подменю Select и нажмите клавишу . Таблица будег удалена. Щелкните на кнопке Undo, чтобы восстановить ее. <br><i><b>Примечание </b> </i> <br> Существует еще один способ выделения таблицы" выполните двойной щелчок, слева от таблицы (те ее пределов) <br> 9. Откройте диалоговое окно Table Properties и в поле ввода Border Size укажите -значение 0. Щелкните на кнопке ОК. В результате границы таблицы будут обозначены пунктирными линиями. <br><i><b>Рисование таблицы </b> </i> <br> До сих пор вы создавали таблицы, используя команду Table подменю Insert меню Table. В этом случае юблица формируется автоматически в соответствии с установленными значениями свойств. После создания таблицы вы изменяли эти значения в диалоговом окне Tab!c Pioperties, добавляли и удаляли столбцы и строки, объединяли ячейки и т.д. посредством команд чсню Tabie. Frontpage предлапш еще один способ создания и редактирования таблиц, согласно которому для обработки таблиц употребляются кнопки панели инструментов Л able. Кнопка Draw Table (рисовать таблицу) позволяет вручную начертить таблицу. Кнопка Eraser (ластик) служит для удаления разде тигельных л1:ний меладу ячейками Остальные кнопки дублируют соответствующие команды меню Table <br> 1. Установите курсор в пустой строке между двумя таблицами, после чего нажмите дважды юивишу и один раз клавишу со стрелкой вверх. <br><i><b>Примечание </b> </i> <br> Целесообразно оставлять пустую строку между таблицами при их создании, поскольку в Frontpage трудно вставлять строки между таблицами. Легче убрать лишние по завершении верстки. <br> 1. В меню Table активизируйте команду Draw Table. В результате появится панель инструментов Table, а указатель мыши приобретет вид карандаша. В табл. 6 4 описаны кнопки панели инструментов Table <br> 3. Установите указатель мыши между дьумя существующими таблицами в левой части страницы и переместите его сначала по горизонтали до половины страницы, а затем вниз на расстояние, которое равно высоте второй таблицы. <br> Глава 6. Таблицы и кадры lul <br> 4. Разместите указатель мыши на верхней границе таблицы, у левого угла. Переместите указатель по горизонтали на расстояние, равное половине длины таблицы. Сместите его вниз до нижней границы. Теперь таблица имеет два столбца. <br> 5. Создайте три строки в правом столбце (высота строк может быть произвольной). <br> 6. Выделите второй столбец таблицы. Щелкните на кнопке Distribute Rows Evenly (равномерно распределить строки) панели инструментов, вследствие чего все три строки приобретут одинаковую высоту.</p> <p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-117.jpg' height="34" width="105" loading=lazy></p> <p>7. Нарисуйте линию, разделяющую вторую строку правого столбца на две части. <br> 8. Проведите две линии, разделяющие нижнюю строку в правом столбце на три части. Ширина первой новой ячейки устанавливается равной ширине ячейки, расположенной сверху</p> <p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-118.jpg' height="37" width="106" loading=lazy></p> <p>9. Установите указатель на правой границе первого столбца. В результате указатель приобретет вид двунаправленной стрелки <br> 10. Сместите границу столбца вправо, чтобы расширить его. <br> 11. Активизируйте кнопку Erase на панели инструментов Table. Указатель мыши приобретет вид ластика Проведите ластиком перпендикулярно линии, которая разделяет крайнюю правую и среднюю ячейки в нижней строке. В результате эта разделительная линия исчезнет (см ниже).</p> <p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-119.jpg' height="36" width="104" loading=lazy></p> <p>12. Еще раз щелкните на кнопке Eraser (восстановится обычный вид указателя мыши). Установите указатель на верхней границе второго столбца Когда указатель превратится в маленькую черную стрелку, направленную вниз, выполните щелчок, чтобы выделить столбец. <br> 13. Нажмите клавишу и сместите указатель вправо, расположив его над крайним столбцом. Как только вы выполните щелчок, будут выделены два крайних столбца. <br> 14. Щелкните на кнопке Distribute Columns Evenly (равномерно распределить столбцы) панели инструментов. Полученная в результате таблица изображена ниже.</p> <p>15. Выделите таблицу, воспользовавшись командой Table подменю Select меню Table, и нажмите клавишу , чтобы удалить ее. <br> Таблица 6 4. Кнопки панели инструментов Table</p> <p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-121.jpg' height="142" width="192" loading=lazy></p> <p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-122.jpg' height="91" width="192" loading=lazy></p> <p>Выполненные нами упражнения призваны продемонстрировать, насколько широки возможное ги FiontPage в плане создания таблиц Все операции осуществляются в режиме WYSIWYG на любом этапе работы вы видите, как создаваемая таблица будег выглядеть в броузере.</p> <p><i><b>Импортирование текстовой информации в таблицу. </b> </i></p> <p>Для тою чтобы корректно импортировать текст в таблицу, он должен быть подготовлен соответствующим образом фрагменты текста, помещаемые в смежные ячейки таблицы, должны быть отделены один от другого специальными символами (разделителями), например запятыми. Чаще всего в качестве разделителей используют знаки пунктуации. Далее выполните следующую последовательность действии: <br> 1. Выполните щелчок под нижней таблицей, нажмите клавишу </p> <p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-123.jpg' height="84" width="194" loading=lazy></p> <p>2. Выделите введенный текст; меню 1 T able и активизкруйте команду text To T able Подменю Comen * <br> 3. В загрузившемся диалоговом окне Convert Text To Table установите переключатель Other, удалитe точки в расположенном справа поле и введите точку с запятой Щелкните на кнопке ОК В результате текст будет импортирован в таблицу (рис 6.5.)</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-124.jpg' height="143" width="179" loading=lazy></p><p>Рис 6.5. Таблица, созданная на основе тестовой информации</p><p><i><b>Примечание </b> </i><br> HTML не поддерживает символы табуляции Если вы конвертируете в таблицу текстовую информацию, в которой табуляторы использованы для разделения массивов информации, эти символы будут удалены, вследствие чего таблица будет создана неправильно. Вместо табуляторов следует применять знак пунктуации, который в текстовом файле не употребляется. В настоящей примере использована точка с запятой, поскольку текст содержит запятые и дефисы. Альтернативным знаком является маркер абзаца * Вы можете захотеть импортировать в таблицу содержимое текстового файла Но сначала вы должны импортировать текст из файла нд страниц) активизировав команду File меню Insert При этом следует помнить, что Frontpage некорректно импортирует кирилический текст (с латинским у него проблем не возникает) Поэтому, если вы хотите извлечь из файла подобный текст и разместить его на странице откройте файл в каком либо текстовом редакторе например Notepad, и перенесите текст на страницу с помощью буфера обмена - Прим. ред. <br> 4. Выделите нижнюю (пусгую) строку в таблице, если таковая имеется, и удалите ее. <br> 5. Щелкните правой кнопкой мыши на таблице и активизируйте команду Table Properties контекстного меню. В поле списка Alignment открывшегося диалогового окна выберите элемент Center, затем выключите опцию Specify Width В поле Cell Padding введите значение 4, указав таким образом интервал между краями ячейки и ее содержимым Выполнив все перечисленные установки, щелкните на кнопке ОК. <br> 6. Выделите isepxmolo строку, щелкните на ней правой кнопкой мыши и откроите диалоговое окно Cell Properties В этом окне установите опцию Header Cell и в поле списка Horizontal Alignment выберите пункт Left. В завершение нажмите кнопку ОК. <br> 7. В меню Table активизируйте команду Caption подменю Insert. Щелкните на кнопке Bold панели инструментов Formatting. Вводимый заголовок табчицы будет иметь жирное начертание. Введите, например, следующий заголовок. Ф.И.О. и год рождения сотрудников <br> 8. Выделите первую строку таблицы и щелкните на поле списка Fill Color (цвет заполнения) панели инструментов Table. В открывшемся списке выберите цвет Aqua (третий слева квадрат во втором ряду) и нажмите кнопку ОК.</p><p>9. Выделите оставшиеся строки в таблице и откройте диалоговое окно Cell Properties. Укажите желтый цвет в поле списка Color в области Back-ground, а в поле списка Horizontal Alignment выберите пункт Center.<br> Щелкните на кнопке ОК Полученная в результате таблица должна выглядеть так, как показано на рис. 6.6. <br> 10. Щелкните на кнопке Save, чтобы сохранить созданные таблицы. <br> 11. В меню File выберите команду Preview In Browser. В загрузившемся диалоговом окне выберите броузер Internet Explorer 5.0 и щелкните на кнопке Preview. На рис. 6.7 представлена домашняя страница Web-узла Test Tables, содержащая созданную нами таблицу. Если вы используете другой броузер, откройте данную страницу в нем и посмотрите, как будет отображаться созданная нами таблица. <br> В броузерах последних версий расширены средства поддержки таблиц. Ранее существовали значительные различия между способами отображения таблиц в разных броузерах. Некоторые броузеры не поддерживали их вовсе. Вы должны просмотреть свою работу в различных броузерах и оценить, как выглядят в них ваши таблицы. В данный момент на рынке броузеров доминируют продукты фирм Netscape и Microsoft. В этих двух броузерах достаточно хорошо осуществляется поддержка таблиц.</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-126.jpg' height="105" width="187" loading=lazy></p><p>Рис. 6.6. Окончательный вариант таблицы (режим просмотра Page)</p><p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-127.jpg' height="108" width="188" loading=lazy></p><p>Рис. 6.7. Окончательный вариант таблицы (Internet Explorer 5.0)</p><p><i><b><span>Использование таблиц при оформлении Web-страницы </span> </b> </i></p><p>Таблицы удобно использовать для разделения страницы на области, в которых будет представлена информация.<br> Выполните следующие действия:<br> 1. В режиме просмотра Page создайте новую страницу. Вставьте одну пустую строку в начале страницы. <br> 2. Активизируйте команду Clip Art подменю Picture меню Insert. Загрузится диалоговое Clip Art Gallery. Прокрутите содержимое окна вниз, чтобы увидеть пиктограмму Places. Щелкните на ней два раза. В окне будут представлены изображения, относящиеся к рубрике Places. Выберите изображение с памятником архитектуры Тадж-Махал и на появившейся панели нажмите кнопку Insert Clip. Изображение будет помещено на страницу. <br> 3. Расположите курсор под изображением и введите следующий текст: "Памятник индийской архитектуры. Мавзолей султана Шах-Джахана и его жены. Расположен в 2 километрах от города Агра. Пятикупольное сооружение из белого мрамора с мозаикой из цветных камней. Высота составляет 74 метра. К Тадж-Махалу примыкают четыре минарета и сад. С этим образцом индо-мусульманской архитектуры знакомит картина известного русского художника В.В. Верещагина, побывавшего в Индии." <br> 4. Выделите введенный текст. Нажмите комбинацию клавиш , чтобы скопировать текст в буфер обмена. Расположите курсор в конце последнего предложения и вставьте пробел. Нажмите комбинацию клавиш . В результате будет увеличен текстовый массив, что позволит в дальнейшем достигнуть требуемого результата - окружить рисунок текстом. <br> 5. Переместите указатель в начало страницы. Активизируйте команду Table подменю Insert меню Table. В загрузившемся окне в поле Rows введите значение 2, в поле Columns -1, в поле Border Size - 0, выключите опцию Specify Width. Новая таблица займет место графического изображения и текста, которые сместятся вниз. Результат представлен на следующем рисунке.</p><p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-128.jpg' height="108" width="179" loading=lazy></p><p>6. Перетяните изображение в верхнюю строку таблицы. <br> 7. В нижнюю строку таблицы введите название памятника" Тадж-Махал Задайте для текста жирное начертание и выровняйте его по центру габтацы, щелкнув соответственно на кнопках Bold и Center панели инс грументов Formatting <br> 8 Откройте диалоговое окно Table Properties и выделите пункт Left в поле списка Float Щелкните на кнопке ОК. В результате текст разместится вокруг таблицы. В текстовых прочее сорах WOT эффект называется обтеканием</p><p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-129.jpg' height="105" width="176" loading=lazy></p><p>9 Сохраните страницу, присвоив ей имя Tatj _Mahal и заголовок Тадж-Махал В меню File активизируйте команду Preview In Browser Выберите броузер и щелкните на кнопке Pieview На рис 6 8 страница отображена в броузере Internet Explorer 5 О <br> Как вы могли убедиться, с помощью таблиц удобно выравнивать рисунки и подписи Создайте несколько страниц на основе шаблонов, в которых используются таблицы, и вы получите подтверждение того, насколько это мощное средство представления информации</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-130.jpg' height="104" width="189" loading=lazy></p><p>Рис 6.8. Обтекание изображения текстом</p><p>У вас могут быть свои идеи относительно применения таблиц на Web-странице Реализуйте их Экспериментируйте до тех пор, пока не достигнете необходимою результата Только таким путем вы сможете получить удачнооформленную страницу</p><p><i><b>Работа с кадрами </b> </i></p><p>Klapbi, как и таблицы служат для размещения информации в отдельных об гостях страницы Кадры - это окна размещенные на Web-странице и предназначенные для отображения других Web-страниц На странице можно расположить любое количество кадров С помощью кадров очень удобно представлять информацию на Web-узле со сложной системой рубрикации В этом случае следует создать страницу с двумя кадрами кадром оглавления и основным кадром Кадр оглавления содержит перечень рубрик, которые являются ссылками. При активизации рубрики-ссылки в основной кадр загружается соответствующая страница.<br> Далее вы выполните простой учебный пример, целью которого является продемонстрировать принципы работы с кадрами (в этом примере будет всего три рубрики). Данный пример мы посвятим памятникам архитектуры. <br> 1. Создайте новый одностраничный Web-узел и присвойте ему имя Frames. В режиме просмотра Page активизируйте команду Page подменю New меню File. В загрузившемся диалоговом окне New перейдите на вкладку Frame Pages, на которой представлены шаблоны страниц с кадрами (рис. 6.9).<br> По умолчанию выбран шаблон Banner and Contents. В области Preview представлена композиция страницы, которая будет создана на основе данного шаблона, а в области Description приводится описание шаблона. Последовательно выберите каждый из шаблонов, чтобы прочитать их описание и выяснить, какие же страницы могут быть созданы на их основе.</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-131.jpg' height="126" width="169" loading=lazy></p><p>Рис. 6.9. Диалоговое окно New (вкладка Frame Pages)</p><p>2. После ознакомления с возможностями шаблонов выберите шаблон Header, Footer and Contents. Щелкните на кнопке ОК.<br> В результате будет создана страница, содержащая четыре кадра: кадр с верхним колонтитулом (верхний кадр), кадр оглавления слева, основной кадр и кадр нижнего колонтитула (нижний кадр) (рис. 6.10). Каждый кадр содержит две кнопки: Set Initial Page (используется для выбора начальной страницы, т.е. страницы, которая первой отображается в кадре после <br> загрузки страницы кадров в броузер) и New Page (щелчок на кнопке New<br> Page приводит к созданию пустой начальной страницы).</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-132.jpg' height="137" width="189" loading=lazy></p><p>Рис. 6.10. Страница с кадрами, созданная на основе шаблона Header, Footer and Contents</p><p>3. Щелкните на кнопке New Page в верхнем кадре. В результате в кадре будет создана новая пустая страница. <br><i><b>Примечание </b> </i> <br> Для того чтобы в качестве начальной страницы кадра использовать уже существующую страницу, необходимо выполнить следующее: в этом кадре щелкнуть на кнопке Set Initial Page; в загрузившемся диалоговом окне Create Hyperlink выбрать нужную страницу.закрыть окно посредством кнопки ОК. <br> 4. Щелкните правой кнопкой на странице в верхнем кадре и в контекстном меню выберите команду Shared Borders. В загрузившемся одноименном диалоговом окне по умолчанию установлен переключатель Current Page (не изменяйте эту установку). Если установлены какие-то опции, выключите их.</p><p><i><b>Примечание </b> </i><br> Кадры - это средство навигации, альтернативное общим областям. Поэтому при наличии кадров на Web-узле общие области не используются. <br> 5. На странице в верхнем кадре введите заголовок "Памятники архитектуры". Присвойте заголовку стиль абзаца Heading 2 и выровняйте его по центру. <br> 6. Щелкните на кнопке New Page в нижнем кадре. На созданной странице введите следующее предложение: "С вопросами и замечаниями обращайтесь: webmaster@domen.com". Выделите введенный текст и в поле списка Font Size на панели инструментов Formatting выберите значение 2. Размер шрифта введенного предложения станет равным 10 пунктам. <br> 7. Создайте новую страницу в кадре оглавления (левый кадр). Введите следующие три строки текста (после ввода очередной строки нажимайте клавишу ): <br> Акрополь <br> Пирамиды <br> Тадж-Махал <br> 8. Создайте новую страницу в основном кадре, щелкнув на кнопке New Page. Нажмите клавишу , чтобы создать пустую строку. Во второй строке введите следующее предложение: "Добро пожаловать в мир архитектуры!". Присвойте введенному тексту стиль абзаца Heading 1 и выровняйте по центру страницы. Придайте тексту курсивное начертание (выделите его и нажмите кнопку Italic на панели инструментов Formatting). <br> Итак, начальные страницы всех кадров созданы. Далее мы внесем изменения в начальную страницу кадра оглавления. <br> 9. Щелкните на кнопке New Page панели инструментов Standard. Будет создана новая пустая страница без кадров. Активизируйте команду Clip Art подменю Picture меню Insert. Загрузится диалоговое окно Clip Art Gallery. В поле Search For Clips введите название памятника архитектуры: <br> Acropolis. По прошествии некоторого времени будут представлены результаты поиска (см ниже) - изображение Акрополя. Выберите изображение и на появившейся панели нажмите кнопку Insert Clip. Изображение будет помещено на страницу.</p><p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-133.jpg' height="131" width="133" loading=lazy></p><p>10. Создайте две новые пустые страницы и разместите на них еще дваизображения памятников архитектуры из библиотеки Clip Art: на первой - египетские пирамиды, на второй - Тадж-Махал. В первом случае в окне Clip Art Gallery в качестве критерия поиска введите Pyramids, во втором - Taj Mahal. <br> 11. Перейдите на страницу с изображением Акрополя. Нажмите кнопку Save. В диалоговом окне Save укажите имя файла страницы Acropolis. htm и измените предлагаемый по умолчанию заголовок на Акрополь. Щелкните на кнопке Save. Загрузится диалоговое окно Save Embedded File. Щелкните на кнопке Change Folder. В одноименном окне выберите папку Images. Закройте оба окна посредством кнопок ОК. Файл изображения будет сохранен в папке Images <br> 12. Сохраните страницы с изображениями пирамид и дворца Тадж-Махал. В первом случае в качестве имени файла страницы и заголовка укажите Pyramids htm и Пирамиды, во втором - Taj_Mahal.htm и Тадж-Махал. <br> 13. Перейдите на страницу в кадре оглавления. Выделите слово Acropolis и нажмите на кнопку Hyperlink панели инструментов Standard. В окне Create Hyperlink выберите страницу Acropolis.htm. В поле Target Frame должна присутствовать запись Page Default (main). Это означает, что страница (Acropolis.htm), на которую создается гиперссылка, будет открыта в основном кадре. Изменить кадр назначения можно в диалоговом окне Target Frame, которое открывается при щелчке на кнопке Change Target Frame. В списке Common Targets этого окна необходимо выбрать соответствующий пункт. В частности, если выбран пункт New Window, то при щелчке на гиперссылке страница будет открыта в новом окне броузера, а если указан пункт Same Frame - страница будет открыта в том же кадре, в котором находится гиперссылка</p><p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-134.jpg' height="105" width="114" loading=lazy></p><p>14. Руководствуясь предыдущим пунктом, в кадре оглавления создайте еще две гиперссылки на страницы Pyramids.htm и Taj_Mahal.htm, включив в них, соответственно, слова Пирамиды и Тадж-Махал Таким образом, в кадре оглавления созданы три гиперссылки, при активизации которых соответствующие страницы будут открываться в основном кадре. <br> 15. Мы закончили создание страницы с кадрами. Результат представлен на рис. 6.11. <br> 16. В меню File выберите команду Save. Загрузится диалоговое окно Save As, в котором будет предложено сохранить страницу, расположенную в верхнем кадре. В правой части окна Save As показана композиция страницы с кадрами (кадру, который сохраняется в настоящий момент, соответствует закрашенная область). Присвойте странице имя Fr_header Щелкните на кнопке Save. Далее в окне Save As будет предложено сохранить страницу нижнего кадра (страницы кадров сохраняются в той последовательности, в которой они создавались). Присвойте странице нижнего кадра имя FrJboter, кадра оглавления - Fr_contents, основного кадра - Fr_main В завершение будет предложено сохранить страницу с кадрами. Присвойте ей имя Frames и заголовок "Памятники архитектуры" (рис. 6.12)</p><p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-135.jpg' height="137" width="189" loading=lazy></p><p>Рис. 6.11. Страница с кадрами в режиме просмотра Page</p><p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-136.jpg' height="116" width="178" loading=lazy></p><p>Рис. 6.12. Процедура сохранения страницы с кадрами</p><p>17. Загрузите страницу с кадрами в броузер и посмотрите, как она будет<br> выглядеть. </p><p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-138.jpg' height="141" width="169" loading=lazy></p><p>Рис. 6.13. Страница с кадрами Web-узла Frames в броузере </p><p>Кадр обладает рядом свойств, которыми вы можете управлять. Значения свойств кадра устанавливаются в диалоговом окне Frame Properties (свойства кадра). Чтобы открыть это окно, щелкните правой кнопкой на кадре (например, на кадре оглавления) и активизируйте команду Frame Properties контекстного меню. В результате откроется диалоговое окно, изображенное на рис. 6.14. Элементы окна Frame Properties описаны в табл. 6.5. </p><p>Таблица 6.5. Свойства кадра </p><table align="left" border="1" id="table54"><tr><td align="center"> <b><i> Элемент </i> </b> </td> <td align="center"> <b><i> Описание </i> </b> </td> </tr><tr><td> Name (имя) </td> <td> <span>При создании гиперссылки на странице кадров вы должны указать в диалоговом окне Create Hyperiink имя кадра, в который загрузится соответствующая страница при активизации этой ссылки </span> </td> </tr><tr><td> <span>Initial Page Начальная страница </span> </td> <td> <span>В данном поле ввода указывают, какая страница будет отображаться в кадре первой при его загрузке </span> </td> </tr><tr><td> <span>Frame Size (размер кадра) </span> </td> <td> <span>Данная область содержит два поля ввода -Width (ширина) и Row Height (высота строки) Здесь могут быть заданы значения в пикселях, в относительных единицах или в процентах от размера окна броузера </span> </td> </tr><tr><td> Margins (поля) </td> <td> <span>В этой области определяется величина полей кадра (интервалов между содержимым страницы и границами кадра) и пикселях </span> </td> </tr><tr><td> <span>Resizable In Browser (изменять размер в броузере) </span> </td> <td> <span>Если эта опция установлена, пользователь может изменить размер кадра в своем броузере </span> </td> </tr><tr><td> <span>Show Scrollbars (отображать полосы прокрутки) </span> </td> <td> <span>Данное поле списка содержит три пункта If Needed (если необходимо) - полосы прокрутки отображаются только в том случае, если содержимое страницы не помещается в окне, Never (никогда) - полосы прокрутки не отображаются, не зависимо от объема информации на странице, Always (постоянно) - полосы прокрутки отображаются постоянно Какой из этих пунктов следует выбрать, зависит от содержимого страниц, которые будут загружаться в кадр Например, если кадр расположен в верхней части страницы и содержит общую для всех страниц информацию (допустим, навигационную панель), следует выбрать пункт Nevei Следуег учитывать, что способ отображения страницы зависит от разрешения экрана Поэтому оптимальный вариант - выбор пункта If Needed Если же вы хотите предоставить пользователю максимум возможностей для просмотра информации в кадре, выберите пункт Always </span> </td> </tr></table><br clear="all"><p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-137.jpg' height="110" width="113" loading=lazy></p> <p>Щелкните на кнопке Frames Page в диалоговом окне Frame Properties, вследствие чего откроется диалоговое окно Page Properties. В поле ввода Frame Spacing задается толщина разделительных линий между кадрами на странице. Опция Show Borders определяет, будут ли отображаться линии между кадрами. </p> <p><img src='https://i0.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-139.jpg' height="65" width="130" loading=lazy></p> <p>На странице кадров можно создать дополнительные кадры. Выполните следующие действия: в режиме просмотра Page, удерживая нажатой клавишу , переместите верхнюю границу основного кадра немного вниз, после чего отпустите клавишу и кнопку мыши. В результате над основным кадром будет создан кадр (рис. 6.15), не содержащий страницу. </p> <p><img src='https://i2.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-140.jpg' height="131" width="159" loading=lazy></p> <p>Рис. 6.15. Новый кадр </p> <p>Надеемся, вы убедились, что кадры - очень удобное средство представления информации Одна из проблем, возникающих при работе с кадрами, связана с тем что не все броузеры поддерживают их Netscape Navigator поддерживает кадры, начиная с версии 2 0, a Internet Explorer - с версии 3 0 Поддержка кадров была введена в HTML 3 2 Некоторые пользователи по-прежнему применяют броузеры ранних версий Таким образом, следует учитывать, что, возможно, значительная часть вашей аудитории не сможет надлежащим образом просмотреть страницы с кадрами. Решение данной проблемы заключается в создании страницы No Flames (без кадров) Если пользовательский броузер не поддерживает кадры, вместо них отображается страница No Frames Frontpage автоматически формирует<br> страницу No Frames при создании страницы с кадрами Вы сможете убедиться в этом, щелкнув на вкладке No Frames в нижней части окна Frontpage когда открыта страница с кадрами На рис 6 16 показана страница No Frames, создаваемая по умолчанию На этой странице вы можете порекомендовать пользователю применять броузер, поддерживающий кадры. Следует также создать ссылки на те Web-узлы, откуда можно загрузить броузер, поддерживающий кадры (например, на Web-yзeл фирмы Microsoft, с которого можно загрузить броузер Internet Explorer 5.0) <br><b><i>Примечание </i> </b> <br> Для загрузки страницы с кадрами требуется больше времени, чем для загрузки обычной Web-страницы, так как в действительности выполняется загрузка нескольких страниц Использование кадров должно быть обоснованным</p> <p><img src='https://i1.wp.com/seo.matrixplus.ru/webgrasp/book/fp2000-141.jpg' height="90" width="168" loading=lazy></p> <p>Рис 6.16. Страница No Flames в режиме просмотра Pasu e</p> <p>Проектирование страниц кадров в Frontpage - несложное занятие, благодаря многочисленным функциональным возможностям, предоставляемым Frontpage, а также тому, что в Frontpage редактирование страницы осуществляется в режиме WYSIWYG</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div class="clear"></div> <div class="afterpage author_rank"> <div class="social"> <div class="expert-title">Поделись статьей:</div> <div style="float:left" class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetype="big"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> <div class="clear"></div> <div class="related_posts"> <div class="title">Похожие статьи<span></span></div> <ul> <div class='yarpp-related'> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/00ded253f9bcf272bab9ad93ed971ec4.jpg" alt="Обзор программы Elex-tech Скачать утилиту для удаления" title="Обзор программы Elex-tech Скачать утилиту для удаления" loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 апреля 2015</div> <a class="replace post_243" href="/free-key/yet-another-cleaner-chto-eto-za-programma-i-kak-ee-udalit-obzor-programmy-elex-tech-skachat/">Обзор программы Elex-tech Скачать утилиту для удаления</a> </div> </div> <div class="clear"></div> </li> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/57040708a5af5b0a2b85381702b1944d.jpg" alt="Как оживить «кирпич» Андроид — возвращаем к жизни «окирпиченный» смартфон" title="Как оживить «кирпич» Андроид — возвращаем к жизни «окирпиченный» смартфон" loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 апреля 2015</div> <a class="replace post_243" href="/kms-activator/kak-vosstanovit-polnyi-kirpich-samsung-kak-ozhivit-kirpich-android-vozvrashchaem-k/">Как оживить «кирпич» Андроид — возвращаем к жизни «окирпиченный» смартфон</a> </div> </div> <div class="clear"></div> </li> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/2d535f8a2b14e1aa1f25ae34a3204042.jpg" alt="Быстрая зарядка qualcomm quick charge 3" title="Быстрая зарядка qualcomm quick charge 3" loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 апреля 2015</div> <a class="replace post_243" href="/technical-preview/bystraya-zaryadka-qualcomm-quick-charge-3-0-zaryazhaemsya-bystro-tehnologii-bystroi/">Быстрая зарядка qualcomm quick charge 3</a> </div> </div> <div class="clear"></div> </li> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/2e3e89cbbb5edfdf08c6a3df52d01eb2.jpg" alt="Что такое сообщества вконтакте Вк поиск сообществ и групп" title="Что такое сообщества вконтакте Вк поиск сообществ и групп" loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 апреля 2015</div> <a class="replace post_243" href="/installation-on-a-computer/kak-naiti-interesnye-gruppy-vkontakte-chto-takoe-soobshchestva-vkontakte-vk/">Что такое сообщества вконтакте Вк поиск сообществ и групп</a> </div> </div> <div class="clear"></div> </li> </div> </ul> </div> <div class="clear"></div> <div class="clear"></div> <div class="bread_wrap" xmlns:v="http://rdf.data-vocabulary.org/#"> </div> <div class="clear"></div> </div> <div class="sidebar col-xs-12 col-md-3 col-lg-3"> <div class="aside nav podrubriki"><div class="first_title"></div><div class="subnavtitle">Типы<span></span></div><ul class="subnav"> <li><span class="asideli related-link" data-href="/category/faq/">Faq</span></li> <li><span class="asideli related-link" data-href="/category/comparison/">Сравнение</span></li> <li><span class="asideli related-link" data-href="/category/free-key/">Бесплатный ключ</span></li> <li><span class="asideli related-link" data-href="/category/technical-preview/">Technical Preview</span></li> <li><span class="asideli related-link" data-href="/category/news/">Новости</span></li> </div> <div class="clear"></div> <div class="sidebar_pop_articles"> <div class="title">Популярные статьи<span></span></div> <ul> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i0.wp.com/expertland.ru/wp-content/uploads/2018/02/Kak-perenesti-kontakty-s-Androida-na-Android-3.jpg" alt="Как скопировать контакты с Android на компьютер" title="Как скопировать контакты с Android на компьютер" loading=lazy> </div> </div> <div class="info"> <a href="/faq/kak-vygruzit-kontakty-iz-android-kak-skopirovat-kontakty-s-android/" class="replace post_87">Как скопировать контакты с Android на компьютер</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i0.wp.com/aff1.ru/images/new/mcwap.jpg" alt="Wap-Click партнерки — рейтинг лучших партнерских программ Вап партнерская программа" title="Wap-Click партнерки — рейтинг лучших партнерских программ Вап партнерская программа" loading=lazy> </div> </div> <div class="info"> <a href="/comparison/wap-click-partnerki-reiting-luchshih-partnerskih-programm-wap-click-partnerki/" class="replace post_87">Wap-Click партнерки — рейтинг лучших партнерских программ Вап партнерская программа</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i2.wp.com/znaikak.ru/design/pic/visred/pic2(4).png" alt="Можно ли найти потерянный телефон андроид" title="Можно ли найти потерянный телефон андроид" loading=lazy> </div> </div> <div class="info"> <a href="/technical-preview/mozhno-li-naiti-poteryannyi-telefon-android-zayavlenie-v-policiyu-naiti/" class="replace post_87">Можно ли найти потерянный телефон андроид</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i2.wp.com/img.mysku-st.ru/uploads/images/03/91/98/2015/09/13/160bea.jpg" alt="Как зайти в инженерное меню на мейзу" title="Как зайти в инженерное меню на мейзу" loading=lazy> </div> </div> <div class="info"> <a href="/technical-preview/inzhenernoe-menyu-meizu-m2-kak-zaiti-v-inzhenernoe-menyu-na-meizu-kak-sdelat-sbros/" class="replace post_87">Как зайти в инженерное меню на мейзу</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i2.wp.com/rulsmart.com/uploads/devices/hardreset/hotwtohardresetby_rulsmart.com_mini.jpg" alt="Почему телефон ZTE не загружается (не включается) Как исправить проблему включения телефона ZTE" title="Почему телефон ZTE не загружается (не включается) Как исправить проблему включения телефона ZTE" loading=lazy> </div> </div> <div class="info"> <a href="/kms-activator/ne-vklyuchaetsya-telefon-zte-chto-delat-pochemu-telefon-zte-ne-zagruzhaetsya-ne/" class="replace post_87">Почему телефон ZTE не загружается (не включается) Как исправить проблему включения телефона ZTE</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2012/3/16/1_525500c25d6b1525500c25d6f0.jpg" alt="Как открыть ммс сообщение" title="Как открыть ммс сообщение" loading=lazy> </div> </div> <div class="info"> <a href="/free-key/ne-prinimayutsya-mms-kak-otkryt-mms-soobshchenie-blizko-no-ne/" class="replace post_87">Как открыть ммс сообщение</a> </div> </div> <div class="clear"></div> </li> </ul> <div class="clear"></div> </div> <div class="clear"></div> <div class="sidebar_new_articles"> <div class="title">Новые статьи<span></span></div> <ul> <li> <a href="/news/ac3-ne-podderzhivaetsya-mx-player-etot-audio-format-ac3-ne-podderzhivaetsya/" class="replace post_1054">MX Player: этот аудио формат (AC3) не поддерживается</a> <div class="clear"></div> </li> <li> <a href="/technical-preview/postoyannye-zapominayushchie-ustroistva-pzu-princip-raboty-klassifikaciya-harakteristiki-postoyannoe/" class="replace post_1054">Постоянное запоминающее устройство (ПЗУ) Пзу содержит</a> <div class="clear"></div> </li> <li> <a href="/kms-activator/prakticheskie-raboty-v-redaktore-frontpage-prakticheskaya-rabota-na-frontpage/" class="replace post_1054">Практическая работа на Frontpage</a> <div class="clear"></div> </li> <li> <a href="/kms-activator/kak-vstavlyat-otkrytki-v-pismo-kak-vstavlyat-i-prosmatrivat/" class="replace post_1054">Как вставлять и просматривать анимированные изображения GIF в электронной почте Outlook?</a> <div class="clear"></div> </li> <li> <a href="/free-key/kriptovalyuta-dgb-est-li-perspektivy-rosta-chto-takoe-kriptovalyuta-digibyte-dgb/" class="replace post_1054">Что такое криптовалюта DigiByte (DGB) простыми словами?</a> <div class="clear"></div> </li> </ul> <div class="clear"></div> </div> <div class="clear"></div> <div class="sidebar_question"> </div><p></p><div class="clear"></div></div> </div> <div class="clear"></div> <div class="section morkovin-antireklama-sidebar Closure"><div id="smartrotator_ad_1610"></div></div> </div> <div class="clear"></div> <div class="clear"></div> </div> </div> <div class="clear"></div> <footer class="footer"> <div class="kartasajta"><a href="/sitemap.xml">Карта сайта</a></div> <div class="top_footer"> <div class="inner"> <div class="footer_col col-xs-6 col-sm-4 col-md-4"> <span data-href="/" class="related-link logo"> <div class="logo_text1"><img src="/uploads/logo.png" loading=lazy></div> </span> <div class="clear"></div> <p class="copyright"> © 2024 svd-komi.ru - Обзоры, сравнения, ОС<br /> <span></span> </p> </div> <div class="footer_col col-xs-12 col-sm-2 col-md-2"> <p class="foot_cat_title">Другое</p> <ul class="categories"> <li><span class="related-link" data-href="">О сайте</span></li> <li><span class="related-link" data-href="">Реклама</span></li> <li><span class="related-link" data-href="/feedback/">Контакты</span></li> </ul> </div> <div class="footer_col col-xs-6 col-sm-2 col-md-2 rubric_col"> <p class="foot_cat_title">Рубрики</p> <ul id="nav" class="categories"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/faq/">Faq</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/comparison/">Сравнение</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/free-key/">Бесплатный ключ</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/technical-preview/">Technical Preview</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/news/">Новости</a></li> </ul> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> </footer> <div id="toTop"></div> <script type="text/javascript" src="https://svd-komi.ru/wp-content/plugins/service_binet/ajax.js"></script><button id="responsive-menu-button" class="responsive-menu-button responsive-menu-boring responsive-menu-accessible" type="button" aria-label="Menu"> <span class="responsive-menu-box"> <span class="responsive-menu-inner"></span> </span> </button><div id="responsive-menu-container" class="slide-left" style="padding:20px;"> <ul> <li><a style="color:white;" href="/category/faq/">Faq</a></li> <li><a style="color:white;" href="/category/comparison/">Сравнение</a></li> <li><a style="color:white;" href="/category/free-key/">Бесплатный ключ</a></li> <li><a style="color:white;" href="/category/technical-preview/">Technical Preview</a></li> <li><a style="color:white;" href="/category/news/">Новости</a></li> </ul> </div> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript' src='https://svd-komi.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript'> /* <![CDATA[ */ var JQLBSettings = { "fitToScreen":"1","resizeSpeed":"400","displayDownloadLink":"0","navbarOnTop":"0","loopImages":"","resizeCenter":"","marginSize":"0","linkTarget":"","help":"","prevLinkTitle":"previous image","nextLinkTitle":"next image","prevLinkText":"\u00ab Previous","nextLinkText":"Next \u00bb","closeTitle":"close image gallery","image":"Image ","of":" of ","download":"Download","jqlb_overlay_opacity":"80","jqlb_overlay_color":"#000000","jqlb_overlay_close":"1","jqlb_border_width":"10","jqlb_border_color":"#ffffff","jqlb_border_radius":"0","jqlb_image_info_background_transparency":"100","jqlb_image_info_bg_color":"#ffffff","jqlb_image_info_text_color":"#000000","jqlb_image_info_text_fontsize":"10","jqlb_show_text_for_image":"1","jqlb_next_image_title":"next image","jqlb_previous_image_title":"previous image","jqlb_next_button_image":"http:\/\/svd-komi.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/next.gif","jqlb_previous_button_image":"http:\/\/svd-komi.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/prev.gif","jqlb_maximum_width":"","jqlb_maximum_height":"","jqlb_show_close_button":"1","jqlb_close_image_title":"close image gallery","jqlb_close_image_max_heght":"22","jqlb_image_for_close_lightbox":"http:\/\/svd-komi.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/closelabel.gif","jqlb_keyboard_navigation":"1","jqlb_popup_size_fix":"0"} ; /* ]]> */ </script> <script type='text/javascript' src='https://svd-komi.ru/wp-content/plugins/wp-lightbox-2/wp-lightbox-2.min.js?ver=1.3.4.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://svd-komi.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </body> <script src="https://svd-komi.ru/wp-content/themes/avada/js/jquery.jshowoff.min.js"></script> <script> (function($){ $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#toTop').fadeIn(100); } else { $('#toTop').fadeOut(100); } } ); $('#toTop').click(function() { $('body,html').animate({ scrollTop:0} ,400); } ); $('.navbar-toggle').click(function(e){ e.preventDefault(); $('#navbar').show(500); $('.wrapper, footer, body, .mobile_search').addClass('righted'); $('.navbar-toggle').fadeOut(500); } ); $('.mobile_close').click(function(e){ e.preventDefault(); $('#navbar').hide(500); $('.wrapper, footer, body, .mobile_search').removeClass('righted'); $('.navbar-toggle').fadeIn(500); } ); $('#features').jshowoff({ autoPlay: true, hoverPause: false, speed:3000, changeSpeed: 200, links: true, effect: 'fade', controls: false } ); } )(jQuery); </script> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> </html>
и